/* Palette adopted from the standalone kasta project (../kasta/style.css) —
   deliberate choice per user request when merging it in as a tab, extended
   here with dark-mode-appropriate versions of the tokens kasta never needed
   (status banners, borders, focus ring) since kasta only ever had to style
   five simple elements. Every color pairing below was checked against WCAG
   AA contrast requirements (4.5:1 text, 3:1 UI components) before use. */
:root {
  color-scheme: light dark;
  --fg: #111;
  --bg: #fff;
  --accent: #2a6f2a;
  --accent-contrast: #fff; /* matches --bg — same trick kasta used for button text */
  --muted: #666;
  --border: #ccc;
  --focus: #d4380d;
  --danger-bg: #fdecea;
  --danger-text: #7a1f14;
  --ok-bg: #eaf3ec;
  --ok-text: #1e4620;
  --busy-bg: #eef4f8;
  font-size: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #eee;
    --bg: #111;
    --accent: #6fcf6f;
    --accent-contrast: #111;
    --muted: #aaa;
    --border: #444;
    --focus: #ff7a45;
    --danger-bg: #3a1a16;
    --danger-text: #ffb4a8;
    --ok-bg: #163a1e;
    --ok-text: #a8e6b8;
    --busy-bg: #16232b;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  /* viewport-fit=cover (needed for the tab bar's bottom safe-area padding)
     means content also extends under the status bar/notch at the TOP when
     running standalone (installed to home screen) — unlike a normal Safari
     tab, where Safari's own toolbar already reserves that space, so this
     inset is 0 there and harmless. Without it, anything at the very top of
     the page (the install banner, or a tab's own heading once the banner's
     dismissed) can end up rendered under the status bar in standalone mode
     — visible-ish but untappable, not just a cosmetic issue. */
  padding-top: env(safe-area-inset-top, 0px);
}

main {
  max-width: 32rem;
  margin: 0 auto;
  /* Extra bottom padding so content never sits under the fixed tab bar. */
  padding: 1.25rem 1rem calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

h1 { font-size: 1.4rem; margin: 0 0 0.25rem; }

p.lede { color: var(--muted); margin-top: 0; }

#install-banner:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 32rem;
  margin: 0 auto;
  padding: 0.85rem 1rem;
  background: var(--busy-bg);
  color: var(--fg);
  border-bottom: 1px solid var(--border);
}
#install-banner p { margin: 0; flex: 1; font-size: 0.95rem; }
#install-banner button {
  width: auto;
  max-width: none;
  flex: none;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.4rem 0.85rem;
  font-weight: 600;
}

/* Every interactive element gets a large, thumb-friendly target. */
button, summary, input[type="checkbox"], label.filter-option,
input[type="range"], .tab-button {
  min-height: 44px;
}

button {
  font: inherit;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  width: 100%;
  max-width: 20rem;
  display: block;
}
button:active { opacity: 0.8; }
button:disabled { opacity: 0.6; cursor: default; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

#onboarding p { margin-top: 0; }

#onboarding-status:empty { display: none; }
#onboarding-status { margin-top: 0.75rem; font-weight: 600; color: var(--danger-text); }

details#filters-details {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.25rem 1rem 1rem;
  margin: 1rem 0;
}
summary {
  font-weight: 600;
  padding: 0.75rem 0;
  cursor: pointer;
}

fieldset { border: none; padding: 0; margin: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 0.5rem; }

fieldset.radius-control {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
fieldset.radius-control label {
  display: block;
  margin-bottom: 0.4rem;
}
fieldset.radius-control input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
fieldset.radius-control output {
  display: block;
  margin-top: 0.3rem;
  font-weight: 600;
  color: var(--accent);
}

label.filter-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
}
label.filter-option:first-of-type { border-top: none; }
label.filter-option input[type="checkbox"] {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  accent-color: var(--accent);
}
.filter-label { font-weight: 600; }
.hint { display: block; width: 100%; color: var(--muted); font-size: 0.875rem; }

#status {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 600;
}
#status:empty { display: none; }
#status[data-kind="error"] { background: var(--danger-bg); color: var(--danger-text); }
#status[data-kind="ok"] { background: var(--ok-bg); color: var(--ok-text); }
#status[data-kind="busy"] { background: var(--busy-bg); color: var(--accent); }

ol#results { list-style: none; margin: 0; padding: 0; }
ol#results li {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}
ol#results li:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Secondary action — visually subordinate to Starta/Stoppa, same outline
   treatment as the install banner's close button. */
button.report-btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  margin: 0.75rem 0;
}

.obstacle-category { font-weight: 700; }
.obstacle-meta { color: var(--muted); font-size: 0.95rem; margin-top: 0.15rem; }
.obstacle-description { margin-top: 0.4rem; }
.obstacle-debug-id { margin-top: 0.4rem; color: var(--muted); font-size: 0.75rem; font-family: monospace; }

/* --- Skräpkorgar (baskets) tab — ported from ../kasta/style.css --- */

#basket-status {
  margin-top: 1.25rem;
  font-size: 1rem;
  color: var(--muted);
}
#basket-status:empty { display: none; }

#basket-result {
  margin-top: 1.5rem;
  text-align: center;
}

#basket-announcement.big {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0.3rem 0;
}

#basket-compass-note, #basket-updated-at {
  font-size: 0.9rem;
  color: var(--muted);
}
#basket-compass-note:empty { display: none; }

#tab-baskets footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}
#tab-baskets footer p { margin: 0.25rem 0; }

/* --- Bottom tab bar --- */

#tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab-button {
  flex: 1;
  min-height: 56px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  width: auto;
  max-width: none;
}
.tab-button:active { opacity: 1; }
.tab-button[aria-current="page"] {
  color: var(--accent);
  box-shadow: inset 0 2px 0 var(--accent);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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