/* Portal styles on the VerifyMy design tokens: teal and ink, Poppins (Google Fonts), 4px radii,
   hairline borders, no gradients, no shadows. Layout follows the Pcolle demo
   (rail, page head, summary cards, results table, tiles). */


:root {
  --teal-100: #EAF6F6; --teal-400: #73C0BF; --teal-500: #00B3AB; --teal-600: #408D8C; --teal-700: #306A69;
  --gray-100: #F3F3F3; --gray-200: #E6E6E6; --gray-300: #CECECE; --gray-400: #919191; --gray-500: #696969; --gray-700: #333232; --gray-900: #0E0E0E;
  --red-100: #FEF9F9; --red-200: #F6D2D2; --red-600: #D21C1C; --red-800: #7E1111;
  --green-100: #E2F9E5; --green-200: #BDE6C2; --green-600: #1D892B; --green-800: #11521A;
  --warn-100: #FDF4E9; --warn-300: #F9D3A6; --warn-600: #EF9021; --warn-800: #884F0D;
  --blue-100: #E7F4FD; --blue-200: #94DCF7; --blue-700: #0063B8;
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--gray-700); background: #fff; }
h1, h2, h3 { color: var(--gray-900); margin: 0; line-height: 1.3; }
h1 { font-size: 40px; font-weight: 300; letter-spacing: -0.02em; }
h2 { font-size: 24px; font-weight: 300; }
h3 { font-size: 16px; font-weight: 700; margin-bottom: var(--sp-3); }
a { color: var(--gray-900); }
a:hover { color: var(--teal-700); }
code, .mono, pre { font-family: var(--mono); font-size: 12px; }
code { background: var(--gray-100); padding: 1px 5px; border-radius: 2px; }
pre { background: var(--gray-100); padding: var(--sp-4); border-radius: 4px; overflow: auto; max-height: 420px; }
.muted { color: var(--gray-500); } .nowrap { white-space: nowrap; } .num { font-variant-numeric: tabular-nums; }
.note { color: var(--gray-500); font-size: 14px; margin: var(--sp-2) 0; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); margin: 0 0 var(--sp-2); }
.lede { max-width: 70ch; color: var(--gray-700); margin: var(--sp-3) 0 0; }
.h-sub { font-size: 14px; font-weight: 400; color: var(--gray-500); margin-left: var(--sp-3); }

/* Shell */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-4); border-right: 1px solid var(--gray-200); background: #fff; }
.rail-logo img { height: 26px; display: block; }
.rail-product { margin: var(--sp-3) 0 var(--sp-5); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-700); }
.rail nav { display: flex; flex-direction: column; gap: 2px; }
.rail nav a { text-decoration: none; padding: var(--sp-2) var(--sp-3); border-radius: 4px; border-left: 3px solid transparent; color: var(--gray-700); }
.rail nav a:hover { background: var(--gray-100); }
.rail nav a.is-active { background: var(--teal-100); border-left-color: var(--teal-500); color: var(--gray-900); font-weight: 700; }
.rail-foot { margin-top: auto; font-size: 13px; color: var(--gray-500); display: flex; flex-direction: column; gap: var(--sp-1); }
.rail-foot strong { color: var(--gray-900); }
.rail-warn { margin-top: var(--sp-3); font-size: 12px; color: var(--gray-400); }
.main { padding: var(--sp-6) 48px 96px; max-width: 1280px; }
.main > section { margin-top: 48px; }
.page-head { display: flex; justify-content: space-between; gap: var(--sp-5); align-items: flex-start; }
.product-id { font-size: 32px; }
.pager { display: flex; gap: var(--sp-2); }
.meta-list { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-4); font-size: 13px; color: var(--gray-500); }
.meta-list strong { display: block; color: var(--gray-900); font-size: 15px; }
.sec-head { margin-bottom: var(--sp-4); }

/* Controls */
.btn, .chip { font-family: var(--font); font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; border-radius: 4px; }
.btn { padding: 9px 18px; border: 2px solid var(--gray-900); background: transparent; color: var(--gray-900); font-weight: 700; }
.btn:hover { background: var(--gray-900); color: #fff; }
.btn.primary { background: var(--teal-400); border-color: var(--teal-400); color: var(--gray-900); }
.btn.primary:hover { background: var(--teal-600); border-color: var(--teal-600); }
.btn:disabled { background: var(--gray-200); border-color: var(--gray-200); color: var(--gray-400); cursor: not-allowed; }
.chip { padding: 4px 12px; border: 1px solid var(--gray-300); background: #fff; color: var(--gray-700); }
.chip:hover { border-color: var(--gray-900); }
.chip[aria-pressed="true"] { background: var(--gray-900); border-color: var(--gray-900); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--gray-700); text-decoration: underline; cursor: pointer; text-align: left; }
.controls { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: center; margin-bottom: var(--sp-4); }
.count-note { color: var(--gray-500); font-size: 13px; margin: 0 0 0 auto; }
input, select, textarea { font-family: var(--font); font-size: 14px; padding: 8px 10px; border: 1px solid var(--gray-500); border-radius: 4px; background: #fff; color: var(--gray-900); max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gray-900); box-shadow: 0 0 0 3px rgba(115, 192, 191, 0.45); }
.search { min-width: 300px; }

label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: 13px; color: var(--gray-500); }
label.select-label { flex-direction: row; align-items: center; }
label.radio { flex-direction: row; align-items: center; gap: var(--sp-2); color: var(--gray-700); font-size: 14px; }
label.radio input { width: auto; }
fieldset { border: 1px solid var(--gray-300); border-radius: 4px; display: flex; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); }
legend { font-size: 13px; color: var(--gray-500); padding: 0 var(--sp-2); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; gap: var(--sp-3); align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.form-wide { max-width: 960px; }
.flash { padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--teal-500); background: var(--teal-100); border-radius: 4px; margin: 0 0 var(--sp-5); }
.flash.error { border-color: var(--red-600); background: var(--red-100); color: var(--red-800); }
.flash.secret { border-color: var(--warn-600); background: var(--warn-100); }
.flash.secret code { display: block; margin: var(--sp-2) 0; padding: var(--sp-3); font-size: 14px; background: #fff; word-break: break-all; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 40px; font-size: 12px; font-weight: 700; background: var(--gray-100); color: var(--gray-700); white-space: nowrap; }
.badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.clear { background: var(--green-100); color: var(--green-800); }
.badge.amber { background: var(--warn-100); color: var(--warn-800); }
.badge.red { background: var(--red-200); color: var(--red-800); }
.badge.info { background: var(--blue-100); color: var(--blue-700); }

/* Cards and summary */
.card { border: 1px solid var(--gray-200); border-radius: 8px; padding: var(--sp-5); background: #fff; }
.verdict-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.verdict-summary.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vs-card { display: block; text-decoration: none; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--gray-200); border-top: 4px solid var(--gray-300); border-radius: 8px; background: var(--gray-100); color: var(--gray-700); }
.vs-card:hover { border-color: var(--gray-900); }
.vs-card.tone-red { border-top-color: var(--red-600); } .vs-card.tone-amber { border-top-color: var(--warn-600); }
.vs-card.tone-clear { border-top-color: var(--green-600); } .vs-card.tone-info { border-top-color: var(--blue-700); }
.vs-k { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.vs-v { margin: var(--sp-1) 0 var(--sp-2); font-size: 22px; font-weight: 300; color: var(--gray-900); }
.vs-badge, .vs-why, .vs-clauses { margin: var(--sp-2) 0 0; }
.vs-why { font-size: 13px; }
.vs-clauses { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.stat { background: var(--gray-100); border-radius: 8px; padding: var(--sp-4) var(--sp-5); }
.stat .v { display: block; font-size: 32px; font-weight: 300; color: var(--gray-900); }
.stat .of { font-size: 16px; color: var(--gray-500); margin-left: 6px; }
.stat .k { display: block; font-size: 13px; color: var(--gray-700); }
.stat .sub { display: block; font-size: 12px; color: var(--gray-500); }
.stat.is-red .v { color: var(--red-600); }

/* Table */
.table-wrap { border: 1px solid var(--gray-200); border-radius: 8px; overflow: auto; }
.results { width: 100%; border-collapse: collapse; font-size: 13px; }
.results th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); background: var(--gray-100); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.results td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.results tr:last-child td { border-bottom: 0; }
.results tbody tr:hover td { background: var(--gray-100); }
.results .pid a { font-weight: 700; text-decoration: none; font-family: var(--mono); font-size: 12px; }
.results .title, .results .sub { display: block; color: var(--gray-500); font-size: 12px; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results .sub { color: var(--gray-400); font-family: var(--mono); font-size: 11px; }
.sub-n { color: var(--gray-500); font-size: 12px; }
.num-h { text-align: right; } td.num { text-align: right; }
.empty { text-align: center; color: var(--gray-500); padding: var(--sp-6) !important; }
.results details summary { cursor: pointer; color: var(--gray-500); margin-top: var(--sp-2); }

/* Request detail */
.verdict-card { margin-bottom: var(--sp-4); }
.verdict-line { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.reason { color: var(--gray-900); }
.file { margin-left: auto; font-size: 12px; color: var(--gray-400); font-family: var(--mono); }
.clause-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-3); font-size: 13px; }
.clause-row-k { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); }
.listing-title { font-size: 18px; color: var(--gray-900); margin: 0 0 var(--sp-2); }
.listing-body { margin: var(--sp-3) 0 0; white-space: pre-wrap; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.tile { border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.tile.is-rejected { border-color: var(--red-600); }
.tile-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.tile .file { margin-left: 0; flex-basis: 100%; }
.media { background: var(--gray-200); color: var(--gray-500); display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 4 / 3; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.media small { text-transform: none; letter-spacing: 0; font-size: 12px; }
.media-video { aspect-ratio: 16 / 9; border-radius: 8px; }
/* T13: media is blurred until its checkbox is ticked. Works without JS. */
.media-box { position: relative; overflow: hidden; background: var(--gray-900); aspect-ratio: 4 / 3; }
.media-box.media-video { aspect-ratio: 16 / 9; border-radius: 8px; }
.media-box .frame, .media-box .preview { width: 100%; height: 100%; }
.media-box .preview { object-fit: contain; display: block; filter: blur(24px); }
.media-box .reveal { position: absolute; opacity: 0; pointer-events: none; }
.media-box .reveal:checked ~ .frame .preview { filter: none; }
.media-box .shown { width: 100%; height: 100%; object-fit: contain; display: block; }
.media .btn { margin-top: var(--sp-2); }
.minor-review { margin: var(--sp-2) 0; }
.reveal-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-weight: 600; background: rgba(0, 0, 0, 0.25); }
.reveal-label .when-on { display: none; }
.reveal:checked ~ .reveal-label { inset: 8px 8px auto auto; padding: 2px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.6); font-size: 12px; }
.reveal:checked ~ .reveal-label .when-off { display: none; }
.reveal:checked ~ .reveal-label .when-on { display: inline; }
.reveal:focus-visible ~ .reveal-label { outline: 2px solid var(--teal-500); outline-offset: -2px; }
.video-layout { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: var(--sp-5); margin-top: var(--sp-4); align-items: start; }
.evidence { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.evidence li { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.fb-line { margin-top: var(--sp-3); }
.raw summary, .clause-all summary { cursor: pointer; color: var(--gray-500); }
.fb-dialog { border: 1px solid var(--gray-300); border-radius: 8px; padding: var(--sp-5); width: min(560px, 92vw); }
.fb-dialog::backdrop { background: rgba(14, 14, 14, 0.4); }
.fb-dialog select[multiple] { width: 100%; }

/* Submit */
.seg { display: flex; border: 2px solid var(--gray-900); border-radius: 4px; overflow: hidden; }
.seg-opt { flex: 1; flex-direction: row; justify-content: center; padding: var(--sp-2); cursor: pointer; color: var(--gray-900); font-size: 14px; font-weight: 700; text-transform: capitalize; }
.seg-opt + .seg-opt { border-left: 2px solid var(--gray-900); }
.seg-opt input { position: absolute; opacity: 0; width: 1px; }
.seg-opt:has(input:checked) { background: var(--teal-400); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--teal-700); outline-offset: -4px; }
.submit-form:not([data-mode="link"]) .sm-link, .submit-form:not([data-mode="upload"]) .sm-upload, .submit-form:not([data-mode="text"]) .sm-text { display: none; }
.sm-ext-toggle { align-self: flex-start; }
.submit-form [hidden] { display: none; }

/* Policy: registration wizard */
.clause-id { font-family: var(--mono); font-weight: 700; }
.ps-lock { border: 0; padding: 0; margin: 0; min-width: 0; display: block; }
.ps-stepper { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-5); flex-wrap: wrap; }
.ps-stepper li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gray-500); padding: 6px 12px 6px 6px; border-radius: 40px; background: var(--gray-100); }
.ps-stepper li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-200); color: var(--gray-900); font-size: 12px; }
.ps-stepper li.is-now { color: var(--gray-900); font-weight: 700; }
.ps-stepper li.is-now span { background: var(--teal-700); color: #fff; }
.ps-stepper li.is-done span { background: var(--teal-400); }
.ps-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.ps-source { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); border: 1px solid var(--gray-200); border-top: 4px solid var(--teal-500); border-radius: 8px; text-decoration: none; color: var(--gray-700); min-height: 140px; }
.ps-source strong { font-size: 18px; color: var(--gray-900); }
.ps-source span { font-size: 14px; color: var(--gray-500); }
.ps-source:hover { border-color: var(--gray-900); color: var(--gray-700); }
.ps-url { display: flex; gap: var(--sp-3); align-items: flex-end; max-width: 960px; }
.ps-grow { flex: 1; }
.ps-steps { font-size: 14px; color: var(--gray-500); padding-left: 20px; }
.ps-steps .is-done { color: var(--gray-900); }
.ps-steps .is-done::after { content: "  \2713"; color: var(--teal-600); }
.ps-steps .is-now { color: var(--gray-900); font-weight: 700; }
.ps-steps .is-now::after { content: "  \2026"; }
.ps-k { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); margin: var(--sp-4) 0 var(--sp-2); }
.ps-group { margin-top: var(--sp-3); }
.ps-draft { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: start; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--gray-200); border-radius: 4px; margin-bottom: 6px; cursor: pointer; color: var(--gray-700); font-size: 14px; }
.ps-draft:hover { background: var(--gray-100); }
.ps-draft.is-added { opacity: 0.55; }
.ps-draft input { margin-top: 4px; accent-color: var(--teal-600); }
.ps-draft-body, .ps-review-main { display: flex; flex-direction: column; gap: 2px; }
.ps-draft-title { font-weight: 700; color: var(--gray-900); }
.ps-draft-detail { font-size: 13px; color: var(--gray-700); }
.ps-draft-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ps-note { display: block; font-size: 12px; color: var(--gray-500); font-style: italic; }
.ps-mods { display: flex; gap: 3px; }
.ps-mod { font-size: 11px; padding: 1px 6px; border-radius: 40px; border: 1px dashed var(--gray-300); color: var(--gray-400); }
.ps-mod.on { border-style: solid; border-color: var(--teal-600); color: var(--teal-700); background: var(--teal-100); }
.ps-caps { display: block; font-size: 12px; color: var(--teal-700); }
.ps-src { font-size: 11px; padding: 1px 8px; border-radius: 40px; background: var(--gray-100); color: var(--gray-500); white-space: nowrap; }
.ps-src-url { background: var(--blue-100); color: var(--blue-700); }
.ps-src-own { background: var(--warn-100); color: var(--warn-800); }
.ps-own { max-width: 640px; }
.ps-own fieldset { gap: var(--sp-4); }
.ps-live { font-size: 13px; padding: var(--sp-2) var(--sp-3); background: var(--gray-100); border-radius: 4px; margin: 0; }
.ps-ok { color: var(--teal-700); font-weight: 700; } .ps-gap { color: var(--warn-800); font-weight: 700; }
.ps-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-4); flex-wrap: wrap; }
.ps-review-mods { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ps-x { border: 0; background: none; color: var(--gray-500); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ps-x:hover { color: var(--red-600); }
.ps-url + .table-wrap { margin-top: var(--sp-4); }
.ps-policies .chip { white-space: nowrap; }
.ps-policies .ps-x { font-size: 13px; }
/* model tick vs examples button: the core distinction */
.ps-tick { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; font-size: 12px; padding: 4px 10px; border-radius: 40px; border: 1px solid var(--teal-600); background: var(--teal-100); color: var(--teal-700); cursor: pointer; }
.ps-tick input { accent-color: var(--teal-600); margin: 0; padding: 0; }
.ps-tick-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.ps-ex-btn { font-family: var(--font); font-size: 12px; padding: 4px 10px; border-radius: 40px; cursor: pointer; border: 1px dashed var(--warn-600); background: var(--warn-100); color: var(--warn-800); }
.ps-ex-btn.is-full { border-style: solid; }
.ps-na { font-family: var(--font); font-size: 12px; color: var(--gray-400); cursor: pointer; padding: 4px 6px; border: 0; background: none; }
.ps-na:hover { color: var(--gray-900); }
.ps-warn { font-size: 13px; background: var(--warn-100); border-left: 3px solid var(--warn-600); color: var(--warn-800); padding: var(--sp-2) var(--sp-3); border-radius: 4px; }
.ps-ex { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.ps-ex-block { border: 1px solid var(--gray-200); border-radius: 4px; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.ps-ex-block textarea { width: 100%; }
.ps-ex-head { display: flex; align-items: center; gap: var(--sp-3); font-size: 13px; width: 100%; }
.ps-bar { flex: 1; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.ps-bar span { display: block; height: 100%; background: var(--warn-600); }
.ps-ex-list { list-style: none; margin: 0; padding: 0; font-size: 12px; max-height: 140px; overflow: auto; width: 100%; }
.ps-ex-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.ps-done ul { font-size: 15px; line-height: 1.9; }
@media (max-width: 960px) { .ps-sources { grid-template-columns: 1fr; } .ps-review-mods { justify-content: flex-start; } }

/* Settings pages */
.kv { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-3) var(--sp-4); margin: 0; }
.kv dt { color: var(--gray-500); font-size: 13px; } .kv dd { margin: 0; }
.bar-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 80px 110px; gap: var(--sp-3); align-items: center; margin: var(--sp-2) 0; }
.bar { background: var(--gray-100); border-radius: 2px; height: 14px; }
.bar-fill { background: var(--teal-500); height: 100%; border-radius: 2px; }
.breakdown { margin-top: var(--sp-4); }

/* Sign-in */
.login-body { background: var(--gray-100); display: grid; place-items: center; min-height: 100vh; }
.login { width: min(440px, 92vw); }
.login-logo { height: 28px; margin-bottom: var(--sp-5); }

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; } .rail { position: static; height: auto; }
  .verdict-summary, .verdict-summary.five, .two-col, .grid2, .policy-grid, .video-layout { grid-template-columns: 1fr; }
  .main { padding: var(--sp-5); }
}

/* T10: examples and the staff review queue */
.ps-attest { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: 13px; }
.ps-errors { color: var(--red-600); margin: var(--sp-2) 0; padding-left: var(--sp-5); }
.ps-ex-list form { display: inline; }
.ps-ex-gone { color: var(--gray-500); }
.ex-review { margin-bottom: var(--sp-4); max-width: 520px; }
.ex-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.ex-actions input[type="text"] { flex: 1 1 100%; }
.tabs { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.tabs a.is-active { font-weight: 700; }

/* F1: media scope. A draft row is a div, so the Applies to boxes can sit outside the label of the pick box. */
.ps-draft { display: block; cursor: default; }
.ps-draft-pick { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: start; cursor: pointer; }
.ps-scope { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: 6px; font-size: 13px; }
.ps-scope input { margin: 0 4px 0 0; }
.ps-review-mods .ps-scope { margin-top: 0; }

/* F2: super admin */
.acting-banner { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--warn-600); background: var(--warn-100); border-radius: 4px; margin: 0 0 var(--sp-5); }
.acting-banner form { margin: 0; }
.inline-form { display: inline; margin: 0; }
.sa-admins { display: flex; flex-direction: column; gap: var(--sp-1); }

/* Policy Done page: coverage meters per type, then one row per rule with a dot per type. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ps-meters { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--sp-4); margin: var(--sp-2) 0 var(--sp-4); }
.ps-meter { border: 1px solid var(--gray-200); border-radius: 8px; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 4px; }
.ps-meter .k { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); }
.ps-meter .v { font-size: 28px; font-weight: 700; color: var(--gray-900); } .ps-meter .v small { font-size: 15px; color: var(--gray-400); }
.ps-meter .sub { font-size: 12px; color: var(--gray-500); }
.ps-meter-bar { display: block; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; } .ps-meter-bar i { display: block; height: 100%; background: var(--teal-500); }
.ps-sum { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 var(--sp-3); font-size: 14px; }
.ps-c-ok { color: var(--green-800); } .ps-c-gap { color: var(--red-600); }
.ps-legend { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--gray-500); }
.ps-matrix { border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
.ps-mx-head, .ps-row > summary { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--n, 3), 64px) 160px; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-4); }
.ps-mx-head { background: var(--gray-100); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); }
.ps-mx-c { text-align: center; }
.ps-mx-group { padding: var(--sp-3) var(--sp-4) var(--sp-1); font-size: 12px; font-weight: 700; color: var(--teal-700); border-top: 1px solid var(--gray-200); }
.ps-row > summary { list-style: none; cursor: pointer; border-top: 1px solid var(--gray-100); }
.ps-row > summary::-webkit-details-marker { display: none; }
.ps-row > summary:hover, .ps-row[open] > summary, .ps-row:target > summary { background: var(--teal-100); }
.ps-mx-rule { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gray-900); }
.ps-row[open] .ps-mx-rule { white-space: normal; }
.ps-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }
.ps-dot.is-ok { background: var(--green-600); } .ps-dot.is-gap { background: var(--warn-600); }
.ps-dot.is-off { border: 2px solid var(--gray-300); } .ps-dot.is-na { background: var(--gray-200); }
.ps-row-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5); padding: var(--sp-2) var(--sp-4) var(--sp-4); background: var(--teal-100); }
.ps-row-acts { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-end; }
.ps-row-btns { display: flex; gap: var(--sp-2); align-items: center; }
@media (max-width: 960px) { .ps-meters { grid-template-columns: 1fr; } .ps-mx-head, .ps-row > summary { grid-template-columns: minmax(0, 1fr) repeat(var(--n, 3), 40px); } .ps-mx-head > :last-child, .ps-row > summary > :last-child { display: none; } .ps-row-body { grid-template-columns: 1fr; } .ps-row-acts { align-items: flex-start; } }
.ps-scope-form, .ps-scope-line { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin: var(--sp-3) 0; }
.ps-model { border: 1px solid var(--gray-200); border-radius: 8px; margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-4); }
.ps-model legend { display: flex; gap: var(--sp-3); align-items: center; padding: 0 var(--sp-2); }
.ps-row-also { padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--gray-100); font-size: 13px; color: var(--gray-500); }
.ps-ignored { margin: var(--sp-5) 0; }