/* Generated by tools/build_static.py -- edit static/css/style.css instead. */
  :root{
    --bg:#0d1117; --panel:#131820; --hair:#1f2630; --ink:#e6edf3; --muted:#8b96a5;
    --accent:#4da3ff; --accent-soft:rgba(77,163,255,.12); --mid:#e0c04a; --slow:#df6a5e;
    /* The reach ramp, in one place.
       The legend gradient and the map's own lerpColor were three different
       colours each -- #4da3ff against rgb(57,182,255) and so on -- so the
       bar under the slider never quite matched the dots it was explaining.
       app.js reads these, so there is now one ramp and the legend is a
       sample of it rather than an approximation. */
    --reach-fast:#39b6ff; --reach-mid:#f0d33a; --reach-slow:#b23a3a;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;background:var(--bg);color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .wrap{max-width:1180px;margin:0 auto;padding:28px 24px 40px;}

  header{margin-bottom:22px;}
  h1{font-size:21px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em;}
  h1 em{font-style:normal;color:var(--muted);font-weight:500;font-size:13px;
    font-family:'IBM Plex Mono',monospace;margin-left:8px;}
  .sub{color:var(--muted);font-size:13.5px;max-width:660px;line-height:1.6;}

  .board{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;}
  .mapcard{flex:1 1 720px;min-width:320px;position:relative;}
  #map{width:100%;height:640px;border-radius:10px;border:1px solid var(--hair);background:#080a0d;}
  .modeflag{position:absolute;top:14px;left:14px;z-index:500;background:rgba(13,17,23,.9);
    backdrop-filter:blur(4px);border:1px solid var(--hair);border-radius:20px;
    padding:6px 14px 6px 10px;font-size:12px;color:var(--ink);display:flex;align-items:center;gap:7px;}
  .modeflag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;}

  .side{flex:0 0 300px;min-width:280px;background:var(--panel);border:1px solid var(--hair);
    border-radius:10px;overflow:hidden;}
  .section{padding:16px 18px;border-bottom:1px solid var(--hair);}
  .section:last-child{border-bottom:none;}
  .section h2{margin:0 0 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);font-weight:600;}

  .row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
  .row + input[type=range]{margin-top:10px;}
  .label{font-size:12.5px;color:var(--muted);}
  .val{font-family:'IBM Plex Mono',monospace;color:var(--accent);font-weight:600;font-size:15px;}

  input[type=range]{width:100%;accent-color:var(--accent);height:4px;}

  .legend{height:6px;border-radius:3px;margin-top:12px;
    background:linear-gradient(90deg,var(--reach-fast),var(--reach-mid),var(--reach-slow));}
  /* Numbers, so IBM Plex Mono at 11.5px like every other number in the
     panel -- .mins, .itin .when, .itin .sub. It was 10px Inter: the only
     10px in the stylesheet, and the only place a figure was set in the body
     font, which is what made the legend read as a different program. */
  .legendLabels{display:flex;justify-content:space-between;margin-top:6px;
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);}

  .stat{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:6px 0;}
  .stat span{color:var(--muted);}
  .stat b{font-family:'IBM Plex Mono',monospace;font-weight:500;text-align:right;}

  button{background:var(--accent-soft);color:var(--accent);border:1px solid transparent;
    padding:9px 12px;border-radius:7px;font-weight:600;font-size:12.5px;cursor:pointer;
    width:100%;margin-top:4px;transition:background .15s ease;font-family:inherit;}
  button:hover{background:rgba(77,163,255,.2);}
  button.secondary{background:transparent;border:1px solid var(--hair);color:var(--ink);}
  button.secondary:hover{border-color:var(--muted);}

  .steps{list-style:none;margin:0 0 14px;padding:0;font-size:12.5px;}
  .steps li{position:relative;padding:8px 0 8px 16px;line-height:1.5;color:var(--ink);}
  .steps li::before{content:'';position:absolute;left:0;top:14px;width:5px;height:5px;
    border-radius:50%;background:var(--accent);}
  .steps li:not(:last-child){border-bottom:1px solid var(--hair);}
  .mins{color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:11.5px;}

  footer{margin-top:22px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--hair);
    padding-top:14px;line-height:1.7;max-width:820px;}
  .leaflet-container{background:#080a0d;font-family:'Inter',system-ui,sans-serif;}
  .leaflet-control-scale-line{background:rgba(13,17,23,.8)!important;color:var(--ink)!important;
    border-color:var(--accent)!important;font-family:'IBM Plex Mono',monospace!important;}

/* ---------------------------------------------------------------------------
   Trip options and itinerary
   ---------------------------------------------------------------------------
   Laid out the way a transit app is: the headline is when you arrive and how
   long it takes, the lines are a row of coloured badges you can recognise
   without reading, and the step-by-step detail is underneath the option you
   picked rather than all of them at once.

   The previous version printed every leg as a sentence in a bulleted list,
   which meant the two numbers somebody actually decides on -- arrival time
   and duration -- were buried mid-paragraph. */

.optRow{display:block;width:100%;text-align:left;margin-bottom:7px;cursor:pointer;
  background:#0e1418;border:1px solid var(--hair);border-radius:8px;padding:9px 11px;
  color:var(--ink);font:inherit;transition:border-color .12s,background .12s;}
.optRow:hover{border-color:#3d5561;}
.optRow.sel{border-color:var(--accent);background:#141f26;}
.optRow.base{background:#0c1013;border-style:dashed;}

.optHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.optWhen{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;}
.optDur{font-size:12.5px;color:var(--muted);white-space:nowrap;}
.optMeta{margin-top:3px;font-size:11.5px;color:var(--muted);
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;}

/* A line badge carries its own colour, so a route is recognised rather than
   read. Same colours as the map, so the panel and the drawing agree. */
.badge{display:inline-block;padding:1px 6px;border-radius:4px;font-size:11px;
  font-weight:600;color:#0d1418;font-family:'IBM Plex Mono',monospace;}
.badge.walk,.badge.drive{background:#4a5a63;color:#e8eef1;}
.arrow{color:#5c6f7a;font-size:11px;}

.tag{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  padding:1px 5px;border-radius:3px;background:#1b2a33;color:#8fa3ad;}
.tag.live{background:#123a33;color:#4fd1b4;}
.tag.sched{background:#1b2a33;color:#8fa3ad;}
.tag.est{background:#3a2b12;color:#d9a441;}

/* The itinerary: a spine with a dot per step, so the sequence reads as one
   journey rather than as unrelated rows. */
.itin{margin:10px 0 12px;padding:0;list-style:none;position:relative;}
.itin::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;
  width:2px;background:#25333b;}
.itin li{position:relative;padding:7px 0 7px 20px;font-size:12.5px;line-height:1.45;}
.itin li::before{content:'';position:absolute;left:0;top:12px;width:12px;height:12px;
  border-radius:50%;background:var(--panel);border:2px solid #3d5561;}
.itin li.ride::before{border-color:var(--accent);background:var(--accent);}
.itin li.waitStep::before{border-color:#d9a441;}
.itin .when{font-family:'IBM Plex Mono',monospace;color:var(--accent);
  font-size:11.5px;margin-right:6px;}
.itin .sub{color:var(--muted);font-size:11.5px;}
.optNote{font-size:11.5px;color:var(--muted);margin:-4px 0 10px;font-style:italic;}

/* Leave now / leave at, and the location card ------------------------------
   A segmented control rather than a checkbox: the two states are equally
   valid choices, and "leave now" should not read as the absence of a
   setting. */
.segbar{display:flex;gap:0;border:1px solid var(--hair);border-radius:7px;overflow:hidden;}
.seg{flex:1;background:#0e1418;border:0;color:var(--muted);font:inherit;font-size:12.5px;
  padding:6px 8px;cursor:pointer;}
.seg + .seg{border-left:1px solid var(--hair);}
.seg.sel{background:#16232b;color:var(--ink);font-weight:600;}
input[type=time]{background:#0e1418;color:var(--ink);border:1px solid var(--hair);
  border-radius:6px;padding:3px 6px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;}
.hint{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:8px;}
.hint b{color:var(--ink);font-weight:600;}
.hint ol{margin:6px 0 0 16px;padding:0;}
.hint li{margin-bottom:3px;}



/* The compass ---------------------------------------------------------------
   A fixed dial with north up and a needle that turns, which is what holding
   a compass does. On a machine with no magnetometer the needle sits at north
   and says so, rather than the panel showing a dash forever: a north-up dial
   is still a true statement about which way the map is drawn. */
.compass{width:74px;height:74px;margin:12px auto 2px;}
.cRing{fill:#0e1418;stroke:#2a3640;stroke-width:1.5;}
.cTick{stroke:#3d5561;stroke-width:2;stroke-linecap:round;}
.cLabel{fill:var(--muted);font-size:13px;font-weight:700;text-anchor:middle;
  font-family:'IBM Plex Mono',monospace;}
.cNeedle{fill:#b23a3a;}          /* north end, as on a real compass */
.cTail{fill:#4a5a63;}
.cHub{fill:#8fa3ad;}
/* Turned by a CSS transform so the browser interpolates the movement; a
   phone reports orientation many times a second and stepping the needle
   without easing reads as jitter rather than motion. */
#needle{transform-box:fill-box;transform-origin:center;
  transition:transform .14s linear;}
.compass.idle .cNeedle{fill:#4a5a63;}   /* nothing live: not a red bearing */
.compass.idle .cRing{stroke-dasharray:3 3;}