/* Garam Portal — Garam's palette and stand-in fonts (Phil, decision 8d1067bf).
   ============================================================================================================
   THE PALETTE — the one place it lives. Exact hexes from SNAP's "Garam Guidelines" + the chai brown Phil added.
   Copy this :root block as-is to reuse it (the CRM). Everything below refers to these names only.
   Contrast on cream (WCAG): chai brown 9.9:1 (all reading text) · olive 7.9:1 · chili red 3.4:1 (large/bold text
   and fills only — never small text) · coral 2.7:1 (decoration only). No cream text on butter, saffron, blush,
   sky or sage.
   ============================================================================================================ */
:root{
  color-scheme: light;
  /* palette */
  --garam-chai-brown:   #4A2A1C;   /* added by Phil: all reading text and outlines */
  --garam-cream:        #F0E1C1;   /* page ground */
  --garam-chili-red:    #E23312;   /* primary action; cream text on it only at 19px bold or larger */
  --garam-coral-clay:   #EE583F;
  --garam-butter:       #FCD53E;
  --garam-saffron:      #FFAC30;
  --garam-blush:        #FFBBA6;
  --garam-sage:         #92AE4D;
  --garam-olive:        #3E441E;
  --garam-sky:          #6ECBDD;
  --garam-transit-blue: #3375EF;
  /* fonts: free stand-ins (Phil's design boards) until the website design is approved — no brand font files */
  --garam-font-head:   "Archivo", "Arial Narrow", sans-serif;    /* uppercase, 700, width 125% */
  --garam-font-body:   "IBM Plex Mono", ui-monospace, monospace;
  --garam-font-accent: "Yellowtail", cursive;                   /* accent only */

  /* roles (derived from the palette; the muted brown keeps 6.7:1 on cream) */
  --ground: var(--garam-cream);
  --panel: color-mix(in srgb, var(--garam-cream) 55%, #FFFFFF);
  --panel-2: color-mix(in srgb, var(--garam-cream) 80%, var(--garam-saffron));
  --ink: var(--garam-chai-brown);
  --ink-2: color-mix(in srgb, var(--garam-chai-brown) 85%, var(--garam-cream));
  --line: var(--garam-chai-brown);
  --line-soft: color-mix(in srgb, var(--garam-chai-brown) 30%, var(--garam-cream));
  --primary: var(--garam-chili-red);
  --on-primary: var(--garam-cream);
  --warn-bg: var(--garam-butter);           /* warnings: butter + brown + ⚠ — never the chili of an action */
  --over-bg: var(--garam-blush);            /* over budget: blush chip, brown text, ▲ */
  --under-ink: var(--garam-olive);
  --focus: var(--garam-transit-blue);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font:14px/1.55 var(--garam-font-body)}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:2px}
.head,h1,h2,h3{font-family:var(--garam-font-head);font-stretch:125%;font-weight:700;text-transform:uppercase;letter-spacing:.01em}

/* ---------------------------------------------------------------- header */
.top{position:sticky;top:0;z-index:5;background:var(--ground);border-bottom:3px solid var(--line)}
.topin{max-width:1480px;margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* THE LOGO SLOT — one place. Today: the text wordmark. To use a logo file later: put it in public/ (e.g.
   public/garam-logo.png) and in index.html / login.html replace the .wordmark span with
   <img class="logo" src="/garam-logo.png" alt="Garam">. */
.brand{display:flex;align-items:baseline;gap:8px;color:var(--ink);text-decoration:none}
.brand .wordmark{font-family:var(--garam-font-head);font-stretch:125%;font-weight:700;font-size:24px;letter-spacing:.02em;line-height:1}
.brand .logo{height:34px;width:auto;display:block}
.brand .script{font-family:var(--garam-font-accent);font-size:26px;line-height:1;color:var(--primary)}   /* large text: 3:1 is enough */
nav.jump{display:flex;gap:4px 16px;flex-wrap:wrap;flex:1}
nav.jump a{color:var(--ink);text-decoration:none;font-size:13px;font-weight:500;padding:3px 0;border-bottom:3px solid transparent}
nav.jump a:hover{border-bottom-color:var(--line-soft)}
nav.jump a[aria-current="page"]{font-weight:600;border-bottom-color:var(--primary)}
.ent{display:flex;gap:6px}
.chip{background:transparent;border:2px solid var(--line);color:var(--ink);padding:2px 10px;border-radius:999px;font:600 12px var(--garam-font-body);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--garam-cream)}
#portal-bar{max-width:1480px;margin:0 auto;padding:5px 22px 7px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink);border-top:1px solid var(--line-soft)}
#portal-bar .sp{flex:1}
#portal-bar .lvl{display:inline-block;font:600 11px var(--garam-font-body);letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;margin-left:8px;border:2px solid var(--line)}
#portal-bar .lvl.admin{background:var(--ink);color:var(--garam-cream)}
#portal-bar .lvl.owner{background:var(--panel)}
#portal-bar .lvl.editor{background:var(--garam-sage)}
#portal-bar .lvl.viewer{background:var(--warn-bg);border-style:dashed}        /* read-only: obvious */
#portal-bar .lvl.viewer::before{content:"👁 "}

/* ---------------------------------------------------------------- layout */
main{max-width:1480px;margin:0 auto;padding:22px 22px 120px;display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{background:var(--panel);border:2px solid var(--line);grid-column:span 12;display:flex;flex-direction:column;min-width:0}
.hd{display:flex;align-items:baseline;gap:12px;padding:16px 22px 12px;border-bottom:2px solid var(--line);flex-wrap:wrap}
.hd h2{font-size:17px;margin:0}
.hd .src{font-size:12px;color:var(--ink-2)}
.hd .tools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bd{padding:16px 22px 20px;overflow:auto}
.sub-h{margin:0 0 8px;font-size:13px}

/* ---------------------------------------------------------------- controls */
.btn{background:var(--panel);border:2px solid var(--line);color:var(--ink);padding:4px 11px;cursor:pointer;font:500 13px var(--garam-font-body)}
.btn:hover{background:var(--garam-cream)}
.btn:focus-visible,.chip:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* primary = chili red. Cream on chili is 3.4:1, so the label is LARGE (19px bold) — WCAG large text */
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font:700 19px var(--garam-font-head);font-stretch:125%;text-transform:uppercase;padding:3px 14px;line-height:1.25}
.btn.primary:hover{background:color-mix(in srgb, var(--primary) 88%, var(--garam-chai-brown))}
.btn.sm{padding:2px 8px;font-size:12px}
.btn.sm.primary{font-size:19px;padding:1px 10px}
.btn.armed{background:var(--warn-bg);border-style:dashed}
input,select,textarea{font:inherit;font-size:14px;padding:7px 9px;border:2px solid var(--line);background:#FFFFFF;color:var(--ink);width:100%;border-radius:0}
textarea{min-height:76px;resize:vertical}
label.f{display:flex;flex-direction:column;gap:4px;font:600 11px var(--garam-font-body);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
label.f.req>span::after{content:" *"}
label.chk{flex-direction:row;align-items:center;gap:8px}
label.chk input{width:auto}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px;padding:14px;border:2px dashed var(--line);background:var(--garam-cream);margin-bottom:16px}
.form .wide{grid-column:1/-1}
.form .actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------------------------------------------------------------- home tiles */
.tiles{grid-column:span 12;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.tile{background:var(--panel);border:2px solid var(--line);padding:16px 18px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;box-shadow:4px 4px 0 var(--line)}
.tile:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--line)}
.tile h3{margin:0;font-size:14px}
.tile .big{font:700 30px var(--garam-font-head);font-stretch:125%;line-height:1;white-space:nowrap}
.tile[data-tile="budget_lines"] .big{font-size:23px}       /* a dollar figure at 125% width must fit one line */
.tile .sub{font-size:12px;color:var(--ink-2)}
.tile .sub b{color:var(--ink)}

/* ---------------------------------------------------------------- tables */
table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid th{text-align:left;color:var(--ink);font:600 10.5px var(--garam-font-body);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-bottom:2px solid var(--line)}
table.grid td{padding:8px;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.grid td.num,table.grid th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.grid tr.arch td{opacity:.72}
table.grid td.acts{white-space:nowrap;text-align:right}
/* entity tags: different lightness AND shape — CTV a dark olive square, CCH a light sky pill with an outline */
.tag{display:inline-block;font:700 10.5px var(--garam-font-body);letter-spacing:.04em;padding:1px 7px;border:2px solid var(--line);background:var(--panel)}
.tag.CTV{background:var(--garam-olive);border-color:var(--garam-olive);color:var(--garam-cream);border-radius:0}
.tag.CCH{background:var(--garam-sky);color:var(--ink);border-radius:999px}
.tag.CTV::before{content:"■ "}
.tag.CCH::before{content:"● "}
.warn{display:block;width:fit-content;max-width:100%;background:var(--warn-bg);color:var(--ink);font-size:12px;padding:1px 6px;margin-top:4px;border-left:4px solid var(--line)}
.warn::before,.flag::before{content:"⚠ "}
.flag{background:var(--warn-bg);color:var(--ink);padding:0 5px;font-weight:600}
.over{background:var(--over-bg);color:var(--ink);padding:0 5px;font-weight:600}
.over::before{content:"▲ "}
.under{color:var(--under-ink);font-weight:600}
.tile .big .over,.tile .big .under{padding:0 6px}
.empty{color:var(--ink-2);font-size:13px}
.note{font-size:13px;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--line-soft)}
.note .at{font-size:11.5px;color:var(--ink-2)}
.err{border:2px solid var(--primary);color:var(--ink);padding:10px 12px;background:var(--garam-blush)}
.notice{border:2px solid var(--line);background:var(--warn-bg);margin-bottom:18px}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bar input[type=search]{max-width:280px}
#portal-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--garam-cream);border:2px solid var(--ink);padding:10px 16px;font-size:13px;transition:.2s;z-index:50;pointer-events:none;max-width:min(90vw,520px)}
#portal-toast.show{opacity:1;transform:translate(-50%,0)}

/* read-only (the audit login): the write affordances go, and the page says so. The database refuses the writes. */
html[data-role="viewer"] .w{display:none !important}
html[data-role="viewer"] .top{border-bottom-style:dashed}
/* the change log is admin, owner and audit only (decision ab09b086); the database refuses the editor regardless */
html[data-role="editor"] a[data-view="history"]{display:none !important}

/* ---------------------------------------------------------------- phone: tables become stacked cards */
@media (max-width: 760px){
  .topin{padding:8px 16px;gap:8px}
  nav.jump{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  nav.jump a{white-space:nowrap}
  #portal-bar{padding:4px 16px 6px}
  main{padding:16px 16px 100px;gap:14px}
  .hd,.bd{padding-left:14px;padding-right:14px}
  table.grid.stack thead{display:none}
  table.grid.stack,table.grid.stack tbody,table.grid.stack tr,table.grid.stack td{display:block;width:100%}
  table.grid.stack tr{border:2px solid var(--line);margin-bottom:10px;padding:6px 0;background:var(--panel)}
  table.grid.stack td{border:0;padding:4px 10px;text-align:left !important;overflow-wrap:anywhere}
  table.grid.stack td[data-l]::before{content:attr(data-l);display:block;font:600 10px var(--garam-font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
  table.grid.stack td.acts{text-align:left !important;padding-top:8px;white-space:normal}
}