/* Tsuki Usagi reservation widget — typography mirrors the menu (Cormorant Garamond + Helvetica) */
.tsuki-res,
.tsuki-res *,
.tsuki-res *::before,
.tsuki-res *::after {
    box-sizing: border-box;
}

.tsuki-res {
    --ink: #0a0a0a;
    --ink-soft: #1a1a1a;
    --paper: #ffffff;
    --paper-warm: #faf7f4;
    --accent: #a83232;          /* Japanese vermilion 朱色 — from the menu */
    --accent-ink: #7a1f24;      /* deeper for hover/active */
    --accent-soft: #f5e8e8;     /* very pale tint */
    --rule: #d8d8d8;
    --rule-soft: #ececec;
    --muted: #6a6a6a;
    --warn: #b45309;
    --warn-bg: #fff7ed;
    --ok: #166534;
    --ok-bg: #ecfdf5;
    --off-bg: #f3f4f6;
    --serif: 'Cormorant Garamond', 'Georgia', serif;
    --sans:  'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

    max-width: 620px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 36px 48px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.55;
    border: 1px solid var(--rule);
    border-radius: 2px;
}
/* Defensive: block themes (Twenty Twenty-Four etc.) inject layout constraints that
   can override our max-width. Re-assert it with higher specificity. */
.entry-content > .tsuki-res,
.wp-block-post-content > .tsuki-res,
div.tsuki-res {
    max-width: 620px;
}
.tsuki-res[x-cloak] { display: none; }

.tsuki-res__header { text-align: center; margin-bottom: 24px; }
.tsuki-res__brand {
    font-family: var(--serif); font-style: italic; font-size: 12px;
    letter-spacing: 0.4em; color: var(--accent); margin-bottom: 6px;
}
.tsuki-res__header h2 {
    font-family: var(--serif); font-weight: 600; font-size: 30px;
    letter-spacing: 0.12em; margin: 0 0 8px;
    line-height: 1.15;
}
.tsuki-res__header::after {
    content: ''; display: block; width: 36px; height: 1px;
    background: var(--accent); margin: 8px auto 0;
}
.tsuki-res__lead { font-size: 12px; letter-spacing: 0.1em; color: var(--muted); margin-top: 8px; }

/* Reset any theme-injected list markers / counters inside the widget.
   SWELL (and many WP themes) add `ol > li::before { content: counter()"." }`
   which made the step indicator render duplicated "1. 1  2. 2  3. 3". */
.tsuki-res ol,
.tsuki-res ul {
    list-style: none !important;
    counter-reset: none !important;
}
.tsuki-res ol > li,
.tsuki-res ul > li {
    list-style: none !important;
}
.tsuki-res ol > li::before,
.tsuki-res ul > li::before,
.tsuki-res ol > li::marker,
.tsuki-res ul > li::marker {
    content: none !important;
    display: none !important;
}

.tsuki-res__steps {
    display: flex; list-style: none; padding: 0; margin: 0 0 28px;
    border-bottom: 1px solid var(--rule);
    position: relative;
}
.tsuki-res__steps li {
    flex: 1; padding: 0; margin: 0; position: relative;
    color: var(--muted);
    transition: color .15s;
}
.tsuki-res__steps button {
    display: flex; align-items: baseline; justify-content: center; gap: 8px;
    padding: 12px 8px 14px; background: none; border: none; cursor: pointer;
    color: inherit; font-family: var(--sans); width: 100%;
    transition: background .15s;
}
.tsuki-res__steps button:disabled { cursor: default; }

.tsuki-res__steps .num {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: 15px; color: inherit; line-height: 1;
}
.tsuki-res__steps .lbl {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    font-weight: 600;
}

/* Upcoming step */
.tsuki-res__steps li .num { opacity: 0.55; }

/* Active step — vermilion, bold, with 3px bar that sits ON the bottom border */
.tsuki-res__steps li.is-active { color: var(--accent); }
.tsuki-res__steps li.is-active .num { opacity: 1; font-weight: 700; }
.tsuki-res__steps li.is-active .lbl { font-weight: 700; }
.tsuki-res__steps li.is-active::after {
    content: ''; position: absolute;
    left: 12px; right: 12px; bottom: -1px;
    height: 3px; background: var(--accent);
    border-radius: 2px;
}

/* Done step — ink color, clickable hover */
.tsuki-res__steps li.is-done { color: var(--ink); }
.tsuki-res__steps li.is-done .num { opacity: 1; }
.tsuki-res__steps li.is-done .num::before {
    content: '✓'; color: var(--accent); margin-right: 6px;
    font-style: normal; font-family: var(--sans); font-weight: 700;
}
.tsuki-res__steps li.is-done button:hover { background: var(--accent-soft); }

@media (max-width: 480px) {
    .tsuki-res__steps .lbl { font-size: 10px; letter-spacing: 0.16em; }
    .tsuki-res__steps button { padding: 10px 4px 12px; gap: 6px; }
}

.tsuki-res__panel {
    /* When we scrollIntoView on a panel after a step change, leave the
       theme's fixed header height untouched at the top. 80px default
       covers a typical mobile theme header before our JS measures one. */
    scroll-margin-top: var(--tu-header-offset, 80px);
}
.tsuki-res__panel h3 {
    font-family: var(--serif); font-size: 20px; letter-spacing: 0.04em;
    margin: 0 0 18px; font-weight: 600;
}
.tsuki-back-link {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; padding: 0 0 8px;
    color: var(--accent); font-size: 12px; letter-spacing: 0.06em;
    cursor: pointer; font-family: var(--sans); margin-bottom: 6px;
}
.tsuki-back-link:hover { color: var(--accent-ink); text-decoration: underline; }

/* Alpine transitions for guest accordion */
.tsuki-fade-enter { transition: opacity .18s ease, max-height .22s ease; overflow: hidden; }
.tsuki-fade-enter-start { opacity: 0; max-height: 0; }
.tsuki-fade-enter-end   { opacity: 1; max-height: 2000px; }
.tsuki-fade-leave { transition: opacity .12s ease, max-height .18s ease; overflow: hidden; }
.tsuki-fade-leave-start { opacity: 1; max-height: 2000px; }
.tsuki-fade-leave-end   { opacity: 0; max-height: 0; }
.tsuki-res__panel h3 small {
    font-family: var(--sans); font-size: 11px; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--muted); margin-left: 8px;
}
.tsuki-res__copy { color: var(--muted); margin: 0 0 18px; font-size: 14px; }

.tsuki-field { margin-bottom: 18px; }
.tsuki-field label {
    display: block; font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; margin-bottom: 6px; font-weight: 700; color: var(--ink);
}
.tsuki-field label small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.tsuki-field input[type=text],
.tsuki-field input[type=email],
.tsuki-field input[type=tel],
.tsuki-field input[type=date],
.tsuki-field textarea,
.tsuki-field select {
    width: 100%; padding: 10px 12px; font-size: 16px; font-family: var(--sans);
    border: 1px solid var(--rule); background: var(--paper); border-radius: 2px;
    color: var(--ink); display: block;
    /* font-size: 16px prevents Android Chrome from auto-zooming on focus,
       which can intercept the tap that opens the native picker. */
}
/* Date field is now a text input wired to flatpickr — keep the
   tap-affordance and a comfortable minimum width. */
.tsuki-field #tsuki-date {
    width: auto;
    min-width: 220px;
    min-height: 44px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
}

/* flatpickr calendar pop-up — note: flatpickr appends to <body>, OUTSIDE our
   .tsuki-res scope. So CSS variables defined on .tsuki-res don't reach it.
   Hard-code the colors to match the menu's vermilion palette. */
.flatpickr-calendar {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #a83232 !important;
    border-color: #a83232 !important;
    color: #ffffff !important;
}
.flatpickr-day.today {
    border-color: #a83232;
    color: #a83232;
}
.flatpickr-day.today:hover {
    background: #f5e8e8;
    color: #7a1f24;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: #f5e8e8;
    color: #7a1f24;
    border-color: #f5e8e8;
}
.flatpickr-day.flatpickr-disabled {
    color: #c4c4c4;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
    color: #0a0a0a;
    font-weight: 600;
}
.flatpickr-weekday {
    color: #6a6a6a;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: #6a6a6a;
    fill: #6a6a6a;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: #a83232;
    fill: #a83232;
}
.tsuki-field input:focus, .tsuki-field textarea:focus, .tsuki-field select:focus {
    outline: none; border-color: var(--ink);
}

.tsuki-party { display: flex; flex-wrap: wrap; gap: 6px; }
.tsuki-party__btn {
    width: 44px; height: 44px; border: 1px solid var(--rule); background: var(--paper);
    font-family: var(--serif); font-size: 18px; cursor: pointer; border-radius: 2px;
}
.tsuki-party__btn.is-on { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.tsuki-party__btn.is-disabled { background: var(--off-bg); color: #bbb; cursor: not-allowed; }

.tsuki-service-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tsuki-service-btn {
    border: 1px solid var(--rule); background: var(--paper); padding: 14px 18px;
    text-align: left; cursor: pointer; border-radius: 2px;
}
.tsuki-service-btn .t {
    display: block; font-family: var(--serif); font-size: 18px; letter-spacing: 0.04em;
}
.tsuki-service-btn .h {
    display: block; font-size: 11px; color: var(--muted); letter-spacing: 0.08em; margin-top: 2px;
}
.tsuki-service-btn.is-on { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.tsuki-service-btn.is-on .h { color: rgba(255,255,255,.8); }
.tsuki-service-btn.is-disabled { background: var(--off-bg); color: #bbb; cursor: not-allowed; }

.tsuki-slots {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px;
}
.tsuki-slot {
    padding: 10px 6px; border: 1px solid var(--rule); background: var(--paper);
    font-family: var(--sans); font-size: 13px; cursor: pointer; border-radius: 2px;
}
.tsuki-slot.is-on { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.tsuki-slot--flex {
    grid-column: span 2;
}
.tsuki-field--inset {
    margin-top: 10px; padding: 12px 14px; background: var(--paper-warm);
    border-left: 3px solid var(--ink); border-radius: 0 2px 2px 0;
}
.tsuki-field--inset label { margin-bottom: 6px; }

.tsuki-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.tsuki-hint--warn { color: var(--warn); background: var(--warn-bg); padding: 8px 10px; border-radius: 2px; border-left: 3px solid var(--warn); }
.tsuki-hint--info { color: var(--muted); padding: 8px 10px; background: var(--paper-warm); border-radius: 2px; border-left: 3px solid var(--rule); line-height: 1.5; margin-top: 8px; }

.tsuki-res__actions {
    display: flex; justify-content: space-between; gap: 12px; margin-top: 28px;
    padding-top: 18px; border-top: 1px solid var(--rule);
}
.tsuki-res__actions .tsuki-btn:only-child { margin-left: auto; }
.tsuki-btn {
    min-width: 130px; padding: 12px 22px; border: 1px solid var(--rule); background: var(--paper);
    cursor: pointer; font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em;
    text-transform: uppercase; font-weight: 700; border-radius: 2px;
}
.tsuki-btn:hover { border-color: var(--ink); }
.tsuki-btn--primary { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.tsuki-btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.tsuki-btn:disabled { opacity: .4; cursor: not-allowed; }

.tsuki-guest {
    border: 1px solid var(--rule); margin-bottom: 10px; border-radius: 2px;
    overflow: hidden; background: var(--paper);
    transition: border-color .15s, background .15s;
}
.tsuki-guest.is-picked { border-color: var(--accent); background: var(--paper); }
.tsuki-guest.is-open   { border-color: var(--ink); }

.tsuki-guest__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; cursor: pointer; gap: 12px;
    background: var(--paper);
    transition: background .15s;
    /* When scrollIntoView({ block: 'start' }) lands here, leave a gap above.
       --tu-header-offset is computed in widget.js based on the theme's
       fixed/sticky header so the target lands BELOW the header, not behind it. */
    scroll-margin-top: var(--tu-header-offset, 80px);
}
.tsuki-guest.is-picked .tsuki-guest__head { background: var(--accent-soft); }
.tsuki-guest.is-open .tsuki-guest__head    { background: var(--paper-warm); cursor: default; }

.tsuki-guest__title {
    display: flex; align-items: center; gap: 10px;
    flex: 1; min-width: 0;
}
.tsuki-guest__g {
    font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted); font-weight: 700;
    flex-shrink: 0;
}
.tsuki-guest__g b { color: var(--ink); }
.tsuki-guest.is-picked .tsuki-guest__g b { color: var(--accent); }

.tsuki-guest__pick {
    font-family: var(--serif); font-size: 16px; letter-spacing: 0.02em;
    color: var(--ink); display: flex; align-items: center; gap: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsuki-guest__pick .check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}
.tsuki-guest__pick em { color: var(--muted); font-style: italic; font-family: var(--serif); }
.tsuki-guest__placeholder { color: var(--muted); font-size: 13px; font-style: italic; }
.tsuki-guest__skipped { color: var(--muted); font-size: 13px; }

.tsuki-guest__shared {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--serif); font-size: 15px;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis;
}
.tsuki-guest__shared .check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.tsuki-guest__shared em { color: var(--muted); font-style: italic; }
.tsuki-guest__shared b { color: var(--accent); }
.tsuki-guest__shared-course {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.tsuki-guest.is-picked .tsuki-guest__head.is-shared { background: var(--paper-warm); }
.tsuki-guest__head.is-shared { cursor: default; background: var(--paper-warm); }

.tsuki-course.is-sharing {
    background: var(--paper-warm);
    border-style: dashed;
    border-color: var(--accent);
}
.tsuki-course.is-sharing:hover {
    background: var(--accent-soft);
}
.tsuki-course.is-sharing.is-picked {
    background: var(--accent-soft);
    border-style: dashed;
}
.tsuki-course__sharing-pill {
    align-self: flex-start;
    background: var(--accent); color: var(--paper);
    font-family: var(--sans); font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    padding: 3px 7px; border-radius: 2px;
    margin-bottom: 2px;
}
.tsuki-course__sharing-note {
    font-family: var(--sans); font-size: 10.5px;
    color: var(--accent); letter-spacing: 0.03em;
    margin-top: 4px; font-weight: 600;
}

.tsuki-guest__action {
    background: none; border: 1px solid var(--rule);
    padding: 5px 10px; font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 700; cursor: pointer;
    border-radius: 2px; color: var(--ink); flex-shrink: 0;
}
.tsuki-guest__action:hover { border-color: var(--accent); color: var(--accent); }

.tsuki-guest__body {
    padding: 14px; border-top: 1px solid var(--rule-soft);
    background: var(--paper-warm);
}
.tsuki-guest__confirm-bar {
    margin-top: 14px; padding: 14px;
    background: var(--paper);
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    border-radius: 2px;
    display: flex; flex-direction: column; gap: 12px;
}
.tsuki-guest__body-style {
    display: flex; flex-direction: column; gap: 6px;
}
.tsuki-guest__body-style label {
    margin-bottom: 0; font-size: 10px; letter-spacing: 0.2em;
    color: var(--muted); flex-shrink: 0;
}
.tsuki-guest__body-style select { width: 100%; padding: 10px 12px; font-size: 14px; }

.tsuki-guest__fixed-style {
    display: flex; align-items: baseline; gap: 8px;
    padding: 4px 0; font-family: var(--sans);
}
.tsuki-guest__fixed-style .lbl {
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--muted);
}
.tsuki-guest__fixed-style .val {
    font-family: var(--serif); font-size: 16px;
    color: var(--ink); letter-spacing: 0.02em;
}

.tsuki-guest__next {
    align-self: flex-end; white-space: nowrap;
}

.tsuki-guest__skip-link {
    display: block; margin: 14px auto 0; text-align: center;
    background: none; border: none; color: var(--muted);
    font-size: 12px; cursor: pointer; text-decoration: underline;
}
.tsuki-guest__skip-link:hover { color: var(--ink); }

/* Step-level "Skip — decide at the table" — appears at the top of Step 2
   so large parties can bail out without scrolling through guest accordions. */
.tsuki-step-skip-link {
    display: inline-block;
    margin: 0 0 18px;
    padding: 8px 14px;
    background: transparent;
    border: 1px dashed var(--rule);
    border-radius: 2px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 100ms, color 100ms, background 100ms;
}
.tsuki-step-skip-link:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: #faf7f4;
}

/* LINE Android in-app browser warning banner */
.tsuki-line-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 4px;
    color: #7c2d12;
    font-size: 13px;
    margin: 0 0 20px;
    line-height: 1.5;
}
.tsuki-line-banner__icon { font-size: 18px; flex-shrink: 0; line-height: 1.2; }
.tsuki-line-banner__body { flex: 1; }
.tsuki-line-banner__body strong { display: block; margin-bottom: 4px; color: #9a3412; }
.tsuki-line-banner__cta {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 12px;
    background: #ea580c;
    color: #fff !important;
    text-decoration: none;
    border-radius: 3px;
    font-weight: 600;
    font-size: 12px;
}
.tsuki-line-banner__cta:hover { background: #c2410c; }

/* "Required to send: …" hint that explains a disabled Send button */
.tsuki-missing {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 3px;
    color: #78350f;
    font-size: 13px;
    margin: 8px 0 12px;
    line-height: 1.5;
}
.tsuki-missing__icon { font-size: 14px; flex-shrink: 0; }
.tsuki-missing__list { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.tsuki-missing__chip {
    display: inline-block;
    padding: 1px 8px;
    background: #fffaeb;
    border: 1px solid #fcd34d;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
}

/* intl-tel-input visual overrides — match our hand-crafted form aesthetic.
   Shopify-style: when empty, no flag is shown. When the user types a number,
   the detected country flag appears on the right. */
.tsuki-res .iti { width: 100%; display: block; }
.tsuki-res .iti__tel-input { width: 100% !important; }
.tsuki-res .iti__search-input {
    border: 1px solid var(--rule);
    padding: 8px;
    font-size: 16px;
}

/* === Empty: hide the flag/country selector entirely === */
.tsuki-res .iti.tsuki-iti-empty .iti__country-container { display: none !important; }
.tsuki-res .iti.tsuki-iti-empty .iti__tel-input         { padding-left: 12px !important; }

/* === Filled: show the flag indicator on the RIGHT, not the left === */
.tsuki-res .iti.tsuki-iti-filled                              { position: relative; }
.tsuki-res .iti.tsuki-iti-filled .iti__tel-input              { padding-left: 12px !important; padding-right: 56px !important; }
.tsuki-res .iti.tsuki-iti-filled .iti__country-container {
    position: absolute !important;
    left: auto !important;
    right: 2px !important;
    top: 50%;
    transform: translateY(-50%);
    height: auto !important;
    padding: 2px 8px !important;
    background: transparent !important;
    border: none !important;
    z-index: 2;
}
.tsuki-res .iti.tsuki-iti-filled .iti__selected-country-primary {
    padding: 4px 6px !important;
    background: transparent !important;
    border-radius: 4px;
}
.tsuki-res .iti.tsuki-iti-filled .iti__selected-country-primary:hover {
    background: var(--paper-warm, #faf7f4) !important;
}
.tsuki-res .iti.tsuki-iti-filled .iti__selected-dial-code { display: none !important; }
@media (max-width: 540px) {
    .tsuki-guest__next { align-self: stretch; }
}

.tsuki-cat-filter {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.tsuki-cat-pill {
    background: var(--paper); border: 1px solid var(--rule);
    padding: 5px 12px; border-radius: 999px;
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.tsuki-cat-pill:hover { color: var(--ink); border-color: var(--ink); }
.tsuki-cat-pill.is-on {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
}

.tsuki-course-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px;
}
.tsuki-course {
    position: relative;
    text-align: left; padding: 12px 14px; border: 1px solid var(--rule); background: var(--paper);
    cursor: pointer; border-radius: 2px; transition: border-color .12s, background .12s, transform .06s;
    display: flex; flex-direction: column; gap: 6px;
}
.tsuki-course:hover { border-color: var(--accent); background: var(--accent-soft); }
.tsuki-course:active { transform: scale(.99); }
/* Suppress the default 2px black focus outline that browsers draw on a
   button after a mouse click — it lingers, looks identical to the picked
   state's accent border, and the user keeps thinking they're still picked.
   Keyboard users still get a clearly different focus ring via :focus-visible. */
.tsuki-course:focus { outline: none; }
.tsuki-course:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.tsuki-course.is-picked {
    border-color: var(--accent); background: var(--accent-soft); border-width: 2px; padding: 11px 13px;
}
/* Vermilion check badge on the picked card so the state is unmistakable
   regardless of border-width / hover ambiguity. */
.tsuki-course.is-picked::before {
    content: '✓';
    position: absolute;
    top: -10px; right: -10px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--paper);
    border-radius: 50%;
    font-family: var(--sans); font-weight: 700; font-size: 13px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.tsuki-course__unselect-hint {
    display: none;
    font-family: var(--sans); font-size: 10px;
    color: var(--accent); letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 700;
    text-align: center;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--accent-soft);
}
.tsuki-course.is-picked .tsuki-course__unselect-hint { display: block; }
.tsuki-course__name {
    font-family: var(--serif); font-size: 16px; letter-spacing: 0.02em;
    display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
    color: var(--ink);
}
.tsuki-course.is-picked .tsuki-course__name { color: var(--accent); }
.tsuki-course__badge {
    display: inline-block; font-family: var(--sans); font-size: 9px; letter-spacing: 0.18em;
    text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--accent); color: var(--accent); border-radius: 2px;
}
.tsuki-course__desc { font-size: 12px; color: var(--muted); line-height: 1.4; flex: 1; }
.tsuki-course__price {
    font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--accent);
    align-self: flex-end;
}
.tsuki-course__price .yen { font-size: 12px; margin-right: 2px; }

/* legacy block — kept for potential reuse, but accordion handles picked state inline now */
.tsuki-course-picked { display: none; }

.tsuki-link {
    background: none; border: none; color: var(--accent); font-size: 12px;
    text-decoration: underline; cursor: pointer; padding: 0;
}

.tsuki-check {
    display: flex; gap: 10px; align-items: flex-start;
    text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px;
    line-height: 1.5; color: var(--ink);
}
.tsuki-check input { margin-top: 3px; flex-shrink: 0; }

.tsuki-summary {
    background: var(--paper-warm); padding: 14px 16px; margin: 22px 0; border-radius: 2px;
    border: 1px solid var(--rule-soft);
}
.tsuki-summary h4 {
    font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; margin: 0 0 8px; font-weight: 700;
}
.tsuki-summary ul { list-style: none; padding: 0; margin: 0; }
.tsuki-summary li {
    display: grid; grid-template-columns: 90px 1fr; gap: 12px;
    padding: 4px 0; font-size: 14px;
}
.tsuki-summary li span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.tsuki-summary .pick { display: block; }

.tsuki-res__footnote {
    margin: 18px 0 0; padding: 12px 14px;
    background: var(--paper-warm); border-left: 3px solid var(--rule);
    font-size: 12px; color: var(--muted); line-height: 1.5;
    font-family: var(--sans);
}

.tsuki-policy {
    border-left: 3px solid var(--ink); padding: 10px 14px; background: var(--off-bg);
    font-size: 13px; margin-bottom: 16px;
}

.tsuki-errors {
    background: #fef2f2; color: #991b1b; padding: 12px 16px; border-radius: 2px;
    margin-bottom: 12px; font-size: 13px;
}
.tsuki-errors ul { margin: 0; padding-left: 20px; }

.tsuki-honeypot {
    position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
}

.tsuki-res__panel--ok { text-align: center; padding: 40px 20px; }
.tsuki-res__panel--ok h3 { font-size: 28px; }

@media (max-width: 640px) {
    .tsuki-res { padding: 24px 18px 36px; border: none; }
    .tsuki-res__header h2 { font-size: 24px; }
    .tsuki-service-toggle { grid-template-columns: 1fr; }
    .tsuki-course-picked { grid-template-columns: 1fr; }
    .tsuki-res__steps li .lbl { display: none; }
    .tsuki-btn { min-width: 0; flex: 1; }
}