/* operator.css — THE CANON FOR THE OPERATOR SURFACE (S43).
 *
 * The fourth rendered surface, and it declares its own values because that is
 * what R-CANON-1 means: a canon is a block that does nothing but declare
 * name->value pairs for ONE rendered surface. The console, the client flow and
 * the client report each have theirs; this is the operator's list, the report
 * it opens in place, and Present mode.
 *
 * ⚠ EVERY TOKEN THIS SHEET USES IS DEFINED IN THIS SHEET. That is not tidiness,
 * it is the S31 defect: flow.css referenced the CONSOLE's sans token, defined in
 * a file the client flow never loads, and an undefined CSS variable is an empty
 * string rather than an error — so every screen of the client flow rendered in
 * the browser's default serif, past a green suite and a contact sheet on which
 * every capture cleared its bar. A canon is only a canon for the surface that
 * loads it. `tests/test_session32.py` resolves each sheet against itself alone;
 * this one is in that set.
 *
 * The values are Hub's mockup, taken verbatim rather than re-derived. R-PIXEL-1
 * governs S43 and the mockup is the spec: "build it, do not redesign it."
 */

:root {
  --op-navy:   #0A1A2C;
  --op-brand:  #0E2A47;
  --op-accent: #5B8FA8;
  --op-ink:    #131722;
  --op-ink2:   #3A4252;
  --op-slate:  #5B6577;
  --op-hair:   #DFE3E9;
  --op-sunk:   #F7F8FA;
  --op-paper:  #FFFFFF;
  --op-ok:     #1F7A5C;
  --op-bad:    #A33A31;
  --op-ok-bg:  #F1FAF5;
  --op-ok-line:#BFE0CF;
  --op-bad-bg: #FDF4F3;
  --op-bad-line:#EBC9C4;
  --op-hover:  #FAFBFC;
  --op-bar:    #FBFCFD;
  --op-font:   -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --op-r-sm:   7px;
  --op-r-md:   8px;
  --op-r-lg:   10px;
  --op-r-pill: 20px;
  --op-r-flip: 26px;
}

/* ── the shell ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body { margin: 0; background: var(--op-sunk); color: var(--op-ink);
       font: 14.5px/1.55 var(--op-font); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 26px; }
header { background: var(--op-brand); color: var(--op-paper); padding: 13px 0; }
.bar { display: flex; align-items: center; gap: 18px; }
.mk { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; }
.mk .g { width: 23px; height: 23px; border-radius: var(--op-r-sm);
         background: rgba(255,255,255,.12); display: grid; place-items: center;
         color: var(--op-accent); font-size: 12px; }
.sep { opacity: .45; }
.crumb { font-size: 13.5px; opacity: .85; }
.who { margin-left: auto; font-size: 12.5px; color: rgba(255,255,255,.72); }
.chip { background: rgba(255,255,255,.12); border-radius: var(--op-r-pill);
        padding: 3px 10px; font-size: 11.5px; }

/* ── the open-reads strip ───────────────────────────────────────────────── */
.strip { background: var(--op-paper); border-bottom: 1px solid var(--op-hair);
         display: flex; align-items: stretch; }
.strip .t { padding: 11px 15px; font-size: 13px; border-right: 1px solid var(--op-hair);
            cursor: pointer; color: var(--op-slate); display: flex; align-items: center;
            gap: 9px; white-space: nowrap; text-decoration: none; }
.strip .t.on { color: var(--op-ink); font-weight: 650;
               box-shadow: inset 0 -2px 0 var(--op-accent); }
.strip .t small { color: var(--op-slate); font-weight: 400; font-size: 11.5px; }
.strip .t .x { opacity: .35; font-size: 15px; background: none; border: 0;
               color: inherit; cursor: pointer; font-family: inherit; padding: 0; }
.strip .t .x:hover { opacity: 1; color: var(--op-bad); }
.strip .add { padding: 11px 15px; color: var(--op-accent); font-size: 13px;
              text-decoration: none; }

main { padding: 22px 0 70px; }

/* ── the filters ────────────────────────────────────────────────────────── */
.tools { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.tools input, .tools select { font: inherit; font-size: 13.5px; padding: 8px 11px;
       border: 1px solid var(--op-hair); border-radius: var(--op-r-md);
       background: var(--op-paper); color: var(--op-ink); }
/* S47 · a `<select>` is as wide as its widest option -- "Anyone at
   <org>" -- and with no ceiling it pushed the page 5px past a 390
   viewport ON ITS OWN, next to a table overflowing by 616. Both were
   true; only one was visible. */
.tools input, .tools select { max-width: 100%; }
.tools input { min-width: 230px; flex: 1 1 230px; }
.tools .sp { margin-left: auto; font-size: 12.5px; color: var(--op-slate); }

/* ── the list ───────────────────────────────────────────────────────────── */
/* S47 · the table scrolls in its OWN box; the page never scrolls sideways.
   Measured before this existed: 1006px of table against a 390 viewport. */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--op-paper);
        border: 1px solid var(--op-hair); border-radius: var(--op-r-lg); overflow: hidden; }
th { text-align: left; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
     color: var(--op-slate); padding: 11px 14px; border-bottom: 1px solid var(--op-hair);
     font-weight: 700; background: var(--op-sunk); }
td { padding: 12px 14px; border-bottom: 1px solid var(--op-hair); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.row:hover { background: var(--op-hover); }
td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co { font-weight: 650; }
.co small { display: block; font-weight: 400; color: var(--op-slate); font-size: 12px; }
.co a { color: inherit; text-decoration: none; }
.by { display: block; color: var(--op-slate); font-size: 11.5px; }
.pill { display: inline-block; font-size: 11px; padding: 2px 8px;
        border-radius: var(--op-r-pill); border: 1px solid var(--op-hair); color: var(--op-slate); }
.pill.d1 { border-color: var(--op-ok-line); color: var(--op-ok); background: var(--op-ok-bg); }
.pill.ref { border-color: var(--op-bad-line); color: var(--op-bad); background: var(--op-bad-bg); }
.act { display: flex; gap: 6px; justify-content: flex-end; }
.btn { font: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: var(--op-r-sm);
       border: 1px solid var(--op-hair); background: var(--op-paper); color: var(--op-ink2);
       cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--op-accent); color: var(--op-accent); }
.btn.p { background: var(--op-brand); border-color: var(--op-brand); color: var(--op-paper); }
.btn.d { border-color: var(--op-bad-line); color: var(--op-bad); }
.empty { padding: 26px; text-align: center; color: var(--op-slate); }

/* ── the report, in place ───────────────────────────────────────────────── */
.rv { background: var(--op-paper); border: 1px solid var(--op-hair);
      border-radius: var(--op-r-lg); overflow: hidden; }
/* ⚠ S47 · `flex-wrap` HERE IS A CORRECTNESS FIX, NOT A LAYOUT PREFERENCE.
   `.rv` hides its overflow, so at 390 the Open / Export / Remove group ran
   to x=498 and was CLIPPED -- the page reported `scrollWidth 390` and
   FITS, and the operator's controls were simply not on the screen. A fit
   assertion cannot see a control that was cropped rather than pushed. */
.rv .opbar { display: flex; align-items: center; gap: 14px; padding: 11px 18px;
             background: var(--op-bar); border-bottom: 1px solid var(--op-hair);
             flex-wrap: wrap; }
.rv .opbar .m { font-size: 12.5px; color: var(--op-slate); }
.rv .opbar .m b { color: var(--op-ink); }
.rv .opbar .act { margin-left: auto; }
.artframe { width: 100%; height: 78vh; border: 0; display: block; background: var(--op-paper); }
.note { background: var(--op-sunk); border-radius: var(--op-r-md); padding: 12px 14px;
        font-size: 12.5px; color: var(--op-ink2); margin-top: 14px; line-height: 1.55; }
.note b { color: var(--op-ink); }

/* ── PRESENT MODE ───────────────────────────────────────────────────────── */
.present-page { margin: 0; background: var(--op-paper); }
.present-frame { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; }
.exit { position: fixed; top: 14px; right: 16px; z-index: 91;
        background: rgba(10,26,44,.82); color: var(--op-paper); border: 0;
        border-radius: var(--op-r-md); padding: 8px 14px; font: inherit; font-size: 13px;
        cursor: pointer; text-decoration: none; }
.flip { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 91;
        background: rgba(10,26,44,.9); border-radius: var(--op-r-flip); padding: 6px;
        display: flex; gap: 4px; }
.flip a { color: rgba(255,255,255,.62); font: inherit; font-size: 13px; padding: 7px 15px;
          border-radius: var(--op-r-pill); text-decoration: none; }
.flip a.on { background: var(--op-paper); color: var(--op-brand); font-weight: 650; }

/* -- the door (S45) ------------------------------------------------------ */
/* A stranger's page. No chrome, no org, no counts -- see operator_signin.html. */
.door { max-width: 340px; margin: 0 auto; padding: 96px 26px; }
.door-mk { display: flex; align-items: center; gap: 9px; font-weight: 700;
           font-size: 15px; color: var(--op-brand); margin-bottom: 26px; }
.door-mk .g { width: 23px; height: 23px; border-radius: var(--op-r-sm);
              background: var(--op-sunk); display: grid; place-items: center;
              color: var(--op-accent); font-size: 12px; }
.door-form { background: var(--op-paper); border: 1px solid var(--op-hair);
             border-radius: var(--op-r-lg); padding: 22px; }
.door-label { display: block; font-size: 13px; color: var(--op-slate);
              margin-bottom: 7px; }
.door-input { width: 100%; padding: 10px 12px; font: inherit;
              color: var(--op-ink); background: var(--op-paper);
              border: 1px solid var(--op-hair); border-radius: var(--op-r-sm); }
.door-input:focus { outline: none; border-color: var(--op-accent); }
.door-go { width: 100%; margin-top: 14px; padding: 10px 12px; font: inherit;
           font-weight: 700; cursor: pointer; color: var(--op-paper);
           background: var(--op-brand); border: 1px solid var(--op-brand);
           border-radius: var(--op-r-sm); }
.door-go:hover { background: var(--op-navy); }
.door-retry { margin: 14px 0 0; font-size: 13px; color: var(--op-bad);
              background: var(--op-bad-bg); border: 1px solid var(--op-bad-line);
              border-radius: var(--op-r-sm); padding: 9px 11px; }

/* R-NAICS-1 §6 · the secondary-codes column. Quiet is the ruling: the same
   small mono register the operator's other identifiers use, so a code reads
   as an address and not as a claim. It is the only column on this table that
   is not sorted, filtered or counted. */
.alsonaics{font-size:11px;letter-spacing:.02em;color:var(--op-slate);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ══ S47 · BELOW 700 THE LIST IS CARDS, NOT A TABLE ═══════════════════════
   Nothing is hidden and no column is dropped -- a seven-column table on a
   phone is a page that fits and a list nobody can read, so each read becomes
   one card and each cell keeps its column name from `data-label`.

   ⚠ THE HEADER ROW GOES `position:absolute` RATHER THAN `display:none`.
   A `<th>` removed from the box tree is a `<th>` a screen reader stops
   announcing; taken out of FLOW it is still there, still read, and no longer
   occupying a row of its own above a stack that has its own labels. */
@media (max-width: 700px) {
  .tablewrap { overflow-x: visible; }
  table, tbody, tr, td { display: block; width: auto; }
  /* ⚠ DECLARED ON `table`, WHICH IS ALWAYS AN ANCESTOR OF THE CELLS THAT
     READ IT, and every use carries a fallback anyway. S46's lesson: an
     undefined custom property does not fall back, it invalidates the whole
     declaration -- so a label width that resolved to nothing here would
     collapse the column rather than widen it. */
  table { border: 0; background: transparent; --oplabel: 96px; }
  /* ⚠ `table > tr` MATCHES NOTHING. The parser inserts a `<tbody>` around
     rows the source did not put in one, so the header row is
     `table > tbody > tr:first-child` in the DOM whatever the template looks
     like. The first cut used `table > tr:first-child`, matched nothing, and
     the header cells stayed in flow -- CLIPPED by `table{overflow:hidden}`
     rather than pushing the page, so `scrollWidth` still said 390 and the
     fit assertion still passed. That is the same shape as the report bar's
     invisible buttons, found the same way: by the probe naming boxes that
     cross the edge, not by the page failing to fit. */
  thead, table > tr:first-child, table > tbody > tr:first-child {
     position: absolute; left: -9999px; }
  tr.row { background: var(--op-paper); border: 1px solid var(--op-hair);
           border-radius: var(--op-r-lg); padding: 4px 2px; margin-bottom: 10px; }
  tr.row:hover { background: var(--op-paper); }
  td { border-bottom: 1px solid var(--op-hair); padding: 9px 14px;
       display: flex; gap: 14px; align-items: baseline; }
  td:last-child { border-bottom: 0; }
  /* the column name, from the same string the `<th>` carries */
  td[data-label]::before { content: attr(data-label); flex: none;
        min-width: var(--oplabel, 96px);
        font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
        color: var(--op-slate); font-weight: 700; }
  td[data-label=""]::before { content: none; }
  /* a figure is right-aligned in a column and left-aligned beside its label */
  td.n { text-align: left; }
  /* ⚠ THE COMPANY CELL IS A FLEX ROW AND ITS DOMAIN IS A FLEX ITEM, which is
     how `https://nusbaummedicalcenters.com/` came out ONE CHARACTER PER LINE
     in a 20px column: the name took its content width, the address got the
     remainder, and `overflow-wrap:anywhere` did exactly what it was asked. It
     belongs on its own line under the name, where it was in the table. */
  td.co { flex-wrap: wrap; }
  .co small { display: block; flex: 1 0 100%;
              padding-left: calc(var(--oplabel, 96px) + 14px); }
  .by { display: inline; }
  /* ⚠ `anywhere` ON THE DOMAIN ONLY. A domain has no spaces to break at and
     198px of one was being CLIPPED by the card rather than wrapped inside it.
     Putting the same rule on `.co` broke the COMPANY NAME mid-word --
     "Nusbaumm / edicalcente / rs" on a client's own operator screen -- which
     the picture showed and the fit assertion could not. A name breaks at its
     spaces like a name; an address breaks anywhere because it has to. */
  td { min-width: 0; }
  .co small { overflow-wrap: anywhere; }
  .act { justify-content: flex-start; flex-wrap: wrap; }
  td.empty { display: block; }
}

/* ── S49 · THE REASONING SURFACE ────────────────────────────────────────────
 *
 * Every value below is a token declared in the canon block at the head of this
 * sheet. Nothing new is introduced: an undefined custom property does not fall
 * back, it ZEROES the declaration (S46), so a sheet that reaches for a token it
 * does not own renders a page with no padding and no error.
 */
.rsec { font-size: 15px; margin: 26px 0 8px; color: var(--op-ink); }
.rwarn { background: var(--op-bad-bg); border: 1px solid var(--op-bad-line);
         border-radius: var(--op-r-md); padding: 10px 12px; margin: 10px 0;
         color: var(--op-ink); font-size: 13px; }
.qlist { list-style: none; padding: 0; margin: 0; }
.qitem { border: 1px solid var(--op-hair); border-radius: var(--op-r-md);
         padding: 12px 14px; margin: 0 0 10px; background: var(--op-paper); }
.qhead { display: flex; gap: 10px; align-items: baseline; }
.qnum { color: var(--op-accent); font-weight: 700; }
.qtext { color: var(--op-ink); font-weight: 600; }
.qmeta { margin: 6px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.qopts { margin: 6px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.opt { border: 1px dashed var(--op-hair); border-radius: var(--op-r-pill);
       padding: 1px 9px; font-size: 12px; color: var(--op-slate); }
.qwhy { margin: 8px 0 0; color: var(--op-ink2); font-size: 13px; }
.rest { border: 1px solid var(--op-hair); border-radius: var(--op-r-md);
        padding: 10px 12px; margin: 0 0 8px; background: var(--op-paper); }
.rest > summary { cursor: pointer; display: flex; gap: 10px;
                  align-items: baseline; flex-wrap: wrap; }
.rlabel { font-weight: 600; color: var(--op-ink); }
.rrange { color: var(--op-slate); font-size: 13px; }
.relect { margin: 10px 0; color: var(--op-ink2); font-size: 13px; }
.rmethod { border: 1px solid var(--op-hair); border-radius: var(--op-r-md);
           padding: 14px 16px; background: var(--op-sunk); font-size: 13px;
           color: var(--op-ink2); }
.rmethod h3 { margin: 0 0 8px; color: var(--op-ink); font-size: 14px; }
.rclose { color: var(--op-slate); }
.rwith { font-size: 13px; color: var(--op-ink2); }
.qopts select, .qopts input[type="text"] {
  font: inherit; color: var(--op-ink); background: var(--op-paper);
  border: 1px solid var(--op-hair); border-radius: var(--op-r-sm);
  padding: 5px 8px; min-width: 0; max-width: 100%; width: 320px;
}