/* The client portal: one calm column, readable at 200% zoom and on a 320-pixel phone. */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --ink: #1b1f26;
  --muted: #545c69;
  --rule: #d6dbe2;
  --accent: #7d1f2c;
  --accent-ink: #ffffff;
  --focus: #1a5fb4;
  --bad: #9b1c1c;
  --good: #1f6b45;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151a; --surface: #1a1e25; --ink: #e7e9ee; --muted: #a6aebb; --rule: #2f3640;
    --accent: #e48a97; --accent-ink: #12151a; --focus: #8ab4f8; --bad: #f19999; --good: #7fd1a3;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1.0625rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 40rem; margin: 0 auto; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); color: var(--ink); padding: .5rem 1rem; }
.skip:focus { left: 1rem; z-index: 2; }
.top { background: var(--surface); border-bottom: 1px solid var(--rule); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; }
.firm { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; }
main { padding-block: 1.5rem 2rem; outline: none; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: .25rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); font-size: .95rem; }
label { display: block; font-weight: 600; margin: 1rem 0 .35rem; }
input { width: 100%; font: inherit; padding: .7rem .8rem; border: 1px solid var(--muted); border-radius: 6px; background: var(--surface); color: var(--ink); }
#code { letter-spacing: .25em; font-variant-numeric: tabular-nums; max-width: 12rem; }
button { font: inherit; padding: .7rem 1.1rem; border-radius: 6px; border: 1px solid var(--muted); background: var(--surface); color: var(--ink); cursor: pointer; min-height: 2.75rem; margin-top: 1rem; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.link { border: 0; background: none; color: var(--accent); text-decoration: underline; padding: .5rem; margin-top: .5rem; }
.top button.link { margin-top: 0; }
button:disabled { opacity: .6; cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.status { min-height: 1.5rem; font-weight: 600; }
.status.bad { color: var(--bad); }
.status.good { color: var(--good); }
.or { display: flex; align-items: center; gap: .75rem; color: var(--muted); margin: 1.25rem 0 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.block { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 1.1rem 1.2rem; margin-bottom: 1.25rem; }
.list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.list li:last-child { border-bottom: 0; }
.list li button { margin-top: 0; }
.list .name { font-weight: 600; overflow-wrap: anywhere; }
.badge { display: inline-block; font-size: .8rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
button.link.name { padding: 0; margin: 0; min-height: 0; font-weight: 600; text-align: left; }
button.link.back { padding-left: 0; margin-top: 0; }
textarea { width: 100%; font: inherit; padding: .7rem .8rem; border: 1px solid var(--muted); border-radius: 6px; background: var(--surface); color: var(--ink); resize: vertical; }
.small { font-size: .9rem; }
.thread { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .75rem; }
.thread li { padding: .7rem .9rem; border-radius: 8px; border: 1px solid var(--rule); max-width: 92%; }
.thread li.mine { align-self: flex-end; background: var(--bg); }
.thread li.theirs { align-self: flex-start; }
.thread .who { margin: 0 0 .25rem; font-size: .95rem; }
.thread .words { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.foot { color: var(--muted); font-size: .9rem; padding-block: 1rem 2rem; border-top: 1px solid var(--rule); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }