/* =============================================================================
   CFT build additions shared by every host, on top of the design system
   (tokens -> components -> shell -> this). Only what the mockups drew inline
   or left to the build: the sign-in card (signin.html), the skip link, the
   toast zone and the menu rows that are forms. Tokens only.
   ============================================================================= */

.skip-link { position: absolute; left: 12px; top: -100px; z-index: 2000; padding: 10px 18px; border-radius: var(--cft-r-md); background: var(--cft-primary); color: var(--cft-on-primary); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Sign-in on every host (B7 §5, mockups/pages/signin.html) */
.auth { min-height: calc(100dvh - 80px); display: grid; place-items: center; padding: 32px 16px; }
.auth .card { width: min(420px, 100%); }
.auth .card-body { display: grid; gap: 14px; padding: 28px; }
.auth .brandrow { display: flex; align-items: center; gap: 10px; }
.auth .brandrow b { font-family: var(--cft-serif); font-size: var(--cft-fs-xl); }
.auth h1 { font-size: var(--cft-fs-xl); margin: 0; }
.auth .field { margin: 0; }
.auth form { display: grid; gap: 14px; }
.auth .banner { margin: 0; }
.auth .foot { text-align: center; font-size: var(--cft-fs-sm); color: var(--cft-muted); margin: 0; }
.auth .code { letter-spacing: .5em; text-align: center; font-size: var(--cft-fs-xl); font-variant-numeric: tabular-nums; }
/* 1.0.4: the consoles' sign-in. main's wrapper sized the card to its content
   (265px, inputs 207px), so it takes the card's width now; inputs as tall as
   the code box; Punda's waterfront drawn behind it (signin/_backdrop.html),
   by day or, in the dark theme, at night. */
main.auth { position: relative; isolation: isolate; overflow: hidden; min-height: 100dvh; background: var(--cft-bg); }
main.auth > div { position: relative; width: min(440px, 100%); }
.auth-backdrop { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .6; }
[data-bs-theme="dark"] .auth-backdrop { opacity: .45; }
/* Phones: the middle of the drawing is the gap by the bridge; slide to the houses. */
@media (max-width: 700px) { .auth-backdrop { left: auto; width: 200%; } }
.bd-sky-top { stop-color: var(--cft-bd-sky-top); }
.bd-sky-low { stop-color: var(--cft-bd-sky-low); }
.bd-sea-top { stop-color: var(--cft-bd-sea-top); }
.bd-sea-low { stop-color: var(--cft-bd-sea-low); }
.bd-glow-in { stop-color: var(--cft-bd-sun); stop-opacity: .35; }
.bd-glow-out { stop-color: var(--cft-bd-sun); stop-opacity: 0; }
.bd-sun { fill: var(--cft-bd-sun); opacity: .5; }
.bd-bird { fill: none; stroke: var(--cft-bd-house); stroke-width: 2.5; stroke-linecap: round; opacity: .45; }
.bd-back { fill: var(--cft-bd-far); }
.bd-bridge { fill: none; stroke: var(--cft-bd-bridge); stroke-linecap: round; }
.bd-deck { stroke-width: 12; }
.bd-arch { stroke-width: 9; }
.bd-strut { stroke-width: 4; }
.bd-house { fill: var(--cft-bd-house); }
.bd-win { fill: var(--cft-bd-win); opacity: .9; }
.bd-reflect { opacity: .22; }
.bd-wave { fill: none; stroke: var(--cft-bd-wave); stroke-width: 1.5; opacity: .35; }
.bd-quay { stroke: var(--cft-bd-wave); stroke-width: 2; opacity: .5; }
.bd-leaf { fill: var(--cft-bd-leaf); opacity: .14; }
main.auth .card { box-shadow: var(--cft-shadow-lg); }
main.auth .auth-langs { width: fit-content; margin-inline: auto; padding: 3px; border-radius: var(--cft-r-pill); background: var(--cft-surface); box-shadow: var(--cft-shadow); }
main.auth .auth-langs a { border-radius: var(--cft-r-pill); }
.auth .form-control { min-height: 50px; font-size: var(--cft-fs-md); }
.auth-langs { display: flex; justify-content: center; gap: 4px; margin-top: 14px; font-size: var(--cft-fs-sm); }
.auth-langs a { padding: 4px 8px; border-radius: var(--cft-r-sm); color: var(--cft-muted); text-decoration: none; }
.auth-langs a[aria-current] { color: var(--cft-ink); font-weight: 700; background: var(--cft-soft); }

/* Menu rows that are buttons (sign out, theme): same look as the links */
.drop-c form { margin: 0; }
.drop-c .drop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--cft-r-sm); background: none; color: var(--cft-ink); font: 500 var(--cft-fs-sm) var(--cft-sans); text-align: left; cursor: pointer; text-decoration: none; }
.drop-c .drop-item:hover { background: var(--cft-surface-2); }
.drop-c .drop-item[aria-pressed="true"] { background: var(--cft-soft); font-weight: 700; }
.drop-c .who { padding: 8px 12px 10px; border-bottom: 1px solid var(--cft-border); margin-bottom: 4px; font-size: var(--cft-fs-sm); }
.drop-c .who b { display: block; }
.drop-c hr { margin: 4px 0; }
.drop-c .seg-row { display: flex; gap: 4px; padding: 4px 8px 8px; }
.drop-c .seg-row form { flex: 1; }
.drop-c .seg-row .drop-item { justify-content: center; padding: 7px 6px; border: 1px solid var(--cft-border); }

/* Success toasts (the slide-in panel's "success" outcome, 02 §6) */
.toast-zone { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1200; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.has-tabbar ~ .toast-zone, .toast-zone.above-tabbar { bottom: calc(var(--cft-tabbar) + 16px); }
.flashes { display: grid; gap: 8px; margin-bottom: var(--cft-s4); }

/* Turnstile states (D50) */
.ts-failed[hidden] { display: none; }

/* Money totals: one line per currency, never one sum (D8) */
.money-totals { display: inline-grid; gap: 2px; justify-items: end; }

/* Phone drawer (admin burger, portal/media "More"): pinned to the screen,
   not to the top of the page, so it opens where the person is even after
   scrolling down a long page. Same breakpoint and look as shell.css. */
@container app (max-width: 767.98px) {
  .con.drawer-open .con-side { position: fixed; top: var(--cft-topbar); bottom: 0; overflow-y: auto; }
  .con.has-tabbar.drawer-open .con-side { bottom: var(--cft-tabbar); }
  .con.drawer-open::after { position: fixed; }
}

/* Finance pages (C10-C14): two columns, the precedence list, level dots */
.two { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@container app (max-width: 1199.98px) { .two { grid-template-columns: minmax(0, 1fr); } }
.stack-16 { display: grid; gap: 16px; min-width: 0; }
.order { margin: 0; padding: 0; list-style: none; counter-reset: o; }
.order li { counter-increment: o; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 9px 16px; border-top: 1px solid var(--cft-border); font-size: var(--cft-fs-sm); }
.order li::before { content: counter(o); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cft-surface-2); font-weight: 700; font-size: 11px; }
.order li.hit { background: var(--cft-soft); }
.order li.hit::before { background: var(--cft-accent); color: var(--cft-on-accent); }
.lvl { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.lvl i.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--cft-accent); }
.diff { font-variant-numeric: tabular-nums; }
.diff del { color: var(--cft-muted); }
.inline-form { display: inline; margin: 0; }
.sum-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; font-variant-numeric: tabular-nums; }
.sum-grid .total { font-weight: 700; border-top: 1px solid var(--cft-border); padding-top: 6px; }

/* Date range presets are links here (the range lives in the URL), styled
   as the gallery's buttons (components.css .daterange button). */
.daterange .dr-preset { padding: 7px 11px; font: 500 var(--cft-fs-sm) var(--cft-sans); color: var(--cft-ink); text-decoration: none; border-right: 1px solid var(--cft-border); }
.daterange .dr-preset[aria-current] { background: var(--cft-soft); font-weight: 700; }
.daterange form.custom { margin: 0; }
.daterange .custom input[type="date"] { width: 9.5em; }

/* The fifth chart series, "Other channels": neutral, never one of the four brand series colours. */
.chart .s0 { fill: var(--cft-muted); }
.legend i.s0 { background: var(--cft-muted); }
.legend i.s1 { background: var(--cft-chart-1); } .legend i.s2 { background: var(--cft-chart-2); }
.legend i.s3 { background: var(--cft-chart-3); } .legend i.s4 { background: var(--cft-chart-4); }
.cur-card .figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding: var(--cft-s4) var(--cft-s5); }
.cur-card .v { font: 600 var(--cft-fs-xl)/1.2 var(--cft-sans); font-variant-numeric: tabular-nums; margin-top: 4px; }
.cur-card .v.big { font-size: var(--cft-fs-2xl); }
.cur-card .s { font-size: var(--cft-fs-sm); color: var(--cft-muted); margin-top: 2px; }
@container app (max-width: 480px) { .cur-card .figs { grid-template-columns: minmax(0, 1fr); } }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@container app (max-width: 991.98px) { .pair { grid-template-columns: minmax(0, 1fr); } }

/* A filter select with long option text (tour names) never pushes the page wider than the phone. */
.filters .form-select, .filters .form-control { max-width: 100%; min-width: 0; }

/* R11 Profile & banking (mockup portal-banking.html). */
.pb { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; max-width: 1080px; }
@container app (max-width: 1199.98px) { .pb { grid-template-columns: minmax(0, 1fr); } }
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
@container app (max-width: 640px) { .kinds { grid-template-columns: 1fr; } }
.kind { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--cft-border-strong); border-radius: var(--cft-r-md); background: var(--cft-surface); text-decoration: none; color: var(--cft-ink); }
.kind .ti { font-size: 24px; color: var(--cft-muted); }
.kind b { display: block; } .kind small { color: var(--cft-muted); }
.kind[aria-pressed="true"] { border-color: var(--cft-primary); box-shadow: inset 0 0 0 1px var(--cft-primary); background: var(--cft-soft); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
@container app (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.saved > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 9px 20px; border-top: 1px solid var(--cft-border); font-size: var(--cft-fs-sm); overflow-wrap: anywhere; }
.saved > div > span:first-child { color: var(--cft-muted); }
.cur-pick { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.cur-pick .form-select { max-width: 100%; }
/* The route choice is links (the choice lives in the URL), styled as .seg buttons. */
.seg a { padding: 6px 12px; border-radius: 7px; font: 600 var(--cft-fs-sm) var(--cft-sans); color: var(--cft-muted); text-decoration: none; }
.seg a[aria-pressed="true"] { background: var(--cft-surface); color: var(--cft-ink); box-shadow: var(--cft-shadow); }
@container app (max-width: 480px) { .seg { flex-wrap: wrap; } }
/* C13 "Pay to, as Wise asks". */
.payto > div { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 20px; border-top: 1px solid var(--cft-border); font-size: var(--cft-fs-sm); overflow-wrap: anywhere; }
.payto > div > span:first-child { color: var(--cft-muted); }
.payto .val { font-variant-numeric: tabular-nums; white-space: pre-line; }
.payto button.copied { color: var(--cft-success); }

/* C22 Hero carousel: language coverage chips, language blocks, the phone and desktop previews. */
.lang-chips { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.lang-chips span { font: 700 10px/1 var(--cft-sans); padding: 4px 5px; border-radius: 4px; }
.lang-chips .on { background: var(--cft-soft); color: var(--cft-soft-ink); }
.lang-chips .off { background: var(--cft-surface-2); color: var(--cft-muted); }
details.lang-block { border-top: 1px solid var(--cft-border); padding: 10px 0; }
details.lang-block:first-child { border-top: 0; padding-top: 0; }
details.lang-block summary { cursor: pointer; }
.hero-previews { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.hero-previews figure { margin: 0; display: grid; gap: 6px; }
.hero-previews .frame { overflow: hidden; border: 1px solid var(--cft-border); border-radius: var(--cft-r-md); }
.hero-previews .frame iframe { border: 0; transform-origin: 0 0; display: block; }
.hero-previews .phone { width: 225px; height: 420px; } .hero-previews .phone iframe { width: 375px; height: 700px; transform: scale(.6); }
.hero-previews .desktop { width: min(576px, 100%); height: 279px; } .hero-previews .desktop iframe { width: 1280px; height: 620px; transform: scale(.45); }
.lang-chips a { font: 700 10px/1 var(--cft-sans); padding: 4px 5px; border-radius: 4px; text-decoration: none; }
.lang-chips a.on { background: var(--cft-soft); color: var(--cft-soft-ink); }
.lang-chips a.off { background: var(--cft-surface-2); color: var(--cft-muted); }
.row-actions { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* Portal R2/R6: the reward level as steps (D22). */
.lvl-steps { display: flex; gap: 4px; margin: 10px 0 6px; }
.lvl-steps .seg { flex: 1; height: 8px; border-radius: 4px; background: var(--cft-surface-2); position: relative; overflow: hidden; }
.lvl-steps .seg::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--cft-accent); }
.lvl-names { display: flex; gap: 4px; font-size: var(--cft-fs-xs); color: var(--cft-muted); }
.lvl-names span { flex: 1; } .lvl-names .cur { color: var(--cft-ink); font-weight: 700; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi .v { font: 700 var(--cft-fs-2xl)/1.15 var(--cft-sans); font-variant-numeric: tabular-nums; }
.copy-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy-row code { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; padding: 8px 10px; background: var(--cft-surface-2); border-radius: var(--cft-r-sm); font-size: var(--cft-fs-sm); }
.steps-first { display: grid; gap: 10px; }
.steps-first a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--cft-border); border-radius: var(--cft-r-md); text-decoration: none; color: var(--cft-ink); background: var(--cft-surface); }
.steps-first .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--cft-soft); font-weight: 700; }
.steps-first .done .n { background: var(--cft-success-bg); color: var(--cft-success); }
.notice-row { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--cft-border); }
.notice-row.unread { background: var(--cft-soft); }
.row-current td { background: var(--cft-soft); }
details.change-req > summary, details.names > summary { list-style: none; cursor: pointer; }
details.change-req > summary::-webkit-details-marker { display: none; }
@media print { .con-side, .con-top, .tabbar, [data-print], .seg { display: none !important; } }

/* R3 Book for a guest. */
.book-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; flex-wrap: wrap; }
.book-steps li { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: var(--cft-r-pill); background: var(--cft-surface-2); color: var(--cft-muted); font-size: var(--cft-fs-sm); }
.book-steps li span { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--cft-surface); font-weight: 700; font-size: 11px; }
.book-steps li.cur { background: var(--cft-primary); color: var(--cft-on-primary); }
.book-steps li.done { color: var(--cft-ink); }
@container app (max-width: 640px) { .book-steps li:not(.cur) { display: none; } }
.book-tours { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.book-tour { text-decoration: none; color: var(--cft-ink); overflow: hidden; }
.book-tour img { width: 100%; height: 120px; object-fit: cover; display: block; }
.week-nav { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 6px; }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
@container app (max-width: 640px) { .week-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.week-strip .day { display: grid; gap: 4px; align-content: start; }
.week-strip .dname { font-size: var(--cft-fs-xs); font-weight: 700; color: var(--cft-muted); }
.week-strip .slot { display: block; cursor: pointer; }
.week-strip .slot input { position: absolute; opacity: 0; pointer-events: none; }
.week-strip .slot span { display: block; padding: 8px; border: 1px solid var(--cft-border-strong); border-radius: var(--cft-r-sm); text-align: center; font-size: var(--cft-fs-sm); background: var(--cft-surface); }
.week-strip .slot input:checked + span { border-color: var(--cft-primary); background: var(--cft-soft); font-weight: 700; }
.week-strip .slot input:focus-visible + span { outline: 2px solid var(--cft-primary); }
.week-strip .slot.sold span { text-decoration: line-through; color: var(--cft-muted); cursor: not-allowed; }
.guest-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--cft-border); }
.guest-row:first-child { border-top: 0; }
.pay-choices label.choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--cft-border-strong); border-radius: var(--cft-r-sm); margin-bottom: 8px; cursor: pointer; }
.pay-choices label.choice:has(input:checked) { border-color: var(--cft-primary); background: var(--cft-soft); }
.pay-choices label.off { opacity: .6; cursor: not-allowed; }

/* Operations (C2-C9, mockups admin-bookings/-manifest/...): the totals line,
   key-value cards, the timeline, the detail grid, origin, the "new" dot. */
.totals { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--cft-border); font-size: var(--cft-fs-sm); font-variant-numeric: tabular-nums; }
.totals b { font-weight: 700; }
.origin { display: inline-flex; align-items: center; gap: 5px; font-size: var(--cft-fs-xs); font-weight: 600; white-space: nowrap; }
.det { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@container app (max-width: 1199.98px) { .det { grid-template-columns: minmax(0, 1fr); } }
.kv > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 9px 20px; border-top: 1px solid var(--cft-border); font-size: var(--cft-fs-sm); overflow-wrap: anywhere; }
.kv > div > span:first-child { color: var(--cft-muted); }
@container app (max-width: 575.98px) { .kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.tl { list-style: none; margin: 0; padding: 4px 20px 14px; font-size: var(--cft-fs-sm); }
.tl li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px dashed var(--cft-border); }
.tl li:first-child { border-top: 0; }
.tl time { color: var(--cft-muted); font-variant-numeric: tabular-nums; }
.new-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cft-accent); margin-right: 6px; vertical-align: middle; }
.pager .per-page { margin: 0 0 0 auto; }
.pager .per-page .form-select { width: auto; }
.day-switch { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.day-switch input[type="date"] { width: 10.5em; }
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.strip .card-body { padding: 14px 16px; }
.strip .v { font: 700 var(--cft-fs-xl)/1.15 var(--cft-sans); font-variant-numeric: tabular-nums; }
.dep-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.dep-head time { font: 700 var(--cft-fs-lg) var(--cft-sans); font-variant-numeric: tabular-nums; }
.bk { border-top: 1px solid var(--cft-border); padding: 12px 20px; }
.bk-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.bk-head .r { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.guest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--cft-fs-sm); }
.guest-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.steps-v { list-style: none; margin: 0; padding: 0; }
.steps-v > li { padding: 14px 20px; border-top: 1px solid var(--cft-border); }
.steps-v > li:first-child { border-top: 0; }
.steps-v .done-mark { color: var(--cft-success); }
.msg-body { white-space: pre-line; overflow-wrap: anywhere; font-size: var(--cft-fs-md); line-height: 1.6; }
.tour-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
@media print { .day-switch, .bk-head .r, .page-head .r { display: none !important; } .bk { break-inside: avoid; } }

/* Media library (M1-M7, mockup media-library.html). */
.dep { margin-bottom: 22px; }
.dep .sub, .sub { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 10px; font-size: var(--cft-fs-sm); color: var(--cft-muted); }
.counts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tile .ph.no-thumb { display: grid; place-items: center; color: var(--cft-muted); font-size: 28px; }
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.album { text-decoration: none; color: var(--cft-ink); display: grid; gap: 2px; }
.album .cv { aspect-ratio: 4/3; border-radius: var(--cft-r-md); background: var(--cft-surface-2) center / cover; margin-bottom: 6px; display: grid; place-items: center; color: var(--cft-muted); font-size: 32px; }
.album b { display: block; } .album small { color: var(--cft-muted); display: block; }
.viewer { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@container app (max-width: 1023.98px) { .viewer { grid-template-columns: minmax(0, 1fr); } }
.stage { position: relative; background: #0d1512; border-radius: var(--cft-r-lg); overflow: hidden; display: grid; place-items: center; min-height: 200px; }
.stage img, .stage video { width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.stage .nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.45); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; }
.stage .nav.l { left: 10px; } .stage .nav.r { right: 10px; }
.deps { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.deps .dep-pick { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--cft-border); border-radius: var(--cft-r-md); color: var(--cft-ink); background: var(--cft-surface); text-align: left; font: inherit; cursor: pointer; }
.deps .dep-pick:hover, .deps .dep-pick:focus-visible { border-color: var(--cft-primary); box-shadow: 0 0 0 2px var(--cft-primary); }
.deps time { font-weight: 700; font-size: var(--cft-fs-lg); }
.up-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--cft-border); font-size: var(--cft-fs-sm); }
.up-row .th { width: 48px; height: 48px; border-radius: 6px; background: var(--cft-surface-2) center / cover; }
.steps3 { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; font-size: var(--cft-fs-xs); }
.steps3 span { padding: 4px 10px; border-radius: var(--cft-r-pill); background: var(--cft-surface-2); color: var(--cft-muted); }
.steps3 span[aria-current] { background: var(--cft-primary); color: var(--cft-on-primary); font-weight: 600; }
.grp { margin-bottom: 16px; }

/* Site images (1.1.0): the library grid, the picture field in forms, the picker dialog. */
.img-upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.img-upload .field { flex: 1 1 280px; }
.img-grid { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.img-tile { display: grid; gap: 6px; width: 100%; padding: 6px; border: 1px solid var(--cft-border); border-radius: var(--cft-r-md); background: var(--cft-surface); color: var(--cft-ink); text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.img-tile:hover, .img-tile:focus-visible { border-color: var(--cft-focus); }
.img-tile-thumb { display: block; width: 100%; aspect-ratio: 10 / 7; height: auto; object-fit: cover; border-radius: var(--cft-r-sm); background: var(--cft-surface-2); }
.img-tile-off { display: grid; place-items: center; color: var(--cft-muted); font-size: 28px; }
.img-tile-name { font-size: var(--cft-fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-tile-meta:empty { display: none; }
.img-focal { position: relative; }
.img-focal img { display: block; width: 100%; height: auto; border-radius: var(--cft-r-sm); }
.img-focal-dot { position: absolute; left: var(--fx); top: var(--fy); width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 3px solid var(--cft-surface); border-radius: 50%; background: var(--cft-accent); box-shadow: var(--cft-shadow); }
.stack-form { display: grid; gap: 12px; }
.stack-form .field { margin: 0; }
.plain-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.img-field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.img-field-preview { width: 160px; height: 100px; object-fit: cover; border-radius: var(--cft-r-sm); border: 1px solid var(--cft-border); background: var(--cft-surface-2); }
.img-field-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.img-picker { width: min(920px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--cft-border); border-radius: var(--cft-r-lg); background: var(--cft-surface); color: var(--cft-ink); box-shadow: var(--cft-shadow-lg); }
.img-picker::backdrop { background: var(--cft-scrim); }
.img-picker-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--cft-border); }
.img-picker-head h2 { margin: 0; font-size: var(--cft-fs-lg); }
.img-picker-head .btn { margin-left: auto; }
.img-picker-tools { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px 0; }
.img-picker-tools .form-control { flex: 1 1 240px; }
.img-picker-upload { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.img-picker-status { margin: 8px 18px 0; min-height: 1.2em; }
.img-picker-grid { overflow: auto; max-height: calc(100dvh - 220px); }
.img-pick-more { text-align: center; margin: 0 0 16px; }