/* =============================================================
   components.css — Small reusable pieces used on 2+ panels
   -------------------------------------------------------------
   Contains:
   - .section-title / .section-sub  — heading style used on every panel
   - .card                          — generic card surface (base style; currently no
                                       element uses class="card" directly, but panel-
                                       specific cards like .stat-card copy its look —
                                       kept here rather than deleted)
   - .quicklinks / .qchip          — horizontal chip row, used in Overview's
                                       "Jump to" AND Route's per-day "Ideas" row
   - .foot                          — small centered footer text, used at the
                                       bottom of Overview and Info panels
   If a style is only ever used inside one panel, it belongs in
   that panel's own css file instead, not here.
   ============================================================= */
/* ============ SECTION HEADINGS ============ */
.section-title{
  font-family:var(--font-display); font-size:21px; letter-spacing:.02em; color:var(--paper);
  margin:26px 2px 12px; display:flex; align-items:center; gap:8px;
}
.section-title.dark{color:var(--ink)}
.section-sub{ font-size:13px; color:var(--ink-70); margin:-6px 2px 14px; line-height:1.5}


/* ============ CARDS shared ============ */
.card{ background:var(--paper); border-radius:var(--radius-md); box-shadow:var(--shadow); }


/* ============ QUICK LINK ROW ============ */
.quicklinks{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; scrollbar-width:none}
.quicklinks::-webkit-scrollbar{display:none}
.qchip{
  flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; text-decoration:none; display:flex; align-items:center; gap:6px;
  box-shadow:var(--shadow);
}
.qchip svg{width:13px;height:13px; stroke:var(--teal); fill:none; stroke-width:2}


/* footer */
.foot{ text-align:center; font-size:11px; color:var(--ink-45); padding:22px 10px 6px; line-height:1.6}