/* Material 3 layer (Ruchit, 3 Oct 2026: "as close to Google's own apps as possible").
   Loaded after app.css. Maps the app's tokens onto M3 colour roles, and restyles type, shape, buttons, fields,
   chips, cards and dialogs. Pure CSS, no build step, no framework. Seed colour: the firm's navy #1f3a5f. */
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url(../fonts/roboto-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url(../fonts/roboto-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url(../fonts/roboto-latin-700-normal.woff2) format("woff2"); }
/* Material Symbols Rounded, subset to the ~50 icons the app uses (17 KB instead of 1.4 MB) */
@font-face { font-family: "Material Symbols Rounded"; font-display: block; src: url(../fonts/material-symbols-rounded-subset.woff2) format("woff2"); }

:root {
  /* M3 colour roles (light), generated around the seed */
  --md-primary: #2b5c8f; --md-on-primary: #ffffff; --md-primary-container: #d3e4ff; --md-on-primary-container: #001c38;
  --md-secondary-container: #dae2f9; --md-on-secondary-container: #131c2c;
  --md-tertiary-container: #ffdcc2; --md-error: #ba1a1a; --md-error-container: #ffdad6;
  --md-surface: #f8f9ff; --md-surface-lowest: #ffffff; --md-surface-low: #f2f3fa; --md-surface-container: #eceef4; --md-surface-high: #e6e8ee;
  --md-on-surface: #191c20; --md-on-surface-variant: #43474e; --md-outline: #73777f; --md-outline-variant: #c3c6cf;
  /* the app's own tokens now point at M3 roles */
  --accent: var(--md-primary); --accent-2: var(--md-primary); --accent-soft: var(--md-secondary-container);
  --bg: var(--md-surface); --surface: var(--md-surface-lowest); --surface-2: var(--md-surface-low);
  --line: var(--md-outline-variant); --line-2: var(--md-surface-high);
  --text: var(--md-on-surface); --muted: var(--md-on-surface-variant); --faint: var(--md-outline);
  --bad: var(--md-error); --bad-soft: var(--md-error-container);
  --radius: 16px; --shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 1px 3px 1px rgba(0, 0, 0, .06);
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary: #a2c9fe; --md-on-primary: #00315b; --md-primary-container: #0f4576; --md-on-primary-container: #d3e4ff;
    --md-secondary-container: #3e4759; --md-on-secondary-container: #dae2f9; --md-error: #ffb4ab; --md-error-container: #93000a;
    --md-surface: #111418; --md-surface-lowest: #0c0e13; --md-surface-low: #191c20; --md-surface-container: #1d2024; --md-surface-high: #282a2f;
    --md-on-surface: #e1e2e8; --md-on-surface-variant: #c3c6cf; --md-outline: #8d9199; --md-outline-variant: #43474e;
    --shadow: none;
  }
}

/* Type scale: body-medium 14/20, title-medium 16/24 500, label-large 14/20 500 */
body { font: 400 14px/20px var(--font); letter-spacing: .01em; }
h1 { font: 400 28px/36px var(--font); letter-spacing: 0; } h2 { font: 400 22px/28px var(--font); } h3 { font: 500 16px/24px var(--font); letter-spacing: .01em; }

/* Icons: <span class="ms">icon_name</span> */
.ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased; user-select: none; vertical-align: middle; }
.ms.lg { font-size: 28px; } .ms.xl { font-size: 40px; }

/* Top app bar */
.topbar { height: 64px; background: var(--md-surface); border-bottom: 0; box-shadow: none; }
.topbar.scrolled { background: var(--md-surface-container); }

/* Buttons: filled (primary), outlined (default), text (ghost), tonal; 40 dp tall, pill-shaped; state layers */
.btn { height: 40px; padding: 0 20px; border-radius: 20px; border: 1px solid var(--md-outline); background: transparent; color: var(--md-primary);
  font: 500 14px/20px var(--font); letter-spacing: .01em; position: relative; overflow: hidden; transition: background-color .15s, box-shadow .15s; }
.btn:hover { border-color: var(--md-outline); background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--md-primary) 40%, transparent); outline-offset: 2px; }
.btn.primary { background: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary); }
.btn.primary:hover { filter: none; box-shadow: var(--shadow); background: color-mix(in srgb, var(--md-on-primary) 8%, var(--md-primary)); }
.btn.tonal { background: var(--md-secondary-container); border-color: transparent; color: var(--md-on-secondary-container); }
.btn.ghost { border-color: transparent; padding: 0 12px; }
.btn.ghost:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.btn.danger { color: var(--md-error); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 18px; }
.btn.icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; border-color: transparent; color: var(--md-on-surface-variant); }
.btn.icon:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.btn .ms { font-size: 18px; margin-left: -4px; }
.btn.icon .ms { margin: 0; font-size: 22px; }

/* Outlined text fields: 48 dp touch height, 4 dp corners, primary focus ring */
.f label { font: 500 12px/16px var(--font); letter-spacing: .03em; color: var(--md-on-surface-variant); }
.f input, .f select, .f textarea, .cell input, .cell select { border-radius: 4px; border-color: var(--md-outline); background: var(--md-surface-lowest); }
.f input, .f select { min-height: 44px; }
.f input:focus, .f select:focus, .f textarea:focus, .cell input:focus, .cell select:focus { border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); outline: none; }

/* Cards and groups: 12–16 dp corners, tonal surfaces instead of heavy borders */
.group, .case-card, .doc, .cov { border-radius: 16px; border-color: var(--md-outline-variant); }
.doc { background: var(--md-surface-lowest); }

/* Chips: 8 dp corners, 32 dp tall */
.chip { border-radius: 8px; min-height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 4px; font: 500 12.5px/16px var(--font); }

/* Tabs: primary tabs with an indicator */
.tabs a { font: 500 14px/20px var(--font); }

/* Dialogs: 28 dp corners, surface-container-high */
dialog { border-radius: 28px; background: var(--md-surface-high); border: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }

/* Snackbar */
.toast { border-radius: 4px; background: #2e3135; color: #eff0f7; }

/* ---- Papers-first new case (js/app.js chooseType) */
.paper-drop { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 28px 16px; border: 2px dashed var(--md-outline-variant); border-radius: 24px;
  background: var(--md-surface-low); cursor: pointer; transition: border-color .15s, background .15s; }
.paper-drop:hover, .paper-drop.over { border-color: var(--md-primary); background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface-low)); }
.paper-drop .ms { color: var(--md-primary); }
.paper-drop b { font: 500 16px/24px var(--font); }
.paper-drop .btn-row { justify-content: center; }
.type-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 12px; }
.type-chips label { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--md-outline); border-radius: 8px; cursor: pointer; font-weight: 500; }
.type-chips input { position: absolute; opacity: 0; pointer-events: none; }
.type-chips label:has(input:checked) { background: var(--md-secondary-container); border-color: transparent; color: var(--md-on-secondary-container); }
.type-chips label:has(input:checked)::before { content: "done"; font-family: "Material Symbols Rounded"; font-size: 18px; }
.linkish { background: none; border: 0; color: var(--md-primary); font: 500 14px/20px var(--font); cursor: pointer; padding: 8px; text-decoration: underline; text-underline-offset: 3px; }

/* Document card: icon · name/type · open, delete, ⋮ */
.doc { grid-template-columns: 40px minmax(0, 1fr) auto !important; }
.doc .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.doc .nm { white-space: normal; overflow-wrap: anywhere; }
.doc-acts { display: inline-flex; align-items: center; gap: 0; }
.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: 44px; z-index: 30; min-width: 240px; padding: 8px 0; border-radius: 4px; background: var(--md-surface-container);
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .3); display: grid; }
.menu-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border: 0; background: none; text-align: left; font: 400 14px/20px var(--font); color: var(--md-on-surface); cursor: pointer; }
.menu-item:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.menu-item select { margin-left: auto; height: 36px; border-radius: 4px; border: 1px solid var(--md-outline); background: var(--md-surface-lowest); max-width: 170px; }
.menu-item input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--md-primary); }
.ai-strip { padding-left: 52px; } .ai-checks { margin-left: 52px; }
@media (max-width: 560px) { .doc-acts { grid-column: auto; } .ai-strip, .ai-checks { padding-left: 0; margin-left: 0; } }