/* Perfect Day. Mobile first: everything below is written for a phone in
   portrait, and simply gets more breathing room on a wider screen. */

:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #16191d;
  --ink-soft: #5c6470;
  --line: #dfe3e8;
  --accent: #1f6feb;
  --good: #1a7f4b;
  --good-bg: #e6f5ec;
  --bad: #b4372a;
  --bad-bg: #fbecea;
  --radius: 14px;
  --tap: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --card: #1e2227;
    --ink: #e8eaed;
    --ink-soft: #9aa3ad;
    --line: #2e343b;
    --accent: #5296ff;
    --good: #55d18b;
    --good-bg: #1b3327;
    --bad: #ff8a75;
    --bad-bg: #33201c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 12px 96px;
}

a { color: var(--accent); }

/* --- top bar -------------------------------------------------------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.bar-home {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

/* The gold lettering is a photograph, so it is exported at 3x and scaled down
   here rather than sized by the file's own pixels. The intrinsic width and
   height are still on the tag, so the bar does not jolt while it loads. */
.bar-home img {
  display: block;
  height: 30px;
  width: auto;
}

.bar a.back { text-decoration: none; }

/* --- cards ---------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 12px 0;
}

.card h2 {
  margin: 0 0 4px;
  font-size: 17px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card.feature { border-color: var(--accent); }
.card.feature h2 { color: var(--accent); }

.empty h2 { text-transform: none; font-size: 19px; color: var(--ink); }

.card.queued { border-left: 4px solid var(--accent); }
.card.queued p { margin: 0 0 4px; }
.card.queued p:last-child { margin-bottom: 0; }

/* --- the countdown at the top ---------------------------------------------- */

.countdown {
  text-align: center;
  padding: 22px 16px 26px;
  margin: 8px 0 4px;
}

.countdown p { margin: 0; }

.cd-lead,
.cd-tail {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.3;
}

.cd-number {
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--good);
  margin: 2px 0 4px;
}

/* A word cannot be as large as a digit and still fit a phone. */
.cd-number.word { font-size: 3.2rem; }

@media (max-width: 380px) {
  .cd-number { font-size: 4.5rem; }
}

/* --- dashboard ------------------------------------------------------------ */

.profile-block { margin-top: 24px; }

.profile-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px;
}

.profile-head h2 { margin: 0; font-size: 20px; }
.profile-head a { text-decoration: none; }

.profile-place {
  margin: 0 0 2px;
  padding: 0 4px;
  font-size: 14px;
  color: var(--ink-soft);
}

.pill {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

a.card.match {
  display: block;
  text-decoration: none;
  color: inherit;
  border-left: 4px solid var(--good);
}

.match-when {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.match-day { font-size: 20px; font-weight: 650; }
.match-date { color: var(--ink-soft); }

.match-window {
  font-size: 24px;
  font-weight: 600;
  color: var(--good);
  margin: 2px 0 8px;
}

.match-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 15px;
  color: var(--ink-soft);
}

.match-numbers b { color: var(--ink); font-weight: 600; }

.none { color: var(--ink-soft); padding: 4px; }

/* Days past the notification horizon: shown, but not worth trusting yet. */
.pill.far {
  font-size: 11px;
  vertical-align: middle;
  border-color: var(--ink-soft);
  color: var(--ink-soft);
  font-weight: 500;
}

/* --- the day-by-day outlook ------------------------------------------------ */

.outlook { list-style: none; margin: 8px 0 0; padding: 0; }

.day-row {
  display: grid;
  grid-template-columns: 5.5rem auto 0.8rem;
  gap: 2px 10px;
  padding: 9px 12px;
  margin-bottom: 4px;
  border-radius: 10px;
  border-left: 4px solid var(--line);
  background: var(--card);
  font-size: 15px;
}

.day-row a {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.d-when { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.d-when b { display: block; font-size: 16px; }
.d-window { grid-column: 2; font-weight: 650; }
.d-note { grid-column: 2; color: var(--ink-soft); font-size: 14px; line-height: 1.35; }

.day-row.good { border-left-color: var(--good); background: var(--good-bg); }
.day-row.good .d-window { color: var(--good); }

.day-row.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.day-row.bad .d-window { color: var(--bad); font-weight: 600; }

.day-row.skip { border-left-color: var(--line); opacity: 0.6; }

/* Beyond the alert horizon: still shown, visibly less solid. */
.day-row.far { opacity: 0.45; }

.outlook-break {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 2px 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.outlook-break::before,
.outlook-break::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.day-row.skip .d-window { color: var(--ink-soft); font-weight: 400; }

/* --- forms ---------------------------------------------------------------- */

.field { margin: 20px 0; }
.field:first-child { margin-top: 8px; }

.field label,
.field > .field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.field-label { font-weight: 600; }

.readout {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: 19px;
  color: var(--accent);
}

.help {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}

input[type="text"] {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  font-size: 17px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Range sliders need a big thumb to be usable with a thumb. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: var(--line);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: var(--line);
}

input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--card);
}

input[type="range"]:disabled::-webkit-slider-thumb { background: var(--ink-soft); }
.field.off { opacity: 0.45; }

.toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  cursor: pointer;
}

.toggle input { width: 24px; height: 24px; accent-color: var(--accent); }
.choice { display: flex; gap: 20px; flex-wrap: wrap; }

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
}

.day input { width: 20px; height: 20px; accent-color: var(--accent); }
.day:has(input:checked) { border-color: var(--accent); background: var(--bg); }

/* --- people ---------------------------------------------------------------- */

.people { list-style: none; margin: 10px 0 0; padding: 0; }

.person {
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.person.current { border-color: var(--accent); }

.person-name {
  display: block;
  font-size: 19px;
  font-weight: 650;
  text-decoration: none;
  min-height: 32px;
}

.person-link {
  margin: 6px 0 2px;
  font-size: 13px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.person code { overflow-wrap: anywhere; font-size: 12px; }

button.small { width: auto; min-height: 36px; padding: 6px 14px; font-size: 14px; }

/* --- place search ---------------------------------------------------------- */

.place-results { list-style: none; margin: 6px 0 0; padding: 0; }

.place-results li {
  padding: 12px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  font-size: 15px;
}

.current-place {
  margin: 14px 0 0;
  padding: 12px;
  border-radius: 10px;
  background: var(--bg);
  font-size: 15px;
}

.current-place b { display: block; font-size: 17px; }
.coords { color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }

/* --- buttons -------------------------------------------------------------- */

.actions { margin: 14px 0; }
.actions form { margin: 0; }

button {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 16px;
  font-size: 17px;
  font-family: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--bad); border-color: var(--bad); background: transparent; }

.actions.sticky {
  position: sticky;
  bottom: 0;
  padding: 10px 0 max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}

.new-profile { display: flex; gap: 8px; margin-top: 10px; }
.new-profile input { flex: 1; }
.new-profile button { width: auto; padding: 12px 20px; }

/* --- test results --------------------------------------------------------- */

.test-results h2 { text-transform: none; font-size: 18px; color: var(--ink); }

.test-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.test-table td { padding: 7px 4px; border-top: 1px solid var(--line); vertical-align: top; }
.test-table tr.hit { background: var(--good-bg); }
.test-table tr.hit .t-window { color: var(--good); font-weight: 650; }
.t-day { white-space: nowrap; font-weight: 600; }
.t-window { white-space: nowrap; }
.t-note { color: var(--ink-soft); }

/* --- match detail --------------------------------------------------------- */

.detail-head { padding: 4px; }
.detail-head h1 { margin: 0 0 2px; font-size: 26px; }
.detail-head .when { font-size: 22px; color: var(--good); font-weight: 600; }
.detail-head .who { color: var(--ink-soft); }

.hours { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours th {
  text-align: right;
  padding: 6px 4px;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.hours th:first-child, .hours td:first-child { text-align: left; }
.hours td { padding: 7px 4px; text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.pass { background: var(--good-bg); }
.hours tr.pass td:first-child { font-weight: 650; }
.hours tr.winner td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.hours tr.fail td { color: var(--ink-soft); }
.hours .why { text-align: left; font-size: 13px; padding-top: 0; padding-bottom: 9px; color: var(--ink-soft); }

.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- odds and ends -------------------------------------------------------- */

.status {
  margin-top: 28px;
  padding: 12px 4px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}

.hint { font-size: 14px; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.bad { color: var(--bad); }

.flash {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--good-bg);
  color: var(--good);
  font-weight: 600;
}

/* --- one day's forecast ---------------------------------------------------
   Laid out the way iOS Weather lays out a day: a hero with the headline
   number, a scrolling hourly row, a chart, then a grid of detail tiles. The
   app's own verdict sits directly under the hero, because that is the reason
   this app exists and not another weather app. */

.wx-sprite { display: none; }

.wx-i {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-soft);
}
.wx-i.big { width: 72px; height: 72px; stroke-width: 1.3; }

/* Enough colour to tell the families apart at a glance, no more. */
.wx-i-clear, .wx-i-partly, .wx-i-sunrise, .wx-i-sunset { color: #e8a33d; }
.wx-i-clear-night, .wx-i-partly-night { color: #7f8db3; }
.wx-i-rain, .wx-i-showers, .wx-i-drizzle { color: #4b8fd6; }
.wx-i-snow, .wx-i-sleet { color: #63b3d6; }
.wx-i-thunder { color: #9a72d6; }

.day-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 6px;
  font-size: 15px;
}
.day-step { min-width: 64px; padding: 8px 2px; text-decoration: none; }
.day-step:last-child { text-align: right; }
.day-step.empty { min-height: 1px; }
.day-step-mid { color: var(--ink-soft); font-size: 14px; }

.wx-hero { text-align: center; padding: 14px 8px 6px; }
.wx-place { margin: 0; color: var(--ink-soft); font-size: 15px; }
.wx-hero h1 { margin: 2px 0 0; font-size: 30px; letter-spacing: -0.4px; }
.wx-date { margin: 0; color: var(--ink-soft); font-size: 15px; }

.wx-now {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 0;
}
.wx-temp {
  margin: 0;
  font-size: 74px;
  line-height: 1;
  font-weight: 200;
  letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
}
.wx-temp .deg { font-weight: 200; }
.wx-cond { margin: 4px 0 0; font-size: 18px; }
.wx-range { margin: 2px 0 0; color: var(--ink-soft); font-size: 15px; }

/* --- the verdict ---------------------------------------------------------- */

.verdict {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  border-left: 4px solid var(--line);
  background: var(--card);
}
.verdict.good { border-left-color: var(--good); background: var(--good-bg); }
.verdict.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.v-head { margin: 0; font-size: 19px; font-weight: 650; }
.verdict.good .v-head { color: var(--good); }
.verdict.bad .v-head { color: var(--bad); }
.v-detail { margin: 3px 0 0; font-size: 15px; }
.v-detail.muted { font-size: 14px; }

/* --- the hourly strip ----------------------------------------------------- */

.wx-card h2 { margin-top: 0; }

.wx-strip {
  display: flex;
  gap: 2px;
  padding: 4px 0 10px;
  scroll-snap-type: x proximity;
}
.wx-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 58px;
  padding: 8px 4px 6px;
  border-radius: 12px;
  scroll-snap-align: start;
}
.wx-hour.now { background: rgba(127, 127, 127, 0.14); }
.wx-hour.outside { opacity: 0.45; }
.wx-hour.past { opacity: 0.35; }
.wx-h-time { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.wx-hour.now .wx-h-time { color: var(--ink); font-weight: 650; }
.wx-h-rain {
  font-size: 12px;
  min-height: 15px;
  color: #4b8fd6;
  font-variant-numeric: tabular-nums;
}
.wx-h-temp { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-hour.sun .wx-h-temp { font-size: 13px; font-weight: 400; color: var(--ink-soft); }
.wx-h-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.wx-h-dot.pass { background: var(--good); }
.wx-h-dot.fail { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* --- the temperature chart ------------------------------------------------ */

.wx-chart { position: relative; margin: 6px 0 2px; }
.wx-chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
.wx-chart-marks { position: absolute; inset: 0; }

.c-band { fill: var(--good); opacity: 0.13; }
.c-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round;
          stroke-linecap: round; vector-effect: non-scaling-stroke; }
.c-alt { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 4 4;
         opacity: 0.6; vector-effect: non-scaling-stroke; }
.c-dot { fill: var(--accent); }
.c-peak {
  fill: var(--ink);
  font-size: 15px;
  font-weight: 600;
  /* Outlined in the card colour so the label stays readable where it crosses
     the comfort band or the line itself. */
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.c-tick { fill: var(--ink-soft); font-size: 13px; }

/* --- the detail tiles ----------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}
@media (min-width: 560px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}

.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 12px 12px;
  min-height: 116px;
  display: flex;
  flex-direction: column;
}
.t-title {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.t-value {
  margin: 6px 0 0;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.t-unit { font-size: 15px; color: var(--ink-soft); }
.t-arrow {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  align-self: center;
}
.t-caption { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.t-note { margin: auto 0 0; padding-top: 6px; font-size: 13px; color: var(--ink-soft); }
.tile-ok .t-note { color: var(--good); }
.tile-over .t-note { color: var(--bad); }

.t-scale {
  position: relative;
  display: block;
  height: 4px;
  margin: 8px 0 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #4aa96c, #e8c33d, #e07a3f, #c0392b, #8e44ad);
}
.t-scale-cloud { background: linear-gradient(90deg, var(--accent), var(--line)); }
.t-pip {
  position: absolute;
  top: -3px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 0 0 2px var(--ink);
}

/* --- additions to the hour table ------------------------------------------ */

.hours tr.outside td { opacity: 0.5; }
.hours tr.outside.pass { background: transparent; }
.hours .h-icon { text-align: center; padding: 4px 0; }
.hours .h-icon .wx-i { width: 18px; height: 18px; vertical-align: middle; }

/* Every day row is a link to its forecast now, so each needs a chevron. */
.d-go {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--ink-soft);
  font-size: 22px;
  line-height: 1;
}

/* --- accounts -------------------------------------------------------------
   Sign-in, sign-up and the rest. One job on screen at a time, and wide enough
   for a password manager's dropdown not to cover the button. */

.auth {
  max-width: 380px;
  margin: 28px auto 0;
}
.auth h1 {
  margin: 0 0 4px;
  font-size: 26px;
  letter-spacing: -0.3px;
}

.auth-form { display: flex; flex-direction: column; margin-top: 16px; }
.auth-form label {
  margin: 12px 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"],
.auth-form select {
  padding: 11px 12px;
  font-size: 17px;   /* 16px or more, or iOS zooms the page on focus. */
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: var(--tap);
}
.auth-form input:focus-visible,
.auth-form select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.auth-form .hint { margin: 6px 0 0; }
.auth-form button { margin-top: 18px; }

.auth-error {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 10px;
  border-left: 4px solid var(--bad);
  background: var(--bad-bg);
  color: var(--bad);
  font-size: 15px;
}

.auth-alt {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.8;
}

.inline-form { display: inline; }

/* A button that has to read as a link, for destructive-sounding things that
   should not look like the primary action. */
.linklike {
  padding: 0;
  min-height: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.quiet-hours { display: flex; gap: 14px; }
.quiet-hours span { display: flex; flex-direction: column; flex: 1; }

/* --- passkeys and social sign-in ------------------------------------------ */

.passkey-button {
  width: 100%;
  margin-top: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
}

.passkey-status { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.passkey-status.bad { color: var(--bad); }

.passkey-list { list-style: none; margin: 10px 0; padding: 0; }
.passkey-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.pk-name { font-weight: 600; }
.pk-when { grid-column: 1; font-size: 13px; color: var(--ink-soft); }
.passkey-list form { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.passkey-add { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.passkey-add input {
  flex: 1 1 160px;
  min-height: var(--tap);
  padding: 10px 12px;
  font-size: 17px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
  color: var(--ink-soft);
  font-size: 14px;
}
.or-divider::before, .or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.provider-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin-top: 8px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.linked-provider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

/* --- notifications --------------------------------------------------------- */

.push-buttons { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.push-status { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.push-status.good { color: var(--good); }
.push-status.bad { color: var(--bad); }

/* --- the bar menu ---------------------------------------------------------- */

.bar-right { display: flex; align-items: center; gap: 14px; }

.menu { position: relative; }

/* The arrow a <summary> draws by default has to go on every engine separately. */
.menu-button { list-style: none; cursor: pointer; }
.menu-button::-webkit-details-marker { display: none; }
.menu-button::marker { content: ""; }

.menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-right: -10px;   /* optically aligned with the edge, not boxed off it */
  border-radius: 10px;
}
.menu-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Three lines drawn with a border and two pseudo-elements, so there is no icon
   file to load and it inherits the text colour in both themes. */
.menu-lines, .menu-lines::before, .menu-lines::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 120ms ease, opacity 120ms ease;
}
.menu-lines { position: relative; }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; }
.menu-lines::before { top: -6px; }
.menu-lines::after { top: 6px; }

/* Open, the three lines become a cross. */
.menu[open] .menu-lines { background: transparent; }
.menu[open] .menu-lines::before { transform: translateY(6px) rotate(45deg); }
.menu[open] .menu-lines::after { transform: translateY(-6px) rotate(-45deg); }

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 220px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.menu-who {
  margin: 0;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  /* An address that does not fit must wrap rather than widen the panel. */
  overflow-wrap: anywhere;
}
.menu-who b { color: var(--ink); font-weight: 650; }

.menu-panel a,
.menu-panel button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--bg); }
.menu-panel form { margin: 0; }
.menu-panel button { color: var(--bad); }