/* ==========================================================================
   Pet Life Manager — mobile-first stylesheet.

   Phone-first: the base rules ARE the phone layout. The only breakpoint dresses
   a desktop window up as a phone rather than reflowing the app into a wide
   layout it was never designed for.

   Tap targets stay at or above 44px throughout — §3 of the product notes asks
   for a one-handed app used at the vet and on a walk.
   ========================================================================== */

:root {
  --bg:#f6f4f0;
  --surface:#ffffff;
  --surface-2:#faf8f5;
  --ink:#15191c;
  --ink-2:#4d585f;
  --ink-3:#818e96;
  --line:#e6e1da;

  --brand:#14867a;
  --brand-press:#11655c;
  --brand-soft:#d9ece9;
  --brand-ink:#0b3c37;

  --warn:#c77619;
  --warn-soft:#fbeeda;
  --bad:#c2453c;
  --bad-soft:#fadedb;
  --good:#3f8f5b;
  --good-soft:#dcefe2;

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px;
  --shadow:0 1px 2px rgba(20,25,28,.05), 0 6px 18px -8px rgba(20,25,28,.16);
  --shadow-lg:0 10px 44px -12px rgba(20,25,28,.3);
  --tap:44px;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --nav-h:62px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0e1214; --surface:#171d20; --surface-2:#1e262a;
    --ink:#f0f3f4; --ink-2:#aab6bc; --ink-3:#77858c; --line:#2a3438;
    --brand:#2ba496; --brand-press:#38bcac; --brand-soft:#123a35; --brand-ink:#9fded5;
    --warn:#dfa04a; --warn-soft:#3a2d16;
    --bad:#e2685e; --bad-soft:#3b1f1c;
    --good:#5cb37a; --good-soft:#1b3324;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 6px 18px -8px rgba(0,0,0,.6);
    --shadow-lg:0 10px 44px -12px rgba(0,0,0,.8);
  }
}

:root[data-theme="dark"] {
  --bg:#0e1214; --surface:#171d20; --surface-2:#1e262a;
  --ink:#f0f3f4; --ink-2:#aab6bc; --ink-3:#77858c; --line:#2a3438;
  --brand:#2ba496; --brand-press:#38bcac; --brand-soft:#123a35; --brand-ink:#9fded5;
  --warn:#dfa04a; --warn-soft:#3a2d16;
  --bad:#e2685e; --bad-soft:#3b1f1c;
  --good:#5cb37a; --good-soft:#1b3324;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-lg:0 10px 44px -12px rgba(0,0,0,.8);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body { height:100%; }

body {
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.45;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
a { color:var(--brand); }

/* ------------------------------------------------------------ app shell --- */

#device { height:100dvh; width:100%; background:var(--bg); position:relative; overflow:hidden; }

#app { display:flex; flex-direction:column; height:100%; position:relative; }

#view {
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:calc(var(--safe-t) + 8px) 16px calc(var(--nav-h) + var(--safe-b) + 24px);
  scroll-behavior:smooth;
}

/* ---------------------------------------------------------------- type --- */

h1,h2,h3,h4 { margin:0; font-weight:650; letter-spacing:-.015em; line-height:1.2; }
h1 { font-size:27px; }
h2 { font-size:19px; }
h3 { font-size:16px; }
p { margin:0 0 12px; }

.muted { color:var(--ink-2); }
.dim   { color:var(--ink-3); }
.tiny  { font-size:12.5px; }
.small { font-size:14px; }
.num   { font-variant-numeric:tabular-nums; }

.section-title {
  display:flex; align-items:baseline; justify-content:space-between;
  margin:26px 0 10px; font-size:12.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.section-title:first-child { margin-top:8px; }
.section-title button { font-size:12.5px; font-weight:650; color:var(--brand); letter-spacing:0; text-transform:none; }

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

.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}

.stack { display:flex; flex-direction:column; gap:10px; }
.stack-sm { display:flex; flex-direction:column; gap:6px; }

/* A tappable row: icon, text block, trailing meta. The app's workhorse. */
.row {
  display:flex; align-items:center; gap:13px;
  width:100%; min-height:var(--tap);
  padding:13px 15px; text-align:left;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
  transition:transform .12s ease, background .12s ease;
}
.row:active { transform:scale(.985); background:var(--surface-2); }
.row-body { flex:1; min-width:0; }
.row-title { font-weight:600; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-sub { font-size:13.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-meta { font-size:13px; color:var(--ink-3); white-space:nowrap; text-align:right; }

.glyph {
  flex:none; display:grid; place-items:center;
  width:40px; height:40px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line);
  font-size:19px; line-height:1;
}
.glyph.brand { background:var(--brand-soft); border-color:transparent; }
.glyph.warn  { background:var(--warn-soft);  border-color:transparent; }
.glyph.bad   { background:var(--bad-soft);   border-color:transparent; }

/* --------------------------------------------------------------- chips --- */

.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  font-size:12.5px; font-weight:600; white-space:nowrap;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line);
}
.chip.brand { background:var(--brand-soft); color:var(--brand-ink); border-color:transparent; }
.chip.warn  { background:var(--warn-soft);  color:var(--warn);      border-color:transparent; }
.chip.bad   { background:var(--bad-soft);   color:var(--bad);       border-color:transparent; }
.chip.good  { background:var(--good-soft);  color:var(--good);      border-color:transparent; }

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

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

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:0 18px;
  border-radius:var(--r-sm); font-size:15.5px; font-weight:650;
  background:var(--surface-2); color:var(--ink); border:1px solid var(--line);
  transition:transform .12s ease, filter .12s ease;
}
.btn:active { transform:scale(.97); }
.btn.primary { background:var(--brand); color:#fff; border-color:transparent; }
.btn.primary:active { background:var(--brand-press); }
.btn.danger  { background:transparent; color:var(--bad); border-color:var(--bad); }
.btn.ghost   { background:transparent; border-color:transparent; color:var(--brand); }
.btn.block   { width:100%; }
.btn:disabled { opacity:.45; pointer-events:none; }

/* 2×2 quick actions on the home screen — §4 of the notes. */
.quick { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quick button {
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:15px; min-height:88px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
  font-size:14.5px; font-weight:600; text-align:left;
  transition:transform .12s ease;
}
.quick button:active { transform:scale(.97); }
.quick .q-icon { font-size:22px; line-height:1; }

/* ------------------------------------------------------- pet switcher --- */

.petbar { display:flex; gap:9px; overflow-x:auto; padding:4px 0 6px; scrollbar-width:none; }
.petbar::-webkit-scrollbar { display:none; }

.pet-pill {
  display:flex; align-items:center; gap:8px; flex:none;
  min-height:var(--tap); padding:6px 15px 6px 7px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  font-weight:620; font-size:14.5px; box-shadow:var(--shadow);
}
.pet-pill[aria-pressed="true"] { background:var(--brand); color:#fff; border-color:transparent; }
.pet-pill .av { width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  background:var(--brand-soft); font-size:16px; }
.pet-pill[aria-pressed="true"] .av { background:rgba(255,255,255,.22); }

.avatar {
  display:grid; place-items:center; border-radius:999px;
  background:var(--brand-soft); overflow:hidden; flex:none;
}
.avatar img { width:100%; height:100%; object-fit:cover; }

/* ---------------------------------------------------------- hero header --- */

.hero { display:flex; align-items:center; gap:14px; margin:6px 0 4px; }
.hero .avatar { width:56px; height:56px; font-size:29px; }
.hero h1 { font-size:25px; }

/* ------------------------------------------------------------ progress --- */

.bar { height:7px; border-radius:999px; background:var(--line); overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:999px; background:var(--brand); transition:width .35s ease; }

/* ------------------------------------------------------------ calendar --- */

/* Segmented control: calendar vs agenda. */
.seg {
  display:grid; grid-template-columns:1fr 1fr; gap:3px;
  padding:3px; margin:4px 0 12px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
}
.seg button {
  min-height:36px; border-radius:9px;
  font-size:14px; font-weight:620; color:var(--ink-2);
}
.seg button[aria-selected="true"] {
  background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow);
}

.cal-head { display:flex; align-items:center; justify-content:space-between; margin:2px 0 8px; }
.cal-title { font-size:17px; }
.cal-nav {
  width:var(--tap); height:var(--tap); border-radius:12px;
  font-size:22px; line-height:1; color:var(--ink-2);
  display:grid; place-items:center;
}
.cal-nav:active { background:var(--surface-2); }

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

.cal-dow {
  text-align:center; padding:4px 0 6px;
  font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--ink-3);
}

/* Square-ish cells that stay tappable at 44px even on a 375px screen. */
.cal-cell {
  position:relative; aspect-ratio:1 / 1; min-height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border-radius:11px; border:1px solid transparent;
  font-variant-numeric:tabular-nums;
  transition:background .12s ease, transform .1s ease;
}
.cal-cell.empty-cell { pointer-events:none; }
.cal-cell:active { transform:scale(.93); }
.cal-cell .cal-num { font-size:14.5px; font-weight:560; color:var(--ink); }
.cal-cell.has-items .cal-num { font-weight:680; }

.cal-cell.is-today .cal-num { color:var(--brand); font-weight:750; }
.cal-cell.is-today { background:var(--brand-soft); }

.cal-cell.is-selected { border-color:var(--brand); background:var(--surface); }
.cal-cell.is-selected.is-today { background:var(--brand-soft); }

/* Dots: one per kind of thing on that day, never one per item. */
.cal-dots { display:flex; gap:2.5px; height:6px; align-items:center; }
.cal-dots .dot { width:5px; height:5px; border-radius:999px; display:block; }
.dot-event   { background:var(--brand); }
.dot-due     { background:var(--warn); }
.dot-late    { background:var(--bad); }
.dot-history { background:var(--ink-3); opacity:.55; }

/* ------------------------------------------------------------ timeline --- */

.tl { position:relative; padding-left:30px; }
.tl::before {
  content:''; position:absolute; left:11px; top:6px; bottom:6px;
  width:2px; background:var(--line);
}
.tl-item { position:relative; padding:0 0 18px; }
.tl-item::before {
  content:''; position:absolute; left:-24px; top:7px;
  width:11px; height:11px; border-radius:999px;
  background:var(--brand); box-shadow:0 0 0 3px var(--bg);
}
.tl-date { font-size:12.5px; font-weight:700; color:var(--ink-3); letter-spacing:.03em; }

/* ------------------------------------------------------------ bottom nav --- */

#tabbar {
  flex:none; display:grid; grid-template-columns:repeat(5,1fr);
  height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line);
}
#tabbar button {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10.5px; font-weight:620; color:var(--ink-3); letter-spacing:.01em;
  transition:color .12s ease;
}
#tabbar button .ti { font-size:21px; line-height:1; transition:transform .16s ease; }
#tabbar button[aria-current="page"] { color:var(--brand); }
#tabbar button[aria-current="page"] .ti { transform:translateY(-1px) scale(1.1); }
#tabbar button:active .ti { transform:scale(.9); }

/* Unread-style dot for overdue items. */
.badge-dot {
  position:absolute; transform:translate(11px,-9px);
  width:8px; height:8px; border-radius:999px; background:var(--bad);
  box-shadow:0 0 0 2px var(--surface);
}

/* ---------------------------------------------------------------- auth --- */

.auth { padding:28px 4px 24px; }
.auth-mark {
  width:62px; height:62px; border-radius:20px; margin-bottom:18px;
  display:grid; place-items:center; font-size:31px;
  background:var(--brand-soft);
}
.auth h1 { font-size:26px; margin-bottom:6px; }
.auth > p { margin-bottom:20px; }
.auth form { margin-top:4px; }

.auth-error {
  padding:11px 13px; margin-bottom:16px;
  border-radius:var(--r-sm);
  background:var(--bad-soft); color:var(--bad);
  border:1px solid color-mix(in srgb, var(--bad) 30%, transparent);
  font-size:14px; font-weight:560;
}

/* The checkbox is the one control that should not stretch full width. */
.check {
  display:flex; align-items:center; gap:10px;
  min-height:var(--tap); margin:2px 0 16px;
  font-size:14.5px; color:var(--ink-2);
}
.check input {
  width:21px; height:21px; min-height:0; flex:none; margin:0; padding:0;
  accent-color:var(--brand);
  /* The global `input { appearance:none }` above strips checkboxes too, which
     leaves a ticked box looking empty. Put the native control back. */
  appearance:auto; -webkit-appearance:checkbox;
}

/* No tab bar behind the sign-in screen — there is nowhere to navigate to yet. */
#app[data-auth="true"] #tabbar { display:none; }
#app[data-auth="true"] #view { padding-bottom:calc(var(--safe-b) + 24px); }

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

.scrim {
  position:absolute; inset:0; z-index:40;
  background:rgba(10,14,16,.42);
  backdrop-filter:blur(2px);
  animation:fade .18s ease;
}
@keyframes fade { from { opacity:0; } }

.sheet {
  position:absolute; left:0; right:0; bottom:0; z-index:41;
  max-height:88%; display:flex; flex-direction:column;
  background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-lg);
  animation:rise .26s cubic-bezier(.22,1,.36,1);
  padding-bottom:var(--safe-b);
}
@keyframes rise { from { transform:translateY(100%); } }

.sheet-grab { width:38px; height:4px; border-radius:999px; background:var(--line); margin:9px auto 2px; flex:none; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 18px 4px; flex:none; }
.sheet-body { padding:8px 18px 18px; overflow-y:auto; }
.sheet-foot { padding:12px 18px calc(14px + var(--safe-b)); border-top:1px solid var(--line); display:flex; gap:10px; flex:none; }

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

.field { display:block; margin-bottom:14px; }
.field > span { display:block; font-size:13px; font-weight:650; color:var(--ink-2); margin-bottom:6px; }

input, select, textarea {
  width:100%; min-height:var(--tap); padding:11px 13px;
  background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:16px; /* 16px stops iOS zooming the page on focus */
  appearance:none;
}
textarea { min-height:86px; resize:vertical; line-height:1.4; }
input:focus, select, textarea:focus, .btn:focus-visible, .row:focus-visible {
  outline:2px solid var(--brand); outline-offset:1px;
}
select { background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:38px; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ------------------------------------------------------------ assistant --- */

.chat { display:flex; flex-direction:column; gap:14px; padding-bottom:8px; }

.bubble {
  max-width:86%; padding:11px 14px; border-radius:var(--r-lg);
  font-size:15.5px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere;
}
.bubble.me   { align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:7px; }
.bubble.bot  { align-self:flex-start; background:var(--surface); border:1px solid var(--line);
               border-bottom-left-radius:7px; box-shadow:var(--shadow); }

.bot-cards { align-self:flex-start; width:92%; display:flex; flex-direction:column; gap:7px; }
.bot-cards .row { padding:10px 13px; }

.confirm {
  align-self:flex-start; width:92%;
  padding:13px; border-radius:var(--r);
  background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 32%, transparent);
}
.confirm .confirm-note { font-size:12.5px; font-weight:650; color:var(--warn); margin-bottom:9px; }
.confirm .btn-set { display:flex; gap:9px; }

.bubble.bad { background:var(--bad-soft); border-color:color-mix(in srgb, var(--bad) 30%, transparent); }

/* "answered offline" — quieter than the reply it annotates. */
.mode-note {
  align-self:flex-start; max-width:86%;
  font-size:12px; line-height:1.4; color:var(--ink-3);
  padding:0 4px;
}

/* Typing indicator while the answer streams. */
.dots { display:inline-flex; gap:4px; align-items:center; height:20px; }
.dots i {
  width:7px; height:7px; border-radius:999px; background:var(--ink-3);
  animation:blink 1.3s infinite both;
}
.dots i:nth-child(2) { animation-delay:.18s; }
.dots i:nth-child(3) { animation-delay:.36s; }
@keyframes blink { 0%,80%,100% { opacity:.25; } 40% { opacity:1; } }

.confirm .small { color:var(--ink-2); }

#composer {
  flex:none; display:flex; gap:9px; align-items:flex-end;
  padding:10px 14px calc(10px + var(--safe-b));
  border-top:1px solid var(--line); background:var(--surface);
}
#composer textarea {
  flex:1; min-height:var(--tap); max-height:110px; height:var(--tap);
  border-radius:22px; padding:11px 16px; resize:none; overflow-y:auto;
  /* The box auto-grows to its content, so a scrollbar only ever appears at the
     110px cap — and a permanent sliver next to a one-line field looks broken. */
  scrollbar-width:none;
}
#composer textarea::-webkit-scrollbar { display:none; }
.mic { flex:none; width:var(--tap); height:var(--tap); border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line); font-size:19px; display:grid; place-items:center; }
.mic[data-on="true"] { background:var(--bad); border-color:transparent; animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 9px rgba(194,69,60,.16); } }
.send { flex:none; width:var(--tap); height:var(--tap); border-radius:999px;
  background:var(--brand); color:#fff; font-size:18px; display:grid; place-items:center; }

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

#toast {
  position:absolute; left:50%; bottom:calc(var(--nav-h) + var(--safe-b) + 18px);
  transform:translate(-50%, 14px); z-index:60;
  max-width:88%; padding:11px 17px; border-radius:999px;
  background:var(--ink); color:var(--bg);
  font-size:14px; font-weight:600; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
#toast[data-show="true"] { opacity:1; transform:translate(-50%, 0); }

/* On the assistant screen the message box sits above the tab bar, so the toast
   has to clear it too — otherwise it lands on top of the field being typed in.
   Scoped to #device, not #app: the toast is a sibling of #app, not inside it. */
#device:has(#composer) #toast { bottom:calc(var(--nav-h) + var(--safe-b) + 76px); }

/* --------------------------------------------------------------- misc --- */

.empty { text-align:center; padding:44px 22px; color:var(--ink-2); }
.empty .e-icon { font-size:38px; margin-bottom:10px; }

.divider { height:1px; background:var(--line); margin:16px 0; border:0; }

.kv { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.kv:last-child { border-bottom:0; }
.kv dt { color:var(--ink-2); font-size:14.5px; }
.kv dd { margin:0; font-weight:600; font-size:14.5px; text-align:right; }

.pad { padding:15px; }

.list-row { padding:7px 0; border-bottom:1px solid var(--line); }
.list-row:last-child { border-bottom:0; padding-bottom:0; }

.emergency-hero {
  background:var(--bad); color:#fff; border-radius:var(--r-lg);
  padding:18px; margin-bottom:14px;
}
.emergency-hero .eh-top { display:flex; align-items:center; gap:13px; }
.emergency-hero .avatar { width:52px; height:52px; font-size:27px; background:rgba(255,255,255,.2); }

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

/* ==========================================================================
   Desktop — show the phone, do not become a website.
   ========================================================================== */

@media (min-width:900px) {
  body {
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center; justify-items:center;
    min-height:100dvh; padding:26px;
    background:
      radial-gradient(1000px 620px at 78% -8%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 62%),
      var(--bg);
  }

  #desk-info { grid-column:1; max-width:290px; justify-self:end; padding-right:38px; }
  #desk-info h2 { font-size:21px; margin-bottom:8px; }
  #desk-info p  { font-size:14px; color:var(--ink-2); }
  #desk-info .dl { display:flex; flex-direction:column; gap:8px; margin-top:18px; }
  #desk-info .dl button {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 14px; border-radius:var(--r-sm); font-size:13.5px; font-weight:600;
    background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  }
  #desk-info .dl button[aria-pressed="true"] { border-color:var(--brand); color:var(--brand); }
  #desk-info .dl button span:last-child { color:var(--ink-3); font-weight:500; font-variant-numeric:tabular-nums; }

  #device {
    grid-column:2;
    width:var(--dw, 390px);
    height:min(var(--dh, 844px), calc(100dvh - 52px));
    border-radius:52px;
    border:11px solid #14181b;
    box-shadow:0 0 0 2px #33393d, 0 42px 90px -26px rgba(10,14,16,.55);
    overflow:hidden;
  }

  /* The notch is cosmetic, but it is what makes the frame read as a phone. */
  #device::before {
    content:''; position:absolute; z-index:30; top:9px; left:50%;
    transform:translateX(-50%); width:108px; height:26px;
    border-radius:999px; background:#14181b;
  }
  #device[data-notch="false"]::before { display:none; }
  #device[data-notch="false"] { border-radius:26px; }

  #view { padding-top:44px; }
  #device[data-notch="false"] #view { padding-top:14px; }

  #desk-hint { grid-column:3; justify-self:start; max-width:240px; padding-left:38px;
    font-size:13px; color:var(--ink-3); }
}

@media (max-width:899px) {
  #desk-info, #desk-hint { display:none; }
}