/* ============================================================
   fo-base.css  —  Family Ops shared design tokens + reset
   Single source of truth for the palette. Change a color here
   and it updates on every page that links this file.

   Page-specific tokens (e.g. --violet, --teal, --taupe) and all
   component styles (.card, .btn, layout) stay INLINE in each page.
   ============================================================ */

:root{
  /* --- neutral ramp (canonical: the majority "v2" palette) --- */
  --bg:#0E1420;
  --panel:#161E2B;
  --panel2:#1D2736;
  --line:#26334A;

  /* --- text --- */
  --text:#E6ECF5;
  --dim:#8A97AB;
  --faint:#5C6A80;

  /* --- accents (already consistent across the app) --- */
  --blue:#4C9EFF;
  --green:#40C77E;
  --amber:#FFB021;
  --red:#FF6161;

  /* --- safe-area insets (iPhone Dynamic Island etc.) --- */
  --sa-top:env(safe-area-inset-top,0px);
  --sa-bot:env(safe-area-inset-bottom,0px);

  /* --- aliases so minority-vocabulary pages keep working
         when they drop their own :root block --- */
  --ink:var(--text);
  --card:var(--panel);
  --muted:var(--dim);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  line-height:1.45;
  color-scheme:dark;
}

/* ============================================================
   Shared chrome layer (added for #7 — mobile-safe components).
   These are canonical defaults. A page's own inline <style> loads
   AFTER this file, so any page that already defines .card/.btn/etc.
   keeps its look — this only sets the standard + helps pages that
   don't define a rule, and dedups the .toolbar pattern.
   ============================================================ */

/* iOS: never auto-inflate text on rotate/zoom */
html{ -webkit-text-size-adjust:100%; }

:root{ --fo-tap:44px; }   /* Apple minimum comfortable tap target */

/* --- card --- */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:15px;
}

/* --- buttons --- */
.btn{
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:11px; padding:12px 15px; font:inherit; font-size:15px;
  font-weight:800; cursor:pointer;
}
.btn.primary{ background:var(--blue); border-color:var(--blue); color:#08101E; }

/* --- icon button: canonical, with a guaranteed 44px tap target --- */
.iconbtn{
  background:var(--panel); border:1px solid var(--line); color:var(--dim);
  border-radius:10px; width:var(--fo-tap); height:var(--fo-tap);
  min-width:var(--fo-tap); min-height:var(--fo-tap);
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:16px;
}

/* --- control strip: one correct definition (dedups the .toolbar pages) --- */
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0; }
@media print{ .toolbar{ display:none !important; } }

/* --- reusable OPT-IN horizontal strip that scrolls on small screens
       WITHOUT trapping controls off-row (add class "fo-bar scroll") --- */
.fo-bar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
@media (max-width:760px){
  .fo-bar.scroll{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:4px;
  }
  .fo-bar.scroll::-webkit-scrollbar{ display:none; }
}

/* --- OPT-IN tap-target helper for anything that needs ≥44px --- */
.fo-tap{
  min-width:var(--fo-tap); min-height:var(--fo-tap);
  display:inline-flex; align-items:center; justify-content:center;
}