/* chasti.pet — soft, pink and femme, on a dark plum night.
   No webfonts by design: this app should never make an outbound request, so
   the rounded voice comes from ui-rounded where the platform has it and falls
   back gracefully where it doesn't.

   The variable names are inherited from two themes ago and kept on purpose:
   everything downstream already speaks them, so a repaint is this block and a
   handful of shapes. Read --brass as "the pink" and --steel as "panel". */

:root {
  /* Tells the browser this page is dark, which is the only way to reach the
     chrome CSS can't touch: scrollbars, the list a <select> drops down, and
     the background the browser paints behind an autofilled field. Without it
     those all arrive white. */
  color-scheme: dark;

  --ink:        #140A12;   /* the dark: plum, never grey */
  --ink-deep:   #0C060B;   /* under the panels, for depth */
  --steel:      #221320;   /* panels */
  --steel-soft: #2B1927;   /* panels that want to sit forward */
  --steel-edge: #46283E;
  --bone:       #FFEAF5;   /* primary text, warm not white */
  --bone-dim:   #C9A0BA;
  --brass:      #FF8FC4;   /* the pink: ears, live time, every accent */
  --brass-deep: #E4629F;
  --verdigris:  #94EBD4;   /* released / complete — mint, and a relief */
  --rust:       #FF8A9B;   /* emergency */
  --lilac:      #CDA8FF;   /* second accent: shackles, section heads */
  --cream:      #FFD9B0;   /* third accent, rare */
  --glow:       0 0 28px rgba(255, 143, 196, 0.22);
  --lift:       0 12px 30px rgba(8, 3, 7, 0.5);

  /* Nothing in here has a hard corner. */
  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   26px;
  --r-pill: 999px;

  --serif: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Quicksand,
           "Varela Round", Nunito, system-ui, sans-serif;
  --sans: ui-rounded, "SF Pro Rounded", Quicksand, "Varela Round", Nunito,
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Three soft lights in the dark: pink overhead, lilac low left, a warm
     blush low right. Fixed, so scrolling doesn't drag them around. */
  background:
    radial-gradient(80% 50% at 50% -8%, rgba(255, 143, 196, 0.20) 0%, transparent 70%) fixed,
    radial-gradient(60% 45% at 0% 95%, rgba(205, 168, 255, 0.14) 0%, transparent 70%) fixed,
    radial-gradient(55% 40% at 100% 80%, rgba(255, 217, 176, 0.08) 0%, transparent 70%) fixed,
    var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ---------------------------------------------------------------- header -- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  max-width: 46rem;
  margin: 0 auto;
  /* A ribbon rather than a rule: pink in the middle, gone at both ends. */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg,
      transparent, var(--steel-edge) 15%, var(--brass-deep) 50%,
      var(--steel-edge) 85%, transparent) 1;
}

.mark {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--bone);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.mark-tld { color: var(--brass); }

/* the ears: two pink triangles, and the whole logo. They twitch on hover. */
.mark-ears {
  position: relative;
  width: 22px; height: 12px;
  flex: none;
}
.mark-ears::before, .mark-ears::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 11px solid var(--brass);
  transition: transform 0.2s ease;
}
.mark-ears::before { left: 0; transform: rotate(-14deg); }
.mark-ears::after  { right: 0; transform: rotate(14deg); }
.mark:hover .mark-ears::before { transform: rotate(-26deg) translateY(-1px); }
.mark:hover .mark-ears::after  { transform: rotate(26deg) translateY(-1px); }

/* Wraps rather than overflowing: signed in as an admin this is ten items, and
   on a phone they will not fit on one line. */
/* Ten items once you're an admin. At the old size that overshot the bar by a
   single pixel and dropped "Sign out" onto a line of its own, so the type and
   the gaps are a touch tighter — enough for the whole row plus the admin link.
   It still wraps rather than overflowing on a phone. */
.bar nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.8rem;
}
.bar nav a, .linkish {
  color: var(--bone-dim);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.bar nav a:hover, .linkish:hover { color: var(--brass); }

/* The Discord mark. Sized to the cap height of the words beside it and given
   the same colours, so it reads as one more item in the row rather than a
   badge dropped into it. */
.nav-icon {
  display: inline-flex;
  align-items: center;
  color: var(--bone-dim);
}
.nav-icon:hover { color: var(--brass); }
.nav-icon .icon { display: block; }
.bar form { display: inline; }

.linkish {
  background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer;
}
.tiny { font-size: 0.75rem; }

/* ---------------------------------------------------------------- typing -- */

.display {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0.2rem 0 1.2rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--brass);
  margin: 0 0 0.75rem;
}

/* Every section is introduced by a little heart. It's that kind of site. */
.section-head {
  font-family: var(--serif);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--lilac);
  font-weight: 600;
  margin: 0 0 0.9rem;
}
.section-head::before { content: "♡ "; color: var(--brass); }

.muted { color: var(--bone-dim); }
.small { font-size: 0.82rem; }
.mono  { font-family: var(--mono); font-size: 0.85rem; }

/* Every link is the pink, visited or not — the browser's blue and purple have
   no business in here. One element's worth of specificity, and above every
   rule that names a class, so the mark, nav, tables, tabs, pagers and buttons
   below all still overrule it. An author colour beats :visited on its own. */
a {
  color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--bone); }

/* ------------------------------------------------------- the readout -------
   Signature element. Tabular figures, brass on steel, days dominant because a
   term can run to 999 of them.                                              */

.readout {
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 143, 196, 0.12), transparent 70%),
    linear-gradient(180deg, var(--steel-soft), var(--ink-deep));
  padding: 1.8rem 1.35rem 1.35rem;
  box-shadow: var(--lift), inset 0 1px 0 rgba(255, 234, 245, 0.06);
}

.clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--brass);
  margin: 0.4rem 0 1.4rem;
}

.clock .unit { display: flex; flex-direction: column; align-items: center; }
.clock b {
  font-size: clamp(2.1rem, 11vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: var(--glow);
}
.clock i {
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-top: 0.5rem;
}
.clock .colon {
  font-size: clamp(1.6rem, 8vw, 2.6rem);
  color: var(--brass-deep);
  line-height: 1;
  padding: 0 0.15rem;
}

.readout.is-done .clock { color: var(--verdigris); }

.track {
  height: 8px;
  background: rgba(70, 40, 62, 0.7);
  border-radius: var(--r-pill);
  position: relative;
  overflow: hidden;
}
.track-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--lilac), var(--brass));
  border-radius: var(--r-pill);
  box-shadow: 0 0 14px rgba(255, 143, 196, 0.5);
  transition: width 0.6s ease;
}
.readout.is-done .track-fill {
  background: linear-gradient(90deg, var(--verdigris), #BFF3E4);
  box-shadow: 0 0 14px rgba(148, 235, 212, 0.45);
}

.track-legend {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--bone-dim);
  margin: 0.6rem 0 0;
}

.note {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--steel-edge);
  font-family: var(--serif);
  font-size: 1.05rem;
}

/* ---------------------------------------------------------------- panels -- */

.panel {
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--steel-soft), var(--steel));
  box-shadow: var(--lift), inset 0 1px 0 rgba(255, 234, 245, 0.05);
  padding: 1.35rem;
}
.panel h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}
.narrow {
  max-width: 24rem;
  margin: 3rem auto 0;
  border-radius: var(--r-lg);
  box-shadow: var(--lift), var(--glow);
}
.open-panel { padding: 1.6rem 1.25rem; }

/* the seal: a hairline brass edge while sealed, verdigris once open */
.seal { border-left: 2px solid var(--brass); }
.seal.is-open { border-left-color: var(--verdigris); }

.combo {
  display: block;
  width: 100%;
  margin-top: 1rem;
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-sm);
}

/* -------------------------------------------------------------- counters -- */

.counter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.6rem;
}

.counter {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.9rem 0.9rem 0.8rem;
  background: linear-gradient(180deg, var(--steel-soft), var(--steel));
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-md);
  color: var(--bone);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.06s, box-shadow 0.15s;
}
.counter:hover {
  border-color: var(--brass-deep);
  box-shadow: 0 0 0 3px rgba(255, 143, 196, 0.10);
}
.counter:active { transform: translateY(1px); }

.counter-n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--brass);
}
.counter-label { font-size: 0.9rem; }
.counter-total {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--bone-dim);
}

.recent {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  border-top: 1px solid var(--steel-edge);
}
.recent li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(70,40,62,0.6);
  font-size: 0.85rem;
}
.recent-kind { flex: 0 0 7rem; }
.recent-time { flex: 1; font-family: var(--mono); font-size: 0.75rem; color: var(--bone-dim); }

/* ----------------------------------------------------------------- forms -- */

.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }

label { font-size: 0.85rem; color: var(--bone-dim); }
.field { display: flex; flex-direction: column; gap: 0.35rem; }

input[type="text"], input[type="password"], input[type="number"], input[type="file"],
input[type="url"], input[type="search"] {
  background: var(--ink-deep);
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-sm);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="url"]:focus, input[type="search"]:focus {
  border-color: var(--brass-deep);
  box-shadow: 0 0 0 3px rgba(255, 143, 196, 0.12);
}
.row input[type="number"] { width: 5.5rem; }
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
input[type="file"] { font-family: var(--sans); font-size: 0.85rem; padding: 0.45rem; }

/* The "Choose File" button inside a file input is drawn by the OS, so styling
   the input alone leaves a bright native button sitting in the middle of a
   dark panel — including on the combo field, which is the last place anything
   should look out of place. */
input[type="file"]::file-selector-button {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--bone);
  background: var(--steel-soft);
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.9rem;
  margin: 0 0.75rem 0 0;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
input[type="file"]::file-selector-button:hover {
  color: var(--brass);
  border-color: var(--brass-deep);
  background: rgba(255, 143, 196, 0.08);
}

/* Checkboxes and radios, drawn rather than tinted. `accent-color` only
   repaints the checked state and leaves the empty box the OS default, which
   on this background is a white square — so these are built from scratch.
   `appearance: none` also drops the native focus ring, hence the explicit one. */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  border: 1px solid var(--steel-edge);
  background-color: var(--ink-deep);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
input[type="checkbox"] { border-radius: 0.32rem; }
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--brass-deep); }

input[type="checkbox"]:checked {
  background-color: var(--brass);
  border-color: var(--brass);
  /* Ink-coloured tick, to match the text on a filled primary button. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232C0E1F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6'/%3E%3C/svg%3E");
  background-size: 76%;
  background-position: center;
  background-repeat: no-repeat;
}

input[type="radio"]:checked {
  border-color: var(--brass);
  background-image: radial-gradient(circle at center,
      var(--brass) 0 42%, transparent 45%);
}

input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled, input[type="radio"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Soft pills. The primary one is filled, because a button you're meant to
   press should look like a sweet. */
.btn {
  background: rgba(255, 234, 245, 0.04);
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-pill);
  color: var(--bone);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding: 0.6rem 1.3rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.08s;
}
.btn:hover { border-color: var(--brass); color: var(--brass); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(180deg, var(--brass), var(--brass-deep));
  border-color: transparent;
  color: #2C0E1F;
  box-shadow: 0 6px 18px rgba(228, 98, 159, 0.28);
}
.btn-primary:hover { color: #2C0E1F; border-color: transparent; filter: brightness(1.07); }

.btn-danger { border-color: var(--rust); color: var(--rust); background: rgba(255,138,155,0.06); }
.btn-danger:hover { background: rgba(255,138,155,0.12); border-color: var(--rust); color: var(--rust); }

.danger {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--steel-edge);
}
.danger summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
}
.danger p { color: var(--bone-dim); }

/* ---------------------------------------------------------------- tables -- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  /* The 1px gaps are the grid's own background showing through, so it doubles
     as the colour of any empty cell at the end of the last row. Kept soft for
     exactly that reason. */
  gap: 1px;
  background: rgba(70, 40, 62, 0.55);
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 0;
}
.figures > div { background: var(--steel); padding: 0.9rem 1rem; }
.figures dt {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.figures dd {
  margin: 0.35rem 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  color: var(--brass);
}
.figures dd small { font-size: 0.8rem; color: var(--bone-dim); }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--bone-dim);
  padding: 0 0.6rem 0.5rem 0;
  border-bottom: 1px solid var(--steel-edge);
}
.table td {
  padding: 0.55rem 0.6rem 0.55rem 0;
  border-bottom: 1px solid rgba(70,40,62,0.6);
}
.table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table a { color: var(--brass); }
.table form { display: inline; }

.tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.6rem;
  color: var(--bone-dim);
  background: rgba(255, 234, 245, 0.04);
}
.tag-live { border-color: var(--brass-deep); color: var(--brass); background: rgba(255,143,196,0.1); }
.tag-warn { border-color: var(--rust); color: var(--rust); }

/* One configured Discord channel. They stack up in Settings, and without a
   rule between them the checkbox lists run together into one long column. */
.hook {
  border-top: 1px solid var(--steel-edge);
  padding-top: 1.2rem;
  margin-top: 1.2rem;
}

.pager { display: flex; gap: 1.5rem; margin-top: 1.2rem; }
.pager a { color: var(--brass); text-decoration: none; font-size: 0.85rem; }

/* --------------------------------------------------------------- flashes -- */

.flashes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.flash {
  border-left: 3px solid var(--brass);
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(255,143,196,0.10), var(--steel) 45%);
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
}
.flash-error { border-left-color: var(--rust); }
.flash-ok { border-left-color: var(--verdigris); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------- new mechanics -- */

/* Hidden timer: a blind readout. Elapsed only, nothing about what's left. */
.clock-blind { flex-direction: column; gap: 0; }
.clock-blind b { font-size: clamp(2.4rem, 13vw, 4rem); }
.blind-note {
  text-align: center;
  color: var(--bone-dim);
  font-size: 0.85rem;
  margin: 0 0 1.2rem;
}
.track-blind { background: transparent; }
.track-hatch {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg, var(--brass-deep) 0 4px, transparent 4px 9px);
  opacity: 0.5;
}

/* Frozen: the cold end of the palette, still plum-friendly. */
.readout.is-frozen .clock { color: #A9C7FF; text-shadow: 0 0 24px rgba(169,199,255,0.3); }
.readout.is-frozen .track-fill { background: linear-gradient(90deg, #A9C7FF, #CDE1FF); }

.bounds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0.9rem 0 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
}
.bounds-cap { color: var(--verdigris); }

.opening { border-left: 2px solid var(--verdigris); }
.opening.is-overdue { border-left-color: var(--rust); }

.code {
  font-family: var(--mono);
  font-size: 2.2rem;
  letter-spacing: 0.35em;
  color: var(--brass);
  text-align: center;
  margin: 0.8rem 0 1.2rem;
  padding: 0.7rem;
  border: 1px dashed var(--brass-deep);
  border-radius: var(--r-sm);
}

.modes { display: grid; gap: 0.5rem; }
.mode {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--bone);
  font-size: 0.88rem;
}
.mode:has(input:checked) { border-color: var(--brass-deep); background: rgba(255,143,196,0.08); }
/* Nudged down so the control lines up with the first line of a wrapped label. */
.mode input { margin-top: 0.25rem; }
.mode b { font-weight: 600; }

.check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--bone);
  font-size: 0.88rem;
  margin: 0.6rem 0;
}

.group {
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-sm);
  padding: 0.9rem;
  margin: 0;
}
.group legend, .group summary {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding: 0 0.3rem;
}
.group summary { cursor: pointer; padding: 0; }
.group > *:not(summary):not(legend) { margin-top: 0.8rem; }
.group[hidden] { display: none; }

select {
  background: var(--ink);
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-sm);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.55rem 0.6rem;
  width: 100%;
}

.wheel-preview { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.wheel-preview li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(70,40,62,0.6);
  font-size: 0.82rem;
}

code {
  font-family: var(--mono);
  font-size: 0.8rem;
  background: var(--ink);
  padding: 0.1rem 0.3rem;
  border-radius: var(--r-sm);
}

.proofs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.8rem;
}
.proof { margin: 0; border: 1px solid var(--steel-edge); border-radius: var(--r-sm); overflow: hidden; }
.proof img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.proof figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.72rem;
  background: var(--steel);
}

/* ------------------------------------------------------- shared, community -- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--steel-edge);
  font-size: 0.85rem;
}
.tabs a { color: var(--bone-dim); text-decoration: none; }
.tabs a:hover { color: var(--bone); }
.tabs a.is-on { color: var(--brass); border-bottom: 1px solid var(--brass); }

/* The queue's own filters, sitting under the community row. Two bordered rows
   stacked would read as a box, so this one carries no rule of its own. */
.tabs-sub {
  border-bottom: 0;
  padding-bottom: 0;
  margin-top: -0.4rem;
  font-size: 0.8rem;
}

.nav-admin { color: var(--brass) !important; }

.figures-tight { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.figures-tight dd { font-size: 1.05rem; }

.quote { padding-left: 0.6rem; border-left: 2px solid var(--steel-edge); }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.is-muted td { opacity: 0.5; }

/* ---------------------------------------------------------------- profile -- */

.profile-head .display { margin: 0.2rem 0 0.4rem; }
.proof-locked {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--ink);
  text-align: center;
  padding: 1rem;
}
.vote-tally { font-family: var(--mono); font-size: 0.7rem; color: var(--bone-dim); }
.vote-tally.confirmed { color: var(--verdigris); }
.vote-tally.disputed { color: var(--rust); }

/* ------------------------------------------------------------------ queue -- */

.queue { display: flex; flex-direction: column; gap: 1.2rem; }
.queue-item { padding-bottom: 0.9rem; }
.queue-item.verdict-confirmed { border-left: 2px solid var(--verdigris); }
.queue-item.verdict-disputed { border-left: 2px solid var(--rust); }

.queue-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.7rem;
}
.queue-head a { color: var(--bone); text-decoration: none; font-family: var(--serif); }

.queue-photo {
  display: block;
  width: 100%;
  max-height: 26rem;
  object-fit: contain;
  background: var(--ink);
  border: 1px solid var(--steel-edge);
}

.queue-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0.8rem 0 0;
}
.queue-meta dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bone-dim); }
.queue-meta dd { margin: 0; font-size: 0.85rem; }

.votes {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--steel-edge);
}
.votes form { display: inline; }
.vote {
  background: transparent;
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-sm);
  color: var(--bone-dim);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.35rem 0.7rem;
}
.vote:hover { color: var(--bone); border-color: var(--bone-dim); }
.vote.up.is-on { color: var(--verdigris); border-color: var(--verdigris); }
.vote.down.is-on { color: var(--rust); border-color: var(--rust); }
.score { font-size: 0.78rem; color: var(--bone-dim); margin-left: auto; }

/* ------------------------------------------------------------------ share -- */

.links { display: flex; flex-direction: column; gap: 1rem; }
.link-card.is-revoked, .link-card.is-expired { opacity: 0.6; }

.link-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.link-head h2 { margin: 0; }

.share-url { margin: 0.6rem 0; }
.share-url input {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-sm);
  color: var(--brass);
  font-size: 0.78rem;
  padding: 0.5rem 0.6rem;
}

.link-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  list-style: none;
  margin: 0.6rem 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--bone-dim);
}

.link-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.link-actions .row { margin: 0; }

/* ----------------------------------------------------------------- splash -- */

/* The front door. Same grid and the same parts as every signed-in page — a
   marketing skin would be a second design to keep in sync. */

a.btn { display: inline-block; text-decoration: none; }

.hero { padding: 2rem 0 0.5rem; }

.hero-display {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.3rem, 9vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
}
.hero-display em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brass) 15%, var(--lilac) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The gradient eats the glow, so it goes underneath as a drop shadow. */
  filter: drop-shadow(0 0 22px rgba(255, 143, 196, 0.35));
}

.hero-sub {
  max-width: 34rem;
  margin: 0 0 1.6rem;
  font-size: 1.05rem;
  color: var(--bone-dim);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.hero-cta p { margin: 0; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  font-family: var(--serif);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--bone-dim);
}
.hero-meta li::before { content: "♡ "; color: var(--brass); }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.7rem;
}
.feature { position: relative; transition: transform 0.15s, border-color 0.15s; }
.feature:hover { transform: translateY(-2px); border-color: var(--brass-deep); }
.feature h2 { margin-bottom: 0.35rem; }
.feature p { margin: 0; }
.feature-n {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--brass-deep);
}

.feature-lead {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 0.8rem;
}

.panel-rust { border-left: 2px solid var(--rust); }

.ticks {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--bone-dim);
}
.ticks li { padding-left: 1.3rem; text-indent: -1.3rem; }
.ticks li::before { content: "♡ "; color: var(--brass); }

.hero-foot {
  border-top: 1px solid var(--steel-edge);
  padding-top: 1.6rem;
}
.hero-foot p { max-width: 34rem; margin: 0 0 1.3rem; }