/* Shared visual language across every page -- same variable names and values as
   webapp.py's page() shell, so the web app and the desktop tool feel like one
   product rather than two. */
/* --line is the quiet border on cards and inputs. --rule is deliberately stronger:
   it separates ROWS of data inside a dense grid, where a border faint enough to be
   tasteful around a card is invisible between two rows of numbers. */
:root { color-scheme: light dark; --fg:#1a1a1a; --bg:#fafafa; --card:#fff;
        --line:#e2e2e2; --rule:#c4c4c4; --muted:#666; --accent:#1b7a3d; --warn:#b25b00; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#e8e8e8; --bg:#161616; --card:#1f1f1f; --line:#333; --rule:#4a4a4a;
          --muted:#999; --accent:#4bbf6b; --warn:#e59a4a; } }

* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       background:var(--bg); color:var(--fg); padding-bottom:5.5rem; }
h1 { font-size:1.4rem; margin:1rem 0 .5rem; }
h2 { font-size:1.05rem; margin:1.4rem 0 .5rem; }
a { color:var(--accent); }
.muted { color:var(--muted); }
.warn { color:var(--warn); }
.err { color:#c0392b; }
main { max-width:640px; margin:0 auto; padding:1rem 1rem 2rem; }

.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
        padding:1rem; margin:.8rem 0; }
.stat { text-align:center; }
.stat .big { font-size:1.6rem; font-weight:700; }
.stat .lbl { font-size:.72rem; color:var(--muted); text-transform:uppercase;
             letter-spacing:.05em; margin-top:.15rem; }
.statrow { display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.3rem; }
.statrow .stat { flex:0 0 6.5rem; }

label { display:block; font-size:.85rem; color:var(--muted); margin:.6rem 0 .25rem; }
input, select, textarea, button {
  font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--fg); width:100%;
}
textarea { min-height:4rem; resize:vertical; }
button { cursor:pointer; background:var(--accent); color:#fff; border-color:var(--accent);
         font-weight:600; width:auto; padding:.55rem 1.1rem; }
button.ghost { background:transparent; color:var(--fg); border-color:var(--line); font-weight:500; }
button:disabled { opacity:.5; cursor:default; }
button.full { width:100%; }

.row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.row.spread { justify-content:space-between; }

.pill { display:inline-block; font-size:.7rem; padding:.1rem .5rem; border-radius:999px;
        border:1px solid var(--line); color:var(--muted); }
.pill.personal { border-color:var(--accent); color:var(--accent); }
.pill.ai { border-color:#8b7cf6; color:#8b7cf6; border-style:dashed; }
.finding { border-left:3px solid var(--accent); padding-left:1rem; margin:1rem 0; }

.field-err { color:#c0392b; font-size:.8rem; margin-top:.2rem; }
.spinner { display:inline-block; width:.9rem; height:.9rem; border:2px solid var(--line);
           border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite;
           vertical-align:-2px; margin-right:.4rem; }
@keyframes spin { to { transform:rotate(360deg); } }

/* bottom nav. Padding on left/right (not just bottom) keeps the outer Home/Profile
   tabs clear of an iPhone's rounded screen corners -- env(safe-area-inset-*) is 0 on
   a rectangular-corner device, so this costs nothing there. */
#nav { position:fixed; bottom:0; left:0; right:0; background:var(--card);
       border-top:1px solid var(--line); display:flex; z-index:10;
       padding:0 max(.4rem, env(safe-area-inset-left)) env(safe-area-inset-bottom)
               max(.4rem, env(safe-area-inset-right)); }
.bnav-item { flex:1; display:flex; flex-direction:column; align-items:center;
             justify-content:center; gap:3px; padding:.65rem .2rem .6rem;
             min-height:3.4rem; font-size:.66rem; font-weight:500; color:var(--muted);
             text-decoration:none; border-top:2px solid transparent; }
.bnav-item svg { width:25px; height:25px; flex-shrink:0; }
.bnav-item.active { color:var(--accent); font-weight:700; border-top-color:var(--accent); }

/* clear-the-box X (common.js attachClearButtons). The wrapper is display:block so an
   input that was width:100% stays width:100% -- an inline wrapper would collapse to
   the input's intrinsic size and quietly narrow every field on the page. */
.clearable { position:relative; display:block; width:100%; }
.clearable input { width:100%; padding-right:2rem; }
.clearx { position:absolute; right:.3rem; top:50%; transform:translateY(-50%);
          width:1.5rem; height:1.5rem; padding:0; display:flex; align-items:center;
          justify-content:center; border:none; border-radius:50%; background:var(--line);
          color:var(--muted); font-size:.68rem; line-height:1; cursor:pointer; }
.clearx:hover { background:var(--muted); color:var(--card); }
/* Inside a table cell the wrapper must not force the cell wider than its column. */
td .clearable, th .clearable { width:auto; }

/* layered dialog (common.js openSheet) */
.sheet-back { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.5);
              display:flex; align-items:flex-end; justify-content:center;
              padding:0; overflow-y:auto; }
.sheet { background:var(--card); border:1px solid var(--line);
         border-radius:14px 14px 0 0; width:100%; max-width:640px;
         max-height:92vh; display:flex; flex-direction:column;
         padding-bottom:env(safe-area-inset-bottom); }
@media (min-width:700px) {
  .sheet-back { align-items:center; padding:1rem; }
  .sheet { border-radius:14px; }
}
.sheet-head { display:flex; align-items:center; justify-content:space-between;
              gap:.6rem; padding:.9rem 1rem; border-bottom:1px solid var(--line);
              flex-shrink:0; }
.sheet-head strong { font-size:1rem; }
.sheet-x { width:2rem; height:2rem; padding:0; flex-shrink:0; border-radius:50%;
           background:var(--bg); color:var(--muted); border:1px solid var(--line);
           font-size:.8rem; display:flex; align-items:center; justify-content:center; }
.sheet-body { padding:1rem; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* A sheet opened from inside a sheet sits above it, so an edit form can be layered
   over the list of tees it was chosen from without losing that list. */
.sheet-back + .sheet-back { z-index:210; }

/* type-to-filter course picker (common.js mountCoursePicker) */
.cpick { position:relative; }
.cpick-input { width:100%; }
.cpick-list { position:absolute; top:100%; left:0; right:0; z-index:60;
              margin:.2rem 0 0; padding:0; list-style:none; max-height:13rem;
              overflow-y:auto; background:var(--card); border:1px solid var(--line);
              border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.cpick-list[hidden] { display:none; }
.cpick-list li { padding:.55rem .7rem; cursor:pointer; font-size:.9rem;
                 border-bottom:1px solid var(--line); }
.cpick-list li:last-child { border-bottom:none; }
.cpick-list li:hover { background:var(--bg); color:var(--accent); }

/* back nav, for pages that aren't one of the 5 primary tabs */
#backNav { margin:.2rem 0 .3rem; }
.back-link { display:inline-flex; align-items:center; gap:.3rem; color:var(--muted);
             text-decoration:none; font-size:.85rem; font-weight:500; }
.back-link:hover { color:var(--accent); }

/* shot-flow zone map, ported directly from webapp.py's ENTER_PAGE */
.zoneMap { position:relative; width:100%; max-width:400px; aspect-ratio:3/2.7;
           margin:0 auto; background:#1d4a2b2e; border-radius:10px; overflow:hidden; }
.zoneTile { position:absolute; cursor:pointer; display:flex; align-items:center;
            justify-content:center; text-align:center; transition:filter .1s; }
.zoneTile:hover { filter:brightness(1.2); }
.zoneTile span { font-size:.7rem; font-weight:600; color:#fff; padding:.2rem;
                  text-shadow:0 1px 2px rgba(0,0,0,.5); pointer-events:none; }
.zoneTile.tone-fairway { background:#3fae6a; }
.zoneTile.tone-green   { background:#2e9e57; }
.zoneTile.tone-rough   { background:#8a6f3d; }

/* PUTTING map -- deliberately a different visual language from the approach map
   above, because the two are otherwise the same shape and a golfer glancing down
   mid-round must not log a putt miss thinking they are logging an approach miss.
   Approach = rectangular corridor on dark turf. Putting = a round, closely-mown
   surface with a real cup in the middle. Enforced by a test in tests/test_shot_flow.py
   (test_the_putting_map_is_visually_distinct_from_the_approach_map), which fails if
   the two ever share a tone. */
.zoneMap.putting { background:radial-gradient(circle at 50% 50%, #2f8f5a2e 0%, #2f8f5a2e 58%, transparent 72%);
                   aspect-ratio:1/1; max-width:330px; }
.zoneTile.tone-putting { background:#4f9d74; border-radius:10px; }
.zoneTile.tone-putting:hover { filter:brightness(1.15); }
/* The cup: dark, round, and unmistakably the target. */
.zoneTile.tone-cup { background:#11241a; box-shadow:0 0 0 3px #ffffff55 inset; }
.zoneTile.tone-cup span { font-size:.78rem; letter-spacing:.03em; }
.hazards { display:grid; grid-template-columns:1fr 1fr; gap:.35rem; margin-top:.7rem; }
.hazards button { background:var(--bg); color:var(--fg); border:1px solid var(--line);
                  font-weight:500; padding:.45rem; font-size:.85rem; }
.hazards .hd { grid-column:span 2; font-size:.75rem; color:var(--muted);
               text-transform:uppercase; letter-spacing:.05em; margin-top:.3rem; }
.pinGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem;
           max-width:210px; margin:.2rem auto .6rem; }
.pinGrid button { padding:.35rem; font-size:.8rem; background:var(--bg);
                  color:var(--fg); border:1px solid var(--line); font-weight:500; width:auto; }
.pinGrid button.sel { background:var(--accent); color:#fff; border-color:var(--accent); }
.pinWrap { text-align:center; }
.punchOn { background:var(--warn) !important; color:#fff !important; border-color:var(--warn) !important; }
.steps { display:flex; gap:.4rem; margin-top:.7rem; }
.steps div { flex:1; text-align:center; font-size:.78rem; padding:.35rem;
             border-radius:6px; border:1px solid var(--line); color:var(--muted); }
.steps div.on { border-color:var(--accent); color:var(--accent); font-weight:700; }
.steps div.done { opacity:.55; }
ol.shots { margin:.4rem 0; padding-left:1.2rem; font-size:.88rem; }
.preview { font-size:.88rem; margin:.6rem 0; padding:.6rem;
           border-left:3px solid var(--accent); background:var(--bg); }