/* STOFI AUTH-FIRST BOOT GATE (2026-09-09)
   Protected application markup is hidden from the very first CSS paint.
   fi-auth.js adds .fi-authenticated only after /api/me confirms an approved
   session. The auth gate itself remains visible while the app is hidden. */
html:not(.fi-authenticated) body > *:not(#fia-gate):not(#fi-loading){visibility:hidden !important;}
html:not(.fi-authenticated) body > #fia-gate,
html:not(.fi-authenticated) body > #fi-loading{visibility:visible !important;}
html.fi-authenticated body > *{visibility:visible;}

/* ============================================================================
   fi-chrome.css - shared app chrome for every StoFi tool page.
   One header, one toast, one hub-back pill. Include AFTER fi-theme.css.
   ============================================================================ */
body{font-family:Open Sans,Arial,sans-serif}
header.app{position:sticky;top:0;z-index:40;background:var(--banner-bg);border-bottom:1px solid var(--banner-line)}
header.app .bar{max-width:var(--maxw,900px);margin:0 auto;padding:11px 16px;display:flex;align-items:center;gap:12px}
.hamburger{background:none;border:0;padding:6px;margin:-6px;display:flex;flex-direction:column;gap:4px;width:32px;border-radius:6px;cursor:pointer}
.hamburger span{height:2px;width:19px;background:var(--banner-text);border-radius:2px}
.brand{display:flex;align-items:baseline;gap:8px}
.brand .mark{font-weight:800;font-size:18px;letter-spacing:.02em;color:var(--sto);line-height:1}
.brand .sub{font-family:var(--mono,Open Sans,Arial,sans-serif);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--banner-text);font-weight:600;white-space:nowrap}
.logo-mark{height:24px;width:auto;display:block;flex:0 0 auto}
.hub-top{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:#FFD23A;text-decoration:none;font:700 12px Open Sans,Arial,sans-serif;padding:7px 12px;border:1px solid rgba(245,194,0,.55);background:rgba(245,194,0,.12);border-radius:99px;flex:0 0 auto;white-space:nowrap}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--toast-bg);border:1px solid var(--sto-line);color:var(--text);padding:13px 18px;border-radius:10px;font-size:14px;z-index:95;opacity:0;transition:.25s;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center;max-width:calc(100vw - 36px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .ti{color:var(--sto)}
.fi-foot{text-align:center;padding:30px 16px calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--line);margin-top:36px}
.fi-foot-logo{height:18px;width:auto;opacity:.85;display:inline-block}
.fi-foot-txt{margin:10px 0 0;font:10.5px Open Sans,Arial,sans-serif;color:var(--muted-2);letter-spacing:.05em;line-height:1.6}
/* ---- phone-width header: title drops to its own line, pill stays full ---- */
.brand{min-width:0}
.brand .sub{overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){
  header.app .bar{flex-wrap:wrap;gap:10px;row-gap:2px;padding:9px 12px 8px}
  .brand{display:contents}
  .brand .sub{order:9;flex:0 0 100%;padding-top:2px}
  .hub-top{padding:6px 11px;font-size:11px}
}


/* ============================================================================
   2026-08 global StoFi shell
   The primary header is intentionally theme-independent: white, hamburger left,
   black/yellow Sto mark flush right. Tool identity and hub navigation live in a
   separate theme-aware row below the header.
   ============================================================================ */
header.app{
  background:#fff !important;
  border-top:3px solid #2c2c2b;
  border-bottom:1px solid #d8d3c7 !important;
  color:#1a1a1a;
}
header.app .bar{
  max-width:none;
  min-height:54px;
  padding:0 20px;
  gap:12px;
}
header.app .hamburger{margin:0;color:#1a1a1a}
header.app .hamburger span{background:#1a1a1a !important}
header.app .header-logo{
  height:25px;
  width:auto;
  display:block;
  margin-left:auto;
  flex:0 0 auto;
}
/* Legacy header elements are suppressed even on pages not yet converted. */
header.app .brand .sub,
header.app .hub-top{display:none !important}
header.app .brand{margin-left:auto}
header.app .brand .logo-mark{content:url('/sto-mark-dark.png');height:25px}

.fi-tool-context{
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:62px;
  padding:10px max(20px,calc((100% - var(--maxw,900px))/2 + 16px));
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
  color:var(--text);
}
.fi-tool-context__title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono,Open Sans,Arial,sans-serif);
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--text);
}
.fi-tool-context__icon{
  width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--line);border-radius:5px;background:var(--panel);
  color:var(--sto);font-size:13px;
}
.fi-tool-context__home{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  font-weight:650;
  white-space:nowrap;
}
.fi-tool-context__home:hover{border-color:var(--sto);background:var(--sto-soft)}

@media (max-width:600px){
  header.app .bar{flex-wrap:nowrap;min-height:52px;padding:0 14px}
  .fi-tool-context{align-items:stretch;flex-direction:column;gap:8px;padding:11px 14px}
  .fi-tool-context__title{min-height:28px}
  .fi-tool-context__home{margin-left:0;width:100%}
}

/* 2026-08-04 global typography and neutral control treatment */
html,body,button,input,select,textarea{
  font-family:Open Sans,Arial,sans-serif !important;
}

/* Keep tool identity neutral; yellow is reserved for selected actions/accents. */
.fi-tool-context__title{color:var(--text) !important}
.fi-tool-context__icon{
  background:var(--panel) !important;
  border-color:var(--line) !important;
  color:var(--muted) !important;
}

/* Shared status-pill treatment used anywhere a tool exposes a LIVE marker. */
.chip.live,
.live-badge,
.status-live,
.badge-live,
[data-status="live"]{
  background:#FFFFFF !important;
  color:#1A1A1A !important;
  border:1px solid #5F5F5F !important;
  border-radius:0 !important;
  box-shadow:none !important;
}


/* 2026-08-07 error-state accessibility: same warning treatment in every theme */
.toast.err, .fi-error-toast {
  background:var(--error-bg,#B42318) !important;
  border-color:var(--error-bg,#B42318) !important;
  color:var(--error-text,#FFFFFF) !important;
}
.toast.err .ti, .fi-error-toast .ti { color:var(--error-text,#FFFFFF) !important; }


/* ============================================================================
   v239 unified header: identical geometry on hub + every tool.
   Prevent tool-local CSS from making the header taller or clipping the Sto mark.
   ============================================================================ */
header.app{height:58px !important;min-height:58px !important;max-height:58px !important;overflow:visible !important;box-sizing:border-box !important}
header.app .bar{height:55px !important;min-height:55px !important;max-height:55px !important;padding:0 20px !important;box-sizing:border-box !important;flex-wrap:nowrap !important;overflow:visible !important;width:100% !important}
header.app .header-logo,header.app .logo-mark{height:25px !important;max-height:25px !important;width:auto !important;object-fit:contain !important;display:block !important;clip-path:none !important}
#fim-home{margin-left:12px !important;align-self:center !important;overflow:visible !important}
#fim-hubbtn{align-self:center !important}
@media(max-width:600px){header.app{height:56px !important;min-height:56px !important;max-height:56px !important}header.app .bar{height:53px !important;min-height:53px !important;max-height:53px !important;padding:0 14px !important}#fim-home{margin-left:7px !important}}

/* ============================================================================
   v240 hub logo alignment fix.
   The hub has no Return-to-hub button, so the Sto home/logo link must consume
   the remaining header space and sit flush right. On tool pages the Return to
   hub button consumes that space, with the logo immediately after it.
   ============================================================================ */
#fim-home{margin-left:auto !important;margin-right:0 !important;}
#fim-hubbtn{margin-left:auto !important;}
#fim-hubbtn + #fim-home{margin-left:12px !important;margin-right:0 !important;}
@media(max-width:600px){
  #fim-home{margin-left:auto !important;}
  #fim-hubbtn + #fim-home{margin-left:7px !important;}
}