/* The Studio: Hawsar's own colours (lib/core/theme/app_colors.dart), the
   dashboard's plainness, and the invitation itself in a phone on the right. */
@font-face {
  font-family: "ArkanEffra";
  src: url("/fonts/ArkanEffra-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --ground: #FFF6F0;
  --sheet: #FFFFFF;
  --peach: #FEE1D1;
  --peach-wash: #FFEEE5;
  --line: #EFD5C4;
  --line-strong: #E0BCA4;
  --ink: #1A1614;
  --muted: #7A6A5F;
  --brand: #144474;
  --btn-bg: #144474;
  --btn-ink: #FFFFFF;
  --gold: #C9A66B;
  --gold-text: #7A5D2E;
  --ok: #2E7D5B;
  --ok-wash: #E4F2EA;
  --warn: #B3261E;
  --warn-wash: #FDECEA;
  --warn-ink: #FFFFFF;
  --draft-wash: #FFF3DC;
  --shadow: 0 30px 60px -32px rgba(20, 68, 116, .42);
  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --f-ui: "Manrope", "Noto Sans Arabic", system-ui, sans-serif;
  --f-arabic: "Noto Sans Arabic", "Manrope", sans-serif;
  --r: 12px;
  --gutter: clamp(16px, 3vw, 32px);
  color-scheme: light;
  accent-color: var(--brand);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #0B1422; --sheet: #121E31; --peach: #1B2B45; --peach-wash: #16243A;
    --line: #22334D; --line-strong: #34496B; --ink: #F4ECE4; --muted: #A7B1C3;
    --brand: #B9C9E6; --btn-bg: #FEE1D1; --btn-ink: #0E3055;
    --gold: #D7B57A; --gold-text: #E2CFA7; --ok: #74C99F; --ok-wash: #15302A;
    --warn: #F2B8B5; --warn-wash: #3B1A1A; --warn-ink: #3B1A1A; --draft-wash: #3A2E17;
    --shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--f-ui); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[dir="rtl"] { font-family: var(--f-arabic); }
.muted { color: var(--muted); }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); padding-block: 8px 72px; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 18px) var(--gutter) 14px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--brand); text-decoration: none; }
.brand .mark { height: 26px; width: auto; }
.brand-name { font-family: var(--f-display); font-size: 1.45rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.env { font-size: .7rem; font-weight: 800; letter-spacing: .12em; background: var(--draft-wash); color: var(--gold-text); padding: 3px 8px; border-radius: 6px; }
.who { display: inline-flex; align-items: center; gap: 12px; font-size: .86rem; color: var(--muted); min-width: 0; }
#who-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }

/* the Studio's four places, beside the brand */
.tabs { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); margin-inline-end: auto; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 6px 15px; border-radius: 999px; color: var(--muted); font-weight: 700; font-size: .86rem; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.tabs a:hover { color: var(--ink); background: var(--peach-wash); }
.tabs a[aria-current="page"] { background: var(--peach); color: var(--ink); }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-size: .7rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

/* shared bits */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn.small { min-height: 36px; padding: 7px 14px; font-size: .84rem; }
.btn.wide { width: 100%; min-height: 50px; font-size: 1rem; }
.btn.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.btn.warn-solid { background: var(--warn); color: var(--warn-ink); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.btn.busy { opacity: .6; pointer-events: none; }
.link { border: 0; background: none; color: var(--brand); font-weight: 600; font-size: .86rem; padding: 4px; text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
.card { background: var(--sheet); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.title { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.1; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.error { color: var(--warn); font-size: .88rem; font-weight: 600; margin: 0; min-height: 1.2em; }
.hint { font-size: .8rem; color: var(--muted); margin: 0; }
.hint.center { text-align: center; }
.status { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-weight: 800; font-size: .72rem; letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; }
.status.draft { background: var(--draft-wash); color: var(--gold-text); }
.status.live, .status.paid { background: var(--ok-wash); color: var(--ok); }
/* The one state that needs the team: as strong as a button, so it is seen in a long list. */
.status.wait { background: var(--btn-bg); color: var(--btn-ink); }
.status.unpaid { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--draft-wash); color: var(--gold-text); font-size: .84rem; font-weight: 600; }
/* A price a save would move while the couple's transfer is on its way: their receipt would no longer match. */
.note.warn { background: var(--warn-wash); color: var(--warn); }
.mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .03em; }
.wa { color: var(--brand); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
::selection { background: color-mix(in srgb, var(--gold) 38%, transparent); }
input, textarea { caret-color: var(--brand); }
/* Some messages run to two lines on a phone: as wide as the text needs, never wider than the screen. */
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 22px); transform: translate(-50%, 16px); width: max-content; max-width: min(560px, calc(100vw - 32px)); background: var(--ink); color: var(--ground); padding: 10px 18px; border-radius: 20px; font-weight: 700; font-size: .88rem; text-align: center; text-wrap: balance; opacity: 0; transition: .25s; pointer-events: none; z-index: 50; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* sign in */
.center-card { min-height: 60vh; display: grid; place-items: center; }
.signin { width: min(420px, 100%); padding: 28px; display: grid; gap: 14px; }
.signin h1 { font-family: var(--f-display); font-weight: 600; font-size: 1.9rem; margin: 0; line-height: 1.15; }
.signin p { margin: 0; }

/* list */
.list-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.list-head p { margin: 6px 0 0; }
.totals { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 16px; font-size: .9rem; color: var(--muted); }
.totals b { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 1.05rem; margin-inline-end: 4px; }
.table-wrap { overflow-x: auto; background: var(--sheet); border: 1px solid var(--line); border-radius: 16px; }
table.list { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.list th { text-align: start; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 11px 14px; background: var(--peach-wash); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.list td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
table.list tr:last-child td { border-bottom: 0; }
table.list tbody tr { cursor: pointer; }
table.list tbody tr:hover td { background: var(--peach-wash); }
table.list .couple { font-family: var(--f-arabic); font-weight: 600; font-size: 1rem; }
table.list .num { text-align: end; font-variant-numeric: tabular-nums; }
.empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 56px 16px; }
.empty h2 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; }
.empty p { margin: 0 0 8px; max-width: 42ch; }
.rings-art { width: 88px; height: 48px; }
.rings-art circle { fill: none; stroke: var(--gold); stroke-width: 1.6; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filters .chip { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; transition: background-color .15s, border-color .15s, color .15s; }
.filters .chip:hover { border-color: var(--brand); }
.filters .chip b { font-size: .76rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.filters .chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--btn-ink); }
.filters .chip[aria-pressed="true"] b { color: inherit; opacity: .8; }
p.none { margin: 0; padding: 28px 8px; text-align: center; }
table.list .src { font-weight: 700; }
table.list .src.team { color: var(--muted); font-weight: 600; }
.paycell { display: inline-flex; align-items: center; gap: 8px; }
.paycell small { color: var(--muted); font-weight: 600; font-size: .82rem; font-variant-numeric: tabular-nums; }

/* payments: one card per couple waiting for the team */
.lede { margin: 0 0 16px; max-width: 72ch; color: var(--muted); font-size: .9rem; }
.lede b { color: var(--ink); }
.paylist { display: grid; gap: 12px; }
.pay { display: grid; gap: 14px; padding: 16px 18px; background: var(--sheet); border: 1px solid var(--line); border-radius: 16px; transition: opacity .2s, transform .2s; }
.pay.gone { opacity: 0; transform: translateY(-6px); }
.pay-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 12px 28px; align-items: center; }
.pay-who { display: grid; gap: 2px; min-width: 0; }
.pay-who .couple { justify-self: start; margin: 0; font-family: var(--f-arabic); font-weight: 700; font-size: 1.12rem; line-height: 1.5; overflow-wrap: anywhere; }
.totals .t-label { font-weight: 700; }
.pay-who small { color: var(--muted); font-size: .82rem; font-weight: 600; }
.pay-due { display: grid; justify-items: end; gap: 6px; text-align: end; }
.pay-due b { font-size: 1.3rem; font-weight: 800; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-due small { color: var(--muted); font-size: .78rem; font-weight: 600; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px 20px; margin: 0; }
.facts > div { display: grid; gap: 2px; min-width: 0; }
/* Paying online (2026-10-07): the order's Wayl link across the box, and money Wayl took that did not pay it, in red. */
.facts > div.wide { grid-column: 1 / -1; }
.facts > div.wide dd { line-height: 1.55; }
.wayl-flag { color: var(--warn, #B3261E); font-weight: 700; }
.facts dt { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.facts dd { margin: 0; font-weight: 700; font-size: .92rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pay-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.confirm.ok { background: var(--ok-wash); }
.confirm .field input { background: var(--sheet); }
.confirm .error:empty, .codeform .error:empty { display: none; }
.confirm .field { max-width: 460px; }
.paybox .said { margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--warn-wash); font-weight: 600; overflow-wrap: anywhere; }
.paybox .lead { margin: 0; font-size: .92rem; }
.paybox .facts { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--peach-wash); }

/* Premium: gold leaf, the same in light and dark, as a printed card's foil would be. */
.tier-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; font-style: normal; color: #3B2A0E; background: linear-gradient(135deg, #F4E1B0, #C9A66B 72%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 6px -2px rgba(40, 24, 0, .45); }
.tier-badge.classic { color: var(--muted); background: none; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* codes */
.codeform { display: grid; gap: 16px; padding: 20px 22px 22px; margin-bottom: 18px; }
.codeform h2, .lede-col h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.seg label { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 6px 13px; border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--peach); color: var(--ink); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.field .seg { justify-self: start; }
table.codes tbody tr { cursor: default; }
table.codes tr.off td:not(:last-child) { color: var(--muted); }
.code-copy { border: 0; background: none; padding: 4px 0; color: inherit; font-size: .92rem; cursor: copy; }
.code-copy:hover { text-decoration: underline; text-underline-offset: 3px; }
table.codes .status { margin-inline-start: 8px; }

/* settings: a label column and a field column, one row per subject */
.settings { max-width: 980px; }
.setrow { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 12px 44px; padding: 24px 24px 26px; }
.setrow + .setrow { border-top: 1px solid var(--line); }
.lede-col p { margin: 4px 0 0; font-size: .84rem; color: var(--muted); max-width: 36ch; }
.setrow .body { display: grid; gap: 12px; align-content: start; min-width: 0; max-width: 560px; }
.set-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 16px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--peach-wash); }
.set-foot .error { margin-inline-end: auto; }
.set-foot .error:empty { min-height: 0; }
.tg.big, .tg.big:last-child { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; gap: 20px; cursor: pointer; transition: background-color .2s, border-color .2s; }
.tg.big b { display: block; font-size: 1rem; }
.tg.big small { margin-top: 3px; line-height: 1.45; }
.tg.big:has(.sw:checked) { background: var(--ok-wash); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.tg.big:has(.sw:checked) small { color: var(--ink); }
.money { display: flex; align-items: stretch; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--sheet); overflow: hidden; }
.money:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.field .money input { flex: 1; min-width: 0; min-height: 42px; border: 0; border-radius: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.field .money input:focus-visible { outline: 0; }
.money i { display: flex; align-items: center; padding-inline: 12px; font-style: normal; font-weight: 700; font-size: .78rem; letter-spacing: .06em; color: var(--muted); background: var(--peach-wash); border-inline-start: 1px solid var(--line); }
.field.bad .money { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.field.bad .money input { box-shadow: none; }

/* editor */
.ed-head { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: end; padding-block: 12px 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.back { grid-column: 1 / -1; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .86rem; }
/* The save row comes last in the page (for the phone layout) but sits beside the title here. */
.ed-title { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.save-row { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 12px; }
.save-state { font-size: .82rem; color: var(--muted); font-weight: 600; }
.save-state.dirty { color: var(--gold-text); }
.save-state.stale { color: var(--warn); }
.ed-meta { grid-column: 1 / -1; grid-row: 3; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: .86rem; font-weight: 600; color: var(--muted); }
.ed-conflict { margin: 0 0 22px; padding: 12px 16px; border-radius: 12px; background: var(--warn-wash); font-size: .9rem; }
.ed-conflict p { margin: 0; max-width: 80ch; }

.maker { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 36px; align-items: start; }
.sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.steps button { border: 0; background: transparent; text-align: start; display: grid; gap: 1px; padding: 14px 20px 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.steps b { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.steps span { font-weight: 700; font-size: .98rem; }
.steps button[aria-selected="true"] { border-bottom-color: var(--brand); }
.steps button[aria-selected="true"] b { color: var(--gold-text); }
.pane { padding: 22px 20px 24px; display: grid; gap: 24px; }
.group { display: grid; gap: 10px; }
.group > h3 { margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.field { display: grid; gap: 5px; align-content: start; }
.field > span, .field > label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.field-error { color: var(--warn); font-size: .8rem; font-weight: 600; }
.field-error:empty { display: none; }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--sheet); font-size: .98rem; }
.field input[dir="rtl"], .field textarea[dir="rtl"] { font-size: 1.04rem; }
.field textarea { min-height: 72px; resize: vertical; line-height: 1.7; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.linkrow { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--sheet); }
.linkrow.bad { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.linkrow span, .linkrow i { display: flex; align-items: center; color: var(--muted); font-weight: 600; font-size: .92rem; white-space: nowrap; font-style: normal; }
.linkrow span { padding-inline-start: 12px; }
.linkrow i { padding-inline-end: 12px; }
.linkrow input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 2px; font-weight: 700; font-size: .95rem; }
.linkrow input:disabled { color: var(--ink); opacity: 1; }
.hall-error { color: var(--warn); font-weight: 600; }
.hall-error .link { padding: 0 2px; font-size: inherit; }
.hall-card { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--peach-wash); }
.hall-card img { width: 84px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--line); flex: none; }
.hall-card b { display: block; }
.hall-card small { color: var(--muted); }
.toggles { display: grid; }
.tg { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-weight: 600; font-size: .92rem; }
.tg:last-child { border-bottom: 0; }
.tg small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; }
.sw { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; cursor: pointer; transition: background .2s; margin: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sw:checked { background: var(--ok); }
.sw:checked::after { transform: translateX(18px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { border: 1px solid var(--line-strong); background: var(--sheet); border-radius: 999px; padding: 6px 12px; font-size: .9rem; font-weight: 600; min-height: 36px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 6px 13px; border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--muted); min-height: 32px; }
.seg button[aria-pressed="true"] { background: var(--peach); color: var(--ink); }
/* Each design as its real cover (coverInto, in a frame of its own), its name, and what it sells at. */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }
.th { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); padding: 0; overflow: hidden; text-align: start; display: grid; min-width: 0; }
.th[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.th .th-cover { position: relative; display: block; aspect-ratio: 9 / 14; overflow: hidden; border-bottom: 1px solid var(--line); }
.th .th-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 8px 10px 9px; }
.th .th-meta b { font-size: .84rem; }
.th .tier-badge { padding: 3px 7px; font-size: .56rem; letter-spacing: .08em; }
/* The music: a select and a button to hear the track; shown disabled on a design that plays none. */
.music-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.music-row select { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--sheet); font-size: .98rem; }
.music-row select:disabled { opacity: .55; cursor: not-allowed; }
#music-play { min-width: 76px; }
/* The design an older invitation has, which the pickers no longer offer: a ribbon (and aria-current). */
.th[aria-current="true"] .th-cover::after { content: ""; position: absolute; top: 0; inset-inline-start: 10px; z-index: 1; width: 16px; height: 23px; background: var(--brand); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--sheet); box-shadow: 0 0 0 1px var(--line-strong); padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--brand); }
.swatches .cw-name { font-size: .84rem; font-weight: 700; color: var(--muted); margin-inline-start: 2px; }
.focus { padding-top: 10px; border-top: 1px dashed var(--line); }
.focus input { width: 100%; min-height: 36px; margin: 0; padding: 0; border: 0; accent-color: var(--brand); background: transparent; cursor: pointer; }
.custom-col { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--muted); }
.custom-col input { width: 40px; height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 2px; background: var(--sheet); }
.letters { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.letter { border: 1px solid var(--line); background: var(--sheet); border-radius: 12px; padding: 10px 8px 8px; display: grid; gap: 2px; justify-items: center; }
.letter b { font-size: 1.5rem; font-weight: 700; line-height: 1.5; }
.letter small { font-size: .76rem; color: var(--muted); font-weight: 700; }
.letter[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.upload { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.upload label { cursor: pointer; }
/* The evening's programme: a line per moment, the time first. */
.prog { display: grid; gap: 6px; }
.prog:empty { display: none; }
.prog-head, .prog-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 8px; align-items: center; }
.prog.ku-only .prog-head, .prog.ku-only .prog-row { grid-template-columns: 136px minmax(0, 1fr) 34px; }
.prog.ku-only .ar { display: none; }
/* An English column beside the base language's (and Arabic's), on invitations with an English page. */
.prog.with-en .prog-head, .prog.with-en .prog-row { grid-template-columns: 136px repeat(3, minmax(0, 1fr)) 34px; }
.prog.with-en.ku-only .prog-head, .prog.with-en.ku-only .prog-row { grid-template-columns: 136px repeat(2, minmax(0, 1fr)) 34px; }
.prog:not(.with-en) .en { display: none; }
/* A link a language, for guests reading each. */
.share-langs { display: grid; gap: 6px; margin-top: 10px; }
.share-langs .sl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet); }
.share-langs .sl b { font-size: .86rem; }
.share-langs .sl span { flex: 1 1 12rem; min-width: 0; font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; }
.prog-head span { font-size: .74rem; font-weight: 700; color: var(--muted); }
.prog-row input { width: 100%; min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--sheet); font-size: .98rem; }
.prog-row input[type="time"] { font-variant-numeric: tabular-nums; padding-inline-end: 6px; }
.prog-row input[dir="rtl"] { font-size: 1.04rem; }
.prog-row.bad input { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.prog-row .x, .replies .x { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.25rem; line-height: 1; transition: background-color .15s, color .15s; }
.prog-row .x:hover { background: var(--warn-wash); color: var(--warn); }
#prog-group > .btn { justify-self: start; }
.chip:disabled { opacity: .45; }
.hash { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--sheet); }
.hash i { display: flex; align-items: center; padding-inline: 12px 2px; color: var(--muted); font-style: normal; font-weight: 700; }
.field .hash input { border: 0; border-radius: 0; padding-inline-start: 4px; min-width: 0; font-weight: 600; }
.field .hash input:focus-visible { outline: 0; }
.hash:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.field.bad .hash { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.field.bad .hash input { box-shadow: none; }
/* The gallery: six slots, a photo with its buttons or a place to add one. */
.gallery-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gslot { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--peach-wash); border: 1px solid var(--line); min-width: 0; }
.gslot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gslot.empty { display: grid; place-content: center; justify-items: center; gap: 2px; padding: 0; border: 1.5px dashed var(--line-strong); background: var(--sheet); color: var(--muted); transition: border-color .15s, color .15s; }
.gslot.empty:hover { border-color: var(--brand); color: var(--brand); }
.gslot.empty span { font-size: 1.6rem; line-height: 1; font-weight: 500; }
.gslot.empty small { font-size: .8rem; font-weight: 700; }
.gs-saved { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .8rem; font-weight: 700; }
.gs-n { position: absolute; top: 8px; inset-inline-start: 8px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: rgba(21, 17, 15, .62); color: #fff; font-size: .72rem; }
.gs-new { position: absolute; top: 8px; inset-inline-end: 8px; padding: 2px 8px; border-radius: 999px; background: var(--draft-wash); color: var(--gold-text); font-size: .68rem; font-weight: 800; font-style: normal; }
.gs-acts { position: absolute; inset: auto 0 0; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 26px 6px 8px; background: linear-gradient(transparent, rgba(21, 17, 15, .6)); }
.gs-acts .btn { background: var(--sheet); min-height: 32px; padding: 5px 10px; font-size: .78rem; }
.nav { display: flex; justify-content: space-between; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.radio-list { display: grid; gap: 8px; }
.radio-list label { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 10px; font-weight: 600; cursor: pointer; }
.radio-list label:has(input:checked) { border-color: var(--brand); background: var(--peach-wash); }
.radio-list small { color: var(--muted); font-weight: 500; margin-inline-start: auto; font-size: .8rem; text-align: end; }

/* publish, live */
#publish-draft, #publish-live { display: grid; gap: 22px; }
.live-box { display: grid; gap: 14px; padding: 16px; border-radius: var(--r); background: var(--ok-wash); }
.live-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.live-top b { font-size: 1rem; word-break: break-all; }
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.qrprint { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.qr { width: 112px; height: 112px; background: #fff; padding: 8px; border-radius: 10px; flex: none; }
.qr img, .qr canvas { width: 96px !important; height: 96px !important; }
.qr-side { display: grid; gap: 8px; max-width: 30ch; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 0; background: var(--sheet); }
.stat b { font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.3; }
.stat span { font-size: .78rem; color: var(--muted); font-weight: 600; }
.replies { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.replies .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: var(--peach-wash); font-size: .86rem; font-weight: 700; flex-wrap: wrap; }
.replies .r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 34px; gap: 14px; padding: 9px 10px 9px 14px; border-top: 1px solid var(--line); font-size: .9rem; align-items: center; }
/* Remove, quiet until pointed at: the row asks before anything goes. */
.replies .x { margin-block: -4px; }
.replies .x:hover { background: var(--warn-wash); color: var(--warn); }
.replies .r.asking { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--warn-wash); }
.replies .r.asking b { flex: 1 1 100%; min-width: 0; }
.replies .r.asking .ask { color: var(--ink); font-size: .86rem; }
.replies .r.asking .row-actions { margin-inline-start: auto; }
.replies .r b { font-family: var(--f-arabic); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replies .r span { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.replies .r em { font-style: normal; font-size: .74rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.replies .r em.y { background: var(--ok-wash); color: var(--ok); }
.replies .r em.n { background: var(--draft-wash); color: var(--gold-text); }
.replies .none { padding: 16px 14px; color: var(--muted); font-size: .88rem; border-top: 1px solid var(--line); }
/* A wish: the name and what they wrote, when, and delete. */
.replies .r.w { grid-template-columns: minmax(0, 1fr) auto 34px; align-items: start; }
.replies .w-body { display: grid; gap: 2px; min-width: 0; }
.replies .w-body p { margin: 0; font-family: var(--f-arabic); font-size: .95rem; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-line; }
.replies .r .w-at { font-size: .78rem; white-space: nowrap; padding-top: 3px; }
.replies .r.w.asking .w-body { flex: 1 1 100%; }
.wishes { max-height: 560px; overflow-y: auto; }
.wishes .head { position: sticky; top: 0; z-index: 1; }
.danger { padding-top: 14px; border-top: 1px dashed var(--line); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.confirm { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--warn-wash); }
.confirm p { margin: 0; font-size: .9rem; }

/* stage */
.stage { position: sticky; top: 16px; display: grid; gap: 12px; justify-items: center; }
.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: min(372px, 100%); flex-wrap: wrap; }
.phone { width: min(372px, 100%); height: min(760px, calc(100vh - 130px)); min-height: 560px; border-radius: 46px; padding: 11px; background: #15110F; box-shadow: var(--shadow), inset 0 0 0 1.5px #3B332E; }
.phone .screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; transform: translateZ(0); }
/* A real phone's window (390 wide, as tall as the frame's proportions), scaled to the frame (setDevice in site/common.js). */
.phone iframe { position: absolute; top: 0; left: 0; display: block; width: 390px; height: 100%; border: 0; transform-origin: 0 0; background: #fff; }
/* The preview as a laptop (setDevice in site/common.js): the page in a 1280x800 window, scaled to
   the width it has, in a slim lid on a thin base. The column widens for it on a wide screen. */
.laptop { position: relative; width: 94%; margin-bottom: 12px; padding: 8px 8px 11px; border-radius: 14px 14px 5px 5px; background: #15110F; box-shadow: var(--shadow), inset 0 0 0 1.5px #3B332E; }
.laptop .screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: #fff; transform: translateZ(0); }
.laptop iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; display: block; transform-origin: 0 0; background: #fff; }
.laptop::after { content: ""; position: absolute; left: -3%; right: -3%; top: 100%; height: 11px; border-radius: 1px 1px 12px 12px; background: linear-gradient(90deg, transparent 42%, rgba(0, 0, 0, .16) 42%, rgba(0, 0, 0, .16) 58%, transparent 58%) top / 100% 3px no-repeat, linear-gradient(#E6E0DA, #B8B0A9); box-shadow: 0 14px 22px -14px rgba(0, 0, 0, .45); }
.laptop-view .stage-bar { width: 94%; }
@media (min-width: 1100px) {
  .maker.laptop-view { grid-template-columns: minmax(0, 1fr) 500px; }
}
.stage-note { font-size: .8rem; color: var(--muted); text-align: center; margin: 0; }

@media (max-width: 960px) {
  .maker { grid-template-columns: 1fr; }
  .stage { position: static; order: -1; }
  /* The preview stands above the form here, so a Save in the header would
     scroll away before the first field. The header lets go of its rows and
     the save row, last among them, stays at the top of the screen instead. */
  html { scroll-padding-top: 76px; }
  .ed-head { display: contents; }
  .back { display: inline-block; margin-top: 12px; }
  .ed-title { margin-top: 6px; }
  .ed-meta { margin-top: 8px; }
  .save-row { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; justify-content: space-between; min-height: 64px; margin: 10px calc(-1 * var(--gutter)) 22px; padding: 10px var(--gutter); background: var(--ground); border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .tabs { order: 3; flex: 1 1 100%; margin: 0; }
  .tabs a { flex: 1 0 auto; padding-inline: 10px; }
  .pay-main { grid-template-columns: minmax(0, 1fr) auto; }
  .pay-main .facts { grid-column: 1 / -1; grid-row: 2; }
  .setrow { grid-template-columns: 1fr; padding: 20px 18px 22px; }
  .set-foot { padding-inline: 18px; }
  .codeform { padding: 18px 16px 20px; }
}
@media (max-width: 560px) {
  #who-email { display: none; }
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone { border-radius: 30px; padding: 6px; height: 620px; min-height: 0; }
  .phone .screen { border-radius: 25px; }
  .steps button { padding-inline: 12px; }
  .linkrow span { font-size: .8rem; padding-inline-start: 8px; }
  /* A programme line on a phone: the time and remove on top, the labels under them. */
  .prog-head { display: none; }
  .prog-row, .prog.ku-only .prog-row, .prog.with-en .prog-row, .prog.with-en.ku-only .prog-row { grid-template-columns: minmax(0, 1fr) 34px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
  .prog-row input[type="time"] { max-width: 140px; }
  .prog-row .x { grid-column: 2; grid-row: 1; }
  .prog-row input:not([type="time"]) { grid-column: 1 / -1; }
  .gallery-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A wish on a phone: its time under the text, so the text has the width. */
  .replies .r.w { grid-template-columns: minmax(0, 1fr) 34px; row-gap: 2px; }
  .replies .r.w .w-at { grid-column: 1; grid-row: 2; padding-top: 0; }
  .replies .r.w .x { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Settings: the FIB QR code's link, with the picture couples will see beside it. */
.qr-field { display: flex; align-items: center; gap: 12px; }
.qr-field input { flex: 1 1 auto; min-width: 0; }
.qr-preview { flex: none; width: 72px; height: 72px; object-fit: contain; padding: 4px; border-radius: 8px; background: #fff; border: 1px solid var(--line, #ddd); }

/* Settings: the sale (2026-10-04). Its terms show while the switch is on; the preview reads as the couples' prices. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* min-width 0 all the way down: a grid item's own min-content (two 170 px boxes side by side) would widen the row past
   its padding on a phone. */
.sale-terms { display: grid; gap: 16px; min-width: 0; }
.sale-terms > *, .sale-terms .field > * { min-width: 0; }
.sale-terms .row { align-items: start; }
.sale-designs { display: grid; gap: 12px; margin: 6px 0 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--peach-wash); min-width: 0; }
.sale-designs h4 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.sale-designs h4 .link { margin-inline-start: auto; padding: 0; font-size: .76rem; letter-spacing: 0; text-transform: none; }
.ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2px 14px; }
.tick { display: flex; align-items: center; gap: 9px; min-height: 34px; font-size: .88rem; font-weight: 600; cursor: pointer; }
.tick input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.field.bad .sale-designs { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.sale-when { max-width: 420px; margin-top: 6px; }
.sale-when .sub { display: grid; gap: 5px; align-content: start; }
.sale-when .sub > label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.sale-when input[type="date"], .sale-when input[type="time"] { font-variant-numeric: tabular-nums; }
.sale-preview { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--sheet); font-size: .9rem; font-weight: 700; line-height: 1.7; font-variant-numeric: tabular-nums; }
.sale-preview:empty { display: none; }
.sale-preview .to { color: var(--muted); font-weight: 500; padding-inline: 2px; }
.sale-preview .nw { white-space: nowrap; }
.sale-preview .sep { color: var(--muted); padding-inline: 3px; }
.sale-preview .end { color: var(--gold-text); }
.sale-preview.off { color: var(--muted); font-weight: 600; }

/* The Invitations page while a sale runs: one line, what it takes off and when it ends, and the way to change it. */
.sale-live { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--ok-wash); border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent); font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sale-live b { color: var(--ok); font-weight: 800; }
.sale-live > span::before { content: "·"; margin-inline-end: 12px; color: var(--muted); }
.sale-live a { margin-inline-start: auto; color: var(--brand); font-weight: 700; text-underline-offset: 3px; }