@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/ahn-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/ahn-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/ahn-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --band: #C21D2E;
  --action: #C21D2E;
  --action-press: #9A1525;
  --accent: #C21D2E;
  --accent-ink: #A3172A;
  --ink: #16181D;
  --slate: #5A6170;
  --rule: #DDE1E6;
  --page: #F3F4F6;
  --surface: #FFFFFF;
  --wash: #FCEBED;
  --go: #1F7A4D;
  --go-wash: #E6F4EC;
  --note-wash: #FFF4E2;
  --note-ink: #6E4500;
  --focus: #1B5FD1;
  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --band: #7E1220;
    --action-press: #8A1322;
    --accent: #FF5A68;
    --accent-ink: #FF8A94;
    --ink: #ECEEF1;
    --slate: #A2A9B4;
    --rule: #2B3038;
    --page: #101215;
    --surface: #181B20;
    --wash: #2A1619;
    --go: #43C585;
    --go-wash: #12261B;
    --note-wash: #2A2113;
    --note-ink: #F2C77E;
    --focus: #84AAFF;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--page);
  min-height: 100vh;
  min-height: 100dvh;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.main:focus { outline: none; }

/* The red band: the app's one loud element */
.band { background: var(--band); color: #fff; padding-top: env(safe-area-inset-top); position: sticky; top: 0; z-index: 3; }
.band-inner {
  max-width: 36rem; margin: 0 auto; display: flex; align-items: center; gap: .55rem;
  padding: .85rem max(1.1rem, env(safe-area-inset-right)) .85rem max(1.1rem, env(safe-area-inset-left));
}
.mark { width: 1.55rem; height: 1.55rem; flex: none; }
.brand { font-weight: 700; font-size: 1.125rem; }
.status {
  margin-left: auto; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8125rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px;
  background: rgba(255, 255, 255, .17);
}
.status .dot { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.status.on .dot { background: #7CF0B0; }

.main { max-width: 36rem; margin: 0 auto; padding: 1.25rem max(1.1rem, env(safe-area-inset-right)) calc(2.5rem + env(safe-area-inset-bottom)) max(1.1rem, env(safe-area-inset-left)); }
.loading { color: var(--slate); }
h1 { font-size: 1.625rem; line-height: 1.2; margin: .2rem 0 .55rem; font-weight: 700; }
h2 { font-size: 1.1875rem; line-height: 1.3; margin: 2rem 0 .5rem; font-weight: 700; }
p { margin: .4rem 0 1rem; }
.lead { color: var(--slate); }
.fine { color: var(--slate); font-size: .9375rem; }
strong { font-weight: 700; }

/* Setup steps: a real sequence, so they are numbered */
.rail { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.4rem; }
.rail li { flex: 1; font-size: .8125rem; line-height: 1.3; color: var(--slate); border-top: 3px solid var(--rule); padding-top: .45rem; }
.rail li.done { border-color: var(--go); }
.rail li.now { border-color: var(--accent); color: var(--ink); font-weight: 700; }
.rail .n { font-variant-numeric: tabular-nums; margin-right: .25rem; }

.steps { list-style: none; padding: 0; margin: .5rem 0 1.25rem; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: .25rem 0 1rem 2.7rem; min-height: 2.6rem; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 1.95rem; height: 1.95rem; border-radius: 50%;
  border: 2px solid var(--accent); display: grid; place-items: center; font-weight: 700; font-size: .9375rem;
  font-variant-numeric: tabular-nums; background: var(--surface);
}
.icon { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.3em; color: var(--focus); }

/* Buttons */
.btn {
  appearance: none; -webkit-appearance: none; border: 0; margin: 0; font: inherit; font-weight: 700; font-size: 1.0625rem;
  border-radius: 10px; padding: .85rem 1.2rem; min-height: 3.25rem; width: 100%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 1.3rem; height: 1.3rem; flex: none; }
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:active { background: var(--action-press); }
.btn-line { background: var(--surface); color: var(--ink); border: 1.5px solid var(--rule); }
.btn-line:active { background: var(--page); }
.btn-quiet { background: none; color: var(--accent-ink); width: auto; min-height: 2.75rem; padding: .6rem .2rem; font-weight: 600; }
.btn[disabled] { opacity: .65; cursor: default; }
.stack > * + * { margin-top: .75rem; }
.pair { display: flex; gap: .75rem; margin-top: 1.5rem; }
.pair > * { flex: 1; }

/* Forms */
.field { display: block; margin: 0 0 1rem; }
.field > span { display: block; font-weight: 600; margin-bottom: .35rem; }
.field input {
  width: 100%; font: inherit; font-size: 1.0625rem; padding: .75rem .9rem; min-height: 3.1rem;
  border: 1.5px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); }
.code-input { letter-spacing: .3em; font-variant-numeric: tabular-nums; font-size: 1.375rem !important; }

/* Messages */
.msg { border-radius: 10px; padding: .8rem 1rem; margin: 0 0 1rem; border-left: 4px solid; }
.msg-error { background: var(--wash); border-color: var(--accent); }
.msg-ok { background: var(--go-wash); border-color: var(--go); }
.msg-note { background: var(--note-wash); border-color: var(--note-ink); color: var(--note-ink); }
.msg p { margin: 0 0 .5rem; }
.msg .btn-quiet { padding: .3rem 0; min-height: 2.25rem; }

/* Install tip (Android and computers) */
.install { display: flex; align-items: center; gap: .75rem; border: 1.5px solid var(--rule); background: var(--surface); border-radius: 12px; padding: .7rem .9rem; margin: 0 0 1.25rem; }
.install p { margin: 0; flex: 1; font-size: .9375rem; }
.install .btn { width: auto; min-height: 2.6rem; padding: .5rem .95rem; font-size: .9375rem; }
.install .btn-quiet { color: var(--slate); }

/* Inbox */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; margin-bottom: .25rem; }
.count { color: var(--slate); font-size: .9375rem; }
.list { list-style: none; margin: 0 calc(-1 * max(1.1rem, env(safe-area-inset-left))); padding: 0; border-top: 1px solid var(--rule); }
.item { border-bottom: 1px solid var(--rule); }
.item a { display: grid; grid-template-columns: .7rem 1fr; column-gap: .65rem; row-gap: .15rem; padding: .9rem max(1.1rem, env(safe-area-inset-right)) .9rem max(1.1rem, env(safe-area-inset-left)); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.item a:active { background: color-mix(in srgb, var(--rule) 55%, transparent); }
.item.unread a { background: var(--wash); }
.item .dot { grid-row: 1; width: .6rem; height: .6rem; border-radius: 50%; margin-top: .45rem; }
.item.unread .dot { background: var(--accent); }
.item .t { font-weight: 600; overflow-wrap: anywhere; }
.item.unread .t { font-weight: 700; }
.item .b { grid-column: 2; overflow-wrap: anywhere; }
.item .w { grid-column: 2; color: var(--slate); font-size: .875rem; }
.empty { padding: 1.5rem max(1.1rem, env(safe-area-inset-left)); color: var(--slate); }

/* Settings */
.rows { border-top: 1px solid var(--rule); margin: .5rem 0 1.5rem; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.row .k { color: var(--slate); }
.row .v { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.tips { padding-left: 1.2rem; margin: .25rem 0 1rem; }
.tips li { margin-bottom: .5rem; }

.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--ink); color: var(--page); padding: .7rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .9375rem;
  width: max-content; max-width: calc(100% - 2rem); text-align: center; z-index: 5;
}

@media (prefers-reduced-motion: no-preference) {
  .status.just-on .dot { animation: ping 1.1s ease-out 3; }
  @keyframes ping { from { box-shadow: 0 0 0 0 rgba(124, 240, 176, .85); } to { box-shadow: 0 0 0 .65rem rgba(124, 240, 176, 0); } }
  .toast { animation: rise .18s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translate(-50%, .5rem); } }
}