Spaces:
Running
Running
| /* Layout: archival workstation. App bar, interview header with status chips, tabbed work area. */ | |
| :root{ | |
| --bg:#EEF0EC; --panel:#F9FAF7; --ink:#18212B; --muted:#56616B; --line:#D3D8D1; | |
| --accent:#275C8C; --accent-soft:#DCE7F1; | |
| --flag:#9A5B00; --flag-soft:#F6E9D2; | |
| --good:#2F6B3F; --good-soft:#DDEDE0; --bad:#A3362A; --bad-soft:#F5DEDA; --neutral-soft:#E6E8E4; | |
| --hl:#FFF0B8; | |
| --f-display:"Newsreader", Georgia, "Times New Roman", serif; | |
| --f-body:"IBM Plex Sans", "Segoe UI", Arial, sans-serif; | |
| --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; | |
| color-scheme:light; | |
| } | |
| @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ | |
| --bg:#12171C; --panel:#1A2128; --ink:#E6EAEC; --muted:#9BA6AE; --line:#2E3842; | |
| --accent:#8DB8E0; --accent-soft:#1F3347; --flag:#E2A54C; --flag-soft:#3A2D18; | |
| --good:#7FC28F; --good-soft:#1D3324; --bad:#EE8F82; --bad-soft:#3D2420; --neutral-soft:#262E36; --hl:#5A4A12; color-scheme:dark}} | |
| :root[data-theme="dark"]{ | |
| --bg:#12171C; --panel:#1A2128; --ink:#E6EAEC; --muted:#9BA6AE; --line:#2E3842; | |
| --accent:#8DB8E0; --accent-soft:#1F3347; --flag:#E2A54C; --flag-soft:#3A2D18; | |
| --good:#7FC28F; --good-soft:#1D3324; --bad:#EE8F82; --bad-soft:#3D2420; --neutral-soft:#262E36; --hl:#5A4A12; color-scheme:dark} | |
| *{box-sizing:border-box} | |
| [hidden]{display:none} | |
| html,body{margin:0} | |
| body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--f-body)} | |
| .wrap{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:0 48px} | |
| h1,h2,h3{font-family:var(--f-display);font-weight:600;text-wrap:balance;margin:0;line-height:1.2} | |
| h1{font-size:clamp(26px,3.4vw,36px)} h2{font-size:22px} h3{font-size:17px} | |
| p{margin:0} | |
| .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums} | |
| .muted{color:var(--muted)} .small{font-size:13px} | |
| .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} | |
| .label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600} | |
| button,select{font:inherit;color:inherit;cursor:pointer} | |
| button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,label.btn:focus-within{outline:2px solid var(--accent);outline-offset:2px} | |
| a{color:var(--accent)} | |
| .bar{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)} | |
| .bar .in{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap} | |
| .mark{font-family:var(--f-display);font-size:22px;font-weight:600;letter-spacing:-.01em} | |
| .picker select{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;max-width:min(360px,60vw)} | |
| .chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:500;background:var(--neutral-soft);color:var(--ink);white-space:nowrap;line-height:1.5} | |
| .chip.accent{background:var(--accent-soft);color:var(--accent)} | |
| .chip.flag{background:var(--flag-soft);color:var(--flag)} | |
| .chip.good{background:var(--good-soft);color:var(--good)} | |
| .chip.bad{background:var(--bad-soft);color:var(--bad)} | |
| .seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:3px;background:var(--panel);margin-left:auto} | |
| .seg button{border:0;background:transparent;padding:6px 12px;border-radius:7px;font-weight:500;color:var(--muted)} | |
| .seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel)} | |
| .notice{margin-top:18px;border:1px solid var(--line);border-left:4px solid var(--flag);background:var(--panel);padding:10px 14px;border-radius:8px;font-size:13.5px} | |
| .head{margin-top:22px;display:grid;gap:10px} | |
| .chips{display:flex;flex-wrap:wrap;gap:8px} | |
| .tabs{display:flex;gap:4px;margin-top:22px;border-bottom:1px solid var(--line);overflow-x:auto} | |
| .tabs button{border:0;background:none;padding:10px 14px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap} | |
| .tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)} | |
| .pane{padding-top:22px} | |
| .panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0} | |
| .grid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px} | |
| @media (max-width:860px){.grid2{grid-template-columns:minmax(0,1fr)}} | |
| .stack{display:grid;gap:14px;align-content:start;min-width:0} | |
| .row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} | |
| .summary{font-size:16.5px;line-height:1.65;max-width:68ch} | |
| .chapters{list-style:none;margin:0;padding:0;display:grid} | |
| .chapters li,.frow{display:grid;grid-template-columns:86px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--line)} | |
| .frow{font-size:13.5px;padding:8px 0} | |
| .tlink{border:0;background:none;padding:0;color:var(--accent);font-family:var(--f-mono);font-size:13px;text-align:left} | |
| .tlink:hover{text-decoration:underline} | |
| .langbar{display:flex;height:14px;border-radius:4px;overflow:hidden;margin:8px 0 6px} | |
| .langbar span{display:block;height:100%} | |
| .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px} | |
| .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px} | |
| table{border-collapse:collapse;width:100%;font-size:13.5px} | |
| th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--line)} | |
| td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top} | |
| .tablewrap{overflow-x:auto} | |
| .tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px} | |
| input[type=search],input[type=text],input[type=password],textarea{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0} | |
| input[type=search]{flex:1 1 220px} | |
| .turn{display:grid;grid-template-columns:86px 36px minmax(0,1fr);gap:10px;padding:12px 6px;border-top:1px solid var(--line);border-radius:6px;scroll-margin-top:90px} | |
| .turn.q .txt{color:var(--muted)} | |
| .turn.focus{background:var(--accent-soft)} | |
| .role{font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--muted);padding-top:2px} | |
| .txt{max-width:75ch;min-width:0} | |
| .pl{background:none;border:0;padding:0;border-bottom:2px solid var(--accent);color:inherit;font:inherit;line-height:inherit} | |
| .pl.fix{border-bottom-color:var(--flag)} | |
| mark{background:var(--hl);color:inherit;border-radius:3px;padding:0 2px} | |
| .tr{margin-top:6px;font-size:14px;color:var(--muted)} | |
| .tr b{font-weight:600;color:var(--flag)} | |
| .mapbox{overflow-x:auto} | |
| svg text{font-family:var(--f-body)} | |
| .act{font-size:12px} | |
| .hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px 0;border-top:1px solid var(--line)} | |
| .hname{font-weight:600} | |
| .conf{display:inline-block;width:64px;height:6px;border-radius:3px;background:var(--neutral-soft);vertical-align:middle;overflow:hidden;margin-right:6px} | |
| .conf i{display:block;height:100%;background:var(--accent)} | |
| .quote{font-family:var(--f-display);font-style:italic;font-size:15.5px;margin-top:6px} | |
| .btns{display:flex;gap:6px;align-items:start;flex-wrap:wrap;justify-content:end} | |
| .btn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 11px;font-size:13px;font-weight:500;cursor:pointer;display:inline-block} | |
| .btn:hover{border-color:var(--accent)} | |
| .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--panel)} | |
| .btn[disabled]{opacity:.5;cursor:not-allowed} | |
| .log{font-size:13px;display:grid;gap:6px;max-height:320px;overflow:auto} | |
| .log div{border-top:1px solid var(--line);padding-top:6px} | |
| .editbox{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap} | |
| .editbox input{flex:1 1 240px} | |
| .step{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line)} | |
| .step .n{font-family:var(--f-mono);color:var(--muted)} | |
| .step > .chip{max-width:22ch;white-space:normal;text-align:center} | |
| .step .mono-detail{margin-top:4px;overflow-wrap:anywhere} | |
| .live{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;margin-top:18px} | |
| @media (max-width:900px){.live{grid-template-columns:minmax(0,1fr)}} | |
| textarea{width:100%;min-height:300px;resize:vertical;font-family:var(--f-mono);font-size:13px;line-height:1.5} | |
| .donor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} | |
| @media (max-width:520px){.donor{grid-template-columns:minmax(0,1fr)}} | |
| .donor label,.donor-one{display:grid;gap:4px;font-size:12.5px;color:var(--muted)} | |
| .how{margin:10px 0 14px;padding-left:20px;display:grid;gap:6px} | |
| .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .9s linear infinite;vertical-align:-2px} | |
| @keyframes sp{to{transform:rotate(360deg)}} | |
| @media (prefers-reduced-motion: reduce){.spin{animation:none}} | |
| .err{color:var(--bad)} | |
| /* intake queue */ | |
| .qrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start} | |
| .qrow h2{font-size:20px} | |
| .qmeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} | |
| .qsum{margin-top:10px;font-size:14px;color:var(--muted);max-width:80ch} | |
| .qgroup{display:grid;gap:12px} | |
| .qgroup>.label{margin-top:8px} | |
| @media (max-width:640px){.qrow{grid-template-columns:minmax(0,1fr)}} | |
| .figs{display:flex;flex-wrap:wrap;gap:28px} | |
| .fig b{display:block;font-family:var(--f-display);font-size:34px;line-height:1.1} | |
| .fig span{font-size:12.5px;color:var(--muted)} | |
| .hlist{list-style:none;margin:0;padding:0} | |
| .hlist li{padding:9px 0;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap;align-items:baseline} | |