/* =====================================================================
   Wanderpiece admin dashboard.

   One stylesheet, no framework, no build step.

   PALETTE — these eight are the whole vocabulary. There is no pure black,
   no pure white, no green and no red anywhere in this file, including
   status badges, validation messages and destructive buttons.

     Ink        #0E1418   deep background
     Slate      #18222A   surface
     Steel      #22303A   elevated surface
     Mist       #8A99A3   secondary text
     Amber      #E3B778   progress / emphasis, sparingly
     Sage       #7FA8A0   accent — also "success"
     Terracotta #C97B5A   accent — also "destructive" and "error"
     Paper      #F0E9DE   primary text

   Success reads as Sage, warning as Amber, destructive and error as
   Terracotta. Nothing else carries meaning through colour alone: every
   state also has a label or an icon.

   NOTE: the CSP has no 'unsafe-inline' on style-src, so there are no
   style="" attributes in any view. Everything lives here.
   ===================================================================== */

:root {
  --ink:        #0E1418;
  --slate:      #18222A;
  --steel:      #22303A;
  --mist:       #8A99A3;
  --amber:      #E3B778;
  --sage:       #7FA8A0;
  --terracotta: #C97B5A;
  --paper:      #F0E9DE;

  /* Derived tints. Every one is a palette colour at reduced opacity over
     the background — no new hues are introduced. */
  --line:        rgba(138, 153, 163, 0.16);
  --line-strong: rgba(138, 153, 163, 0.28);
  --sage-wash:       rgba(127, 168, 160, 0.12);
  --amber-wash:      rgba(227, 183, 120, 0.12);
  --terracotta-wash: rgba(201, 123, 90, 0.12);
  --mist-wash:       rgba(138, 153, 163, 0.10);

  --radius:    10px;
  --radius-sm: 6px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --sidebar-w: 232px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Any rule that sets `display` on a class outranks the user-agent's
   `[hidden] { display: none }`, so an element toggled with the hidden
   attribute stays visible. .bulkbar and .bulkbar__tag are both display:flex,
   which is exactly that trap. This restores the attribute's meaning. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--sage); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--amber);
  background: var(--mist-wash);
  padding: 0.1em 0.36em;
  border-radius: var(--radius-sm);
}

/* Visible focus everywhere. Keyboard navigation must never be invisible. */
:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--steel);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--slate);
  border-right: 1px solid var(--line);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}

/* The mark is two overlapping squares — a puzzle tile, drawn in CSS so
   there is no image request and nothing for the CSP to allow. */
.sidebar__mark {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 3px;
  background: var(--amber);
  box-shadow: 5px 5px 0 0 var(--sage);
}

.sidebar__name {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--mist);
  font-size: 14px;
  transition: background 120ms ease, color 120ms ease;
}
.nav__item:hover {
  background: var(--steel);
  color: var(--paper);
  text-decoration: none;
}
.nav__item.is-active {
  background: var(--steel);
  color: var(--paper);
  /* The active marker is a bar as well as a colour, so the current section
     is still identifiable without colour perception. */
  box-shadow: inset 2px 0 0 0 var(--amber);
}

.icon { width: 17px; height: 17px; flex: none; }

.sidebar__foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.who { padding: 0 8px; }
.who__name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.who__meta { font-size: 12px; color: var(--mist); }

.sidebar__links { display: flex; flex-direction: column; gap: 2px; }

.linky {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--mist);
  border-radius: var(--radius-sm);
}
.linky:hover { color: var(--paper); background: var(--steel); text-decoration: none; }

.logout-form { margin: 0; }

.main {
  padding: 30px 34px 56px;
  max-width: 1180px;
  width: 100%;
}

/* ---------------------------------------------------------------------
   Page furniture
   --------------------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page-sub {
  margin: 4px 0 0;
  color: var(--mist);
  font-size: 14px;
}

.card {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
}

.card--quiet { background: transparent; }

.card__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}

.card__sub {
  margin: 0 0 18px;
  color: var(--mist);
  font-size: 14px;
}

/* ---------------------------------------------------------------------
   Stats
   --------------------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.stat {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.stat__value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--mist);
}

/* ---------------------------------------------------------------------
   Health checks
   --------------------------------------------------------------------- */

.checks { list-style: none; margin: 0; padding: 0; }

.check {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.check:first-child { border-top: 0; padding-top: 0; }

.check__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  margin-top: 7px;
  background: var(--mist);
}
.check--ok   .check__dot { background: var(--sage); }
.check--warn .check__dot { background: var(--amber); }
.check--fail .check__dot { background: var(--terracotta); }

.check__body { flex: 1; min-width: 0; }

.check__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.check__label { font-size: 14px; font-weight: 500; }

.check__value {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--mist);
  text-align: right;
  overflow-wrap: anywhere;
}
.check--ok   .check__value { color: var(--sage); }
.check--warn .check__value { color: var(--amber); }
.check--fail .check__value { color: var(--terracotta); }

.check__detail {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--mist);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  border: 1px solid transparent;
}
.badge--sage       { color: var(--sage);       background: var(--sage-wash);       border-color: rgba(127,168,160,0.3); }
.badge--amber      { color: var(--amber);      background: var(--amber-wash);      border-color: rgba(227,183,120,0.3); }
.badge--terracotta { color: var(--terracotta); background: var(--terracotta-wash); border-color: rgba(201,123,90,0.3); }
.badge--mist       { color: var(--mist);       background: var(--mist-wash);       border-color: var(--line-strong); }
.badge--steel      { color: var(--mist);       background: var(--steel);           border-color: var(--line-strong); }

/* ---------------------------------------------------------------------
   Flash messages
   --------------------------------------------------------------------- */

.flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  border: 1px solid var(--line-strong);
  background: var(--mist-wash);
  color: var(--paper);
}
.flash .icon { margin-top: 2px; }

/* Success is Sage, warning is Amber, error is Terracotta. No green, no red. */
.flash--success { border-color: rgba(127,168,160,0.35); background: var(--sage-wash); }
.flash--success .icon { color: var(--sage); }
.flash--warning { border-color: rgba(227,183,120,0.35); background: var(--amber-wash); }
.flash--warning .icon { color: var(--amber); }
.flash--error   { border-color: rgba(201,123,90,0.4);  background: var(--terracotta-wash); }
.flash--error   .icon { color: var(--terracotta); }
.flash--info    .icon { color: var(--mist); }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 16px; max-width: 420px; }
.form--inline { max-width: 520px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label { font-size: 13px; font-weight: 500; color: var(--paper); }

.field__hint { margin: 0; font-size: 12.5px; color: var(--mist); line-height: 1.5; }

.input {
  font-family: inherit;
  font-size: 14px;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  width: 100%;
  transition: border-color 120ms ease, background 120ms ease;
}
.input:hover { border-color: var(--mist); }
.input:focus {
  outline: none;
  border-color: var(--sage);
  background: var(--steel);
  box-shadow: 0 0 0 3px var(--sage-wash);
}
.input::placeholder { color: var(--mist); }

.input--code {
  font-family: var(--mono);
  letter-spacing: 0.32em;
  font-size: 17px;
  max-width: 190px;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--full { width: 100%; }

.btn--primary {
  background: var(--amber);
  color: var(--ink);
}
/* A lighter tint of Amber — still Amber, not a new hue. */
.btn--primary:hover { background: #ECC793; }
.btn--primary:active { background: #D9AC6C; }

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--mist);
}
.btn--ghost:hover { border-color: var(--mist); color: var(--paper); background: var(--steel); }

/* Destructive is Terracotta, never red. */
.btn--destructive {
  background: transparent;
  border-color: rgba(201,123,90,0.5);
  color: var(--terracotta);
  align-self: flex-start;
}
.btn--destructive:hover { background: var(--terracotta-wash); border-color: var(--terracotta); }

/* ---------------------------------------------------------------------
   Auth screens
   --------------------------------------------------------------------- */

.app--auth { display: grid; place-items: center; min-height: 100vh; padding: 24px; }

.auth { width: 100%; max-width: 400px; }

.auth__card {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 30px 34px;
}
.auth__card--narrow { text-align: center; }

.auth__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.auth__name { font-weight: 600; font-size: 16px; }

.auth__heading { margin: 0 0 8px; font-size: 19px; font-weight: 600; }

.auth__lead { margin: 0 0 22px; color: var(--mist); font-size: 14px; }

.auth .form { max-width: none; }
.auth .btn--full { margin-top: 4px; }

/* ---------------------------------------------------------------------
   Secrets (2FA setup)
   --------------------------------------------------------------------- */

.secret {
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.secret__label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mist);
  margin-bottom: 5px;
}

.secret__value {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--amber);
  background: none;
  padding: 0;
  letter-spacing: 0.1em;
  user-select: all;
}
.secret__value--wrap {
  letter-spacing: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
  color: var(--sage);
}

/* ---------------------------------------------------------------------
   Stubs
   --------------------------------------------------------------------- */

.stub__step  { margin: 0 0 10px; font-size: 14px; color: var(--paper); }
.stub__blurb { margin: 0 0 14px; font-size: 14px; color: var(--mist); max-width: 62ch; }
.stub__note  { margin: 0; font-size: 13px; color: var(--mist); max-width: 62ch; }

/* ---------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------- */

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px;
  }
  .nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .nav__item span { display: none; }
  .nav__item { padding: 9px 11px; }
  .sidebar__foot {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .who, .sidebar__links { display: none; }

  .main { padding: 22px 16px 44px; }
  .check__head { flex-direction: column; gap: 2px; }
  .check__value { text-align: left; }
}

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

/* =====================================================================
   Step 2 — destinations list and editor.
   Same eight tokens. Still no pure black, no pure white, no green, no red.
   ===================================================================== */

.muted { color: var(--mist); }

/* ---------------------------------------------------------------------
   Filter bar
   --------------------------------------------------------------------- */

.filters {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.filters .field { gap: 4px; min-width: 130px; }
.filters .field--grow { flex: 1 1 220px; }
.filters .input { padding: 7px 10px; font-size: 13.5px; }
.filters .field__label { font-size: 12px; color: var(--mist); }

.filters__actions { display: flex; gap: 8px; margin-left: auto; }

/* ---------------------------------------------------------------------
   Table
   --------------------------------------------------------------------- */

/* Wide content scrolls inside its own container so the page body never
   scrolls sideways. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--slate);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 860px;
}

.table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--mist);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: var(--slate);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--steel); }
.table tbody tr.is-selected { background: var(--sage-wash); }

.table__check { width: 34px; }
.table__check input { accent-color: var(--sage); width: 15px; height: 15px; cursor: pointer; }

.table__title { font-weight: 500; color: var(--paper); }
.table__title:hover { color: var(--amber); text-decoration: none; }

.table__sub  { font-size: 12.5px; color: var(--mist); margin-top: 2px; }
.table__slug { font-family: var(--mono); font-size: 11.5px; color: var(--mist); margin-top: 3px; opacity: 0.75; }

.table__region { color: var(--mist); font-size: 13px; max-width: 230px; }
.table__status { white-space: nowrap; }
.table__when   { color: var(--mist); font-size: 13px; white-space: nowrap; }
.table__actions { text-align: right; white-space: nowrap; }

.table__sort { color: var(--mist); display: inline-flex; gap: 4px; align-items: center; }
.table__sort:hover { color: var(--paper); text-decoration: none; }
.table__arrow { color: var(--amber); font-size: 11px; }

.linky--inline { display: inline-flex; padding: 4px 8px; font-size: 13px; }

/* ---------------------------------------------------------------------
   Chips
   --------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 4px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  background: var(--mist-wash);
  border: 1px solid var(--line-strong);
  color: var(--paper);
  white-space: nowrap;
}

.chip--new { border-color: rgba(227,183,120,0.4); background: var(--amber-wash); color: var(--amber); }

.chip__x {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
  opacity: 0.6;
}
.chip__x:hover { opacity: 1; color: var(--terracotta); }

/* ---------------------------------------------------------------------
   Bulk action bar
   --------------------------------------------------------------------- */

.bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--steel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}

.bulkbar__count { font-size: 13px; color: var(--amber); font-weight: 600; }
.bulkbar__tag { display: flex; gap: 8px; flex-wrap: wrap; }

.input--compact { padding: 6px 10px; font-size: 13px; width: auto; }
.btn--compact   { padding: 6px 14px; font-size: 13px; }

/* ---------------------------------------------------------------------
   Pagination
   --------------------------------------------------------------------- */

.pager {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

.pager__item {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--mist);
  font-size: 13px;
}
.pager__item:hover { color: var(--paper); border-color: var(--mist); text-decoration: none; }
.pager__item.is-current {
  color: var(--ink);
  background: var(--amber);
  border-color: var(--amber);
  font-weight: 600;
}
.pager__gap { color: var(--mist); padding: 0 2px; }

/* ---------------------------------------------------------------------
   Editor layout
   --------------------------------------------------------------------- */

.editor__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.editor__side { position: sticky; top: 24px; }

.editor .form { max-width: none; }

.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 160px; }

.card .field { margin-bottom: 16px; }
.card .field:last-child { margin-bottom: 0; }

.field__tag {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--amber);
  border: 1px solid rgba(227,183,120,0.35);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
}

/* Validation messages are Terracotta, never red. */
.field__error {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--terracotta);
}

.input--invalid { border-color: var(--terracotta); }
.input--invalid:focus { box-shadow: 0 0 0 3px var(--terracotta-wash); border-color: var(--terracotta); }

.input--area { resize: vertical; min-height: 90px; font-family: inherit; line-height: 1.5; }
.input--filter { margin-bottom: 6px; font-size: 13px; padding: 7px 10px; }
.input[readonly] { background: var(--slate); color: var(--mist); cursor: not-allowed; }
.input:disabled { opacity: 0.5; cursor: not-allowed; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.check input { accent-color: var(--sage); margin-top: 2px; width: 15px; height: 15px; cursor: pointer; }
.check input:disabled { cursor: not-allowed; }
.check--warn { color: var(--amber); margin-top: 8px; }
.check--warn input { accent-color: var(--amber); }

.card--actions { display: flex; flex-direction: column; gap: 8px; }
.card--danger { border-color: rgba(201,123,90,0.3); }

/* ---------------------------------------------------------------------
   Publish gate
   --------------------------------------------------------------------- */

.gate {
  border: 1px solid rgba(227,183,120,0.35);
  background: var(--amber-wash);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin-bottom: 16px;
}

.gate__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--amber);
  margin-bottom: 6px;
}
.gate__head .icon { width: 15px; height: 15px; }

.gate__list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--mist); line-height: 1.5; }
.gate__list li + li { margin-top: 4px; }

/* ---------------------------------------------------------------------
   Step-3 placeholder
   --------------------------------------------------------------------- */

.placeholder {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--mist-wash);
}

.placeholder__mark {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--steel);
  color: var(--mist);
}
.placeholder__mark .icon { width: 22px; height: 22px; }

.placeholder__title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--amber);
}

.placeholder__text {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--mist);
  line-height: 1.55;
  max-width: 60ch;
}
.placeholder__text:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Region picker
   --------------------------------------------------------------------- */

.region-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------------
   Tag picker
   --------------------------------------------------------------------- */

.tagpicker__chosen {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
  min-height: 22px;
  align-items: center;
  font-size: 13px;
}

.tagpicker__list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 190px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink);
}

.tagpicker__option {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--mist);
  cursor: pointer;
}
.tagpicker__option:hover { color: var(--paper); border-color: var(--sage); background: var(--sage-wash); }

.tagpicker__option--create { color: var(--amber); border-color: rgba(227,183,120,0.4); }
.tagpicker__option--create:hover { background: var(--amber-wash); border-color: var(--amber); }

.tagpicker__empty { font-size: 12.5px; padding: 2px; }

/* ---------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .editor__grid { grid-template-columns: minmax(0, 1fr); }
  .editor__side { position: static; }
}

@media (max-width: 860px) {
  .filters__actions { margin-left: 0; width: 100%; }
  .filters .field { min-width: 100%; }
}

/* =====================================================================
   Step 3 — image pipeline: renditions, uploader, crop tool.
   ===================================================================== */

/* ---------------------------------------------------------------------
   List thumbnails
   --------------------------------------------------------------------- */

.table__thumbhead { width: 56px; }
.table__thumb { width: 56px; }

.thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
  background: var(--steel);
  border: 1px solid var(--line);
}

.thumb--empty {
  display: grid;
  place-items: center;
  color: var(--mist);
  opacity: 0.4;
}
.thumb--empty .icon { width: 18px; height: 18px; }

/* ---------------------------------------------------------------------
   Rendition preview
   --------------------------------------------------------------------- */

.renditions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
  min-width: 0;
}

.rendition {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Flex items default to min-width:auto, which means they refuse to shrink
     below their content. Without this the 1200px rendition forces the item
     1200px wide and the scroll box below never gets a chance to clip it —
     the image simply overflows the card. */
  min-width: 0;
  max-width: 100%;
}

.rendition--1200 { flex: 1 1 100%; }

.rendition__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rendition__label { font-size: 13px; font-weight: 600; }
.rendition__dims  { font-family: var(--mono); font-size: 11.5px; color: var(--mist); }

.rendition__frame {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--ink);
  padding: 6px;
  display: inline-grid;
  place-items: center;
  min-height: 40px;
  min-width: 40px;
}

/* The 1200px rendition is shown at true 1:1 and scrolls inside its box.
   Scaling it down would hide exactly the softness a crop review is for. */
.rendition__frame--scroll {
  overflow: auto;
  max-height: 340px;
  max-width: 100%;
  place-items: start;
  /* The grid box needs the same treatment for the same reason. */
  min-width: 0;
}

.rendition__img { display: block; border-radius: 3px; }

.rendition__note    { margin: 0; font-size: 12px; color: var(--mist); max-width: 30ch; }
.rendition__formats { margin: 0; display: flex; gap: 4px; }

.chip--muted { color: var(--mist); opacity: 0.7; }

/* ---------------------------------------------------------------------
   Image metadata
   --------------------------------------------------------------------- */

.imagemeta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink);
}

.imagemeta dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mist); }
.imagemeta dd { margin: 3px 0 0; font-size: 13px; }

.swatchline { display: flex; align-items: center; gap: 7px; }
.swatch { width: 14px; height: 14px; flex: none; border-radius: 3px; }

/* ---------------------------------------------------------------------
   Uploader
   --------------------------------------------------------------------- */

.imageform { margin-top: 4px; }

.imageform__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* A styled label wrapping a hidden file input: the native control cannot be
   restyled, and this keeps the keyboard behaviour intact. */
.btn--file { position: relative; overflow: hidden; cursor: pointer; }
.btn--file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.imageform__stats {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--paper);
  min-height: 18px;
}
.imageform__stats .warn { color: var(--terracotta); }

.imageform__remove { margin-top: 14px; }

/* ---------------------------------------------------------------------
   Crop tool
   --------------------------------------------------------------------- */

.croppanel { margin-top: 14px; }

.croppanel__stage {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--ink);
  /* Pointer events only. Without this the browser scrolls the page instead
     of letting a touch drag move the selection. */
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.croppanel__stage:active { cursor: grabbing; }

.croppanel__img {
  position: absolute;
  max-width: none;   /* the stage sets its size explicitly */
  display: block;
  pointer-events: none;
}

/* A wash over everything, with the selection punching back through it. */
.croppanel__shade {
  position: absolute;
  inset: 0;
  background: rgba(14, 20, 24, 0.62);
  pointer-events: none;
}

.croppanel__sel {
  position: absolute;
  border: 1px solid var(--paper);
  box-shadow: 0 0 0 9999px rgba(14, 20, 24, 0.62);
  cursor: move;
  box-sizing: border-box;
}

/* Rule-of-thirds guides, drawn with gradients so there is no extra markup. */
.croppanel__sel::before,
.croppanel__sel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
}
.croppanel__sel::before {
  background:
    linear-gradient(to right, transparent 33.2%, var(--paper) 33.2%, var(--paper) 33.5%, transparent 33.5%),
    linear-gradient(to right, transparent 66.4%, var(--paper) 66.4%, var(--paper) 66.7%, transparent 66.7%);
}
.croppanel__sel::after {
  background:
    linear-gradient(to bottom, transparent 33.2%, var(--paper) 33.2%, var(--paper) 33.5%, transparent 33.5%),
    linear-gradient(to bottom, transparent 66.4%, var(--paper) 66.4%, var(--paper) 66.7%, transparent 66.7%);
}

.croppanel__handle {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--amber);
  border-radius: 2px;
  /* Generous hit area for touch, without a visually chunky handle. */
  box-shadow: 0 0 0 6px rgba(227, 183, 120, 0.001);
}
.croppanel__handle[data-handle="nw"] { top: -8px;    left: -8px;   cursor: nwse-resize; }
.croppanel__handle[data-handle="ne"] { top: -8px;    right: -8px;  cursor: nesw-resize; }
.croppanel__handle[data-handle="sw"] { bottom: -8px; left: -8px;   cursor: nesw-resize; }
.croppanel__handle[data-handle="se"] { bottom: -8px; right: -8px;  cursor: nwse-resize; }

.croppanel__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.croppanel__zoom { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--mist); }
.croppanel__zoom input[type="range"] { accent-color: var(--amber); width: 180px; }

.croppanel__readout {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mist);
  margin-left: auto;
}

@media (max-width: 860px) {
  .croppanel__stage { height: 300px; }
  .croppanel__readout { margin-left: 0; width: 100%; }
  .rendition--1200 { flex-basis: auto; }
}

/* =====================================================================
   Step 4 — regions tree and tag management.
   ===================================================================== */

.page-head__actions { display: flex; gap: 8px; }

/* An explanatory panel, distinct from a data card without shouting. */
.card--note {
  border-left: 2px solid var(--sage);
  background: var(--sage-wash);
}

.note__text {
  margin: 0 0 9px;
  font-size: 13px;
  color: var(--mist);
  line-height: 1.6;
  max-width: 78ch;
}
.note__text:last-child { margin-bottom: 0; }
.note__text strong { color: var(--paper); font-weight: 600; }

/* ---------------------------------------------------------------------
   Region tree
   --------------------------------------------------------------------- */

.rtree, .rnode__children { list-style: none; margin: 0; padding: 0; }

.rnode__children {
  margin-left: 11px;
  padding-left: 13px;
  border-left: 1px solid var(--line);
}

.rnode__details > summary { list-style: none; }
.rnode__details > summary::-webkit-details-marker { display: none; }

.rnode__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
}
.rnode__row:hover { background: var(--steel); }
.rnode__row--leaf { cursor: default; padding-left: 25px; }
.rnode__row--leaf:hover { background: var(--steel); }

/* A caret drawn in CSS, rotated by the details element's own open state —
   no JavaScript and no icon request. */
.rnode__caret {
  width: 0; height: 0; flex: none;
  border-left: 5px solid var(--mist);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 120ms ease;
}
.rnode__details[open] > summary .rnode__caret { transform: rotate(90deg); }

.rnode__name { color: var(--paper); font-weight: 500; }
.rnode__name:hover { color: var(--amber); text-decoration: none; }

.rnode--continent > .rnode__details > summary .rnode__name { font-weight: 600; }
.rnode--province .rnode__name { color: var(--mist); font-weight: 400; }

.rnode__code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mist);
  background: none;
  padding: 0;
  opacity: 0.7;
}

.rnode__fill {
  font-size: 11px;
  color: var(--mist);
  font-family: var(--mono);
  opacity: 0.6;
  margin-left: auto;
}

.rnode__count {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--sage);
  min-width: 3ch;
  text-align: right;
}
/* Zero is the interesting case — that region will not be drawn at all. */
.rnode__count--zero { color: var(--terracotta); }
.rnode__own { color: var(--mist); font-size: 11px; }

.rnode__add {
  font-size: 12px;
  color: var(--mist);
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  white-space: nowrap;
}
.rnode__add:hover { color: var(--amber); border-color: var(--amber); text-decoration: none; }

.rnode.is-empty > .rnode__details > summary .rnode__name,
.rnode.is-empty > .rnode__row .rnode__name { opacity: 0.75; }

/* ---------------------------------------------------------------------
   Tag merge
   --------------------------------------------------------------------- */

.mergepick__row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.mergepick__row .field { flex: 1 1 220px; margin-bottom: 0; }

.mergepick__arrow {
  color: var(--mist);
  font-size: 18px;
  padding-bottom: 9px;
}

.mergelist {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 14px;
  color: var(--mist);
  line-height: 1.7;
}
.mergelist strong { color: var(--paper); }
/* Terracotta for the destructive lines, never red. */
.mergelist__warn { color: var(--terracotta); }
.mergelist__warn strong { color: var(--terracotta); }

/* The confirm form follows an explanatory hint; without this they run
   together and the input looks like part of the sentence above it. */
.card--danger .form { margin-top: 16px; }

@media (max-width: 860px) {
  .mergepick__arrow { display: none; }
  .rnode__fill { display: none; }
}

/* =====================================================================
   Step 5 — collections, rule builder, live preview.
   ===================================================================== */

.inline-form { display: inline; margin: 0; }

/* Stale means the app is serving something older than the rules. Amber:
   a warning, not a failure. */
.stale-note { color: var(--amber); }

.chip--stale {
  color: var(--amber);
  background: var(--amber-wash);
  border-color: rgba(227,183,120,0.35);
}

/* An empty collection would ship with nothing in it — Terracotta. */
.count-zero { color: var(--terracotta); }

/* ---------------------------------------------------------------------
   Rule builder
   --------------------------------------------------------------------- */

.rules { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.rule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--ink);
  /* The include/exclude distinction has to be readable at a glance, so it is
     a coloured edge as well as the word in the select. */
  border-left-width: 3px;
}
.rule--include { border-left-color: var(--sage); }
.rule--exclude { border-left-color: var(--terracotta); }

.rule__mode { width: auto; flex: none; }

.rule__type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mist);
  padding-top: 8px;
  min-width: 8ch;
}

.rule__target { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; align-items: flex-start; }
.rule__target .input { flex: 1 1 140px; min-width: 0; }
.rule__target--region { gap: 8px; }
.rule__stack { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.rule__stack .input { flex: none; width: 100%; }

.rule__remove {
  background: none;
  border: 0;
  color: var(--mist);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 4px;
  flex: none;
}
.rule__remove:hover { color: var(--terracotta); }

.rules__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Live preview
   --------------------------------------------------------------------- */

.preview__spinner {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--mist);
  margin-left: 8px;
}

.preview__count { margin: 0 0 12px; font-size: 13px; color: var(--sage); }

.preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.preview__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  border: 1px solid var(--line);
  min-width: 0;
}
.preview__item img { border-radius: 4px; object-fit: cover; flex: none; }

.preview__nothumb {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  background: var(--steel);
  border-radius: 4px;
  color: var(--mist);
}

.preview__body { display: flex; flex-direction: column; min-width: 0; }
.preview__title {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview__region { font-size: 11.5px; color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.preview__empty {
  border: 1px solid rgba(201,123,90,0.4);
  background: var(--terracotta-wash);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.preview__empty strong { color: var(--terracotta); display: block; margin-bottom: 4px; font-size: 13.5px; }
.preview__empty p { margin: 0; font-size: 13px; color: var(--mist); line-height: 1.55; }

.warn { color: var(--terracotta); }

/* ---------------------------------------------------------------------
   Members
   --------------------------------------------------------------------- */

.memberlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}

.member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--ink);
  min-width: 0;
}
/* Hand-pinned entries have to be tellable from rule matches at a glance. */
.member--manual { border-color: rgba(227,183,120,0.4); background: var(--amber-wash); }

.member__thumb { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; flex: none; }
.member__thumb--empty { display: grid; place-items: center; background: var(--steel); color: var(--mist); }

.member__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.member__title {
  font-size: 13px;
  color: var(--paper);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member__title:hover { color: var(--amber); text-decoration: none; }
.member__meta { display: flex; gap: 4px; flex-wrap: wrap; }

.member__remove {
  background: none; border: 0;
  color: var(--mist);
  font-size: 16px; line-height: 1;
  cursor: pointer; padding: 4px;
  flex: none;
}
.member__remove:hover { color: var(--terracotta); }

.manualadd { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.manualadd .input { flex: 1 1 200px; margin-bottom: 0; }

@media (max-width: 860px) {
  .rule { flex-wrap: wrap; }
  .rule__type { min-width: 0; padding-top: 0; }
}

/* A suspended pin: kept, but held out of what the app serves. Amber — this is
   a state to notice, not a failure. */
.member--suspended {
  border-color: rgba(227,183,120,0.35);
  border-style: dashed;
  opacity: 0.85;
}
.member--suspended .member__thumb { opacity: 0.55; }

/* =====================================================================
   Step 6 — translations and locales.
   ===================================================================== */

.form__actions { display: flex; gap: 8px; align-items: center; }

/* ---------------------------------------------------------------------
   Completeness meters
   --------------------------------------------------------------------- */

.meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.meter {
  display: block;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--ink);
  color: inherit;
}
.meter:hover { border-color: var(--mist); text-decoration: none; }
.meter.is-current { border-color: var(--sage); background: var(--sage-wash); }

.meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.meter__label { font-size: 13px; font-weight: 500; }
.meter__pct { font-size: 13px; color: var(--sage); font-variant-numeric: tabular-nums; }

/* The bar is an SVG because its width is data, and the CSP forbids the inline
   style attribute that would normally carry it. */
.meter__bar { display: block; width: 100%; height: 6px; margin: 7px 0 5px; }
.meter__track { fill: var(--steel); }
.meter__fill  { fill: var(--sage); }

.meter__meta { font-size: 11.5px; color: var(--mist); }

/* ---------------------------------------------------------------------
   Translation rows
   --------------------------------------------------------------------- */

.trbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 14px;
  margin-bottom: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--steel);
  font-size: 13px;
}
.trbar__hint { color: var(--mist); font-size: 12.5px; margin-right: auto; }
.trbar--bottom { margin-top: 14px; margin-bottom: 0; justify-content: flex-end; }

.trrows { display: flex; flex-direction: column; gap: 10px; }

.trrow {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--slate);
  padding: 12px 14px;
}

.trrow__head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.trrow__id { font-family: var(--mono); font-size: 11.5px; color: var(--mist); }
.trrow__title {
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Source left, target right. They collapse to one column on narrow screens,
   where side-by-side would make both halves unreadable. */
.trfield {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.trrow .trfield:first-of-type { border-top: 0; padding-top: 0; }

.trfield__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mist);
  display: block;
  margin-bottom: 4px;
}

.trfield__text {
  font-size: 13px;
  color: var(--paper);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.trfield__foot {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 4px;
  flex-wrap: wrap;
}

.trfield__count {
  font-size: 11.5px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}
/* Empty is a deliberate state, not a warning: it means "fall back to English". */
.trfield__count--empty { color: var(--mist); opacity: 0.7; font-style: italic; }
.trfield__count--near  { color: var(--amber); }
.trfield__count--over  { color: var(--terracotta); font-weight: 600; }

.trfield__error { font-size: 12px; color: var(--terracotta); }

.trfield--invalid { background: var(--terracotta-wash); border-radius: var(--radius-sm); }

@media (max-width: 860px) {
  .trfield { grid-template-columns: 1fr; gap: 8px; }
  .trbar__hint { display: none; }
}

/* =====================================================================
   Step 7 — daily challenge calendar.
   ===================================================================== */

.stat__value--amber      { color: var(--amber); }
.stat__value--terracotta { color: var(--terracotta); }

.calnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.calnav__title { margin: 0; font-size: 16px; font-weight: 600; }

.cal { display: flex; flex-direction: column; gap: 6px; }

.cal__head, .cal__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.cal__wd {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mist);
  padding: 0 4px 2px;
}

.cal__cell {
  min-height: 118px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink);
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cal__cell--blank { border: 0; background: none; min-height: 0; }
.cal__cell--past  { opacity: 0.5; }
.cal__cell--today { border-color: var(--amber); }

/* A future day with nothing scheduled is the failure the app will hit, so it
   is drawn as a hole rather than as an ordinary empty box. */
.cal__cell--empty {
  border-style: dashed;
  border-color: rgba(201,123,90,0.45);
  background: var(--terracotta-wash);
}

.cal__date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}
.cal__todaytag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--amber);
}

.cal__pick { display: flex; gap: 7px; min-width: 0; }

.cal__thumb { width: 44px; height: 44px; border-radius: 4px; object-fit: cover; flex: none; }
.cal__thumb--empty {
  display: grid; place-items: center;
  background: var(--steel); color: var(--mist);
}

.cal__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal__title {
  font-size: 12px;
  color: var(--paper);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cal__title:hover { color: var(--amber); text-decoration: none; }
.cal__tags { display: flex; gap: 3px; flex-wrap: wrap; }

.cal__gap {
  font-size: 11.5px;
  color: var(--terracotta);
  font-style: italic;
  padding: 4px 0;
}

.cal__actions { margin-top: auto; }
.cal__actions > summary { list-style: none; }
.cal__actions > summary::-webkit-details-marker { display: none; }

.cal__edit {
  font-size: 11.5px;
  color: var(--mist);
  cursor: pointer;
  padding: 2px 0;
}
.cal__edit:hover { color: var(--amber); }

.cal__form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cal__form .input { width: 100%; font-size: 12px; }
.cal__buttons { display: flex; gap: 6px; }
.cal__premium { font-size: 11px; line-height: 1.4; }

@media (max-width: 1040px) {
  /* Seven columns stop being readable well before the phone breakpoint; the
     calendar becomes a list of days instead of shrinking into unreadability. */
  .cal__head { display: none; }
  .cal__week { grid-template-columns: minmax(0, 1fr); }
  .cal__cell { min-height: 0; }
  .cal__cell--blank { display: none; }
  .cal__date::after {
    content: attr(data-weekday);
    color: var(--mist);
  }
}

/* =====================================================================
   Step 8 — stats dashboard, settings, activity log.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Metric cards
   --------------------------------------------------------------------- */

.stat-grid--metrics { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.metric {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.metric__head { display: flex; align-items: baseline; gap: 7px; justify-content: space-between; }
.metric__label { font-size: 12.5px; color: var(--mist); }

.metric__value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* A ratio with a zero denominator has NO value. Showing 0 would be a claim
   the data does not support, so it reads as a dash in muted text. */
.metric__value--none { color: var(--mist); font-weight: 400; }

.metric__note { margin: 0; font-size: 11.5px; color: var(--mist); line-height: 1.45; }

/* Charts are inline SVG generated in PHP: no library, no CDN, and colour from
   classes so the palette stays in this file. */
.spark { width: 100%; height: 34px; display: block; overflow: visible; }
.spark__line { fill: none; stroke: var(--sage); stroke-width: 1.4; vector-effect: non-scaling-stroke;
               stroke-linejoin: round; stroke-linecap: round; }
.spark__dot  { fill: var(--sage); }
.spark__flat { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.spark--empty { opacity: 0.6; }

/* ---------------------------------------------------------------------
   Rankings
   --------------------------------------------------------------------- */

.ranklist { display: flex; flex-direction: column; gap: 9px; }

.rank { display: flex; align-items: center; gap: 11px; min-width: 0; }

.rank__thumb { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; flex: none; }
.rank__thumb--empty { display: grid; place-items: center; background: var(--steel); color: var(--mist); }

.rank__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rank__title {
  font-size: 13px; color: var(--paper);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank__title:hover { color: var(--amber); text-decoration: none; }

.rankbar { width: 100%; height: 5px; display: block; }
.rankbar__track { fill: var(--steel); }
.rankbar__fill  { fill: var(--sage); }

.rank__value {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex: none;
  min-width: 7ch;
}
.rank__of { display: block; font-size: 10.5px; color: var(--mist); }

/* ---------------------------------------------------------------------
   Settings
   --------------------------------------------------------------------- */

.setting__key {
  font-size: 10.5px;
  opacity: 0.65;
  margin-left: 6px;
}

.tokenrow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

.token {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  letter-spacing: 0.05em;
}
.token--bad { color: var(--terracotta); border-color: rgba(201,123,90,0.4); }

/* ---------------------------------------------------------------------
   Activity log
   --------------------------------------------------------------------- */

.loglist { display: flex; flex-direction: column; gap: 8px; }

.logrow {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--slate);
  padding: 11px 14px;
}

.logrow__head {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
  font-size: 13px;
}

.logrow__action {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--amber);
}
.logrow__entity { color: var(--mist); }
.logrow__who { color: var(--paper); }
.logrow__when { color: var(--mist); font-size: 12.5px; margin-left: auto; }
.logrow__ip { font-family: var(--mono); font-size: 10.5px; color: var(--mist); opacity: 0.6; margin-top: 6px; }

/* The stored diff, rendered as pairs rather than as raw JSON. */
.diff { margin: 9px 0 0; padding: 9px 0 0; border-top: 1px solid var(--line); }

.diff__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  padding: 2px 0;
}

.diff__label { font-size: 12px; color: var(--mist); }
.diff__value { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }

.diff__from { color: var(--mist); text-decoration: line-through; text-decoration-thickness: 1px; }
.diff__arrow { color: var(--mist); margin: 0 5px; }
.diff__to { color: var(--paper); }

@media (max-width: 860px) {
  .diff__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .logrow__when { margin-left: 0; }
}

/* Deployment probe trigger. */
.probe-form { margin-top: 14px; }