/* Indian Litigation OS — workspace styles.
   Calm, dense, readable. Built for long sessions in front of a case file. */

:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #fbfbfa;
  --border: #e3e2de;
  --border-strong: #cfcec8;
  --text: #1c1b19;
  --text-2: #5c5a54;
  --text-3: #8a8780;
  --accent: #1f5c4d;
  --accent-soft: #e8f1ee;
  --accent-text: #164338;
  --verified: #1f5c4d;
  --verified-bg: #e8f1ee;
  --warn: #8a5a17;
  --warn-bg: #fbf1df;
  --danger: #9b2c2c;
  --danger-bg: #fbeaea;
  --demo: #6b4d8a;
  --demo-bg: #f1ebf7;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(28, 27, 25, 0.04), 0 4px 12px rgba(28, 27, 25, 0.04);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181a;
    --surface: #1e2022;
    --surface-2: #232527;
    --border: #2f3235;
    --border-strong: #41454a;
    --text: #eceae6;
    --text-2: #a8a5a0;
    --text-3: #7c7975;
    --accent: #6fb3a0;
    --accent-soft: #1d2b28;
    --accent-text: #8fc9b8;
    --verified: #6fb3a0;
    --verified-bg: #1d2b28;
    --warn: #d9a75a;
    --warn-bg: #2d2519;
    --danger: #e08b8b;
    --danger-bg: #2d1e1e;
    --demo: #b39ad4;
    --demo-bg: #26203010;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }
p { margin: 0 0 8px; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: currentColor; }

.muted { color: var(--text-2); }
.dim { color: var(--text-3); font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12px; }
.error { color: var(--danger); }

/* ---------- Sign in ---------- */

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.auth-panel {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 16px;
}

.auth-panel h1 { font-family: var(--serif); font-size: 26px; }

/* ---------- Shell ---------- */

.app-shell {
  display: grid;
  grid-template-columns: 224px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The wordmark reads as a law office, not a dashboard. */
.brand strong { display: block; font-family: var(--serif); font-size: 15px; line-height: 1.25; letter-spacing: 0.01em; }
.brand small { color: var(--text-3); font-size: 11px; }

nav { display: grid; gap: 1px; }
nav button {
  all: unset;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
}
nav button:hover { background: var(--surface-2); color: var(--text); }
nav button.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
/* Icons are drawn, not typed: a unicode glyph renders differently on every
   machine and at every weight, which is why the old set looked incidental. */
.ico { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
nav button .ico { opacity: 0.9; }
nav button.active .ico { opacity: 1; }

.sidebar-foot { margin-top: auto; display: grid; gap: 8px; }

/* Provider health. The lawyer needs to know when the system cannot do what the
   screens imply it can. */
.health { display: grid; gap: 5px; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.health-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.dot.on { background: var(--verified); }
.dot.off { background: var(--warn); }

/* ---------- Main ---------- */

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar h2 { font-size: 17px; }
.topbar .spacer { flex: 1; }
.search-wrap { position: relative; width: min(320px, 40vw); }
.search-wrap input { width: 100%; padding-left: 30px; }
.search-wrap::before {
  content: "⌕"; position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--text-3); font-size: 15px;
}

.content { padding: 22px 24px 64px; max-width: 1180px; width: 100%; }

/* ---------- Primitives ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.card.pad-0 { padding: 0; overflow: hidden; }

.card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.card-head h3 { flex: 1; }
.card-head .dim { font-weight: 400; }

section.stack { display: grid; gap: 16px; }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.split { display: grid; gap: 16px; grid-template-columns: minmax(280px, 340px) 1fr; align-items: start; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar nav { display: flex; flex-wrap: wrap; }
  .sidebar-foot, .health { display: none; }
  .split { grid-template-columns: 1fr; }
  .content { padding: 16px; }
}

/* Metric tile */
.metric { display: grid; gap: 2px; }
.metric b { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.metric span { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.metric small { color: var(--text-3); font-size: 11.5px; }

/* Rows */
.rows { display: grid; }
.row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: 0; }
.row-main { flex: 1; min-width: 0; }
.row-main strong { display: block; font-weight: 550; }
.row-main .dim { margin-top: 1px; }
.row-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.row.clickable { cursor: pointer; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--radius-sm); }
.row.clickable:hover { background: var(--surface-2); }

/* Buttons */
button, .btn {
  font-family: inherit; font-size: 13px; font-weight: 550;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.12s, border-color 0.12s;
}
/* Anchors styled as buttons (downloads) must not carry a link underline. */
.btn { display: inline-block; text-decoration: none; }
button:hover:not(:disabled), .btn:hover { background: var(--surface-2); border-color: var(--text-3); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover:not(:disabled), .btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
button.ghost, .btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
button.ghost:hover:not(:disabled), .btn.ghost:hover { background: var(--surface-2); color: var(--text); }
button.small, .btn.small { padding: 4px 9px; font-size: 12px; }
button.danger { color: var(--danger); border-color: var(--border-strong); }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar .spacer { flex: 1; }

/* Tabs */
.tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.tabs button {
  all: unset;
  padding: 9px 13px;
  font-size: 13.5px; font-weight: 550;
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--accent-text); border-bottom-color: var(--accent); }

/* Forms */
label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 550; color: var(--text-2); }
label.inline { display: flex; align-items: center; gap: 7px; font-weight: 500; }
input, select, textarea {
  font-family: inherit; font-size: 13.5px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  width: 100%;
  font-weight: 400;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.form-grid .wide { grid-column: 1 / -1; }
form { display: grid; gap: 14px; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.badge.verified { background: var(--verified-bg); color: var(--verified); border-color: transparent; }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge.danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.badge.demo { background: var(--demo-bg); color: var(--demo); border-color: transparent; }

/* Notices */
.notice {
  display: flex; gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.notice.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.notice.danger { background: var(--danger-bg); border-color: transparent; color: var(--danger); }
.notice.info { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.notice b { font-weight: 650; }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

/* Empty state */
.empty {
  text-align: center;
  padding: 32px 18px;
  color: var(--text-3);
  font-size: 13px;
}
.empty-ico {
  width: 26px; height: 26px; display: block; margin: 0 auto 8px;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.45;
}
.empty b { display: block; color: var(--text-2); font-weight: 600; margin-bottom: 3px; font-size: 13.5px; }

/* Loading */
.loading { display: grid; gap: 9px; padding: 4px 0; }
.skeleton {
  height: 12px; border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 25%, var(--surface-2) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}
.skeleton.w70 { width: 70%; }
.skeleton.w45 { width: 45%; }
@keyframes shimmer { to { background-position: -200% 0; } }

.spin { display: inline-block; animation: rot 0.8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

/* Toast */
#toasts {
  position: fixed; bottom: 20px; right: 20px; z-index: 100;
  display: grid; gap: 8px; max-width: 380px;
}
.toast {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: 13px;
  box-shadow: var(--shadow);
  animation: rise 0.18s ease-out;
}
.toast.bad { border-left-color: var(--danger); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Case header ---------- */

.case-head {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.case-head h1 { font-family: var(--serif); font-size: 23px; margin-bottom: 4px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.case-meta div { font-size: 12.5px; }
.case-meta span { display: block; color: var(--text-3); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Authority / source cards ---------- */

.source {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 13px;
  background: var(--surface);
}
.source.is-verified { border-left-color: var(--verified); }
.source.is-demo { border-left-color: var(--demo); }
.source.is-unverified { border-left-color: var(--warn); }
.source h4 { margin-bottom: 3px; }
.source .cite { font-size: 12.5px; color: var(--text-2); }
.source .excerpt {
  font-size: 13px; color: var(--text-2);
  margin-top: 8px; padding-left: 10px;
  border-left: 2px solid var(--border);
  font-family: var(--serif);
  line-height: 1.6;
}
.source .why { font-size: 12.5px; margin-top: 8px; }
.source-top { display: flex; align-items: flex-start; gap: 10px; }
.source-top > div:first-child { flex: 1; min-width: 0; }

/* ---------- Analysis output ---------- */

.analysis { display: grid; gap: 16px; }
.analysis-sec h4 {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.analysis-sec .body { font-size: 14px; line-height: 1.6; }
.analysis-sec ul { margin: 0; padding-left: 18px; }
.analysis-sec li { margin-bottom: 4px; }
.analysis-lead {
  font-family: var(--serif); font-size: 16px; line-height: 1.6;
  padding: 14px; background: var(--surface-2);
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.authority { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.authority:last-child { border-bottom: 0; }
.authority .prop { color: var(--text-2); margin-top: 3px; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
th {
  text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3);
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* ---------- Misc ---------- */

pre {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.cost {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--warn); background: var(--warn-bg);
  padding: 2px 6px; border-radius: 4px; font-weight: 600;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12px; padding: 3px 9px;
  border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent-text); }

.ask-bar {
  display: flex; gap: 8px; align-items: center;
  padding: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 16px;
}
.ask-bar input { flex: 1; }
.ask-bar select { width: auto; flex-shrink: 0; }

/* ---------- Drop zone: the primary action ---------- */

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover { border-color: var(--accent); background: var(--surface-2); }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.busy { cursor: progress; border-style: solid; border-color: var(--accent); }
.dz-inner { display: grid; gap: 5px; max-width: 520px; margin: 0 auto; }
.dz-icon { font-size: 28px; color: var(--accent); line-height: 1; }
.dz-inner b { font-size: 15px; }
.dz-progress {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-2);
}

/* The result of an upload, stated and left on screen. The previous version
   navigated away the instant it finished, so there was no moment at which the
   user was told it had worked. */
.dz-done {
  display: flex; align-items: center; gap: 12px;
  text-align: left;
  padding: 10px 12px;
  background: var(--verified-bg);
  border: 1px solid color-mix(in srgb, var(--verified) 35%, transparent);
  border-radius: var(--radius-sm);
}
.dz-done > div { flex: 1; }
.dz-tick {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: var(--verified); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.dz-failed {
  text-align: left;
  padding: 10px 12px;
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius-sm);
}
.dz-failed b { color: var(--danger); }

/* ---------- Briefing stage list ---------- */

.stages { display: grid; gap: 1px; }
.stage {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.stage-mark {
  width: 18px; height: 18px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
  background: var(--surface-2); color: var(--text-3);
  margin-top: 1px;
}
.stage.done { background: var(--verified-bg); }
.stage.done .stage-mark { background: var(--verified); color: #fff; }
.stage.running { background: var(--accent-soft); }
.stage.running .stage-mark { background: var(--accent); color: #fff; animation: pulse 1.2s ease-in-out infinite; }
.stage.failed { background: var(--danger-bg); }
.stage.failed .stage-mark { background: var(--danger); color: #fff; }
.stage.skipped { opacity: 0.72; }
.stage.pending { opacity: 0.5; }
@keyframes pulse { 50% { opacity: 0.45; } }

/* Withheld model output: available on request, never presented as an answer. */
details.unsupported { margin-top: 12px; }
details.unsupported > summary {
  cursor: pointer;
  font-size: 13px; font-weight: 550;
  color: var(--text-2);
  padding: 8px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  list-style: none;
}
details.unsupported > summary::-webkit-details-marker { display: none; }
details.unsupported > summary::before { content: "▸ "; color: var(--text-3); }
details.unsupported[open] > summary::before { content: "▾ "; }
details.unsupported > summary:hover { color: var(--text); border-color: var(--border-strong); }

/* ---------- Detailed analysis: authorities and arguments ---------- */

.auth {
  border: 1px solid var(--border);
  border-left: 3px solid var(--verified);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface);
  font-size: 13.5px;
}
.auth.analogy { border-left-color: var(--warn); border-left-style: dashed; }
.auth p { margin: 0 0 6px; }
.auth p:last-child { margin-bottom: 0; }
.auth b { font-weight: 650; }

.auth-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.auth-head strong { font-size: 14px; }

/* The line that goes into written submissions. */
.submission {
  font-family: var(--serif);
  font-size: 14px; line-height: 1.65;
  padding: 10px 12px;
  margin: 8px 0;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  color: var(--accent-text);
}
.risk {
  font-size: 13px;
  padding: 8px 11px;
  margin-top: 8px;
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: var(--radius-sm);
}

.argument {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin-bottom: 12px;
  background: var(--surface);
  font-size: 13.5px;
}
.argument p { margin: 0 0 6px; }
.arg-n {
  width: 20px; height: 20px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700;
}

/* Detail windows -----------------------------------------------------------
   A row in a chronology or a one-line issue is a summary. The detail behind it
   opens here rather than on another screen, so the reader does not lose their
   place in the list they were working through. */
.row.clickable, .auth.clickable { cursor: pointer; }
.row.clickable:hover, .auth.clickable:hover { background: var(--surface-2); }
.row.clickable:focus-visible, .auth.clickable:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.row.clickable .row-side { color: var(--text-3); }

#detail-window {
  width: min(760px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
#detail-window::backdrop { background: rgba(15, 18, 24, 0.5); }
#detail-window .detail-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
#detail-window .detail-head h3 { flex: 1; margin: 0; font-size: 15px; line-height: 1.35; }
#detail-window #detail-body { padding: 18px 20px 22px; }
#detail-window .analysis-sec { margin-bottom: 16px; }
#detail-window .rows { margin-top: 6px; }

/* The register of a court document -----------------------------------------
   Anything that is, or will become, part of the paper book is set in the serif:
   a cause title, the words of a judgment, a submission as it would be made, a
   draft to be copied out. Everything that is the application talking about those
   things stays in the sans. The difference is what tells a reader, at a glance,
   which of the two they are looking at. */
.excerpt, .produced, .submission, .detail-head h3 { font-family: var(--serif); }
.excerpt { font-size: 14px; line-height: 1.62; }
.produced { font-size: 14.5px; line-height: 1.7; }
.case-title, .matter-row strong, .auth-head strong { font-family: var(--serif); letter-spacing: 0.005em; }
.auth-head strong { font-size: 14px; }

/* A citation is a reference, and is read as one. */
.mono { letter-spacing: 0.01em; }

/* The sign-in page ---------------------------------------------------------
   Reached at /app or /login, and it is the first thing a new user sees of the
   workspace itself, so it carries the same mark as the public site rather than
   presenting a bare pair of fields. */
.auth-brand { display: grid; gap: 10px; justify-items: start; }
.auth-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
}
.auth-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auth-brand h1 { margin: 0; }
.auth-brand p { margin: 0; }
.auth-foot { margin: 0; font-size: 12.5px; color: var(--text-3); text-align: center; }
.auth-foot a { color: var(--text-2); }