/* arrival: the hour is read, then the screen splits along the cut */
.arrive { position: fixed; inset: 0; z-index: 80; pointer-events: auto; }
.arrive.gone { display: none; }
.ar-half { position: absolute; inset: 0; background: var(--ink); transition: transform 640ms var(--move); }
.ar-half.l { clip-path: polygon(0 0, calc(50% + 16vh) 0, calc(50% - 16vh) 100%, 0 100%); }
.ar-half.r { clip-path: polygon(calc(50% + 16vh) 0, 100% 0, 100% 100%, calc(50% - 16vh) 100%); }
.arrive.open .ar-half.l { transform: translate(-62vw, 20vw); }
.arrive.open .ar-half.r { transform: translate(62vw, -20vw); }
.ar-kerf { position: absolute; inset: 0; background: var(--lime); clip-path: polygon(calc(50% + 16vh - 3px) 0, calc(50% + 16vh + 3px) 0, calc(50% - 16vh + 3px) 100%, calc(50% - 16vh - 3px) 100%); opacity: 0; }
.arrive.cut .ar-kerf { opacity: 1; }
.arrive.open .ar-kerf { opacity: 0; transition: opacity 0ms 120ms; }
.ar-in { position: absolute; left: var(--gut); right: var(--gut); top: 50%; transform: translateY(-50%); }
.ar-tc { font-size: clamp(3rem, 10vw, 10rem); color: var(--paper); letter-spacing: -0.04em; line-height: 1; }
.ar-h { font-size: clamp(2rem, 5vw, 5rem); margin-top: 14px; }
.ar-bar { position: relative; height: 56px; margin-top: 40px; display: flex; align-items: center; gap: 2px; }
.ar-bar i { flex: 1; background: #55564b; }
.ar-bar i.sel { background: var(--lime); }
.ar-skip { position: absolute; right: var(--gut); bottom: 24px; background: none; border: 1px solid var(--rule); color: var(--paper); padding: 10px 14px; font-size: 14px; cursor: pointer; z-index: 2; }

/* week head */
.view { padding: 0 var(--gut) 96px; }
.wk-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 48px; align-items: end; padding: clamp(22px, 3vw, 40px) 0 22px; }
.wk-act { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 760px) { .wk-act { grid-template-columns: 1fr; } }
.kick { color: var(--muted); font-size: 15px; margin-bottom: 12px; }
.lime-t { color: var(--lime); }
.wk-h { font-size: clamp(2.6rem, 6vw, 7rem); }
.wk-act { display: grid; gap: 18px; justify-items: start; }
.wk-act p { font-size: 18px; max-width: 34ch; }
.btn.big { min-height: 60px; font-size: 18px; padding: 0 24px; }

.hour { padding: 18px 0 30px; margin-top: 12px; border-top: 1px solid var(--rule); }
.hour-top { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 26px; color: var(--muted); font-size: 14px; }
#hourSel { color: var(--lime); }

/* the wall */
.wall { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; padding: 8px 0 40px; }
.day { position: relative; display: grid; gap: 10px; align-content: start; }
.day-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.day-d { font-size: clamp(1.6rem, 2.4vw, 2.6rem); color: var(--muted); transition: color 100ms steps(1); }
.day.on .day-d { color: var(--lime); }
.day-dur { font-size: 14px; color: var(--muted); }
.day .phone { cursor: pointer; transition: transform 500ms var(--settle), box-shadow 100ms; }
.day.on .phone { box-shadow: 0 0 0 3px var(--lime); transform: translateY(-6px); }
.day .phone:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.day-t { font-weight: 700; font-size: 16px; line-height: 1.3; min-height: 3.9em; }
.day-tick { min-height: 44px; width: 100%; justify-content: space-between; }
.day-tick[aria-pressed="true"] { background: var(--lime); color: var(--ink); }
.day-tick[aria-pressed="true"] .lbl::before { content: "✓ "; }
.ticked-corner { position: absolute; right: 7px; top: 7px; width: 34px; height: 52px; background: var(--lime); clip-path: polygon(32% 0, 100% 0, 68% 100%, 0 100%); display: none; z-index: 2; }
.day.ticked .ticked-corner { display: block; }
.day.bonus .day-d { color: var(--paper); }

/* bench */
.bench { border-top: 3px solid var(--paper); padding-top: 28px; }
.b-kick { color: var(--muted); font-size: 15px; }
.b-title { font-size: clamp(2.2rem, 5vw, 5.6rem); margin-top: 10px; max-width: 18ch; }
.b-why { font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin-top: 14px; font-weight: 600; }
.b-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 48px; margin-top: 32px; }
.b-lbl { font-size: 13px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
.b-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.b-acts #bTick[aria-pressed="true"] { background: var(--paper); }
.b-tl { position: relative; margin-top: 36px; padding: 18px 0 36px; border-top: 1px solid var(--rule); }
.b-hint { color: var(--muted); font-size: 16px; margin-bottom: 14px; }
.b-ill { position: absolute; right: 0; bottom: 0; }

/* floor */
.floor { margin-top: 72px; border-top: 1px solid var(--rule); padding-top: 28px; }
.fl-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 48px; align-items: end; }
.fl-h { font-size: clamp(2rem, 4.4vw, 4.6rem); }
.fl-head p { color: var(--muted); max-width: 46ch; }
.fl-list { margin-top: 24px; border-top: 1px solid var(--rule); }
.fl-list li { display: grid; grid-template-columns: 80px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.fl-list .mono { color: var(--muted); font-size: 14px; }
.fl-list .t { font-weight: 700; font-size: 18px; text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.fl-list .r { color: var(--muted); }
.fl-list li.back .t { text-decoration: none; }

/* sign-off */
.sg-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 48px; align-items: end; padding: clamp(28px, 4vw, 56px) 0 32px; }
.sg-h { font-size: clamp(3rem, 8vw, 9rem); }
.sg-head p { font-size: 19px; max-width: 38ch; }
.sched { border-top: 3px solid var(--paper); }
.sched li { display: grid; grid-template-columns: 110px 64px minmax(0, 1fr) 120px auto auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.sched .d { font-size: 2rem; }
.sched li.ok .d { color: var(--lime); }
.sched .mini { width: 64px; }
.sched .mini .phone { padding: 3px; border-radius: 12px; }
.sched .mini .kp { border-radius: 9px; }
.sched .tt { font-weight: 700; font-size: 18px; line-height: 1.3; }
.sched .tt small { display: block; font-weight: 400; font-size: 16px; color: var(--muted); }
.sched input[type="time"] { background: var(--ink-2); color: var(--paper); border: 1px solid var(--rule); min-height: 48px; padding: 0 10px; font: 500 16px var(--mono); border-radius: 0; color-scheme: dark; }
.plats { display: flex; gap: 6px; }
.plats button { min-height: 44px; padding: 0 12px; background: none; border: 1px solid var(--rule); color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; }
.plats button[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.sched .st { min-width: 120px; }
.sg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.sg-foot p { color: var(--muted); max-width: 44ch; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* look */
.lk { display: grid; grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr); gap: 48px; padding-top: clamp(28px, 4vw, 56px); }
.lk-h { font-size: clamp(2.6rem, 5vw, 5.6rem); }
.lk-p { margin: 16px 0 24px; font-size: 19px; color: var(--muted); }
.seg { border: 0; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 6px; }
.seg legend { width: 100%; margin-bottom: 8px; font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; }
.seg legend .mono { font-weight: 400; font-size: 13px; color: var(--muted); }
.seg button { min-height: 48px; padding: 0 16px; background: var(--ink-2); border: 1px solid var(--rule); font-weight: 700; font-size: 16px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.seg.sw button { display: flex; gap: 0; padding: 6px; }
.seg.sw i { width: 22px; height: 30px; }
.seg.sw button[aria-pressed="true"] { background: var(--lime); }
.hex { display: flex; align-items: center; gap: 14px; font-weight: 700; }
.hex input { width: 120px; min-height: 48px; background: var(--ink-2); border: 1px solid var(--rule); color: var(--paper); padding: 0 12px; font-size: 16px; border-radius: 0; }
.saved { margin-top: 16px; color: var(--muted); font-size: 14px; }
.lk-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-content: start; }
.lk-wall li:first-child { grid-row: span 2; grid-column: span 2; }
.lk-wall .mono { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; }

/* stamp */
.stamp { position: fixed; left: 50%; top: 50%; z-index: 90; transform: translate(-50%, -50%) rotate(-6deg) scale(1); background: var(--lime); color: var(--ink); font-size: clamp(2.4rem, 7vw, 7rem); padding: .15em .35em; box-shadow: inset 0 0 0 6px var(--ink); pointer-events: none; display: none; white-space: nowrap; }
.stamp.on { display: block; animation: slam 160ms steps(2, end); }
@keyframes slam { from { transform: translate(-50%, -50%) rotate(-6deg) scale(2.4); } to { transform: translate(-50%, -50%) rotate(-6deg) scale(1); } }

@media (max-width: 1100px) {
  .wall { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(170px, 34vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; }
  .day { scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .wk-head, .b-grid, .fl-head, .sg-head, .lk { grid-template-columns: 1fr; }
  .wall { grid-auto-columns: 58vw; }
  .fl-list li { grid-template-columns: 1fr auto; }
  .fl-list li .mono, .fl-list li .r { grid-column: 1 / -1; }
  .sched li { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 14px; }
  .sched .d { grid-column: 1 / -1; font-size: 1.6rem; }
  .sched .mini { grid-row: span 2; }
  .sched li > input, .sched .plats, .sched .st { grid-column: 2; }
  .lk-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lk-wall li:first-child { grid-column: span 3; grid-row: auto; max-width: 260px; }
}
.hour { overflow: hidden; }