/* ========================================================================== Infection Prevention & Control Platform Shared design system. Link this FIRST on every page. ========================================================================== */ :root{ /* ground & surfaces */ --bg:#050C0E; --bg-2:#081214; --panel:#0C1618; --panel-2:#122225; --panel-3:#172B2F; --line:#1C2E31; --line-2:#294044; --line-3:#37565B; /* ink */ --ink:#E8F2F2; --ink-2:#A6BDBF; --ink-3:#7A9295; --ink-4:#57696C; /* brand */ --accent:#24D3A6; --accent-2:#65E9C6; --accent-dim:#118F71; --accent-soft:rgba(36,211,166,.12); --accent-line:rgba(36,211,166,.35); --blue:#5CA8FF; --blue-soft:rgba(92,168,255,.12); --violet:#A98BFA; --violet-soft:rgba(169,139,250,.12); /* semantic risk zones — these are IPC colour zones, not decoration */ --z-green:#2FBE8C; --z-green-soft:rgba(47,190,140,.14); --z-amber:#E6AC2E; --z-amber-soft:rgba(230,172,46,.14); --z-red:#F2705A; --z-red-soft:rgba(242,112,90,.14); --z-black:#8A8683; --z-black-soft:rgba(138,134,131,.16); --r:6px; --r-lg:10px; --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 2px 6px rgba(0,0,0,.45), 0 18px 40px -26px rgba(0,0,0,1); --sh-3:0 30px 70px -30px rgba(0,0,0,1); --side-w:246px; --side-foot:#0A1315; --f-display:"Archivo","Inter",system-ui,sans-serif; --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,monospace; } /* ========================================================================== DAY MODE The same design in daylight: the risk-zone colours keep their meaning and their relative weight, because a red zone must read as red on any screen. Set data-theme="light" on ; the platform remembers the choice. ========================================================================== */ :root[data-theme="light"]{ --bg:#F2F6F6; --bg-2:#E8EFEF; --panel:#FFFFFF; --panel-2:#F3F7F7; --panel-3:#E9F0F0; --line:#D9E3E3; --line-2:#C3D2D2; --line-3:#A9BDBD; --ink:#0E1B1D; --ink-2:#33474A; --ink-3:#5B6F72; --ink-4:#7C8E91; --accent:#0E9E7B; --accent-2:#0B7A5E; --accent-dim:#7FD9C1; --accent-soft:rgba(14,158,123,.10); --accent-line:rgba(14,158,123,.32); --blue:#1F6FD0; --blue-soft:rgba(31,111,208,.10); --violet:#6E4BD8; --violet-soft:rgba(110,75,216,.10); --z-green:#0F8A5F; --z-green-soft:rgba(15,138,95,.13); --z-amber:#9A6B00; --z-amber-soft:rgba(154,107,0,.14); --z-red:#C0392B; --z-red-soft:rgba(192,57,43,.12); --z-black:#5A5A57; --z-black-soft:rgba(90,90,87,.14); --sh-1:0 1px 2px rgba(16,40,44,.08); --sh-2:0 1px 3px rgba(16,40,44,.10), 0 12px 28px -20px rgba(16,40,44,.45); --sh-3:0 24px 60px -30px rgba(16,40,44,.40); --side-foot:#FFFFFF; color-scheme:light; } :root[data-theme="light"] body{background:var(--bg)} *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.25;letter-spacing:-.015em;font-weight:700;text-wrap:balance} p{margin:0} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} button{cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} ::selection{background:var(--accent-soft)} .mono,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums} .eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);font-weight:600} /* scrollbars */ *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;border:2px solid var(--bg)} *::-webkit-scrollbar-thumb:hover{background:var(--line-3)} /* ========================================================== app shell */ .app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh} /* the portal hub and the login screen carry no sidebar — one full-width column */ .app.solo{grid-template-columns:1fr} .side{ background:linear-gradient(180deg,var(--panel) 0%,var(--side-foot) 100%); border-inline-end:1px solid var(--line); position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow-y:auto } .side .brand{padding:20px 18px 16px;border-bottom:1px solid var(--line)} .side .brand a{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none} /* The mark is a linear form, so it is drawn at full size in the accent colour rather than shrunk inside a coloured plaque — a gradient tile with a glyph in it is the generic solution the mark exists to replace. */ .mark{width:36px;height:36px;flex:none;display:grid;place-items:center; color:var(--accent);background:none;box-shadow:none;border-radius:0} .mark svg{width:36px;height:36px;display:block} .loginbox .mark,.loginbox .mark svg{width:46px;height:46px} .brand .wm{display:flex;flex-direction:column;gap:1px;min-width:0} .brand .wm b{font-family:var(--f-display);font-size:15.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap} .brand .wm span{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);font-weight:600} .side .facility{padding:11px 18px;border-bottom:1px solid var(--line);font-size:11px;color:var(--ink-3);line-height:1.5} .navsec{padding:14px 10px 0} .navsec>.eyebrow{padding:0 10px 8px;display:block} .nav-a{display:flex;align-items:center;gap:10px;width:100%;text-align:start;background:none;border:0; color:var(--ink-2);padding:8px 10px;border-radius:var(--r);font-size:13.5px;font-weight:500; text-decoration:none;position:relative;transition:background .12s,color .12s} .nav-a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none} .nav-a.on{background:var(--accent-soft);color:var(--accent-2);font-weight:600} .nav-a.on::before{content:"";position:absolute;inset-inline-start:-10px;top:7px;bottom:7px;width:3px; background:var(--accent);border-radius:0 3px 3px 0} .nav-a svg{width:16px;height:16px;flex:none;opacity:.9;fill:currentColor} .nav-a .cnt{margin-inline-start:auto;font-family:var(--f-mono);font-size:10.5px;font-weight:600; padding:1px 7px;border-radius:9px;background:var(--z-red-soft);color:var(--z-red)} .side .foot{margin-top:auto;padding:14px;border-top:1px solid var(--line)} .who{display:flex;align-items:center;gap:10px;margin-bottom:10px} .who .av{width:30px;height:30px;border-radius:50%;background:var(--panel-3);display:grid;place-items:center; font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--accent-2);flex:none} .who .nm{min-width:0} .who .nm b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .who .nm span{display:block;font-size:10.5px;color:var(--ink-4)} main.main{min-width:0;display:flex;flex-direction:column} .topbar{position:sticky;top:0;z-index:30;padding:15px 28px;display:flex;align-items:center;gap:16px; flex-wrap:wrap;border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px)} .topbar h1{font-size:20px} .topbar .sub{font-size:12.5px;color:var(--ink-3);margin-top:2px} .grow{margin-inline-start:auto} .page{padding:26px 28px 90px;width:100%;max-width:1520px} @media(max-width:900px){ .app{grid-template-columns:1fr} .side{position:static;height:auto} .page{padding:18px 14px 60px}.topbar{padding:13px 14px} } /* ============================================================ controls */ .btn{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#032019;border:0; padding:8px 15px;border-radius:var(--r);font-weight:600;font-size:13px;transition:filter .12s} .btn:hover{filter:brightness(1.08)} .btn:disabled{opacity:.4;cursor:not-allowed;filter:none} .btn.ghost{background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line-2)} .btn.ghost:hover{background:var(--panel-3);color:var(--ink)} .btn.danger{background:var(--z-red);color:#2A0B06} .btn.sm{padding:5px 10px;font-size:12px;font-weight:500;border-radius:5px} .btn svg{width:14px;height:14px;fill:currentColor} .inp,select.inp,textarea.inp{background:var(--panel);border:1px solid var(--line-2);color:var(--ink); padding:8px 11px;border-radius:var(--r);width:100%;transition:border-color .12s} .inp:hover{border-color:var(--line-3)} .inp:focus{border-color:var(--accent);outline:none} textarea.inp{resize:vertical;line-height:1.6} .fld{display:flex;flex-direction:column;gap:5px;min-width:0} .fld label{font-size:11px;color:var(--ink-3);font-weight:500;letter-spacing:.01em} .fld .hint{font-size:10.5px;color:var(--ink-4)} .row{display:grid;gap:12px} .row.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .row.c3{grid-template-columns:repeat(3,minmax(0,1fr))} .row.c4{grid-template-columns:repeat(4,minmax(0,1fr))} .row.auto{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} @media(max-width:1200px){.row.c4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:860px){.row.c2,.row.c3,.row.c4{grid-template-columns:1fr}} /* =============================================================== cards */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)} .card>header{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap} .card>header h3{font-size:14.5px;font-weight:700} .card>header .hint{font-size:11.5px;color:var(--ink-3)} .card>.body{padding:18px} .card>.body.flush{padding:0} .grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:1250px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:860px){.g2,.g3,.g4{grid-template-columns:1fr}} /* portal hub cards */ .hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .hubcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg); padding:20px;text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:border-color .15s,transform .15s} .hubcard:hover{border-color:var(--line-3);transform:translateY(-2px);text-decoration:none} .hubcard .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:14px} .hubcard .ic svg{width:19px;height:19px;fill:var(--accent-2)} .hubcard h3{font-size:15.5px;margin-bottom:6px} .hubcard p{font-size:12.5px;color:var(--ink-3);line-height:1.6} .hubcard .stat{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;gap:16px;font-size:11.5px;color:var(--ink-4)} .hubcard .stat b{font-family:var(--f-mono);color:var(--ink-2);font-weight:600} .hubcard.locked{opacity:.45;pointer-events:none} /* ============================================================ KPI tile */ .tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 17px; display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden} .tile::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--zc,var(--line-2))} .tile .lb{font-size:11px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:7px} .tile .vl{display:flex;align-items:baseline;gap:8px} .tile .vl b{font-family:var(--f-mono);font-size:30px;font-weight:600;line-height:1;color:var(--zc,var(--ink))} .tile .vl i{font-style:normal;font-size:11px;color:var(--ink-4)} .tile .mt{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-4);margin-top:auto} .tile svg.spark{width:100%;height:36px;display:block} .z-green{--zc:var(--z-green)} .z-amber{--zc:var(--z-amber)} .z-red{--zc:var(--z-red)} .z-black{--zc:var(--z-black)} .z-none{--zc:var(--line-2)} /* ============================================================== pills */ .pill{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:2.5px 9px; border-radius:20px;background:var(--panel-3);color:var(--ink-2);white-space:nowrap} .pill.green{background:var(--z-green-soft);color:var(--z-green)} .pill.amber{background:var(--z-amber-soft);color:var(--z-amber)} .pill.red{background:var(--z-red-soft);color:var(--z-red)} .pill.black{background:var(--z-black-soft);color:var(--z-black)} .pill.blue{background:var(--blue-soft);color:var(--blue)} .pill.violet{background:var(--violet-soft);color:var(--violet)} .pill.accent{background:var(--accent-soft);color:var(--accent-2)} /* ============================================================= tables */ .tw{overflow-x:auto;border-radius:var(--r-lg)} table.tb{border-collapse:collapse;width:100%;font-size:13px} table.tb th,table.tb td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle} table.tb thead th{background:var(--panel-2);font-size:11px;font-weight:600;color:var(--ink-3); letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;position:sticky;top:0;z-index:2} table.tb tbody tr:hover{background:var(--panel-2)} table.tb tbody tr:last-child td{border-bottom:0} table.tb td.num,table.tb th.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:end} table.tb input.cell{width:96px;background:var(--panel-2);border:1px solid var(--line-2);padding:5px 8px; border-radius:5px;text-align:end;font-family:var(--f-mono);font-variant-numeric:tabular-nums} table.tb input.cell:focus{border-color:var(--accent);outline:none;background:var(--panel-3)} /* ============================================================== meter */ .meter{height:6px;background:var(--panel-3);border-radius:4px;overflow:hidden;flex:1;min-width:70px} .meter i{display:block;height:100%;background:var(--mc,var(--accent));border-radius:4px;transition:width .3s} .mrow{display:flex;align-items:center;gap:10px} .mrow b{font-family:var(--f-mono);font-size:12px;min-width:48px;text-align:end} /* =============================================================== tabs */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto} .tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-3); padding:10px 15px;font-size:13px;font-weight:500;white-space:nowrap} .tabs button:hover{color:var(--ink-2)} .tabs button.on{color:var(--accent-2);border-bottom-color:var(--accent);font-weight:600} /* ========================================================= list rows */ .lrow{display:flex;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);align-items:flex-start} .lrow:last-child{border-bottom:0} .lrow .dot{width:7px;height:7px;border-radius:50%;margin-top:7px;flex:none;background:var(--ink-4)} .lrow.s-red .dot{background:var(--z-red)} .lrow.s-amber .dot{background:var(--z-amber)} .lrow.s-green .dot{background:var(--z-green)} .lrow.s-blue .dot{background:var(--blue)} .lrow b{display:block;font-size:13px;font-weight:600} .lrow p{font-size:11.8px;color:var(--ink-3);margin-top:3px;line-height:1.55} .lrow .rt{margin-inline-start:auto;flex:none;display:flex;gap:7px;align-items:center} .empty{padding:46px 20px;text-align:center;color:var(--ink-4);font-size:13px} .empty svg{width:34px;height:34px;fill:var(--line-3);margin-bottom:10px} /* ============================================================== forms */ .chk{display:flex;align-items:flex-start;gap:14px;padding:11px 18px;border-bottom:1px solid var(--line)} .chk .t{flex:1;font-size:13px;color:var(--ink-2);line-height:1.55} .chk .k{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-4);flex:none;width:30px;padding-top:2px} .tri{display:flex;gap:4px;flex:none} .tri button{border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink-3); border-radius:5px;padding:4px 11px;font-size:11.5px;font-weight:600} .tri button:hover{border-color:var(--line-3)} .tri button.on[data-v="1"]{background:var(--z-green);border-color:var(--z-green);color:#052117} .tri button.on[data-v="0"]{background:var(--z-red);border-color:var(--z-red);color:#2A0B06} .tri button.on[data-v="na"]{background:var(--ink-4);border-color:var(--ink-4);color:var(--panel)} /* ============================================================= modal */ .modal{position:fixed;inset:0;background:rgba(2,8,9,.72);display:grid;place-items:center;z-index:200;padding:22px} .modal .box{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg); max-width:680px;width:100%;max-height:88vh;overflow:auto;box-shadow:var(--sh-3)} .modal .box>header{padding:17px 21px;border-bottom:1px solid var(--line);display:flex;align-items:center} .modal .box>.body{padding:20px 21px;display:grid;gap:14px} .modal .box>footer{padding:15px 21px;border-top:1px solid var(--line);display:flex;gap:9px} .toast{position:fixed;bottom:24px;inset-inline-start:24px;background:var(--panel-3);color:var(--ink); border:1px solid var(--line-3);padding:11px 17px;border-radius:var(--r);font-size:13px; z-index:300;box-shadow:var(--sh-3)} /* ============================================================== login */ .loginwrap{min-height:100vh;display:grid;place-items:center;padding:24px; background:radial-gradient(1100px 620px at 22% -12%,rgba(36,211,166,.10),transparent 62%),var(--bg)} .loginbox{width:100%;max-width:392px} .loginbox .card{padding:30px} .loginbox .brand{display:flex;align-items:center;gap:12px;margin-bottom:6px} /* ====================================================== printed forms */ /* Rebuilt from the hospital's own approved layout: bilingual letterhead, the facility's mark, document code and page footer. */ .doc{background:#fff;color:#111;max-width:900px;margin:0 auto;padding:26px 30px 34px; font-family:"Inter",Arial,sans-serif;font-size:12px;line-height:1.5} .doc *{color:inherit} /* The letterhead of their approved forms: the cluster logo, then four centred English lines ending in the owning department. */ .doc .lh{display:flex;align-items:center;gap:18px;padding-bottom:10px; border-bottom:1.5px solid #222;margin-bottom:14px} .doc .lh img{height:74px;width:auto;display:block;flex:none} .doc .lh .en{flex:1;text-align:center;font-size:12px;line-height:1.5;font-weight:700; letter-spacing:.01em;color:#111} .doc .lh .en div:last-child{font-size:11px;letter-spacing:.04em} .doc h2.dt{text-align:center;font-size:15px;font-weight:800;margin:4px 0 2px;letter-spacing:.01em} .doc .dsub{text-align:center;font-size:11px;color:#444;margin-bottom:14px;direction:rtl; font-family:"Noto Kufi Arabic","Segoe UI",sans-serif} .doc table{width:100%;border-collapse:collapse;font-size:11.5px;margin-bottom:12px} .doc table th,.doc table td{border:1px solid #444;padding:6px 8px;text-align:start;vertical-align:top} .doc table th{background:#e9eeee;font-weight:700;font-size:10.5px} .doc h4{font-size:12px;font-weight:800;margin:16px 0 7px;padding-bottom:4px;border-bottom:1px solid #999; text-transform:uppercase;letter-spacing:.03em} .doc .sig{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px} .doc .sig div{border:1px solid #444;padding:8px 10px;font-size:10.5px} .doc .sig b{display:block;font-size:11px;margin-bottom:2px} .doc .sig .ln{margin-top:26px;border-top:1px dotted #777;padding-top:4px;color:#666;font-size:9.5px} .doc .dfoot{margin-top:22px;border-top:1px solid #999;padding-top:7px;font-size:9.5px;color:#555} .doc .dfoot .dist{margin-bottom:5px;line-height:1.6} .doc .dfoot .drow{display:flex;justify-content:space-between;gap:12px;align-items:baseline} .doc .dfoot .code{font-family:"IBM Plex Mono",monospace;font-weight:600;color:#222} .doc .dfoot .pg{white-space:nowrap} /* the bilingual labels the approved forms carry beside each English one */ .doc .ar{font-family:"Noto Kufi Arabic",sans-serif;direction:rtl;unicode-bidi:isolate; font-weight:600;font-size:10px;color:#444;margin-inline-end:4px} .doc p.note{font-size:10.5px;color:#555;margin:0 0 6px} .doc .chartblk{margin-bottom:12px;page-break-inside:avoid;break-inside:avoid} .doc .chartblk b{display:block;font-size:11px;margin-bottom:4px} .doc .chartblk svg{width:100%;height:auto;max-height:150px} /* one printed sheet, letterhead and footer repeated as in the Word form */ .doc.sheet{page-break-after:always;break-after:page;min-height:auto} .doc.sheet:last-child{page-break-after:auto;break-after:auto} @media print{ .side,.topbar,.noprint{display:none!important} .app{display:block}.page{padding:0;max-width:none} body{background:#fff} .doc{max-width:none;padding:0;box-shadow:none} .doc table th{background:#e9eeee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact} @page{size:A4;margin:14mm 12mm} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ========================================================================== REFINEMENT LAYER The bones were right; what was missing was hierarchy. Everything on a page had the same weight, so nothing told the eye what mattered. This layer sets a real type scale, gives cards and tables a rhythm, and lets a KPI tile carry its meaning rather than just a number. ========================================================================== */ :root{ --t-display:26px; /* the page title, once */ --t-title:17px; /* a card, a section */ --t-body:13px; --t-small:12px; --t-micro:10.5px; --gap:18px; --gap-lg:26px; } /* ------------------------------------------------------------- the page */ .topbar{padding:18px 30px 16px;backdrop-filter:blur(8px)} .topbar h1{font-size:var(--t-display);font-weight:800;letter-spacing:-.022em;line-height:1.15} .topbar .sub{font-size:var(--t-small);color:var(--ink-3);margin-top:4px;max-width:78ch;line-height:1.55} .page{padding:22px 30px 40px} /* A heading that separates one group of cards from the next, so a long page reads as sections instead of an undifferentiated stack. */ .section{display:flex;align-items:baseline;gap:12px;margin:var(--gap-lg) 0 12px} .section:first-child{margin-top:0} .section h2{font-size:var(--t-title);font-weight:700;letter-spacing:-.01em} .section .note{font-size:var(--t-small);color:var(--ink-4)} .section::after{content:"";flex:1;height:1px;background:var(--line);margin-inline-start:4px} /* ------------------------------------------------------------------ cards */ .card{border-radius:12px;box-shadow:var(--sh-1);transition:border-color .14s} .card>header{padding:14px 18px 13px;gap:10px} .card>header h3{font-size:14px;font-weight:700;letter-spacing:-.008em} .card>header .hint{font-size:11.5px;color:var(--ink-4);line-height:1.5} .card>.body{padding:18px} .grid{gap:var(--gap)} /* ------------------------------------------------------------------ tiles */ .tile{padding:16px 18px 15px;border-radius:12px;gap:10px; background:linear-gradient(180deg,var(--panel) 0%,var(--panel) 62%,var(--zc-soft,transparent) 320%)} .tile::after{width:2.5px;opacity:.9} .tile .lb{font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:.005em} .tile .vl b{font-size:34px;font-weight:600;letter-spacing:-.02em} .tile .vl i{font-size:11.5px;color:var(--ink-3)} .tile .mt{font-size:11px;line-height:1.5} .z-green{--zc:var(--z-green);--zc-soft:var(--z-green-soft)} .z-amber{--zc:var(--z-amber);--zc-soft:var(--z-amber-soft)} .z-red{--zc:var(--z-red);--zc-soft:var(--z-red-soft)} .z-black{--zc:var(--z-black);--zc-soft:var(--z-black-soft)} .z-none{--zc:var(--line-2);--zc-soft:transparent} /* a tile that leads somewhere should say so */ a.tile{text-decoration:none;color:inherit} a.tile:hover{border-color:var(--line-3);text-decoration:none} /* ----------------------------------------------------------------- tables */ table.tb{font-size:var(--t-body)} table.tb thead th{position:sticky;top:0;z-index:1;background:var(--panel-2); font-size:var(--t-micro);font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-3);padding:9px 14px;border-bottom:1px solid var(--line-2);white-space:nowrap} table.tb tbody tr{transition:background .1s} table.tb tbody tr:hover{background:var(--panel-2)} table.tb td{padding:11px 14px} table.tb tbody tr:last-child td{border-bottom:0} /* numbers line up under each other or they cannot be compared */ table.tb td.num,table.tb th.num{text-align:end;font-family:var(--f-mono);font-variant-numeric:tabular-nums} /* ------------------------------------------------------------- empty state */ .empty{padding:34px 24px;text-align:center;color:var(--ink-4);font-size:var(--t-small);line-height:1.7} .empty b{display:block;color:var(--ink-2);font-size:13.5px;font-weight:600;margin-bottom:5px} /* ------------------------------------------------------------------ input */ .inp{font-size:var(--t-body);padding:9px 11px} .inp:focus{border-color:var(--accent);outline:2px solid var(--accent-soft);outline-offset:0} .fld label{font-size:11px;font-weight:600;color:var(--ink-3)} /* ----------------------------------------------------------------- buttons */ .btn{border-radius:7px;font-weight:600;letter-spacing:.005em} .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .btn.sm{padding:6px 11px} /* -------------------------------------------------------------- navigation */ .side .navsec{margin-bottom:4px} .side .navsec .eyebrow{padding:14px 18px 6px;display:block;font-size:9.5px;letter-spacing:.18em} .nav-a{font-size:12.5px;padding:8px 14px;border-radius:7px;margin:1px 8px} .nav-a.on{font-weight:600} /* a group heading inside one portal's page list */ .side .navgroup{padding:12px 22px 4px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-4);font-weight:700} /* ============================================================= palette */ .pal-wrap{position:fixed;inset:0;z-index:200;background:rgba(2,8,10,.62); display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px; backdrop-filter:blur(3px)} :root[data-theme="light"] .pal-wrap{background:rgba(16,40,44,.38)} .pal{width:min(640px,100%);background:var(--panel);border:1px solid var(--line-2); border-radius:14px;box-shadow:var(--sh-3);overflow:hidden;display:flex;flex-direction:column; max-height:70vh} .pal input{width:100%;border:0;background:none;color:var(--ink);font-size:16px; padding:17px 20px;outline:none;font-family:var(--f-body)} .pal input::placeholder{color:var(--ink-4)} .pal .list{overflow-y:auto;border-top:1px solid var(--line)} .pal .grp{padding:10px 20px 5px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-4);font-weight:700} .pal .it{display:flex;align-items:center;gap:11px;padding:9px 20px;cursor:pointer; color:var(--ink-2);font-size:13px;border:0;background:none;width:100%;text-align:start} .pal .it svg{width:15px;height:15px;fill:var(--ink-4);flex:none} .pal .it .sub{margin-inline-start:auto;font-size:11px;color:var(--ink-4);white-space:nowrap} .pal .it.on,.pal .it:hover{background:var(--accent-soft);color:var(--ink)} .pal .it.on svg{fill:var(--accent-2)} .pal .foot{border-top:1px solid var(--line);padding:8px 20px;font-size:10.5px;color:var(--ink-4); display:flex;gap:16px} .pal kbd{font-family:var(--f-mono);font-size:10px;background:var(--panel-3);border:1px solid var(--line-2); border-radius:4px;padding:1px 5px;color:var(--ink-3)} /* A row of tiles should fill its row. Fixed four-column grids leave a hole whenever the count is not a multiple of four, which reads as unfinished. */ .grid.gfit{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))} @media(max-width:860px){.grid.gfit{grid-template-columns:1fr}} /* ========================================================================== MEASURE On a wide monitor an uncapped page stretches a sentence across two feet of glass and pushes its button a mile from its label. Content is held to a readable measure and the surplus becomes margin, not sprawl. ========================================================================== */ .page{max-width:1180px;margin-inline:auto;width:100%} .topbar{padding-inline:0} .topbar,.main>.topbar{--pad:30px} /* the title must sit on the same line as the cards beneath it */ .main>.topbar{padding-inline-start:max(30px,calc((100% - 1180px)/2 + 30px)); padding-inline-end:max(30px,calc((100% - 1180px)/2 + 30px))} /* a dashboard of many small tiles may run wider than prose */ .page.wide{max-width:1520px} /* ------------------------------------------------------- the work list */ .wl{display:flex;flex-direction:column} .wl a{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center; padding:13px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit; transition:background .1s} .wl a:last-child{border-bottom:0} .wl a:hover{background:var(--panel-2);text-decoration:none} .wl .dot{width:7px;height:7px;border-radius:50%;background:var(--zc,var(--line-2))} .wl .t{min-width:0} .wl .t b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35} .wl .t span{display:block;font-size:11.5px;color:var(--ink-4);line-height:1.55;margin-top:2px; max-width:80ch} .wl .go{font-size:11.5px;color:var(--ink-4);display:flex;align-items:center;gap:5px;white-space:nowrap} .wl a:hover .go{color:var(--accent-2)} /* tighter tiles for a screen whose job is to be scanned, not admired */ .tile.sm{padding:13px 15px 12px;gap:6px} .tile.sm .vl b{font-size:27px} .tile.sm .mt{font-size:10.5px} /* a card whose group carries a severity shows it on its left edge */ .card.z-red,.card.z-amber,.card.z-none{position:relative;overflow:hidden} .card.z-red::before,.card.z-amber::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0; width:2.5px;background:var(--zc)} .card.z-red .wl .dot{background:var(--z-red)} .card.z-amber .wl .dot{background:var(--z-amber)} .card.z-none .wl .dot{background:var(--accent)} .wl .go svg{width:12px;height:12px;fill:currentColor;opacity:.8} /* ========================================================================== THE HOME DASHBOARD Four tiles that are also the tab selector. The number on a tile and the number on its tab are the same count, so the dashboard never disagrees with the list underneath it. ========================================================================== */ .stat{position:relative;text-align:start;cursor:pointer;border:1px solid var(--line); background:var(--panel);border-radius:12px;padding:15px 17px 14px;display:flex; flex-direction:column;gap:9px;transition:border-color .13s,background .13s;font:inherit;color:inherit} .stat:hover{border-color:var(--line-3)} .stat:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .stat .lb{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--ink-3)} .stat .lb i{width:7px;height:7px;border-radius:50%;background:var(--zc);flex:none;font-style:normal} .stat .n{font-family:var(--f-mono);font-size:33px;font-weight:600;line-height:1; letter-spacing:-.02em;color:var(--zc)} .stat .mt{font-size:11px;color:var(--ink-4);line-height:1.5;margin-top:auto} .stat[aria-selected="true"]{border-color:var(--zc);background:var(--panel-2)} .stat[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px; transform:translateX(-50%) rotate(45deg);background:var(--panel-2); border-inline-end:1px solid var(--zc);border-bottom:1px solid var(--zc)} .stat.watch{--zc:var(--accent)} .stat.done{--zc:var(--z-green)} .tabs{display:flex;gap:4px;padding:5px;background:var(--panel-2);border:1px solid var(--line); border-radius:10px;margin:26px 0 14px;flex-wrap:wrap} .tabs button{flex:1;min-width:150px;display:flex;align-items:center;justify-content:center;gap:8px; padding:9px 12px;border:0;background:none;color:var(--ink-3);font:inherit;font-size:12.5px; font-weight:600;border-radius:7px;cursor:pointer;transition:background .12s,color .12s} .tabs button:hover{color:var(--ink)} .tabs button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--sh-1)} .tabs .c{font-family:var(--f-mono);font-size:11px;font-weight:600;min-width:20px;padding:1px 6px; border-radius:20px;background:var(--zc-soft);color:var(--zc)} .tabs button[aria-selected="true"] .c{background:var(--zc);color:var(--bg)} .t-late{--zc:var(--z-red);--zc-soft:var(--z-red-soft)} .t-due{--zc:var(--z-amber);--zc-soft:var(--z-amber-soft)} .t-watch{--zc:var(--accent);--zc-soft:var(--accent-soft)} .t-done{--zc:var(--z-green);--zc-soft:var(--z-green-soft)} /* ========================================================================== THE DIRECTOR'S OVERVIEW Every measure the platform holds, on one screen, grouped the way the department is actually run. ========================================================================== */ .ovsec{margin-bottom:18px} .mx{display:grid;grid-template-columns:1fr auto auto auto auto;gap:0;align-items:stretch} .mx .mrow{display:contents} .mx a,.mx .mcell{border-bottom:1px solid var(--line);padding:12px 14px;display:flex;align-items:center; font-size:12.5px;color:var(--ink);text-decoration:none;background:transparent;transition:background .12s} .mx .mrow:last-child a,.mx .mrow:last-child .mcell{border-bottom:0} .mx .mrow:hover a,.mx .mrow:hover .mcell{background:var(--panel-2)} .mx .m-name{flex-direction:column;align-items:flex-start;gap:3px;position:relative;padding-inline-start:22px} .mx .m-name::before{content:"";position:absolute;inset-inline-start:12px;top:17px;width:6px;height:6px;border-radius:50%; background:var(--zc,var(--line-3))} .mx .m-name b{font-weight:600;font-size:12.5px;line-height:1.3} .mx .m-name span{font-size:11px;color:var(--ink-4);line-height:1.45} .mx .m-val{justify-content:flex-end;font-family:var(--f-mono);font-size:16px;font-weight:600; color:var(--zc,var(--ink));white-space:nowrap;font-variant-numeric:tabular-nums} .mx .m-val small{font-family:var(--f-body);font-size:10.5px;font-weight:500;color:var(--ink-4);margin-inline-start:5px} .mx .m-tgt{justify-content:flex-end;font-size:11px;color:var(--ink-4);white-space:nowrap;min-width:112px} .mx .m-spark{padding:8px 14px;min-width:96px;justify-content:flex-end} .mx .m-spark svg{width:88px;height:26px;display:block} .mx .m-go{color:var(--ink-4);padding-inline-start:6px;padding-inline-end:14px} .mx .m-go svg{width:12px;height:12px;fill:currentColor} .mx .mrow:hover .m-go{color:var(--accent)} .mzero{padding:14px;font-size:12px;color:var(--ink-4)} .ovhead{display:flex;align-items:center;gap:10px;margin:26px 0 11px} .ovhead h2{font-family:var(--f-display);font-size:14px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--ink-2)} .ovhead .ln{flex:1;height:1px;background:var(--line)} .ovhead .pill{flex:none} @media (max-width:860px){ .mx{grid-template-columns:1fr auto auto} .mx .m-tgt,.mx .m-spark{display:none} } /* the overview's five headline tiles read as one band, not four plus one */ .grid.ov-head{grid-template-columns:repeat(5,minmax(0,1fr))} @media (max-width:1180px){.grid.ov-head{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:720px){.grid.ov-head{grid-template-columns:repeat(2,minmax(0,1fr))}} /* measure names read as prose, never as code */ .mx .m-name b,.mx .m-name span{font-family:var(--f-body)} /* ---- charts on the director's overview --------------------------------- */ .chgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:16px;margin-bottom:18px} .chcard{position:relative;overflow:hidden} .chcard::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:2.5px;background:var(--zc)} .chcard header h3{font-size:13px} .chcard .body{padding-top:14px} .bars{display:grid;gap:10px} .bar{display:grid;grid-template-columns:minmax(96px,158px) 1fr auto;grid-template-areas:"l t v" ". n n"; gap:4px 11px;align-items:center} .bar .bl{grid-area:l;font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;font-weight:500} .bar .bt{grid-area:t;height:9px;border-radius:6px;background:var(--panel-3);overflow:hidden;display:block} .bar .bf{display:block;height:100%;border-radius:6px;background:var(--zc);transition:width .3s} .bar .bv{grid-area:v;font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--zc); white-space:nowrap;font-variant-numeric:tabular-nums} .bar .bv small{font-family:var(--f-body);font-size:10px;color:var(--ink-4);margin-inline-start:3px} .bar .bn{grid-area:n;font-size:10.5px;color:var(--ink-4)} @media (max-width:520px){.bar{grid-template-columns:1fr auto;grid-template-areas:"l v" "t t" "n n"}} /* ---- improvement: baseline → target readouts ---------------------------- */ .mxline{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:7px 0;border-bottom:1px solid var(--line)} .mxline span{font-size:11.5px;color:var(--ink-3);font-weight:500} .mxline b{font-family:var(--f-mono);font-size:19px;font-weight:600;letter-spacing:-.01em; font-variant-numeric:tabular-nums} .pbar{height:8px;border-radius:6px;background:var(--panel-3);overflow:hidden} .pbar span{display:block;height:100%;border-radius:6px;transition:width .3s} /* ---- the sidebar: one shape on every screen ---------------------------- */ .navportal{margin-bottom:1px} .nav-a.nav-p{width:100%;font-weight:600;color:var(--ink-2)} .nav-a.nav-p .pt{flex:1;min-width:0;white-space:normal;line-height:1.32;text-align:start} .nav-a.nav-p .chev{display:flex;align-items:center;color:var(--ink-4);flex:none} .nav-a.nav-p .chev svg{width:13px;height:13px;transition:transform .16s} .nav-a.nav-p[aria-expanded="true"] .chev svg{transform:rotate(90deg)} .navportal.cur>.nav-a.nav-p{color:var(--accent)} .subnav{margin:2px 0 8px 18px;padding-inline-start:10px;border-inline-start:1px solid var(--line-2); display:flex;flex-direction:column;gap:1px} /* display:flex outranks the browser's own [hidden]{display:none}, so without this line the chevron turned and the list never actually collapsed. */ .subnav[hidden]{display:none} .subnav .navgroup{margin-top:8px} .subnav .navgroup:first-child{margin-top:2px} .nav-a.sub{font-size:12.5px;padding-top:6px;padding-bottom:6px;color:var(--ink-3)} .nav-a.sub svg{width:14px;height:14px;opacity:.75} .nav-a.sub.on{color:var(--accent);background:var(--accent-soft);font-weight:600} .nav-a.sub.on svg{opacity:1} /* the same trap, closed everywhere: never let a layout rule outrank [hidden] */ [hidden]{display:none!important} /* ---- My day: a duty that is completed where it is listed ---------------- */ .duty{border:1px solid var(--line);background:var(--panel);border-radius:12px;margin-bottom:9px; overflow:hidden;position:relative} .duty::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:2.5px;background:var(--zc)} .duty>button{width:100%;display:flex;align-items:flex-start;gap:12px;padding:15px 17px 15px 19px; border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:start} .duty>button:hover{background:var(--panel-2)} .duty .dot{width:9px;height:9px;border-radius:50%;background:var(--zc);margin-top:5px;flex:none} .duty .tx{flex:1;min-width:0} .duty .tx b{display:block;font-size:13.5px;font-weight:600;margin-bottom:3px;line-height:1.35} .duty .tx span{font-size:11.5px;color:var(--ink-4);line-height:1.55} .duty .act{font-size:11.5px;color:var(--accent);font-weight:600;white-space:nowrap;margin-top:2px} .duty .inner{border-top:1px solid var(--line);padding:16px 17px;background:var(--panel-2)} .duty[data-open="0"] .inner{display:none} @media (max-width:640px){ .duty>button{flex-wrap:wrap} .duty .act{width:100%;margin-inline-start:21px} } /* ========================================================================== THE OPERATIONS CONSOLE A worklist is a column of cards; a console is a zoned instrument panel. Three bands: what the hospital is doing right now, what I must clear, and what I am accountable for. Every cell carries information — none is decor. ========================================================================== */ .cgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;align-items:start} .c4{grid-column:span 4}.c5{grid-column:span 5}.c7{grid-column:span 7} .c8{grid-column:span 8}.c12{grid-column:span 12} @media (max-width:1100px){.c4,.c5,.c7,.c8{grid-column:span 12}} .sechead{display:flex;align-items:center;gap:11px;margin:24px 0 12px} .sechead h2{font-family:var(--f-display);font-size:12.5px;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--ink-3)} .sechead .ln{flex:1;height:1px;background:var(--line)} /* ---- the exposure meter: one ratio against a limit ---------------------- */ .meter-c{display:flex;gap:18px;align-items:center} .meter-c svg{width:132px;height:132px;flex:none} .meter-c .lab{min-width:0} .meter-c .lab .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-4);font-weight:600} .meter-c .lab .v{font-family:var(--f-mono);font-size:15px;font-weight:600;color:var(--ink-2);margin-top:3px} .drv{display:grid;gap:7px;margin-top:14px} .drv div{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--ink-3);line-height:1.4} .drv i{width:7px;height:7px;border-radius:2px;background:var(--zc);flex:none;font-style:normal} .drv b{margin-inline-start:auto;font-family:var(--f-mono);font-weight:600;color:var(--ink-2);font-size:11.5px} /* ---- instrument tiles --------------------------------------------------- */ .inst{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 15px 12px; display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;min-height:118px} .inst::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:2.5px;background:var(--zc,var(--line-2))} .inst .hd{display:flex;align-items:center;gap:8px} .inst .ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none; background:var(--zc-soft,var(--panel-3));color:var(--zc,var(--ink-3))} .inst .ic svg{width:13px;height:13px;fill:currentColor} .inst .hd span{font-size:11px;color:var(--ink-3);font-weight:600;line-height:1.3} .inst .num{font-family:var(--f-mono);font-size:29px;font-weight:600;line-height:1;letter-spacing:-.02em; color:var(--zc,var(--ink))} .inst .num i{font-style:normal;font-family:var(--f-body);font-size:11px;font-weight:500; color:var(--ink-4);margin-inline-start:5px} .inst .ft{font-size:10.5px;color:var(--ink-4);line-height:1.45;margin-top:auto} /* one pip per thing the tile is counting — the tally is also the picture */ .inst .pips{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px} .inst .pips i{width:8px;height:8px;border-radius:2px;background:var(--pc,var(--line-3)); font-style:normal;flex:none} .inst.void .pips{opacity:.5} .inst svg.spark{width:100%;height:24px;display:block;margin-top:-2px} /* ---- the department grid: one cell per ward ---------------------------- */ .dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px} .dcell{border:1px solid var(--line);border-radius:8px;padding:7px 6px 6px;background:var(--panel-2); display:flex;flex-direction:column;gap:3px;min-height:52px;cursor:default;position:relative; border-top:2.5px solid var(--zc,var(--line-3))} .dcell b{font-family:var(--f-mono);font-size:10.5px;font-weight:600;color:var(--ink-2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dcell span{font-size:9.5px;color:var(--ink-4);margin-top:auto;display:flex;align-items:center;gap:3px} .dcell span em{font-style:normal;color:var(--zc);font-weight:700} .dcell:hover{border-color:var(--line-3);background:var(--panel-3)} /* ---- the month strip: one cell per day --------------------------------- */ .mstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(26px,1fr));gap:4px} .mday{aspect-ratio:1;border-radius:6px;display:grid;place-items:center;font-family:var(--f-mono); font-size:10px;font-weight:600;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-4)} .mday.full{background:var(--z-green-soft);border-color:var(--z-green);color:var(--z-green)} .mday.part{background:var(--z-amber-soft);border-color:var(--z-amber);color:var(--z-amber)} .mday.none{background:var(--z-red-soft);border-color:var(--z-red);color:var(--z-red)} .mday.future{opacity:.3} .lgd{display:flex;flex-wrap:wrap;gap:12px;margin-top:11px;font-size:10.5px;color:var(--ink-4)} .lgd span{display:flex;align-items:center;gap:5px} .lgd i{width:9px;height:9px;border-radius:3px;border:1px solid var(--zc);background:var(--zc-soft);font-style:normal} /* ---- deadline rail ------------------------------------------------------ */ .dl{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)} .dl .btn{flex:none;padding:3px 9px} .dl:last-child{border-bottom:0} .dl .cd{font-family:var(--f-mono);font-size:12.5px;font-weight:600;color:var(--zc,var(--ink-3)); min-width:46px;text-align:end} .dl .tx{flex:1;min-width:0;font-size:11.5px;color:var(--ink-2);line-height:1.4} .dl .tx em{font-style:normal;display:block;font-size:10.5px;color:var(--ink-4)} /* ---- responsibility cards ---------------------------------------------- */ .rcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 16px 13px; display:flex;flex-direction:column;gap:11px;text-decoration:none;color:inherit;transition:border-color .13s} .rcard:hover{border-color:var(--accent)} .rcard .hd{display:flex;align-items:center;gap:10px} .rcard .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none; background:var(--accent-soft);color:var(--accent)} .rcard .ic svg{width:15px;height:15px;fill:currentColor} .rcard .hd b{font-size:12.5px;font-weight:600} .rcard .rows{display:grid;gap:6px} .rcard .rw{display:flex;align-items:baseline;gap:8px;font-size:11.5px;color:var(--ink-4)} .rcard .rw b{margin-inline-start:auto;font-family:var(--f-mono);font-size:13px;font-weight:600; color:var(--zc,var(--ink-2));font-variant-numeric:tabular-nums} /* ---- the indicator wall: one cell per indicator, all of them at once ---- Eighteen small multiples. A director should be able to stand back and see the whole surveillance programme in one glance: what is measured, where it sits against its own benchmark, and which cells are still empty. An empty cell is not decoration — it is the work, and it is clickable. */ /* Eighteen cells divide evenly by 6, 3 and 2 — never by 5 or 4, which would leave an orphan row. The breakpoints only ever step between those three. */ .wall{display:grid;grid-template-columns:repeat(6,1fr);gap:10px} @media (max-width:1180px){.wall{grid-template-columns:repeat(3,1fr)}} @media (max-width:680px){.wall{grid-template-columns:repeat(2,1fr)}} .wc{border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:10px 11px 9px; display:flex;flex-direction:column;gap:7px;text-decoration:none;color:inherit;min-height:132px; position:relative;overflow:hidden;transition:border-color .13s,transform .13s} .wc:hover{border-color:var(--accent);transform:translateY(-1px)} .wc::before{content:"";position:absolute;inset:0 auto 0 0;width:2.5px;background:var(--zc,var(--line-3))} .wc .top{display:flex;align-items:center;gap:6px} .wc .cd{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.04em; color:var(--zc,var(--ink-3));background:var(--zc-soft,var(--panel-3)); padding:2px 6px;border-radius:5px;flex:none} .wc .st{margin-inline-start:auto;display:flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600; color:var(--zc,var(--ink-4));text-transform:uppercase;letter-spacing:.06em} .wc .st i{width:7px;height:7px;border-radius:50%;background:var(--zc,var(--line-3));font-style:normal;flex:none} .wc .nm{font-size:10.5px;color:var(--ink-4);line-height:1.35;height:28px;overflow:hidden} .wc .val{display:flex;align-items:baseline;gap:5px;margin-top:-1px;white-space:nowrap} .wc .val b{font-family:var(--f-mono);font-size:22px;font-weight:600;letter-spacing:-.02em; line-height:1;color:var(--zc,var(--ink))} .wc .val em{font-style:normal} .wc .un{font-size:9px;color:var(--ink-4);line-height:1.2;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;margin-top:-2px} .wc .val u{text-decoration:none;margin-inline-start:auto;font-family:var(--f-mono);font-size:10px; font-weight:600;color:var(--dc,var(--ink-4));white-space:nowrap;flex:none;padding-inline-start:4px} .wc svg.ws{width:100%;height:32px;display:block;margin-top:auto;overflow:visible} .wc .bm{font-size:9.5px;color:var(--ink-4);display:flex;align-items:center;gap:5px} .wc .bm s{text-decoration:none;width:12px;height:0;border-top:1.5px dashed var(--ink-4);display:inline-block} .wc.void{background:var(--panel-2);border-style:dashed} .wc.void .val b{color:var(--ink-4);font-size:15px} .wc.void .cta{margin-top:auto;font-size:10px;font-weight:600;color:var(--accent); display:flex;align-items:center;gap:4px} /* ---- the accountability row: six equal cards, never an orphan ---------- */ .accr{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media (max-width:1180px){.accr{grid-template-columns:repeat(2,1fr)}} @media (max-width:740px){.accr{grid-template-columns:1fr}} .rcard .pb{height:4px;border-radius:3px;background:var(--panel-3);overflow:hidden;margin-top:2px} .rcard .pb i{display:block;height:100%;border-radius:3px;background:var(--zc,var(--accent))} .rcard .lead{display:flex;align-items:baseline;gap:7px} .rcard .lead b{font-family:var(--f-mono);font-size:21px;font-weight:600;line-height:1;color:var(--zc,var(--ink))} .rcard .lead span{font-size:10.5px;color:var(--ink-4)} .wc .cta svg{width:11px;height:11px;fill:currentColor} .sechead .btn{margin-inline-start:2px} .band1{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start} @media (max-width:1100px){.band1{grid-template-columns:repeat(2,1fr)}} .sechead .pill{flex:none} /* ---- the live subtitle: the screen's own figures, not a description ---- Written by watchSubline() in ipc-shell.js from the page's headline tiles. A number first, its label after it in lower case, so the eye lands on the figure and the word only qualifies it. */ .topbar .sub[data-live]{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px; font-size:12.5px;color:var(--ink-3);line-height:1.6} .topbar .sub .sb{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap} .topbar .sub .sb b{font-family:var(--f-mono);font-size:13.5px;font-weight:600; color:var(--ink-2);font-variant-numeric:tabular-nums} .topbar .sub .sb.red b{color:var(--z-red)} .topbar .sub .sb.amber b{color:var(--z-amber)} .topbar .sub .sb.green b{color:var(--z-green)} .topbar .sub .sbsep{font-style:normal;color:var(--line-3);padding:0 3px} /* ---- the four verbs: what a person came here to do --------------------- */ .verbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px} @media (max-width:900px){.verbs{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.verbs{grid-template-columns:1fr}} .vb{display:block;border:1px solid var(--line);border-top:3px solid var(--vc,var(--accent)); border-radius:10px;background:var(--panel);padding:13px 15px 12px;text-decoration:none; color:inherit;transition:border-color .13s,transform .13s} .vb:hover{transform:translateY(-1px);border-color:var(--vc)} .vb .i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center; background:var(--vs,var(--panel-3));color:var(--vc);margin-bottom:8px} .vb .i svg{width:13px;height:13px;fill:currentColor} .vb b{display:block;font-family:var(--f-display);font-size:14.5px;font-weight:700;line-height:1.3} .vb span{display:block;font-size:11px;color:var(--ink-4);margin-top:3px;line-height:1.5} /* a step with nothing on file is neither passed nor failed */ .step.nil .no{border-style:dashed;color:var(--ink-4)} .step.nil .t b{color:var(--ink-3)}