/* ============================================================
   DAZOS COMMAND CENTER — Fable design system v1 (2026-07-21)
   Shared by index.html + section hub pages. Light + dark via
   :root[data-theme="light"|"dark"] (set pre-paint by fable-theme.js).
   Tokens match the Dojo / Pricing Tool v6 design language.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Montserrat:wght@500;600;700;800&display=swap');

:root{
  --acc:#179CD8;
  --acc-light:#3FB0E1;
  --acc-deep:#0F729F;

  --ink:#14171C; --ink-2:#262A33; --ink-3:#3B414B;
  --muted:#6B7280; --dim:#9BA1AB;
  --hairline:rgba(20,23,28,.06);
  --line:rgba(20,23,28,.08);
  --line-2:rgba(20,23,28,.05);
  --line-strong:rgba(20,23,28,.14);
  --background:#F6F6F4;
  --surface:#FFFFFF; --surface-2:#FBFBF9; --surface-3:#F1F1ED; --surface-sunken:#EFEFEB;

  --success-green:#1F8A5B;
  --warning-orange:#C8841C;
  --error-red:#D14A43;
  --accent-purple:#7C5CD6;

  --acc-bg:   color-mix(in oklab, var(--acc) 7%,  var(--surface));
  --acc-soft: color-mix(in oklab, var(--acc) 14%, var(--surface));
  --acc-line: color-mix(in oklab, var(--acc) 28%, transparent);
  --acc-ring: color-mix(in oklab, var(--acc) 22%, transparent);

  --shadow-xs: 0 1px 0 rgba(20,23,28,.02);
  --shadow-sm: 0 1px 2px rgba(20,23,28,.04), 0 1px 3px rgba(20,23,28,.03);
  --shadow-md: 0 1px 2px rgba(20,23,28,.04), 0 8px 20px -8px rgba(20,23,28,.10);
  --shadow-lg: 0 4px 12px -2px rgba(20,23,28,.06), 0 24px 48px -12px rgba(20,23,28,.18);
  --shadow-pop: 0 30px 80px -20px rgba(20,23,28,.35), 0 12px 28px -10px rgba(20,23,28,.18);

  --radius-card:14px; --radius-tile:10px; --radius-ctrl:9px; --radius-pill:999px;

  --font-sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --scroll-thumb:rgba(20,23,28,.12);
  --scroll-thumb-hover:rgba(20,23,28,.26);
}
:root[data-theme="dark"]{
  --background:#0A0D14;
  --surface:#10141C; --surface-2:#161B25; --surface-3:#1E2532; --surface-sunken:#0A0D14;
  --ink:#EDEFF4; --ink-2:#C8CCD6; --ink-3:#A3A9B5;
  --muted:#7A8190; --dim:#5C6271;
  --hairline:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.04);
  --line-strong:rgba(255,255,255,.14);
  --success-green:#22C55E;
  --warning-orange:#F59E0B;
  --error-red:#EF4444;
  --accent-purple:#A78BFA;
  --shadow-xs: 0 1px 0 rgba(0,0,0,.10);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.20), 0 1px 3px rgba(0,0,0,.16);
  --shadow-md: 0 1px 2px rgba(0,0,0,.22), 0 8px 20px -8px rgba(0,0,0,.45);
  --shadow-lg: 0 4px 12px -2px rgba(0,0,0,.30), 0 24px 48px -12px rgba(0,0,0,.55);
  --shadow-pop: 0 30px 80px -20px rgba(0,0,0,.65), 0 12px 28px -10px rgba(0,0,0,.45);
  --scroll-thumb:rgba(255,255,255,.10);
  --scroll-thumb-hover:rgba(255,255,255,.24);
}

/* ============ Base ============ */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scrollbar-gutter:stable; }
body{
  font-family:var(--font-sans);
  font-feature-settings:"ss01" 1, "cv11" 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  background:var(--background);
  color:var(--ink);
  min-height:100vh;
  font-size:14px;
  line-height:1.55;
}
/* soft brand washes + grain — never a flat void */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page-washes{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 45% at 12% -8%, color-mix(in oklab, var(--acc) 7%, transparent), transparent 70%),
    radial-gradient(55% 40% at 95% 4%, color-mix(in oklab, var(--acc-deep) 6%, transparent), transparent 70%);
}
:root[data-theme="dark"] .page-washes{
  background:
    radial-gradient(60% 45% at 12% -8%, color-mix(in oklab, var(--acc) 10%, transparent), transparent 70%),
    radial-gradient(55% 40% at 95% 4%, color-mix(in oklab, var(--acc-deep) 9%, transparent), transparent 70%),
    radial-gradient(50% 35% at 50% 108%, color-mix(in oklab, var(--acc) 6%, transparent), transparent 70%);
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--scroll-thumb); border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background:var(--scroll-thumb-hover); }
::-webkit-scrollbar-track{ background:transparent; }

a{ color:var(--acc); text-decoration:none; transition:color .15s ease; }
a:hover{ color:var(--acc-deep); }
:root[data-theme="dark"] a:hover{ color:var(--acc-light); }

h1,h2,h3,h4{ color:var(--ink); font-weight:650; letter-spacing:-.015em; }

/* ============ Layout ============ */
.fc-container{ max-width:1180px; margin:0 auto; padding:26px 28px 80px; }

/* ============ Header / hero ============ */
.fc-header{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
  padding:20px 26px;
  margin-bottom:22px;
  position:relative; overflow:hidden; isolation:isolate;
}
.fc-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--acc) 6%, transparent), transparent 55%);
  pointer-events:none;
}
.fc-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--acc) 22%, var(--acc-deep) 78%, transparent 100%);
  opacity:.5; pointer-events:none;
}
.fc-header .fh-left{ display:flex; align-items:center; gap:18px; min-width:0; }
.fc-header .fh-logo{ height:40px; display:block; flex:0 0 auto; }
.fc-header h1{ font-size:22px; line-height:1.2; }
.fc-header .fh-sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.fc-header .fh-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fc-header .fh-welcome{ font-size:13px; color:var(--ink-2); font-weight:550; margin-right:4px; }

/* Hub hero (sub pages) */
.fc-hero{ text-align:center; padding:30px 26px 26px; }
.fc-hero h1{ font-size:26px; }
.fc-hero .fh-sub{ font-size:13px; margin-top:6px; }

/* ============ Buttons ============ */
.fc-btn{
  padding:8px 14px;
  border:1px solid var(--line); border-radius:var(--radius-ctrl);
  background:var(--surface); color:var(--ink) !important;
  font-family:var(--font-sans); font-size:12.5px; font-weight:550; letter-spacing:-.005em;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
  box-shadow:var(--shadow-xs);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  text-decoration:none;
}
.fc-btn:hover{ background:var(--surface-2); border-color:var(--line-strong); color:var(--ink) !important; }
.fc-btn:active{ transform:translateY(1px); }
.fc-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--acc-ring); }
.fc-btn-primary{
  background:linear-gradient(180deg, var(--acc-light), var(--acc-deep));
  color:#fff !important;
  border:1px solid color-mix(in oklab, var(--acc-deep) 70%, #000);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 1px 2px rgba(20,23,28,.10),
    0 8px 16px -8px color-mix(in oklab, var(--acc) 60%, transparent);
}
.fc-btn-primary:hover{ background:linear-gradient(180deg, color-mix(in oklab, var(--acc-light) 88%, #fff), var(--acc-deep)); color:#fff !important; }
.fc-btn-ghost-danger{ color:var(--error-red) !important; border-color:color-mix(in oklab, var(--error-red) 30%, transparent); }
.fc-btn-ghost-danger:hover{ background:color-mix(in oklab, var(--error-red) 7%, var(--surface)); color:var(--error-red) !important; }

/* Back link (hub pages) */
.fc-back{
  position:fixed; top:16px; left:16px; z-index:90;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px;
  background:color-mix(in oklab, var(--surface) 85%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--line-strong); border-radius:var(--radius-pill);
  color:var(--ink) !important; font-size:12.5px; font-weight:550;
  box-shadow:var(--shadow-md);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fc-back:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg); border-color:var(--acc); color:var(--ink) !important; }

/* ============ Tool cards (main grid + hub grids) ============ */
.fc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(255px, 1fr)); gap:16px; }
.fc-card{
  position:relative;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:22px 22px 20px;
  box-shadow:var(--shadow-sm);
  cursor:pointer; user-select:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; gap:12px;
  color:var(--ink);
}
.fc-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--acc) 6%, transparent), transparent 55%);
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.fc-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.fc-card:hover::before{ opacity:1; }
a.fc-card{ color:var(--ink) !important; }
.fc-card .fcc-icon{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:21px; line-height:1;
  background:linear-gradient(135deg, var(--acc-light), var(--acc-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 14px -6px color-mix(in oklab, var(--acc) 55%, transparent);
  flex:0 0 auto;
}
.fc-card .fcc-icon img{ width:30px; height:30px; object-fit:contain; border-radius:7px; }
.fc-card h3{ font-size:16px; font-weight:650; letter-spacing:-.012em; }
.fc-card p{ font-size:12.5px; color:var(--muted); line-height:1.55; flex:1; }
.fc-card .fcc-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Status / badge pills */
.fc-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase;
  border-radius:var(--radius-pill); padding:3px 10px;
  border:1px solid transparent;
}
.fc-pill.active{
  color:var(--success-green);
  background:color-mix(in oklab, var(--success-green) 9%, var(--surface));
  border-color:color-mix(in oklab, var(--success-green) 30%, transparent);
}
.fc-pill.active::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--success-green);
}
.fc-pill.info{
  color:var(--acc);
  background:var(--acc-bg);
  border-color:var(--acc-line);
}
.fc-pill.new{
  color:#fff;
  background:linear-gradient(180deg, var(--acc-light), var(--acc-deep));
}
.fc-pill.special{
  color:var(--accent-purple);
  background:color-mix(in oklab, var(--accent-purple) 10%, var(--surface));
  border-color:color-mix(in oklab, var(--accent-purple) 32%, transparent);
}

/* Feature checklists inside hub cards */
.fc-features{ list-style:none; padding:12px 0 0; margin:10px 0 0; border-top:1px solid var(--hairline); }
.fc-features li{
  font-size:12px; color:var(--ink-3); padding:4.5px 0; line-height:1.45;
  display:flex; gap:8px; align-items:baseline;
}
.fc-features li::before{ content:"✓"; color:var(--acc); font-weight:700; flex:0 0 auto; }

/* ============ Sections ============ */
.fc-section{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:22px 24px;
  box-shadow:var(--shadow-sm); margin-top:22px;
}
.fc-section-title{
  font-size:14.5px; font-weight:600; letter-spacing:-.012em;
  display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:16px;
}
.fc-sub-label{
  font-size:10.5px; font-weight:600; color:var(--muted); text-transform:uppercase;
  letter-spacing:.08em; margin:18px 0 12px; display:flex; align-items:center; gap:10px;
}
.fc-sub-label::after{ content:""; flex:1; height:1px; background:var(--hairline); }

/* Social / resource buttons */
.fc-socials{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.fc-socials a{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink-2) !important; font-size:12.5px; font-weight:550;
  transition:background .15s, border-color .15s, transform .15s, color .15s;
}
.fc-socials a:hover{ border-color:var(--acc); color:var(--ink) !important; transform:translateY(-1px); }

/* Resource / agenda link rows */
.fc-linkrow{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; margin-bottom:8px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-tile);
  color:var(--ink-2) !important; font-size:13px; font-weight:500;
  transition:border-color .15s, background .15s, transform .15s;
}
.fc-linkrow:hover{ border-color:var(--acc); background:var(--acc-bg); color:var(--ink) !important; transform:translateY(-1px); }
.fc-linkrow.primary{
  justify-content:center; font-weight:650;
  background:var(--acc-bg); border-color:var(--acc-line); color:var(--acc) !important;
}
.fc-linkrow.primary:hover{ background:var(--acc-soft); }

/* ============ Modals ============ */
.fc-modal-overlay{
  display:none; position:fixed; inset:0; z-index:2000;
  align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--ink) 55%, transparent);
  padding:16px;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.fc-modal-overlay.show{ display:flex; }
.fc-modal-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-card); max-width:560px; width:100%;
  max-height:88vh; overflow:auto; padding:24px;
  box-shadow:var(--shadow-pop);
}
.fc-modal-card h3{ font-size:18px; margin-bottom:6px; }

/* ============ Theme toggle (injected by fable-theme.js) ============ */
#fableThemeBtn{
  position:fixed; bottom:18px; right:18px; z-index:1500;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--line-strong);
  color:var(--ink); font-size:16px; cursor:pointer;
  box-shadow:var(--shadow-md);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#fableThemeBtn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg); border-color:var(--acc); }
/* Inline header variant — sits beside Documents/Admin/Logout */
#fableThemeBtn.fable-theme-inline{
  position:static; z-index:auto;
  width:34px; height:34px; flex:0 0 auto;
  border:1px solid var(--line);
  box-shadow:var(--shadow-xs);
}
#fableThemeBtn.fable-theme-inline:hover{ transform:none; box-shadow:var(--shadow-xs); background:var(--surface-2); border-color:var(--line-strong); }

/* ============ Responsive ============ */
@media (max-width:768px){
  .fc-container{ padding:16px 14px 90px; }
  .fc-header{ padding:16px; }
  .fc-header h1{ font-size:18px; }
  .fc-grid{ grid-template-columns:1fr; }
  .fc-back{ top:10px; left:10px; }
}
@media (max-width:480px){
  /* stacked header buttons go full width — match them instead of a stretched circle */
  #fableThemeBtn.fable-theme-inline{ width:100%; border-radius:var(--radius-ctrl); min-height:44px; }
}