/* Dark theme. Colors are RGB channels so Tailwind opacity modifiers (bg-accent/15) work. */
:root {
  color-scheme: dark;
  --bg: 2 6 23;
  --panel: 15 23 42;
  --border: 30 41 59;
  --text: 226 232 240;
  --muted: 148 163 184;
  --accent: 45 212 191;
  --on-accent: 4 47 46;
  --warn: 251 191 36;
  --danger: 248 113 113;
  --ok: 74 222 128;
}

/* NSFW mode: hot and reddish, with a glow at the top */
.nsfw {
  --bg: 26 4 11;
  --panel: 46 9 21;
  --border: 88 22 42;
  --muted: 212 160 172;
  --accent: 251 113 133;
  --on-accent: 76 5 25;
}
body.nsfw {
  background-image: radial-gradient(ellipse at top, rgb(190 18 60 / 0.35), transparent 60%),
                    radial-gradient(ellipse at bottom right, rgb(234 88 12 / 0.15), transparent 50%);
  background-attachment: fixed;
}

/* A photo shown large over the darkened page (base.html). Protected photos (User.photo_save_allowed): the viewer's
   name and the day across each photo, also when shown large (only there --mark is set); no saving menu or dragging;
   blurred while the window is not in front and when printed */
.protect a:has(> img[data-blur]), .protect .media-frame, .photo-box > span {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.protect a:has(> img[data-blur])::after, .protect .media-frame::after, .photo-box > span::after {
  content: var(--mark);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-30deg);
  font: 600 9px/1 sans-serif;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.6);
  text-shadow: 0 0 2px rgb(0 0 0 / 0.9);
  pointer-events: none;
}
.photo-box > span::after {
  font-size: clamp(16px, 4vw, 36px);
}
.photo-box {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 0.85);
}
.photo-box img {
  max-width: 95vw;
  max-height: 95vh;
}
.protect img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}
html.away .protect img, html.away .protect video {
  filter: blur(24px) !important;
}
@media print {
  .protect img {
    visibility: hidden;
  }
}

/* NSFW mode: photos stay blurred until tapped (base.html), against looks over the shoulder */
body.nsfw [data-blur]:not(.sharp) {
  filter: blur(12px);
  cursor: zoom-in;
}

/* Dropdowns: one look everywhere, an own arrow in the accent colour (drawn with two gradients so it follows the
   theme) and a clear focus; where the browser allows it (appearance: base-select) the open list takes the app's
   colours too, elsewhere the system list stays */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem !important;
  background-image: linear-gradient(45deg, transparent 50%, rgb(var(--accent)) 50%),
                    linear-gradient(135deg, rgb(var(--accent)) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
select:not([multiple]):hover {
  border-color: rgb(var(--accent) / 0.5);
}
select:not([multiple]):focus-visible {
  outline: none;
  border-color: rgb(var(--accent));
  box-shadow: 0 0 0 3px rgb(var(--accent) / 0.25);
}
select option {
  background-color: rgb(var(--panel));
  color: rgb(var(--text));
}
@supports (appearance: base-select) {
  select:not([multiple]), select:not([multiple])::picker(select) {
    appearance: base-select;
  }
  select:not([multiple])::picker-icon {
    display: none;
  }
  select:not([multiple])::picker(select) {
    margin-top: 4px;
    padding: 4px;
    border: 1px solid rgb(var(--border));
    border-radius: 0.5rem;
    background-color: rgb(var(--panel));
    box-shadow: 0 12px 28px rgb(0 0 0 / 0.45);
  }
  select:not([multiple]) option {
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
  }
  select:not([multiple]) option:hover, select:not([multiple]) option:focus-visible {
    background-color: rgb(var(--accent) / 0.15);
    outline: none;
  }
  select:not([multiple]) option:checked {
    color: rgb(var(--accent));
    font-weight: 600;
  }
  select:not([multiple]) option::checkmark {
    color: rgb(var(--accent));
  }
}

/* Suggestion lists of fields with a datalist (suggest.js): in the app's colours instead of the browser's */
.suggest-wrap {
  position: relative;
  display: block;
}
.suggest-list {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 4px;
  max-height: 15rem;
  overflow: auto;
  padding: 4px;
  border: 1px solid rgb(var(--border));
  border-radius: 0.5rem;
  background-color: rgb(var(--panel));
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.45);
  font-size: 0.875rem;
  list-style: none;
}
.suggest-list li {
  padding: 0.4rem 0.75rem;
  border-radius: 0.375rem;
  color: rgb(var(--text));
  cursor: pointer;
}
.suggest-list li:hover, .suggest-list li[aria-selected="true"] {
  background-color: rgb(var(--accent) / 0.15);
  color: rgb(var(--accent));
}