/* Stilar för delar som kom efter att skriptet delades upp i moduler. Grundstilarna ligger i index.html. */

/* Dagens läge */
.today { display: grid; gap: 2px; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.today-title { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.today-stats { font-variant-numeric: tabular-nums; }
.today-stats b { font-weight: 800; }
.today-worst { font: inherit; text-align: left; background: none; border: 0; padding: 0; color: var(--fg); cursor: pointer; }
.today-worst:hover { text-decoration: underline; }
.today-worst span { font: 600 12px var(--mono); }

/* Meddelande när en länk pekar på något som inte syns just nu */
.notice { margin: 14px 18px 0; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 14%, transparent); font-size: 13px; }

/* Knappraden nere till vänster på kartan ("Var är jag?", Korridor). Knapparna läggs i raden i stället för att placeras var för sig. */
.map-actions { position: absolute; left: 10px; bottom: 30px; right: 60px; z-index: 2; display: flex; flex-wrap: wrap-reverse; align-items: center; gap: 8px; pointer-events: none; }
.map-actions > * { pointer-events: auto; }
@media (max-width: 760px) { .map-actions { bottom: 12px; } }

/* Fokusknappar ovanpå kartan */
.focus { position: absolute; top: 10px; left: 10px; z-index: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.focus .btn { background: var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.focus .btn:hover { border-color: var(--accent); }

/* Flikar och vyer. Utanför kartfliken ersätter vyn listan i panelen. */
.tabs { display: none; }
body:not([data-tab="map"]) #content { display: none; }
.view { flex: 1; min-height: 0; overflow-y: auto; }
.view h2 { margin: 0; font-size: 18px; font-weight: 800; }
.placeholder { padding: 24px 18px; display: grid; gap: 10px; color: var(--muted); }
.placeholder p { margin: 0; max-width: 34em; }
.placeholder h2 { color: var(--fg); }

@media (max-width: 760px) {
  :root { --tabs-h: 56px; }
  body { grid-template-rows: minmax(0, 1fr) 40%; padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); }
  .tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--panel); border-top: 1px solid var(--line); }
  .tabs button { flex: 1; display: grid; place-items: center; align-content: center; gap: 2px; font: 600 11.5px var(--font); color: var(--muted); background: none; border: 0; cursor: pointer; }
  .tabs button svg { width: 22px; height: 22px; }
  .tabs button[aria-selected="true"] { color: var(--accent); }
  /* Mina resor och Station tar hela skärmen ovanför flikraden */
  body:not([data-tab="map"]) { grid-template-rows: minmax(0, 1fr); }
  body:not([data-tab="map"]) #mapwrap, body:not([data-tab="map"]) header, body:not([data-tab="map"]) footer { display: none; }
  body:not([data-tab="map"]) #panel { grid-row: 1; border-top: 0; }
  footer { display: none; }
  /* hela panelen skrollar, så att listan och kortet nås även när rubriken tar mycket plats */
  #panel { overflow-y: auto; }
  #content { flex: none; overflow: visible; }
  .view { overflow: visible; }
  .focus { top: 8px; left: 8px; }
  .focus .btn { padding: 5px 9px; }
}