/* ============================================================================
   Sto Field Intelligence — shared design system
   2026-08-07
   Approved-branding layer carried over from the corporate build at
   stofi.stocorp.com. Loaded after fi-theme.css and fi-chrome.css on every
   screen. The rules below are corporate's verbatim; only the @font-face
   preamble is ours, because the layer sets Open Sans but nothing loads it.
   ========================================================================== */

/* Self-hosted Open Sans (latin subset, four weights). Self-hosted rather than
   Google Fonts at runtime so it works offline like everything else. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/shared/fonts/open-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/shared/fonts/open-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/shared/fonts/open-sans-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url('/shared/fonts/open-sans-latin-800-normal.woff2') format('woff2');}

:root,
:root[data-theme="dark"] {
  /* Approved Sto accent family */
  --sto-blue-1:#617489; /* Blue grey 1 — RGB 97 116 137 */
  --sto-blue-2:#929FB2; /* Blue grey 2 — RGB 146 159 178 */
  --sto-blue-3:#AFB8C7; /* Blue grey 3 — RGB 175 184 199 */
  --info:var(--sto-blue-1);
  --info-hover:var(--sto-blue-2);
  --info-soft:var(--sto-blue-3);

  /* Shared semantic colors */
  --warning-bg:#A92720;
  --warning-border:#8E211B;
  --warning-text:#FFFFFF;
  --icon:#6D7379;
  --icon-bg:#F7F7F6;
  --icon-border:#C9CDD0;

  /* Informational text color, theme-adaptive. Everything that used to be
     yellow text (labels, tags, links, meta) points here now; yellow itself is
     reserved for actions and active states. */
  --info-text:var(--sto-blue-1);

  /* Typography */
  --sans:'Open Sans',Arial,sans-serif;
  --mono:'Open Sans',Arial,sans-serif;
}

:root[data-theme="light"] {
  --bg:#F2F3F3;
  --panel:#FFFFFF;
  --panel-2:#F7F8F8;
  --raise:#EAECED;
  --line:#CFD3D5;
  --line-soft:#DFE2E4;
  --text:#171717;
  --muted:#555B60;
  --muted-2:#737A80;
  --icon:#687178;
  --icon-bg:#F7F7F6;
  --icon-border:#C9CDD0;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg:#F2F3F3;
    --panel:#FFFFFF;
    --panel-2:#F7F8F8;
    --raise:#EAECED;
    --line:#CFD3D5;
    --line-soft:#DFE2E4;
    --text:#171717;
    --muted:#555B60;
    --muted-2:#737A80;
    --icon:#687178;
    --icon-bg:#C9CDD0;
    --icon-border:#C9CDD0;
  }
}

/* Open Sans everywhere. Keep iconography as SVG/Unicode rather than icon fonts. */
html,body,button,input,textarea,select,option,label,a,p,span,div,section,article,
header,footer,nav,main,aside,table,thead,tbody,tfoot,tr,th,td,ul,ol,li,
h1,h2,h3,h4,h5,h6,small,strong,b,em{
  font-family:'Open Sans',Arial,sans-serif;
}

/* Permanent app shell: white header, hamburger left, Sto logo flush right. */
header.app{
  background:#FFFFFF !important;
  color:#171717 !important;
  border-top:0 !important;
  border-bottom:1px solid #D5D8DA !important;
}
header.app .bar{max-width:none !important;width:100% !important;}
header.app .hamburger{color:#171717 !important;}
header.app .hamburger span{background:#171717 !important;}
header.app .header-logo{margin-left:auto !important;}
/* Everything inside the permanent white header reads dark, both themes. The
   sub label was inheriting theme text color and vanished on white. */
header.app .sub,
header.app .brand,
header.app .bar,
header.app a:not(.hub-top){color:#171717 !important;}
header.app .hub-top{border-color:#C9CDD0 !important;color:#171717 !important;background:#FFFFFF !important;}
/* Shared-menu header pieces (fi-menu.js): tool name, burger, Return to hub. */
header.app #fim-brand{color:#171717 !important;}
header.app #fim-brand:hover{color:#B08A00 !important;}
header.app #fim-burger span{background:#171717 !important;}
header.app #fim-hubbtn{color:#171717 !important;border-color:#C9CDD0 !important;background:#FFFFFF !important;}
header.app #fim-hubbtn:hover{border-color:#B08A00 !important;color:#B08A00 !important;}
/* Pages that swap logos by theme inside the header: always the light-bg pair. */
header.app .logo-light{display:inline-block !important;}
header.app .logo-dark{display:none !important;}

/* Context strip layout: the approved layer colors these classes but the
   corporate build kept layout in page styles we don't have. This is that
   layout, matched to the stofi.stocorp.com screenshots. */
.fi-tool-context{
  display:flex;align-items:center;gap:11px;
  padding:10px 16px;
  position:sticky;top:64px;z-index:39;
}
.fi-tool-context__icon{
  width:26px;height:26px;border-radius:6px;border:1px solid;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;flex:0 0 auto;
}
.fi-tool-context__title{
  font:700 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fi-tool-context__home{
  font:600 13px var(--sans);text-decoration:none;
  border:1px solid;border-radius:9px;padding:8px 13px;white-space:nowrap;
}
header.app .bar{display:flex;align-items:center;min-height:64px;padding:0 16px;box-sizing:border-box}
header.app .hamburger{
  width:46px;height:42px;border:1.5px solid #171717;border-radius:12px;background:#FFFFFF;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;padding:0;flex:0 0 auto;
}
header.app .hamburger span{display:block;width:20px;height:2px;background:#171717;border-radius:1px}
header.app .hamburger:hover{background:#F2F3F3}
/* The shared menu's injected burger gets the same rounded-outline treatment. */
header.app #fim-burger{
  background:#FFFFFF !important;border:1.5px solid #171717 !important;border-radius:12px !important;
  width:46px !important;height:42px !important;padding:0 !important;margin:0 12px 0 0 !important;
  display:inline-flex !important;flex-direction:column;align-items:center;justify-content:center;gap:5px !important;
}
header.app #fim-burger span{width:20px !important;height:2px !important;background:#171717 !important}
header.app #fim-burger:hover{background:#F2F3F3 !important}
header.app .header-logo{height:32px;width:auto;display:block}

/* Context row under header: page identity + return link, never inside header. */
.fi-tool-context{
  background:var(--panel-2) !important;
  border-bottom:1px solid var(--line) !important;
}
.fi-tool-context__title{color:var(--sto-blue-1) !important;}
.fi-tool-context__icon{
  color:var(--icon) !important;
  background:var(--icon-bg) !important;
  border-color:var(--icon-border) !important;
}
.fi-tool-context__home{
  color:var(--text) !important;
  background:var(--panel) !important;
  border-color:var(--line) !important;
}
.fi-tool-context__home:hover{border-color:var(--sto-blue-2) !important;background:var(--panel-2) !important;}

/* Informational hierarchy: approved Sto Blue Grey 1, never yellow. */
.eyebrow,
.label,
.section-label,
.section-title,
.kicker,
.overline,
.seg,
.intro .eyebrow,
.readout b,
.reorder-hint .linkbtn,
.crumbs,
.crumbs a,
.crumbs button,
.visit-head .vt,
.card > h2 .n,
.sheet-body .ver,
.sheet-body .step .n,
.fi-meta,
.fi-section-label{
  color:var(--sto-blue-1) !important;
}

/* Text links use the approved blue; primary action buttons remain Sto yellow. */
a:not(.btn-primary):not(.primary):not(.gen):not(.hub-top):not(.tile),
.linkbtn,
.text-link{
  text-decoration-color:currentColor;
}
.linkbtn,.text-link{color:var(--sto-blue-1) !important;}
.linkbtn:hover,.text-link:hover{color:var(--sto-blue-2) !important;}

/* Home/tool cards and neutral icon treatment. */
.tile,
.card,
.panel{
  border-color:var(--line-soft);
}
.tile .glyph,
.tool-icon,
.card-icon,
.fi-icon,
.ico{
  background:var(--icon-bg) !important;
  border-color:var(--icon-border) !important;
  color:var(--icon) !important;
}
.tile .glyph svg,
.tool-icon svg,
.card-icon svg,
.fi-icon svg,
.ico svg{
  color:var(--icon) !important;
  stroke:currentColor;
}

/* LIVE is a neutral status label, not an action. */
.chip.live,
.live-badge,
.status-live,
.badge-live{
  background:#FFFFFF !important;
  color:#171717 !important;
  border:1px solid #70767A !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
:root[data-theme="dark"] .chip.live,
:root[data-theme="dark"] .live-badge,
:root[data-theme="dark"] .status-live,
:root[data-theme="dark"] .badge-live{
  background:#F2F3F3 !important;
  color:#171717 !important;
  border-color:#9AA0A4 !important;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .chip.live,
  :root[data-theme="auto"] .live-badge,
  :root[data-theme="auto"] .status-live,
  :root[data-theme="auto"] .badge-live{
    background:#F2F3F3 !important;
    color:#171717 !important;
    border-color:#9AA0A4 !important;
  }
}

/* Warning/error notices: white text on accessible deep red in every theme. */
.toast.err,
.toast.error,
.error-toast,
.warning-toast,
.alert-error,
[role="alert"].error,
.notice.error,
.notice.warning{
  background:var(--warning-bg) !important;
  border-color:var(--warning-border) !important;
  color:var(--warning-text) !important;
}
.toast.err *,
.toast.error *,
.error-toast *,
.warning-toast *,
.alert-error *,
[role="alert"].error *,
.notice.error *,
.notice.warning *{
  color:var(--warning-text) !important;
}

/* Form controls share one neutral treatment. */
input,textarea,select{
  background:var(--panel) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--sto-blue-1) !important;
  outline-color:var(--sto-blue-1) !important;
}

/* Keep yellow for actions/active states only. */
.btn-primary,
button.primary,
.gen,
#addVisit,
.sv-open{
  background:var(--sto) !important;
  color:var(--sto-ink) !important;
}

/* Focus ring follows approved blue instead of yellow. */
:focus-visible{outline-color:var(--sto-blue-1) !important;}

/* Dark mode maintains the exact same hierarchy with theme-appropriate surfaces. */
:root[data-theme="dark"] .fi-tool-context__title,
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .label,
:root[data-theme="dark"] .seg,
:root[data-theme="dark"] .readout b,
:root[data-theme="dark"] .reorder-hint .linkbtn,
:root[data-theme="dark"] .intro .eyebrow,
:root[data-theme="dark"] .visit-head .vt,
:root[data-theme="dark"] .card > h2 .n{
  color:var(--sto-blue-2) !important;
}

:root[data-theme="dark"]{--info-text:var(--sto-blue-2);}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{--info-text:var(--sto-blue-2);}
}