:root {
  color-scheme: dark;
  --base: #201e1d;
  --list: #252221;
  --surface: #2c2826;
  --ink: #f9f1eb;
  --muted: #c4b7ae;
  --edge: #493e3a;
  --control-edge: #84716a;
  --accent: #fd6864;
  --accent-ink: #281918;
  --focus: #ff9b93;
  font-family: "Work Sans", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--base);
}

* { box-sizing: border-box; }
body { margin: 0; min-inline-size: 0; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
input, select {
  min-width: 0;
  min-height: 2.75rem;
  border: 1px solid var(--control-edge);
  border-radius: .45rem;
  color: var(--ink);
  background: var(--base);
  padding: .58rem .75rem;
  caret-color: var(--accent);
}

h1, h2, h3, p { margin: 0; }
h1, h2 { letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: 1.9rem; }
h2 { font-size: 2rem; }
.muted { color: var(--muted); line-height: 1.55; }
.issue { color: #ffaca5; line-height: 1.45; }
.issue:empty { display: none; }
.bar {
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem max(1.25rem, calc((100% - 84rem) / 2));
  border-bottom: 1px solid var(--edge);
}
.brand, .bar-actions { display: flex; align-items: center; gap: .75rem; }
.brand { font-weight: 710; letter-spacing: -.02em; white-space: nowrap; }
.bar-actions { min-width: 0; justify-content: flex-end; flex-wrap: wrap; }
.business { max-width: 30ch; color: var(--muted); overflow-wrap: anywhere; }
.bar-actions .issue { flex-basis: 100%; text-align: end; }
.locale { max-width: 8rem; }
.primary, .quiet {
  border: 1px solid transparent;
  min-height: 2.75rem;
  border-radius: .45rem;
  padding: .6rem .95rem;
  font-weight: 650;
}
.primary { background: var(--accent); color: var(--accent-ink); }
.primary:hover:enabled { background: #ff8e87; }
.quiet { background: transparent; color: var(--ink); border-color: var(--control-edge); }
.quiet:hover:enabled { background: var(--surface); }

.access {
  margin: 0 auto;
  max-width: 30rem;
  padding: clamp(2.75rem, 10vh, 7rem) 1.25rem 3rem;
}
.access > p { margin-top: .9rem; }
.access-form { display: grid; gap: 1rem; margin-top: 1.7rem; }
.field { display: grid; gap: .43rem; }
.field label, .filter label { font-size: .875rem; font-weight: 630; }
.field-hint { color: var(--muted); font-size: .82rem; line-height: 1.45; }
.setup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: .75rem;
  border: 1px solid var(--edge);
  border-radius: .55rem;
  background: var(--list);
}
.setup img { display: block; max-width: 100%; height: auto; border-radius: .25rem; }
code { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.setup code { display: block; margin-top: .45rem; }
.recovery-codes {
  list-style: none;
  padding: .85rem 1rem;
  display: grid;
  gap: .75rem;
  background: var(--list);
  border: 1px solid var(--edge);
  border-radius: .5rem;
}

.workspace {
  margin: 0 auto;
  max-width: 84rem;
  min-height: calc(100vh - 4.25rem);
  display: grid;
  grid-template-columns: minmax(19rem, 2fr) minmax(0, 3fr);
  border-inline: 1px solid var(--edge);
}
.list-pane { min-width: 0; background: var(--list); border-right: 1px solid var(--edge); }
.list-head { padding: 2rem 1.5rem 1.3rem; border-bottom: 1px solid var(--edge); }
.filters { display: grid; gap: .65rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); margin-top: 1.35rem; }
.filter { display: grid; gap: .38rem; min-width: 0; }
.filter label { color: var(--muted); }
.filter select { width: 100%; font-size: .875rem; }
.items { margin: 0; padding: 0; list-style: none; }
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  width: 100%;
  padding: 1rem 1.5rem;
  border: 0;
  border-bottom: 1px solid var(--edge);
  background: transparent;
  color: var(--ink);
  text-align: start;
}
.item:hover, .item[aria-current] { background: #372d2b; }
.item[aria-current] strong { color: #ffa39d; }
.item:focus-visible { outline-offset: -3px; }
.item-text { align-self: center; min-width: 0; }
.item-text strong, .item-form { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-form { margin-top: .26rem; font-size: .875rem; }
.item-meta { display: grid; justify-items: end; align-content: center; gap: .32rem; }
time { font-variant-numeric: tabular-nums; }
.item time { font-size: .74rem; color: var(--muted); }
.badge {
  padding: .22rem .48rem;
  border-radius: .28rem;
  font-size: .75rem;
  font-weight: 670;
  white-space: nowrap;
}
.badge-pending { color: #ffcfaf; background: #493429; }
.badge-handled { color: #c4dfca; background: #304039; }
.list-status:not(:empty), .pagination:not(:empty) { padding: 1rem 1.5rem; }
.list-status .quiet { margin-top: .6rem; }
.blank { max-width: 33ch; padding-block: 1.2rem; }
.blank-title { font-weight: 680; margin-bottom: .35rem; }
.detail-pane { min-width: 0; padding: 2rem clamp(1.5rem, 4vw, 3.25rem); }
.detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1rem; overflow-wrap: anywhere; }
.detail-head h2 { max-width: 100%; }
.received { margin-top: .55rem; font-size: .88rem; }
.back { display: none; }
.answer-title { margin-top: 2.2rem; font-size: 1rem; }
.answers { margin: .7rem 0 0; border-top: 1px solid var(--edge); }
.answer {
  display: grid;
  gap: .45rem 1.25rem;
  grid-template-columns: minmax(7rem, 1fr) minmax(0, 3fr);
  padding: .9rem 0;
  border-bottom: 1px solid var(--edge);
  line-height: 1.55;
}
.answer dt { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.answer dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; margin-top: 1.5rem; }

@media (max-width: 47rem) {
  .bar { padding-inline: 1rem; gap: .5rem; }
  .brand { gap: .45rem; }
  .business { font-size: .82rem; }
  .sign-out { font-size: .82rem; }
  .workspace { display: block; border: 0; }
  .list-pane { border: 0; min-height: calc(100vh - 4.25rem); }
  .detail-pane, .with-detail .list-pane { display: none; }
  .with-detail .detail-pane { display: block; }
  .list-head, .item, .list-status:not(:empty), .pagination:not(:empty), .detail-pane { padding-inline: 1rem; }
  .back { display: inline-block; margin-bottom: 1.2rem; }
  .answer { grid-template-columns: minmax(0, 1fr); }
  .setup { grid-template-columns: minmax(0, 1fr); }
}