/* VED · the fonts, self-hosted (OFL; copied from apps/client-portal/public/fonts) — v12 loaded them from Google Fonts. */
@font-face { font-family: 'Anek Latin'; src: url(/fonts/AnekLatin.ttf) format('truetype'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url(/fonts/Lexend.ttf) format('truetype'); font-weight: 100 900; font-display: swap; }
.err-box { position: fixed; inset: 0; display: grid; place-items: center; z-index: 70; background: var(--ground); padding: 16px; }
.err-box div { max-width: 420px; border: 1px solid var(--edge-hi); border-radius: 14px; padding: 20px 22px; background: var(--panel); display: grid; gap: 10px; }
.err-box h1 { font-family: var(--display); font-size: 20px; margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* PHONE AND TABLET (Session AJJ): v12 is a 1440 × 790 deck that scales on a laptop; below 1100 px it ran 920 px wide. Here it
   wraps instead — the same parts, the same order, no sideways scroll. The laptop look is v12's, untouched. */
@media (max-width: 1099px) {
  .app { width: 100% !important; padding: 10px 16px 8px; }
  .app > *, main, section, .panel, .tiles, .headline { min-width: 0; max-width: 100%; }
  .top { flex-wrap: wrap; } .ctl { flex-wrap: wrap; justify-content: flex-start; } .brand { min-width: 0; }
  .search input, .search input:focus { width: min(210px, 70vw); } .results, .fresh .fl, #logl { width: min(360px, calc(100vw - 32px)); right: auto; left: 0; }
  .nav { flex-direction: column; align-items: stretch; } .tabs, .projbar { overflow-x: auto; max-width: 100%; }
  .headline { flex-wrap: wrap; gap: 6px 10px; } .headline .sub { margin-left: 0 !important; }
  .foot { flex-wrap: wrap; } .panel { overflow: auto; } .sheet { min-width: 640px; } #sheetbox { overflow-x: auto; }
  .drawer { width: min(380px, 100%); } .kpis { grid-template-columns: repeat(3, 1fr); }
  section { grid-template-columns: minmax(0, 1fr) !important; } section > * { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width: 600px) {
  .tiles { grid-template-columns: 1fr 1fr; } .kpis { grid-template-columns: 1fr 1fr; } .tile .v { font-size: 26px; }
  .si { grid-template-columns: 1fr; } .si-hero { display: none; }
}
/* Reduced motion: the tab slide stops too (v12 stopped the loader only). */
@media (prefers-reduced-motion: reduce) { section:not([hidden]), .drawer, .toast { animation: none !important; transition: none !important; } }
@media (max-width: 1099px) { #mo-tiles { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 600px) { #mo-tiles { grid-template-columns: 1fr 1fr !important; } }
/* The laptop deck fits the window (v12's NO-SCROLL RULE): nothing scrolls sideways at 1100 px and wider. */
@media (min-width: 1100px) { html { overflow: hidden; } }
/* THE DECK HOLDS ITS WIDTH (Session AJJ): a fifth project (HK Ispat) and the sign-in chip must not widen v12's 1440 deck —
   the project bar scrolls within its row instead; the subtitle ends in an ellipsis. */
.app { grid-template-columns: minmax(0, 1fr); }
.nav > .projbar { min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; } .nav > .tabs { flex: none; }
.top .brand, .top .brand > div { min-width: 0; } .brand p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the name pill only says who is signed in; signing out is its own button at the right of the top bar (Saket, 2 Nov 2026: "where is the log out button?" · "move it") */
.who { cursor: default; }

/* THE SIGN-IN BUTTON: Google's frame takes the light scheme, so no white box around it on our dark ground (the client portal's
   fix, apps/client-portal/public/app.css; Saket, EPC desk, 2 Nov 2026: "the same google bug as before. White space around the button") */
#gsi{color-scheme:light;min-height:44px}#gsi iframe{color-scheme:light}