/* ═══════════════════════════════════════════════════════════════════════════
   THE DESK - one stylesheet, no framework, no build step.

   This is a tool, not a room. The app's grammar (LIVING-WORLD-MASTER-BUILD §3)
   governs what a member sees and has nothing to say about a table of drafts, so
   nothing here borrows from it. What it does borrow is the house's typographic
   discipline and the teal from the existing admin, so that moving between the
   two does not feel like moving between two companies.

   THREE COLOURS CARRY MEANING AND ONLY THREE:
     stop   a thing that blocks. A refusal, a missing gate, a style refusal.
     warn   a thing worth a look that blocks nothing.
     live   in front of members right now.
   Everything else is grey, deliberately, so that the three read at a glance.

   NO RED FOR "DRAFT". A draft is the normal, correct, expected state of a piece
   of writing, and colouring it as a problem trains people to ignore the colour
   that means there is one.

   Dark mode is supported because half of this work happens in the evening.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink:        #16232b;
  --ink-soft:   #5b6b74;
  --paper:      #f4f7f7;
  --card:       #ffffff;
  --line:       #dde5e6;
  --brand:      #145f63;
  --brand-soft: #e6f1f1;
  --stop:       #8c2f2a;
  --stop-soft:  #fbeceb;
  --warn:       #8a6218;
  --warn-soft:  #fdf4e3;
  --live:       #1c6b46;
  --live-soft:  #e8f4ed;
  --radius:     10px;
  --shadow:     0 1px 2px rgba(22,35,43,.06), 0 4px 16px rgba(22,35,43,.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #e7eef0;
    --ink-soft:   #9fb0b6;
    --paper:      #10171b;
    --card:       #182127;
    --line:       #2b3a41;
    --brand:      #58b4b6;
    --brand-soft: #173132;
    --stop:       #ef9a94;
    --stop-soft:  #331d1c;
    --warn:       #e3bc72;
    --warn-soft:  #33290f;
    --live:       #7fca9f;
    --live-soft:  #12291d;
    --shadow:     0 1px 2px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Reduce Motion is honoured across the product, including here. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.skip {
  position: absolute; left: -9999px;
  background: var(--card); color: var(--ink); padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; top: 0; z-index: 100; }

/* ── The bar ──────────────────────────────────────────────────────────── */

.desk-bar {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: .7rem 1.25rem;
  background: var(--brand);
  color: #fff;
  position: sticky; top: 0; z-index: 20;
}
.desk-mark { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .01em; font-size: 1.02rem; }
.desk-nav { display: flex; gap: .15rem; flex-wrap: wrap; flex: 1; }
.desk-nav a {
  color: rgba(255,255,255,.82); text-decoration: none;
  padding: .35rem .7rem; border-radius: 999px; font-size: .92rem;
}
.desk-nav a:hover { color: #fff; background: rgba(255,255,255,.12); }
.desk-nav a.on { color: var(--brand); background: #fff; font-weight: 600; }
.desk-who { display: flex; align-items: center; gap: .6rem; font-size: .88rem; }
.desk-who a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }

/* ── Layout ───────────────────────────────────────────────────────────── */

main { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
main.wide { max-width: 1400px; }

h1 { font-size: 1.5rem; margin: 0 0 .3rem; letter-spacing: -.01em; }
h2 { font-size: 1.08rem; margin: 0 0 .5rem; }
h3 { font-size: .95rem; margin: 0 0 .35rem; }
p  { margin: 0 0 .7rem; }
.lede { color: var(--ink-soft); max-width: 62ch; margin-bottom: 1.4rem; }
.muted { color: var(--ink-soft); font-size: .87rem; }
code { font: .86em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--brand-soft); padding: .1em .35em; border-radius: 4px; }

.crumbs { font-size: .87rem; color: var(--ink-soft); margin-bottom: 1rem; display: flex; gap: .45rem; flex-wrap: wrap; }
.crumbs a { color: var(--ink-soft); }
.crumbs span[aria-hidden] { opacity: .5; }

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; box-shadow: var(--shadow);
}
.panel.stop { border-left: 4px solid var(--stop); background: var(--stop-soft); }
.panel.warn { border-left: 4px solid var(--warn); background: var(--warn-soft); }
.panel.live { border-left: 4px solid var(--live); background: var(--live-soft); }
.panel > :last-child { margin-bottom: 0; }

.cols { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

.banner {
  padding: .8rem 1.25rem; font-size: .92rem; border-bottom: 1px solid var(--line);
}
.banner.ok   { background: var(--live-soft); color: var(--live); }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.stop { background: var(--stop-soft); color: var(--stop); }

/* ── The three meanings ───────────────────────────────────────────────── */

.chip {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  background: var(--brand-soft); color: var(--brand);
}
.chip-live  { background: var(--live-soft); color: var(--live); }
.chip-draft { background: var(--brand-soft); color: var(--brand); }
.chip-ready { background: var(--warn-soft); color: var(--warn); }
.chip-off   { background: var(--line); color: var(--ink-soft); }
.chip-owner   { background: #fff; color: var(--brand); }
.chip-editor  { background: rgba(255,255,255,.22); color: #fff; }
.chip-partner { background: rgba(255,255,255,.22); color: #fff; }

.ok-line { color: var(--live); font-size: .9rem; }
.stop-line { color: var(--stop); font-size: .9rem; }

.reasons { margin: .4rem 0 0; padding-left: 1.15rem; }
.reasons li { margin-bottom: .45rem; }

/* ── Tables ───────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 600; }
tbody tr:hover { background: var(--brand-soft); }
tr.stop td { background: var(--stop-soft); }
tr.warn td { background: var(--warn-soft); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.findings code { background: var(--card); border: 1px solid var(--line); }

/* ── Forms ────────────────────────────────────────────────────────────── */

label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .8rem; }
label > .hint { display: block; font-weight: 400; color: var(--ink-soft); font-size: .82rem; margin: .15rem 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=date], input[type=datetime-local], input[type=number], select, textarea {
  width: 100%; margin-top: .25rem; padding: .5rem .6rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
textarea.tall { min-height: 14rem; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 1rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .2rem 1rem; }
.checks label, label.check { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .35rem; }
.checks input, label.check input { width: auto; margin-top: .25rem; }

.btn, button {
  display: inline-block; font: inherit; font-weight: 600; font-size: .92rem;
  padding: .5rem 1rem; border-radius: 8px; border: 1px solid var(--brand);
  background: var(--brand); color: #fff; text-decoration: none; cursor: pointer;
}
.btn:hover, button:hover { filter: brightness(1.08); }
.btn.ghost, button.ghost { background: transparent; color: var(--brand); }
.btn.danger, button.danger { background: var(--stop); border-color: var(--stop); color: #fff; }
button[disabled], .btn.off { opacity: .45; cursor: not-allowed; filter: none; }
.linkish { background: none; border: none; color: inherit; text-decoration: underline; padding: 0; font: inherit; cursor: pointer; }
form.inline { display: inline; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.filters label { margin-bottom: 0; }
.filters select, .filters input { min-width: 9rem; }

/* ── Gates ────────────────────────────────────────────────────────────── */

.gate { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .85rem; margin-bottom: .6rem; }
.gate.done { border-left: 4px solid var(--live); }
.gate.open { border-left: 4px solid var(--warn); }
.gate-head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.gate p { margin: .25rem 0 .4rem; }
.gate-fields { display: grid; grid-template-columns: 2fr 1fr; gap: 0 .8rem; }
.gate-fields label { margin-bottom: 0; }

/* ── Sections editor ──────────────────────────────────────────────────── */

.section-block { border: 1px solid var(--line); border-radius: 8px; padding: .8rem .9rem; margin-bottom: .7rem; background: var(--card); }
.section-block h3 { color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }

/* ── Empty states ─────────────────────────────────────────────────────── */

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--ink-soft); }
.empty p { margin-bottom: .8rem; }

/* ── Numbers ──────────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow); }
.tile .n { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tile .k { font-size: .8rem; color: var(--ink-soft); }

/* ── Preview ──────────────────────────────────────────────────────────── */

.preview {
  max-width: 40rem; margin: 0 auto; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 2.2rem;
}
.preview h1 { font-size: 1.7rem; line-height: 1.2; }
.preview .standfirst { font-size: 1.05rem; color: var(--ink-soft); margin-bottom: 1.4rem; }
.preview h2 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; }
.preview p { font-size: 1.02rem; line-height: 1.65; }
.preview .label { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.preview .source { border-top: 1px solid var(--line); margin-top: 1.8rem; padding-top: .9rem; font-size: .87rem; color: var(--ink-soft); }

/* ── Sign in ──────────────────────────────────────────────────────────── */

.signin { max-width: 24rem; margin: 3rem auto; }
.signin .panel { padding: 1.6rem; }
.secret {
  font: 1.05rem/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em; word-break: break-all; background: var(--brand-soft);
  padding: .8rem; border-radius: 8px; user-select: all;
}
.uri { font: .8rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; color: var(--ink-soft); }

.desk-foot { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem 3rem; color: var(--ink-soft); font-size: .82rem; }
.desk-foot p { margin: 0 0 .2rem; }

/* ── Bars, and the charting library that is not here ──────────────────────

   The Performance screen shows proportions. It does NOT load a charting
   library, and that is a decision rather than an omission:

     1. Every chart library on this screen would be a third-party script on the
        one console that holds an external partner login. The CSP has no
        'unsafe-inline' and script-src is 'self', so a CDN tag would not even
        load, and vendoring the file means we now own a dependency, its
        transitive tree and its next advisory. For a bar showing that one piece
        got twice the impressions of another, that is a supply-chain risk taken
        for decoration.
     2. The console has no build step (see the top of this file). Adding one so
        that a bar can be drawn is the wrong way round.

   So a bar is a div with a width, and the width comes from a custom property
   set by a CLASS rather than by a style attribute, because a style attribute is
   inline CSS and the CSP correctly refuses it. The proportion is rounded to the
   nearest 5 per cent on the way in, which is all the precision a bar carries
   anyway: the exact number is in the column beside it, where it can be read.
   ────────────────────────────────────────────────────────────────────────── */

.bar {
  display: block; height: .5rem; min-width: 5rem;
  background: var(--line); border-radius: 999px; overflow: hidden;
}
.bar > i { display: block; height: 100%; width: var(--bar, 0%); background: var(--brand); }
.bar.engaged > i { background: var(--live); }

.bar-0   { --bar: 0%; }
.bar-5   { --bar: 5%; }
.bar-10  { --bar: 10%; }
.bar-15  { --bar: 15%; }
.bar-20  { --bar: 20%; }
.bar-25  { --bar: 25%; }
.bar-30  { --bar: 30%; }
.bar-35  { --bar: 35%; }
.bar-40  { --bar: 40%; }
.bar-45  { --bar: 45%; }
.bar-50  { --bar: 50%; }
.bar-55  { --bar: 55%; }
.bar-60  { --bar: 60%; }
.bar-65  { --bar: 65%; }
.bar-70  { --bar: 70%; }
.bar-75  { --bar: 75%; }
.bar-80  { --bar: 80%; }
.bar-85  { --bar: 85%; }
.bar-90  { --bar: 90%; }
.bar-95  { --bar: 95%; }
.bar-100 { --bar: 100%; }

/* The day series. One column per day, laid out by the grid rather than by a
   drawing library, and it degrades to a readable list of rows if the grid is
   unavailable. */
.daybars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; align-items: end; height: 4.5rem; margin: .6rem 0 .3rem; }
.daybars .d { background: var(--brand-soft); border-radius: 2px 2px 0 0; height: var(--bar, 0%); min-height: 2px; }

/* The invite link, shown once. Wider than .secret and never wrapped mid-token,
   because a link that is copied with a line break in it is a link that does not
   work and a token that cannot be recovered. */
.once { border: 1px solid var(--brand); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--brand-soft); }
.once h2 { margin-bottom: .4rem; }

/* The audit diff: two columns of values, before and after, with the field name
   as the row heading. Small on purpose. It sits inside a table cell, so it must
   not inherit the outer table's row borders. */
.diff { font-size: .85rem; }
.diff th, .diff td { border-bottom: none; padding: .12rem .5rem .12rem 0; vertical-align: top; }
.diff th { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }
.diff .was { color: var(--ink-soft); text-decoration: line-through; }

/* ── The authenticator setup code ─────────────────────────────────────────
   Added 18 August 2026, when the enrolment screen gained a QR code.

   A WHITE PLATE UNDER IT, ALWAYS, EVEN IN DARK MODE. A QR code is read by a
   camera looking for dark modules on a light ground, and a code inverted by a
   dark theme is a code that does not scan. The SVG paints its own white
   background for the same reason; this rule is what keeps the padding around
   it white too, so the quiet zone is genuinely quiet.

   max-width rather than a fixed size: the code is drawn at a fixed module size
   on the server, and a narrow phone should shrink it rather than crop it. */
.qr {
  text-align: center;
  margin: 1rem 0;
}
.qr svg {
  max-width: 100%;
  height: auto;
  background: #fff;
  padding: .35rem;
  border-radius: 8px;
  border: 1px solid var(--line);
}