/* journeycalcs.com — the hour ribbon.

   The design follows a convention that is unusually consistent in this
   category, measured off the live CSS of timeanddate, worldtimebuddy, time.is,
   everytimezone, rome2rio, travelmath and several airline allowance pages:

     - a mid-to-deep, slightly desaturated blue is effectively mandatory
     - near-white ground, soft-black text, never pure black
     - dense and table-driven, with 1px borders and zebra fills, NOT shadows
       (timeanddate's whole 84KB stylesheet uses shadows only on dropdowns)
     - 4-6px radius; above ~12px it starts reading as a consumer app
     - system type — nobody in the utility tier loads a display webfont
     - max width lands at 1200-1240px, and the INPUT FORM goes at the top;
       not one ranking site in this category opens with a hero image

   THE SIGNATURE ELEMENT IS THE HOUR RIBBON, and it carries two independent
   channels: HUE says which zone, BRIGHTNESS says when. Keeping them separate
   is the entire reason a three-zone meeting reads at a glance. Collapse them —
   tint the night hours with the zone colour, say — and it stops working.

   There is deliberately no single brand accent. The accent IS the semantic
   scale: green means call, amber means borderline, rose means don't. A brand
   colour competing with that scale would be noise.

   What was rejected: a departure-board treatment. It reads as the obvious
   choice for a travel time site and there is no such convention anywhere on
   the web — no split-flap, no dark terminal, no monospace-tabular across any
   of the sites measured. It lives in physical signage and novelty clock apps,
   and it would have fought legibility on a calculator.
*/

:root{
  color-scheme: light dark;

  --ground:#FFFFFF;
  --panel:#F7F8FA;
  --rule:#DDE1E6;
  --rule-strong:#C3CAD3;
  --ink:#232830;            /* soft black — pure black is wrong in this category */
  --ink-2:#5A6371;
  --ink-3:#606978;   /* was #7C8593 — 3.73:1, failed at 11px */

  --blue:#1A56A8;           /* the category-mandatory mid-deep blue */
  --blue-dark:#123C77;
  --blue-wash:#EAF1FA;

  /* The semantic scale. Ordering is agreed across every tool measured:
     green go, amber borderline, rose don't. */
  --go:#1E7A46;
  --go-wash:#E6F4EC;
  --mid:#8A5A00;
  --mid-wash:#FBF0DC;
  --no:#9E2A3C;
  --no-wash:#FBEAEC;

  /* Ribbon fills. Brightness is the time channel, so these are a value ramp,
     not a hue set. Night inverts its text. */
  --hr-day:#FFFDF0;
  --hr-shoulder:#EAF6FB;
  --hr-night:#94AECD;
  --hr-night-ink:#0E1A28;
  --now:#B3261E;            /* the "now" rule — a hard line, never a fill */

  --cell:34px;              /* one hour */
  --row:30px;
  --gutter:150px;           /* the zone-label column */
  --max:1220px;
  --r:5px;
}

@media (prefers-color-scheme:dark){
  :root{
    --ground:#12151A; --panel:#181C22; --rule:#2C323B; --rule-strong:#3D4551;
    --ink:#EDF0F4; --ink-2:#AEB7C4; --ink-3:#8A94A3;
    --blue:#79ADEE; --blue-dark:#A8CBF5; --blue-wash:#18293F;
    --go:#6FD79B; --go-wash:#12291D; --mid:#E8B75C; --mid-wash:#2C2312;
    --no:#F09098; --no-wash:#2E161B;
    --hr-day:#2A3140; --hr-shoulder:#22303F; --hr-night:#0C1420; --hr-night-ink:#93A6BE;
    --now:#FF7A70;
  }
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0;line-height:1.25;font-weight:650;letter-spacing:-.011em}
h1{font-size:26px}
h2{font-size:19px;margin:30px 0 10px}
h3{font-size:16px;margin:20px 0 6px}
p{margin:0 0 12px}
a{color:var(--blue)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.narrow{max-width:760px}

/* ---------- chrome: nav by trip stage, not by tool name ---------- */
header{border-bottom:1px solid var(--rule);background:var(--ground);
  position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;padding:10px 0}
.brand{font-weight:700;font-size:17px;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.stage{display:flex;gap:3px;flex-wrap:wrap;font-size:13.5px}
.stage b{color:var(--ink-3);font-weight:600;padding:5px 2px 5px 10px;
  text-transform:uppercase;letter-spacing:.05em;font-size:11px}
.stage a{color:var(--ink-2);text-decoration:none;padding:5px 8px;border-radius:var(--r)}
.stage a:hover{background:var(--panel);color:var(--ink)}
.stage a[aria-current="page"]{background:var(--blue-wash);color:var(--blue-dark);font-weight:600}

/* ---------- the input form sits at the top. Always. ---------- */
.form{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:14px 16px;margin:16px 0}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.f{display:flex;flex-direction:column;gap:4px}
.f label{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
input,select{
  font:400 15px/1.3 inherit;padding:8px 10px;border:1px solid var(--rule-strong);
  border-radius:var(--r);background:var(--ground);color:var(--ink);min-width:0;
}
input:focus,select:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
button{
  font:600 15px/1.3 inherit;padding:9px 16px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--blue);background:var(--blue);color:#fff;
}
button:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
button.ghost{background:transparent;color:var(--blue);border-color:var(--rule-strong)}
button.ghost:hover{background:var(--blue-wash)}
button.sm{font-size:13px;padding:5px 10px}

/* ---------- THE HOUR RIBBON ---------- */
.ribbon{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--ground)}
.rb-scroll{overflow-x:auto}
.rb-inner{min-width:max-content;position:relative}
.rb-row{display:flex;align-items:stretch;border-top:1px solid var(--rule)}
.rb-row:first-child{border-top:0}
.rb-label{
  flex:0 0 var(--gutter);width:var(--gutter);padding:5px 10px;
  border-right:1px solid var(--rule-strong);background:var(--panel);
  display:flex;flex-direction:column;justify-content:center;position:sticky;left:0;z-index:2;
}
.rb-label b{font-size:13px;font-weight:650;line-height:1.2}
.rb-label span{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rb-hours{display:flex}
.rb-h{
  flex:0 0 var(--cell);width:var(--cell);height:var(--row);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-variant-numeric:tabular-nums;
  border-right:1px dotted var(--rule);color:var(--ink-2);
}
/* brightness = when. These are a value ramp on purpose, not a hue set. */
.rb-h[data-t="day"]{background:var(--hr-day)}
.rb-h[data-t="shoulder"]{background:var(--hr-shoulder)}
.rb-h[data-t="night"]{background:var(--hr-night);color:var(--hr-night-ink)}
.rb-h[data-mid]{border-left:2px solid var(--rule-strong)}
/* the shared-hours verdict band */
.rb-h[data-v="go"]{box-shadow:inset 0 -4px 0 var(--go)}
.rb-h[data-v="mid"]{box-shadow:inset 0 -4px 0 var(--mid)}
/* now: a hard rule, never a fill */
.rb-now{position:absolute;top:0;bottom:0;width:2px;background:var(--now);z-index:3;pointer-events:none}
.rb-now::after{content:"now";position:absolute;top:-1px;left:3px;font-size:10px;font-weight:700;
  color:var(--now);letter-spacing:.04em}
/* hue = which zone. Independent of the brightness channel above. */
.rb-label[data-you]{box-shadow:inset 3px 0 0 var(--blue)}

.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin:8px 0 0}
.legend i{display:inline-block;width:12px;height:12px;border:1px solid var(--rule-strong);
  border-radius:2px;vertical-align:-2px;margin-right:5px;font-style:normal}

/* ---------- results ---------- */
.out{border:1px solid var(--rule);border-left:3px solid var(--blue);border-radius:var(--r);
  padding:14px 16px;margin:14px 0;background:var(--panel)}
.out .big{font-size:30px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  line-height:1.15;color:var(--ink)}
.out .sub{font-size:13.5px;color:var(--ink-2)}
.verdict{border-left-color:var(--go)}
.verdict.no{border-left-color:var(--no)}
.verdict.mid{border-left-color:var(--mid)}
.pill{display:inline-block;font-size:12px;font-weight:650;padding:2px 8px;border-radius:20px;
  border:1px solid currentColor}
.pill.go{color:var(--go);background:var(--go-wash)}
.pill.mid{color:var(--mid);background:var(--mid-wash)}
.pill.no{color:var(--no);background:var(--no-wash)}

/* ---------- tables: dense, bordered, zebra. No shadows. ---------- */
.tw{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);margin:14px 0}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:640px}
th,td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{background:var(--blue);color:#fff;font-weight:600;font-size:13px;
  position:sticky;top:0;white-space:nowrap}
tbody tr:nth-child(even){background:var(--panel)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.when{font-size:11.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.flag{font-size:12px;color:var(--ink-2)}

/* ---------- prose ---------- */
main{padding-bottom:60px}
.prose{max-width:760px}
.prose p,.prose li{color:var(--ink-2);font-size:15.5px;line-height:1.68}
.prose li{margin-bottom:6px}
.note{border:1px solid var(--rule);border-left:3px solid var(--mid);background:var(--mid-wash);
  border-radius:var(--r);padding:11px 14px;margin:14px 0;font-size:14.5px}
.note p{margin:0;color:var(--ink)}
.src{font-size:13px;color:var(--ink-3)}
.src a{color:var(--ink-2)}

/* ---------- home ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:10px 0 4px}
.card{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--rule);
  border-radius:var(--r);padding:12px 14px;background:var(--ground)}
.card:hover{border-color:var(--blue);background:var(--blue-wash)}
.card b{display:block;font-size:15.5px;margin-bottom:2px}
.card span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.stagehead{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  font-weight:700;margin:26px 0 2px;padding-bottom:5px;border-bottom:1px solid var(--rule)}

footer{border-top:1px solid var(--rule);padding:18px 0 50px;font-size:13.5px;color:var(--ink-3)}
footer a{color:var(--ink-2)}

@media (max-width:640px){
  :root{--gutter:112px;--cell:30px}
  h1{font-size:22px}
  .bar{gap:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}