/* Utflykt – Nocturne theme (dark, single scheme) */
:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
  --n-200: #e4e7f5; --n-300: #cfd3e5; --n-400: #b2b6ca; --n-500: #9397ab;
  --n-600: #75798c; --n-700: #595d6c; --n-800: #3f424d; --n-900: #292b31;
  --a-100: #f5f4ff; --a-200: #e7e5fe; --a-300: #d2cefd; --a-400: #b5abfc;
  --a-600: #796cbf; --a-800: #423a6a; --a-900: #2b2741;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
  --glow: inset 0 0 0 1px var(--color-accent), 0 0 24px -8px var(--color-accent);

  /* aliases used by app.js inline styles */
  --ink: var(--color-text);
  --muted: var(--n-400);
  --good: var(--a-300);
  /* Warnings: muted amber, the one warm colour in the theme, so it never blends in
     (#e8b465 on the surface #232532 ≈ 8:1 contrast) */
  --warn: #e8b465;
  --warn-line: color-mix(in srgb, #e8b465 70%, transparent);
  --warn-bg: color-mix(in srgb, #e8b465 11%, var(--color-surface));
  --sea: var(--a-400);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--color-text);
  background: radial-gradient(120% 420px at 0% 0%, var(--a-900) 0%, var(--color-bg) 70%) no-repeat, var(--color-bg);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--a-400); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.015em; }
.ph { line-height: 1; vertical-align: -0.12em; }

.top { padding: 28px 0 18px; padding-top: max(28px, env(safe-area-inset-top)); }
.top h1 { font-size: 30px; margin: 0; line-height: 1.1; letter-spacing: -0.02em; }
.top h1 span { font-weight: 400; font-size: 16px; color: var(--n-400); margin-left: 4px; letter-spacing: 0; }
.top .sub { margin: 4px 0 0; color: var(--n-400); font-size: 14px; }
.top .wrap::after { content: ""; display: block; width: 32px; height: 2px; margin-top: 12px; background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent); }

.card { background: var(--color-surface); border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

.planner { position: relative; padding: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.planner label { display: flex; flex-direction: column; font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 70%, transparent); gap: 5px; min-width: 0; }
.planner input, .planner select {
  font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 6px 10px; min-height: 36px; width: 100%; min-width: 0;
}
.planner input:hover, .planner select:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.planner input:focus-visible, .planner select:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
@media (max-width: 560px) { .planner { grid-template-columns: 1fr 1fr; } }

.day-weather { margin: 16px 0 4px; display: flex; gap: 12px; align-items: flex-start; min-height: 48px; }
.day-weather .big { font-size: 34px; line-height: 1; color: var(--a-400); }
.day-weather .txt { font-size: 14px; color: var(--n-400); }
.day-weather .txt strong { font-size: 15px; font-weight: 500; color: var(--color-text); }
.day-weather .hint { color: var(--warn); font-weight: 500; }

/* Förslag idag */
.suggest { margin: 16px 0 6px; }
.sug-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sug-head h2, .section-title { font-weight: 500; font-size: 20px; margin: 0; }
.sug-head span { color: var(--n-500); font-size: 12px; font-variant-numeric: tabular-nums; }
.sug-list { display: grid; gap: 8px; }
.sug { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; text-align: left; font: inherit; color: inherit; width: 100%; cursor: pointer; }
.sug:hover, .dest:hover { background: var(--n-900); }
.sug:active, .dest:active { background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); }
.sug:first-child { box-shadow: var(--glow); }
.sug .rank { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 1px solid var(--n-700); color: var(--n-300); display: grid; place-items: center; font-weight: 500; font-size: 13px; }
.sug:first-child .rank { border-color: var(--color-accent); color: var(--color-accent); background: var(--a-900); }
.sug-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sug-title strong { font-weight: 500; font-size: 17px; }
.sug-title .area { color: var(--n-500); font-size: 13px; margin-left: 4px; }
.sug-meta { font-size: 13px; color: var(--n-400); }
.sug-meta .ph { color: var(--a-400); font-size: 15px; }
.sug-amen { color: var(--n-500); }
.sug-amen .ph { color: var(--n-400); }
.sug-note { font-size: 12px; color: var(--n-500); margin: 6px 2px 0; }
.sug-note .ph-check { color: var(--color-accent); }
.sug-empty { padding: 14px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sug.disrupted { box-shadow: inset 0 0 0 1px var(--warn-line); }
.sug.disrupted .rank { border-color: var(--warn); color: #1d1a12; background: var(--warn); }
.spinner { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid var(--n-800); border-top-color: var(--color-accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.trip.disrupted { box-shadow: inset 0 0 0 1px var(--warn-line); }
.trip.disrupted .trip-head .ph-warning { color: var(--warn); }
.alert-box { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); border-radius: var(--radius-md); padding: 10px 12px; margin-top: 12px; font-size: 14px; }
.alert-box strong { color: var(--warn); font-weight: 500; }
.alert-box details { margin-top: 6px; color: var(--n-200); }
.alert-box summary { cursor: pointer; }
.alert-box .match { color: var(--n-400); font-size: 12px; }
.alert-box p { margin: 6px 0; color: var(--color-text); }
.alert-box a { color: var(--color-accent); }

/* I närheten */
.near-map { height: 210px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); margin: 10px 0 6px; }
.emoji-pin { display: grid; place-items: center; font-size: 14px; color: var(--a-100); background: var(--a-800); border: 1px solid var(--color-accent); border-radius: 50%; }
#nearby details { margin-top: 8px; font-size: 14px; }
#nearby summary { cursor: pointer; font-weight: 500; }
.near-list { list-style: none; margin: 6px 0 0; padding: 0; }
.near-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.near-list li a { color: var(--color-accent); font-size: 13px; white-space: nowrap; }
.near-list .t { color: var(--n-500); font-size: 12px; }
.sug-amen:empty { display: none; }

.link-btn { font: inherit; font-size: 14px; background: none; border: 0; padding: 2px 4px; margin: -2px -4px; border-radius: var(--radius-sm); color: var(--color-accent); cursor: pointer; white-space: nowrap; }
.link-btn:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.link-btn:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.section-title { font-size: 18px; margin: 26px 0 0; }

.filters { margin: 10px 0 12px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; font: inherit; font-size: 13px; border: 1px solid var(--n-800); background: transparent; color: var(--n-300);
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.chip:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.chip.on { border-color: var(--color-accent); background: var(--a-900); color: var(--a-200); }
.filter-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; flex-wrap: wrap; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.switch input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg button { font: inherit; font-size: 13px; border: 0; background: transparent; color: var(--color-text); padding: 7px 14px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--color-divider); }
.seg button:not(.active):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg button.active { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg button:focus-visible { outline-offset: -2px; }

.list { display: grid; gap: 8px; padding-bottom: 16px; }
.dest { padding: 14px; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; display: block; }
.dest.off { opacity: .55; }
.dest-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.dest h2 { font-weight: 500; font-size: 17px; margin: 0; }
.dest .area { color: var(--n-500); font-size: 12px; white-space: nowrap; }
.dest p { margin: 6px 0 8px; font-size: 13px; color: var(--n-400); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; white-space: nowrap; font-size: 11px; letter-spacing: .02em; padding: 3px 10px; border-radius: 6px; background: var(--n-800); color: var(--n-200); }
.tag.good { background: var(--a-800); color: var(--a-100); }
.tag.warn { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); color: var(--warn); }
.tag.sea { background: transparent; box-shadow: inset 0 0 0 1px var(--color-accent); color: var(--color-accent); }
.empty { text-align: center; color: var(--n-500); padding: 30px 0; }

.map { height: 62vh; min-height: 340px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 16px; }

/* Leaflet, dark */
.leaflet-container { background: var(--color-bg); font: inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); }
.leaflet-popup-content-wrapper { border-radius: var(--radius-md); }
.leaflet-container a.leaflet-popup-close-button { color: var(--n-400); }
.leaflet-bar a { background: var(--color-surface); color: var(--color-text); border-bottom-color: var(--n-800); }
.leaflet-bar a:hover { background: var(--n-900); color: var(--color-text); }
.leaflet-bar { border: 0 !important; box-shadow: var(--shadow-sm) !important; }
.leaflet-control-attribution { background: color-mix(in srgb, var(--color-bg) 80%, transparent) !important; color: var(--n-500); }
.leaflet-control-attribution a { color: var(--n-400); }
.leaflet-marker-icon:not(.emoji-pin) { filter: hue-rotate(38deg) saturate(.7) brightness(1.05); }
.leaflet-popup-content button { font: inherit; font-size: 13px; margin-top: 6px; background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-md); padding: 4px 10px; cursor: pointer; }
.leaflet-popup-content button:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }

/* Detail sheet */
.sheet { border: 0; padding: 0; width: min(760px, 100%); max-width: 100%; max-height: 92vh; margin: auto auto 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); }
@media (min-width: 761px) { .sheet { margin: auto; border-radius: var(--radius-lg); } }
.sheet::backdrop { background: color-mix(in srgb, var(--n-900) 70%, transparent); }
.sheet-inner { padding: 20px 16px 28px; position: relative; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.close { position: absolute; top: 10px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; font-size: 18px; border: 0; border-radius: var(--radius-md); background: none; color: var(--n-400); cursor: pointer; }
.close:hover { background: var(--n-800); color: var(--color-text); }
.sheet h2 { font-weight: 500; font-size: 24px; margin: 0 40px 2px 0; }
.sheet .area { color: var(--n-400); font-size: 13px; }
.sheet h3 { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--n-500); margin: 20px 0 8px; }
.toddler { background: var(--a-900); color: var(--a-200); border-radius: var(--radius-md); padding: 10px 12px; font-size: 14px; margin-top: 10px; }
.toddler strong { color: var(--a-100); font-weight: 500; }
.wx-row { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.wx-row .big { font-size: 26px; color: var(--a-400); }

.btn { font: inherit; font-weight: 500; background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-md); padding: 9px 16px; cursor: pointer; width: 100%; margin-top: 14px; }
.btn:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.links { display: flex; gap: 14px; margin-top: 10px; font-size: 14px; flex-wrap: wrap; }
.links a { color: var(--color-accent); white-space: nowrap; text-decoration: none; }
.links a:hover { color: var(--a-400); }

.summary { background: var(--color-bg); box-shadow: var(--shadow-sm); border-radius: var(--radius-md); padding: 10px 12px; font-size: 14px; margin-top: 12px; }
.summary strong { font-size: 15px; font-weight: 500; color: var(--a-300); }
.trip { box-shadow: inset 0 0 0 1px var(--n-800); border-radius: var(--radius-md); padding: 10px 12px; margin-top: 8px; cursor: pointer; }
.trip:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.trip.sel { box-shadow: inset 0 0 0 1px var(--color-accent), 0 0 16px -6px var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.trip-head { display: flex; justify-content: space-between; gap: 8px; font-weight: 500; font-variant-numeric: tabular-nums; }
.trip-head .meta { font-weight: 400; color: var(--n-400); font-size: 13px; }
.legs { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; display: none; }
.trip.sel .legs { display: block; }
/* a selected trip with a disruption stays amber */
.trip.sel.disrupted { box-shadow: inset 0 0 0 1px var(--warn), 0 0 16px -6px var(--warn); background: var(--warn-bg); }
.legs li { display: grid; grid-template-columns: 24px 48px 1fr; gap: 4px; padding: 3px 0; }
.legs li > span:first-child { color: var(--a-400); font-size: 15px; }
.legs .t { font-variant-numeric: tabular-nums; color: var(--n-500); }
.modes { font-size: 15px; letter-spacing: 2px; color: var(--a-400); }
.err { color: var(--n-200); font-size: 14px; margin-top: 8px; }
.loading { color: var(--n-500); font-size: 14px; margin-top: 8px; }

.foot { color: var(--n-500); font-size: 12px; padding-top: 6px; padding-bottom: 28px; }

/* Dark map tiles: OSM tiles inverted to match Nocturne (keyless) */
.tiles-dark { filter: invert(1) hue-rotate(200deg) brightness(.82) contrast(.92) saturate(.55); }