/* Time Sense — Clock City narrative course (lean30) */
:root{
  --ts-ink:#14263e;
  --ts-muted:#31465f;
  --ts-soft:#627086;
  --ts-line:#e4e9f2;
  --ts-line2:#d7e1f5;
  --ts-blue:#2851db;
  --ts-blue-soft:#9db4ea;
  --ts-sky:#eef3ff;
  --ts-cream:#fff8ef;
  --ts-amber:#f3b23a;
  --ts-green:#2fbb6c;
  --ts-peach:#f5d0c0;
}
.ts-shell{max-width:720px;margin:0 auto}
.ts-world-banner{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  margin:0 0 14px;padding:14px 16px;border-radius:16px;
  background:linear-gradient(135deg,var(--ts-sky) 0%,var(--ts-cream) 55%,#e8f6ef 100%);
  border:1px solid var(--ts-line);
}
.ts-world-banner svg{flex:0 0 auto;display:block}
.ts-world-copy{flex:1;min-width:180px}
.ts-world-copy strong{display:block;color:var(--ts-ink);font-size:15px;margin:0 0 4px}
.ts-world-copy span{display:block;color:var(--ts-muted);font-size:13px;line-height:1.45}

/* Journey path map */
.ts-path{
  margin:4px 0 16px;padding:12px 10px 10px;border-radius:14px;
  background:#fff;border:1px solid var(--ts-line);
  box-shadow:0 2px 10px #1c334908;
}
.ts-path-svg{width:100%;height:auto;display:block}
.ts-path-label{
  display:flex;justify-content:space-between;gap:4px;margin-top:6px;
  font-size:10px;font-weight:650;color:var(--ts-soft);letter-spacing:.02em;
}
.ts-path-label span{flex:1;text-align:center;line-height:1.25}
.ts-path-label span.is-here{color:var(--ts-blue)}
.ts-path-label span.is-done{color:#1e8f4e}

.ts-progress{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.ts-pip{flex:1;min-width:44px;height:6px;border-radius:999px;background:var(--ts-line);border:none;padding:0;cursor:pointer}
.ts-pip.is-done{background:var(--ts-blue-soft)}
.ts-pip.is-active{background:var(--ts-blue)}
.ts-pip:focus-visible{outline:2px solid var(--ts-blue);outline-offset:2px}

.ts-bridge{
  margin:0 0 12px;padding:10px 14px;border-radius:12px;
  background:var(--ts-cream);border:1px dashed #f0d9a8;
  color:var(--ts-muted);font-size:13px;line-height:1.5;
}
.ts-bridge[hidden]{display:none}

.ts-scene{
  margin:0 0 12px;border-radius:16px;overflow:hidden;
  border:1px solid var(--ts-line);background:var(--ts-sky);
  min-height:72px;position:relative;
}
.ts-scene svg{display:block;width:100%;height:auto}
.ts-scene-cap{
  position:absolute;left:12px;bottom:10px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 2px #14263e88;pointer-events:none;
}

.ts-station{display:none}
.ts-station.is-active{display:block}
.ts-card{
  background:#fff;border:1px solid var(--ts-line);border-radius:16px;
  padding:22px 20px;box-shadow:0 3px 14px #1c334906;margin:0 0 14px;
  position:relative;
}
.ts-card::before{
  content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;
  border-radius:0 3px 3px 0;background:var(--ts-blue);
}
.ts-station#ts-s1 .ts-card::before{background:var(--ts-blue)}
.ts-station#ts-s2 .ts-card::before{background:var(--ts-amber)}
.ts-station#ts-s3 .ts-card::before{background:var(--ts-green)}
.ts-station#ts-s4 .ts-card::before{background:#7b6cf0}
.ts-station#ts-s5 .ts-card::before{background:#e08a5b}
.ts-station#ts-done .ts-card::before{background:linear-gradient(#2851db,#2fbb6c)}

.ts-kicker{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ts-blue);margin:0 0 6px}
.ts-takeaway{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--ts-sky);color:var(--ts-ink);font-size:14px;line-height:1.55}
.ts-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center}

.ts-pulse{
  width:120px;height:120px;border-radius:50%;margin:18px auto;border:3px solid var(--ts-blue-soft);
  background:var(--ts-sky);display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:650;color:var(--ts-blue);font-variant-numeric:tabular-nums;
  transition:transform .08s,background .08s,border-color .08s;user-select:none;touch-action:manipulation;cursor:pointer;
}
.ts-pulse.is-tick{transform:scale(1.08);background:var(--ts-blue);border-color:#1e3fa8;color:#fff}
.ts-pulse.is-tap{transform:scale(.94);background:var(--ts-green);border-color:#1e8f4e;color:#fff}
.ts-meter{height:10px;border-radius:999px;background:var(--ts-line);overflow:hidden;margin:10px 0}
.ts-meter>span{display:block;height:100%;width:0;background:var(--ts-blue);border-radius:999px;transition:width .15s}
.ts-stat-row{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0;font-size:14px;color:var(--ts-muted)}
.ts-stat-row strong{color:var(--ts-ink);font-variant-numeric:tabular-nums}
.ts-drift-chart{display:flex;align-items:flex-end;gap:3px;height:72px;margin:12px 0 4px;padding:0 2px}
.ts-drift-bar{flex:1;min-width:2px;border-radius:3px 3px 0 0;background:var(--ts-blue-soft)}
.ts-drift-bar.is-early{background:var(--ts-amber)}
.ts-drift-bar.is-late{background:var(--ts-blue)}

.ts-wait-stage{
  min-height:180px;border-radius:16px;border:2px dashed var(--ts-line2);background:#f7f9fc;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;color:var(--ts-muted);
}
.ts-wait-stage.is-busy{border-style:solid;border-color:var(--ts-blue-soft);background:var(--ts-sky)}
.ts-busy-btn{min-width:120px;min-height:56px;font-size:18px;font-weight:650}
.ts-choice-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.ts-choice{
  border:1px solid var(--ts-line2);border-radius:12px;background:#fff;padding:14px 12px;
  font:inherit;font-weight:550;cursor:pointer;color:var(--ts-ink);touch-action:manipulation;
}
.ts-choice:hover,.ts-choice.is-on{border-color:var(--ts-blue);background:var(--ts-sky)}

.ts-day-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:12px 0}
.ts-hour{
  aspect-ratio:1;border-radius:8px;border:1px solid var(--ts-line2);background:#f7f9fc;
  cursor:pointer;font-size:10px;color:var(--ts-soft);padding:0;touch-action:manipulation;
}
.ts-hour.is-sleep{background:#c7d7fb;border-color:var(--ts-blue-soft);color:var(--ts-ink)}
.ts-hour.is-work{background:#b8e6cb;border-color:var(--ts-green);color:#06351a}
.ts-hour.is-phone{background:#fde2b8;border-color:var(--ts-amber);color:#5a2a00}
.ts-hour.is-meal{background:var(--ts-peach);border-color:#e08a5b;color:#5a2e10}
.ts-hour.is-other{background:var(--ts-line);border-color:#c5cde0;color:var(--ts-muted)}
.ts-hour.is-free{background:#fff;border-color:var(--ts-line2);color:var(--ts-soft)}
.ts-paints{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.ts-paint{
  border:1px solid var(--ts-line2);border-radius:999px;padding:6px 12px;font:inherit;
  font-size:13px;font-weight:600;cursor:pointer;background:#fff;color:var(--ts-ink);touch-action:manipulation;
}
.ts-paint.is-on{outline:2px solid var(--ts-blue);outline-offset:1px}
.ts-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.ts-compare-bar{height:14px;border-radius:999px;background:var(--ts-line);overflow:hidden;display:flex}
.ts-compare-bar span{display:block;height:100%}

.ts-clocks{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0}
@media(min-width:520px){
  .ts-clocks{grid-template-columns:1fr 1fr 1fr}
  .ts-day-grid{grid-template-columns:repeat(12,1fr)}
}
.ts-clock{border:1px solid var(--ts-line);border-radius:14px;padding:14px;background:#f7f9fc;text-align:center}
.ts-clock-city{font-size:13px;font-weight:650;color:var(--ts-muted);margin:0 0 4px}
.ts-clock-time{
  font-size:clamp(22px,4vw,28px);font-weight:650;font-variant-numeric:tabular-nums;
  color:var(--ts-blue);margin:0;letter-spacing:-.5px;
}
.ts-clock-date{font-size:12px;color:var(--ts-soft);margin:4px 0 0}
.ts-instant{text-align:center;font-size:13px;color:var(--ts-soft);margin:8px 0 0;font-variant-numeric:tabular-nums}

.ts-priorities{display:grid;gap:8px;margin:12px 0}
.ts-prio{
  text-align:left;border:1px solid var(--ts-line2);border-radius:12px;padding:12px 14px;
  background:#fff;font:inherit;cursor:pointer;color:var(--ts-ink);touch-action:manipulation;
}
.ts-prio.is-on{border-color:var(--ts-blue);background:var(--ts-sky);box-shadow:0 0 0 1px #2851db44}
.ts-share-card{
  border:1px solid var(--ts-blue-soft);border-radius:16px;padding:18px;
  background:linear-gradient(160deg,var(--ts-sky),var(--ts-cream));margin-top:12px;
}
.ts-share-card code{
  display:block;word-break:break-all;font-size:12px;background:#fff;
  border:1px solid var(--ts-line);border-radius:8px;padding:10px;margin:10px 0;color:var(--ts-ink);
}
.ts-done-list{margin:10px 0 0;padding-left:18px;color:var(--ts-muted);font-size:14px;line-height:1.55}
.ts-nav{display:flex;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}

/* Intro stop list */
.ts-stops{display:grid;gap:8px;margin:16px 0 4px}
.ts-stop-row{
  display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;
  background:#f7f9fc;border:1px solid var(--ts-line);
}
.ts-stop-num{
  flex:0 0 28px;height:28px;border-radius:50%;background:var(--ts-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.ts-stop-row strong{display:block;font-size:14px;color:var(--ts-ink)}
.ts-stop-row span{display:block;font-size:12px;color:var(--ts-soft);margin-top:2px}

@media(max-width:520px){
  .ts-choice-row,.ts-compare{grid-template-columns:1fr}
  .ts-pulse{width:100px;height:100px}
  .ts-path-label{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .ts-pulse,.ts-meter>span{transition:none}
}