/* Frosted panels over a soft rail-map wash.
 *
 * The blur is used where it earns something — panels that sit *over* the
 * background wash so the page reads as layered rather than boxed — and nowhere
 * else. Everything that carries data (bars, figures, labels) is opaque and
 * high-contrast, because translucency behind a number is decoration at the cost
 * of legibility.
 *
 * The green / amber / red are railway signal aspects rather than a chart
 * palette, and their fourth state — a lamp that is not lit — is what a day with
 * no data gets. All four are checked for contrast on the glass.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --b0:#1c7a4d; --b1:#4a9b63; --b2:#c9a227; --b3:#d1802a;
  --b4:#c2542f; --b5:#a92338;
  --ink:#141a22;
  --ink-2:#41505f;
  --ink-3:#6b7b8c;
  --hair:rgba(20,26,34,.10);
  --glass:rgba(255,255,255,.66);
  --glass-2:rgba(255,255,255,.80);
  --field:rgba(255,255,255,.72);

  --clear:#1c7a4d;
  --caution:#a9660a;
  --danger:#a92338;
  --unlit:#a9b4c0;
  --focus:#1b5fa8;

  --radius:14px;
}

*{box-sizing:border-box}
html{
  background:#e9edf2;
  background-image:
    radial-gradient(58rem 40rem at 8% -8%, rgba(120,170,214,.42), transparent 62%),
    radial-gradient(46rem 34rem at 96% 4%, rgba(163,199,178,.36), transparent 60%),
    radial-gradient(52rem 40rem at 52% 108%, rgba(214,196,166,.34), transparent 62%);
  background-attachment:fixed;
}
body{
  margin:0 auto;padding:44px 24px 88px;max-width:1180px;color:var(--ink);
  font:400 15px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1{font-weight:600;font-size:clamp(1.5rem,3.2vw,2.1rem);letter-spacing:-.02em;
   line-height:1.15;margin:0 0 8px}
.lede{color:var(--ink-2);margin:0 0 28px;max-width:62ch}

/* ---------------------------------------------------------------- controls */
form{
  display:flex;flex-wrap:wrap;gap:14px 16px;align-items:flex-end;
  background:var(--glass);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(20,26,34,.05),0 12px 32px -18px rgba(20,26,34,.35);
  padding:18px;margin:0 0 26px;
}
form label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;color:var(--ink-2)}
input{
  font:400 15px/1.25 Inter,sans-serif;padding:10px 12px;color:var(--ink);
  background:var(--field);border:1px solid var(--hair);border-radius:9px;min-width:212px;
}
input[type=time]{font-family:"IBM Plex Mono",ui-monospace,monospace;min-width:132px}
input::placeholder{color:var(--ink-3)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
fieldset{border:0;padding:0;margin:0;display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap}
fieldset legend{font-size:.8rem;color:var(--ink-2);padding:0 0 6px}
.day{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;
  padding:9px 4px;border:1px solid var(--hair);border-radius:9px;
  background:var(--field);color:var(--ink-2);font-size:.82rem;cursor:pointer;
}
.day input{position:absolute;width:1px;height:1px;opacity:0;min-width:0}
.day:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.day:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
button{
  font:500 14px/1 Inter,sans-serif;padding:12px 20px;border:1px solid var(--ink);
  border-radius:9px;background:var(--ink);color:#fff;cursor:pointer;
}
button:disabled{opacity:.5;cursor:default}

/* ---------------------------------------------------------------- results */
.more{flex-basis:100%;margin-top:2px}
.more summary{
  cursor:pointer;font-size:.82rem;color:var(--ink-2);width:max-content;
  padding:4px 2px;border-radius:6px;
}
.more summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.more[open] summary{margin-bottom:10px}
.more-body{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
select{
  font:400 15px/1.25 Inter,sans-serif;padding:10px 12px;color:var(--ink);
  background:var(--field);border:1px solid var(--hair);border-radius:9px;min-width:200px;
}
.hint{font-size:.8rem;color:var(--ink-3);margin:0;max-width:44ch;line-height:1.5}

.card{
  background:var(--glass);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(20,26,34,.05),0 12px 32px -18px rgba(20,26,34,.35);
  padding:20px 22px;margin:0 0 18px;
}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fig .k{display:block;font-size:.78rem;color:var(--ink-2);margin-bottom:6px}
.fig strong{
  display:block;font:500 clamp(1.9rem,4.6vw,2.7rem)/1 "IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.fig--budget strong{color:var(--focus)}
.summary{color:var(--ink-2);margin:16px 0 0;font-size:.92rem}

h2{font-size:.86rem;font-weight:600;color:var(--ink-2);margin:0 0 12px}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0 0;
        font-size:.8rem;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.lamp{width:10px;height:10px;border-radius:50%;flex:none}
.lamp.clear{background:var(--clear)}
.lamp.caution{background:var(--caution)}
.lamp.danger{background:var(--danger)}
.lamp.unlit{background:var(--unlit)}
svg{display:block;width:100%;height:auto;overflow:visible}
.axis{fill:var(--ink-3);font:400 10px/1 "IBM Plex Mono",ui-monospace,monospace}
.grid{stroke:var(--hair);stroke-width:1}
.grid--zero{stroke:var(--ink-3);stroke-dasharray:2 3}
.note{color:var(--ink-2);font-size:.86rem;line-height:1.6;margin:0}
.note b{font-weight:600;color:var(--ink)}
#msg{color:var(--danger);margin-top:16px}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}

@media (max-width:760px){
  .figures{grid-template-columns:1fr;gap:16px}
  input{min-width:100%}
  form label{width:100%}
}
/* Translucency is a finish, not a requirement: anyone who has asked for more
   contrast or less transparency gets flat, opaque panels instead. */
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){
  .card,form{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
             border-color:var(--ink-3)}
  input,.day{background:#fff;border-color:var(--ink-3)}
  html{background-image:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ------------------------------------------------------------- the bands
   The donut is a fixed square, not a percentage: `svg{width:100%}` above would
   otherwise let it grow to the width of the card and swallow the page. */
.bands{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
#donut{flex:0 0 168px;width:168px;height:168px}
#donut svg{width:168px;height:168px}
.donut-big{font:600 30px/1 Inter,sans-serif;fill:var(--ink)}
.donut-sub{font:400 9px/1 Inter,sans-serif;fill:var(--ink-3)}
.bandlist{list-style:none;margin:0;padding:0;flex:1 1 300px;
          display:flex;flex-direction:column;gap:6px}
.bandlist li{display:flex;align-items:center;gap:9px;font-size:.9rem;
             line-height:1.3}
.bandlist .sw{width:10px;height:10px;border-radius:3px;flex:none}
.bandlist b{font-weight:600;min-width:42px;text-align:right;
            font-variant-numeric:tabular-nums}
.bandlist .ndays{margin-left:auto;color:var(--ink-3);font-size:.8rem;
                 font-variant-numeric:tabular-nums}
#msg.soft{color:var(--ink-3);font-size:.86rem}

/* The day-by-day strip is a strip: it must not grow with the card either. */
#timeline svg{max-height:170px}
#hist svg{max-height:150px}

@media (max-width:640px){
  .bands{gap:18px}
  #donut,#donut svg{flex-basis:132px;width:132px;height:132px}
  .donut-big{font-size:24px}
}