/* Task Planner - stylesheet. Generated from task_planner.html; edit the
   source and re-run documentation/scripts/build_split.py. */
  :root{
    --bg:#f4f6f8; --panel:#fff; --line:#dde3e8; --ink:#1f2a33; --muted:#6b7a88;
    --accent:#1e88e5; --accent-d:#1565c0; --danger:#c62828;
    --sss:#c62828; --ess:#c62828; --goal:#2e7d32; --takeoff:#37474f; --tp:#1e88e5;
    --wp:#d32f2f; --wpL:#2e7d32;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
  #app{display:flex;height:100%}
  #map{flex:1;height:100%;min-width:0}
  /* view states: split (desktop default), map only, task only */
  body[data-view="map"]  #side{display:none}
  body[data-view="task"] #map{display:none}
  body[data-view="task"] #side{width:100%;min-width:0;flex:1}
  /* phone-only FreeFlyXC bar: total distance + the button that opens the sheet */
  #ffMobileBar{display:none;position:fixed;top:8px;left:50%;transform:translateX(-50%);
    z-index:1200;align-items:center;gap:8px;background:rgba(255,255,255,.94);
    border-radius:16px;padding:4px 5px 4px 12px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
  #ffBarWrap{display:flex;flex-direction:column;line-height:1.15}
  #ffBarDist{font-weight:800;font-size:14px;color:#12466e;white-space:nowrap}
  #ffBarType{font-size:9px;color:var(--muted);white-space:nowrap;letter-spacing:.02em}
  #ffSheetOpen{background:var(--accent);color:#fff;border-color:var(--accent-d);
    border-radius:13px;padding:3px 11px;font-size:12px;font-weight:700}
  body.ffbar #ffMobileBar{display:flex}
  /* same pill, shown while a task is being laid out on a phone */
  #taskMobileBar{display:none;position:fixed;top:8px;left:50%;transform:translateX(-50%);
    z-index:1200;align-items:center;background:rgba(255,255,255,.94);border-radius:16px;
    padding:4px 12px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
  #taskBarWrap{display:flex;flex-direction:column;line-height:1.15;text-align:center}
  #taskBarDist{font-weight:800;font-size:14px;color:#12466e;white-space:nowrap}
  #taskBarSub{font-size:9px;color:var(--muted);white-space:nowrap;letter-spacing:.02em}
  body.taskbar #taskMobileBar{display:flex}

  @media (max-width:900px){
    #side{width:100%;min-width:0}
    /* everything a finger has to hit gets tighter on a phone */
    button{padding:4px 7px;font-size:12px}
    button.mini{padding:2px 5px;font-size:11px}
    .viewbtn{padding:4px 7px;font-size:11px}
    .langbtn{padding:1px 6px;font-size:10px;min-width:32px}
    #brandLogo{height:34px}
    h1{font-size:15px}
    h2{margin:10px 0 5px;font-size:12px}
    .tp-row{padding:4px;gap:4px}
    input.tp-km{width:44px;padding:3px 2px;font-size:11px}
    .tp-leg{width:44px;font-size:10px}
    .tp-nm{min-width:56px;font-size:12px}
    .tp-shape{width:13px}
    .tp-no{min-width:15px;font-size:11px}
    .tp-badge{min-width:32px;font-size:9px}
    .total .big{font-size:22px}
    .total .big2{font-size:17px}
    .leaflet-bar a{width:30px;height:30px;line-height:30px}
    a.ff-btn{min-width:64px;padding:0 7px;font-size:11px;line-height:30px}
    .totask-ctl a{padding:0 8px;line-height:26px;font-size:11px}
    .ovl{padding:8px}
    .ovl-box{padding:10px}
  }
  .viewbtn{padding:5px 9px;font-size:12px;font-weight:700;white-space:nowrap;
    border:1px solid var(--accent-d);background:var(--accent);color:#fff;border-radius:6px;flex-shrink:0}
  .viewbtn:hover{background:var(--accent-d)}
  /* the toggle stays visible while the list is open so it can fold it back */
  .leaflet-control-layers .leaflet-control-layers-toggle{display:block !important;
    width:36px;height:36px}
  .leaflet-control-layers.lc-open .leaflet-control-layers-toggle{
    margin:0 auto 4px;border-bottom:1px solid var(--line)}
  .leaflet-control-layers.lc-open{padding:6px 10px 6px 6px}
  .lang-ctl{display:none;background:#fff;border-radius:4px;overflow:hidden;
    box-shadow:0 1px 5px rgba(0,0,0,.4)}
  .lang-ctl a{display:inline-block;padding:0 8px;line-height:24px;font-size:11px;
    font-weight:800;color:var(--muted) !important;text-decoration:none}
  .lang-ctl a.on{background:var(--accent);color:#fff !important}
  body.narrow .lang-ctl{display:block}
  .totask-ctl a{display:block;padding:0 10px;line-height:28px;font-size:12px;font-weight:800;
    white-space:nowrap;border-radius:4px;text-decoration:none;box-shadow:0 1px 5px rgba(0,0,0,.4);
    background:#fff;color:#2e5d34 !important}          /* idle */
  body[data-view="split"] .totask-ctl a,
  body[data-view="task"]  .totask-ctl a{background:#c8e6c9;color:#1b5e20 !important}
  .totask-ctl a:hover{filter:brightness(.95)}
  #side{width:440px;min-width:440px;height:100%;overflow-y:auto;background:var(--panel);
    border-left:1px solid var(--line);padding:0 12px 12px}
  .brand{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;
    background:var(--panel);padding:10px 0 8px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .brand h1{flex:1;min-width:0}
  #brandLogo{height:46px;width:auto;flex-shrink:0;display:block}
  .langsw{display:flex;flex-direction:column;gap:3px;flex-shrink:0}
  .langbtn{padding:2px 8px;font-size:11px;font-weight:700;line-height:1.35;border-radius:4px;
    border:1px solid var(--line);background:#fff;color:var(--muted);min-width:38px}
  .langbtn.on{background:var(--accent);border-color:var(--accent-d);color:#fff}
  h1{font-size:17px;margin:0}
  h2{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
     margin:14px 0 6px;border-bottom:1px solid var(--line);padding-bottom:4px;
     display:flex;justify-content:space-between;align-items:center}
  .sub{font-size:12px;color:var(--muted);margin:0 0 10px}
  button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:6px;padding:5px 9px}
  button:hover{background:#eef4fb}
  button.primary{background:var(--accent);color:#fff;border-color:var(--accent-d)}
  button.primary:hover{background:var(--accent-d)}
  button.mini{padding:2px 6px;font-size:12px;line-height:1}
  button.clearbtn{padding:3px 9px;font-size:18px;                 /* +50 % */
    background:#ffe0e0;border-color:#ef9a9a;color:#b71c1c}
  button.cleartask{padding:3px 7px;font-size:13.5px}              /* -25 % of clearbtn */
  #clearWpBtn{padding:3px 7px;font-size:14.4px}                   /* -20 % of clearbtn */
  button.clearbtn:hover{background:#ffcdd2}
  button.icon{padding:3px 6px;font-size:14px;line-height:1}
  #addPointBtn{padding:4px 9px;font-size:21px}          /* +50 % */
  input,select{font:inherit;border:1px solid var(--line);border-radius:6px;padding:4px 6px;background:#fff}
  input[type=number]{width:78px}
  input.t{width:82px}
  label{font-size:12px;color:var(--muted)}
  .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .row+.row{margin-top:6px}
  .field{display:flex;flex-direction:column;gap:2px}
  .hide{display:none !important}

  #wpList,#manList{list-style:none;margin:6px 0 0;padding:0;max-height:240px;overflow-y:auto;
    border:1px solid var(--line);border-radius:6px}
  #wpList li,#manList li{display:flex;justify-content:space-between;align-items:center;
    padding:3px 6px;border-bottom:1px solid var(--line);font-size:13px}
  #wpList li:hover,#manList li:hover{background:#f0f6ff}

  /* ---- compact task rows ---- */
  .tp-row{display:flex;align-items:center;gap:6px;padding:5px 6px;border:1px solid var(--line);
    border-radius:7px;margin-bottom:5px;background:#fafcfe;cursor:pointer}
  .tp-row:hover{background:#f0f7ff}
  .tp-badge{font-size:10px;font-weight:800;color:#fff;border-radius:4px;padding:2px 5px;
    min-width:38px;text-align:center;flex-shrink:0}
  .b-takeoff{background:#37474f} .b-sss{background:#c62828} .b-tp{background:#1e88e5}
  .b-ess{background:#c62828} .b-goal{background:#2e7d32}
  .tp-nm{font-weight:700;flex:1 1 auto;min-width:64px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  input.tp-km{width:54px;flex:0 0 auto;text-align:right;padding:4px 3px}
  .tp-leg{width:54px;flex:0 0 auto;text-align:right;color:#c62828;font-weight:700;font-size:12px}
  .tp-more{border:1px solid var(--line);border-radius:0 0 7px 7px;border-top:none;
    margin:-8px 0 6px;padding:8px;background:#fff}
  .tp-sss{border:1px solid #d6e8c0;background:#f1f8e9;border-radius:7px;padding:6px;margin:-2px 0 6px}
  .total{background:#eef6ff;border:1px solid #cfe3fb;border-radius:8px;padding:10px;margin-top:8px}
  .total .big{font-size:26px;font-weight:800;color:var(--accent-d);line-height:1.1}
  .total .big2{font-size:19px;font-weight:800;color:#c62828;line-height:1.15}
  .total .sep{border-top:1px dashed #cfe3fb;margin:8px 0 6px}
  .tp-shape{font-size:15px;line-height:1;width:16px;text-align:center;flex-shrink:0;color:#546e7a}
  .tp-grip{cursor:grab;color:#90a4ae;font-size:16px;line-height:1;flex-shrink:0;
    padding:2px 4px;margin:-2px 0;user-select:none;-webkit-user-select:none;
    /* the browser must not scroll, select or pop a callout on this one */
    touch-action:none;-webkit-touch-callout:none}
  .tp-grip:active{cursor:grabbing}
  .tp-row.dragging{opacity:.45}
  .tp-row.drop-before{box-shadow:inset 0 3px 0 0 var(--accent)}
  .tp-row.drop-after{box-shadow:inset 0 -3px 0 0 var(--accent)}
  .tp-no{font-weight:800;color:#78909c;font-size:12px;min-width:20px;text-align:right;flex-shrink:0;
    font-variant-numeric:tabular-nums}
  .wpmeta{font-size:10px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;
    max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cut{border:none;background:none;color:#2e7d32;font-size:16px;font-weight:900;
    letter-spacing:-1px;padding:0 2px;line-height:1;cursor:pointer}
  .cut:hover{color:#1b5e20;background:none}
  .cut.closed{transform:scaleX(-1)}
  .wp-count{font-size:10px;font-weight:800;color:#fff;background:var(--accent);
    border-radius:8px;padding:1px 5px;margin-left:4px}
  .photoc{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:800;white-space:nowrap;
    background:#dbeafe;border:1px solid #93c5fd;color:#12466e;border-radius:6px;
    padding:5px 9px;align-self:flex-end;cursor:pointer}
  .photoc:hover{background:#cfe4fd}
  .photoc img{display:block}
  .leaflet-tooltip.cam-lbl{background:rgba(255,255,255,.9);border:none;box-shadow:none;
    font-weight:800;font-size:12px;padding:0 4px;color:#00695c}
  .leaflet-tooltip.cam-lbl::before{display:none}
  #helpBtn{position:fixed;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;
    background:var(--accent);color:#fff;font-weight:800;font-size:17px;display:flex;
    align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35);z-index:2500}
  #helpBtn:hover{background:var(--accent-d)}
  #helpBody h4{margin:12px 0 4px;font-size:13px;color:var(--accent-d)}
  .help-intro{background:#f4f8fc;border:1px solid #d6e6fa;border-radius:8px;
    padding:8px 12px;margin-bottom:6px}
  .help-intro p{margin:5px 0}
  #helpBody ul{margin:4px 0;padding-left:20px}
  #helpBody li{margin:2px 0}
  /* map controls */
  .map-panel{background:#fff;padding:6px 8px;border-radius:5px;box-shadow:0 1px 5px rgba(0,0,0,.4);
    font-size:12px;line-height:1.35;min-width:172px}
  .map-panel label{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
  .oa-count{float:right;font-weight:800;color:#1565c0}
  .oa-alts{display:flex;gap:3px;flex-wrap:wrap}
  .oa-alt{flex:1 0 30%;padding:3px 0;font-size:10px;font-weight:700;line-height:1.3;
    border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer}
  .oa-alt.on{background:#bbdefb;border-color:#1565c0;color:#0d47a1}
  #trkStats{position:fixed;right:12px;bottom:12px;z-index:1500;background:rgba(255,255,255,.96);
    border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.35);padding:8px 10px;max-width:290px;
    max-height:56vh;overflow-y:auto;font-size:12px}
  body[data-view="split"] #trkStats{right:calc(440px + 12px)}
  body.narrow #trkStats{right:8px;left:8px;max-width:none}
  .trk-item{border:1px solid var(--line);border-radius:6px;padding:5px 7px;margin-top:5px}
  .trk-row{display:flex;align-items:center;gap:5px}
  .trk-row b{font-size:12px}
  .trk-sub{margin-top:4px;padding-left:4px}
  .trk-part{display:block;font-size:11px;color:var(--ink);margin:1px 0}
  .trk-part input{margin-right:4px}
  .trk-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
  .trk-head b{flex:1;font-size:12px;color:#12466e;text-transform:uppercase;letter-spacing:.03em}
  .trk-x{border:none;background:none;font-size:14px;line-height:1;padding:0 2px;
    color:var(--muted);cursor:pointer}
  .trk-x:hover{color:var(--danger);background:none}
  #trkStats table{width:100%;border-collapse:collapse}
  #trkStats th{text-align:right;font-weight:600;color:var(--muted);padding:1px 6px 1px 0;
    white-space:nowrap;font-size:11px}
  #trkStats td{text-align:left;font-weight:700;padding:1px 0}
  #trkStats tr:nth-child(odd){background:#f4f6f8}
  .map-panel select,.map-panel input[type=range]{width:100%;font-size:12px;padding:2px 4px}
  .map-panel .mp-row+.mp-row{margin-top:6px}
  .ruler-readout{background:#fff;padding:6px 8px;border-radius:5px;box-shadow:0 1px 5px rgba(0,0,0,.4);
    font-size:12px;min-width:150px}
  .ruler-readout b{font-size:16px;color:#6a1b9a}
  a.ruler-btn.on{background:#e1bee7 !important}
  #map3d{position:absolute;inset:0;display:none;z-index:900}
  #t3Exit,#t3Hint{display:none}
  #t3Wait{display:none;position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);
    z-index:1000;background:rgba(255,255,255,.95);border-radius:8px;padding:10px 16px;
    font-size:12px;max-width:280px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.3)}
  body.d3 #t3Exit,body.d3 #t3Hint{display:block}
  #t3Exit,#t3Hint{display:none}
  body.d3 #t3Exit,body.d3 #t3Hint{display:block}
  body.d3 #map3d{display:block}
  /* Only the map's own panes go away in 3D. The control container is lifted
     above the 3D canvas so the mode buttons, layer picker and toolbars stay
     usable, and pointer events fall through everywhere else. */
  body.d3 .leaflet-pane{visibility:hidden}
  body.d3 .leaflet-container{background:transparent;pointer-events:none}
  body.d3 .leaflet-control-container{z-index:950;pointer-events:none}
  body.d3 .leaflet-control-container .leaflet-control{pointer-events:auto}
  body.d3 .leaflet-control-attribution{display:none}
  #t3Exit{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:1000;
    background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px 14px;
    font-weight:800;font-size:12px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
  #t3Ex{position:absolute;right:12px;bottom:44px;z-index:1000;display:none;gap:3px}
  body.d3 #t3Ex{display:flex}
  #t3Ex span{font-size:10px;color:#fff;background:rgba(0,0,0,.45);border-radius:4px;
    padding:3px 6px;align-self:center}
  .d3-ex{font-size:10px;font-weight:700;padding:3px 7px;border:1px solid var(--line);
    background:#fff;border-radius:4px;cursor:pointer}
  .d3-ex.on{background:#b2dfdb;border-color:#00695c;color:#004d40}
  #t3Elev{position:absolute;right:12px;bottom:14px;z-index:1000;display:none;
    background:rgba(255,255,255,.94);border-radius:6px;padding:4px 10px;font-size:11px;
    box-shadow:0 1px 6px rgba(0,0,0,.3);white-space:nowrap}
  body.d3 #t3Elev{display:block}
  #t3Elev b{font-size:13px;color:#12466e}
  #t3Hint{position:absolute;left:50%;transform:translateX(-50%);top:10px;z-index:1000;
    background:rgba(255,255,255,.92);border-radius:14px;padding:4px 12px;font-size:11px;
    color:var(--muted);pointer-events:none;white-space:nowrap}
  /* same square as the ruler it sits under, not a labelled mode button */
  a.d3-btn{font-size:15px;color:#00695c !important}
  a.wpeye-btn{font-size:15px;color:#455a64 !important}
  a.wpeye-btn.on{background:#ffe0b2 !important}
  a.d3-btn.on{background:#b2dfdb !important;color:#004d40 !important}
  /* LIVE — XContest livetracking, embedded as an iframe. It is their page in
     their own map, and it offers no way in from outside: the widget takes no
     bounds in the URL (its hash parser reads flight ids only) and exposes no
     postMessage API, so we cannot aim it at the task or filter the pilots. It
     therefore covers the planner outright rather than pretending to be a layer.
     The iframe sits above the Leaflet controls on purpose, so the mode bar and
     the toolbars disappear under it and only the exit button stays reachable. */
  #liveWrap{position:absolute;inset:0;display:none;z-index:900;background:#e8eef2}
  body.live #liveWrap{display:block}
  #liveFrame{width:100%;height:100%;border:0;display:block}
  #lvExit,#lvNote{display:none}
  body.live #lvExit,body.live #lvNote{display:block}
  #lvExit{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:1000;
    background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px 14px;
    font-weight:800;font-size:12px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
  #lvNote{position:absolute;left:50%;transform:translateX(-50%);top:10px;z-index:1000;
    background:rgba(255,255,255,.92);border-radius:14px;padding:4px 12px;font-size:11px;
    color:var(--muted);pointer-events:none;max-width:82%;text-align:center}
  a.live-btn{color:#b71c1c !important}
  a.live-btn.on{background:#ffcdd2 !important}
  /* live pilots: an arrow turned to the course, with a permanent name label.
     They ride in Leaflet's markerPane, above the cylinders and the optimised
     line, so the task stays readable underneath. */
  .pt-mk i{display:block;width:0;height:0;margin:5px auto 0;
    border-left:7px solid transparent;border-right:7px solid transparent;
    border-bottom:14px solid #d81b60;filter:drop-shadow(0 0 2px rgba(255,255,255,.95))}
  .pt-lbl{background:rgba(255,255,255,.9);border:0;box-shadow:none;padding:0 4px;
    font-size:11px;font-weight:700;color:#880e4f;border-radius:3px}
  .pt-lbl:before{display:none}
  .pt-who{flex:1;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
  #ptHint.bad{color:#b71c1c}
  .mode-bar{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
  a.draw-btn{display:block;padding:0 9px;font-weight:800;font-size:12px;line-height:28px;
    white-space:nowrap;text-decoration:none;border-radius:4px;background:#fff;
    color:#4527a0 !important;box-shadow:0 1px 5px rgba(0,0,0,.4)}
  a.draw-btn.on{background:#d1c4e9 !important}
  .draw-panel{width:198px}
  .dw-tools{flex-wrap:nowrap}
  .dw-second{flex-wrap:nowrap;align-items:center}
  .dw-gap{display:flex;gap:2px;margin-left:8px}
  .dw-op{display:block}
  .dw-op label{display:block;margin-bottom:2px}
  .dw-ops{display:flex;gap:4px}
  .dw-second .dw-op-b{padding:1px 3px;font-size:9px}
  .dw-op-b{flex:1;padding:2px 0;font-size:10px;font-weight:700;line-height:1.3;
    border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer}
  .dw-op-b.on{background:#ffe082;border-color:#ffb300}
  .dw-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px}
  .dw-row:last-child{margin-bottom:0}
  .draw-panel button{border:1px solid var(--line);background:#fff;border-radius:5px;
    padding:0;width:26px;height:26px;font-size:14px;line-height:1;cursor:pointer}
  .draw-panel button.on{background:#d1c4e9;border-color:#7e57c2}
  .dw-w{display:flex;align-items:center;justify-content:center}
  .dw-w i{display:block;width:15px;background:#333;border-radius:3px}
  .dw-cols button{width:17px;height:17px;border-radius:50%;border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.3)}
  .dw-cols button.on{box-shadow:0 0 0 2px #333}
  .mode-bar>*{width:100%}
  a.ff-btn{display:block;min-width:78px;padding:0 9px;font-weight:800;font-size:12px;
    line-height:28px;white-space:nowrap;text-decoration:none;border-radius:4px;
    background:#fff;color:#a06800 !important;box-shadow:0 1px 5px rgba(0,0,0,.4)}
  a.ff-btn.on{background:#c8e6c9 !important;color:#1b5e20 !important}
  .ff-panel{background:#fff;border-radius:6px;box-shadow:0 1px 6px rgba(0,0,0,.4);
    padding:8px 10px;width:236px;font-size:12px;max-height:86vh;overflow-y:auto}
  .ff-head{display:flex;align-items:center;gap:8px;font-weight:800;color:#a06800;
    letter-spacing:.03em;margin-bottom:4px}
  .ff-head>span{flex:0 0 auto;min-width:0}
  .ff-logo{flex:1;display:flex;justify-content:center;line-height:0;padding-right:6px}
  .ff-logo img{height:36px;width:auto;display:block}
  .ff-resetrow{justify-content:center}
  #ffClear{background:#ffe0e0;border-color:#ef9a9a;color:#b71c1c;
    padding:3px 8px;font-size:14px}                       /* +20 % */
  #ffClear:hover{background:#ffcdd2}
  .ff-x{border:none;background:none;font-size:16px;line-height:1;padding:0 2px;
    color:var(--muted);cursor:pointer;flex-shrink:0}
  .ff-x:hover{color:var(--danger);background:none}
  .ff-type{font-weight:800;font-size:13px;color:#1565c0;line-height:1.2;margin-bottom:2px}
  .ff-scoredlbl{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:4px}
  .ff-scored{font-size:24px;font-weight:800;color:#12466e;line-height:1.1}
  .ff-scored span{font-size:13px;font-weight:700}
  .ff-sub{font-size:11px;color:var(--muted);margin-top:1px}
  .ff-pts{font-size:18px;font-weight:800;color:#2e7d32;line-height:1.2;margin-top:5px}
  .ff-pts span{font-size:12px;color:var(--muted);font-weight:600}
  .ff-mult{font-size:12px;color:#a06800;margin-left:4px}
  .ff-tab{width:100%;border-collapse:collapse;margin-top:6px}
  .ff-tab td{padding:1px 0;vertical-align:top}
  .ff-tab td:first-child{color:var(--muted);padding-right:6px}
  .leaflet-tooltip.ff-leg{background:rgba(255,212,0,.92);color:#4a3600;border:none;box-shadow:none;
    font-weight:800;font-size:11px;padding:1px 5px;border-radius:9px}
  .leaflet-tooltip.ff-leg::before{display:none}
  .ff-mid{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.9);
    border:2px dashed #a06800;color:#a06800;font:700 11px/11px sans-serif;text-align:center;
    cursor:grab;box-shadow:0 0 2px rgba(0,0,0,.4)}
  .leaflet-tooltip.ff-lbl,.ff-lbl{font-size:11px;font-weight:800;color:#8d6e00;white-space:nowrap;
    transform:translate(6px,-16px);text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
  .leaflet-tooltip.rul-lbl{background:rgba(106,27,154,.92);color:#fff;border:none;box-shadow:none;
    font-weight:700;font-size:11px;padding:1px 5px;border-radius:9px}
  .leaflet-tooltip.rul-lbl::before{display:none}
  /* hh:mm spinner */
  .tspin{display:inline-flex;align-items:center;gap:3px}
  .tspin>b{font-weight:800;color:var(--muted)}
  .tsf{display:inline-flex;align-items:stretch;border:1px solid var(--line);
    border-radius:5px;overflow:hidden;background:#fff}
  .tsf input{width:36px;border:none;text-align:center;padding:4px 2px;
    font-variant-numeric:tabular-nums;font-weight:600;border-radius:0}
  .tsf input:focus{outline:2px solid var(--accent);outline-offset:-2px}
  .tsb{display:flex;flex-direction:column;border-left:1px solid var(--line)}
  .tsb button{border:none;background:#f1f4f7;padding:0 5px;font-size:7px;line-height:10px;
    height:50%;border-radius:0;color:#546e7a}
  .tsb button:hover{background:#d6e6fa;color:var(--accent-d)}
  .rad-lbl.rad-sat{-webkit-text-stroke:.7px #000;paint-order:stroke fill;
    text-shadow:0 0 2px #000,0 0 2px #000}
  .rad-lbl{font-size:11px;font-weight:800;white-space:nowrap;transform:translate(4px,-8px);
    text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
  .lbl-r{color:#00695c;font-weight:600}
  .lbl-c{color:#e53935}
  .stats{background:#f7f9fb;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:13px}
  .stats div+div{margin-top:3px}
  #speed{width:100%}
  .legend{font-size:11px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
  .legend span{display:inline-flex;align-items:center;gap:4px}
  .swatch{width:14px;height:3px;display:inline-block;border-radius:2px}
  .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
  .hint{font-size:11px;color:var(--muted);margin-top:4px}
  /* pointer-events:none matters: the toast is always in the layout at z-index
     4000, so while invisible it still swallowed clicks aimed at whatever sat
     underneath — which is what stopped the help's bottom Close from working. */
  .toast{position:fixed;bottom:14px;left:14px;background:#263238;color:#fff;padding:8px 12px;
    border-radius:6px;font-size:13px;opacity:0;transition:opacity .3s;z-index:4000;
    max-width:60%;pointer-events:none}
  .toast.show{opacity:1}
  .filebtn{display:inline-block;border:1px dashed var(--accent);color:var(--accent-d);
    border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px}
  .filebtn input{display:none}

  /* ---- map labels ---- */
  .leaflet-tooltip.tp-lbl{background:rgba(255,255,255,.88);border:none;box-shadow:none;
    font-weight:700;font-size:12px;padding:1px 4px;cursor:pointer}
  .leaflet-tooltip.tp-lbl::before{display:none}
  .leaflet-tooltip.wp-lbl{background:transparent;border:none;box-shadow:none;padding:0 3px;
    color:#000;font-weight:700;font-size:22px;
    text-shadow:0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff}
  .leaflet-tooltip.wp-lbl::before{display:none}
  .leaflet-tooltip.leg-lbl{background:rgba(229,57,53,.9);color:#fff;border:none;box-shadow:none;
    font-weight:700;font-size:11px;padding:1px 5px;border-radius:9px}
  .leaflet-tooltip.leg-lbl::before{display:none}

  /* ---- overlays ---- */
  .ovl{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:3000;
    align-items:center;justify-content:center;padding:14px}
  .ovl.on{display:flex}
  #helpOverlay .ovl-box{max-width:min(96vw,1040px)}
  .ovl-box{background:#fff;border-radius:10px;padding:14px;max-width:min(94vw,760px);
    width:100%;max-height:92vh;overflow-y:auto}
  #scanVideo{width:100%;border-radius:8px;background:#000;max-height:60vh;object-fit:cover}
  .board table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
  .board th,.board td{border:1px solid var(--line);padding:4px 6px;text-align:left}
  .board th{background:#f4f6f8;font-size:11px;text-transform:uppercase;color:var(--muted)}
  .board td.num{text-align:right;font-variant-numeric:tabular-nums}
  .board h3{margin:0;font-size:18px}
  .kv{display:grid;grid-template-columns:auto auto;gap:4px 10px;font-size:13px}
  .kv b{font-weight:700}

  /* Phone overrides last: media queries add no specificity, so these must
     come after the desktop rules to win. Gives the name the leftover room. */
  @media (max-width:900px){
    .tp-row{padding:4px 5px;gap:4px}
    .tp-no{min-width:14px;font-size:11px}
    .tp-badge{min-width:30px;font-size:9px;padding:2px 3px}
    .tp-shape{width:13px;font-size:13px}
    .tp-nm{flex:1 1 auto;min-width:70px;font-size:12px}
    input.tp-km{width:44px;padding:3px 2px;font-size:11px}
    .tp-leg{width:40px;font-size:10px}
    .tp-row button.mini{padding:2px 4px;font-size:10px}
  }