:root{
  --paper:#ffffff;
  --surface:#ffffff;
  --surface-2:#f6f5f2;
  --ink:#000000;
  --ink-soft:#5a564f;
  --border:rgba(242,164,42,.4);
  --accent:#f2a42a;
  --accent-ink:#ffffff;
  --accent-2:#c28322;
  --line-corvo:#e4002b;
  --line-lousa:#f2a42a;
  --line-coimbra:#0072ce;
  --line-republica:#6cc24a;
  --good:#6cc24a;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.16);
}
/* Deliberately single-theme: metromondego.pt itself never goes dark — the
   painel stays white/black/orange regardless of the viewer's OS setting. */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Work Sans",ui-sans-serif,system-ui,sans-serif;
  padding-inline:16px;
  padding-block:calc(env(safe-area-inset-top,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 28px);
}
[hidden]{display:none!important}
img{max-width:100%}
.wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
h1,h2,h3{font-family:"Work Sans",ui-sans-serif,sans-serif;text-wrap:balance;margin:0}
.eyebrow{
  font-family:"Work Sans",sans-serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.72rem;
  color:var(--ink-soft);
  font-weight:600;
}
.mono{font-family:"Space Mono",ui-monospace,monospace}
.tnum{font-variant-numeric:tabular-nums}

/* ---- board (brand chrome: white surface, black text, orange outline — matches metromondego.pt) ---- */
.board{
  background:var(--surface);
  color:var(--ink);
  border-radius:16px;
  border:2px solid var(--accent);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.board-top{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.logo{flex:none;line-height:0}
.logo img{height:30px;width:auto;display:block}
.board-sub{font-size:.72rem;color:var(--ink-soft);letter-spacing:.04em}
.clock{
  margin-left:auto;
  font-size:1.5rem;font-weight:700;letter-spacing:.03em;color:var(--ink);
}
.hero{padding:20px 18px 22px;display:flex;flex-direction:column;gap:10px}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-time{font-size:clamp(2.6rem,11vw,3.6rem);font-weight:700;line-height:1;color:var(--ink)}
.hero-bottom{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-top:2px}
.hero-dest{font-size:1.05rem;color:var(--ink);font-family:"Work Sans",sans-serif;text-transform:uppercase;letter-spacing:.04em;font-weight:600;white-space:nowrap}
.hero-station{font-size:.78rem;color:var(--ink-soft)}
.countdown{
  flex:none;
  font-family:"Work Sans",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:.85rem;
  padding:6px 14px;border-radius:999px;
  background:var(--surface);
  border:1.5px solid var(--accent);
  color:var(--accent);
  white-space:nowrap;
}
.countdown.imminent{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.hero-empty{color:var(--ink-soft);font-size:.95rem;padding-block:6px}

/* ---- urbana card (mirrors the orange-pill / cream-row layout of the
   official Horário Urbano PDF) ---- */
.urbana-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:4px}
.urbana-head{
  padding:8px 12px;
  background:var(--accent);color:var(--accent-ink);
  font-family:"Work Sans",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;
}
.urbana-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;font-size:.85rem}
.urbana-row:nth-child(odd){background:var(--surface-2)}
.urbana-row .label{color:var(--ink-soft);font-weight:600}
.urbana-row .pill{
  background:var(--accent);color:var(--accent-ink);
  padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap;
}
.urbana-row .value{font-family:"Space Mono",monospace;font-weight:700;color:var(--ink);white-space:nowrap}

/* ---- controls card ---- */
.card{
  background:var(--surface);
  border:2px solid var(--accent);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:16px 18px;
  display:flex;flex-direction:column;gap:14px;
}
.field{display:flex;flex-direction:column;gap:6px}
label.eyebrow{display:block}
select{
  appearance:none;
  width:100%;
  font:inherit;font-size:1rem;font-family:"Work Sans",sans-serif;font-weight:600;
  color:var(--ink);background:var(--surface-2);
  border:1px solid var(--border);border-radius:10px;
  padding:10px 36px 10px 12px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.auto-note{font-size:.72rem;color:var(--ink-soft)}
.journey-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.journey-row .field{flex:1 1 160px;min-width:140px}
.swap-btn{
  flex:none;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface-2);color:var(--ink);
  font-size:1.05rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  margin-bottom:1px;
}
.swap-btn:hover{background:var(--accent-2);color:var(--accent-ink);border-color:transparent}
.trip-meta{font-size:.78rem;color:var(--ink-soft)}
.no-service{color:var(--ink-soft);font-size:.95rem;padding-block:6px}

/* ---- upcoming list ---- */
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.upcoming-list{display:flex;flex-direction:column;gap:8px}
.dep-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);
}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dep-time{font-weight:700;font-size:1.05rem;min-width:3.6em}
.dep-dest{flex:1;min-width:0;font-size:.88rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dep-wait{font-size:.78rem;color:var(--ink-soft);font-weight:600;white-space:nowrap}

/* ---- full schedule ---- */
details.card summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
details.card summary::-webkit-details-marker{display:none}
summary .chev{transition:transform .15s ease;color:var(--ink-soft)}
details[open] summary .chev{transform:rotate(90deg)}
.chip-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{
  font-family:"Space Mono",monospace;font-size:.8rem;
  padding:5px 9px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);
}
.chip.past{opacity:.4}
.chip.next{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:700}

/* ---- legend ---- */
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.78rem;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:6px}

/* ---- footer ---- */
footer{font-size:.76rem;color:var(--ink-soft);line-height:1.5;padding-block:4px 8px}
footer a{color:inherit}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

@media (max-width:480px){
  .hero-time{font-size:2.4rem}
  .clock{font-size:1.2rem}
  .board-top{gap:8px}
}