/* Shared by the preview page and the unlocked suite.
   One reading measure for every block of text, so the intro paragraph, the
   document and the notices below it all share a left edge and a right edge. */

.work-head, .tabs, .pane { --measure: 42rem; }

/* The reading measure is 42rem and the site wrap is 68rem, so on any wide
   screen a card stopped a third of the page short of the rule above it and the
   booklet below it - three different right edges, which reads as unfinished
   layout rather than as margin. The pages that carry panes get a narrower page
   instead: the sheet fills it, and the gap beside a card becomes an ordinary
   margin. Print is unaffected - the sheet sets its own inch widths there. */
body.work { --w-page: 52rem; }

.work-head { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.work-head .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1.1rem 0; }
.work-head .who { text-align: right; font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.work-head .who small { margin-left: .5em; }
.work-head .who small::before { content: '· '; }

/* Padded to the same gutter the site wrap uses, so the first tab lines up with
   the header and the content instead of hugging the window edge. Padding
   rather than a nested wrap keeps the row scrollable on a phone. */
.tabs {
  display: flex; gap: .25rem; overflow-x: auto;
  padding-inline: max(1.25rem, calc((100% - var(--w-page)) / 2));
  border-bottom: 1px solid var(--rule); background: var(--paper);
  position: sticky; top: 0; z-index: 15;
}
.tabs button {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-2); padding: .95rem 0; margin-right: 1.8rem; cursor: pointer; white-space: nowrap;
}
.tabs button .num { font-size: .95rem; margin-right: .4rem; letter-spacing: 0; text-transform: none; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.pane { padding: clamp(1.75rem, 5vw, 3rem) 0; }
.pane[hidden] { display: none; }
.pane-head { max-width: var(--measure); margin-bottom: 1.75rem; }
.pane-head .k { display: block; margin-bottom: .5rem; }
.pane-head h2 { margin-bottom: .35rem; }
.pane-head p { color: var(--ink-2); margin: 0; }

.doc {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r);
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.7;
  max-width: var(--measure);
}
.doc h3 { font-family: var(--sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.doc p { margin: 0 0 1em; }
.doc p:last-child { margin-bottom: 0; }
.doc .meta { font-family: var(--sans); font-size: .82rem; color: var(--ink-3); margin-top: 1.25rem; }
.doc + .doc { margin-top: 1.5rem; }

.doc-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* locked teaser */
.teaser { position: relative; }
.teaser .fade {
  position: absolute; inset: auto 0 0 0; height: 9rem;
  background: linear-gradient(to bottom, transparent, var(--paper-2) 78%);
  pointer-events: none;
}
.locked-note {
  border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--paper-3);
  padding: 1.1rem 1.25rem; margin-top: 1rem; max-width: var(--measure);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.locked-note p { margin: 0; font-size: .93rem; color: var(--ink-2); }

/* the pay bar */
.paybar {
  position: sticky; bottom: 0; z-index: 30;
  border-top: 1px solid var(--rule-strong); background: var(--paper-2);
}
.paybar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; flex-wrap: wrap; }
.paybar .price { font-family: var(--serif); font-size: 1.3rem; }
.paybar .price small { font-family: var(--sans); font-size: .82rem; color: var(--ink-3); display: block; }

/* design picker */
.designs { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.designs button {
  font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
  background: var(--paper-2); border: 1px solid var(--rule-strong); border-radius: var(--r);
  padding: .6rem .9rem; color: var(--ink-2); min-width: 12rem;
}
.designs button b { display: block; color: var(--ink); font-weight: 600; }
.designs button span { font-size: .82rem; }
.designs button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* slideshow */
.stage-video {
  background: #141210; border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden; max-width: var(--measure);
}
.stage-video canvas { width: 100%; height: auto; display: block; }
.ss-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.ss-meta { font-size: .9rem; color: var(--ink-3); }
.ss-progress { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; max-width: var(--measure); margin-top: .75rem; }
.ss-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }

/* cards */
/* Three wordings, so three columns. At 19rem they wrapped to two and left the
   third stranded on a row of its own, which reads as a mistake rather than a
   set - and the page got narrower when the measure was unified, which is what
   pushed it over. */
.card-set { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
/* Column layout with the action pushed down, so the three Copy buttons land on
   one line however long each wording turns out to be. */
.note-card {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1.25rem; display: flex; flex-direction: column;
}
.note-card .doc-actions { margin-top: auto; padding-top: 1rem; }
.note-card h3 { font-size: 1rem; font-family: var(--sans); font-weight: 600; margin-bottom: .2rem; }
.note-card .for { font-size: .84rem; color: var(--ink-3); margin-bottom: .9rem; }
.note-card .body { font-family: var(--serif); font-size: 1.02rem; line-height: 1.65; }

/* printable thank-you cards, four to a letter sheet */
/* Container is the SHEET, not the card - a card cannot query itself, and cqw
   would silently fall back to the viewport. Same rule as the program panels. */
.card-sheet {
  margin-inline: 0 auto;
  container-type: inline-size;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  width: 8.5in; max-width: 100%; aspect-ratio: 8.5 / 11;
  background: #fff; border: 1px solid var(--rule); margin-top: 1.5rem;
}
.card-cut {
  border: 1px dashed #d8d2c6; padding: 2.4em 2.2em;
  display: flex; flex-direction: column; justify-content: safe center; text-align: center;
  font-size: 1.55cqw; color: #1c1a17; background: #fff; overflow: hidden;
}
.card-cut .c-name { font-size: 1.25em; margin: 0 0 .5em; }
.card-cut .c-body { font-size: .92em; line-height: 1.55; margin: 0; }
.theme-classic .card-cut, .theme-floral .card-cut { font-family: "Iowan Old Style", Palatino, Georgia, serif; }
.theme-modern .card-cut { font-family: system-ui, sans-serif; text-align: left; }

/* the filing guide */
.guide { max-width: 44rem; }
.guide h3 { margin-top: 1.75rem; font-size: 1.1rem; }
.guide ul { padding-left: 1.15rem; }
.guide li { margin-bottom: .5rem; }
.guide dl { margin: 0; }
.guide dt { font-weight: 600; margin-top: 1rem; }
.guide dd { margin: .2rem 0 0; color: var(--ink-2); }

/* status states */
.working { display: flex; align-items: center; gap: .75rem; color: var(--ink-2); padding: 3rem 0; }
.bracket-note { background: var(--accent-soft); border: 1px solid var(--rule-strong); border-radius: var(--r); padding: 1rem 1.2rem; max-width: var(--measure); font-size: .93rem; }
.bracket-note ul { margin: .5rem 0 0; padding-left: 1.1rem; }
mark.bracket { background: #f6e6c8; color: inherit; padding: 0 .15em; border-radius: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) mark.bracket { background: #4a3c1c; }
}

@media print {
  .work-head, .tabs, .paybar, .pane-head, .doc-actions, .designs, .no-print { display: none !important; }
  .card-sheet { width: 8.5in; height: 11in; aspect-ratio: auto; border: 0; margin: 0; }
  .card-cut { font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Phone: three things in the header wrap onto three lines and eat the screen.
   The person's name is the first thing in the pane below anyway, so the header
   keeps only what you cannot get elsewhere. */
@media (max-width: 34rem) {
  .work-head .wrap { display: flex; justify-content: space-between; padding: .75rem 0; }
  .work-head .who { display: none; }
  .brand { font-size: 1rem; }
  .tabs button { padding: .95rem .8rem; font-size: .95rem; min-height: 3rem; }
  .paybar .wrap { padding: .85rem 0; gap: .5rem; }
  /* One line for the price instead of two, so the bar does not eat a quarter
     of a phone screen at the moment of the decision. */
  .paybar .price { display: flex; align-items: baseline; gap: .5rem; }
  .paybar .price small { display: inline; }
  .paybar .btn-lg { flex: 1; }
}

/* ---------------------------------------------------------------------------
   The decision page: the pieces added so the preview argues for itself.
   Everything here is on /preview only.
   --------------------------------------------------------------------------- */

/* The real deadline, computed from the service date they already gave us. */
.deadline {
  margin: 1.5rem 0 0; padding: .8rem 1rem;
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .95rem; max-width: var(--measure, 42rem);
}

/* Coming back from a cancelled checkout. */
.cancel-note {
  max-width: var(--measure, 42rem); margin: 1.5rem auto 0; padding: 1rem 1.25rem;
  background: var(--paper-2); border: 1px solid var(--rule-strong); border-radius: var(--r);
}
.cancel-note p { margin: 0 0 .5rem; }
.cancel-note p:last-child { margin: 0; color: var(--ink-2); }

/* A way to say yes at the two places people are actually persuaded. */
.inline-cta {
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.inline-cta p { margin: 0; }

/* What the $49 is for, spelled out at the moment of the decision. */
.locked-note .locked-head {
  font-family: var(--serif); font-size: 1.05rem; margin: 0 0 .6rem; color: var(--ink);
}
.locked-list {
  margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .35rem;
  font-size: .93rem; color: var(--ink-2); max-width: var(--measure, 42rem);
}

/* Sending them their own obituary - the only way back to a device-bound draft. */
.send-box {
  margin-top: 2rem; padding: 1.15rem 1.25rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r);
  display: flex; flex-direction: column; gap: .85rem; max-width: var(--measure, 42rem);
}
.send-box .send-head { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 .3rem; }
.send-box p { margin: 0; }
.send-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.send-form input {
  flex: 1 1 15rem; font: inherit; font-size: .95rem; padding: .6rem .75rem;
  border: 1px solid var(--rule-strong); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
}
.send-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The pay bar, with the guarantee readable rather than whispered. */
.paybar .pay-side { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.paybar .pay-assure { margin: 0; font-size: .85rem; line-height: 1.4; max-width: 20rem; }
.paybar .pay-assure b { display: block; color: var(--ink); }
.paybar .pay-assure span { color: var(--ink-3); }

@media (max-width: 34rem) {
  .paybar .pay-side { width: 100%; flex-direction: column; align-items: stretch; gap: .5rem; }
  .paybar .pay-assure { max-width: none; font-size: .8rem; }
  .paybar .pay-assure b, .paybar .pay-assure span { display: inline; }
  .inline-cta { flex-direction: column; align-items: stretch; }
}

/* The link back, inside the keep card on the overview. */
.order-link { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.order-link input {
  flex: 1 1 18rem; min-width: 0;
  font-family: var(--sans); font-size: .85rem; padding: .5rem .65rem;
}
/* Stacked on a phone. The basis has to go with it: in a column, flex-basis is
   the height, and an input given 18rem of it became a box a hand tall. */
@media (max-width: 34rem) {
  .order-link { flex-direction: column; align-items: stretch; }
  .order-link input { flex: none; width: 100%; }
}

/* Four pages or eight, folded under the designs: four is the right answer for
   nearly everyone, and the second sheet is offered rather than asked about. */
.pages-fold { margin: 0 0 1.5rem; max-width: none; }
.pages-fold > summary { font-size: .92rem; }
.pages-pick { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; margin: .25rem 0 1rem; max-width: 44rem; }
.pages-pick button {
  font: inherit; text-align: left; cursor: pointer;
  background: var(--paper-2); border: 1px solid var(--rule-strong); border-radius: var(--r);
  padding: .7rem .9rem; color: var(--ink);
}
.pages-pick button:hover { border-color: var(--ink-3); }
.pages-pick button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pages-pick b { display: block; font-weight: 600; font-size: .95rem; }
.pages-pick span { font-size: .85rem; color: var(--ink-2); }
@media (max-width: 34rem) { .pages-pick { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Steps and disclosures.

   Research on designing for the bereaved says the same thing every practical
   guide does: one task at a time, essentials first, everything else folded
   away until it is asked for. The slideshow tab had four things competing at
   eye level, one of them a paragraph about statutory damages.
   --------------------------------------------------------------------------- */
/* The slideshow's three steps: a numbered row each, what it is on the left
   and the thing itself on the right. */
.step {
  border-top: 1px solid var(--ink); padding: 1.75rem 0 2.5rem;
  display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 3rem; align-items: start;
}
.step.off { color: var(--ink-3); }
.step .n { display: flex; align-items: baseline; gap: .9rem; }
.step .n .num { font-size: 2.5rem; line-height: 1; }
.step.off .n .num { color: var(--rule); }
.step .n b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; display: block; }
.step .n p { margin: .6rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
.step.off .n p, .step-off-note { color: var(--ink-3); }
.step-off-note { margin: 0; font-size: .9rem; line-height: 1.6; }
.step .opt { margin-top: 2rem; }
.step > div > .stage-video { max-width: 45rem; }
.ss-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; max-width: 56rem; }
.ss-settings .field { margin: 0; }
.tips { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.tips li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--rule); font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.tips li i { font-style: normal; color: var(--rose); }
.tips li b { color: var(--ink); font-weight: 500; }
@media (max-width: 64rem) {
  .step { grid-template-columns: 1fr; gap: 1.25rem; }
  .ss-settings { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 34rem) {
  .ss-settings { grid-template-columns: 1fr; }
  .step .n .num { font-size: 2rem; }
}

.opt {
  margin-top: 1.5rem; border-top: 1px solid var(--rule);
  max-width: var(--measure, 42rem);
}
.opt > summary {
  cursor: pointer; list-style: none;
  padding: .9rem 0; font-size: .95rem; color: var(--accent-ink);
}
.opt > summary::-webkit-details-marker { display: none; }
.opt > summary::before { content: '▸'; display: inline-block; width: 1.1em; color: var(--ink-3); }
.opt[open] > summary::before { content: '▾'; }
.opt > summary:hover { text-decoration: underline; }
.opt-body { padding: 0 0 1.5rem; }
.opt-body > .small:first-child { margin-top: 0; }

/* The filing guide is the best writing in the product and the densest. Folded
   away behind a summary that says what is inside, so it is there the moment
   somebody is ready to file and invisible while they are still reading their
   father's obituary. */
.opt.guide > summary { font-size: 1rem; }
.opt.guide h3 {
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  margin: 1.5rem 0 .5rem; color: var(--ink);
}
.opt.guide ul { margin: 0 0 .5rem 1.1rem; }
.opt.guide li { margin-bottom: .5rem; }

/* Somebody who has paid should be told so before they read anything else on
   the preview page, because the only reason they are here is that they came
   back through the interview to change an answer. */
.paid-note {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 2rem; padding: 1rem 1.15rem;
  background: var(--accent-soft); border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0;
}
.paid-note p { margin: 0; flex: 1 1 20rem; font-size: .95rem; }

/* The way back in, on the page where a paying customer would otherwise be
   told to go and look at a price again. */
.recover {
  margin-top: 2rem; padding: 1.25rem 1.35rem;
  background: var(--paper-2); border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0;
  text-align: left;
}
.recover h3 { font-family: var(--sans); font-size: 1rem; margin: 0 0 .5rem; }
.recover p { margin: 0 0 .85rem; }
.recover code { font-size: .9em; background: var(--paper-3); padding: 0 .25em; border-radius: 2px; }
.recover-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.recover-row input { flex: 1 1 18rem; min-width: 0; }
@media (max-width: 34rem) { .recover-row { flex-direction: column; } }

/* The answers moved and the writing did not. Warn-coloured because it is a
   real mismatch a family could print, not a notice about how the product
   works. */
.stale { background: var(--warn-soft); border-bottom: 1px solid var(--rule); }
.stale .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: .85rem 0;
}
.stale p { margin: 0; flex: 1 1 24rem; font-size: .9rem; }
@media (max-width: 34rem) { .stale .btn { width: 100%; } }
.keep-delete .sep { color: var(--ink-3); margin: 0 .5rem; }

/* ---------------------------------------------------------------------------
   Your set - the overview the unlocked page opens on.

   The five things as paper objects on one baseline, in the order the landing
   page promised them, each with a line saying what state it is in and the one
   thing to do with it. The keep card sits beside the heading: the link back
   is the second most important thing on the page, not the first.
   --------------------------------------------------------------------------- */
.set-head {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 2rem 3rem; align-items: end; margin-bottom: 1.5rem;
}
.set-head .pane-head { margin: 0; max-width: none; }
.set-head .pane-head h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.06; margin: .5rem 0 .8rem; }

.keep-card {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  padding: 1.3rem 1.5rem; background: var(--paper-2); border: 1px solid var(--rule); min-width: 0;
}
.keep-card.is-warning { border-color: var(--warn); }
.keep-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; margin: 0 0 .35rem; }
.keep-card p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--ink-2); }
.keep-card .order-link { margin-top: .8rem; flex-wrap: nowrap; }
.keep-card .order-link input { flex: 1 1 0; min-width: 0; font-size: .8rem; padding: .65rem .75rem; }
.keep-side { display: flex; flex-direction: row; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.keep-delete summary { cursor: pointer; font-size: .8rem; color: var(--ink-3); list-style: none; }
.keep-delete summary::-webkit-details-marker { display: none; }
.keep-delete summary::before { content: '▸ '; }
.keep-delete[open] summary::before { content: '▾ '; }
.keep-delete p { margin: 0; }
.keep-delete .btn-quiet { font-size: .7rem; padding: .35rem 0; }

.set-gaps {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  margin: 0 0 2.5rem; padding: 1rem 1.25rem; border: 1px solid var(--rose);
  font-size: .93rem; line-height: 1.5; color: var(--ink-2);
}
.set-gaps b { color: var(--ink); font-weight: 500; }
.set-gaps .btn { flex: none; }

.set-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; align-items: start; margin-top: 2.5rem; }
.set-item { min-width: 0; }
.set-item .gcap .st { min-height: 2.6em; margin-bottom: .75rem; }
.set-actions .btn { display: block; width: 100%; text-align: center; white-space: normal; line-height: 1.3; }

/* The prayer card object is the real eight-up sheet with one card shown. */
.g.prayer .thumb-keepsake { position: absolute; inset: 0; }
.g.prayer .thumb-keepsake .obj-mount { position: absolute; inset: 0; }

@media (max-width: 64rem) {
  .set-five { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .set-head { grid-template-columns: 1fr; align-items: start; }
  .keep-card { max-width: 40rem; }
}
@media (max-width: 46rem) {
  .set-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-gaps { flex-direction: column; align-items: stretch; }
}
@media (max-width: 34rem) {
  .keep-card .order-link { flex-wrap: wrap; }
  .keep-card .order-link input { flex: none; width: 100%; }
  .keep-card .order-link .btn { width: 100%; }
  .keep-side { flex-direction: column; align-items: stretch; }
  .keep-side .btn { width: 100%; }
}

/* One keepsake card at card size, cut from the eight-up sheet the renderer
   draws. The sheet now spans the thumbnail, so every cqw measurement on the
   card is scaled up by the same ratio (a card is half a sheet across). */
.thumb-keepsake { background: #fff; }
.thumb-keepsake .pc-sheet {
  grid-template-columns: 1fr; grid-template-rows: 1fr;
  width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border: 0;
}
.thumb-keepsake .pc-card:not(:first-child) { display: none; }
.thumb-keepsake .pc-card { font-size: calc(3cqw * var(--pc-scale, 1)); border: 0; }
.thumb-keepsake .pc-photo {
  width: calc(24.6cqw * var(--pc-scale, 1));
  height: calc(27cqw * var(--pc-scale, 1));
}

/* Phone: pickers and tools tall enough for a thumb. */
@media (max-width: 34rem) {
  .designs button, .pages-pick button { padding: .9rem 1rem; min-height: 3rem; }
  .designs button { min-width: 0; flex: 1 1 100%; }
  .doc-actions .btn { min-height: 3rem; }
  .keep-card .btn, .set-actions .btn { min-height: 3rem; }
}