/* PaperBook: one style sheet shared by every screen (spec 1).
   All colours live here, once, as variables in the root block below (values from
   core/palette.py, spec 1.2). No colour values anywhere else. */

@font-face {
  font-family: "Inter";
  src: url("../vendor/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* R33 (D199, D170): Marathi text on screen in the bundled Noto Sans Devanagari, after Inter. The
   Devanagari unicode-range means a page downloads it only when it shows Devanagari letters. */
@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../vendor/noto-devanagari/NotoSansDevanagari-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CFF, U+A8E0-A8FF, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../vendor/noto-devanagari/NotoSansDevanagari-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CFF, U+A8E0-A8FF, U+200C-200D, U+25CC;
}

:root {
  /* brand and action */
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --indigo-text: #3730A3;
  --active-nav-bg: #EEF0FF;
  --litigation-chip-bg: #E0E7FF;
  --group-header-bg: #F3F1FF;
  --violet: #7C3AED;
  --greeting: #6D28D9;
  --proposed-chip-bg: #FCE7F3;
  --proposed-chip-text: #9D174D;
  --teal: #0F766E;
  --amber: #B45309;
  --signin-panel: #F0F2FF;
  --logo-from: #4F46E5;
  --logo-mid: #7C3AED;
  --logo-to: #DB2777;
  /* status and alerts */
  --urgent-badge-bg: #FEE2E2;
  --urgent-badge-text: #991B1B;
  --urgent-strong: #DC2626;
  --overdue-text: #B91C1C;
  --urgent-item-bg: #FEF2F2;
  --due-soon-bg: #FEF3C7;
  --due-soon-text: #92400E;
  --party-ours: #15803D;
  --party-with: #7E22CE;
  --party-other: #B91C1C;
  --pending-bg: #DCFCE7;
  --pending-text: #166534;
  --disposed-bg: #EEF0F4;
  --disposed-text: #4B5263;
  /* neutrals */
  --page-bg: #F6F7FB;
  --white: #FFFFFF;
  --panel-border: #E4E7EE;
  --input-border: #DCE0E8;
  --row-line: #EEF0F4;
  --table-header-bg: #F9FAFC;
  --ink: #1F2433;
  --secondary: #2A3040;
  --secondary-2: #3A4152;
  --muted: #5B6275;
  --focus-ring: #A5B4FC;
  --dashed-border: #C9CEDA;
  --title-btn-border: #C7D2FE;
  --word-chip-bg: #DBEAFE;
  --word-chip-text: #1E40AF;
  --photo-chip-bg: #EDE9FE;
  --photo-chip-text: #5B21B6;
  /* S10-092: reminders (mockups S10-1 to S10-3) */
  --general-chip-bg: #E0F2FE;
  --general-chip-text: #075985;
  --struck-text: #6B7280;
  --done-row-bg: #FAFAFB;
  --warn-border: #F59E0B;
  --choice-on-bg: #F5F6FF;
  --stack-line-bg: #FFFBEB;
  --stack-line-border: #FDE68A;
  --stack-row-bg: #FFFDF5;
  --production-box-bg: #F8F8FF; /* S4-018: the produced documents' box (production mockup) */
  --due-border: #FCA5A5;
  --shadow: rgba(20, 24, 40, 0.16);
  --overlay: rgba(20, 24, 40, 0.45);


  /* S0-046: the website's approved look (docs/spec/website/home-mockup.html). Where the mockup's
     bright coral would carry text it is the darker coral-ink (white on it passes 4.5:1); the bright
     coral stays for graphics only (the blobs' tints, the logo's and the hero's gradients). */
  --ws-paper: #FFF7EF;
  --ws-ink: #241433;
  --ws-muted: #6B5B73;
  --ws-line: #F0E4DA;
  --ws-coral: #FF5C39;
  --ws-coral-ink: #C7340F;
  --ws-violet: #7A3BF5;
  --ws-purple: #8E2DE2;
  --ws-gold: #FFB020;
  --ws-coral-tint: #FFE9E1;
  --ws-teal-tint: #DBF4F0;
  --ws-gold-tint: #FFF1D6;
  --ws-violet-tint: #EDE4FE;
  --ws-green-tint: #DDF4E6;
  --ws-plum-tint: #EFE6F3;
  --ws-gold-ink: #94620A;
  --ws-teal-ink: #097A70;
  --ws-green-ink: #177A39;
  --ws-foot-text: #C9B8D6;
  --ws-foot-link: #E7D8F2;
  --ws-header-bg: rgba(255, 247, 239, 0.82);
  --ws-glow: rgba(199, 52, 15, 0.55);

  --font: Inter, "Noto Sans Devanagari", system-ui, sans-serif;  /* R33 (D199): Marathi after Inter */
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); font-size: 14px; color: var(--ink); background: var(--white); }

/* --- shared pieces ------------------------------------------------------------------------- */

.btn { font: inherit; font-size: 16px; font-weight: 700; padding: 13px; min-height: 44px; border: 0; border-radius: 10px; background: var(--primary); color: var(--white); cursor: pointer; }
.btn:hover { background: var(--primary-hover); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.alert-error { padding: 12px 14px; border-radius: 10px; background: var(--urgent-badge-bg); color: var(--urgent-badge-text); font-size: 14px; font-weight: 600; }
.alert-info { padding: 12px 14px; border-radius: 10px; background: var(--active-nav-bg); color: var(--indigo-text); font-size: 14px; font-weight: 600; }
.list-notice { margin-bottom: 12px; } /* R10: above the case table */
/* R14 (D113): a stale form's notice, above the latest values */
.form-notice { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--due-soon-bg); color: var(--due-soon-text); font-size: 14px; font-weight: 600; }

.site-footer { font-size: 13px; color: var(--muted); }

/* --- sign-in page (S1, mockup docs/spec/PaperBook-S1-SignIn-Mockup.html) ------------------- */

.signin .page { min-height: 100vh; display: flex; flex-wrap: wrap; }
.signin .brand { flex: 1 1 520px; background: var(--signin-panel); display: flex; align-items: center; justify-content: center; padding: 48px 40px; }
.signin .brand-inner { max-width: 520px; display: flex; flex-direction: column; gap: 22px; }
.signin .lockup { display: flex; align-items: center; gap: 18px; }
.signin .tile { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(135deg, var(--logo-from), var(--logo-mid) 55%, var(--logo-to)); display: flex; align-items: center; justify-content: center; flex: none; color: var(--white); }
.signin .name { font-size: 46px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; color: var(--ink); }
.signin .name span { color: var(--violet); }
.signin .tagline { font-size: 15px; font-weight: 700; letter-spacing: 1.6px; color: var(--teal); }
.signin .company { font-size: 22px; font-weight: 700; color: var(--amber); }
.signin .points { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.signin .points li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; font-weight: 500; color: var(--secondary); line-height: 1.4; }
.signin .tick { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; flex: none; margin-top: -1px; }
.signin .form-side { flex: 1 1 440px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 32px 24px; }
.signin .signin-form { margin-top: auto; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.signin h1 { margin: 0; font-size: 28px; font-weight: 800; }
.signin .sub { margin: -8px 0 6px; font-size: 14px; color: var(--muted); }
.signin label.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.signin input[type=text], .signin input[type=password] { font: inherit; font-weight: 400; font-size: 15px; padding: 12px 14px; border: 1px solid var(--input-border); border-radius: 10px; color: var(--ink); width: 100%; }
.signin input::placeholder { color: var(--muted); }
.signin input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--primary); }
.signin .pw { position: relative; }
.signin .pw input { padding-right: 52px; }
.signin .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: transparent; color: var(--secondary-2); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.signin .checks { display: flex; flex-direction: column; gap: 10px; }
.signin .checks label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--secondary); }
.signin .checks input { flex: none; width: 18px; height: 18px; margin: 0; margin-top: 1px; accent-color: var(--primary); }
.signin .check-text { line-height: 20px; } /* label and hint wrap as one text; the box stays on line 1 */
.signin .hint { color: var(--muted); font-size: 13px; }
.signin .forgot { text-align: center; font-size: 14px; }
.signin .forgot a { color: var(--primary-hover); font-weight: 600; }
.signin .site-footer { margin-top: auto; padding-top: 40px; }

/* --- simple pages: placeholder landing page (D012), "coming soon" --------------------------- */

.simple { background: var(--page-bg); }
.simple .page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; gap: 24px; }
.simple .panel { width: 100%; max-width: 480px; background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }

/* --- phone width --------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .signin .brand { padding: 32px 20px; }
  .signin .form-side { padding: 32px 20px 20px; }
  .signin .name { font-size: 38px; }
  .signin .checks label { min-height: 44px; }
  .signin .eye { width: 44px; height: 44px; }
  .signin .forgot a { display: inline-block; padding: 12px 0; }
}

/* --- app frame (S2, mockup docs/spec/PaperBook-S2-Home-Mockup.html) ------------------------ */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grow { flex: 1; }
.violet { color: var(--violet); }
.inline-form { display: inline; margin: 0; }

.app { background: var(--page-bg); }
.app .app-shell { min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); }

/* top bar (3.1) */
.topbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 10px 24px; background: var(--white); border-bottom: 1px solid var(--panel-border); }
.topbar-brand { display: flex; align-items: center; gap: 12px; }
.topbar-home { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.topbar-tile { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--logo-from), var(--logo-mid) 55%, var(--logo-to)); display: flex; align-items: center; justify-content: center; color: var(--white); flex: none; }
.topbar-name { display: flex; flex-direction: column; line-height: 1.15; }
.topbar-title { font-size: 20px; font-weight: 800; letter-spacing: -0.2px; }
.topbar-company { font-size: 13px; font-weight: 700; color: var(--amber); margin-left: 10px; letter-spacing: 0; }
.topbar-tagline { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; color: var(--teal); }
.topbar-firm { margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--panel-border); font-size: 14px; color: var(--muted); }
.topbar-middle { flex: 1 1 320px; display: flex; align-items: center; justify-content: center; }
.topsearch { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; padding: 9px 14px; border: 1px solid var(--input-border); border-radius: 999px; background: var(--table-header-bg); font-size: 14px; color: var(--muted); }
.topsearch input, .listsearch input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; font: inherit; color: var(--ink); }
.topsearch input::placeholder, .listsearch input::placeholder { color: var(--muted); }
.topsearch:focus-within, .listsearch:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.topicons { display: flex; align-items: center; margin-left: 8px; }
/* top search drop-down (D041) */
.topsearch { position: relative; }
.top-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 25; }
.top-results:not(:has(ul)), .top-results[hidden] { display: none; }
.top-results-list { list-style: none; margin: 0; padding: 6px; background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; box-shadow: 0 12px 32px var(--shadow); max-height: 70vh; overflow-y: auto; }
.top-result a { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.top-result a:hover, .top-result[aria-selected="true"] a { background: var(--active-nav-bg); }
.result-kind { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--disposed-bg); color: var(--disposed-text); font-size: 11px; font-weight: 600; }
.result-main { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.result-meta { grid-column: 2; font-size: 12px; color: var(--muted); }
.top-none { padding: 12px 10px; font-size: 14px; color: var(--muted); }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--secondary-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:focus-visible, .nav-item:focus-visible, .nav-urgent:focus-visible, .nav-collapse:focus-visible, .nav-plus:focus-visible, .seg:focus-visible, .add-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.nav-toggle { display: none; }

/* left bar (3.2) */
.app-body { position: relative; display: flex; flex-wrap: wrap; flex: 1; }
.sidebar { flex: 1 1 230px; max-width: 250px; background: var(--white); border-right: 1px solid var(--panel-border); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.nav-item, .nav-urgent { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 12px; border-radius: 8px; color: var(--secondary); text-decoration: none; }
.nav-item.is-active { background: var(--active-nav-bg); color: var(--indigo-text); font-weight: 600; }
.nav-urgent { border: 0; background: var(--urgent-item-bg); color: var(--urgent-badge-text); font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.nav-row { display: flex; align-items: center; gap: 6px; }
.nav-plus { position: relative; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 18px; font-weight: 600; }
.nav-plus::before { content: ""; position: absolute; inset: -5px; } /* 40px touch target around the 30px button */
.nav-collapse { width: 40px; height: 40px; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nav-collapse[aria-expanded="false"] svg { transform: rotate(-90deg); }
.nav-sub { list-style: none; margin: 0 0 0 26px; padding: 0 0 0 10px; border-left: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 2px; }
.nav-sub[hidden] { display: none; }
.nav-subitem { display: flex; align-items: center; min-height: 40px; padding: 7px 10px; border-radius: 8px; color: var(--secondary); text-decoration: none; }
.nav-subitem.is-active, .nav-plain.is-active { background: var(--active-nav-bg); color: var(--indigo-text); font-weight: 600; }
.nav-heading { margin-top: 18px; padding: 12px 12px 6px; border-top: 1px solid var(--panel-border); font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--muted); }
.nav-plain { display: flex; align-items: center; min-height: 40px; padding: 7px 12px; border-radius: 8px; color: var(--secondary); text-decoration: none; }
.nav-account { margin-top: 12px; border-top: 1px solid var(--panel-border); border-radius: 0; }

/* Urgent panel (3.4, D053, D059) */
.urgent-panel { position: absolute; top: 60px; left: 250px; width: 540px; max-width: calc(100% - 48px); max-height: calc(100vh - 80px); overflow-y: auto; z-index: 5; background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; box-shadow: 0 12px 32px var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.urgent-panel[hidden] { display: none; }
.urgent-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.urgent-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.urgent-sub { font-size: 12px; color: var(--muted); }
.urgent-body { font-size: 14px; color: var(--secondary); }

/* main area (3.3) */
.main { flex: 999 1 560px; min-width: 0; padding: 22px 28px 40px; display: flex; flex-direction: column; gap: 14px; }
.greeting { font-size: 14px; color: var(--greeting); font-weight: 600; }
.toolline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.listsearch { flex: 1 1 260px; max-width: 380px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--white); font-size: 14px; color: var(--muted); }
.segmented { display: flex; border: 1px solid var(--input-border); border-radius: 10px; overflow: hidden; background: var(--white); font-size: 14px; }
.seg { min-height: 40px; padding: 9px 16px; border: 0; background: transparent; color: var(--secondary); font: inherit; cursor: pointer; }
.seg.is-active { background: var(--primary); color: var(--white); font-weight: 600; }
.add-wrap { position: relative; }
.add-btn { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 10px 18px; border: 0; border-radius: 10px; background: var(--primary); color: var(--white); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.add-btn:hover { background: var(--primary-hover); }
/* drop-down menus ("+ Add" and the account menu, R9b): straight below their button, right edges in
   line (the wrapper is positioned); frame.js shifts an open menu left to keep 8px from the window's
   edge when there is not enough room. */
.add-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; width: 200px; max-width: calc(100vw - 16px); background: var(--white); border: 1px solid var(--panel-border); border-radius: 10px; box-shadow: 0 12px 32px var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.add-menu[hidden] { display: none; }
.add-menu :where(a) { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
.add-menu :where(a):hover, .add-menu :where(a):focus-visible { background: var(--active-nav-bg); color: var(--indigo-text); }
/* account menu (R9, D078; R9b): both items look the same; "Log out" is a form's button drawn as a row */
.account-wrap { position: relative; }
.account-menu { right: 0; max-width: calc(100vw - 24px); z-index: 26; }
.account-menu form { margin: 0; display: flex; }
.menu-item { display: flex; width: 100%; min-height: 40px; padding: 8px 12px; gap: 10px; align-items: center; text-align: left; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--secondary); text-decoration: none; cursor: pointer; }
.menu-item:hover { background: var(--active-nav-bg); color: var(--indigo-text); }
.menu-item:focus-visible { background: var(--active-nav-bg); color: var(--indigo-text); outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.menu-item svg { flex: none; }
.menu-divider { height: 1px; margin: 4px 6px; border: 0; background: var(--row-line); }
#change-password { scroll-margin-top: 16px; }
/* Every box that scrolls sideways is also positioned (S3-012a), so positioned content inside it
   (visually hidden labels, touch areas) stays in the box and scrolls with it, never widening the
   page at phone width. */
.table-box { position: relative; background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; overflow-x: auto; }
.case-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 1000px; }
.case-table thead tr { background: var(--table-header-bg); text-align: left; font-size: 12px; letter-spacing: 0.6px; color: var(--disposed-text); }
.case-table th { padding: 10px 14px; font-weight: 700; border-bottom: 1px solid var(--panel-border); vertical-align: top; }
.case-table th.col-sr { width: 56px; white-space: nowrap; }
/* rows (S2-009, mockup) */
.case-table td { padding: 11px 14px; vertical-align: middle; }
.case-row { border-bottom: 1px solid var(--row-line); cursor: pointer; }
.case-row:last-child { border-bottom: 0; }
.case-row:hover { background: var(--table-header-bg); }
.cell-sr { color: var(--muted); }
.cell-client { font-weight: 600; }
.cell-client a, .cell-number a { color: var(--primary-hover); text-decoration: none; }
.cell-client a:hover, .cell-number a:hover { text-decoration: underline; }
.cell-client a:focus-visible, .cell-number a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cell-number { white-space: nowrap; }
.cell-number a { color: var(--ink); }
.cell-court { color: var(--secondary-2); }
.cell-date { white-space: nowrap; }
.date-normal { color: var(--ink); }
.date-overdue { color: var(--overdue-text); font-weight: 600; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip-litigation { background: var(--litigation-chip-bg); color: var(--indigo-text); }
.chip-proposed { background: var(--proposed-chip-bg); color: var(--proposed-chip-text); }
.chip-pending { background: var(--pending-bg); color: var(--pending-text); }
.chip-disposed { background: var(--disposed-bg); color: var(--disposed-text); }
/* header sort buttons (3.3) */
.th-controls { display: flex; gap: 10px; align-items: center; margin: 0; }
.sort-btn { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px; border: 1px solid var(--input-border); border-radius: 6px; background: var(--white); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--indigo-text); cursor: pointer; white-space: nowrap; }
.sort-btn::before { content: ""; position: absolute; inset: -8px -4px; } /* a larger touch target */
.sort-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.sort-priority { font-size: 10px; font-weight: 700; }
.segmented-form { display: contents; }
/* grouping (D047, D048) and long lists (D050) */
.th-controls form { margin: 0; }
.group-check { display: flex; align-items: center; gap: 4px; margin-top: 6px; min-height: 24px; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--disposed-text); cursor: pointer; }
.group-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--primary); }
.group-row td { padding: 10px 14px; background: var(--group-header-bg); color: var(--indigo-text); font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--panel-border); }
.group-count { font-weight: 500; color: var(--muted); }
.load-more td { padding: 12px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.list-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.brand-credit { color: var(--amber); font-weight: 600; }
/* "coming soon" pages (D037): the empty-tab panel of docs/spec/PaperBook-S3-Case-Mockup.html */
.soon-panel { background: var(--white); border: 1px dashed var(--dashed-border); border-radius: 12px; padding: 40px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.soon-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.soon-text { margin: 0; font-size: 14px; color: var(--muted); }

/* case page (S3, docs/spec/PaperBook-S3-Case-Mockup.html) */
.case-page { display: flex; flex-direction: column; gap: 14px; }
.breadcrumb { font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--primary-hover); text-decoration: none; }
.breadcrumb a:hover { color: var(--indigo-text); }
.breadcrumb .pencil-btn { margin: 0 4px; vertical-align: middle; }
.pencil-btn { position: relative; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: none; border: 1px solid var(--input-border); border-radius: 8px; background: var(--white); color: var(--secondary-2); }
.pencil-btn.pencil-small { width: 26px; height: 26px; border-radius: 7px; }
.pencil-btn:hover { background: var(--active-nav-bg); color: var(--indigo-text); }
.pencil-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.case-card { background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.case-row1 { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.case-head { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.case-heading-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.case-heading { margin: 0; font-size: 24px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.case-meta { font-size: 14px; color: var(--secondary-2); }
.case-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding-top: 10px; border-top: 1px solid var(--row-line); }
.title-btn { padding: 6px 12px; border: 1px solid var(--title-btn-border); border-radius: 8px; background: var(--active-nav-bg); color: var(--indigo-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.title-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.case-title { flex: 1 1 400px; min-width: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.case-title[hidden] { display: none; }
.case-full-title { white-space: pre-line; }
.case-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--panel-border); }
.case-tab { display: flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: -1px; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 500; color: var(--secondary); text-decoration: none; white-space: nowrap; }
.case-tab.is-active { border-bottom-color: var(--primary); color: var(--indigo-text); font-weight: 700; }
.case-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.tab-count { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--disposed-bg); color: var(--disposed-text); }
.case-tab.is-active .tab-count { background: var(--litigation-chip-bg); color: var(--indigo-text); }
.documents { display: flex; flex-direction: column; gap: 12px; }
.doc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.folder-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border: 1px solid var(--input-border); border-radius: 999px; background: var(--white); color: var(--secondary); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.folder-btn.is-active { border-color: var(--primary); background: var(--primary); color: var(--white); }
.folder-count { font-weight: 500; opacity: 0.8; }
.doc-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--white); color: var(--secondary); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.doc-action-primary { padding: 8px 16px; border-color: var(--primary); background: var(--primary); color: var(--white); }
.doc-action-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.folder-btn:focus-visible, .doc-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.register-box { position: relative; background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; overflow-x: auto; } /* positioned: S3-012a */
.register { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 14px; }
.register th { padding: 12px 14px; border-bottom: 1px solid var(--panel-border); background: var(--table-header-bg); text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.6px; color: var(--disposed-text); }
.register-empty { padding: 20px 14px; color: var(--muted); }
/* S4 registers (docs/spec/S4/PaperBook-S4-RNP-Scenarios.html, -Brief.html) */
.register td { padding: 10px 12px; font-size: 14px; vertical-align: middle; color: var(--ink); }
.register-row { border-bottom: 1px solid var(--row-line); }
.register-row.is-stacked { background: var(--stack-row-bg); }
.cell-sr { color: var(--muted); }
.cell-date { white-space: nowrap; }
.cell-exh { font-weight: 600; }
.cell-copy .chip { margin: 2px 0; }
.cell-edit { text-align: right; }
.doc-link { font-weight: 600; color: var(--primary-hover); text-decoration: none; }
.doc-link:hover { color: var(--indigo-text); text-decoration: underline; }
.doc-name { font-weight: 600; color: var(--ink); }
/* S4-015: marked for deletion (the scenarios mockup's row 8), sortable headings, Admin actions */
.register-row.is-marked td:not(.cell-edit) { opacity: 0.5; }
.is-struck { text-decoration: line-through; }
.chip-marked { background: var(--disposed-bg); color: var(--disposed-text); }
/* S4-016 Correspondence (docs/spec/S4/PaperBook-S4-Correspondence-Threads.html, -New.html) */
.threads { display: flex; flex-direction: column; gap: 12px; }
.thread { background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.thread.is-due-by-us { border-color: var(--due-border); }
.thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--row-line); }
.thread-head form { margin: 0; }
.thread-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.thread-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 12px; border: 1px solid var(--input-border); border-radius: 9px; background: var(--white); font: inherit; font-size: 13px; font-weight: 600; color: var(--secondary); text-decoration: none; cursor: pointer; }
.thread-btn-primary { border-color: var(--primary); background: var(--primary); color: var(--white); font-weight: 700; }
.thread-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.thread-open, .dir-sent { background: var(--litigation-chip-bg); color: var(--indigo-text); }
.thread-closed { background: var(--disposed-bg); color: var(--disposed-text); }
.dir-received { background: var(--pending-bg); color: var(--pending-text); }
.chip-due-us, .chip-overdue { background: var(--urgent-badge-bg); color: var(--urgent-badge-text); }
.chip-expected { background: var(--due-soon-bg); color: var(--due-soon-text); }
.corr-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; }
.corr-item.is-reply { margin-left: 28px; border-left: 3px solid var(--title-btn-border); padding-left: 12px; }
.corr-item.is-marked > :not(.corr-edit) { opacity: 0.5; }
.corr-date { min-width: 86px; font-size: 14px; color: var(--ink); }
.corr-party { font-size: 14px; color: var(--secondary-2); }
.corr-mode { font-size: 13px; color: var(--muted); }
.corr-subject { flex: 1 1 200px; font-size: 14px; font-weight: 600; }
.corr-files { font-size: 13px; }
.file-link, .proof-link { font-weight: 600; color: var(--primary-hover); text-decoration: none; }
.file-link:hover, .proof-link:hover { text-decoration: underline; }
.corr-edit { display: inline-flex; align-items: center; }
.item-card { flex: 1 1 640px; max-width: 900px; }
.direction-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.direction-choice { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; border: 1px solid var(--input-border); border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
.direction-choice:has(input:checked) { border: 2px solid var(--primary); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 16px; }
.item-field { display: flex; flex-direction: column; gap: 4px; }
.reply-box { margin-top: 10px; padding: 10px 16px; border: 1px solid var(--title-btn-border); border-radius: 10px; background: var(--table-header-bg); }
.reply-kinds { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ink); }
.reply-when { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 8px; }
.reply-or { padding-bottom: 12px; font-weight: 700; color: var(--muted); }
.join-row { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ink); }
.join-row .field-note { margin: 0 0 0 6px; display: inline; }
.sort-head { color: inherit; text-decoration: none; }
.sort-head:hover { color: var(--indigo-text); text-decoration: underline; }
.sort-head:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.sort-dir { display: inline-flex; align-items: center; padding: 1px 6px; border: 1px solid var(--input-border); border-radius: 6px; background: var(--white); font-size: 11px; font-weight: 600; color: var(--indigo-text); }
.row-admin { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-right: 6px; vertical-align: middle; }
.row-admin form { margin: 0; }
.row-action { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 1px solid var(--input-border); border-radius: 7px; background: var(--white); color: var(--indigo-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.row-action::-webkit-details-marker { display: none; }
.row-confirm { align-items: flex-end; }
.field-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
/* Print register (S4-015): no branding, no navigation */
body.print { background: var(--white); color: var(--ink); padding: 24px; }
.print-head { margin-bottom: 16px; }
.print-head h1 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.print-head p { margin: 0; font-size: 14px; color: var(--secondary); }
/* S4-015a: on a screen narrower than the table (a phone) the table scrolls inside its own box,
   never the page (the S3-012a rule: a sideways-scrolling box is positioned). */
.print-body .register-box { position: relative; border: 0; overflow-x: auto; }
.print-body .register { min-width: 0; }
/* A printed register, not a screen: names are plain text in the text colour (D110, S4-015a). */
.print-body .doc-name { color: var(--ink); font-weight: 600; text-decoration: none; }
@media (max-width: 899px) { body.print { padding: 16px; } }
@media print {
  /* S4-015a: on paper the table fits A4 portrait, the heading row repeats on every page, and a row
     is never split across two pages. The chips keep their colours. */
  @page { size: A4 portrait; margin: 12mm; }
  body.print { padding: 0; }
  .print-body .register-box { overflow: visible; }
  .print-body .register { width: 100%; table-layout: fixed; font-size: 10.5px; }
  .print-body .register th, .print-body .register td { padding: 4px 6px; overflow-wrap: anywhere; }
  .print-body thead { display: table-header-group; }
  .print-body tr { break-inside: avoid; page-break-inside: avoid; }
  .print-body .chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* R33 (H6-F3): on paper a long chip ("Filed · RNP Exh. 32") wraps inside its column, so the
     register stays within A4's width */
  .print-body .chip { white-space: normal; max-width: 100%; }
}
.stack-line td { padding: 8px 12px; background: var(--stack-line-bg); border-top: 1px solid var(--stack-line-border); border-bottom: 1px solid var(--stack-line-border); font-size: 13px; font-weight: 700; color: var(--due-soon-text); }
.kind-pdf { background: var(--urgent-badge-bg); color: var(--urgent-badge-text); }
.kind-word { background: var(--word-chip-bg); color: var(--word-chip-text); }
.kind-photo { background: var(--photo-chip-bg); color: var(--photo-chip-text); }
.chip-awaited, .chip-cc { background: var(--due-soon-bg); color: var(--due-soon-text); }
.copy-certified { background: var(--pending-bg); color: var(--pending-text); }
.copy-original { background: var(--litigation-chip-bg); color: var(--indigo-text); }
.copy-xerox, .copy-draft, .chip-type { background: var(--disposed-bg); color: var(--disposed-text); }
.pencil-btn.pencil-row { width: 28px; height: 28px; border-radius: 7px; }
.pencil-btn.pencil-row::before { inset: -8px; }
/* upload and edit (docs/spec/S4/PaperBook-S4-Upload-Join.html): the file on the left, the Details card on the right */
.doc-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.doc-form.is-edit { max-width: 640px; }
.upload-files { flex: 3 1 420px; min-width: 0; background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.upload-details { flex: 2 1 320px; min-width: 0; background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.panel-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--ink); }
.upload-drop { display: flex; align-items: center; justify-content: center; min-height: 160px; border: 2px dashed var(--dashed-border); border-radius: 10px; color: var(--primary-hover); font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; }
.upload-drop:hover { background: var(--active-nav-bg); }
.upload-input { font: inherit; font-size: 14px; }
/* S4-015a: the real file input is visually hidden but stays in the page, reachable by keyboard and
   screen readers; the dashed area is its label and shows its focus ring and the chosen file. */
.upload-files { position: relative; }
.upload-input-hidden { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.upload-input-hidden:focus-visible + .upload-drop { outline: 2px solid var(--focus-ring); outline-offset: 2px; background: var(--active-nav-bg); }
.upload-hint { margin: 0; font-size: 13px; color: var(--muted); }
.upload-details .field { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.field-input { font: inherit; font-size: 15px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--white); color: var(--ink); width: 100%; }
textarea.field-input { min-height: 80px; resize: vertical; }
.field-input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--primary); }
.add-new-input { margin-top: 6px; }
.field-check-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 44px; }
.field-check-row input { width: 20px; height: 20px; }
.upload-details .field-check { margin-top: 0; font-weight: 500; }
.field-error { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--urgent-badge-text); }
.form-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* the viewer (S4-014 Build 1.5) */
.viewer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.viewer-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.viewer-back { font-size: 14px; font-weight: 600; color: var(--primary-hover); text-decoration: none; }
.viewer-box { background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; overflow: hidden; }
.viewer-pdf { display: block; width: 100%; height: 80vh; border: 0; }
.viewer-photo { display: block; width: 100%; height: auto; }
.register-panel { background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; padding: 24px; text-align: center; font-size: 14px; color: var(--muted); }
/* Notes (S3 3.7, D088; docs/spec/PaperBook-S3-Notes-tab.png) */
.notes { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.note-card { background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.note-head { display: flex; align-items: flex-start; gap: 8px; }
.note-meta { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.note-text { font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.note-card.is-greyed { background: var(--table-header-bg); }
.note-card.is-greyed .note-text { color: var(--muted); }
.note-greyed { font-size: 12px; color: var(--muted); }
.note-confirm { display: flex; flex-direction: column; align-items: flex-end; }
.note-icon { position: relative; list-style: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--input-border); border-radius: 7px; background: var(--white); color: var(--secondary-2); cursor: pointer; }
.note-icon::-webkit-details-marker { display: none; }
.note-icon::before { content: ""; position: absolute; inset: -8px; } /* 44px touch area */
.note-icon:hover { background: var(--active-nav-bg); color: var(--indigo-text); }
.note-icon:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.note-question-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.note-question-box form { margin: 0; }
.note-question { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.note-add { display: flex; flex-direction: column; gap: 6px; }
.note-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.note-box { font: inherit; font-size: 14px; font-weight: 400; min-height: 80px; padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--white); color: var(--ink); resize: vertical; }
.note-box:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--primary); }
/* 44px touch area around the pencil buttons without changing their look (S3 3.9) */
.pencil-btn::before { content: ""; position: absolute; inset: -6px; }
.pencil-btn.pencil-small::before { inset: -9px; }

/* My account (D057), Set a new password (D027) */
.account-panel { background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.account-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.account-note { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; } /* spec 1.3 */
.account-value { color: var(--ink); font-weight: 600; }
/* An email address moves whole to the next line; only when longer than the line does it break,
   and then only after "@" or "." (the email_breaks filter puts <wbr> there). */
.email { display: inline-block; max-width: 100%; vertical-align: bottom; }
.email .nobr { white-space: nowrap; }
.account-form { display: flex; flex-direction: column; gap: 12px; max-width: 400px; }
.account-form label.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.account-form input[type=password], .account-form input[type=text], .account-form input[type=email] { font: inherit; font-weight: 400; font-size: 15px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--input-border); border-radius: 10px; color: var(--ink); width: 100%; background: var(--white); }
.account-form input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--primary); }
.field-hint { margin: -4px 0 0; font-size: 13px; color: var(--muted); }
.btn-small { font-size: 14px; padding: 10px 18px; }
.btn-outline { font: inherit; font-size: 14px; font-weight: 600; min-height: 40px; padding: 8px 16px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--white); color: var(--indigo-text); cursor: pointer; }
.btn-outline:hover { background: var(--active-nav-bg); }
.btn-outline:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.session-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--row-line); flex-wrap: wrap; }
.session-item:first-child { border-top: 0; }
.session-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.session-browser { font-size: 14px; font-weight: 600; color: var(--ink); }
.session-current { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px; background: var(--litigation-chip-bg); color: var(--indigo-text); font-size: 12px; font-weight: 600; }
.session-meta { font-size: 13px; color: var(--muted); }
.simple .panel .account-form { max-width: none; }
/* R34b (H10-F7, D206): the error pages (templates/errors/page.html) */
.error-brand { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: var(--ink); }
.error-brand span { color: var(--violet); }
.error-text { margin: 0; font-size: 14px; color: var(--secondary); line-height: 1.5; }
.error-panel p:last-child { margin: 0; }

/* Admin › Users and password reset (S1-007) */
.account-wide { max-width: 960px; }
/* R39-096t (D236): Admin › Users' head with + Add user at the top right */
.users-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.users-head .add-btn { text-decoration: none; }
@media (max-width: 480px) {
  .users-head .add-btn { width: 100%; justify-content: center; }
}
.users-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.users-table thead tr { background: var(--table-header-bg); text-align: left; font-size: 12px; letter-spacing: 0.6px; color: var(--disposed-text); }
.users-table th { padding: 10px 14px; font-weight: 700; border-bottom: 1px solid var(--panel-border); white-space: nowrap; }
.users-table td { padding: 10px 14px; border-bottom: 1px solid var(--row-line); color: var(--ink); vertical-align: middle; }
.users-table tbody tr:last-child td { border-bottom: 0; }
.users-table .user-name { font-weight: 600; }
.users-table .user-action { text-align: right; white-space: nowrap; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.button-row form { margin: 0; }
.temp-box { margin: 0; }
.temp-password { display: inline-block; padding: 10px 16px; border: 1px dashed var(--dashed-border); border-radius: 10px; background: var(--table-header-bg); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--ink); user-select: all; }
.account-note a { color: var(--primary-hover); font-weight: 600; }

/* inactivity warning (D021) */
.idle-dialog { position: fixed; inset: 0; z-index: 30; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 16px; }
.idle-dialog[hidden] { display: none; }
.idle-box { width: 100%; max-width: 400px; background: var(--white); border-radius: 12px; box-shadow: 0 12px 32px var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 16px; text-align: center; }
.idle-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.idle-box .btn { width: 100%; }

/* phone width (3.6, D056): below 900px */
@media (max-width: 899px) {
  /* top bar: line 1 menu + brand + icons; line 2 the firm's name; line 3 the search box (R2) */
  .topbar { padding: 8px 12px; gap: 8px 12px; }
  .topbar-brand { display: contents; }
  .topbar-middle { display: contents; }
  .nav-toggle { display: inline-flex; order: 1; flex: none; }
  .topbar-home { order: 2; flex: 1 1 0; min-width: 0; }
  .topicons { order: 3; margin-left: auto; flex: none; }
  .topbar-firm { order: 4; flex: 1 1 100%; margin-left: 0; padding-left: 0; border-left: 0; }
  .topsearch { order: 5; flex: 1 1 100%; max-width: none; min-height: 44px; }
  .topbar-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .topbar-company { margin-left: 0; }
  .topbar-tagline { white-space: normal; }
  .icon-btn { width: 44px; height: 44px; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: 270px; max-width: 85vw; overflow-y: auto; box-shadow: 0 12px 32px var(--shadow); transform: translateX(-100%); transition: transform 0.2s ease; }
  .nav-open .sidebar { transform: translateX(0); }
  .nav-item, .nav-urgent, .nav-subitem, .nav-plain, .seg, .add-btn, .add-menu a, .menu-item { min-height: 44px; }
  .nav-collapse { width: 44px; height: 44px; }
  .nav-plus::before { inset: -7px; } /* 44px touch target */
  /* S10-094 (10.7): at phone width the Urgent panel fills the screen, with its close button */
  .urgent-panel { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: none; border: 0; border-radius: 0; z-index: 25; }
  .urgent-close { width: 44px; height: 44px; }
  .main { padding: 16px 12px 32px; }
  .listsearch { max-width: none; min-height: 44px; }
  /* case page (S3 3.9): the card's rows wrap; the tabs scroll sideways; 44px touch targets */
  .case-card { padding: 14px 14px; }
  .case-tabs { position: relative; flex-wrap: nowrap; overflow-x: auto; } /* positioned: S3-012a */
  .case-tab, .folder-btn, .doc-action, .title-btn, .row-action { min-height: 44px; }
  .sort-head { display: inline-block; padding: 12px 0; } /* 44px touch area (S4-015) */
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* S4-017: case laws and drafts */
.cited-us, .status-final { background: var(--litigation-chip-bg); color: var(--indigo-text); }
.cited-other { background: var(--due-soon-bg); color: var(--due-soon-text); }
.cited-court, .status-draft { background: var(--disposed-bg); color: var(--disposed-text); }
.status-filed, .status-sent { background: var(--pending-bg); color: var(--pending-text); }
a.chip { text-decoration: none; }
.made-in { font-size: 12px; color: var(--muted); font-weight: 500; }
.register-row[data-detail] { cursor: pointer; }
.register-row[data-detail]:focus-visible { outline: 2px solid var(--indigo-text); outline-offset: -2px; }
.detail-panel { margin-top: 12px; background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; padding: 16px 20px; }
.detail-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.detail-list { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; }
.detail-list dt { color: var(--muted); font-weight: 600; }
.detail-list dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.draft-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.draft-head .detail-title { margin: 0; }
.draft-head .grow { flex: 1 1 auto; }
.versions { list-style: none; margin: 0; padding: 0; }
.version-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--row-line); font-size: 14px; }
.version-no { font-weight: 700; min-width: 28px; }
.version-date { color: var(--muted); }
.version-note { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.panel-sub { margin: -4px 0 8px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.mark-panel form { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 600px) {
  .detail-list { grid-template-columns: 1fr; gap: 2px; }
  .detail-list dd { margin-bottom: 6px; }
}

/* S4-018: documents produced with an application (production and mark-exhibited mockups) */
.chip-production { background: var(--litigation-chip-bg); color: var(--indigo-text); }
.chip-exhibited { background: var(--pending-bg); color: var(--pending-text); }
.chip-closed { background: var(--disposed-bg); color: var(--disposed-text); }
.produced-with { font-size: 13px; color: var(--muted); }
.production-row > td { padding: 0 12px 14px 12px; border-bottom: 1px solid var(--row-line); }
.production-box { margin-left: 120px; border: 1px solid var(--title-btn-border); border-radius: 10px; background: var(--production-box-bg); }
.production-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; }
.production-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--indigo-text); }
.produced-list { list-style: none; margin: 0; padding: 0; }
.produced-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 14px; border-top: 1px solid var(--row-line); font-size: 14px; }
.produced-no { color: var(--muted); min-width: 20px; }
.produced-title { flex: 1 1 220px; min-width: 0; color: var(--indigo-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.produced-title:hover { text-decoration: underline; }
.produced-from { color: var(--muted); font-size: 13px; }
.produced-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-left: auto; }
.go-to { color: var(--indigo-text); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
.go-to:hover { text-decoration: underline; }
.inline-form { display: inline; margin: 0; }
.link-button { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--indigo-text); text-decoration: underline; cursor: pointer; }
.exhibit-note { margin: 8px 0 4px; padding: 10px 14px; border-radius: 10px; background: var(--page-bg); font-size: 14px; color: var(--secondary); }
.register-row:target { background: var(--active-nav-bg); }
@media (max-width: 900px) {
  .production-box { margin-left: 0; }
  .produced-status { margin-left: 0; }
}

/* S4-019: RTI (RTI-Mockup, RTI-first-appeal-due, RTI-second-appeal-due) */
.rti-thread { margin-top: 20px; }
.rti-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.rti-heading { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.rti-head-line { margin: 0; font-size: 14px; color: var(--secondary); overflow-wrap: anywhere; }
.rti-stages { list-style: none; margin: 0; padding: 0; }
.rti-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 18px; padding-bottom: 18px; }
.rti-step::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--panel-border); }
.rti-step:last-child::before { bottom: 18px; }
.rti-circle { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: 14px; font-weight: 700; }
.rti-circle.is-pending { background: var(--page-bg); color: var(--muted); border: 2px dashed var(--dashed-border); }
.rti-stage { min-width: 0; background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; padding: 14px 18px; }
.rti-stage.is-due { border-color: var(--due-border); }
.rti-stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.rti-stage-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.rti-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--due-border); border-radius: 8px; background: var(--urgent-item-bg); color: var(--overdue-text); font-size: 14px; font-weight: 600; }
.rti-banner .days-left { color: var(--overdue-text); }
.rti-rows { margin: 0; }
.rti-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 16px; padding: 4px 0; font-size: 14px; }
.rti-row dt { color: var(--muted); }
.rti-row dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.days-left { color: var(--secondary); }
.rti-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.register-row.is-chosen { background: var(--active-nav-bg); }
.rti-applications .page-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); }
.rti-applicant { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rti-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.rti-search .field { width: 100%; }
.rti-search .field-input { flex: 1 1 240px; }
.rti-cases { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
@media (max-width: 600px) {
  .rti-row { grid-template-columns: 1fr; gap: 0; }
  .rti-step { grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; }
  .rti-step::before { left: 13px; }
  .rti-circle { width: 28px; height: 28px; }
}

/* S4-020: the Export pop-up (styled as the Mark as exhibited and Mark as filed / sent panels) */
.export-part { margin: 14px 0 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.export-group { border: 1px solid var(--panel-border); border-radius: 10px; margin-top: 8px; background: var(--white); }
.export-group > summary { cursor: pointer; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--secondary); }
.export-lines, .export-cases { list-style: none; margin: 0; padding: 0 12px 8px; }
.export-line, .export-cases li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--row-line); font-size: 14px; }
.export-line label { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.export-cases { padding: 4px 0; }
.export-cases label { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.export-question { margin: 6px 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.exported-from { font-size: 13px; color: var(--muted); }
.export-group .field-note { padding: 0 12px 8px; }

/* S4-020a: the dashed file area wherever a file is chosen; one-line cells */
.file-area { position: relative; }
.upload-drop-small { min-height: 56px; padding: 10px 14px; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.cell-nowrap { white-space: nowrap; }

/* S5-031: Add case, Add proposed litigation, Edit case details: a dialog over the page (mockup) */
.dialog-backdrop { display: flex; justify-content: center; align-items: flex-start; padding: 32px 16px; background: var(--overlay); min-height: 100%; }
.dialog { width: 100%; max-width: 620px; background: var(--white); border-radius: 14px; box-shadow: 0 20px 50px var(--shadow); }
.dialog-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--row-line); }
.dialog-title { flex: 1; margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); }
.dialog-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--input-border); border-radius: 8px; color: var(--secondary); font-size: 20px; text-decoration: none; }
.dialog-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; }
.dialog-section { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); }
.dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--row-line); }
.case-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* R23b (P11): Date of disposal (with its hint) and Result, the form's gap between them */
.status-step { display: flex; flex-direction: column; gap: 16px; }
.field-sub { margin-top: 6px; font-weight: 500; }
.court-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.pill { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--input-border); border-radius: 999px; background: var(--white); color: var(--secondary); font-size: 14px; font-weight: 600; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill:has(input:checked), .pill.is-chosen { background: var(--primary); border-color: var(--primary); color: var(--white); }
.pill:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.step-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.step-district { grid-template-columns: 1fr 2fr; }
.js [data-off] { display: none !important; }
.case-number-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.case-preview { padding: 12px 14px; border: 1px solid var(--title-btn-border); border-radius: 10px; background: var(--active-nav-bg); color: var(--indigo-text); font-size: 15px; }
.preview-label { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.preview-number { font-weight: 800; color: var(--indigo-text); }
/* the searchable drop-down (static/js/combobox.js, D130) */
.combo { position: relative; min-width: 0; }
.combo-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; max-height: 264px; margin: 4px 0 0; padding: 4px 0; overflow-y: auto; overflow-x: hidden; list-style: none; background: var(--white); border: 1px solid var(--input-border); border-radius: 10px; box-shadow: 0 10px 24px var(--shadow); }
.combo-option { min-height: 44px; display: flex; align-items: center; padding: 8px 14px; font-size: 15px; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.combo-option.is-active { background: var(--active-nav-bg); color: var(--indigo-text); }
.combo-new { font-weight: 700; color: var(--indigo-text); }
@media (max-width: 560px) {
  .dialog-backdrop { padding: 0; }
  .dialog { border-radius: 0; box-shadow: none; }
  .dialog-head, .dialog-body, .dialog-foot { padding-left: 16px; padding-right: 16px; }
  .step-two, .step-district { grid-template-columns: 1fr; }
  .case-number-row { grid-template-columns: 1fr 1fr; }
  .case-number-row .case-type-field { grid-column: 1 / -1; }
}

/* S6-032 (D133): Update next date beside a passed date; the Next date of Edit case details */
.next-date-update { display: inline-block; margin-left: 8px; vertical-align: middle; }
.next-date-update > summary { list-style: none; }
.next-date-update > summary::-webkit-details-marker { display: none; }
.btn-update-date { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 8px; background: var(--primary); color: var(--white); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.btn-update-date:hover { background: var(--primary-hover); }
.btn-update-date:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.next-date-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--white); }
.next-date-input { width: auto; min-width: 0; max-width: 100%; }
.date-with-picker { display: flex; gap: 8px; align-items: center; }
.date-with-picker .field-input { flex: 1; min-width: 0; }
.date-picker-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.date-picker-btn { min-height: 44px; }
@media (max-width: 560px) {
  .next-date-update { display: block; margin: 6px 0 0; }
  .next-date-form { flex-direction: column; align-items: stretch; }
  .next-date-input { width: 100%; }
}

/* S6-033: the Roznama tab (spec S6 6.1–6.5; mockup 1) and its form (mockup 2) */
.roznama { display: flex; flex-direction: column; gap: 14px; }
.roznama-banner { padding: 12px 16px; border: 1px solid var(--due-border); border-radius: 10px; background: var(--urgent-item-bg); color: var(--overdue-text); font-size: 15px; font-weight: 700; }
.roznama-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.roznama-count { color: var(--muted); font-size: 14px; }
/* the table scrolls inside its box at phone width (S3 3.9) */
.table-scroll { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid var(--panel-border); border-radius: 12px; }
.roznama-table { width: 100%; border-collapse: collapse; background: var(--white); }
.roznama-table th { padding: 12px 14px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--muted); border-bottom: 1px solid var(--row-line); background: var(--table-header-bg); }
.roznama-table td { padding: 14px; vertical-align: top; border-bottom: 1px solid var(--row-line); color: var(--ink); font-size: 14px; }
.roznama-date { font-weight: 700; white-space: nowrap; }
.roznama-text, .roznama-notes { white-space: pre-line; overflow-wrap: anywhere; min-width: 160px; }
.roznama-row.is-not-updated td { background: var(--urgent-item-bg); }
.roznama-row.is-greyed td { color: var(--muted); }
.roznama-missing { color: var(--overdue-text); font-weight: 700; }
.roznama-add { display: inline-flex; min-height: 36px; padding: 6px 14px; margin-left: 8px; text-decoration: none; }
.roznama-actions { white-space: nowrap; text-align: right; }
.roznama-actions .note-confirm { display: inline-block; }
.roznama-alert { color: var(--overdue-text); font-weight: 600; }
.roznama-box { min-height: 150px; resize: vertical; }
.roznama-question { padding: 12px 14px; border: 1px solid var(--stack-line-border); border-radius: 10px; background: var(--stack-line-bg); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.roznama-question .note-question { flex: 1 1 100%; margin: 0; }
.field-input.is-fixed { background: var(--page-bg); color: var(--secondary); }

/* S6-034: the Next dates page (D131) */
.next-dates { display: flex; flex-direction: column; gap: 18px; }
.next-dates .page-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); }
.nd-day { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nd-day-words { font-size: 17px; font-weight: 700; color: var(--ink); }
.nd-arrow { min-width: 44px; min-height: 44px; font-size: 18px; }
.nd-jump { display: flex; gap: 8px; align-items: center; }
.nd-jump .field-input { width: auto; }
.nd-section { display: flex; flex-direction: column; gap: 10px; }
.nd-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.nd-count { color: var(--muted); font-weight: 600; }
.nd-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.nd-table-box { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid var(--panel-border); border-radius: 12px; }
.nd-table { width: 100%; border-collapse: collapse; background: var(--white); }
.nd-table th { padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--muted); border-bottom: 1px solid var(--row-line); background: var(--table-header-bg); white-space: nowrap; }
.nd-table td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--row-line); font-size: 14px; color: var(--ink); }
.nd-row.is-saved td { color: var(--muted); }
.nd-saved { font-weight: 600; }
.nd-date { width: auto; min-width: 150px; }

/* S5-036 (D143): Change next date, a small pencil beside the case card's next date */
.next-date-change { margin-left: 4px; }
.next-date-change > summary.pencil-btn { cursor: pointer; }
@media (max-width: 560px) {
  .next-date-change:not([open]) { display: inline-block; margin: 0 0 0 4px; }
}

/* S5-036 (D146): the same case number warning (amber, 4.5:1 in the palette test) and the card mark */
.same-number-warning { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--due-soon-text); border-radius: 10px; background: var(--due-soon-bg); color: var(--due-soon-text); font-size: 14px; font-weight: 600; }
.same-number-warning p { margin: 0; overflow-wrap: anywhere; }
.same-number-warning p + p { margin-top: 6px; }
.same-number-warning a { color: var(--due-soon-text); text-decoration: underline; }
.same-number { display: inline-block; max-width: 100%; vertical-align: baseline; }
.same-number > summary { list-style: none; }
.same-number > summary::-webkit-details-marker { display: none; }
.same-number-mark { display: inline-flex; align-items: center; min-height: 24px; color: var(--due-soon-text); font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.same-number-mark:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.same-number.is-hidden .same-number-mark { min-width: 24px; justify-content: center; }
.same-number-list { margin: 6px 0 0; padding: 8px 12px; list-style: none; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--white); color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.same-number-list li + li { margin-top: 4px; }
.same-number-list a { color: var(--primary-hover); font-weight: 600; }
.same-number-hide { display: block; margin: 6px 0 0; }
.link-btn { min-height: 24px; padding: 0; border: 0; background: none; color: var(--primary-hover); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.link-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* S4-021 (4.1.12, the upload mockup): the page strip, its cards and the photo clean-up */
.strip-sub { color: var(--muted); font-size: 14px; }
.strip .panel-title { display: inline; }
.strip-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.strip-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.strip-card.is-dragged { opacity: 0.5; }
.strip-thumb { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 200px; padding: 8px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--white); cursor: grab; }
.strip-marks { display: flex; align-items: center; gap: 6px; align-self: stretch; margin-bottom: 6px; }
.strip-no { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 700; }
.chip-cleaned { background: var(--pending-bg); color: var(--pending-text); }
.chip-not-cleaned { background: var(--due-soon-bg); color: var(--due-soon-text); }
.strip-img { display: block; max-width: 100%; height: auto; max-height: 200px; border: 1px solid var(--row-line); }
.strip-look { display: block; max-width: 100%; }
.strip-tools { display: flex; gap: 8px; margin-top: 8px; }
.strip-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--white); color: var(--secondary-2); font-size: 18px; cursor: pointer; }
.strip-btn:hover, .strip-move:hover, .strip-switch:hover { background: var(--active-nav-bg); }
.strip-btn:focus-visible, .strip-move:focus-visible, .strip-switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.strip-name { color: var(--secondary); font-size: 13px; text-align: center; overflow-wrap: anywhere; }
.strip-moves { display: flex; gap: 6px; }
.strip-move, .strip-switch { flex: 1 1 0; min-height: 36px; padding: 4px 6px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--white); color: var(--indigo-text); font-size: 12px; font-weight: 600; cursor: pointer; }
.strip-switch[aria-pressed="false"] { color: var(--muted); }
.strip-waiting { margin: 0; color: var(--secondary); font-size: 14px; overflow-wrap: anywhere; }
.strip-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.strip-add-label { flex: 1 1 220px; min-height: 110px; }
.js-strip .strip-add-btn { display: none; }
.clean-mode { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.clean-choice { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--white); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.clean-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.clean-choice:has(input:checked) { border: 2px solid var(--primary); color: var(--indigo-text); }
.clean-choice:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.originals { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.originals-list { margin: 0; padding-left: 18px; font-size: 14px; overflow-wrap: anywhere; }
.compare-row { display: flex; flex-wrap: wrap; gap: 16px; }
.compare-side { flex: 1 1 280px; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--white); }
.compare-label { margin: 0 0 8px; color: var(--ink); font-size: 15px; font-weight: 700; }
.compare-img { display: block; max-width: 100%; height: auto; border: 1px solid var(--row-line); }
@media (max-width: 560px) {
  .strip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .strip-thumb { min-height: 160px; }
}

/* S4-022 (4.4.7): Admin › Templates */
.templates-page { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.page-sub { margin: 0; color: var(--secondary); font-size: 14px; overflow-wrap: anywhere; }
.template-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--white); }
.template-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.template-name { margin: 0; color: var(--ink); font-size: 17px; font-weight: 700; }
.template-state { color: var(--muted); font-size: 14px; }
.template-fields { margin: 0; color: var(--secondary); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.template-fields code { padding: 1px 5px; border-radius: 6px; background: var(--table-header-bg); color: var(--ink); font-size: 13px; }
.template-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.template-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 320px; min-width: 0; }
.template-upload .file-area { flex: 1 1 220px; min-width: 0; }
.template-versions { margin: 0; padding-left: 18px; color: var(--secondary); font-size: 14px; overflow-wrap: anywhere; }

/* S4-022 (4.4.7, 4.4.8, the RTI draft mockups): the drafting screen */
.rti-draft { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.draft-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.draft-back { color: var(--primary-hover); font-size: 15px; font-weight: 600; text-decoration: none; }
.draft-title { margin: 0; color: var(--ink); font-size: 22px; font-weight: 800; }
.draft-sub { color: var(--muted); font-size: 14px; }
.draft-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.draft-left { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.draft-preview { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-heading { margin: 0; color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; }
.preview-box { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--white); }
.preview-page { display: block; width: 100%; height: auto; border: 1px solid var(--row-line); }
.annex-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.annex-heading { margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; }
.annex-sub { color: var(--muted); font-size: 13px; }
.annex-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.annex-row { display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; gap: 6px 10px; padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--white); cursor: grab; }
.annex-row.is-dragged { opacity: 0.5; }
.annex-grip { color: var(--muted); letter-spacing: -2px; }
.annex-tick { width: 22px; height: 22px; accent-color: var(--primary); }
.annex-letter { color: var(--indigo-text); font-size: 14px; font-weight: 700; white-space: nowrap; }
.annex-row.is-off .annex-letter { color: var(--muted); }
.annex-title { min-width: 0; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.annex-source { grid-column: 2 / -1; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.annex-note { margin-left: 6px; color: var(--due-soon-text); font-weight: 600; }
.annex-moves { grid-column: 2 / -1; display: flex; gap: 6px; }
.annex-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.annex-pick { flex: 1 1 220px; min-width: 0; }
.annex-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; }
.annex-upload .file-area, .draft-signed .file-area { flex: 1 1 180px; min-width: 0; }
.draft-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.draft-signed { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 300px; min-width: 0; }
.draft-note { color: var(--secondary); font-size: 14px; overflow-wrap: anywhere; }

/* S5B-037 (B1): the Clients page, the client page, Choose the client, the form's client line */
.clients-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.clients-search { display: flex; flex-wrap: wrap; gap: 10px; max-width: 640px; }
.clients-search .field-input { flex: 1 1 240px; min-width: 0; }
.client-row { cursor: pointer; }
.client-row:hover { background: var(--table-header-bg); }
.cell-address { overflow-wrap: anywhere; min-width: 180px; }
.cell-count { text-align: right; }
.empty-text { margin: 0; color: var(--muted); font-size: 15px; }
.client-card { display: flex; flex-direction: column; gap: 10px; }
.client-details { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.client-details div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.client-details dt { min-width: 80px; color: var(--muted); font-size: 14px; font-weight: 600; }
.client-details dd { flex: 1 1 220px; min-width: 0; margin: 0; color: var(--ink); font-size: 15px; white-space: pre-line; overflow-wrap: anywhere; }
.client-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.choose-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.choose-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--white); color: var(--ink); text-decoration: none; }
.choose-row:hover, .choose-row:focus-visible { background: var(--active-nav-bg); }
.choose-name { font-weight: 700; color: var(--indigo-text); }
.choose-address { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.choose-list .load-more { padding: 10px 14px; color: var(--muted); }
.client-line { margin: 0 0 6px; color: var(--secondary); font-size: 15px; overflow-wrap: anywhere; }
.client-line b { color: var(--ink); }
.client-change { margin-left: 8px; color: var(--primary-hover); font-weight: 600; }

/* S5B-038 (B2, B3): party colours (D141, on screen only), the cause titles, the Case title page */
.party-ours { color: var(--party-ours); font-weight: 600; }
.party-with { color: var(--party-with); font-weight: 600; }
.party-other { color: var(--party-other); font-weight: 600; }
.party-legend { margin: 6px 0 0; color: var(--secondary); font-size: 13px; }
.title-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cause-title { width: 100%; }
.cause-lines { display: flex; flex-direction: column; gap: 4px; max-width: 760px; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.cause-lines p { margin: 0; }
.cause-heading { text-align: center; font-weight: 700; }
.cause-number { text-align: center; font-weight: 600; margin-bottom: 6px; }
.cause-party.is-wrong, .cause-party.is-wrong span { color: var(--muted); font-weight: 400; }
.cause-label { text-align: right; font-style: italic; color: var(--secondary); }
.cause-between { text-align: center; font-weight: 700; margin: 4px 0; }
.title-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.title-pills { align-self: flex-start; max-width: 100%; flex-wrap: wrap; }
.title-settings { max-width: 640px; }
.party-section { max-width: 760px; }
.party-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.party-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--row-line); border-radius: 10px; overflow-wrap: anywhere; }
.party-row.is-wrong { background: var(--table-header-bg); }
.party-row.is-wrong span { color: var(--muted); }
.party-number { color: var(--secondary); font-weight: 600; }
.party-advocate { color: var(--secondary); font-size: 14px; }
.party-wrong { color: var(--muted); font-size: 13px; }
.party-action { display: inline; }
.party-pick { display: flex; flex-direction: column; gap: 6px; padding: 0 20px 10px; }

/* S5B-039: RNP Filed by, the second level (a party of the chosen side); a long name never
   widens the form at phone width */
.filed-party { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filed-party[hidden] { display: none; }
.upload-details select.field-input { min-width: 0; max-width: 100%; text-overflow: ellipsis; }

/* S5B-040: the Roznama ORDER column ("Order" or "No order"); the table scrolls in its box */
.roznama-order { white-space: nowrap; }
.roznama-order-link { font-weight: 600; color: var(--primary); }

/* S5B-041: connected matters and applications; the joint roznama switch (wraps at phone width) */
.case-link-line { margin: 4px 0 0; font-size: 14px; color: var(--secondary); }
.linked-matters { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 14px 18px; background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; min-width: 0; }
.linked-title { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.linked-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.roznama-switch { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 10px; border: 1px solid var(--panel-border); border-radius: 10px; overflow: hidden; width: fit-content; max-width: 100%; }
.roznama-switch .seg { flex: 1 1 auto; }
.roznama-matter { white-space: nowrap; }

/* S0-046: the public website in the approved look (docs/spec/website/home-mockup.html; spec S0 W).
   Inter (vendored), the ws- tokens above; the sticky header, the minimal hero (no screenshot), the
   colourful feature grid with inline SVG icons, Who it's for, the gradient assurance band, the final
   call and the dark footer. Phone width: one column below 860 px, and the header fits 390 px. */
.site { background: var(--ws-paper); color: var(--ws-ink); font-size: 17px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.site h1, .site h2, .site h3 { margin: 0; letter-spacing: -0.022em; line-height: 1.04; font-weight: 800; }
.site p { margin: 0; }
.site a { color: inherit; text-decoration: none; }
html:has(body.site) { scroll-behavior: smooth; }
.ws-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; width: 100%; }
.ws-narrow { max-width: 720px; }
.ws-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 14px 26px; font: inherit; font-weight: 700; font-size: 16px; border: 0; cursor: pointer; transition: transform 0.15s ease; min-height: 44px; }
.ws-btn:hover { transform: translateY(-2px); }
.site .ws-btn-coral { background: var(--ws-coral-ink); color: var(--white); box-shadow: 0 12px 26px -12px var(--ws-glow); }
.site .ws-btn-ghost { background: transparent; color: var(--ws-ink); border: 2px solid var(--ws-ink); }
.ws-btn-big { font-size: 18px; padding: 16px 36px; }
.ws-header { position: sticky; top: 0; z-index: 50; background: var(--ws-header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ws-line); }
.ws-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 74px; }
.ws-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ws-logo { width: 40px; height: 40px; flex: none; border-radius: 12px; background: linear-gradient(135deg, var(--ws-violet), var(--ws-coral-ink)); display: grid; place-items: center; color: var(--white); font-weight: 800; font-size: 20px; }
.ws-brand b { font-weight: 800; font-size: 20px; }
.ws-brand b span { color: var(--ws-coral-ink); }
.ws-brand small { display: block; color: var(--ws-muted); font-size: 12px; font-weight: 600; margin-top: -2px; }
.ws-navlinks { display: flex; gap: 28px; align-items: center; font-weight: 600; }
.site .ws-navlinks a:hover { color: var(--ws-coral-ink); }
.ws-navright { display: flex; gap: 14px; align-items: center; flex: none; }
.ws-login { font-weight: 700; }
.ws-hero { position: relative; overflow: hidden; text-align: center; }
.ws-blob { position: absolute; border-radius: 50%; filter: blur(12px); opacity: 0.5; z-index: 0; }
.ws-blob-a { width: 420px; height: 420px; background: var(--ws-gold-tint); top: -130px; right: -60px; }
.ws-blob-b { width: 360px; height: 360px; background: var(--ws-violet-tint); top: 40px; left: -150px; }
.ws-blob-c { width: 300px; height: 300px; background: var(--ws-teal-tint); top: 260px; right: 120px; }
.ws-blob-d { width: 260px; height: 260px; background: var(--ws-coral-tint); top: 40px; right: 300px; }
.ws-hero-inner { position: relative; z-index: 1; padding: 92px 0 80px; }
.ws-hero h1 { font-size: 60px; max-width: 16ch; margin: 0 auto; }
.ws-u { background: linear-gradient(120deg, var(--ws-coral-ink), var(--ws-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ws-sub { margin: 26px auto 0; font-size: 21px; color: var(--ws-muted); max-width: 58ch; }
.ws-cta { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ws-mini { margin-top: 20px; color: var(--ws-muted); font-size: 15px; }
.ws-section { padding: 30px 0; }
.ws-lead { text-align: center; max-width: 42ch; margin: 40px auto 0; }
.ws-lead h2 { font-size: 36px; }
.ws-lead p { color: var(--ws-muted); font-size: 19px; margin-top: 14px; }
.ws-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ws-feature { background: var(--white); border: 1px solid var(--ws-line); border-radius: 22px; padding: 30px; min-width: 0; }
.ws-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px; }
.ws-ic svg { width: 26px; height: 26px; stroke-width: 2; fill: none; stroke: currentColor; }
.ws-feature h3 { font-size: 20px; }
.ws-feature p { color: var(--ws-muted); margin-top: 10px; font-size: 15.5px; }
.ws-i-coral { background: var(--ws-coral-tint); color: var(--ws-coral-ink); }
.ws-i-violet { background: var(--ws-violet-tint); color: var(--ws-violet); }
.ws-i-gold { background: var(--ws-gold-tint); color: var(--ws-gold-ink); }
.ws-i-teal { background: var(--ws-teal-tint); color: var(--ws-teal-ink); }
.ws-i-green { background: var(--ws-green-tint); color: var(--ws-green-ink); }
.ws-i-plum { background: var(--ws-plum-tint); color: var(--ws-violet); }
.ws-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.ws-card { border-radius: 22px; padding: 28px; min-width: 0; }
.ws-card h3 { font-size: 19px; }
.ws-card p { color: var(--ws-muted); margin-top: 8px; font-size: 15px; }
.ws-k-coral { background: var(--ws-coral-tint); }
.ws-k-teal { background: var(--ws-teal-tint); }
.ws-k-violet { background: var(--ws-violet-tint); }
.ws-assure { margin: 56px 0; }
.ws-assure-box { background: linear-gradient(120deg, var(--ws-violet), var(--ws-purple) 55%, var(--ws-coral-ink)); border-radius: 28px; color: var(--white); padding: 46px; text-align: center; }
.ws-assure h2 { font-size: 30px; color: var(--white); }
.ws-assure p { margin: 12px auto 26px; color: var(--white); font-size: 17px; max-width: 48ch; }
.ws-stats { display: flex; gap: 46px; justify-content: center; flex-wrap: wrap; }
.ws-stat b { display: block; font-size: 34px; font-weight: 800; }
.ws-stat span { color: var(--white); font-size: 14px; }
.ws-final { text-align: center; padding: 30px 0 86px; }
.ws-final h2 { font-size: 38px; max-width: 20ch; margin: 0 auto; }
.ws-final p { color: var(--ws-muted); margin: 16px auto 28px; font-size: 19px; }
.ws-footer { background: var(--ws-ink); color: var(--ws-foot-text); padding: 44px 0; }
.ws-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center; }
.ws-foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.site .ws-foot-links a { color: var(--ws-foot-link); font-weight: 600; }
.ws-made { color: var(--ws-gold); font-weight: 700; }
.ws-page { padding: 56px 0 72px; }
.ws-page-title { font-size: 36px; margin: 0 0 24px; }
.ws-panel { background: var(--white); border: 1px solid var(--ws-line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow-wrap: anywhere; color: var(--ws-ink); font-size: 16px; }
.ws-panel p { color: var(--ws-muted); }
.ws-form .field { color: var(--ws-ink); }
.ws-form .ws-btn { align-self: flex-start; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signin .back-to-site { align-self: flex-start; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--indigo-text); text-decoration: none; }
@media (max-width: 860px) {
  .ws-navlinks { display: none; }
  .ws-hero h1 { font-size: 40px; }
  .ws-sub { font-size: 18px; }
  .ws-hero-inner { padding: 56px 0 40px; }
  .ws-grid, .ws-cards { grid-template-columns: 1fr; }
  .ws-lead h2 { font-size: 28px; }
  .ws-final h2 { font-size: 30px; }
  .ws-assure-box { padding: 34px 22px; }
}
@media (max-width: 480px) {
  .ws-wrap { padding: 0 16px; }
  .ws-brand small { display: none; }
  .ws-navright { gap: 10px; }
  .ws-navright .ws-btn { padding: 10px 16px; font-size: 15px; }
  .ws-hero h1 { font-size: 34px; }
}

/* S0-044: the Super Admin console (spec S0 C2). The firm frame's classes and colours; tables scroll
   inside their box at phone width. */
.console-page { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.console-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.console-head .page-title { margin: 0; }
.console-panel { background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; max-width: 640px; min-width: 0; overflow-wrap: anywhere; }
.console-form { gap: 10px; }
.console-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.console-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.console-table th { text-align: left; padding: 10px 12px; background: var(--table-header-bg); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.console-table td { padding: 10px 12px; border-top: 1px solid var(--panel-border); vertical-align: top; color: var(--ink); }
.console-table td.num { text-align: right; }
.console-muted { color: var(--muted); font-size: 13px; display: block; }
.console-search { display: flex; gap: 8px; flex: 1 1 260px; max-width: 420px; }
.console-top-right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.console-who { color: var(--secondary); font-weight: 600; }
.temporary-password { font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--ink); }
@media (max-width: 600px) {
  .console-who { display: none; }
}

/* S0-045: the console's requests, master lists and notices; the notice banner in the firm frame (the
   form-notice colours: an existing pair). All wrap at phone width. */
.notice-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--due-soon-bg); color: var(--due-soon-text); font-size: 14px; overflow-wrap: anywhere; }
.notice-title { font-weight: 700; }
.notice-text { flex: 1 1 240px; min-width: 0; }
.notice-got-it { margin-left: auto; }
.console-tabs { flex-wrap: wrap; width: fit-content; max-width: 100%; }
.console-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.console-inline .field-input { min-width: 0; flex: 1 1 160px; }
.console-note { margin: 0 0 6px; color: var(--secondary); white-space: normal; overflow-wrap: anywhere; }
.console-request-actions { min-width: 220px; }
.console-dates { display: flex; flex-wrap: wrap; gap: 12px; }
.console-dates .case-field { flex: 1 1 160px; }

/* S7-047 (spec S7 7.1): the bell. A pending date in bold red with the bell in front; the box opens
   under it and stays within the screen (frame.js places it against the window). */
.bell { position: relative; display: inline-block; }
.bell > summary { list-style: none; }
.bell > summary::-webkit-details-marker { display: none; }
.bell-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: var(--overdue-text); cursor: pointer; }
.bell-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
.date-pending { color: var(--overdue-text); font-weight: 800; }
.bell-pop { position: absolute; z-index: 40; top: 100%; left: 0; margin-top: 6px; width: 300px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--due-border); border-radius: 10px; background: var(--white); box-shadow: 0 10px 30px var(--shadow); font-size: 13px; font-weight: 500; line-height: 1.5; text-align: left; white-space: normal; }
.bell-head { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; color: var(--urgent-badge-text); font-weight: 800; }
.bell-text { margin: 0; color: var(--secondary); }
.bell-text + .bell-head { margin-top: 10px; }
/* S7 7.2: the UPDATE column (small buttons) and the Roznama tab's top line */
.cell-update { white-space: nowrap; }
.update-buttons { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.btn-update { gap: 6px; color: var(--secondary); white-space: nowrap; }
.cell-update .btn-update { min-height: 32px; padding: 4px 8px; border-radius: 8px; font-size: 12px; }
.roznama-top .btn-update { margin-right: auto; }
.roznama-top .roznama-count { flex: 1 1 auto; }
/* S7 7.3: Manual update · next date */
.manual-update { max-width: 420px; }
.manual-case { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.manual-last { color: var(--muted); }
.cal-head { display: flex; align-items: center; justify-content: space-between; color: var(--ink); }
.cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--input-border); border-radius: 8px; color: var(--secondary); text-decoration: none; }
.cal-nav.is-off { visibility: hidden; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-weekday { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-day { display: flex; align-items: center; justify-content: center; min-height: 36px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; color: var(--ink); text-decoration: none; }
a.cal-day:hover { background: var(--active-nav-bg); color: var(--indigo-text); }
.cal-day.is-off { color: var(--muted); text-decoration: line-through; }
.cal-day.is-today { border-color: var(--primary); font-weight: 700; text-decoration: none; }
.cal-day.is-chosen, a.cal-day.is-chosen:hover { background: var(--primary); color: var(--white); font-weight: 700; }
.chosen-date { margin: 0; padding: 10px 12px; border: 1px solid var(--title-btn-border); border-radius: 10px; background: var(--active-nav-bg); color: var(--indigo-text); font-weight: 700; }
.manual-roznama { margin: 0; font-size: 13px; color: var(--muted); }
.manual-update .btn[disabled] { opacity: 1; cursor: not-allowed; }
@media (max-width: 600px) {
  /* S7-047: at phone width the UPDATE cell's buttons sit under each other (7.2) */
  .update-buttons { flex-direction: column; align-items: flex-start; }
  .bell-pop { width: calc(100vw - 32px); }
}
/* S7-048 (spec S7 7.7): the Next dates list and the left bar's badge (as mockup S7-9) */
.nav-count { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; background: var(--urgent-badge-bg); color: var(--urgent-badge-text); font-size: 12px; font-weight: 700; line-height: 1.5; }
.nd-pending { margin-bottom: 8px; }
.nd-pending .nd-number a { font-weight: 700; color: var(--indigo-text); white-space: nowrap; }
.nd-what { color: var(--secondary); }
.next-dates > .nd-table-box + .nd-section { margin-top: 24px; }
/* S9-050 (spec S9 9.1, 9.2): the Paper book tab and the left bar's Paper books */
.pb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pb-count { color: var(--secondary-2); font-size: 14px; }
.pb-new { display: inline-flex; align-items: center; text-decoration: none; }
.pb-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pb-empty p { margin: 0; }
.pb-actions { white-space: nowrap; }
.pb-actions .doc-action { margin-right: 6px; }
.pb-row.is-greyed td { color: var(--muted); background: var(--table-header-bg); }
.paper-books-page { display: flex; flex-direction: column; gap: 12px; }
/* the pop-up */
.wizard { max-width: 760px; }
.wizard-body { gap: 14px; }
.wiz-steps { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 700; }
.wiz-step { padding: 4px 10px; border-radius: 999px; background: var(--disposed-bg); color: var(--muted); }
.wiz-step.is-done { background: var(--litigation-chip-bg); color: var(--indigo-text); }
.wiz-step.is-current { background: var(--primary); color: var(--white); }
.pb-group { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pb-legend { margin: 0 0 4px; padding: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.pb-folder, .pb-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--panel-border); border-radius: 10px; color: var(--ink); cursor: pointer; }
.pb-folder-name { flex: 1 1 auto; font-weight: 600; }
.pb-folder-count { color: var(--muted); font-size: 13px; }
.pb-option > span { display: flex; flex-direction: column; font-weight: 600; }
.pb-hint { font-weight: 400; font-size: 13px; color: var(--muted); }
.pb-note { margin: 0; font-size: 13px; color: var(--muted); }
.pb-muted { color: var(--muted); }
.pb-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-pill { font: inherit; font-size: 13px; font-weight: 700; min-height: 36px; padding: 4px 12px; border: 1px solid var(--title-btn-border); border-radius: 999px; background: var(--white); color: var(--indigo-text); cursor: pointer; }
.pb-pill.is-active { background: var(--primary); border-color: var(--primary); color: var(--white); }
.pb-stack { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--title-btn-border); border-radius: 8px; background: var(--active-nav-bg); color: var(--ink); }
.pb-stack-question { margin: 0 0 6px; font-weight: 700; color: var(--indigo-text); }
.pb-choice { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-height: 32px; }
.pb-seq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pb-seq-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--white); color: var(--ink); }
.pb-seq-title { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.pb-num { width: 120px; flex: 0 0 auto; }
.pb-moves { display: inline-flex; gap: 4px; }
.pb-move { min-width: 44px; padding: 4px 10px; }
.pb-cover-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.pb-cover-fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pb-cover-preview { box-sizing: border-box; width: 250px; min-height: 354px; padding: 24px 18px; border: 1px solid var(--input-border); background: var(--white); display: flex; flex-direction: column; align-items: center; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 10px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.pb-cover-preview p { margin: 0 0 10px; }
.pb-cv-case, .pb-cv-heading { font-weight: 700; }
.pb-cv-heading { font-size: 14px; letter-spacing: 1px; margin-top: 8px; }
.pb-cv-foot { margin-top: auto; }
.pb-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pb-stat { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 10px; color: var(--ink); }
.pb-stat-label { font-size: 12px; color: var(--muted); }
.pb-samples { display: flex; gap: 16px; justify-content: center; padding: 16px; border-radius: 10px; background: var(--page-bg); }
.pb-sample { width: 260px; max-width: 100%; height: auto; border: 1px solid var(--input-border); background: var(--white); }
.pb-sample-box { display: flex; flex-direction: column; align-items: center; max-width: 100%; }  /* R33 (D210) */
.pb-sample-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.pb-progress { margin: 0; font-weight: 700; color: var(--indigo-text); }
/* S9-050: phone width */
@media (max-width: 600px) {
  .pb-cover-grid { grid-template-columns: 1fr; }
  .pb-cover-preview { width: 100%; }
  .pb-samples { flex-direction: column; align-items: center; padding: 10px; }
  .pb-summary { grid-template-columns: 1fr; }
  .pb-num { width: 100%; }
}

/* --- S10-092: reminders and the case's Limitation tab (spec S10, mockups S10-1 to S10-3) --- */
.chip-limitation { background: var(--photo-chip-bg); color: var(--photo-chip-text); }
.chip-general { background: var(--general-chip-bg); color: var(--general-chip-text); }
.reminders { display: flex; flex-direction: column; gap: 14px; }
.reminders-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reminders-count { flex: 1 1 auto; color: var(--secondary-2); font-size: 14px; }
.reminders-show-done { display: flex; align-items: center; gap: 6px; margin: 0; }
.rem-show-done { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--secondary); min-height: 40px; }
.rem-show-done input, .rem-check input, .rem-radio input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
.btn-tiny { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.reminders-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: 14px; }
.reminders-table th { padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; color: var(--muted); border-bottom: 1px solid var(--panel-border); background: var(--table-header-bg); white-space: nowrap; }
.reminders-table td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--row-line); color: var(--ink); }
.reminder-row.is-done { background: var(--done-row-bg); }
.reminder-what { min-width: 220px; }
.reminder-due { white-space: nowrap; }
.reminder-due .due-date { font-weight: 600; }
.reminder-time, .reminder-remind { font-size: 13px; color: var(--secondary-2); }
.reminder-for { font-size: 13px; white-space: nowrap; }
.struck { color: var(--struck-text); text-decoration: line-through; }
.reminder-done-by { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12px; color: var(--pending-text); }
.reminder-actions { white-space: nowrap; }
.reminder-actions form { display: inline; margin: 0; }
.row-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 8px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--white); color: var(--secondary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; vertical-align: middle; }
.reminder-actions .pencil-btn { vertical-align: middle; }
.reminder-dialog .rem-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.reminder-dialog .rem-group legend { width: 100%; margin-bottom: 6px; padding: 0; }
.rem-radio { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 14px; font-weight: 500; color: var(--ink); }
.rem-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.rem-check { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--input-border); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.rem-check:has(input:checked) { border-color: var(--title-btn-border); background: var(--choice-on-bg); }
.rem-picked { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 4px; }
.rem-user { width: 100%; }
.rem-when { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-input.is-warned { border-color: var(--warn-border); }
.rem-warning { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--stack-line-border); border-radius: 10px; background: var(--stack-line-bg); color: var(--due-soon-text); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.rem-warning[hidden], .rem-picked[hidden], .rem-user[hidden], .btn-tiny[hidden] { display: none; }
.reminders-top .btn { text-decoration: none; }
.rem-warning svg { flex: none; margin-top: 2px; }
.rem-delete { align-items: flex-start; }
.rem-delete-btn { list-style: none; color: var(--overdue-text); }
.rem-delete-btn::-webkit-details-marker { display: none; }
@media (max-width: 600px) {
  .rem-when { grid-template-columns: 1fr; }
  .reminders-top .btn { width: 100%; text-align: center; }
}

/* --- S10-093: snooze, and the Reminders and Limitation pages (spec S10 10.3, 10.4; mockup S10-4) --- */
.nav-count.nav-count-soon { background: var(--due-soon-bg); color: var(--due-soon-text); }
.rem-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rem-page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rem-page-title { flex: 1 1 auto; margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); }
.rem-page-head .btn, .rem-page-head .btn-outline { text-decoration: none; }
.rem-filters-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rem-filters { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.rem-filter { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--input-border); border-radius: 999px; background: var(--white); color: var(--secondary); font-size: 13px; font-weight: 700; text-decoration: none; }
.rem-filter.is-on { border-color: var(--primary); background: var(--primary); color: var(--white); }
.rem-page-table { background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; }
.reminder-case { white-space: nowrap; font-weight: 700; }
.reminder-case-link { color: var(--primary-hover); font-weight: 700; text-decoration: none; }
.reminder-case-link:hover, .reminder-case-link:focus-visible { text-decoration: underline; }
.reminder-snoozed { margin-top: 3px; font-size: 12px; color: var(--muted); }
.rem-auto-checks { padding: 14px 16px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--white); }
.rem-auto-title { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--ink); }
.rem-auto-line { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink); }
.rem-see-list { color: var(--primary-hover); font-weight: 600; }
.rem-case-search { display: flex; gap: 8px; }
.rem-case-search .field-input { flex: 1 1 auto; min-width: 0; }
.reminder-dialog .rem-case-choices { flex-direction: column; align-items: flex-start; gap: 2px; }
.reminder-dialog .rem-group legend.visually-hidden { width: 1px; margin: 0; }
/* the Snooze pop-up: a <details>; its box is fixed in the middle of the screen, so a table that
   scrolls sideways never cuts it off, and it fits a 390 px phone */
.snooze { display: inline-block; vertical-align: middle; }
.snooze > summary { list-style: none; }
.snooze > summary::-webkit-details-marker { display: none; }
.snooze-pop { position: fixed; z-index: 60; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 6px; width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 14px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--white); box-shadow: 0 12px 32px var(--shadow); white-space: normal; }
.reminder-actions .snooze-pop { display: flex; margin: 0; }
.snooze-title { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--ink); }
.snooze-choice { min-height: 40px; padding: 8px 12px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--white); color: var(--secondary); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.snooze-choice:hover, .snooze-choice:focus-visible { border-color: var(--title-btn-border); background: var(--choice-on-bg); }
.snooze-pick { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--row-line); min-width: 0; }
.snooze-pick-title { padding: 0; font-size: 13px; font-weight: 700; color: var(--secondary); }
.snooze-pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.snooze-pick-row .field-input { min-width: 0; }
.snooze-pick .field-hint { margin: 0; }
.snooze-pick .btn { align-self: flex-start; }
@media (max-width: 600px) {
  .rem-page-head .rem-add { width: 100%; text-align: center; }
}

/* --- S10-094: the Urgent panel (spec S10 10.5, mockup S10-5) --- */
.nav-count.nav-count-urgent { background: var(--urgent-strong); color: var(--white); }
.urgent-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--white); color: var(--secondary-2); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.urgent-close:focus-visible, .urgent-snoozed-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.urgent-body { display: flex; flex-direction: column; gap: 0; }
.urgent-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 0 0 8px; border-bottom: 1px solid var(--row-line); font-size: 13px; color: var(--muted); }
.urgent-snoozed { display: contents; }
.urgent-snoozed-btn { list-style: none; color: var(--primary-hover); font-weight: 600; text-decoration: underline; cursor: pointer; }
.urgent-snoozed-btn::-webkit-details-marker { display: none; }
.urgent-snoozed-btn::before { content: "· "; color: var(--muted); text-decoration: none; display: inline-block; margin-right: 4px; }
.urgent-snoozed-list { flex: 1 1 100%; margin-top: 6px; border: 1px solid var(--row-line); border-radius: 10px; background: var(--table-header-bg); }
.urgent-line { display: flex; align-items: flex-start; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--row-line); }
.urgent-snoozed-list .urgent-line { padding: 10px 10px; }
.urgent-snoozed-list .urgent-line:last-child { border-bottom: 0; }
.urgent-chip { flex: none; min-width: 84px; text-align: center; }
.urgent-chip.is-red { background: var(--urgent-badge-bg); color: var(--urgent-badge-text); }
.urgent-chip.is-amber { background: var(--due-soon-bg); color: var(--due-soon-text); }
.urgent-what { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.urgent-text { font-weight: 600; overflow-wrap: anywhere; }
.urgent-due { font-size: 12.5px; font-weight: 700; }
.urgent-due.is-red { color: var(--overdue-text); }
.urgent-due.is-amber { color: var(--due-soon-text); }
.urgent-note { font-size: 12px; color: var(--muted); }
.urgent-actions { flex: none; display: flex; align-items: flex-start; gap: 6px; }
.urgent-actions form { margin: 0; }
.urgent-actions a.row-btn { text-decoration: none; }
.urgent-empty, .urgent-loading { margin: 12px 0 4px; font-size: 14px; color: var(--secondary); }
@media (max-width: 480px) {
  .urgent-line { flex-wrap: wrap; }
  .urgent-what { flex-basis: calc(100% - 100px); }
  .urgent-actions { width: 100%; justify-content: flex-end; }
}
.snooze-pop[hidden] { display: none; } /* S10-094: the panel's shared pop-up while closed */

/* --- S10-095: Admin › Settings (spec S10 10.6, mockup S10-6) --- */
.settings-page { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.settings-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); }
.settings-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--white); }
.settings-group { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.settings-heading { padding: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.settings-sub { margin: 4px 0 2px; font-size: 14px; color: var(--muted); }
.settings-choices { display: flex; flex-direction: column; gap: 10px; }
.settings-choice { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 12px 14px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--white); cursor: pointer; }
.settings-choice:has(input:checked) { border-color: var(--title-btn-border); background: var(--choice-on-bg); }
.settings-choice input { accent-color: var(--primary); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.settings-choice-label { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.settings-choice-explain { display: block; font-size: 13.5px; color: var(--muted); }
.settings-always { margin: 2px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--secondary-2); line-height: 1.6; }
.settings-foot { display: flex; justify-content: flex-end; }
@media (max-width: 600px) {
  .settings-card { padding: 14px 12px; }
  .settings-foot .btn { width: 100%; }
}

/* --- S11-096: tasks — the forms, the chips (11.2) and the plain task page --- */
.task-dialog { width: min(640px, 100%); }
.task-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.task-three { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
.task-dialog .task-case-choices { flex-direction: column; align-items: flex-start; gap: 2px; }
.task-dialog .rem-group legend.visually-hidden { width: 1px; margin: 0; }
.task-note-box { min-height: 72px; resize: vertical; }
.task-approval { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--title-btn-border); border-radius: 10px; background: var(--choice-on-bg); font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.task-approval input { accent-color: var(--primary); width: 18px; height: 18px; margin: 0; flex: none; }
.task-next { margin: 0; font-size: 13.5px; color: var(--muted); }
.task-next[hidden] { display: none; }
.task-small-what { margin: 0; font-weight: 600; color: var(--ink); }
.task-chip.task-waiting { background: var(--due-soon-bg); color: var(--due-soon-text); }
.task-chip.task-open { background: var(--litigation-chip-bg); color: var(--indigo-text); }
.task-chip.task-done, .task-chip.task-approval-chip { background: var(--photo-chip-bg); color: var(--photo-chip-text); }
.task-chip.task-closed { background: var(--pending-bg); color: var(--pending-text); }
.task-chip.task-declined, .task-chip.task-high { background: var(--urgent-badge-bg); color: var(--urgent-badge-text); }
.task-chip.task-cancelled { background: var(--disposed-bg); color: var(--disposed-text); }
.task-tab-top { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.task-tab-top .btn, .task-buttons .btn-outline, .task-buttons .btn { text-decoration: none; }
.task-page { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.task-back { margin: 0; font-size: 14px; }
.task-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.task-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.task-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--white); }
.task-facts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--muted); }
.task-facts dd { margin: 2px 0 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.task-alert { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--due-border); border-radius: 10px; background: var(--urgent-item-bg); color: var(--overdue-text); font-size: 14px; font-weight: 600; }
.task-alert svg { flex: none; }
.task-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.task-buttons form { margin: 0; }
.task-cancel { color: var(--overdue-text); }
.task-heading { margin: 10px 0 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.task-notes, .task-history { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.task-notes li { padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--white); }
.task-note-who { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; color: var(--secondary-2); }
.task-note-text { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.task-none { font-size: 14px; color: var(--muted); }
.task-note-add { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.task-note-add textarea { width: 100%; }
.task-history li { font-size: 13.5px; color: var(--secondary); }
.task-history-at { font-weight: 700; color: var(--secondary-2); white-space: nowrap; }
@media (max-width: 600px) {
  .task-two, .task-three { grid-template-columns: 1fr; }
  .task-facts { grid-template-columns: 1fr 1fr; }
}

/* --- S11-097: the Tasks page, the case's Tasks tab, the task panel and the bells (spec S11 11.4, 11.5, 11.7) --- */
.tasks-table .task-cell { min-width: 240px; }
.task-name { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.task-name:hover, .task-name:focus-visible { color: var(--primary-hover); text-decoration: underline; }
.task-need { margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--overdue-text); }
.task-bell { display: inline-block; margin-right: 4px; vertical-align: middle; }
.task-bell .bell-btn { padding: 0; }
.task-row.is-open { background: var(--choice-on-bg); }
.task-row.is-cancelled td { color: var(--struck-text); }
.task-person { white-space: nowrap; font-size: 13.5px; }
.task-due { white-space: nowrap; }
.task-due .due-date { font-weight: 600; }
.task-normal { font-size: 13px; color: var(--muted); }
.task-panel { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 28px; background: var(--white); border-left: 1px solid var(--panel-border); box-shadow: -12px 0 30px var(--shadow); }
.task-panel-head { display: flex; align-items: flex-start; gap: 12px; }
.task-panel-title { flex: 1 1 auto; margin: 0; font-size: 19px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.task-panel .dialog-close { flex: none; }
.task-panel-title:focus { outline: none; } /* focused on opening, for screen readers */
.task-panel .task-facts { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
  .task-panel { left: 0; width: auto; border-left: 0; box-shadow: none; padding: 14px 12px 24px; }
}

/* --- S11-098: Messages (spec S11 11.5, mockup S11-6) --- */
.msg-btn { position: relative; }
.msg-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: var(--white); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.add-menu.messages-menu { width: min(380px, calc(100vw - 16px)); padding: 0; max-height: min(560px, calc(100vh - 80px)); overflow-y: auto; }
.msg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--row-line); }
.msg-title { font-size: 15px; font-weight: 800; color: var(--ink); }
.msg-head form { margin: 0; }
.msg-link { border: 0; background: none; padding: 4px 0; min-height: 32px; color: var(--primary-hover); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.msg-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 10px 14px 10px 28px; border-bottom: 1px solid var(--row-line); color: var(--ink); text-decoration: none; }
.msg-item:hover, .msg-item:focus-visible { background: var(--table-header-bg); }
.msg-item.is-unread { background: var(--choice-on-bg); }
.msg-item.is-unread .msg-text { font-weight: 600; }
.msg-dot { position: absolute; left: 11px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.msg-text { font-size: 14px; overflow-wrap: anywhere; }
.msg-at { font-size: 12px; color: var(--muted); }
.msg-none { margin: 0; padding: 14px; font-size: 14px; color: var(--muted); }
.msg-all { display: block; padding: 12px 14px; text-align: center; color: var(--primary-hover); font-size: 14px; font-weight: 600; }
.msg-page .rem-page-head form { margin: 0; }
.msg-list { display: flex; flex-direction: column; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--white); overflow: hidden; }
.msg-list .msg-item:last-child { border-bottom: 0; }

/* --- S12-099: Admin › Roles and permissions (spec S12 12.2, mockup S12-1) and the first-time
   prompt (12.3, mockup S12-2). The grid scrolls sideways inside its box; PERMISSION stays fixed. */
.roles-page { display: flex; flex-direction: column; gap: 14px; max-width: 1000px; }
.roles-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.roles-head-text { flex: 1 1 320px; min-width: 0; }
.roles-head .btn-outline, .roles-head .btn { text-decoration: none; }
.roles-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.perm-box { position: relative; background: var(--white); border: 1px solid var(--panel-border); border-radius: 12px; overflow-x: auto; }
.perm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 640px; }
.perm-table thead th { padding: 10px 12px; font-size: 12px; letter-spacing: 0.5px; font-weight: 700; color: var(--muted); background: var(--table-header-bg); border-bottom: 1px solid var(--panel-border); vertical-align: top; }
.perm-table th.perm-head-first { text-align: left; }
.perm-table th.perm-role { text-align: center; min-width: 150px; }
.perm-table th[scope="row"], .perm-table th.perm-head-first { position: sticky; left: 0; z-index: 1; background: var(--white); box-shadow: 1px 0 0 var(--panel-border); }
.perm-table thead th.perm-head-first { background: var(--table-header-bg); z-index: 2; }
.perm-table th[scope="row"] { text-align: left; font-weight: 400; color: var(--ink); padding: 8px 12px; border-bottom: 1px solid var(--row-line); min-width: 190px; }
.perm-table td.perm-cell { padding: 8px 12px; border-bottom: 1px solid var(--row-line); text-align: center; }
.perm-table td.perm-group { padding: 9px 12px; background: var(--disposed-bg); color: var(--ink); font-weight: 800; font-size: 13px; letter-spacing: 0.3px; }
.perm-group-name { position: sticky; left: 12px; }
.perm-later { font-size: 12px; color: var(--muted); }
.perm-all { font-size: 13px; color: var(--muted); }
.perm-role-name { display: block; padding-top: 6px; }
.perm-name { width: 100%; min-width: 120px; font: inherit; font-size: 13px; font-weight: 700; color: var(--secondary); text-align: center; padding: 5px 8px; border: 1px solid var(--input-border); border-radius: 7px; background: var(--white); }
.perm-select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--input-border); border-radius: 7px; background: var(--white); color: var(--ink); }
.perm-box-tick { width: 18px; height: 18px; accent-color: var(--primary); }
.perm-delete { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--overdue-text); }
.perm-error { display: block; margin-top: 4px; letter-spacing: 0; text-transform: none; }
.users-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.users-actions .btn-outline { text-decoration: none; }
.roles-prompt-backdrop { position: fixed; inset: 0; z-index: 50; overflow-x: hidden; overflow-y: auto; padding: 90px 16px; }
.roles-prompt-words { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.roles-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; font-size: 13.5px; }
.roles-card { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--panel-border); border-radius: 10px; padding: 10px 12px; color: var(--ink); }
.roles-card span { color: var(--muted); }
@media (max-width: 480px) {
  .users-actions { width: 100%; }
  .roles-prompt-backdrop { padding: 16px 8px; }
}

/* --- S12-100: Add / Edit user with role and the user's own boxes (spec S12 12.4, mockup S12-3), and
   the Users list (mockup S12-5). */
.user-dialog { max-width: 760px; }
.user-stack { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 760px; }
.user-stack .dialog { max-width: none; }
.user-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.user-fixed { margin: 6px 0 0; color: var(--ink); }
.perm-panel { margin: 4px 0 0; padding: 14px 16px; border: 1px solid var(--panel-border); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.perm-panel-head { display: flex; align-items: baseline; gap: 12px; }
.perm-panel-title { flex: 1; padding: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.perm-heading { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
.perm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.perm-item, .perm-see { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.perm-item label { flex: 0 1 auto; min-width: 0; }
.perm-see { flex-wrap: wrap; }
.perm-item input { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.perm-item label.is-changed { color: var(--indigo-text); font-weight: 700; }
.perm-changed { padding: 1px 8px; border-radius: 999px; background: var(--litigation-chip-bg); color: var(--indigo-text); font-size: 12px; font-weight: 700; }
.perm-more summary { cursor: pointer; text-align: center; color: var(--primary-hover); font-weight: 600; text-decoration: underline; padding: 6px 0; }
.perm-more[open] summary { margin-bottom: 10px; }
.user-access { padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.user-access-title { margin: 0; font-size: 15px; font-weight: 800; }
.user-access form { margin: 0; }
.btn-danger-outline { color: var(--overdue-text); }
.btn-danger { background: var(--overdue-text); }
.remove-form { display: flex; flex-direction: column; gap: 12px; }
.users-table .user-no { color: var(--muted); width: 1%; white-space: nowrap; }
.users-table .user-id { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.users-table .user-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.users-table .user-pencil { width: 36px; height: 36px; border: 1px solid var(--input-border); color: var(--secondary-2); }
.role-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--disposed-bg); color: var(--disposed-text); white-space: nowrap; }
.role-chip.role-admin { background: var(--photo-chip-bg); color: var(--photo-chip-text); }
.role-chip.role-senior { background: var(--litigation-chip-bg); color: var(--indigo-text); }
@media (max-width: 480px) {
  .user-grid { grid-template-columns: 1fr; }
  .perm-cols { grid-template-columns: 1fr; }
}

/* --- S12-101: lawyers on a case (spec S12 12.5, mockup S12-4) --- */
.lawyer-case { margin: 0; font-size: 15px; color: var(--ink); }
.lawyer-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lawyer-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: var(--litigation-chip-bg); color: var(--indigo-text); font-size: 14px; font-weight: 600; cursor: pointer; }
.lawyer-chip input { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; }
.lawyer-add { font: inherit; font-size: 14px; min-height: 36px; padding: 4px 10px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--white); color: var(--ink); max-width: 100%; }
.lawyer-note { margin: 0; padding: 10px 14px; border: 1px solid var(--title-btn-border); border-radius: 10px; background: var(--signin-panel); color: var(--indigo-text); font-size: 14px; line-height: 1.5; }
.case-card-tools { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.case-card-tools .assign-lawyers { text-decoration: none; }