/* MONARTSPACE booking — unified lotus neutrals and one brand accent, confirmed 2026-10-25. */
:root {
  --paper: #f4f0ef;
  --paper-deep: #e6e4e3;
  --surface: #fcfaf9;
  --ink: #1c1c1c;
  --body: #4d4d4d;
  --muted: #6f6865;
  --line: #d5ccca;
  --field-line: #958984;
  --accent: #984638;
  --accent-hover: #7a3a2e;
  /* Opaque tint stays the same on every surface instead of accumulating pink layers. */
  --accent-soft: #eee7e5;
  --danger: var(--accent);
  --focus: var(--accent);
  --font-sans: "DM Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--body); scroll-padding-top: 24px; }
body { margin: 0; min-width: 0; min-height: 100dvh; overflow-x: hidden; background: var(--paper); font-family: var(--font-sans); font-size: 16px; line-height: 1.8; letter-spacing: .025em; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
/* Focus shares the existing edge; never add a separated second frame. */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
a:focus-visible, summary:focus-visible { outline: none; color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.brand-logo:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
[hidden], .progress[hidden], .step[hidden], .completion[hidden] { display: none !important; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 20; padding: 10px 18px; background: var(--ink); color: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); color: #fff; }
.brand-note { margin: 0; padding: 7px 20px; background: var(--paper-deep); text-align: center; font-size: 11px; letter-spacing: .09em; line-height: 1.8; }
.brand-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 82px; padding: 16px clamp(20px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.brand-home { justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-width: 44px; min-height: 44px; font-size: 13px; text-decoration: none; }
.brand-home-arrow { font-size: 21px; line-height: 1; }
.brand-logo { display: flex; align-items: center; min-height: 44px; }
.brand-logo img { display: block; width: 185px; height: auto; }
.brand-section { justify-self: end; font-size: 11px; letter-spacing: .14em; }
.page { width: min(100%, 1120px); margin: 0 auto; padding: 0 40px 64px; }
.masthead { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 48px; align-items: end; padding: 56px 0 44px; border-bottom: 1px solid var(--line); }
.eyebrow, .step-kicker, .plan-kicker { color: var(--accent); font-size: 11px; font-weight: 500; line-height: 1.6; letter-spacing: .14em; }
.eyebrow { margin: 0 0 16px; }
h1, h2, h3 { font-family: var(--font-sans); color: var(--ink); font-weight: 500; }
h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.3; letter-spacing: .045em; }
h2 { margin: 7px 0 12px; font-size: clamp(22px, 2.5vw, 28px); line-height: 1.5; letter-spacing: .025em; }
h3 { line-height: 1.6; }
.intro { max-width: 620px; margin: 20px 0 0; font-size: 14px; line-height: 1.9; }
.venue-contact { border-left: 1px solid var(--line); padding-left: 28px; margin: 0; font-size: 13px; line-height: 1.9; }
.venue-contact .contact-label { display: block; margin: 0 0 8px; color: var(--muted); font-size: 10px; letter-spacing: .14em; }
.venue-contact .contact-note { display: block; margin: 5px 0 12px; color: var(--muted); font-size: 12px; }
.venue-contact a { overflow-wrap: anywhere; }
.account-panel { margin: 32px 0; padding: 28px 32px 22px; border: 1px solid var(--line); background: var(--surface); }
#login-options { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; align-items: center; }
.account-panel h2 { margin-top: 5px; font-size: 22px; }
.account-panel .step-copy { max-width: 360px; font-size: 14px; }
.account-panel .actions { margin-top: 0; }
.login-actions .actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.account-panel .helper { font-size: 12px; }
#login-status { display: flex; align-items: flex-start; gap: 10px; width: fit-content; max-width: 100%; margin: 20px 0 0; padding: 10px 14px; border: 0; background: var(--accent-soft); color: var(--body); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
#login-status::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; background: var(--muted); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M10 5.5v2m0 2v5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; }
#login-status[data-state="success"]::before { background: var(--accent); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.5 5.5 8 14l-4.5-4.5' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; }
#login-status[data-state="loading"]::before { border: 1px dotted var(--muted); border-radius: 50%; background: transparent; mask: none; }
#login-status[data-state="error"] { color: var(--muted); }
#login-status:empty { display: none; }
#session-retry { margin-top: 12px; }
#booking-account:has(> #account-summary:not([hidden])) { margin: 0 0 24px; padding: 0; border: 0; background: transparent; }
#account-summary { display: block; }
.account-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; min-height: 44px; padding: 10px 0 14px; border-bottom: 1px solid var(--line); list-style: none; cursor: pointer; }
.account-toolbar::-webkit-details-marker { display: none; }
.account-identity { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.account-label { color: var(--muted); font-size: 12px; }
#account-name { color: var(--body); font-size: 13px; overflow-wrap: anywhere; min-width: 0; }
.account-settings-label { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 44px; color: var(--body); font-size: 12px; white-space: nowrap; }
.account-chevron { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
#account-summary[open] .account-chevron { transform: translateY(2px) rotate(225deg); }
.account-toolbar:hover .account-settings-label, .account-toolbar:focus-visible .account-settings-label { color: var(--accent); text-decoration: underline; text-underline-offset: .25em; }
.account-toolbar:focus-visible { outline: none; text-decoration: none; }
.account-toolbar:focus-visible .account-settings-label { text-decoration-thickness: 2px; }
#account-note { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.account-settings-body { padding: 8px 0 20px; border-bottom: 1px solid var(--line); }
#account-summary .account-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin: 0; gap: 8px 24px; }
.account-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--body); font-size: 13px; line-height: 1.8; text-decoration: underline; text-underline-offset: .25em; }
.account-link:hover, .account-link:focus-visible { color: var(--accent); }
.account-link:focus-visible { outline: none; text-decoration-thickness: 2px; }
/* A verified account already communicates login success; keep the live announcement accessible. */
#booking-account:has(> #account-summary:not([hidden])) #login-status[data-state="success"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.notification-copy { min-width: 0; }
#link-line-notifications { min-height: 44px; padding: 10px 16px; font-size: 13px; }
#notification-settings { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); scroll-margin-block: 24px; }
#notification-settings:focus { outline: none; border-top-color: var(--accent); }
#line-notification-note, #line-notification-detail { max-width: 62ch; margin: 8px 0 0; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
#line-notification-note { color: var(--body); }
#line-notification-detail { margin-top: 4px; }
#line-link-status { grid-column: 1 / -1; margin: 0; padding: 12px 16px; border-left: 2px solid var(--accent); background: var(--accent-soft); font-size: 13px; overflow-wrap: anywhere; }
.progress { display: grid; grid-template-columns: repeat(3, 1fr); margin: 32px 0 36px; border-block: 1px solid var(--line); }
.progress > span { padding: 16px 12px; text-align: center; color: var(--muted); font-size: 13px; letter-spacing: .06em; border-right: 1px solid var(--line); border-bottom: 2px solid transparent; }
.progress > span:last-child { border-right: 0; }
.progress > .active { color: var(--accent); background: var(--accent-soft); border-bottom-color: var(--accent); font-weight: 500; }
.step-head { margin-bottom: var(--space-4); }
.step { scroll-margin-block-start: 8px; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; color: var(--accent); }
.step-kicker { margin: 0; }
.step-copy { margin: 0; color: var(--body); font-size: 14px; }
.step-copy strong { color: var(--ink); font-weight: 600; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.plan-card { position: relative; display: flex; flex-direction: column; min-height: 272px; padding: 28px 32px; color: var(--body); text-align: left; border: 1px solid var(--line); border-radius: 0; background: transparent; transition: border-color 160ms ease, background 160ms ease; }
.plan-card::after { content: "↗"; position: absolute; right: 28px; bottom: 28px; color: var(--accent); font-size: 25px; line-height: 1; }
.plan-card:not(:disabled):hover, .plan-card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.plan-card:disabled { cursor: not-allowed; background: var(--paper-deep); }
.plan-card:disabled::after { color: var(--muted); }
.plan-kicker { display: block; margin-bottom: 10px; text-transform: uppercase; }
.plan-name { display: block; color: var(--ink); font-size: 24px; font-weight: 500; letter-spacing: .02em; }
.plan-time { display: block; margin: 16px 0 24px; color: var(--body); font-size: 14px; }
.plan-price { display: block; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.9; font-variant-numeric: tabular-nums; }
.notice { margin-top: 20px; padding: 14px 18px; border-left: 2px solid var(--accent); background: var(--accent-soft); color: var(--body); font-size: 13px; line-height: 1.9; }
#form-line-notification { display: grid; gap: 16px; margin: 0 0 32px; padding: 28px 32px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface); }
#form-line-copy { max-width: 72ch; margin: 0; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
#form-link-line { justify-self: start; width: auto; min-height: 48px; }
#form-line-link-status { max-width: 72ch; margin: 0; font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
#line-link-window { max-width: 680px; }
.line-window-card { margin-top: 40px; padding: clamp(24px, 5vw, 40px); }
.line-window-card h1 { margin: 12px 0 20px; font-size: clamp(24px, 4vw, 32px); font-weight: 500; }
.line-window-card .step-copy { max-width: none; line-height: 1.9; }
.line-window-card .actions { margin-top: 24px; }
.status { margin: 16px 0; padding: 12px 16px; border-left: 2px solid var(--accent); background: var(--accent-soft); color: var(--body); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.status:empty, .helper:empty { display: none; }
.status[role="alert"], [role="alert"].helper { color: var(--danger); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.calendar-toolbar { margin-bottom: var(--space-3); padding-top: 8px; text-align: center; }
.calendar-caption { margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: .12em; }
.calendar-navigation { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; width: min(100%, 336px); margin-inline: auto; border: 1px solid var(--line); background: var(--surface); }
.calendar-arrow { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0; color: var(--accent); background: transparent; transition: color 160ms ease, background 160ms ease; }
.calendar-arrow:not(:disabled):hover { color: var(--accent-hover); background: var(--accent-soft); }
.calendar-arrow:disabled { color: var(--line); cursor: not-allowed; }
.calendar-direction { width: 8px; height: 8px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.calendar-direction-prev { transform: translateX(2px) rotate(45deg); }
.calendar-direction-next { transform: translateX(-2px) rotate(225deg); }
.calendar-month-field { position: relative; min-width: 0; border-inline: 1px solid var(--line); }
.calendar-month-field select { display: block; appearance: none; -webkit-appearance: none; min-height: 48px; padding: 10px 30px 10px 12px; border: 0; background: transparent; color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.6; letter-spacing: .035em; text-align: center; text-align-last: center; font-variant-numeric: tabular-nums; cursor: pointer; transition: color 160ms ease, background 160ms ease; }
.calendar-month-field select:hover { color: var(--accent); background: var(--accent-soft); }
.calendar-month-chevron { position: absolute; top: calc(50% - 5px); right: 14px; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); color: var(--accent); pointer-events: none; }
.calendar-navigation button:focus-visible, .calendar-navigation select:focus-visible { outline: none; color: #fff; background: var(--accent); }
.calendar-month-field:has(select:focus-visible) .calendar-month-chevron { color: #fff; }
#calendar-range { margin: 14px 0 0; font-size: 12px; line-height: 1.8; text-wrap: balance; overflow-wrap: anywhere; }
#availability-retry { margin-bottom: 16px; }
.day { min-width: 0; min-height: 98px; padding: 12px 10px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--ink); text-align: left; }
.day:not(:disabled):not([aria-pressed="true"]):hover { background: var(--accent-soft); }
.day:disabled { cursor: not-allowed; color: var(--muted); background: var(--paper-deep); }
.day[aria-pressed="true"] { color: #fff; background: var(--accent); }
.day-date { display: block; font-size: 21px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.day-meta { display: block; margin-top: 7px; font-size: 11px; line-height: 1.6; }
.slot-panel { min-height: 152px; margin-top: 24px; padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.slot-panel h3 { margin: 0 0 8px; font-size: 18px; }
.slot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.slot { min-height: 52px; padding: 12px 16px; border: 1px solid var(--field-line); border-radius: 0; background: transparent; color: var(--ink); }
.slot:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--accent); background: var(--accent-soft); }
.slot[aria-pressed="true"] { color: #fff; border-color: var(--accent); background: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 24px; border: 1px solid var(--accent); border-radius: 0; color: #fff; background: var(--accent); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.7; transition: background 160ms ease, border-color 160ms ease; }
.button:not(:disabled):hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.button.secondary, .button.line-login { color: var(--ink); border-color: var(--field-line); background: transparent; }
.button.secondary:not(:disabled):hover, .button.line-login:not(:disabled):hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.button:not(.secondary):not(.line-login):focus-visible, .button[aria-pressed="true"]:focus-visible, .day[aria-pressed="true"]:focus-visible, .slot[aria-pressed="true"]:focus-visible { outline: none; color: #fff; border-color: var(--accent-hover); background: var(--accent-hover); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.button:disabled { cursor: not-allowed; color: var(--muted); border-color: var(--line); background: var(--paper-deep); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.field { min-width: 0; }
.field.full { grid-column: 1 / -1; }
label, legend { display: block; margin-bottom: 9px; color: var(--ink); font-weight: 500; font-size: 14px; }
input, select, textarea { width: 100%; min-width: 0; min-height: 52px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: 0; background: var(--surface); color: var(--ink); font-size: 16px; accent-color: var(--accent); }
textarea { min-height: 140px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--accent); }
.helper { display: block; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.field-error { color: var(--danger); }
.field-error:empty { display: none; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; margin: 0 0 32px; padding: 24px; border-block: 1px solid var(--line); background: var(--accent-soft); }
.summary div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 4px 0; }
.summary dt { color: var(--muted); font-size: 14px; }
.summary dd { margin: 0; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.summary .summary-amount { white-space: nowrap; overflow-wrap: normal; }
.rules { margin: 32px 0 0; padding: 28px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.rules > h3 { margin: 0 0 8px; font-size: 18px; text-wrap: balance; }
.rules a { color: var(--accent); }
.rules-intro { margin: 0 0 28px; color: var(--muted); }
.rules-overview { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; }
.rules-group { min-width: 0; }
.rules-group h4 { margin: 0 0 12px; color: var(--ink); font-size: 15px; font-weight: 500; }
.refund-summary { width: 100%; border-collapse: collapse; font-size: 14px; }
.refund-summary th, .refund-summary td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; }
.refund-summary thead th { padding-top: 0; color: var(--muted); font-size: 12px; font-weight: 400; }
.refund-summary tbody th { padding-right: 16px; font-weight: 400; }
.refund-summary th:last-child, .refund-summary td { text-align: right; white-space: nowrap; }
.refund-summary td { color: var(--accent); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.refund-summary .refund-none { color: var(--body); font-size: 14px; font-weight: 400; }
.rules-facts { display: grid; align-content: start; gap: 24px; }
.rules-group ul { margin: 0; padding-left: 20px; }
.rules-group li + li { margin-top: 6px; }
.rules-exception { margin: 24px 0 12px; padding: 14px 18px; border-left: 2px solid var(--accent); background: var(--accent-soft); }
.rules-exception strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; }
.rules-legal-note { margin: 0; color: var(--muted); font-size: 12px; }
.rules-review { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.terms-document { line-height: 1.9; font-size: 14px; overflow-wrap: anywhere; }
.terms-document h3 { margin: 24px 0 10px; font-size: 17px; }
.terms-document table { width: 100%; border-collapse: collapse; font-size: 13px; }
.terms-document th, .terms-document td { border: 1px solid var(--line); padding: 10px; text-align: left; }
.terms-document caption { text-align: left; padding-bottom: 8px; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px; margin: 22px 0 0; font-weight: 400; cursor: pointer; }
.check input { width: 20px; height: 20px; min-height: 20px; margin: 3px 0 0; }
.check:has(input:focus-visible) { background: var(--accent-soft); }
body.rules-open { overflow: hidden; }
.rules-dialog { width: min(760px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 0; color: var(--body); background: var(--surface); }
.rules-dialog::backdrop { background: rgb(28 28 28 / 55%); }
.rules-dialog[open] { display: flex; flex-direction: column; }
.rules-dialog-head, .rules-dialog-footer { flex: none; padding: 20px 28px; }
.rules-dialog-head { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.rules-dialog-head h2 { font-size: 22px; margin: 0; text-wrap: balance; }
.rules-close { margin-left: auto; min-height: 44px; min-width: 56px; padding: 8px 12px; border: 1px solid var(--field-line); border-radius: 0; background: transparent; color: var(--ink); font-size: 14px; white-space: nowrap; }
.rules-close:hover { color: var(--accent); border-color: var(--accent); }
.rules-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 28px 24px; line-height: 1.9; font-size: 14px; }
.rules-content:focus-visible { outline: none; background: var(--paper); }
.rules-content h3 { margin: 24px 0 12px; font-size: 18px; }
.rules-content .summary { margin-bottom: 24px; padding: 16px; }
.rules-content ul { padding-left: 24px; margin: 8px 0; }
.rules-content li + li { margin-top: 10px; }
.rules-content a { color: var(--accent); }
.rules-dialog-footer { border-top: 1px solid var(--line); }
.rules-dialog-footer .actions { margin-top: 16px; }
.rules-dialog-footer .helper { margin: 0 0 12px; }
.rules-dialog-footer .check { margin: 0; }
.rules-dialog-footer .rules-submit-status { margin: 12px 0 0; }
.rules-submit-status:empty { display: none; }
.rules .helper { margin-top: 12px; }
.completion { padding: 4px 0 32px; }
.completion:focus { outline: none; }
.completion-box { padding: clamp(24px, 5vw, 48px); border: 1px solid var(--line); border-top: 3px solid var(--accent); background: var(--surface); }
.completion h2 { margin-top: 12px; }
.completion p { max-width: 640px; }
.reference { margin-top: 24px; color: var(--ink) !important; font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.site-footer { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.site-footer p { margin: 0; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 760px) {
  .page { padding: 0 24px 40px; }
  .masthead { grid-template-columns: 1fr; gap: 24px; padding: 36px 0 28px; }
  .venue-contact { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  #login-options { grid-template-columns: 1fr; gap: 20px; }
  .account-panel { padding: 24px; }
  .account-panel .step-copy { max-width: none; }
  .account-toolbar { gap: 4px 16px; }
  .account-identity { flex-direction: column; gap: 2px; }
  #notification-settings { grid-template-columns: 1fr; gap: 16px; }
  #link-line-notifications { justify-self: start; width: auto; }
  .summary { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .brand-note { padding-inline: 12px; font-size: 10px; letter-spacing: .035em; }
  .brand-nav { min-height: 70px; padding: 12px 20px; }
  .brand-logo img { width: 154px; }
  .brand-home { gap: 0; }
  .brand-home-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .brand-section { font-size: 9px; letter-spacing: .06em; }
  .page { padding-inline: 20px; }
  .account-toolbar { grid-template-columns: 1fr; }
  .account-identity { flex-direction: row; }
  .account-settings-label { justify-self: start; min-height: 44px; }
  #account-note { grid-row: 2; }
  .intro { margin-top: 16px; }
  .venue-contact { margin-top: 0; }
  .progress { margin: 28px 0; }
  .progress > span { padding: 13px 4px; font-size: 12px; letter-spacing: 0; }
  .step-head { margin-bottom: var(--space-3); }
  .plan-grid, .form-grid, .slot-list { grid-template-columns: 1fr; }
  .plan-grid { gap: 16px; }
  .plan-card { min-height: 0; padding: 24px; }
  .plan-name { font-size: 23px; }
  .calendar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .day { min-height: 90px; padding: 10px 7px; }
  .day-date { font-size: 19px; }
  .day-meta { font-size: 10px; letter-spacing: 0; }
  .slot-panel, .rules, .summary { padding: 20px; }
  .slot-note { display: block; font-size: clamp(12px, 3.6vw, 14px); line-height: 1.7; letter-spacing: 0; white-space: nowrap; overflow-wrap: normal; }
  .slot:has(.slot-note) { padding-inline: 6px; }
  .summary .summary-slot-row { row-gap: 0; }
  .summary-slot-row dd { display: contents; }
  .summary-slot-row .slot-label { grid-column: 2; font-size: 14px; }
  .summary-slot-row .slot-note { grid-column: 1 / -1; color: var(--ink); }
  #form-line-notification { padding: 24px; margin-bottom: 28px; }
  #form-link-line { width: 100%; }
  .rules-overview { grid-template-columns: 1fr; gap: 28px; }
  .rules-dialog-head, .rules-dialog-footer { padding: 16px 20px; }
  .rules-dialog-head h2 { font-size: 18px; }
  .rules-content { padding: 4px 20px 20px; }
  .actions { flex-direction: column; }
  .button { width: 100%; }
  .rules-content .summary div { grid-template-columns: 60px minmax(0, 1fr); }
  .site-footer { flex-direction: column; gap: 12px; margin-top: 40px; }
}
@media (max-width: 360px) {
  .brand-nav { padding-inline: 16px; }
  .brand-logo img { width: 140px; }
  .page { padding-inline: 16px; }
  .account-panel { padding: 20px; }
  .day-meta { font-size: 10px; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

#login-status[data-state="error"]::before { display: none; }

/* Invoice preferences stay within the form rhythm; company fields are opt-in. */
.invoice-preferences { border-block: 1px solid var(--line); padding-block: 24px; }
.invoice-preferences h3 { margin: 0 0 8px; font-size: 18px; font-weight: 500; }
.invoice-preferences .helper { margin: 0; }
.invoice-preferences .invoice-option { margin: 16px 0 0; }
.invoice-company-fields { margin-top: 20px; }
.invoice-company-fields[hidden] { display: none; }
.invoice-details { margin: 20px 0; font-size: 14px; line-height: 1.8; }
.invoice-details > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; margin-block: 6px; }
.invoice-details dt { color: var(--muted); }
.invoice-details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .invoice-details > div { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } }