/* sheet.css - every staff screen.  iPad landscape (1024) first, then desktop,
   then a phone for the ranger.  Light only: a pro shop is bright. */

:root {
  --bg: #f4f5f2; --card: #ffffff; --ink: #17201b; --ink2: #4a5650; --muted: #6b7670; --line: #dce2dd; --line2: #eef1ee;
  --accent: #1d6a43; --accent-ink: #ffffff; --accent-soft: #e5f2ea;
  --warn: #8a4b06; --warn-bg: #fff4e0; --warn-line: #f0c27a;
  --bad: #a3261b; --bad-bg: #fdecea; --ok: #17703f; --ok-bg: #e3f4e9;
  --info-bg: #eaf1fb; --info-line: #b8cdee; --info: #1f4f8f;
  --block: #eef0f6; --block-line: #c9cfe2; --sq: #b56a00;
  --r: 10px; --tap: 44px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.4 var(--font); font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
.muted { color: var(--muted); } .small { font-size: .85rem; }
[hidden] { display: none !important; }

/* buttons */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: var(--tap); padding: 0 1rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; text-decoration: none; color: var(--ink);
  font-weight: 600; white-space: nowrap; touch-action: manipulation;
}
button:hover, .button:hover { border-color: #b9c3bc; }
button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .row:focus-visible, .seg input:focus-visible + span {
  outline: 3px solid #2f7de1; outline-offset: 2px;
}
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover { background: #17573a; }
button.ghost { background: transparent; }
button.danger { color: var(--bad); border-color: #e9b8b2; }
button.danger:hover { background: var(--bad-bg); }
button.link { border: 0; background: none; padding: 0 .25rem; min-height: auto; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
button:disabled { opacity: .55; cursor: default; }
button.icon { width: var(--tap); padding: 0; font-size: 1.5rem; line-height: 1; }

/* top bar */
.head { position: sticky; top: 0; z-index: 30; }
.top { display: flex; align-items: center; gap: 1rem; padding: 0 1rem; min-height: 52px; background: #13241b; color: #fff; }
.top a, .top button.link { color: #fff; }
.brand { font-weight: 700; text-decoration: none; font-size: 1.05rem; margin-right: .5rem; }
.nav { display: flex; gap: .25rem; }
.nav a { text-decoration: none; padding: .5rem .75rem; border-radius: 6px; color: #cfe0d6; font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; }
.nav a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; }
.who { margin-left: auto; color: #cfe0d6; font-size: .9rem; }
.live { font-size: .8rem; font-weight: 700; padding: .25rem .6rem; border-radius: 99px; background: rgba(255,255,255,.12); color: #cfe0d6; }
.live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; background: #9aa7a0; vertical-align: 1px; }
.live[data-state="live"]::before { background: #5ee38f; }
.live[data-state="down"] { background: #7a4a0a; color: #fff; }
.live[data-state="down"]::before { background: #ffb547; }

/* day bar */
.daybar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .5rem 1rem; background: var(--card); border-bottom: 1px solid var(--line); }
.daynav { display: flex; align-items: center; gap: .35rem; }
.daytitle { display: flex; flex-direction: column; padding: 0 .5rem; min-width: 15.5rem; }
.daypick { position: relative; display: inline-flex; align-items: center; font-size: 1.15rem; font-weight: 700; border-radius: 6px; cursor: pointer; }
.daypick:hover { background: var(--line2); }
.daypick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.summary { margin: 0; color: var(--ink2); white-space: nowrap; font-size: .85rem; }
.summary b { color: var(--ink); }
.tools { margin-left: auto; display: flex; gap: .4rem; }


/* banners */
.banners { }
.banner { padding: .65rem 1rem; border-bottom: 1px solid; font-size: .95rem; }
.banner-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.banner-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.banner-error { background: var(--bad-bg); border-color: #efb3ab; color: var(--bad); }
body.readonly [data-write], body.readonly [data-write-starter] { opacity: .35; pointer-events: none; }

/* the grid */
.sheet { padding: .5rem 1rem 6rem; margin: 0 auto; }
.find { display: flex; align-items: center; gap: .5rem; }
.find input { min-height: var(--tap); width: 11rem; padding: 0 .7rem; border: 1px solid #c4ccc6; border-radius: 8px; background: #fff; }

.price { margin: 0 auto 0 0; font-weight: 700; color: var(--ink); }
.cancel-row { border-top: 1px solid var(--line); padding: .75rem 0 1rem; }
.calls { color: var(--warn); }
.preview details summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-top: .25rem; }
.preview .warn { margin: 0 0 .5rem; padding: .5rem .5rem .5rem 1.4rem; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 8px; }
.row {
  display: grid; grid-template-columns: 92px 104px 1fr 104px; align-items: center; gap: .75rem;
  min-height: 58px; padding: .35rem .5rem; background: var(--card); border-bottom: 1px solid var(--line2); position: relative;
  scroll-margin-top: 150px; scroll-margin-bottom: 24px;
}
.band { scroll-margin-top: 150px; }
.row:first-child { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
.row:focus { background: #f3f8ff; }
.row.past { background: #fafbf9; }
.row.past .tt, .row.past .ap { color: var(--muted); }
.row.blocked { background: repeating-linear-gradient(-45deg, var(--block), var(--block) 8px, #f6f7fb 8px, #f6f7fb 16px); }
.row.twilight .c-time .tt { color: #5a3f86; }
.row.extra { background: #fffaf0; }
.row.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: #fff1b8; } }
.c-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .3rem; }
.c-time .tm { white-space: nowrap; }
.dl-short { display: none; }
.tt { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.ap { font-size: .75rem; font-weight: 700; color: var(--ink2); }
.tag { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .35rem; border-radius: 4px; background: var(--line2); color: var(--ink2); }
.tag.tw { background: #efe8fa; color: #5a3f86; }
.tag.sq { background: #fff0d6; color: var(--sq); }
.c-seats { display: flex; flex-direction: column; gap: .2rem; }
.pips { display: flex; gap: 4px; }
.pips i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #b9c3bc; }
.pips i.on { background: var(--accent); border-color: var(--accent); }
.pips i.sq { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--accent); }
.cnt { font-size: .85rem; color: var(--ink2); font-weight: 600; }
.row.full .cnt { color: var(--ink); }
.row.over .cnt { color: var(--ink); }
.c-groups { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; min-width: 0; }
.cnt.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.open { color: var(--muted); font-size: .9rem; }
.blk-l { color: #5a6488; font-size: .8rem; }
.row.closed { min-height: 34px; padding-top: .15rem; padding-bottom: .15rem; }
.row.closed .tt { font-size: 1rem; } .row.closed .pips { display: none; } .row.closed .cnt { display: none; }
.chip .in-mark { font-size: .8rem; font-weight: 700; color: var(--warn); background: var(--warn-bg); border-radius: 4px; padding: 0 .35rem; margin-top: 2px; }
.chip.inside-block { border-color: var(--warn-line); }
.chip .ns { border: 0; border-left: 1px solid var(--line); border-radius: 0 8px 8px 0; min-height: auto; padding: 0 .65rem; font-size: .8rem; color: var(--bad); font-weight: 600; }
.chip .ci:has(+ .ns) { border-radius: 0; }
.c-act { display: flex; justify-content: flex-end; }
.add { min-width: 88px; }
.row.full .add { color: var(--sq); border-color: #ecd2a6; }

.chip { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%; min-height: var(--tap); }
.chip .st { display: flex; align-items: stretch; justify-content: flex-start; flex: 0 0 12.5rem; border-left: 1px solid var(--line); }
.chip .st > .ci { flex: 0 0 6.75rem; }
.chip .st > .ns, .chip .st > .ns-slot { flex: 0 0 5.75rem; }
.chip .st > .pill { margin-left: auto; margin-right: .75rem; }
.chip.inside-block { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.row.after-last { opacity: .55; }
.tag.late-t { background: var(--bad-bg); color: var(--bad); }
.add.all { color: var(--accent); border-color: #9fd2b3; }
.calllist { margin: .2rem 0 .5rem; padding-left: 1.1rem; columns: 2; column-gap: 1rem; font-size: .88rem; }
.ps-head > div { flex: 0 0 auto; }
.ps-head h1, .ph-day { white-space: nowrap; }
.ph-meta { max-width: 60%; }
.chip .st > .pill { align-self: center; margin: 0 .75rem; }
.chip.found { outline: 3px solid #f2b705; outline-offset: 1px; }
.chip-main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; border: 0; background: none; min-height: var(--tap); padding: .3rem .6rem; text-align: left; font-weight: 400; white-space: normal; border-radius: 8px 0 0 8px; min-width: 0; }
.chip-main:hover { background: #f6faf7; }
.chip .l1 { display: flex; gap: .5rem; align-items: baseline; }
.chip .nm { font-weight: 700; }
.chip .ph { color: var(--ink2); font-size: .85rem; }
.chip .l2 { color: var(--ink2); font-size: .82rem; }
.chip .note { font-size: .82rem; color: var(--warn); max-width: 34ch; }
.chip .note::before { content: "Note: "; font-weight: 700; }
.chip .l2 .paid { color: var(--ok); }
.ch { font-weight: 400; color: var(--muted); white-space: nowrap; }
.chip .ci { flex: 1; border: 0; border-radius: 0 8px 8px 0; min-height: auto; padding: 0 .75rem; font-size: .9rem; color: var(--accent); }
.chip .ci.mv { color: var(--warn); }
.chip .ci:hover { background: var(--accent-soft); }
.chip.st-checked_in { border-color: #a9d8bb; background: #f3fbf6; }
.chip.st-no_show { opacity: .6; }
.chip.st-no_show .nm { text-decoration: line-through; }
.chip.squeezed { border-color: #ecd2a6; }

.pill { display: inline-block; font-size: .75rem; font-weight: 700; padding: .15rem .5rem; border-radius: 99px; background: var(--line2); color: var(--ink2); }
.pill.ok, .pill.st-checked_in { background: var(--ok-bg); color: var(--ok); }
.pill.bad, .pill.st-no_show, .pill.st-cancelled { background: var(--bad-bg); color: var(--bad); }
.pill.st-booked { background: var(--info-bg); color: var(--info); }

.band { margin: .5rem 0 0; padding: .55rem .75rem; background: var(--block); border: 1px solid var(--block-line); border-radius: var(--r) var(--r) 0 0; }
.band-h { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.band-k { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: #3a4670; padding: .1rem .4rem; border-radius: 4px; }
.band-t { color: var(--ink2); }
.band-h button, .band-h .muted { margin-left: auto; }
.inside { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; padding: .45rem .6rem; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 8px; color: var(--warn); font-weight: 600; }
.inside button { color: var(--warn); border-color: var(--warn-line); min-height: 38px; }
.nowline { position: relative; height: 0; border-top: 2px solid #d1453b; margin: 0; z-index: 2; }
.nowline span { position: absolute; left: 0; top: -11px; background: #d1453b; color: #fff; font-size: .7rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); font-size: 1.05rem; }

/* drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(440px, 100vw); background: var(--card); box-shadow: -12px 0 32px rgba(15,30,20,.18); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.drawer-in { padding: .9rem 1.25rem 0; }
.dr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.dr-top h2 { margin: .35rem 0 0; }
button.x { width: var(--tap); padding: 0; font-size: 1.6rem; line-height: 1; border-color: transparent; background: transparent; color: var(--ink2); margin-right: -.5rem; }
button.x:hover { background: var(--line2); }
.actions.sticky { position: sticky; bottom: 0; background: var(--card); padding: .75rem 0 1rem; margin-top: .25rem; border-top: 1px solid var(--line2); z-index: 2; align-items: center; }
.drawer .form { gap: .6rem; }
.drawer .field input, .drawer .field select { min-height: 40px; }
button.extra { align-self: flex-start; margin-top: -.35rem; }
.sub.big { font-size: 1.02rem; color: var(--ink); }
.sub.hist { color: var(--info); font-weight: 600; }
.sub.note-l { color: var(--warn); font-weight: 600; }
.more { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; }
.more [aria-expanded="true"] { background: var(--accent-soft); border-color: #9fd2b3; }
.sect { border-top: 1px solid var(--line); padding: .9rem 0 1.25rem; }
.preview .warn { margin-top: .4rem; color: var(--warn); font-weight: 600; }
.nw { white-space: nowrap; }
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(15,30,20,.25); }
.form { display: flex; flex-direction: column; gap: .75rem; }
.field { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; color: var(--ink2); }
.field input, .field select, .field textarea, .rule select, .rule input {
  min-height: var(--tap); padding: .45rem .65rem; border: 1px solid #c4ccc6; border-radius: 8px; background: #fff; font-weight: 400; color: var(--ink); font-size: 1rem; width: 100%;
}
.field textarea { min-height: 64px; resize: vertical; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg legend { font-weight: 600; font-size: .9rem; color: var(--ink2); padding: 0; margin-bottom: .3rem; }
.seg-in { display: flex; flex-wrap: wrap; gap: .35rem; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding: 0 .9rem; border: 1px solid #c4ccc6; border-radius: 8px; background: #fff; font-weight: 600; }
.seg input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.seg input:disabled + span { opacity: .35; text-decoration: line-through; }
.check { display: flex; gap: .55rem; align-items: center; font-weight: 600; min-height: var(--tap); }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }
.hint { margin: -.35rem 0 0; color: var(--ink2); font-size: .9rem; min-height: 1.2em; }
.error { margin: 0; color: var(--bad); font-weight: 600; min-height: 0; }
.error:empty { display: none; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.actions.end { margin-top: 1rem; }
.sub { margin: .1rem 0; color: var(--ink2); }
.rate { margin-left: .5rem; color: var(--ink2); font-size: .9rem; }
.quick { display: flex; gap: .5rem; margin: .75rem 0; }
.quick:empty { display: none; }
.quick button { flex: 1; min-height: 52px; }
section.move { margin-top: 0; }
.move-row { display: flex; gap: .5rem; align-items: flex-end; }
.move-row .field { flex: 1; }
.confirm { margin-top: .6rem; padding: .75rem; border-radius: 8px; background: var(--bad-bg); }
.confirm p { margin: 0 0 .5rem; }
.history { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--ink2); font-size: .9rem; }
.preview { background: var(--line2); border-radius: 8px; padding: .65rem .8rem; font-size: .92rem; }
.preview p { margin: 0 0 .35rem; } .preview ul { margin: 0; padding-left: 1.1rem; }
.quickmins { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: -.35rem; }
.quickmins button { min-width: 56px; }

.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(15,30,20,.35); }
.modal-in { background: #fff; border-radius: 14px; padding: 1.25rem 1.5rem; width: min(440px, 92vw); }
.keys { display: grid; grid-template-columns: 70px 1fr; gap: .4rem .75rem; margin: 0 0 1rem; }
.keys dt { font-weight: 800; font-family: ui-monospace, Menlo, Consolas, monospace; }
.keys dd { margin: 0; }
.jump { position: fixed; top: 130px; left: 50%; transform: translateX(-50%); z-index: 60; background: #fff; padding: .75rem 1rem; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.jump input { margin-left: .5rem; min-height: var(--tap); padding: 0 .5rem; border: 1px solid #c4ccc6; border-radius: 8px; width: 7rem; }

.toast { pointer-events: none; position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 140%); z-index: 70; max-width: min(560px, 92vw); padding: .75rem 1.1rem; border-radius: 10px; background: #13241b; color: #fff; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.2); transition: transform .18s ease-out; }
.toast.show { transform: translate(-50%, 0); }
.toast-error { background: var(--bad); }

/* ranger: a phone first */
.ranger-page .top .who, .ranger-page .top .nav a:not([aria-current]) { display: none; }
.r-head { padding: 1rem 1rem .25rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.r-head h1 { font-size: 1.2rem; margin: 0; }
.r-now { margin: 0; font-weight: 700; color: var(--ink2); }
.ranger { padding: .5rem 1rem 3rem; display: grid; gap: .75rem; max-width: 720px; }
.r-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; }
.r-card h2 { font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.r-tee { border-color: #9fd2b3; box-shadow: inset 4px 0 0 var(--accent); }
.count { background: var(--accent-soft); color: var(--accent); padding: 0 .5rem; border-radius: 99px; font-size: .85rem; }
.r-time + .r-time { border-top: 1px solid var(--line2); padding-top: .5rem; margin-top: .5rem; }
.r-time h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
.r-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.g { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem .75rem; min-height: var(--tap); }
.g-nm { font-weight: 700; }
.g-meta { grid-column: 1; color: var(--ink2); font-size: .85rem; }
.ranger .g-nm { font-size: 1.05rem; }
.ranger .g-meta { color: #2c3832; font-size: 1rem; }
.ranger .late { grid-column: 1; color: var(--bad); font-weight: 700; font-size: 1rem; }
.ranger .g.is-late { background: var(--bad-bg); border-radius: 8px; padding: .35rem .5rem; margin: 0 -.5rem; }
.r-key { margin: 0 0 .4rem; color: #2c3832; font-size: 1rem; }
.g .ci, .g .pill, .g .hole { grid-column: 2; grid-row: 1 / span 2; }
.course .g { grid-template-columns: auto 1fr; }
.course .g .hole { grid-column: 1; }
.course .g .g-nm, .course .g .g-meta { grid-column: 2; }
.hole { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 1.15rem; line-height: 1; }
.hole { font-size: 1.35rem; }
.r-card p { margin: 0; }
.r-card .r-key { margin-bottom: .4rem; }
.r-tee.late { border-color: #efb3ab; box-shadow: inset 4px 0 0 var(--bad); }
.r-sum { width: 100%; margin: 0; color: #2c3832; font-size: .95rem; }
.r-late { border-color: #efb3ab; box-shadow: inset 4px 0 0 var(--bad); }
.r-late h2 { color: var(--bad); }
.ranger-page .top .who { display: inline; }
.roles { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.list li:last-child { border-bottom: 0; }
button.sm { min-height: 34px; padding: 0 .7rem; font-size: .85rem; }
.stats { grid-template-columns: repeat(3, 1fr); }
.stat .s { color: var(--ink2); font-size: .95rem; }
.tbl tr.sep th, .tbl tr.sep td { border-top: 1px solid var(--line); font-weight: 600; color: var(--muted); }
.owner .actions.sticky { margin: 0; border: 1px solid var(--line); border-radius: 12px; }
.r-head { flex-wrap: wrap; }
.g .acts { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: .35rem; }
.g .ns { color: var(--bad); }
.g .ci { color: var(--accent); }

/* owner */
.tabs { display: flex; gap: .25rem; padding: .5rem 1rem 0; background: var(--card); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { padding: .75rem 1rem; text-decoration: none; color: var(--ink2); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.owner { padding: 1rem 1rem 3rem; max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: .85rem; }
.owner h1 { margin: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.25rem; }
.card h2 { margin-bottom: .35rem; }
.form > p, .card > p { margin: 0; }
.owner > .lead { margin: -.5rem 0 0; color: var(--ink2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card-h { display: flex; align-items: center; gap: .75rem; }
.card-h h2 { margin: 0; }
.row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem 1rem; margin: .5rem 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; margin: .5rem 0; }
.field input.num, .field select.num { max-width: 8rem; }
.card.fit { align-self: flex-start; }
.row4.two { grid-template-columns: repeat(2, minmax(0, 16rem)); }
.stat .s { color: var(--muted); font-size: .85rem; margin-top: .15rem; }
.cols3 { align-items: stretch !important; }
.presets [aria-pressed="true"] { background: var(--accent-soft); border-color: #9fd2b3; }
.hols { list-style: none; margin: 0 0 .35rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-weight: 600; color: var(--ink); }
.hol-add { display: flex; gap: .4rem; align-items: center; }
.hol-add input { min-height: 40px; padding: 0 .5rem; border: 1px solid #c4ccc6; border-radius: 8px; }
.field > label { font-weight: 600; }
@media (min-width: 1072px) { .tabs { padding-left: calc((100vw - 1040px) / 2 + 1rem); } }
.owner .actions.sticky { margin: 0 -1rem; padding: .75rem 1rem; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgba(15,30,20,.08); }
.grid3 { align-items: end; }
.grid3.even { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc { font-weight: 600; color: var(--accent); font-size: .9rem; min-height: 1.2em; }
.calc.bad { color: var(--bad); }
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.fees { border-collapse: collapse; width: 100%; }
table.fees th, table.fees td { padding: .35rem .5rem; border-bottom: 1px solid var(--line2); text-align: left; vertical-align: middle; }
table.fees thead th { font-size: .85rem; font-weight: 700; line-height: 1.25; vertical-align: bottom; }
table.fees thead .muted { font-weight: 500; }
table.fees tbody th { font-weight: 600; white-space: nowrap; }
.grid5 { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr 1.3fr; gap: .75rem; }
.rep-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rep-h h1 { margin: 0; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.cols3 { align-items: start; }
.cols3 .card { padding: .75rem 1rem; }
.tbl tr.tot th, .tbl tr.tot td { border-top: 1px solid var(--line); border-bottom: 0; color: var(--ink); }
.export { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; }
.export h2 { margin: 0 0 .15rem; }
.export p { margin: 0; }
.export > div:last-child { text-align: right; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.grid3 { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: .75rem; }
.grid4 { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1fr 1.2fr; gap: .75rem; }
.rule { display: grid; grid-template-columns: 6.5rem 1fr; gap: .4rem; }
.rate-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.rates { border: 1px solid var(--line2); border-radius: 10px; padding: .5rem .75rem .75rem; margin: 0; }
.rates legend { font-weight: 700; padding: 0 .25rem; }
.rate-line { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .25rem 0; }
.dollar { position: relative; }
.dollar::before { content: "$"; position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.dollar input { width: 4.6rem; min-height: 40px; padding: .3rem .4rem .3rem 1.2rem; border: 1px solid #c4ccc6; border-radius: 8px; text-align: left; }
.list { list-style: none; margin: 0 0 .75rem; padding: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line2); }
.range { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.range .field input { min-height: 40px; }
.presets { display: flex; gap: .35rem; }
.span { margin: 0 0 .5rem; font-weight: 700; color: var(--ink2); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: .5rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; display: flex; flex-direction: column; }
.stat .n { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.stat .l { color: var(--ink2); font-weight: 600; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-weight: 600; color: var(--ink2); padding: .45rem 0; border-bottom: 1px solid var(--line2); }
.tbl td { text-align: right; font-weight: 700; padding: .45rem 0; border-bottom: 1px solid var(--line2); }
.tbl tr.sub th, .tbl tr.sub td { color: var(--muted); font-weight: 600; }
.export p { margin: .25rem 0 .75rem; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login .card { width: min(400px, 100%); padding: 1.5rem; }
.login .form { gap: 1.1rem; }
.login h1 { margin: 0; }
.login .actions { align-items: center; }
.login .acct { margin: 0; font-size: 1.02rem; overflow-wrap: anywhere; }
/* Phase 2: staff role, resend, the rounds card */
.list .acts { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.role-pick select { margin-top: .3rem; min-height: 40px; font-size: .9rem; }
.rounds .cols3 { margin: 0; }
.rounds .tbl { width: 100%; }
.ok-msg { margin: 0; color: var(--ok); font-weight: 600; }
.hint-b { font-size: .9rem; color: var(--ink2); font-weight: 400; }

/* print view, on screen */
.print-page { background: #e9ece9; }
.sheetp { max-width: 8.5in; margin: 1rem auto; }
.sheetp .page { background: #fff; padding: .4in; margin-bottom: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.ps-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; border-bottom: 2px solid #000; padding-bottom: 4px; margin-bottom: 4px; }
.ps-head h1 { font-size: 13pt; margin: 0; line-height: 1.1; }
.ph-day { margin: 0; font-weight: 700; font-size: 10pt; }
.ph-meta { margin: 0; text-align: right; font-size: 8.5pt; color: #000; }
.sheetp table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8.5pt; line-height: 1.1; }
.sheetp col.c1 { width: 12%; } .sheetp col.c2 { width: 8%; } .sheetp col.c3 { width: 34%; } .sheetp col.c4 { width: 7%; } .sheetp col.c5 { width: 9%; } .sheetp col.c6 { width: 25%; } .sheetp col.c7 { width: 5%; }
.sheetp th { text-align: left; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #000; padding: 1px 3px; }
.sheetp td { border-bottom: .5pt solid #999; padding: .75pt 3px; vertical-align: top; overflow-wrap: anywhere; line-height: 9.2pt; height: 9.9pt; color: #000; }
.sheetp td.pnames { font-weight: 700; }
.sheetp .key { color: #000; }
.ps-bar { padding: .5rem 0; }
.sheetp td.pt { font-weight: 800; white-space: nowrap; }
.sheetp tr.pb td { background: #eee; }
.sheetp td.pt .add { font-weight: 600; font-size: 7pt; }
.sheetp .ns { text-decoration: line-through; color: #555; }
.sheetp .pbox span { display: block; width: 7pt; height: 7pt; margin-top: .5pt; border: .75pt solid #000; }
.noprint { margin: 1rem 0; display: flex; gap: .75rem; align-items: center; }

@media print {
  @page { size: letter portrait; margin: .3in .35in; }
  body, .print-page { background: #fff; }
  .noprint, .toast { display: none !important; }
  .sheetp { max-width: none; margin: 0; }
  .sheetp .page { padding: 0; margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  .sheetp .page:last-of-type { break-after: auto; page-break-after: auto; }
  .sheetp tr { break-inside: avoid; page-break-inside: avoid; }
  .sheetp tr.pb td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* narrower: iPad portrait and small laptops */
@media (max-width: 900px) {
  .row { grid-template-columns: 76px 86px 1fr 92px; gap: .5rem; }
  .tools { margin-left: 0; }
  .stats { grid-template-columns: 1fr 1fr; }
  .grid4, .grid5, .row4 { grid-template-columns: 1fr 1fr; }
  .cols3 { grid-template-columns: 1fr 1fr; }
}
/* a phone */
@media (max-width: 600px) {
  body { font-size: 15px; }
  .top { gap: .5rem; padding: 0 .75rem; }
  .who { display: none; }
  .nav a { padding: .5rem; }
  .head { position: static; }
  .daynav { width: 100%; }
  .daytitle { min-width: 0; flex: 1; padding: 0 .25rem; }
  .dl-long { display: none; } .dl-short { display: inline; }
  .tools { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .row { grid-template-columns: 92px 1fr auto; grid-template-areas: "time seats act" "groups groups groups"; padding: .5rem; }
  .daybar { padding-top: .6rem; }
  .c-time { grid-area: time; } .c-seats { grid-area: seats; } .c-act { grid-area: act; } .c-groups { grid-area: groups; }
  .c-groups:empty { display: none; }
  .chip { width: 100%; }
  .chip-main { flex: 1; }
  .drawer { width: 100vw; }
  .pair, .grid2, .grid3, .grid4, .grid5, .row2, .row4, .cols, .cols3 { grid-template-columns: 1fr; }
  .export { flex-direction: column; align-items: flex-start; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat .n { font-size: 1.5rem; }
  .range { flex-direction: column; align-items: stretch; }
}

/* wide screens: one line per group, more tee times on a screen */
@media (min-width: 1200px) {
  .row { min-height: 50px; padding-top: .25rem; padding-bottom: .25rem; }
  .c-groups { gap: .25rem; }
  .chip, .chip-main { min-height: 40px; }
  .chip-main { flex-direction: row; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: .1rem 1rem; padding: .25rem .7rem; }
  .chip .l2, .chip .note, .chip .in-mark { margin: 0; }
}
@media (max-width: 1199px) { .find input { width: 9.5rem; } .daytitle { min-width: 13.5rem; } }
.drawer { bottom: auto; max-height: 100vh; border-bottom-left-radius: 12px; }
@media (max-width: 600px) {
  .chip .st { flex: 0 0 auto; }
  .chip .st > .ci { flex: 0 0 auto; padding: 0 .7rem; }
  .chip .st > .ns-slot { display: none; }
  .calllist { columns: 1; }
}
.lastline { padding: .35rem .5rem; font-size: .85rem; font-weight: 700; color: var(--bad); border-top: 2px solid var(--bad-bg); }
.row.closed { display: none; }
.row.past { min-height: 44px; }
.row.full .add { color: var(--ink); border-color: var(--line); }
.chip .ns.mv { color: var(--warn); font-weight: 700; }
.calllist { columns: 1; margin: .2rem 0 .4rem; }
.drawer .seg-in label span { min-width: 40px; padding: 0 .7rem; }
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 4rem; }
.pw button { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); }
.sheetp .nsw { font-weight: 400; }
@media (max-width: 600px) { .find { width: 100%; } .find input { width: 100%; } }
.drawer.wide { width: min(600px, 100vw); }
.late-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.late-list .g-meta { color: var(--bad); font-weight: 600; }
.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat .s { color: var(--ink2); font-size: 1rem; }
.tbl tr.sep th, .tbl tr.sep td { color: inherit; font-weight: inherit; }
.tbl tr.sep th { color: var(--ink2); }
.row4.two { grid-template-columns: repeat(2, minmax(0, 24rem)); }
.rule { grid-template-columns: 6.5rem minmax(12rem, 1fr); }
.card > h2 + p { margin-top: 0; }
.form.card { gap: .6rem; }
.form.card > h2 { margin-bottom: 0; }
.ranger-page .top .nav a:not([aria-current]) { display: inline-flex; }
.r-time .g-nm { font-size: 1.05rem; }
.chip.squeezed { border-color: var(--line); }
.chip.inside-block { box-shadow: none; border-color: var(--warn-line); }
.inside { display: block; font-weight: 600; }
.fee { margin: .5rem 0 0; font-size: 1rem; color: var(--ink); font-weight: 600; }
.sub.hist { color: var(--ink2); font-weight: 400; }
button.link.tap { min-height: var(--tap); align-self: flex-start; }
@media (min-width: 1200px) {
  .row { grid-template-columns: 92px 104px minmax(0, max-content) 1fr; }
  .c-groups { width: 46rem; max-width: 100%; }
  .c-act { justify-content: flex-start; }
}
.nowline { scroll-margin-top: 175px; }
.twi { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 600; }
.twi select { min-height: var(--tap); padding: 0 .5rem; border: 1px solid #c4ccc6; border-radius: 8px; background: #fff; }
.field input.xs { width: 4.2rem; }
.twi input { min-height: var(--tap); padding: 0 .5rem; border: 1px solid #c4ccc6; border-radius: 8px; }
table.fees { table-layout: fixed; }
table.fees th:first-child { width: 13rem; }
.roles { font-size: 1rem; color: var(--ink2); }
.top button.link[data-logout] { min-height: var(--tap); }
.row.sel { box-shadow: inset 4px 0 0 #2f7de1; background: #f3f8ff; }
.sheetp tr.pband td { font-style: italic; }
button.link.flush { padding-left: 0; padding-right: 0; }
@media (max-width: 600px) {
  .head { position: sticky; top: 0; }
  .lg { display: none; }
  .tools { grid-template-columns: repeat(4, 1fr); gap: .3rem; }
  .tools > * { min-height: 40px; padding: 0 .3rem; font-size: .8rem; white-space: normal; line-height: 1.1; text-align: center; }
  .find input { min-height: 40px; }
  .daybar { padding: .4rem .75rem; gap: .4rem; }
  .banner { padding: .45rem .75rem; font-size: .85rem; }
  .login .actions .primary { width: 100%; }
  .nowline { scroll-margin-top: 285px; }
  .row { scroll-margin-top: 285px; }
}
.twi select { width: auto; flex: 0 0 auto; }
.twi-sun, .twi-clock { display: inline-flex; align-items: center; gap: .35rem; }
.twi-sun[hidden], .twi-clock[hidden] { display: none; }
.asof { font-size: .85rem; font-weight: 600; color: var(--muted); }
.season.ended > :not(.card-h) { display: none; }
.cols3 { align-items: start !important; }
.stats { align-items: start; }
.tbl tr.sep th, .tbl tr.sep td { color: inherit; }
@media (min-width: 1072px) { .owner-page .top { padding-left: calc((100vw - 1040px) / 2 + 1rem); padding-right: calc((100vw - 1040px) / 2 + 1rem); } }
.owner .actions.sticky { margin: 0; }
@media (min-width: 1200px) {
  .row { grid-template-columns: 92px 104px minmax(0, 1fr) 120px; }
  .c-groups { width: auto; }
  .c-act { justify-content: flex-end; }
}
@media (max-width: 600px) { .row .open { display: none; } }
.chip .was { font-size: .78rem; color: var(--muted); }
.chip .st > .ci2 { color: var(--accent); font-weight: 600; }
button.unblock { min-height: var(--tap); margin-left: auto; color: var(--bad); border-color: #e9b8b2; background: #fff; }
.gapline { margin: 0; padding: .6rem .8rem; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 10px; color: var(--warn); font-weight: 600; }
.owner .actions.sticky { justify-content: flex-end; padding: .5rem .75rem; }
@media (max-width: 600px) {
  body.scrolled .find, body.scrolled .tools > :not([data-new]) { display: none; }
  body.scrolled .tools { grid-template-columns: 1fr; }
  .tools > [data-new] { font-size: .85rem; }
}
@media (max-width: 600px) { .summary { white-space: normal; font-size: .8rem; } }
.findbtn, .newmini, .banner .short { display: none; }
@media (max-width: 600px) {
  body.scrolled .summary { display: none; }
  body.scrolled .daytitle { justify-content: center; }
  body.scrolled .findbtn { display: inline-flex; }
  body.scrolled [data-today] { display: none; }
  body.scrolled .banner .full { display: none; }
  body.scrolled .banner .short { display: inline; }
  body.scrolled .tools { display: none; }
  body.scrolled .newmini { display: inline-flex; margin-left: auto; min-height: 40px; padding: 0 .9rem; }
  body.scrolled .daytitle { flex: 1 1 auto; }
  body.scrolled.finding .find { display: flex; }
  .daynav .icon { flex: 0 0 40px; width: 40px; min-height: 40px; }
}
@media (max-width: 600px) { .daytitle { min-width: 0 !important; } }
.chip .l1 { flex-wrap: wrap; row-gap: 0; }
.chip .nm, .chip .ph, .chip .was { white-space: nowrap; }

/* Track E (r11): the phone header is one row.  The club's short mark, the
   screens and Log out each on one line, every tap target 44 px. */
.brand .b-short, .nav .n-short { display: none; }
.nav a { min-height: var(--tap); white-space: nowrap; }
.top .live { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 600px) {
  .top { gap: .15rem; padding: 0 .5rem 0 .65rem; min-height: 56px; flex-wrap: nowrap; }
  .brand { flex: 1 1 auto; min-width: 0; margin-right: 0; font-size: 1rem; line-height: var(--tap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand .b-full { display: none; } .brand .b-short { display: inline; }
  .nav { flex: 0 0 auto; gap: 0; }
  .nav a { padding: 0 .45rem; }
  .who, .ranger-page .top .who { display: none; }
  .top button.link[data-logout] { flex: 0 0 auto; white-space: nowrap; padding: 0 .3rem; }
  .top .live { padding: .2rem .5rem; font-size: .75rem; }
  .top .live::before { margin-right: .3rem; }
  .nav.has-settings .n-long { display: none; } .nav.has-settings .n-short { display: inline; }
}
@media (max-width: 374px) {
  .top .live { font-size: 0; padding: .35rem; } .top .live::before { margin: 0; }
}
/* Track E (r11): the starter sheet marks a fivesome and shows open times lighter. */
.sheetp tr.pover td.pp b { font-weight: 900; text-decoration: underline; }
.sheetp tr.popen td.pt { font-weight: 400; color: #444; }
.sheetp .popen-w { font-weight: 400; font-style: italic; color: #444; }
.sheetp .ph9 { font-weight: 400; }
/* Track E (r11): the frost drawer reads at counter distance; the call list is what staff dial from. */
.preview { font-size: 1rem; }
.preview .calllist { font-size: 1rem; color: var(--ink); }
.preview .warn { font-weight: 500; color: var(--ink); }
.preview details summary { min-height: var(--tap); display: flex; align-items: center; }
/* Track E: the owner screens on a phone (first shot at 390 in r12). */
.list .acts button.danger { color: var(--bad); border-color: #e9b8b2; }
@media (max-width: 600px) {
  .tabs { gap: 0; padding: .25rem .5rem 0; }
  .tabs a { padding: .75rem .55rem; font-size: .95rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats .stat:nth-child(3):last-child { grid-column: 1 / -1; }
  .row4.two { grid-template-columns: 1fr; }
  .hol-add { flex-wrap: wrap; }
  .twi { row-gap: .4rem; }
  table.fees { table-layout: auto; width: max-content; min-width: 100%; }
  table.fees th:first-child { width: auto; position: sticky; left: 0; z-index: 1; background: var(--card); }
  table.fees td { min-width: 6.5rem; }
  table.fees thead th { min-width: 6.5rem; }
  #staff-list > li { flex-direction: column; align-items: stretch; gap: .5rem; }
  #staff-list > li > span:first-child { overflow-wrap: anywhere; }
  #staff-list .acts { justify-content: flex-start; }
  #staff-list .role-pick select { width: 100%; min-height: var(--tap); }
  .grid3.even { grid-template-columns: 1fr; }   /* r12: the booking rules were three narrow columns at 390 */
  button.sm { min-height: var(--tap); }
}