/* The house. One file, linked by every surface, because the alternative was tried and failed.
 *
 * CLAUDE.md, founder decision 25/08/2026: "Every surface we build uses the same two stacks,
 * defined once in platform/backend/static/portal.html and copied nowhere." The intent was right
 * and the mechanism did not exist — portal.html is an HTML page, not something another page can
 * include, so the only way to obey the rule was to copy. validators.html says so in its own
 * comment: "Tokens lifted from portal.html so this and the client workspace are the same product,
 * not two that resemble each other."
 *
 * WHAT COPYING COST, measured 04/09/2026. The copy took 27 of 47 tokens and dropped the rest —
 * among them --num, the mono stack the house rule names for figures in columns. So the same
 * amount of money rendered R306,765.00 on the Claims Workspace and in the proportional face on the
 * Validators Workspace, and the founder asked why. It dropped --sh-* as well, which is what
 * "warm" actually is on this product, and --r-*, so one page grew twelve accidental corner radii
 * where the other has five deliberate ones.
 *
 * And the copy went stale the moment it was made. Two corrections landed on portal.html on
 * 03/09/2026 — the claim columns centred, and --surface-2 added to answer "flat, cheap" — and
 * neither could reach the other page. He asked for both again the next day on the other screen.
 * He was not repeating himself. He was looking at the second copy.
 *
 * So: this file is the source. A page may still declare its own tokens for something genuinely
 * its own, and those win because they come later in the cascade — but anything shared belongs
 * here, changed once.
 */

:root{
  /* ---- type ------------------------------------------------------------ */
  --ui:"Aptos Display", Aptos, Inter, "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --num:"Aptos Mono", Aptos, ui-monospace, SFMono-Regular, "SF Mono", Menlo,
        Consolas, "Roboto Mono", monospace;

  /* ---- ink & ground ---------------------------------------------------- */
  --bg:#FAF7F2;              /* warm off-white workspace ground             */
  --card:#FFFFFF;
  --surface-2:#FDFAF6;       /* recessed warm surface                       */
  --warm:#FBF6EE;            /* table headers, quiet bands                  */
  --line:#E7DFD4;            /* warm hairline                               */
  --line-soft:#F1EAE0;
  --txt:#20293A;
  --muted:#6E6A62;

  /* ---- navy (legacy names kept: inline styles reference them) ---------- */
  --blue:#031E4A;
  --blue2:#02163A;
  --navy:#031E4A;
  --navy-2:#02132F;
  --navy-3:#26456F;

  /* ---- Prosumer gold — the accent that carries the platform identity --- */
  --gold:#A8842C;   /* brass — punctuation only */
  --gold-2:#8A6D22;
  --gold-ink:#6E561B;
  --gold-soft:#F7F1E2;
  --gold-line:#E3D6B4;

  /* ---- supporting ------------------------------------------------------ */
  --teal:#2E8494;
  --teal-soft:#E6F1F3;
  --teal-line:#CFE4E8;
  --ok:#199A2C;   --ok-soft:#E4F2EA;  --ok-line:#CDE6DA;  --ok-ink:#1F6349;
  --no:#C0392B;   --no-soft:#FBEDEB;  --no-line:#F0CFC9;  --no-ink:#9B2F22;
  --amber:#A9640F;

  /* ---- warm shadows (brown-cast, not blue-cast) ------------------------ */
  --sh-1:0 1px 2px rgba(58,42,20,.05), 0 2px 6px rgba(58,42,20,.05);
  --sh-2:0 2px 4px rgba(58,42,20,.05), 0 12px 28px -8px rgba(58,42,20,.16);
  --sh-3:0 24px 60px -18px rgba(20,32,52,.34), 0 2px 8px rgba(58,42,20,.08);

  /* ---- the two teals the tables use ------------------------------------
     Both workspaces wrote `var(--teal-dk, #00707B)` with a literal fallback,
     because the token did not exist. It does now, so the header band is one
     value in one place rather than the same hex typed on two pages.        */
  --teal-dk:#00707B;
  --teal-ink:#0A5460;
  /* The body face, named. `var(--sans)` was referenced on the Validators
     Workspace and had never been defined, so that rule silently did nothing
     — an invalid custom property drops the whole declaration. */
  --sans:"Aptos Display", Aptos, Inter, "Segoe UI Variable Display", "Segoe UI",
         system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ---- radii ----------------------------------------------------------- */
  --r-xl:20px; --r-lg:16px; --r:12px; --r-sm:10px; --r-xs:8px;

  /* ---- MIS night surface (warm charcoal, not cold blue-black) ---------- */
  --d-bg:#1A1A21;  --d-panel:#23232C; --d-panel-2:#2A2A35; --d-line:#33333F;
  --d-txt:#F0EBE3; --d-mut:#9A948A;   --d-gold:#E3A64F;
}

/* ---- the attachment drop zone ------------------------------------------
   Shared by the Claims Workspace and the Validators Workspace. It lived in
   neither stylesheet until 05/09/2026: `.dropzone`, `.dropped` and `.fi` were
   written in portal.html's markup with no rule anywhere, so C's drop zone had
   been rendering as bare markup since the day it shipped. It is here rather
   than in a page because both surfaces now carry it, and the founder's rule
   after the 27-of-47-tokens episode is that anything shared lives in this file
   and is changed once.                                                      */
.dropzone{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:26px 18px; text-align:center; cursor:pointer;
  border:1.5px dashed var(--line); border-radius:var(--r);
  background:var(--surface-2, var(--card)); color:var(--muted);
  transition:border-color .15s, background .15s, color .15s;
}
.dropzone:hover, .dropzone:focus-visible{
  border-color:var(--teal, var(--blue)); color:var(--txt, inherit);
  background:var(--teal-soft); outline:none;
}
/* The drag state has to be unmistakable — a file released over the wrong part
   of the page is silently lost. */
.dropzone.over{
  border-color:var(--teal, var(--blue)); border-style:solid;
  background:var(--teal-soft); color:var(--teal-ink, var(--txt, inherit));
}
.dropzone b{ font-weight:600; }
.dropzone .sub{ font-size:.85em; }

/* What was chosen, before it is sent. */
.dropped{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--line-soft, var(--line));
  border-radius:var(--r-sm); background:var(--surface-2, var(--card));
}
.dropped b{ font-weight:600; word-break:break-word; }
.dropped .sub{ color:var(--muted); }
.fi{ font-size:1.1em; line-height:1; }

/* ---- the documents table ------------------------------------------------
   Shared by both workspaces so they cannot drift apart again. Founder,
   05/09/2026, comparing the two: *"C's gold is still good but the bold on the
   attachment is a bit much. Also can we centralise C's attachments as well."*  */
.doctable th, .doctable td{ text-align:center; vertical-align:middle; }
/* Item and Description stay left: they are prose, and centred prose in a
   column of varying lengths reads as ragged on both edges. */
.doctable th:first-child, .doctable td:first-child,
.doctable th:nth-child(2), .doctable td:nth-child(2){ text-align:left; }

/* THE DOCUMENT LINK, and it is the SAME LINK on both surfaces. Founder,
   07/09/2026: *"the colors of the attachment links is different, not bold."*

   He was looking at one rule producing two results. `.doctable a{font-weight:400}`
   is (0,1,1); the Claims Workspace's `a.link{...600}` is also (0,1,1) and comes
   later, so it won there — while the Validators Workspace's `.link{...600}` is
   only (0,1,0) and lost. Same stylesheet, same markup, opposite outcomes,
   decided by a specificity digit.

   Named once here at the strength that beats both, in SAU's gold. */
.doctable a, .doctable a.link{
  color:var(--gold-2); font-weight:600; text-decoration:none; cursor:pointer;
  border-bottom:1px solid rgba(169,100,15,.32);
}
.doctable a:hover, .doctable a.link:hover{
  color:var(--gold-ink); border-bottom-color:currentColor;
}

/* Attached, not attached, and not yet known. The third is an em dash on
   purpose — "the push has not reported" is not the same as "no", and a cross
   in its place would end an enquiry that ought to start one. */
.tick{ color:var(--ok); font-weight:700; font-size:15px; text-decoration:none;
       line-height:1; display:inline-block; }
a.tick{ border-bottom:1px solid transparent; }
a.tick:hover{ border-bottom-color:currentColor; }
.cross{ color:var(--no); font-weight:700; font-size:15px; line-height:1;
        display:inline-block; }

/* THE DELETE CONTROL — a word with a rule under it, which is the shape the
   founder sent on 07/09/2026 after two rounds of me redrawing the ring:
   *"Otherwise change both to the attached look and function - with the wording
   delete."*

   Worth writing down why the ring kept being wrong, because the answer was not
   the ring. Both surfaces render this cell from ONE line — `House.documentRow`
   in house.js — against ONE token set, so there was never a difference between
   them to fix; I kept adjusting a control that was already identical. What he
   was actually reading was a glyph. A bare × carries no verb: it could mean
   remove, close, clear or dismiss, and in a warm table of eleven-point text it
   reads as decoration rather than as a control. The word says which of those
   it is before the pointer arrives.

   Teal rule at rest, red under the hand. A destructive control that shouts
   invites the click it should discourage; one that gives no sign at all
   invites a surprise. */
.del{ display:inline-block; padding:0 0 2px; margin:0; cursor:pointer;
      background:none; border:0; border-bottom:2px solid var(--teal);
      font-family:inherit; font-size:11px; font-weight:600; line-height:1.25;
      letter-spacing:.01em; color:var(--txt); white-space:nowrap;
      transition:color .12s, border-color .12s; }
.del:hover, .del:focus-visible{ color:var(--no); border-bottom-color:var(--no);
      outline:none; }
.del[disabled]{ opacity:.4; cursor:default; }
.del[disabled]:hover{ color:var(--txt); border-bottom-color:var(--teal); }

/* ---- the floating door ---------------------------------------------------
   One persistent way into SafetyCulture from anywhere inside a claim, so a
   validator never has to go back to a header to get there. Bottom right,
   above the content, out of the way of a table's own scrollbar.            */
.floatdoor{
  position:fixed; right:20px; bottom:20px; z-index:40;
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius:999px;
  background:var(--teal, #0E6E7D); color:#fff; text-decoration:none;
  font-weight:600; font-size:13px; box-shadow:var(--sh-2);
  transition:transform .12s, box-shadow .12s, background .12s;
}
.floatdoor:hover, .floatdoor:focus-visible{
  transform:translateY(-1px); box-shadow:var(--sh-3);
  background:var(--teal-ink, #0A5460); outline:none; color:#fff;
}
/* Their mark sits in a white rounded square of its own, because the artwork is
   drawn white-on-transparent and would vanish into the button otherwise. */
/* MEDIUM, AND THE MARK ALONE. Founder, 06/09/2026: *"I do not want Open in Mitti - I simply
   want their icon medium size floating - we will teach the validators to click on it."* */
.floatdoor .fd-m{ width:30px; height:30px; display:block; flex:0 0 auto; }
.floatdoor{ padding:10px; gap:0; border-radius:50%; }
/* On a phone the label costs more than it earns; the arrow carries it. */
@media (max-width:640px){
  .floatdoor{ padding:12px; gap:0; }
  .floatdoor .fd-t{ display:none; }
}


/* ---- the claim list ------------------------------------------------------
   ONE COMPONENT, USED BY EVERY SURFACE. Founder, 06/09/2026, comparing the
   Pending tab on the two workspaces: *"I do not want inconsistent art works
   used on V, C or CC... I have mentioned consistency how many times."*

   He is right, and the cause is instructive. The Validators Workspace carried
   a block of rules whose own comment read "every rule here was a divergence
   found by comparing this file against portal.html" — a hand-maintained copy
   of another page's look, which is a copy that goes stale the moment it is
   made. This is the same lesson as house.css itself, one layer up: the fix is
   not to re-copy the look, it is to have one look that nothing needs to copy.

   Add `class="claims"` to a claim list and it is right by construction. A
   surface may still differ in WHAT it shows — the Validators Workspace needs
   a Client column and the Claims Workspace does not — but never in how.     */
/* SEPARATE, so the header's corners can round at all — `border-radius` on a
   table cell is ignored under `collapse`, whatever the selector says. */
table.claims{ width:100%; border-collapse:separate; border-spacing:0; }
.claims th, .claims td{
  padding:11px 10px; font-size:10.5pt; vertical-align:middle;
  /* Centred, heading and cell together. A column left-aligned by default, the
     next right-aligned by a class and a pill centring itself gave one row
     three alignments and none of them lined up with the heading above it. */
  text-align:center;
}
.claims th{
  background:var(--teal-dk); color:#fff; font-weight:700; white-space:nowrap;
  border-bottom:none;
}
/* THE HEADER SITS INSIDE THE CARD, not across it. Founder, 07/09/2026, on the
   Home table: *"what is the different with SAU vs V shape of this column?"* —
   the Claims Workspace rounds the ends of its header and the Validators
   Workspace did not, so a square teal bar sat inside a rounded white frame and
   read as bursting out of it.

   Scoped to `.claims` only, which is why it never reached the MIS tables. Any
   table with a teal header wants it.                                        */
.claims thead tr:first-child th:first-child,
.claims tr:first-child th:first-child,
table.mis tr:first-child th:first-child,
table.doctable tr:first-child th:first-child{ border-radius:var(--r-xs) 0 0 0; }
.claims thead tr:first-child th:last-child,
.claims tr:first-child th:last-child,
table.mis tr:first-child th:last-child,
table.doctable tr:first-child th:last-child{ border-radius:0 var(--r-xs) 0 0; }
.claims td{ border-bottom:1px solid var(--line-soft); }
.claims tbody tr:last-child td{ border-bottom:none; }
/* The ground is WHITE, with the faintest warm alternate. This is the one the
   founder saw: the Validators list sat on the warm card ground and read as a
   different product beside the same table on the Claims Workspace. */
.claims tbody tr{ background:var(--card); }
.claims tbody tr:nth-child(even){ background:#FDFBF8; }
.claims tbody tr.clickable{ cursor:pointer; }
.claims tbody tr.clickable:hover{ background:#FDF5E9; }
.claims tbody tr.clickable:hover td:first-child{ box-shadow:inset 3px 0 0 var(--gold); }
.claims tbody tr.clickable td{ transition:background .12s ease; }

/* A claim number is an identifier: tabular figures so they scan down the
   column, at the same size and weight as the rest of the row. */
.claims td.claimno, .claims tbody td:first-child{
  font-family:var(--num); font-variant-numeric:tabular-nums;
  font-weight:600; color:var(--teal-dk); letter-spacing:-.02em; white-space:nowrap;
}
/* MONEY BY NAME, NEVER BY POSITION. The Validators Workspace set its quantum
   column with `td:nth-child(9)` and the Claims Workspace has quantum in a
   different column, so the same amount was mono on one screen and the body
   face on the other — which is exactly what the founder spotted. A class
   travels with the cell whatever order the columns are in.               */
.claims td.money, .money{
  font-family:var(--num); font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1; white-space:nowrap;
}
/* Names are the eye's anchor down a claims list; never let a surname break
   across three lines, because the row grows and the list loses its rhythm. */
.claims td.name{ white-space:nowrap; }

/* The document table's interior is WHITE, like every other table on the house.
   Founder, 06/09/2026: *"You have white inside the table in SAU - but for some
   reason you match the external colour with the table interior as well."* The
   Validators card sits on the warm ground and the table was inheriting it. */
.doctable tbody tr, table.doctable tr{ background:var(--card); }
.doctable tbody tr:nth-child(even){ background:#FDFBF8; }
.doctable th{ background:var(--teal-dk); color:#fff; }

/* ============================ the notepad ==============================
   ONE NOTEPAD, ONE LOOK. Founder, 06/09/2026, on the Validators Workspace:
   *"The look and feel is again not matching SAU notepad - please apply the
   same look and feel as the below."*

   He was right, and the cause is the one this file exists for. The Claims
   Workspace drew a note as a bordered card on the second surface; the
   Validators Workspace drew a left rule and nothing else, with the byline
   under a different class name (`.when` against `.meta`). Two independent
   implementations of the same object, so no change to one could ever reach
   the other — which is why he has now asked for the same thing twice.

   Both surfaces link this file. The rules live here; the note is built by
   `House.noteRow` in house.js, which emits this markup.                   */
.msg{ background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:11px 14px; margin-top:10px;
  font-size:13.5px; line-height:1.6; }
.msg .meta{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:5px; }
.msg .notify{ font-size:11.5px; color:var(--teal); margin-top:6px; }
/* An entry the SYSTEM wrote, not a person. Tinted rather than labelled, so a
   validator scanning a long claim can see at a glance which lines are somebody
   speaking and which are the machine keeping a record. */
.msg.system{ background:var(--teal-soft); border-color:var(--teal-line);
  border-left:3px solid var(--teal); }
.msg.reply{ background:#fff; border-left:3px solid var(--gold-line); }
.msg .reply-link{ font-size:11.5px; margin-left:10px; font-weight:600; border-bottom:none; }
.msg .reply-link:hover{ border-bottom:1px solid currentColor; }

/* ============================ tabs =====================================
   ONE TAB STRIP, TWO MARKUPS. The Claims Workspace writes `.tabs > .tab.active`
   and the Validators Workspace writes `.subnav > a.on`; the two were styled
   separately and looked it — a gold bar and blue label on one, a teal underline
   and navy label on the other, at different sizes. Founder, 06/09/2026: *"I do
   not want inconsistent art works used on V, C or CC... I have mentioned
   consistency how many times."*

   The selector list is deliberate. Renaming one page's classes would mean
   touching its markup and the JavaScript that toggles them on the day before he
   tests it; naming both here gets the same result with one definition and no
   second copy to go stale. When the markup is next touched, it becomes `.tabs`.  */
.tabs, .subnav{ display:flex; gap:2px; margin:18px 0 20px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); }
.tab, .subnav a{ position:relative; padding:10px 16px; border:none; border-bottom:0;
  background:transparent; border-radius:var(--r-sm) var(--r-sm) 0 0; color:var(--muted);
  font-size:13.5px; font-weight:600; cursor:pointer;
  transition:color .13s ease, background .13s ease; }
.tab:hover, .subnav a:hover{ color:var(--blue); background:var(--warm); }
.tab.active, .subnav a.on{ color:var(--blue); background:transparent; }
.tab.active::after, .subnav a.on::after{ content:""; position:absolute;
  left:12px; right:12px; bottom:-1px; height:2.5px; border-radius:3px 3px 0 0;
  background:var(--gold); }
.tabpane{ display:none; }
.tabpane.active{ display:block; }

/* ==================== a view heading, and the chips under it =============
   Founder, 07/09/2026, comparing the Validators Workspace against the Claims
   Workspace: *"the SAU can the gold before the Pending, then below that the
   different products and then all is covered by a white framework that is
   rounded and not so square as Validators - so the round edges looks a lot
   better and professional. I am not sure how many times I have asked this -
   but I want things consistent across the different site bud."*

   Both were already in portal.html and neither could reach the other page.
   They live here now, and `section > h2` is named alongside `.view > h1` so
   the Validators Workspace gets the gold rule without its markup changing on
   the morning he is reading it.                                            */
/* ANY view heading, however deep it sits. Founder, 07/09/2026: *"I dont see the
   gold as I see with Home, Finalised, MIS and Tools."* Pending's heading lives
   inside a wrapper div, so the child combinator `section > h2` skipped exactly
   the one screen he lands on. */
.view > h1::before, section h2:first-of-type::before{
  content:""; display:inline-block; width:4px; height:19px; border-radius:2px;
  background:var(--gold); margin-right:11px; vertical-align:-3px;
}

/* ONE SIZE, WHATEVER THE LABEL — his words, *"(all same size please)"*, and
   the reason is that chips which hug their text give a ragged row where the
   eye reads width as importance: the longest option looks like the main one. */
.introchips{ display:inline-flex; gap:7px; flex-wrap:wrap; align-items:center; }
.introchips button{
  font-family:inherit; font-size:12px; padding:4px 12px; border-radius:14px;
  border:1px solid var(--line); background:#fff; color:var(--muted);
  cursor:pointer; min-width:112px; text-align:center; white-space:nowrap;
}
.introchips button:hover{ background:var(--warm); }
.introchips button.on{ background:var(--navy); border-color:var(--navy);
  color:#fff; font-weight:600; }
.introchips button:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

/* WHOSE WORK IT IS, in that business's own colour. Founder: *"can we please
   also have Business also highlight the colour scheme of Prosumer and
   RiXForensica as we did between SAU and Bsure please?"* Two badges, told
   apart at a glance rather than read.                                       */
/* A SOLID PILL, LIKE THE CLIENT CHIP BESIDE IT. Founder, 07/09/2026: *"That
   RiX letters looks shocking - can we please Bold it... or use a round red
   colour and then use white for letter bold? And can we make it a round frame
   as well?"* A pale tint with dark text next to a solid green client chip read
   as a mistake rather than a pair.

   THE REDS ARE SAMPLED, NOT CHOSEN. `#BC302A` is the centre of the red in
   rixforensica_transparent.png and `#06124E` the navy in the Prosumer Connect
   mark — read off their own artwork, the same standard the client chips are
   held to: a company's colour is theirs, not our impression of it. */
.biz{ display:inline-block; min-width:44px; text-align:center;
  padding:2px 10px; border-radius:11px; font-size:11.5px; font-weight:700;
  color:#fff; white-space:nowrap; letter-spacing:.02em; }
.biz-rix{ background:#BC302A; }
.biz-pro{ background:#06124E; }

/* THE CLIENT IN THEIR OWN COLOUR, painted from the config record the server
   serves — never from a table in this file, because a new client arrives with
   their own colour and nobody should edit a stylesheet to add them.          */
.cchip{ display:inline-block; padding:2px 9px; border-radius:11px; font-size:11.5px;
  font-weight:600; white-space:nowrap; color:#fff; }
.cchip.plain{ background:#fff; color:var(--muted); border:1px solid var(--line); }

/* STATUS, THE WAY THE CLAIMS WORKSPACE DOES IT. Founder, 07/09/2026: *"under
   status - can we please adjust it with colour we do for SAU as well please."* */
.pill.pending{ background:var(--gold-soft); color:var(--gold-ink); border-color:var(--gold-line); }
.pill.final, .pill.ok{ background:var(--ok-soft); color:var(--ok-ink); border-color:var(--ok-line); }
.pill.withdraw{ background:var(--no-soft); color:var(--no-ink); border-color:var(--no-line); }

/* ==================== the gold rule across the very top ==================
   The house accent, on every screen. Founder, 07/09/2026, comparing the two:
   *"the colours look a shade different between SAU and Validators. The blue
   is duller and the beige/gold is also a little less bright - I LOVE SAU'S
   feeling and need Validators to look the same."*

   The tokens were identical; this was not. The Claims Workspace runs gold into
   a bright amber and finishes in navy; the Validators Workspace ran a flat,
   muted gold from end to end. Same variables, two different ribbons, and no
   token change could have reached it.                                       */
body::before{
  content:""; position:fixed; top:0; left:0; right:0; height:3px; z-index:70;
  background:linear-gradient(90deg, var(--gold) 0%, #E0A24A 38%, var(--navy-3) 100%);
}

/* ==================== the platform lockup in the rail ====================
   Founder, 07/09/2026, on the Validators Workspace: *"similar to SAU at the
   bottom left - insert Prosumer Connect's Logo please. Also where is the Sing
   in / Sign out? Suggest we include the Powered by... then the validators name
   and surname only, and then below that Sign out."*

   Lifted out of portal.html rather than copied into the second page, which is
   how the two rails came to differ in the first place.                      */
.powered{ padding:15px 14px 17px; border-top:1px solid rgba(255,255,255,.10);
  background:rgba(27,142,156,.10); }
.powered .pw-eyebrow{ margin-bottom:7px; }
.pw-eyebrow{ display:block; font-size:9.5px; font-weight:700; color:#93A9C2; }
.pw-mark{ display:flex; align-items:center; gap:7px; margin-top:4px;
  font-size:13px; font-weight:600; color:#fff; letter-spacing:-.005em; }
.pw-dot{ width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--gold); box-shadow:0 0 0 3px rgba(0,138,150,.22); }
.settings-nav{ border-top:1px solid rgba(255,255,255,.14); padding:8px 0; }
/* The name and the way out, under the lockup. Name and surname only — a middle
   name in a 244px rail wraps and pushes Sign out off the fold. */
.side .who .signout{ display:block; margin-top:4px; font-size:11.5px;
  font-weight:600; color:#9fd2db; text-decoration:none; }
.side .who .signout:hover{ text-decoration:underline; }

/* ==================== the rail, and the page beside it ===================
   Founder, 07/09/2026: *"go review CC and adjust the look and feel because
   this was also different from SAU. So whilst you at it - align with V & C."*

   THREE SURFACES, ONE SHELL. The Control Centre was a 1200px white slab on the
   warm ground with a horizontal nav across the top — precisely what the
   Validators Workspace was until 04/09/2026, when he said *"your size is
   definitely not the same as SAU"*. The asymmetry was never the pixel count;
   it was a slab against a fixed navy rail with full-bleed content beside it.

   These rules lived in validators.html, which is why fixing V could not fix
   CC. They live here now and the third surface simply gets them.            */
body.railed{ display:flex; min-height:100vh; }
.side{ width:244px; position:fixed; top:0; bottom:0; z-index:10; padding:58px 0 0;
  display:flex; flex-direction:column; color:#fff;
  background:radial-gradient(420px 300px at 20% 6%, rgba(0,138,150,.20), transparent 70%),
    linear-gradient(168deg, var(--navy) 0%, var(--navy-2) 62%, #0A1524 100%);
  box-shadow:1px 0 0 rgba(255,255,255,.05), 6px 0 28px -12px rgba(13,27,44,.45); }
.side .nav-main{ flex:1 1 auto; overflow-y:auto; min-height:0; padding-top:4px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
.side .foot{ flex:0 0 auto; padding:12px 16px 18px;
  border-top:1px solid rgba(255,255,255,.09); }
.side .brand{ padding:0 16px 16px; margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.10); }
.side .brand > b{ display:block; font-size:14px; font-weight:600; color:#fff;
  letter-spacing:-.005em; }
.side .brand > div{ font-size:11.5px; color:#93AECB; margin-top:3px; line-height:1.45; }
.side .who{ font-size:12px; color:#93AECB; line-height:1.35; }
.side .who > b{ display:block; font-size:14px; font-weight:600; color:#fff;
  letter-spacing:-.005em; margin-bottom:5px; }

.main{ margin-left:244px; padding:62px 34px 44px; flex:1; min-width:0; }
.main > section{ max-width:1400px; margin-left:auto; margin-right:auto; }

/* The rail's own navigation. `.on` is the active class on both pages that use
   it; renaming it to portal's `.active` would break the view switcher for a
   cosmetic tidy. */
.side .nav{ padding:0 10px; display:block; background:none; border:0; }
.side .nav a{ display:block; position:relative; padding:9px 13px; margin:2px 0; border:0;
  border-radius:var(--r-sm); color:#BFD1E4; font-size:13.5px; font-weight:500;
  cursor:pointer; user-select:none; transition:background .14s ease, color .14s ease; }
.side .nav a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.side .nav a.on{ background:rgba(255,255,255,.11); color:#fff; font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
.side .nav a.on::before{ content:""; position:absolute; left:-10px; top:50%;
  transform:translateY(-50%); width:3px; height:18px; border-radius:0 3px 3px 0;
  background:var(--gold); }

@media (max-width:1280px){ .side{width:228px;} .main{margin-left:228px;padding:62px 26px 44px;} }
@media (max-width:1080px){ .side{width:210px;} .main{margin-left:210px;padding:62px 20px 40px;} }

/* ==================== the action mark ===================================
   Founder, 07/09/2026: *"You know SAU is my preferred option right?"* — SAU
   fills the Action column with a solid round badge and the Validators
   Workspace set the same letter in bold red text, so the same signal read as
   two different things on two screens. SAU's is the one that carries.        */
.act{ display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:24px; padding:0 8px; border-radius:12px;
  font-weight:700; font-size:12px; color:#fff; line-height:1; cursor:help; }
.act-open{ background:#B4472F; box-shadow:0 0 0 3px rgba(180,71,47,.16); }
.act-n{ color:var(--muted); font-weight:600; }

/* ==================== the note's own tools ==============================
   Reply, seen and delete, drawn by `House.noteRow` for both surfaces since
   07/09/2026 — so the styles cannot live on one page. Founder: *"why does V
   not have all the functionalities SAU has: Reply, Eyes, Delete bin."*      */
.act-seen{ color:var(--muted); font-size:11.5px; margin-top:6px; }
.danger-link{ color:#B4472F; }
.tool-off{ opacity:.3; cursor:not-allowed; }
.msg .meta .link{ font-size:11.5px; margin-left:8px; font-weight:600; }
/* An action nobody has answered yet is the one thing in the feed that is still
   owed. It carries the gold edge the rest of the house uses for "look here". */
.msg.action{ border-left:3px solid var(--gold); }

/* ==================== one table, one size ================================
   Founder, 07/09/2026: *"can you check the font, size across the Validator
   website again? It looks like we are applying different fonts and sizes
   across the various tables/tabs."*

   He was reading two type systems on one page. `.claims` was set here at
   10.5pt with 11px padding, and every other table on the Validators Workspace
   fell through to its own `table{font-size:11.5px}` with 6px padding — so
   Pending and Finalised were one size and Documents, MIS and the rest another,
   decided by which class a table happened to carry.

   Named once, for every table on the house.                                  */
th, td{ font-size:10.5pt; padding:11px 10px; vertical-align:middle; }
/* A dense grid still gets to breathe less horizontally — the MIS is eleven
   measures across eight months — but it is the SAME TYPE. Density is padding;
   changing the size as well is what made it read as a different product. */
table.mis th, table.mis td{ padding:9px 10px; }

/* ==================== every pane is a card ===============================
   Founder, 07/09/2026, on Notes and on the Invoice: *"my notes does not have
   the white background with rounded frame"* and *"No white framework and
   background?"*

   Both were right, and neither was a regression — the Notes pane has never had
   one. I framed the Documents table when he asked and did not generalise it,
   so every tab he opened afterwards was a coin toss. Wrapping each pane by
   hand is the same mistake with more steps: the next pane added would be bare
   again and nobody would notice until he did.

   So a pane that does not manage its own cards gets one.                     */
.pane:not(:has(> .card)):not(:empty){
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:22px 24px; margin-bottom:18px;
}


/* ==================== the 24-task progress board ==========================
   Founder, 13/09/2026. His list, his three states, and the rule underneath it:
   a task is Done when MITTI shows the work, not when a validator says so. The
   screen has to make that feel like help rather than policing, which is why
   every row carries its proof — where on the inspection it was evidenced, or
   the exact entry that is missing.

   It lives here rather than on the page because the Control Centre shows the
   same board, and the 27-of-47-tokens episode is what happens when a shared
   thing is written on one surface and copied to the other.                  */

/* The scope banner — shown until basic underwriting is done. It is a prompt,
   not a warning, until the founder's 24 hours have passed. */
.pb-scope{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  justify-content:space-between; padding:13px 16px; margin-bottom:14px;
  border:1px solid var(--gold-line); background:var(--gold-soft);
  border-left:3px solid var(--gold); border-radius:var(--r); }
.pb-scope.late{ border-color:var(--no-line); border-left-color:var(--no);
  background:var(--no-soft); }
.pb-scope b{ display:block; font-size:13.5px; color:var(--txt); }
.pb-scope span{ font-size:12.5px; color:var(--muted); }
.pb-clock{ font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:12px; color:var(--muted); white-space:nowrap; }

/* The meter. Two segments on one track: what is done, and what is still in
   scope. Not-applicable is the remaining ground, so the bar reads as "how much
   of the work this claim actually needs is finished". */
.pb-head{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline;
  justify-content:space-between; margin-bottom:7px; }
.pb-count{ font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:600; letter-spacing:-.01em; }
.pb-meter{ height:8px; border-radius:99px; background:var(--line-soft);
  overflow:hidden; display:flex; margin-bottom:18px; }
.pb-meter i{ display:block; height:100%; transition:width .25s ease; }
.pb-meter i.done{ background:var(--teal-dk, #00707B); }
.pb-meter i.open{ background:var(--gold-line); }

/* A section of the list. The label is the part of Mitti the tasks belong to,
   so a validator reading the board is reading his own inspection's shape. */
.pb-sec{ font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:18px 0 7px; }
.pb-sec:first-child{ margin-top:0; }

.pb-rows{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.pb-row{ display:grid; grid-template-columns:1fr auto; gap:12px 16px;
  align-items:center; padding:11px 14px; background:var(--card);
  border-bottom:1px solid var(--line-soft); }
.pb-row:last-child{ border-bottom:none; }
.pb-row:nth-child(even){ background:var(--surface-2, #FDFAF6); }
.pb-row.is-done{ background:var(--ok-soft); }
.pb-row.is-na{ opacity:.62; }
.pb-task{ font-size:13.5px; font-weight:600; display:flex; align-items:center;
  gap:8px; flex-wrap:wrap; }

/* Where Mitti proved it, or the entry that is missing. Mono, because it is a
   path into somebody else's system and reads as a locator, not as prose. */
.pb-proof{ font-family:var(--num); font-size:11px; color:var(--muted);
  margin-top:3px; word-break:break-word; }
.pb-proof.missing{ color:var(--amber); }

/* The Mitti badge. A task the hook ticked, so the validator can see at a glance
   which of his work the system already knows about — which is the whole
   incentive the founder is buying. */
.pb-by{ display:inline-flex; align-items:center; gap:4px; padding:1px 7px;
  border-radius:99px; font-size:10.5px; font-weight:700; letter-spacing:.03em;
  background:var(--teal-soft); color:var(--teal-ink); border:1px solid var(--teal-line); }
.pb-on{ font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:11.5px; color:var(--muted); white-space:nowrap; }

/* The three states. One control, three positions, so the choice reads as a
   choice rather than as three buttons that might all be pressed. */
.pb-seg{ display:inline-flex; border:1px solid var(--line);
  border-radius:var(--r-xs); overflow:hidden; flex:none; }
.pb-seg button{ font-family:inherit; padding:5px 11px; font-size:11.5px;
  font-weight:600; color:var(--muted); background:var(--card); border:none;
  border-right:1px solid var(--line); cursor:pointer; transition:background .12s; }
.pb-seg button:last-child{ border-right:none; }
.pb-seg button:hover:not([aria-pressed="true"]){ background:var(--warm); }
.pb-seg button[aria-pressed="true"]{ background:var(--teal-dk, #00707B); color:#fff; }
.pb-seg button[aria-pressed="true"].open{ background:var(--amber); color:#fff; }
.pb-seg button[aria-pressed="true"].na{ background:#8C8478; color:#fff; }
.pb-seg button:focus-visible{ outline:2px solid var(--teal); outline-offset:-2px; }
.pb-seg button[disabled]{ opacity:.45; cursor:not-allowed; }

/* The refusal. It names the entry to create, because "go and update Mitti"
   without saying where is how a rule becomes something people work around. */
.pb-refused{ grid-column:1 / -1; margin-top:2px; padding:9px 11px;
  border-radius:var(--r-sm); background:var(--no-soft);
  border:1px solid var(--no-line); color:var(--no-ink); font-size:12.5px; }

/* How far through a block a validator is. A task he is halfway through must not look like one
   he has not opened — founder, 14/09/2026, after an interview read Done on seven auto-filled
   fields out of twenty-five. */
.pb-part{ display:inline-block; width:54px; height:4px; border-radius:99px;
  background:var(--line); overflow:hidden; vertical-align:middle; }
.pb-part i{ display:block; height:100%; background:var(--amber); }

/* ==================== the movement log =====================================
   Founder, 14/09/2026: *"it shows us step for step with date and time step when
   what action was completed."* A validator reading this on Monday morning is
   checking what he is about to be held to, so it reads as a sequence — time on
   the left, what moved on the right — rather than as a table to be scanned.  */
.ml{ border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  padding:13px 16px; margin-bottom:16px; }
.ml h4{ margin:0 0 2px; font-size:13.5px; }
.ml .when{ font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.ml ol{ margin:0; padding:0; list-style:none; border-left:2px solid var(--line-soft);
  padding-left:14px; }
.ml li{ position:relative; padding:5px 0; font-size:13px; }
.ml li::before{ content:""; position:absolute; left:-19px; top:12px; width:7px; height:7px;
  border-radius:50%; background:var(--line); }
.ml li.did::before{ background:var(--teal-dk, #00707B); }
.ml li.undid::before{ background:var(--amber); }
.ml li.na::before{ background:#8C8478; }
.ml time{ font-family:var(--num); font-variant-numeric:tabular-nums; font-size:11.5px;
  color:var(--muted); margin-right:9px; }
.ml .who{ font-size:11.5px; color:var(--muted); }
.ml .none{ font-size:13px; color:var(--muted); }

/* ==================== the open-source footprint panel ======================
   `knowledge/openclaw/osint_footprint_uses.md` §4, and the ordering is the
   spec's rather than the obvious one: what we SEARCHED comes before what we
   found, and what we could not READ comes before what we concluded. That is
   backwards from how a validator would write it and it is the point — the
   assurance line is what the founder asked for, and a silence must never read
   as a clearance.

   It lives here rather than on validators.html for the reason the 27-of-47
   tokens episode settled: the attestation in section 5 is the sentence that
   reaches a client's point of contact, so the Control Centre will want the
   same block the day Charlene reviews a round, and a second copy of it is
   exactly what went stale between portal.html and validators.html.

   No new tokens. Every colour here is one already named at the top of this
   file, because the three states this panel has to keep apart — found,
   could not read, and asks — are the same three the rest of the house already
   paints: teal for a completed check, amber for a gap, gold for a question. */

.fp-sec{ font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:22px 0 8px;
  display:flex; align-items:baseline; gap:10px; }
.fp-sec:first-child{ margin-top:0; }
.fp-sec i{ font-style:normal; font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:11px; font-weight:600; color:var(--muted); }

/* The banner that says which of the two things you are reading. While
   OSINT_ENABLED is off this panel is the PLAN, and the founder should be able
   to see that without asking anybody. */
.fp-state{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
  padding:12px 15px; margin-bottom:16px; border-radius:var(--r);
  border:1px solid var(--gold-line); border-left:3px solid var(--gold);
  background:var(--gold-soft); }
.fp-state.live{ border-color:var(--teal-line); border-left-color:var(--teal-dk, #00707B);
  background:var(--teal-soft); }
.fp-state b{ display:block; font-size:13.5px; color:var(--txt); }
.fp-state span{ font-size:12.5px; color:var(--muted); }
.fp-state .fp-cost{ font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:12px; color:var(--muted); white-space:nowrap; }

.fp-rows{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.fp-row{ padding:11px 14px; background:var(--card);
  border-bottom:1px solid var(--line-soft); }
.fp-row:last-child{ border-bottom:none; }
.fp-row:nth-child(even){ background:var(--surface-2, #FDFAF6); }
.fp-t{ font-size:13.5px; font-weight:600; display:flex; align-items:baseline;
  gap:10px; flex-wrap:wrap; }
/* The count of what would be, or was, sent. Mono because it is a figure in a
   column and the house rule names the face for exactly that. */
.fp-n{ font-family:var(--num); font-variant-numeric:tabular-nums; font-size:11.5px;
  color:var(--muted); white-space:nowrap; }
.fp-ids{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.fp-id{ display:inline-block; padding:1px 8px; border-radius:99px; font-size:11px;
  font-weight:600; background:var(--teal-soft); color:var(--teal-ink);
  border:1px solid var(--teal-line); }
.fp-id.plain{ background:#fff; color:var(--muted); border-color:var(--line); }

/* THE WARNING THAT TRAVELS WITH A SUBJECT WE HOLD NO ID FOR. On three quarters
   of two-subject claims the policyholder has no ID number in the record at
   all, so nothing found for them is register-corroborated. It is stated, never
   left to be inferred from an absence. */
.fp-warn{ margin-top:6px; padding:7px 10px; border-radius:var(--r-sm);
  background:var(--no-soft); border:1px solid var(--no-line); color:var(--no-ink);
  font-size:12.5px; }

/* The queries themselves, which are the deliverable while the switch is off.
   Mono, because a query is a literal and reads as one. */
.fp-plan{ margin-top:8px; }
.fp-plan > summary{ cursor:pointer; font-size:12px; color:var(--teal-ink);
  font-weight:600; }
.fp-plan > summary:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.fp-q{ margin-top:7px; padding-left:12px; border-left:2px solid var(--line-soft); }
.fp-q > div{ padding:4px 0; }
.fp-q code{ font-family:var(--num); font-size:11.5px; color:var(--txt);
  word-break:break-word; }
.fp-q em{ display:block; font-style:normal; font-size:11.5px; color:var(--muted);
  margin-top:2px; }

/* Section 2, by direction. The dot is the only colour on the row: a finding
   that contradicts is not a red row, because nothing in this specialty decides
   anything on its own. */
.fp-b{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:.02em; color:var(--txt); margin:14px 0 6px; }
.fp-b:first-child{ margin-top:0; }
.fp-b s{ width:9px; height:9px; border-radius:50%; flex:none; text-decoration:none; }
.fp-b s.corroborates{ background:var(--teal-dk, #00707B); }
.fp-b s.questions{ background:var(--amber); }
.fp-b s.neutral{ background:#8C8478; }
.fp-b s.clear{ background:var(--ok); }
.fp-b i{ font-style:normal; font-weight:600; color:var(--muted);
  font-family:var(--num); font-variant-numeric:tabular-nums; font-size:11.5px; }

.fp-ev{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
  margin-top:5px; font-size:11.5px; color:var(--muted); }
.fp-ev a{ font-weight:600; }
.fp-ev time{ font-family:var(--num); font-variant-numeric:tabular-nums; }
/* Said out loud on the row rather than implied: this is a question to put to
   somebody, and it settles nothing by itself. */
.fp-note{ margin-top:5px; font-size:12.5px; color:var(--gold-ink); }

/* Section 3. Amber, which is this house's colour for a gap — never red, because
   a source we could not read is not an adverse finding about anybody. */
.fp-gap{ border-left:3px solid var(--amber); }
.fp-gap .fp-t{ font-weight:600; font-size:13px; }
.fp-gap p{ margin:4px 0 0; font-size:12.5px; color:var(--txt); }

/* Section 4. Gold, the house accent, because these are the starting points the
   founder actually asked for. */
.fp-ask{ border-left:3px solid var(--gold); }
.fp-ask b{ display:block; font-size:13px; font-weight:600; }
.fp-ask span{ display:block; font-size:12px; color:var(--muted); margin-top:4px; }

/* Section 5 — the only part of this screen that ever crosses to a client. It is
   set apart on purpose: everything above it is the assessment layer and reaches
   the client in the report, never in the feed (CLAUDE.md, 28/07/2026). */
.fp-att{ border:1px solid var(--teal-line); border-radius:var(--r);
  background:var(--teal-soft); padding:14px 16px; }
.fp-att p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--txt); }
.fp-att .sub{ display:block; margin-top:8px; font-size:11.5px; color:var(--teal-ink); }
.fp-att.held{ background:var(--warm); border-color:var(--line); }
.fp-att.held .sub{ color:var(--muted); }

.fp-none{ font-size:12.5px; color:var(--muted); padding:11px 14px; }

/* ==================== a feedback session, rolled up =======================
   Founder, 14/09/2026: *"we need to create a tab Section for each Feedback
   date which can roll up and roll down for more information."* His five lines
   inside: the date, what was completed leading to it, what was outstanding,
   the wording submitted, and the date committed to.

   <details>/<summary> rather than a scripted toggle — it opens with the
   keyboard, it prints open, and it needs no JavaScript to be usable.        */
.fs{ border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  margin-bottom:9px; overflow:hidden; }
.fs > summary{ list-style:none; cursor:pointer; padding:11px 15px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  justify-content:space-between; }
.fs > summary::-webkit-details-marker{ display:none; }
.fs > summary:hover{ background:var(--warm); }
.fs > summary:focus-visible{ outline:2px solid var(--teal); outline-offset:-2px; }
.fs .date{ font-family:var(--num); font-variant-numeric:tabular-nums;
  font-weight:600; font-size:14px; }
.fs .date::before{ content:"\25B8"; display:inline-block; margin-right:9px;
  color:var(--muted); transition:transform .15s; }
.fs[open] .date::before{ transform:rotate(90deg); }
.fs .gist{ font-size:12.5px; color:var(--muted); flex:1 1 auto; }
.fs .body{ padding:2px 15px 15px 15px; border-top:1px solid var(--line-soft); }
.fs dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 18px; }
.fs dt{ font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint, var(--muted)); font-weight:700; padding-top:2px; white-space:nowrap; }
.fs dd{ margin:0; font-size:13.5px; line-height:1.5; }
.fs dd.words{ background:var(--surface-2, #FDFAF6); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); padding:9px 12px; }
.fs ul{ margin:0; padding-left:17px; }
.fs li{ margin:2px 0; }
.fs .nil{ color:var(--muted); }
@media (max-width:640px){ .fs dl{ grid-template-columns:1fr; gap:3px 0; } }

/* ==================== Progress ends, Feedback history begins ==============
   Founder, 14/09/2026: *"I am firstly going to need you to make a much more
   prominent differentiation that we now moving from Progress items to Feedback
   History."* A heading alone was not enough — the two ran together and read as
   one long list. This is a rule across the full width with the label sitting in
   it, which is the strongest break available without starting a new card.     */
.fbreak{ display:flex; align-items:center; gap:14px; margin:34px 0 16px;
  color:var(--navy); }
.fbreak::before, .fbreak::after{ content:""; height:1px; background:var(--line); flex:1 1 auto; }
.fbreak::before{ flex:0 0 4px; height:19px; width:4px; border-radius:2px;
  background:var(--gold); }
.fbreak span{ font-size:15px; font-weight:600; letter-spacing:-.01em; flex:0 0 auto; }

/* The deadline line under it. */
.fbnext{ font-size:13px; color:var(--muted); margin-bottom:14px; }
.fbnext b{ color:var(--txt); font-family:var(--num); font-variant-numeric:tabular-nums; }

/* On time, or not — the founder's own red-or-green, and what the MIS counts. */
.yn{ font-size:11.5px; font-weight:700; white-space:nowrap; color:var(--muted); }
.yn.yes{ color:var(--ok-ink); }
.yn.no{ color:var(--no-ink); }
.fs .miss{ display:inline-block; margin-left:8px; padding:1px 8px; border-radius:99px;
  font-size:11px; font-weight:700; background:var(--no-soft); color:var(--no-ink);
  border:1px solid var(--no-line); }

/* ==================== system triggers ====================================
   Rebuilt off the teal table band. Founder, 14/09/2026: *"I also want you to
   align the colours."* The band made a reference table read like a data table
   and sat against everything above it; this is the same quiet card language the
   board uses, so the eye passes over it until it is wanted.                  */
.trig{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2, #FDFAF6);
  margin-top:26px; overflow:hidden; }
.trig-head{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); padding:12px 16px 9px; }
.trig-row{ display:grid; grid-template-columns:132px 1fr auto; gap:10px 16px;
  align-items:baseline; padding:9px 16px; border-top:1px solid var(--line-soft);
  background:var(--card); }
.trig-row .t{ font-family:var(--num); font-variant-numeric:tabular-nums; font-size:12px;
  font-weight:600; color:var(--teal-ink, #0A5460); }
.trig-row .d{ font-size:13px; line-height:1.45; }
.trig-row .d i{ color:var(--muted); }
.tpill{ font-size:10.5px; font-weight:700; letter-spacing:.03em; white-space:nowrap;
  padding:2px 9px; border-radius:99px; background:var(--warm); color:var(--muted);
  border:1px solid var(--line); }
/* NOT BUILT YET SAYS SO. A schedule table that reads as fact while half of it is
   unwritten is the screen telling a validator he was warned when he was not. */
.tpill.off{ background:var(--gold-soft); color:var(--gold-ink); border-color:var(--gold-line); }
.trig-note{ font-size:12px; color:var(--muted); padding:11px 16px;
  border-top:1px solid var(--line-soft); }
@media (max-width:720px){ .trig-row{ grid-template-columns:1fr; } }

/* ---- the OSINT tree -------------------------------------------------------------------
   Founder, 15/09/2026: *"a plain, easy to understand and summarise version… almost a hyrarchy
   (tree, flowchart)… what we used, what came back and what we found."* Three lines per subject
   and every traced page a link. Tokens only — nothing here redefines a shared one. */
.fp-head{ display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline;
  padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.fp-head b{ font-size:15px; letter-spacing:.06em; color:var(--txt); }
.fp-head span{ font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:12.5px; color:var(--muted); }

.fp-att{ border:1px solid var(--gold-line); background:var(--gold-soft);
  border-radius:var(--r-m, 8px); padding:12px 14px; margin-bottom:16px; }
.fp-att.quiet{ border-color:var(--line); background:var(--surface-2); }
.fp-att-h{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:8px; }
.fp-att.quiet .fp-att-h{ color:var(--muted); }
.fp-att-r{ display:flex; gap:10px; padding:7px 0; border-top:1px solid var(--line-soft); }
.fp-att-r:first-of-type{ border-top:0; }
.fp-att-n{ font-family:var(--num); font-size:12px; color:var(--muted); min-width:14px; }
.fp-att-w{ font-size:13.5px; color:var(--txt); }
.fp-att-y{ font-size:12.5px; color:var(--muted); margin-top:2px; }

.fp-tree{ display:flex; flex-direction:column; gap:12px; }
.fp-br{ border-left:2px solid var(--teal-line, var(--line)); padding:2px 0 2px 14px; }
.fp-br-h{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px; }
.fp-br-d{ display:grid; grid-template-columns:56px 1fr; gap:3px 10px; margin:0; }
.fp-br-d dt{ font-size:12px; color:var(--muted); }
.fp-br-d dd{ margin:0; font-size:13.5px; color:var(--txt); }
.fp-br-d dd .fp-n{ font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:12px; color:var(--muted); margin-left:8px; }
.fp-br-f{ font-weight:600; }
.fp-warn{ font-size:12.5px; color:var(--amber, var(--muted)); margin-top:5px; }
.fp-more{ font-size:12px; color:var(--muted); margin-top:5px; font-style:italic; }

.fp-link{ display:block; font-size:13px; color:var(--blue); text-decoration:none;
  padding:4px 0 4px 0; word-break:break-word; }
.fp-link:hover{ text-decoration:underline; }
.fp-link .fp-src{ font-size:11.5px; color:var(--muted); margin-left:8px; }

.fp-detail{ margin:18px 0 0; border-top:1px solid var(--line); padding-top:10px; }
.fp-detail > summary{ font-size:12.5px; color:var(--muted); cursor:pointer;
  list-style:revert; padding:2px 0; }
.fp-detail > summary:hover{ color:var(--txt); }

@media (max-width:520px){
  .fp-br-d{ grid-template-columns:1fr; gap:1px; }
  .fp-br-d dt{ margin-top:5px; }
}

.fp-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.fp-msg{ font-size:12.5px; color:var(--muted); }