/* ==========================================================================
   Fairway Clock — one stylesheet for both screens.
   Light is the default because this gets read outdoors in the sun.
   ========================================================================== */

:root{
  color-scheme: light dark;
  --bone:#E9ECE2; --bone2:#F5F7EF; --card:#FFFFFF;
  --ink:#17201A; --ink2:#465347; --ink3:#77857A;
  --line:#D2D9C9; --line2:#E2E7DA;
  --flag:#C43D2C; --flag-soft:#F3DED9;
  --fairway:#A9C08C; --rough:#7E9A6B; --sand:#E3D3AB; --water:#7FA3B4;
  --good:#3C7A51; --warn:#A9772A; --bad:#C43D2C;
  --good-bg:#E1EDE2; --warn-bg:#F4EBD8; --bad-bg:#F5DFDB;
  --shadow:0 1px 2px rgba(23,32,26,.06), 0 8px 24px -12px rgba(23,32,26,.18);
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bone:#0F140F; --bone2:#161C16; --card:#1A221B;
    --ink:#E9EEE4; --ink2:#B2BEB1; --ink3:#7F8D81;
    --line:#2B392C; --line2:#232F24;
    --flag:#E4614C; --flag-soft:#3A211C;
    --fairway:#517043; --rough:#3C5434; --sand:#8A7A52; --water:#3E5F70;
    --good:#69B180; --warn:#D6A054; --bad:#E4614C;
    --good-bg:#1B2E20; --warn-bg:#2E2517; --bad-bg:#33201C;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:"Karla","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}
.wrap{
  max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 14px calc(56px + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------- type --- */
.lab{font-family:"DM Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
.num{font-family:"Archivo","Helvetica Neue",Arial,sans-serif; font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:-.02em}
h1,h2,h3{font-family:"Archivo","Helvetica Neue",Arial,sans-serif; margin:0; text-wrap:balance; letter-spacing:-.015em}
a{color:var(--flag)}

/* -------------------------------------------------------------- chrome --- */
.top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 2px 0}
.mark{display:flex; align-items:center; gap:9px}
.mark svg{display:block}
.mark b{font-family:"Archivo",sans-serif; font-weight:800; font-size:15.5px; letter-spacing:-.02em}
.mark small{font-family:"DM Mono",monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3)}

.card{background:var(--card); border:1px solid var(--line2); border-radius:var(--r); box-shadow:var(--shadow)}
.pad{padding:15px 16px}
.stack{display:flex; flex-direction:column; gap:12px}

/* ------------------------------------------------------------- banners --- */
.banner{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:10px; font-size:12.5px; font-weight:600; border:1px solid transparent}
.banner.warn{background:var(--warn-bg); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 26%, transparent)}
.banner.info{background:var(--bone2); color:var(--ink2); border-color:var(--line)}
.banner.bad{background:var(--bad-bg); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 26%, transparent)}
.banner .dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.banner button{margin-left:auto; font:inherit; font-size:12px; font-weight:700; border:0; background:none; color:inherit; text-decoration:underline; cursor:pointer; padding:0}

/* --------------------------------------------------------- hero clock ---- */
.clock{display:flex; align-items:baseline; gap:8px; margin-top:4px}
.clock .t{font-family:"Archivo",sans-serif; font-weight:800; font-size:clamp(52px,17vw,72px); line-height:.92; font-variant-numeric:tabular-nums; letter-spacing:-.035em}
.clock .ap{font-family:"Archivo",sans-serif; font-weight:700; font-size:19px; color:var(--ink2)}
.sub{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:9px}
.countdown{font-family:"Archivo",sans-serif; font-weight:600; font-size:16px; font-variant-numeric:tabular-nums}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:999px}
.chip .pip{width:6px; height:6px; border-radius:50%; background:currentColor}
.chip.ok{background:var(--good-bg); color:var(--good)}
.chip.warn{background:var(--warn-bg); color:var(--warn)}
.chip.bad{background:var(--bad-bg); color:var(--bad)}
.chip.mute{background:var(--bone2); color:var(--ink3)}

.rail{height:6px; border-radius:999px; background:var(--line2); overflow:hidden; margin-top:14px}
.rail i{display:block; height:100%; background:var(--rough); border-radius:999px; transition:width .5s ease}
.railrow{display:flex; justify-content:space-between; gap:10px; margin-top:7px}

/* ------------------------------------------------------------ now card --- */
.now{display:flex; align-items:stretch; gap:14px}
.holeno{flex:none; width:74px; border-radius:12px; background:var(--flag-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 0}
.holeno .n{font-family:"Archivo",sans-serif; font-weight:800; font-size:38px; line-height:1; color:var(--flag); font-variant-numeric:tabular-nums}
.holeno .l{font-family:"DM Mono",monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--flag); opacity:.8; margin-top:3px}
.nowbody{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:7px}
.meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--ink2); font-weight:600}
.meta em{font-style:normal; color:var(--ink3); font-weight:500}
.split{display:flex; gap:18px}
.split div{display:flex; flex-direction:column; gap:1px}
.split .v{font-family:"Archivo",sans-serif; font-weight:700; font-size:19px; font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------- map --- */
.mapwrap{position:relative; border-radius:var(--r); overflow:hidden; background:var(--bone2); border:1px solid var(--line2)}
.mapwrap svg{display:block; width:100%; height:auto}
.maplabel{position:absolute; left:10px; bottom:9px; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); background:var(--bone2); padding:3px 7px; border-radius:999px; border:1px solid var(--line2)}

/* ------------------------------------------------------------ controls --- */
.btns{display:flex; gap:8px}
button.b{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:14px; letter-spacing:-.01em;
  border-radius:11px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  padding:12px 14px; cursor:pointer; transition:transform .08s ease, background .15s ease;
  touch-action:manipulation;
}
button.b:active{transform:translateY(1px)}
button.b.primary{background:var(--ink); color:var(--bone2); border-color:var(--ink)}
button.b.flag{background:var(--flag); color:#fff; border-color:var(--flag)}
button.b.grow{flex:1}
button.b.icon{flex:none; width:48px; padding:12px 0; font-size:16px}
button.b:disabled{opacity:.4; cursor:default}
button.b:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--flag); outline-offset:2px}

/* --------------------------------------------------------------- forms --- */
.field{display:flex; flex-direction:column; gap:6px}
input[type=text],select{
  font:inherit; font-size:16px; color:var(--ink); background:var(--bone2);
  border:1px solid var(--line); border-radius:10px; padding:11px 12px; width:100%;
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.seg{display:flex; gap:6px}
.seg button{flex:1; font:inherit; font-size:13px; font-weight:600; padding:9px 4px; border-radius:9px; border:1px solid var(--line); background:var(--bone2); color:var(--ink2); cursor:pointer; touch-action:manipulation}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bone2); border-color:var(--ink)}

/* ---------------------------------------------------------- pace detail -- */
details{border-top:1px solid var(--line2)}
details summary{list-style:none; cursor:pointer; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:700; font-family:"Archivo",sans-serif}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; color:var(--ink3); font-weight:600}
details[open] summary::after{content:"–"}
.bars{display:flex; align-items:flex-end; gap:3px; height:78px; padding:0 16px 4px}
.bars .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; min-width:0}
.bars .bar{width:100%; border-radius:2px 2px 0 0; background:var(--rough)}
.bars .bar.over{background:var(--flag)}
.bars .bar.pending{background:var(--line2)}
.bars .cap{font-family:"DM Mono",monospace; font-size:8px; color:var(--ink3); text-align:center}
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl td{padding:6px 16px; border-top:1px solid var(--line2)}
.tbl td:last-child{text-align:right; font-variant-numeric:tabular-nums; font-family:"Archivo",sans-serif; font-weight:600}

/* -------------------------------------------------------------- share ---- */
.codebox{display:flex; align-items:center; gap:10px; background:var(--bone2); border:1px dashed var(--line); border-radius:10px; padding:10px 12px}
.codebox code{font-family:"DM Mono",monospace; font-size:12.5px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}

/* ------------------------------------------------------------- watcher -- */
.watching{display:flex; align-items:center; gap:10px}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--rough); color:#fff; flex:none; display:grid; place-items:center; font-family:"Archivo",sans-serif; font-weight:800; font-size:15px}
.big{font-family:"Archivo",sans-serif; font-weight:800; font-size:22px; line-height:1.15; letter-spacing:-.02em}
.stale{color:var(--ink3); font-size:12px; display:flex; align-items:center; gap:6px}
.stale .pip{width:6px; height:6px; border-radius:50%; background:var(--good); display:inline-block; flex:none}
.stale.old .pip{background:var(--warn)}

.note{font-size:12.5px; color:var(--ink3); line-height:1.5; margin:0}
.note b{color:var(--ink2)}
.hr{height:1px; background:var(--line2)}
.foot{font-size:11.5px; color:var(--ink3); text-align:center; line-height:1.6; padding:4px 8px}
[hidden]{display:none !important}