/* ═══════════════════════════════════════════════════════════════════════════
   BlackSuit Legal — notice desk.  Redesigned 24-09-2026.

   Nothing is loaded from outside this origin: the typeface is self-hosted, the
   chart is hand-drawn SVG, the letterhead and the marks are local PNGs.

   WHAT THIS REPLACED, and why it is a different design rather than a repaint.
   The previous pass fixed the mechanical faults — it declared a typeface, cut
   13 font sizes to 7 and 11 radii to 4, and lifted badge text to AA. All of
   that was necessary and all of it is kept. What it did not do was give the
   desk a point of view: it stayed a white-sidebar, indigo-accent, soft-shadow
   admin panel, which is the default every framework hands out. The firm is
   called BlackSuit and it serves recall-cum-demand notices under its own seal.
   So:

     · the chrome is ink, not white — a dark rail carrying the firm's crest,
       because the brand is a black suit and the rail is the only surface in
       the app that is allowed to be loud;
     · the canvas is warm paper (#f2f1ed), not cold blue-grey, because every
       artefact this desk produces is a printed document;
     · the accent is brass (#8a6a2f), not Tailwind indigo — a seal colour, used
       sparingly: the active rail marker, the focus ring, the tick that grows
       across a statistic on hover;
     · depth comes from hairlines, not from drop shadows. Shadow is spent only
       on things that genuinely float: the modal, the toast, the chart tip;
     · a primary action is ink-filled. Nothing else in the interface is.

   COLOUR CONTRAST is measured, not assumed — every pair below was run through
   the WCAG formula, and none is under 4.5:1. --muted is 5.61:1 on white and
   5.33:1 on the table header fill; rail text is 7.50:1 on the rail and the
   rail's group labels 4.70:1; badges range 5.33:1 to 10.08:1. Badges are set
   at 11px, and 11px at 3.3:1 — which is where the old ones sat — is
   decoration, not information.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── IBM Plex, self-hosted ──────────────────────────────────────────────
   latin-ext is not optional here. U+20B9 ₹ lives in U+20A0-20C0, which the
   `latin` subset stops short of — it carries the euro and ends. Without the
   ext faces every rupee figure in the app falls back to a system font, so the
   one glyph this desk is entirely about would be the one drawn wrong. */
@font-face {
    font-family: Plex; src: url(/fonts/plex-latin.woff2) format('woff2');
    font-weight: 100 700; font-style: normal; font-display: swap;
    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: Plex; src: url(/fonts/plex-latin-ext.woff2) format('woff2');
    font-weight: 100 700; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+1EF2-1EFF,
      U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Mono ships as static cuts, not a variable file, so a weight with no face of
   its own is synthesised from the nearest one — 500 and 600 silently drew at
   400 until these were declared. */
@font-face { font-family: PlexMono; src: url(/fonts/mono-latin-400.woff2) format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: PlexMono; src: url(/fonts/mono-latin-ext-400.woff2) format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA,U+20A0-20C0,U+2113; }
@font-face { font-family: PlexMono; src: url(/fonts/mono-latin-500.woff2) format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: PlexMono; src: url(/fonts/mono-latin-ext-500.woff2) format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA,U+20A0-20C0,U+2113; }
@font-face { font-family: PlexMono; src: url(/fonts/mono-latin-600.woff2) format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: PlexMono; src: url(/fonts/mono-latin-ext-600.woff2) format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA,U+20A0-20C0,U+2113; }

:root {
    --font: Plex, 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --mono: PlexMono, 'IBM Plex Mono', Consolas, ui-monospace, Menlo, monospace;
    /* tabular · lining · slashed zero — so a column of rupees aligns and a 0
       is never read as an O in a loan number. */
    --figs: 'tnum' 1, 'lnum' 1, 'zero' 1;

    /* ─── Type. Seven steps, each a clear jump from the last. ─── */
    --t-hero: 28px;   /* the one figure on a statistic              */
    --t-h1:   20px;   /* page title                                 */
    --t-h2:   15px;   /* panel heading                              */
    --t-body: 14px;   /* language                                   */
    --t-cell: 13px;   /* table cell                                 */
    --t-meta: 12px;   /* hint under a value, legend                 */
    --t-cap:  11px;   /* eyebrow, column head, badge — always caps  */
    /* An eighth step, and only for a mono micro-label: the mono face sets
       noticeably wider than the sans at the same size, so an identifier chip
       or a merge-field key needs one step down to carry the same weight as an
       11px sans label beside it. */
    --t-micro: 10px;

    --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700;
    --track-cap: .09em;        /* uppercase at 11px needs the air */

    /* ─── Paper ───────────────────────────────────────────────────────────
       Warm neutral, not blue-grey. Everything this desk makes is printed. */
    --paper: #f2f1ed;
    --surface: #ffffff;
    --surface-2: #faf9f6;      /* table head, inset wells        */
    --surface-3: #f6f5f1;      /* hover on a white row           */
    --line: #e4e1d9;
    --line-2: #eeebe4;
    --line-strong: #d6d2c7;

    --ink: #16181c;
    --ink-2: #3a3f46;
    --muted: #63686f;          /* 5.61:1 on white, 5.33:1 on --surface-2 */

    /* ─── Ink chrome (the rail, the ink button, the tooltip) ─── */
    --rail: #15171b;
    --rail-2: #1e2127;         /* a raised row on the rail       */
    --rail-line: #282c33;
    --rail-text: #a2a8b2;      /* 7.50:1 on --rail               */
    --rail-text-hi: #f4f3f0;
    --rail-dim: #7d838d;       /* 4.70:1 — group labels. #6d737d read 3.72:1 */
    --rail-line-hi: #3a3f48;   /* a rail control under the pointer */
    --ink-hi: #282c33;         /* the ink button under the pointer */

    /* ─── Brass. The seal colour. Used sparingly, never as a fill. ─── */
    --accent: #8a6a2f;         /* 5.02:1 on white — links, summaries     */
    --accent-2: #b08d4a;       /* 5.77:1 on the rail — markers, ticks    */
    --accent-hi: #c39d53;      /* brass under the pointer        */
    --accent-soft: #f7f0e0;
    --accent-line: #e3d3ae;

    /* Two tones per status: a quiet fill and a text tone that reads AA on it.
       A badge is 11px; 11px at 3.3:1 is decoration, not information. */
    --green: #1f6b45;   --green-soft: #eef5f0;   --green-ink: #14512f;   --green-line: #cbdfd2;
    --red:   #a3312b;   --red-soft:   #fbeeec;   --red-ink:   #7d2420;   --red-line:   #eccfcb;   --red-soft-hi: #f7e6e3;
    --amber: #7d5810;   --amber-soft: #f9f0dc;   --amber-ink: #67480a;   --amber-line: #e6d3ad;
    --slate: #3f5166;   --slate-soft: #eef1f5;   --slate-ink: #2c3b4d;   --slate-line: #d3dce6;

    /* ─── Radius: four steps, not eleven ─── */
    --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 18px; --r-pill: 999px;
    --radius: var(--r-lg);

    /* ─── Depth. Spent only on what genuinely floats. ─── */
    --shadow-pop: 0 18px 44px rgba(20,18,12,.16), 0 2px 6px rgba(20,18,12,.08);
    --shadow-rail: 1px 0 0 rgba(0,0,0,.06);

    /* ─── Motion. A hover is instant; a layer has to be followed. ─── */
    --ease: 120ms cubic-bezier(.2,.6,.3,1);
    --ease-layer: 260ms cubic-bezier(.22,1,.36,1);

    /* Chart series. Fixed slot order (blue, orange, aqua, yellow) from the
       validated categorical palette — never cycled, never re-assigned when a
       series is filtered out, so Courier stays yellow in every chart. The
       palette is data, so the redesign does not touch its hues. */
    --s1: #2a78d6;   /* Email    */
    --s2: #eb6834;   /* SMS      */
    --s3: #1baf7a;   /* WhatsApp */
    --s4: #eda100;   /* Courier  */
    --grid: #eceae3;
    --axis: #cfcbc1;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    font-size: var(--t-body);
    background: var(--paper); color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
svg.ic { width: 17px; height: 17px; flex: none; }
img, iframe { max-width: 100%; }

/* An eyebrow is the record's own label — what this screen or panel IS. Mono,
   caps, tracked: the voice of a document header, and the one place the mono
   face is used for something that is not a figure or an identifier. */
.eyebrow { font-family: var(--mono); font-size: var(--t-cap); font-weight: var(--w-semi);
    letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--muted); margin: 0; }

/* ═══ Login ═══════════════════════════════════════════════════════════════
   A split: the firm on the left in ink, the form on the right on paper. */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.login-aside { background: var(--rail); color: var(--rail-text); padding: 48px 52px;
    display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
/* A single brass seam down the join — the only ornament on the page. */
.login-aside::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg, transparent, var(--accent-2) 22%, var(--accent-2) 78%, transparent); }
.login-aside .logo { display: flex; align-items: center; gap: 14px; }
.login-aside .crest { width: 46px; height: 46px; display: block; }
.login-aside .wordmark { height: 26px; width: auto; display: block; }
.login-aside .say { font-size: var(--t-hero); line-height: 1.35; letter-spacing: -.4px; color: var(--rail-text-hi);
    font-weight: var(--w-reg); max-width: 18em; margin: 40px 0; }
.login-aside .say b { font-weight: var(--w-semi); }
.login-aside .foot { font-size: var(--t-meta); line-height: 1.7; color: var(--rail-text); }
.login-aside .foot .eyebrow { color: var(--accent-2); margin-bottom: 6px; }
.login-form { display: grid; place-items: center; padding: 40px 24px; background: var(--paper); }
.login-card { width: 100%; max-width: 348px; }
.login-card .mini { display: none; }
.login-card h1 { font-size: var(--t-h1); margin: 0 0 4px; letter-spacing: -.3px; }
.login-card .sub { color: var(--muted); font-size: var(--t-cell); margin: 0 0 26px; }

/* ═══ Shell ═══════════════════════════════════════════════════════════════ */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.shell > * { min-width: 0; }
.col { display: flex; flex-direction: column; min-width: 0; }

/* ─── The rail. The only loud surface in the app. ─── */
.sidebar { background: var(--rail); color: var(--rail-text); padding: 22px 14px 18px;
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
    box-shadow: var(--shadow-rail); }
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 10px 26px; }
.brand .crest { width: 30px; height: 30px; flex: none; display: block; }
.wordmark { height: 22px; width: auto; max-width: 100%; display: block; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .grp { padding: 16px 10px 7px; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--rail-dim); font-weight: var(--w-semi); }
.nav .grp:first-child { padding-top: 0; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-md);
    color: var(--rail-text); font-weight: var(--w-med); font-size: var(--t-cell); position: relative;
    transition: background var(--ease), color var(--ease); }
.nav a svg { opacity: .78; transition: opacity var(--ease); }
.nav a:hover { background: var(--rail-2); color: var(--rail-text-hi); text-decoration: none; }
.nav a:hover svg { opacity: 1; }
.nav a.active { background: var(--rail-2); color: var(--rail-text-hi); font-weight: var(--w-semi); }
.nav a.active svg { opacity: 1; color: var(--accent-2); }
/* The brass marker reads before the label does, which is what a rail is for. */
.nav a::before { content: ''; position: absolute; left: -14px; top: 50%; width: 3px; height: 0;
    border-radius: 0 var(--r-pill) var(--r-pill) 0; background: var(--accent-2);
    transform: translateY(-50%); transition: height var(--ease-layer); }
.nav a.active::before { height: 20px; }
.sidebar .foot { margin-top: auto; border-top: 1px solid var(--rail-line); padding-top: 14px; }
.sidebar .who { display: flex; align-items: center; gap: 10px; padding: 0 4px 12px; }
.sidebar .who .disc { width: 30px; height: 30px; border-radius: var(--r-pill); flex: none;
    background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--accent-2);
    display: grid; place-items: center; font-family: var(--mono); font-size: var(--t-meta);
    font-weight: var(--w-semi); text-transform: uppercase; }
.sidebar .who .nm { font-size: var(--t-cell); font-weight: var(--w-semi); color: var(--rail-text-hi);
    line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .who .nm small { display: block; color: var(--muted); font-weight: var(--w-reg);
    font-size: var(--t-cap); letter-spacing: .02em; }
.sidebar .btn.rail { width: 100%; background: transparent; border-color: var(--rail-line);
    color: var(--rail-text); font-size: var(--t-cell); }
.sidebar .btn.rail:hover:not(:disabled) { background: var(--rail-2); border-color: var(--rail-line-hi); color: var(--rail-text-hi); }

/* ─── Topbar. Title, context and the page's own action, in one line. ─── */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(242,241,237,.86);
    backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line); }
.tb-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
    padding: 18px 34px 15px; max-width: 1280px; }
.tb-t { min-width: 0; }
.tb-t h1 { font-size: var(--t-h1); font-weight: var(--w-bold); letter-spacing: -.4px; margin: 5px 0 0;
    line-height: 1.2; }
.tb-sub { color: var(--muted); font-size: var(--t-cell); margin: 4px 0 0; line-height: 1.5; }
.tb-a { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.tb-a:empty { display: none; }
.main { padding: 24px 34px 40px; max-width: 1280px; width: 100%; flex: 1; }
.foot-note { color: var(--muted); font-size: var(--t-cap); text-align: center; padding: 20px 16px 26px;
    border-top: 1px solid var(--line); margin: 0 34px; font-family: var(--mono);
    letter-spacing: .04em; }

/* ═══ Panels ══════════════════════════════════════════════════════════════
   Depth is a hairline. Cards do not float, so nothing here casts a shadow. */
.card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card { padding: 20px 22px; }
.card h3, .panel-h h3 { margin: 0 0 14px; font-size: var(--t-h2); font-weight: var(--w-bold); letter-spacing: -.2px; }
.panel { overflow: hidden; }
.panel-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.panel-h h3 { margin: 0; }
.panel-h .hint { margin: 3px 0 0; }
.panel-h .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel-b { padding: 18px; }
/* A panel that asks for a decision wears the seal. */
.panel.sealed { border-top: 2px solid var(--accent-2); }
.grid { display: grid; gap: 16px; }
.detail-grid > *, .filters > *, .form-grid > * { min-width: 0; }

/* ─── The ribbon: four statistics in one ruled strip, not four floating
   cards. 1px grid gaps over the line colour draw the dividers, so they stay
   correct however the cells wrap. ─── */
.ribbon { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 1px;
    background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: 20px 20px 18px; position: relative;
    transition: background var(--ease); }
/* The tick: a short brass rule that runs the width of the cell on hover. */
.stat::before { content: ''; position: absolute; top: 0; left: 20px; width: 24px; height: 2px;
    background: var(--rail-c, var(--accent-2)); transition: width var(--ease-layer); }
.stat:nth-child(1) { --rail-c: var(--accent-2); }
.stat:nth-child(2) { --rail-c: var(--slate); }
.stat:nth-child(3) { --rail-c: var(--green); }
.stat:nth-child(4) { --rail-c: var(--amber); }
.stat:hover { background: var(--surface-3); }
.stat:hover::before { width: calc(100% - 40px); }
.stat .ic-tile { float: right; width: 30px; height: 30px; border-radius: var(--r-sm); display: grid;
    place-items: center; margin-left: 10px; color: var(--muted); background: var(--surface-2);
    border: 1px solid var(--line-2); transition: color var(--ease), border-color var(--ease); }
.stat .ic-tile svg { width: 16px; height: 16px; }
.stat:hover .ic-tile { color: var(--ink-2); border-color: var(--line-strong); }
.stat .l { font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase;
    letter-spacing: var(--track-cap); font-weight: var(--w-semi); color: var(--muted); }
/* Proportional, NOT tabular. Tabular figures pad every glyph to one width so a
   column aligns — including the comma, which on a lone hero figure opens a gap
   that reads as "12 , 542". Slashed zero and lining figures stay. */
.stat .v { font-family: var(--mono); font-feature-settings: 'lnum' 1, 'zero' 1;
    font-size: var(--t-hero); font-weight: var(--w-semi); letter-spacing: -1.1px;
    margin-top: 9px; line-height: 1.1; color: var(--ink); }
.stat .v.na { color: var(--muted); }
/* The unit is a word, so it is set in the sans face beside the figure rather
   than inside it — "cr" in tabular mono reads as part of the number. */
.stat .v u { font-family: var(--font); font-weight: var(--w-med); text-decoration: none;
    font-size: .46em; letter-spacing: 0; margin-left: .22em; color: var(--muted); }
.stat .n { color: var(--muted); font-size: var(--t-meta); margin-top: 6px; clear: both; line-height: 1.45; }

/* ═══ Forms ═══════════════════════════════════════════════════════════════ */
.field { margin-bottom: 15px; }
label.lb { display: block; font-size: var(--t-meta); font-weight: var(--w-semi); margin-bottom: 6px;
    color: var(--ink-2); letter-spacing: .01em; }
.input, .select, .ta { width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong);
    border-radius: var(--r-md); font-size: var(--t-body); background: var(--surface); color: var(--ink);
    outline: none; transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); }
.select { appearance: none; padding-right: 32px;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.ta { font-family: var(--mono); font-size: var(--t-meta); line-height: 1.6; min-height: 300px; }
.input:hover:not(:disabled), .select:hover:not(:disabled) { border-color: var(--muted); }
.input:focus, .select:focus, .ta:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138,106,47,.14); }
.input:disabled, .select:disabled, .ta:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.hint { font-size: var(--t-meta); color: var(--muted); margin: 6px 0 0; line-height: 1.55; }
input[type=checkbox] { accent-color: var(--accent); }

/* ─── Buttons. Exactly one fill in the interface, and it is ink. ─── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px;
    border: 1px solid transparent; border-radius: var(--r-md); font-weight: var(--w-semi);
    font-size: var(--t-cell); letter-spacing: .01em; white-space: nowrap;
    transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--ink-hi); }
.btn.ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink-2); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--muted); color: var(--ink); }
.btn.danger { background: var(--surface); border-color: var(--red-line); color: var(--red); }
.btn.danger:hover:not(:disabled) { background: var(--red-soft); border-color: var(--red); }
.btn.sm { padding: 6px 11px; font-size: var(--t-meta); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; align-items: end; }
.filters .acts { display: flex; gap: 8px; align-items: end; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }
/* The filter strip is a well, not a card: recessed, flush with the table below. */
.wellbar { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 15px 18px; margin-bottom: 16px; }

/* ═══ Badges. A dot and a word — not a coloured lozenge. ═══════════════════ */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill);
    font-size: var(--t-cap); font-weight: var(--w-semi); letter-spacing: .02em; white-space: nowrap;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); line-height: 1.5; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.badge.ok   { color: var(--green-ink); border-color: var(--green-line); background: var(--green-soft); }
.badge.no   { color: var(--red-ink);   border-color: var(--red-line);   background: var(--red-soft); }
.badge.warn { color: var(--amber-ink); border-color: var(--amber-line); background: var(--amber-soft); }
.badge.sky  { color: var(--slate-ink); border-color: var(--slate-line); background: var(--slate-soft); }
.badge.gray { color: var(--muted); border-color: var(--line); background: var(--surface-2); }
/* A lender code is an identifier, not a status: mono, boxed, no dot. */
.badge.ent { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-2); background: var(--surface-2); border-color: var(--line-strong); padding: 3px 7px;
    border-radius: var(--r-sm); }
.badge.ent::before { display: none; }

/* ═══ Tables ══════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); }
/* Inside a panel the table is already framed by the panel. */
.panel .table-wrap { border: none; border-radius: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-cell); }
th { text-align: left; padding: 10px 14px; color: var(--muted); font-weight: var(--w-semi);
    font-size: var(--t-cap); text-transform: uppercase; letter-spacing: var(--track-cap);
    border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; vertical-align: top;
    line-height: 1.45; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--ease); }
tbody tr:hover td { background: var(--surface-3); }
/* The hovered row is marked at its edge, so the eye can follow it across a
   wide table without a fill strong enough to fight the figures. */
tbody td:first-child { box-shadow: inset 2px 0 0 transparent; transition: box-shadow var(--ease); }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent-2); }
tr.clickable { cursor: pointer; }
tr.flagged td { background: var(--red-soft); }
tr.flagged:hover td { background: var(--red-soft-hi); }
/* A row action is quiet until the row is under the pointer. */
td .btn.ghost { color: var(--muted); border-color: var(--line); }
tr:hover td .btn.ghost { color: var(--ink); border-color: var(--line-strong); }
/* Face separates kind: mono for anything countable or quotable — an amount,
   a loan number, a reference, a date — sans for language. Tabular figures so a
   column of rupees aligns on the decimal, slashed zero so 0 is never read as O
   in a loan account number. */
.mono, td.num, .money { font-family: var(--mono); font-feature-settings: var(--figs); }
/* th.num is a LABEL, not a figure — it stays in the sans face. */
th.num { font-family: var(--font); }
td.num, th.num { font-variant-numeric: tabular-nums; }
.num { text-align: right; }
/* A demand is the point of this app: set one weight up from the row around it,
   so the eye finds it without a colour being spent. */
td.num b, .money { font-weight: var(--w-semi); color: var(--ink); }
.stick th:last-child, .stick td:last-child { position: sticky; right: 0;
    box-shadow: -10px 0 12px -10px rgba(20,18,12,.18); }
.stick th:last-child { background: var(--surface-2); }
.stick td:last-child { background: var(--surface); }
.stick tr.flagged td:last-child { background: var(--red-soft); }
.stick tbody tr:hover td:last-child { background: var(--surface-3); }
.trunc { display: inline-block; max-width: 210px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; vertical-align: bottom; }
.trunc.xs { max-width: 150px; }
.trunc.wide { max-width: 320px; }
.missing { color: var(--muted); font-style: italic; }

/* ─── How far past due ───────────────────────────────────────────────────
   The unit is a letter, not part of the figure, so it drops a step and leaves
   the mono face — the same rule the hero figures' "cr" follows. A case inside
   the recall window carries a brass pip: this is the cycle's work. Everything
   outside it stays in the book but is drawn quiet, because drafting on it will
   be refused. */
td.num small { font-family: var(--font); font-size: .78em; font-weight: var(--w-reg);
    color: var(--muted); margin-left: .12em; letter-spacing: 0; }
.in-win { color: var(--ink); font-weight: var(--w-semi); }
.in-win::after { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent-2); margin-left: 6px; vertical-align: middle; }
.off-win { color: var(--muted); font-weight: var(--w-reg); }

/* ─── Key/value ─── */
.kv { display: grid; grid-template-columns: 224px 1fr; gap: 0; }
.kv > div { padding: 9px 4px; border-bottom: 1px solid var(--line-2); font-size: var(--t-cell);
    word-break: break-word; line-height: 1.5; }
.kv > div:nth-child(odd) { color: var(--muted); font-weight: var(--w-med); }
.kv > div:nth-child(even) { color: var(--ink); }
/* The merge-field key is what an admin checks a template against, so it is
   held to the same contrast as any other label — #8d9099 read 3.19:1. */
.kv .fname { display: block; font-size: var(--t-micro); font-weight: var(--w-med); color: var(--muted);
    font-family: var(--mono); letter-spacing: .03em; margin-top: 1px; }

/* ═══ Chart ═══════════════════════════════════════════════════════════════ */
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.chart-wrap { position: relative; margin-top: 12px; }
.chart-wrap svg { display: block; width: 100%; }
.chart-wrap .gl { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-wrap .ax { stroke: var(--axis); stroke-width: 1; }
.chart-wrap .tk { fill: var(--muted); font-size: var(--t-cap); font-family: var(--mono); letter-spacing: .02em; }
.chart-wrap .zero { fill: var(--muted); font-size: var(--t-cell); font-weight: var(--w-med); font-family: var(--font); }
.chart-wrap .band:hover { fill: rgba(138,106,47,.06); }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--rail); color: #fff;
    padding: 9px 12px; border-radius: var(--r-md); font-size: var(--t-meta); line-height: 1.6; white-space: nowrap;
    box-shadow: var(--shadow-pop); opacity: 0; transition: opacity var(--ease);
    transform: translate(-50%, -100%); border: 1px solid var(--rail-line); }
.chart-tip.show { opacity: 1; }
.chart-tip .r { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.chart-tip .r b { font-family: var(--mono); font-feature-settings: var(--figs); }
/* 2px, not a radius token: a 9px swatch at --r-sm would round to a circle and
   stop matching the square-capped column it names. */
.chart-tip .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.legend .li { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-meta);
    font-weight: var(--w-med); color: var(--ink-2); }
.legend .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.legend .li b { font-family: var(--mono); font-feature-settings: var(--figs); font-weight: var(--w-semi); }
details.tv { margin-top: 14px; }
details.tv > summary { cursor: pointer; font-size: var(--t-meta); font-weight: var(--w-semi); color: var(--accent);
    display: inline-flex; align-items: center; gap: 6px; }
details.tv > summary:hover { text-decoration: underline; }
details.tv .table-wrap { margin-top: 12px; }

/* ─── Share bar: a lender's weight in the book, drawn.
   Scaled to the LARGEST lender, not to the total — against the total every bar
   is a stub and the comparison the column exists to make is invisible. ─── */
.share { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.share u { font-family: var(--font); text-decoration: none; font-size: .85em; margin-left: .15em;
    color: var(--muted); }
.share .bar { width: 52px; height: 5px; border-radius: var(--r-pill); background: var(--line-2);
    overflow: hidden; flex: none; }
.share .bar i { display: block; height: 100%; border-radius: var(--r-pill);
    background: var(--accent-2); transition: width var(--ease-layer); }
tr:hover .share .bar i { background: var(--accent); }

/* ═══ Notice detail ═══════════════════════════════════════════════════════ */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.preview-frame { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: #fff; display: block; }
.prev-stage { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; }
.chan { display: grid; grid-template-columns: 18px 1fr; gap: 3px 11px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 9px; background: var(--surface);
    transition: border-color var(--ease), background var(--ease); }
.chan:hover { border-color: var(--line-strong); }
.chan.off { background: var(--surface-2); }
.chan input { margin: 2px 0 0; width: 15px; height: 15px; }
.chan label { font-weight: var(--w-semi); font-size: var(--t-cell); margin: 0; }
.chan .to { grid-column: 2; font-size: var(--t-meta); color: var(--muted); line-height: 1.5; }
.chan .reason { grid-column: 2; font-size: var(--t-meta); color: var(--red); font-weight: var(--w-med); line-height: 1.5; }
/* A refusal and a caveat are notes in the margin, not alarms. */
.blocked, .notice-note { border-radius: var(--r-md); padding: 11px 13px; font-size: var(--t-meta);
    font-weight: var(--w-med); line-height: 1.55; border: 1px solid; border-left-width: 3px; }
.blocked { background: var(--red-soft); color: var(--red-ink); border-color: var(--red-line); border-left-color: var(--red); }
.notice-note { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--amber-line); border-left-color: var(--amber); }

/* ═══ Mail ════════════════════════════════════════════════════════════════
   The email that went out and anything that came back are shown as mail, not
   as table rows: a subject line, who and when, then the body as it was written
   — preserved whitespace, sans face, because it is language. */
.mail { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 12px; }
.mail:last-child { margin-bottom: 0; }
.mail-h { padding: 10px 13px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.mail-sub { font-size: var(--t-cell); font-weight: var(--w-semi); color: var(--ink); line-height: 1.4; }
.mail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px;
    font-size: var(--t-meta); color: var(--muted); }
.mail-meta .mono { font-size: .95em; }
.mail-b { margin: 0; padding: 13px; font-family: var(--font); font-size: var(--t-cell); line-height: 1.65;
    color: var(--ink-2); white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto;
    background: var(--surface); }

/* ─── The reply feed on the dashboard. A row is a link to the notice it
   answers: who wrote, what they said, and which demand it lands against. ─── */
.reply-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, auto);
    gap: 6px 18px; align-items: start; padding: 13px 4px; border-bottom: 1px solid var(--line-2);
    color: inherit; transition: background var(--ease); }
.reply-row:last-child { border-bottom: none; }
.reply-row:hover { background: var(--surface-3); text-decoration: none; }
.reply-row .rr-who { font-size: var(--t-cell); line-height: 1.45; min-width: 0; }
.reply-row .rr-who .hint { margin: 2px 0 0; }
.reply-row .rr-body { font-size: var(--t-cell); line-height: 1.5; min-width: 0; }
.reply-row .rr-body b { display: block; color: var(--ink); font-weight: var(--w-semi); }
.reply-row .rr-body .hint { margin: 3px 0 0; display: block; }
.reply-row .rr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    justify-content: flex-end; font-size: var(--t-meta); }
.reply-row .rr-meta .hint { margin: 0; }
@media (max-width: 760px) {
    .reply-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .reply-row .rr-meta { justify-content: flex-start; margin-top: 4px; }
}

/* ═══ Progress, layers, toast ═════════════════════════════════════════════ */
.progress { height: 6px; background: var(--line-2); border-radius: var(--r-pill); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent-2); transition: width .3s; }
#modal-root:empty { display: none; }
.modal-bg { position: fixed; inset: 0; background: rgba(21,23,27,.5); display: grid; place-items: center;
    padding: 24px 16px; z-index: 100; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: fade var(--ease-layer) both; }
.modal { background: var(--surface); border-radius: var(--r-lg); max-width: 680px; width: 100%; max-height: 86vh;
    overflow: auto; box-shadow: var(--shadow-pop); border: 1px solid var(--line);
    animation: rise var(--ease-layer) both; }
.modal.wide { max-width: 900px; }
.modal .mh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px;
    border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.modal .mh h3 { margin: 0; font-size: var(--t-h2); }
.modal .mb { padding: 20px; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.985) } to { opacity: 1; transform: none } }
pre.json { background: var(--rail); color: #d9dde3; padding: 15px; border-radius: var(--r-md); overflow: auto;
    font-family: var(--mono); font-size: var(--t-meta); line-height: 1.55; }
code { font-family: var(--mono); font-size: .92em; background: var(--surface-2); border: 1px solid var(--line-2);
    border-radius: var(--r-sm); padding: 1px 5px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(16px); opacity: 0;
    background: var(--rail); color: #fff; padding: 11px 18px; border-radius: var(--r-md); font-size: var(--t-cell);
    font-weight: var(--w-med); box-shadow: var(--shadow-pop); transition: transform var(--ease-layer), opacity var(--ease-layer);
    pointer-events: none; z-index: 200; max-width: calc(100vw - 32px); border-left: 3px solid var(--accent-2); }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.err { border-left-color: #e0645c; }

.empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: var(--t-cell); line-height: 1.7; }
.dropzone { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 28px 20px;
    text-align: center; color: var(--muted); background: var(--surface-2);
    transition: border-color var(--ease), background var(--ease); cursor: pointer; }
.dropzone.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.pagination { display: flex; align-items: center; gap: 10px; margin-top: 14px; justify-content: flex-end;
    font-size: var(--t-meta); color: var(--muted); flex-wrap: wrap; }
.pagination .mono { color: var(--ink-2); }
.selbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--rail);
    color: var(--rail-text-hi); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px;
    font-size: var(--t-cell); font-weight: var(--w-med); animation: rise var(--ease-layer) both; }
.selbar .hint { color: var(--rail-text); margin: 0; }
.selbar .btn.ghost { background: transparent; border-color: var(--rail-line); color: var(--rail-text); }
.selbar .btn.ghost:hover:not(:disabled) { background: var(--rail-2); color: var(--rail-text-hi); border-color: var(--rail-line-hi); }
.selbar .btn.primary { background: var(--accent-2); color: var(--rail); }
.selbar .btn.primary:hover:not(:disabled) { background: var(--accent-hi); }
.hide { display: none !important; }

/* ─── Skeletons. A shape that is about to be filled, not the word "Loading". ─── */
.skel { padding: 4px 0; }
.skel i { display: block; height: 11px; border-radius: var(--r-sm); margin: 13px 18px;
    background: linear-gradient(90deg, var(--line-2) 25%, #f7f5f0 37%, var(--line-2) 50%);
    background-size: 400% 100%; animation: shimmer 1.3s linear infinite; }
.skel i:nth-child(3n) { width: 42%; }
.skel i:nth-child(3n+1) { width: 78%; }
.skel i:nth-child(3n+2) { width: 61%; }
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }

/* ═══ Narrow ══════════════════════════════════════════════════════════════ */
@media (max-width: 1040px) {
    .detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 880px) {
    .login-wrap { grid-template-columns: minmax(0, 1fr); }
    .login-aside { display: none; }
    .login-card .mini { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
    .login-card .mini .crest { width: 38px; height: 38px; }
    .login-card .mini .wordmark { height: 22px; }
}
@media (max-width: 820px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; flex-wrap: wrap;
        align-items: center; gap: 8px; padding: 10px 16px; }
    .brand { padding: 0 10px 0 0; }
    .nav { flex-direction: row; flex-wrap: wrap; gap: 4px; margin: 0; }
    .nav .grp { display: none; }
    .nav a::before { left: 0; right: 0; top: auto; bottom: -10px; width: auto; height: 0;
        transform: none; border-radius: var(--r-pill); transition: height var(--ease); }
    .nav a.active::before { height: 2px; }
    .sidebar .foot { margin: 0 0 0 auto; border: none; padding: 0; display: flex; align-items: center; gap: 10px; }
    .sidebar .who { padding: 0; }
    .sidebar .who .nm small { display: none; }
    .sidebar .btn.rail { width: auto; }
    .tb-in { padding: 14px 16px 12px; }
    .main { padding: 18px 16px 30px; }        /* 16px side gutter down to 360px */
    .foot-note { margin: 0 16px; }
    .kv { grid-template-columns: minmax(0, 1fr); }
    .kv > div:nth-child(odd) { padding-bottom: 0; border: none; }
    .preview-frame { height: 480px; }
}
@media (max-width: 620px) {
    .sidebar .who .nm { display: none; }
    .tb-in { flex-direction: column; align-items: stretch; gap: 12px; }
    .tb-a { justify-content: flex-start; }
}