/* Chalkline — shared styles. Tailwind handles layout; this file holds the turf motif and stateful UI. */
:root{
  --turf:#1E7A46; --turf-deep:#155E35; --ink:#0D2B1C; --chalk:#F5F7F0;
  --mist:#E3ECE1; --amber:#F0A500; --red:#D23B2E; --line:rgba(255,255,255,.55);
}
html{scroll-behavior:smooth}
[hidden]{display:none!important}
body{font-family:'Barlow',system-ui,sans-serif;color:var(--ink);background:var(--chalk);-webkit-font-smoothing:antialiased}
.font-display{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;letter-spacing:.005em}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Signature motif: mown-turf stripes + chalk markings */
.turf{background:repeating-linear-gradient(90deg,var(--turf) 0 72px,var(--turf-deep) 72px 144px);color:var(--chalk)}
.turf-h{background:repeating-linear-gradient(0deg,var(--turf) 0 56px,var(--turf-deep) 56px 112px);color:var(--chalk)}
.chalk-rule{height:3px;background:var(--chalk);opacity:.85}
.touchline{border-left:4px solid var(--turf)}
.pitch-svg line,.pitch-svg rect,.pitch-svg circle,.pitch-svg path{fill:none;stroke:var(--line);stroke-width:2.5}
.pitch-svg .dot{fill:var(--line);stroke:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;border-radius:999px;padding:.8rem 1.4rem;transition:background .15s,color .15s,transform .1s;cursor:pointer;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{background:#ffb81f}
.btn-turf{background:var(--turf);color:var(--chalk)}
.btn-turf:hover{background:var(--turf-deep)}
.btn-ghost{border:2px solid currentColor}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* Form fields */
.field{min-height:46px;width:100%;border:1.5px solid #c9d6c8;background:#fff;border-radius:10px;padding:.7rem .85rem;color:var(--ink)}
.field:focus{border-color:var(--turf);outline:none;box-shadow:0 0 0 3px rgba(30,122,70,.18)}
.field.invalid{border-color:var(--red)}
.err{color:var(--red);font-size:.85rem;margin-top:.25rem}

/* Slot board — football card metaphor: open / peak / 1 left (yellow) / booked (red) */
.slot{position:relative;border:1.5px solid #bcd0bd;background:#fff;border-radius:10px;padding:.55rem .6rem;text-align:left;transition:background .12s,border-color .12s}
.slot:hover:not([disabled]){border-color:var(--turf)}
.slot .t{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:1.25rem;line-height:1}
.slot .p{font-size:.8rem;color:#3e5a49}
.slot.peak{border-top:4px solid var(--amber)}
.slot.last::after{content:"";position:absolute;top:8px;right:8px;width:9px;height:12px;border-radius:2px;background:var(--amber)}
.slot.booked{background:repeating-linear-gradient(135deg,#f3dedb 0 6px,#fbeeec 6px 12px);border-color:#e8bdb7;color:#8d4a42;cursor:not-allowed}
.slot.booked::after{content:"";position:absolute;top:8px;right:8px;width:9px;height:12px;border-radius:2px;background:var(--red)}
.slot.past{opacity:.35;cursor:not-allowed}
.slot.sel{background:var(--turf);border-color:var(--turf);color:var(--chalk)}
.slot.sel .p{color:#d6ecdc}

/* Hero scoreboard */
.board{background:#0F3A24;border:3px solid var(--chalk);border-radius:14px;color:var(--chalk)}
.board .cell{background:rgba(255,255,255,.06);border-radius:8px}
.board .cell.open:hover{background:rgba(240,165,0,.22)}

.chip{border:1.5px solid #bcd0bd;border-radius:999px;padding:.45rem .95rem;font-weight:600;background:#fff}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--chalk)}

.datecell{min-width:74px;border:1.5px solid #bcd0bd;border-radius:12px;background:#fff;padding:.5rem .4rem;text-align:center}
.datecell[aria-pressed="true"]{background:var(--ink);color:var(--chalk);border-color:var(--ink)}

.scroll-x{overflow-x:auto;scrollbar-width:thin}

/* Ticket (confirmation) */
.ticket{background:#fff;border-radius:18px;position:relative}
.ticket .perf{border-top:2px dashed #c9d6c8}

/* Toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);background:var(--ink);color:var(--chalk);padding:.8rem 1.2rem;border-radius:12px;z-index:90;transition:transform .25s;max-width:90vw}
#toast.show{transform:translate(-50%,0)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(13,43,28,.6);display:none;align-items:center;justify-content:center;padding:1rem;z-index:80}
.modal.open{display:flex}
.modal>div{background:var(--chalk);border-radius:18px;max-width:520px;width:100%;max-height:90vh;overflow:auto}

/* FAQ */
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details[open] .plus{transform:rotate(45deg)}
.plus{transition:transform .15s}

/* Dashboard heatmap */
.heat{border-radius:4px;aspect-ratio:1/1}

/* Custom dropdown */
.dd-btn{cursor:pointer;min-width:0}
.dd-btn[aria-expanded="true"]{border-color:var(--turf);box-shadow:0 0 0 3px rgba(30,122,70,.18)}
.dd-opt.dd-active{background:var(--mist)}
.dd-opt[aria-selected="true"]{font-weight:700}
.dd-opt .dd-tick{visibility:hidden}
.dd-opt[aria-selected="true"] .dd-tick{visibility:visible}
.board .dd-btn,.board .dd-list{color:var(--ink)}

/* Date strip arrows (desktop) */
.strip-wrap{position:relative}
.strip-btn{width:44px;height:44px;border-radius:999px;background:#fff;border:2px solid var(--ink);place-items:center;flex-shrink:0;transition:opacity .15s,background .15s}
.strip-btn:hover:not([disabled]){background:var(--ink);color:var(--chalk)}
.strip-btn[disabled]{opacity:.25;cursor:default}
@media (min-width:768px){
  .strip-fade::before,.strip-fade::after{content:"";position:absolute;top:0;bottom:8px;width:40px;pointer-events:none;z-index:1;transition:opacity .15s}
  .strip-fade::before{left:0;background:linear-gradient(90deg,var(--chalk),rgba(245,247,240,0))}
  .strip-fade::after{right:0;background:linear-gradient(270deg,var(--chalk),rgba(245,247,240,0))}
  .strip-fade.at-start::before,.strip-fade.at-end::after{opacity:0}
}

/* Checkbox + radio (replaces native look site-wide) */
input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;width:1.25rem;height:1.25rem;flex-shrink:0;border:2px solid #9fb5a4;background:#fff;display:inline-grid;place-content:center;vertical-align:-.2em;cursor:pointer;transition:background .12s,border-color .12s}
input[type=checkbox]{border-radius:6px}
input[type=radio]{border-radius:999px}
input[type=checkbox]:checked{background:var(--turf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F7F0' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/80% no-repeat;border-color:var(--turf)}
input[type=radio]:checked{border-color:var(--turf);box-shadow:inset 0 0 0 4px #fff;background:var(--turf)}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--turf)}

/* Number fields: hide browser spinners (custom steppers added in app.js) */
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
.dp-day:focus-visible,.dp-nav:focus-visible{outline:3px solid var(--amber);outline-offset:1px}

/* Accounts — Chalkline style: chunky scoreboard menu, jersey-number avatar */
.acc-btn{display:inline-flex;align-items:center;gap:.45rem;height:44px;padding:0 .4rem;border-radius:999px;font-weight:600}
.acc-btn:hover{background:rgba(13,43,28,.07)}
.acc-av{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:var(--turf);color:var(--chalk);font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:1rem;border:2px solid var(--ink)}
.acc-menu{position:absolute;right:0;top:calc(100% + 10px);width:min(16rem,calc(100vw - 1.5rem));background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:14px;overflow:hidden;z-index:70;box-shadow:6px 6px 0 var(--ink)}
.acc-menu a,.acc-menu button{display:flex;width:100%;padding:.7rem 1rem;font-weight:600;text-align:left}
.acc-menu a:hover,.acc-menu button:hover,.acc-menu a:focus-visible,.acc-menu button:focus-visible{background:var(--mist)}
.acc-head{padding:.9rem 1rem;background:repeating-linear-gradient(90deg,var(--turf) 0 36px,var(--turf-deep) 36px 72px);color:var(--chalk)}
.acc-role{display:inline-block;margin-top:.4rem;font-size:.7rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;background:var(--amber);color:var(--ink)}
.acc-login{display:inline-flex;align-items:center;gap:.4rem;height:44px;padding:0 1rem;border-radius:999px;border:2px solid var(--ink);font-weight:700}
.acc-login:hover{background:var(--ink);color:var(--chalk)}
.auth-modal{position:fixed;inset:0;z-index:95;background:rgba(13,43,28,.6);display:flex;align-items:center;justify-content:center;padding:1rem}
.auth-modal>div{background:var(--chalk);width:100%;max-width:440px;max-height:92vh;overflow:auto;border-radius:18px;padding:1.6rem;border:3px solid var(--ink)}
.demo-box{background:#fff;border:2px dashed var(--turf);border-radius:12px;padding:.9rem 1rem;font-size:.92rem}
.demo-box code{font-family:ui-monospace,Menlo,monospace;background:var(--mist);padding:0 .3rem;border-radius:4px}

@media (max-width:639px){.acc-login span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.acc-login{padding:0 .7rem}}

/* Very small phones: long button labels wrap instead of widening the page */
.btn{max-width:100%}
@media (max-width:380px){.btn{white-space:normal;text-align:center;line-height:1.2;padding-top:.7rem;padding-bottom:.7rem}}
@media (max-width:380px){.text-5xl{font-size:2.6rem}.text-6xl{font-size:3rem}h1,h2{overflow-wrap:break-word}}