:root{
  --bg:#f5f7fa; --card:#fff; --ink:#12212e; --muted:#6b7d8f; --line:#dde5ec;
  --accent:#0d6ea8; --accent-ink:#fff; --good:#128a5b; --bad:#b3402c; --warn:#b8860b;
  --shadow:0 1px 3px rgba(16,40,60,.10),0 6px 20px rgba(16,40,60,.05);
}
:root.dark-mode{
  --bg:#0f1620; --card:#17212d; --ink:#e6edf4; --muted:#8ea0b3; --line:#26333f;
  --accent:#3fa3dc; --accent-ink:#08131c; --good:#3fbd88; --bad:#e2765c; --warn:#d6a640;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none !important}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:18px;padding:10px 18px;background:var(--card);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;flex-wrap:wrap}
.brand-wrap{display:flex;flex-direction:column;line-height:1.1}
.brand{font-weight:700;font-size:1.05rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-wrap .version{margin-top:1px}
.topbar nav{display:flex;gap:14px;flex:1}
.topbar nav a{color:var(--muted);font-weight:600;font-size:.92rem;padding:4px 2px;border-bottom:2px solid transparent}
.topbar nav a.on{color:var(--ink);border-bottom-color:var(--accent)}
.topright{display:flex;align-items:center;gap:12px}
.version{color:var(--muted);font-size:.74rem;font-variant-numeric:tabular-nums}
.icon-btn{background:none;border:0;font-size:1.05rem;padding:4px}

main{max-width:1180px;margin:0 auto;padding:20px 18px 64px}

/* ---------- structure ---------- */
h1{font-size:1.5rem;margin:0 0 4px}
h2{font-size:1.05rem;margin:26px 0 10px}
.sub{color:var(--muted);margin:0 0 18px}
.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:14px}

/* ---------- stat tiles ---------- */
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tile .k{color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}
.tile .v{font-size:1.7rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.tile .n{color:var(--muted);font-size:.8rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);border-radius:9px;padding:8px 14px;
  font-size:.9rem;font-weight:600;font-family:inherit}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:.82rem}
.btn:disabled{opacity:.5}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;
  font-weight:700;position:sticky;top:0;background:var(--card);z-index:1}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:rgba(125,155,185,.09)}
.rank{color:var(--muted);font-variant-numeric:tabular-nums;width:2.5rem}
.boat-name{font-weight:600}
.design{color:var(--muted);font-size:.85rem}

/* A score is only meaningful next to the fleet, so colour encodes distance from 100. */
.score{font-weight:700;font-variant-numeric:tabular-nums}
.score.hi{color:var(--good)}
.score.lo{color:var(--bad)}
.tier{font-size:.68rem;padding:1px 6px;border-radius:20px;border:1px solid var(--line);
  color:var(--muted);vertical-align:middle}
.tier.sail{border-color:transparent;background:rgba(18,138,91,.14);color:var(--good)}
.tier.class,.tier.fuzzy{background:rgba(184,134,11,.16);color:var(--warn);border-color:transparent}

.pill{display:inline-block;font-size:.72rem;padding:2px 9px;border-radius:20px;
  background:rgba(125,155,185,.16);color:var(--muted)}
.pill.ready{background:rgba(18,138,91,.16);color:var(--good)}
.pill.failed{background:rgba(179,64,44,.16);color:var(--bad)}

/* ---------- filters ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
select,input[type=search],input[type=text]{font:inherit;font-size:.88rem;padding:7px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}

/* ---------- sortable headers (cursor stays the default arrow) ---------- */
th.sortable{user-select:none;padding-right:18px;position:sticky;top:0}
th.sortable:hover{color:var(--ink);background:rgba(125,155,185,.10)}
th.sortable:after{content:"";position:absolute;right:6px;top:50%;margin-top:-3px;
  border:4px solid transparent;opacity:.25;border-top-color:currentColor}
th.sortable.sort-asc:after{opacity:.9;margin-top:-5px;border-top-color:transparent;border-bottom-color:currentColor}
th.sortable.sort-desc:after{opacity:.9;border-top-color:currentColor}
th.sortable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
th.num.sortable{padding-right:18px}

/* ---------- anchored confirm popover ---------- */
.confirm-pop{position:absolute;z-index:200;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:14px;width:min(300px,calc(100vw - 24px))}
.confirm-pop .cp-msg{font-size:.9rem;margin-bottom:12px;line-height:1.45}
.confirm-pop .cp-actions{display:flex;justify-content:flex-end;gap:8px}
.confirm-pop .cp-arrow{position:absolute;width:12px;height:12px;background:var(--card);
  border:1px solid var(--line);transform:rotate(45deg)}
.confirm-pop.below .cp-arrow{top:-7px;border-right:0;border-bottom:0}
.confirm-pop.above .cp-arrow{bottom:-7px;border-left:0;border-top:0}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}

/* ---------- bars in-table ---------- */
.minibar{display:block;height:5px;border-radius:3px;background:rgba(125,155,185,.22);
  position:relative;min-width:70px}
.minibar i{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--accent)}

/* ---------- job sheet ---------- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(8,18,28,.55);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:18px}
.sheet{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:20px;
  width:min(560px,100%);max-height:86vh;overflow:auto}
.sheet h3{margin:0 0 12px}
.bar{height:8px;border-radius:5px;background:rgba(125,155,185,.22);overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--accent);transition:width .35s ease}
.job-step{font-weight:600;margin-top:10px}
.job-detail{font-size:.86rem;min-height:1.2em}
.job-steps{list-style:none;padding:0;margin:12px 0 0;font-size:.84rem}
.job-steps li{padding:3px 0;color:var(--muted)}
.job-steps li.on{color:var(--ink);font-weight:600}
.job-steps li.past{color:var(--good)}
.job-steps li:before{content:"○ ";}
.job-steps li.on:before{content:"◐ ";}
.job-steps li.past:before{content:"● ";}
.job-log{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px;
  font-size:.74rem;max-height:150px;overflow:auto;white-space:pre-wrap;margin:12px 0 0}
.sheet-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* ---------- recalculating overlay ---------- */
.recalc-backdrop{position:fixed;inset:0;background:rgba(8,18,28,.35);z-index:150;
  display:flex;align-items:center;justify-content:center}
.recalc-box{background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:16px 22px;font-weight:600;display:flex;align-items:center;gap:12px}
.recalc-spin{width:18px;height:18px;border:3px solid rgba(125,155,185,.35);
  border-top-color:var(--accent);border-radius:50%;animation:recalc-spin 0.8s linear infinite}
@keyframes recalc-spin{to{transform:rotate(360deg)}}

/* ---------- course map ---------- */
.legend-scale{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.legend-grad{display:inline-block;width:120px;height:9px;border-radius:5px;
  background:linear-gradient(90deg,#c0392b,#c9962d,#128a5b)}
#map{border-radius:12px}
.leaflet-container{background:var(--bg);font:inherit}
/* themed hover tooltip on tracks */
.leaflet-tooltip.map-tt{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;box-shadow:var(--shadow);padding:7px 10px;font-size:.82rem;line-height:1.4}
.leaflet-tooltip.map-tt .mt-sub{color:var(--muted)}
.leaflet-tooltip.map-tt:before{display:none}
/* home-boat label on maps/playback */
.leaflet-tooltip.home-tt{background:var(--gold);color:#1a1200;border:0;border-radius:7px;
  font-weight:700;font-size:.76rem;padding:2px 7px;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.leaflet-tooltip.home-tt:before{display:none}

/* ---------- playback control bar ---------- */
.pb-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--card);
  border-top:1px solid var(--line)}
.pb-play{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--accent);color:var(--accent-ink);font-size:.9rem;font-family:inherit;
  display:flex;align-items:center;justify-content:center}
.pb-seek-wrap{flex:1;display:flex;align-items:center}
#pb-seek{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:4px;
  background:rgba(125,155,185,.28);outline:none}
#pb-seek::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--accent);border:2px solid var(--card);box-shadow:0 1px 3px rgba(0,0,0,.3)}
#pb-seek::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);
  border:2px solid var(--card)}
.pb-clock{flex:none;font-variant-numeric:tabular-nums;font-weight:600;font-size:.86rem;
  min-width:118px;text-align:center}
.pb-speeds{flex:none;display:flex;gap:2px}
.pb-speeds button{border:1px solid var(--line);background:var(--card);color:var(--muted);
  font-family:inherit;font-size:.78rem;font-weight:600;padding:5px 8px;border-radius:6px}
.pb-speeds button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media (max-width:640px){
  .pb-bar{flex-wrap:wrap}
  .pb-seek-wrap{order:5;flex-basis:100%}
  .pb-clock{min-width:0}
}

/* ---------- boat-page conditions matrix ---------- */
table.matrix{border-collapse:separate;border-spacing:6px;width:auto;min-width:min(520px,100%)}
table.matrix th{text-transform:none;letter-spacing:0;font-size:.82rem;color:var(--ink);
  text-align:center;position:static;background:transparent;padding:4px 8px}
table.matrix thead th{color:var(--muted)}
table.matrix th.mx-row{text-align:right;padding-right:12px}
table.matrix .mx-sub{display:block;font-size:.68rem;color:var(--muted);font-weight:500}
.mx-cell{text-align:center;min-width:78px;padding:14px 8px;border-radius:10px;
  border:1px solid var(--line);font-size:1.15rem;font-variant-numeric:tabular-nums}
.mx-cell.mx-hi{background:rgba(18,138,91,.12)}
.mx-cell.mx-lo{background:rgba(179,64,44,.10)}
.mx-cell .score{font-size:1.15rem}
.mx-empty{color:var(--muted);font-size:1rem}

/* ---------- boat-page stats scope toggle ---------- */
.scope-toggle{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px;
  padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.scope-label{font-weight:600;color:var(--muted);font-size:.85rem;margin-right:2px}
.scope-btn{padding:7px 14px;border-radius:9px;border:1px solid var(--line);background:transparent;
  color:var(--ink);font-weight:600;font-size:.9rem}
.scope-btn:hover{text-decoration:none;background:rgba(125,155,185,.10)}
.scope-btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.scope-btn.on:hover{background:var(--accent)}

/* ---------- home boat (Pommes Frites) ---------- */
:root{--gold:#c8860b;--gold-tint:rgba(200,134,11,.10)}
:root.dark-mode{--gold:#e0a83a;--gold-tint:rgba(224,168,58,.14)}
.star{color:var(--gold)}
tr.home-row{background:var(--gold-tint)}
tr.home-row:hover{background:var(--gold-tint)}
tr.home-row td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.home-badge{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;
  padding:2px 9px;border-radius:20px;background:var(--gold-tint);color:var(--gold);
  border:1px solid var(--gold);vertical-align:middle}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:20px}
.login-card{width:min(340px,100%)}
.login-brand{font-weight:700;font-size:1.2rem;margin-bottom:6px}
.login-error{color:var(--bad);font-size:.85rem;margin-top:8px}
.login-foot{font-size:.72rem}

/* ---------- misc ---------- */
.empty{text-align:center;color:var(--muted);padding:40px 10px}
.note{border-left:3px solid var(--accent);padding:8px 12px;background:rgba(13,110,168,.07);
  border-radius:0 8px 8px 0;font-size:.87rem;margin:10px 0}
.spark{display:flex;align-items:flex-end;gap:1px;height:44px}
.spark i{flex:1;background:var(--accent);opacity:.75;min-height:1px;border-radius:1px 1px 0 0}
@media (max-width:640px){
  main{padding:14px 12px 60px}
  .topbar{gap:10px;padding:8px 12px}
  .topbar nav{order:3;flex-basis:100%;gap:12px}
  h1{font-size:1.25rem}
}