/* Voidborn - the founder's console: the override layer.

   THIS FILE IS NOT A DESIGN SYSTEM. `admin.css` is, and it is served first and
   unchanged. Everything below is either (a) a hue change, so that two surfaces
   on the same host with different powers over the same people cannot be
   mistaken for each other, or (b) a shape the console has and the panel does
   not. If something here could have been a class in admin.css, it belongs
   there instead; two stylesheets with two opinions about a table is how one
   product starts looking like two.

   THE RULE FROM ACROSS THE HALL STILL APPLIES. Every response carries
       Content-Security-Policy: default-src 'none'; style-src 'self'; form-action 'self'
   so no template here writes a style attribute and no data-driven length is
   written as one. A length is a class name chosen in Go (view.go, BarClass),
   drawn from `admin.css`'s `.w-0 .. .w-100`. On 2026-09-12 fifty-eight inline
   styles were silently dead on the moderation panel for a day because of this
   exact policy, and the fix was the templates rather than the policy. See
   docs/design/panel-satir-ici-stil-ve-csp-2026-09-12.md. */

/* --- the light is different ----------------------------------------------
   The panel's accent is a cold cyan. The console's is the game's amber - the
   colour the purse figure is already drawn in - because the difference has to
   be readable from the corner of an eye, at a glance, before a single word on
   the page has been read. Same furniture, different light.

   Contrast measured the same way admin.css measures its own:
     #ffc978 on --panel #141a21 : 11.4:1
     #ffd9a0 on --accent-deep   :  9.2:1 */
:root{
  --accent:#ffc978;
  --accent-deep:#3a2a12;
  --accent-line:#6b4c1c;
}

/* The rail's mark carries the console's own word, so the tab title is not the
   only thing that says which tool this is. */
.rail-brand .seat{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-left:6px;border:1px solid var(--accent-line);
  border-radius:2px;padding:1px 5px}

/* --- the live strip ------------------------------------------------------
   The one piece of state every screen carries: is the game there, and how old
   is what you are looking at. It is at the top of the page rather than the
   bottom because during an incident it is the first question, and a status
   line somebody has to scroll to is a status line nobody reads. */
.wire{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:8px 13px;margin:0 0 16px;font-size:12.5px;color:var(--faint)}
.wire .grow{flex:1}
.wire .where{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--dim)}
.wire .age{color:var(--dim);font-variant-numeric:tabular-nums}
.wire.t-bad{border-color:var(--bad-line);background:#201415}
.wire.t-warn{border-color:var(--warn-line)}

/* --- the live table ------------------------------------------------------
   A hull bar is two millimetres of screen and it has to be readable at a
   glance in a scanning column, so it gets a ground and a fixed width rather
   than filling its cell. */
.hp{display:flex;align-items:center;gap:6px;min-width:96px}
.hp .track{flex:1;height:5px;border-radius:2px;background:var(--card-hot);overflow:clip}
.hp .track>i{display:block;height:100%;background:var(--dim)}
.hp.t-good .track>i{background:var(--good)}
.hp.t-warn .track>i{background:var(--warn)}
.hp.t-bad .track>i{background:var(--bad)}
.hp .fig{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;
  min-width:30px;text-align:right}

/* A coordinate is read as a number and compared with the one above it. */
.xyz{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;
  color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}

/* The zone column's density bar: how full a place is against the fullest. */
.dens{display:block;height:4px;border-radius:2px;background:var(--card-hot);
  overflow:clip;min-width:70px}
.dens>i{display:block;height:100%;background:var(--accent)}

/* --- the minted secret ---------------------------------------------------
   Shown exactly once and never stored. Its own ground, so that the one screen
   in this tool carrying a live credential does not look like a success
   message: this is a thing to copy now, not a thing to acknowledge. */
.secret{background:var(--accent-deep);border:1px solid var(--accent-line);
  border-radius:var(--r);padding:14px 16px;margin:0 0 16px}
.secret .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.secret .v{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:22px;letter-spacing:.06em;color:var(--ink);margin:8px 0 6px;
  word-break:break-all;user-select:all}
.secret .s{font-size:12.5px;color:#f0d7ae;max-width:74ch}

/* --- the ledger fence ----------------------------------------------------
   The five ledgers are the one thing this seat cannot touch, and the screen
   says so where a founder would look for the button. Drawn as a boundary
   rather than as a warning: nothing has gone wrong, there is simply a wall. */
.fence{border:1px dashed var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r-sm);padding:11px 14px;margin:0 0 16px;
  color:var(--dim);font-size:13.5px;background:transparent}
.fence b{color:var(--gold)}

/* A row that wants looking at. Used sparingly: a table where everything is
   marked is a table where nothing is. */
tr.mark td{background:#1c1417}
tr.mark td:first-child{box-shadow:inset 2px 0 0 var(--bad)}