/* ============================================================
1st Fire Protection: website theme for the OS
Brings the OS in line with 1stfpservices.com and the 1st FP
Platform demo: Inter + IBM Plex Mono, ink #1d1d1f on a
#f5f5f7 canvas, brand red #d62d2a, pill buttons, 18px cards.
Load AFTER /signal.css and /os.css so these tokens win:
============================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/InterVariable-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexMono-Medium.woff2') format('woff2');}
:root{
/* surfaces */
--bg:#f5f5f7; --panel:#ffffff; --panel-alt:#fbfbfd; --panel-subtle:#fbfbfd; --fill:#f2f2f4;
--border:#e8e8ed; --border-card:#e8e8ed; --border-strong:#d2d2d7; --border-hover:#86868b;
--divider:#efeff2; --divider-soft:#f2f2f4;
/* ink */
--ink:#1d1d1f; --ink-hover:#000000; --ink-2:#424245; --ink-3:#6e6e73; --muted:#6e6e73; --faint:#86868b;
/* meaning */
--green:#1a8a4a; --green-accent:#1a8a4a; --green-bg:#e8f7ee; --green-soft:#30d158;
--money:#b8231f; --money-bg:#fff1f0;
--amber:#a15c00; --amber-ink:#a15c00; --amber-bg:#fff4e0;
--critical:#b8231f; --critical-bg:#fff1f0;
--indigo:#1d1d1f; --indigo-deep:#1d1d1f; --indigo-bg:#f5f5f7; --indigo-bg-2:#f5f5f7;
--teal:#1a8a4a; --teal-bg:#e8f7ee;
--cobalt:#2b5fd9; --cobalt-bg:#eef4ff; --link:#0066cc; --live:#30d158;
/* brand */
--brand:#d62d2a; --brand-hover:#e0332f; --brand-deep:#b8231f; --brand-tint:#fff1f0; --brand-wash:#fff5f4;
--fp-red:#d62d2a; --ember:#d62d2a; --scope-dot:#d62d2a; --mark:#1d1d1f;
--hero:linear-gradient(120deg,#1d1d1f 0%,#2c2c2e 100%);
/* type */
--sans:'Inter',ui-sans-serif,-apple-system,'Segoe UI',sans-serif;
--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
/* geometry */
--r-card:18px; --r-modal:28px; --r-inset:14px; --r-tile:10px; --r-btn:980px; --r-chip:980px; --r-pill:980px;
--sidebar:224px;
/* elevation: a hairline ring, like the site's cards */
--sh-rest:0 0 0 1px rgba(0,0,0,.02);
--sh-lift:0 0 0 1px rgba(0,0,0,.06),0 18px 40px -22px rgba(0,0,0,.28);
--sh-float:0 0 0 1px rgba(0,0,0,.06),0 30px 60px -20px rgba(0,0,0,.3);
--sh-modal:0 50px 110px -34px rgba(29,29,31,.6);
--sh-toast:0 24px 50px -20px rgba(0,0,0,.5);
--focus:0 0 0 4px rgba(214,45,42,.14);
--ease:cubic-bezier(.2,.7,.2,1);
/* os.css status tokens */
--os-good:#1a8a4a; --os-good-bg:#e8f7ee;
--os-warn:#a15c00; --os-warn-bg:#fff4e0;
--os-bad:#b8231f; --os-bad-bg:#fff1f0;
--os-neutral:#6e6e73; --os-neutral-bg:#f2f2f4;
--os-accent:#d62d2a;
}
:root[data-theme="dark"]{
--bg:#111113; --panel:#1c1c1e; --panel-alt:#202023; --panel-subtle:#202023; --fill:#2c2c2e;
--border:#2f2f33; --border-card:#2f2f33; --border-strong:#3a3a3f; --divider:#28282b; --divider-soft:#242427;
--ink:#f5f5f7; --ink-2:#d2d2d7; --ink-3:#a1a1a6; --muted:#a1a1a6; --faint:#86868b;
--green:#30d158; --green-bg:rgba(48,209,88,.14); --money:#ff6961; --money-bg:rgba(255,105,97,.14);
--amber:#ffb340; --amber-ink:#ffb340; --amber-bg:rgba(255,179,64,.14); --critical:#ff6961; --critical-bg:rgba(255,105,97,.14);
--brand:#e0332f; --fp-red:#e0332f; --ember:#e0332f; --scope-dot:#e0332f;
--os-good:#30d158; --os-warn:#ffb340; --os-bad:#ff6961; --os-neutral:#a1a1a6;
--os-good-bg:rgba(48,209,88,.14); --os-warn-bg:rgba(255,179,64,.14); --os-bad-bg:rgba(255,105,97,.14); --os-neutral-bg:#2c2c2e;
--sh-rest:none;
}
html,body{font-family:var(--sans);letter-spacing:-.005em}
body{font-size:14px}
a{color:var(--link)}
a:hover{color:var(--brand)}
:focus-visible{outline:none;box-shadow:var(--focus)}
/* ---- page headings: big, heavy, tight (site H1) ---- */
.os-head h1,.os-screen-head h1,.page-h1{font-weight:800;font-size:28px;letter-spacing:-.035em;line-height:1.12;color:var(--ink)}
.os-head .os-q,.os-screen-head .os-question{font-weight:500;font-size:14px;color:var(--muted);margin-top:6px}
.os-sec{font-weight:800;font-size:10.5px;letter-spacing:.08em;color:var(--faint)}
.os-card-t,.card-head h2{font-weight:700;font-size:15px;letter-spacing:-.01em}
/* ---- cards ---- */
.card,.os-card,.os-kpi,.os-tablewrap,.os-strip,.os-acard,.os-dq-row,.kpi,.appr,.deal{
border-color:var(--border-card);border-radius:var(--r-card);box-shadow:var(--sh-rest)}
.os-acard{border-left-width:1px;position:relative;overflow:hidden}
.os-acard::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--os-neutral)}
.os-acard.critical::before,.os-acard.high::before,.os-acard.bad::before{background:var(--brand)}
.os-acard.medium::before,.os-acard.warn::before{background:var(--amber)}
/* ---- KPI cards: label, big Inter number, colored delta ---- */
.os-kpi .lab,.kpi .lab{font-weight:500;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted)}
.os-kpi .val,.kpi .val,.ms-val{font-family:var(--sans);font-weight:800;font-size:28px;letter-spacing:-.035em}
.ms-lab{font-size:12px}
/* ---- buttons: pills ---- */
.btn,.os-btn,.dq-act,.os-acard .go,.os-err button,.os-drawer .df button,.mbtn{
border-radius:var(--r-btn);font-family:var(--sans);font-weight:600;white-space:nowrap}
.btn,.os-btn{border-color:var(--border-strong);color:var(--ink)}
.btn:hover,.os-btn:hover{border-color:var(--ink);background:var(--panel)}
.btn-primary,.os-btn.primary,.os-acard .go{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-primary:hover,.os-btn.primary:hover,.os-acard .go:hover{background:var(--brand);border-color:var(--brand);filter:none;color:#fff}
.os-btn.brand,.btn-accent{background:var(--brand);border-color:var(--brand);color:#fff}
.os-btn.brand:hover,.btn-accent:hover{background:var(--brand-hover);filter:none}
.dq-act:hover{background:var(--ink);border-color:var(--ink);color:#fff}
:root[data-theme="dark"] .btn-primary,:root[data-theme="dark"] .os-btn.primary{background:var(--ink);color:#1c1c1e}
/* ---- chips: active = red, like the site ---- */
.os-chip,.os-fb,.chip{border-radius:var(--r-chip);font-weight:500}
.os-chip.on,.os-fb.on,.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;
box-shadow:0 8px 20px -6px rgba(214,45,42,.55),0 0 0 4px rgba(214,45,42,.12)}
.seg{border-radius:var(--r-btn)}
.seg button{border-radius:var(--r-btn)}
/* ---- status pills ---- */
.pill,.os-pill,.os-tag{border-radius:var(--r-pill);font-weight:700;letter-spacing:0;text-transform:none;font-size:11px}
/* ---- tables ---- */
thead th,.os-table thead th{font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:var(--panel)}
tbody td,.os-table td{font-size:13px}
tbody tr:hover,.os-table tbody tr.click:hover{background:var(--panel-alt)}
/* ---- forms ---- */
input,textarea,select{background:var(--panel);border-color:var(--border-strong);border-radius:12px;font-family:var(--sans)}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:var(--focus)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}
/* ---- toasts + drawers ---- */
.os-toast{border-radius:var(--r-btn);background:var(--ink)}
.os-drawer{border-radius:var(--r-card) 0 0 var(--r-card)}
.os-drawer .dh .x{border-radius:50%}
/* ---- bars use the brand ---- */
.os-band .bf{background:var(--brand)}
.os-band .bf.neutral{background:var(--ink)}
/* ============================================================
Shared page anatomy for the People screens (people, onboarding,
offboarding) so they read as one app:
back crumb, page head, metric strip, sections, lane checklists.
============================================================ */
.page{max-width:1180px;margin:0 auto;padding:28px clamp(18px,3vw,36px) 64px}
@media(max-width:640px){.page{padding:18px 14px 52px}}
.crumb{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:0;border:0;background:none;font-family:var(--sans);
font-weight:600;font-size:13px;color:var(--muted);cursor:pointer}
.crumb:hover{color:var(--brand)}
.os-screen-head{margin-bottom:18px}
.os-screen-head .os-actions{align-items:center}
.os-btn.sm{font-size:12px;padding:6px 12px}
.os-btn.danger{color:var(--brand-deep);border-color:rgba(214,45,42,.35)}
.os-btn.danger:hover{background:var(--brand-tint);border-color:var(--brand)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px 0 10px}
.sec-h h2{font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink);margin:0}
.sec-h .n{font-weight:600;font-size:13px;color:var(--faint);margin-left:6px}
.sec-h .aside{font-size:12.5px;color:var(--muted)}
.note-line{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.6}
.note-line b{color:var(--ink-2)}
.linkbtn{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--link);cursor:pointer}
.linkbtn:hover{color:var(--brand)}
.banner{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.5;margin:0 0 14px;
background:var(--panel);box-shadow:0 0 0 1px var(--border)}
.banner.warn{background:var(--amber-bg);box-shadow:none;color:var(--amber-ink)}
.banner.good{background:var(--green-bg);box-shadow:none;color:var(--green)}
.banner.bad{background:var(--brand-tint);box-shadow:none;color:var(--brand-deep)}
/* detail header card (a person, a request) */
.dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.dhead h1{font-weight:800;font-size:28px;letter-spacing:-.035em;line-height:1.12;margin:0;color:var(--ink)}
.dhead .dsub{font-size:14px;color:var(--muted);margin-top:6px}
.dhead .dsub b{color:var(--ink-2);font-weight:600}
.dhead .dacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dmeta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.dmeta .mchip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);background:var(--panel);
box-shadow:0 0 0 1px var(--border);border-radius:980px;padding:5px 12px}
.dmeta .mchip b{font-weight:700;color:var(--ink)}
/* progress bar */
.pbar{height:8px;background:var(--fill);border-radius:980px;overflow:hidden;min-width:90px}
.pbar>span{display:block;height:100%;background:var(--brand);border-radius:980px}
.pbar.done>span{background:var(--green)}
/* lane checklist: one card per team, one row per step */
.lane{background:var(--panel);border-radius:var(--r-card);box-shadow:0 0 0 1px var(--border);margin-top:14px;overflow:hidden}
.lane-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--divider)}
.lane-h .ln{font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px}
.lane-h .lc{font-weight:600;font-size:12px;color:var(--faint)}
.lane-h .lr{display:flex;align-items:center;gap:8px}
.lane-i{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:13px 16px;border-top:1px solid var(--divider)}
.lane-i:first-of-type{border-top:0}
.lane-i .lt{flex:1;min-width:0}
.lane-i .lab{font-weight:600;font-size:14px;color:var(--ink)}
.lane-i .dl{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.lane-i .meta{font-size:11.5px;color:var(--faint);margin-top:4px}
.lane-i .ax{display:flex;gap:7px;flex:none;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.lane-i.closed .lab{color:var(--muted);font-weight:500}
@media(max-width:640px){.lane-i{flex-direction:column}.lane-i .ax{justify-content:flex-start}}
/* setup rows (catalog, manual request): collapsible cards */
details.setup{background:var(--panel);border-radius:var(--r-card);box-shadow:0 0 0 1px var(--border);overflow:hidden;margin-top:10px}
details.setup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px}
details.setup>summary::-webkit-details-marker{display:none}
details.setup>summary b{font-weight:700;font-size:14px;color:var(--ink)}
details.setup>summary span{font-size:12.5px;color:var(--muted)}
details.setup>summary::after{content:"›";font-size:18px;color:var(--faint);transition:transform .2s var(--ease)}
details.setup[open]>summary::after{transform:rotate(90deg)}
/* filter bar: search + pill selects */
.fbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.fbar input[type=search],.fbar input[type=text]{flex:1;min-width:200px;border-radius:980px;padding:9px 16px;font-size:13.5px}
.fbar select{border-radius:980px;padding:8px 14px;font-size:13px;font-weight:600}
.fbar .cnt{font-size:12.5px;color:var(--faint);margin-left:4px}
/* small dropdown menu for secondary actions */
.mmenu{position:relative;display:inline-block}
.mmenu>summary{list-style:none}
.mmenu>summary::-webkit-details-marker{display:none}
.mmenu .mlist{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:240px;background:var(--panel);border-radius:16px;padding:6px;box-shadow:var(--sh-float)}
.mmenu .mlist button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:10px;padding:9px 11px;font-family:var(--sans);font-size:13px;color:var(--ink);cursor:pointer}
.mmenu .mlist button:hover{background:var(--bg)}
.mmenu .mlist .mh{padding:6px 11px 4px;font-weight:800;font-size:10px;letter-spacing:.08em;color:var(--faint)}
details.setup>summary span span{font-weight:500;font-size:12.5px;color:var(--muted)}
/* ---- one page width + one section-title style across every screen ---- */
.os-wrap{max-width:1180px;margin:0 auto;padding:28px clamp(18px,3vw,36px) 64px}
@media(max-width:640px){.os-wrap{padding:18px 14px 52px}}
.os-sec{font-weight:800;font-size:17px;letter-spacing:-.02em;text-transform:none;color:var(--ink);margin:30px 0 10px;display:flex;align-items:baseline;gap:6px}
.os-sec .n{font-weight:600;font-size:13px;color:var(--faint)}
/* long explanatory footnotes read as clutter in the app; the pages explain themselves */
.os-foot{display:none}
.os-filter-note{font-size:12.5px}