/* =====================================================================================================================
   Money Changer's Compliance Handbook — the ONE stylesheet of the whole site (5.3)
   Used by every page (Home, chapters, Documents, tools, Guide, Admin), by printing, by the PDF download, by the offline
   copy (embedded) and by the Word download (app.js reads the values below when it makes the .doc file).

   0.  THEME SETTINGS — change here      (colours, text sizes, spacing, corners, shadows, widths, fonts)
   0b. DARK THEME VALUES                  (the dark value of every colour that changes in dark mode)
   1.  Fonts            2. Base            3. Layout and page frame
   4.  Components       (buttons, tags and badges, top bar and menus, search, cards and fields, tables, callouts,
                         paper forms, footer, lightbox)
   5.  Pages            (Home, part pages, chapters, Documents, form view, Downloads, tools, licence chooser,
                         Policy Manual, Guide)
   6.  Admin            7. Responsive (tablets, phones, touch screens)     8. Print and PDF
   ===================================================================================================================== */

/* =====================================================================================================================
   0. THEME SETTINGS — change here
   Change a value here and it applies to the whole site, the printouts and the PDF / Word downloads.
   Colours: navy / slate with ONE muted accent (teal). Text >= 4.5:1 and control borders >= 3:1 against their background
   in both themes (checked with Noto Sans / Devanagari / Telugu). A colour that changes in dark mode also has a value in
   block 0b (two copies there, kept identical — tools/check-build.js checks that they match).
   ===================================================================================================================== */
:root {
  --tk-ink: #eef3f8; --tk-alert: #f3d9a4; --tk-chip: rgba(255,255,255,.16); --tk-line: rgba(255,255,255,.35); --tk-hover: rgba(255,255,255,.14);   /* 5.26 strip under the header */
  /* --- colours: page, text, lines --- */
  --bg: #f3f7fa; --surface: #ffffff; --surface-2: #eaf3f8; --surface-3: #dde9f1;
  --ink: #183247; --ink-2: #3a4e62; --muted: #546678;
  --line: #d6e1e8; --line-strong: #7f93a4;
  /* --- colours: brand (navy), buttons, links, headings, accent (teal) --- */
  --navy: #0b2942; --navy-2: #123b5d;
  --primary: #123b5d; --primary-hover: #0b2942; --primary-ink: #ffffff;
  --link: #226b94; --heading: #123b5d;
  --accent: #0f7170; --accent-soft: #e8f5f3; --accent-line: #8fcfc8;
  --att-soft: #fdf3e2; --att-line: #e7b765; --att-ink: #6b4307;
  --focus: #0d6b63;
  /* --- colours: messages (ok / bad / warning) and stop boxes --- */
  --ok: #1d6a3f; --ok-soft: #e6f2ea; --bad: #a3261c; --bad-soft: #fbebe9; --warn: #7a4e00; --warn-soft: #fbf2de; --warn-line: #b7791f;
  --stop: #a3261c; --stop-soft: #fbebe9; --stop-line: #d9a39d;
  --badge-ink: #ffffff;   /* text on the small red count badge */
  /* --- colours: document-type badges (Form, Letter, Policy, Register, Certificate, Resolution: one quiet style) --- */
  --t-ink: var(--ink-2); --t-bg: var(--surface-2); --t-line: var(--line-strong);
  /* --- colours: top bar (always navy; the same in both themes except the logo mark) --- */
  --topbar-ink: #ffffff; --topbar-muted: #c3d1e1; --topbar-line: rgba(255,255,255,.22); --topbar-edge: rgba(0,0,0,.25);
  --topbar-accent: #8fd3ca;   /* active link underline and focus ring in the top bar */
  --topbar-hover: rgba(255,255,255,.12); --topbar-active: rgba(255,255,255,.14);
  --topbar-field-bg: rgba(255,255,255,.1); --topbar-field-line: rgba(255,255,255,.35);
  --topbar-field-focus: #ffffff; --topbar-field-focus-ink: #16202c; --topbar-field-focus-icon: #3a4656; --topbar-clear-hover: rgba(0,0,0,.08);
  --logo-mark: var(--accent); --logo-mark-ink: #ffffff;
  /* --- colours: on navy / photo bands (Home band, part banners, lightbox) --- */
  --on-dark: #ffffff; --on-dark-fill: rgba(255,255,255,.14); --on-dark-line: rgba(255,255,255,.35); --on-dark-rule: rgba(255,255,255,.16);
  --band-ink: #ffffff; --band-muted: #d5e1ee; --band-overlay: rgba(20, 48, 79, .9);
  --band-veil-wide: linear-gradient(90deg, rgba(20, 48, 79, .9) 0%, rgba(20, 48, 79, .82) 38%, rgba(20, 48, 79, .35) 58%, rgba(20, 48, 79, .12) 100%);   /* Home photo band, wider than 900 px */
  --band-veil-phone: linear-gradient(180deg, rgba(20, 48, 79, .3) 0, rgba(20, 48, 79, .42) 96px, rgba(20, 48, 79, .92) 150px, rgba(20, 48, 79, .93) 100%);   /* up to 900 px, both themes */
  --band-text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --photo-filter: none; --guide-shot-filter: none;   /* dark mode dims photos and Guide screenshots a little */
  --lightbox-bg: rgba(10,16,24,.88); --lightbox-bar: #14304f; --lightbox-btn-line: rgba(255,255,255,.3);
  /* --- colours: form view desk, footer --- */
  --desk: #e3e8ee; --foot-bg: #e9edf2;
  /* --- colours: PAPER (forms, A4 sheets, diagrams, print, PDF and Word): always black on white, in dark mode too --- */
  --paper: #fff; --print-ink: #000;   /* print and PDF text: pure black */
  --paper-ink: #111; --paper-ink-2: #222; --paper-ink-3: #333; --paper-muted: #444; --paper-meta: #555; --paper-muted-3: #666;
  --paper-rule: #777; --paper-dash: #888; --paper-line: #999; --paper-foot-line: #aaa; --paper-edge: #bbb; --paper-line-soft: #ccc;
  --paper-head: #eee; --paper-fill: #f2f2f2; --paper-fill-2: #f7f7f7;
  --paper-brand: #12304d; --paper-heading: #1b3a5c; --paper-link: #1a4f86; --paper-accent-line: #8cc3bc; --paper-caption: #4f5b69;
  --pdf-foot-ink: #5f5f5f; --pdf-foot-blank: #787878;   /* PDF download: page footer text and the company blank line */
  --paper-ok: #1d7a46; --paper-bad: #b3261e; --paper-warn: #8a5a00;   /* ✓ ✕ ⚑ marks in the PDF */
  --paper-stop: #a3261c; --paper-stop-soft: #fbebe9; --paper-warn-ink: #7a4e00; --paper-ok-ink: #1d6a3f; --paper-ok-soft: #e6f2ea;   /* message colours on paper (dark mode too) */
  --paper-note-bg: #fbf2de; --paper-note-ink: #3d2a00; --paper-note-line: #b7791f;   /* "optional form" note on paper */

  /* --- text sizes: one scale. Every size follows --fs-base (16px): change it and all text grows or shrinks together.
         (The px value of each step at the default base is in the comment.) --- */
  --fs-base: 16px;
  --fs-3xs: calc(var(--fs-base) * .65625);      /* 10.5px */
  --fs-2xs: calc(var(--fs-base) * .71875);      /* 11.5px  tags, type badges */
  --fs-xs: calc(var(--fs-base) * .75);          /* 12px */
  --fs-xs-plus: calc(var(--fs-base) * .78125);  /* 12.5px */
  --fs-sm: calc(var(--fs-base) * .8125);        /* 13px    small print, help text */
  --fs-sm-plus: calc(var(--fs-base) * .84375);  /* 13.5px */
  --fs-ui: calc(var(--fs-base) * .875);         /* 14px    menus, tables, lists */
  --fs-ui-plus: calc(var(--fs-base) * .90625);  /* 14.5px  buttons and fields */
  --fs-text: calc(var(--fs-base) * .9375);      /* 15px    chapter text */
  --fs-text-plus: calc(var(--fs-base) * .96875);/* 15.5px */
  --fs-base-plus: calc(var(--fs-base) * 1.03125);/* 16.5px */
  --fs-md: calc(var(--fs-base) * 1.0625);       /* 17px    body text in Hindi / Telugu */
  --fs-lg: calc(var(--fs-base) * 1.125);        /* 18px */
  --fs-xl: calc(var(--fs-base) * 1.1875);       /* 19px */
  --fs-2xl: calc(var(--fs-base) * 1.25);        /* 20px */
  --fs-3xl: calc(var(--fs-base) * 1.3125);      /* 21px */
  --fs-4xl: calc(var(--fs-base) * 1.375);       /* 22px    big figures */
  --fs-6xl: calc(var(--fs-base) * 1.75);        /* 28px    Home title */
  --fs-7xl: calc(var(--fs-base) * 1.875);       /* 30px    cover title */
  --fs-8xl: calc(var(--fs-base) * 2);           /* 32px    largest title (licence choice, manual cover) */
  /* headings */
  --fs-h1: calc(var(--fs-base) * 1.5);          /* 24px    page titles (every page: tools, Documents, parts, chapters, forms) */
  --fs-h1-phone: var(--fs-3xl);                 /* 21px    page titles on phones */
  --fs-h3: var(--fs-md);                        /* 17px    headings inside a chapter, card titles */
  /* print, PDF (points) */
  --pfs-body: 11pt; --pfs-doc: 10pt; --pfs-sm: 9.5pt; --pfs-xs: 9pt; --pfs-2xs: 8.5pt; --pfs-3xs: 8pt; --pfs-4xs: 7.5pt; --pfs-cert: 22pt;
  /* Word download (points; Word has its own heading sizes) */
  --word-fs-sm: 10.5pt; --word-fs-md: 11.5pt; --word-fs-lg: 12pt; --word-fs-xl: 13pt; --word-fs-2xl: 14pt; --word-fs-3xl: 15pt; --word-fs-title: 24pt;
  /* line heights */
  --lh-body: 1.6; --lh-indic: 1.7;

  /* --- spacing scale (padding, margins, gaps) --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* --- corners --- */
  --radius: 8px; --radius-sm: 6px; --radius-xs: 4px; --radius-2xs: 3px; --radius-3xs: 2px; --radius-tag: 9px; --radius-pill: 999px; --radius-round: 50%;

  /* --- shadows --- */
  --shadow: 0 1px 2px rgba(16,32,52,.06); --shadow-2: 0 4px 14px rgba(16,32,52,.10);
  --sheet-shadow: 0 1px 3px rgba(16,32,52,.12), 0 8px 24px rgba(16,32,52,.10);
  --shadow-up: 0 -2px 10px rgba(16,32,52,.08); --shadow-inset: inset 0 1px 2px rgba(16,32,52,.06); --shadow-band: 0 6px 20px rgba(8, 20, 36, .28);

  /* --- layout: widths and heights --- */
  --read-w: 920px;      /* reading column: chapters, tools, Guide, About, legal pages */
  --wide-w: 1080px;     /* wide pages: Home, Documents, calculators, footer */
  --gutter: 16px;       /* space left and right of the page */
  --page-max: calc(var(--read-w) + 2 * var(--gutter));
  --page-max-wide: calc(var(--wide-w) + 2 * var(--gutter));
  --form-page-w: var(--page-max); --admin-w: 1300px; --topbar-max-w: 1440px; --sidebar-w: 248px;
  --tb-h: 52px;         /* top bar height (50px on tablets and phones, 46px on a phone held sideways) */

  /* --- fonts (served from this site: fonts/*.woff2) --- */
  --font: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Telugu", "Noto Sans Tamil", "Nirmala UI", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;
  /* Word download only (Word cannot use the web fonts): */
  --font-word: Calibri,"Nirmala UI",Mangal,Gautami,Arial,sans-serif;

  --c: var(--accent);   /* part colour: one accent for every part */
  color-scheme: light;
}

/* =====================================================================================================================
   0b. DARK THEME VALUES — dark mode follows the computer's setting, or the light / dark button in the settings menu.
   The SAME list is written twice (CSS cannot share one block between a media query and a selector):
     - :root[data-theme="dark"]  — used by the app (it always sets data-theme)
     - @media (prefers-color-scheme: dark) — used before the app has started and in the offline copy
   Keep the two lists identical; tools/check-build.js stops the build when they differ.
   ===================================================================================================================== */
:root[data-theme="dark"] {
  --bg: #0f151c; --surface: #161e27; --surface-2: #1c2631; --surface-3: #25313f;
  --ink: #e6ebf1; --ink-2: #c2ccd6; --muted: #9eabb9;
  --line: #2b3643; --line-strong: #6f7f92;
  --navy: #0b1b2c; --navy-2: #13293f;
  --primary: #33689c; --primary-hover: #3d77b0; --primary-ink: #ffffff;
  --link: #8dbbe8; --heading: #b3cde8;
  --accent: #52b5aa; --accent-soft: #14302d; --accent-line: #2f6f68;
  --att-soft: #2e2413; --att-line: #8a6420; --att-ink: #f1d39b;
  --focus: #52b5aa;
  --ok: #6fc796; --ok-soft: #15301f; --bad: #ff9b90; --bad-soft: #3a1d1b; --warn: #efc36b; --warn-soft: #33290f; --warn-line: #b7862c;
  --stop: #ff9b90; --stop-soft: #3a1d1b; --stop-line: #7a3a35;
  --badge-ink: #1a0d0b;
  --topbar-muted: #b4c3d3; --topbar-line: rgba(255,255,255,.16); --logo-mark: #1f6e66;
  --band-muted: #c4d3e3; --band-overlay: rgba(9, 20, 33, .78);
  --band-veil-wide: linear-gradient(90deg, rgba(9, 20, 33, .92) 0%, rgba(9, 20, 33, .85) 38%, rgba(9, 20, 33, .45) 58%, rgba(9, 20, 33, .25) 100%);
  --photo-filter: brightness(.9); --guide-shot-filter: brightness(.9);
  --desk: #0b1117; --foot-bg: #121a22;
  --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 6px 18px rgba(0,0,0,.4); --sheet-shadow: 0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #0f151c; --surface: #161e27; --surface-2: #1c2631; --surface-3: #25313f;
  --ink: #e6ebf1; --ink-2: #c2ccd6; --muted: #9eabb9;
  --line: #2b3643; --line-strong: #6f7f92;
  --navy: #0b1b2c; --navy-2: #13293f;
  --primary: #33689c; --primary-hover: #3d77b0; --primary-ink: #ffffff;
  --link: #8dbbe8; --heading: #b3cde8;
  --accent: #52b5aa; --accent-soft: #14302d; --accent-line: #2f6f68;
  --att-soft: #2e2413; --att-line: #8a6420; --att-ink: #f1d39b;
  --focus: #52b5aa;
  --ok: #6fc796; --ok-soft: #15301f; --bad: #ff9b90; --bad-soft: #3a1d1b; --warn: #efc36b; --warn-soft: #33290f; --warn-line: #b7862c;
  --stop: #ff9b90; --stop-soft: #3a1d1b; --stop-line: #7a3a35;
  --badge-ink: #1a0d0b;
  --topbar-muted: #b4c3d3; --topbar-line: rgba(255,255,255,.16); --logo-mark: #1f6e66;
  --band-muted: #c4d3e3; --band-overlay: rgba(9, 20, 33, .78);
  --band-veil-wide: linear-gradient(90deg, rgba(9, 20, 33, .92) 0%, rgba(9, 20, 33, .85) 38%, rgba(9, 20, 33, .45) 58%, rgba(9, 20, 33, .25) 100%);
  --photo-filter: brightness(.9); --guide-shot-filter: brightness(.9);
  --desk: #0b1117; --foot-bg: #121a22;
  --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 6px 18px rgba(0,0,0,.4); --sheet-shadow: 0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
  color-scheme: dark;
  }
}

/* =====================================================================================================================
   1. FONTS — served from this website (v4.7, SEC-11): Noto Sans / Devanagari / Telugu, OFL 1.1 — see fonts/OFL.txt
   ===================================================================================================================== */
/* fonts served from this website (v4.7, SEC-11): Noto Sans / Devanagari / Telugu, OFL 1.1 — see fonts/OFL.txt */
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/noto-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/noto-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/noto-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/noto-sans-devanagari-devanagari-400-normal.woff2") format("woff2"); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/noto-sans-devanagari-devanagari-600-normal.woff2") format("woff2"); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/noto-sans-devanagari-devanagari-700-normal.woff2") format("woff2"); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: "Noto Sans Telugu"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/noto-sans-telugu-telugu-400-normal.woff2") format("woff2"); unicode-range: U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CDA,U+1CF2,U+200C-200D,U+25CC; }
@font-face { font-family: "Noto Sans Telugu"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/noto-sans-telugu-telugu-600-normal.woff2") format("woff2"); unicode-range: U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CDA,U+1CF2,U+200C-200D,U+25CC; }
@font-face { font-family: "Noto Sans Telugu"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/noto-sans-telugu-telugu-700-normal.woff2") format("woff2"); unicode-range: U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CDA,U+1CF2,U+200C-200D,U+25CC; }
@font-face { font-family: "Noto Sans Tamil"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/noto-sans-tamil-tamil-400-normal.woff2") format("woff2"); unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC; }
@font-face { font-family: "Noto Sans Tamil"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/noto-sans-tamil-tamil-600-normal.woff2") format("woff2"); unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC; }
@font-face { font-family: "Noto Sans Tamil"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/noto-sans-tamil-tamil-700-normal.woff2") format("woff2"); unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC; }

/* =====================================================================================================================
   2. BASE — page, text, links, focus ring, icons, small helpers
   ===================================================================================================================== */
/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* UX-01: 16px text (17px for Hindi and Telugu) */
body { background: var(--bg); color: var(--ink); font: var(--fs-base)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; }
html:lang(hi) body, html:lang(te) body, html:lang(ta) body { font-size: var(--fs-md); line-height: var(--lh-indic); }
a { color: var(--link); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { line-height: 1.3; margin: 1em 0 .45em; letter-spacing: -.005em; }
h1 { font-size: var(--fs-h1); color: var(--heading); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
mark { background: var(--warn-soft); color: var(--ink); padding: 0 2px; border-radius: var(--radius-2xs); box-shadow: inset 0 -2px 0 var(--warn-line); }
code.ph { background: var(--surface-2); padding: 1px 5px; border-radius: var(--radius-xs); font-size: var(--fs-xs-plus); cursor: pointer; }
body.busy, body.busy * { cursor: progress !important; }
[tabindex="-1"]:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; padding: var(--sp-2) 14px; border-radius: var(--radius); border: 2px solid var(--navy); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.skip-link:focus { top: 8px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--surface); padding: 6px 10px; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
/* ---------- v5.0 design (approved mocks, _work/design/v50/v50.css) ---------- */
.num { font-variant-numeric: tabular-nums; }
/* 5.3: official-source links in Source / Reference / Basis columns (open in a new tab; the arrow is not printed) */
a.cite::after { content: " \2197"; font-size: .8em; }
@media print { a.cite::after { content: none; } }

/* =====================================================================================================================
   3. LAYOUT AND PAGE FRAME — sidebar + main, page widths, page head (Back · breadcrumb · actions), text size, scroll offsets
   ===================================================================================================================== */
/* ---------- bottom navigation (phones) and the tools sheet ---------- */
.botnav { display: none; }
.sheet[hidden] { display: none; }
/* ---------- page frames ---------- */
.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: calc(100vh - var(--tb-h)); }
.sidebar { position: sticky; top: var(--tb-h); height: calc(100vh - var(--tb-h)); overflow-y: auto; padding: var(--sp-3) 10px var(--sp-5); background: var(--surface); border-right: 1px solid var(--line); }
.sidebar .side-back { display: flex; margin: 0 0 var(--sp-2); }
.toc { list-style: none; margin: 0; padding: 0; font-size: var(--fs-ui); }
html:lang(hi) .toc, html:lang(te) .toc, html:lang(ta) .toc { font-size: var(--fs-text); }
.toc .part { margin: var(--sp-3) 0 var(--sp-1); font-size: max(var(--fs-sm), .82em); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.toc a { display: block; padding: 5px var(--sp-2) 5px 10px; border-left: 3px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2); text-decoration: none; line-height: 1.4; }
.toc a:hover { background: var(--surface-2); color: var(--ink); }
.toc a.on { background: var(--accent-soft); border-left-color: var(--accent); color: var(--ink); font-weight: 700; }
.main { width: 100%; max-width: calc(var(--read-w) + 64px); min-width: 0; padding: 14px var(--sp-6) 56px; }
.page { max-width: var(--page-max); margin: 0 auto; padding: 14px var(--sp-4) 56px; }
.home { max-width: var(--page-max-wide); margin: 0 auto; padding: 14px var(--sp-4) 56px; }
.page > h1, .main > h1 { font-size: var(--fs-h1); margin: 6px 0 6px; }
.lead { font-size: var(--fs-text-plus); color: var(--ink-2); margin: 0 0 14px; }
/* 5.3 (C04): the Admin sign-in page: normal top bar and footer, the card centred in the reading column */
.auth-page .card.auth { margin: var(--sp-5) auto var(--sp-6); }
.banner { background: var(--warn-soft); border: 1px solid var(--line); border-left: 4px solid var(--warn-line); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }
/* (kept here, not in section 7 / 8: the more specific rules further down must still win over these) */
@media (max-width: 860px) {
  .page, .home { padding: 10px var(--sp-3) 40px; }
}
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .page, .home, .main { padding-top: 6px; }
}
/* ---------- handbook content (chapters, forms, legal pages) ---------- */
.reader .doc { font-size: var(--fs-text); }
.reader .doc table.t { font-size: var(--fs-ui); }
/* Text size (A− / A+ in the settings menu, kept in memory only): the whole page below the top bar is scaled on screen —
   chapters, forms, tables, Home, tools — like the browser's own zoom, so every px size grows together. Print and PDF
   keep their fixed sizes (zoom 1 in print; the PDF is laid out outside the page). */
@media screen {
  #app > main, #app > .layout, #app > .page { zoom: var(--reader-scale, 1); }
  /* sticky / fixed parts inside the scaled page: offsets and heights in unscaled screen pixels */
  .layout > .sidebar { top: calc(var(--tb-h) / var(--reader-scale, 1)); height: calc((100vh - var(--tb-h)) / var(--reader-scale, 1)); }
}
/* anything the app scrolls to (checker result, a sub-heading, a section) stops below the sticky top bar */
#ckResult, .ck-result, #stArea, main h1, main h2, .doc h3, .doc h4, .doc section.hb { scroll-margin-top: calc(var(--tb-h) + 12px); }

/* =====================================================================================================================
   4. COMPONENTS
   4.1 Buttons (one style: primary / secondary / ghost) and text links that look like links
   ===================================================================================================================== */
/* ---------- buttons (one style: primary / secondary / ghost) ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: var(--fs-ui-plus); font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer; white-space: nowrap; }
html:lang(hi) .btn, html:lang(te) .btn, html:lang(ta) .btn { font-size: var(--fs-text); }
.btn:hover { background: var(--surface-2); }
/* 5.3 (C14): a disabled button keeps its shape and stays readable (5.6:1) */
.btn:disabled, .btn.primary:disabled, .btn.primary:disabled:hover { opacity: 1; background: var(--surface-2); color: var(--muted); border-color: var(--line); cursor: default; }
.btn.primary:focus-visible { outline-color: var(--ink); outline-offset: 3px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--link); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--bad); border-color: var(--bad); background: var(--surface); }
.btn.danger:hover { background: var(--bad-soft); }
.btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.btn.small { min-height: 30px; padding: 3px 10px; font-size: max(var(--fs-sm), 0.82em); }
select.btn { padding-right: var(--sp-2); font-weight: 500; }
.btn.ph { font-family: var(--font-mono); font-size: var(--fs-xs); }
.toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 var(--sp-3); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
/* ---- 5.1 licence: chooser, header switch, edition label, "for the other licence" notice and badges ---- */
.lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
.lnk:hover { text-decoration-thickness: 2px; }

/* ---------- 4.1b Page head: Back, breadcrumb, the small action bar (after the buttons: it restyles them) ---------- */
/* page head: Back · breadcrumb on the left, the small action bar on the right */
.pagehead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 34px; margin: 0 0 10px; }
.pagehead .navbar { margin: 0; }
.pagehead .crumbs { margin: 0; flex: 1 1 auto; min-width: 0; }
.pagehead .actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-left: auto; }
.navbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.navbar .btn { min-height: 30px; padding: 3px 10px 3px 6px; font-size: var(--fs-ui); }
.crumbs { font-size: max(var(--fs-sm), .82em); color: var(--muted); margin: 0 0 var(--sp-2); }
.crumbs a { color: var(--link); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.actions .btn { background: transparent; border-color: transparent; color: var(--link); }
.actions .btn:hover { background: var(--surface-2); border-color: var(--line); }
.actions .tag { margin-left: var(--sp-1); align-self: center; }
/* ---------- reading page ---------- */
.pagehead5 { display: flex; align-items: center; gap: var(--sp-1) 10px; flex-wrap: wrap; margin: 0 0 10px; }
.pagehead5 .crumbs { margin: 0; }
.crumbs .cur { color: var(--ink-2); }
.crumbs .sep5 { margin: 0 6px; color: var(--muted); }

/* ---------- 4.2 Chips, tags, pills, badges (requirement tags, document-type badges, status pills) ---------- */
/* ---------- chips and tags (FFMC only / AD-II only / optional / required / state) ---------- */
.chip, .tag { display: inline-flex; align-items: center; gap: var(--sp-1); align-self: flex-start; min-height: 22px; padding: 0 var(--sp-2); border-radius: var(--radius-xs); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: max(var(--fs-sm), 0.82em); font-weight: 600; line-height: 1.5; white-space: nowrap; text-decoration: none; vertical-align: middle; }
.tag { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); }
.tag.en-tag { background: var(--surface-2); border-color: var(--line); color: var(--muted); font-weight: 500; }
.chip.mine, .chip.on { background: var(--ok-soft); color: var(--ok); border-color: currentColor; }
.chip.off, .chip.req { background: var(--bad-soft); color: var(--bad); border-color: currentColor; }
.chip.warn { background: var(--warn-soft); color: var(--warn); border-color: currentColor; }
.chip.opt { background: transparent; border-style: dashed; border-color: var(--line-strong); color: var(--ink-2); }
.chip.admin { background: var(--surface-2); color: var(--heading); border-color: var(--line-strong); }
.pill { display: inline-block; padding: 1px 10px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700; }
.pill.low { background: var(--ok-soft); color: var(--ok); }
.pill.med { background: var(--warn-soft); color: var(--warn); }
.pill.high { background: var(--bad-soft); color: var(--bad); }
.badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--bad); color: var(--badge-ink); font-size: var(--fs-xs); font-weight: 700; text-align: center; }
.tbadge { display: inline-block; padding: 1px 7px; border-radius: var(--radius-2xs); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .02em; line-height: 1.6; white-space: nowrap; border: 1px solid var(--t-line); color: var(--t-ink); background: var(--t-bg); }
/* requirement tags: Law / RBI direction / card issuer or partner / company policy / guidance or example */
.tag.law, .tag.rbi, .tag.ci, .tag.co, .tag.ex { min-height: 0; padding: 0 6px; margin: 0 2px; border-radius: var(--radius-tag); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .02em; line-height: 1.55; vertical-align: 1px; background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.tag.law, .tag.rbi, .tag.ci { color: var(--heading); border-color: var(--line-strong); }
.tag.co { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.tag.ex { color: var(--muted); font-weight: 600; }
.fstat { display: inline-block; padding: 0 7px; border-radius: var(--radius-2xs); font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; border: 1px solid var(--line); background: var(--surface); }
.fstat.mand { color: var(--link); border-color: currentColor; }
.fstat.cond, .fstat.tmpl { color: var(--ink-2); }
.tag.lic-only { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); font-size: var(--fs-2xs); padding: 0 6px; margin-left: var(--sp-1); white-space: nowrap; vertical-align: 1px; }
.meta5 .tag.aud.mine { box-shadow: 0 0 0 2px var(--accent-line); }

/* ---------- 4.3 Top bar and menus (logo + name | search | links | licence switch | settings menu) ---------- */
/* ---------- top bar: one row (logo + name | search | Documents · Downloads | settings menu) ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--navy); color: var(--topbar-ink); border-bottom: 1px solid var(--topbar-edge); }
.tb-in { display: flex; align-items: center; gap: var(--sp-3); height: var(--tb-h); padding: 0 var(--sp-4); max-width: var(--topbar-max-w); margin: 0 auto; }
.topbar .logo { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--topbar-ink); text-decoration: none; flex: 0 1 auto; }
.topbar .logo .mark { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--logo-mark); color: var(--logo-mark-ink); display: grid; place-items: center; font-size: var(--fs-base); font-weight: 700; flex: none; }
.topbar .logo-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.topbar .logo-t b { font-size: var(--fs-text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .logo small { display: none; color: var(--topbar-muted); font-size: var(--fs-xs); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .nm-short, .topbar .nm-tiny { display: none; }
/* 5.3 (C02): a short strap line under the name on wide screens (it fits the bar); phones show the short name */
@media (min-width: 1100px) { .topbar .logo small { display: block; } }
@media (max-width: 860px) { .topbar .nm-full { display: none; } .topbar .nm-short { display: inline; } }
.topsearch { flex: 1 1 280px; max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: 6px; position: relative; }
.topsearch svg.i { position: absolute; left: 10px; color: var(--topbar-muted); pointer-events: none; }
.topsearch input { width: 100%; height: 34px; padding: 5px 10px 5px 34px; border-radius: var(--radius-sm); border: 1px solid var(--topbar-field-line); background: var(--topbar-field-bg); color: var(--topbar-ink); font: inherit; font-size: var(--fs-ui-plus); }
.topsearch input::placeholder { color: var(--topbar-muted); opacity: 1; }
.topsearch input:focus { background: var(--topbar-field-focus); color: var(--topbar-field-focus-ink); border-color: var(--topbar-field-focus); outline: 2px solid var(--topbar-accent); outline-offset: 1px; }
.tb-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.tb-link, .tb-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--topbar-ink); font-size: var(--fs-ui-plus); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.tb-link:hover, .tb-btn:hover, .tb-btn[aria-expanded="true"] { background: var(--topbar-hover); }
.tb-link.active { background: var(--topbar-active); box-shadow: inset 0 -2px 0 var(--topbar-accent); }
.tb-btn { border-color: var(--topbar-line); }
.topbar :focus-visible { outline: 2px solid var(--topbar-accent); outline-offset: 2px; }
.tb-btn .lang-code { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; }
.menu-toggle { display: none; }
.tb-menu { position: relative; flex: none; }
/* the settings menu (language, light / dark, text size, Admin) — a small panel under its button */
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 270px; padding: var(--sp-2); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.menu-pop[hidden] { display: none; }
.menu-pop .m-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 6px var(--sp-2); font-size: var(--fs-ui); color: var(--ink-2); }
.menu-pop .m-row > span:first-child { font-weight: 600; }
.menu-pop select.btn { min-width: 130px; }
.menu-pop .m-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 6px var(--sp-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font-size: var(--fs-ui-plus); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.menu-pop .m-item:hover { background: var(--surface-2); }
.menu-pop .m-sep { height: 1px; margin: 6px 0; background: var(--line); border: 0; }
.menu-pop .m-mob { display: none; }
.fsz { display: inline-flex; gap: var(--sp-1); }
.fsz .btn { min-width: 40px; justify-content: center; }
/* safe areas (notch, rounded corners, home indicator); index.php sets viewport-fit=cover */
.topbar { padding-top: env(safe-area-inset-top); }
.tb-in { padding-left: max(var(--sp-4), env(safe-area-inset-left)); padding-right: max(var(--sp-4), env(safe-area-inset-right)); }
/* ---------- top bar: on Home the search is a compact button (the page has one big box) ---------- */
.tb-spacer { flex: 1 1 auto; }
.tb-lic { position: relative; flex: none; }
.lic-btn { gap: var(--sp-1); font-weight: 600; font-size: var(--fs-sm-plus); white-space: nowrap; }
.lic-btn .lic-short { display: none; }
.lic-btn .i { width: 16px; height: 16px; }
.lic-fixed { cursor: default; }
/* 5.17: the public footer has five columns (brand + four link groups); two on tablets, one on phones */
.foot5-in.foot5-links { grid-template-columns: 1.4fr repeat(4, 1fr); }
@media (max-width: 1000px) { .foot5-in.foot5-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foot5-in.foot5-links { grid-template-columns: minmax(0, 1fr); } }
.tb-tools .menu-pop { min-width: 250px; }
/* 5.17.1: a Knowledge Centre post being edited uses the full width; the AI input above the edit form */
.update-list .update-card:has(details.kc-edit[open]) { grid-column: 1 / -1; }
.kc-regen { border: 1px solid var(--line); border-radius: 8px; padding: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
.kc-regen h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md, 1rem); }
.kc-regen .row2, .kc-form .row2 { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.kc-form .row2 .field { flex: 1 1 180px; }
/* 5.18.3: Admin tabs in one row, grouped: a small group label before each group, a divider between groups */
.adm-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) 0; }
.adm-grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px var(--sp-2); border-left: 1px solid var(--line); }
.adm-grp:first-child { border-left: 0; padding-left: 0; }
.adm-gl { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
/* 5.18: TCS calculator, paid by another person */
.check-row { display: flex; gap: 8px; align-items: center; margin: var(--sp-2) 0; font-weight: 600; }
/* 5.19: Knowledge Centre share bar */
.kc-social { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: var(--sp-2) 0; }
/* 5.18.2: About → What this handbook can do */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-4); }
.feat-card { border: 1px solid var(--line); border-radius: 10px; padding: var(--sp-3); background: var(--surface); }
.feat-card h4 { margin: 0 0 var(--sp-2); display: flex; align-items: center; gap: 8px; color: var(--heading); }
.feat-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.feat-card li span { display: block; color: var(--muted); font-size: var(--fs-sm); }
/* 5.18.2: amount / rate columns of reading tables are right-aligned with even-width figures (on phones the stacked cards stay left-aligned) */
.doc table.t td.amt, .doc table.t th.amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media screen and (max-width: 640px) { .doc table.t.stack td.amt { text-align: left; } }
/* 5.18.1: a printable form with a wide table scrolls sideways on a phone instead of running off the page (screen only) */
@media screen and (max-width: 760px) { .doc .form:not(.wide) { overflow-x: auto; } }
/* 5.18: shared files at the end of Forms & documents */
.shared-files { margin-top: var(--sp-4); }


/* 5.16: share panel on a document page */
.share-panel { padding: var(--sp-3); margin: var(--sp-2) 0; }
.share-panel h2 { margin-top: 0; font-size: var(--fs-lg); }
.share-panel .row2 { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.share-panel .row2 .field { flex: 1 1 260px; }
/* 5.14: Knowledge Center */
.kc-filter { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-2) 0; }
.kc-filter .btn.active, .kc-cats .chip.active { background: var(--accent-soft); border-color: var(--accent-line); font-weight: 600; }
.kc-cats { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.kc-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.kc-card { border: 1px solid var(--line); border-radius: 10px; padding: var(--sp-3); }
.kc-ai { padding: var(--sp-3); margin: var(--sp-3) 0; }
.kc-ai-h { margin-top: 0; font-size: var(--fs-lg); }
.kc-ai .row2 { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.kc-ai-subj { flex: 1 1 320px; }
.kc-card h2 { font-size: var(--fs-lg); margin: var(--sp-1) 0; }
.kc-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; color: var(--muted); font-size: var(--fs-sm); }
.kc-body { line-height: 1.65; }
.kc-body img { max-width: 100%; height: auto; }
.lic-pop { left: 0; right: auto; width: 300px; }
.lic-pop .m-h { margin: 2px var(--sp-2) 6px; font-size: var(--fs-xs-plus); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lic-pop .lic-item { align-items: flex-start; text-align: left; }
.lic-pop .lic-item > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.lic-pop .lic-item small { color: var(--muted); font-size: var(--fs-xs-plus); line-height: 1.35; font-weight: 400; }
.lic-pop .lic-item[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.lic-pop .lic-item[aria-pressed="true"] .i { color: var(--accent); }
.lic-pop .i-sp { display: inline-block; width: 18px; flex: none; }

/* ---------- 4.4 Search boxes and the live results panel ---------- */
/* ---------- home: role switch + tasks, tools, parts ---------- */
.searchbox { display: flex; align-items: center; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0 var(--sp-3); }
.searchbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); outline: 2px solid var(--focus); outline-offset: 1px; }
[contenteditable="true"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.searchbox input { flex: 1; border: 0; background: transparent; font-size: var(--fs-base); padding: 9px 2px; outline: none; min-width: 0; color: var(--ink); }
.searchbox svg.i { color: var(--muted); }
.results { margin-top: 10px; display: grid; gap: 6px; }
.hit { display: block; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent-line); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); text-decoration: none; color: var(--ink); }
.hit:hover { border-color: var(--line-strong); border-left-color: var(--accent); }
.hit b { display: block; color: var(--link); }
.hit .hp { display: block; font-size: max(var(--fs-sm), .82em); color: var(--muted); font-weight: 600; margin: 1px 0; }
.hit span:last-child { color: var(--ink-2); font-size: var(--fs-ui); }
.h-sec { font-size: max(var(--fs-sm), .82em); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 18px 0 var(--sp-2); }
/* v5.0 search: one box per screen, live results panel under the header box, clear button, grouped results */
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-toggle { display: none; }
.sclear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-round); background: transparent; color: var(--muted); cursor: pointer; }
.sclear[hidden] { display: none; }
.sclear:hover { background: var(--surface-2); color: var(--ink); }
.sclear svg.i { position: static; width: 16px; height: 16px; transform: none; color: currentColor; }
.topsearch input { padding-right: 36px; }
.topsearch .sclear { color: var(--topbar-muted); }
.topsearch input:focus + .sclear, .topsearch:focus-within .sclear { color: var(--topbar-field-focus-icon); }
.topsearch .sclear:hover { background: var(--topbar-clear-hover); }
.idsearch .sclear { right: 104px; }
.searchbox { position: relative; }
.searchbox input { padding-right: 36px; }
.searchbox .sclear { right: 8px; }
.sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70; max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-2); text-align: left; }
.sug[hidden] { display: none; }
.sug .sug-h { margin: 6px var(--sp-2) 2px; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sug a[role=option] { display: block; padding: 6px var(--sp-2); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; line-height: 1.35; }
.sug a[role=option] b { display: block; font-weight: 600; color: var(--link); font-size: var(--fs-ui); }
.sug a[role=option] small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.sug a[role=option].on, .sug a[role=option]:hover { background: var(--accent-soft); }
.sug .sug-all { margin-top: var(--sp-1); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 700; color: var(--link); font-size: var(--fs-ui); }
.sug .sug-none, .sug .sug-dym { margin: 6px var(--sp-2); font-size: var(--fs-sm-plus); color: var(--muted); }
.sug mark { padding: 0 1px; }
.did-you-mean { margin: var(--sp-1) 0; font-size: var(--fs-ui-plus); }
.hit-group { margin: 6px 0 var(--sp-1); display: grid; gap: 6px; }
.hit-group .h-sec { margin: var(--sp-2) 0 2px; display: flex; align-items: center; gap: var(--sp-2); }
.hit-more { display: grid; gap: 6px; }
.hit-more.hidden { display: none; }
.hit-group .show-all { justify-self: start; }
.search-popular { margin-top: 10px; }

/* ---------- 4.5 Cards, fields, messages, line icons ---------- */
/* ---------- cards, fields, messages ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; width: 100%; }
.auth { max-width: 420px; }
.auth h1 { margin-top: 0; font-size: var(--fs-h1); color: var(--heading); }
.card.auth { border-top: 3px solid var(--accent); }
.auth .btn.primary { width: 100%; justify-content: center; }
.field { display: block; margin: 10px 0; }
.field > span { display: block; font-size: max(var(--fs-sm), .82em); color: var(--ink-2); margin-bottom: var(--sp-1); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; padding: var(--sp-2) 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.field textarea { min-height: 70px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--sp-4); }
.err { color: var(--bad); background: var(--bad-soft); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); border-left: 3px solid var(--bad); margin: 10px 0; }
.okmsg { color: var(--ok); background: var(--ok-soft); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); border-left: 3px solid var(--ok); margin: 10px 0; }
.err-text { color: var(--bad); }
[aria-invalid="true"] { border-color: var(--bad) !important; box-shadow: 0 0 0 2px var(--bad-soft); }
.help { font-size: max(var(--fs-sm), 0.82em); color: var(--muted); }
.agree { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-ui-plus); color: var(--ink-2); margin: var(--sp-3) 0 var(--sp-1); cursor: pointer; }
.agree input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
ul.plain { padding-left: 18px; font-size: var(--fs-ui-plus); }
progress { width: 100%; height: 14px; margin: var(--sp-2) 0; accent-color: var(--accent); }
.field-inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui); }
/* ---------- v4.9.1 Home: hero search, tasks | tools, parts list, Documents strip; line icons ---------- */
.li { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
.li svg.i { width: 17px; height: 17px; vertical-align: 0; }
.tool-h, .cat-h { display: flex; align-items: center; gap: 10px; }
.tool-h .li, .cat-h .li { width: 36px; height: 36px; }
.tool-h .li svg.i, .cat-h .li svg.i { width: 21px; height: 21px; }
.sheet a .li { width: 30px; height: 30px; }

/* ---------- 4.6 Tables (reading tables, wide-table hint) ---------- */
table.t { width: 100%; border-collapse: collapse; margin: var(--sp-2) 0 14px; font-size: var(--fs-ui-plus); display: table; }
html:lang(hi) table.t, html:lang(te) table.t, html:lang(ta) table.t { font-size: var(--fs-text); }
table.t th, table.t td { border: 1px solid var(--line); padding: 6px var(--sp-2); text-align: left; vertical-align: top; }
table.t th { background: var(--surface-2); color: var(--ink); font-weight: 700; }
table.t tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
table.t.kv th { width: 30%; }
td.yes { color: var(--ok); font-weight: 600; }
td.no { color: var(--bad); font-weight: 600; }
.doc .t-wrap { overflow-x: auto; max-width: 100%; }
/* (kept here, not in section 7 / 8: the more specific rules further down must still win over these) */
/* 5.20: screen only — an A4 page is about 640 px wide, so in print these "card" rows broke the table's columns */
@media screen and (max-width: 640px) {
  .doc table.t.stack, .doc table.t.stack tbody, .doc table.t.stack tr, .doc table.t.stack td, .doc table.t.stack th { display: block; width: 100%; }
  .doc table.t.stack tr.headrow { display: none; }
  .doc table.t.stack tr { border: 1px solid var(--line); border-left: 3px solid var(--accent-line); border-radius: var(--radius-sm); margin: 0 0 var(--sp-2); padding: 6px 10px; background: var(--surface); }
  .doc table.t.stack td, .doc table.t.stack th { border: 0; padding: 3px 0; }
  .doc table.t.stack tr:nth-child(even) td { background: transparent; }
  .doc table.t.stack td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
  .doc table.t.stack td:first-child { font-weight: 700; font-size: var(--fs-text); }
  .doc table.t.stack td:first-child::before { display: none; }
}
/* wide tables and registers: a visible hint when the table is wider than the screen (screen only) */
.t-wrap.scrolls::before { content: attr(data-hint); position: sticky; left: 0; display: block; padding: 0 2px var(--sp-1); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.t-wrap.scrolls { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* (kept here, not in section 8: the reading-table rules below must still win over it, so the PDF keeps its pages) */
.pdf-export table.t td, .pdf-export table.t th { padding: 3pt 6pt; }
/* ---------- v5.0 release: reading tables (user feedback on the open-questions page) ----------
   Every table in reading content, with or without class "t": cells aligned to the top, 8 / 10 px padding, a rule under the
   header and between rows, a faint zebra in token colours (dark-mode aware), semi-bold left-aligned headings; a first
   column of short codes never wraps. Forms keep their own compact layout. */
.doc table:not(.t):not(.docctl) { width: 100%; border-collapse: collapse; margin: var(--sp-2) 0 14px; font-size: var(--fs-ui-plus); }
.doc table th, .doc table td { vertical-align: top; }
.doc table:not(.t):not(.docctl) th, .doc table:not(.t):not(.docctl) td { padding: var(--sp-2) 10px; text-align: left; border: 0; border-bottom: 1px solid var(--line); }
.doc table:not(.t):not(.docctl) th { background: var(--surface-2); color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--line-strong); }
.doc table:not(.t):not(.docctl) tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.doc table.t th, .doc table.t td { padding: var(--sp-2) 10px; }
.doc table.t th { font-weight: 600; }
.doc table.t tr.headrow th, .doc table.t thead th { border-bottom: 2px solid var(--line-strong); }
.doc .form table.t th, .doc .form table.t td { padding: 6px var(--sp-2); }
.doc table.codecol td:first-child, .doc table.codecol th:first-child { white-space: nowrap; width: 1%; }
.form.wide table.t th, .form.wide table.t td { padding: var(--sp-1) 6px; }
.doc table.t.register { font-size: var(--fs-sm-plus); }
.doc table.t.register th, .doc table.t.register td { padding: 6px var(--sp-2); }
.doc table.t.register td:last-child { min-width: 220px; }

/* ---------- 4.7 Reading content blocks: callouts, stop boxes, lists, steps, flows, details, diagrams, form information, escalation ---------- */
.doc section.hb { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-1) clamp(14px, 2.6vw, 28px) 20px; margin-bottom: var(--sp-4); box-shadow: var(--shadow); }
.doc section.hb > h2 { font-size: var(--fs-h1); border-bottom: 0; padding-bottom: 0; color: var(--heading); }
.doc section.hb > h2::after { content: ""; display: block; width: 40px; height: 3px; border-radius: var(--radius-3xs); background: var(--accent); margin-top: var(--sp-2); }
.doc h3 { color: var(--heading); }
.doc h4 { font-size: var(--fs-md); text-align: center; margin: 14px 0; }
.doc h5 { font-size: var(--fs-ui); margin: var(--sp-4) 0 6px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.cover h1 { font-size: var(--fs-7xl); margin: 10px 0 6px; }
.cover .eyebrow { color: var(--accent); font-weight: 700; margin: var(--sp-4) 0 0; }
.cover .lead { font-size: var(--fs-md); color: var(--ink-2); }
/* (kept here, not in section 7 / 8: the more specific rules further down must still win over these) */
@media (max-width: 640px) {
  .doc section.hb { padding: var(--sp-1) var(--sp-3) var(--sp-4); }
  .doc section.hb > h2 { font-size: var(--fs-h1-phone); }
}
@media print {
  .doc section.hb { border: 0; padding: 0; margin: 0 0 12pt; break-inside: auto; box-shadow: none; }
}
.simple { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 9px 13px; border-radius: var(--radius-sm); margin: 14px 0; }
.callout { background: var(--warn-soft); border-left: 4px solid var(--warn-line); padding: 9px 13px; border-radius: var(--radius-sm); margin: 14px 0; }
.callout.stopbox { background: var(--bad-soft); border-left-color: var(--bad); }
.note { color: var(--ink-2); font-size: var(--fs-ui); }
.small { font-size: max(var(--fs-sm), 0.82em); color: var(--ink-2); }
/* "Sources: …" line at the end of a chapter: small and muted */
main .doc p.note.sources { font-size: max(var(--fs-sm), .82em); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--sp-2); margin-top: 18px; }
main .doc p.note.sources a { color: var(--muted); }
p.form-optional { background: var(--warn-soft); border-left: 3px solid var(--warn-line); padding: var(--sp-1) 10px; border-radius: var(--radius-xs); }
ul.cross, ul.tick, ul.flag { list-style: none; padding-left: 0; }
ul.cross li, ul.tick li, ul.flag li { padding-left: 26px; position: relative; margin: 5px 0; }
ul.cross li::before { content: "✕"; position: absolute; left: 4px; color: var(--bad); font-weight: 700; }
ul.tick li::before { content: "✓"; position: absolute; left: 4px; color: var(--ok); font-weight: 700; }
ul.flag li::before { content: "⚑"; position: absolute; left: 4px; color: var(--warn-line); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
h3.ok { color: var(--ok); }
h3.bad { color: var(--bad); }
ol.steps { counter-reset: s; list-style: none; padding-left: 0; }
ol.steps > li { counter-increment: s; position: relative; padding: var(--sp-2) 0 var(--sp-2) 44px; border-bottom: 1px dashed var(--line); }
ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: 8px; width: 30px; height: 30px; border-radius: var(--radius-round); background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-ui); }
.flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 14px 0; max-width: 560px; }
.fstep { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius); padding: var(--sp-2) 14px; position: relative; margin-bottom: 22px; }
.fstep:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%); color: var(--muted); }
.fstep b { display: block; }
.fstep span { font-size: var(--fs-sm-plus); color: var(--ink-2); }
.fstep.stop { border-color: var(--bad); background: var(--bad-soft); }
.fstep.warn { border-color: var(--warn-line); background: var(--warn-soft); }
details { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 6px 0; background: var(--surface); }
details summary { cursor: pointer; padding: var(--sp-2) var(--sp-3); font-weight: 600; list-style-position: outside; }
details summary:hover { color: var(--link); }
details[open] { border-color: var(--line-strong); }
details[open] summary { border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--ink); }
details p { margin: 0; padding: 9px var(--sp-3) var(--sp-3); }
.risk-calc { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) 14px; background: var(--surface-2); }
.risk-calc label { display: flex; gap: 10px; align-items: baseline; padding: var(--sp-1) 0; cursor: pointer; }
.risk-calc .pts { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.risk-out { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-base); }
a.xref { text-decoration: underline dotted; text-underline-offset: 2px; }
.a2links { display: flex; flex-wrap: wrap; gap: 6px; }
.a2links .btn { white-space: normal; }
/* diagrams: always a light card (the drawings are made for white paper), also in dark mode */
figure.diagram { margin: 14px 0; text-align: center; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); break-inside: avoid; page-break-inside: avoid; }
figure.diagram img { max-width: 100%; height: auto; display: inline-block; cursor: zoom-in; }
figure.diagram figcaption { margin-top: 6px; font-size: var(--fs-sm); color: var(--paper-caption); }
.diagram-text { font-style: italic; color: var(--muted); }
/* inline diagrams (v5.0): the SVG is part of the page, so it uses the page fonts and the dark-mode tokens */
figure.diagram.v5 svg { cursor: zoom-in; }
figure.diagram.v5 svg:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* content blocks of 5.0: form information (screen only), document control (printed), escalation box (printed) */
.forminfo { margin: 0 0 14px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); font-size: var(--fs-ui); color: var(--ink-2); }
.forminfo h4, .forminfo h5, .forminfo b:first-child { color: var(--heading); }
.forminfo table, .forminfo dl { margin: var(--sp-1) 0; }
.forminfo dt { font-weight: 700; color: var(--heading); }
.forminfo dd { margin: 0 0 var(--sp-1); }
.docctl { margin: 10px 0 14px; }
.docctl table, table.docctl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.docctl th, .docctl td { border: 1px solid var(--line-strong); padding: var(--sp-1) var(--sp-2); text-align: left; vertical-align: top; }
.docctl th { background: var(--surface-2); color: var(--heading); font-weight: 700; font-size: var(--fs-xs); line-height: 1.3; }
.docctl td { height: 28px; }
.escalate { margin: 14px 0; padding: 10px 14px; border: 1px solid var(--line-strong); border-left: 4px solid var(--heading); border-radius: var(--radius-sm); background: var(--surface); break-inside: avoid; page-break-inside: avoid; }
.escalate > :first-child { margin-top: 0; }
.escalate > :last-child { margin-bottom: 0; }
.escalate h4, .escalate h5, .escalate b:first-child { color: var(--heading); }
/* decision tables (decision aids, the decision-tree page "decisions"): step number, the Check column, Stop cells */
section.hb[data-id="decisions"] table.t td:first-child { width: 44px; text-align: center; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
section.hb[data-id="decisions"] table.t td:nth-child(2) { font-weight: 600; color: var(--ink); }
section.hb[data-id="decisions"] .t-wrap { border-left: 3px solid var(--accent); }
td.stop5 { color: var(--stop); font-weight: 600; background: var(--stop-soft); }
table.t.decision, table.t.decide { border-left: 3px solid var(--accent); }
table.t.decision td:first-child, table.t.decide td:first-child { font-weight: 600; color: var(--heading); }
table.t.decision .stop, table.t.decide .stop { color: var(--stop); font-weight: 700; }
/* 5.1: a sub-heading (h4) in reading text — left-aligned, under its h3, in the heading colour with a thin accent rule (forms keep their centred title) */
.doc section.hb h4:not(.form h4):not(.forminfo h4):not(.escalate h4):not(.docctl h4) { font-size: var(--fs-text-plus); font-weight: 700; text-align: left; color: var(--heading); margin: 1.15em 0 .4em; padding-left: 10px; border-left: 3px solid var(--accent-line); line-height: 1.35; }

/* ---------- 4.8 Paper forms (black on white on screen as in print) ---------- */
/* forms: paper look (black on white) on screen as in print */
.form { background: var(--paper); color: var(--paper-ink); border: 1px solid var(--paper-edge); border-radius: var(--radius-xs); padding: 22px 26px; margin: var(--sp-3) 0; font-size: var(--fs-sm-plus); line-height: 1.5; --line: var(--paper-line); }
.form .fh { display: flex; justify-content: space-between; gap: var(--sp-3); border-bottom: 2px solid var(--paper-ink-2); padding-bottom: var(--sp-2); margin-bottom: 6px; }
.form .fh .co { font-weight: 700; font-size: var(--fs-base); }
.form .fh .co small { display: block; font-weight: 400; font-size: var(--fs-2xs); color: var(--paper-muted); }
.form .fh .no { font-weight: 700; border: 1px solid var(--paper-ink-2); padding: 2px var(--sp-2); height: fit-content; white-space: nowrap; }
.form h4 { color: var(--paper-ink); }
.form h4 small { font-weight: 400; color: var(--paper-muted); }
.form h5 { color: var(--paper-ink-2); border-bottom: 1px solid var(--paper-line-soft); padding-bottom: 2px; }
.form .lh { text-align: center; color: var(--paper-meta); font-style: italic; }
/* screen and PDF: the paper keeps paper colours in dark mode too (same values as print) */
@media screen {
  .form { --ink: var(--print-ink); --ink-2: var(--paper-ink-2); --muted: var(--paper-muted); --heading: var(--paper-brand); --link: var(--paper-link); --surface: var(--paper); --surface-2: var(--paper-fill); --accent: var(--paper-brand); --accent-soft: var(--paper-fill); --bad: var(--paper-stop); --bad-soft: var(--paper-stop-soft); --warn: var(--paper-warn-ink); --warn-soft: var(--paper-note-bg); --warn-line: var(--paper-note-line); --ok: var(--paper-ok-ink); --ok-soft: var(--paper-ok-soft); }
}
.fg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) 22px; margin: 6px 0; }
.fg.c1 { grid-template-columns: 1fr; }
.fg.c4 { grid-template-columns: repeat(4, 1fr); }   /* four short header fields in one row (FLM-1 … FLM-7, landscape) */
.fg i { font-style: normal; font-size: var(--fs-2xs); color: var(--paper-muted); border-bottom: 1px solid var(--paper-rule); padding-top: 18px; display: block; min-height: 38px; }
.cb { display: inline-block; margin: 2px 14px 2px 0; }
.cb::before { content: "☐ "; font-size: var(--fs-text); }
.opts { margin: 6px 0; }
.blankline { display: inline-block; min-width: 140px; border-bottom: 1px solid var(--paper-rule); }
.decl { font-size: var(--fs-xs-plus); }
.sigs { display: flex; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.sigs div { flex: 1; min-width: 140px; border-top: 1px solid var(--paper-ink-3); padding-top: var(--sp-1); font-size: var(--fs-xs); text-align: center; }
.office { border: 1px dashed var(--paper-dash); padding: 6px var(--sp-3); margin-top: var(--sp-4); background: var(--paper-fill-2); }
.form table.t th { background: var(--paper-head); color: var(--paper-ink); }
.form table.t th, .form table.t td { border-color: var(--paper-line); }
.form table.t tr:nth-child(even) td { background: transparent; }
.form table.blank td { height: 26px; }
.form p.form-optional { background: var(--paper-note-bg); color: var(--paper-note-ink); border-left-color: var(--paper-note-line); }
.print-one { margin: 6px 0 var(--sp-1); }
@media screen and (max-width: 600px) {
  .fg, .fg.c4 { grid-template-columns: 1fr; }
  .form { padding: 14px; }
}
/* wide forms (registers with many columns: class "form wide"): compact cells on screen, the table scrolls sideways on a
   narrow screen; printed and saved as PDF on A4 landscape (named page "wide", below) */
.form.wide { padding: 18px 20px; }
.form.wide table.t { font-size: var(--fs-xs-plus); min-width: 720px; }
.form.wide table.t th { vertical-align: bottom; }
@media (max-width: 600px) {
  .form.wide { padding: var(--sp-3); }
}
/* a form without a number (letters): no empty number box */
.form .fh .no:empty { display: none; }
span.blank { display: inline; white-space: nowrap; letter-spacing: 0; color: inherit; font-weight: 400; }
/* on-screen forms: labels and blanks at least 12 px (paper sizes in print and PDF are unchanged) */
@media screen {
  main .form .fg i, main .form .fh .co small, .preview .form .fg i, .preview .form .fh .co small { font-size: var(--fs-xs); }
  main .form small, .preview .form small { font-size: max(var(--fs-xs), .83em); }
}
.form .sources5 { color: var(--paper-ink-3); }
/* wide (landscape) forms: the header lines two by two, so the register keeps its rows on one sheet */
.form.wide .fh5-l, .form.wide .fh5-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
.form.wide .fh5 .fl, .form.wide .fh5 .fh5-r .fl { grid-template-columns: auto minmax(40px, 1fr); }

/* ---------- 4.9 Footer (every page) ---------- */
/* ---------- footer (every page) ---------- */
.foot5 { background: var(--foot-bg); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm-plus); margin-top: 28px; }
.foot5-in { max-width: var(--page-max-wide); margin: 0 auto; padding: 22px var(--sp-4) 10px; display: grid; grid-template-columns: 1.3fr 1.4fr 1fr; gap: 20px var(--sp-6); }
.foot5 h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 6px; }
.foot5 p { margin: 0 0 6px; line-height: 1.55; }
.foot5 .brand b { display: block; color: var(--heading); font-size: var(--fs-ui-plus); margin-bottom: var(--sp-1); }
.foot5 ul { list-style: none; margin: 0; padding: 0; }
.foot5 li { margin: 0 0 var(--sp-1); }
.foot5 a { color: var(--link); text-decoration: none; }
.foot5 a:hover { text-decoration: underline; }
.foot5-bottom { max-width: var(--page-max-wide); margin: 0 auto; padding: 10px var(--sp-4) 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-xs-plus); color: var(--muted); }
.foot5-bottom b { color: var(--ink-2); }
.layout .foot5 { grid-column: 1 / -1; margin-top: 0; }
/* 5.3 (design audit DES-04): on reading-width pages the footer lines up with the page column; Home, Documents, the
   calculators and the chapter pages keep the wide footer */
#app:has(> main.page:not(.txn-page):not(.admin-page)) .foot5-in, #app:has(> main.page:not(.txn-page):not(.admin-page)) .foot5-bottom { max-width: var(--page-max); }

/* ---------- 4.10 Diagram full-size view (lightbox) ---------- */
/* diagram full-size view */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: var(--lightbox-bg); display: flex; flex-direction: column; }
.lightbox-bar { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--lightbox-bar); color: var(--on-dark); }
.lightbox-bar span { flex: 1; font-size: var(--fs-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox-bar .btn { background: var(--on-dark-fill); color: var(--on-dark); border-color: var(--lightbox-btn-line); }
.lightbox-pic { flex: 1; overflow: auto; padding: var(--sp-3); text-align: center; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.lightbox-pic img { background: var(--paper); border-radius: var(--radius); width: 100%; max-width: 1440px; min-width: 900px; height: auto; }
body.lightbox-open { overflow: hidden; }
.lightbox-pic svg { background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 1440px; min-width: 900px; height: auto; }

/* =====================================================================================================================
   5. PAGES
   5.1 Home: identity band with photo, search, key limits, deadlines, tasks, tools, parts
   ===================================================================================================================== */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px var(--sp-3) var(--sp-3); }


.role-switch, .twin-switch { display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.role-switch > .help, .twin-switch > .help { margin-right: var(--sp-2); }
.role-chip { min-height: 30px; padding: 3px var(--sp-3); border-radius: 0; margin-left: -1px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-strong); font-size: max(var(--fs-sm), .82em); font-weight: 600; cursor: pointer; text-decoration: none; }
.role-switch > .role-chip:nth-child(2), .twin-switch > .role-chip:nth-child(2) { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.role-switch > .role-chip:last-child, .twin-switch > .role-chip:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.role-chip:hover { background: var(--surface-2); color: var(--ink); }
.chip.role-chip.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); position: relative; z-index: 1; }
.twin-switch { margin: 0 0 10px; }
.tasks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.task { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; font-size: var(--fs-ui-plus); line-height: 1.3; text-decoration: none; }
.task:hover { border-color: var(--accent); background: var(--accent-soft); }
.task .ti { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-ui); }

.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); grid-auto-rows: 1fr; }
.cat { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 10px; row-gap: 2px; padding: 10px var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.cat:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.cat .ic { grid-row: 1 / 4; width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface-2); font-size: var(--fs-md); }
.cat .ct { font-weight: 700; font-size: var(--fs-text); line-height: 1.3; color: var(--ink); }
.cat .cn { font-size: max(var(--fs-sm), .82em); color: var(--accent); font-weight: 700; }
/* (kept here, not in section 7 / 8: the more specific rules further down must still win over these) */

.hcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.home2 { padding-top: var(--sp-3); }
.popular { margin: var(--sp-2) 0 0; font-size: var(--fs-ui); color: var(--muted); }
/* 5.3 (C15): the dots between the popular links belong to the next link, so they wrap with it (none left dangling at a line end) */
.popular a + a::before { content: "·"; display: inline-block; margin-right: .5em; font-weight: 400; color: currentColor; opacity: .7; }
.popular > span:first-child { font-weight: 600; margin-right: var(--sp-1); }
.popular a { font-weight: 600; text-decoration: none; }
.popular a:hover { text-decoration: underline; }
.hcard-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; min-height: 42px; padding: 5px 14px; border-bottom: 1px solid var(--line); }
.hcard-h .h-sec { margin: 0; }

.rowlist, .home2 .tasks, .home2 .cats  { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0; padding: 2px var(--sp-2) 6px; }
.rowlist.two, .home2 .tasks.two, .home2 .cats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.rowlist > a, .home2 .rowlist > .task, .home2 .rowlist > .cat { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 3px 6px; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font-size: var(--fs-ui-plus); font-weight: 600; line-height: 1.3; text-decoration: none; transform: none; }
.rowlist > a:last-child, .rowlist.two > a:nth-last-child(-n+2):nth-child(odd), .rowlist.two > a:last-child { border-bottom: 0; }
.rowlist > a:hover, .home2 .rowlist > .task:hover, .home2 .rowlist > .cat:hover { background: var(--accent-soft); border-color: var(--line); box-shadow: none; }
.rowlist > a .li { width: 26px; height: 26px; }
.home2 .cat .ct { flex: 1 1 auto; font-size: var(--fs-ui-plus); font-weight: 600; color: var(--ink); }
.home2 .cat .cn { margin-left: auto; flex: none; color: var(--muted); font-weight: 600; font-size: max(var(--fs-sm), .82em); white-space: nowrap; }
/* ---------- identity band (Home) ---------- */
.idband { background: var(--surface); border-bottom: 1px solid var(--line); }
.idband-in { max-width: var(--page-max-wide); margin: 0 auto; padding: 22px var(--sp-4) 18px; }
.idband h1 { margin: 0; font-size: var(--fs-6xl); line-height: 1.25; color: var(--heading); letter-spacing: -.01em; }
.idband h1::before { content: ""; display: block; width: 40px; height: 3px; border-radius: var(--radius-3xs); background: var(--accent); margin-bottom: var(--sp-3); }
.idband .sub { margin: 6px 0 0; font-size: var(--fs-base-plus); color: var(--ink-2); max-width: 760px; }
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--muted); }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust svg.i { width: 15px; height: 15px; color: var(--accent); vertical-align: -2px; }
.trust a { color: var(--link); text-decoration: none; font-weight: 600; }
.trust a:hover { text-decoration: underline; }
.trust .langs a + a::before, .trust .langs b + a::before, .trust .langs a + b::before { content: "·"; color: var(--muted); margin: 0 6px; font-weight: 400; }
.trust .langs b { color: var(--ink); }
.idsearch { margin: var(--sp-4) 0 0; max-width: 760px; }
.idsearch .idbox { position: relative; display: flex; }
.idsearch .idbox svg.i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); }
.idsearch input { width: 100%; height: 48px; padding: 0 112px 0 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--fs-base-plus); box-shadow: var(--shadow-inset); }
.idsearch .go { position: absolute; right: 5px; top: 5px; bottom: 5px; min-height: 0; padding: 0 var(--sp-4); }
.idsearch .popular { margin: var(--sp-2) 0 0; font-size: var(--fs-sm-plus); color: var(--muted); }
.idsearch .popular a { font-weight: 600; text-decoration: none; }
.idsearch .popular a:hover { text-decoration: underline; }
/* ---------- Home grid ---------- */
.home5 { padding-top: var(--sp-4); padding-bottom: var(--sp-2); }
.home5 .row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--sp-3); align-items: start; margin-bottom: var(--sp-3); }
.home5 .row.full { grid-template-columns: minmax(0, 1fr); }
.home5 .stack { display: grid; gap: var(--sp-3); }
.hcard-h .more { font-size: var(--fs-sm-plus); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-1); }
.hcard-h .more svg.i { width: 15px; height: 15px; }
.hcard-h .more:hover { text-decoration: underline; }
/* key limits: figure cards */
.figs { display: grid; }
.fig { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fig:nth-child(3n) { border-right: 0; }
.fig:nth-last-child(-n+3) { border-bottom: 0; }
.fig:hover { background: var(--accent-soft); }
.fig .k { font-size: var(--fs-xs-plus); font-weight: 600; line-height: 1.35; }
.fig .v { font-size: var(--fs-4xl); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 2px; }
html[lang="te"] .fig .v, html[lang="hi"] .fig .v { font-size: var(--fs-xl); }   /* 5.2.1: the longer Telugu / Hindi figures stay on one line */
.fig .v small { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.fig .d { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.4; }
.fig .s { justify-content: space-between; gap: 6px; }
.fig .s b { color: var(--link); font-weight: 600; white-space: nowrap; }
/* next deadlines */
.dl5 { list-style: none; margin: 0; padding: var(--sp-1) 14px 6px; }
.dl5 li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.dl5 li:last-child { border-bottom: 0; }
.dl5 .dd { display: grid; place-items: center; width: 46px; height: 48px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-xs); background: var(--surface); line-height: 1.05; }
.dl5 .dd b { font-size: var(--fs-lg); color: var(--heading); font-variant-numeric: tabular-nums; }
.dl5 .dd small { font-size: var(--fs-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dl5 .dt a { font-weight: 600; font-size: var(--fs-ui); line-height: 1.35; text-decoration: none; color: var(--ink); display: block; }
.dl5 .dt a:hover { color: var(--link); text-decoration: underline; }
.dl5 .dt small { display: block; font-size: var(--fs-xs-plus); color: var(--muted); margin-top: 1px; }
.dl5 .dt small .soon { color: var(--warn); font-weight: 700; }
/* latest RBI change */
.lc { padding: 10px 14px var(--sp-3); }
.lc-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) 10px; align-items: center; font-size: var(--fs-xs-plus); color: var(--muted); }
.lc-meta .tag { font-weight: 600; }
.lc p { margin: 6px 0 6px; font-size: var(--fs-ui); line-height: 1.5; }
.lc p { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.lc .note5 { display: block; font-size: var(--fs-xs); color: var(--muted); margin: 6px 0 0; }
.lc .note5 .go5 { margin-right: 6px; }
.lc a.go5 { font-size: var(--fs-sm-plus); font-weight: 600; text-decoration: none; }
.lc a.go5:hover { text-decoration: underline; }
/* first Home row: Key limits stretches to the height of the right-hand column (no gap under it) */
.home5 .row.top > .limits-panel { display: flex; flex-direction: column; }
.home5 .row.top > .limits-panel > .figs { flex: 1 1 auto; }
/* ======================================================================================================================
   v5.0 additions to the approved design (_work/design/v50): Resolution badge, photo banners, inline diagrams, content
   blocks (.forminfo, .docctl, .escalate, requirement tags, decision tables), touch targets and print.
   ====================================================================================================================== */
/* identity band with the banknotes photo under a navy overlay (text stays AA-readable: white on ≥ 88 % navy) */
.idband.photo { position: relative; overflow: hidden; background: var(--navy); border-bottom: 0; color: var(--band-ink); }
.band-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.band-veil { position: absolute; inset: 0; background: var(--band-overlay); z-index: 1; }
.idband.photo .idband-in { position: relative; z-index: 2; }
.idband.photo h1 { color: var(--band-ink); }
.idband.photo h1::before { background: var(--accent-line); }
.idband.photo .sub { color: var(--band-muted); }
.idband.photo .trust { color: var(--band-muted); }
.idband.photo .trust svg.i { color: var(--accent-line); }
.idband.photo .trust a, .idband.photo .trust .langs b { color: var(--band-ink); }
.idband.photo .trust .langs a + a::before, .idband.photo .trust .langs b + a::before, .idband.photo .trust .langs a + b::before { color: var(--band-muted); }
.idband.photo .popular { color: var(--band-muted); }
.idband.photo .popular a { color: var(--band-ink); }
.idband.photo .guide-hint { color: var(--band-muted); }
.idband.photo .guide-hint a { color: var(--band-ink); font-weight: 600; }
.idband.photo .guide-hint svg.i { color: var(--accent-line); }
.idband.photo .idsearch input { border-color: transparent; color: var(--ink); }
.idband .results { margin-top: var(--sp-3); }
/* ---------- v5.0 release: Home layout (user feedback 16 Oct 2026) ----------
   One container for every Home block: .idband-in and .home share max-width var(--wide-w) + 32 px with 16 px gutters, so
   the hero, Key limits, Common tasks and the parts line up. Hero = identity + search (60%) | Next deadlines (40%); stacked
   below 1024 px. The banner photo is a blurred texture under a 90% navy veil (no note text legible). Key-limit cards have
   natural height: icon + label, figure, then the note with the source right under it. */
.id-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px var(--sp-3); align-items: center; }
.id-main { padding-right: var(--sp-4); }
.id-grid.one { grid-template-columns: minmax(0, 1fr); }
.id-main { min-width: 0; }
.idband .idsearch { max-width: none; }
.idband-in { padding-bottom: 28px; }
.idband.photo .id-side { color: var(--ink); box-shadow: var(--shadow-band); }
.idband .id-side .dl5 li { padding: 7px 0; }
.hcard-h .art { display: inline-flex; flex: 0 0 auto; margin-right: var(--sp-2); }
.hcard-h .art svg, .hcard-h .art img { width: 32px; height: 32px; }
.hcard-h .art + .h-sec { margin-right: auto; }
.home5 .row.top { align-items: start; }
.home5 .row.top > .limits-panel > .figs { grid-auto-rows: auto; }
.figs { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
@supports (grid-template-rows: subgrid) {
  .figs { grid-auto-rows: auto auto auto; }
  .fig { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
}
.fig { min-height: 0; padding: var(--sp-4); gap: var(--sp-1); }
.fig .kh { display: flex; align-items: center; gap: 10px; }
.fig .kh .art { display: inline-flex; flex: 0 0 auto; }
.fig .kh .art svg, .fig .kh .art img { width: 34px; height: 34px; }
.fig .k { color: var(--muted); }
.fig .v { color: var(--heading); align-self: end; }
.fig .d { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }   /* 5.2.1: the source tag sits at the foot of the row in every card */
.fig .d > .s { margin-top: auto; }
.fig .s { display: inline-block; margin: var(--sp-2) 0 0; padding: 1px var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); font-size: var(--fs-2xs); color: var(--muted); white-space: normal; }
.fig:hover .s { border-color: var(--accent-line); }
.lc p { -webkit-line-clamp: 3; }
.home5 .stack { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.lc-meta .tag { white-space: normal; overflow-wrap: anywhere; }
.lc p { overflow-wrap: anywhere; }
.edition5 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.edition5 .lic-ed { background: var(--on-dark-fill); color: var(--on-dark); border: 1px solid var(--on-dark-line); font-weight: 600; }
.edition5 .lnk { color: var(--band-muted); font-size: var(--fs-sm-plus); min-height: 32px; }
.home2 .cat .cat-th, .home2 .cat > .li { flex: none; width: 96px; height: 64px; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.cat-th .cat-img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
.home2 .cats.rowlist > .cat { padding-top: 6px; padding-bottom: 6px; }
/* 5.2.1 (user: "still no images" on Home): the band photo shown clearly — no blur; a strong veil only behind the text column, light elsewhere */
.idband.photo .band-photo { filter: none; transform: none; object-position: 70% 50%; }
/* 5.3: the crop point and zoom of a photo (structure.json "pos" / "zoom"), set by app.js as --ph-pos / --ph-zoom; they
   win over the band rules above, as the old inline style did */
.ph-pos { object-position: var(--ph-pos) !important; }
.ph-zoom { transform: scale(var(--ph-zoom)) !important; transform-origin: var(--ph-pos) !important; }

/* ---------- 5.2 Part pages: photo header card, chapter list ---------- */
/* ---------- category page ---------- */
.cat-h { margin: var(--sp-1) 0 var(--sp-1); font-size: var(--fs-h1); color: var(--heading); }
.cat-h > span:first-child { width: 36px; height: 36px; border-radius: var(--radius-sm); display: inline-grid; place-items: center; background: var(--surface-2); font-size: var(--fs-lg); flex: none; }
.seclist { list-style: none; padding: 0; margin: 0 0 var(--sp-2); display: grid; gap: 0; counter-reset: sl; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.seclist li { counter-increment: sl; border-top: 1px solid var(--line); }
.seclist li:first-child { border-top: 0; }
.seclist a { display: block; position: relative; padding: 9px 14px 9px 50px; color: var(--ink); text-decoration: none; }
.seclist a::before { content: counter(sl); position: absolute; left: 14px; top: 10px; width: 24px; height: 24px; border-radius: var(--radius-round); background: var(--surface-2); color: var(--ink-2); font-weight: 700; font-size: var(--fs-xs-plus); display: grid; place-items: center; }
.seclist a:hover { background: var(--accent-soft); }
.seclist b { display: block; font-size: var(--fs-text-plus); color: var(--link); margin-bottom: 1px; }
.seclist span { display: block; color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.45; }
.seclist .tag { display: inline-flex; margin: 2px 0 3px; }
.seclist li.twin-entry { display: block; padding-bottom: var(--sp-2); }
.seclist .twin-btns { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 50px; }
.seclist .twin-btns a.btn { display: inline-flex; padding: 3px 10px; }
.seclist .twin-btns a.btn::before { content: none; }
/* part (category) pages: a slim photo banner with the part title */
.partband { position: relative; overflow: hidden; border-radius: var(--radius); margin: 0 0 10px; background: var(--navy); min-height: 104px; display: flex; align-items: flex-end; }
.partband .partband-in { position: relative; z-index: 2; padding: var(--sp-4) 18px 14px; }
.partband .cat-h { color: var(--band-ink); margin: 0; }
.partband .cat-h .li { background: var(--on-dark-fill); color: var(--band-ink); }
/* v5.0: line-art illustrations (img/art, decorative, screen only), part intro, Documents header, form page details */
.art { flex: none; display: inline-flex; line-height: 0; }
.art img, .art svg { width: 72px; height: 72px; }
.cat-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.cat-intro .lead { flex: 1 1 auto; min-width: 0; }
/* ---------- 5.2.1 photos (user: "use the photos"): part / Guide / Documents header cards, Browse thumbnails, Home band ---------- */
.partband.phead5 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); align-items: stretch; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 2px 0 14px; }
.partband.phead5.nophoto { grid-template-columns: minmax(0, 1fr); }
.partband.phead5 .partband-in { position: static; align-self: center; padding: 18px 20px; min-width: 0; }
.partband.phead5 .cat-h, .partband.phead5 h1 { color: var(--heading); margin: 0 0 6px; }
.partband.phead5 .cat-h .li { background: var(--surface-2); color: var(--accent); }
.partband.phead5 .lead { margin: 0; }
.partband.phead5 .cat-intro { gap: 14px; }
.partband.phead5 .docs-hero { margin: 0; }
.ph5 { margin: 0; height: 220px; min-width: 0; overflow: hidden; background: var(--surface-2); }
.ph5 .band-photo { position: static; display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); transform: none; }

/* ---------- 5.3 Chapter (reading) pages: meta line, on this page, sources, pager, licence notice ---------- */
/* ---------- chapter page ---------- */
.faq-links { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: var(--sp-2) 14px; margin: 14px 0 var(--sp-2); background: var(--surface); }
.faq-links h2 { font-size: var(--fs-text); margin: 0 0 var(--sp-1); }
.faq-links ul { margin: 0; padding-left: 18px; }
.pager { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: 14px; flex-wrap: wrap; }
.pager .btn { max-width: 48%; white-space: normal; text-align: left; min-height: 40px; }
.totop { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 42px; height: 42px; border-radius: var(--radius-round); border: 0; background: var(--primary); color: var(--primary-ink); font-size: var(--fs-2xl); cursor: pointer; box-shadow: var(--shadow-2); }
.relnote { border-left: 3px solid var(--line); padding: 2px 0 2px 14px; margin: 10px 0; }
.relnote:first-of-type { border-left-color: var(--accent); }
.relnote p { margin: 0 0 var(--sp-1); }
.relnote ul { margin: 0; padding-left: 18px; }
.doc section.hb > h2 { margin-bottom: var(--sp-2); }
.meta5 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: var(--sp-2) 0; margin: var(--sp-1) 0 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--fs-sm-plus); color: var(--muted); }
.meta5 .grp { display: inline-flex; align-items: center; gap: 6px; }
.meta5 .grp svg.i { width: 16px; height: 16px; }
.meta5 .k { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.meta5 .aud { background: var(--surface-2); border-color: var(--line-strong); color: var(--heading); font-weight: 700; font-size: var(--fs-xs-plus); }
.meta5 a { font-weight: 600; text-decoration: none; }
.meta5 a:hover { text-decoration: underline; }
.meta5 .act { margin-left: auto; display: inline-flex; gap: var(--sp-1); flex-wrap: wrap; }
.meta5 .act .btn { background: transparent; border-color: transparent; color: var(--link); padding: 3px var(--sp-2); min-height: 30px; }
.meta5 .act .btn:hover { background: var(--surface-2); border-color: var(--line); }
.onpage5 { margin: var(--sp-3) 0 var(--sp-1); padding: var(--sp-2) 14px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.onpage5 b { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: var(--sp-1); }
.onpage5 ol { margin: 0; padding: 0 0 0 20px; columns: 2; column-gap: 28px; font-size: var(--fs-ui); }
.onpage5 li { break-inside: avoid; padding: 2px 0; color: var(--muted); }
.onpage5 a { text-decoration: none; }
.onpage5 a:hover { text-decoration: underline; }
.doc h3 { font-size: var(--fs-h3); padding-top: var(--sp-3); border-top: 1px solid var(--line); margin-top: 1.4em; }
figure.diagram.v5 { background: var(--surface); padding: 0; border: 1px solid var(--line); text-align: left; overflow: hidden; }
figure.diagram.v5 svg { display: block; width: 100%; height: auto; max-width: 720px; margin: 0 auto; }
figure.diagram.v5 figcaption { margin: 0; padding: 7px 14px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs-plus); display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.sources5 { margin: 20px 0 0; padding: var(--sp-3) 0 0; border-top: 2px solid var(--line); font-size: var(--fs-sm-plus); color: var(--ink-2); scroll-margin-top: 70px; }
.sources5 h3 { border: 0; padding: 0; margin: 0 0 6px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sources5 ul, .sources5 ol { margin: 0; padding-left: 22px; list-style: disc; }
.sources5 li { margin: 0 0 var(--sp-1); line-height: 1.5; }
/* 5.1: every "Sources" note is a label + bulleted list + date line (reading pages, forms, policies, the Policy Manual) */
.doc .sources5 h3.src-h, .sources5 h3.src-h { border: 0; padding: 0; margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sources5.srcdoc { margin-top: var(--sp-4); padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
/* (kept here, not in section 8: the reading-table rules below must still win over it, so the PDF keeps its pages) */
@media print {
  .sources5, .sources5.srcdoc { font-size: var(--pfs-sm); color: var(--paper-ink-2); margin: 10pt 0 0; padding: 5pt 0 0; border-top: 1px solid var(--paper-line); break-inside: avoid; }
  .doc .sources5 h3.src-h, .sources5 h3.src-h { font-size: var(--pfs-2xs); color: var(--paper-muted); margin: 0 0 3pt; break-after: avoid; }
  .sources5 ul { padding-left: 16pt; }
  .sources5 li { margin: 0 0 1.5pt; line-height: 1.35; }
  .sources5 a { color: var(--paper-ink-2); text-decoration: none; }
}
.sources5 .checked { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-xs-plus); }
.credits { padding-left: 20px; }
.credits li { margin: 0 0 var(--sp-1); }
.credits span { text-transform: capitalize; }
.onpage5 ol ol { columns: 1; padding: 2px 0 2px 18px; list-style: lower-alpha; font-size: var(--fs-sm-plus); }
.lic-notice { display: flex; gap: 10px; align-items: flex-start; border-left: 3px solid var(--accent); }
.lic-notice > .i { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.lic-notice p { margin: 0 0 var(--sp-1); }
.lic-notice p:last-child { margin: 0; }
.doc h4[id], #sources, .onpage5 ~ * h3 { scroll-margin-top: calc(var(--tb-h) + 12px); }
.print-edition { display: none; }
.idband.photo .id-main { text-shadow: var(--band-text-shadow); }
/* 5.2.1 (user: "still no images" on a chapter page): the part photo as a strip above the chapter text */
.ch-photo { position: relative; margin: var(--sp-1) 0 var(--sp-4); height: 150px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.ch-photo .band-photo { position: static; display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
/* 5.3: the offline copy (downloaded .html): its page frame and contents list (was inline in app.js) */
.offline-main { margin: 0 auto; }
.offline-toc { columns: 2; font-size: var(--fs-ui); }

/* ---------- 5.4 Documents page: sets, finder, compact table ---------- */
/* ---------- Documents (forms, letters, policies in sets) ---------- */
.docs-hero { margin: var(--sp-1) 0 10px; }
.docs-hero h1 { margin: 0 0 2px; font-size: var(--fs-h1); color: var(--heading); }
.docs-hero p { margin: 0; color: var(--muted); font-size: var(--fs-ui-plus); }
.docs-page > .callout { margin: 0 0 10px; padding: 7px var(--sp-3); font-size: var(--fs-ui-plus); }
.form-finder { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: var(--sp-2) 10px; align-items: end; margin: 0 0 14px; padding: 10px var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.form-finder label { display: block; font-size: max(var(--fs-sm), .82em); font-weight: 600; color: var(--ink-2); }
.form-finder input, .form-finder select { display: block; width: 100%; min-height: 36px; margin-top: 3px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font: inherit; font-size: var(--fs-ui-plus); }
.form-finder > .help { grid-column: 1 / -1; margin: 0; }
.docset { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px var(--sp-3) 10px; margin: 0 0 10px; box-shadow: var(--shadow); }
.docset-h { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 6px 0; }
.docset-h h2 { font-size: var(--fs-base); margin: 0; color: var(--heading); display: flex; align-items: center; gap: var(--sp-2); }
.docset-h h2 .ic { font-size: var(--fs-base); }
.docset-tools { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.docset-tools .btn { background: transparent; border-color: transparent; color: var(--link); }
.docset-tools .btn:hover { background: var(--surface-2); border-color: var(--line); }
.docset .help { margin: 6px 0 6px; }
.local-copies { margin-top: var(--sp-4); }
.local-copies h2 { font-size: var(--fs-md); margin: 0 0 var(--sp-1); }
/* one document (form) page */
.docbar { position: sticky; top: calc(var(--tb-h) + 6px); z-index: 5; display: flex; align-items: center; gap: 6px var(--sp-2); flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px var(--sp-2); margin-bottom: var(--sp-2); box-shadow: var(--shadow); }
.docbar-tools { margin-left: auto; display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.local-note { font-size: var(--fs-sm); }
/* ---------- Documents: compact table with type badges ---------- */
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); margin: 2px 0 var(--sp-1); }
.dtable th { text-align: left; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 6px var(--sp-2); border-bottom: 1px solid var(--line-strong); background: transparent; }
.dtable td { padding: 6px var(--sp-2); border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--accent-soft); }
.dtable .no { width: 84px; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--heading); font-size: var(--fs-sm-plus); }
.dtable .ty { width: 110px; }
.dtable .ti a { color: var(--ink); text-decoration: none; font-weight: 500; }
.dtable .ti a:hover { color: var(--link); text-decoration: underline; }
.dtable .ac { width: 1%; white-space: nowrap; text-align: right; }
.dtable .ac a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--link); }
.dtable .ac a:hover { background: var(--surface-2); }
.dtable .ac svg.i { width: 17px; height: 17px; }
.dtable .opt { color: var(--muted); font-size: var(--fs-xs-plus); }
.docs5 .docset { padding: 0 0 var(--sp-1); }
.docs5 .docset-h { padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.docs5 .docset > .help { padding: 0 var(--sp-3); margin: 6px 0 2px; }
.docs5 .dtable { margin: 0; }
.docs5 .dtable th:first-child, .docs5 .dtable td:first-child { padding-left: var(--sp-3); }
.docs5 .dtable th:last-child, .docs5 .dtable td:last-child { padding-right: 10px; }
.docs5 .form-finder { grid-template-columns: 1.6fr 1.4fr 1fr 1fr 1fr; }
.typekey { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--fs-xs-plus); color: var(--muted); margin: 0 0 10px; }
.docs5 .docs-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.docs5 .docs-hero .art img, .docs5 .docs-hero .art svg { width: 64px; height: 64px; }
.dtable tr.hidden { display: none !important; }

/* ---------- 5.5 One document (form view): A4 sheet on a grey desk ---------- */
.leave-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
/* ---------- form view: A4 sheet on a grey desk ---------- */
.form-page5 { max-width: var(--form-page-w); }
.form-page5 .doc-title { font-size: var(--fs-h1); color: var(--heading); margin: 2px 0 var(--sp-2); }
.form-page5 .docbar { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.notice5 { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); background: var(--warn-soft); border: 1px solid var(--line); border-left: 3px solid var(--warn-line); border-top: 0; padding: 6px 10px; }
.notice5 svg.i { width: 16px; height: 16px; margin-top: 2px; color: var(--warn); }
.desk { background: var(--desk); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 28px var(--sp-4) 36px; overflow-x: auto; }
.a4sheet { width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto; background: var(--paper); color: var(--paper-ink); box-shadow: var(--sheet-shadow); padding: 16mm 15mm 18mm; }
.a4sheet .form { border: 0; padding: 0; margin: 0; border-radius: 0; box-shadow: none; font-size: var(--fs-xs-plus); }
.a4sheet + .a4sheet { margin-top: 18px; }
.a4sheet-foot { display: flex; justify-content: space-between; font-size: var(--fs-3xs); color: var(--paper-muted-3); border-top: 1px solid var(--paper-line-soft); margin-top: 18px; padding-top: var(--sp-1); }
.fh5 { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 var(--sp-5); padding-bottom: 10px; border-bottom: 2px solid var(--paper-ink-2); margin-bottom: 0; }
.fh5 .fl { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: end; gap: var(--sp-2); min-height: 26px; font-size: var(--fs-2xs); color: var(--paper-ink-3); }
.fh5 .fl i { border-bottom: 1px solid var(--paper-muted-3); height: 18px; }
.fh5 .fl.co span { font-weight: 700; color: var(--paper-ink); font-size: var(--fs-xs); }
.fh5 .fh5-r .fl { grid-template-columns: 148px minmax(0, 1fr); }
/* 5.3 (R02): the boxed form number sits in the flow above the right column (it was lifted above the header and clipped in print and PDF) */
.fh5 .fno { display: table; margin: 0 0 var(--sp-1) auto; font-weight: 700; font-size: var(--fs-xs); border: 1px solid var(--paper-ink-2); padding: 1px var(--sp-2); letter-spacing: .03em; }
.form.wide .fh5 .fno { grid-column: 1 / -1; }
.form-src { font-size: var(--fs-xs-plus); color: var(--muted); margin: 10px 2px 0; }
.form-page5 #docBody > h2 { display: none; }
.form-page5 .desk { margin-top: 0; }
.form-page5 #dInfo .forminfo { margin: 10px 0 0; border-radius: 0; border-top: 0; }
.form-page5 .a4lbl { margin: 0; align-self: center; }
@media screen {
  .a4sheet.wide { width: 297mm; min-height: 210mm; }
}
.a4sheet .doc section.hb, .a4sheet section.hb { border: 0; padding: 0; margin: 0; box-shadow: none; background: transparent; }

/* ---------- 5.6 Downloads ---------- */
/* ---------- Downloads ---------- */
.dl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dl-item { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 10px; box-shadow: var(--shadow); }
.dl-ic { font-size: var(--fs-2xl); flex: none; }
.dl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dl-main .help { margin: 0; }
.dl-meta { font-size: max(var(--fs-sm), 0.82em); color: var(--muted); }
.dl-item .btn { flex: none; }
.download-templates { margin: 14px 0 var(--sp-5); }
.download-templates > h2 { margin-bottom: var(--sp-1); font-size: var(--fs-lg); }
.dl-template-set { padding: var(--sp-1) var(--sp-3) var(--sp-2); margin: 6px 0; }
.dl-template-set > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; font-weight: 700; color: var(--ink); background: transparent; border: 0; }
.dl-template-set[open] > summary { margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; }
.dl-actions { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.dl-template-set .dl-item { box-shadow: none; }
.ufilter { align-items: center; }
.ufilter .field-in { flex: 1 1 260px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.ugrid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-4); }

/* ---------- 5.7 Tools: checker, calculators, calendar, staff learning and test, updates ---------- */
/* ---------- tools: checker, calculators, calendar, staff learning, updates ---------- */
.check-card { max-width: var(--read-w); margin: var(--sp-3) 0; padding: 14px var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.check-card label { display: block; margin: 0 0 6px; }
.check-select { display: block; width: 100%; max-width: 620px; min-height: 40px; padding: 7px 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; }
.check-note { max-width: var(--read-w); padding: var(--sp-2) var(--sp-3); border-left: 4px solid var(--warn-line); background: var(--warn-soft); border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--fs-ui-plus); }
.check-grid, .calc-grid, .training-grid { display: grid; }
.check-grid { margin-top: 10px; }
.check-grid select, .calc-grid input, .calc-grid select, .calc-grid textarea { display: block; width: 100%; min-height: 40px; margin-top: var(--sp-1); padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font: inherit; }
.checker-page fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3) 10px; margin: 0 0 10px; min-width: 0; }
.checker-page legend { font-weight: 700; padding: 0 6px; }
.ck-radios { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-radio { display: inline-flex; gap: var(--sp-2); align-items: flex-start; min-height: 38px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.ck-radio input { accent-color: var(--primary); margin-top: 3px; }
.ck-radio:has(input:checked) { border-color: var(--primary); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.ck-result { max-width: var(--read-w); }
.ck-result h2 { font-size: var(--fs-md); margin: var(--sp-4) 0 6px; color: var(--heading); }
.ck-result h3 { font-size: var(--fs-text-plus); margin: var(--sp-3) 0 var(--sp-1); }
.ck-verdict { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); margin: 14px 0 var(--sp-2); border: 1px solid; }
.ck-v { font-size: 1.3em; font-weight: 800; }
.v-allowed { background: var(--ok-soft); border-color: var(--ok); color: var(--ink); }
.v-allowed .ck-v { color: var(--ok); }
.v-cond { background: var(--warn-soft); border-color: var(--warn-line); color: var(--ink); }
.v-cond .ck-v { color: var(--warn); }
.v-refer { background: var(--surface-2); border-color: var(--primary); color: var(--ink); }
.v-refer .ck-v { color: var(--heading); }
.v-no { background: var(--bad-soft); border-color: var(--bad); color: var(--ink); }
.v-no .ck-v { color: var(--bad); }
.ck-answers { display: flex; flex-wrap: wrap; gap: var(--sp-1) 6px; align-items: center; }
.ck-answers .chip { white-space: normal; }
.ck-conds li, .ck-docs li, .ck-forms li { margin: 3px 0; }
.ck-doc { display: inline-flex; gap: var(--sp-2); align-items: flex-start; }
.ck-boxes { list-style: none; padding-left: 0; }
.verify-note { margin: var(--sp-2) 0; padding: 7px var(--sp-3); border-left: 4px solid var(--warn-line); background: var(--warn-soft); border-radius: var(--radius-sm); font-size: var(--fs-ui); }
.en-tag { font-size: var(--fs-xs); }
.update-list, .training-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; margin: 14px 0; }
.update-card, .training-card, .calc-card { min-width: 0; padding: 14px var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.update-card h2, .training-card h2, .calc-card h2 { margin-top: 0; font-size: var(--fs-md); }
/* 5.3 (C21): the Updates page with no tracker entries lists the newest Key RBI circulars */
.update-fallback { margin: var(--sp-4) 0; }
.update-fallback h2 { font-size: var(--fs-h3); margin-top: 0; }
.fallback-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.fallback-list li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-ui); }
.fallback-list .num { color: var(--muted); margin: 0 var(--sp-1); }
.update-card.is-new { border-left: 4px solid var(--accent); }
.update-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-3); color: var(--muted); font-size: max(var(--fs-sm), .82em); }
.calc-card { margin: var(--sp-3) 0; }
.calc-result { margin: var(--sp-3) 0; padding: var(--sp-3) 14px; color: var(--ink); background: var(--surface-2); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); line-height: 1.6; overflow-wrap: anywhere; }
.calc-working summary { cursor: pointer; font-weight: 600; margin: var(--sp-2) 0; }
.calc-result .over td, tr.over td { color: var(--bad); font-weight: 700; }
/* 5.3 (user: "view is not professional"): equal-height module cards aligned at the top (the shared .training-grid rule
   above had align-items: end, so cards of different heights sat on a ragged line); links as a plain list */
.training-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: stretch; gap: 14px; }
.training-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); border-top: 3px solid var(--accent); }
.training-card .tc-head { display: flex; align-items: flex-start; gap: 10px; }
.training-card .tc-num { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-round); background: var(--surface-2); color: var(--accent); font-size: var(--fs-sm); font-weight: 700; border: 1px solid var(--line); }
.training-card h2 { margin: 2px 0 0; font-size: var(--fs-base); line-height: 1.35; }
.training-card .tc-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.training-card .tc-links li { border-bottom: 1px solid var(--line); }
.training-card .tc-links li:last-child { border-bottom: 0; }
.training-card .tc-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) 2px; text-decoration: none; font-size: var(--fs-text); line-height: 1.4; }
.training-card .tc-links a::after { content: "›"; color: var(--muted); font-size: var(--fs-lg); line-height: 1; }
.training-card .tc-links a:hover, .training-card .tc-links a:focus-visible { text-decoration: underline; }
.training-card .btn { margin-top: auto; }
.gst-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.gst-row-head h3 { margin: 0; }
.gst-rows { display: grid; gap: var(--sp-2); }
.gst-trade-toggle { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 10px 0; padding: var(--sp-1); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.gst-trade-toggle button { min-height: 42px; padding: var(--sp-2) 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.gst-trade-toggle button.active { border-color: var(--primary); background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--primary); }
.gst-row { grid-template-columns: minmax(150px,1fr) minmax(175px,1fr) minmax(180px,1fr) minmax(180px,1fr) auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.gst-row label { display: block; min-width: 0; font-weight: 600; }
.gst-row select, .gst-row input { display: block; width: 100%; min-height: 38px; margin-top: var(--sp-1); padding: 6px var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; }
.gst-row-output { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.gst-row-output small { display: block; color: var(--muted); margin-top: var(--sp-1); }
.gst-remove { justify-self: end; }
.txn-breakdown > div { display: flex; justify-content: space-between; gap: 18px; padding: 6px 2px; border-bottom: 1px solid var(--on-dark-rule); }
.txn-breakdown > div b { white-space: nowrap; }
.txn-page { max-width: var(--page-max-wide); }
.txn-page .lead { margin: var(--sp-1) 0 10px; }
.txn-page .calc-card { margin: 10px 0; padding: 14px; }
.txn-page .calc-card h2 { margin: 0 0 10px; font-size: 1.18rem; }
.txn-page .gst-row { grid-template-columns: minmax(115px,.8fr) minmax(145px,1fr) minmax(190px,1.25fr) minmax(145px,1fr) auto; }
.txn-notes { margin-top: 9px; color: var(--muted); font-size: .9rem; }
.txn-notes summary { width: fit-content; cursor: pointer; color: var(--ink-2); font-weight: 650; }
.txn-notes p { margin: 7px 0 0; }
.txn-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.txn-card-head h2 { margin: 0 !important; }
.cal-list { list-style: none; padding: 0; margin: 0 0 14px; }
.cal-item { display: flex; gap: var(--sp-3); align-items: flex-start; justify-content: space-between; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); margin: 6px 0; background: var(--surface); }
.cal-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; margin-top: 3px; font-size: var(--fs-ui); }
.st-q { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; }
.st-q legend { font-weight: 700; padding: 0 6px; }
.st-q .ck-radio { display: flex; margin: 6px 0; }
.st-cert { text-align: center; border: 3px double var(--paper-ink-3); padding: 30px; }
.st-cert .st-cert-name { font-size: var(--pfs-cert); font-weight: 700; margin: 18px 0 6px; }
.st-cert table { margin: var(--sp-4) auto; text-align: left; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#feedbackForm label { display: block; font-weight: 600; }
#feedbackForm textarea { display: block; width: 100%; margin-top: var(--sp-1); padding: var(--sp-2) 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; }
/* ---------- v4.9.2 tool pages: selects that wrap, aligned rows, muted results, one details style ---------- */
/* select face: the full chosen text, wrapping; the real select lies on top (transparent) and does the work */
.sel-wrap { position: relative; display: block; width: 100%; margin-top: var(--sp-1); }
.sel-face { display: block; min-height: 40px; padding: var(--sp-2) 34px var(--sp-2) 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 500; font-size: var(--fs-text); line-height: 1.35; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.sel-face::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sel-wrap > select { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0; cursor: pointer; font-size: var(--fs-base); -webkit-appearance: none; appearance: none; }
.sel-wrap:focus-within .sel-face { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.sel-wrap:hover .sel-face { border-color: var(--ink-2); }
.sel-wrap:has(select:disabled) .sel-face { opacity: .55; }
.sel-wrap:has(select:disabled) > select { cursor: default; }
.check-grid label > .sel-wrap, .calc-grid label > .sel-wrap, .gst-row label > .sel-wrap, .form-finder label > .sel-wrap { margin-top: var(--sp-1); }
.check-card .sel-wrap, .check-select + .sel-face { max-width: none; }
/* forms in the tools: one field per cell, labels on top, the fields of a row level at the bottom */
.check-grid, .calc-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px 14px; align-items: end; }
#ckForm > .check-grid { grid-template-columns: minmax(0, 1fr); }
.check-grid label, .calc-grid label { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; font-weight: 600; font-size: var(--fs-ui-plus); line-height: 1.35; }
.calc-grid input:not([type=checkbox]):not([type=radio]), .check-grid input:not([type=checkbox]):not([type=radio]), .gst-row input { height: 40px; min-height: 40px; }
.calc-grid input[type=checkbox], .check-grid input[type=checkbox] { display: inline-block; width: 18px; height: 18px; min-height: 0; margin: 0 6px 0 0; flex: none; accent-color: var(--primary); }
.calc-grid .agree, .calc-grid label.agree { flex-direction: row; align-items: center; min-height: 40px; font-weight: 500; }
.sell-only { display: contents; }
.sell-only.hidden { display: none !important; }
/* currency rows: Product | Currency | Amount | Rate | (RBI rate) | row total | remove — one tidy row */
.gst-row, .txn-page .gst-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) 10px; padding: 10px var(--sp-3); }
.gst-row > label { flex: 1 1 130px; min-width: 0; font-size: var(--fs-ui); }
.gst-row > label:first-child { flex-basis: 170px; }
.gst-row > label.hidden { display: none; }
.gst-row-output, .txn-page .gst-row-output { flex: 0 0 120px; align-self: flex-end; min-height: 40px; display: flex; align-items: center; justify-content: flex-end; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); font-size: var(--fs-text); }
.gst-remove { flex: 0 0 40px; align-self: flex-end; min-width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; color: var(--bad); }
.gst-remove:disabled { color: var(--muted); }
.gst-row-head { margin: 14px 0 6px; }
/* results: muted fills, the total in strong text on a light accent band (no saturated green) */
.calc-result .txn-breakdown > div { border-bottom-color: var(--line); padding: 6px 2px; font-variant-numeric: tabular-nums; }
.txn-breakdown .txn-payable, .txn-page .txn-breakdown .txn-payable { margin-top: 6px; padding: 10px var(--sp-3); border: 1px solid var(--accent-line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); font-size: 1.08rem; font-weight: 800; }
.txn-breakdown .txn-payable b { font-size: 1.25rem; color: var(--heading); }
.calc-result { border-left-color: var(--accent); }
/* details / summary everywhere on screen: one chevron inside the box, turns when open */
@media screen {
  summary { list-style: none; cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
  details > summary { position: relative; padding-left: 30px !important; }
  details > summary::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .12s; opacity: .75; }
  details[open] > summary::before { transform: rotate(45deg); margin-top: -7px; }
  .txn-notes, .calc-working { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); margin: 10px 0 0; }
  .txn-notes > summary, .calc-working > summary { width: auto; padding: var(--sp-2) var(--sp-3); margin: 0; font-weight: 600; color: var(--ink-2); }
  .txn-notes > p, .calc-working > table { margin: var(--sp-2) var(--sp-3) 10px; }
  .calc-working > table { width: calc(100% - 24px); }
  .dl-template-set > summary { padding-left: 30px !important; }
}
/* tool pages: one card style and button size */
.tool-h { margin: 6px 0 var(--sp-1); }
.tabs .btn svg.i, .toolbar .btn svg.i, .btn svg.i { color: currentColor; }
.btn.active svg.i { color: var(--accent); }
.verify-note { display: flex; gap: var(--sp-2); align-items: flex-start; }
.verify-note > svg.i { color: var(--warn); margin-top: 2px; }
.faq-links h2 svg.i, .local-copies h2 svg.i { color: var(--accent); margin-right: 2px; }
.callout > svg.i { color: var(--warn-line); margin-right: 2px; }
.dl-ic svg.i, .docset-h .ic svg.i { width: 20px; height: 20px; color: var(--accent); }
.cal-item .btn { flex: none; }
.cal-page .toolbar .field-inline { flex-wrap: wrap; }
.st-q .ck-radio, .ck-radio { line-height: 1.4; }
.ck-verdict { border-left-width: 6px; }
/* v4.9.3: "How TCS was worked out" — one plain line under the result */
.tcs-how { display: flex; gap: var(--sp-2); align-items: flex-start; margin: 10px 0 var(--sp-1); padding: var(--sp-2) 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: var(--fs-ui-plus); line-height: 1.45; }
.tcs-how > svg.i { color: var(--accent); margin-top: 2px; }
/* v4.9.4 calculator fields: range message / Indian-style amount under the field */
.num-msg { display: block; min-height: 0; margin-top: 3px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.num-msg:empty { display: none; }
.num-msg.err-text { color: var(--bad); font-weight: 600; }
.lrs-only { display: contents; }
.lrs-only.hidden { display: none !important; }
/* 5.1 question-bank results: every question with the visitor's choice, the right answer and the explanation */
.st-results { padding-left: 1.4em; }
.st-results li.st-r { margin: 0 0 14px; }
.st-r > span { display: block; margin-top: var(--sp-1); }
.st-mine.no { color: var(--bad); }
.tag.st-no { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.tag.st-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }

/* ---------- 5.8 Licence choice page ---------- */
.chooser5 { max-width: 920px; margin: 0 auto; padding: clamp(20px, 5vw, 56px) var(--sp-4) 40px; }
.lic-choose { text-align: center; }
.lic-kicker { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-sm-plus); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.lic-choose h1 { margin: 0 0 10px; font-size: clamp(var(--fs-h1), 4.2vw, var(--fs-8xl)); color: var(--heading); }
.lic-choose .lead { max-width: 640px; margin: 0 auto 26px; color: var(--ink-2); }
.lic-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; text-align: left; }
.lic-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 22px 20px; min-height: 230px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.lic-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.lic-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lic-card .art { margin-bottom: 6px; }
.lic-card .lc-t { font-size: var(--fs-4xl); font-weight: 700; color: var(--heading); }
.lic-card .lc-s { font-size: var(--fs-sm-plus); color: var(--muted); font-weight: 600; }
.lic-card .lc-d { font-size: var(--fs-text); line-height: 1.5; color: var(--ink-2); flex: 1; }
.lic-card .lc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-2); color: var(--accent); font-weight: 600; font-size: var(--fs-ui-plus); }
.lic-card .lc-go .i { width: 18px; height: 18px; }
.lic-compare { margin: 22px 0 6px; }
.lic-compare a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.lic-compare .i { width: 18px; height: 18px; }
.lic-note { max-width: 620px; margin: 6px auto 0; }
.lic-card { position: relative; }
.lic-card .lc-last { position: absolute; top: 10px; right: 12px; padding: 2px var(--sp-2); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs-plus); font-weight: 700; line-height: 1.5; }
.lic-card.last { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* ---------- 5.9 Policy Manual (#/manual/policies) ---------- */
/* 5.1 complete policy manual (#/manual/policies) */
.man-cover { text-align: center; padding: 36px var(--sp-5) 28px; }
.man-cover .man-kicker { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.man-cover .man-h1 { font-size: clamp(var(--fs-h1), 4vw, var(--fs-8xl)); color: var(--heading); margin: var(--sp-2) 0 6px; }
.man-cover .man-sub { max-width: 640px; margin: 0 auto 20px; color: var(--ink-2); }
.man-cover .man-co { margin: 18px 0; }
.man-cover .man-co small { color: var(--muted); }
.man-cover .man-meta { max-width: 460px; margin: 10px auto var(--sp-4); text-align: left; }
.man-cover .man-meta .blankline { display: inline-block; min-width: 180px; border-bottom: 1px solid var(--line-strong); height: 1.1em; }
.man-cover .man-appr, .man-cover .man-ed { color: var(--ink-2); }
.man-part { margin: 0 0 var(--sp-1); color: var(--accent); font-weight: 700; font-size: var(--fs-xs-plus); letter-spacing: .05em; text-transform: uppercase; }
.man-toc-list > li { margin: 6px 0; }
.man-toc-list ol { margin: var(--sp-1) 0 var(--sp-2); }
.seclist .man-entry > a { border-left: 3px solid var(--accent); }
.man-side { max-height: calc(100vh - 140px); overflow: auto; }

/* ---------- 5.10 Guide (#/guide and the full Guide chapters) ---------- */
/* 5.2: the in-app Guide (#/guide) and the Home link to it */
.guide-hint { margin: 6px 0 0; font-size: var(--fs-ui); color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.guide-hint svg.i { width: 16px; height: 16px; color: var(--accent); }
.guide-page .guide-find { max-width: none; margin: var(--sp-1) 0 var(--sp-3); }
.guide-sec { border-top: 1px solid var(--line); padding: var(--sp-3) 0 6px; scroll-margin-top: calc(var(--tb-h, 56px) + 12px); }
.guide-sec h2 { font-size: 1.15rem; margin: 0 0 6px; }
.guide-sec p { max-width: 75ch; }
.guide-links { font-size: var(--fs-ui-plus); }
.guide-links > span:first-child { font-weight: 600; color: var(--ink-2); margin-right: var(--sp-1); }
.guide-shot { margin: var(--sp-2) 0 var(--sp-1); max-width: 640px; }
.guide-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.guide-shot figcaption { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--sp-1); }
/* ---------- 5.2.1: the full Application Guide pages (#/guide/<chapter>) and the "Last used" licence card ---------- */
.gdoc h2, .gdoc h3 { scroll-margin-top: 72px; }
.gdoc .gfig { margin: var(--sp-3) 0 var(--sp-4); text-align: center; }
.gdoc .gfig img { display: block; margin: 0 auto; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); filter: var(--guide-shot-filter); }
.gdoc .gfig.gfig-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.gdoc .gfig.gfig-row img { width: auto; max-height: 520px; flex: 0 1 auto; }
.gdoc .gfig.gfig-row figcaption { flex-basis: 100%; }
.gdoc .gfig figcaption { margin-top: 6px; font-size: max(var(--fs-sm), .85em); color: var(--muted); font-style: italic; }
.callout.ginfo { background: var(--accent-soft); border-left-color: var(--accent); }
.guide-full { margin-top: 22px; }
.guide-full .gfull-list span { display: block; }
/* 5.3: a Guide picture is never shown larger than its own width (--gw, written by _work/guide/make-webguide.js) */
img.gw { max-width: min(100%, var(--gw, 100%)); }

/* =====================================================================================================================
   6. ADMIN
   ===================================================================================================================== */
/* ---------- admin ---------- */
.list { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); background: var(--surface); }
.list th, .list td { border-bottom: 1px solid var(--line); padding: 6px var(--sp-2); text-align: left; vertical-align: top; }
.list th { font-size: max(var(--fs-sm), .82em); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--surface-2); }
.list tr:hover td { background: var(--surface-2); }
.scrollx { overflow-x: auto; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
.editor textarea.code { font: var(--fs-sm)/1.5 var(--font-mono); min-height: 520px; white-space: pre; }
.preview { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); background: var(--surface); max-height: 640px; overflow: auto; }
.tset > summary { cursor: pointer; padding: 2px 0; }
.tset { margin-bottom: 10px; padding: 10px var(--sp-4); }
.pw-confirm { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; margin: var(--sp-2) 0; padding: var(--sp-2) 10px; border: 1px solid var(--bad); border-radius: var(--radius); background: var(--bad-soft); }
.pw-confirm label span { display: block; font-size: var(--fs-sm); font-weight: 600; }
/* 5.4.1: Admin → Question bank — compact list, paging, bulk review, review queue */
.qb-dash { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; }
.qb-stats { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.qb-dash-acts { display: flex; gap: var(--sp-2); }
.qb-settings { margin: var(--sp-1) 0; }
.qb-settings > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); }
.qb-filters, .qb-tools { gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-1); }
.qb-filters .btn, .qb-filters select { min-height: 32px; padding-top: 2px; padding-bottom: 2px; }
.qb-filters #qbFind { flex: 1 1 220px; }
.qb-table { font-size: var(--fs-sm); table-layout: fixed; width: 100%; min-width: 900px; }
.qb-table th, .qb-table td { padding: 6px 8px; vertical-align: top; }
.qb-table th.qb-ck, .qb-table td.qb-ck { width: 34px; text-align: center; }
.qb-table th:nth-child(2) { width: auto; } .qb-table th:nth-child(3) { width: 21%; } .qb-table th:nth-child(4) { width: 13%; } .qb-table th:nth-child(5) { width: 10%; } .qb-table th:nth-child(6) { width: 158px; }
.qb-table tr.sel td { background: var(--accent-soft); }
.qb-meta { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; }
.qb-meta code { color: var(--heading); font-weight: 600; }
.qb-q { color: var(--ink); font-weight: 600; line-height: 1.4; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qb-a { color: var(--ok); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.qb-tr { margin-top: 2px; display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.qb-src a { overflow-wrap: anywhere; }
.qb-para { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qb-st .chip, .qb-rev .chip { margin: 0 2px 2px 0; }
.qb-acts { white-space: nowrap; position: relative; }
.qb-more { display: inline-block; vertical-align: top; }
.qb-more > summary { list-style: none; cursor: pointer; padding: 0; width: 36px; min-width: 36px; justify-content: center; }
.qb-more > summary::-webkit-details-marker { display: none; }
.qb-more[open] { display: block; width: 100%; margin-top: var(--sp-1); }
.qb-acts { white-space: normal; }
.qb-menu { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--sp-1); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); }
.qb-menu .btn { justify-content: flex-start; width: 100%; border-color: transparent; }
.qb-menu .pw-confirm { white-space: normal; }
.qb-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; padding: var(--sp-2) 10px; border: 1px solid var(--accent-line); border-radius: var(--radius); background: var(--accent-soft); }
.qb-bulk[hidden] { display: none; }
.qb-revsave { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); width: 100%; }
.qb-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.qb-review { border-color: var(--accent-line); }
.qb-rv-head { display: flex; align-items: center; gap: var(--sp-3); }
.qb-rv-head h4 { margin: 0; flex: 1; }
.qb-rv-q { font-weight: 600; color: var(--ink); margin: var(--sp-2) 0; }
.qb-rv-opts { margin: 0 0 var(--sp-2); padding-left: 1.6em; }
.qb-rv-opts li { margin: 2px 0; }
.qb-rv-opts li.right { color: var(--ok); font-weight: 600; }
.qb-rv-dl { display: grid; grid-template-columns: 130px 1fr; gap: 4px var(--sp-3); margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.qb-rv-dl dt { color: var(--muted); font-weight: 600; } .qb-rv-dl dd { margin: 0; }
@media (max-width: 700px) { .qb-rv-dl { grid-template-columns: 1fr; } .qb-dash-acts { width: 100%; } }
.pw-confirm input { padding: 6px var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; }
tr.row-bad td { background: var(--bad-soft); }
.fb-note { white-space: pre-wrap; }
.warn-banner { border-left: 4px solid var(--bad); }
.diff { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-2) 10px; margin: var(--sp-2) 0; max-height: 420px; overflow: auto; font-size: var(--fs-sm-plus); background: var(--surface); }
.diff .d-add, .d-add { background: var(--ok-soft); color: var(--ink); }
.diff .d-del, .d-del { background: var(--bad-soft); color: var(--ink); text-decoration: line-through; text-decoration-color: var(--bad); }
.diff .d-same { color: var(--muted); font-style: italic; }
.diff > div { padding: 1px 6px; border-radius: var(--radius-xs); margin: 1px 0; }
.translation-review { margin: 14px 0; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.translation-review > summary { cursor: pointer; font-weight: 700; }
.translation-review-row { display: grid; grid-template-columns: minmax(90px, .5fr) repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; align-items: start; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.translation-review-lang { display: grid; gap: 7px; justify-items: start; }
.translation-review-lang > span { color: var(--muted); font-size: .9rem; }
#docBody.editing { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: var(--radius-xs); cursor: text; }
/* Admin frame */
.admin-page { max-width: var(--admin-w); }
.admin-nav { margin-left: auto; }
.admin-nav .tb-btn { border-color: transparent; }
/* 5.3: small layout helpers of the Admin screens (were inline styles in app.js) */
.self-center { align-self: center; }
.push-right { margin-left: auto; }
.inline-h { display: inline; }
.full-w { width: 100%; }
.card-gap { margin-top: var(--sp-4); }
.card-narrow { max-width: 640px; }
.card-h { margin-top: 0; }
.num-r, .list .num-r { text-align: right; }

/* =====================================================================================================================
   7. RESPONSIVE — mid-size screens, tablets and phones, touch screens, phone held sideways
   ===================================================================================================================== */
@media (max-width: 1000px) {
  .editor { grid-template-columns: 1fr; }
}
@media screen and (max-width: 860px) {
  .layout > .sidebar { top: calc(var(--tb-h) / var(--reader-scale, 1)); height: auto; bottom: 0; }
}
/* long reading tables: the header row stays under the top bar while the page scrolls (screen only; not in print or PDF).
   5.18.1: from 901 px only; below that a wide table scrolls sideways inside the page instead */
@media screen and (min-width: 901px) {
  main .doc .t-wrap.long { overflow: visible; }
  main .doc .t-wrap.long tr.headrow th { position: sticky; top: calc(var(--tb-h) / var(--reader-scale, 1)); z-index: 2; box-shadow: inset 0 -2px 0 var(--line-strong); }
}
@media (max-width: 700px) {
  .two { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ugrid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .gst-row, .txn-page .gst-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gst-row-output, .txn-page .gst-row-output { grid-column: 1/-1; }
}
@media (max-width: 540px) {
  .gst-row-head { align-items: flex-start; }
  .txn-page .gst-remove { justify-self: start; }
  .txn-page .calc-card { padding: var(--sp-3); }
}
@media (min-width: 1000px) {
  .lightbox-pic img { min-width: 0; }
}
/* ---------- mid-size screens ---------- */
/* 5.8: the Sign in / company link needs room: the short name from 1360 px down */
@media (max-width: 1360px) { .topbar .nm-full { display: none; } .topbar .nm-short { display: inline; } }
@media (max-width: 1180px) {
  .topbar .logo { flex-shrink: 0; }   /* 5.7.2: the name stays whole; the search box gives way */
  .topbar .topsearch { flex-basis: 160px; min-width: 130px; }
  .tb-menu .tb-btn .label { display: none; }   /* the Display label only on wide screens */
  .tb-link { padding: 0 9px; }
}
@media (max-width: 960px) {
  .tb-link .label, .tb-menu .tb-btn .label { display: none; }
}
/* 5.9: the sign-in screen — brand panel beside one card (one column on phones) */
.si-page { max-width: 1040px; margin: 0 auto; padding: var(--sp-5) var(--sp-3); }
.si { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-2); background: var(--surface); }
.si.si-one { grid-template-columns: minmax(0, 460px); justify-content: center; box-shadow: none; background: transparent; }
.si-brand { background: var(--primary); color: var(--primary-ink); padding: 40px 36px; display: flex; flex-direction: column; gap: 14px; }
.si-brand .mark { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--on-dark-fill); font-size: 22px; font-weight: 700; }
.si-brand h1 { color: inherit; font-size: var(--fs-2xl, 1.6rem); margin: 0; line-height: 1.25; }
.si-brand p { margin: 0; opacity: .9; }
.si-points { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 12px; }
.si-points li { display: flex; gap: 10px; align-items: flex-start; }
.si-points svg.i { flex: 0 0 auto; margin-top: 2px; }
.si-free { margin-top: auto !important; font-size: var(--fs-sm); opacity: .8; }
.si-card { margin: 0; padding: 32px 32px 26px; border: 0; border-radius: 0; }
.si-one .si-card { border-radius: 12px; box-shadow: var(--shadow-2); }
.si-card h2, .si-h { margin-top: 0; font-size: var(--fs-xl, 1.3rem); }
.si-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); margin: -6px 0 18px; }
.si-tabs a { text-align: center; padding: 10px 6px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; }
.si-tabs a.on { color: var(--ink); border-bottom-color: var(--primary); }
.si-card .field { display: block; margin-bottom: 14px; }
.si-card .field > span:first-child { display: block; margin-bottom: 4px; font-weight: 600; font-size: var(--fs-sm); }
.si-card input:not([type=checkbox]), .si-card select { width: 100%; }
.si-row { display: flex !important; justify-content: space-between; align-items: baseline; }
.si-row a { font-weight: 400; }
.full-w { width: 100%; justify-content: center; }
.btn.busy { opacity: .6; pointer-events: none; }
.si-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-sm); margin: 18px 0 12px; }
.si-or::before, .si-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.si-guest { margin-top: 8px; font-size: var(--fs-sm); }
.si-alt { margin: 14px 0 0; font-size: var(--fs-sm); }
@media (max-width: 760px) {
  .si { grid-template-columns: minmax(0, 1fr); }
  .si-brand { padding: 22px 20px; } .si-points, .si-free { display: none; }
  .si-card { padding: 22px 18px; }
  .si-page { padding: var(--sp-3) 0; }
}
/* 5.9: the landing page (abharan.shop without a sign-in): slim header, a little more room */
.si-top .tb-in { justify-content: flex-start; }
.si-top .logo { cursor: default; }
.si-landing { padding-top: var(--sp-6, 40px); }
.si-sub { font-weight: 600; opacity: 1 !important; }
/* 5.9.1: the version beside the Admin name; the Admin footer */
.adm-ver { align-self: center; margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--on-dark-line, currentColor); color: inherit; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.adm-ver:hover { background: var(--on-dark-fill); }
.adm-foot { margin-top: var(--sp-6, 40px); }
/* 5.9.2: GSTIN / PAN / CIN checks under the fields; a field just filled from the GSTIN or CIN */
.id-hint { display: block; margin-top: 3px; font-size: var(--fs-sm); }
.id-hint.ok { color: var(--ok, var(--ink-2)); }
.id-hint.warn { color: var(--warn); }
.id-hint.bad { color: var(--bad); font-weight: 600; }
.co-page input.autofilled { outline: 2px solid var(--primary); outline-offset: 1px; }
/* 5.9.3: the password checklist; capitals in the PAN box; requests to join */
.pw-rules { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; font-size: var(--fs-sm); color: var(--muted); }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: var(--ink-2); }
.pw-rules li.ok::before { content: "✓ "; font-weight: 700; }
input.upper { text-transform: uppercase; letter-spacing: .04em; }
.co-joins { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.co-joins li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 480px) { .pw-rules { grid-template-columns: 1fr; } }
/* 5.9.5: the account box of the header (all widths; label hidden on narrow screens) */
.tb-acctbox { position: relative; flex: none; display: inline-flex; align-items: center; }
a.tb-acctbox, .tb-acct-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--on-dark-line, currentColor); color: inherit; background: transparent; font: inherit; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; cursor: pointer; white-space: nowrap; }
a.tb-acctbox:hover, .tb-acct-btn:hover, .tb-acct-btn[aria-expanded="true"], a.tb-acctbox.active, .tb-acct-btn.active { background: var(--on-dark-fill); }
.tb-acct-btn .label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

.acct-pop { right: 0; }
.acct-who { margin: 0 0 6px; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.acct-who small { color: var(--muted); overflow-wrap: anywhere; }
.acct-note { margin: 4px 6px 2px; font-size: var(--fs-xs, 12px); }
@media (max-width: 960px) { .tb-acctbox .label { display: none; } a.tb-acctbox, .tb-acct-btn { padding: 0 9px; } }
/* 5.11: before a licence is chosen, text for one licence carries its name */
.lic-mark { border-left: 3px solid var(--line); padding-left: 6px; }
.lic-mark::before { font-size: var(--fs-xs, 11px); font-weight: 700; color: var(--muted); margin-right: 4px; }
.lic-mark-ffmc::before { content: "FFMC:"; }
.lic-mark-ad2::before { content: "AD-II:"; }
tr.lic-mark::before { content: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: min(560px, calc(100vw - 32px)); background: var(--ink); color: var(--surface); padding: 12px 18px; border-radius: 10px; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 860px) { .toast { bottom: calc(76px + env(safe-area-inset-bottom)); } }
/* 5.9: password boxes are compact, with a show / hide button */
.pw-field, .pw-confirm label { max-width: 360px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 40px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; font-size: 16px; padding: 4px 6px; opacity: .7; }
.pw-eye[aria-pressed="true"] { opacity: 1; }
/* 5.8: company account pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); align-items: start; }
.co-page .card .field { margin-bottom: var(--sp-2); }
.co-fs { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; }
.co-fs legend { font-weight: 600; padding: 0 4px; }
.co-logo img, .fh5 .fh-logo { max-height: 56px; max-width: 180px; object-fit: contain; }
.fh5 .fh-logo { display: block; margin-bottom: 4px; }
.cofill { font-weight: 600; }
.tb-acct .label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 5.7.2: the Display menu button carries its name on wider screens */
.tb-menu .tb-btn .label { margin-left: 6px; font-size: var(--fs-sm); font-weight: 600; }
@media (max-width: 1000px) {
  .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .form-finder { grid-template-columns: 1fr 1fr; }
}
/* ---------- tablets and phones: header collapses, chapters menu, bottom navigation ---------- */
@media (max-width: 860px) {
  :root { --tb-h: 50px; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .tb-in { gap: 6px; padding: 0 var(--sp-2) 0 6px; }
  .menu-toggle { display: inline-flex; }
  .topbar .menu-toggle { border-color: transparent; }
  .topsearch, .tb-nav, .tb-menu > .tb-btn { display: none; }
  .topbar .admin-nav { display: flex; }
  .admin-nav .label { display: none; }
  .topbar .logo { flex: 1 1 auto; }
  .topbar .logo-t b { font-size: var(--fs-text); }
  .sidebar { position: fixed; inset: var(--tb-h) 0 0 0; height: auto; z-index: 35; display: none; padding-bottom: 80px; }
  .sidebar.open { display: block; }
  .main { padding: 10px var(--sp-3) 40px; }
  /* the settings menu opens as a sheet above the bottom bar ("More") */
  .tb-menu { position: static; }
  .menu-pop { position: fixed; left: 8px; right: 8px; top: auto; width: auto; max-height: calc(100vh - 140px); overflow-y: auto; }
  .menu-pop .m-mob { display: flex; }
  .botnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 0 2px env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-up); }
  .botnav a, .botnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: var(--sp-1) 2px; border: 0; background: transparent; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; line-height: 1.15; text-decoration: none; cursor: pointer; text-align: center; overflow: hidden; }
  html:lang(hi) .botnav a, html:lang(hi) .botnav button, html:lang(te) .botnav a, html:lang(te) .botnav button, html:lang(ta) .botnav a, html:lang(ta) .botnav button { font-size: var(--fs-xs-plus); }
  .botnav svg.i { width: 22px; height: 22px; }
  .botnav .on, .botnav [aria-expanded="true"] { color: var(--accent); }
  .botnav .on { box-shadow: inset 0 2px 0 var(--accent); }
  .sheet { position: fixed; left: 8px; right: 8px; z-index: 60; max-height: calc(100vh - 140px); overflow-y: auto; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); }
  .sheet a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px var(--sp-2); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-text); }
  .sheet a:hover { background: var(--surface-2); }
  .sheet a .ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); flex: none; }
  .sheet h2 { margin: 2px var(--sp-2) 6px; }
  .totop { right: 12px; }
  .docbar { top: calc(var(--tb-h) + 4px); }
}
@media (max-width: 640px) {
  h1, .page > h1, .main > h1 { font-size: var(--fs-h1-phone); }
  .docs-hero h1, .cat-h { font-size: var(--fs-h1-phone); }
  .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task { min-height: 44px; font-size: var(--fs-ui); padding: 6px var(--sp-2); }
  .task .ti { width: 24px; height: 24px; }

  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .cat { grid-template-columns: 30px minmax(0, 1fr); padding: var(--sp-2) 10px; column-gap: var(--sp-2); }
  .cat .ic { width: 30px; height: 30px; font-size: var(--fs-text); grid-row: 1 / 3; }
  .cat .ct { font-size: var(--fs-ui); }
  .role-switch > .help { flex-basis: 100%; margin: 0 0 var(--sp-1); }
  /* 44 px touch targets */
  .btn, .btn.small, select.btn, .role-chip, .navbar .btn, .pager .btn, .check-select, .form-finder input, .form-finder select, .ck-radio, .seclist .twin-btns a.btn, .check-grid select, .calc-grid input, .calc-grid select, .calc-grid textarea, .gst-row select, .gst-row input, .topbar .tb-btn { min-height: 44px; }
  .topbar .tb-btn { min-width: 44px; justify-content: center; }
  .totop { width: 44px; height: 44px; }
  .menu-pop .m-item { min-height: 44px; }
  .toc a { padding: 9px 10px; }
  .pagehead .actions { width: 100%; margin-left: 0; }
  .pagehead .actions .btn { flex: 1 1 auto; justify-content: center; background: var(--surface); border-color: var(--line); }
  .pager .btn { max-width: 100%; width: 100%; font-size: var(--fs-ui); }
  .seclist a { padding: 9px 10px 9px 44px; }
  .seclist a::before { left: 10px; }
  .seclist .twin-btns { padding-left: 44px; }
  .form-finder { grid-template-columns: 1fr; }
  .docset-tools { margin-left: 0; width: 100%; }
  .docset-tools .btn { flex: 1 1 auto; justify-content: center; background: var(--surface); border-color: var(--line); }
  .docbar { position: static; }
  .docbar-tools { margin-left: 0; width: 100%; }
  .docbar-tools .btn { flex: 1 1 auto; justify-content: center; }
  .dl-item { flex-wrap: wrap; }
  .dl-item > .btn { width: 100%; justify-content: center; }
  .dl-actions { width: 100%; }
  .dl-actions .btn { flex: 1 1 auto; justify-content: center; }
  .check-card { padding: var(--sp-3); }
  .ck-result .toolbar .btn { flex: 1 1 auto; justify-content: center; }
  .ck-radio { flex: 1 1 100%; }
  .update-card, .training-card, .calc-card { padding: var(--sp-3); }
  .form-finder { padding: 10px; }
  .cal-item { flex-wrap: wrap; }
  /* phones: reading tables as stacked cards */
}
@media (max-width: 380px) {
  .topbar .logo-t b { font-size: var(--fs-ui); }
}
@media (max-width: 480px) {
  .topbar .nm-short { display: none; } .topbar .nm-tiny { display: inline; }
}
@media (max-width: 640px) {
  .rowlist > a, .home2 .rowlist > .task, .home2 .rowlist > .cat { min-height: 44px; }
  .home2 .cats.two { grid-template-columns: minmax(0, 1fr); }
  .home2 .cats.two > a:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px solid var(--line); }
  .home2 .cats.two > a:last-child { border-bottom: 0; }
  .home2 .tasks.two { column-gap: var(--sp-2); }
  .home2 .tasks.two > a { font-size: var(--fs-ui); }
  .hcard-h { padding: 6px 10px; }
  .home2 .role-switch { width: 100%; }
  .home2 .role-switch .role-chip { flex: 1 1 0; justify-content: center; text-align: center; }
}
@media (min-width: 641px) {
  .txn-page .tabs .btn, .checker-page .toolbar .btn { min-height: 36px; }
}
@media (max-width: 640px) {
  .gst-row, .txn-page .gst-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .gst-row > label, .gst-row > label:first-child { min-width: 0; }
  .gst-row-output, .txn-page .gst-row-output { grid-column: 1 / 2; justify-content: flex-start; }
  .gst-remove { grid-column: 2 / 3; justify-self: end; width: 44px; height: 44px; }
  .sel-face { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .calc-grid input:not([type=checkbox]):not([type=radio]), .check-grid input:not([type=checkbox]):not([type=radio]), .gst-row input { height: 44px; min-height: 44px; }
  .txn-page .tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .txn-page .tabs .btn { white-space: normal; justify-content: flex-start; }
}
/* ---------- v4.9.4 touch screens (phones and tablets, any width): 44 px tap targets, safe areas, landscape ---------- */
@media (pointer: coarse) {
  .btn, .btn.small, select.btn, .tb-link, .tb-btn, .role-chip, .navbar .btn, .pager .btn, .seclist .twin-btns a.btn, .m-item, .menu-pop select.btn, .gst-remove, .ck-radio, .rowlist > a, .home2 .rowlist > .task, .home2 .rowlist > .cat, .sheet a, .botnav a, .botnav button { min-height: 44px; }
  .tb-btn, .fsz .btn, .gst-remove, .totop { min-width: 44px; }
  .totop { width: 44px; height: 44px; }
  .topsearch input { height: 44px; }
  .tb-in { min-height: 52px; height: auto; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select:not(.btn), textarea, .sel-face { min-height: 44px; }
  .calc-grid input:not([type=checkbox]):not([type=radio]), .check-grid input:not([type=checkbox]):not([type=radio]), .gst-row input { height: 44px; }
  details > summary { min-height: 44px; display: flex; align-items: center; }
  .toc a { min-height: 44px; display: flex; align-items: center; }
  .crumbs a, .popular a, .faq-links a, a.chip[href], .chip[href] { display: inline-flex; align-items: center; min-height: 44px; }
  .guide-hint a, .guide-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-1); }
  .popular { display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; }
  .popular a { padding: 0 var(--sp-2); border-radius: var(--radius-sm); }
  .popular a:hover { background: var(--accent-soft); }
  .faq-links li { margin: 0; }
  .faq-links a { padding: 2px 0; }
  a.chip[href] { padding: 0 10px; }
  .seclist a { min-height: 44px; }
  .leave-btns .btn { min-height: 44px; }
  .txn-page .tabs .btn, .checker-page .toolbar .btn, .menu-pop .m-item, .ck-result .toolbar .btn { min-height: 44px; }
  .lightbox-bar .btn { min-width: 44px; min-height: 44px; justify-content: center; }
}
@media (max-width: 860px) {
  .tb-in { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(var(--sp-2), env(safe-area-inset-right)); }
  .botnav { height: calc(58px + env(safe-area-inset-bottom)); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .sheet, .menu-pop { bottom: calc(66px + env(safe-area-inset-bottom)); }
  .totop { bottom: calc(70px + env(safe-area-inset-bottom)); }
}
/* phone held sideways: a slimmer top bar and bottom bar (labels beside the icons), so the page keeps most of the height */
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  :root { --tb-h: 46px; }
  .tb-in { min-height: 46px; }
  .botnav { height: calc(46px + env(safe-area-inset-bottom)); }
  .botnav a, .botnav button { flex-direction: row; gap: 6px; font-size: var(--fs-sm); }
  .botnav svg.i { width: 20px; height: 20px; }
  body { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
  .sheet, .menu-pop { bottom: calc(52px + env(safe-area-inset-bottom)); max-height: calc(100vh - 110px); }
  .totop { bottom: calc(56px + env(safe-area-inset-bottom)); }
}
/* ---------- phones ---------- */
@media (max-width: 860px) {
  .home5 .row { grid-template-columns: minmax(0, 1fr); }
  .foot5-in { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .foot5 { padding-bottom: 64px; }
  .onpage5 ol { columns: 1; }
  .home5 .tasks.two, .home5 .cats.two { grid-template-columns: minmax(0, 1fr); }
  .meta5 .act { margin-left: 0; }
  /* 5.3 (C13): the finder on phones: the search box on its own row, the selects two to a row */
  .docs5 .form-finder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs5 .form-finder > label:first-child { grid-column: 1 / -1; }
}
@media screen and (max-width: 600px) {
  .idband h1 { font-size: var(--fs-4xl); }
  .idband h1::before { margin-bottom: 10px; }
  .idband .sub { font-size: var(--fs-text); }
  .idsearch input { padding-right: var(--sp-3); height: 46px; }
  .idsearch .go { display: none; }
  .fig .v { font-size: var(--fs-xl); }
  .desk { padding: 10px 6px var(--sp-4); }
  .a4sheet { min-height: 0; padding: 14px var(--sp-3) var(--sp-4); }
  .fh5 { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dtable thead { display: none; }
  .dtable, .dtable tbody { display: block; }
  .dtable tr { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "no ti ac" "no ty ac"; column-gap: var(--sp-2); padding: 6px 10px; border-bottom: 1px solid var(--line); }
  .dtable td { border: 0; padding: 0; }
  .dtable .no { grid-area: no; width: auto; font-size: var(--fs-xs-plus); padding-top: 2px; }
  .dtable .ti { grid-area: ti; }
  .dtable .ty { grid-area: ty; width: auto; padding-top: 2px; }
  .dtable .ac { grid-area: ac; align-self: center; }
  .docs5 .dtable th:first-child, .docs5 .dtable td:first-child { padding-left: 0; }
}
@media (min-width: 1000px) {
  .lightbox-pic svg { min-width: 0; }
}
/* touch screens: the new links and buttons keep 44 px targets */
@media (pointer: coarse) {
  .meta5 .act .btn, .dtable .ac a { min-height: 44px; min-width: 44px; }
  .trust a, .hcard-h .more, .meta5 a, .foot5 li a, .dtable .ti a, .onpage5 a, .lc a.go5, .dl5 .dt a, .sources5 a { display: inline-flex; align-items: center; min-height: 44px; }
  .dl5 .dt a { display: flex; }
  .idsearch input { height: 54px; }
  .idsearch .go { min-height: 44px; }
}
@media (max-width: 600px) {
  .partband { min-height: 84px; }
  .partband .partband-in { padding: var(--sp-3) var(--sp-3) 10px; }
  .meta5 .act { width: 100%; }
  .meta5 .act .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 600px) {
  .art img, .art svg { width: 52px; height: 52px; }
  .docs5 .docs-hero .art { display: none; }
}
@media (pointer: coarse) {
  .sclear { width: 44px; height: 44px; }
  .sug a[role=option] { min-height: 44px; }
  .idsearch .sclear { right: 112px; }
}
@media (max-width: 860px) {
  .search-toggle { display: inline-flex; border-color: transparent; }
  .sug a[role=option] { min-height: 44px; }
  .sclear { width: 44px; height: 44px; }
  body.search-open .topsearch { display: flex; position: fixed; left: 0; right: 0; top: var(--tb-h); max-width: none; margin: 0; padding: var(--sp-2) 10px; background: var(--navy); z-index: 80; box-shadow: var(--shadow-2); }
  body.search-open .topsearch > svg.i { left: 20px; }
  body.search-open .topsearch input { height: 44px; font-size: var(--fs-base); }
  body.search-open .topsearch .sclear { right: 14px; }
  body.search-open .sug { position: fixed; left: 8px; right: 8px; top: calc(var(--tb-h) + 66px); max-height: calc(100vh - var(--tb-h) - 140px); }
}
@media (max-width: 600px) {
  .idsearch .sclear { right: 4px; }
}
@media (max-width: 1023px) {
  .id-grid { grid-template-columns: minmax(0, 1fr); }
  .id-main { padding-right: 0; }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig:nth-child(3n) { border-right: 1px solid var(--line); }
  .fig:nth-child(2n) { border-right: 0; }
  .fig:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .fig:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 600px) {
  .idband-in { padding: var(--sp-4) var(--sp-3) 22px; }
  .id-main { padding-right: 0; }
  .figs { grid-template-columns: minmax(0, 1fr); }
  @supports (grid-template-rows: subgrid) {
    .fig { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }
  }
  .fig { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; padding: var(--sp-3) 14px; }
  .fig:last-child { border-bottom: 0 !important; }
  .fig .v, .fig .d { align-self: auto; }
}
@media (max-width: 860px) {
  .lic-btn .lic-full { display: none; }
  .lic-btn .lic-short { display: inline; }
  .lic-pop { left: 8px; right: 8px; width: auto; }
}
@media (pointer: coarse) {
  .lic-btn { min-height: 44px; min-width: 44px; }
}
@media (max-width: 640px) {
  .lic-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .lic-card { min-height: 0; padding: 18px var(--sp-4); }
  .lic-card .lc-t { font-size: var(--fs-2xl); }
}
@media (pointer: coarse) {
  .edition5 .lnk { min-height: 44px; }
}
@media (pointer: coarse) {
  .lnk { min-height: 44px; }
}
@media (max-width: 900px) {
  .idband.photo .band-veil { background: var(--band-veil-phone); }
  .idband.photo .idband-in { padding-top: 132px; }
}
@media (max-width: 760px) {
  .partband.phead5 { grid-template-columns: minmax(0, 1fr); }
  .ph5 { order: -1; height: 160px; }
  .partband.phead5 .partband-in { padding: 14px 14px var(--sp-3); }
}
@media (min-width: 901px) {
  .idband.photo .band-veil { background: var(--band-veil-wide); }
}
@media (max-width: 700px) {
  .ch-photo { height: 110px; margin-bottom: var(--sp-3); }
}
@media (max-width: 700px) { .offline-toc { columns: 1; } }


/* 5.22: compact screen presentation shared by public, company and Admin pages.
   Keep paper/PDF/Word layout separate: all rules are screen-only and scoped to the app. */
@media screen {
  #app { line-height: 1.5; }
  #app .page { padding-top: 12px; padding-bottom: 42px; }
  #app .partband.phead5 .ph5 { height: 150px; }
  #app .partband.phead5 .partband-in { padding: 14px 18px; }
  #app .ch-photo { display: none; }
  #app .page > h1, #app .main > h1 { margin: 4px 0 8px; letter-spacing: -.02em; color: var(--heading); }
  #app .lead { font-size: var(--fs-text); line-height: 1.5; margin: 6px 0 14px; color: var(--ink-2); }
  #app .reader .doc { line-height: 1.58; }
  #app .reader .doc > section > p, #app .kc-body p { margin-top: 7px; margin-bottom: 10px; }
  #app .reader .doc h3 { margin-top: 22px; margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--heading); }
  #app .reader .doc h4 { margin-top: 16px; margin-bottom: 7px; color: var(--accent); }
  #app .reader .doc li { margin-top: 3px; margin-bottom: 3px; }
  #app .card { padding: 14px; box-shadow: var(--shadow); }
  #app .card > h2:first-child, #app .card > h3:first-child { margin-top: 0; }
  #app .field { margin: 7px 0; }
  #app .field input, #app .field select, #app .field textarea { padding: 7px 9px; line-height: 1.35; }
  #app .btn { min-height: 34px; padding: 6px 11px; border-radius: var(--radius-sm); }
  #app .btn.small { min-height: 30px; padding: 4px 9px; font-size: var(--fs-sm); }
  #app .btn:not(.primary):not(.danger):hover { background: var(--accent-soft); border-color: var(--accent); }
  #app .toolbar, #app .docbar { gap: 7px; }
  #app .toolbar { margin-top: 10px; margin-bottom: 10px; }
  #app .callout, #app .simple, #app .escalate { padding: 10px 12px; margin: 10px 0; border-radius: var(--radius-sm); }
  #app .callout p:last-child, #app .simple p:last-child { margin-bottom: 0; }
  #app .help { line-height: 1.45; }

  /* One table rhythm: readable cells, quiet row stripes and a visible header band. */
  #app table:not(.docctl) { width: 100%; margin: 9px 0 14px; font-size: var(--fs-ui); line-height: 1.45; border-collapse: separate; border-spacing: 0; }
  #app table:not(.docctl) :is(th, td) { padding: 7px 10px; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: break-word; }
  #app table:not(.docctl) th { background: color-mix(in srgb, var(--primary) 11%, var(--surface)); color: var(--heading); font-size: var(--fs-sm-plus); font-weight: 700; text-transform: none; letter-spacing: .01em; border-bottom: 2px solid color-mix(in srgb, var(--primary) 35%, var(--line)); }
  #app table:not(.docctl) tr:nth-child(even) > td { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
  #app table:not(.docctl) tbody tr:hover > td { background: color-mix(in srgb, var(--accent-soft) 65%, var(--surface)); }
  #app table.t p, #app table.list p { margin: 3px 0 5px; }
  #app table.t ul, #app table.t ol, #app table.list ul { margin: 4px 0; padding-left: 18px; }
  #app table.t td.amt, #app table.t th.amt { text-align: right; font-variant-numeric: tabular-nums; }
  #app .scrollx { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scrollbar-gutter: stable; }
  #app .scrollx > table { margin: 0; }
  #app .doc .t-wrap:has(> .dense-table) { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  #app .doc .form table :is(th, td), #app .doc .form.wide table :is(th, td) { padding: 5px 7px; }
  #app .doc table.docctl :is(th, td) { font-size: var(--fs-sm); }

  /* Labels encode document type and rule status; colour supplements the written label. */
  #app .tb-Form, #app .tb-Letter { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--link); border-color: var(--line); }
  #app .tb-Policy, #app .tb-Resolution { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
  #app .tb-Register { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
  #app .tb-Certificate { background: var(--ok-soft); color: var(--ok); border-color: var(--line); }
  #app .tag.law, #app .tag.rbi { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--link); }
  #app .tag.co { background: var(--accent-soft); color: var(--accent); }
  #app .tag.ex { background: var(--warn-soft); color: var(--warn); }
  #app .chip, #app .tag { font-size: var(--fs-sm); }
  #app .tag.law, #app .tag.rbi, #app .tag.co, #app .tag.ex { font-size: var(--fs-xs); }

  #app .docs5 .docset { overflow: hidden; margin-bottom: 12px; }
  #app .docs5 .docset-h { padding: 9px 12px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-bottom-color: var(--accent-line); }
  #app .docs5 .docset-h h2 { font-size: var(--fs-text); }
  #app .docset-tools .btn { padding: 4px 7px; }
  #app .form-finder { padding: 10px 12px; gap: 9px; }
  #app .training-grid, #app .update-list { gap: 12px; align-items: stretch; }
  #app .training-card, #app .calc-card, #app .update-card { padding: 13px 14px; border-radius: var(--radius); }
  #app .training-card { border-top: 3px solid var(--accent); }
  #app .training-card .tc-head { min-height: 44px; }
  #app .training-card .tc-head h2 { margin: 0; }
  #app .training-card:nth-child(3n + 2) { border-top-color: var(--primary); }
  #app .training-card:nth-child(3n) { border-top-color: var(--warn-line); }
  #app .training-card h2, #app .calc-card h2, #app .update-card h2 { font-size: var(--fs-base); line-height: 1.35; margin-bottom: 7px; }
  #app .training-card .tc-links a { line-height: 1.4; padding-top: 7px; padding-bottom: 7px; }
  #app .co-fs { margin: 8px 0 12px; padding: 8px 12px 12px; border-top: 3px solid var(--accent-line); }
  #app .co-fs legend { color: var(--heading); font-size: var(--fs-ui); font-weight: 700; }
  #app .admin-page .adm-tabs { gap: 5px; }
  #app .admin-page .adm-tabs .btn { font-size: var(--fs-sm); }
  #app .kc-body { line-height: 1.58; }
  #app .foot5-in { padding-top: 20px; padding-bottom: 20px; }
}
@media screen and (min-width: 1100px) {
  #app .training-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (min-width: 641px) {
  #app .doc table.dense-table { min-width: 1060px; }
  #app .doc table.dense-table .narrative-col { min-width: 280px; width: 28%; }
}
@media screen and (max-width: 640px) {
  #app .page { padding-right: 12px; padding-left: 12px; }
  #app .card { padding: 12px; }
  #app .partband.phead5 .ph5 { height: 96px; }
  #app .ch-photo { display: none; }
  #app .doc table.t.stack, #app .doc table.t.stack :is(tbody, tr, th, td) { display: block; width: 100%; }
  #app .doc table.t.stack tr.headrow { display: none; }
  #app .doc table.t.stack tr { padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--accent); margin-bottom: 9px; background: var(--surface); }
  #app .doc table.t.stack :is(th, td) { padding: 4px 0; border: 0; background: transparent; }
  #app .doc table.t.stack td.amt { text-align: left; }
  #app .training-grid, #app .calc-grid { gap: 10px; }
  #app .docset-h { align-items: flex-start; }
  #app .docset-tools { margin-left: 0; }
}
@media screen and (pointer: coarse) {
  #app .btn, #app .btn.small { min-height: 44px; }
  #app .field input, #app .field select { min-height: 44px; }
}

/* =====================================================================================================================
   8. PRINT AND PDF — paper is white; forms on A4, wide forms on A4 landscape; the PDF download (.pdf-export) uses the same paper colours
   ===================================================================================================================== */
@media print {
  #app > main, #app > .layout, #app > .page { zoom: 1 !important; }
}
@media print {
  body.print-all-app #app > *:not(#printDoc) { display: none !important; }
  body.print-all-app #printDoc { display: block !important; }
}
.pdf-export summary { list-style: revert; padding-left: 0 !important; }
.pdf-export summary::before { content: none !important; }
.pdf-export summary::-webkit-details-marker { display: revert; }
.pdf-export .t-wrap::before { content: none !important; display: none !important; }
@media print {
  .t-wrap::before { content: none !important; display: none !important; }
}
/* ---------- PDF download (html2pdf): A4 content width, light colours, print-style forms ---------- */
.pdf-holder { position: fixed; left: 0; top: 0; width: 0; height: 0; overflow: hidden; }
.pdf-export { width: 186mm; background: var(--paper); color: var(--print-ink); color-scheme: light; --bg: var(--paper); --surface: var(--paper); --surface-2: var(--paper-fill); --ink: var(--print-ink); --ink-2: var(--paper-ink-2); --muted: var(--paper-muted); --line: var(--paper-line); --heading: var(--paper-brand); --accent: var(--paper-brand); --accent-soft: var(--paper-fill); font-size: var(--pfs-doc); line-height: 1.38; }
.pdf-export section.hb { border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; background: var(--paper) !important; }
.pdf-export section.hb > h2 { display: none; }
.pdf-export section.hb > h2::after { display: none; }
.pdf-export .form { border: 0; padding: 0; margin: 0; font-size: var(--pfs-doc); }
.pdf-export details { border: 0; }
.pdf-export details > * { display: block; }
.pdf-export .pdf-stamp { margin-top: 14pt; font-size: var(--pfs-3xs); color: var(--paper-meta); }
.pdf-export .sources5, .pdf-export .sources5.srcdoc { font-size: var(--pfs-sm); color: var(--paper-ink-2); margin: 10pt 0 0; padding: 5pt 0 0; border-top: 1px solid var(--paper-line); }
.pdf-export .sources5 h3.src-h { font-size: var(--pfs-2xs); color: var(--paper-muted); margin: 0 0 3pt; padding: 0; border: 0; }
.pdf-export .sources5 ul { padding-left: 16pt; }
.pdf-export .sources5 li { margin: 0 0 1.5pt; line-height: 1.35; }
.pdf-export .sources5 .checked { font-size: var(--pfs-2xs); color: var(--paper-meta); margin: 3pt 0 0; }
.pdf-export a { color: inherit; text-decoration: none; }
.pdf-export .t-wrap, .pdf-export .t-wrap.long { overflow: visible; max-height: none; border: 0; }
/* html2canvas cannot read modern colour functions (color-mix() → color(srgb …)) and inline styles cannot reach
   ::before / ::after, so pseudo-elements in the PDF use plain colours only */
.pdf-export *::before, .pdf-export *::after { color: inherit !important; border-color: currentColor !important; outline-color: currentColor !important; text-decoration-color: currentColor !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; }
.pdf-export ul.tick li::before { color: var(--paper-ok) !important; }
.pdf-export ul.cross li::before { color: var(--paper-bad) !important; }
.pdf-export ul.flag li::before { color: var(--paper-warn) !important; }
.pdf-export ol.steps > li::before { background-color: var(--paper-brand) !important; color: var(--paper) !important; }
/* a wide form goes on A4 landscape: 297 − 2 × 12 mm content width (the PDF margins in app.js exportPdf) */
.pdf-export.wide { width: 273mm; }
.pdf-export .form.wide { font-size: var(--pfs-sm); }
.pdf-export .form.wide table.t { min-width: 0; width: 100%; font-size: var(--pfs-xs); }
.pdf-export .form.wide table.t td, .pdf-export .form.wide table.t th { padding: 2.5pt 4pt; }
/* ---------- print (paper is white; forms on A4, wide forms on A4 landscape) ---------- */
@page { size: A4; margin: 12mm 12mm 14mm; }
/* named page for wide forms: used by every section holding a "form wide", and by the whole page when only wide forms
   are printed (body.print-wide, set by app.js), so the first sheet is landscape too */
@page wide { size: A4 landscape; margin: 10mm 12mm 12mm; }
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"], :root:not([data-theme="light"]) { color-scheme: light; --bg: var(--paper); --surface: var(--paper); --surface-2: var(--paper-fill); --ink: var(--print-ink); --ink-2: var(--paper-ink-2); --muted: var(--paper-muted); --line: var(--paper-line); --heading: var(--print-ink); --accent: var(--paper-brand); --accent-soft: var(--paper-fill); --link: var(--print-ink); --primary: var(--paper-brand); --primary-ink: var(--paper); }
  body, html:lang(hi) body, html:lang(te) body, html:lang(ta) body { background: var(--paper); font-size: var(--pfs-body); padding: 0; }
  .topbar, .sidebar, .toolbar, .banner, .print-one, .noprint, .botnav, .sheet, .menu-pop, .skip-link, .pagehead, .totop, .navbar, .lightbox, .docbar, .docset-tools { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; max-width: none; }
  .doc section.hb > h2::after { display: none; }
  /* a new page only BETWEEN forms (never before the first one: that left a blank first sheet) */
  .doc section.hb[data-part="partForms"] + section.hb[data-part="partForms"], #printDoc section.hb + section.hb { break-before: page; }
  /* nothing above the printed form takes space; the form's own header replaces the screen title */
  .page, main, .reader, .doc { margin: 0 !important; padding: 0 !important; max-width: none !important; box-shadow: none !important; border: 0 !important; }
  #docBody > h2, body.print-one-mode section.hb.print-target > h2 { display: none !important; }
  .doc table { break-inside: auto; }
  .doc tr, .sigs, .office, .fg { break-inside: avoid; }
  .form { border: 0; padding: 0; margin: 0; font-size: var(--pfs-doc); line-height: 1.38; }
  .form table.t td, .form table.t th { padding: 3pt 6pt; }
  .form p { margin: 0 0 6pt; }
  .form .fg i { padding-top: 10pt; }
  details { border: 0; }
  details > p { display: block; }
  body.print-wide, section.hb:has(.form.wide), .form.wide { page: wide; }
  .form.wide { font-size: var(--pfs-sm); }
  .form.wide table.t { min-width: 0; width: 100%; font-size: var(--pfs-xs); }
  .doc .form.wide .t-wrap { overflow: visible; }
  body.print-one-mode section.hb:not(.print-target) { display: none !important; }
  body.print-one-mode section.hb.print-target > h2 { display: none; }
  body.print-all .home > *:not(#printDoc) { display: none !important; }
  body.print-all #printDoc { display: block !important; }
  .crumbs, .pager { display: none !important; }
  /* 5.20: no print overrides for stacked tables any more (the stacking is screen-only); "tbody { display: table }" here
     made a table inside the table, so the header row and the rows below had different column widths on paper */
  .doc .t-wrap.long { max-height: none; overflow: visible; border: 0; }
  #docBody.editing { outline: 0; }
  span.blank { color: var(--print-ink); }
  figure.diagram { border: 0; padding: 0; }
  figure.diagram figcaption { color: var(--paper-ink-3); }
  a { color: inherit; text-decoration: none; }
}
@media print {
  td.stop5 { color: var(--print-ink); background: var(--paper); font-weight: 700; }
}
/* print and PDF: no photos, no screen-only blocks; tags, document control and escalation boxes in black and white */
.pdf-export .band-photo, .pdf-export .band-veil, .pdf-export .forminfo, .pdf-export .notice5 { display: none !important; }
.pdf-export .tag.law, .pdf-export .tag.rbi, .pdf-export .tag.ci, .pdf-export .tag.co, .pdf-export .tag.ex { background: var(--paper) !important; color: var(--print-ink) !important; border: 1px solid var(--paper-meta) !important; }
.pdf-export figure.diagram.v5 { border: 0; }
@media print {
  .band-photo, .band-veil, .idband, .partband img, .forminfo, .notice5, .meta5 .act, .onpage5, .foot5, .a4sheet-foot { display: none !important; }
  .partband { background: none; min-height: 0; }
  .partband .partband-in { padding: 0; }
  .partband .cat-h { color: var(--print-ink); }
  .desk { background: none; border: 0; padding: 0; overflow: visible; }
  .a4sheet, .a4sheet.wide { box-shadow: none; width: auto; min-height: 0; padding: 0; background: var(--paper); }
  .a4sheet .form { font-size: var(--pfs-doc); }
  .form-page5 .doc-title, .form-page5 #dInfo, .form-page5 #dMsg { display: none !important; }
  .fh5 { padding-bottom: 5pt; }
  .fh5 .fl { min-height: 17pt; font-size: var(--pfs-2xs); }
  .fh5 .fl i { height: 12pt; }
  .fh5 .fno { font-size: var(--pfs-xs); }
  .form.wide .fh5 .fl { min-height: 14pt; }
  .tag.law, .tag.rbi, .tag.ci, .tag.co, .tag.ex { background: var(--paper) !important; color: var(--print-ink) !important; border: 1px solid var(--paper-meta) !important; }
  .docctl th { background: var(--paper-head) !important; color: var(--print-ink); }
  .docctl th, .docctl td { border-color: var(--paper-rule); }
  .escalate { border-color: var(--paper-ink-3); border-left-color: var(--print-ink); background: var(--paper); }
  .meta5 { border-color: var(--paper-line); }
  .sources5 { border-top-color: var(--paper-line); }
  figure.diagram.v5 { border: 0; background: var(--paper); }
  figure.diagram.v5 figcaption { background: var(--paper); border-top: 0; }
  /* 5.20 (user, 24 Oct 2026): a tall chart (for example purpose routing, 400 × 1157) was cut across two pages, with
     a line of its text split; on paper a chart is scaled down to fit one page and kept together with its caption */
  figure.diagram, figure.diagram.v5 { break-inside: avoid; page-break-inside: avoid; overflow: visible; }
  figure.diagram img { max-height: 225mm; width: auto; max-width: 100%; height: auto; margin: 0 auto; display: block; }
  figure.diagram.v5 svg { width: 100%; height: auto; max-height: 225mm; }   /* the viewBox keeps the drawing whole and centred */
}
@media print {
  .art, .cat-intro .art { display: none !important; }
  .fstat { background: var(--paper) !important; color: var(--print-ink) !important; border-color: var(--paper-meta) !important; }
}
@media print {
  .sug, .sclear, .search-toggle { display: none !important; }
}
/* PDF download: the form header as compact as in print */
.pdf-export .fh5 { padding-bottom: 5pt; }
.pdf-export .fh5 .fl { min-height: 17pt; font-size: var(--pfs-2xs); }
.pdf-export .fh5 .fl i { height: 12pt; }
.pdf-export .fh5 .fno { font-size: var(--pfs-xs); }
.pdf-export .form.wide .fh5 .fl { min-height: 14pt; }
@media print {
  .doc table:not(.t):not(.docctl) th, .doc table:not(.t):not(.docctl) td { padding: 3pt 6pt; }
  .doc table.t th, .doc table.t td { padding: 3pt 6pt; }
  .doc .form.wide table.t td, .doc .form.wide table.t th { padding: 2.5pt 4pt; }
}
.pdf-export .doc table:not(.t):not(.docctl) th, .pdf-export .doc table:not(.t):not(.docctl) td, .pdf-export .doc table.t th, .pdf-export .doc table.t td { padding: 3pt 6pt; }
.pdf-export .doc .form.wide table.t td, .pdf-export .doc .form.wide table.t th { padding: 2.5pt 4pt; }
@media print {
  .doc table.t.register td:last-child { min-width: 0; }
}
.pdf-export .doc table.t.register td:last-child { min-width: 0; }
@media print {
  .doc section.hb h4:not(.form h4):not(.forminfo h4):not(.escalate h4):not(.docctl h4) { font-size: var(--pfs-body); color: var(--paper-brand); border-left: 2pt solid var(--paper-accent-line); break-after: avoid; }
}
.pdf-export section.hb h4:not(.form h4):not(.forminfo h4):not(.escalate h4) { color: var(--paper-brand); }
@media print {
  .man-cover { break-after: page; padding-top: 120pt; }
  .man-layout .doc-title, .man-layout .pagehead5 { display: none !important; }
  .man-doc > section.man-pol, .man-doc > section.man-ctl, .man-doc > section.man-toc { break-before: page; }
  .man-doc > section.hb { border: 0; box-shadow: none; }
}
.pdf-export .man-cover { text-align: center; padding-top: 80px; }
/* 5.1 print footer (browsers that support page margin boxes): document name | edition | Page X of Y */
@media print {
  /* fixed zones: left 45 %, centre 30 %, right 25 % of the page width; a long name is cut with an ellipsis in its zone */
  @page { @bottom-left { content: var(--hb-print-name, ""); width: 45%; font-size: var(--pfs-4xs); color: var(--paper-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
    @bottom-center { content: var(--hb-print-edition, ""); width: 30%; font-size: var(--pfs-4xs); color: var(--paper-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
    @bottom-right { content: "Page " counter(page) " of " counter(pages); width: 25%; font-size: var(--pfs-4xs); color: var(--paper-meta); white-space: nowrap; text-align: right; } }
}
/* 5.1 pagination rules for print (the PDF export uses the same rules in its paginator) */
@media print {
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  h2, h3, h4, h5, .man-part { break-after: avoid; }
  p, li { orphans: 2; widows: 2; }
  .sigs, .callout, .simple, .docctl, table.docctl, figure, .escalate { break-inside: avoid; }
}
.pg-break { display: block; }
@media print {
  .print-edition { display: block !important; margin: 10pt 0 0; font-size: var(--pfs-3xs); color: var(--paper-meta); text-align: right; }
  /* 5.3 (R06): a single document already has the edition in its page footer: no second stamp at the end */
  body.print-one-mode .print-edition { display: none !important; }
  .lic-notice, .tb-lic { display: none !important; }
}
@media print {
  .ph5, .cat-th { display: none !important; }
  .partband.phead5 { display: block; border: 0; background: none; }
  .partband.phead5 .partband-in { padding: 0; }
}
@media print {
  .gdoc .gfig { break-inside: avoid; }
  .gdoc .gfig img { max-width: 80% !important; }
}
@media print {
  .ch-photo { display: none !important; }
}
@media print { .offline-toc { display: none; } }

/* 5.26: the scrolling strip under the header (holiday alerts + Knowledge Centre) */
.ticker { background: var(--navy); color: var(--tk-ink); font-size: .86rem; border-bottom: 1px solid var(--navy-2); }
.tk-in { display: flex; align-items: center; gap: .6rem; max-width: 1200px; margin: 0 auto; padding: .3rem .75rem; }
.tk-pause { flex: none; border: 1px solid var(--tk-line); background: transparent; color: inherit; border-radius: 4px; width: 1.9rem; height: 1.5rem; font-size: .62rem; line-height: 1; cursor: pointer; }
.tk-pause:hover, .tk-pause:focus-visible { background: var(--tk-hover); }
.tk-view { flex: 1; min-width: 0; display: flex; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, black 2%, black 98%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 2%, black 98%, transparent); }
.tk-track { flex: none; display: flex; align-items: center; margin: 0; padding: 0; list-style: none; min-width: 100%; animation: tk-move var(--tk-dur, 60s) linear infinite; }
.tk-item { flex: none; padding: 0 2.2rem 0 0; }
.tk-item a { color: inherit; text-decoration: none; }
.tk-item a:hover, .tk-item a:focus-visible { text-decoration: underline; }
.tk-tag { display: inline-block; margin-right: .35rem; padding: 0 .45rem; border-radius: 3px; background: var(--tk-chip); font-size: .74rem; letter-spacing: .02em; text-transform: uppercase; }
.tk-alert { color: var(--tk-alert); }
.tk-alert b { margin-right: .2rem; }
.ticker:hover .tk-track, .ticker:focus-within .tk-track, .ticker.tk-paused .tk-track { animation-play-state: paused; }
@keyframes tk-move { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; } .tk-view { overflow-x: auto; mask-image: none; -webkit-mask-image: none; } .tk-track[aria-hidden] { display: none; } .tk-pause { display: none; } }
@media print { .ticker { display: none !important; } }

/* 5.27: Admin dashboard */
.db-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; }
.db-card, .db-box { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--bg); }
.db-box { margin: 14px 0; } .db-box h2 { font-size: 1.05rem; margin: 0 0 10px; }
.db-l { color: var(--muted); font-size: .85rem; } .db-v { font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.db-s { color: var(--ink-2); font-size: .9rem; } .db-h { color: var(--muted); font-size: .78rem; margin-top: 4px; }
.db-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 8px; } .db-head h2 { margin: 0; }
.db-range { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.db-legend { color: var(--muted); font-size: .85rem; } .db-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: -1px; }
.db-chart { width: 100%; height: 180px; display: block; } rect.db-ret, i.db-ret { fill: var(--line-strong); background: var(--line-strong); } rect.db-new, i.db-new { fill: var(--accent); background: var(--accent); }
.db-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; margin-top: 4px; gap: 8px; }
.db-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 14px; } .db-grid .list td a { word-break: break-all; }
.db-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.db-fig { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: .88rem; }
.db-fig:hover { border-color: var(--accent-line); } .db-v2 { font-size: 1.4rem; font-weight: 700; color: var(--ink); }
/* 5.28: dashboard content report */
.db-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .db-top h1 { margin-right: auto; }
.db-period { margin: 4px 0 6px; } .db-most { margin: 6px 0 0; color: var(--ink-2); }
.db-content td:first-child { min-width: 220px; } .db-content .chip { font-size: .75rem; }
.db-hours { width: 100%; height: 112px; display: block; } .db-tx { fill: var(--muted); font-size: 11px; }
/* 5.29: Instagram share window on a Knowledge Centre post */
.kc-ig { margin: 12px 0 18px; padding: 16px; } .kc-ig-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .kc-ig-head h3 { margin: 0; }
.kc-ig-grid { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 18px; margin-top: 10px; }
.kc-ig-shape { display: flex; gap: 6px; margin-bottom: 8px; } .kc-ig-prev img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); display: block; }
.kc-ig-cap { width: 100%; box-sizing: border-box; font: inherit; font-size: .9rem; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.kc-ig-btns { display: flex; flex-wrap: wrap; gap: 6px; } .kc-ig-steps { padding-left: 20px; margin: 8px 0; }
@media (max-width: 640px) { .kc-ig-grid { grid-template-columns: 1fr; } .kc-ig-prev img { max-width: 260px; margin: 0 auto; } }
/* 5.29: Glossary */
.gl-src { color: var(--muted); font-size: .85em; }
/* 5.29.1: share picture status on the Admin Knowledge Centre tab */
.kc-share-st { list-style: none; padding: 0; margin: 6px 0; } .kc-share-st li { padding: 3px 0; } .kc-share-st li.bad { color: var(--bad); }
/* 5.33: home layout B — role dashboard */
.dash5 { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.dash-nav { position: sticky; top: 76px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--bg); max-height: calc(100vh - 96px); overflow: auto; }
.dash-nav-h { font-size: 1rem; margin: 2px 6px 8px; }
.dn-group { margin: 12px 6px 4px; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dn-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: .92rem; }
.dn-item:hover { background: var(--accent-soft); color: var(--ink); } .dn-item span:first-of-type { flex: 1; } .dn-n { color: var(--muted); font-size: .8rem; }
.dash-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-roles { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-roles .role-chip { padding: 9px 18px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 600; }
.dash-roles .role-chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.dstat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink-2); text-decoration: none; }
.dstat:hover { border-color: var(--accent-line); } .ds-k { font-size: .82rem; color: var(--muted); } .ds-v { font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.ds-s { font-size: .82rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dash-main .row.top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .dash5 { grid-template-columns: 1fr; } .dash-nav { position: static; max-height: none; order: 2; } .dash-main .row.top { grid-template-columns: 1fr; } }
/* 5.34.1: compact dashboard (user review): one-line menu, full-width role tabs, tasks beside the latest change, limits band */
@media (min-width: 901px) { .dash5 { grid-template-columns: 236px minmax(0, 1fr); gap: 18px; } }
.dash-nav { max-height: none; overflow: visible; padding: 10px 8px; }
.dn-item { padding: 5px 8px; font-size: .88rem; line-height: 1.35; }
.dn-item span:first-of-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dn-group { margin: 10px 8px 2px; }
.dash-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.dash-roles .role-chip { border: 0; border-radius: 0; text-align: center; padding: 9px 8px; }
.dash-roles .role-chip + .role-chip { border-left: 1px solid var(--line-strong); }
.dash-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.dash-row > .hcard { margin: 0; }
.dash-limits .figs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: start; }
.dash-limits .fig { height: auto; }
.dash-limits .fig .v { font-size: 1.25rem; line-height: 1.25; }
.dash-limits .fig .d { margin-top: 4px; }
@media (max-width: 900px) { .dash-row { grid-template-columns: 1fr; } }
.dn-item span:first-of-type { flex: 0 0 auto; white-space: normal; overflow: visible; }
.dn-item .dn-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-item svg, .dn-item .li { flex: 0 0 auto; width: 18px; height: 18px; }
/* 5.35: a lighter, balanced home page (user review): light top band (only the slim header stays navy), submenus in the
   side menu, key limits as one compact row */
.idband.idband-home { background: var(--surface); border-bottom: 1px solid var(--line); }
.idband-home .idband-in { padding: 18px var(--sp-4) 20px; }
.idband-home h1 { font-size: var(--fs-4xl, 1.8rem); }
.idband-home .id-side { box-shadow: none; border: 1px solid var(--line); }
.idband-home .idsearch input { border-color: var(--line-strong); }
.dn-sec { border-top: 1px solid var(--line); padding-top: 2px; margin-top: 4px; }
.dn-sec:first-of-type { border-top: 0; margin-top: 0; }
.dn-sec > summary.dn-group { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; margin: 2px 0; border-radius: 6px; }
.dn-sec > summary.dn-group::-webkit-details-marker { display: none; }
.dn-sec > summary.dn-group::after { content: "▸"; font-size: .9rem; color: var(--muted); transition: transform .15s; }
.dn-sec[open] > summary.dn-group::after { transform: rotate(90deg); }
.dn-sec > summary.dn-group:hover { background: var(--accent-soft); }
.dn-docs { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 9px; }
.dash-limits .fig .d { display: none; }
.dash-limits .fig { padding: 10px 12px; }
.dash-limits .fig .v { font-size: 1.05rem; }
.dash-limits .fig .kh { margin-bottom: 4px; }
@media (max-width: 640px) { .dash-limits .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-limits .fig .kh img, .dash-limits .fig .kh svg { display: none; }
/* 5.35: the home photo on the right of the light band, fading into it (user: "keep some photos") */
.idband.idband-home { position: relative; overflow: hidden; }
.idband-home > img, .idband-home > picture { position: absolute; top: 0; right: 0; width: 58%; height: 100%; object-fit: cover; z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, var(--ink) 55%); mask-image: linear-gradient(to right, transparent 0%, var(--ink) 55%); opacity: .55; }
.idband-home > picture img { width: 100%; height: 100%; object-fit: cover; }
.idband-home .idband-in { position: relative; z-index: 1; }
.idband-home .edition5 .lic-ed { background: var(--accent-soft); color: var(--ink); border: 1px solid var(--accent-line); }
.dash-nav details.dn-sec { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; margin: 4px 0 0; }
.dash-nav details.dn-sec:first-of-type { border-top: 0; margin-top: 0; }
.dash-nav details.dn-sec > summary { padding: 6px 8px; font-weight: 400; }
.dash-nav details.dn-sec > summary::before { display: none; }
@media (max-width: 900px) { .idband-home > img, .idband-home > picture { width: 100%; opacity: .18; -webkit-mask-image: none; mask-image: none; } }
.idband-home > .band-photo { inset: 0 0 0 auto; left: auto; width: 58%; }
@media (max-width: 900px) { .idband-home > .band-photo { width: 100%; inset: 0; } }
.idband-home > .band-veil { display: none; }
.idband-home .lic-change { color: var(--link); }
/* 5.35.1 (user review): one style for every header menu item — open, with the same hover and open highlight; only the
   licence switch beside the title keeps its outline */
.tb-btn { border-color: transparent; }
#licBtn { border-color: var(--topbar-line); }
a.tb-acctbox, .tb-acct-btn { border-color: transparent; height: 34px; }
/* 5.36: developer layout plan — attention bar, status card accents, sidebar marker, limits with their conditions, photo
   cards, four roles, phone 2 × 2 */
.dash-roles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.dstat { border-top: 3px solid var(--accent); }
#dsDue { border-top-color: var(--primary); } #dsNext { border-top-color: var(--link); } #dsRbi { border-top-color: var(--heading); }
.att-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; min-height: 56px; border-radius: 12px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.att-bar.due { border-color: var(--att-line); background: var(--att-soft); color: var(--att-ink); }
.att-bar b { font-weight: 700; } .att-bar .att-items { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.att-bar .att-items a { padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; color: inherit; text-decoration: none; font-size: .85rem; }
.att-bar .att-go { margin-left: auto; font-weight: 600; color: inherit; }
.dash-nav { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; }
.dash-nav details.dn-sec[open] > summary { box-shadow: inset 3px 0 0 var(--primary); background: var(--surface-2); color: var(--heading); }
.dash-limits .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-limits .fig .d { display: block; }
.dash-limits .fig .kh img, .dash-limits .fig .kh svg { display: inline-block; }
.dash-limits .fig .v { font-size: 1.35rem; }
.dash-limits { background: var(--surface-2); }
.ess { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ess-h { margin: 6px 0 -4px; font-size: 1rem; color: var(--heading); }
.ess-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); color: var(--ink); text-decoration: none; }
.ess-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ess-card .ess-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ess-card .ess-t { font-weight: 700; color: var(--heading); } .ess-card .ess-d { font-size: .88rem; color: var(--ink-2); flex: 1; }
.ess-card .ess-go { font-size: .88rem; font-weight: 600; color: var(--link); }
.ess-card:hover { border-color: var(--accent-line); }
@media (max-width: 1200px) { .dash-limits .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ess { grid-template-columns: 1fr; } .ess-card img { aspect-ratio: 21 / 9; } .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-nav { max-height: none; overflow: visible; } }
@media (max-width: 640px) { .dash-roles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-roles .role-chip + .role-chip { border-left: 0; } .dash-roles .role-chip:nth-child(even) { border-left: 1px solid var(--line-strong); } .dash-roles .role-chip:nth-child(n+3) { border-top: 1px solid var(--line-strong); } .dash-limits .figs { grid-template-columns: 1fr; } }
@media (max-width: 360px) { .dash-stats { grid-template-columns: 1fr; } }
.dn-sec > summary.dn-group { white-space: nowrap; gap: 6px; } .dn-sec > summary.dn-group > span, .dn-sec > summary.dn-group { overflow: hidden; text-overflow: ellipsis; }
/* 5.36.1: role tabs sit just above Common tasks */ .dash-main > .dash-roles { margin: 4px 0 -6px; }

/* 5.37: long circular numbers in the updates list wrap instead of widening the page on a phone */
.update-fallback .tag { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
/* 5.37: the sell / buy switch of the calculators is a full 44 px tap target on touch screens */
@media (pointer: coarse) { .gst-trade-toggle button { min-height: 44px; } }
/* 5.38: the ticker pause button is a full 44 px tap target on touch screens */
@media (pointer: coarse) { .tk-pause { height: 44px; min-width: 44px; font-size: .75rem; } }
/* ---------- 5.39: the Handbook menu in the top bar replaces the side menu of Home ---------- */
.dash-nav[hidden] { display: none !important; }
.dash5.dash-full { grid-template-columns: minmax(0, 1fr); }
.tb-hb { position: static; }
.menu-pop.hb-pop { position: fixed; top: calc(var(--tb-h, 56px) + 6px); left: 50%; right: auto; transform: translateX(-50%); width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - var(--tb-h, 56px) - 24px); overflow: auto; padding: var(--sp-3) var(--sp-4); }
.hb-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
.hb-col { display: flex; flex-direction: column; min-width: 0; }
.hb-h { margin: 0 0 4px; padding: 0 10px 6px; border-bottom: 1px solid var(--line); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.hb-pop .m-item { white-space: normal; line-height: 1.3; }
.hb-foot { display: flex; flex-wrap: wrap; gap: 4px var(--sp-3); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.hb-foot .m-item { width: auto; }
.tb-learn .menu-pop { min-width: 250px; }
@media (max-width: 1100px) { .hb-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones and tablets: the menu button opens it as a sheet under the header */
@media (max-width: 860px) {
  .menu-pop.hb-pop { top: var(--tb-h, 50px); left: 0; right: 0; transform: none; width: auto; max-height: calc(100vh - var(--tb-h, 50px) - 64px); border-radius: 0 0 var(--radius) var(--radius); padding: var(--sp-2) var(--sp-3); }
  .hb-cols { grid-template-columns: minmax(0, 1fr); }
  .hb-pop .m-item { min-height: 44px; }
}
/* 5.39: the earlier number under a renumbered form's number */
.dtable td.no .was { display: block; font-size: var(--fs-xs, 12px); font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.was-line { margin-top: -4px; }
/* 5.39: with the Handbook and Learn menus the bar is fuller — on laptops up to 1280 px the search box becomes an icon
   that opens the box under the bar (as on phones), and the strapline goes */
@media (min-width: 861px) and (max-width: 1280px) {
  .topbar .topsearch { display: none; }
  .topbar .search-toggle { display: inline-flex; }
  body.search-open .topsearch { display: flex; position: fixed; left: 0; right: 0; top: var(--tb-h, 56px); max-width: none; margin: 0; padding: var(--sp-2) 16px; background: var(--navy); z-index: 80; box-shadow: var(--shadow-2); }
  body.search-open .topsearch input { height: 40px; }
  .topbar .logo small { display: none; }
  .tb-nav { gap: 2px; }
}
@media (min-width: 861px) and (max-width: 1040px) { .tb-nav .tb-link .label { display: none; } .tb-nav .tb-hb .label { display: inline; } }
@media (min-width: 861px) and (max-width: 1180px) { .topbar .tb-acctbox .label { display: none; } }
/* ---------- 5.40: one style for the whole top bar (user audit, 26 Oct 2026) ----------
   every item is plain text with a line icon; the page you are on is marked only by a thin accent line under it (no box);
   the site name is never cut off: it gives way to its short form ("Compliance Handbook") instead, and the search box
   takes the space that is left. Only the licence switch keeps its outline (5.35.1). */
.tb-link.active, .tb-link[aria-current="page"] { background: transparent; box-shadow: inset 0 -2px 0 var(--topbar-accent); }
.tb-link:hover, .tb-btn:hover, .tb-acct-btn:hover, a.tb-acctbox:hover { background: var(--topbar-active); }
.topbar .logo { flex-shrink: 0; }
.topbar .logo-t b { overflow: visible; text-overflow: clip; }
@media (max-width: 1640px) { .topbar .nm-full { display: none; } .topbar .nm-short { display: inline; } }
.topbar .topsearch { flex: 1 1 200px; min-width: 150px; }
.tb-nav { gap: 4px; }
.tb-acct-btn svg.i:last-child, .tb-link svg.i:last-child { width: 14px; height: 14px; opacity: .8; }
/* 5.42: phones keep the tiniest name (the 5.40 short-name rule must not bring both names back) */
@media (max-width: 480px) { .topbar .nm-full, .topbar .nm-short { display: none; } .topbar .nm-tiny { display: inline; } }
@media (min-width: 481px) and (max-width: 860px) { .topbar .nm-full, .topbar .nm-tiny { display: none; } .topbar .nm-short { display: inline; } }

/* 5.46: Sanctions check */
.sanc-clear { border-left: 4px solid var(--ok); background: var(--ok-soft); }
.sanc-hit { border-left: 4px solid var(--warn-line); background: var(--warn-soft); }
.sanc-hit tr.sanc-strong td { font-weight: 600; }
.sanc-dec .toolbar { flex-wrap: wrap; }
.sanc-status.err { font-weight: 600; }
.sanc-status { list-style: none; padding-left: 0; }
.sanc-status li { margin: 2px 0; }
.sanc-dec h2 { font-size: 1.05rem; }
/* 5.47.9: compact screening record */
.sl-tbl { font-size: .9rem; }
.sl-tbl td, .sl-tbl th { padding: 6px 8px; vertical-align: top; }
.sl-tbl td.sl-when { white-space: nowrap; }
.sl-tbl .sl-more summary { cursor: pointer; font-size: .8rem; color: var(--muted, inherit); }
.sl-act { white-space: nowrap; }
.sl-act .btn { margin: 0 4px 4px 0; }
.sl-b { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: .8rem; font-weight: 600; }
.sl-clear { background: var(--ok-soft); color: var(--ok); }
.sl-possible, .sl-strong { background: var(--warn-soft); color: var(--warn); }
.sl-strong { outline: 1px solid var(--warn-line); }
.sl-filter { flex-wrap: wrap; gap: 6px; align-items: center; }
.sl-filter input[name=q] { max-width: 180px; }
.sl-right { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.sl-tbl td:nth-child(3) > div { white-space: nowrap; }
.sl-tbl .sl-more { margin-top: 2px; }
.sl-tbl .sl-more summary { padding: 0; border: 0; background: none; }
.sl-need { color: var(--bad); font-weight: 700; }

/* 5.48 (user): polish — phones and touch screens */
@media (pointer: coarse) {
  .pw-eye { min-width: 44px; min-height: 44px; }   /* show / hide password */
  .cal-meta a { display: inline-block; padding: 8px 0; }   /* the chapter links under each due date */
}
.tbadge { font-size: max(12px, var(--fs-2xs)); }
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }   /* a long (translated) label wraps instead of running off the screen */
}

/* 5.48: long lists — rows after the first 25 wait for "Show more" */
.sm-hide { display: none !important; }
.sm-more { margin: var(--sp-2) 0; }

/* 5.49: LRS statistics — one series bar chart (the accent colour), recessive grid, hover value */
.lrs-pick { flex-wrap: wrap; gap: 6px; }
.lrs-chart { position: relative; }
.lrs-chart svg { width: 100%; height: auto; display: block; }
.lrs-grid { stroke: var(--line); stroke-width: 1; }
.lrs-y, .lrs-x, .lrs-x2 { fill: var(--muted); font-size: 11px; }
.lrs-x2 { font-size: 10px; }
.lrs-lab { fill: var(--ink); font-size: 12px; font-weight: 600; }
.lrs-bar path { fill: var(--accent); }
.lrs-bar.part path { fill: var(--accent-line); }
.lrs-bar .hit { fill: transparent; }
.lrs-bar.on path, .lrs-bar:focus path { fill: var(--heading); }
.lrs-bar:focus { outline: none; }
.lrs-tip { position: absolute; z-index: 2; min-width: 160px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: var(--fs-sm); color: var(--ink); pointer-events: none; }
.lrs-tbl td.num, .lrs-tbl th.num { text-align: right; white-space: nowrap; }