/* Theme (docs/UI.md § Direction): Basecoat Mira 1.0.2 + Firstclass navy, radius 6, system font, light only. */
:root {
  --primary: oklch(36% 0.09 256);
  --primary-foreground: oklch(98.5% 0 0);
  --ring: oklch(36% 0.09 256);
  --radius: 0.375rem;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --page: 78rem;
}

body { font-family: var(--font-sans); background: var(--muted); color: var(--foreground); margin: 0; }

.top { background: var(--background); border-bottom: 1px solid var(--border); }
.top-inner { max-width: var(--page); margin: 0 auto; padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.brand { color: var(--primary); font-weight: 650; text-decoration: none; letter-spacing: -0.01em; }
.brand small { color: var(--muted-foreground); font-weight: 400; margin-left: var(--space-2); }
.top nav { display: flex; align-items: center; gap: var(--space-3); color: var(--muted-foreground); font-size: 0.875rem; }
.top nav form { margin: 0; }

main { max-width: var(--page); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8);
  display: grid; gap: var(--space-4); }
h1 { font-size: 1.375rem; font-weight: 650; margin: 0; letter-spacing: -0.01em; }
h1 small { display: block; font-size: 0.9375rem; font-weight: 400; color: var(--muted-foreground); margin-top: var(--space-1); }
.muted { color: var(--muted-foreground); }
.small { font-size: 0.8125rem; }
.pre { white-space: pre-wrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
a:not(.btn) { color: var(--primary); }
.cases td { white-space: normal; }
.cases td.nowrap { white-space: nowrap; }
.cases .mob { display: none; }

.narrow { max-width: 26rem; width: 100%; margin: var(--space-8) auto 0; }
.stack { display: grid; gap: var(--space-3); }
.search { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.search .input { flex: 1 1 18rem; }
.search .select { flex: 0 0 auto; width: auto; }

.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
dl { display: grid; gap: var(--space-2); margin: 0; }
dl > div { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-3); font-size: 0.875rem; }
dt { color: var(--muted-foreground); }
dd { margin: 0; overflow-wrap: anywhere; }

.docs { list-style: none; margin: 0; padding: 0; }
.docs li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.docs li:first-child { border-top: 0; }
.docs .meta { display: block; font-size: 0.8125rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.actions form { margin: 0; }
.qr { width: 12rem; height: 12rem; display: block; margin: 0 auto; }
code.secret { overflow-wrap: anywhere; }

@media (max-width: 40rem) {
  dl > div { grid-template-columns: 1fr; gap: 0; }
  .cases thead { display: none; }
  .cases tr { display: grid; grid-template-columns: 1fr auto; padding: var(--space-2) 0; }
  .cases td { border: 0; padding: 0 var(--space-2); }
  .cases td.opt { display: none; }
  .cases .mob { display: block; grid-column: 1 / -1; color: var(--muted-foreground); font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Search hits */
.badge { font-size: 0.75rem; padding: 0.125rem var(--space-2); border-radius: var(--radius); }
.cases tr.has-hits { border-bottom: 0; }
.cases .hit-row td { padding-top: 0; white-space: normal; }
.hits { list-style: none; margin: 0; padding: 0 0 var(--space-1) var(--space-4); display: grid; gap: var(--space-1); font-size: 0.8125rem; }
.hit-where { font-weight: 600; margin-right: var(--space-1); }
.hit-text { color: var(--muted-foreground); overflow-wrap: anywhere; white-space: normal; }
mark { background: oklch(92% 0.12 95); color: inherit; border-radius: 2px; padding: 0 1px; }
.doc-title { text-decoration: none; }
.doc-title:hover { text-decoration: underline; }

/* Document viewer (Basecoat dialog, enlarged) */
.dialog.viewer > div { max-width: min(80rem, calc(100% - 1.5rem)); height: calc(100% - 1.5rem); max-height: none;
  gap: var(--space-3); padding: var(--space-4); font-size: 0.875rem; }
.viewer-x { font-size: 1.5rem; line-height: 1; background: transparent; border: 0; cursor: pointer; width: 2rem; height: 2rem;
  color: var(--foreground); border-radius: var(--radius); }
.viewer-x:focus-visible { outline: 2px solid var(--ring); }
.dialog.viewer header { padding-right: var(--space-8); }
.dialog.viewer header p { margin: 0; color: var(--muted-foreground); }
.viewer-stage { position: relative; min-height: 0; flex: 1 1 auto; display: flex; background: var(--muted); border-radius: var(--radius); overflow: hidden; }
.viewer-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.viewer-stage img { margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-stage [hidden] { display: none; }
.viewer-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
.viewer-loading[hidden] { display: none; }
.dialog.viewer .viewer-bar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.viewer-spacer { flex: 1 1 auto; }
dialog.viewer::backdrop { background: oklch(20% 0.02 256 / 0.55); }
@media (max-width: 40rem) {
  .dialog.viewer > div { max-width: 100%; height: 100%; max-height: none; border-radius: 0; padding: var(--space-3); }
  .viewer-bar .btn { flex: 1 1 calc(50% - var(--space-2)); }
  .viewer-bar [data-viewer-close] { flex-basis: 100%; }
  .viewer-spacer { display: none; }
}

/* Preview pages (rendered inside the viewer's iframe) */
body.pv { background: var(--background); }
.pv-main { max-width: 48rem; padding: var(--space-4); display: block; }
.pv-none { text-align: center; padding: var(--space-8) 0; display: grid; gap: var(--space-3); }
.mail h1 { font-size: 1.125rem; margin-bottom: var(--space-3); }
.mail-head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.mail-head > div { grid-template-columns: 5rem 1fr; }
.mail-body { font-size: 0.9375rem; line-height: 1.55; overflow-wrap: anywhere; }
.mail-atts { margin-top: var(--space-6); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.mail-atts h2 { font-size: 0.9375rem; margin: 0 0 var(--space-2); }