/* demo-lite: standalone Altio brand skin. Tokens derive from
   context/altio-brand.md (via the original demo-lite's brand.css,
   retired 2026-07-16); regulatory surfaces
   (AI marker, citations, approval) keep high contrast. */

:root {
  --navy: #1f3a5f;
  --navy-deep: #15293f;
  --navy-ink: #0e1c2d;
  --blue: #3b6fa5;
  --blue-strong: #335f8f;
  --blue-bright: #5b8fc4;
  --blue-100: #d7e4f1;
  --blue-50: #eaf1f8;
  --paper: #ffffff;
  --paper-2: #f6f8fb;
  --mist: #eef2f7;
  --line: #e4e9f0;
  --line-2: #d3dbe6;
  --text: #243140;
  --muted: #5d6b7b;
  --faint: #8a96a4;
  --amber-bg: #fbeae0;
  --amber-line: #e0a37a;
  --amber-ink: #8a4b1f;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--sans); color: var(--text); background: var(--paper-2);
       font-size: 15px; line-height: 1.55; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em;
         color: var(--navy-ink); margin: 0 0 0.5rem; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.35rem; }
h3 { font-family: var(--sans); font-weight: 600; color: var(--navy-ink);
     font-size: 1rem; margin: 0 0 0.4rem; }
a { color: var(--blue-strong); }
a:hover { color: var(--navy); }
.dim { color: var(--muted); }
.faint { color: var(--faint); font-size: 0.85em; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---- shell ---- */
header { background: var(--paper); border-bottom: 1px solid var(--line);
         padding: 0.7rem 1.4rem; display: flex; align-items: center; gap: 1.1rem;
         position: relative; }
.brand { font-family: var(--serif); font-weight: 500; font-size: 1.25rem;
         color: var(--navy); }
.brand small { font-family: var(--sans); font-weight: 500; color: var(--faint);
               font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em;
               margin-left: 0.55rem; }
nav { display: flex; gap: 0.9rem; margin-left: auto; align-items: center; }
/* The menu button appears only on narrow screens (see the 768 media query),
   where the nav collapses into a dropdown. */
.hamburger { display: none; margin-left: auto; align-items: center; justify-content: center;
             width: 2.2rem; height: 2.2rem; border: 1px solid var(--line-2); border-radius: 8px;
             background: var(--paper); cursor: pointer; position: relative; }
/* three even bars: a fixed 18x14 flex column, space-between distributes the
   three 2px bars with equal gaps; flex:none everywhere so the flexbox can
   neither collapse the box nor resize the bars */
.hamburger .hb { flex: none; display: flex; flex-direction: column; justify-content: space-between;
                 width: 18px; height: 14px; }
.hamburger .hb span { flex: none; display: block; width: 18px; height: 2px; background: var(--navy); }
.hamburger .badge { position: absolute; top: -6px; right: -6px; }
.nav-item { color: var(--text); text-decoration: none; padding: 0.25rem 0.1rem;
            border-bottom: 2px solid transparent; cursor: pointer;
            background: none; border-top: 0; border-left: 0; border-right: 0;
            font: inherit; font-weight: 500; }
.nav-item:hover { color: var(--navy); border-bottom-color: var(--blue-100); }
.nav-item.active { color: var(--navy); border-bottom-color: var(--navy); }
.rolebox { color: var(--muted); font-size: 0.85rem; }
.rolebox b { color: var(--navy-ink); }

main { max-width: 1060px; margin: 0 auto; padding: 1.6rem 1.4rem 4rem; }
footer { max-width: 1060px; margin: 0 auto; padding: 1rem 1.4rem 2.2rem;
         color: var(--faint); font-size: 0.8rem; border-top: 1px solid var(--line); }

/* ---- controls ---- */
button { font-family: var(--sans); font-weight: 600; font-size: 0.92rem;
         color: var(--navy); background: var(--paper); border: 1px solid var(--line-2);
         border-radius: 4px; padding: 0.45rem 0.95rem; cursor: pointer; }
button:hover { background: var(--paper-2); border-color: var(--navy); }
button.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
button.primary:hover { background: var(--navy-ink);
  box-shadow: 0 8px 24px rgba(15,28,45,0.08), 0 2px 6px rgba(15,28,45,0.05); }
button.quiet { border-color: transparent; background: none; color: var(--blue-strong); }
button.quiet:hover { color: var(--navy); background: var(--blue-50); }
button:disabled { opacity: 0.45; cursor: default; }
textarea, input[type="text"], input[type="password"] {
  font: inherit; color: var(--text); width: 100%; padding: 0.5rem 0.65rem;
  border: 1px solid var(--line-2); border-radius: 4px; background: var(--paper); }
textarea { min-height: 4.2rem; resize: vertical; }

/* ---- chips ---- */
.chip { display: inline-block; background: var(--blue-50); border: 1px solid var(--blue-100);
        color: var(--blue-strong); border-radius: 99rem; font-weight: 500;
        font-size: 0.78rem; padding: 2px 10px; vertical-align: middle; white-space: nowrap; }
.chip.navy { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.chip.warn { background: var(--amber-bg); border-color: var(--amber-line);
             color: var(--amber-ink); font-weight: 600; }
.chip.ghost { background: transparent; border-style: dashed; color: var(--muted); }
.cite { display: inline-block; background: var(--blue-50); border: 1px solid var(--blue-100);
        color: var(--blue-strong); border-radius: 4px; font-weight: 600;
        font-size: 0.78rem; padding: 0 6px; cursor: pointer; margin: 0 1px; }
.cite:hover { background: var(--blue-100); color: var(--navy); }
.cite-un { background: transparent; border-color: var(--line-2); color: var(--faint); font-weight: 400; }
.cite-un:hover { background: var(--mist); color: var(--muted); }

/* ---- kicker headings (brand signature) ---- */
.kicker { font-family: var(--sans); font-size: 0.76rem; font-weight: 600;
          text-transform: uppercase; letter-spacing: 0.16em; color: var(--blue-strong);
          margin: 0 0 0.7rem; }
.kicker::before { content: ""; display: inline-block; width: 1.6rem; height: 1px;
                  background: var(--blue); vertical-align: middle; margin-right: 0.7rem; }

/* ---- stepper ---- */
.stepper { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 1.4rem;
           font-size: 0.78rem; font-weight: 600; color: var(--faint); }
.step { padding: 0.25rem 0.7rem; border: 1px solid var(--line); border-radius: 99rem;
        background: var(--paper); }
.step.done { color: var(--blue-strong); border-color: var(--blue-100); background: var(--blue-50); }
.step.now { color: #fff; background: var(--navy); border-color: var(--navy); }

/* ---- panels & cards ---- */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
         padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.srcrow { display: flex; align-items: baseline; gap: 0.6rem 0.5rem; padding: 0.5rem 0.2rem;
          border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.srcrow:last-child { border-bottom: 0; }
.srcrow .name { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
.srcrow .name b { color: var(--navy-ink); font-weight: 600; }
.hero { padding: 3.2rem 0 2.4rem; }
.hero h1 { font-size: 2.7rem; max-width: 34rem; }
.hero p { max-width: 38rem; color: var(--muted); }

/* ---- analysis beat ---- */
.stage { display: flex; gap: 0.65rem; align-items: baseline; padding: 0.34rem 0;
         color: var(--faint); }
.stage.done { color: var(--text); }
.stage.done .tick { color: var(--blue-strong); }
.stage .tick { width: 1.1rem; display: inline-block; }
.clock { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy);
         font-size: 1.6rem; font-family: var(--sans); }
.clockbox { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0;
            border-bottom: 1px solid var(--line); margin-bottom: 0.6rem; }

/* ---- follow-up questions ---- */
.question-pop { background: var(--blue-50); border: 1px solid var(--blue-100);
                border-left: 3px solid var(--navy); border-radius: 6px;
                padding: 0.85rem 1rem; margin: 0.7rem 0; }
.question-pop .q-label { font-weight: 600; color: var(--navy-ink); }
.optrow { display: flex; gap: 0.5rem; margin-top: 0.55rem; flex-wrap: wrap; }
.optrow button.picked { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---- deliverable tabs ---- */
.tabs { display: flex; gap: 0.35rem; margin-bottom: -1px; }
.tab-btn { border: 1px solid var(--line-2); border-radius: 4px 4px 0 0;
           background: var(--paper-2); }
.tab-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.tabpanel { background: var(--paper); border: 1px solid var(--line); border-radius: 0 10px 10px 10px;
            padding: 1.15rem 1.3rem; }

/* relationships */
.rel { border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 6px;
       padding: 0.6rem 0.85rem; margin: 0.55rem 0; background: var(--paper); }
.rel .ends { font-weight: 600; color: var(--navy-ink); font-size: 0.88rem; }
.rel .why { color: var(--muted); font-size: 0.88rem; }

/* draft */
.docsec { border-bottom: 1px solid var(--line); padding: 0.9rem 0; }
.docsec:last-child { border-bottom: 0; }
.docsec h3 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
/* pre-wrap: the body model keeps the author's paragraph breaks as \n */
.docsec .body { margin: 0.35rem 0 0; white-space: pre-wrap; }

/* ---- inline editing (contenteditable body + @ caret menu) ---- */
.body.editable { outline: none; border-radius: 6px; padding: 0.35rem 0.55rem;
                 transition: background 0.12s ease, box-shadow 0.12s ease; cursor: text; }
.body.editable:hover { background: var(--paper-2); }
.body.editable:focus { background: var(--paper);
                       box-shadow: inset 0 0 0 1px var(--blue-100), 0 0 0 3px var(--blue-50); }
.edithint { font-size: 0.82rem; color: var(--muted); background: var(--blue-50);
            border: 1px solid var(--blue-100); border-radius: 6px;
            padding: 0.4rem 0.7rem; margin: 0 0 0.7rem; }
.edithint b { color: var(--navy); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

#citemenu, #slashmenu { position: fixed; z-index: 60; min-width: min(15rem, calc(100vw - 1rem)); max-width: min(24rem, calc(100vw - 1rem));
            background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px;
            box-shadow: 0 8px 24px rgba(15,28,45,0.12), 0 2px 6px rgba(15,28,45,0.06);
            padding: 0.3rem; font-size: 0.88rem; max-height: 17rem; overflow-y: auto; }
.citemenu-head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
                 color: var(--faint); font-weight: 600; padding: 0.3rem 0.5rem 0.15rem; }
.citemenu-item { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
                 padding: 0.4rem 0.5rem; border-radius: 5px; cursor: pointer; }
.citemenu-item.on, .citemenu-item:hover { background: var(--blue-50); }
.citemenu-name { color: var(--navy-ink); }
.citemenu-tag { font-size: 0.68rem; color: #fff; background: var(--navy); border-radius: 4px;
                padding: 0.05rem 0.35rem; font-weight: 600; }
.citemenu-hint { color: var(--faint); font-size: 0.78rem; }
.citemenu-find { color: var(--navy); font-weight: 600;
                 border-top: 1px solid var(--line); margin-top: 0.2rem; }
.citemenu-none { padding: 0.4rem 0.5rem; color: var(--muted); }

/* ---- banners ---- */
/* The deliverable action row: the working actions sit left, the
   destructive one (withdraw) pushed to the far right, mirroring the
   left edge. */
.actionrow { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.actionrow .pushright { margin-left: auto; }

/* personal notes: deliberately outside the record - dashed border, and
   the panel reads as the user's own margin, not the document */
.notespanel { border-style: dashed; }
.notespanel textarea { margin-top: 0.5rem; }

/* provenance strip: the surveillance run that triggered a signal
   assessment - one static line of context above the tabs, not a tab */
.provstrip { padding: 0.55rem 0.7rem; margin-bottom: 0.7rem; background: var(--blue-50); }
.provsum { font-size: 0.88rem; }

/* the evidence view: claim molecules over the finding atoms (typed, with
   verbatim receipts) */
/* claim molecules: the bounded top-level unit - one card per assertion
   the draft makes, contested first, expandable to its findings */
.claims { margin-top: 0.6rem; }
.claim { border: 1px solid var(--line-2); border-left-width: 3px; border-radius: 8px;
         margin-bottom: 0.5rem; background: var(--paper); overflow: hidden; }
.claim.s-con { border-left-color: #c0894a; }
.claim.s-uns { border-left-color: #b4483f; }
.claim.s-tmp { border-left-color: #c0894a; }
.claim.s-def { border-left-color: #4a7a8c; }
.claim.s-sup { border-left-color: #2f7d54; }
.claim.s-not { border-left-color: var(--line-2); }
.claim-h { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.6rem 0.7rem; cursor: pointer;
           user-select: none; }
.claim-h:hover { background: var(--blue-50); }
.claim-main { flex: 1; font-weight: 600; font-size: 0.92rem; line-height: 1.35; }
.claim-meta { font-weight: 400; }
.cstate { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
          border-radius: 99rem; padding: 0.04rem 0.5rem; border: 1px solid; }
.cstate.s-con { color: #a56a2a; border-color: #d9b98c; background: #fbf3e8; }
.cstate.s-uns { color: #b4483f; border-color: #e2b3ae; background: #fbeeed; }
.cstate.s-tmp { color: #a56a2a; border-color: #d9b98c; background: #fbf3e8; }
.cstate.s-sup { color: #2f7d54; border-color: #a9cdb8; background: #eef6f1; }
.cstate.s-def { color: #3d6b7a; border-color: #b3ccd4; background: #eef4f6; }
.cstate.s-not { color: var(--muted); border-color: var(--line-2); background: var(--blue-50); }
.bal-str { color: #2f7d54; } .bal-tmp { color: #c0894a; }
.bal-ctx { color: var(--muted); } .bal-uns { color: #b4483f; } .bal-def { color: #3d6b7a; }
.claim-body { padding: 0 0.7rem 0.6rem; }

/* a finding card: typed badge, claim, receipts. The left border is the
   evidence-type colour (set inline from FINDING_TYPES), matching the
   badge - so a card reads as one colour per evidence type. Direction
   (strengthens / tempers / context) lives in the parent molecule's
   balance chip; the v-* class stays as a semantic hook. */
.finding { border: 1px solid var(--line-2); border-left-width: 3px; border-radius: 8px;
           padding: 0.55rem 0.65rem; margin-bottom: 0.5rem; background: var(--paper); }
/* The badge is inline and the title flows after it, wrapping to the full
   card width - exactly like the claim card's state badge + text, so a
   finding reads the same on a narrow screen instead of squeezing the title
   into a column beside the badge. */
.find-h { margin-bottom: 0.3rem; line-height: 1.5; }
.tbadge { display: inline-block; border: 1px solid; border-radius: 99rem; padding: 0.02rem 0.5rem;
          font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: baseline;
          margin-right: 0.35rem; }
.find-title { font-weight: 600; font-size: 0.9rem; }
.find-note { margin: 0.2rem 0 0.4rem; font-size: 0.82rem; }
.receipts { display: flex; flex-direction: column; gap: 0.3rem; }
.receipt { background: var(--blue-50); border-radius: 6px; padding: 0.3rem 0.45rem; }
.receipt .cite { font-weight: 600; }
.rquote { font-size: 0.8rem; color: var(--navy-ink); font-style: italic; margin-top: 0.1rem; }

.banner { border: 1px solid var(--blue-100); background: var(--blue-50); border-radius: 8px;
          padding: 0.8rem 1rem; margin-bottom: 1rem; }
.banner.locked { border-color: var(--navy); }
.banner .sigblock { font-family: var(--sans); font-size: 0.9rem; color: var(--navy-ink); }

/* ---- ledger ---- */
table { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
th { background: var(--paper-2); text-align: left; font-weight: 600; color: var(--navy-ink); }
th, td { border: 1px solid var(--line-2); padding: 0.4rem 0.55rem; vertical-align: top; }
td.hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.74rem;
          color: var(--faint); white-space: nowrap; }
/* The # column fits its content; the expand caret sits beside the
   sequence number, never wrapped above it. */
.ledger th:first-child, .ledger td:first-child { width: 1%; white-space: nowrap; }
tr.handoff td { background: var(--blue-50); }
tr.sig td { background: var(--mist); }
tr.expandable { cursor: pointer; }
tr.expandable:hover td { background: var(--blue-50); }
.caret { color: var(--blue-strong); font-size: 0.8em; }

/* Expanded "what changed" detail row. */
tr.ledger-detail td { background: var(--paper-2); border-top: 0; }
.changeset { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.3rem 0.2rem; }
.chg { font-size: 0.86rem; }
.chg-field { font-weight: 600; color: var(--navy-ink); }
.chg-before { color: var(--muted); text-decoration: line-through; margin: 0 0.15rem 0 0.5rem; }
.chg-arrow { color: var(--faint); margin: 0 0.2rem; }
.chg-after { color: var(--navy-ink); font-weight: 500; }
.diffblock { border-radius: 4px; padding: 0.4rem 0.6rem; margin-top: 0.3rem; position: relative;
             white-space: pre-wrap; }
.difflabel { display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
             letter-spacing: 0.08em; margin-right: 0.5rem; vertical-align: 1px; }
.diff-before { background: #fbeff0; border: 1px solid #e6b8bd; color: #6b2b32; }
.diff-before .difflabel { color: #a23b45; }
.diff-after { background: #eaf5ee; border: 1px solid #b4d9c1; color: #23503a; }
.diff-after .difflabel { color: #2f7d54; }
.diffblock .cite { cursor: default; }

/* ---- audit log: class tags, row tints ---- */
.clstag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.74rem;
          font-weight: 600; color: var(--blue-strong); background: var(--blue-50);
          border: 1px solid var(--blue-100); border-radius: 4px; padding: 0 5px; }
.subjtag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem;
           color: var(--faint); margin-left: 0.35rem; }
/* A 3px left tint per record class so the classes read apart at a glance. */
tr.rec-ingest td:first-child { box-shadow: inset 3px 0 0 var(--blue-bright); }
tr.rec-ai td:first-child { box-shadow: inset 3px 0 0 #7c6bb0; }
tr.rec-human td:first-child { box-shadow: inset 3px 0 0 var(--navy); }
tr.rec-esignature td:first-child { box-shadow: inset 3px 0 0 #2f7d54; }
tr.rec-lifecycle td:first-child { box-shadow: inset 3px 0 0 var(--faint); }
tr.denied td { background: #fbeff0; }
tr.denied .clstag { background: #fbeff0; border-color: #e6b8bd; color: #a23b45; }
tr.denied td:first-child { box-shadow: inset 3px 0 0 #c0505c; }

/* ---- modal ---- */
.overlay { position: fixed; inset: 0; background: rgba(14,28,45,0.42);
           display: flex; align-items: center; justify-content: center; z-index: 30; }
.dialog { background: var(--paper); border: 1px solid var(--line-2); border-left: 3px solid var(--navy);
          border-radius: 8px; max-width: 34rem; width: calc(100% - 2rem);
          padding: 1.2rem 1.35rem; box-shadow: 0 24px 60px rgba(15,28,45,0.2); }
.dialog .actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }

/* ---- source drawer ---- */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(30rem, 92vw);
          background: var(--paper); border-left: 2px solid var(--navy);
          box-shadow: 0 24px 60px rgba(15,28,45,0.14); padding: 1.2rem 1.3rem;
          overflow-y: auto; z-index: 20; }
.excerpt { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 6px;
           padding: 0.75rem 0.9rem; margin: 0.6rem 0; }
.excerpt h4 { margin: 0.7rem 0 0.25rem; }
.excerpt h4:first-child { margin-top: 0; }
.excerpt .doctable { min-width: 100%; }

/* ---- sign-in ---- */
.signin { min-height: 78vh; display: flex; align-items: center; justify-content: center; }
.signin-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
               padding: 2.2rem 2.4rem; width: min(26rem, 92vw); text-align: center;
               box-shadow: 0 24px 60px rgba(15,28,45,0.07); }
.idp-frame { border: 1px solid var(--line-2); border-radius: 8px; padding: 1rem 1.1rem;
             margin: 1.2rem 0 0.8rem; background: var(--paper-2); text-align: left; }
.account { display: flex; gap: 0.75rem; align-items: center; width: 100%; text-align: left;
           background: var(--paper); margin: 0.4rem 0; padding: 0.6rem 0.75rem; }
.account:hover { border-color: var(--navy); background: var(--paper); }
.avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--navy);
          color: #fff; display: inline-flex; align-items: center; justify-content: center;
          font-weight: 600; flex: none; }

/* ---- workspace ---- */
.homehead { display: flex; align-items: center; justify-content: space-between;
            gap: 1rem; margin: 0.4rem 0 1.1rem; }
.homehead h2 { margin-bottom: 0; }
.rowitem { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0.2rem;
           border-bottom: 1px solid var(--line); }
.rowitem:last-child { border-bottom: 0; }
.rowitem .rowmain { flex: 1; }
.rowitem[data-action] { cursor: pointer; margin: 0 -0.5rem; padding: 0.65rem 0.5rem;
                        border-radius: 6px; }
.rowitem[data-action]:hover { background: var(--blue-50); }
.empty { padding: 0.4rem 0.2rem; }

/* ---- product safety-profile: compact deliverable tiles ----
   A responsive grid of tiles so a product with many deliverables stays
   scannable: each tile carries a thin progress bar + the current stage
   and who holds it. */
h3 .cnt { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.6rem; }
.ptile { border: 1px solid var(--line-2); border-radius: 8px; padding: 0.55rem 0.65rem; }
.ptile.clickable { cursor: pointer; }
.ptile.clickable:hover { background: var(--blue-50); border-color: var(--blue-100); }
.ptile-h { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; }
.ptile-h b { font-size: 0.9rem; flex: 1; min-width: 0; }
.ptile-h .chip { flex: none; }
.pbar { display: block; height: 6px; background: var(--line-2); border-radius: 3px;
        overflow: hidden; margin: 0.55rem 0 0.35rem; }
.pbar-fill { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.ptile-stage { font-size: 0.78rem; color: var(--navy); font-weight: 600; }
.ptile-stage.wd { color: var(--muted); font-weight: 400; }
.ptile-m { margin-top: 0.4rem; font-size: 0.76rem; line-height: 1.4; }

/* ---- notifications ---- */
.bellwrap { position: relative; }
.badge { display: inline-block; background: var(--navy); color: #fff; border-radius: 99rem;
         font-size: 0.7rem; font-weight: 600; padding: 1px 7px; vertical-align: 1px; }
.belldrop { position: absolute; right: 0; top: 2.2rem; width: min(24rem, 88vw);
            background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px;
            box-shadow: 0 24px 60px rgba(15,28,45,0.14); z-index: 25; padding: 0.3rem 0; }
.noterow { padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--line); font-size: 0.88rem; }

/* ===================================================================
   Responsive: laptop 1024+ (the base above), tablet 768, phone 320.
   Any HTML table (only the audit log) scrolls horizontally inside its
   wrapper rather than forcing the page wider than the viewport.
   =================================================================== */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tablet portrait and below (<= 768px): tighten the shell, wrap the
   header, and let the two-column workspace collapse to one column. */
@media (max-width: 768px) {
  main { padding: 1.3rem 1.05rem 3rem; }
  footer { padding: 1rem 1.05rem 2rem; }
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.2rem; }
  header { padding: 0.6rem 1.05rem; gap: 0.5rem 0.9rem; flex-wrap: wrap; }
  nav { gap: 0.5rem 0.9rem; flex-wrap: wrap; }
  .grid2 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.1rem; }
  /* The audit-log filter dropdowns stack full-width so a right-side pop
     never runs off a cramped bar; each option wraps instead of overflowing. */
  .ledgerbar .msel { width: 100%; }
  .ledgerbar .msel > button { width: 100%; text-align: left; }
  .ledgerbar .msel-pop { left: 0; right: auto; width: auto; min-width: 0;
                         max-width: calc(100vw - 1.2rem); }
  .ledgerbar .msel-row { white-space: normal; }
  /* Hamburger nav: the header is just brand + menu button; tapping the
     button opens the nav as a dropdown panel under the header. */
  .hamburger { display: inline-flex; }
  nav { display: none; }
  nav.open { display: flex; flex-direction: column; align-items: stretch;
             position: absolute; top: calc(100% + 4px); right: 0.5rem; left: 0.5rem; z-index: 55;
             margin: 0; gap: 0.1rem; background: var(--paper); border: 1px solid var(--line-2);
             border-radius: 10px; box-shadow: 0 10px 28px rgba(15,28,45,0.14); padding: 0.4rem; }
  nav.open .nav-item { border-bottom: 0; border-radius: 6px; padding: 0.6rem 0.7rem; text-align: left; }
  nav.open .nav-item:hover, nav.open .nav-item.active { background: var(--blue-50); }
  nav.open .rolebox { padding: 0.5rem 0.7rem; border-top: 1px solid var(--line); margin-top: 0.15rem; }
  /* the notifications list flows inline within the open menu */
  .bellwrap { position: static; }
  .belldrop { position: static; width: auto; max-width: none; border: 0; box-shadow: none;
              padding: 0.1rem 0.2rem; }
  .belldrop .noterow { padding: 0.45rem 0.5rem; }
}

/* Phone (<= 480px, covers 320px): compact type and spacing, the nav
   wraps with the signed-in identity on its own line, tabs wrap, and the
   audit table scrolls horizontally within its wrapper if needed. */
@media (max-width: 480px) {
  body { font-size: 14px; }
  main { padding: 1rem 0.8rem 2.6rem; }
  footer { padding: 0.9rem 0.8rem 1.8rem; font-size: 0.76rem; }
  h1 { font-size: 1.7rem; }
  header { padding: 0.5rem 0.8rem; gap: 0.35rem 0.8rem; }
  .brand { font-size: 1.1rem; }
  .homehead { flex-wrap: wrap; gap: 0.5rem; }
  .homehead > span { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
  .panel { padding: 0.9rem 1rem; }
  .signin { min-height: 70vh; }
  .signin-card { padding: 1.6rem 1.3rem; }
  .kicker::before { width: 1rem; margin-right: 0.5rem; }
  /* tabs become a horizontal scroll strip so they stay one connected row */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex: none; white-space: nowrap; font-size: 0.84rem; padding: 0.4rem 0.7rem; }
  .tabpanel { padding: 1rem 0.95rem; border-radius: 0 8px 8px 8px; }
  table { font-size: 0.8rem; }
  th, td { padding: 0.35rem 0.45rem; }
  .clstag { white-space: normal; overflow-wrap: anywhere; }
  .diffblock { overflow-wrap: anywhere; }
  .drawer { width: 100vw; border-left: 0; }
  /* source-card controls drop below the name instead of squeezing it */
  .srccard-r { flex-basis: 100%; justify-content: flex-start; margin-top: 0.35rem; }
  /* deliverable actions stack full-width, no odd right-push */
  .actionrow { flex-direction: column; align-items: stretch; }
  .actionrow .pushright { margin-left: 0; }
}
.noterow:last-child { border-bottom: 0; }

/* ===================================================================
   Customer-discovery additions: source search, source cards, rich
   content (tables + charts), regeneration preview, appendix, inline
   comments, and the styled final cover.
   =================================================================== */

/* ---- source search (feature 1) ---- */
.searchpanel { border-left: 3px solid var(--blue); }
.storepick { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0 0.7rem; }
.storechip { font-size: 0.82rem; font-weight: 600; color: var(--muted); background: var(--paper);
             border: 1px solid var(--line-2); border-radius: 99rem; padding: 0.3rem 0.8rem; cursor: pointer; }
.storechip:hover { border-color: var(--navy); color: var(--navy); }
.storechip.picked { background: var(--navy); color: #fff; border-color: var(--navy); }
.storechip .cnt { font-weight: 500; opacity: 0.75; margin-left: 0.3rem; font-variant-numeric: tabular-nums; }
.searchbar { display: flex; gap: 0.5rem; align-items: center; }
.searchbar > input { flex: 1; min-width: 0; } /* the query box only - NOT the checkboxes nested in the filter dropdowns */
.ledgerbar { margin: 0 0 0.9rem; flex-wrap: wrap; }
/* multi-select filter dropdowns: a summary button, a checkbox list below,
   opening left-aligned under its button; the checkbox sits snug against
   its left-aligned label */
.msel { position: relative; display: inline-block; }
/* Opens leftward from the button's right edge so a right-side filter never
   pushes off the viewport, and is capped to the viewport width. */
.msel-pop { position: absolute; top: calc(100% + 4px); right: 0; left: auto; z-index: 40;
            background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px;
            box-shadow: 0 8px 24px rgba(15,28,45,0.08), 0 2px 6px rgba(15,28,45,0.05);
            padding: 0.3rem; min-width: 12rem; width: max-content;
            max-width: min(26rem, calc(100vw - 1.2rem)); max-height: 18rem; overflow: auto; }
.msel-row { display: flex; gap: 0.4rem; align-items: center; padding: 0.32rem 0.5rem;
            cursor: pointer; border-radius: 6px; font-size: 0.85rem; text-align: left;
            white-space: nowrap; /* the list fits its longest line, one line per option */ }
.msel-row:hover { background: var(--blue-50); }
.msel-row input { cursor: pointer; flex: none; width: auto; margin: 0.2rem 0 0; }
.ledger th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ledger th.sortable:hover { color: var(--navy); }

/* ---- deliverable rendition (preview before approval, print/PDF after) ---- */
.rendition-bar { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between;
                 max-width: 52rem; margin: 0 auto; padding: 0.8rem 1rem; flex-wrap: wrap; }
.rendition-ctl { display: flex; gap: 0.5rem; flex: none; }
#rendition { max-width: 52rem; margin: 0 auto 3rem; padding: 0 1rem; background: var(--paper); }
.appxtitle { margin-top: 1.6rem; }
/* The references list: its numbers are the draft's [n] markers. */
.reflist { margin: 0.4rem 0 0; padding-left: 1.5rem; }
.reflist li { margin: 0.35rem 0; }
@media print {
  .noprint { display: none !important; }
  body { background: #fff; }
  #rendition { max-width: none; margin: 0; padding: 0; }
  #rendition .excerpt { border-color: #bbb; }
  figure.blk, table.doctable, .cover { break-inside: avoid; }
}

/* collapsible home groups */
.rowgroup { margin: 0.3rem 0 0; }
.grouphead { display: flex; align-items: center; gap: 0.45rem; cursor: pointer;
             margin: 0.4rem 0 0.2rem; font-size: 0.92rem; user-select: none; }
.grouphead:hover { color: var(--navy); }
.grouphead .cnt { font-weight: 400; color: var(--muted); font-size: 0.82rem; }
.searchres { margin-top: 0.8rem; }
.searchcount { margin: 0.2rem 0 0.6rem; }

/* ---- add a document from the file manager ---- */
.filebtn { font-size: 0.82rem; font-weight: 600; color: var(--blue-strong); cursor: pointer;
           margin-left: 0.6rem; white-space: nowrap; }
.filebtn:hover { color: var(--navy); text-decoration: underline; }
input[data-upload] { display: none; }

/* ---- source cards (features 1, 5) ---- */
.srccard { border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.5rem 0;
           background: var(--paper); }
.srccard-h { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.srccard-t { flex: 1 1 55%; min-width: 0; overflow-wrap: anywhere; }
.srccard-t b { color: var(--navy-ink); }
.srccard-r { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.srccard-x { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.86rem;
             border-left: 2px solid var(--line-2); padding-left: 0.6rem; }

/* ---- rich content: tables (feature 5) ---- */
.blk { margin: 0.8rem 0; }
/* A table starts at its natural width (at least 60% of the text box) but is
   capped at 100%: cell content wraps rather than pushing the table past the
   edge of the page. */
.doctable { border-collapse: collapse; width: auto; min-width: 60%; max-width: 100%;
            font-size: 0.88rem; margin: 0.2rem 0; }
.doctable td { border: 1px solid var(--line-2); padding: 0.35rem 0.6rem; vertical-align: middle;
               color: var(--text); overflow-wrap: anywhere; }
.doctable tr:first-child td { font-weight: 600; color: var(--navy-ink); }
/* Per-cell alignment from the right-click menu; left is the unlisted default. */
.doctable td.al-c { text-align: center; }
.doctable td.al-r { text-align: right; }
/* Editable table: the grid IS the editor - contenteditable cells, no buttons,
   structural edits via the right-click menu. */
.doctable.editing { min-width: 60%; }
.doctable.editing td.ecell { padding: 0; min-width: 5rem; }
.doctable.editing td.ecell[contenteditable] { padding: 0.35rem 0.55rem; cursor: text; outline: none;
                                              min-height: 1.2em; }
.doctable.editing td.ecell:hover { background: var(--blue-50); }
.doctable.editing td.ecell:focus { background: var(--paper);
                                   box-shadow: inset 0 0 0 2px var(--blue-100); }
.doctable.editing td.ecell.sel { background: var(--blue-100); box-shadow: inset 0 0 0 1px var(--navy); }
.figcap { font-size: 0.82rem; color: var(--muted); margin-top: 0.35rem; font-style: italic; }
.tcap { outline: none; border-radius: 4px; padding: 0.1rem 0.3rem; min-height: 1.1em; display: inline-block; min-width: 12rem; }
.tcap:hover { background: var(--paper-2); }
.tcap:focus { background: var(--paper); box-shadow: inset 0 0 0 1px var(--blue-100); font-style: normal; color: var(--text); }
.tcap:empty::before { content: attr(data-ph); color: var(--faint); }
.tblhint { margin: 0.3rem 0 0; font-size: 0.78rem; }
.blk-ctrl { display: flex; gap: 0.3rem; margin-top: 0.3rem; }

/* Right-click table menu */
#cellmenu { position: fixed; z-index: 60; min-width: 12rem; max-width: calc(100vw - 1rem);
            background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px;
            box-shadow: 0 8px 24px rgba(15,28,45,0.12), 0 2px 6px rgba(15,28,45,0.06);
            padding: 0.3rem; font-size: 0.86rem; }
.cellmenu-item { padding: 0.4rem 0.55rem; border-radius: 5px; cursor: pointer; color: var(--navy-ink);
                 white-space: nowrap; }
.cellmenu-item:hover { background: var(--blue-50); }
.cellmenu-item.danger { color: #a12a2a; }
.cellmenu-item.danger:hover { background: #fbeaea; }
.cellmenu-sep { height: 1px; background: var(--line); margin: 0.25rem 0.2rem; }

/* ---- rich content: images (inserted or pasted) ---- */
.docimg { display: block; max-width: 100%; max-height: 26rem; border: 1px solid var(--line);
          border-radius: 4px; }

/* ---- rich content: charts (feature 5) ---- */
.chart { width: 100%; max-width: 480px; height: auto; display: block; }
.chart .axis { stroke: var(--line-2); stroke-width: 1; }
.chart .chval { fill: var(--navy-ink); font-size: 11px; font-weight: 600; font-family: var(--sans); }
.chart .chlab { fill: var(--muted); font-size: 10.5px; font-family: var(--sans); }
/* Chart edit surface: live SVG preview above the user's own data grid. */
.chartview { max-width: 480px; margin-bottom: 0.4rem; }
.chartgrid { min-width: 18rem; width: auto; }
.chartgrid th { background: var(--paper-2); font-weight: 600; color: var(--navy-ink);
                font-size: 0.78rem; text-align: left; padding: 0.3rem 0.55rem; border: 1px solid var(--line-2); }
.chartgrid td.numcell { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- regeneration preview (feature 4) ---- */
.regenbar { display: flex; gap: 1rem; align-items: center; justify-content: space-between;
            flex-wrap: wrap; margin: 0 0 1rem; padding: 0.85rem 1.05rem;
            border: 1px solid var(--blue-100); border-left: 3px solid var(--blue);
            border-radius: 8px; background: var(--blue-50); }
.regenbar-txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 12rem; flex: 1 1 auto; }
.regenbar-title { font-weight: 600; color: var(--navy-ink); font-size: 0.95rem; }
.regen-ico { color: var(--blue-strong); font-size: 1.05em; vertical-align: -1px; }
.regenbar .regen-btn { flex: none; background: var(--navy); color: #fff; border-color: var(--navy); }
.regenbar .regen-btn:hover { background: var(--navy-ink);
  box-shadow: 0 8px 24px rgba(15,28,45,0.08), 0 2px 6px rgba(15,28,45,0.05); }
.regenpanel { border: 1px solid var(--blue-100); border-left: 3px solid var(--navy); border-radius: 8px;
              padding: 0.8rem 1rem; margin: 0 0 1rem; background: var(--blue-50); }
.regenhead { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.regenrow { background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
            padding: 0.6rem 0.75rem; margin: 0.5rem 0; }
.regenrow .diffblock { margin-top: 0.35rem; }

/* ---- appendix (feature 5) ---- */
.appxrow { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0.5rem 0; }
.appxletter { flex: none; font-weight: 600; color: var(--navy); font-size: 0.82rem; white-space: nowrap;
              padding-top: 0.7rem; min-width: 5.8rem; }
.appxrow .srccard { flex: 1; margin: 0; }
.appxtog { font-size: 0.82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.25rem; }

/* ---- inline comments (feature 2) ---- */
.comments { margin: 0.5rem 0 0; }
.cmt { background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 6px;
       padding: 0.4rem 0.65rem; margin: 0.35rem 0; font-size: 0.86rem; color: var(--amber-ink); }
.cmt-by { font-weight: 600; margin-right: 0.4rem; }
.cmt-add { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0; flex-wrap: wrap; }
.cmt-add input { flex: 1 1 14rem; }
.warnbanner { border-color: var(--amber-line); background: var(--amber-bg); }

/* ---- anchored comments: highlight, compact tracker, popover ---- */
.cmark { background: var(--blue-100); border-bottom: 2px solid var(--blue);
         border-radius: 2px; padding: 0 1px; cursor: pointer; }
.cmark:hover { background: var(--blue-50); }
/* the span a comment is being written on: highlighted, not yet clickable */
.cmark.pending { cursor: text; border-bottom-style: dashed; }
.cmtpanel { border-left: 3px solid var(--blue); }
.cmthead { cursor: pointer; margin-bottom: 0.2rem; }
.cmthead:hover { color: var(--blue-strong); }
/* One line per comment; the popover at the text carries the detail. */
.cmtrow { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.28rem 0.4rem;
          border-radius: 5px; cursor: pointer; white-space: nowrap; }
.cmtrow:hover { background: var(--blue-50); }
.cmtrow b { flex: none; }
.cmtrow-t { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.cmtrow-m { flex: none; margin-left: auto; }
.cmtdot { flex: none; width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.cmtdot.dot-open { background: var(--amber-line); }
.cmtdot.dot-done { background: var(--blue-100); border: 1px solid var(--line-2); }
.cmt-toggle { display: block; margin-top: 0.2rem; padding-left: 0.4rem; font-size: 0.84rem; }
#cmtpop { position: fixed; z-index: 60; width: min(26rem, 92vw); max-height: 24rem; overflow-y: auto;
          background: var(--paper); border: 1px solid var(--line-2);
          border-left: 3px solid var(--blue); border-radius: 8px;
          box-shadow: 0 8px 24px rgba(15,28,45,0.16), 0 2px 6px rgba(15,28,45,0.06);
          padding: 0.7rem 0.85rem; font-size: 0.9rem; }
.cmtcard-h { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.cmtcard-r { margin-left: auto; display: flex; gap: 0.15rem; align-items: center; flex-wrap: wrap; }
.cmtquote { font-style: italic; color: var(--muted); font-size: 0.86rem;
            border-left: 2px solid var(--blue-100); padding-left: 0.6rem; margin: 0.35rem 0 0; }
/* The thread: each turn a message, resolutions as status lines between. */
.cmtmsg { margin: 0.4rem 0 0; padding: 0.35rem 0.6rem; background: var(--paper-2);
          border: 1px solid var(--line); border-radius: 6px; font-size: 0.88rem; }
.cmtmsg .cmt-by { font-weight: 600; }
/* Edit/delete on the author's own current-version message. */
.cmtmsg .cmtcard-r { float: right; }
.cmt-mini { font-size: 0.72rem; padding: 0.05rem 0.4rem; margin-left: 0.25rem; }
.cmtstatus { margin: 0.35rem 0 0; }
#cmtpop .cmt-add input { flex: 1 1 10rem; }
#selmenu { position: fixed; z-index: 60; min-width: min(14rem, calc(100vw - 1rem)); max-width: min(26rem, calc(100vw - 1rem));
           background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px;
           box-shadow: 0 8px 24px rgba(15,28,45,0.12), 0 2px 6px rgba(15,28,45,0.06);
           padding: 0.3rem; font-size: 0.88rem; }
#selmenu .citemenu-item { font-weight: 600; color: var(--navy); }
.selmenu-quote { padding: 0.25rem 0.5rem 0; font-style: italic; }
#selmenu .cmt-add { margin: 0.3rem 0.2rem 0.2rem; }
#selmenu .cmt-add input { flex: 1 1 16rem; }
@keyframes cmtflash { from { background: var(--amber-bg); } }
.flash { animation: cmtflash 1.5s ease-out; }

/* ---- styled final cover (feature 3) ---- */
.cover { background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
         padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; }
.docctrl { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0.3rem 0 0.6rem;
           font-size: 0.85rem; color: var(--muted); }
.docctrl span { position: relative; }

@media (max-width: 480px) {
  .appxletter { min-width: 4.8rem; padding-top: 0; }
  .appxrow { flex-direction: column; gap: 0.2rem; }
  .doctable { min-width: 100%; }
}