/* ============================================================================
   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:system-ui,-apple-system,'Segoe UI',Roboto,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(--info-text,var(--sto));line-height:1}
.brand .sub{font-family:var(--mono,ui-monospace,monospace);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 system-ui;padding:7px 12px;border:1px solid rgba(253,205,6,.55);background:rgba(253,205,6,.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(--info-text,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 ui-monospace,monospace;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}
}