/* Hallmark · shape: app screen · genre: modern-minimal · theme: brand (Zonuru, DESIGN.md) · redesign: full · surface: absolute
 * paper: #FBFAF7 · accent: #FF4520 · display: Hanken Grotesk · body: Hanken Grotesk
 * nav: kept, a top bar with the mark and the wordmark · signature: the three most-made occasions as real photographs, and the finished page as a link card · states: empty, filled, error, saving, done
 * axes: light/grotesk-sans/warm · posture: settled · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: P, three occasions have photographs and five do not; the five sit in a plain list under them so no tile is left empty */
/* Hallmark · waive 7b · card #FFFFFF on paper #FBFAF7 · Zonuru's colour system keeps white for cards and fields on its warm paper */
/* Hallmark · waive 39b · the occasion tiles 310px, list rows 72px · the three occasions are photographs you tap, a picture picker, not toolbar buttons */
/* Hallmark · finish-review: subagent · 8 findings · 8 resolved (share chips to a list, no empty thumb, unboxed switches, font tiles one line, tile sub-lines, selection in ink recorded in DESIGN.md, phone sheet height with Done in view, desktop done and error captured) */
/* Hallmark · dismissed 40 · the white label on the orange button is 19px bold, large text, which passes at 3.43:1 */
/* avoid-ai-design-ignore: SD4d (Hallmark's stamp uses middle dots by design) */
@import url("./tokens.css");

/* Create page, docs/DESIGN.md Part 4. Screens 1 and 3 and every sheet are Zonuru's own (DESIGN.md).
   Screen 2 is the event page itself (design.css), in the host's photo colours and fonts, with inputs in place of text. */

html, body { overflow-x: clip; }

/* ---------- Zonuru's own screens: paper, ink, Hanken Grotesk ---------- */
body.z[data-screen="pick"], body.z[data-screen="done"] { --page: var(--z-paper); background: var(--z-paper); color: var(--z-ink); font-family: var(--z-sans); letter-spacing: normal; caret-color: var(--z-orange); }
body.z[data-screen="pick"] :focus-visible, body.z[data-screen="done"] :focus-visible, .sheet :focus-visible, .c-logo:focus-visible { outline: 2px solid var(--z-orange); outline-offset: 2px; }

/* Bar: the mark and the Jost wordmark, on every screen */
.c-bar { max-width: 720px; height: 72px; padding: 0 var(--z-5); }
body[data-screen="edit"] .c-bar { max-width: 880px; }
.c-logo { display: inline-flex; align-items: center; gap: var(--z-2); text-decoration: none; color: var(--ink); border-radius: var(--z-r-tag); }
body[data-screen="pick"] .c-logo, body[data-screen="done"] .c-logo { color: var(--z-ink); }
.c-logo img { width: 32px; height: 32px; border-radius: var(--z-r-tag); }
.c-logo span { font-family: var(--z-mark); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; }

.c-shell { max-width: 720px; margin: 0 auto; padding: var(--z-6) var(--z-5) var(--z-24); }
.c-h1 { margin: 0; font-size: var(--z-h1); line-height: var(--z-h1-lh); font-weight: var(--z-w-display); letter-spacing: var(--z-track-display); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.c-lead { margin: var(--z-3) 0 0; font-size: var(--z-body-lg); line-height: var(--z-body-lg-lh); color: var(--z-ink-2); text-wrap: pretty; }
.c-h2 { text-wrap: balance; margin: var(--z-10) 0 var(--z-3); font-size: var(--z-h3); line-height: var(--z-h3-lh); font-weight: var(--z-w-strong); letter-spacing: -0.01em; }

/* ---------- Screen 1: the three most-made occasions as photographs, the rest as a list ---------- */
.c-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z-3); margin-top: var(--z-8); }
.c-tile { display: grid; gap: var(--z-3); padding: 0; border: 0; background: none; color: var(--z-ink); text-align: left; cursor: pointer; border-radius: var(--z-r-card); }
.c-tile span { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--z-r-card); background: var(--z-paper-2); }
.c-tile img { width: 100%; height: 100%; object-fit: cover; }
.c-tile span { transition: transform .15s var(--z-ease); }
.c-tile:active span { transform: scale(.99); }
.c-tile b { font-size: var(--z-h3); line-height: var(--z-h3-lh); font-weight: var(--z-w-strong); letter-spacing: -0.01em; }
.c-tile small { margin-top: calc(-1 * var(--z-2)); font-size: var(--z-small); line-height: var(--z-small-lh); color: var(--z-ink-2); }
.c-tile:hover b { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }

.c-list { list-style: none; margin: 0; padding: var(--z-1) var(--z-5); border-radius: var(--z-r-card); background: var(--z-card); }
.c-list li + li button { border-top: 1px solid var(--z-line); }
.c-list button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--z-4); min-height: 72px; padding: var(--z-3) 0; border: 0; background: none; color: var(--z-ink); font: inherit; text-align: left; cursor: pointer; }
.c-list button:hover b { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.c-list button:active { transform: scale(.995); }
.c-list button:focus-visible { outline-offset: -2px; border-radius: var(--z-r-tag); }
.c-list b { display: block; font-size: 17px; font-weight: var(--z-w-strong); }
.c-list small { display: block; margin-top: 2px; font-size: var(--z-small); line-height: var(--z-small-lh); color: var(--z-ink-2); }
.c-list i { flex: none; font-style: normal; font-size: 22px; color: var(--z-ink-3); }

/* ---------- Screen 2: the page, ready to fill in ---------- */
.c-edit-shell { font-family: var(--sans); }
.c-back { max-width: 880px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-right)) 4px max(20px, env(safe-area-inset-left)); }
.c-back .z-link { font-size: 15px; }

/* Cover slot (Luma: photo with a camera button in the corner) */
.c-cover { position: relative; display: block; cursor: pointer; background: var(--fill); }
.c-cover input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.c-cover-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--z-2); padding: 24px; text-align: center; }
.c-cover-empty b { font-size: 17px; font-weight: 600; color: var(--ink); }
.c-cover-empty small { font-size: 14px; color: var(--muted); max-width: 220px; justify-self: center; }
.c-cam { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--z-deep); color: var(--z-deep-ink); pointer-events: none; }
.c-cover:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Typed in place: the title in the event's font, the rest as quiet fields */
.c-head { display: grid; gap: var(--z-3); }
.c-title { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: transparent; color: var(--ink); resize: none; overflow: hidden; outline: none; }
.c-title::placeholder { color: var(--muted); opacity: .55; }
.c-in { width: 100%; min-width: 0; height: 48px; padding: 0 var(--z-4); border: 0; border-radius: var(--z-r-field); background: var(--material); color: var(--ink); font: 400 16px var(--sans); letter-spacing: -0.011em; -webkit-appearance: none; appearance: none; }
.c-in::placeholder { color: var(--muted); opacity: .8; }
.c-in:focus, .c-tz:focus { outline: 0; box-shadow: 0 0 0 2px var(--accent); }
.c-title:focus { box-shadow: none; }
.c-hostrow { display: flex; align-items: center; gap: var(--z-1); font: 400 15px var(--sans); color: var(--muted); }
.c-hostrow span { flex: none; }
.c-hostin { background: transparent; padding: 0; height: 30px; font-size: 15px; color: var(--ink); border-radius: 0; }
.c-hostin:focus { box-shadow: none; }
.c-years { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 17px; }
.c-years .c-in { width: 76px; text-align: center; padding: 0 var(--z-2); }
.c-years .c-in:last-child { width: 58px; }

/* Parts of the event: Luma's grouped date block, with our calendar tile */
.c-parts { display: grid; gap: var(--z-3); }
.c-part { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--z-4); align-items: start; padding: var(--z-4); border-radius: var(--z-r-card); background: var(--fill); }
.c-part:has(.c-x) { padding-right: 44px; }
.c-part-f { display: grid; gap: 8px; min-width: 0; }
.c-pname { font-weight: 600; }
.c-dt { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 8px; }
.c-dt .c-in { line-height: 48px; padding: 0 var(--z-3); font-size: 15px; }
.c-dt .c-in::-webkit-calendar-picker-indicator { margin-left: 2px; }
@media (max-width: 420px) { .c-part { padding: var(--z-3); gap: var(--z-3); grid-template-columns: 40px minmax(0, 1fr); } .c-part .z-cal { width: 40px; } .c-dt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .c-dt .c-in { padding: 0 8px; font-size: 15px; } }
.c-x { position: absolute; top: 12px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.c-x:hover { background: var(--fill-2); color: var(--ink); }
.c-parts-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 0; }
.c-parts-foot .z-link { font-size: 15px; text-align: left; }
.c-tz { flex: none; border: 0; background: none; color: var(--muted); font: 500 14px var(--sans); padding: var(--z-2) 0; cursor: pointer; text-align: right; }

/* Details and Look: grouped rows with the value on the right (Luma's Event Options) */
.c-group { gap: var(--z-3); }
.c-rows { display: grid; }
.c-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-width: 0; min-height: 56px; padding: 0; border: 0; border-top: 1px solid var(--hair); background: none; color: var(--ink); font: 400 16px var(--sans); letter-spacing: -0.011em; text-align: left; cursor: pointer; }
.c-row:first-child { border-top: 0; }
.c-row-k { flex: 0 1 auto; min-width: 0; font-weight: 600; }
.c-row-v { flex: 1 1 0; justify-content: flex-end; display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 15px; white-space: nowrap; }
.c-row-v > :not(i) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.c-row-v em { font-style: normal; font-size: 18px; color: var(--ink); }
.c-row-v i { font-style: normal; font-size: 20px; color: var(--muted); }
.c-row:hover .c-row-k { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.c-row:focus-visible { outline-offset: -2px; border-radius: var(--z-r-tag); }

/* Look sits under the photo on desktop, after Details on phones */
.c-look-side { display: none; }
@media (min-width: 900px) { .c-look-side { display: grid; } .c-look-main { display: none; } .c-back { padding-top: 4px; } }

.c-err { margin: 0; font: 600 14px var(--sans); color: var(--z-err); }
body.z[data-mode="dark"] .c-err { color: var(--z-err-on-deep); }
.c-fine { margin: -4px 0 0; font: 400 14px/20px var(--sans); color: var(--muted); text-align: center; }
.c-edit .z-main:disabled { background: var(--fill-2); color: var(--muted); cursor: progress; transform: none; }

/* ---------- Sheets: always Zonuru's own, whatever the page looks like ---------- */
.sheet-wrap { background: color-mix(in oklab, var(--z-deep) 45%, transparent); }
.sheet { padding: var(--z-3) var(--z-6) calc(var(--z-6) + env(safe-area-inset-bottom)); border-radius: var(--z-r-card) var(--z-r-card) 0 0; background: var(--z-card); color: var(--z-ink); font-family: var(--z-sans); letter-spacing: normal; caret-color: var(--z-orange); animation: c-sheet-up .28s var(--z-ease); }
@keyframes c-sheet-up { from { transform: translateY(32px); opacity: .6; } }
.sheet { max-height: 92dvh; overflow: auto; }
.sheet > .btn.block:last-child { position: sticky; bottom: 0; box-shadow: 0 0 0 var(--z-3) var(--z-card); }
.sheet .grab { width: 36px; height: 4px; margin: 0 auto var(--z-4); border-radius: 2px; background: var(--z-line); }
.sheet h3 { margin: 0 0 var(--z-1); font-size: var(--z-h2); line-height: var(--z-h2-lh); font-weight: var(--z-w-display); letter-spacing: var(--z-track-heading); }
.sheet .sub { margin: 0 0 var(--z-5); color: var(--z-ink-2); font-size: 15px; }
.sheet .form { gap: var(--z-4); margin-bottom: var(--z-5); }
.sheet .form label { gap: var(--z-2); font-size: var(--z-body); font-weight: var(--z-w-regular); color: var(--z-ink); }
.sheet .fine { font-size: var(--z-small); color: var(--z-ink-2); letter-spacing: normal; }
.sheet .form input:not([type=checkbox]):not([type=color]), .sheet .form select, .sheet .form textarea { height: var(--z-control); padding: 0 var(--z-4); border: 0; border-radius: var(--z-r-field); background: var(--z-card); box-shadow: inset 0 0 0 1px var(--z-edge); color: var(--z-ink); font-size: 17px; -webkit-appearance: none; appearance: none; }
.sheet .form select { padding-right: var(--z-10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235E5852' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.sheet .form textarea { height: auto; min-height: 120px; padding: var(--z-3) var(--z-4); resize: vertical; }
.sheet .form input::placeholder, .sheet .form textarea::placeholder { color: var(--z-ink-3); }
.sheet .form input:hover, .sheet .form select:hover, .sheet .form textarea:hover { box-shadow: inset 0 0 0 1px var(--z-ink-2); }
.sheet .form input:focus, .sheet .form select:focus, .sheet .form textarea:focus { outline: 2px solid var(--z-ink); outline-offset: -2px; box-shadow: none; }
.sheet .two { gap: var(--z-3); }

/* The sheet's one action is the view's one orange */
.sheet .btn.block { height: var(--z-control); padding: 0 28px; border-radius: var(--z-r-pill); background: var(--z-orange); color: var(--z-on-orange); font: var(--z-w-display) 19px/1 var(--z-sans); letter-spacing: -0.01em; transition: background-color .15s var(--z-ease), transform .15s var(--z-ease); }
.sheet .btn.block:hover { background: var(--z-orange-2); }
.sheet .btn.block:active { transform: scale(.98); }

.c-colours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--z-2); }
.c-colour { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--z-2); align-items: center; }
.c-colour input[type=color] { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px var(--z-edge); background: none; cursor: pointer; }
.c-colour input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.c-colour input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.c-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--z-2); margin-bottom: var(--z-5); }
.c-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--z-2); margin-bottom: var(--z-5); }
.c-fonts button, .c-opts button { display: grid; gap: var(--z-1); place-items: center; min-height: 76px; padding: var(--z-3); border: 0; border-radius: var(--z-r-field); background: var(--z-card); box-shadow: inset 0 0 0 1px var(--z-line); color: var(--z-ink); text-align: center; cursor: pointer; transition: box-shadow .15s var(--z-ease); }
.c-fonts button:hover, .c-opts button:hover { box-shadow: inset 0 0 0 1px var(--z-edge); }
.c-fonts button:active, .c-opts button:active { transform: scale(.98); }
.c-fonts span { max-width: 100%; font-size: clamp(17px, 5vw, 22px); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-fonts small, .c-opts small { font: var(--z-w-regular) 13px var(--z-sans); color: var(--z-ink-2); }
.c-opts span { font-size: var(--z-body); font-weight: var(--z-w-strong); }
.c-fonts button[aria-pressed="true"], .c-opts button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--z-ink); }

.sheet .sp { margin-bottom: var(--z-5); border: 0; border-radius: 0; background: none; }
.sheet .sp-row { gap: var(--z-4); padding: var(--z-3) 0; border-bottom: 0; border-top: 1px solid var(--z-line); }
.sheet .sp-row:first-child { border-top: 0; }
.sheet .sp-row b { font-size: var(--z-body); font-weight: var(--z-w-strong); }
.sheet .sp-row small { font-size: var(--z-small); color: var(--z-ink-2); }
.sheet .sp-row input { width: 48px !important; background: var(--z-line); transition: background-color .2s var(--z-ease); }
.sheet .sp-row input::after { top: 3px; left: 3px; width: 22px; height: 22px; background: var(--z-card); box-shadow: 0 1px 3px color-mix(in oklab, var(--z-ink) 25%, transparent); transition: transform .2s var(--z-ease); }
.sheet .sp-row input:checked { background: var(--z-ink); }
.sheet .sp-row input:checked::after { transform: translateX(20px); }

@media (min-width: 700px) {
  .sheet-wrap { align-items: center; }
  .sheet { border-radius: var(--z-r-card); max-height: 86vh; padding-top: var(--z-6); }
  .sheet .grab { display: none; }
}

.toast { bottom: calc(var(--z-8) + env(safe-area-inset-bottom)); padding: var(--z-3) var(--z-5); border-radius: var(--z-r-pill); background: var(--z-deep); color: var(--z-deep-ink); font: var(--z-w-strong) 15px var(--z-sans); backdrop-filter: none; }

/* ---------- Screen 3: your page is ready ---------- */
.c-done { display: grid; grid-template-columns: minmax(0, 1fr); }
.c-linkcard { display: flex; align-items: center; gap: var(--z-4); margin-top: var(--z-8); padding: var(--z-3); border-radius: var(--z-r-card); background: var(--z-card); color: var(--z-ink); text-decoration: none; }
.c-linkcard:not(:has(img)) { padding: var(--z-5); }
.c-linkcard img { width: 88px; height: 110px; flex: none; border-radius: var(--z-r-field); object-fit: cover; background: var(--z-paper-2); }
.c-linkcard span { display: grid; gap: var(--z-1); min-width: 0; }
.c-linkcard b { font-size: var(--z-h3); line-height: var(--z-h3-lh); font-weight: var(--z-w-display); letter-spacing: -0.01em; overflow-wrap: break-word; }
.c-linkcard small { font-size: 15px; color: var(--z-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-linkcard:hover b { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.c-linkcard:active { transform: scale(.995); }

/* One orange action, then quiet pills */
.c-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--z-2); border: 0; border-radius: var(--z-r-pill); font-family: var(--z-sans); text-decoration: none; cursor: pointer; transition: background-color .15s var(--z-ease), transform .15s var(--z-ease); }
.c-btn:active { transform: scale(.98); }
.c-btn svg { width: 18px; height: 18px; flex: none; }
.c-btn-primary { width: 100%; height: var(--z-control); margin-top: var(--z-4); padding: 0 28px; background: var(--z-orange); color: var(--z-on-orange); font-size: 19px; font-weight: var(--z-w-display); letter-spacing: -0.01em; }
.c-btn-primary:hover { background: var(--z-orange-2); }
.c-btn-primary svg { width: 20px; height: 20px; }
.c-btn-2 { position: relative; height: var(--z-control-sm); padding: 0 var(--z-4); background: var(--z-card); color: var(--z-ink); box-shadow: inset 0 0 0 1px var(--z-edge); font-size: 15px; font-weight: var(--z-w-strong); white-space: nowrap; }
.c-btn-2::after { content: ""; position: absolute; inset: -2px 0; }
.c-btn-2:hover { background: var(--z-paper-2); }
.c-ways { list-style: none; margin: var(--z-4) 0 0; padding: var(--z-1) var(--z-5); border-radius: var(--z-r-card); background: var(--z-card); }
.c-ways li + li button { border-top: 1px solid var(--z-line); }
.c-ways button { width: 100%; display: flex; align-items: center; gap: var(--z-4); min-height: 64px; padding: var(--z-3) 0; border: 0; background: none; color: var(--z-ink); font: inherit; text-align: left; cursor: pointer; }
.c-ways button:hover b { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.c-ways button:active { transform: scale(.995); }
.c-ways button:focus-visible { outline-offset: -2px; border-radius: var(--z-r-tag); }
.c-ways b { flex: 1; font-weight: var(--z-w-strong); }
.c-ways i { flex: none; font-style: normal; font-size: 22px; color: var(--z-ink-3); }
.c-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--z-paper-2); }
.c-ic svg { width: 18px; height: 18px; }

.c-keep { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--z-3); margin-top: var(--z-12); padding-top: var(--z-8); border-top: 1px solid var(--z-line); }
.c-keep h2 { margin: 0; text-wrap: balance; font-size: var(--z-h3); line-height: var(--z-h3-lh); font-weight: var(--z-w-strong); letter-spacing: -0.01em; }
.c-keep p { margin: 0; color: var(--z-ink-2); }
.c-keep-row { display: flex; align-items: center; justify-content: space-between; gap: var(--z-3); padding: var(--z-2) var(--z-2) var(--z-2) var(--z-4); border-radius: var(--z-r-field); background: var(--z-card); box-shadow: inset 0 0 0 1px var(--z-line); }
.c-keep-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-variant-numeric: tabular-nums; }
.c-open { justify-self: start; margin-top: var(--z-1); color: var(--z-ink); font-weight: var(--z-w-strong); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.c-open:hover { text-decoration-thickness: 2px; }
.c-qr { display: grid; place-items: center; padding: var(--z-2) 0 var(--z-5); }

@media (max-width: 560px) {
  .c-h1 { font-size: 34px; }
  .c-feat { gap: var(--z-2); margin-top: var(--z-6); }
  .c-tile { gap: var(--z-2); }
  .c-tile span { border-radius: var(--z-r-field); }
  .c-tile b { font-size: 17px; }
  .c-h2 { margin-top: var(--z-8); }
  .c-tile small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .c-tile span, .c-btn, .sheet { transition: none; animation: none; } }