/* Shared palette, controls and night treatment for all four pages. */
:root {
  --surface: #fffef9;
  --surface-soft: #eeefe7;
  --field: #ffffffb3;
  --quiet: #626f61;
  --gold: #b2864e;
  --icon-filter: brightness(0) saturate(100%);
  --scene-night: 0;
  --scene-filter: none;
}
:root[data-theme="dark"] {
  --paper: #141e1d;
  --ink: #e7e8d9;
  --muted: #a8b2a3;
  --red: #eda887;
  --line: #35443e;
  --green: #294d40;
  --surface: #1d2a26;
  --surface-soft: #23332b;
  --field: #192621;
  --quiet: #afbea9;
  --gold: #d4b57b;
  --icon-filter: brightness(0) invert(1);
  --scene-night: 0.42;
  --scene-filter: saturate(0.75) brightness(0.76);
  color-scheme: dark;
}
body {
  transition:
    background-color 0.25s,
    color 0.25s;
}
button {
  background: var(--surface);
  min-height: 36px;
}
.provided-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  filter: var(--icon-filter);
  opacity: 0.8;
}
button .provided-icon,
a .provided-icon {
  margin-right: 6px;
}
button[aria-label] .provided-icon {
  margin: 0;
}
.primary .provided-icon,
.side-nav .active .provided-icon {
  filter: brightness(0) invert(1);
  opacity: 1;
}
.tools #logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  padding: 7px;
}
.tools {
  gap: 12px;
}
.preference {
  display: flex;
  align-items: center;
  gap: 5px;
}
.preference select,
.theme-picker {
  max-width: 105px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  padding: 6px 8px;
  font-size: 11px;
}
.preference-label {
  color: var(--muted);
  font-size: 10px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -80px;
  left: 20px;
  z-index: 100;
  background: var(--surface);
  padding: 12px;
  border: 1px solid var(--red);
  border-radius: 8px;
}
.skip-link:focus {
  top: 12px;
}
.brand-mark {
  width: 36px;
  height: 40px;
  color: var(--red);
}
.brand .brand-text {
  display: block;
}
.brand img {
  width: 32px;
}
.link-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.message,
.msg {
  color: var(--red);
}
.preview-banner {
  margin-bottom: 18px;
}
.primary {
  color: #fff;
  background: #294f40;
  border-color: #294f40;
}
.primary:hover {
  background: #3f6650;
  color: #fff;
}
.hero-art {
  filter: var(--scene-filter);
  transition: filter 0.4s;
}
.hero {
  isolation: isolate;
}
.hero:after,
.login-landscape:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #102326;
  opacity: var(--scene-night);
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
.hero-copy,
.hero-controls,
.scene-caption {
  z-index: 1;
}
.hero-copy p {
  color: var(--quiet);
}
[data-theme="dark"] .hero {
  background: #263a33;
  border-color: var(--line);
}
[data-theme="dark"] .hero-copy {
  color: #f4e2b9;
}
[data-theme="dark"] .hero-copy .eyebrow {
  color: #e3b77c;
}
[data-theme="dark"] .hero-copy p {
  color: #dbc6a6;
}
[data-theme="dark"] .hero-controls button {
  background: #23372ee6;
  border-color: #596957;
  color: #e1e3cc;
}
[data-theme="dark"] .hero-controls button[aria-pressed="true"] {
  background: #b8c49d;
  color: #1d2a24;
}
[data-theme="dark"] .scene-caption {
  color: #e1d7b5;
}
[data-theme="dark"] .sidebar {
  background: #1b2923;
  border-color: var(--line);
}
[data-theme="dark"] .brand small,
[data-theme="dark"] .user span,
[data-theme="dark"] .season-note,
[data-theme="dark"] .tools select,
[data-theme="dark"] .pill {
  color: var(--muted);
}
[data-theme="dark"] .nav-label {
  color: #9ba98e;
}
[data-theme="dark"] .season-note {
  border-color: var(--line);
}
[data-theme="dark"] .season-note b {
  color: #d2ae83;
}
[data-theme="dark"] .avatar {
  background: #394d3b;
}
[data-theme="dark"] .pill {
  border-color: var(--line);
}
[data-theme="dark"] .season-date {
  color: #debc91;
}
[data-theme="dark"] .season-date small,
[data-theme="dark"] .footer,
[data-theme="dark"] .results-note {
  color: var(--muted);
}
[data-theme="dark"] .search input,
[data-theme="dark"] dialog input {
  background: var(--field);
  color: var(--ink);
}
[data-theme="dark"] th {
  background: var(--surface-soft);
  color: var(--muted);
}
[data-theme="dark"] .upload-card {
  background: var(--surface);
  border-color: var(--line);
}
[data-theme="dark"] .upload-card > p,
[data-theme="dark"] .upload-note,
[data-theme="dark"] .dropzone small,
[data-theme="dark"] .mini-note,
[data-theme="dark"] .section-head h2 small {
  color: var(--muted);
}
[data-theme="dark"] .dropzone {
  background: var(--field);
  border-color: #657658;
}
[data-theme="dark"] .dropzone.over {
  background: #324831;
  border-color: #b2bc8d;
}
[data-theme="dark"] .file-icon {
  background: #3b382a;
  color: #dcc89c;
}
[data-theme="dark"] .file-icon.folder {
  background: #33442e;
  color: #c1d2a7;
}
[data-theme="dark"] .file-icon.photo {
  background: #4b362c;
  color: #e1b28c;
}
[data-theme="dark"] .level-tag {
  background: #293b2e;
  color: #c1cdb0;
  border-color: #47563c;
}
[data-theme="dark"] .queue li {
  border-color: var(--line);
}
[data-theme="dark"] .queue .qstatus,
[data-theme="dark"] .mini-note strong {
  color: var(--muted);
}
[data-theme="dark"] .queue .failed {
  color: #f2ad93;
}
[data-theme="dark"] .preview-banner {
  background: #3f3526;
  color: #efd5a8;
}
.motion-paused .animated,
.page-inactive .animated,
.scene-paused .animated,
.scene-outside .animated,
.motion-paused .leaf-drift,
.motion-paused .tree-sway,
.motion-paused .walker,
.page-inactive .leaf-drift,
.page-inactive .tree-sway,
.page-inactive .walker {
  animation-play-state: paused !important;
}
@media (max-width: 560px) {
  .tools {
    gap: 6px;
  }
  .tools select {
    font-size: 10px;
    padding: 6px;
    max-width: 87px;
  }
  .preference-label {
    display: none;
  }
  .topbar .trail span {
    display: none;
  }
  .pill {
    display: none;
  }
  .tools #logout {
    width: 32px;
    min-height: 32px;
    padding: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* A twilight palette for the city itself, with warm windows and a moonlit sky. */
:root {
  --city-top: #e7e6d5;
  --city-bottom: #f5e7ce;
  --city-ground: #cfceaf;
  --city-path: #ede4cc;
  --city-sun: #f6e7bb;
}
:root[data-theme="dark"] {
  --city-top: #2b3a30;
  --city-bottom: #35483e;
  --city-ground: #536047;
  --city-path: #6a7051;
  --city-sun: #e0d6a6;
}
.login-city,
.hero-art {
  filter: none;
}
.login-city #login-sky stop:first-child,
.hero-art #sky stop:first-child {
  stop-color: var(--city-top);
}
.login-city #login-sky stop:last-child,
.hero-art #sky stop:last-child {
  stop-color: var(--city-bottom);
}
.login-city > path[fill="#cfceaf"],
.hero-art > path[fill="#cfceaf"] {
  fill: var(--city-ground);
}
.login-city > path[stroke="#ede4cc"],
.hero-art > path[stroke="#ede4cc"] {
  stroke: var(--city-path);
}
.login-city > circle:first-of-type,
.hero-art > circle:first-of-type {
  fill: var(--city-sun);
}
.login-landscape:after {
  opacity: 0;
}
.hero:after {
  opacity: 0;
}
.night-stars {
  display: none;
}
[data-theme="dark"] .night-stars {
  display: block;
}
[data-theme="dark"] .login-city > g:not(.night-stars),
[data-theme="dark"] .hero-art > g:not(.night-stars) {
  filter: brightness(0.82) saturate(0.8);
}
[data-theme="dark"] .login-city #login-windows rect,
[data-theme="dark"] .hero-art #windows rect {
  fill: #ddc290;
}
[data-theme="dark"] .lamp-glow {
  opacity: 0.75;
  filter: drop-shadow(0 0 6px #f4d694);
}
.star-twinkle {
  animation: starTwinkle 5s ease-in-out infinite alternate;
}
@keyframes starTwinkle {
  to {
    opacity: 0.25;
  }
}
button.primary,
.section-head button.primary {
  background: #294f40;
  border-color: #294f40;
  color: #fff;
}
button.primary:hover,
.section-head button.primary:hover {
  background: #3f6650;
  border-color: #3f6650;
  color: #fff;
}

/* Align icon boxes with text, including buttons that contain only one image. */
.icon-text-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1.4; }
.icon-text-button > .provided-icon { display:block; flex:none; margin:0!important; }
#mkdir,#refresh,#keys-refresh,#keys-register,#public-refresh { display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1.4; min-height:36px; }
#refresh { width:36px; height:36px; padding:8px; }
#keys-refresh,#keys-register { padding:8px 12px; }
/* Focus lives on the actual text field, with no detached outer ring. */
:is(input:not([type]),input[type="text"],input[type="password"],input[type="search"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],textarea):focus {
  outline:none!important; outline-offset:0!important; border-color:#ca845b!important; box-shadow:inset 0 0 0 1px #ca845b!important;
}
:is(input,textarea)[aria-invalid="true"]:focus { border-color:var(--red)!important; box-shadow:inset 0 0 0 1px var(--red)!important; }

#keys-refresh,#public-refresh { gap:8px; padding:7px 10px; font-size:11px; }
#keys-refresh > .provided-icon,#public-refresh > .provided-icon { width:18px; height:18px; }