/* Discover Cape Breton - swipe deck PWA
   Mobile-first, dark, full-bleed photography.

   Brand tokens are taken from www.cbisland.com rather than invented: Cabin,
   navy #002347, brand blue #004A98, slate #303E48, 20px card radius, 12px
   button radius, and the site's 4/8/16/24/40 spacing rhythm. The site is a
   light theme; this app is dark by necessity (full-bleed photography), so the
   brand navy becomes the surface colour and the brand blue is lightened for
   legibility on it. Every pairing below is contrast-checked against the
   surface it sits on. */

@font-face {
  font-family: 'Cabin';
  /* Same file the main site serves; self-hosted so `font-src 'self'` holds and
     it works offline. Cabin is SIL OFL. */
  src: url('fonts/cabin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- brand ------------------------------------------------------------- */
  --brand-navy: #002347;      /* cbisland.com headings + dark sections        */
  --brand-blue: #004a98;      /* cbisland.com links + primary CTA             */
  --brand-slate: #303e48;     /* cbisland.com body copy                       */

  /* --- surfaces: the brand navy, lightened in even steps ------------------ */
  --bg: #002347;
  --bg-2: #0d2e50;
  --surface: #1a3959;
  --line: #294664;

  /* --- foreground (all >= 4.5:1 on --surface) ----------------------------- */
  --text: #ffffff;            /* 15.8:1 on navy                               */
  --muted: #739bc6;           /* 5.4:1 on navy - brand blue tinted            */
  --accent: #80a4cc;          /* 6.1:1 - accent text, icons, focus            */
  --accent-solid: #4077b2;    /* button fill: 3.4:1 vs bg, 4.7:1 white on it  */

  /* --- semantic ----------------------------------------------------------- */
  --like: #35c48c;
  --nope: #ff6b66;
  --warn: #f0b429;

  /* --- shape + rhythm, matching the site ---------------------------------- */
  --radius: 20px;             /* .card on cbisland.com                        */
  --radius-btn: 12px;         /* .btn on cbisland.com                         */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;            /* .card-body padding on cbisland.com           */
  --space-5: 40px;            /* .container horizontal padding                */

  --shadow: 0 18px 40px rgba(0, 12, 28, .5);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

/* The `hidden` attribute is enforced by a UA rule (`[hidden] { display: none }`)
   that ANY author `display` declaration outranks, because author styles beat the
   UA origin. Several elements toggled via `hidden` here carry `display: grid`
   (.state, .badge), so hiding them silently did nothing and all three state
   panels rendered stacked on top of each other. This rule restores the intent
   and must outrank every author display rule, hence !important. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  background: radial-gradient(120% 80% at 50% 0%, #0d3157 0%, var(--bg) 60%);
  color: var(--text);
  /* 16px/24px is cbisland.com's body rhythm, in the site's own typeface. */
  font: 400 16px/1.5 'Cabin', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

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

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(var(--safe-top) + 12px) 16px 10px;
  flex: none;
}

.icon-btn {
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  padding: 4px 6px;
  border-radius: 12px;
  cursor: pointer;
  min-width: 0;
}

.icon-btn:active { background: rgba(255, 255, 255, .06); }

.ctx-place {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ctx-place::after {
  content: " ▾";
  color: var(--muted);
  font-weight: 400;
}

.ctx-meta {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-actions { display: flex; gap: 8px; flex: none; }

.icon-btn.round {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
}

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--accent-solid);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ---------- deck ---------- */

.deck-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 14px 0;
}

.deck { position: absolute; inset: 4px 14px 0; }

.card {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2) center/cover no-repeat;
  box-shadow: var(--shadow);
  will-change: transform;
  touch-action: pan-y;
  user-select: none;
  transform-origin: 50% 120%;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 17, 35, .94) 4%, rgba(0, 17, 35, .68) 32%, rgba(0, 17, 35, .06) 62%);
}

/* Fallback when a listing photo cannot be decoded or fetched: a branded panel
   rather than an empty card. */
.card--noimage {
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg) 70%);
}

.card--noimage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 50% 30%, rgba(128, 164, 204, .16), transparent 70%);
}

.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-2);
}

.card-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + var(--safe-bottom) * .2);
}

.card-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pill {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16);
  white-space: nowrap;
}

.pill.reason { background: rgba(64, 119, 178, .42); border-color: rgba(128, 164, 204, .65); color: #eaf2fb; }
.pill.dist   { background: rgba(255, 255, 255, .1); color: #e8eefc; }
.pill.feat   { background: rgba(240, 180, 41, .22); border-color: rgba(240, 180, 41, .45); color: #ffe9b3; }

.card h2 {
  /* cbisland.com heading treatment: weight 600, -0.02em tracking. */
  margin: 0 0 var(--space-2);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-shadow: 0 2px 14px rgba(0, 12, 28, .65);
}

.card p {
  margin: 0;
  font-size: 14px;
  color: #d3e0ef;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-cats {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* photo carousel: segment bar in the Tinder idiom */
.card-segments {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  right: var(--space-2);
  z-index: 3;
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.card-segments i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  box-shadow: 0 1px 2px rgba(0, 12, 28, .5);
  transition: background .18s ease;
}

.card-segments i.is-on { background: rgba(255, 255, 255, .92); }

/* Tap affordance: a soft edge wash hinting the outer thirds page the photos. */
.card-tapzones {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* swipe verdict stamps */
.stamp {
  position: absolute;
  top: 26px;
  z-index: 3;
  padding: 7px 14px;
  border: 3px solid;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .06em;
  opacity: 0;
  pointer-events: none;
}

.stamp.yes { left: 20px; color: var(--like); border-color: var(--like); transform: rotate(-14deg); }
.stamp.no  { right: 20px; color: var(--nope); border-color: var(--nope); transform: rotate(14deg); }

/* ---------- empty / loading / error ---------- */

.state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
}

.state h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.state p { margin: 0; color: var(--muted); max-width: 32ch; }
.state-actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }

.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- action bar ---------- */

.actions {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 16px calc(14px + var(--safe-bottom));
}

.act {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}

.act svg { width: 27px; height: 27px; stroke-width: 2.2; }
.act:active { transform: scale(.92); }
.act:disabled { opacity: .35; cursor: default; }
.act.undo, .act.info { width: 46px; height: 46px; color: var(--muted); }
.act.undo svg, .act.info svg { width: 20px; height: 20px; }
.act.skip { color: var(--nope); }
.act.like { color: var(--like); }
.act.like svg { fill: currentColor; stroke: none; }
.act.like:active { background: rgba(53, 196, 140, .16); }
.act.skip:active { background: rgba(242, 97, 93, .16); }

/* ---------- sheets ---------- */

.sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 17, 35, .7);
  backdrop-filter: blur(2px);
  z-index: 40;
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-2);
  border-radius: var(--radius) var(--radius) 0 0;
  border-top: 1px solid var(--line);
  padding: 8px 18px calc(22px + var(--safe-bottom));
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .5);
  animation: rise .24s cubic-bezier(.22, .9, .3, 1);
}

.sheet.tall { min-height: 60vh; }

@keyframes rise { from { transform: translateY(14%); opacity: .6; } }

.sheet-grip {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 4px auto 14px;
}

.sheet h2 { margin: 0 0 var(--space-3); font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }

.ctx-summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}

.ctx-summary b { color: var(--text); font-weight: 600; }

.field { display: block; margin-bottom: 16px; border: 0; padding: 0; }
.field > span, .field > legend { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; padding: 0; }
.field b { color: var(--accent); font-weight: 600; }

select, input[type="range"] {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 11px 12px;
  appearance: none;
}

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397a3bd' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 38px;
}

input[type="range"] { padding: 0; height: 30px; background: none; border: 0; }

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

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8.5px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
}

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

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: rgba(64, 119, 178, .34);
  border-color: var(--accent);
  color: #eaf2fb;
}

.toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14.5px; }
.toggle input { width: 20px; height: 20px; accent-color: var(--accent); }

.btn {
  font: inherit;
  font-weight: 600;
  padding: 12px var(--space-3);
  border-radius: var(--radius-btn);
  border: 0;
  background: var(--accent-solid);
  color: #fff;
  cursor: pointer;
}

.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.full { width: 100%; }
.btn:active { filter: brightness(.92); }

.fineprint { margin: 12px 0 0; font-size: 11.5px; color: #6b7794; text-align: center; }

/* ---------- sheet chrome ---------- */

/* Sticky header so the title and a close button are always reachable in a long
   detail pane - previously the only way out was the scrim or Escape. */
.sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 calc(var(--space-3) * -1) var(--space-3);
  padding: 0 var(--space-3) var(--space-2);
  background: linear-gradient(var(--bg-2) 72%, rgba(13, 46, 80, 0));
}

.sheet-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  min-width: 0;
}

.sheet-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.sheet-close svg { width: 18px; height: 18px; }
.sheet-close:active { background: var(--line); }

/* No extra bottom padding here: a sticky element pins to its containing
   block's *content* box, so reserving space below would push the footer up off
   the bottom edge and leave it floating over the copy. The footer carries its
   own safe-area padding instead. */
.sheet--detail { padding-bottom: 0; }

/* Persistent save/skip so a decision can be made without closing the sheet. */
.detail-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) calc(var(--space-3) * -1) 0;
  padding: var(--space-3) var(--space-3) calc(var(--space-3) + var(--safe-bottom));
  background: linear-gradient(rgba(13, 46, 80, 0), var(--bg-2) 32%);
}

.detail-foot .btn { flex: 1; }

/* ---------- detail + saved ---------- */

.detail-loading { color: var(--muted); font-size: 14px; }

.rating { margin: 0 0 var(--space-3); font-size: 15px; }
.rating a { color: inherit; text-decoration: none; }
.rating .stars { color: var(--warn); letter-spacing: .06em; }
.rating .muted { color: var(--muted); font-size: 13.5px; }

/* Quick actions: the four things people actually want from a listing. */
.detail-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.qa {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: var(--space-2) 6px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.qa svg { width: 20px; height: 20px; color: var(--accent); }
.qa:active { background: var(--line); }

.section { margin-bottom: var(--space-4); }

.section h3 {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ticks { margin: 0; padding: 0; list-style: none; }

.ticks li {
  position: relative;
  padding-left: 24px;
  margin-bottom: var(--space-2);
  font-size: 14.5px;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.tagset { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.tag {
  font-size: 13px;
  padding: 6px 11px;
  border-radius: var(--radius-btn);
  background: var(--surface);
  border: 1px solid var(--line);
  color: #d3e0ef;
}

.rows { margin: 0; padding: 0; list-style: none; }

.rows li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.rows li:last-child { border-bottom: 0; }
.rows li span { display: block; font-size: 12.5px; color: var(--muted); }

.rows--kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.rows--kv li span { flex: none; }
.rows--kv li a { color: var(--accent); text-decoration: none; word-break: break-word; text-align: right; }

.addr { margin: 0 0 var(--space-2); font-size: 14.5px; }
.muted { color: var(--muted); font-size: 13.5px; }

.detail-strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin: calc(var(--space-3) * -1) 0 var(--space-3);
  padding-bottom: var(--space-1);
  scrollbar-width: none;
}

.detail-strip::-webkit-scrollbar { display: none; }

.detail-strip img {
  width: 96px;
  height: 72px;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-btn);
  background: var(--surface);
}

.detail-body .desc p { margin: 0 0 var(--space-3); }
.detail-body .desc p:last-child { margin-bottom: 0; }

.detail-hero {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: var(--radius-btn);
  background: var(--surface);
  margin-bottom: var(--space-3);
}

.detail-body h2 { margin-bottom: 6px; }
.detail-meta { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }
.detail-body p.desc { font-size: 14.5px; color: #d5dcec; margin: 0 0 16px; }

.kv { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.saved-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.saved-item img {
  width: 62px;
  height: 62px;
  border-radius: var(--radius-btn);
  object-fit: cover;
  flex: none;
  background: var(--surface);
}

.saved-item .meta { min-width: 0; flex: 1; }
.saved-item .meta strong { display: block; font-size: 15px; font-weight: 600; }
.saved-item .meta span { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.saved-item a { color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; flex: none; }

.link-out {
  display: inline-block;
  padding: 12px var(--space-3);
  border-radius: var(--radius-btn);
  background: var(--accent-solid);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.empty-note { color: var(--muted); font-size: 14px; }

.field-help {
  margin: -2px 0 var(--space-2);
  font-size: 12.5px;
  color: var(--muted);
}

.hint { color: var(--accent); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* An excluded chip reads as struck-through and dimmed - "off", not "selected". */
.chips--exclude .chip[aria-pressed="true"] {
  background: rgba(255, 107, 102, .16);
  border-color: rgba(255, 107, 102, .5);
  color: #ffd7d5;
  text-decoration: line-through;
}

/* ---------- adaptive prompt ---------- */

.nudge {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(96px + var(--safe-bottom));
  z-index: 55;
  width: min(420px, calc(100vw - 28px));
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow);
  animation: rise .22s ease;
}

.nudge p { margin: 0 0 var(--space-3); font-size: 14.5px; }
.nudge-actions { display: flex; gap: var(--space-2); }
.nudge-actions .btn { flex: 1; padding: 10px var(--space-3); font-size: 14px; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  box-shadow: var(--shadow);
  animation: rise .2s ease;
  max-width: 86vw;
  text-align: center;
}

/* ---------- larger screens ---------- */

@media (min-width: 720px) {
  /* `width: 100%` is load-bearing here. `.deck-wrap` is a column flex item, and
     `margin-inline: auto` cancels the default `align-items: stretch`, so the
     item falls back to its content width. Its only child (#deck) is absolutely
     positioned and contributes nothing, so without an explicit width the
     wrapper collapsed to its 28px of horizontal padding and the deck rendered
     0px wide - the cards were present but invisible on desktop. */
  .deck-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
  .deck { max-width: 460px; inset: 4px 0 0; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 28px)); }
  .topbar, .actions { max-width: 460px; margin-inline: auto; width: 100%; }
  .sheet { left: 50%; transform: translateX(-50%); width: min(520px, 100%); border-radius: var(--radius) var(--radius) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}