/* Glowly web editor. Follows docs/DESIGN.md: light-first, ink-black primary buttons, system font, no gradients. */
:root {
  --background: #ffffff;
  --surface: #f5f5f7;
  --separator: #e5e5ea;
  --text: #111114;
  --text-2: #6e6e73;
  --text-3: #a1a1a6;
  --accent: #111114;
  --on-accent: #ffffff;
  --highlight: #0a84ff;
  --destructive: #ff3b30;
  --backdrop: #0b0b0c;
  --backdrop-raised: #1c1c1e;
  --backdrop-line: #2c2c2e;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;
    --surface: #1c1c1e;
    --separator: #2c2c2e;
    --text: #ffffff;
    --text-2: #98989d;
    --text-3: #636366;
    --accent: #ffffff;
    --on-accent: #111114;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 17px/22px var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
img { display: block; }
.fine { font-size: 13px; line-height: 18px; color: var(--text-2); }
.fine a { color: var(--text-2); }
:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }

/* Icons: inline SVG, monochrome, stroke follows text. */
[data-icon] svg, .icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border: 0; border-radius: 12px;
  font-size: 17px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.button:active { opacity: 0.8; }
.button:disabled { opacity: 0.35; cursor: default; }
.button--primary { background: var(--accent); color: var(--on-accent); }
.button--secondary { background: var(--surface); color: var(--text); }
.button--light { background: #ffffff; color: #111114; }
.button--block { width: 100%; }
.button__spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
.text-button { background: none; border: 0; padding: 8px 4px; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--text); }
.icon-button {
  width: 40px; height: 40px; border-radius: 20px; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1); color: #ffffff; cursor: pointer;
  transition: opacity 0.2s var(--ease);
}
.icon-button:disabled { opacity: 0.3; cursor: default; }
.icon-button--plain { background: var(--surface); color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Start ---- */
.screen { min-height: 100%; }
.start { display: flex; flex-direction: column; min-height: 100svh; }
/* View Transitions between the start screen and the editor (crossfade of the root, the photo morphs). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: var(--ease); }
/* A tapped sample's thumbnail grows into the editor's photo. */
::view-transition-group(photo) { animation-duration: 0.38s; animation-timing-function: var(--ease); }
::view-transition-old(photo), ::view-transition-new(photo) { height: 100%; object-fit: cover; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + var(--safe-top)) 20px 12px; max-width: 1200px; width: 100%; margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; margin-right: auto; }
.brand img { border-radius: 7px; }
.account-button {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border: 0; border-radius: 10px; background: var(--surface); font-size: 15px; font-weight: 500; cursor: pointer;
}
.start__main { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 40px 20px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.start__title { font-size: 34px; line-height: 41px; font-weight: 600; letter-spacing: -0.4px; margin: 0 0 8px; }
.start__lede { margin: 0 0 32px; color: var(--text-2); }
.drop {
  width: 100%; min-height: 280px; border-radius: 16px; background: var(--surface);
  border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 32px 20px; cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.drop.is-over { border-color: var(--text); }
/* The icon is drawn by JS; its box is fixed so nothing moves when it appears. */
.drop__icon { display: block; width: 40px; height: 40px; color: var(--text-2); }
.drop__icon svg { display: block; width: 40px; height: 40px; stroke-width: 1.4; }
.drop__hint { font-size: 15px; color: var(--text-2); }
.consent-note { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--text-2); }
.consent-note a { color: var(--text-2); }
.samples { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.samples__label { font-size: 15px; color: var(--text-2); }
.samples__row { display: flex; gap: 12px; }
.sample { border: 0; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer; width: 56px; height: 56px; background: var(--surface); transition: transform 0.15s var(--ease), opacity 0.2s var(--ease); }
.sample img { width: 56px; height: 56px; object-fit: cover; }
.sample:hover { opacity: 0.85; }
.sample:active { transform: scale(0.94); }
.start__fine { margin-top: 28px; max-width: 460px; }
.start__foot { display: flex; gap: 8px; justify-content: center; padding: 16px 20px calc(16px + var(--safe-bottom)); }
.start__foot a { text-decoration: none; }
@media (hover: none) { .drop__hint { display: none; } }

/* ---- Glass (docs/DESIGN.md, "Glass (editor chrome)") ----
   Only floating chrome is glass: the top cluster, the tray, pills, the notice, sheets and the toast. The photo and
   text pages stay solid. At most two large blurred layers (top cluster, tray) are on screen; nothing that moves
   every frame is blurred itself (the dial's ruler moves inside the tray, the tray does not). */
:root {
  --glass-blur: blur(28px) saturate(180%);
  --glass-dark: rgb(30 30 32 / 0.48);
  --glass-dark-dense: rgb(24 24 26 / 0.66);
  --glass-light: rgb(255 255 255 / 0.86);
  /* Top-edge specular and a hairline, plus a very soft lift. */
  --glass-edge-dark: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 0.5px rgb(255 255 255 / 0.12);
  --glass-edge-light: inset 0 1px 0 rgb(255 255 255 / 0.65), inset 0 0 0 0.5px rgb(255 255 255 / 0.5);
  --glass-lift: 0 8px 28px rgb(0 0 0 / 0.22), 0 1px 3px rgb(0 0 0 / 0.12);
  /* A spring without bounce (critically damped), for things that move into place. */
  --spring: linear(0, 0.16 4%, 0.43 10%, 0.68 17%, 0.85 26%, 0.94 36%, 0.98 48%, 0.995 62%, 1);
  --press: scale(0.96);
}
.glass {
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge-dark), var(--glass-lift);
  color: #ffffff;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: #1c1c1e; }
  .sheet__panel { background: #ffffff !important; }
  .toast { background: #1c1c1e !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .tray.is-over-bright { background: #1c1c1e; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sheet__panel { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .toast { background: #1c1c1e !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ---- Editor: the photo fills the screen on the dark backdrop; the chrome floats over it. ---- */
.editor { position: fixed; inset: 0; height: 100dvh; overflow: hidden; background: var(--backdrop); color: #ffffff; color-scheme: dark; }
.editor__stage { position: absolute; inset: 0; }
.photo {
  position: absolute; border-radius: 12px; overflow: hidden;
  background: var(--backdrop-raised); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none;
}
.photo:focus-visible { box-shadow: 0 0 0 2px var(--highlight); }
/* A picked photo still decoding: the frame stays out of sight until it has its size. */
.photo.is-pending { visibility: hidden; }
.photo img { width: 100%; height: 100%; object-fit: contain; }
#photo-original, #photo-next { position: absolute; inset: 0; opacity: 0; }
#photo-next { transition: opacity 0.25s var(--ease); pointer-events: none; }
#photo-next.is-in { opacity: 1; }
.photo.is-comparing #photo-original { opacity: 1; }
.photo__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ffffff; transform-origin: left; transform: scaleX(var(--upload, 0)); opacity: 0; transition: transform 0.2s var(--ease), opacity 0.3s var(--ease); }
.photo.is-uploading .photo__progress { opacity: 1; }
.photo__sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease); background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.16) 50%, transparent 70%); background-size: 250% 100%; }
/* The sweep is a luminance band on the photo while it renders (DESIGN: "subtle animated luminance sweep"). */
.photo.is-rendering .photo__sweep, .photo.is-uploading .photo__sweep { opacity: 1; animation: sweep 1.6s linear infinite; }
@keyframes sweep { from { background-position: 125% 0; } to { background-position: -125% 0; } }

/* Top bar: a capsule cluster on glass, the cost line, and Save as a solid ink capsule (the primary action is never glass). */
.editor__bar {
  position: absolute; z-index: 2; top: calc(12px + var(--safe-top)); left: 12px; right: 12px;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.editor__bar > * { pointer-events: auto; }
.cluster { display: flex; align-items: center; padding: 4px; gap: 2px; border-radius: 26px; }
/* Concentric: 26 outer - 4 padding = 22 inner. */
.cluster__button {
  width: 44px; height: 44px; border-radius: 22px; border: 0; padding: 0; background: transparent; color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.cluster__button:hover:not(:disabled) { background: rgb(255 255 255 / 0.1); }
.cluster__button:active:not(:disabled) { transform: var(--press); }
.cluster__button:disabled { opacity: 0.32; cursor: default; }
.editor__cost { flex: 1; min-width: 0; text-align: center; font-size: 13px; line-height: 18px; color: rgb(255 255 255 / 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cost--short { display: none; }
@media (max-width: 430px) { .cost--long { display: none; } .cost--short { display: inline; } }
.save-capsule {
  height: 44px; min-width: 76px; padding: 0 20px; border: 0; border-radius: 22px; cursor: pointer;
  background: var(--accent-ink, #111114); color: #ffffff; font-size: 17px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  /* Ink on a dark backdrop: a hairline and the lift keep the capsule's edge visible. */
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.14), var(--glass-lift);
  transition: transform 0.15s var(--ease), opacity 0.2s var(--ease);
}
.save-capsule:active:not(:disabled) { transform: var(--press); }
.save-capsule:disabled { opacity: 0.45; cursor: default; }

/* Pills over the top of the photo: Original (comparing), the render status, the compare hint. */
.editor__pills { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--photo-top, 80px) + 12px); display: flex; justify-content: center; pointer-events: none; }
.pill { padding: 6px 12px; border-radius: 15px; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; animation: pill-in 0.3s var(--spring); }
@keyframes pill-in { from { opacity: 0; transform: translateY(-4px) scale(0.96); } }
/* Fixed width, so the ticking seconds never resize it. */
.pill--status { min-width: 148px; text-align: center; }
.editor:has(.photo.is-comparing) .pill--status, .editor:has(.photo.is-comparing) #compare-hint { display: none; }

.notice {
  position: absolute; z-index: 2; left: 12px; right: 12px; bottom: calc(var(--tray-height, 220px) + 24px + var(--safe-bottom)); margin: 0 auto; max-width: 520px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 24px;
  font-size: 15px; line-height: 20px; animation: pill-in 0.3s var(--spring);
}
.notice__action { flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 16px; background: #ffffff; color: #111114; font-weight: 600; font-size: 15px; cursor: pointer; transition: transform 0.15s var(--ease); }
.notice__action:active { transform: var(--press); }

.editor__loading { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; text-align: center; background: var(--backdrop); color: #98989d; font-size: 15px; }
.editor__loading p { margin: 0; }
/* Close stays reachable over the loading and error screen (a refused photo can go back to the samples). */
.editor:has(.editor__loading:not([hidden])) .editor__bar { z-index: 4; }
.editor__loading .button { margin-top: 8px; border-radius: 25px; }
.progress { width: 180px; height: 3px; border-radius: 2px; background: var(--backdrop-line); overflow: hidden; }
.progress__bar { height: 100%; width: 0; background: #ffffff; transition: width 0.2s var(--ease); }
.progress.is-indeterminate .progress__bar { width: 35%; animation: indeterminate 1.2s var(--ease) infinite; }
@keyframes indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* Tray: one floating glass panel for the segmented control, the tools and the dial. */
.tray {
  position: absolute; z-index: 2; left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom)); margin: 0 auto; max-width: 600px;
  padding: 12px 0 10px; border-radius: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  container-type: inline-size; container-name: tray;
  transition: background 0.4s var(--ease);
}
/* Over a bright or busy photo the glass gets denser, so white labels keep their contrast. */
.tray.is-over-bright { background: var(--glass-dark-dense); }
/* Segmented control: a capsule whose thumb glides between the two sections. Concentric: 18 outer - 3 padding = 15. */
.segmented { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 18px; background: rgb(255 255 255 / 0.1); }
.segmented__thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 15px;
  background: rgb(255 255 255 / 0.24); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 1px 4px rgb(0 0 0 / 0.2);
  transition: transform 0.38s var(--spring);
}
.segmented[data-active="bodyAndScene"] .segmented__thumb { transform: translateX(100%); }
.segmented__item { position: relative; border: 0; background: none; color: rgb(255 255 255 / 0.72); padding: 6px 18px; border-radius: 15px; font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer; transition: color 0.2s var(--ease), transform 0.15s var(--ease); }
.segmented__item[aria-selected="true"] { color: #ffffff; }
.segmented__item:active { transform: var(--press); }
/* The capsule stays 30 px tall; its hit area reaches 44. */
.segmented__item::after { content: ""; position: absolute; inset: -7px 0; }

.tools { position: relative; display: flex; gap: 12px; overflow-x: auto; max-width: 100%; padding: 2px 16px; scrollbar-width: none; }
.tools::-webkit-scrollbar { display: none; }
.tool { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; color: #ffffff; padding: 0; width: 56px; cursor: pointer; }
.tool__circle {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 22px; background: rgb(255 255 255 / 0.12);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
}
.tool:active:not(:disabled) .tool__circle { transform: var(--press); }
.tool__label { font-size: 12px; line-height: 16px; font-weight: 500; color: rgb(255 255 255 / 0.78); transition: color 0.2s var(--ease); }
.tool.is-selected .tool__label { color: #ffffff; }
.tool.is-on .tool__circle { background: #ffffff; color: #111114; }
.tool:disabled { opacity: 0.4; cursor: default; }
/* The selected tool's ring: one element that glides to the tool (transform only). */
.tools__highlight {
  position: absolute; z-index: 2; top: 0; left: 0; width: 44px; height: 44px; border-radius: 22px; pointer-events: none;
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 12px rgb(255 255 255 / 0.18);
  transition: transform 0.42s var(--spring), opacity 0.2s var(--ease);
}
.tools.is-instant .tools__highlight { transition: none; }

/* Fine-tick dial */
.dial-area { width: 100%; min-height: 84px; display: flex; flex-direction: column; align-items: center; }
.dial { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 4px; outline: none; }
.dial__value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 20px; }
.dial__window { position: relative; width: 100%; height: 32px; overflow: hidden; cursor: grab; touch-action: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.dial__window:active { cursor: grabbing; }
.dial__ruler { position: absolute; top: 0; left: 50%; height: 100%; will-change: transform; }
.dial__tick { position: absolute; bottom: 6px; width: 1px; height: 10px; background: rgb(255 255 255 / 0.4); }
.dial__tick--major { height: 18px; background: rgb(255 255 255 / 0.66); }
.dial__tick--zero { background: #ffffff; }
.dial__needle { position: absolute; left: 50%; bottom: 2px; width: 2px; height: 28px; margin-left: -1px; border-radius: 1px; background: #ffffff; box-shadow: 0 0 6px rgb(0 0 0 / 0.35); }
.dial__marks { position: relative; width: 100%; height: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.dial__mark { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; line-height: 16px; font-weight: 500; color: rgb(255 255 255 / 0.78); white-space: nowrap; }
.dial:focus-visible .dial__needle { box-shadow: 0 0 0 2px var(--highlight); }
.toggle-note { font-size: 13px; line-height: 18px; color: rgb(255 255 255 / 0.82); text-align: center; padding: 8px 20px 0; margin: 0; max-width: 420px; }

/* ---- Sheets: a modal <dialog>. Bottom sheet on phones, centered panel on wide screens (container-free: viewport). ---- */
.sheet {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 100%; max-height: 92dvh;
  background: transparent; color: #111114; overflow: visible; color-scheme: light;
  --surface: #f5f5f7; --separator: #e5e5ea; --text: #111114; --text-2: #6e6e73; --accent: #111114; --on-accent: #ffffff;
}
.sheet::backdrop { background: rgb(0 0 0 / 0.4); }
.sheet[open] { animation: rise 0.45s var(--spring); }
.sheet[open]::backdrop { animation: fade 0.2s var(--ease); }
/* Sheets are a solid white surface (readable over any photo): on phones a bottom sheet with 20 px top corners, on wide
   screens a centered panel with 20 px corners. 24 px padding; the close button sits on the title's line. */
.sheet__panel {
  position: relative; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 20px 20px 0 0; padding: 24px 24px calc(24px + var(--safe-bottom));
  background: #ffffff; box-shadow: 0 -8px 40px rgb(0 0 0 / 0.18);
}
.sheet__grabber { display: none; }
.sheet__close { position: absolute; top: 22px; right: 20px; width: 32px; height: 32px; background: #f2f2f7; color: #6e6e73; }
/* 32 px to see, 44 px to tap. */
.sheet__close::after { content: ""; position: absolute; inset: -6px; }
.sheet__close svg { width: 14px; height: 14px; stroke-width: 2.4; }
.sheet h2 { font-size: 22px; line-height: 28px; font-weight: 600; margin: 0 44px 6px 0; }
.sheet p { margin: 0 0 20px; color: #6e6e73; font-size: 15px; line-height: 20px; }
.sheet .fine, .sheet .fine a { color: #6e6e73; }
/* Footnote size (overrides `.sheet p`). */
.sheet .fine { font-size: 13px; line-height: 18px; }
.sheet .button { border-radius: 25px; transition: transform 0.15s var(--ease), opacity 0.2s var(--ease); }
.sheet .button:active:not(:disabled) { transform: var(--press); opacity: 1; }
.sheet .plans, .sheet .account-rows { border-radius: 12px; background: #f5f5f7; }
/* Stripe's embedded Checkout inside the sheet: its own white surface. */
.sheet .stripe-checkout { position: relative; min-height: 420px; border-radius: 12px; overflow: hidden; background: #ffffff; margin: 4px 0 0; }
.stripe-checkout__mount { position: relative; z-index: 1; min-height: 420px; }
.stripe-checkout__loading { position: absolute; inset: 0; height: 420px; background: linear-gradient(100deg, #f5f5f7 30%, #ffffff 50%, #f5f5f7 70%); background-size: 250% 100%; animation: sweep 1.6s linear infinite; }
.sheet .saved__photo { border-radius: 12px; }
.sheet .fine { margin-top: 14px; }
@media (min-width: 720px) {
  .sheet { margin: auto; width: 440px; }
  .sheet[open] { animation: pop 0.4s var(--spring); }
  .sheet__panel { border-radius: 20px; padding-bottom: 24px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.22); }
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(100%); } }
@keyframes pop { from { transform: translateY(8px) scale(0.98); opacity: 0; } }
/* The page behind an open sheet doesn't scroll. */
html:has(.sheet[open]) { overflow: hidden; }

.benefits { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 12px; }
.benefits li { display: flex; gap: 12px; align-items: center; font-size: 15px; line-height: 20px; }
.benefits svg { flex: 0 0 auto; color: #6e6e73; }
.plans { border-radius: 12px; background: #f5f5f7; overflow: hidden; margin-bottom: 8px; }
.plans__heading { font-size: 13px; line-height: 18px; color: #6e6e73; margin: 14px 4px 6px; }
.plan { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 0; background: none; text-align: left; cursor: pointer; color: #111114; }
.plan + .plan { box-shadow: inset 0 1px 0 #e5e5ea; }
.plan__text { flex: 1; display: flex; flex-direction: column; }
.plan__title { font-size: 17px; line-height: 22px; font-weight: 500; }
.plan__detail { font-size: 13px; line-height: 18px; color: #6e6e73; }
.plan__radio { width: 22px; height: 22px; border-radius: 11px; border: 1.5px solid #c7c7cc; display: flex; align-items: center; justify-content: center; }
.plan[aria-checked="true"] .plan__radio { background: #111114; border-color: #111114; color: #ffffff; }
.plan__radio svg { width: 14px; height: 14px; stroke-width: 2.4; opacity: 0; }
.plan[aria-checked="true"] .plan__radio svg { opacity: 1; }
.sheet .button + .button { margin-top: 10px; }
/* Sign-in: two equal 50 px capsules, 12 px apart, the legal line right under them. */
.sign-in { display: grid; gap: 12px; margin: 4px 0 0; }
.button--apple { background: #000000; color: #ffffff; font-weight: 600; }
.button--apple svg { width: 20px; height: 20px; margin-top: -3px; fill: currentColor; stroke: none; }
/* Google's own button (40 px at most) is shown at 1.25x (sheets.js GOOGLE_SCALE) over a look-alike placeholder,
   which holds the 50 px until it has loaded. */
.google-slot { position: relative; height: 50px; }
.button--google { background: #ffffff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #747775; font-weight: 500; gap: 10px; pointer-events: none; }
.button--google .google-g { width: 22px; height: 22px; }
.google-slot__button { position: absolute; top: 0; left: 0; zoom: 1.25; }
.google-slot.is-ready .button--google { visibility: hidden; }
.sheet .sign-in__legal { margin: 14px 0 0; text-align: center; }
.saved__photo { width: 100%; max-height: 46dvh; object-fit: contain; border-radius: 12px; background: #f5f5f7; margin: 6px 0 14px; }
.saved__mark { display: flex; align-items: center; gap: 8px; font-size: 22px; line-height: 28px; font-weight: 600; margin: 8px 0 4px; }
.account-rows { border-radius: 12px; background: #f5f5f7; margin: 8px 0 16px; }
.account-row { display: flex; justify-content: space-between; padding: 12px 14px; font-size: 15px; }
.account-row + .account-row { box-shadow: inset 0 1px 0 #e5e5ea; }
.account-row span:last-child { color: #6e6e73; }
.error-text, .sheet .error-text { color: var(--destructive); font-size: 13px; line-height: 18px; margin-top: 10px; min-height: 18px; }
/* In a sheet an empty error line takes no room (it only appears after a tap, under the button that failed). */
.sheet .error-text:empty { min-height: 0; margin: 0; }
/* A calm note in place of an error (checkout not open yet). */
.sheet .sheet__note { font-size: 13px; line-height: 18px; margin: 10px 0 0; text-align: center; }

.toast {
  position: fixed; inset: auto auto calc(24px + var(--safe-bottom)) 50%; transform: translateX(-50%); margin: 0; border: 0;
  padding: 10px 18px; border-radius: 22px; color: #ffffff; font-size: 15px; line-height: 20px;
  max-width: calc(100% - 32px); width: max-content;
  background: rgb(30 30 32 / 0.72); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge-dark), var(--glass-lift);
}
.toast:popover-open { animation: pill-in 0.35s var(--spring); }

/* Desktop: the same floating tray, a little roomier. */
@media (min-width: 720px) {
  .editor__bar { top: calc(16px + var(--safe-top)); left: max(16px, var(--safe-left)); right: max(16px, var(--safe-right)); }
  .tray { bottom: calc(16px + var(--safe-bottom)); padding: 14px 0 12px; }
}

/* Phones in landscape: too short for a tray under the photo, so the tray stands at the right and the photo fills the
   space to its left (main.js layoutPhoto reads the same query). */
@media (orientation: landscape) and (max-height: 540px) {
  .editor__bar { top: calc(10px + var(--safe-top)); left: max(12px, var(--safe-left)); right: max(12px, var(--safe-right)); }
  .tray {
    left: auto; right: max(12px, var(--safe-right)); bottom: calc(10px + var(--safe-bottom)); margin: 0;
    width: min(360px, 48vw); max-height: calc(100dvh - 82px - var(--safe-top) - var(--safe-bottom)); overflow-y: auto;
    padding: 10px 0 8px; gap: 8px; border-radius: 28px; scrollbar-width: none;
  }
  .tray::-webkit-scrollbar { display: none; }
  .editor__pills { right: calc(min(360px, 48vw) + 24px + var(--safe-right)); }
  .notice { right: calc(min(360px, 48vw) + 24px + var(--safe-right)); bottom: calc(12px + var(--safe-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  #photo-next { transition: opacity 0.25s linear !important; }
  .cluster__button:active, .save-capsule:active, .tool:active .tool__circle, .segmented__item:active { transform: none !important; }
}

/* The tool row centers once the tray is wide enough to hold it; narrower trays scroll it from the left edge. */
@container tray (min-width: 360px) { .tools { justify-content: safe center; } }