/* Geist is self-hosted: the app is served over the network, so naming the family
   without shipping it means everyone but the author sees system-ui. */
@font-face { font-family: "Geist"; src: url("/static/fonts/Geist-Regular.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/static/fonts/Geist-Medium.woff2") format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/static/fonts/Geist-SemiBold.woff2") format("woff2");
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/static/fonts/GeistMono-Regular.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/static/fonts/GeistMono-Medium.woff2") format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }

/* Mail bridge — Continuum-style operator console.
   Tokens mirror ~/continuum/apps/web/src/index.css: glass surfaces, 12px radius, flat
   (depth from tone and edge, never a drop shadow). Lifted off pure black, and colour
   carries meaning on labels and pills rather than the interface being monochrome. */

:root {
  color-scheme: dark;

  /* Surfaces — lifted well clear of black, neutral rather than slate-blue. */
  --bg:            #121416;
  --bg-2:          #171a1d;
  --accent:        #ffffff;
  --glass-tile:    rgba(27, 30, 34, 0.95);
  --glass-strong:  rgba(18, 20, 22, 0.97);

  --fill:          rgba(255, 255, 255, 0.05);
  --fill-hi:       rgba(255, 255, 255, 0.09);
  --fill-hover:    rgba(255, 255, 255, 0.07);

  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.36);   /* a control outline needs 3:1; 0.17 measured 1.71 */
  --hair-inset:    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Text tiers */
  --text:          #f4f4f5;
  --muted:         #a1a1aa;
  --faint:         #9a9aa3;
  --ghost:         #8a8a93;

  /* Semantic colour. Each state owns a hue, a tint and an edge. */
  --win:  #4ade80;    /* logged / on record */
  --warn: #fb923c;    /* filtered */
  --bad:  #fca5a5;    /* failed */
  --info: #7dd3fc;    /* queued */
  --idle: #a1a1aa;    /* neutral */

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 12px;
  --radius-sm: 7px;
  --radius-pill: 999px;
  --gutter: 28px;
}

* { box-sizing: border-box; }
html, body { background: var(--bg); }

/* Grain sits BEHIND the content (shell is z-index 1), so it textures the substrate and
   never muddies text. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the gutter is always reserved, so opening the modal (which locks the scroll) never
   shifts the page sideways by the width of a disappearing scrollbar */
html { scrollbar-gutter: stable; }
html.modal-open { overflow: hidden; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12); border-radius: 5px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent; }

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

.shell { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- header readout ---------- */
.readout { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; padding: 26px 0 18px; }
.wordmark { display: inline-flex; align-items: center; gap: 8px;
  margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--text); }
.wordmark .sub { color: var(--ghost); font-weight: 400; letter-spacing: 0; margin-left: -3px; }

/* The Fractera mark: sized off the type it sits beside, optically centred on the cap
   height rather than the line box, so it reads as set WITH the word, not stuck to it. */
.mark { height: 0.72em; width: auto; flex: none; position: relative; top: -0.02em; }

/* ™ rides the cap line, small, and never takes the tracking of the word */
.tm { font-size: 0.62em; font-weight: 500; letter-spacing: 0; vertical-align: super;
  line-height: 1; margin-left: 1px; color: var(--ghost); }

.meters { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.meter {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 11px;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--hair-inset);
}
.meter b { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--text); font-variant-numeric: tabular-nums; }
.meter span { color: var(--faint); font-size: 11.5px; }
.meter.ok b   { color: var(--win); }
.meter.held b { color: var(--warn); }
.meter.wait b { color: var(--info); }
.meter.bad    { background: color-mix(in oklab, var(--bad) 14%, transparent); border-color: color-mix(in oklab, var(--bad) 30%, transparent); }
.meter.bad b  { color: var(--bad); }
.meter.is-zero { display: none; }
.meter.just-changed b { animation: tick 900ms var(--ease); }
@keyframes tick { from { color: #fff; } }

/* ---------- navigation ---------- */
.views { display: flex; align-items: center; gap: 4px; padding: 6px 0 14px; }
.views a, .views button.link {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  transition: color 160ms var(--ease), background 160ms var(--ease);
}
.views a:hover, .views button.link:hover { color: var(--text); background: var(--fill); }
.views .grp a:hover { background: none; color: var(--text); }
.views a[aria-current="page"] { color: var(--text); background: var(--fill-hi); box-shadow: var(--hair-inset); }
.views .spacer { margin-left: auto; }
.views form { margin: 0; display: inline-flex; }
button.link { background: none; border: 0; cursor: pointer; font: inherit; color: var(--info); }
.selcount button.link { text-decoration: underline; text-underline-offset: 2px; }

.views.sub { padding: 2px 0 10px; }
.views.sub.tier2 { padding-top: 0; gap: 18px; flex-wrap: wrap; }
/* Segmented control, Continuum's .seg: a recessed track with a raised active member. */
.views .grp {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; background: var(--fill); border-radius: 9px;
}
.views .grp a { padding: 4px 10px; border-radius: 6px; font-size: 12px; }
.views .grp a[aria-current="page"] { background: var(--fill-hi); color: var(--text); box-shadow: var(--hair-inset); }
.views a.export { color: var(--muted); }
.views a.export b { font-family: var(--font-mono); font-weight: 500; color: var(--text);
  font-variant-numeric: tabular-nums; }

/* ---------- connection strip ---------- */
.conns { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 0 16px; }
.conn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px 7px 11px;
  background: var(--glass-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--hair-inset);
  font-size: 12.5px; color: var(--muted);
}
.conn .route { margin-top: 0; }
.conn .addr { font-family: var(--font-mono); color: var(--text); font-size: 12.5px; }
.conn .note { color: var(--faint); }

/* ---------- pills: colour carries the state ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 500; line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.pill.ok   { color: var(--win);  background: color-mix(in oklab, var(--win)  14%, transparent); border-color: color-mix(in oklab, var(--win)  30%, transparent); }
.pill.warn { color: var(--warn); background: color-mix(in oklab, var(--warn) 14%, transparent); border-color: color-mix(in oklab, var(--warn) 30%, transparent); }
.pill.bad  { color: var(--bad);  background: color-mix(in oklab, var(--bad)  14%, transparent); border-color: color-mix(in oklab, var(--bad)  30%, transparent); }
.pill.info { color: var(--info); background: color-mix(in oklab, var(--info) 14%, transparent); border-color: color-mix(in oklab, var(--info) 30%, transparent); }
.pill.idle { color: #b4b4bd; background: color-mix(in oklab, var(--idle) 12%, transparent); border-color: color-mix(in oklab, var(--idle) 24%, transparent); }

/* ---------- the ledger ---------- */
.tablewrap {
  background: var(--glass-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--hair-inset);
  margin-bottom: 18px;
  isolation: isolate;
}
thead th:first-child { border-top-left-radius: var(--radius); }
thead th:last-child  { border-top-right-radius: var(--radius); }
tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; font-size: 10px; font-weight: 500; letter-spacing: 0.07em;
  color: var(--muted); text-transform: uppercase;
  padding: 12px 14px 11px 0;
  background: var(--glass-strong);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
thead th:first-child { padding-left: 16px; }
tbody td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody td:first-child { padding-left: 16px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 160ms var(--ease); }
tbody tr { border-left: 2px solid transparent; }
tbody tr[data-state="logged"]  { border-left-color: color-mix(in oklab, var(--win)  55%, transparent); }
tbody tr[data-state="skipped"] { border-left-color: var(--warn); }
tbody tr[data-state="error"]   { border-left-color: color-mix(in oklab, var(--bad)  60%, transparent);
                                 background: color-mix(in oklab, var(--bad) 7%, transparent); }
tbody tr[data-state="new"] { border-left-color: var(--info); }
tbody tr:hover { background: var(--fill); }
tbody tr:has(.rowbox:checked) { background: var(--fill-hi); }
tbody tr:hover td.subject .who,
tbody tr:has(.rowbox:checked) .who,
tbody tr:has(.rowbox:checked) td.reason { color: var(--muted); }

td.addr { font-family: var(--font-mono); font-size: 12px; color: var(--text);
  overflow-wrap: anywhere; }
td.when, td.num, td.ref { font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
td.when b { color: var(--text); font-weight: 500; }
td.subject { color: var(--text); }
.who { display: block; color: var(--ghost); font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
td.reason { font-size: 12.5px; }
td.ref a { color: var(--info); text-decoration: none; transition: color 160ms var(--ease); }
td.ref a:hover { color: var(--text); }
.brief { display: none; }   /* the short form is the mobile one only */
td.ref.name-cell { font-family: inherit; font-size: 13px; color: var(--text); white-space: normal; }
.count-0 { color: var(--faint); }

/* selection mark, drawn in the routing glyph's language */
.c-select { width: 44px; }
.c-mark   { width: 40px; }
.ref-col  { width: 124px; }
.c-when   { width: 104px; }
.c-files  { width: 66px; }
.c-outcome{ width: 168px; }
.c-count  { width: 92px; }
.c-seen   { width: 116px; }
.cbx { display: block; padding: 1px 10px 1px 0; cursor: pointer; }

input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 2px 0 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--fill);
  cursor: pointer; display: block;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
input[type=checkbox]:hover { border-color: var(--muted); }
input[type=checkbox]:checked {
  background-color: var(--win); border-color: var(--win);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2L9.4 3.6' fill='none' stroke='%23121416' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
input[type=checkbox]:indeterminate {
  background-color: var(--muted); border-color: var(--muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6h5.6' fill='none' stroke='%23121416' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

.route { display: block; width: 23px; height: 12px; overflow: visible; margin-top: 4px; }
.route line, .route path, .route polyline { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.route.is-logged  * { stroke: var(--win); }
.route.is-skipped * { stroke: var(--warn); }
.route.is-error   * { stroke: var(--bad); }
.route.is-new     * { stroke: var(--info); }

/* ---------- controls ---------- */
.filterbar { display: flex; gap: 8px; padding: 4px 0 12px; max-width: 520px; }
input[type=text], input[type=password], input[type=number], select {
  width: 100%;
  background: var(--fill);
  border: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12.5px;
  padding: 9px 11px;
  border-radius: 9px;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
input[type=text], input[type=password] { font-family: var(--font-mono); font-size: 12.5px; }
input:hover, select:hover { background: var(--fill-hover); }
input:focus, select:focus { outline: none; background: var(--fill-hi);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
::placeholder { color: var(--ghost); opacity: 1; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
/* Fields already show the 1px ring above; a second outline double-draws the focus. */
input:focus-visible, select:focus-visible { outline: none; }
input[type=checkbox]:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }

button.act {
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--hair-inset);
  color: var(--text);
  font-family: var(--font-sans); font-size: 12px;
  padding: 7px 12px; cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease),
              color 160ms var(--ease), transform 120ms var(--ease);
  white-space: nowrap;
}
button.act:hover:not([disabled]) { background: var(--fill-hi); border-color: var(--line-strong); }
button.act.quiet { background: none; box-shadow: none; color: var(--muted); }
button.act.quiet:hover:not([disabled]) { background: var(--fill); color: var(--text); }
button.act:active:not([disabled]) { transform: scale(0.97); }
button.act[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }

.actionbar { display: flex; align-items: center; gap: 8px; padding: 0 0 12px; min-height: 40px; }
.selcount { font-size: 12.5px; color: var(--muted); }
.selcount b { font-family: var(--font-mono); color: var(--text); font-weight: 500;
  font-variant-numeric: tabular-nums; }

.flash {
  margin: 0 0 14px; padding: 11px 14px;
  background: color-mix(in oklab, var(--win) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--win) 28%, transparent);
  border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text);
}
.err { color: var(--bad); font-size: 12.5px; margin: 0 0 14px; }

tr.nothing td { padding: 40px 16px 44px; color: var(--faint); font-size: 13px; }
tr.nothing .recover { display: block; margin-top: 12px; }
tr.nothing .recover a { color: var(--info); text-decoration: none; margin-right: 16px; }
tr.nothing .recover a:hover { color: var(--text); }

.pager { display: flex; align-items: center; gap: 16px; padding: 0 0 50px; font-size: 12.5px; }
.pager a { color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-pill); }
.pager a:hover { background: var(--fill); color: var(--text); }
.pager > span { color: var(--ghost); padding: 6px 0; }
.pager .pos b { font-family: var(--font-mono); color: var(--muted); font-weight: 500;
  font-variant-numeric: tabular-nums; }

.empty { color: var(--faint); padding: 36px 0 50px; font-size: 13px; }

/* ---------- panels ---------- */
.panel {
  background: var(--glass-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--hair-inset);
  padding: 22px 24px 24px;
  margin: 20px 0 44px;
  max-width: 560px;
}
.panel h2 { margin: 0 0 18px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 11.5px; color: var(--faint); margin-bottom: 6px; }
.row2 { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }
.check-field { display: flex; gap: 10px; align-items: flex-start; }
.check-field input[type=checkbox] { flex: none; margin-top: 2px; }
.check-field span { margin: 0; color: var(--muted); }
.ownerform { display: flex; gap: 8px; align-items: center; }
.ownerform select { max-width: 230px; }

/* ---------- login ---------- */
.gate { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: var(--gutter); }
.gate .panel { margin: 0; width: min(390px, 100%); }
.gate-title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px !important; }
.gate-title { font-size: 17px; letter-spacing: 0.02em; gap: 10px; }
.gate-title .mark { height: 0.8em; }

/* ---------- message preview ---------- */
.backlink { margin: 0 0 16px; font-size: 13px; }
.backlink a { color: var(--muted); text-decoration: none; }
.backlink a:hover { color: var(--text); }

td.subject a.subj { color: var(--text); text-decoration: none; }
td.subject a.subj:hover { color: #fff; }
tbody tr:hover td.subject a.subj { color: #fff; }

.preview {
  background: var(--glass-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--hair-inset);
  padding: 22px 24px 24px;
}
.preview-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.preview-head .route { flex: none; margin-top: 7px; }
.preview-subject { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.35;
  letter-spacing: -0.01em; color: var(--text); overflow-wrap: anywhere; }

/* the metadata is a definition list on one grid, so the values share a left edge */
.preview-meta { display: grid; gap: 7px 0; margin: 0 0 18px; }
.preview-meta > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
.preview-meta dt { color: var(--ghost); font-size: 12px; }
.preview-meta dd { margin: 0; font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.preview-meta dd.addr { font-family: var(--font-mono); font-size: 12px; }

.preview-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.preview-crm { color: var(--info); text-decoration: none; font-size: 12.5px; }
.preview-crm:hover { color: var(--text); }

/* the stored text is plain, already stripped of markup: show it as written */
.preview-body {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 13.5px; line-height: 1.62; color: var(--text);
  border-top: 1px solid var(--line); padding-top: 18px;
}
.preview-empty { margin: 0; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--faint); font-size: 13px; }
/* standing alone on the 404 it has nothing to be divided from */
.preview-empty.gone { padding-top: 0; border-top: 0; }

.preview-quoted { margin-top: 18px; }
.preview-quoted summary { cursor: pointer; color: var(--muted); font-size: 12.5px;
  padding: 4px 0; }
.preview-quoted summary:hover { color: var(--text); }
.preview-quoted .preview-body { color: var(--muted); margin-top: 6px; }

.preview-atts { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.preview-atts h3 { margin: 0 0 10px; font-size: 12px; font-weight: 500; color: var(--ghost); }
.preview-atts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.preview-atts li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 13px; }
.preview-atts a { color: var(--info); text-decoration: none; overflow-wrap: anywhere; }
.preview-atts a:hover { color: var(--text); }
.preview-atts .att-meta { color: var(--faint); font-family: var(--font-mono); font-size: 11.5px; }
.preview-note { margin: 12px 0 0; color: var(--faint); font-size: 12px; }

/* ---------- the dialog the preview is lifted into ---------- */
.sheet {
  width: min(720px, calc(100vw - 2 * var(--gutter)));
  max-height: min(84vh, 900px);
  padding: 0; border: 0; background: transparent;
  overflow: visible; color: var(--text);
}
.sheet::backdrop { background: rgba(8, 9, 10, 0.62); backdrop-filter: blur(3px); }
.sheet-body { max-height: min(84vh, 900px); overflow-y: auto; outline: none;
  border-radius: var(--radius); }
.sheet-body .preview { border-radius: var(--radius); }
.sheet.is-loading .sheet-body { opacity: 0.55; }

/* Shown only until the first panel arrives, so the dialog is never an empty frame.
   Static on purpose: a shimmer here would be decoration, and the fetch is one hop. */
.sheet-skeleton { display: grid; gap: 14px; }
.sk { display: block; border-radius: 5px; background: var(--fill-hi); }
.sk-title { height: 19px; width: 52%; }
.sk-meta { height: 11px; width: 38%; background: var(--fill); }
.sk-rule { height: 1px; width: 100%; background: var(--line); border-radius: 0; margin: 6px 0; }
.sk-line { height: 12px; width: 100%; background: var(--fill); }
.sk-line.short { width: 64%; }

/* the bare mark: the 32px box is hit area only, never a tile drawn behind the glyph */
.sheet-close {
  /* 44px touch target; the box is invisible, so the glyph still sits where a 32px
     control would put it (top/right 6 + half of 44 = the same 28px from each edge) */
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--ghost);
  transition: color 160ms var(--ease);
}
.sheet-close:hover { color: var(--text); }
.sheet-close:focus-visible { outline: 2px solid var(--line-strong); outline-offset: -2px; }
.sheet-close svg { width: 14px; height: 14px; display: block; }
/* the close sits over the panel, so the heading is padded clear of it */
.sheet-body .preview-head { padding-right: 34px; }

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

@media (max-width: 860px) {
  :root { --gutter: 16px; }
  .meters { margin-left: 0; }
  td.hide-sm, th.hide-sm { display: none; }
  .views { flex-wrap: wrap; row-gap: 6px; }
  .views .spacer { display: none; }
  .actionbar { flex-wrap: wrap; row-gap: 8px; }
  .selcount { flex: 1 1 100%; }
  .filterbar { max-width: 100%; }
  td.ref, td.when { white-space: normal; overflow-wrap: anywhere; }
  .full { display: none; }
  .brief { display: inline; }
  /* the direction glyph is redundant here: the `who` line already reads "to …" / "from …" */
  th.c-mark, td.c-mark { display: none; }
  /* fixed layout honours width but not min-width, and a colspan'd empty row leaks space into
     the hidden columns, so the five surviving columns carry percentages that total 100 */
  table { table-layout: fixed; }
  .c-select  { width: 11%; }
  .c-when    { width: 17%; }
  .c-subject { width: 31%; }
  .c-outcome { width: 28%; }
  .ref-col, td.ref { width: 13%; }
  /* nothing may be sliced to fit: headers and statuses fold instead. `anywhere` is the
     guarantee - a long single word ("matching") outgrows the column on a 320px screen. */
  thead th { white-space: normal; }
  .reason .pill { white-space: normal; overflow-wrap: anywhere; padding-left: 8px; padding-right: 8px; }
  /* the export is a read of the view, not a tab: give it its own row once the tabs wrap */
  .views .export { flex: 1 1 100%; }
  td.subject { word-break: break-word; }
  .mb-table thead { display: none; }
  .tablewrap { border-radius: var(--radius); }
  .mb-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 0; }
  .mb-table td { width: auto; border: 0; padding: 0; }
  .mb-table .owner-cell { flex: 1 1 100%; }
  .mb-table .ownerform select { flex: 1 1 auto; min-width: 0; }
}

/* Below ~400px the reserved scrollbar gutter costs 9px, which was enough to squeeze the
   checkbox out of its column. Widen that column and tighten the outer padding, never the
   gap between the box and the date. */
@media (max-width: 400px) {
  .c-select  { width: 15%; }
  .c-outcome { width: 24%; }
  tbody td:first-child, thead th:first-child { padding-left: 10px; }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(255,255,255,0.33);
    --line-strong: rgba(255,255,255,0.46);
    --faint: #a1a1aa;
    --ghost: #a1a1aa;          /* was left failing in the mode that exists to fix this */
  }
}

/* Windows High Contrast strips background-color but keeps background-image, which
   would leave the checkbox tick floating on a forced field. */
@media (forced-colors: active) {
  input[type=checkbox] { appearance: auto; -webkit-appearance: auto; background-image: none; }
  .pill { border: 1px solid currentColor; }
  tbody tr[data-state] { border-left-color: currentColor; }
}