/* OSF Operations — brand system.
   Typefaces: Selecta (Maxitype) for sans, ABC Diatype SemiMono (Dinamo) for mono.
   Palette + composition derived from the OSF web brand: near-black headings, a
   cornflower-blue accent, warm greys, warm off-white / beige surfaces, dark
   charcoal buttons, mono uppercase section labels. */

@font-face { font-family:'Selecta'; src:url('/fonts/Selecta-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Selecta'; src:url('/fonts/Selecta-Italic.woff2')  format('woff2'); font-weight:400; font-style:italic;  font-display:swap; }
@font-face { font-family:'Selecta'; src:url('/fonts/Selecta-Medium.woff2')  format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Selecta'; src:url('/fonts/Selecta-Bold.woff2')    format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Diatype Mono'; src:url('/fonts/DiatypeSemiMono-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Diatype Mono'; src:url('/fonts/DiatypeSemiMono-Bold.woff2')    format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --font-sans:'Selecta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:'Diatype Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ink:#141414;          /* primary text / headings */
  --ink-soft:#46443e;     /* strong secondary */
  --grey:#b4b1a4;         /* warm grey — de-emphasis (logo-grey family) */
  --grey-strong:#8c8a7e;  /* warm grey, readable secondary */
  --blue:#4f86f0;         /* brand accent */
  --blue-deep:#3a6fe0;    /* hover / active */
  --blue-soft:#eaf1ff;    /* blue tint background */

  --bg:#faf9f6;           /* page background (warm near-white) */
  --surface:#ffffff;      /* elevated surfaces / inputs */
  --card:#eceadf;         /* beige card / tile */
  --card-soft:#f3f1ea;
  --line:#e6e3da;         /* warm hairline */
  --line-strong:#d8d4c8;
  --btn:#262522;          /* dark charcoal button */
  --btn-hover:#3a3733;

  --ok:#2e7d32; --ok-bg:#e9f2e9; --ok-line:#c4ddc4;
  --warn:#9a6b00; --warn-bg:#f7efdc; --warn-line:#e6d3a6;
  --danger:#b3261e; --danger-bg:#fbeaea;

  /* aliases — the module pages grew a parallel vocabulary; map it to the canonical
     tokens here so new pages use one system and the per-page :root blocks can be
     retired later without a value change. */
  --muted:var(--grey-strong); --accent:var(--btn);
  --bgaccent:var(--blue-soft); --bgok:var(--ok-bg); --bgwarn:var(--warn-bg);
  --red:var(--danger); --bgred:var(--danger-bg);

  --radius:12px; --radius-sm:8px;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:15px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1, h2, h3 { font-weight:700; letter-spacing:-0.015em; line-height:1.08; margin:0; color:var(--ink); }
a { color:var(--blue); text-decoration:none; }
a:hover { color:var(--blue-deep); }

/* mono uppercase section label — the OSF "VALUES / PEOPLE" treatment */
.label { font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--blue); }
.mono { font-family:var(--font-mono); }

.btn { font-family:var(--font-sans); font-size:14px; font-weight:500; padding:9px 16px;
  border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink); cursor:pointer; transition:border-color .12s, background .12s; }
.btn:hover { border-color:var(--grey-strong); }
.btn.pri { background:var(--btn); color:#fff; border-color:var(--btn); }
.btn.pri:hover { background:var(--btn-hover); border-color:var(--btn-hover); }
.btn.danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn:disabled { opacity:.45; cursor:default; }

input, select, textarea { font-family:var(--font-sans); font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:9px 11px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,134,240,.14); }

/* ── app bar (top of every module) ── */
.appbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 26px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:40; }
.appbar .brand { display:flex; align-items:center; gap:18px; text-decoration:none; color:inherit; }
.appbar .brand .logo { height:46px; width:auto; display:block; }
.appbar .brand .vr { width:1px; height:32px; background:var(--line-strong); }
.appbar .brand .name { font-size:21px; font-weight:500; letter-spacing:-0.01em; }
.appbar .right { display:flex; align-items:center; gap:16px; }

/* ── profile avatar (initials) + menu ── */
#profile { position:relative; }
.avatar { width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; background:var(--ink);
  color:#fff; font-family:var(--font-sans); font-weight:500; font-size:13px; letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center; transition:background .12s; }
.avatar:hover { background:var(--btn-hover); }
.avmenu { position:absolute; right:0; top:46px; min-width:236px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 14px 38px rgba(20,18,12,.16); padding:15px; z-index:60; }
.avmenu .nm { font-size:14px; font-weight:500; }
.avmenu .ml { font-family:var(--font-mono); font-size:12px; color:var(--grey-strong); margin-top:3px; word-break:break-all; }
.avmenu .rl { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-top:9px; }
.avmenu a, .avmenu button { display:block; width:100%; text-align:left; box-sizing:border-box; background:none; border:0;
  padding:10px 0 0; margin-top:12px; border-top:1px solid var(--line); font-family:var(--font-sans); font-size:13px; color:var(--ink); cursor:pointer; text-decoration:none; }
.avmenu a + button { margin-top:4px; padding-top:4px; border-top:0; }
.avmenu a:hover, .avmenu button:hover { color:var(--blue); }

/* ── module card ── */
.mcard { display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px 18px; min-height:116px;
  transition:border-color .14s, box-shadow .16s, transform .06s; }
.mcard:hover { border-color:var(--line-strong); box-shadow:0 10px 30px rgba(20,18,12,.07); }
.mcard:active { transform:translateY(1px); }
.mcard .k { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.mcard h3 { font-size:21px; margin:12px 0 5px; }
.mcard p { margin:0; color:var(--grey-strong); font-size:14px; }
.mcard .go { margin-top:auto; padding-top:16px; color:var(--grey-strong); font-size:18px; transition:color .14s, transform .14s; }
.mcard:hover .go { color:var(--blue); transform:translateX(3px); }

/* ── segmented tabs (osfTabs) — shared across Board, Finance forecast, etc. ── */
.osf-tabs { display:inline-flex; gap:4px; background:var(--card-soft); border:1px solid var(--line);
  border-radius:999px; padding:4px; margin-bottom:18px; }
.osf-tab { font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--grey-strong);
  background:none; border:none; border-radius:999px; padding:7px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.osf-tab.on { background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(20,18,12,.08); }
.osf-tab-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; border-radius:999px; background:var(--blue); color:#fff; font-size:11px; font-weight:600; font-family:var(--font-mono); }

/* ── shared table (osf-table) — new pages use this instead of re-declaring th/td ── */
.osf-table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.osf-table th, .osf-table td { text-align:left; padding:10px 12px; font-size:13px; border-bottom:1px solid var(--line); }
.osf-table th { color:var(--grey-strong); font-weight:500; background:var(--card-soft); }
.osf-table tr:last-child td { border-bottom:none; }
.osf-table td.num, .osf-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
.osf-table tr.click { cursor:pointer; } .osf-table tr.click:hover td { background:var(--card-soft); }

/* ── document preview: a "Preview" pill + a modal PDF/image viewer ── */
.pvbtn { font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; padding:2px 10px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--blue); cursor:pointer; transition:border-color .12s, background .12s; }
.pvbtn:hover { border-color:var(--blue); background:var(--blue-soft); }
.osf-pv { position:fixed; inset:0; z-index:200; background:rgba(20,18,12,.6); display:flex; flex-direction:column; padding:26px; }
.osf-pv-bar { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.osf-pv-name { flex:1; color:#fff; font-family:var(--font-mono); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.osf-pv-btn { font-family:var(--font-sans); font-size:13px; color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3); border-radius:8px; padding:6px 15px; cursor:pointer; text-decoration:none; }
.osf-pv-btn:hover { background:rgba(255,255,255,.26); color:#fff; }
.osf-pv-body { flex:1; width:100%; overflow:auto; border-radius:10px; background:#525659; box-shadow:0 24px 70px rgba(0,0,0,.45);
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:16px; }
.osf-pv-page { background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.4); max-width:100%; }
.osf-pv-img { max-width:100%; height:auto; background:#fff; border-radius:4px; box-shadow:0 2px 12px rgba(0,0,0,.4); }
.osf-pv-msg { color:#e9e7df; font-family:var(--font-sans); font-size:14px; margin:auto; text-align:center; line-height:1.8; }
.osf-pv-msg a { color:#a9c6ff; }

/* ── mobile / small screens ──────────────────────────────────────────────────
   The app bar packs a brand + several action buttons + the avatar; on a phone
   that stacked into 3-4 rows and ate half the viewport. Below 640px the action
   row becomes ONE horizontally-scrollable chip row (common mobile pattern), so
   the header is brand + one 48px row. Board members approve from phones, so
   this is the load-bearing case. */
@media (max-width: 640px) {
  .appbar { position:static; flex-wrap:wrap; gap:8px 12px; padding:10px 14px 8px; }
  .appbar .brand .logo { height:34px; }
  .appbar .brand .name { font-size:18px; }
  .appbar .right { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    width:100%; gap:8px; justify-content:flex-start; padding-bottom:4px;
    scrollbar-width:none; }
  .appbar .right::-webkit-scrollbar { display:none; }
  .appbar .right .btn, .appbar .right > button, .appbar .right a { flex:none; white-space:nowrap; }
  .appbar .right .btn, .appbar .right > button { font-size:13px; padding:8px 12px; }
  #profile { flex:none; }
  .avmenu { position:fixed; left:12px; right:12px; top:auto; min-width:0; }
  .mcard { min-height:auto; padding:18px; }
  .osf-pv { padding:12px; }
  /* preview modal bar: filename gets its own line, buttons wrap below */
  .osf-pv-bar { flex-wrap:wrap; }
  .osf-pv-name { order:-1; flex-basis:100%; }

  /* iOS Safari zooms the whole page when a focused control is under 16px.
     !important so this wins over per-page 13-14px rules AND inline styles
     (importance beats inline) — one rule kills focus-zoom app-wide. */
  input, select, textarea { font-size:16px !important; }

  /* Touch targets (44px Apple guideline): per-page buttons are as small as
     ~29px tall. Don't touch padding (layouts differ per page); force a
     minimum hit height instead. */
  button, .btn { min-height:44px; }
  .avatar { width:44px; height:44px; }
  input[type="checkbox"], input[type="radio"] { min-height:0; width:18px; height:18px; }
}

/* file inputs render at an intrinsic ~250px and overflow narrow cards */
input[type="file"] { max-width:100%; }

/* ── osfFilePick — THE shared drop-field (see brand.js): identical file picking on
   every page. Colours ride on the shared tokens so it fits both page palettes. ── */
.osf-drop { border:1.5px dashed var(--line-strong, var(--line)); border-radius:10px; background:var(--surface, #fff);
  padding:16px 12px; text-align:center; font-size:13px; color:var(--grey-strong, var(--muted, #6b675f));
  cursor:pointer; transition:border-color .15s, background .15s; }
.osf-drop.over { border-color:var(--blue, var(--accent, #2c56a4)); background:var(--blue-soft, var(--bgaccent, #eef1f7)); color:var(--ink); }
.osf-drop u { color:var(--blue, var(--accent, #2c56a4)); }
.osf-drop-hint { color:var(--grey-strong, var(--muted, #6b675f)); font-size:12px; }
.osf-drop-list .osf-drop-file { display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:12px; padding:4px 2px; }
.osf-drop-list .osf-drop-file a { cursor:pointer; color:var(--blue, var(--accent, #2c56a4)); flex:none; }
.osf-drop-list .osf-drop-file span { min-width:0; overflow-wrap:anywhere; }
.osf-drop:hover { border-color:var(--grey-strong, #6b675f); }
.osf-drop:focus-visible { outline:none; border-color:var(--blue, #2c56a4); box-shadow:0 0 0 3px rgba(79,134,240,.14); }
.osf-drop-list .osf-drop-file button { background:none; border:0; padding:2px 4px; font:inherit; font-size:12px;
  color:var(--blue, var(--accent, #2c56a4)); cursor:pointer; flex:none; }

/* ── osfIntake — the consolidated entry flow (intake.js), page-agnostic styling ── */
.itk-dz { border:2px dashed var(--line-strong, var(--line)); border-radius:12px; background:var(--surface, #fff);
  text-align:center; padding:26px 18px; cursor:pointer; transition:border-color .15s, background .15s; }
.itk-dz.over { border-color:var(--blue, #2c56a4); background:var(--blue-soft, #eef1f7); }
.itk-card { background:var(--surface, #fff); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:12px; }
.itk-card.itk-warnc { background:var(--warn-bg, #f7efdc); border-color:var(--warn-line, #e6d3a6); }
.itk-card.itk-bluec { background:var(--blue-soft, #eef1f7); border-color:#c9cedb; }
.itk-label { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-strong, var(--muted)); margin:0 0 5px; }
.itk-sub { color:var(--grey-strong, var(--muted)); font-size:12px; }
.itk-fld { margin-bottom:12px; }
.itk-row { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.itk-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.itk-grid3 { display:grid; grid-template-columns:1fr 130px 170px; gap:12px; }
.itk-choice { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; font-weight:400; color:var(--ink); text-transform:none; letter-spacing:0; }
.itk-seg { display:flex; gap:8px; flex-wrap:wrap; }
.itk-seg button { flex:1; min-width:100px; font-family:inherit; font-size:13px; font-weight:500; padding:8px 12px; border-radius:8px; border:1px solid var(--line); background:var(--surface, #fff); color:var(--ink); cursor:pointer; }
.itk-seg button.on { background:var(--blue-soft, #eaf1ff); border-color:var(--line-strong, #b9c0cf); font-weight:600; }
.itk-msg { font-family:var(--font-mono); font-size:12px; margin:8px 0; } .itk-msg.err { color:var(--red, #b3261e); }
.itk-pill { display:inline-block; font-size:10px; padding:2px 8px; border-radius:999px; border:1px solid var(--warn-line, #e6d3a6); background:var(--warn-bg, #f7efdc); color:var(--warn, #9a6b00); }
.itk-table { width:100%; border-collapse:collapse; }
.itk-table th, .itk-table td { text-align:left; padding:8px 10px; font-size:13px; border-bottom:1px solid var(--line); }
.itk-table th { color:var(--grey-strong, var(--muted)); font-weight:500; }
@media (max-width: 640px) { .itk-grid2, .itk-grid3 { grid-template-columns:1fr; } }