/* ============================================================
   TEE SNIPER — design system
   A scope on the tee sheet at dawn: evergreen plaque, brass
   fittings, scorecard paper. Fraunces for engraving, Karla
   for everything spoken.
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('/static/fonts/karla-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --green-950: #0a2415;
  --green-900: #11321f;        /* the plaque */
  --green-700: #1d4a2f;
  --green-600: #2c5e3e;
  --ink: #22382a;              /* green-tinted reading ink */
  --muted: #68755f;
  --paper: #f3eee1;            /* parchment */
  --card: #fdfbf3;             /* cream card stock */
  --line: #ddd5bf;             /* hairline rules */
  --brass: #c9a14e;
  --brass-deep: #a8823a;
  --brass-pale: #e9d6a8;
  --pennant: #b8442e;          /* flag red */
  --pennant-soft: #f6e3dc;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Karla', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
/* faint paper grain over everything */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: .4; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.35 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- the plaque (header) ---------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, var(--green-700) 0%, var(--green-900) 70%);
  color: var(--brass-pale);
  padding: .7rem 1.1rem;
  padding-top: max(.7rem, env(safe-area-inset-top));
  position: relative;
}
/* the dawn line: sunrise burning along the plaque's lower edge */
header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg,
    var(--pennant) 0%, var(--brass) 30%, var(--brass-pale) 50%,
    var(--brass) 70%, var(--green-900) 100%);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none;
         color: inherit; }
.brand img { width: 34px; height: 34px; border-radius: 50%;
             box-shadow: 0 0 0 1px rgba(233, 214, 168, .35); }
header h1 {
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  margin: 0; letter-spacing: .02em; color: var(--brass-pale);
}
header h1 .the { font-weight: 600; font-style: normal; opacity: .75;
                 font-size: .82em; letter-spacing: .08em; }
header nav { display: flex; gap: 1.1rem; }
header nav a {
  color: var(--brass-pale); text-decoration: none; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
header nav a:hover { border-bottom-color: var(--brass); }

main { max-width: 960px; margin: 1.6rem auto; padding: 0 1rem; }

/* staggered settle on load */
main > * { animation: settle .45s cubic-bezier(.2,.7,.3,1) both; }
main > :nth-child(2) { animation-delay: .05s; }
main > :nth-child(3) { animation-delay: .1s; }
main > :nth-child(4) { animation-delay: .15s; }
main > :nth-child(5) { animation-delay: .2s; }
main > :nth-child(n+6) { animation-delay: .25s; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { main > * { animation: none; } }

h2 { font-family: var(--display); font-weight: 700; color: var(--green-900); }

/* ---------- banners ---------- */
.banner { padding: .6rem 1rem; border-radius: 6px; font-size: .9rem; }
.banner.warn {
  background: var(--card); color: var(--pennant);
  border: 1.5px dashed var(--pennant); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; font-size: .76rem;
}
.error { background: var(--pennant-soft); border: 1px solid #e4b3a5;
         color: #7c3322; padding: .5rem .8rem; border-radius: 6px; }

/* ---------- tables (desktop request sheet) ---------- */
table { width: 100%; border-collapse: collapse; background: var(--card);
        border: 1px solid var(--line); font-size: .92rem; }
th, td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--line); }
th { font-family: var(--body); font-size: .7rem; text-transform: uppercase;
     letter-spacing: .12em; color: var(--muted); background: #efe9d8;
     border-bottom: 2px solid var(--brass); }
td.detail { font-size: .85rem; color: var(--muted); max-width: 28rem; }
tr.status-booked td { background: #eef3e6; }
tr.status-failed td { background: var(--pennant-soft); }
tr.status-cancelled { opacity: .5; }

/* ---------- buttons ---------- */
button {
  font-family: var(--body); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .1em;
  background: var(--green-900); color: var(--brass-pale);
  border: 1px solid var(--green-950); border-radius: 6px;
  padding: .6rem 1.2rem; cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease;
}
button:hover { box-shadow: 0 0 0 2px var(--brass) inset; }
button:active { transform: scale(.97); }
button.small { padding: .3rem .7rem; font-size: .7rem; }
button.danger { background: var(--pennant); color: #fdf3ef; border-color: #8e3322; }
button.secondary { background: transparent; color: var(--green-900);
                   border: 1px solid var(--green-700); }
button.secondary:hover { box-shadow: 0 0 0 1px var(--green-700) inset; }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- forms ---------- */
.request-form { display: grid; gap: .85rem; max-width: 26rem; background: var(--card);
                padding: 1.2rem; border: 1px solid var(--line); border-radius: 8px; }
.request-form label { display: grid; gap: .3rem; font-weight: 700; font-size: .72rem;
                      text-transform: uppercase; letter-spacing: .1em;
                      color: var(--muted); min-width: 0; }
.request-form input, .request-form select {
  font-family: var(--body); padding: .5rem; border: 1px solid var(--line);
  border-radius: 5px; font-size: 1rem; width: 100%; min-width: 0;
  background: #fff; color: var(--ink);
}
.request-form input:focus, .request-form select:focus, .guest-add input:focus {
  outline: 2px solid var(--brass); outline-offset: 0;
}

/* ---------- calendar ---------- */
.cal-header { display: flex; align-items: center; justify-content: center;
              gap: 1.2rem; margin: .4rem 0 1rem; }
.cal-header h2 { margin: 0; min-width: 12rem; text-align: center;
                 font-size: 1.6rem; letter-spacing: .01em; }
.cal-nav { font-size: 1.3rem; text-decoration: none; color: var(--brass-deep);
           padding: .1rem .6rem; border-radius: 6px; font-family: var(--display); }
.cal-nav:hover { background: #ece5d2; color: var(--green-900); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-daynames { margin-bottom: 5px; text-align: center; font-weight: 700;
                font-size: .66rem; color: var(--muted);
                text-transform: uppercase; letter-spacing: .14em; }
.day { background: var(--card); min-height: 5.2rem; border-radius: 6px;
       padding: .3rem .4rem; position: relative;
       border: 1px solid var(--line);
       display: flex; flex-direction: column; gap: 2px; }
.day .num { font-family: var(--display); font-size: .95rem; font-weight: 600;
            color: var(--green-900); }
.day.other { opacity: .35; }
.day.past { background: transparent; border-color: #e6e0cd; }
.day.past .num { color: var(--muted); }
.day.today .num {
  background: var(--green-900); color: var(--brass-pale); border-radius: 50%;
  width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center;
  justify-content: center; box-shadow: 0 0 0 1.5px var(--brass);
}
.day.soon { background: #f6ecd6; border-color: #e4d5ad; }
.day.bookable { cursor: pointer; border-color: #c8d3b9; }
.day.bookable:hover { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.day .add-hint { position: absolute; right: .45rem; bottom: .2rem;
                 color: #c5cdb4; font-size: 1.05rem; font-weight: 700;
                 font-family: var(--body); }
.day.bookable:hover .add-hint { color: var(--brass-deep); }

.chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chip { font-size: .66rem; line-height: 1.3; border-radius: 3px; padding: 1.5px 5px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        font-weight: 700; letter-spacing: .02em; }
.chip-pending { background: #f1e3c0; color: #6d5417; }
.chip-booked, .chip-confirmed { background: var(--green-700); color: #eaf2e4; }
.chip-failed { background: var(--pennant); color: #fdf3ef; }

.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: .9rem 0 .4rem;
          font-size: .76rem; color: var(--muted); align-items: center; }
.swatch { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px;
          vertical-align: -2px; margin-right: .3rem; }
.sw-bookable { background: var(--card); border: 1px solid #c8d3b9; }
.sw-soon { background: #f6ecd6; border: 1px solid #e4d5ad; }

.list-title { margin-top: 1.8rem; }

/* ---------- Tee-On sync bar ---------- */
.sync-bar { display: flex; align-items: center; gap: .8rem; margin: .2rem 0 1.4rem;
            font-size: .78rem; color: var(--muted); }
.sync-status.sync-error { color: var(--pennant); font-weight: 700; }

/* ---------- request cards (mobile + admin) ---------- */
.req-cards { display: none; }
.req-card { background: var(--card); border: 1px solid var(--line);
            border-left: 4px solid var(--line); border-radius: 8px;
            padding: .8rem .9rem; display: grid; gap: .55rem; }
.req-card.status-pending { border-left-color: var(--brass); }
.req-card.status-booked { border-left-color: var(--green-700); }
.req-card.status-failed { border-left-color: var(--pennant); }
.req-card.status-cancelled { opacity: .55; }
.req-card-head { display: flex; align-items: center; gap: .55rem; }
.req-card-icon { font-size: 1.1rem; }
.req-card-title { display: grid; line-height: 1.25; min-width: 0; flex: 1; }
.req-card-title strong { font-family: var(--display); font-size: 1.05rem;
                         color: var(--green-900); }
.req-card-course { font-size: .8rem; color: var(--muted); }
.req-badge { font-size: .68rem; font-weight: 700; border-radius: 999px;
             padding: .28rem .7rem; white-space: nowrap;
             text-transform: uppercase; letter-spacing: .08em; }
.req-badge-pending { background: #f1e3c0; color: #6d5417; }
.req-badge-booked { background: var(--green-700); color: #eaf2e4; }
.req-badge-failed { background: var(--pennant); color: #fdf3ef; }
.req-badge-cancelled { background: #e3decd; color: var(--muted); }
.req-card-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem;
                 font-size: .88rem; color: var(--ink); }
.req-card-meta small { color: var(--muted); }
.req-card-detail { font-size: .8rem; color: var(--ink); background: #efe9d8;
                   border-radius: 6px; padding: .45rem .6rem;
                   border-left: 2px solid var(--brass); }
.req-card-cancel { width: 100%; }

/* ---------- dialogs ---------- */
dialog.sheet { border: 1px solid var(--line); border-top: 3px solid var(--brass);
               border-radius: 10px; padding: 0;
               box-shadow: 0 14px 50px rgba(10, 36, 21, .35);
               width: min(26rem, 92vw); background: var(--card); }
dialog.sheet::backdrop { background: rgba(10, 36, 21, .55); }
dialog.sheet .request-form { border: 0; max-width: none; background: none; }
dialog.sheet h3 { margin: 0; font-family: var(--display); font-size: 1.25rem;
                  color: var(--green-900); }
.modal-date { margin: 0; color: var(--brass-deep); font-weight: 700;
              font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.time-row { display: flex; gap: .6rem; }
.time-row label { flex: 1; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; }

/* ---------- who's-playing widget ---------- */
.players-widget { border: 1px solid var(--line); border-radius: 8px;
                  padding: .65rem .75rem; display: grid; gap: .55rem;
                  background: #faf6ea; min-width: 0; }
.players-widget-head { display: flex; justify-content: space-between;
                       font-weight: 700; font-size: .72rem; min-width: 0;
                       text-transform: uppercase; letter-spacing: .1em;
                       color: var(--muted); }
.spots-info { color: var(--brass-deep); font-weight: 700; font-size: .72rem;
              white-space: nowrap; text-transform: none; letter-spacing: .02em; }
.player-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pchip { background: var(--card); border: 1px solid var(--line);
         border-radius: 999px; padding: .32rem .8rem; font-size: .85rem;
         cursor: pointer; color: var(--ink); font-family: var(--body);
         font-weight: 500; text-transform: none; letter-spacing: 0;
         transition: all .12s ease; }
.pchip:hover:not(:disabled) { border-color: var(--brass); box-shadow: none; }
.pchip:disabled { opacity: .4; cursor: not-allowed; }
.pchip.on { background: var(--green-900); border-color: var(--green-900);
            color: var(--brass-pale); }
.pchip-guest { padding-right: .65rem; }
.guest-add { display: flex; gap: .4rem; }
.guest-add input { flex: 1; min-width: 0; padding: .4rem .55rem;
                   border: 1px solid var(--line); border-radius: 5px;
                   font-size: .9rem; font-family: var(--body); background: #fff; }

/* ---------- course crests ---------- */
.course-picker { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.course-opt { cursor: pointer; border: 1px solid var(--line); border-radius: 10px;
              padding: .7rem .5rem .6rem; display: grid; justify-items: center;
              gap: .45rem; background: #fff; transition: all .12s ease;
              font-weight: 700; font-size: .78rem; text-transform: none;
              letter-spacing: .01em; color: var(--ink); text-align: center;
              position: relative; }
/* visually hidden but anchored inside the label, so focusing it never scrolls */
.course-opt input { position: absolute; inset: 0; width: 100%; height: 100%;
                    opacity: 0; pointer-events: none; margin: 0; }
.course-opt img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
                  box-shadow: 0 0 0 1px var(--line); filter: saturate(.35) opacity(.75);
                  transition: all .15s ease; }
.course-opt:has(input:checked) { border-color: var(--brass);
                                 box-shadow: 0 0 0 1.5px var(--brass);
                                 background: #faf6ea; }
.course-opt:has(input:checked) img { filter: none;
                                     box-shadow: 0 0 0 2px var(--brass); }
.course-opt:hover img { filter: none; }

.entry-crest { width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
               vertical-align: -7px; margin-right: .35rem;
               box-shadow: 0 0 0 1px var(--line); }
.req-card-crest { width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
                  box-shadow: 0 0 0 1.5px var(--line); flex-shrink: 0; }
.table-crest { width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
               vertical-align: -7px; margin-right: .4rem;
               box-shadow: 0 0 0 1px var(--line); }
td.course-cell { white-space: nowrap; }

/* ---------- the Newman protocol ---------- */
.newman-check { padding: 1.2rem; display: grid; gap: .8rem; }
.newman-check h3 { margin: 0; font-family: var(--display); font-size: 1.45rem;
                   color: var(--green-900); }
.newman-report { margin: 0; font-size: .92rem; color: var(--ink);
                 background: var(--pennant-soft); border-left: 2px solid var(--pennant);
                 border-radius: 6px; padding: .55rem .7rem; }
.newman-report em { font-style: italic; }
.newman-question { margin: 0; font-weight: 700; }
/* cleared to play (allegedly) */
.pchip.newman-cleared.on::after { content: ' 🩹'; }

/* ---------- day-details sheet ---------- */
.day-details { padding: 1.2rem; display: grid; gap: .8rem; }
.day-details h3 { margin: 0; }
.day-entry { border: 1px solid var(--line); border-radius: 8px;
             padding: .65rem .75rem; display: grid; gap: .3rem;
             background: #faf6ea; }
.day-entry-head { display: flex; justify-content: space-between;
                  align-items: center; gap: .5rem; }
.day-entry-head strong { font-size: .95rem; }
.day-entry-status { color: var(--brass-deep); font-size: .68rem; font-weight: 700;
                    text-transform: uppercase; letter-spacing: .1em; }
.day-entry-meta { font-size: .85rem; color: var(--muted); }
.day-entry-detail { font-size: .8rem; color: var(--ink); background: #efe9d8;
                    border-radius: 6px; padding: .4rem .55rem;
                    border-left: 2px solid var(--brass); }

/* ---------- admin: run history ---------- */
.muted { color: var(--muted); font-size: .85rem; }
.admin-gate { max-width: 22rem; background: var(--card); padding: 1.4rem;
              border: 1px solid var(--line); border-top: 3px solid var(--brass);
              border-radius: 10px; margin: 2rem auto; }
.admin-gate h2 { margin-top: 0; }
.admin-gate form { display: grid; gap: .8rem; }
.admin-gate input { padding: .55rem; border: 1px solid var(--line);
                    border-radius: 5px; font-size: 1rem; font-family: var(--body);
                    background: #fff; }

.run-list { display: grid; gap: .6rem; margin-top: 1rem; }
.run-row { display: flex; justify-content: space-between; gap: 1rem;
           background: var(--card); border: 1px solid var(--line);
           border-radius: 8px; padding: .75rem .9rem; text-decoration: none;
           color: var(--ink); }
.run-row:hover { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.run-row-main { display: grid; gap: .15rem; min-width: 0; }
.run-row-main strong { font-family: var(--display); color: var(--green-900); }
.run-detail { font-size: .8rem; color: var(--muted); overflow: hidden;
              text-overflow: ellipsis; display: -webkit-box;
              -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.run-row-side { text-align: right; white-space: nowrap; display: grid;
                gap: .15rem; align-content: start; font-size: .85rem; }

.gallery { display: grid; gap: 1.2rem; margin-top: 1.2rem; }
.gallery figure { margin: 0; background: var(--card); border: 1px solid var(--line);
                  border-radius: 8px; padding: .7rem; }
.gallery img { width: 100%; height: auto; border: 1px solid var(--line);
               border-radius: 4px; }
.gallery figcaption { font-size: .8rem; color: var(--muted); margin-top: .45rem; }

/* ---------- login ---------- */
.login-page { display: grid; place-items: center; min-height: 100dvh;
              background:
                radial-gradient(120% 80% at 50% -10%,
                  rgba(201, 161, 78, .18), transparent 60%),
                var(--paper); }
.login-box { background: var(--card); padding: 2.2rem 2rem;
             border: 1px solid var(--line); border-top: 3px solid var(--brass);
             border-radius: 12px; text-align: center;
             box-shadow: 0 18px 60px rgba(10, 36, 21, .18);
             width: min(21rem, 92vw);
             animation: settle .5s cubic-bezier(.2,.7,.3,1) both; }
.login-box .badge { width: 88px; height: 88px; border-radius: 50%;
                    margin-bottom: .9rem;
                    box-shadow: 0 6px 24px rgba(10, 36, 21, .35); }
.login-box h1 { font-family: var(--display); font-weight: 700; font-size: 1.7rem;
                margin: 0 0 .2rem; color: var(--green-900); }
.login-box h1 .the { font-weight: 600; opacity: .7; font-size: .8em; }
.login-box .tagline { margin: 0 0 1.2rem; color: var(--brass-deep);
                      font-size: .7rem; font-weight: 700;
                      text-transform: uppercase; letter-spacing: .22em; }
.login-box form { display: grid; gap: .8rem; }
.login-box input { padding: .6rem; border: 1px solid var(--line); border-radius: 6px;
                   font-size: 1rem; font-family: var(--body); text-align: center;
                   background: #fff; }
.login-box input:focus { outline: 2px solid var(--brass); }

/* ============================================================
   mobile (≤640px)
   ============================================================ */
@media (max-width: 640px) {
  main { margin: .9rem auto; padding: 0 .55rem; }
  header { padding: .55rem .8rem; padding-top: max(.55rem, env(safe-area-inset-top)); }
  header h1 { font-size: 1.1rem; }
  header nav { gap: .8rem; }
  .brand img { width: 28px; height: 28px; }

  /* calendar: compact cells, chips collapse to colored dots */
  .cal-grid { gap: 2px; }
  .cal-header h2 { font-size: 1.35rem; }
  .day { min-height: 3.1rem; padding: .2rem .25rem; border-radius: 5px; }
  .day .num { font-size: .85rem; }
  .day.today .num { width: 1.3rem; height: 1.3rem; font-size: .78rem; }
  .chips { flex-direction: row; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
  .chip { width: .55rem; height: .55rem; padding: 0; border-radius: 50%;
          font-size: 0; }
  .chip .chip-text { display: none; }
  .chip-pending { background: var(--brass); }
  .chip-booked, .chip-confirmed { background: var(--green-700); }
  .chip-failed { background: var(--pennant); }
  .add-hint { display: none; }
  .legend { gap: .4rem .9rem; font-size: .7rem; }

  /* dialogs become bottom sheets */
  dialog.sheet { margin: auto 0 0 0; width: 100vw; max-width: 100vw;
                 border-radius: 16px 16px 0 0; border-left: 0; border-right: 0;
                 border-bottom: 0; max-height: 92dvh; overflow-y: auto; }
  .request-form, .day-details { padding: 1rem .9rem
                                calc(1rem + env(safe-area-inset-bottom)); }

  /* form ergonomics: ≥16px inputs stop iOS auto-zoom; bigger touch targets */
  .request-form input, .request-form select, .guest-add input { font-size: 16px; }
  .request-form input[type=time] { padding: .5rem .3rem; }
  .time-row { flex-wrap: wrap; }
  .time-row label:first-child { flex-basis: 100%; }
  .pchip { padding: .5rem .9rem; font-size: .95rem; }
  button { padding: .7rem 1.2rem; }
  button.small { padding: .45rem .8rem; }
  .modal-actions button { flex: 1; }

  /* request list: stacked cards replace the table — no sideways scrolling */
  .table-wrap { display: none; }
  .req-cards { display: grid; gap: .6rem; }

  .run-row { flex-direction: column; gap: .3rem; }
  .run-row-side { text-align: left; display: flex; gap: .8rem; }
}