/* 3A Events app layer. Tokens from site.css only (design-principles I2); adds the app parts the website lacks
   (spec 11): inputs, choices, errors, status chips, tables, stepper, dialog, office shell. No left borders. */

/* App status tokens (design-principles v11: I2 "tokens are the only colors", C1 contrast, spec 11 "status chips with
   text + icon, never color alone"). Declared here because site.css is the website's file and has no status colors.
     --error    #b3261e  design-principles error token: white 6.54, page 5.59 (form errors, destructive buttons)
     --ok       #1f6f43  on --ok-bg #e4f2ea 5.33:1, on white 6.15:1 (office "ok" notices only)
     --warn     #8a5300  on --warn-bg #fbefd9 5.56:1, on white 6.33:1 (warning notices, offline banner, demo marks)
     --err-bg   #fbe7e5  pale error surface under --error text 5.50:1
   Status chips use the brand tokens instead, plus an icon: band on card 8.85:1, text on alt 11.81:1,
   text-2 on page 6.08:1, error on card 6.54:1. */
:root { --error: #b3261e; --ok: #1f6f43; --ok-bg: #e4f2ea; --warn: #8a5300; --warn-bg: #fbefd9; --err-bg: #fbe7e5; }

/* ---------- guest shell ---------- */
.app-header .brand { text-decoration: none; color: var(--text); }
.app-main { padding-block: 1.5rem 3rem; }
.app-main > .wrap > * + * { margin-top: 1.5rem; }
.app-foot { background: var(--card); border-top: 1px solid var(--line); padding-block: 1.25rem 1.5rem; font-size: 1rem; }
.app-foot p + p { margin-top: 0.25rem; }
.app-foot .foot-small { color: var(--text-2); font-size: 1rem; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-surface); box-shadow: var(--shadow-1); --elev: var(--shadow-1); padding: 1.25rem; }
/* hidden inputs are not blocks: the first visible child never gets a top margin */
.panel > :where(:not([type=hidden])) ~ :where(:not([type=hidden])) { margin-top: 1rem; }
@media (min-width: 40em) { .panel { padding: 2rem; } }
.lede { font-size: 1.375rem; line-height: 1.35; font-family: var(--display); }
.muted { color: var(--text-2); }
.eyebrow { font-weight: 700; color: var(--text-2); font-size: 1rem; letter-spacing: 0.03em; }
.event-facts { display: grid; gap: 0.5rem 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .event-facts { grid-template-columns: max-content minmax(0, 1fr); } }
.event-facts dt { font-weight: 700; }
.event-facts dd { margin: 0; }

.invite-hero { background: var(--band); color: var(--on-dark); border-radius: var(--r-surface); padding: 1.5rem; position: relative; overflow: clip; }
.invite-hero h1 { color: var(--on-dark); font-size: 2.1875rem; }
.invite-hero p { color: var(--on-dark); max-width: 30rem; }
.invite-hero a { color: var(--on-dark); }
.invite-hero [data-motif] { position: absolute; right: -2rem; bottom: -2rem; width: 10rem; height: 10rem; color: #ffffff; opacity: 1; }
@media (min-width: 40em) { .invite-hero { padding: 2.5rem; } .invite-hero [data-motif] { width: 14rem; height: 14rem; } }

/* ---------- forms ---------- */
/* minmax(0,1fr): a long file name or URL never widens the column past a 390 px screen (visual review 4) */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
.field + .field, fieldset + fieldset, .field + fieldset, fieldset + .field { margin-top: 1.25rem; }
label, legend { font-weight: 700; }
.hint { color: var(--text-2); font-weight: 400; font-size: 1rem; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=search], input[type=date], input[type=datetime-local], select, textarea {
  font: inherit; color: var(--text); background: #ffffff; border: 2px solid var(--line-strong); border-radius: var(--r-btn);
  padding: 0.625rem 0.75rem; min-height: 2.75rem; width: 100%; max-width: 28rem;
}
textarea { min-height: 6rem; }
/* file pickers (guest camera, photographer): the field and its button in the app's secondary button style */
input[type=file] { font: inherit; max-width: 100%; min-height: 2.75rem; padding: 0.5rem; border: 2px solid var(--line-strong); border-radius: var(--r-btn); background: #ffffff; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 700; min-height: 2.75rem; margin-right: 0.75rem; padding: 0.375rem 1rem;
  border: 2px solid var(--link); border-radius: var(--r-btn); background: #ffffff; color: var(--link); cursor: pointer;
}
input[type=file]::file-selector-button:hover { text-decoration: underline; text-underline-offset: 0.2em; }
input[type=file]:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
/* phone numbers never break at a hyphen (visual review 3); guest pages wrap every number in span.nowrap */
.nowrap { white-space: nowrap; }
input.code-input { font-size: 1.75rem; letter-spacing: 0.3em; max-width: 12rem; font-variant-numeric: tabular-nums; }
fieldset { border: 0; min-width: 0; }
legend { margin-bottom: 0.5rem; font-size: 1.125rem; }
.choices { display: grid; gap: 0.5rem; }
.choices.inline { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.choice { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 2px solid var(--line-strong); border-radius: var(--r-btn); background: #ffffff; font-weight: 400; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--band); background: #eef4f8; font-weight: 700; }
.choice input { width: 1.375rem; height: 1.375rem; accent-color: var(--band); flex: none; margin: 0; }
.field-error, .choice-error { color: var(--error); font-weight: 700; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--error); }
.error-summary { border: 3px solid var(--error); border-radius: var(--r-surface); background: #ffffff; padding: 1rem 1.25rem; }
.error-summary h2 { font-size: 1.375rem; color: var(--error); }
.error-summary ul { list-style: disc; padding-left: 1.25rem; margin-top: 0.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-top: 1.5rem; }
.btn { min-height: 2.75rem; cursor: pointer; }
.btn-quiet { background: transparent; border: 1px solid var(--line-strong); color: var(--text); }
/* destructive confirm (release, take me off the waitlist): warning style, never orange (spec 11); keep = a link */
.btn-danger { background: var(--error); border: 2px solid var(--error); color: #ffffff; }
.btn-danger:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 0.2em; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; font: inherit; }
form.inline { display: inline; }
.steps { font-weight: 700; color: var(--text-2); }

/* ---------- status ---------- */
/* chips and tags: the button radius token (I3, no pills); brand colors + an icon, never color alone */
.chip { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 700; font-size: 1rem; padding: 0.125rem 0.625rem; border-radius: var(--r-btn); border: 1px solid currentColor; white-space: nowrap; }
.chip::before { font-weight: 700; }
.chip-ok { color: var(--band); background: var(--card); } .chip-ok::before { content: "\2713"; }
.chip-wait { color: var(--text); background: var(--alt); } .chip-wait::before { content: "\25F7"; }
.chip-no { color: var(--text-2); background: var(--page); } .chip-no::before { content: "\2715"; }
.chip-err { color: var(--error); background: var(--card); } .chip-err::before { content: "!"; }
.chip-vip { color: #ffffff; background: var(--cta); border-color: var(--cta); } .chip-vip::before { content: "\2605"; }
.notice { background: #ffffff; border: 2px solid var(--band); border-radius: var(--r-surface); padding: 0.875rem 1rem; font-weight: 700; margin-bottom: 1rem; }
.notice.warn { border-color: var(--warn); }
.notice.err { border-color: var(--error); color: var(--error); }

/* ---------- pass ---------- */
.pass { text-align: center; }
.pass .qr { width: min(18rem, 80vw); height: auto; margin: 1rem auto; image-rendering: pixelated; background: #ffffff; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r-surface); }
.pass .who { font-family: var(--display); font-size: 1.75rem; font-weight: 700; }

/* ---------- stepper ---------- */
.stepper { display: inline-flex; align-items: center; gap: 0.5rem; }
.stepper button { min-width: 3rem; min-height: 3rem; font-size: 1.375rem; font-weight: 700; border-radius: var(--r-btn); border: 2px solid var(--line-strong); background: #ffffff; cursor: pointer; }
/* at a limit the button stays focusable (aria-disabled, spec 7.1) but reads as unavailable */
.stepper button[aria-disabled="true"] { background: var(--page); color: var(--text-2); border-style: dashed; cursor: not-allowed; }
.stepper input { width: 5rem; height: 3rem; min-height: 3rem; padding-block: 0; text-align: center; font-size: 1.375rem; }

/* ---------- office shell ---------- */
body.office { background: var(--page); }
.office-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64em) { .office-shell { grid-template-columns: 14rem minmax(0, 1fr); } }
.office-nav { background: var(--card); border-bottom: 1px solid var(--line); padding: 0.5rem 1rem; }
@media (min-width: 64em) { .office-nav { border-bottom: 0; border-right: 1px solid var(--line); min-height: calc(100vh - 5rem); padding: 1rem 0.75rem; } }
.office-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem; }
@media (min-width: 64em) { .office-nav ul { flex-direction: column; } }
.office-nav a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--r-btn); text-decoration: none; color: var(--text); font-size: 1rem; }
.office-nav a[aria-current="page"] { background: var(--band); color: #ffffff; font-weight: 700; }
.office-nav a:hover { text-decoration: underline; }
.office-main { padding: 1.5rem 1rem 3rem; min-width: 0; }
@media (min-width: 64em) { .office-main { padding: 2rem 2.5rem 4rem; } }
.office-main > * + * { margin-top: 1.5rem; }
.office-main h1 { font-size: 1.75rem; }
.who { font-weight: 700; margin-right: 0.75rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-surface); box-shadow: var(--shadow-1); --elev: var(--shadow-1); padding: 1rem; }
.stat b { display: block; font-family: var(--display); font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { color: var(--text-2); font-size: 1rem; }
.meter { height: 0.75rem; border-radius: var(--r-btn); background: var(--alt); border: 1px solid var(--line-strong); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--band); }
.meter > i.over { background: var(--error); }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-surface); box-shadow: var(--shadow-1); --elev: var(--shadow-1); }
table.data { width: 100%; font-size: 1rem; font-variant-numeric: tabular-nums; }
table.data caption { text-align: left; font-weight: 700; padding: 0.75rem 1rem; font-family: var(--display); font-size: 1.375rem; }
table.data th, table.data td { text-align: left; padding: 0.625rem 0.875rem; border-top: 1px solid var(--line); vertical-align: top; }
table.data thead th { background: var(--alt); font-size: 1rem; }
table.data td.num, table.data th.num { text-align: right; }
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; }
.filters .field { min-width: 10rem; }
.filters input, .filters select { max-width: 16rem; }

/* ---------- door ---------- */
body.door { background: var(--page); }
.door-result { text-align: center; }
.door-result .name { font-family: var(--display); font-size: 2.75rem; font-weight: 700; line-height: 1.1; }
.vip-banner { background: var(--cta); color: #ffffff; font-weight: 700; font-size: 1.375rem; padding: 0.75rem 1rem; border-radius: var(--r-btn); }
.offline-banner { position: sticky; top: 0; z-index: 40; background: var(--warn-bg); color: var(--warn); border-bottom: 2px solid var(--warn); padding: 0.5rem 1rem; font-weight: 700; }

/* ---------- screen (TV) ---------- */
body.screen { background: var(--band); color: #ffffff; min-height: 100vh; }
.screen-names { display: grid; gap: 2rem; padding: 4rem; }
.screen-names p { font-family: var(--display); font-size: 4rem; color: #ffffff; max-width: none; }
.room-code { position: fixed; right: 2rem; bottom: 2rem; font-size: 2.5rem; font-weight: 700; color: #ffffff; }

/* ---------- photos ---------- */
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; }
.album img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-btn); }

/* ---------- dialog ---------- */
dialog { border: 1px solid var(--line); border-radius: var(--r-surface); box-shadow: var(--shadow-2); padding: 1.5rem; max-width: 28rem; }
dialog::backdrop { background: rgb(16 42 67 / 0.45); }

@media (forced-colors: active) { .panel, .stat, .chip, .choice, .table-wrap, .notice { border: 1px solid CanvasText; } }
@media print { .app-header .tools, .app-foot, .actions, .skip { display: none !important; } .panel { box-shadow: none; border: 0; } }