/* Modern, high-productivity styling for GST Appeal Desk Desktop.
   Themed via CSS variables (see generated THEME VARS block at bottom + build_theme.py). */
/* Fonts are self-hosted in app/static/fonts (CSP allows font-src 'self' only).
   Same faces as the Pendency Board: Bricolage Grotesque (display), IBM Plex Sans (text), IBM Plex Mono (data). */
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/1c7e673e777cc437.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/fdb6b064da1e9b9f.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/40c2cb34afaa7f72.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;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/1c7e673e777cc437.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/fdb6b064da1e9b9f.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/40c2cb34afaa7f72.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/64d42499a463757b.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/035f1b5c566efbbf.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/264226c2a81f4266.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/1969f6ffdbf59ace.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/e2661bcc0d77ef31.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/da78b4b316e6b46e.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/758b9f95f75a51bd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/baf63ee991d8c1f6.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/93cfae71a503892e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/0bc96cd0d5b0ad98.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/a6dd227681259777.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/0564cf0e90048ca2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/92e63ec1067b6afa.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/c73940f4fb37da13.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/632855d1d7aa5144.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/868a235a9c8b5021.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/a6dd227681259777.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/0564cf0e90048ca2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/92e63ec1067b6afa.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/c73940f4fb37da13.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/632855d1d7aa5144.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/868a235a9c8b5021.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/a6dd227681259777.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/0564cf0e90048ca2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/92e63ec1067b6afa.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/c73940f4fb37da13.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/632855d1d7aa5144.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/868a235a9c8b5021.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;
}


:root {
  --bg-main: rgb(var(--slate-950));
  --bg-sidebar: rgb(var(--slate-900));
  --bg-card: rgb(var(--slate-900));
  --bg-card-hover: rgb(var(--slate-800));
  --bg-input: #0B110E;
  --bg-preview: #121A15;
  --preview-heading: rgb(var(--emerald-400));
  --bg-preview-th: #1C2620;
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-text: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-theme="light"] {
  --bg-input: #ffffff;
  --bg-preview: #ffffff;
  --preview-heading: rgb(var(--emerald-700));
  --bg-preview-th: #EAEEEA;
}

body, .font-sans {
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-main);
  color: rgb(var(--slate-50));
}

code, pre, .font-mono {
  font-family: var(--font-mono);
}

/* Display face for headings and big figures, as on the Pendency Board.
   Office-document previews keep their own letter typography. */
h1, h2, h3, .text-3xl, .text-xl {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.doc-preview-card h1, .doc-preview-card h2, .doc-preview-card h3 {
  font-family: inherit;
  letter-spacing: normal;
}
.tabular-nums, table { font-variant-numeric: tabular-nums; }

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--slate-700));
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--slate-600));
}

/* Form Inputs */
.form-input {
  background-color: var(--bg-input);
  border: 1px solid rgb(var(--slate-800));
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: rgb(var(--slate-50));
  font-size: 0.75rem;
  transition: all 0.15s ease;
}

.form-input:focus {
  outline: none;
  border-color: rgb(var(--emerald-500));
  box-shadow: 0 0 0 1px rgb(var(--emerald-500));
  background-color: var(--bg-input);
}

/* Tabs */
.tab-btn {
  padding: 0.6rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(var(--slate-400));
  border-radius: 0.5rem;
  transition: all 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tab-btn:hover {
  color: rgb(var(--slate-100));
  background-color: color-mix(in srgb, rgb(var(--slate-500)) 14%, transparent);
}

.tab-btn.active {
  color: rgb(var(--emerald-400));
  background-color: color-mix(in srgb, rgb(var(--emerald-500)) 12%, transparent);
  border: 1px solid color-mix(in srgb, rgb(var(--emerald-500)) 25%, transparent);
  font-weight: 600;
}

/* Document Live Preview Sheet */
/* The frame the preview card sits in, on the notesheet, deficiency, PH and ROPH tabs.

   A flex item whose overflow is not `visible` has an automatic minimum size of zero. These
   frames scroll, so they had one — and the tab header stacked above them, which has no
   overflow and therefore cannot shrink below its content, took the space first. The frame
   was left with whatever remained. On a 1366x768 laptop the deficiency tab, whose header
   carries the clause picker, showed 184px of a 1482px letter; at 390px it showed 34px.

   The floor is what fixes that: the frame keeps a readable window and the panel scrolls
   instead. `flex: 1 1 auto` still lets it take the whole of a tall screen. Do not drop the
   min-height to let the header grow — that is the bug, in the other direction. */
.doc-preview-frame {
  flex: 1 1 auto;
  min-height: 400px;
  overflow-y: auto;
}

.doc-preview-card {
  background-color: var(--bg-preview);
  color: rgb(var(--slate-200));
  font-size: 0.8125rem;
  line-height: 1.65;
  padding: 2rem 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--slate-800));
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  max-width: 860px;
  margin: 0 auto;
  min-height: 500px;
}

.doc-preview-card h1 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--preview-heading);
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.doc-preview-card h2, .doc-preview-card h3 {
  font-size: 0.875rem;
  font-weight: 700;
  color: rgb(var(--slate-100));
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgb(var(--slate-800));
  padding-bottom: 0.25rem;
}

.doc-preview-card p {
  margin-bottom: 0.75rem;
  text-align: justify;
}

.doc-preview-card blockquote {
  border-left: 3px solid var(--preview-heading);
  background-color: color-mix(in srgb, var(--preview-heading) 8%, transparent);
  padding: 0.6rem 1rem;
  margin: 0.75rem 0;
  font-style: italic;
  color: rgb(var(--slate-300));
  border-radius: 0 0.375rem 0.375rem 0;
}

.doc-preview-card table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.75rem;
}

.doc-preview-card th, .doc-preview-card td {
  border: 1px solid rgb(var(--slate-700));
  padding: 0.45rem 0.65rem;
  vertical-align: top;
}

.doc-preview-card th {
  background-color: var(--bg-preview-th);
  color: rgb(var(--slate-50));
  font-weight: 700;
  text-align: center;
}

.doc-preview-card hr {
  border-top: 1px solid rgb(var(--slate-800));
  margin: 1.25rem 0;
}

/* === Office document sheet ==============================================
   The four house letters render as the document, not as a summary of it:
   A4 proportions, the office's own letterhead image, 12pt justified body,
   ruled tables. Paper stays white in both themes because the dispatched
   document is paper — the surrounding chrome is what carries the theme.

   Devanagari is served by its own family with a unicode-range, which is the
   browser's version of the Mangal/Calibri run-split app/ldh_docs.py does in
   the DOCX: Hindi glyphs come from Mangal, everything else from Calibri. */

@font-face {
  font-family: 'DocDevanagari';
  src: local('Mangal'), local('Nirmala UI'), local('Noto Sans Devanagari'),
       local('Lohit Devanagari'), local('Samyak Devanagari');
  unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+A830-A83F;
}

.doc-preview-card:has(.doc) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: none;
  min-height: 0;
}

.doc {
  --doc-ink: #101010;
  --doc-rule: #2b2b2b;
  width: 100%;
  max-width: 794px;            /* 8.27in at 96dpi — A4 */
  margin: 0 auto;
  padding: 1in;                /* the office margin */
  background: #fff;
  color: var(--doc-ink);
  font-family: 'DocDevanagari', Calibri, Carlito, 'Segoe UI', system-ui, sans-serif;
  font-size: 12pt;
  line-height: 1.38;
  text-align: justify;
  overflow-wrap: anywhere;
  box-shadow: 0 18px 45px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.doc--roph { padding-bottom: 0.5in; }   /* the ROPH runs a 0.5in bottom margin */

/* The sheet is paper: none of the dark preview-card treatments apply inside it. */
.doc h1,
.doc h2,
.doc h3,
.doc .doc-title {
  color: var(--doc-ink);
  text-transform: none;
  letter-spacing: normal;
  border-bottom: 0;
  padding-bottom: 0;
}

.doc .doc-grid th,
.doc .doc-grid td {
  background: transparent;
  color: var(--doc-ink);
}

.doc hr { border-top: 1px solid var(--doc-rule); }

.doc p { margin: 0 0 0.55rem; text-align: justify; }
.doc-flush { text-align: left !important; margin: 0.5rem 0 0.3rem !important; }
.doc-strong { font-weight: 700; }
.doc-indent { text-indent: 36pt; }

.doc-letterhead {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 0.4rem;
}

.doc-fileline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 1.5rem;
  font-weight: 700;
  margin-top: 0.55rem;
}
.doc-fileline span { white-space: nowrap; }
.doc-fileline span:last-child { margin-left: auto; }

.doc-regd {
  padding-left: 40%;            /* five tab stops, as in the letter */
  font-weight: 700;
  text-align: left !important;
  margin: 0.15rem 0 0.7rem !important;
}

.doc-subject { text-align: left !important; margin: 0.65rem 0 !important; }
.doc-tab { display: inline-block; width: 2.4em; }

/* Tables ---------------------------------------------------------------- */
.doc-scroll { overflow-x: auto; }

.doc-grid {
  width: 100%;
  border-collapse: collapse;
  margin: 0.55rem 0 0.9rem;
  font-size: 11.5pt;
}

.doc-grid th,
.doc-grid td {
  border: 1px solid var(--doc-rule);
  padding: 0.3rem 0.5rem;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.doc-grid thead th { text-align: center; font-weight: 700; }
.doc-sr { width: 3rem; text-align: center !important; }

/* The office bolds these three tables throughout. */
.doc-grid--addr td,
.doc-grid--details th,
.doc-grid--details td,
.doc-grid--roph th,
.doc-grid--roph td { font-weight: 700; }

/* The notesheet's particulars table prints its labels plain, its values bold. */
.doc-grid--fields th { width: 40%; font-weight: 400; }
.doc-grid--fields td { font-weight: 700; }
.doc-grid--addr th, .doc-grid--addr td:first-child { width: 3rem; }
.doc-blank { min-height: 1.6rem; }

/* Numbered blocks -------------------------------------------------------- */
.doc-list, .doc-copyto { padding-left: 2.3rem; margin: 0.4rem 0 0.8rem; }
.doc-list li, .doc-copyto li { margin-bottom: 0.45rem; }

.doc-disc { padding-left: 2.3rem; margin: 0.5rem 0 0.9rem; }
.doc-disc li { margin-bottom: 0.6rem; }
.doc-hi, .doc-en { display: block; }

.doc-copyto-head { margin-top: 1.1rem !important; text-align: left !important; }

/* Signatures ------------------------------------------------------------- */
.doc-sign { margin-top: 1.1rem; }
.doc-sign p { margin: 0; font-weight: 700; }
.doc-sign--right, .doc-sign--right p { text-align: right; }
.doc-sign--left, .doc-sign--left p { text-align: left; }
.doc-sign-space { height: 3.1em; }

/* ROPH ------------------------------------------------------------------- */
.doc-title {
  text-align: center;
  font-size: 12pt;
  font-weight: 700;
  text-decoration: underline;
  margin: 0.4rem 0 0.85rem;
}
.doc-proc-label {
  text-align: left !important;
  font-weight: 700;
  text-decoration: underline;
  margin: 0.9rem 0 0.35rem !important;
}
.doc-proc { line-height: 1.15; }
.doc-roph-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 1.1rem;
}
.doc-rep p { margin: 0; font-weight: 700; }
.doc-before { text-align: right; white-space: nowrap; }

/* A value the papers do not carry is marked, never invented. */
.doc-missing {
  font-style: italic;
  font-size: 0.85em;
  color: #9a3412;
  background: #fff5ed;
  border: 1px dashed #c2570f;
  border-radius: 3px;
  padding: 0 0.3rem;
  white-space: nowrap;
}

.doc-empty {
  color: rgb(var(--slate-500));
  font-style: italic;
}

/* 390px must stay fully usable with no horizontal overflow. */
@media (max-width: 820px) {
  .doc { padding: 1.4rem 1.15rem; font-size: 11pt; }
  .doc--roph { padding-bottom: 1.4rem; }
  .doc-fileline { flex-direction: column; gap: 0.15rem; }
  /* A long file number has to be allowed to break on a phone. */
  .doc-fileline span { white-space: normal; }
  .doc-fileline span:last-child { margin-left: 0; }
  .doc-regd { padding-left: 0; }
  .doc-grid { font-size: 9.5pt; }
  .doc-grid--fields th { width: 42%; }
  .doc-roph-foot { flex-direction: column; }
  .doc-before { text-align: left; }
  .doc-list, .doc-copyto, .doc-disc { padding-left: 1.4rem; }
  .doc-indent { text-indent: 18pt; }
}

@media print {
  .doc { box-shadow: none; max-width: none; }
}

/* Two utilities the workflow-stage badges ask for from JavaScript which the pruned
   build never shipped, so those badges have been rendering with no indigo at all. */
.text-indigo-300 { color: rgb(var(--indigo-300)); }
.border-indigo-900\/60 { border-color: rgb(var(--indigo-900) / 0.6); }

/* === Advisory panels ====================================================
   The pre-deposit basis and demand-reconciliation notes. Built on the theme
   tokens rather than literal Tailwind colour utilities, because these classes
   are applied from JavaScript: the committed `tailwind.min.css` is a pruned
   build, so an amber utility that appears only in a JS string is absent from it
   and the panel renders with no colour at all — a caution indistinguishable
   from a neutral note, in a UI where colour is supposed to encode severity. */
.note-panel {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  border: 1px solid rgb(var(--slate-700));
  border-radius: 0.5rem;
  font-size: 0.75rem;
  background-color: rgb(var(--slate-950) / 0.6);
}

.note-panel__title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: rgb(var(--slate-200));
}

.note-panel__body {
  color: rgb(var(--slate-400));
  line-height: 1.6;
}

.note-panel--good {
  border-color: rgb(var(--emerald-800) / 0.5);
  background-color: rgb(var(--emerald-950) / 0.3);
}
.note-panel--good .note-panel__title { color: rgb(var(--emerald-300)); }

.note-panel--warn {
  border-color: rgb(var(--amber-800) / 0.55);
  background-color: rgb(var(--amber-950) / 0.35);
}
.note-panel--warn .note-panel__title { color: rgb(var(--amber-300)); }

/* In the light theme the 800-weight tints are the pale end of the ramp, so the
   border needs the darker token to stay visible against paper. */
:root[data-theme="light"] .note-panel--good { border-color: rgb(var(--emerald-300) / 0.4); }
:root[data-theme="light"] .note-panel--warn { border-color: rgb(var(--amber-300) / 0.45); }

/* === Responsive visibility ==============================================
   `tailwind.min.css` here is a pruned build: it contains only the utilities the
   original markup happened to use, so a breakpoint variant that was never used
   (sm:hidden, lg:flex, max-sm:hidden ...) is simply absent and silently does
   nothing. Anything new is therefore declared explicitly, right here. */

/* Phone only (<640px) */
.u-phone-only,
.u-phone-only-flex,
.u-phone-only-inline { display: none !important; }

@media (max-width: 639px) {
  .u-phone-only { display: block !important; }
  .u-phone-only-flex { display: flex !important; }
  .u-phone-only-inline { display: inline !important; }
  .u-phone-hide { display: none !important; }

  /* Appeal meta and the eOffice index are one tap away rather than always open,
     so the case data itself clears the fold on a 390px screen. */
  #caseSubDetails { display: none; }
  #caseSubDetails.is-open { display: block; }
  #eofficeDocChips.is-collapsed { display: none; }
}

/* Labels that only earn their space once there is room for them */
.u-desk-label { display: none !important; }
@media (min-width: 1024px) { .u-desk-label { display: inline !important; } }

.u-desk-flex { display: none !important; }
@media (min-width: 1024px) { .u-desk-flex { display: flex !important; } }

.u-wide-only { display: none !important; }
@media (min-width: 1280px) { .u-wide-only { display: block !important; } }

@media (min-width: 640px) { #docIndexToggle { cursor: default; } }

/* Two rules the markup has always asked for that the pruned Tailwind build never
   shipped, so they silently did nothing: the clause-selection and PH grids stayed
   two-across on desktop. (The preview height cap that sat beside it in the markup was
   dropped: honouring it put a second scrollbar inside the tab's own scroll area and
   clipped the letter mid-line.) */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* === Layout: docket column ==============================================
   The case list is a fixed 320px. On a 1024px iPad in landscape that is a third
   of the screen spent on navigation while the particulars grid is squeezed into
   two columns. Collapsing it is the officer's choice and it persists. Below the
   lg breakpoint the sidebar is already an overlay drawer, so this applies only
   from 1024px up. */
@media (min-width: 1024px) {
  body.sidebar-collapsed #caseSidebar {
    display: none;
  }
}

/* The tab strip scrolls on narrow screens; without an edge fade there is nothing
   to say more tabs exist beyond "6. Order-in-Appeal". */
.tab-scroller {
  position: relative;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-scroller::-webkit-scrollbar { display: none; }

.tab-scroll-wrap { position: relative; }
.tab-scroll-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.25rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg-sidebar));
}
/* The strip overflows whenever the tabs are wider than the space left after the docket
   column, which at 1280px with the sidebar open is 960px — so this cannot be keyed to
   viewport width. The fade is shown only when there is genuinely more to scroll to. */
.tab-scroll-wrap:not(.is-scrollable)::after { display: none; }

/* Touch targets: a finger is not a mouse pointer. */
@media (hover: none) and (pointer: coarse) {
  .tab-btn { padding-top: 0.55rem; padding-bottom: 0.55rem; }
  #caseListContainer > * { min-height: 2.75rem; }
}

/* Prompt Chips */
.prompt-chip {
  background-color: rgb(var(--slate-800));
  border: 1px solid rgb(var(--slate-700));
  color: rgb(var(--slate-300));
  font-size: 0.8125rem;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.prompt-chip:hover {
  background-color: var(--bg-card-hover);
  color: var(--preview-heading);
  border-color: var(--preview-heading);
}

/* Theme toggle: show sun in light mode, moon in dark */
#themeToggleBtn .icon-sun {
  display: none;
}
:root[data-theme="light"] #themeToggleBtn .icon-sun {
  display: block;
}
:root[data-theme="light"] #themeToggleBtn .icon-moon {
  display: none;
}


/* Docket tools and case cards: use theme tokens, not unbuilt utility classes. */
.cost::after { content: '⚡'; color: #d99b17; font-size: 11px; margin-left: 4px; }
.docket-heading, .docket-results { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.docket-heading { margin-bottom: 12px; }
.docket-heading h2 { font-size: 13px; font-weight: 700; color: rgb(var(--slate-100)); }
.docket-heading > span, .docket-results { font-size: 11px; color: rgb(var(--slate-400)); }
.docket-filters { padding: 12px; border-bottom: 1px solid rgb(var(--slate-800)); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.docket-filters label { min-width: 0; font-size: 10px; font-weight: 600; color: rgb(var(--slate-400)); }
.docket-filters select { display: block; width: 100%; margin-top: 4px; padding: 7px 5px; font-size: 11px; font-weight: 400; }
.docket-sort { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.docket-sort select { flex: 1; width: auto; margin: 0; }
.docket-results { grid-column: 1 / -1; min-height: 22px; }
.docket-results button, .docket-empty button { color: rgb(var(--emerald-400)); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.docket-case { display: block; width: 100%; text-align: left; padding: 12px; border: 1px solid transparent; border-radius: 8px; }
.docket-case:hover { background: rgb(var(--slate-800) / .45); }
.docket-case.is-active { background: rgb(var(--emerald-500) / .08); border-color: rgb(var(--emerald-500) / .4); }
.docket-case-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; font-weight: 650; line-height: 1.5; color: rgb(var(--slate-100)); }
.docket-case-ref, .docket-case-id { display: block; overflow-wrap: anywhere; color: rgb(var(--slate-400)); font-size: 10px; line-height: 1.6; margin-top: 4px; }
.docket-case-id { font-family: var(--font-mono); margin-top: 2px; }
.docket-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.docket-stage, .docket-draft { font-size: 10px; padding: 2px 5px; border-radius: 4px; }
.docket-stage { background: rgb(var(--slate-800)); color: rgb(var(--indigo-300)); }
.docket-draft { border: 1px solid rgb(var(--slate-700)); color: rgb(var(--slate-400)); }
.docket-empty { padding: 24px 12px; text-align: center; font-size: 12px; color: rgb(var(--slate-400)); line-height: 1.6; }
.docket-empty strong { color: rgb(var(--slate-200)); }
.docket-empty p { margin: 8px 0 12px; }
#mainContentArea, #activeCaseView { min-width: 0; }
#caseSidebar { max-width: calc(100vw - 40px); }
#caseSidebar > .docket-tools, #caseSidebar > .docket-filters { flex-shrink: 0; }
#caseListContainer { min-height: 0; }
.facts-toolbar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; background: rgb(var(--slate-950)); flex-shrink: 0; }
.facts-toolbar strong { font-size: 13px; color: rgb(var(--slate-100)); }
.facts-toolbar > div > span { display: block; font-size: 11px; color: rgb(var(--slate-400)); margin-top: 3px; }
#saveCaseFactsButton { flex-shrink: 0; padding: 9px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; background: rgb(var(--emerald-600)); color: white; }
#saveCaseFactsButton:hover { background: rgb(var(--emerald-700)); }
#saveCaseFactsButton > span { margin-left: 5px; }
:where(button, input, select, textarea, a):focus-visible { outline: 2px solid rgb(var(--emerald-500)); outline-offset: 3px; }
#tab-facts > * { flex-shrink: 0; }
#caseSubDetails, #caseAppellantTitle { overflow-wrap: anywhere; }
#eofficeWorkflowCard { border-color: rgb(var(--indigo-500) / .25); }
#eofficeStageInference { line-height: 1.6; }
.workflow-stage { display: inline-flex; padding: 4px 8px; margin-right: 8px; border-radius: 5px; font-size: 12px; font-weight: 600; border: 1px solid rgb(var(--indigo-500) / .3); color: rgb(var(--indigo-300)); background: rgb(var(--indigo-950)); }
.workflow-stage[data-tone="attention"] { color: rgb(var(--amber-300)); background: rgb(var(--amber-950)); border-color: rgb(var(--amber-500) / .3); }
.workflow-stage[data-tone="complete"] { color: rgb(var(--emerald-300)); background: rgb(var(--emerald-950)); border-color: rgb(var(--emerald-500) / .3); }
#eofficeDocChips { gap: 6px; }
#eofficeDocChips > button { max-width: 100%; flex-wrap: wrap; text-align: left; }
#eofficeDocChips > button > span:last-child { overflow-wrap: anywhere; min-width: 0; }
#tab-notesheet > div:first-child { flex-wrap: wrap; gap: 12px; }
#tab-chat input { min-width: 0; }
@media (min-width: 1024px) {
  .tab-scroller { flex-wrap: wrap; }
  .tab-btn { padding: 8px 10px; }
}
@media (max-width: 639px) {
  .facts-toolbar { position: static; align-items: flex-start; }
  .facts-toolbar > div > span { max-width: 180px; }
  #saveCaseFactsButton { font-size: 11px; padding: 10px; }
  #saveCaseFactsButton > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Evidence review stays compact; only twelve page cards are mounted at a time. */
.evidence-warning { font-size: 11px; line-height: 1.6; color: rgb(var(--slate-400)); overflow-wrap: anywhere; }
.record-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 12px 0; }
.record-tools label { flex: 1 1 180px; min-width: 0; font-size: 11px; color: rgb(var(--slate-400)); }
.record-tools input, .record-tools select { display: block; width: 100%; margin-top: 5px; }
.record-source-link, .record-page a { color: rgb(var(--emerald-400)); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.record-page-results { overflow-y: auto; min-height: 160px; flex: 1; margin-top: 12px; }
.record-page { padding: 14px; margin-bottom: 10px; border: 1px solid rgb(var(--slate-700)); border-radius: 8px; background: rgb(var(--slate-950)); }
.record-page header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; }
.record-types { margin: 6px 0; font-size: 10px; color: rgb(var(--amber-300)); }
.record-excerpt, .record-page pre { font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: rgb(var(--slate-300)); }
.record-excerpt { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.record-page summary, .record-fulltext summary { cursor: pointer; font-size: 11px; color: rgb(var(--slate-400)); padding: 8px 0; }
.record-page mark { background: rgb(var(--amber-950)); color: rgb(var(--amber-300)); }
.record-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; padding: 10px 0; }
.record-pagination button { border: 1px solid rgb(var(--slate-700)); border-radius: 5px; padding: 7px 10px; }
.record-pagination button:disabled { opacity: .4; cursor: default; }
.record-fulltext { flex-shrink: 0; }
.record-fulltext textarea { width: 100%; height: 300px; }
#rawTextDocInfo { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 1023px) { .record-page-results { max-height: 65vh; } }

/* === THEME VARS (generated by scripts/build_theme.py - regenerate, do not hand-edit) === */
:root
{
  --slate-50: 241 245 242;
  --slate-100: 228 235 230;
  --slate-200: 207 216 210;
  --slate-300: 183 195 188;
  --slate-400: 154 168 160;
  --slate-500: 109 122 115;
  --slate-600: 77 90 83;
  --slate-700: 52 65 58;
  --slate-800: 39 50 44;
  --slate-900: 22 30 25;
  --slate-950: 15 21 18;
  --emerald-50: 232 243 236;
  --emerald-100: 205 230 214;
  --emerald-200: 166 214 185;
  --emerald-300: 141 212 174;
  --emerald-400: 109 200 155;
  --emerald-500: 63 166 115;
  --emerald-600: 30 122 78;
  --emerald-700: 23 97 63;
  --emerald-800: 18 77 51;
  --emerald-900: 14 59 40;
  --emerald-950: 8 37 26;
  --blue-50: 238 243 249;
  --blue-100: 216 228 241;
  --blue-200: 181 204 230;
  --blue-300: 157 187 224;
  --blue-400: 127 168 214;
  --blue-500: 79 128 181;
  --blue-600: 47 95 143;
  --blue-700: 38 77 117;
  --blue-800: 30 61 92;
  --blue-900: 23 47 71;
  --blue-950: 14 29 45;
  --indigo-50: 245 239 248;
  --indigo-100: 233 220 240;
  --indigo-200: 213 188 227;
  --indigo-300: 203 166 222;
  --indigo-400: 190 149 214;
  --indigo-500: 154 108 181;
  --indigo-600: 128 85 154;
  --indigo-700: 104 69 126;
  --indigo-800: 82 55 100;
  --indigo-900: 62 42 76;
  --indigo-950: 38 25 47;
  --rose-50: 251 237 234;
  --rose-100: 246 217 212;
  --rose-200: 239 182 172;
  --rose-300: 242 156 143;
  --rose-400: 238 127 111;
  --rose-500: 212 85 63;
  --rose-600: 174 51 38;
  --rose-700: 142 42 31;
  --rose-800: 111 33 25;
  --rose-900: 82 25 18;
  --rose-950: 51 16 12;
  --amber-50: 251 243 230;
  --amber-100: 245 227 196;
  --amber-200: 237 203 143;
  --amber-300: 235 186 110;
  --amber-400: 227 165 75;
  --amber-500: 201 132 36;
  --amber-600: 162 96 12;
  --amber-700: 130 77 10;
  --amber-800: 101 60 8;
  --amber-900: 74 44 6;
  --amber-950: 46 27 4;
}
:root[data-theme="light"]
{
  --slate-50: 21 32 26;
  --slate-100: 29 40 34;
  --slate-200: 42 53 47;
  --slate-300: 63 75 68;
  --slate-400: 92 105 98;
  --slate-500: 140 152 145;
  --slate-600: 163 174 167;
  --slate-700: 201 209 203;
  --slate-800: 220 226 221;
  --slate-900: 255 255 255;
  --slate-950: 243 245 242;
  --emerald-50: 232 243 236;
  --emerald-100: 205 230 214;
  --emerald-200: 166 214 185;
  --emerald-300: 23 97 63;
  --emerald-400: 30 122 78;
  --emerald-500: 63 166 115;
  --emerald-600: 30 122 78;
  --emerald-700: 23 97 63;
  --emerald-800: 141 212 174;
  --emerald-900: 166 214 185;
  --emerald-950: 205 230 214;
  --blue-50: 238 243 249;
  --blue-100: 216 228 241;
  --blue-200: 181 204 230;
  --blue-300: 38 77 117;
  --blue-400: 47 95 143;
  --blue-500: 79 128 181;
  --blue-600: 47 95 143;
  --blue-700: 38 77 117;
  --blue-800: 157 187 224;
  --blue-900: 181 204 230;
  --blue-950: 216 228 241;
  --indigo-50: 245 239 248;
  --indigo-100: 233 220 240;
  --indigo-200: 213 188 227;
  --indigo-300: 104 69 126;
  --indigo-400: 128 85 154;
  --indigo-500: 154 108 181;
  --indigo-600: 128 85 154;
  --indigo-700: 104 69 126;
  --indigo-800: 203 166 222;
  --indigo-900: 213 188 227;
  --indigo-950: 233 220 240;
  --rose-50: 251 237 234;
  --rose-100: 246 217 212;
  --rose-200: 239 182 172;
  --rose-300: 142 42 31;
  --rose-400: 174 51 38;
  --rose-500: 212 85 63;
  --rose-600: 174 51 38;
  --rose-700: 142 42 31;
  --rose-800: 242 156 143;
  --rose-900: 239 182 172;
  --rose-950: 246 217 212;
  --amber-50: 251 243 230;
  --amber-100: 245 227 196;
  --amber-200: 237 203 143;
  --amber-300: 130 77 10;
  --amber-400: 162 96 12;
  --amber-500: 201 132 36;
  --amber-600: 162 96 12;
  --amber-700: 130 77 10;
  --amber-800: 235 186 110;
  --amber-900: 237 203 143;
  --amber-950: 245 227 196;
}
/* === END THEME VARS === */

/* --- Hearing verification banner -----------------------------------------
   Styled here rather than with Tailwind utilities: the Tailwind build is pruned
   ahead of time and never rebuilt, so a colour class that appears only inside a
   JS string renders as nothing. These tones also have to hold in both themes. */
/* --- AI Case Chat bubbles -------------------------------------------------
   Same reasoning as the hearing banner above: tones live here, not in Tailwind
   utilities. The officer's own message used text-emerald-100 on bg-emerald-900/40,
   and the light theme flips the 800-950 rungs to light while 50-200 stay light,
   so the text ended up the same value as its own background. */
.chat-bubble--user {
  max-width: 36rem;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  border: 1px solid color-mix(in srgb, rgb(var(--emerald-500)) 45%, transparent);
  background-color: color-mix(in srgb, rgb(var(--emerald-500)) 14%, transparent);
  color: rgb(var(--emerald-100));
}

:root[data-theme="light"] .chat-bubble--user { color: #17613F; }

/* --- Inline field validation ----------------------------------------------
   Same reasoning as the hearing banner above: these tones are named only inside
   JS strings, so the pruned Tailwind build would drop them as utilities. */
.hearing-inline-error {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1rem;
  color: rgb(var(--rose-300));
}

.hearing-inline-hint {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1rem;
  color: rgb(var(--slate-400));
}

.form-input--invalid {
  border-color: color-mix(in srgb, rgb(var(--rose-500)) 65%, transparent);
  background-color: color-mix(in srgb, rgb(var(--rose-500)) 8%, transparent);
}

:root[data-theme="light"] .hearing-inline-error { color: #AE3326; }
:root[data-theme="light"] .hearing-inline-hint { color: rgb(var(--slate-600)); }

/* --- Desk overview and docket rows (Pendency Board form, 2026-09-24) -------------------
   Colours come from the generated theme ramps only, so both themes follow. Bar and dot
   fills use the 500-700 rungs, which the light remap leaves in place. */
:root { --ov-cus: 94 192 204; }
:root[data-theme="light"] { --ov-cus: 43 135 149; }

.dk-reg { font: 600 10px/1 var(--font-mono); padding: 3px 5px; border-radius: 4px; color: #fff; min-width: 30px; text-align: center; flex: none; }
.dk-reg--GST { background: rgb(var(--blue-600)); }
.dk-reg--ST { background: rgb(var(--indigo-600)); }
.dk-reg--CEX { background: rgb(var(--amber-600)); }
.dk-reg--CUS { background: rgb(var(--ov-cus)); }
.dk-reg--none { background: rgb(var(--slate-600)); }
.dk-kind--none { background: rgb(var(--slate-600)); }
.dk-kind--verify { background: rgb(var(--amber-500)); }
.dk-kind--listed { background: rgb(var(--emerald-500) / .5); }
.dk-kind--heard { background: rgb(var(--emerald-500)); }
.dk-kind--disposed { background: rgb(var(--emerald-700)); }

.docket-heading-side { display: inline-flex; align-items: center; gap: 10px; }
.dk-home { font-size: 11px; font-weight: 600; color: rgb(var(--emerald-400)); border: 1px solid rgb(var(--emerald-500) / .35); border-radius: 999px; padding: 2px 10px; }
.dk-home:hover { background: rgb(var(--emerald-500) / .1); }

.docket-case { display: grid; gap: 5px; padding: 11px 12px; }
.dk-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.docket-case .docket-case-ref { margin: 0; font: 500 11px/1.2 var(--font-mono); color: rgb(var(--slate-300)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-amt { margin-left: auto; font-size: 11px; color: rgb(var(--slate-400)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.docket-case .docket-case-name { font-size: 12.5px; font-weight: 600; }
.dk-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.dk-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 10.5px; line-height: 1.3; color: rgb(var(--slate-200)); background: rgb(var(--slate-800) / .7); border-radius: 999px; padding: 2px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dk-dot.is-unverified { box-shadow: 0 0 0 2px rgb(var(--amber-500) / .45); }
.dk-pill-t { overflow: hidden; text-overflow: ellipsis; }
.dk-pill em { font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--amber-400)); flex: none; }
.dk-sub { font-size: 10.5px; font-weight: 600; color: rgb(var(--emerald-400)); white-space: nowrap; }
.dk-age { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.dk-track { height: 4px; border-radius: 2px; background: rgb(var(--slate-800)); overflow: hidden; position: relative; }
.dk-track i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; }
.dk-fill--ok { background: rgb(var(--emerald-500)); }
.dk-fill--warn { background: rgb(var(--amber-500)); }
.dk-fill--crit { background: rgb(var(--rose-500)); }
.dk-fill--done { background: rgb(var(--slate-600)); }
.dk-age-v { font-size: 10.5px; color: rgb(var(--slate-400)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-age-v--warn { color: rgb(var(--amber-400)); font-weight: 600; }
.dk-age-v--crit { color: rgb(var(--rose-400)); font-weight: 600; }
.docket-case .docket-badges { margin-top: 1px; }
.docket-case .docket-draft { font-size: 10px; color: rgb(var(--slate-400)); background: none; border: 1px solid rgb(var(--slate-700)); padding: 1px 6px; }

.ov-wrap { max-width: 1180px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 36px) 56px; display: grid; gap: 30px; text-align: left; }
#ovBody { display: grid; gap: 34px; min-width: 0; }
.ov-head { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; }
.ov-eyebrow { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: rgb(var(--slate-400)); font-weight: 500; }
.ov-title { font: 700 clamp(26px, 3.4vw, 34px)/1.05 var(--font-display); letter-spacing: -.02em; color: rgb(var(--slate-50)); margin-top: 6px; }
.ov-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ov-stamp { border: 1.5px solid rgb(var(--emerald-400)); color: rgb(var(--emerald-400)); border-radius: 6px; padding: 4px 10px; font: 500 11.5px/1.3 var(--font-mono); transform: rotate(-1.2deg); }
.ov-btn { border: 1px solid rgb(var(--slate-700)); background: rgb(var(--slate-900)); color: rgb(var(--slate-100)); border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 500; }
.ov-btn:hover { border-color: rgb(var(--emerald-500)); color: rgb(var(--emerald-400)); }
.ov-empty { color: rgb(var(--slate-400)); font-size: 12.5px; padding: 10px 0; }
.ov-welcome { max-width: 60ch; }
.ov-welcome h2 { font: 700 22px/1.2 var(--font-display); color: rgb(var(--slate-50)); margin-bottom: 8px; }
.ov-welcome p { color: rgb(var(--slate-400)); font-size: 13.5px; line-height: 1.6; }

.ov-hero { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 26px 44px; align-items: start; }
.ov-big { font: 700 clamp(64px, 9vw, 100px)/.9 var(--font-display); letter-spacing: -.04em; color: rgb(var(--slate-50)); font-variant-numeric: tabular-nums; }
.ov-big-sub { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: rgb(var(--slate-400)); max-width: 30ch; }
.ov-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: rgb(var(--slate-400)); }
.ov-facts b { color: rgb(var(--slate-100)); font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-bars { display: grid; gap: 20px; }
.ov-bar-h { margin-bottom: 8px; }
.ov-stack { display: flex; gap: 2px; height: 28px; border-radius: 7px; overflow: hidden; background: rgb(var(--slate-800)); }
.ov-seg { min-width: 4px; border: 0; padding: 0; transition: opacity .15s, filter .15s; }
.ov-seg:hover { filter: brightness(1.1); }
.ov-seg--empty { background: rgb(var(--slate-800)); }
.ov-stack.is-dim .ov-seg:not(.is-on) { opacity: .28; }
.ov-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px; }
.ov-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: rgb(var(--slate-400)); padding: 2px 0; }
.ov-leg:hover, .ov-leg.is-on { color: rgb(var(--slate-50)); }
.ov-leg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ov-leg b { color: rgb(var(--slate-100)); font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-age--a0 { background: rgb(var(--emerald-500) / .5); }
.ov-age--a1 { background: rgb(var(--emerald-600)); }
.ov-age--a2 { background: rgb(var(--amber-500)); }
.ov-age--a3 { background: rgb(var(--rose-500)); }

.ov-queues { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ov-q { display: grid; gap: 3px; align-content: start; text-align: left; padding: 14px 14px 13px; border-radius: 12px; border: 1px solid rgb(var(--slate-800)); background: rgb(var(--slate-900)); transition: border-color .15s, transform .15s; }
.ov-q:hover { border-color: rgb(var(--slate-600)); transform: translateY(-1px); }
.ov-q.is-on { border-color: rgb(var(--slate-100)); box-shadow: inset 0 0 0 1px rgb(var(--slate-100)); }
.ov-q-n { font: 700 30px/1 var(--font-display); letter-spacing: -.02em; color: rgb(var(--slate-50)); font-variant-numeric: tabular-nums; }
.ov-q--good .ov-q-n { color: rgb(var(--emerald-400)); }
.ov-q--warn .ov-q-n { color: rgb(var(--amber-400)); }
.ov-q--crit .ov-q-n { color: rgb(var(--rose-400)); }
.ov-q-t { font-size: 13px; font-weight: 600; color: rgb(var(--slate-100)); margin-top: 6px; }
.ov-q-d { font-size: 11.5px; line-height: 1.4; color: rgb(var(--slate-400)); }

.ov-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.ov-agenda { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ov-h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font: 600 16px/1.2 var(--font-display); color: rgb(var(--slate-50)); margin-bottom: 12px; }
.ov-h2 span { font: 400 12px var(--font-text); color: rgb(var(--slate-400)); }
.ov-clear { margin-left: auto; font: 500 12px var(--font-text); color: rgb(var(--emerald-400)); text-decoration: underline; text-underline-offset: 3px; }
.ov-day { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; max-width: 100%; }
.ov-cal { text-align: center; border: 1px solid rgb(var(--slate-800)); border-radius: 8px; background: rgb(var(--slate-900)); padding: 4px 0 5px; line-height: 1.1; align-self: start; }
.ov-cal b { display: block; font: 700 21px/1 var(--font-display); color: rgb(var(--slate-50)); }
.ov-cal span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--slate-400)); }
.ov-cal.is-today { border-color: rgb(var(--emerald-500)); background: rgb(var(--emerald-500) / .1); }
.ov-cal.is-today span { color: rgb(var(--emerald-400)); }
.ov-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ov-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid rgb(var(--slate-800)); background: rgb(var(--slate-900)); border-radius: 999px; padding: 3px 10px 3px 8px; font-size: 12px; color: rgb(var(--slate-100)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-chip:hover { border-color: rgb(var(--slate-600)); }
.ov-chip i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ov-chip small { color: rgb(var(--slate-400)); font-size: 11px; }
.ov-list { border-top: 1px solid rgb(var(--slate-800)); }
.ov-row { width: 100%; display: grid; grid-template-columns: 124px minmax(0, 1.7fr) minmax(0, 1.2fr) 150px 84px; gap: 12px; align-items: center; text-align: left; padding: 10px 8px; border-bottom: 1px solid rgb(var(--slate-800)); border-left: 3px solid transparent; }
.ov-row:hover { background: rgb(var(--slate-900)); border-left-color: rgb(var(--emerald-500)); }
.ov-row-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ov-mono { font: 500 11.5px var(--font-mono); color: rgb(var(--slate-300)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-row-name { min-width: 0; }
.ov-row-name b { display: block; font-size: 12.5px; font-weight: 600; color: rgb(var(--slate-50)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-row-name small, .ov-row-stage small { display: block; font-size: 11px; color: rgb(var(--slate-400)); margin-top: 2px; }
.ov-row-stage { min-width: 0; }
.ov-row-stage small { color: rgb(var(--emerald-400)); font-weight: 600; }
.ov-row-amt { text-align: right; font-size: 12px; color: rgb(var(--slate-300)); font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .ov-queues { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ov-hero { grid-template-columns: minmax(0, 1fr); }
  .ov-queues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .ov-row-name, .ov-row-stage, .ov-row .dk-age { grid-column: 1 / -1; }
  .ov-row-amt { grid-row: 1; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .ov-q, .ov-seg { transition: none; } }

/* --- One scroll for the case (2026-09-24) ------------------------------------------------
   The case was a fixed stack (app header, case header, two-row tabs, panel head) with a
   scrolling strip in the middle: 37-49% of a 1280-1440 screen on the OIA tab, and boxes that
   scrolled inside the page on phones. Now #activeCaseView is the only scroller: the case
   header scrolls away, the tab bar stays pinned, and panels, letter previews, the OIA preview
   and record pages grow to their length. Chat keeps a bounded height (its list must scroll)
   and the OIA editor stays pinned beside its preview on wide screens.
   The .doc-preview-frame min-height floor above is kept; it is harmless here and pinned by a test. */
#activeCaseView { overflow-y: auto !important; overscroll-behavior: contain; }
/* `.tab-scroll-wrap { position: relative }` above (for its edge fade) was cancelling the markup's `sticky`. */
#activeCaseView > .tab-scroll-wrap { position: sticky; top: 0; background: rgb(var(--slate-900)); }
#caseWorkspaceBody { flex: none !important; min-height: auto !important; overflow: visible !important; }
#caseWorkspaceBody > .tab-panel:not(#tab-chat) { flex: none !important; min-height: auto !important; overflow: visible !important; }
#caseWorkspaceBody .doc-preview-frame { flex: none; overflow: visible; }
.facts-toolbar { top: var(--case-tabbar-h, 0px); }
#tab-oia .grid { flex: none; align-items: start; }
#tab-oia .grid .overflow-y-auto { overflow: visible; }
#oiaDraftEditor { flex: none; height: max(420px, calc(100dvh - 56px - var(--case-tabbar-h, 48px) - 90px)); }
@media (min-width: 1024px) {
  #tab-oia .grid > div:first-child { position: sticky; top: calc(var(--case-tabbar-h, 48px) + 12px); }
}
#tab-chat { flex: none !important; height: max(460px, calc(100dvh - 56px - var(--case-tabbar-h, 48px) - 44px)); }
#tab-rawtext > div { flex: none; }
.record-page-results { overflow: visible; flex: none; }
@media (max-width: 1023px) { .record-page-results { max-height: none; } }
.record-fulltext textarea { height: 70dvh; }

/* --- OneDrive e-Office picker (2026-09-24): regime tabs, party names from the master register. */
.od-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.od-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgb(var(--slate-300)); border: 1px solid rgb(var(--slate-700)); border-radius: 999px; padding: 3px 10px 3px 4px; }
.od-tab:first-child { padding-left: 10px; }
.od-tab b { color: rgb(var(--slate-100)); font-weight: 600; font-variant-numeric: tabular-nums; }
.od-tab .dk-reg { font-size: 9px; min-width: 0; padding: 3px 4px; }
.od-tab:hover { border-color: rgb(var(--slate-500)); }
.od-tab.is-on { border-color: rgb(var(--emerald-500)); background: rgb(var(--emerald-500) / .1); color: rgb(var(--slate-50)); }
.od-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; color: rgb(var(--slate-400)); }
.od-status button { color: rgb(var(--emerald-400)); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.od-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 8px; border-radius: 8px; }
.od-row:hover { background: rgb(var(--slate-800) / .5); }
.od-main { min-width: 0; flex: 1; display: grid; gap: 3px; }
.od-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.od-appeal { font: 600 12px var(--font-mono); color: rgb(var(--slate-100)); white-space: nowrap; }
.od-flag { font-size: 10px; font-weight: 600; color: rgb(var(--emerald-400)); border: 1px solid rgb(var(--emerald-500) / .4); border-radius: 999px; padding: 1px 7px; }
.od-party { font-size: 12.5px; font-weight: 500; color: rgb(var(--slate-100)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-meta { font-size: 10.5px; color: rgb(var(--slate-400)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-more { display: flex; justify-content: center; padding: 12px; }
.od-more button { font-size: 12px; border: 1px solid rgb(var(--slate-700)); border-radius: 8px; padding: 6px 12px; color: rgb(var(--slate-200)); }
@media (max-width: 520px) { .od-row { flex-direction: column; align-items: stretch; } }