/* rides — the house skin with the accent moved to teal, which is the one
   colour none of the neighbouring apps uses. Dark only: the page is read on a
   handlebar at 8 in the morning and at dusk on the way back, and a white
   screen in either condition is a torch. */

:root{
  --bg:#0b0c0e; --panel:#0f1113; --panel2:#16191c; --line:#1e2226; --line2:#282d33;
  --text:#f4f6f7; --muted:#9aa4ad; --subtle:#6b747c;
  --accent:#2dd4bf; --on-accent:#04201c;
  --ok-bg:#0c2620; --ok-fg:#5eead4; --ok-line:#155e52;
  --warn-bg:#2a2210; --warn-fg:#fbbf24; --warn-line:#5a4518;
  --roll:#38bdf8; --aero:#2dd4bf; --grade:#fbbf24;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark;background:var(--bg);height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:14px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  height:100%;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
h1{font-size:22px;margin:0 0 12px;letter-spacing:-.02em;font-weight:600}
h3{font-size:14px;margin:0 0 6px;font-weight:600;letter-spacing:-.01em}
p{margin:.6em 0}
a{color:var(--accent);text-decoration:none}
[hidden]{display:none !important}
button{font:inherit;cursor:pointer;color:inherit}
input{
  width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line2);border-radius:8px;
  padding:9px 10px;font:inherit;font-size:16px;-webkit-user-select:text;user-select:text;
  font-variant-numeric:tabular-nums;
}
input:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px;
}
::placeholder{color:var(--subtle)}
.muted{color:var(--muted);font-size:13px;margin:2px 0}
.hint{color:var(--muted);font-size:12.5px;margin:6px 0 0}
.foot{color:var(--subtle);font-size:11.5px;margin:10px 0 0}
.lbl{display:block;font-size:12.5px;font-weight:600;margin:2px 0 5px}
.empty{color:var(--muted);font-size:13.5px;padding:24px 2px;text-align:center}

/* shell ------------------------------------------------------------------ */
.app{display:flex;flex-direction:column;height:100%}
.topbar{
  display:flex;align-items:baseline;gap:10px;flex:none;
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
  border-bottom:1px solid var(--line);background:var(--panel);
}
.topbar b{font-size:16px}
.topbar span{font-size:12px;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 40px}
.gate-body{display:flex;flex-direction:column;justify-content:center}
.tabs{flex:none;display:flex;border-top:1px solid var(--line);background:var(--panel);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.01em;padding:13px 0;text-align:center}
.tab.on{color:var(--accent)}
/* In the shell the native bar is the navigation; this one would be a second
   row saying the same words. */
html.shell .tabs{display:none}
html.shell .body{padding-bottom:24px}
@media (min-width:560px){
  .app{max-width:480px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
}

/* tiles ------------------------------------------------------------------ */
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px;margin-bottom:10px}
.tile{padding:9px 10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.tile b{display:block;font-size:19px;font-variant-numeric:tabular-nums;line-height:1.25;letter-spacing:-.02em}
.tile span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* cards ------------------------------------------------------------------ */
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;color:inherit}
.card h4{margin:0;font-size:14.5px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:600}
.card h4 em{font-style:normal;font-weight:700;color:var(--accent);font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums}
.card .side{font-size:12.5px;color:var(--muted);margin:4px 0 0;font-variant-numeric:tabular-nums}
.card .side b{color:var(--text);font-weight:600}
.ride:active{border-color:var(--line2);background:var(--panel2)}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.pill{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.pill.ok{border-color:var(--ok-line);color:var(--ok-fg)}
.pill.warn{border-color:var(--warn-line);color:var(--warn-fg)}
.note{border-radius:10px;padding:9px 11px;font-size:12.5px;margin-bottom:10px;display:flex;flex-direction:column;gap:2px}
.note.ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-fg)}
.note.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-fg)}
.note .muted{color:inherit;opacity:.75}

/* the power split -------------------------------------------------------- */
.bar{height:10px;border-radius:99px;background:var(--panel2);overflow:hidden;display:flex;margin:10px 0 8px}
.bar i{display:block;height:100%}
.b-roll{background:var(--roll)} .b-aero{background:var(--aero)} .b-grade{background:var(--grade)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* rows and fields -------------------------------------------------------- */
.rows{margin:6px 0 0;display:flex;flex-direction:column}
.rows .r{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.rows .r:first-child{border-top:0}
.rows dt{color:var(--muted);font-size:12.5px;margin:0}
.rows dd{margin:0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.f{display:block}
.f span{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}

/* buttons ---------------------------------------------------------------- */
.btn{
  display:inline-block;text-align:center;background:var(--accent);color:var(--on-accent);
  border:0;border-radius:11px;padding:11px 14px;font-weight:700;font-size:14px;
}
.btn.wide{display:block;width:100%}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line2);font-weight:600}
.btn:active{opacity:.85}
.btn.htmx-request{opacity:.6}