/* AbleSpeak Funding Manager — the shared design system.
   Every page links this before its own <style>; a page's block adds only what
   is its own. app.js puts data-theme="light|dark" on <html> before the first
   paint, so the dark tokens below need no prefers-color-scheme copy. */

/* ============================= Tokens ============================= */
:root{
  color-scheme:light;
  --bg-base:#F8F7F3;
  --bg-sidebar:#F1EFE9;
  --bg-surface:#FFFFFF;
  --bg-elevated:#F3F1EB;
  --bg-input:#FFFFFF;
  --border:rgba(18,20,42,.09);
  --border-strong:rgba(18,20,42,.16);
  --text-primary:#12142A;
  --text-secondary:#454A66;
  --text-muted:#6B7090;
  --accent-gold:#F5A623;
  --accent-gold-hover:#EA9A14;
  --accent-gold-text:#8A5A08;
  --accent-gold-display:#C47F00;   /* AbleSpeak gold, deepened for large type (24px+): 3.3:1 on white */
  --accent-gold-ink:#2A1A00;
  /* The desktop app's primary button: a gradient, a light top edge and a gold glow. */
  --accent-gold-grad:linear-gradient(180deg, #FFBE5E 0%, #F3A01C 100%);
  --accent-gold-grad-hover:linear-gradient(180deg, #FFC978 0%, #FFAE2E 100%);
  --accent-gold-lift:inset 0 1px 0 rgba(255,255,255,.34), 0 1px 2px rgba(18,20,42,.16), 0 6px 16px -8px rgba(245,166,35,.55);
  --accent-gold-soft:rgba(245,166,35,.14);
  --accent-gold-wash:rgba(245,166,35,.10);
  --accent-teal:#2FBF8F;
  --accent-teal-text:#0B7A5C;
  --accent-teal-ink:#04241A;
  --accent-teal-soft:rgba(47,191,143,.14);
  --danger:#D63B46;
  --danger-text:#9B2A35;
  --danger-soft:rgba(214,59,70,.10);
  --shadow-sm:0 1px 2px rgba(18,20,42,.05), 0 1px 1px rgba(18,20,42,.03);
  --shadow-md:0 4px 12px rgba(18,20,42,.06), 0 14px 34px rgba(18,20,42,.08);
  --focus-ring:0 0 0 3px rgba(245,166,35,.40);
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --app-bar-h:56px;
  /* Page headers line up with the page's content column: a page sets these
     to its own wrapper's max-width and side padding. */
  --page-max:1180px;
  --page-pad:22px;
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code","SF Mono","Segoe UI Mono",Consolas,"Liberation Mono",Menlo,monospace;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg-base:#0D0F1C;
  --bg-sidebar:#111326;
  --bg-surface:#161930;
  --bg-elevated:#1E2140;
  --bg-input:#1A1D38;
  --border:rgba(168,176,214,.12);
  --border-strong:rgba(168,176,214,.22);
  --text-primary:#F1F2FA;
  --text-secondary:#B3B8D0;
  --text-muted:#878DAD;
  --accent-gold-hover:#FFB955;
  --accent-gold-text:#FFC880;
  --accent-gold-display:#F5A623;
  --accent-gold-soft:rgba(245,166,35,.16);
  --accent-gold-wash:rgba(245,166,35,.08);
  --accent-teal-text:#79E8C4;
  --accent-teal-soft:rgba(47,191,143,.16);
  --danger:#E5626B;
  --danger-text:#FF9AA2;
  --danger-soft:rgba(229,98,107,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 2px 6px rgba(0,0,0,.25), 0 10px 28px rgba(0,0,0,.35);
  --focus-ring:0 0 0 3px rgba(245,166,35,.50);
  --accent-gold-lift:inset 0 1px 0 rgba(255,255,255,.34), 0 1px 2px rgba(0,0,0,.3), 0 6px 16px -8px rgba(245,166,35,.5);
}

/* While the theme flips, nothing animates: otherwise every border and
   background with its own transition changes on its own clock. */
.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:none !important;}

/* ============================= Base ============================= */
html{-webkit-text-size-adjust:100%; accent-color:var(--accent-gold);}
body{
  font-family:var(--font-ui);
  background:var(--bg-base);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent-gold-soft);}
[hidden]{display:none !important;}
*{scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;}

/* ============================= App bar =============================
   <app-nav> is filled in by app.js while the page is still parsing; the
   fixed height here keeps the page from jumping while it does. */
app-nav,theme-toggle{-webkit-tap-highlight-color:transparent;}
app-nav{
  display:block; flex:0 0 auto;
  height:var(--app-bar-h);
  position:relative; z-index:30;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  box-shadow:inset 0 3px 0 var(--accent-gold);   /* the AbleSpeak gold line across the top */
}
.app-bar{
  height:100%;
  display:flex; align-items:center; gap:4px;
  padding:0 14px 0 12px;
}
.app-brand{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  padding:6px 10px 6px 4px; margin-right:10px;
  border-radius:10px; color:inherit; text-decoration:none;
}
.app-brand img{width:30px; height:30px; border-radius:50%; display:block;}
.app-brand-word{display:flex; flex-direction:column; line-height:1.15;}
.app-brand-word b{font-size:14px; font-weight:700; letter-spacing:-.01em;}
.app-brand-word span{font-size:11.5px; font-weight:500; color:var(--text-muted);}

.app-tabs{
  display:flex; align-items:stretch; gap:2px;
  height:100%; min-width:0;
  overflow-x:auto; scrollbar-width:none;
}
.app-tabs::-webkit-scrollbar{display:none;}
.app-tab{
  position:relative; flex:0 0 auto;
  display:flex; align-items:center;
  color:var(--text-secondary); text-decoration:none;
}
.app-tab-in{
  display:flex; align-items:center; gap:7px;
  padding:7px 11px; border-radius:9px;
  font-size:13.5px; font-weight:550; white-space:nowrap;
  transition:background-color .12s ease, color .12s ease;
}
.app-tab svg{width:16px; height:16px; flex:0 0 auto;}
.app-tab:hover{color:var(--text-primary);}
.app-tab:hover .app-tab-in{background:var(--bg-elevated);}
.app-tab:focus-visible{outline:none;}
.app-tab:focus-visible .app-tab-in{box-shadow:var(--focus-ring);}
.app-tab[aria-current="page"]{color:var(--text-primary);}
.app-tab[aria-current="page"] .app-tab-in{font-weight:650; background:var(--accent-gold-soft);}
.app-tab[aria-current="page"] svg{color:var(--accent-gold-text);}
.app-tab[aria-current="page"]::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-1px;
  height:2px; border-radius:2px 2px 0 0; background:var(--accent-gold);
}

.app-actions{margin-left:auto; display:flex; align-items:center; gap:6px; flex:0 0 auto; padding-left:8px;}

/* the light / dark switch, used in the bar and on its own on the login page */
theme-toggle{display:inline-flex;}
.theme-toggle{
  width:36px; height:36px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--border);
  background:transparent; color:var(--text-secondary); cursor:pointer;
  transition:background-color .12s ease, color .12s ease, border-color .12s ease;
}
.theme-toggle:hover{background:var(--bg-elevated); color:var(--text-primary); border-color:var(--border-strong);}
.theme-toggle:focus-visible{outline:none; box-shadow:var(--focus-ring);}
.theme-toggle svg{width:17px; height:17px;}
.theme-toggle .ic-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none;}

/* phone: the section links fold into a menu under the current section's name */
.app-menu-btn{
  display:none; align-items:center; gap:6px; min-width:0;
  height:36px; padding:0 10px 0 12px;
  border-radius:10px; border:1px solid var(--border);
  background:var(--bg-surface); color:var(--text-primary);
  font:600 14px/1 var(--font-ui); cursor:pointer;
}
.app-menu-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.app-menu-btn svg{width:16px; height:16px; flex:0 0 auto; color:var(--text-muted); transition:transform .15s ease;}
.app-menu-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.app-menu-btn:focus-visible{outline:none; box-shadow:var(--focus-ring);}
.app-menu{
  position:absolute; top:100%; left:0; right:0;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-md);
  padding:6px 10px 10px;
  display:flex; flex-direction:column; gap:2px;
}
.app-menu a{
  display:flex; align-items:center; gap:12px;
  min-height:46px; padding:0 12px; border-radius:10px;
  color:var(--text-secondary); text-decoration:none;
  font-size:15px; font-weight:550;
}
.app-menu a svg{width:18px; height:18px; flex:0 0 auto;}
.app-menu a:hover{background:var(--bg-elevated); color:var(--text-primary);}
.app-menu a[aria-current="page"]{background:var(--accent-gold-soft); color:var(--text-primary); font-weight:650;}
.app-menu a[aria-current="page"] svg{color:var(--accent-gold-text);}

@media (max-width:1100px){
  .app-tab-in{padding:8px 10px;}
  .app-tab-label{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  .app-tab svg{width:18px; height:18px;}
}
@media (max-width:760px){
  :root{--app-bar-h:54px;}
  .app-bar{padding:0 10px 0 8px; gap:8px;}
  .app-brand{margin-right:0; padding:4px;}
  .app-brand-word{display:none;}
  .app-tabs{display:none;}
  .app-menu-btn{display:inline-flex;}
}
@media (prefers-reduced-motion:reduce){
  .app-menu-btn svg{transition:none;}
}

/* ============================= Page header =============================
   The title row under the app bar on every page except the Assistant (which
   lays out its own). Actions sit on the right and wrap under on a phone. */
body > .topbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 10px;
  padding:20px max(var(--page-pad), calc((100% - var(--page-max)) / 2 + var(--page-pad))) 18px;
  background:linear-gradient(180deg, var(--accent-gold-wash), transparent);
  border-bottom:1px solid var(--border);
}
body > .topbar h1{
  margin:0; font-size:21px; font-weight:700; letter-spacing:-.02em; line-height:1.25;
  text-wrap:balance;
}
body > .topbar .sub{font-size:13px; color:var(--text-muted); margin-top:3px; line-height:1.45;}
body > .topbar .spacer{flex:1;}
.page-back{
  display:inline-flex; align-items:center; gap:4px; margin-bottom:4px;
  font-size:12.5px; font-weight:600; color:var(--text-muted); text-decoration:none;
}
.page-back:hover{color:var(--text-primary);}
@media (max-width:640px){
  body > .topbar{padding:16px 16px 14px; gap:10px 8px;}
  body > .topbar > div:first-child{flex:1 1 100%; min-width:0;}
  body > .topbar .spacer{display:none;}
  body > .topbar h1{font-size:19px;}
  body > .topbar .sub{font-size:12.5px;}
}

/* ============================= Buttons =============================
   .ghost is the standard secondary button on every page; .ghost.gold is the
   one primary action a header may have. */
.ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:36px; padding:0 14px;
  border-radius:10px; border:1px solid var(--border-strong);
  background:var(--bg-surface); color:var(--text-primary);
  font:600 13px/1.2 var(--font-ui); text-decoration:none; white-space:nowrap;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ghost:hover{background:var(--bg-elevated);}
.ghost:focus-visible{outline:none; box-shadow:var(--focus-ring);}
.ghost:disabled{opacity:.45; cursor:default;}
.ghost svg{width:15px; height:15px; flex:0 0 auto;}
.ghost.small{min-height:30px; padding:0 10px; font-size:12px; border-radius:8px;}
.ghost.gold{background:var(--accent-gold-grad); border-color:transparent; color:var(--accent-gold-ink); box-shadow:var(--accent-gold-lift);}
.ghost.gold:hover{background:var(--accent-gold-grad-hover);}
@media (max-width:640px){
  .ghost{min-height:40px;}
  .ghost.small{min-height:34px;}
}

/* ============================= Content building blocks =============================
   Shared so that status and labels read the same on every page.
   .status is a dot and a word (the default way to show a state); .badge is a
   small tinted label for the one thing on a row that deserves colour. */
.status{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:550; color:var(--text-secondary); white-space:nowrap;}
.status::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--status, var(--text-muted)); flex:0 0 auto;}
.status.good{--status:var(--accent-teal);}
.status.warn{--status:var(--accent-gold);}
.status.bad{--status:var(--danger);}
.badge{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:600; line-height:1.5; background:var(--bg-elevated); color:var(--text-secondary); white-space:nowrap;}
.badge.good{background:var(--accent-teal-soft); color:var(--accent-teal-text);}
.badge.warn{background:var(--accent-gold-soft); color:var(--accent-gold-text);}
.badge.bad{background:var(--danger-soft); color:var(--danger-text);}

/* ============================= Footer =============================
   <app-footer> on every page: a rounded strip with the AbleSpeak gold border.
   The `compact` version is for full-height app screens (Assistant,
   Opportunities) so it costs as little working space as possible. */
app-footer{display:block; flex:0 0 auto;}
.app-footer{
  box-sizing:border-box;
  width:calc(100% - 2 * var(--page-pad)); max-width:calc(var(--page-max) - 2 * var(--page-pad));
  margin:32px auto 24px;
  padding:14px 20px; display:flex; justify-content:center; align-items:center; gap:6px 10px; flex-wrap:wrap;
  border:1.5px solid var(--accent-gold); border-radius:16px;
  background:var(--accent-gold-wash);
  font:400 12.5px/1.4 var(--font-ui); color:var(--text-secondary); text-align:center;
}
.app-footer img{width:18px; height:18px; border-radius:50%; display:block;}
app-footer[compact] .app-footer{width:auto; max-width:none; margin:8px 12px 10px; padding:8px 16px; border-radius:12px; font-size:12px;}
@media (max-width:640px){
  .app-footer{width:calc(100% - 32px); margin:24px auto 16px;}
}

/* ============================= Touch screens =============================
   Phones and tablets: nothing anyone has to tap is smaller than a fingertip
   (40px). !important because many controls set a smaller size on purpose
   for the mouse; on touch that size gives way. Text links get a taller tap
   area from padding, cancelled by a negative margin, so the layout does not
   move. The screenshot-remove dot in the Assistant's composer is exempt: it
   sits on a 56px thumbnail it would otherwise cover. */
@media (pointer:coarse){
  button:not(.shot button), select, summary, textarea, [role="button"], .ghost,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]){
    min-height:40px !important;
  }
  button:not(.shot button){min-width:40px !important;}
  input[type="checkbox"],input[type="radio"]{width:22px !important; height:22px !important;}
  label:has(> input[type="checkbox"]),label:has(> input[type="radio"]){min-height:40px;}
  summary{box-sizing:border-box; padding-block:8px;}
  .app-brand,.alert-pill{min-height:40px;}
  .panel-head > a,.page-back,td > a.name,td > a.draft,.card h3 > a{padding-block:12px; margin-block:-12px;}
}

/* ============================= Print ============================= */
@media print{
  app-nav,theme-toggle,app-footer{display:none !important;}
}