/* ══════════════════════════════════════════════════════════════════════
   Talent Synergy — Notice Board
   Design language follows the Synergy Summit 2026 site: dark green ground,
   #00DD8D accent, section eyebrows, generous cards, wide but readable.

   Two modes from one set of tokens. Every rule below reads tokens only —
   no rule names a colour directly, so dark and light stay structurally
   identical and only the palette swaps.
   ══════════════════════════════════════════════════════════════════════ */

/* ── DARK (default) ─────────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --page-a:#03110b; --page-b:#04140d; --page-c:#04121a;
  --glow-a:rgba(0,221,141,.18); --glow-b:rgba(0,221,141,.11); --glow-c:rgba(10,30,40,.5);

  --card:rgba(255,255,255,.042);  --card-2:rgba(255,255,255,.028);
  --fill-1:rgba(255,255,255,.05); --fill-2:rgba(255,255,255,.032);
  --fill-3:rgba(255,255,255,.038);
  --hover:rgba(0,221,141,.11);    --hover-soft:rgba(0,221,141,.05);
  --modal:#0a1c15;                --bar:rgba(3,17,11,.88);
  --scrim:rgba(1,7,5,.82);        --select-bg:#0a1b14;
  --tile:#ffffff;                 /* company marks always sit on white */
  --tile-line:rgba(20,32,28,.16);
  --on-tile:#141438;              /* ink for text set on that white tile */

  --line:rgba(0,221,141,.15);     --line-soft:rgba(255,255,255,.08);
  --line-hover:rgba(0,221,141,.38); --line-focus:rgba(0,221,141,.6);

  --green:#00dd8d; --green-ink:#12e79a; --mint:#5ff0bb; --deep:#0b7d5f;
  --on-green:#03150e;
  --tint:rgba(0,221,141,.13); --tint-line:rgba(0,221,141,.28); --tint-soft:rgba(0,221,141,.05);

  --ink:#eef4f1; --heading:#ffffff; --body:#cfdcd7; --soft:#b6c8c2;
  --muted:#8ba49c; --dim:#6c8880;

  --amber:#f5b344; --amber-ink:#ffd9a1; --on-amber:#231402;
  /* 'high' priority on a blocker sits between amber and red. Carried over from
     the Meeting Rhythm app, tokenised here so it follows the theme. */
  --orange:#ec7c24;
  --amber-tint:rgba(245,179,68,.13); --amber-line:rgba(245,179,68,.32);
  --amber-panel:rgba(245,179,68,.09); --amber-text:#f2cd97;
  --red:#ff7468; --red-line:rgba(255,116,104,.32); --red-tint:rgba(255,116,104,.11);
  --violet:#8a7bff; --on-violet:#17123a;
  --dead-bg:#c8402f; --dead-ink:#ffffff;

  --void-bg:rgba(200,64,47,.14); --void-line:rgba(255,116,104,.42); --void-rail:#ff7468;
  --void-ink:#ffcac3; --void-strong:#ffffff; --void-link:#ffa79c;
  --void-reason:#ffb8af; --void-sub:#d69d95;
  --strike:rgba(255,116,104,.55);

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -24px rgba(0,0,0,.85);
  --shadow-lg:0 30px 80px -24px rgba(0,0,0,.9);
  --btn-glow:0 6px 18px -9px rgba(0,221,141,.8);
  --dead-fade:.66;
}

/* ── LIGHT ──────────────────────────────────────────────────────────── */
[data-theme="light"]{
  color-scheme:light;
  --page-a:#f2f6f4; --page-b:#f7faf8; --page-c:#eef3f5;
  --glow-a:rgba(0,221,141,.15); --glow-b:rgba(18,167,106,.09); --glow-c:rgba(20,20,56,.045);

  --card:#ffffff;                 --card-2:#fdfefe;
  --fill-1:#ffffff;               --fill-2:#eef3f1;
  --fill-3:#f6faf8;
  --hover:rgba(14,143,108,.09);   --hover-soft:rgba(14,143,108,.05);
  --modal:#ffffff;                --bar:rgba(255,255,255,.9);
  --scrim:rgba(16,26,22,.42);     --select-bg:#ffffff;
  --tile:#ffffff;                 --tile-line:rgba(20,32,28,.13);
  --on-tile:#141438;

  --line:rgba(20,32,28,.13);      --line-soft:rgba(20,32,28,.08);
  --line-hover:rgba(14,143,108,.45); --line-focus:rgba(14,143,108,.6);

  --green:#0e8f6c; --green-ink:#07694e; --mint:#12a76a; --deep:#0a6247;
  --on-green:#ffffff;
  --tint:rgba(14,143,108,.1); --tint-line:rgba(14,143,108,.26); --tint-soft:rgba(14,143,108,.05);

  --ink:#16231e; --heading:#141438; --body:#2b3a34; --soft:#3c4b45;
  --muted:#586b64; --dim:#63756d;

  --amber:#9a5f06; --amber-ink:#79490b; --on-amber:#ffffff;
  --orange:#c25e10;
  --amber-tint:rgba(154,95,6,.11); --amber-line:rgba(154,95,6,.3);
  --amber-panel:rgba(245,179,68,.16); --amber-text:#79490b;
  --red:#bd3626; --red-line:rgba(189,54,38,.3); --red-tint:rgba(189,54,38,.07);
  --violet:#54459f; --on-violet:#ffffff;
  --dead-bg:#bd3626; --dead-ink:#ffffff;

  --void-bg:rgba(189,54,38,.07); --void-line:rgba(189,54,38,.28); --void-rail:#bd3626;
  --void-ink:#8a2418; --void-strong:#6a1810; --void-link:#a02b1d;
  --void-reason:#98392a; --void-sub:#a05a4d;
  --strike:rgba(189,54,38,.5);

  --shadow:0 1px 2px rgba(20,32,28,.05), 0 10px 26px -20px rgba(20,32,28,.3);
  --shadow-lg:0 26px 64px -22px rgba(20,32,28,.3);
  --btn-glow:0 6px 16px -10px rgba(14,143,108,.7);
  --dead-fade:.78;
}

/* Follow the OS until the reader chooses. */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    color-scheme:light;
    --page-a:#f2f6f4; --page-b:#f7faf8; --page-c:#eef3f5;
    --glow-a:rgba(0,221,141,.15); --glow-b:rgba(18,167,106,.09); --glow-c:rgba(20,20,56,.045);
    --card:#ffffff; --card-2:#fdfefe; --fill-1:#ffffff; --fill-2:#eef3f1; --fill-3:#f6faf8;
    --hover:rgba(14,143,108,.09); --hover-soft:rgba(14,143,108,.05);
    --modal:#ffffff; --bar:rgba(255,255,255,.9); --scrim:rgba(16,26,22,.42); --select-bg:#fff;
    --tile:#ffffff; --tile-line:rgba(20,32,28,.13); --on-tile:#141438;
    --line:rgba(20,32,28,.13); --line-soft:rgba(20,32,28,.08);
    --line-hover:rgba(14,143,108,.45); --line-focus:rgba(14,143,108,.6);
    --green:#0e8f6c; --green-ink:#07694e; --mint:#12a76a; --deep:#0a6247; --on-green:#fff;
    --tint:rgba(14,143,108,.1); --tint-line:rgba(14,143,108,.26); --tint-soft:rgba(14,143,108,.05);
    --ink:#16231e; --heading:#141438; --body:#2b3a34; --soft:#3c4b45;
    --muted:#586b64; --dim:#63756d;
    --orange:#c25e10;
    --amber:#9a5f06; --amber-ink:#79490b; --on-amber:#ffffff; --amber-tint:rgba(154,95,6,.11);
    --amber-line:rgba(154,95,6,.3); --amber-panel:rgba(245,179,68,.16); --amber-text:#79490b;
    --red:#bd3626; --red-line:rgba(189,54,38,.3); --red-tint:rgba(189,54,38,.07);
    --violet:#54459f; --on-violet:#fff; --dead-bg:#bd3626; --dead-ink:#fff;
    --void-bg:rgba(189,54,38,.07); --void-line:rgba(189,54,38,.28); --void-rail:#bd3626;
    --void-ink:#8a2418; --void-strong:#6a1810; --void-link:#a02b1d;
    --void-reason:#98392a; --void-sub:#a05a4d; --strike:rgba(189,54,38,.5);
    --shadow:0 1px 2px rgba(20,32,28,.05), 0 10px 26px -20px rgba(20,32,28,.3);
    --shadow-lg:0 26px 64px -22px rgba(20,32,28,.3);
    --btn-glow:0 6px 16px -10px rgba(14,143,108,.7);
    --dead-fade:.78;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Base
   ══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);
  font:400 16px/1.6 "Segoe UI Variable Text","Aptos","Segoe UI",-apple-system,
    BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 600px at 90% -10%, var(--glow-a), transparent 60%),
    radial-gradient(900px 560px at -10% 106%, var(--glow-b), transparent 58%),
    radial-gradient(700px 460px at 50% 42%,  var(--glow-c), transparent 70%),
    linear-gradient(170deg, var(--page-a) 0%, var(--page-b) 48%, var(--page-c) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
a{color:var(--green-ink);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
::selection{background:var(--tint)}
code{font:600 .88em/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--fill-2);border:1px solid var(--line-soft);padding:2px 6px;border-radius:5px}
:focus-visible{outline:2px solid var(--line-focus);outline-offset:2px}

/* ── layout ─────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:1400px;margin:0 auto;padding:28px clamp(16px,3vw,32px) 80px}
/* A wide board. An open notice splits into a reading column and a side column,
   and prose paragraphs carry their own measure, so the layout fills the screen
   without letting a sentence run 130 characters. */
.wrap.board{max-width:min(1560px, 94vw)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green-ink);
  background:var(--tint);border:1px solid var(--tint-line);
  padding:5px 12px;border-radius:99px;margin-bottom:14px}

/* ── header ─────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:40;background:var(--bar);
  backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1400px;margin:0 auto;padding:12px clamp(16px,3vw,32px);
  display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand:hover{text-decoration:none}
.brand .logo{height:32px;width:auto;display:block;flex:0 0 auto}
.brand .logo.on-light{display:none}
[data-theme="light"] .brand .logo.on-dark{display:none}
[data-theme="light"] .brand .logo.on-light{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .brand .logo.on-dark{display:none}
  :root:not([data-theme]) .brand .logo.on-light{display:block}
}
/* The label has to sit on the same optical line as "Talent Synergy", not on the
   artwork's box centre. Measured off brand/logo-dark.webp (670x128): the mark
   and the wordmark share the box centre at y=63.5, but the wordmark's cap band
   is y=28-80, so its cap centre is y=54 — 9.5px higher. At the 32px render
   height that is 2.4px. Flexbox centres this label's line box on the box
   centre, so it is lifted to meet the wordmark. The rule is drawn as a
   pseudo-element instead of a border so the lift does not drag it off centre. */
.brand .sub{position:relative;top:-2px;padding-left:13px;color:var(--muted);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;white-space:nowrap}
.brand .sub::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(calc(-50% + 2px));height:20px;width:1px;background:var(--line)}
.spacer{flex:1}
.pill{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.live{background:var(--tint);color:var(--green-ink);border-color:var(--tint-line)}
.whoami{font-size:12.5px;color:var(--muted);white-space:nowrap;max-width:190px;
  overflow:hidden;text-overflow:ellipsis}

.iconbtn{border:1px solid var(--line);background:var(--fill-2);color:var(--muted);
  width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:15px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:.16s;
  flex:0 0 auto;font-family:inherit;padding:0}
.iconbtn:hover{background:var(--hover);border-color:var(--line-hover);color:var(--green-ink)}
.iconbtn .ico-sun{display:none}
[data-theme="light"] .iconbtn .ico-sun{display:inline}
[data-theme="light"] .iconbtn .ico-moon{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .iconbtn .ico-sun{display:inline}
  :root:not([data-theme]) .iconbtn .ico-moon{display:none}
}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);background:var(--fill-2);color:var(--ink);
  padding:9px 16px;border-radius:10px;font:600 13.5px/1.2 inherit;cursor:pointer;
  transition:.16s;white-space:nowrap;min-height:38px}
.btn:hover{background:var(--hover);border-color:var(--line-hover);text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--green),var(--deep));border-color:transparent;
  color:var(--on-green);font-weight:700;box-shadow:var(--btn-glow)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:8px;min-height:32px}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red);border-color:var(--red-line)}
.btn.danger:hover{background:var(--red-tint);border-color:var(--red)}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{margin:8px 0 28px;max-width:74ch}
.hero h1{margin:0 0 10px;font-size:clamp(24px,3.4vw,36px);font-weight:800;
  letter-spacing:-.02em;line-height:1.15;color:var(--heading)}
.hero h1 .accent{background:linear-gradient(100deg,var(--green),var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.hero p b{color:var(--body)}

/* ── stats ──────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;margin:0 0 22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.stat b{display:block;font-size:26px;font-weight:800;color:var(--green-ink);line-height:1.1}
.stat span{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);font-weight:700}

/* ── toolbar ────────────────────────────────────────────────────────── */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;width:100%}
.search{flex:1 1 auto;min-width:160px;position:relative}
.search input{width:100%;padding:10px 14px 10px 38px;border:1px solid var(--line);
  border-radius:10px;font-size:14px;background:var(--fill-1);color:var(--ink);font-family:inherit}
.search input::placeholder{color:var(--dim)}
.search input:focus{outline:none;border-color:var(--line-focus);background:var(--hover-soft)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--dim)}
select.filter{padding:10px 34px 10px 13px;position:relative;border:1px solid var(--line);border-radius:10px;
  background:var(--fill-1);
  color:var(--ink);font:600 13px/1.2 inherit;cursor:pointer;
  min-height:42px;flex:1 1 150px;width:auto;max-width:200px;
  appearance:none;-webkit-appearance:none}
select.filter:focus{outline:none;border-color:var(--line-focus)}
select.filter option{background:var(--select-bg);color:var(--ink)}
#printBtn{flex:0 0 auto;min-height:40px;white-space:nowrap}
.selwrap{position:relative;display:inline-flex;flex:1 1 150px;max-width:200px;min-width:0}
.selwrap::after{content:"";position:absolute;right:13px;top:50%;width:9px;height:9px;
  transform:translateY(-70%) rotate(45deg);border-right:2px solid var(--green-ink);
  border-bottom:2px solid var(--green-ink);pointer-events:none}
.selwrap select.filter{width:100%;max-width:none;flex:1 1 auto}
.count{color:var(--dim);font-size:13px;margin:0 0 14px}

/* office filter strip */
.officebar{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 4px;margin-bottom:14px}
.ofilter{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--fill-2);border-radius:99px;
  padding:6px 14px 6px 7px;cursor:pointer;font:600 12.5px/1 inherit;color:var(--muted);
  transition:.15s;white-space:nowrap;min-height:38px}
.ofilter:hover{border-color:var(--line-hover);color:var(--ink)}
.ofilter.on{background:var(--tint);border-color:var(--tint-line);color:var(--green-ink)}
.ofilter .lg{width:30px;height:30px;border-radius:50%;background:var(--tile);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden;
  border:1px solid var(--tile-line);padding:3px}
.ofilter .lg img{max-width:100%;max-height:100%;width:auto;object-fit:contain;display:block}
.ofilter.all .lg{background:var(--tint);border-color:var(--tint-line);
  color:var(--green-ink);font-size:12px;font-weight:800}

/* ── notice card ────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);margin-bottom:14px;position:relative;overflow:hidden;
  transition:border-color .16s, transform .16s}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--green),var(--deep))}
.card:hover{border-color:var(--line-hover)}
.card.st-void::before,.card.st-expired::before{background:var(--void-rail)}
.card.st-soon::before{background:var(--amber)}
.card.st-super::before{background:var(--violet)}
.card.st-void,.card.st-expired,.card.st-super{opacity:var(--dead-fade)}
.card.st-void:hover,.card.st-expired:hover,.card.st-super:hover{opacity:1}
.card.flash{animation:flash 1.4s ease}
@keyframes flash{30%{box-shadow:0 0 0 3px var(--line-focus),var(--shadow)}}

.card .head{padding:18px 22px 18px 24px;cursor:pointer;display:block;
  border:0;background:none;width:100%;text-align:left;font:inherit;color:inherit}
.card .head:hover{background:var(--hover-soft)}
.card.open .head{background:transparent;padding-bottom:6px}
/* the excerpt is a preview of the body — redundant once open */
.card.open .excerpt{display:none}
.card h3{margin:0 0 10px;font-size:clamp(17px,1.7vw,21px);font-weight:700;
  letter-spacing:-.015em;line-height:1.3;color:var(--heading)}
.card.open .head h3{position:relative;padding-bottom:12px}
.card.open .head h3::after{content:"";position:absolute;left:0;bottom:0;
  width:52px;height:2px;background:var(--green);border-radius:2px}
.card.st-void h3,.card.st-expired h3{text-decoration:line-through;text-decoration-color:var(--strike)}

.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:9px}
.chip{font-size:10px;font-weight:700;padding:4px 10px;border-radius:99px;
  text-transform:uppercase;letter-spacing:.08em;border:1px solid transparent;line-height:1.3}
.chip.ref{background:var(--fill-2);color:var(--muted);border-color:var(--line-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}
.chip.cat{background:var(--tint);color:var(--green-ink);border-color:var(--tint-line)}
.chip.cat.event{background:var(--amber-tint);color:var(--amber-ink);border-color:var(--amber-line)}
.chip.cat.it{background:var(--fill-2);color:var(--violet);border-color:var(--line-soft)}
.chip.cat.gen{background:var(--fill-2);color:var(--muted);border-color:var(--line-soft)}
.chip.status{font-weight:800}
.s-active{background:var(--green);color:var(--on-green)}
.s-soon{background:var(--amber);color:var(--on-amber)}
.s-void,.s-expired{background:var(--dead-bg);color:var(--dead-ink)}
.s-super{background:var(--violet);color:var(--on-violet)}
.chip.pin{background:var(--amber-tint);color:var(--amber-ink);border-color:var(--amber-line)}
.chip.internal{background:var(--fill-2);color:var(--violet);border-color:var(--line-soft)}
.chip.office{background:var(--fill-2);color:var(--soft);border-color:var(--line-soft);
  text-transform:none;letter-spacing:.02em;font-weight:650}
.chip.office.all{color:var(--dim)}

/* office badges on a card */
.offices{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:2px 0 9px}
.obadge{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-soft);
  background:var(--fill-2);border-radius:99px;padding:4px 11px 4px 5px;
  font:650 11.5px/1 inherit;color:var(--soft)}
.obadge .lg{width:24px;height:24px;border-radius:50%;background:var(--tile);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid var(--tile-line);padding:2px}
.obadge .lg img{max-width:100%;max-height:100%;width:auto;object-fit:contain;display:block}
.obadge.all{background:var(--tint);border-color:var(--tint-line);color:var(--green-ink);
  padding:5px 12px}

.meta{color:var(--dim);font-size:12.5px;display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:4px}
.meta b{color:var(--muted);font-weight:650}
.excerpt{color:var(--muted);font-size:14px;margin-top:10px;line-height:1.6}

/* ── detail ─────────────────────────────────────────────────────────── */
.body{padding:0 22px 24px 24px;display:none}
.bodygrid{display:grid;gap:clamp(20px,3vw,48px);
  grid-template-columns:minmax(0,1.9fr) minmax(min(280px,100%),.8fr);align-items:start}
.bodygrid .main{min-width:0}
.bodygrid .side{min-width:0;position:sticky;top:82px}
.bodygrid .side h4:first-child{margin-top:8px}
.issued{font-size:12.5px;color:var(--dim);display:flex;flex-direction:column;gap:3px;
  line-height:1.6}
.issued b{color:var(--muted);font-weight:650;font-size:13px}
@media(max-width:900px){
  .bodygrid{grid-template-columns:1fr;gap:4px}
  .bodygrid .side{position:static}
}
.card.open .body{display:block}
/* a hairline only where the reading matter actually starts */
.card.open .body > .content{padding-top:4px}
.body h4{margin:24px 0 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--green-ink);font-weight:700;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.body h4 .src{color:var(--dim);letter-spacing:.05em;font-weight:600;text-transform:none;font-size:10.5px}
.content{font-size:16.5px;color:var(--body);line-height:1.75}
.content p{margin:0 0 15px;max-width:80ch}
.content p:last-child{margin-bottom:0}

/* Structured body copy, following the printed notices:
   an opening paragraph, green-numbered clauses, dashed items with a bold
   lead-in, and small green sub-headings. */
.content p.lead{font-size:17.5px;color:var(--soft);line-height:1.7;margin-bottom:22px;
  max-width:76ch}
.content h5.sub{font:700 11px/1.4 inherit;text-transform:uppercase;letter-spacing:.14em;
  color:var(--green-ink);margin:26px 0 10px}
.content h5.sub:first-child{margin-top:0}
.content .nb{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  margin:0 0 16px;max-width:none}
.content .nb .num{font:700 13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--green-ink);background:var(--tint);border:1px solid var(--tint-line);
  border-radius:7px;padding:0 8px;height:fit-content}
.content .nb b{color:var(--heading);font-weight:700;display:block}
.content .nb .rest{display:block;margin-top:4px;max-width:82ch}
.content .bl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;
  margin:0 0 12px;max-width:none}
.content .bl .d{color:var(--green);font-weight:700;line-height:1.75}
.content .bl b{color:var(--heading);font-weight:650}
.content p.li{max-width:82ch}
.content p.li b{color:var(--heading);font-weight:650}

.voidbanner{background:var(--void-bg);border:1px solid var(--void-line);
  border-left:4px solid var(--void-rail);border-radius:12px;padding:14px 17px;margin:18px 0 6px;
  font-size:13.5px;color:var(--void-ink);line-height:1.6}
.voidbanner b{color:var(--void-strong)}
.voidbanner a{color:var(--void-link);font-weight:700;text-decoration:underline}
.voidbanner .vr{display:block;margin-top:4px;color:var(--void-reason);font-style:italic}
.voidbanner .vsub{margin-top:8px;font-size:12px;color:var(--void-sub);font-style:italic}

.rels{display:flex;flex-direction:column;gap:8px}
.reflink{display:flex;gap:12px;align-items:baseline;border:1px solid var(--line);
  border-radius:11px;padding:11px 14px;background:var(--fill-3);font-size:13.5px;
  color:var(--body);transition:.15s;flex-wrap:wrap}
.reflink:hover{border-color:var(--line-hover);background:var(--hover);
  text-decoration:none;color:var(--heading)}
.reflink b{color:var(--green-ink);font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  flex:0 0 auto;min-width:84px}
.reflink .rl{flex:1 1 auto;min-width:0}
.reflink.dead{border-color:var(--void-line);background:var(--void-bg)}
.reflink.gone{opacity:.6;cursor:default;border-style:dashed}
.reflink.gone b{color:var(--dim)}
.reflink.dead b{color:var(--void-link)}

/* Attachments are the thing most people come for, so they read as cards
   rather than quiet links: file type badge, name, and a download cue. */
/* Attachments are the thing most people come for, so they read as cards:
   a file-type badge, the name, and two distinct actions. */
.attach{display:flex;flex-wrap:wrap;gap:11px}
.side .attach{flex-direction:column}
.side .actions{flex-direction:column;align-items:stretch}
.side .actions .btn{width:100%}
.file{flex:1 1 260px;min-width:0;border:1px solid var(--tint-line);
  border-left:3px solid var(--green);border-radius:12px;padding:14px 16px;
  background:var(--tint-soft);transition:.16s}
.file:hover{background:var(--tint);border-color:var(--green)}
.file .fh{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.file .ft{flex:0 0 auto;font:800 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;color:var(--on-green);background:var(--green);
  border-radius:7px;padding:9px 8px;min-width:44px;text-align:center}
.file .fn{display:flex;flex-direction:column;gap:2px;min-width:0}
.file .fn b{font:650 14.5px/1.35 inherit;color:var(--heading);
  overflow:hidden;text-overflow:ellipsis}
.file .fm{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.file .fb{display:flex;gap:8px}
.file .fb .btn{flex:1 1 0;min-height:36px;justify-content:center}

.timeline{border-left:2px solid var(--line);margin-left:7px;padding-left:20px}
.tl-item{margin:0 0 16px;position:relative}
.tl-item::before{content:"";position:absolute;left:-27px;top:7px;width:10px;height:10px;
  border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--tint)}
.tl-item .d{font-size:11.5px;color:var(--green-ink);font-weight:700;letter-spacing:.03em}
.tl-item .x{font-size:14px;margin-top:3px;color:var(--soft);line-height:1.6}

.notes{background:var(--tint-soft);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:12px;padding:16px 19px;margin-top:8px}
.notes ol{margin:0;padding:0;list-style:none}

.notes li{font-size:13px;color:var(--muted);margin:11px 0;line-height:1.6;
  display:flex;gap:11px;align-items:baseline}
.notes li:first-child{margin-top:0}
.notes li b{color:var(--body)}
.notes li .nt{flex:1 1 auto;min-width:0}
.notes .nref{flex:0 0 auto;font:700 10px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--green-ink);background:var(--tint);border:1px solid var(--tint-line);
  border-radius:6px;padding:2px 7px;min-width:32px;text-align:center}
.notes .nref.cl{color:var(--amber-ink);background:var(--amber-tint);border-color:var(--amber-line)}
.notes .notehead{margin:16px 0 6px;font-size:10px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--amber);font-weight:700}
.notes .toggle{background:none;border:none;color:var(--green-ink);font:700 12.5px/1 inherit;
  cursor:pointer;padding:8px 0 0;letter-spacing:.03em}
.notes.collapsed ol li:nth-child(n+4){display:none}
.notes.collapsed .notehead,.notes.collapsed ol.extra{display:none}

.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px;padding-top:18px;
  border-top:1px dashed var(--line)}
.empty{text-align:center;color:var(--dim);padding:72px 20px;font-size:15px}
.empty svg{opacity:.3;margin-bottom:14px}

/* ── group companies strip (built from individual logos) ────────────── */
.partners{margin:52px 0 20px;text-align:center;width:100%}
.wrap.board .partners{width:calc(100% + clamp(0px,6vw,220px));
  margin-left:calc(clamp(0px,3vw,110px) * -1)}
.partners .ph{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:24px}
.partners .ph span{font:italic 700 14px/1 inherit;color:var(--heading);white-space:nowrap;letter-spacing:.02em}
.partners .ph i{display:block;height:2px;flex:1 1 120px;max-width:220px;background:linear-gradient(90deg,transparent,var(--green),transparent);
  opacity:.85;border-radius:2px}
.plogos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(142px,100%),1fr));gap:13px;
  max-width:1180px;margin:0 auto;padding:0 2px}
.plogos .lg{height:92px;border-radius:14px;background:var(--tile);
  border:1px solid var(--tile-line);box-shadow:var(--shadow);display:flex;
  align-items:center;justify-content:center;padding:14px 18px;
  transition:transform .18s ease, border-color .18s ease}
.plogos .lg:hover{border-color:var(--line-hover);transform:translateY(-3px)}
.plogos .lg img{max-width:100%;max-height:60px;width:auto;object-fit:contain}
.plogos .lg.wordmark{font:700 15px/1.25 inherit;color:var(--on-tile);letter-spacing:-.01em;
  text-align:center;padding:14px 12px}
.lg.initials{font:800 10px/1 inherit;color:var(--green-ink);
  background:var(--tint)!important;border-color:var(--tint-line)!important}
.ofilter .n{font:700 10px/1 inherit;color:var(--green-ink);background:var(--tint);
  border:1px solid var(--tint-line);border-radius:99px;padding:2px 6px;margin-left:2px}
.ofilter.quiet{opacity:.55}
.ofilter.quiet:hover,.ofilter.quiet.on{opacity:1}

/* ── forms / modal ──────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(4px);
  display:none;align-items:flex-start;justify-content:center;z-index:60;
  padding:clamp(12px,4vh,36px) clamp(12px,3vw,20px);overflow:auto}
.overlay.show{display:flex}
.modal{background:var(--modal);border:1px solid var(--line);border-radius:18px;
  max-width:760px;width:100%;box-shadow:var(--shadow-lg);margin:auto}
.modal .mhead{padding:20px 24px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:12px;position:sticky;top:0;background:var(--modal);
  border-radius:18px 18px 0 0;z-index:2}
.modal .mhead h2{margin:0;font-size:18px;font-weight:700;color:var(--heading)}
.modal .mbody{padding:22px 24px}
.modal .mfoot{padding:16px 24px;border-top:1px solid var(--line-soft);display:flex;gap:10px;
  justify-content:flex-end;flex-wrap:wrap;position:sticky;bottom:0;background:var(--modal);
  border-radius:0 0 18px 18px}
label.fl{display:block;font-size:10.5px;font-weight:700;color:var(--green-ink);margin:20px 0 7px;
  text-transform:uppercase;letter-spacing:.14em}
label.fl:first-child{margin-top:0}
label.fl .plain{color:var(--dim);font-weight:600;text-transform:none;letter-spacing:0}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font:400 15px/1.5 inherit;background:var(--fill-1);color:var(--ink);min-height:44px}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--line-focus);
  background:var(--hover-soft)}
select option{background:var(--select-bg);color:var(--ink)}
textarea{min-height:180px;resize:vertical;line-height:1.7}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px}
.row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:14px}
.hint{font-size:12.5px;color:var(--dim);margin:7px 0 0;line-height:1.55}
.hint b{color:var(--muted)}
.attach-row{display:flex;gap:8px;margin-top:9px;align-items:center;flex-wrap:wrap}
.attach-row input{flex:1 1 160px;min-width:0}
.close-x{margin-left:auto;border:none;background:none;font-size:26px;cursor:pointer;
  color:var(--dim);line-height:1;padding:0 4px}
.close-x:hover{color:var(--ink)}

.pickbar{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:8px;margin-top:9px}
.opt{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line-soft);
  border-radius:11px;padding:11px 13px;cursor:pointer;background:var(--fill-3);transition:.14s}
.opt:hover{border-color:var(--line-hover);background:var(--hover-soft)}
.opt:has(input:checked){border-color:var(--tint-line);background:var(--tint-soft)}
.opt input{width:auto;min-height:0;margin:3px 0 0;accent-color:var(--green);flex:0 0 auto}
.opt .t{font:650 13px/1.4 inherit;color:var(--body)}
.opt .r{font:700 10.5px/1 ui-monospace,monospace;color:var(--green-ink);margin-right:5px}
.opt .u{font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.45}
.opt .lg{width:30px;height:30px;border-radius:50%;background:var(--tile);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid var(--tile-line);padding:3px}
.opt .lg img{max-width:100%;max-height:100%;width:auto;object-fit:contain}

.drop{border:2px dashed var(--line);border-radius:14px;padding:26px 18px;text-align:center;
  color:var(--muted);font-size:14px;cursor:pointer;transition:.16s;background:var(--fill-3)}
.drop:hover,.drop.over{border-color:var(--line-focus);background:var(--hover);color:var(--ink)}
.drop b{color:var(--green-ink)}

.banner{background:var(--amber-panel);border:1px solid var(--amber-line);color:var(--amber-text);
  font-size:13px;padding:13px 16px;border-radius:12px;margin-bottom:18px;line-height:1.6}
.banner b{color:var(--amber)}
.banner.info{background:var(--tint-soft);border-color:var(--tint-line);color:var(--body)}
.banner.info b{color:var(--green-ink)}
.banner.bad{background:var(--void-bg);border-color:var(--void-line);color:var(--void-ink)}
.banner.bad b{color:var(--void-strong)}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,90px);
  background:linear-gradient(135deg,var(--green),var(--deep));color:var(--on-green);
  font-weight:700;padding:12px 22px;border-radius:12px;font-size:14px;z-index:90;
  opacity:0;transition:.26s;box-shadow:var(--shadow-lg);max-width:calc(100vw - 32px);
  text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:linear-gradient(135deg,var(--dead-bg),var(--void-rail));color:var(--dead-ink)}

footer{max-width:1400px;margin:0 auto;padding:28px clamp(16px,3vw,32px) 52px;
  color:var(--dim);font-size:12.5px;border-top:1px solid var(--line-soft);line-height:1.8}
footer b{color:var(--muted)}

/* ── dashboard ──────────────────────────────────────────────────────── */
.tabs{display:flex;gap:7px;margin:0 0 20px;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:var(--fill-2);color:var(--muted);
  padding:9px 17px;border-radius:10px;font:650 13.5px/1.2 inherit;cursor:pointer;min-height:38px}
.tab.on{background:var(--tint);border-color:var(--tint-line);color:var(--green-ink)}
.pane{display:none}.pane.on{display:block}

.rows{display:flex;flex-direction:column;gap:10px}
.row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto;align-items:start}
.row:hover{border-color:var(--line-hover)}
.row.dead .rt{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--strike)}
.row .rt{font:650 15px/1.4 inherit;color:var(--heading);margin-bottom:6px}
.row .rm{font-size:12px;color:var(--dim);display:flex;gap:6px 14px;flex-wrap:wrap;line-height:1.6}
.row .rm .k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.row .racts{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start}
@media(max-width:720px){
  .row{grid-template-columns:1fr}
  .row .racts{justify-content:flex-start}
}

.userrow{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;flex-wrap:wrap}
.userrow .av{width:38px;height:38px;border-radius:50%;background:var(--tint);
  color:var(--green-ink);display:flex;align-items:center;justify-content:center;
  font:800 14px/1 inherit;flex:0 0 auto}
.userrow .un{font:650 14.5px/1.3 inherit;color:var(--heading)}
.userrow .ue{font-size:12.5px;color:var(--dim)}

/* ── login page ─────────────────────────────────────────────────────── */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.authcard{width:100%;max-width:430px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow-lg);padding:clamp(24px,5vw,38px)}
.authcard .lock{display:flex;justify-content:center;margin-bottom:22px}
.authcard .lock img{height:34px;width:auto}
.authcard .lock .on-light{display:none}
[data-theme="light"] .authcard .lock .on-dark{display:none}
[data-theme="light"] .authcard .lock .on-light{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .authcard .lock .on-dark{display:none}
  :root:not([data-theme]) .authcard .lock .on-light{display:block}
}
.authcard h1{margin:0 0 6px;font-size:21px;font-weight:700;color:var(--heading);text-align:center}
.authcard .sub{margin:0 0 24px;font-size:13.5px;color:var(--muted);text-align:center;line-height:1.6}
.authcard .foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--dim);text-align:center;line-height:1.6}
.strength{height:4px;border-radius:99px;background:var(--fill-2);margin-top:8px;overflow:hidden}
.strength i{display:block;height:100%;width:0;background:var(--green);transition:.25s}

/* ── mobile ─────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .brand .logo{height:28px}
  .brand .sub{display:none}
  .whoami{display:none}
}
@media(max-width:640px){
  .wrap{padding:20px 14px 64px}
  .topbar-in{padding:10px 14px;gap:8px}
  .brand .logo{height:26px}
  .pill{display:none}
  .hero{margin-bottom:20px}
  .stats{grid-template-columns:1fr 1fr;gap:9px}
  .stat{padding:12px 13px;border-radius:12px}
  .stat b{font-size:22px}
  .card .head{padding:15px 16px 15px 18px}
  .body{padding:0 16px 18px 18px}
  .card h3{font-size:16.5px}
  .content{font-size:15px}
  .toolbar{gap:8px}
  select.filter{flex:1 1 calc(50% - 4px);min-width:0}
  .actions .btn,.modal .mfoot .btn{flex:1 1 auto}
  .modal{border-radius:16px}
  .modal .mhead,.modal .mbody,.modal .mfoot{padding-left:18px;padding-right:18px}
  .plogos .lg{width:74px;height:46px}
  .partners .ph i{flex-basis:26px}
  .notes{padding:14px 15px}
  .notes li{gap:9px}
  .timeline{padding-left:16px}
  .tl-item::before{left:-23px}
}

/* ── print ──────────────────────────────────────────────────────────── */
@media print{
  body{background:#fff!important;color:#000!important}
  .topbar,.toolbar,.stats,.hero,.actions,footer,.count,.banner,.tabs,.iconbtn,
  .partners,.officebar{display:none!important}
  .card{break-inside:avoid;border:1px solid #ccc;box-shadow:none;background:#fff;
    color:#000;opacity:1;margin-bottom:18px}
  .card .body{display:block!important}
  .card h3,.content,.notes li,.notes li b,.tl-item .x{color:#000!important}
  .card h3{text-decoration:none!important}
  .voidbanner{background:#fdf2f0!important;color:#8a2418!important;border-color:#bd3626!important}
  .voidbanner b,.voidbanner a{color:#8a2418!important}
  .notes{background:#f6faf8!important;border-color:#cfe3da!important}
  .meta,.excerpt{color:#444!important}
  .content{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}