/* ══════════════════════════════════════════════════════════════════════
   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;                 /* light-mode tile behind a company mark */
  --tile-line:rgba(20,32,28,.16);

  --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;
  --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);

  --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;
  --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);
    --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;
    --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 -apple-system,BlinkMacSystemFont,"Segoe UI",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}
/* The board is a reading surface: a narrower column means the body text can
   fill its card edge to edge and still land near 90 characters a line. */
.wrap.board{max-width:920px}
.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}
}
.brand .sub{padding-left:13px;border-left:1px solid var(--line);color:var(--muted);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;white-space:nowrap;
  /* the tri-arrow mark sits higher than the wordmark, so box-centring reads
     as misaligned; nudge the label onto the wordmark's optical centre */
  position:relative;top:4px}
.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 26px;max-width:70ch}
.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(150px,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 8px;font-size:clamp(16px,1.6vw,19px);font-weight:700;
  letter-spacing:-.01em;line-height:1.35;color:var(--heading)}
.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}
.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:16px;color:var(--body);line-height:1.75}
.content p{margin:0 0 14px}
.content p:last-child{margin-bottom:0}

.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)}

.attach{display:flex;flex-wrap:wrap;gap:9px}
.attach a{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:11px;padding:11px 15px;font:650 13.5px/1.3 inherit;
  color:var(--body);background:var(--fill-3);min-height:42px}
.attach a:hover{border-color:var(--line-hover);background:var(--hover);
  text-decoration:none;color:var(--heading)}
.attach .ic{color:var(--green-ink);font-size:15px;flex:0 0 auto}
.attach .kind{font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--green-ink);
  border-left:1px solid var(--line);padding-left:9px}

.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(142px,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:64px;width:auto;object-fit:contain}
.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(200px,1fr));gap:14px}
.row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,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(230px,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:#fff}

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}
}