/* =============== Autumn Warm Theme =============== */


*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height:1.5;
}

/* ===== Header ===== */
.appbar{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(0deg, rgba(20,18,15,.6), rgba(20,18,15,.9));
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
}
.appbar-inner{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
}
.brand{
  display:flex; align-items:center; gap:10px;
}
.brand img{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#000; }
.title{ font-size:1.05rem; font-weight:700; }
.subtitle{ font-size:.82rem; color:var(--muted); }

/* Container */
.container{ max-width:1000px; margin:0 auto; padding:18px 14px 120px; }

/* Cards */
.card{ border:1px solid var(--line); border-radius:18px; background:var(--card); margin:10px 0 18px; overflow:hidden; }
.card h3{ margin:0; }
.card .pad{ padding:16px 18px; }

/* Summary-based collapsibles */
details{ background:var(--card); }
summary{
  list-style:none; cursor:pointer;
  padding:18px; display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(0deg, var(--card), var(--card-2));
  border-bottom:1px solid var(--line);
  font-size:1.1rem; font-weight:700;
}
summary .sub{ font-size:.9rem; color:var(--muted); font-weight:400; margin-top:6px; }
summary::-webkit-details-marker{ display:none; }
details[open] summary{ border-bottom:1px solid var(--line); }

/* Overview specifics */
.card.overview details{ border-radius:18px; }
.ov-content{ padding:16px 18px 20px; }
.pills{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:var(--chip-bg); color:var(--chip-text);
  border:1px solid var(--chip-border); font-size:.9rem; font-weight:600;
}
.pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(242,166,90,.2); }
.ov-grid{ display:grid; gap:16px; }
@media(min-width:760px){ .ov-grid{ grid-template-columns:1.2fr .8fr; } }
.ov-block{ background:var(--card-2); border:1px solid var(--line); border-radius:16px; padding:14px; }
.ov-block h4{ margin:0 0 8px; font-size:1.02rem; color:var(--text); }
.ov-block p, .ov-block li{ color:var(--muted); }
.ov-stops ol{ margin:0; padding-left:22px; }
.ov-stops a{ color:var(--link); text-decoration:none; }
.ov-stops a:hover{ text-decoration:underline; }
.route-thumb{ display:block; width:100%; border-radius:12px; border:1px solid var(--line); background:#0f0e0c; padding:6px; }
.route-thumb img{ display:block; width:100%; height:auto; border-radius:10px; }
.route-caption{ font-size:.85rem; color:var(--muted); margin-top:8px; text-align:center; }

/* Route & Stops card (warm) */
.card.routes .grid{ display:grid; gap:16px; }
@media(min-width:760px){ .card.routes .grid{ grid-template-columns:1fr 1fr; } }
.rs-section{ background:var(--card-2); border:1px solid var(--line); border-radius:16px; padding:14px; }
.rs-section h4{ margin:0 0 10px; font-size:1.02rem; }
.rs-link{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; margin:8px 0;
  background:var(--chip-bg); border:1px solid var(--chip-border); border-radius:12px; }
.rs-link a{ color:var(--link); text-decoration:none; font-weight:600; }
.rs-link a:hover{ text-decoration:underline; }
.rs-meta{ color:var(--muted); font-size:.86rem; }

.badge{ display:inline-block; padding:2px 8px; font-size:.75rem; border-radius:999px; background:rgba(242,166,90,.12); color:var(--link); border:1px solid var(--chip-border); }

/* Stop sections */
.stop{ border-radius:18px; overflow:hidden; }
.stop .section{ padding:16px 18px 18px; }
.stop .meta{ color:var(--muted); font-size:.92rem; margin:2px 0 8px; }
.stop a.map{ color:var(--link); text-decoration:none; font-weight:600; }
.stop a.map:hover{ text-decoration:underline; }
blockquote{
  margin:12px 0; padding:14px 16px; background:#142018; border-left:4px solid var(--accent-strong);
  color:#EAF7EA; border-radius:12px;
  font-style:italic;
}
ul{ margin:8px 0 0 1.25rem; }
.small{ font-size:.9rem; color:var(--muted); }

/* Sticky Timer */
.timer-wrap{
  position:fixed; right:10px; bottom:10px; z-index:60;
}
.timer{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:rgba(20,18,15,.8); border:1px solid var(--line); backdrop-filter: blur(6px);
  border-radius:16px;
}
.time{
  font-weight:800; font-size:1.1rem; padding:8px 14px; border-radius:12px; min-width:86px; text-align:center;
  background:#0f1a14; border:1px solid #1f3a2e; color:#D9F3E1;
}
.time.warn{ background:#1B170B; border-color:#3B2E0F; color:#FFE7A1; }
.time.bad{ background:#2A1313; border-color:#4A1E1E; color:#FFD0D0; }
.btn{ padding:8px 12px; border-radius:10px; font-weight:700; border:1px solid var(--line); background:var(--card-2); color:var(--text); cursor:pointer; }
.btn.start{ background:#15351F; border-color:#1f4b2d; }
.btn.end{ background:#3E1616; border-color:#5A2020; }
.btn:active{ transform:translateY(1px); }

/* Footer */
.footer{ text-align:center; color:var(--muted); font-size:.88rem; padding:24px 0 90px; }
.footer a{ color:var(--link); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

/* Added by automation - card palette adjustments */
.overview-card {
  background: #161b22;
  border: 1px solid #2d333b;
}
.route-stop-card {
  background: #112318; /* deep green complement */
  border: 1px solid #1f3a29;
}
.route-stop-card .card-title, .route-stop-card h3, .route-stop-card p, .route-stop-card a {
  color: #d5f2df;
}

/* ---- Modal styles ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.modal-content { position: relative; margin: 4vh auto; max-width: 96vw; max-height: 92vh; z-index: 1001; padding: 0; }
.modal-content img { display: block; max-width: 100%; max-height: 92vh; border-radius: 10px; }
.modal-close { position: absolute; top: 8px; right: 8px; background: var(--accent-blue); color: #fff; border: 0; width: 36px; height: 36px; border-radius: 8px; font-size: 22px; line-height: 1; cursor: pointer; }

/* ---- Details animation container ---- */
details > .details-content { will-change: height; }

/* ---- Palette: complementary brown + blue ---- */


body { background: var(--bg); color: var(--text); }
a { color: var(--link); }

/* Overview card */
.overview-card {
  background: var(--overview-card);
  border: 1px solid var(--border);
}

/* Route stop cards */
.route-stop-card {
  background: var(--stop-card);
  border: 1px solid #3a2b20;
}
.route-stop-card .card-title, .route-stop-card h3, .route-stop-card p, .route-stop-card a {
  color: #f0e6dc;
}

/* Buttons and chips */
button, .chip { background: var(--accent-brown); color: #fff; border: none; }
button.secondary { background: var(--accent-blue); color: #fff; }

/* Timer states if present */
.timer-dock .ok { color: #5bd977; }
.timer-dock .warn { color: #ffd166; }
.timer-dock .over { color: #ff6b6b; }

/* ---- Project palette applied from screenshot ----
#2C3639, #3F4E4F, #A27B5C, #DCD7C9
*/

:root {
  --bg: #0D1B2A;           /* site background */
  --card: #415A77;         /* section/card background */
  --text: #E0E1DD;         /* body text */
  --muted: #E0E1DD;        /* subtle text (use opacity) */
  --accent-blue: #778DA9;  /* accents/links */
  --link: #E0E1DD;
  --overview-card: #415A77;
  --stop-card: #415A77;
  --hook-bg: #1B263B;      /* 30-second hook */
  --border: rgba(224,225,221,0.16);
  --rs-card-bg: #384866;   /* inner route row background */
  --rs-border: rgba(224,225,221,0.12);
  --hint: rgba(224,225,221,0.8);
}

body { background: var(--bg); color: var(--text); }
a { color: var(--link); }

/* Overview card uses blue-grey */
.overview-card {
  background: var(--overview-card);
  border: 1px solid var(--border);
}

/* Route stop cards use brown - with dark text for contrast */
.route-stop-card {
  background: var(--stop-card);
  border: 1px solid #8f6a52;
  color: #2C3639;
}
.route-stop-card .card-title,
.route-stop-card h2,
.route-stop-card h3,
.route-stop-card p,
.route-stop-card a { color: #2C3639; }

/* Buttons and chips */
button, .chip { background: var(--accent-brown); color: #2C3639; border: none; }
button.secondary { background: var(--accent-blue); color: #DCD7C9; }

/* ---- Typography & smoothing ---- */
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, a, button, .chip, .rs-link { 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  text-rendering: optimizeLegibility; 
  letter-spacing: 0.01em;
}

/* ---- Hints & CTAs ---- */
.aside-hint { 
  color: rgba(220,215,201,0.85); 
  font-size: 0.92rem; 
  font-weight: 600; 
  letter-spacing: 0.03em; 
}
.overview summary > .aside-hint { font-size: 0.95rem; }

.rs-link { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; }
.rs-link > a { color: var(--text); text-decoration: none; }
.rs-link > a:hover { text-decoration: underline; text-underline-offset: 2px; }
.stop-name { font-weight: 800; }
.stop-addr { opacity: 0.9; }

.map-cta { 
  display:inline-flex; align-items:center; gap:6px; 
  padding:6px 10px; border-radius: 999px; 
  border: 1px solid rgba(220,215,201,0.35);
  background: rgba(220,215,201,0.06);
  text-decoration: none;
}
.map-cta:hover { background: rgba(220,215,201,0.12); }

/* Avoid any color bleed by increasing contrast on headings */
.card h3, .card h4 { color: var(--text); text-shadow: none; }

/* ---- Modal transitions (smooth open/close) ---- */
.modal-overlay { opacity: 0; transform: scale(0.98); transition: opacity 160ms ease, transform 160ms ease; }
.modal-overlay.is-open { display:block; opacity:1; transform: scale(1); }
.modal-overlay[style*="display: none"] { opacity:0; transform: scale(0.98); }

/* Ensure the route list looks polished */
.card .rs-section + .rs-section { margin-top: 8px; border-top: 1px dashed rgba(220,215,201,0.12); padding-top: 8px; }

/* ---- Ghost capsule CTA ---- */
.map-cta {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width: 78px; min-height: 110px;
  border-radius: 28px;
  border: 2px solid rgba(220,215,201,0.35);
  background: transparent;
  color: #A27B5C;
  font-weight: 700;
  text-decoration: none;
}
.map-cta .cta-top { font-size: 0.72rem; opacity: 0.9; letter-spacing: .02em; }
.map-cta .cta-bottom { font-size: 0.95rem; }
.map-cta:active { transform: translateY(1px); }
.rs-meta { display:flex; align-items:center; }

/* ---- Section and subtext refinements ---- */
.card h3 { font-weight: 800; letter-spacing: .02em; }
.card .subtle { color: rgba(220,215,201,.85); font-weight: 600; font-size: .95rem; }
.rs-link + .rs-link { border-top: 1px dashed rgba(220,215,201,.12); }
.rs-link { padding: 12px 0; }

/* ---- Link color and crispness ---- */
a { color: #A27B5C; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

/* ---- Modal transitions ---- */
.modal-overlay { opacity: 0; transform: scale(0.98); transition: opacity 160ms ease, transform 160ms ease; }
.modal-overlay.is-open { display:block; opacity:1; transform: scale(1); }
.modal-overlay[style*="display: none"] { opacity:0; transform: scale(0.98); }

/* ---- Smoothing ---- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---- Compact Maps CTA pill ---- */
.map-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(220,215,201,0.35);
  background: transparent;
  color: #A27B5C;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.map-cta .cta-label { line-height: 1; }
.map-cta .cta-icon {
  width: 22px; height: 22px; border-radius: 999px;
  border: 1.5px solid currentColor;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 0.95rem; line-height: 1;
}
.map-cta:hover { background: rgba(220,215,201,0.06); }
.rs-meta { display:flex; align-items:center; }

/* Clean dashed dividers and spacing */
.rs-link + .rs-link { border-top: 1px dashed rgba(220,215,201,.12); }
.rs-link { padding: 14px 0; }

/* ---- Map badge pills ---- */
.badge {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(162,123,92,0.18); /* based on --accent-brown */
  color: #A27B5C;
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
}
.badge-link { text-decoration: none; }
.badge-link:active { transform: translateY(1px); }
.map-badge { border: 1px solid rgba(162,123,92,0.35); }

/* Remove old map-cta visuals if any linger */
.map-cta { all: unset; }

/* ---- Timer label + reset styling ---- */
.timer-dock { display:flex; flex-direction: column; gap: 6px; }
.timer-label { font-size: .78rem; font-weight: 600; color: rgba(220,215,201,.8); }
.timer-dock .row { display:flex; align-items:center; gap: 8px; }
#timer-reset.btn.reset { background: #3F4E4F; color: #DCD7C9; }
#timer-reset.btn.reset:hover { filter: brightness(1.05); }


/* ---- Timer container with label and row ---- */
.timer{ display:flex; flex-direction:column; gap:6px; background: rgba(0,0,0,0.5); padding:10px; border-radius:16px; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.timer-row{ display:flex; align-items:center; gap:8px; }
.timer-label{ font-size:.78rem; font-weight:600; color: rgba(220,215,201,.85); }

/* ---- Floating Timer (wireframe style) ---- */
.timer-wrap { position: fixed; right: 12px; bottom: 12px; z-index: 1000; }
.timer {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(0,0,0,0.72);
  border-radius: 22px;
  padding: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  min-width: 260px;
}
.timer-header { color: #fff; font-size: 0.9rem; font-weight: 700; }
.timer-header .muted { font-weight: 600; opacity: .9; }
.timer-main { display: flex; align-items: center; gap: 10px; }
.time {
  background: #0a0a0a;
  color: #e7fff0;
  font-weight: 800; font-size: 1.8rem; line-height: 1;
  padding: 10px 16px;
  border-radius: 14px;
  min-width: 112px;
  text-align: center;
}
.timer-controls { display:flex; gap: 8px; }
.btn { border: 0; border-radius: 12px; padding: 8px 14px; font-weight: 700; cursor: pointer; }
.t-start { background: #1e5a31; color: #dcd7c9; }
.t-end { background: #7a2626; color: #fff; }
.t-reset { background: #A27B5C; color: #2C3639; width: 100%; }
.t-start:active, .t-end:active, .t-reset:active { transform: translateY(1px); }

/* Timer state colors (display only) */
.time.warn { color:#fff2c6; }
.time.bad { color:#ffd2d2; }

/* === Wireframe: Route & Stops card rows === */
:root { --rs-card-bg: #384866; --rs-border: rgba(224,225,221,0.12); --hint: rgba(224,225,221,0.8); }

.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-head h2 { margin:0; }
.section-hint { color: var(--hint); font-weight:700; font-size:.9rem; }

.rs-list { margin-top:8px; }
.rs-link { padding:0; border:0; background:transparent; }
.rs-link + .rs-link { margin-top:10px; border-top:none; }
.rs-card { display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--rs-card-bg); border:1px solid var(--rs-border); border-radius:18px; padding:14px 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); }
.rs-card a { text-decoration:none; color: var(--text); }
.rs-text { display:flex; flex-direction:column; gap:4px; }
.stop-name { display:block; font-weight:800; font-size:1.1rem; line-height:1.25; }
.stop-addr { display:block; font-weight:600; opacity:.9; line-height:1.25; }

.badge.map-badge { background: rgba(224,225,221,0.12); border:1px solid rgba(224,225,221,0.35); color: var(--text); font-weight:800; }
.badge.map-badge:hover { background: rgba(224,225,221,0.18); }


/* Base surfaces */
body { background: var(--bg); color: var(--text); }
.card, .overview-card, .route-stop-card { background: var(--card); color: var(--text); }
a { color: var(--text); }
.hook { background: var(--hook-bg); border-radius: 12px; padding: 10px 12px; }


/* Wireframe rows (blue theme) */
.rs-card { background: var(--rs-card-bg); border: 1px solid var(--rs-border); border-radius: 18px; padding: 14px 16px; }
.rs-card a { color: var(--text); text-decoration: none; }
.rs-text { display:flex; flex-direction:column; gap:4px; }
.stop-name { display:block; font-weight:800; font-size:1.1rem; line-height:1.25; }
.stop-addr { display:block; font-weight:600; opacity:.9; line-height:1.25; }
.badge.map-badge { background: rgba(224,225,221,0.12); border: 1px solid rgba(224,225,221,0.35); color: var(--text); }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-hint { color: var(--hint); font-weight:700; font-size:.9rem; }


/* --- Uniform Route & Stops rows --- */
.rs-list{ display:flex; flex-direction:column; gap:14px; }
.rs-link{ padding:0; border:0; background:transparent; }
.rs-card{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--rs-card-bg);
  border: 1px solid rgba(224,225,221,0.14);
  border-radius: 22px;
  padding: 16px 18px;
  min-height: 88px;
}
.rs-card .rs-text{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.stop-name{ font-weight:800; font-size:1.18rem; line-height:1.25; }
.stop-addr{ font-weight:600; opacity:.9; line-height:1.25; }
.rs-meta{ margin-left:14px; flex-shrink:0; }
.badge.map-badge{ background: rgba(224,225,221,0.12); border:1px solid rgba(224,225,221,0.35); color:#E0E1DD; font-weight:800; }


/* --- Full-width route rows with uniform insets --- */
.rs-list{ padding: 8px 8px 12px; display:flex; flex-direction:column; gap:12px; }
.rs-link{ margin:0; padding:0; }
.rs-card{ width:100%; margin:0; box-sizing:border-box; }


/* Remove stray dashed divider inside Route & Stops */
.rs-list hr,
.rs-list .divider,
.rs-list .dashed,
.rs-list .soft,
.rs-list .rs-divider { display: none !important; height: 0 !important; border: 0 !important; }


/* Align cards with section padding */
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-head .hint { font-weight:600; font-size:.9rem; opacity:.9; }
.rs-list { padding-left: 0; padding-right: 0; margin-top: 12px; }
.rs-card { width: 100%; margin-left: 0; margin-right: 0; }

/* --- Strong overrides --- */
.rs-link + .rs-link { border-top: none !important; }
.rs-list .rs-link::before { content: none !important; display: none !important; }
.rs-list { padding-left: 0 !important; padding-right: 0 !important; }
.rs-card { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }


/* Right-align the 'tap to expand' hint within summary rows */
details > summary{display:flex; align-items:center; gap:12px;}
details > summary > div:first-child{flex:1; min-width:0;}
details > summary > .sub{margin-left:auto; text-align:right; display:flex; align-items:center; gap:6px;}