/* The split screen of the iOS app, for a phone browser. Every look-and-feel value is a variable here, named after
   the app's Style.swift, so the two can be kept alike. System fonts, whitespace, no decoration. */

:root {
  /* Spacing (Style: gutter, rowSpacing, lineSpacing, panelSpacing) */
  --gutter: 20px;
  --row-spacing: 12px;
  --line-spacing: 2px;
  --panel-spacing: 10px;
  /* Item cards (Style: rowCorner, rowCardInset, rowInsets, rowMinContentHeight) */
  --row-corner: 14px;
  --row-card-inset: 10px;
  --row-pad-leading: 12px;
  --row-pad-trailing: 10px;
  --row-pad-vertical: 4px;
  --row-gap: 3px;
  --row-min-content: 30px;
  --control-height: 44px;
  --step-icon: 22px;
  /* The fraction button is drawn this much larger than plus and minus, laid out at their size (Style:
     fractionButtonScale); the fraction options are this much larger than the plain 40 px chip (fractionOptionScale). */
  --fraction-button-scale: 1.2;
  --fraction-option-scale: 1.25;
  /* Pop-ups (Style: tipButtonHeight, tipButtonCorner, tipSheetSpacing, sheetHeaderHeight, popupTile,
     popupTileGlyph, popupTileCorner, fractionBoxWidth, fractionBoxHeight) */
  --tip-button-height: 50px;
  --tip-button-corner: 14px;
  --tip-sheet-spacing: 14px;
  --sheet-header-height: 44px;
  --popup-tile: 56px;
  --popup-tile-glyph: 26px;
  --popup-tile-corner: 14px;
  --fraction-box-width: 96px;
  --fraction-box-height: 72px;
  /* Timing (Style: pickerSeconds; the select animation) */
  --picker-seconds: 0.24s;
  --select-seconds: 0.15s;
  /* Type: the iOS text styles at the default size */
  --body: 1.0625rem;
  --subheadline: 0.9375rem;
  --footnote: 0.8125rem;
  --caption: 0.75rem;
  --share-amount: 2.75rem;

  --background: #fff;
  --label: #000;
  --secondary: rgba(60, 60, 67, 0.6);
  --tertiary: rgba(60, 60, 67, 0.3);
  --outline: rgba(60, 60, 67, 0.29);
  --accent: #0088ff;
  --selected-fill: rgba(0, 136, 255, 0.14);
  --option-fill: rgba(0, 136, 255, 0.12);
  --control: rgba(0, 0, 0, 0.07);
  /* The app's .bar material at rest, solid: iOS Safari runs a pinned bar's colour on under its own toolbar and status
     bar only when the bar has no backdrop blur (else that band showed black; user, 2026-10-16). */
  --bar: rgb(240, 240, 244);
  /* --bar under --backdrop, and the brightness --backdrop leaves: the bars dim themselves while a pop-up is open. */
  --bar-dimmed: rgb(168, 168, 171);
  --dim: 0.7;
  --sheet: #fff;
  --backdrop: rgba(0, 0, 0, 0.3);
  --hover: rgba(0, 0, 0, 0.035);
  --destructive: #ff3b30;
  --doubt: #ff9500;
  /* Layout: on anything wider than a phone the bars run edge to edge and the content keeps a readable column.
     `--side` is the space either side of that column (a percentage of the element it is used on). */
  --column: 520px;
  --side: max(0px, (100% - var(--column)) / 2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000;
    --label: #fff;
    --secondary: rgba(235, 235, 245, 0.6);
    --tertiary: rgba(235, 235, 245, 0.3);
    --outline: rgba(120, 120, 128, 0.5);
    --accent: #0091ff;
    --selected-fill: rgba(0, 145, 255, 0.3);
    --option-fill: rgba(0, 145, 255, 0.2);
    --control: #333;
    --bar: rgb(20, 20, 21);
    --bar-dimmed: rgb(9, 9, 9);
    --dim: 0.45;
    --sheet: #1c1c1e;
    --backdrop: rgba(0, 0, 0, 0.55);
    --hover: rgba(255, 255, 255, 0.07);
    --destructive: #ff453a;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--background);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--label);
  font: var(--body)/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

/* ---- Top bar: the restaurant's name, as an inline navigation title ---- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: env(safe-area-inset-top) var(--gutter) 0;
  background: var(--bar);
}

.topbar h1 {
  margin: 0;
  height: 32px;
  line-height: 32px;
  font-size: var(--body);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Clear": a quiet pill in the top right corner of the page, there only while something is picked. The title
   keeps the same room free on both sides, so it stays centred and is cut short before it reaches the pill. */
.topbar h1 { padding: 0 52px; }

.clear {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 3px);
  right: calc(var(--gutter) - 4px + env(safe-area-inset-right));
  height: 26px;
  padding: 0 12px;
  border-radius: 13px;
  background: var(--control);
  color: var(--secondary);
  font-size: var(--footnote);
  font-weight: 600;
  animation: appear var(--select-seconds) ease-in-out;
}

/* ---- Pop-ups ----
   Shown without the browser's modal mode: while a modal dialog is open, iOS Safari stops following the page's colours
   in the bands under its toolbar and status bar, so they stayed bright over a dimmed page. Each pop-up has its own
   backdrop (app.js, openPopup); the bars sit above it and dim themselves, and Safari's bands follow them. */
.help[open], .confirm[open], .sheet[open] {
  position: fixed;
  inset: 0;
  z-index: 5;
}
.help[open], .confirm[open] {
  margin: auto;
  height: fit-content;
}
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 3;
  background: var(--backdrop);
  animation: appear 0.2s ease-out;
}
html.dimmed .topbar, html.dimmed .panel {
  z-index: 4;
  background: var(--bar-dimmed);
  transition: background-color 0.2s ease-out;
}
html.dimmed .topbar > *, html.dimmed .panel > * {
  filter: brightness(var(--dim));
  transition: filter 0.2s ease-out;
}

/* ---- The receipt ---- */

/* A short receipt leaves blank space above the bottom panel. The receipt and the panel share it equally, so the
   panel sits half that distance below the last line and its background runs on to the bottom of the screen. */
main {
  flex: 1 0 auto;
  padding: 6px max(env(safe-area-inset-right), var(--side)) 0 max(env(safe-area-inset-left), var(--side));
}

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

/* Each line is a rounded card: a thin outline until it is yours, then an accent outline and tint. */
.row {
  margin: var(--row-gap) var(--row-card-inset);
  padding: var(--row-pad-vertical) var(--row-pad-trailing) var(--row-pad-vertical) var(--row-pad-leading);
  border-radius: var(--row-corner);
  box-shadow: inset 0 0 0 1px var(--outline);
  transition: background-color var(--select-seconds) ease-in-out, box-shadow var(--select-seconds) ease-in-out;
}

.row.selected {
  background: var(--selected-fill);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.row-main {
  display: flex;
  align-items: center;
  gap: var(--row-spacing);
  min-height: var(--row-min-content);
  transition: min-height var(--select-seconds) ease-in-out;
}

.row.selected .row-main { min-height: var(--control-height); }

.pick {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--row-spacing);
  text-align: left;
}

/* The leading mark: a small ring until the line is yours, then a plain check. */
.mark {
  flex: none;
  width: 18px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.mark .ring {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--tertiary);
}

.mark svg { width: 17px; height: 17px; display: none; }
.row.selected .mark .ring { display: none; }
.row.selected .mark svg { display: block; }

.text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 0;
  overflow-wrap: anywhere;
}

.qty {
  flex: none;
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
}

.qty .mine { color: var(--accent); }

.prices {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}

/* Your part of the line, under its price. It opens over the same time as the row grows: appearing at once would
   make the row jump to nearly its full height and then creep the rest. */
.part {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  font-size: var(--footnote);
  font-weight: 500;
  line-height: 1.3;
  color: var(--accent);
  transition: max-height var(--select-seconds) ease-in-out, margin-top var(--select-seconds) ease-in-out,
    opacity var(--select-seconds) ease-in-out;
}

.part.shown {
  max-height: 1.3em;
  margin-top: var(--line-spacing);
  opacity: 1;
}

/* A fraction was just chosen: the part price opens or closes over the same time as the options close. */
.row.settling .part { transition-duration: var(--picker-seconds); }

/* Divide, minus and plus sit at the trailing edge once a line is yours. The buttons are taller than the row's
   content box so the tap target stays 44 px without making the card any taller. */
.controls {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--row-min-content);
  color: var(--accent);
  animation: appear var(--select-seconds) ease-in-out;
}

.controls button {
  height: var(--control-height);
  display: grid;
  place-items: center;
}

/* The divide icon gives way to the chosen fraction (or one fraction to another) over the time the options close. */
.divide.swapped > * { animation: appear var(--picker-seconds) ease-in-out; }

.step { width: 28px; }
.step svg, .divide svg { width: var(--step-icon); height: var(--step-icon); }
.divide { min-width: 28px; }
/* Drawn larger without taking more room: the price and the rest of the row stay where they are. */
.divide > * { transform: scale(var(--fraction-button-scale)); }

@keyframes appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* A fraction: raised numerator and lowered denominator around a diagonal slash. */
.fraction {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 22px;
  font-size: var(--caption);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fraction .top { transform: translateY(-4px); }
.fraction .bottom { transform: translateY(4px); }
.fraction .slash { font-size: 1rem; font-weight: 300; }

/* The fraction options open and close under the row, at the same speed both ways; the card and the lines below
   follow. */
.picker {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--picker-seconds) ease-in-out, opacity var(--picker-seconds) ease-in-out;
}

.picker.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.picker-clip {
  min-height: 0;
  overflow: hidden;
}

.options {
  display: flex;
  justify-content: flex-end;
  gap: calc(6px * var(--fraction-option-scale));
  padding: 0 0 6px;
}

.option {
  width: calc(40px * var(--fraction-option-scale));
  padding: calc(6px * var(--fraction-option-scale)) 0;
  display: grid;
  place-items: center;
  border-radius: calc(6px * var(--fraction-option-scale));
  color: var(--accent);
  background: var(--option-fill);
}

/* The option that matches what is set ("1" while no part is), filled like a selected tip chip in the app. */
.option.selected {
  color: #fff;
  background: var(--accent);
}

.option .fraction {
  height: calc(22px * var(--fraction-option-scale));
  font-size: calc(var(--caption) * var(--fraction-option-scale));
}

.option .fraction .top { transform: translateY(calc(-4px * var(--fraction-option-scale))); }
.option .fraction .bottom { transform: translateY(calc(4px * var(--fraction-option-scale))); }
.option .fraction .slash { font-size: calc(1rem * var(--fraction-option-scale)); }

/* ---- The whole receipt, compact, after the items ---- */

.totals {
  margin: 0;
  padding: 4px var(--gutter) 16px;
  display: grid;
  gap: 7px;
  font-size: var(--subheadline);
}

.totals div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.totals dt { color: var(--secondary); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.totals .prominent { font-weight: 600; }
.totals .prominent dt { color: var(--label); }

.totals hr {
  width: 100%;
  height: 0;
  margin: 2px 0;
  border: 0;
  border-top: 1px solid var(--outline);
}

/* ---- The bottom panel: "Your share" and one line of breakdown ---- */

.panel {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--panel-spacing);
  padding: 12px calc(var(--gutter) + max(env(safe-area-inset-right), var(--side)))
    calc(12px + env(safe-area-inset-bottom)) calc(var(--gutter) + max(env(safe-area-inset-left), var(--side)));
  background: var(--bar);
}

.share-label {
  font-size: var(--subheadline);
  color: var(--secondary);
  padding-left: 1px;
}

.share-amount {
  font-size: var(--share-amount);
  font-weight: 600;
  line-height: 1.18;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.share-breakdown {
  font-size: var(--footnote);
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
  padding-left: 1px;
}

/* One line: "Items $39.00 · Tax & fees $3.46 · Tip $7.80". */
.part-line + .part-line::before { content: " · "; }

/* Three lines, when the screen has room (app.js decides): labels in one column, amounts lined up in the next.
   The height is held while nothing is selected, so the panel does not move at the first tap. */
.share-breakdown.stacked {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-content: start;
  gap: var(--line-spacing) 14px;
  min-height: calc(3 * 1.3em + 2 * var(--line-spacing));
}

.stacked .part-line { display: contents; }
.stacked .part-line::before { content: none; }
.stacked .amount { text-align: right; }

/* ---- No receipt in the link, or a link that cannot be read ---- */

.message {
  margin: 0;
  padding: 18vh 32px 0;
  text-align: center;
}

.message img {
  width: 84px;
  height: 84px;
  border-radius: 19px;
}

.message h2 {
  margin: 20px 0 6px;
  font-size: 1.375rem;
  font-weight: 700;
}

.message p {
  margin: 0 auto;
  max-width: 300px;
  color: var(--secondary);
  font-size: var(--subheadline);
  line-height: 1.4;
}

.message a {
  display: inline-block;
  margin-top: 22px;
  padding: 11px 20px;
  border-radius: 12px;
  background: var(--option-fill);
  color: var(--accent);
  font-size: var(--body);
  font-weight: 600;
  text-decoration: none;
}

/* ---- Custom fraction: a card in the middle, like the other pop-ups (user, 2026-10-18); the app's FractionSheet inside ---- */

.sheet {
  margin: auto;
  height: fit-content;
  width: min(360px, calc(100vw - 32px));
  padding: 6px 0 18px;
  border: 0;
  border-radius: 20px;
  background: var(--sheet);
  color: var(--label);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: sheet-in 0.18s ease-out;
}

.sheet + .backdrop { animation-duration: 0.18s; }

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--sheet-header-height);
  padding: 0 4px 0 var(--gutter);
}

.sheet-header h2 {
  margin: 0;
  font-size: var(--body);
  font-weight: 600;
}

.sheet-cancel {
  height: 44px;
  padding: 0 16px;
  color: var(--accent);
}

.fraction-fields {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding-top: 4px;
}

.fraction-box {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: var(--footnote);
  color: var(--secondary);
}

.fraction-box input {
  width: var(--fraction-box-width);
  height: var(--fraction-box-height);
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--tip-button-corner);
  background: var(--control);
  color: var(--label);
  font: 600 2.125rem/1 ui-rounded, -apple-system, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
  caret-color: var(--accent);
}

.fraction-box input::placeholder { color: var(--tertiary); }
.fraction-box input:focus { border-color: var(--accent); }
.fraction-box input:focus-visible { outline: none; }

.fraction-fields .slash {
  padding-top: 10px;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--secondary);
}

.fraction-preview {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: var(--tip-sheet-spacing);
}

.fraction-preview strong {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fraction-preview strong.empty { color: var(--tertiary); }
.fraction-preview small { font-size: var(--footnote); color: var(--secondary); }

.sheet-set {
  display: block;
  width: calc(100% - 2 * var(--gutter));
  height: var(--tip-button-height);
  margin: var(--tip-sheet-spacing) auto 0;
  border-radius: var(--tip-button-corner);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.sheet-set:disabled { background: var(--control); color: var(--secondary); cursor: default; }

/* ---- How it works: a card over the receipt on the first visit ---- */

.help {
  width: min(320px, calc(100vw - 40px));
  padding: 22px 22px 18px;
  border: 0;
  border-radius: 22px;
  background: var(--sheet);
  color: var(--label);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  animation: sheet-in 0.2s ease-out;
}

.help:focus { outline: none; }



.help h2 {
  margin: 0 0 16px;
  font-size: 1.25rem;
  font-weight: 700;
}

.help-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.help-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.help-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent);
  background: var(--option-fill);
}

.help-icon svg { width: 20px; height: 20px; }

.help-text {
  display: grid;
  gap: 1px;
  line-height: 1.25;
}

.help-text b { font-weight: 600; }
.help-text small { font-size: var(--footnote); color: var(--secondary); }

.help-done {
  width: 100%;
  height: 48px;
  margin-top: 20px;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ---- Clear selection: a small card in the middle, Cancel and a red Clear side by side ---- */

.confirm {
  width: min(290px, calc(100vw - 48px));
  padding: 22px 16px 16px;
  border: 0;
  border-radius: 18px;
  background: var(--sheet);
  color: var(--label);
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  animation: sheet-in 0.2s ease-out;
}

.confirm:focus { outline: none; }



.popup-tile {
  width: var(--popup-tile);
  height: var(--popup-tile);
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: var(--popup-tile-corner);
  color: #fff;
}

.popup-tile.destructive { background: var(--destructive); }
.popup-tile svg { width: var(--popup-tile-glyph); height: var(--popup-tile-glyph); }

.confirm h2 {
  margin: 0;
  font-size: var(--body);
  font-weight: 600;
}

.confirm p {
  margin: 5px 0 0;
  color: var(--secondary);
  font-size: var(--footnote);
  line-height: 1.35;
}

.confirm-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}

.confirm-buttons button {
  height: 44px;
  border-radius: 12px;
}

.confirm-cancel {
  background: var(--control);
  font-weight: 500;
}

.confirm-clear {
  background: var(--destructive);
  color: #fff;
  font-weight: 600;
}

/* ---- A mouse: show which line is under the pointer ---- */

@media (hover: hover) and (pointer: fine) {
  .row:not(.selected):hover { background: var(--hover); }
  .option:hover, .message a:hover, .help-done:hover, .confirm-clear:hover { filter: brightness(1.08); }
  .clear:hover, .confirm-cancel:hover { filter: brightness(0.94); }
}

/* ---- A phone: the receipt scrolls inside main, between the bar and the panel, and the page itself never scrolls ----
   When the page scrolled, iPhone Safari hid and showed its toolbar, and moved the bottom panel late each time: it
   jumped about 130 px and slid back (user, 2026-10-18; sticky and fixed panels both did it). With only main
   scrolling, the toolbar stays put and the panel never moves, like the app. A receipt that fits does not scroll:
   main and the panel share the blank space, as before. */

@media (max-width: 859.98px) {
  /* The page now ends at Safari's bars, so what shows under them is the page's own background: the bar colour, so the
     title bar and the panel carry on under them as when the page scrolled (user, 2026-10-18). Dimmed with them. */
  html { height: 100%; overflow: hidden; background: var(--bar); }
  html.dimmed { background: var(--bar-dimmed); transition: background-color 0.2s ease-out; }
  body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .topbar { position: static; }
  main {
    flex: 1 1 auto;   /* grows like the panel when the receipt fits (they share the blank space); shrinks and scrolls when it does not */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .panel { position: static; }
}

/* ---- A wide window (a computer, a tablet on its side): the receipt on the left, the share beside it ----
   The bar runs across the window. The items and totals keep to one column; "Your share" is a card in the next
   column that stays in view while the receipt scrolls. app.js reads this layout from `body`'s grid display. */

@media (min-width: 860px) {
  body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 620px) 340px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 32px;
    align-content: start;
  }

  .topbar { grid-column: 1 / -1; }
  .topbar h1 { height: 52px; line-height: 52px; }

  /* The receipt's two parts and the panel are placed on the page's grid directly. */
  main { display: contents; }

  .items {
    grid-column: 2;
    grid-row: 2;
    margin-top: 21px;
  }

  .totals {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    padding-top: 8px;
    padding-bottom: 48px;
  }

  .panel {
    grid-column: 3;
    grid-row: 2 / span 2;
    align-self: start;
    top: 76px;
    bottom: auto;
    margin-top: 24px;
    padding: 20px 22px 22px;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px var(--outline);
    gap: 14px;
  }

  .clear { top: calc(env(safe-area-inset-top) + 11px); }

  .share-breakdown.stacked {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--outline);
    font-size: var(--subheadline);
  }

  .message {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 1240px) {
  body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 720px) 380px minmax(0, 1fr);
    column-gap: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { transition-duration: 0.01s !important; animation-duration: 0.01s !important; }
}