/* Screen-specific rules for the booking, cancel and reschedule screens (WB-8).
   Uses the tokens and type scale of style.css (14, 16, 20, 28px). */

/* States of this task beyond the four in style.css: an element with data-s shows only in the listed states */
body[data-state="onewindow"] [data-s]:not([data-s~="onewindow"]),
body[data-state="noroom"] [data-s]:not([data-s~="noroom"]),
body[data-state="taken"] [data-s]:not([data-s~="taken"]),
body[data-state="late"] [data-s]:not([data-s~="late"]),
body[data-state="cancelled"] [data-s]:not([data-s~="cancelled"]),
body[data-state="done"] [data-s]:not([data-s~="done"]),
body[data-state="movefail"] [data-s]:not([data-s~="movefail"]),
body[data-state="first"] [data-s]:not([data-s~="first"]) { display: none; }

[hidden] { display: none !important; }

/* Steps */
.steps { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: var(--fs-small); margin-bottom: 4px; }
.steps .bar { display: flex; gap: 4px; }
.steps .bar i { flex: 1; height: 4px; border-radius: 2px; background: #2a2a2e; }
.steps .bar i.on { background: var(--gold); }
.scroll h1 { margin-top: 8px; }
.lbl { display: block; margin: 12px 0 6px; font-weight: 600; }
.chip { margin: 4px 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: var(--fs-small); }

/* Options (radio cards) */
.radios { display: grid; gap: 10px; margin: 12px 0; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.opt:has(input:checked) { border-color: var(--gold-strong); box-shadow: 0 0 0 1px var(--gold-strong); }
.opt input { width: 22px; height: 22px; accent-color: var(--gold); flex: none; margin: 0; }
.opt span { display: flex; flex-direction: column; }
.opt b { font-weight: 600; }
.opt small { color: var(--muted); }
.opt.skel { background: linear-gradient(90deg, #17171b, #26262b, #17171b); background-size: 200% 100%; animation: sh 1.4s infinite linear; }
@media (prefers-reduced-motion: reduce) { .opt.skel, .calskel { animation: none; } }
.add { display: inline-block; padding: 12px 0; font-weight: 600; }
.emptybox, .latebox, .okbox { margin: 12px 0; padding: 14px; border: 1px dashed var(--gold); border-radius: 12px; background: var(--surface); }
.emptybox p, .latebox p { margin: 0 0 6px; }
.okbox { border-style: solid; color: var(--gold-strong); }
.latebox { border-color: var(--alert); }
.latebox .btn { margin-top: 10px; }

textarea { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; resize: vertical; }
textarea::placeholder { color: var(--muted); }

/* Calendar: 7 columns, each at least 44px wide at 390px */
.cal { margin: 12px 0 4px; }
.cal .wd, .cal .grid7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .wd i { text-align: center; font-style: normal; color: var(--muted); font-size: var(--fs-small); padding: 2px 0; }
.day { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-body); padding: 0; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; cursor: pointer; }
.day.on { background: var(--gold); color: #1a1405; border-color: var(--gold-strong); font-weight: 600; }
.day.off { background: none; border: 1px dashed #4a4a4a; color: #a39c8c; cursor: default; text-decoration: line-through; text-decoration-color: #5a5a5a; }
.legend { color: var(--muted); font-size: var(--fs-small); margin: 8px 0; }
.winh { margin-top: 12px; }
.calskel { height: 280px; border-radius: 12px; background: linear-gradient(90deg, #17171b, #26262b, #17171b); background-size: 200% 100%; animation: sh 1.4s infinite linear; }

/* Summary card */
.card { margin: 12px 0; padding: 4px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.srow { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #26262b; }
.srow:last-child { border-bottom: 0; }
.srow .k { width: 120px; flex: none; color: var(--muted); font-size: var(--fs-small); }
.srow .v { flex: 1; }
.srow a, .chip a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.srow a { flex: none; margin: -10px 0; }
.chip { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.a2hs { padding: 12px 14px; border-color: var(--gold); }
.a2hs p { margin: 4px 0 10px; }
.okmark { width: 56px; height: 56px; margin: 12px 0 0; border-radius: 50%; background: var(--gold); color: #1a1405; font-size: var(--fs-head); font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* Buttons and the bar at the bottom of a step */
.actionbar { padding: 12px 16px 14px; border-top: 1px solid var(--line); background: #0f0f11; }
.btn { display: block; box-sizing: border-box; text-align: center; padding: 16px; min-height: 56px; font-size: var(--fs-body); font-weight: 600; color: #1a1405; background: linear-gradient(#f0c35f, #c8962f); border-radius: 14px; text-decoration: none; }
.btn.ghost { background: none; color: var(--gold-strong); border: 1px solid var(--gold); }
.btn.danger { background: #8f2a2e; color: #fff; }
.btn.small { min-height: 44px; padding: 10px; }
.btn.off, .btn[aria-disabled="true"] { background: #2a2a2e; color: #b3ac9c; border: 0; cursor: default; }
.btn.ghost.off { background: none; border: 1px solid #4a4a4a; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.stack { display: grid; gap: 10px; margin: 16px 0; }