/* Victor & Kristen — site styles
   Layout: full-bleed photo hero, then a centered 1100px column; evening palette committed to a single dark look.
   Color: deep olive ground, warm charcoal surfaces, ivory text, dusty rose / mauve accents, champagne & gold details.
   Type: Cormorant Garamond (names, headings) + Figtree (everything readable). */
:root {
  color-scheme: dark;
  --olive-950: #171c15;
  --olive-900: #1f261c;
  --olive-800: #28311f;
  --olive-700: #37432f;
  --olive-500: #6e7b5f;
  --charcoal: #2a2b27;
  --charcoal-2: #35362f;
  --ivory: #f3ecdf;
  --ivory-2: #d9d1c1;
  --ivory-3: #aaa394;
  --rose: #d1a3a9;
  --rose-deep: #b07e86;
  --mauve: #9c7f90;
  --champagne: #e6d3ab;
  --gold: #c8a964;
  --gold-line: rgba(200, 169, 100, 0.45);
  --crystal: rgba(243, 236, 223, 0.08);
  --bg: var(--olive-900);
  --fg: var(--ivory);
  --surface: var(--olive-800);
  --surface-2: var(--charcoal);
  --line: rgba(230, 211, 171, 0.22);
  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --body: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --maxw: 1100px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --radius: 6px;
}

* { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 300;
  min-height: 100%;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--olive-950); }
img { max-width: 100%; display: block; }
a { color: var(--champagne); text-underline-offset: 3px; }
a:hover { color: var(--ivory); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; color: var(--ivory); }
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); letter-spacing: 0.01em; }
h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); }
p { margin: 0; }
strong { font-weight: 600; color: var(--ivory); }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- type helpers ---- */
.eyebrow { font-family: var(--body); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rose); }
.lede { font-size: 1.15rem; color: var(--ivory-2); max-width: 36em; }
.muted { color: var(--ivory-3); }
.amp { font-style: italic; font-weight: 300; color: var(--rose); padding: 0 0.12em; }
.serif { font-family: var(--display); }

/* ---- layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 0.6rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); max-width: 40em; }
.grid { display: grid; gap: 1.25rem; }
.grid > * { min-width: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); } }

/* crystal divider: a hairline with a small facet in the middle */
.divider { display: flex; align-items: center; gap: 0.9rem; color: var(--gold); margin-block: 0.4rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.divider::after { background: linear-gradient(90deg, var(--gold-line), transparent); }
.divider svg { width: 12px; height: 12px; fill: var(--gold); }

/* ---- header / nav ---- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(23, 28, 21, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(230, 211, 171, 0.14); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.brand { font-family: var(--display); font-size: 1.35rem; letter-spacing: 0.04em; color: var(--ivory); text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.1em; }
.brand .amp { font-size: 1.1em; }
.nav { display: flex; gap: clamp(0.9rem, 2vw, 1.8rem); align-items: center; }
.nav a { font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ivory-2); font-weight: 500; padding: 0.4rem 0; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--ivory); }
.nav a[aria-current="page"] { color: var(--champagne); border-bottom-color: var(--gold); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--ivory); border-radius: var(--radius); padding: 0.45rem 0.7rem; font: inherit; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--olive-950); border-bottom: 1px solid var(--line); padding: 0.4rem var(--gutter-r) 0.8rem var(--gutter-l); }
  .nav.open { display: flex; }
  .nav a { padding: 0.9rem 0.2rem; border-bottom: 1px solid rgba(230, 211, 171, 0.1); font-size: 0.95rem; }
  .nav a[aria-current="page"] { border-bottom-color: rgba(230, 211, 171, 0.1); }
}

/* ---- hero ---- */
.hero { position: relative; isolation: isolate; min-height: min(78vh, 760px); display: grid; align-items: end; overflow: hidden; background: var(--olive-950); }
.hero img, .hero .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(23,28,21,0.25) 0%, rgba(23,28,21,0.05) 35%, rgba(23,28,21,0.55) 70%, rgba(31,38,28,0.96) 100%); }
.hero .wrap { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.4rem, 5vw, 3.6rem); display: grid; gap: 0.9rem; }
.hero h1 { font-weight: 300; }
.hero h1 .amp { font-size: 0.9em; }
.hero .date { font-family: var(--display); font-size: clamp(1.3rem, 2.6vw, 1.75rem); letter-spacing: 0.08em; color: var(--champagne); }
.hero .place { color: var(--ivory-2); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.82rem; font-weight: 500; }
.page-hero { min-height: 0; }
.page-hero .wrap { padding-block: clamp(3rem, 7vw, 5rem) clamp(1.8rem, 4vw, 2.6rem); }
.page-hero h1 { font-size: clamp(2.3rem, 5.5vw, 3.8rem); }

/* image placeholder (until the real photos arrive) */
.ph { background: radial-gradient(120% 90% at 70% 20%, #4a5a3f 0%, #2b3626 45%, #1b2219 100%); position: relative; color: var(--ivory-3); display: grid; place-items: center; text-align: center; overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 30% 80%, rgba(209,163,169,0.18), transparent 70%), radial-gradient(50% 40% at 80% 70%, rgba(230,211,171,0.12), transparent 70%); }
.ph span { position: relative; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.5rem 0.8rem; border: 1px dashed rgba(230,211,171,0.4); border-radius: var(--radius); background: rgba(23,28,21,0.35); }
.ph.tall { aspect-ratio: 4 / 5; }
.ph.wide { aspect-ratio: 3 / 2; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.35rem; border-radius: var(--radius); font: inherit; font-weight: 500; font-size: 0.88rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .15s, color .15s, border-color .15s; min-height: 46px; }
.btn-gold { background: var(--champagne); color: var(--olive-950); border-color: var(--champagne); }
.btn-gold:hover { background: #efe0bf; color: var(--olive-950); }
.btn-outline { background: transparent; color: var(--champagne); border-color: var(--gold-line); }
.btn-outline:hover { border-color: var(--champagne); color: var(--ivory); background: rgba(230,211,171,0.06); }
.btn-ghost { background: transparent; color: var(--ivory-2); border-color: transparent; padding-inline: 0.6rem; }
.btn-ghost:hover { color: var(--ivory); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---- cards ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 2.4vw, 1.8rem); display: grid; gap: 0.8rem; align-content: start; }
.card h3 { font-size: 1.55rem; }
.card .addr { color: var(--ivory-2); white-space: pre-line; }
.card .btn-row { margin-top: 0.4rem; }
.card-link { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.card-link:hover { border-color: var(--gold-line); color: inherit; }
.card-link .more { color: var(--champagne); font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 760px) { .detail { grid-template-columns: minmax(0, 1fr); } }
.detail dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45rem 1.2rem; margin: 0; }
.detail dt { color: var(--rose); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; padding-top: 0.25rem; }
.detail dd { margin: 0; color: var(--ivory-2); font-size: 1.05rem; }
.detail dd strong { font-weight: 500; }

/* ---- gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 0.9rem; }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--olive-950); border: 1px solid rgba(230,211,171,0.12); aspect-ratio: 4 / 5; position: relative; }
.gallery figure:nth-child(4n+1) { aspect-ratio: 3 / 2; grid-column: span 2; }
@media (max-width: 560px) { .gallery figure:nth-child(4n+1) { grid-column: span 2; } }
.gallery img, .gallery .ph { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.gallery button { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gallery button:focus-visible { outline: 2px solid var(--champagne); outline-offset: -4px; }
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(23,28,21,0.94); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) var(--gutter-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--gutter-l); }
.lightbox img, .lightbox .ph { max-width: 100%; max-height: 86vh; width: auto; height: auto; border-radius: var(--radius); }
.lightbox .ph { width: min(90vw, 900px); aspect-ratio: 3 / 2; }
.lightbox .close { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
.lightbox figcaption { color: var(--ivory-3); font-size: 0.9rem; margin-top: 0.6rem; text-align: center; }

/* ---- forms ---- */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.4rem; }
.field label, .field .label { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory-2); font-weight: 500; }
.input, .select, .textarea { width: 100%; font: inherit; font-size: 1.05rem; color: var(--ivory); background: var(--olive-950); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; min-height: 50px; }
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(230,211,171,0.15); }
.input::placeholder, .textarea::placeholder { color: var(--ivory-3); }
.row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.row-3 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 560px) { .row-2, .row-3 { grid-template-columns: minmax(0, 1fr); } }
.hint { font-size: 0.9rem; color: var(--ivory-3); }
.notice { border: 1px solid var(--line); border-left: 3px solid var(--rose); border-radius: var(--radius); padding: 0.9rem 1.1rem; background: rgba(42,43,39,0.6); color: var(--ivory-2); font-size: 0.98rem; }
.notice.gold { border-left-color: var(--gold); }
.notice.warn { border-left-color: #d9a066; }

/* party search results */
.results { display: grid; gap: 0.6rem; }
.party { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; text-align: left; font: inherit; color: var(--ivory); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.95rem 1.1rem; cursor: pointer; min-height: 56px; }
.party:hover { border-color: var(--gold-line); }
.party .who { font-size: 1.05rem; }
.party .n { color: var(--ivory-3); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

/* guest toggles */
.guests { display: grid; gap: 0.6rem; }
.guest { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem 1rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; }
.guest .name { font-size: 1.05rem; }
.guest .kind { color: var(--ivory-3); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.guest .input { grid-column: 1 / -1; min-height: 46px; padding-block: 0.6rem; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { all: unset; cursor: pointer; padding: 0.55rem 1.1rem; font: inherit; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory-2); min-width: 64px; text-align: center; min-height: 40px; display: inline-grid; place-items: center; }
.seg button[aria-pressed="true"] { background: var(--champagne); color: var(--olive-950); font-weight: 600; }
.seg button + button { border-left: 1px solid var(--line); }

/* steps */
.steps { display: flex; gap: 0.6rem; align-items: center; color: var(--ivory-3); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; flex-wrap: wrap; }
.steps b { color: var(--champagne); font-weight: 600; }
.steps i { font-style: normal; color: var(--gold); }

/* host dashboard */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
@media (max-width: 760px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: grid; gap: 0.2rem; }
.stat .k { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory-3); font-weight: 500; }
.stat .v { font-family: var(--display); font-size: 2.2rem; line-height: 1; color: var(--champagne); font-variant-numeric: tabular-nums; }
.stat .s { font-size: 0.85rem; color: var(--ivory-2); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid rgba(230,211,171,0.1); vertical-align: middle; }
th { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-3); font-weight: 500; background: var(--olive-950); }
tr:last-child td { border-bottom: none; }
td.num { font-variant-numeric: tabular-nums; text-align: right; }
.pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; border: 1px solid transparent; }
.pill.yes { background: rgba(110,123,95,0.35); color: #cfe0b8; border-color: rgba(110,123,95,0.6); }
.pill.no { background: rgba(176,126,134,0.25); color: var(--rose); border-color: rgba(176,126,134,0.5); }
.pill.pending { background: rgba(230,211,171,0.12); color: var(--champagne); border-color: var(--gold-line); }
.pill.late { background: rgba(217,160,102,0.18); color: #e8bd8c; border-color: rgba(217,160,102,0.5); }
.btn-sm { padding: 0.45rem 0.8rem; min-height: 36px; font-size: 0.75rem; }
.tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.tabs button { all: unset; cursor: pointer; padding: 0.7rem 1rem; font: inherit; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--champagne); border-bottom-color: var(--gold); }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 2.4rem 3rem; color: var(--ivory-3); font-size: 0.9rem; background: var(--olive-950); }
.site-footer .wrap { display: grid; gap: 0.6rem; text-align: center; justify-items: center; }
.site-footer .brand { font-size: 1.6rem; }
.site-footer a { color: var(--ivory-3); }
.site-footer .small { font-size: 0.8rem; letter-spacing: 0.08em; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- seating helper ---- */
.stat.over .v { color: var(--rose); }
.seat-toolbar { margin: 1.2rem 0 0.6rem; }
.seat-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.2rem; margin-top: 1rem; align-items: start; }
@media (max-width: 860px) { .seat-grid { grid-template-columns: minmax(0, 1fr); } }
.seat-left { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); display: grid; gap: 0.7rem; max-height: calc(100vh - 90px); overflow: auto; padding-right: 2px; }
@media (max-width: 860px) { .seat-left { position: static; max-height: 40vh; } }
.seat-left h3 { font-size: 1.3rem; }
.fam-list { display: grid; gap: 0.4rem; }
.fam { display: flex; align-items: center; gap: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--olive-500); border-radius: var(--radius); padding: 0.5rem 0.6rem 0.5rem 0.7rem; cursor: pointer; font-size: 0.93rem; min-height: 40px; user-select: none; }
.fam.k { border-left-color: var(--rose-deep); }
.fam.v { border-left-color: var(--olive-500); }
.fam:hover { border-color: var(--gold-line); }
.fam.selected { outline: 2px solid var(--champagne); background: rgba(230,211,171,0.12); }
.fam-name { flex: 1; min-width: 0; }
.fam-n { font-variant-numeric: tabular-nums; color: var(--champagne); font-weight: 600; font-size: 0.85rem; }
.fam-x { all: unset; cursor: pointer; color: var(--ivory-3); font-size: 1.1rem; line-height: 1; padding: 0 0.2rem; }
.fam-x:hover { color: var(--rose); }
.seat-right { display: grid; gap: 1.2rem; min-width: 0; }
.plan-wrap { background: var(--olive-950); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem; }
.plan { width: 100%; height: auto; display: block; font-family: var(--body); }
.plan .room { fill: none; stroke: var(--gold-line); stroke-width: 3; }
.plan .zone { fill: rgba(230,211,171,0.08); stroke: none; }
.plan .fixed { fill: rgba(230,211,171,0.22); stroke: none; }
.plan .door { fill: var(--olive-950); stroke: var(--gold-line); }
.plan .zlabel { fill: var(--ivory-2); font-size: 18px; font-weight: 600; letter-spacing: 2px; text-anchor: middle; }
.plan .tiny { fill: var(--ivory-3); font-size: 11px; text-anchor: middle; letter-spacing: 1px; }
.plan .tbl { cursor: pointer; }
.plan .tbl circle, .plan .tbl rect { fill: var(--olive-800); stroke: var(--ivory-3); stroke-width: 2; transition: fill .15s; }
.plan .tbl.part circle, .plan .tbl.part rect { fill: #4a4a35; stroke: var(--champagne); }
.plan .tbl.full circle, .plan .tbl.full rect { fill: #6a5c33; stroke: var(--gold); }
.plan .tbl.over circle, .plan .tbl.over rect { fill: #6b3a42; stroke: var(--rose); }
.plan .tbl:hover circle, .plan .tbl:hover rect { stroke: var(--ivory); stroke-width: 3; }
.plan .tname { fill: var(--ivory); font-size: 20px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.plan .tnum { fill: var(--ivory-2); font-size: 14px; text-anchor: middle; pointer-events: none; font-variant-numeric: tabular-nums; }
.table-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.8rem; }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem; display: grid; gap: 0.5rem; align-content: start; min-height: 120px; }
.tcard.head { grid-column: 1 / -1; border-color: var(--gold-line); }
.tcard.over { border-color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose); }
.tcard.target { cursor: copy; }
.tcard.target:hover, .tcard.drop { border-color: var(--champagne); background: rgba(230,211,171,0.08); }
.tcard-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tlabel { font: inherit; font-family: var(--display); font-size: 1.25rem; color: var(--ivory); background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 0.1rem 0.3rem; width: 7.5em; min-width: 0; }
.tcard.head .tlabel { width: 12em; }
.tlabel:hover, .tlabel:focus { border-color: var(--line); background: var(--olive-950); outline: none; }
.tcount { font-variant-numeric: tabular-nums; color: var(--ivory-2); font-size: 0.9rem; white-space: nowrap; }
.tcount.bad { color: var(--rose); font-weight: 600; }
.tcap { font: inherit; font-size: 0.9rem; width: 2.6em; color: var(--ivory-2); background: transparent; border: 1px solid transparent; border-radius: 4px; text-align: center; padding: 0.05rem 0.1rem; -moz-appearance: textfield; }
.tcap::-webkit-inner-spin-button { display: none; }
.tcap:hover, .tcap:focus { border-color: var(--line); background: var(--olive-950); outline: none; }
.tcard-body { display: grid; gap: 0.3rem; }
.tcard-body .fam { padding: 0.35rem 0.5rem 0.35rem 0.6rem; min-height: 34px; font-size: 0.88rem; }
.tcard-foot { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ivory-3); }
.tcard.over .tcard-foot { color: var(--rose); }

/* print views */
#print-area { display: none; }
body.printing > *:not(#print-area) { display: none !important; }
body.printing { background: #fff; color: #111; }
body.printing #print-area { display: block; position: fixed; inset: 0; overflow: auto; background: #fff; color: #111; padding: 24px; z-index: 100; font-family: var(--body); font-weight: 400; }
#print-area .print-close { position: sticky; top: 0; float: right; }
#print-area .print-head h1 { font-family: var(--display); font-size: 1.6rem; color: #111; }
#print-area .print-head p { color: #444; margin-bottom: 1rem; }
#print-area .plan.print { max-width: 900px; margin: 0 auto 1rem; background: #fff; }
#print-area .plan.print .room { stroke: #333; } #print-area .plan.print .zone { fill: #f1ecdd; } #print-area .plan.print .fixed { fill: #e6dcc0; } #print-area .plan.print .door { fill: #fff; stroke: #333; }
#print-area .plan.print .zlabel, #print-area .plan.print .tiny { fill: #333; }
#print-area .plan.print .tbl circle, #print-area .plan.print .tbl rect { fill: #fff; stroke: #333; }
#print-area .plan.print .tname { fill: #111; } #print-area .plan.print .tnum { fill: #444; }
#print-area .print-cols { column-count: 3; column-gap: 24px; font-size: 12px; }
@media (max-width: 760px) { #print-area .print-cols { column-count: 1; } }
#print-area .pt { break-inside: avoid; margin-bottom: 10px; border-top: 1px solid #ccc; padding-top: 4px; }
#print-area .pt b { font-size: 14px; } #print-area .pt span { color: #666; } #print-area .pt i { color: #666; font-style: normal; }
#print-area .pt ol { margin: 2px 0 0; padding-left: 18px; }
#print-area table.checkin { width: 100%; border-collapse: collapse; font-size: 12px; }
#print-area table.checkin th { background: #eee; color: #111; font-size: 11px; }
#print-area table.checkin td, #print-area table.checkin th { border-bottom: 1px solid #ddd; padding: 4px 8px; color: #111; }
#print-area table.checkin tr.letter td { border-top: 2px solid #333; }
#print-area .print-note { color: #888; font-size: 10px; margin-top: 12px; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; }
  .site-header, .site-footer, main > .hero { display: none !important; }
  #print-area { position: static !important; padding: 0 !important; }
  #print-area .print-close { display: none; }
  #print-area .print-cols { column-count: 3; }
}