/* Theme: the LJHPP Intelligence Board (Element black and gold, EA mark).
   Fonts are named but not bundled: the page's CSP allows styles from this server only, so a PC without
   Instrument Sans or IBM Plex Mono falls back to Segoe UI / Consolas. */
:root{color-scheme:dark;
--ground:#0A0A0B;--panel:#131315;--panel-2:#1A1A1D;--panel-3:#212125;--line:#2B2B31;--line-soft:#1F1F24;
--ink:#F3EEE3;--ink-2:#C6BFB0;--ink-3:#8F8F96;--ocean:#C9A961;--ocean-2:#D9BC7A;--ocean-wash:#1A1A1D;
--gold:#C9A961;--sunset:#C9A961;--redsand:#C9A961;--mast:#0A0A0B;--mast-ink:#F3EEE3;
--good:#A3B394;--good-bg:#18211A;--good-line:#33452F;--watch:#FED141;--watch-bg:#2A2210;--watch-line:#584717;
--bad:#FF7059;--bad-bg:#2B1512;--bad-line:#5B2A23;
--shadow:0 1px 2px rgba(0,0,0,.5),0 10px 26px -18px rgba(0,0,0,.85);--r:10px;--focus:#C9A961;
--serif:"Source Serif 4",Georgia,"Times New Roman",serif;
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:root{font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}header{background:var(--mast);color:var(--mast-ink);padding:22px 6%;display:flex;gap:25px;align-items:center}header b{font-size:26px}header b span{color:var(--gold)}header small{margin-left:auto;color:#BDC5CD}main{max-width:1020px;margin:42px auto;padding:0 24px}h1{font-size:43px;line-height:1.08;margin:12px 0 18px}h2{font-size:23px;margin:0 0 16px}h3{font-size:17px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--ink-3)}.intro{font-size:18px;line-height:1.6;max-width:760px;color:var(--ink-2)}.steps{display:flex;list-style:none;padding:0;gap:12px;margin:28px 0}.steps li{background:var(--panel-2);padding:13px 18px;border-radius:8px;flex:1}section{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;margin:18px 0}.upload{border:2px dashed var(--line);background:var(--panel-2)}button,.upload input::file-selector-button{border:1px solid var(--line);border-radius:7px;padding:12px 18px;background:var(--panel);font:inherit;cursor:pointer;margin:6px 6px 6px 0}button.primary{background:var(--ocean);border-color:var(--ocean);color:var(--mast-ink);font-weight:600}button.primary:hover{background:var(--ocean-2)}button:disabled{opacity:.5;cursor:wait}label{display:block;margin:12px 0;font-size:14px;font-weight:bold}input:not([type=checkbox]),select,textarea{display:block;padding:11px;border:1px solid var(--line);border-radius:6px;font:inherit;width:100%;margin-top:7px}input[type=file]{border:0}input[type=checkbox]{margin-right:10px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 25px}dl{display:grid;grid-template-columns:180px 1fr;gap:12px}dt{color:var(--ink-3)}dd{margin:0;overflow-wrap:anywhere}.muted,small{color:var(--ink-3)}.issue{border-left:4px solid var(--watch);background:var(--watch-bg);padding:14px;margin:12px 0}.badge{background:var(--ocean-wash);padding:7px 10px;border-radius:6px;display:inline-block;margin:6px 8px 6px 0}details{margin:16px 0}summary{cursor:pointer;font-weight:bold}pre{white-space:pre-wrap;font-size:12px;max-height:280px;overflow:auto}footer{font-size:12px;line-height:1.7;color:var(--ink-3);margin:35px 0}#message{color:var(--watch);line-height:1.5}table{border-collapse:collapse;width:100%;font-size:14px}td,th{padding:10px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}a{color:var(--ocean-2)}@media(max-width:650px){.grid{grid-template-columns:1fr}.steps{display:block}.steps li{margin:8px 0}h1{font-size:32px}dl{grid-template-columns:1fr}header small{display:none}}

[hidden]{display:none!important}.matter-header{border-left:5px solid var(--ocean)}.supporting{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}.supporting>section{border:0;padding:14px 0;margin:0}.issue>summary{padding:4px 0}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.source-image{display:block;max-width:100%;height:auto;border:1px solid var(--line);margin:12px 0}
.source-snips{border-top:1px solid var(--line-soft);margin-top:14px;padding-top:10px}
.source-snips>summary{font-weight:normal;font-size:13px;color:var(--ink-3)}
.source-snips pre{font-size:13px;background:var(--panel);padding:10px}

.ink{margin:.5rem 0;padding:.5rem .6rem;border-left:3px solid var(--watch);background:var(--watch-bg)}
.ink p{margin:0 0 .4rem;font-size:.85rem;color:var(--watch)}
.ink canvas{max-width:100%;background:#FFFFFF;border:1px solid var(--line);display:block}
.ink button.reading{margin:.5rem 0 0;background:var(--panel);border-color:var(--watch);font-weight:bold;max-width:100%;overflow-wrap:anywhere;text-align:left}

.render-warning{border:2px solid var(--bad);background:var(--bad-bg);border-radius:10px;padding:16px 18px;margin:18px 0}
.render-warning strong{display:block;font-size:17px;color:var(--bad);margin-bottom:6px}
.render-warning p{margin:0 0 8px;line-height:1.5;color:var(--bad)}
.render-warning code{display:block;font-size:12px;background:var(--panel);border:1px solid var(--bad-line);padding:8px;overflow-wrap:anywhere}

.viewswitch{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.viewswitch button{margin:0 10px 0 0}
.viewswitch small{color:var(--ink-3)}

/* ---- the process, made visible -----------------------------------------------------
   Four steps in a row, the current one marked. Everything below reads as one sequence
   rather than a page of unrelated cards. */
.progress{display:flex;list-style:none;gap:10px;padding:0;margin:0 0 18px}
.progress li{flex:1;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
.progress li b{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:var(--panel-2);color:var(--ink-2);font-size:12px;margin-right:8px}
.progress li span{font-weight:bold;font-size:14px}
.progress li small{display:block;margin-top:4px;font-size:12px}
.progress li.now{border-top-color:var(--gold);box-shadow:0 1px 6px rgba(0,0,0,.06)}
.progress li.now b{background:var(--gold);color:var(--ink)}
.progress li.done{border-top-color:var(--good)}
.progress li.done b{background:var(--good);color:var(--panel)}

/* status, said once, in one place */
.status{display:inline-block;padding:5px 11px;border-radius:999px;font-size:13px;font-weight:bold}
.status.open{background:var(--watch-bg);color:var(--watch)}
.status.clear{background:var(--good-bg);color:var(--good)}
.matter-header h2{margin-bottom:10px}
.matter-header small{display:block;margin-top:10px}

/* one card per thing to do */
section{padding:24px 26px}
section h2+p{margin-top:0;color:var(--ink-2);line-height:1.55;max-width:70ch}
.issue{border-radius:8px}
.issue>summary{font-size:15px}
.supporting>summary{color:var(--ink-2)}

/* the switch is not part of the job, so it sits quietly at the end */
.viewswitch{margin:26px 0 8px;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.viewswitch small{flex:1;min-width:220px}

@media(max-width:760px){.progress{display:block}.progress li{margin:8px 0}section{padding:18px}}

/* an item you have to act on: the picture and the box, then everything else */
.issue>summary{margin-bottom:6px}
.issue p{margin:.35rem 0;font-size:14px}
.issue label{margin:10px 0 4px}
.issue button{margin:6px 8px 0 0}

.inkmark{margin-left:10px;padding:2px 8px;border-radius:999px;background:var(--watch-bg);color:var(--watch);font-size:11px;font-weight:bold;letter-spacing:.4px;text-transform:uppercase;vertical-align:middle}

/* a result shown beside the thing you acted on */
.note{margin:.5rem 0;padding:.5rem .7rem;border-radius:7px;font-size:14px}
.note.ok{background:var(--good-bg);color:var(--good)}
.note.bad{background:var(--bad-bg);color:var(--bad);font-weight:bold}

/* the status line follows you down a long screen */
#message{position:sticky;top:0;z-index:5;background:var(--ground);padding:10px 2px;margin:0 0 4px}
#message:empty{display:none}

/* an item you have answered: still there, still changeable, visibly done */
.issue.done{border-left-color:var(--good);background:var(--good-bg)}
.issue.done>summary{color:var(--good)}
.issue.done>summary small{font-weight:normal;color:var(--good)}
.tickmark{margin-left:10px;padding:2px 8px;border-radius:999px;background:var(--good-bg);color:var(--good);font-size:11px;font-weight:bold;letter-spacing:.4px;text-transform:uppercase;vertical-align:middle}

/* A handwritten or scanned answer: its section of the page, highlighted, beside the reading. */
.ink-side{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:.8rem;align-items:start}
.ink-context{margin:0;cursor:zoom-in;outline-offset:2px}
.ink-context canvas{width:100%;height:auto;max-height:220px;object-fit:contain}
.ink-context figcaption{font-size:.75rem;color:var(--watch);margin-top:.2rem}
.ink-context.zoomed{grid-column:1 / -1;cursor:zoom-out}
.ink-context.zoomed canvas{max-height:none}
.ink-said{min-width:0}
@media (max-width:700px){.ink-side{grid-template-columns:1fr}}
.signed-back ul{list-style:none;padding-left:0}
.pack-tracker table{width:100%;border-collapse:collapse;margin:.5rem 0;font-size:14px}
.pack-tracker th,.pack-tracker td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.pack-tracker td button{padding:4px 10px;font-size:13px}

/* board finish: same type scale, eyebrows, cards and tabs as the Intelligence Board */
body{background:var(--ground);color:var(--ink);font-size:15px;line-height:1.5}
header{padding:14px 6%;border-bottom:3px solid var(--gold)}
header b{font-size:20px;font-weight:600;letter-spacing:-.01em}
header span{font-size:13px;color:#BDC5CD}
header small{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
h1{font-weight:600;letter-spacing:-.02em;font-size:38px}
h2{font-weight:600;letter-spacing:-.01em;font-size:20px}
h3{font-weight:600}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.intro{color:var(--ink-2)}
section,.supporting{border-radius:var(--r);box-shadow:var(--shadow)}
.steps li,.progress li{border-radius:var(--r)}
.progress li.now{border-top-color:var(--redsand)}
.progress li.now b{background:var(--redsand);color:#FFFFFF}
.progress li small,.muted,small,dt{color:var(--ink-3)}
button,.upload input::file-selector-button{background:var(--panel);color:var(--ink);border-color:var(--line);border-radius:8px;font-weight:600;font-size:14px}
button:hover{border-color:var(--ink-3)}
input:not([type=checkbox]),select,textarea{background:var(--panel);color:var(--ink);border-radius:8px}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.badge,.status,.inkmark,.tickmark{font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.badge{background:var(--ocean-wash);color:var(--ocean)}
.issue{border-left-color:var(--sunset)}
.status.open,.inkmark{border:1px solid var(--watch-line)}
.status.clear,.tickmark{border:1px solid var(--good-line)}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
td.n,th.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--ocean-2)}
#message{color:var(--watch)}
@media(max-width:650px){h1{font-size:30px}}
.issue{background:var(--panel-2)}
.issue.done{background:var(--good-bg)}
.ink{background:var(--panel-2);border-left-color:var(--sunset)}
.pack-originals{margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.pack-originals h3{margin:0 0 6px;font-size:15px}
.pack-originals label{font-weight:500}

/* Element black and gold, as on the Intelligence Board */
body{background:var(--ground) radial-gradient(1200px 600px at 8% -10%,rgba(201,169,97,.07),transparent 60%) fixed}
header{background:var(--mast);border-bottom:1px solid rgba(201,169,97,.35);gap:14px;padding:14px 3%}
header .brandlogo{width:44px;height:44px;display:block}
header .brandtxt b{display:block;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--mast-ink)}
header .brandtxt span{display:block;font-size:12px;color:#BDC5CD}
h1,h2{font-family:var(--serif)}
button.primary,#download-pack{background:var(--gold);border-color:var(--gold);color:#0C1219}
button.primary:hover{background:var(--ocean-2)}
.progress li.now b{color:#0C1219}
.badge{color:var(--gold)}
.ink canvas,.ink-context canvas,.source-image{background:#FFFFFF}
#message{background:var(--ground)}
/* paperwork check */
.fc-key{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 6px}
.fc-dot{display:inline-flex;align-items:center;gap:7px;font-size:13px}
.fc-dot::before{content:"";width:11px;height:11px;border-radius:50%;display:inline-block;flex:0 0 auto}
.fc-dot.red::before{background:#E5484D}.fc-dot.amber::before{background:#F5A524}.fc-dot.green::before{background:#46A758}
summary .fc-dot{margin-right:8px;vertical-align:middle}
.fc-doc{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.fc-doc h3{margin:0 0 6px;font-size:15px;overflow-wrap:anywhere}
.fc-tally{display:flex;gap:8px;margin:0 0 8px}
.fc-count{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line)}
.fc-count.red{color:#FF8A8D;border-color:#5B2A23;background:#2B1512}.fc-count.amber{color:#FED141;border-color:#584717;background:#2A2210}.fc-count.green{color:#A3D9A5;border-color:#33452F;background:#18211A}
.fc-item{border-left:4px solid var(--line);background:var(--panel-2);border-radius:8px;padding:10px 14px;margin:8px 0}
.fc-item.red{border-left-color:#E5484D}.fc-item.amber{border-left-color:#F5A524}
.fc-item p{margin:.35rem 0;font-size:13px;color:var(--ink-2)}
.fc-item small{display:block;margin-top:6px}
.fc-greens ul{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--ink-2)}
.fc-word{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;margin-right:10px}
.fc-word.red{color:#FF8A8D}.fc-word.amber{color:#FED141}

/* tabs: one job per screen */
nav.tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0 0 18px}
nav.tabs .tab{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);cursor:pointer}
nav.tabs .tab span{font-weight:600;font-size:15px}
nav.tabs .tab small{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase}
nav.tabs .tab.on{border-color:var(--gold);box-shadow:inset 0 -3px 0 var(--gold)}
nav.tabs .tab.bad small{color:#FF8A8D}
nav.tabs .tab.warn small{color:var(--gold)}
/* paperwork lines: the thing, then why, on one tidy line */
.fc-item summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;list-style-position:inside}
.fc-item summary b{font-weight:600}
.fc-msg{flex-basis:100%;padding-left:62px;font-size:13px;color:var(--ink-3);font-weight:400}
.fc-word{min-width:48px}
section{padding:22px 24px}
.issue{padding:12px 14px}
.issue{margin:8px 0}
.issue:not([open]){padding:11px 14px}
.issue>summary{margin:0}
.issue[open]>summary{margin-bottom:8px}
.fc-item:not([open]){padding:10px 14px}
.issue .elsewhere{color:var(--gold);font-size:13px;margin:6px 0 2px}
/* Usability review, 27 Sep 2026 */
.nextstep{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:rgba(201,169,97,.08);border:1px solid rgba(201,169,97,.45);border-radius:10px;padding:12px 16px;margin:0 0 12px;color:var(--ink);font-size:15px}
.nextstep button{background:var(--gold);color:#0A0A0B;border-color:var(--gold);white-space:nowrap}
.fc-item summary{cursor:pointer}
.fc-show{margin-left:auto;font-size:12px;color:var(--gold);border:1px solid rgba(201,169,97,.5);border-radius:999px;padding:1px 10px}
.fc-item[open] .fc-show{visibility:hidden}
.wholine{margin:0 0 10px;font-size:14px}
button.linkish{background:none;border:none;color:var(--gold);text-decoration:underline;padding:0 4px;font-weight:600;cursor:pointer}
.upload.dropping{border-color:var(--gold)!important;background:rgba(201,169,97,.08)}
.steps li{pointer-events:none;background:transparent!important;border:none!important;box-shadow:none!important;padding-left:0!important;color:var(--ink-2)}

/* Light scheme (Aaron, 27 Sep 2026: "flip colour scheme to make easy"). Dark text on a warm white
   page is easier to read for long forms; the black header with the gold EA mark stays as the brand
   bar. Gold is darkened wherever it is text so it still reads on white (contrast 5:1 or better). */
:root{color-scheme:light;
--ground:#F6F3EC;--panel:#FFFFFF;--panel-2:#FBF9F4;--panel-3:#F1ECE1;--line:#DCD4C4;--line-soft:#ECE6DA;
--ink:#1A1A1D;--ink-2:#45413A;--ink-3:#6B665D;--ocean:#86672A;--ocean-2:#A07C33;--ocean-wash:#F5EEDD;
--gold:#86672A;--sunset:#C9A961;--redsand:#86672A;--mast:#0A0A0B;--mast-ink:#F3EEE3;
--good:#2E6B39;--good-bg:#EAF4EA;--good-line:#B7D5BB;--watch:#8A5A00;--watch-bg:#FFF6DC;--watch-line:#E6CC86;
--bad:#B42318;--bad-bg:#FDEDEA;--bad-line:#F0B9B2;
--shadow:0 1px 2px rgba(26,26,29,.06),0 8px 24px -16px rgba(26,26,29,.25);--focus:#86672A}
body{background:var(--ground);color:var(--ink)}
header{background:#0A0A0B;color:#F3EEE3;border-bottom:1px solid #C9A961}
header b,header .brandtxt b{color:#F3EEE3}header small{color:#C9A961}
button.primary,#download-pack,.nextstep button{background:#86672A;border-color:#86672A;color:#FFFFFF}
button:not(.tab):not(.linkish):hover{border-color:#86672A}
.fc-count.red{color:#B42318;border-color:#F0B9B2;background:#FDEDEA}.fc-count.amber{color:#8A5A00;border-color:#E6CC86;background:#FFF6DC}.fc-count.green{color:#2E6B39;border-color:#B7D5BB;background:#EAF4EA}
.fc-word.red,nav.tabs .tab.bad small{color:#B42318}.fc-word.amber,nav.tabs .tab.warn small{color:#8A5A00}
.fc-item.red{border-left-color:#D92D20}.fc-item.amber{border-left-color:#E0A21B}
.nextstep{background:#FBF4E2;border-color:#D9C18A;color:#1A1A1D}
.fc-show{color:#86672A;border-color:#C9A961}
.upload.dropping{background:#FBF4E2}
.ink canvas,.ink-context canvas,.source-image{border:1px solid var(--line)}
#message{color:#6B4A00}
/* Beta website only (the office PC has no banner and no tick). */
.beta-banner{background:#FFF6DC;border-bottom:1px solid #E6CC86;color:#1A1A1D;padding:10px 20px;font-size:14px;text-align:center}
.beta-banner a{color:#86672A;font-weight:600;margin-left:8px}
label.beta-agree{display:flex;gap:10px;align-items:center;font-weight:600;margin:0 0 12px;padding:10px 12px;background:#FFF6DC;border:1px solid #E6CC86;border-radius:8px}