/*
 * Hindi / Gujarati text and page tours (15/10/2026). Loaded after console.css.
 *
 * The Noto faces carry a unicode-range, so a browser downloads one only when the page actually
 * holds Devanagari or Gujarati letters: an English page costs nothing extra, and a Hindi page
 * fetches about 50 KB once. The rupee sign is left out of both ranges for that reason.
 * Self-hosted (OFL, public/fonts/noto/OFL.txt) — no font CDN on the shop floor.
 */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto/noto-devanagari-400.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/noto/noto-devanagari-600.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: 'Noto Sans Gujarati';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto/noto-gujarati-400.woff2') format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0A80-0AFF, U+200C-200D, U+25CC, U+A830-A839;
}
@font-face {
  font-family: 'Noto Sans Gujarati';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/noto/noto-gujarati-600.woff2') format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0A80-0AFF, U+200C-200D, U+25CC, U+A830-A839;
}

/* IBM Plex has no Indian scripts, so the browser takes those letters from Noto, glyph by glyph. */
:root {
  --display: 'IBM Plex Sans Condensed', 'Noto Sans Devanagari', 'Noto Sans Gujarati', ui-sans-serif, system-ui, sans-serif;
  --body: 'IBM Plex Sans', 'Noto Sans Devanagari', 'Noto Sans Gujarati', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Devanagari and Gujarati sit taller (matras above, conjuncts below). Uppercase and wide
   letter-spacing mean nothing in either script and only spread the words apart. */
html[lang="hi"] body, html[lang="gu"] body { line-height: 1.6; }
/* Letter-spacing pulls Devanagari and Gujarati letters out of their joined words ("ए न ा लि टि क्स"
   on the dashboard's section headings, 15/10/2026). The console sets it on many headings, some
   inline, so it is switched off across the page in these two languages. */
html[lang="hi"] body *, html[lang="gu"] body * { letter-spacing: normal !important; }
/* Longer labels wrap inside their button rather than pushing a table or a toolbar wider. */
html[lang="hi"] .btn, html[lang="gu"] .btn,
html[lang="hi"] .btn-ghost, html[lang="gu"] .btn-ghost { white-space: normal; }

/* ---- ENG | हिंदी | ગુજરાતી ---- */
.lang-switch { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; margin: 0; }
.lang-switch button {
  background: transparent; border: 0; color: var(--ink-2); cursor: pointer;
  font: 600 12px/1 var(--body); padding: 6px 9px; min-height: 30px;
}
.lang-switch button + button { border-left: 1px solid var(--line); }
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: #fff; cursor: default; }
.lang-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- "?" — this page's tour ---- */
.tour-help { position: relative; display: inline-flex; }
.tour-help-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; color: var(--accent); font: 700 15px/1 var(--body); cursor: pointer;
}
.tour-help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-menu {
  display: block;
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1200; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); padding: 4px;
}
.tour-menu[hidden] { display: none; }
.tour-menu button {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--ink);
  font: 500 13px/1.4 var(--body); padding: 8px 10px; border-radius: 4px; cursor: pointer;
}
.tour-menu button:hover, .tour-menu button:focus-visible { background: var(--surface-alt); outline: none; }

/* Driver.js popover in the portal's colours, both themes. */
.driver-popover.enamel-tour { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); max-width: 340px; font-family: var(--body); }
.driver-popover.enamel-tour .driver-popover-title { font: 600 15px/1.4 var(--body); color: var(--ink); }
.driver-popover.enamel-tour .driver-popover-description { font: 400 14px/1.6 var(--body); color: var(--ink-2); }
.driver-popover.enamel-tour .driver-popover-progress-text { color: var(--ink-3, var(--ink-2)); }
.driver-popover.enamel-tour .driver-popover-arrow { border-color: var(--surface); }
.driver-popover.enamel-tour .driver-popover-arrow-side-left.driver-popover-arrow,
.driver-popover.enamel-tour .driver-popover-arrow-side-right.driver-popover-arrow,
.driver-popover.enamel-tour .driver-popover-arrow-side-top.driver-popover-arrow,
.driver-popover.enamel-tour .driver-popover-arrow-side-bottom.driver-popover-arrow { border-color: transparent; }
.driver-popover.enamel-tour .driver-popover-arrow-side-left { border-left-color: var(--surface); }
.driver-popover.enamel-tour .driver-popover-arrow-side-right { border-right-color: var(--surface); }
.driver-popover.enamel-tour .driver-popover-arrow-side-top { border-top-color: var(--surface); }
.driver-popover.enamel-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--surface); }
.driver-popover.enamel-tour .driver-popover-footer { flex-wrap: wrap; gap: 6px; }
.driver-popover.enamel-tour .driver-popover-footer button {
  background: var(--surface-alt); color: var(--ink); border: 1px solid var(--line-strong);
  text-shadow: none; font: 600 13px/1.2 var(--body); padding: 7px 11px; border-radius: 4px;
}
.driver-popover.enamel-tour .driver-popover-next-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.driver-popover.enamel-tour .tour-never { background: transparent; border-style: dashed; color: var(--ink-2); margin-right: auto; }
.driver-popover.enamel-tour .driver-popover-close-btn { color: var(--ink-2); }