/* Octralis operator console, component classes
   ==========================================================================
   CHECK BEFORE SHIPPING: every comment must open and close exactly once, in
   order. Handover 18 shipped a terminator eight lines early and the parser
   silently dropped the class that followed it.
   ==========================================================================

   Loaded AFTER tokens.css and workforce.css. The console reuses the product's
   card, table, chip, banner, eyebrow and layout classes unchanged; this file
   adds only what the console has and the product does not.

   Every colour is a token. One exception, stated: the masthead's ink is the
   literal --text rather than --t-raw, because there is no tenant to derive a
   colour from, see the note on .console__masthead.                        */

/* ---- The console's own masthead --------------------------------------- *
 * NO TENANT COLOUR AT ANY DEPTH, including on a tenant's page. The page is
 * ABOUT a customer rather than for one, and a bar in their colour invites an
 * operator to read it as that customer's own view.
 *
 * It is also the one masthead in the product with no plate: a plate holds a
 * tenant's logo and there is no tenant here. --t-raw is deliberately not
 * referenced, it would resolve to whatever the last page set.            */

.console__masthead  { display: flex; align-items: stretch; padding: 0 24px;
                      background: var(--text); min-height: 56px; }
.console__brand     { display: flex; align-items: center; gap: 11px; }
.console__wordmark  { display: inline-flex; align-items: baseline;
                      font-size: var(--size-body); font-weight: 600;
                      letter-spacing: -0.02em; color: var(--surface); }
.console__mark      { height: 0.727em; width: 0.727em; margin-right: 0.03em;
                      position: relative; top: 0.045em; }
.console__role      { font-family: var(--font-mono); font-size: var(--size-caps);
                      font-weight: 600; line-height: 1; letter-spacing: .14em;
                      color: rgba(255, 255, 255, 0.72);
                      border: 1px solid rgba(255, 255, 255, 0.32);
                      padding: 3px 7px; }
.console__nav       { margin-left: auto; display: flex; align-items: stretch; gap: 24px; }
.console__link      { display: flex; align-items: center; font-size: var(--size-body-sm);
                      color: rgba(255, 255, 255, 0.84); text-decoration: none;
                      white-space: nowrap; }
.console__link[aria-current="page"] { font-weight: 600; color: var(--surface);
                      box-shadow: inset 0 -2px 0 var(--surface); }
.console__link:focus-visible { outline: 2px solid var(--surface); outline-offset: -2px; }

@media (max-width: 700px) {
  /* An operator on a phone has been paged, so nothing is dropped: the nav
     scrolls sideways at 44px targets and the tables become rows. */
  .console__masthead { flex-direction: column; padding: 0; }
  .console__brand   { padding: 12px 16px; }
  .console__nav     { margin-left: 0; gap: 0; overflow-x: auto;
                      border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .console__link    { min-height: 44px; padding: 0 16px; }
}

/* ---- Body and head ---------------------------------------------------- */

.console__body      { max-width: 1148px; padding: 32px 24px 40px;
                      margin-inline: auto; display: flex;
                      flex-direction: column; gap: var(--s-5); }
.console__head      { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.console__meta      { font-family: var(--font-mono); font-size: var(--size-meta);
                      color: var(--text-secondary); }
.console__mono      { font-family: var(--font-mono); font-size: var(--size-label);
                      color: var(--text-secondary); }
.console__host      { font-family: var(--font-mono); font-size: var(--size-label);
                      color: var(--text-secondary); overflow-wrap: anywhere; }
.crumb              { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
                      font-size: var(--size-body-sm); }
.crumb__sep         { color: var(--unrecorded); }
.crumb__here        { color: var(--text-secondary); }

/* ---- Figures ----------------------------------------------------------- */

.console__figures   { padding: 4px 24px 22px; display: flex; gap: var(--s-5);
                      flex-wrap: wrap; }
.console__figure    { flex: 1 1 128px; min-width: 118px; padding-top: 14px;
                      border-top: 1px solid var(--line-hairline); }
.console__figure-n  { font-size: var(--size-figure); font-weight: 600; line-height: 1;
                      letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.console__figure-n--quiet { color: var(--text-secondary); }
.console__figure-n--alarm { color: var(--warning-line); }
.console__figure-l  { margin-top: 6px; font-size: var(--size-meta); line-height: 1.4;
                      color: var(--text-secondary); }
.console__figure-note { margin-top: 4px; font-size: var(--size-label);
                      line-height: 1.45; color: var(--text-secondary); }

/* ---- A number in a table ----------------------------------------------- *
 * A ZERO IS QUIET AND A FIGURE IS INK, so a row with nothing happening does
 * not read as a row with something in it. An operator scanning six task rows
 * for the one that matters should not have to read six numbers to find it.
 *
 * QUIET IS --text-secondary AT 6.3:1, NEVER --inert. Every number here is
 * data somebody reads: "0 stalled" is the fact this page is scanned for, and
 * --inert is 3.11:1 with a contract that says it is "not text somebody needs
 * to read". A datum is text however unremarkable it is.                    */

.console__num       { padding: 13px 24px; font-family: var(--font-mono);
                      font-size: var(--size-body-sm); font-variant-numeric: tabular-nums;
                      text-align: right; color: var(--text); }
.console__num--quiet { color: var(--text-secondary); }
.console__num--alarm { color: var(--warning-line); font-weight: 600; }
.console__none      { color: var(--text-secondary); }
.console__late      { font-size: var(--size-meta); font-weight: 600;
                      color: var(--warning-line); }

/* ---- Key and value rows ------------------------------------------------ */

.console__pair      { padding: 13px 0; border-top: 1px solid var(--line-hairline);
                      display: flex; justify-content: space-between;
                      gap: var(--s-4); flex-wrap: wrap; }
.console__pair-k    { font-size: var(--size-body-sm); color: var(--text-secondary);
                      overflow-wrap: anywhere; }
.console__pair-v    { font-family: var(--font-mono); font-size: var(--size-body-sm);
                      font-weight: 600; font-variant-numeric: tabular-nums; }
.console__pair-v--plain { font-family: inherit; }
.console__window    { padding: 13px 24px; display: flex; justify-content: flex-end;
                      align-items: baseline; gap: 9px; flex-wrap: wrap; }

/* ---- Provisioning steps ------------------------------------------------ */

.console__step      { padding: 12px 0; border-top: 1px solid var(--line-hairline);
                      display: flex; gap: var(--s-3); align-items: flex-start; }
.console__step-mark { flex: none; width: 15px; height: 15px; margin-top: 2px;
                      box-sizing: border-box; }
.console__step-mark--todo { border: 1.5px dotted var(--unrecorded); }
.console__step-label { font-size: var(--size-body-sm); line-height: 1.5;
                      color: var(--text); }
.console__step-label--todo { color: var(--text-secondary); }

/* ---- A command, quoted ------------------------------------------------- *
 * The 3px bar, which is quoted content everywhere in this product. A 4px bar
 * would make a command an operator may run read as a system status.       */

.console__command   { margin-top: 13px; display: inline-block;
                      font-family: var(--font-mono); font-size: var(--size-meta);
                      color: var(--text); background: var(--surface-sunken);
                      border-left: 3px solid var(--quote); padding: 10px 13px;
                      overflow-wrap: anywhere; }

.console__course    { display: flex; align-items: baseline; gap: 9px; min-width: 0; }

/* ---- Tables ------------------------------------------------------------ */

.table--tenants     { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 150px 120px 120px; }
.table--runs        { grid-template-columns: 180px 130px minmax(0,1fr) 130px; }
.table--queue       { grid-template-columns: minmax(0,1fr) 110px 110px 110px; }
.table--periodic    { grid-template-columns: minmax(0,1fr) 120px 200px; }
.table--retention   { grid-template-columns: minmax(0,1fr) 170px 150px 170px; }
.table--content     { grid-template-columns: minmax(0,1fr) 110px 130px 160px 170px; }
.table__th--right   { text-align: right; }

@media (max-width: 900px) {
  .table--tenants, .table--runs, .table--queue, .table--periodic,
  .table--retention, .table--content { grid-template-columns: minmax(0, 1fr); }
  .table__head      { display: none; }
  .table__row       { padding: 13px 0; gap: 6px; }
  .table__cell      { padding: 0 16px; }
  .console__num     { padding: 0 16px; text-align: left; }
  .console__window  { padding: 0 16px; justify-content: flex-start; }
  /* Tasks with nothing in them are not listed at this width, the view
     filters them, because a phone is where somebody is looking for the one
     row that is on fire. */
}

/* ---- Tenant and course states ------------------------------------------ *
 * The product's .chip, with the console's four states. Active takes the ink
 * border rather than the evidence green: a tenant being active is a fact,
 * not an achievement, and green in this product means a level demonstrated. */

.chip--active       { border: 1px solid var(--text); color: var(--text); }
.chip--provisioning { border: 1.5px dotted var(--unrecorded);
                      color: var(--text-secondary); }
.chip--suspended    { border: 1px solid var(--gap-line); color: var(--gap-text);
                      background: var(--gap-fill); }

/* ---- The split the tenant and queue pages use -------------------------- */

.layout--split-even { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

/* ---- One course, and the framework ------------------------------------ */

.table--lessons     { grid-template-columns: 44px minmax(0,1fr) 120px 90px 130px; }
.table--bank        { grid-template-columns: 70px minmax(0,1fr) 140px 130px 160px; }
.table--history     { grid-template-columns: 150px 130px minmax(0,1fr); }
.table--framework   { grid-template-columns: 70px 200px repeat(4, minmax(0,1fr)); }

/* A superseded version keeps its row and recedes. --surface-sunken, the canvas's
   own recessive fill: an unnamed near-white here was the defect that made the
   point about values the stylesheet does not name. */
.table__row--superseded { background: var(--surface-sunken); }

/* A thin pool is an AUTHORING shortfall. It takes --gap-text and a tag, never the
   competency gap hatch: that mark means a PERSON is below a requirement, and
   borrowing it would put a learner's language on our own unfinished work. */
.console__num--thin { color: var(--gap-text); }
.console__target    { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }

/* A review date past is not an error: the source has not changed, we have not
   checked it. The gap colour rather than the error colour, for that reason. */
.console__overdue   { font-size: var(--size-meta); color: var(--gap-text); }
.console__source    { padding: 12px 0; border-top: 1px solid var(--line-hairline);
                      display: flex; flex-direction: column; gap: 5px;
                      font-size: var(--size-body-sm); line-height: 1.4; }
.console__source-meta { display: flex; gap: var(--s-3); flex-wrap: wrap;
                      align-items: baseline; }

.console__descriptor { font-size: var(--size-label); line-height: 1.5;
                      color: var(--text-secondary); }

@media (max-width: 900px) {
  /* The framework's four descriptors STACK under their competency, each labelled
     with its level, rather than the row scrolling sideways. The comparison worth
     preserving here is between the four levels of ONE competency, which is down a
     column and not across the table, so stacking keeps it where the matrix's
     sideways scroll keeps the other. */
  .table--lessons, .table--bank, .table--history, .table--framework {
                      grid-template-columns: minmax(0, 1fr); }
  .console__descriptor::before { content: "LEVEL " attr(data-level);
                      display: block; margin-bottom: 3px;
                      font-family: var(--font-mono); font-size: var(--size-micro);
                      font-weight: 600; letter-spacing: .14em;
                      color: var(--text-secondary); }
  .console__descriptor { padding-top: 8px; }
}

/* ---- The one write --------------------------------------------------- *
 * ADR 0022. A tenant's branding is the only block in this console that
 * writes, so it says so: a left border and a tag, because an operator who
 * has learned that nothing on these pages acts needs telling once that
 * this does.
 *
 * Ink rather than a tenant colour on the control, for the same reason the
 * masthead is ink: there is no tenant whose colour this console wears.   */

.card--write        { border-left: 4px solid var(--text); }
.console__write-tag { font-family: var(--font-mono); font-size: var(--size-caps);
                      font-weight: 600; line-height: 1.5; letter-spacing: .1em;
                      color: var(--surface); background: var(--text);
                      padding: 3px 8px; white-space: nowrap; }
.console__write-body { padding: 20px 24px 4px; display: grid;
                      grid-template-columns: minmax(320px, 1fr) minmax(300px, 1fr);
                      gap: 26px; align-items: start; }
.btn--console       { padding: 15px 24px; background: var(--text);
                      color: var(--surface); border: none;
                      font-size: var(--size-body-sm); font-weight: 600; line-height: 1;
                      cursor: pointer; }
.btn--console:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.14); }
.btn--console[aria-disabled="true"] { background: var(--line-hairline);
                      color: var(--inert); border: 1px solid var(--line);
                      pointer-events: none; }

/* The swatch sits beside the field rather than being a picker: the value comes
   from the customer's brand guide, and a picker invites an operator to choose
   one. Dotted when the value does not read as a colour, because a stand-in
   previewed on their bar is worse than an empty square. */
.console__colour    { display: flex; align-items: stretch; }
.console__colour-swatch { width: 44px; border: 1.5px solid var(--text);
                      border-right: none; }
.console__colour-swatch--none { background: var(--surface);
                      border: 1.5px dotted var(--unrecorded); border-right: none; }
.console__colour-field { flex: 1; min-width: 0; font-family: var(--font-mono); }
.console__colour-field--bad { border-color: var(--warning-line); }
.console__field-error { font-size: var(--size-label); line-height: 1.55;
                      color: var(--warning-line); }
.console__url       { font-family: var(--font-mono); font-size: var(--size-meta);
                      overflow-wrap: anywhere; }

.console__derived   { background: var(--surface-sunken); border: 1px solid var(--line);
                      padding: 18px 20px; display: flex; flex-direction: column;
                      gap: var(--s-3); }
.console__derived-row { padding-top: 11px; border-top: 1px solid var(--line);
                      display: flex; align-items: center; gap: 11px;
                      font-size: var(--size-label); line-height: 1.5;
                      color: var(--text); }
.console__derived-chip { flex: none; width: 26px; height: 26px;
                      border: 1px solid var(--text); }
.console__derived-chip--none { background: var(--surface);
                      border: 1.5px dotted var(--unrecorded); }

/* ---- The preview ------------------------------------------------------- *
 * THE ONE PLACE in the console that sets the tenant tokens, and it sets them
 * on this element rather than the document: the console's own masthead reads
 * --text and must not inherit a customer's colour.
 *
 * It renders a fill AND a link rather than swatches, because the pair is what
 * differs by colour: a pale gold takes ink on the bar with a darkened link, a
 * navy takes white and its link is the colour itself.                      */

.console__preview   { margin: 0 20px 16px; border: 1px solid var(--line); }
.console__preview-bar { display: flex; align-items: stretch; padding: 0 16px;
                      background: var(--t-raw);
                      border-bottom: 1px solid var(--t-edge); min-height: 52px; }
.console__preview-brand { display: flex; align-items: center; gap: 11px; }
.console__preview-nav { margin-left: auto; display: flex; align-items: stretch;
                      gap: var(--s-5); }
.console__preview-body { padding: 16px 18px; display: flex; align-items: center;
                      gap: var(--s-4); flex-wrap: wrap; }
.masthead__plate-name { font-size: var(--size-label); font-weight: 600;
                      white-space: nowrap; }

@media (max-width: 900px) {
  .console__write-body { grid-template-columns: minmax(0, 1fr); }
  .console__preview-bar { flex-wrap: wrap; }
  .console__preview-nav { margin-left: 0; flex: 0 0 100%; overflow-x: auto;
                      gap: 0; }
  .console__preview-nav .masthead__link { padding: 10px 12px 12px 0; }
}

/* ---- The operator's three doors -------------------------------------- *
 * The gate card and the page frame both sit under the console's own ink
 * bar. The product's bar is built to carry a tenant and these pages have
 * none, so a frame made to hold a customer's plate with our mark in it
 * would be the wrong frame wearing our mark.                            */

.btn--fill          { width: 100%; text-align: center; padding: 14px 16px; }

/* Grouped in FOURS and wrapped with overflow-wrap, not break-all: break-all
   split a four-character group across two lines, which is the one thing a
   key read off a screen cannot afford. */
.console__secret    { border: 1px solid var(--unrecorded); padding: 12px 13px;
                      font-family: var(--font-mono); font-size: var(--size-body);
                      line-height: 1.5; letter-spacing: .08em;
                      overflow-wrap: anywhere; }
.console__qr        { flex: none; width: 150px; height: 150px;
                      border: 1px solid var(--line);
                      background: var(--surface-sunken);
                      display: grid; place-items: center; }
.console__mono-label { font-family: inherit; }

/* ---- The console bar's two rules, both taken from the founder --------- *
 * The wordmark is a link to the console's front. The mark is the way home
 * from any page, exactly as a tenant's lockup is, and a console whose mark
 * does nothing teaches that marks here do nothing.
 *
 * No hover underline on a section link, the same rule the tenant's bar has
 * had since 16a: tokens.css's a:hover puts one on every anchor, and the
 * current section already carries an underline AS ITS MARK. A hover
 * underline would make any link look current under the pointer, which is
 * the one thing that mark cannot afford to mean twice.                   */

.console__home      { display: inline-flex; align-items: baseline;
                      text-decoration: none; color: inherit; }
.console__home:hover { text-decoration: underline; text-underline-offset: 2px; }
.console__link:hover { text-decoration: none; }

/* ---- The console's foot: yes, and for one reason --------------------- *
 * The product's foot carries tenant-facing links (privacy, terms, how
 * your record is used) and an operator needs none of them: those are
 * promises to a learner about their own record, and an operator is not
 * the subject of anything here.
 *
 * But the console gets a foot anyway, because it can carry the one thing
 * the product's has no reason to and the console cannot do without: THE
 * DEPLOY'S VERSION. An operator reporting a fault has to be able to say
 * which build they were looking at, and a console whose pages cannot
 * answer that turns every report into a question.
 *
 * So: the lockup, the version, nothing else. No links, because there is
 * nowhere a foot should take an operator that the bar does not.         */

.console__foot      { margin-top: auto; padding: 18px 24px;
                      border-top: 1px solid var(--line);
                      display: flex; align-items: baseline; gap: var(--s-4);
                      flex-wrap: wrap; }
.console__foot-mark { display: inline-flex; align-items: center; gap: 2px;
                      font-size: var(--size-body-sm); font-weight: 600;
                      letter-spacing: -0.02em; color: var(--text-secondary); }
.console__foot-mark svg { flex: none; height: 15px; width: 15px; }
.console__version   { margin-left: auto; font-family: var(--font-mono);
                      font-size: var(--size-label); color: var(--text-secondary);
                      font-variant-numeric: tabular-nums; }

/* ======================================================================== *
   THE AUTHORING TOOL. Canvas: Authoring Tool.dc.html, boards 31a to 31h.
   ======================================================================== */

/* ---- The storyboard: a beat is a PAIR, not a field set --------------- *
 * ADR 0005 makes the narration describe the screen, so a beat is one thing
 * with two faces and splitting it into fields would let somebody write
 * either half without the other.
 *
 * It reads as a document because the narration is set in READING type on a
 * 60ch measure at 1.7: somebody proofreads this and somebody else records
 * from it, and both of those are reading. The cue is secondary, an
 * instruction to one person rather than words anybody will hear.
 *
 * That makes the hand-off free: the transcript IS the narration column and
 * the caption base is that column timed, with no second document to drift. */

.table--beats       { grid-template-columns: 44px minmax(0, 1fr) 300px; }
.beat               { padding: 18px 22px; border-bottom: 1px solid var(--line-hairline);
                      display: grid; grid-template-columns: 44px minmax(0, 1fr) 300px;
                      gap: var(--s-5); align-items: start; }
.beat__words        { max-width: 60ch; font-size: var(--size-body); line-height: 1.7;
                      color: var(--text); text-wrap: pretty; }
.beat__cue          { font-size: var(--size-body-sm); line-height: 1.6;
                      color: var(--text-secondary); }
.beat__input        { width: 100%; box-sizing: border-box; border: 1px solid var(--line);
                      background: var(--surface); padding: 10px 12px;
                      font-family: inherit; font-size: var(--size-body);
                      line-height: 1.7; color: var(--text); resize: vertical; }
.beat__input--cue   { font-size: var(--size-body-sm); line-height: 1.6;
                      color: var(--text-secondary); }
.beat__input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.beat__label        { position: absolute; width: 1px; height: 1px; padding: 0;
                      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
     /* clipped, not display:none: every field keeps a label for a screen reader,
        and the column head is not one, because it labels three fields at once */

/* A DRAFTED beat is DOTTED, because dotted has meant "nothing recorded here"
   since the first competency track: an unassessed level, a role with no
   requirements, a mapping nobody set. A drafted beat is the same claim, so it
   takes the same mark and the tool gains no fifth vocabulary. Not the gap
   hatch, which means a person is short, and not the error palette: a draft is
   unfinished, not wrong. */
.beat--drafted      { border-left: 3px dotted var(--unrecorded); }
.tag--drafted       { border: 1.5px dotted var(--unrecorded);
                      color: var(--text-secondary); }
.tag--unset         { border: 1.5px dotted var(--unrecorded);
                      color: var(--text-secondary); }

/* A MARKED beat takes the gap fill on the WHOLE ROW: the beat is what needs
   attention, not the note about it. */
.beat--marked       { background: var(--gap-fill); }
.mark               { margin-top: 13px; background: var(--surface);
                      border: 1px solid var(--line-strong); padding: 13px 15px; }
.mark--open         { border-color: var(--gap-line); }
.mark__label        { font-family: var(--font-mono); font-size: var(--size-caps);
                      font-weight: 600; letter-spacing: .14em; color: var(--gap-text); }
.mark--settled .mark__label { color: var(--text-secondary); }
.mark__text         { margin-top: 9px; max-width: 56ch;
                      font-size: var(--size-body-sm); line-height: 1.6; color: var(--text); }
.mark--settled .mark__text { font-size: var(--size-meta); color: var(--text-secondary); }
     /* a settled mark RECEDES and is KEPT: the review is part of how the course was
        made, and the settled mark is the evidence somebody read the beat */

.story__head        { display: flex; gap: var(--s-5); align-items: flex-start;
                      flex-wrap: wrap; }
.story__time        { flex: none; width: 260px; background: var(--surface);
                      border: 1px solid var(--line); padding: 16px 18px; }
.console__figure    { font-size: var(--size-figure); font-weight: 600;
                      letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
                      line-height: 1; }

@media (max-width: 700px) {
  /* The cue moves UNDER its narration and keeps the quote bar, because a third
     column at this width is 90px and a cue is a sentence. An author writes at a
     desk; this width is for reading a beat back, which is what a narrator does. */
  .table--beats     { display: none; }
  .beat             { grid-template-columns: minmax(0, 1fr); gap: 11px; padding: 14px 16px; }
  .beat > :last-child { padding-left: 11px; border-left: 3px solid var(--quote); }
}

/* ---- The item bank's checks ------------------------------------------- *
 * Three are computable and read as figures. COMPARABLE DIFFICULTY is a
 * judgement, so the author states it per item and the check reports only
 * whether every item has one: a tool that guessed difficulty from sentence
 * length would be confidently wrong and nobody would notice.
 *
 * A THIN POOL IS A COUNT, NOT AN ERROR: the gap colour with its target
 * beside it, never a red refusal. A pool being written is supposed to be
 * short, and an error state on the ordinary condition of unfinished work
 * teaches somebody to ignore the colour. It becomes a refusal at publish
 * and nowhere else.                                                      */

.checks             { display: grid; grid-template-columns: repeat(4, 1fr);
                      gap: var(--s-4); }
.checks__card       { background: var(--surface); border: 1px solid var(--line);
                      padding: 16px 18px; }
.checks__card--short { border-color: var(--gap-line); }
.checks__fig        { font-size: var(--size-figure); font-weight: 600;
                      letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
                      line-height: 1; }
.checks__fig--short { color: var(--gap-text); }

.table--items       { grid-template-columns: 56px minmax(0, 1fr) 130px 120px 150px; }
.table__row--flagged { background: var(--gap-fill); }
.table__row--drafted { border-left: 3px dotted var(--unrecorded); }

@media (max-width: 900px) {
  .checks           { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .checks           { grid-template-columns: minmax(0, 1fr); }
  .table--items     { grid-template-columns: minmax(0, 1fr); }
}

/* ---- The checklist: a STATE per item, not a tick --------------------- *
 * A tick is a claim somebody made; a state is a fact the page can check.
 * Two rows are computed from the work and nobody can assert them; the two
 * that cannot be computed name the person they wait on, because a row that
 * names nobody is a row nobody does.                                     */

.checkrow           { padding: 16px 24px; border-bottom: 1px solid var(--line-hairline);
                      display: grid; grid-template-columns: 28px minmax(0, 1fr) 190px;
                      gap: var(--s-4); align-items: start; }
.checkrow__mark     { width: 22px; height: 22px; box-sizing: border-box;
                      display: grid; place-items: center;
                      font-family: var(--font-mono); font-size: var(--size-label);
                      font-weight: 600; }
.checkrow__mark--met  { border: 1.5px solid var(--met); color: var(--met); }
.checkrow__mark--open { border: 1.5px solid var(--gap-line);
                      background: var(--gap-fill); color: var(--gap-text); }
.checkrow__title    { font-size: var(--size-body-sm); font-weight: 600; line-height: 1.4; }
.checkrow__detail   { margin-top: 6px; max-width: 62ch; font-size: var(--size-meta);
                      line-height: 1.6; color: var(--text-secondary); }
.checkrow__state    { font-size: var(--size-meta); line-height: 1.5;
                      color: var(--text-secondary); }
.checkrow__state--open { color: var(--gap-text); }

.verrow             { padding: 11px 0; border-top: 1px solid var(--line-hairline);
                      display: grid; grid-template-columns: 110px minmax(0, 1fr) 130px;
                      gap: var(--s-4); align-items: baseline; }
.verrow__changed    { font-size: var(--size-body-sm); line-height: 1.55;
                      color: var(--text-secondary); }

@media (max-width: 700px) {
  .checkrow         { grid-template-columns: 28px minmax(0, 1fr); row-gap: 8px; }
  .checkrow > :last-child { grid-column: 2; }
  .verrow           { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

/* ---- The facts grid, and the tag ------------------------------------- */

.facts              { display: grid; grid-template-columns: 200px minmax(0, 1fr);
                      gap: 9px var(--s-5); font-size: var(--size-body-sm);
                      line-height: 1.5; }
.facts__term        { color: var(--text-secondary); }
.facts__value       { color: var(--text); }
.tag                { display: inline-block; padding: 2px 7px;
                      border: 1px solid var(--unrecorded);
                      font-family: var(--font-mono); font-size: var(--size-caps);
                      font-weight: 600; letter-spacing: .06em;
                      color: var(--text-secondary); white-space: nowrap; }
.chip--plain        { border: 1px solid var(--evidence); color: var(--evidence);
                      background: var(--surface); }

@media (max-width: 700px) {
  .facts            { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .facts__term      { margin-top: 9px; }
}

/* ---- Who is signed in ------------------------------------------------ *
 * The tenant's shape since 16a, on the console's fixed ink. ONE element,
 * a sibling of the nav rather than inside it, ordered at 360 rather than
 * duplicated: a details that changes parent loses its open state.
 *
 * The ring and the initials are white at a stated alpha and NOT derived.
 * The tenant's derive from the fill's luminance because a fill can be
 * gold; this bar is fixed, so one bar has one answer.
 *
 * The panel is anchored to the disclosure rather than the bar, which is
 * the correction the build made on the tenant's: unanchored it ran past
 * the viewport.                                                         */

.console__menu      { display: flex; align-items: center; position: relative; }
.console__account   { display: flex; align-items: center; gap: 9px; cursor: pointer;
                      list-style: none; font-size: var(--size-body-sm);
                      color: rgba(255, 255, 255, 0.72); }
.console__account::-webkit-details-marker { display: none; }
.console__menu[open] .console__account { color: var(--surface); font-weight: 600; }
.console__avatar    { width: 27px; height: 27px; border-radius: 50%;
                      border: 1px solid rgba(255, 255, 255, 0.42);
                      display: grid; place-items: center; padding-top: 0.43em;
                      box-sizing: border-box; font-family: var(--font-mono);
                      font-size: var(--size-caps); font-weight: 600;
                      color: var(--surface); }
.console__account:focus-visible { outline: 2px solid var(--surface); outline-offset: 2px; }
.console__panel     { position: absolute; right: 0; top: 100%; margin-top: 8px;
                      min-width: 200px; background: var(--surface);
                      border: 1px solid var(--line); padding: 8px 0; z-index: 10; }
.console__panel .link,
.console__panel-button { display: block; width: 100%; padding: 10px 16px;
                      text-align: left; background: none; border: none;
                      cursor: pointer; }
.console__divider   { width: 1px; align-self: center; height: 22px;
                      background: rgba(255, 255, 255, 0.16); }

@media (max-width: 700px) {
  /* The account stays on the FIRST row beside the wordmark: the nav row scrolls
     sideways here, and the way out must not sit on the axis that can carry it off
     screen. The name drops and the avatar carries it, because two truncating
     strings on one 360 row is a row of ellipses, and the OPERATOR tag drops with
     it: it says what kind of account this is, and the account element now says
     whose. */
  .console__masthead { flex-wrap: wrap; padding: 0; align-items: center; }
  .console__brand   { order: 1; padding: 10px 0 10px 16px; }
  .console__role    { display: none; }
  .console__menu    { order: 2; margin-left: auto; padding-right: 16px; min-height: 44px; }
  .console__account-name { display: none; }
  .console__divider { display: none; }
  .console__nav     { order: 3; flex: 0 0 100%; margin-left: 0; gap: 0;
                      overflow-x: auto;
                      border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .console__link    { min-height: 44px; padding: 0 16px; }
}

/* ---- The operator's own page ----------------------------------------- *
 * A row of three: what, where, and the state. The state is plain type and
 * not the error palette even for a failed sign-in, because the list is a
 * RECORD rather than an alarm, and a run of failures is what somebody
 * opens the page to see.                                                */

.console__row       { padding: 12px 0; border-top: 1px solid var(--line-hairline);
                      display: grid; grid-template-columns: 200px minmax(0, 1fr) 130px;
                      gap: 18px; align-items: baseline;
                      font-size: var(--size-body-sm); line-height: 1.45; }
.console__row-state { font-size: var(--size-meta); color: var(--text-secondary); }
.console__row-state--now { color: var(--text); font-weight: 600; }

@media (max-width: 700px) {
  .console__row     { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}