:root {
  color-scheme: light dark;
  --bg:#ffffff; --surface:#f6f7f9; --fg:#15161a; --muted:#5c5f6b; --line:#e3e5ea;
  --err:#b00020; --ok:#0a7f3f;
  --accent:#4f46e5; --accent-fg:#ffffff; --accent-soft:#eef0ff; --accent-ring:rgba(79,70,229,.28);
  --radius:12px; --shadow:0 10px 30px rgba(20,22,30,.10);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0c0d11; --surface:#15161c; --fg:#e8e9ee; --muted:#969aa6; --line:#262933;
    --err:#ff6b6b; --ok:#4ade80;
    --accent:#818cf8; --accent-fg:#0c0d11; --accent-soft:#191b2b; --accent-ring:rgba(129,140,248,.34);
    --shadow:0 12px 34px rgba(0,0,0,.45); }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
main { max-width:52rem; margin:0 auto; padding:2rem 1.25rem; }
h1 { font-size:1.7rem; line-height:1.2; letter-spacing:-.02em; margin:0 0 1rem; }
h2 { font-size:1.2rem; letter-spacing:-.01em; margin:1.5rem 0 .5rem; }
a { color:inherit; }
p { margin:.75rem 0; }
label { display:block; font-weight:600; margin-bottom:.25rem; }
input, textarea, select { width:100%; padding:.55rem .65rem; font:inherit; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:8px; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring); }
textarea { resize:vertical; }
button, .button { display:inline-block; padding:.5rem 1rem; font:inherit; font-weight:600;
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  color:inherit; cursor:pointer; text-decoration:none;
  transition:border-color .15s, background .15s, filter .15s; }
button:hover, .button:hover { border-color:var(--accent); }
/* Primary call-to-action (filled accent) */
.button, button.primary { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.button:hover, button.primary:hover { filter:brightness(1.06); border-color:var(--accent); }
table { width:100%; border-collapse:collapse; margin-top:1rem; }
th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line); }
th { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
tbody tr:hover { background:rgba(127,127,127,.08); }
a.ref { font-weight:600; }
.muted { color:var(--muted); font-size:.9rem; }
.error { color:var(--err); font-weight:600; }
.ok { color:#0a7f3f; font-weight:600; }
@media (prefers-color-scheme: dark) { .ok { color:#4ade80; } }
.status { font-weight:600; }
.badge { display:inline-block; padding:.15rem .6rem; margin:0 .15rem;
  border:1px solid var(--line); border-radius:999px; font-weight:700; font-size:.95rem; }
.badge.prio-2 { color:#e74c3c; border-color:#e74c3c; }
.badge.prio-1 { color:#d08700; border-color:#d0870080; }
.badge.prio-0 { color:var(--muted); }

/* Escalation: make it impossible to miss in the queue and on the ticket. */
.esc-row { background:rgba(231,76,60,.09); }
.esc-row td:first-child { box-shadow:inset 3px 0 0 #e74c3c; }
.esc-tag { display:inline-block; margin-left:.45rem; color:#fff; background:#e74c3c;
  border-radius:6px; padding:.05rem .4rem; font-size:.68rem; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; vertical-align:middle; white-space:nowrap; }
.esc-banner { display:inline-block; background:#e74c3c; color:#fff; padding:.35rem .8rem;
  border-radius:8px; font-weight:800; letter-spacing:.02em; }
button.current { font-weight:700; border-color:currentColor;
  background:rgba(127,127,127,.2); opacity:1; cursor:default; }
button:disabled:not(.current) { opacity:.5; }

/* Wide two-column layout: triage filters + table, and ticket + actions card */
main.wide { max-width:76rem; }
.sidebar-layout { display:flex; gap:1.75rem; align-items:flex-start; }
.side { flex:0 0 15rem; position:sticky; top:1rem; }
.side-title { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:1.1rem 0 .5rem; }
.side-title:first-child { margin-top:0; }
.chips-col { display:flex; flex-direction:column; gap:.35rem; align-items:stretch; }
form.search { display:flex; gap:.4rem; margin:0 0 .75rem; }
form.search input[type="search"] { flex:1; min-width:0; }
.content { flex:1; min-width:0; overflow-x:auto; }
.chip { text-decoration:none; padding:.35rem .7rem; border:1px solid var(--line);
  border-radius:8px; font-size:.9rem; white-space:nowrap; }
.chip.selected { background:var(--fg); color:var(--bg,#fff); border-color:var(--fg); font-weight:700; }
@media (prefers-color-scheme: dark) { .chip.selected { color:#111; } }
.chip .count { opacity:.7; font-size:.85em; }
@media (max-width:720px) {
  .sidebar-layout { flex-direction:column; }
  .side { position:static; flex-basis:auto; width:100%; order:-1; }
  .chips-col { flex-direction:row; flex-wrap:wrap; }
}
/* Ticket actions card (right sidebar of the detail page) */
.card { border:1px solid var(--line); border-radius:10px; padding:.9rem 1rem 1.1rem; }
.card .side-title:first-child { margin-top:0; }
form.stack { display:flex; flex-direction:column; gap:.4rem; margin:0; }
form.stack select, form.stack button { width:100%; }
.card form + form { margin-top:.6rem; }
button.link { border:none; background:none; color:inherit; text-decoration:underline;
  padding:0; font:inherit; cursor:pointer; width:auto; }

/* Staff top bar (brand · user · sign out) */
.topbar { display:flex; align-items:center; gap:1rem;
  border-bottom:1px solid var(--line); padding-bottom:.6rem; margin-bottom:1.25rem; }
.topbar .spacer { flex:1; }
.topbar .brand { display:inline-flex; align-items:center; gap:.5rem; font-weight:800;
  letter-spacing:-.01em; text-decoration:none; }
.topbar .brand .logo { width:22px; height:22px; color:var(--accent); }
form.inline { display:inline; margin:0; }
.comment { border-top:1px solid var(--line); padding-top:.5rem; margin-top:.5rem; }
.tag { border:1px solid var(--line); border-radius:4px; padding:0 .35rem; font-size:.8em; }

/* Checkboxes/radios must not inherit the full-width text-input rule. */
input[type="checkbox"], input[type="radio"] { width:auto; margin:0; }
label.check { display:inline-flex; align-items:center; gap:.5rem; font-weight:400; cursor:pointer; }
.preview { margin-top:1.5rem; border-top:1px solid var(--line); }
.md :is(h1,h2,h3) { font-size:1.1rem; }
.md pre, .md code { background:rgba(127,127,127,.15); border-radius:4px; }
.md pre { padding:.75rem; overflow-x:auto; }
.md code { padding:.1rem .3rem; }

/* TOTP enrollment QR: white padding around the code so it scans in any theme. */
.qr { display:inline-block; padding:12px; background:#fff; border-radius:8px; }
.qr svg { display:block; width:220px; height:220px; }
details { margin:.75rem 0; }
summary { cursor:pointer; color:var(--muted); }

/* Honeypot: kept out of view and out of the accessibility tree. Real users
   never fill it; bots do, and we drop the submission. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------------- Public landing + site chrome ---------------- */
.wrap { max-width:62rem; margin:0 auto; padding:0 1.25rem; }
main.landing { max-width:none; margin:0; padding:0; }

.site-header { position:sticky; top:0; z-index:10; border-bottom:1px solid var(--line);
  background:var(--bg); }
@supports (backdrop-filter:blur(1px)) {
  .site-header { background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:saturate(1.2) blur(10px); }
}
.site-header .wrap { display:flex; align-items:center; gap:1rem; padding-top:.9rem; padding-bottom:.9rem; }
.brand { display:inline-flex; align-items:center; gap:.55rem; font-weight:800;
  letter-spacing:-.01em; text-decoration:none; font-size:1.05rem; }
.brand .logo { width:26px; height:26px; color:var(--accent); }
.site-nav { margin-left:auto; display:flex; align-items:center; gap:1.1rem; }
.site-nav a { text-decoration:none; color:var(--muted); font-weight:500; }
.site-nav a:hover { color:var(--fg); }
.site-nav .btn-ghost { border:1px solid var(--line); border-radius:8px; padding:.4rem .8rem; color:var(--fg); }

.hero { padding:4.5rem 0 2.5rem;
  background:radial-gradient(58rem 26rem at 72% -12%, var(--accent-soft), transparent 60%); }
.hero h1 { font-size:clamp(2rem, 4.6vw, 3rem); line-height:1.07; letter-spacing:-.03em;
  margin:0; max-width:19ch; }
.hero .lead { font-size:1.15rem; color:var(--muted); max-width:58ch; margin-top:1.1rem; }
.cta-row { margin-top:1.6rem; display:flex; gap:.7rem; flex-wrap:wrap; }
.cta-row .btn-ghost { border:1px solid var(--line); border-radius:8px; padding:.5rem 1rem;
  font-weight:600; text-decoration:none; }

.features { padding:1rem 0 2.5rem; }
.features .grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:640px) { .features .grid { grid-template-columns:1fr; } }
.feature { display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.5rem;
  transition:border-color .15s, transform .15s, box-shadow .15s; }
.feature:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow); }
.feature-icon { width:46px; height:46px; border-radius:12px; display:inline-flex;
  align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent);
  margin-bottom:1rem; }
.feature-icon svg { width:24px; height:24px; }
.feature h2 { margin:.1rem 0 .4rem; font-size:1.25rem; }
.feature p { margin:0 0 1rem; color:var(--muted); }
.feature-cta { margin-top:auto; color:var(--accent); font-weight:700; }

.trust { display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; padding:0 0 3rem;
  color:var(--muted); font-size:.92rem; }
.trust span { display:inline-flex; align-items:center; gap:.45rem; }
.trust svg { width:16px; height:16px; color:var(--accent); flex:none; }

.site-footer { border-top:1px solid var(--line); }
.site-footer .wrap { padding-top:1.5rem; padding-bottom:2.5rem; color:var(--muted); font-size:.9rem; }

/* Public content pages (forms, lists, ticket views) under the site chrome. */
.page { padding:2.25rem 0 3.5rem; }
.page > .wrap { max-width:48rem; }
.page.wide > .wrap { max-width:64rem; }

.eyebrow { color:var(--muted); font-size:.82rem; text-transform:uppercase;
  letter-spacing:.05em; margin:0 0 .25rem; }
.eyebrow b { color:var(--fg); }
.ticket-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.4rem 0 1.4rem; }
.ticket-meta .meta-dot { color:var(--muted); }
.ticket-meta .muted { font-size:.92rem; }

/* Coloured status pills (reuse .badge shape) */
.badge.status-open { color:var(--accent); border-color:var(--accent); }
.badge.status-working { color:#d08700; border-color:#d0870080; }
.badge.status-resolved { color:#22c55e; border-color:#22c55e; }
.badge.status-closed { color:var(--muted); }
.badge.status-rejected { color:#e74c3c; border-color:#e74c3c; }
.badge.status-pending { color:var(--muted); }

/* Customer conversation thread */
.thread { display:flex; flex-direction:column; gap:1rem; margin:0 0 1.5rem; }
.msg { border:1px solid var(--line); border-radius:12px; padding:.85rem 1.1rem; background:var(--surface); }
.msg-support { border-color:var(--accent); }
.msg-head { display:flex; align-items:baseline; gap:.5rem; margin-bottom:.35rem; }
.msg-role { color:var(--muted); font-size:.85rem; }
.msg .md > :first-child { margin-top:0; }
.msg .md > :last-child { margin-bottom:0; }
.reply-box { border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; background:var(--surface); }
.reply-box textarea { margin-top:.3rem; }

/* Markdown formatting help */
.md-help { margin:.4rem 0 .8rem; }
.md-help summary { color:var(--accent); font-size:.9rem; }
.md-help-body { margin-top:.5rem; }
.md-cheats { width:auto; border-collapse:collapse; margin:0; }
.md-cheats td { border:none; padding:.15rem 1.2rem .15rem 0; vertical-align:top; }
.md-cheats code { white-space:pre; }

/* Status pages (confirmation, sent, invalid) + the private-link key card. */
.notice { text-align:center; padding:1rem 0 .5rem; }
.notice .lead { font-size:1.15rem; color:var(--muted); }
.notice-icon { width:60px; height:60px; border-radius:50%; margin:0 auto 1rem;
  display:flex; align-items:center; justify-content:center; }
.notice-icon svg { width:30px; height:30px; }
.notice-icon.success { background:rgba(74,222,128,.15); color:#22c55e; }
.notice-icon.info { background:var(--accent-soft); color:var(--accent); }
.notice-icon.warn-icon { background:rgba(231,76,60,.15); color:#e74c3c; }
.keycard { margin:1.75rem 0; padding:1.4rem 1.6rem; border:1px solid var(--line);
  border-radius:14px; background:var(--surface); }
.keycard h2 { margin-top:0; }
.keycard .button { margin-top:.6rem; }
.keycard .warn { display:flex; gap:.5rem; align-items:flex-start; color:var(--fg);
  background:rgba(231,76,60,.10); border:1px solid rgba(231,76,60,.35);
  border-radius:8px; padding:.6rem .8rem; font-size:.95rem; }
.keycard .warn svg { width:18px; height:18px; color:#e74c3c; flex:none; margin-top:.1rem; }