/* 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;
}
/* Phones: headline, the button, the before/after, the samples. Wide screens: text left, the before/after right. */
.start__main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 24px 20px 32px; display: flex; flex-direction: column; gap: 40px; }
.hero { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.hero__text { display: flex; flex-direction: column; align-items: center; max-width: 520px; }
.start__title { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.8px; margin: 0 0 12px; }
.start__lede { margin: 0 0 24px; font-size: 19px; line-height: 26px; color: var(--text-2); }
.hero__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.button--large { height: 56px; padding: 0 32px; border-radius: 28px; font-size: 19px; }
.hero__hint { font-size: 15px; line-height: 20px; color: var(--text-2); }
@media (hover: none) { .hero__hint { display: none; } }
.start__note { margin: 16px 0 0; max-width: 400px; font-size: 13px; line-height: 18px; color: var(--text-3); }
.start__note a { color: var(--text-2); }
/* The before/after: the same photo, eyes closed then open, crossfading on a loop. */
.hero__visual { position: relative; margin: 0; width: 100%; max-width: 400px; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: 0 24px 60px rgb(0 0 0 / 0.14), 0 2px 8px rgb(0 0 0 / 0.06); }
.hero__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__after { opacity: 0; animation: hero-after 6s var(--ease) 1.2s infinite; }
@keyframes hero-after { 0%, 8% { opacity: 0; } 22%, 70% { opacity: 1; } 84%, 100% { opacity: 0; } }
.hero__label {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: grid; min-width: 84px; height: 30px; border-radius: 15px; place-items: center;
  font-size: 13px; line-height: 18px; font-weight: 600; color: #ffffff; background: rgb(30 30 32 / 0.48);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.2);
}
.hero__label span { grid-area: 1 / 1; }
/* The two words hand over (one fades out, then the other in) instead of crossing. */
.hero__label-after { opacity: 0; animation: label-after 6s linear 1.2s infinite; }
.hero__label-before { animation: label-before 6s linear 1.2s infinite; }
@keyframes label-before { 0%, 12% { opacity: 1; } 14.5%, 75% { opacity: 0; } 77.5%, 100% { opacity: 1; } }
@keyframes label-after { 0%, 14.5% { opacity: 0; } 17%, 72.5% { opacity: 1; } 75%, 100% { opacity: 0; } }
.hero__drop {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; opacity: 0;
  background: rgb(255 255 255 / 0.72); box-shadow: inset 0 0 0 2px var(--text); color: var(--text);
  font-size: 19px; font-weight: 600; transition: opacity 0.2s var(--ease); pointer-events: none;
}
.hero__drop.is-over { opacity: 1; }
@media (prefers-color-scheme: dark) { .hero__drop { background: rgb(0 0 0 / 0.6); } }
@media (prefers-reduced-motion: reduce) {
  .hero__after, .hero__label-after { animation: none !important; opacity: 1; }
  .hero__label-before { animation: none !important; opacity: 0; }
}
/* Samples: three portrait cards (the editor's 4:5), each with a name. */
.samples { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.samples__label { margin: 0; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--text-2); }
.samples__row { display: flex; gap: 12px; }
.sample { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; padding: 0; background: none; color: var(--text-2); font-size: 13px; line-height: 18px; font-weight: 500; cursor: pointer; transition: transform 0.15s var(--ease); }
.sample img { width: 84px; height: 105px; border-radius: 14px; object-fit: cover; background: var(--surface); box-shadow: 0 8px 20px rgb(0 0 0 / 0.10); transition: box-shadow 0.2s var(--ease); }
.sample:hover img { box-shadow: 0 12px 28px rgb(0 0 0 / 0.16); }
.sample:active { transform: scale(0.96); }
.start__foot { display: flex; gap: 8px; justify-content: center; padding: 16px 20px calc(16px + var(--safe-bottom)); }
.start__foot a { text-decoration: none; }
@media (min-width: 960px) {
  .topbar { max-width: 1120px; padding-left: 40px; padding-right: 40px; }
  .start__main { justify-content: center; padding: 24px 40px 48px; gap: 0; }
  .hero { flex-direction: row; align-items: center; justify-content: space-between; gap: 64px; text-align: left; }
  .hero__text { align-items: flex-start; max-width: 500px; }
  .start__title { font-size: 64px; line-height: 68px; letter-spacing: -1.6px; margin-bottom: 16px; }
  .start__lede { font-size: 21px; line-height: 30px; margin-bottom: 32px; }
  .hero__actions { flex-direction: row; gap: 16px; }
  .start__note { margin-top: 28px; max-width: 420px; }
  .hero__visual { flex: none; width: 440px; max-width: none; }
  .samples { align-items: flex-start; margin-top: 40px; }
  .sample img { width: 88px; height: 110px; }
}

/* ---- 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); }
/* The two ends of the scale, fixed under the window's edges (the ruler moves, they don't). */
.dial__ends { display: flex; justify-content: space-between; width: 100%; padding: 0 24px; font-size: 12px; line-height: 16px; font-weight: 500; color: rgb(255 255 255 / 0.78); }
.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 .account-rows { border-radius: 12px; background: #f5f5f7; }
/* Stripe's embedded Checkout inside the sheet: its own white surface. */
.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; }

/* ---- Paywall: one type scale (22/28 title, 17/22 rows, 15/20 details, 13/18 footnote) on an 8 pt grid. ---- */
.sheet .pay__title { margin-bottom: 4px; }
.sheet .pay__sub { margin: 0 44px 16px 0; }
.pay__benefits { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.pay__benefits li { display: flex; gap: 12px; align-items: center; font-size: 15px; line-height: 20px; color: #111114; }
.pay__benefits svg { flex: 0 0 auto; width: 20px; height: 20px; color: #111114; }
/* Segmented control on a light sheet (the iOS look): a grey track, a white thumb. Concentric: 9 outer - 2 = 7. */
.segmented--light { margin: 0 0 16px; padding: 2px; border-radius: 9px; background: rgb(118 118 128 / 0.12); }
.segmented--light .segmented__thumb { top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 7px; background: #ffffff; box-shadow: 0 3px 8px rgb(0 0 0 / 0.12), 0 3px 1px rgb(0 0 0 / 0.04); }
.segmented--light[data-active="credits"] .segmented__thumb { transform: translateX(100%); }
.segmented--light .segmented__item { color: #111114; padding: 7px 12px; font-size: 13px; line-height: 18px; font-weight: 500; border-radius: 7px; }
.segmented--light .segmented__item[aria-selected="true"] { color: #111114; font-weight: 600; }
.pay__options { display: grid; gap: 8px; margin: 0 0 24px; }
/* A selectable card; the selected one gets an ink ring (inset shadow, so nothing moves). */
.option {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; border-radius: 12px;
  background: #ffffff; box-shadow: inset 0 0 0 1px #d1d1d6; color: #111114; text-align: left; cursor: pointer;
  transition: box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}
.option:active { transform: scale(0.99); }
.option[aria-checked="true"] { box-shadow: inset 0 0 0 2px #111114; }
.option__radio { flex: none; width: 22px; height: 22px; border-radius: 11px; box-shadow: inset 0 0 0 1.5px #c7c7cc; transition: box-shadow 0.2s var(--ease); }
.option[aria-checked="true"] .option__radio { box-shadow: inset 0 0 0 7px #111114; }
.option__main, .option__price { display: flex; flex-direction: column; }
.option__main { flex: 1; min-width: 0; }
.option__price { align-items: flex-end; text-align: right; }
.option__title, .option__amount { font-size: 17px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.option__amount { font-weight: 500; }
.option__detail { font-size: 15px; line-height: 20px; color: #6e6e73; font-variant-numeric: tabular-nums; }
.option__badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 10px; background: #111114; color: #ffffff; font-size: 12px; line-height: 16px; font-weight: 600; vertical-align: 2px; }
/* The line under the button: an error (red) or a calm note; it holds its height so nothing moves. */
.sheet .pay__status { min-height: 18px; margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--destructive); text-align: center; }
.sheet .pay__status.is-note { color: #6e6e73; }
.sheet .pay__fine { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: #6e6e73; text-align: center; }
.pay__fine a { color: #6e6e73; }

/* ---- Checkout: a navigation row (back to the plans, title, close), Stripe's form with a skeleton until it loads. ---- */
.sheet__nav { position: relative; display: flex; align-items: center; justify-content: center; min-height: 32px; margin: -2px 0 16px; }
.sheet .sheet__nav h2 { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; }
.sheet__back {
  position: absolute; left: -8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 2px;
  height: 44px; padding: 0 8px; border: 0; background: none; color: #111114; font-size: 17px; line-height: 22px; cursor: pointer;
}
.sheet__back svg { width: 20px; height: 20px; stroke-width: 2.2; }
.checkout { position: relative; }
.checkout__mount { position: relative; z-index: 1; }
.checkout.is-loading .checkout__mount { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.checkout__skeleton { display: none; }
.checkout.is-loading .checkout__skeleton { display: grid; gap: 8px; }
.sk { display: block; border-radius: 8px; background: linear-gradient(100deg, #f2f2f7 30%, #fafafc 50%, #f2f2f7 70%); background-size: 250% 100%; animation: sweep 1.6s linear infinite; }
.sk--line { height: 16px; width: 70%; }
.sk--short { width: 40%; }
.sk--title { height: 32px; width: 55%; }
.sk--gap { height: 16px; background: none; animation: none; }
.sk--label { height: 14px; width: 30%; margin-top: 8px; }
.sk--field { height: 48px; }
.sk--tall { height: 96px; }
.sk--button { height: 50px; margin-top: 16px; border-radius: 25px; }
@media (min-width: 720px) {
  .sheet.sheet--wide { width: 520px; }
}
.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). */


.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; } }