/* Group C: the institution (tenant) app. Linked only from t-*.html pages. 17 Oct 2026, UI/UX audit fixes.
   Reads the semantic and component tokens from tokens.css; never raw palette values outside the token block below. */

/* ---------- component tokens: execution state (D89, seven states) and approval state ---------- */
:root{
  --exec-permitted-fg:var(--produced-fg);--exec-permitted-bg:var(--produced-bg);--exec-permitted-bd:var(--c-produced);
  --exec-expired-fg:var(--c-ink);--exec-expired-bg:var(--c-lapse);
  --exec-notyet-fg:var(--fg);--exec-notyet-bd:var(--line);
  --exec-blocked-fg:var(--refusal-fg);--exec-blocked-bg:var(--refusal-bg);--exec-blocked-bd:var(--c-refusal);
  --exec-running-fg:var(--c-paper);--exec-running-bg:var(--c-refusal);
  --exec-suspended-fg:var(--bg);--exec-suspended-bg:var(--fg);
  --exec-retired-fg:var(--fg);--exec-retired-bd:var(--line);
  --appr-fg:var(--fg);
}

/* ---------- execution state: one component, a glyph per state, text always present ---------- */
.exec{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-14);font-weight:500;line-height:1.4;padding:1px 8px 1px 7px;border-radius:3px;border:1px solid transparent;vertical-align:middle}
.exec::before{content:"";flex:none;box-sizing:border-box;width:10px;height:10px}
.exec-permitted{color:var(--exec-permitted-fg);background:var(--exec-permitted-bg);border-color:var(--exec-permitted-bd)}
.exec-permitted::before{width:6px;height:11px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:-3px 2px 0 1px}
.exec-expired{color:var(--exec-expired-fg);background:var(--exec-expired-bg)}
.exec-expired::before{border:2px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.exec-notyet{color:var(--exec-notyet-fg);border-color:var(--exec-notyet-bd)}
.exec-notyet::before{border:1.5px solid currentColor}
.exec-blocked{color:var(--exec-blocked-fg);background:var(--exec-blocked-bg);border-color:var(--exec-blocked-bd)}
.exec-blocked::before{height:3px;background:currentColor}
.exec-running{color:var(--exec-running-fg);background:var(--exec-running-bg);font-weight:500}
.exec-running::before{background:currentColor}
.exec-suspended{color:var(--exec-suspended-fg);background:var(--exec-suspended-bg)}
.exec-suspended::before{width:9px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.exec-retired{color:var(--exec-retired-fg);border-color:var(--exec-retired-bd);border-style:dashed;font-weight:400}
.exec-retired::before{height:2px;background:currentColor;transform:rotate(-45deg)}
a .exec,a.exec{text-decoration:none}
a.exec-link{text-decoration:none;display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
a.exec-link::after{content:"\2192";color:var(--link);font-weight:500}
a.exec-link:hover .exec,a.exec-link:focus-visible .exec{text-decoration:underline;text-underline-offset:3px}

/* ---------- approval state: always ink, never green (D89: approval never implies execution) ---------- */
.appr{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-14);font-weight:500;color:var(--appr-fg);vertical-align:middle}
.appr::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box}
.appr-passed::before{background:currentColor}
.appr-draft::before{border-style:dashed}
.appr-due::before{background:radial-gradient(circle,currentColor 0 30%,transparent 34%)}
.appr-retired::before{border-radius:0;border:0;height:2px;background:currentColor}
.state-legend{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));list-style:none;padding:0;margin:0 0 var(--s4)}
.state-legend li{margin:0;font-size:var(--fs-14)}

/* a pair of rows, approval recorded and execution permitted, at the top of every system record */
.two-state{display:grid;gap:var(--s3);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4);background:var(--surface);margin-bottom:var(--s4)}
@media (min-width:720px){.two-state{grid-template-columns:1fr 1fr}}
.two-state dt{font-size:var(--fs-12);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.two-state dd{margin:0;font-size:var(--fs-14)}
.two-state .note-line{display:block;margin-top:4px}

/* ---------- key expiry ahead: ink with a clock glyph, never the lapse color (T-29) ---------- */
.due-soon{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.due-soon::before{content:"";width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%;box-sizing:border-box;flex:none;
  background:linear-gradient(currentColor,currentColor) 50% 25%/1.5px 35% no-repeat,linear-gradient(currentColor,currentColor) 62% 50%/30% 1.5px no-repeat}
.unset{border:1px dashed var(--line);border-radius:3px;padding:0 6px;font-weight:500}

/* ---------- reviewer strip: viewing as (prototype only, never product UI) ---------- */
.proto-as{margin:0 0 var(--s4);padding:6px 10px;gap:var(--s2) var(--s3)}
.proto-as .proto-label{margin:0}
select.proto-select{width:auto;min-height:36px;padding:4px 8px;font-size:var(--fs-14)}
.proto-note{font-size:var(--fs-12);margin:0}
.proto-note::before{content:none}
@media (max-width:599px){.proto-as{padding:4px 10px;margin-bottom:var(--s3)}.proto-as .proto-note{display:none}select.proto-select{min-height:40px}}

/* role scoping: only the named role sees a decision's trigger; everyone else sees who decides */
body[data-as="ciso"] [data-only]:not([data-only~="ciso"]),
body[data-as="cro"] [data-only]:not([data-only~="cro"]),
body[data-as="actuary"] [data-only]:not([data-only~="actuary"]),
body[data-as="datalead"] [data-only]:not([data-only~="datalead"]),
body[data-as="validator"] [data-only]:not([data-only~="validator"]),
body[data-as="compliance"] [data-only]:not([data-only~="compliance"]),
body[data-as="audit"] [data-only]:not([data-only~="audit"]),
body[data-as="bizline"] [data-only]:not([data-only~="bizline"]),
body[data-as="procurement"] [data-only]:not([data-only~="procurement"]),
body[data-as="ciso"] [data-not~="ciso"],
body[data-as="cro"] [data-not~="cro"],
body[data-as="actuary"] [data-not~="actuary"],
body[data-as="datalead"] [data-not~="datalead"],
body[data-as="validator"] [data-not~="validator"],
body[data-as="compliance"] [data-not~="compliance"],
body[data-as="audit"] [data-not~="audit"],
body[data-as="bizline"] [data-not~="bizline"],
body[data-as="procurement"] [data-not~="procurement"]{display:none!important}

/* ---------- decisions on a record: read first, then act ---------- */
.decide{border-top:1px solid var(--line);margin-top:var(--s5);padding-top:var(--s4)}
.decide h2,.decide h3{font-size:var(--fs-20);margin-bottom:var(--s2)}
.decide .row{gap:var(--s4)}
.who-decides{border-left:3px solid var(--fg);padding:var(--s2) var(--s4);background:var(--surface);font-size:var(--fs-14);display:grid;gap:var(--s2);max-width:var(--measure)}
.who-decides p{margin:0}
.who-decides form{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.status-line{font-size:var(--fs-14);font-weight:500;margin:0}
.status-line:empty{display:none}
.role-group{display:grid;gap:var(--s2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4)}
.role-group h3,.role-group h4{font-family:var(--font-sans);font-size:var(--fs-14);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin:0}
.role-groups{display:grid;gap:var(--s3);margin-top:var(--s4)}
@media (min-width:900px){.role-groups{grid-template-columns:1fr 1fr}}
.recorded{border-left:3px solid var(--fg);padding:var(--s2) var(--s3);font-size:var(--fs-14);background:var(--tint)}

/* dialogs: long records scroll inside the sheet */
dialog.decision{max-height:90vh;overflow:auto}
dialog.decision .decision-record dd{overflow-wrap:anywhere}
dialog.decision .check-row{display:flex;gap:var(--s2);align-items:flex-start;font-weight:400;margin-top:var(--s3)}
dialog.decision .check-row input{margin-top:3px;flex:none}
dialog.decision .field-pair{display:grid;gap:var(--s3)}
@media (min-width:520px){dialog.decision .field-pair{grid-template-columns:1fr 1fr}}
dialog.decision .help{margin-top:4px}
dialog.decision fieldset{border:0;padding:0;margin:var(--s3) 0 0}
dialog.decision legend{font-weight:500;margin-bottom:var(--s1)}
dialog.decision .radio-row{display:flex;gap:var(--s2);align-items:flex-start;font-weight:400;margin:4px 0}
/* a file drop zone inside a signed-decision sheet stays compact, so the record and the reason stay in view (round-3 follow-through) */
dialog.decision .dropzone{padding:var(--s4) var(--s3);gap:var(--s1)}
dialog.decision .radio-row input{margin-top:3px;flex:none}

/* ---------- severity on banners: a word and an icon, never color alone (T-36) ---------- */
.sev{display:inline-flex;align-items:center;gap:6px;font-weight:500;margin-right:4px}
.sev svg{width:16px;height:16px;flex:none}
.banner p{margin:0}

/* ---------- rail: four groups, headed (T-19) ---------- */
.rail-group{display:grid;gap:2px}
.rail-group+.rail-group{margin-top:var(--s3)}
.rail-group-h{font-size:var(--fs-12);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin:0;padding:0 12px}
@media (min-width:960px){.rail-desktop .rail-links{mask-image:none;-webkit-mask-image:none}.rail-group .rail-links a{min-height:40px;padding:8px 12px}}
.rail-links a.is-section{border-color:var(--line)}
.rail-mobile-body .rail-group-h{padding:0 var(--s3)}
.rail-mobile-body .rail-group+.rail-group{margin-top:var(--s2)}
.rail-mobile-links a.is-section{border-color:var(--line)}

/* ---------- account menu: who is signed in, sign out (T-37) ---------- */
/* account menu (.acct, .acct-panel): shared, now in site.css (D120) */

/* ---------- count tiles: the whole tile is the link and filters the queue (T-17, T-26) ---------- */
.tiles{display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none}
@media (min-width:600px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tiles li{margin:0;display:grid}
a.tile{display:grid;gap:2px;align-content:start;min-height:88px;border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4);background:var(--surface);color:var(--fg);text-decoration:none}
a.tile:hover{border-color:var(--fg)}
a.tile[aria-current="true"]{outline:2px solid var(--link);outline-offset:-2px}
a.tile .tile-n{font-family:var(--font-mono);font-size:var(--fs-24);line-height:1.2}
a.tile .tile-u{font-size:var(--fs-14)}
a.tile .tile-l{font-size:var(--fs-14);font-weight:500}
a.tile.is-alert{border:2px solid var(--c-refusal)}
a.tile.is-zero .tile-n{font-size:var(--fs-20)}
.mine-line{font-size:var(--fs-18);font-family:var(--font-serif);margin:0 0 var(--s4)}
.filter-chip{display:inline-flex;flex-wrap:wrap;gap:var(--s2);align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:4px 12px;font-size:var(--fs-14);margin:0 0 var(--s3)}
.filter-chip[hidden]{display:none}

/* ---------- queue cards: who decides and when, first; never hidden on phones (T-05, T-27) ---------- */
.queue{display:grid;gap:var(--s4);margin-top:var(--s4)}
.qcard .record-head h2,.qcard .record-head h3{font-size:var(--fs-20);margin:0}
.qcard .qhead-row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
.qcard .overdue{font-family:var(--font-mono);font-size:var(--fs-12);font-weight:400;border:1px solid var(--line);border-radius:3px;padding:0 6px}
.qbody{padding:var(--s4)}
.qdecisions{list-style:none;padding:0;margin:0 0 var(--s4);display:grid;gap:var(--s2)}
.qdecisions li{margin:0;display:grid;gap:2px;border-left:3px solid var(--fg);padding:var(--s1) var(--s3);font-size:var(--fs-14)}
.qdecisions .qwho{font-weight:500}
.qactions{margin-top:var(--s4);gap:var(--s4)!important}
.qcard[hidden]{display:none}

/* ---------- incident lifecycle: done, now, not started (T-09) ---------- */
ol.lc{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3);counter-reset:none}
ol.lc>li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3);margin:0;font-size:var(--fs-14)}
ol.lc>li::before{content:"";width:24px;height:24px;border-radius:50%;border:1.5px dashed var(--line);box-sizing:border-box;margin-top:1px}
ol.lc>li.lc-done::before{content:"\2713";border:0;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:var(--fs-12);font-weight:500}
ol.lc>li.lc-now::before{border:2px solid var(--fg);background:radial-gradient(circle,var(--fg) 0 32%,transparent 36%)}
.lc-state{font-family:var(--font-mono);font-size:var(--fs-12);font-weight:400;margin-left:6px}
.lc-now .lc-state{border:1px solid var(--fg);border-radius:3px;padding:0 4px}
ol.lc strong{font-weight:500}

/* ---------- small layout helpers replacing inline styles (T-40) ---------- */
.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}
.mb-0{margin-bottom:0}
.lead-app{font-size:var(--fs-18);line-height:1.5;max-width:68ch;margin:var(--s2) 0 0}
@media (max-width:599px){.lead-app{font-size:var(--fs-16)}}
.legend-h{font-weight:500;font-size:var(--fs-14);margin-bottom:6px}
.pad{padding:var(--s4)}
.facts{display:grid;gap:var(--s2) var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin:0}
.facts div{border-left:2px solid var(--line);padding-left:var(--s3)}
.facts dt{font-size:var(--fs-12);font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.facts dd{margin:2px 0 0;font-size:var(--fs-14)}
.term{border-bottom:1px dotted currentColor;text-decoration:none;cursor:help}
details.gloss-d{display:inline}
details.gloss-d>summary{display:inline;cursor:pointer;color:var(--link);font-size:var(--fs-14);text-decoration:underline;text-underline-offset:3px}
details.gloss-d[open]>p{display:block;border-left:2px solid var(--line);padding-left:var(--s3);font-size:var(--fs-14);margin:4px 0 var(--s2)}
.checklist-steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3);max-width:none}
.checklist-steps>li{margin:0;display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4);background:var(--surface)}
.checklist-steps>li::before{content:"";width:22px;height:22px;border:1.5px dashed var(--line);border-radius:50%;box-sizing:border-box;margin-top:2px}
.checklist-steps>li.is-done::before{content:"\2713";border:0;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:var(--fs-12)}
.checklist-steps h2{font-size:var(--fs-18);margin:0 0 var(--s1)}
.checklist-steps p{margin:0 0 var(--s2);font-size:var(--fs-14)}
.form-wide{max-width:640px}
.form .legend{font-weight:500;font-size:var(--fs-14);margin-bottom:6px}
.excl-reason{margin:0 0 0 30px}
.excl-reason[hidden]{display:none}
.result-card{border:1px solid var(--line);border-left:4px solid var(--fg);border-radius:var(--radius);padding:var(--s4);background:var(--surface)}
.result-card h2{font-size:var(--fs-24)}
.artifact-d>summary{cursor:pointer;color:var(--link);font-size:var(--fs-14);text-decoration:underline;text-underline-offset:3px;list-style:none;padding-block:4px}
.artifact-d>summary::-webkit-details-marker{display:none}
.artifact-d[open]>dl{margin-top:var(--s2)}
.state-empty h2{font-size:var(--fs-18);margin-bottom:var(--s2)}
.sacf-clause{border:1px dashed var(--line);border-radius:var(--radius);padding:var(--s2) var(--s3);font-size:var(--fs-14);margin:0 0 var(--s2)}
.scope-note{font-size:var(--fs-14)}

/* lists that are layouts, not prose, use the full width */
.tiles,.qdecisions,ol.lc,.state-legend,.chips{max-width:none}

/* event and run-log titles are headings, sized as record titles */
.record-head h2.record-title,.record-head h3.record-title{font-size:var(--fs-20);margin:0}
.asof-box{flex:1 1 260px}
.record-col{max-width:820px}
[role="tabpanel"]>p.proto-label,main>p.proto-label{margin:0 0 var(--s3);max-width:none;background:var(--tint);padding:6px 10px;border-radius:var(--radius)}
.gloss dt{font-family:var(--font-serif);font-size:var(--fs-18);margin-top:var(--s4)}
.gloss dd{max-width:var(--measure)}

/* tables: hashes wrap; the audit log never scrolls inside a scrolling phone page (T-32) */
td .hash-d>summary .hash{white-space:nowrap}
td .hash-d>.hash{white-space:normal}
@media (max-width:599px){.table-wrap.scroll-y{max-height:none;overflow-y:visible}}
tr.is-mismatch td{background:color-mix(in srgb,var(--c-refusal) 7%,transparent)}
tr[hidden]{display:none}

/* tablet: real tables from 600 px keep the system name in view */
@media (min-width:600px) and (max-width:1100px){.sticky-first th:first-child,.sticky-first td:first-child{position:sticky;left:0;background:var(--bg);z-index:1}}