/* ==========================================================================
   Södra Hjälmarens Bussbolag — retro trafikbolag, modern funktion
   ========================================================================== */

:root {
  --green-950: #071f17;
  --green-900: #0b2e23;
  --green-800: #0e3b2c;
  --green-700: #14513c;
  --green-600: #1d6a4f;
  --green-300: #8fb5a3;
  --cream-50:  #fdfaf1;
  --cream-100: #f7f0dc;
  --cream-200: #eee3c4;
  --cream-300: #e0d1a8;
  --brass:       #c4a265;
  --brass-dark:  #94763d;
  --brass-light: #e6cf98;
  --ink:   #18221d;
  --ink-2: #4a564f;
  --red:   #a8402c;
  --amber: #ffb84d;
  --board: #0f1512;

  --f-display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --f-script:  "Yellowtail", "Brush Script MT", cursive;
  --f-label:   "Archivo Narrow", "Arial Narrow", sans-serif;
  --f-body:    "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-board:   "VT323", ui-monospace, monospace;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 0 rgba(11,46,35,.08), 0 10px 30px -12px rgba(11,46,35,.35);
  --shadow-lift: 0 2px 0 rgba(11,46,35,.08), 0 18px 40px -14px rgba(11,46,35,.45);
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 1.0625rem/1.55 var(--f-body);
  color: var(--ink);
  background-color: var(--cream-100);
  background-image: var(--paper-noise), radial-gradient(ellipse at 50% -10%, var(--cream-50), transparent 70%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; padding-bottom: 4rem; }
img { max-width: 100%; height: auto; }
a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-900); }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brass-light); color: var(--green-900); }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); }
.center { text-align: center; }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--brass); color: var(--green-900); padding: .5rem 1rem; border-radius: var(--r-sm); }
.inline { display: inline; }

/* ---------- Typografi ---------- */

.script { font-family: var(--f-script); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--brass-dark); }
.h1, .h2, .h3 { margin: 0 0 .6em; line-height: 1; color: var(--green-800); }
.h1 { font: 400 clamp(2.6rem, 6vw, 4.4rem)/.95 var(--f-display); letter-spacing: .02em; }
.h1 .script { font-size: .9em; margin-right: .12em; color: var(--brass); }
.h2 { font: 400 clamp(2rem, 4vw, 2.8rem)/1 var(--f-display); letter-spacing: .03em; }
.h2 .script { font-size: .85em; margin-right: .1em; }
.h3 { font: 700 1.05rem/1.2 var(--f-label); text-transform: uppercase; letter-spacing: .12em; color: var(--green-800); display: flex; align-items: center; gap: .6rem; }
.eyebrow { font: 600 .82rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .22em; color: var(--brass-dark); margin: 0 0 .9rem; }
.lead { font-size: 1.15rem; max-width: 60ch; }
.lbl { display: block; font: 700 .74rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .16em; color: var(--green-700); margin-bottom: .45rem; }
.count { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: 99px; background: var(--green-800); color: var(--cream-100); font-size: .8rem; letter-spacing: 0; }

/* ---------- Infobar ---------- */

.infobar { background: var(--green-950); color: var(--cream-200); font: 500 .8rem/1 var(--f-label); letter-spacing: .08em; }
.infobar__inner { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; gap: 1rem; }
.infobar strong { color: var(--brass-light); font-weight: 600; }
.infobar__clock { font-family: var(--f-board); font-size: 1.15rem; color: var(--amber); letter-spacing: .1em; }
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #5fd38d; margin-right: .4rem; box-shadow: 0 0 0 0 rgba(95,211,141,.6); animation: pulse 2.4s infinite; vertical-align: 1px; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(95,211,141,0); } 100% { box-shadow: 0 0 0 0 rgba(95,211,141,0); } }

/* ---------- Masthead ---------- */

.masthead { position: sticky; top: 0; z-index: 40; background: rgba(253,250,241,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.masthead__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex-shrink: 0; }
.brand img { height: 56px; width: auto; display: block; mix-blend-mode: multiply; }
.brand__text { display: flex; flex-direction: column; line-height: .9; }
.brand__script { font: 400 1.55rem/1 var(--f-script); color: var(--green-800); }
.brand__script--light { color: var(--brass-light); font-size: 2.2rem; }
.brand__caps { font: 400 1.35rem/1 var(--f-display); letter-spacing: .32em; color: var(--brass-dark); padding-left: .15em; }

.mainnav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 1rem; }
.mainnav ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.mainnav ul a {
  display: block; padding: .55rem .75rem; text-decoration: none; white-space: nowrap;
  font: 700 .86rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .14em; color: var(--green-800);
  border-radius: 99px; position: relative;
}
.mainnav ul a:hover { background: var(--cream-200); }
.mainnav ul a[aria-current="page"] { background: var(--green-800); color: var(--cream-100); }
.mainnav__side { display: flex; align-items: center; gap: .65rem; }

.modeswitch { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--cream-200); box-shadow: inset 0 1px 3px rgba(0,0,0,.15); }
.modeswitch button {
  border: 0; background: transparent; cursor: pointer; padding: .42rem .75rem; border-radius: 99px;
  font: 700 .74rem/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.modeswitch button.is-on { background: var(--brass); color: var(--green-900); box-shadow: 0 2px 0 var(--brass-dark); }
.rolebadge { font: 700 .72rem/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; padding: .4rem .7rem; border: 1.5px solid var(--brass); border-radius: 99px; color: var(--brass-dark); }
.userchip { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--green-800); font-weight: 600; }
.userchip__name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--green-700); font: inherit; font-size: .92rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn--danger { color: var(--red); margin-top: 1rem; }

.navtoggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: 12px; background: var(--green-800); cursor: pointer; padding: 12px 11px; flex-direction: column; justify-content: space-between; }
.navtoggle span:not(.sr) { display: block; height: 3px; border-radius: 2px; background: var(--cream-100); transition: transform .25s, opacity .2s; }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* De tre fartränderna från logotypens vingar */
.speedlines {
  height: 14px;
  background:
    linear-gradient(var(--green-800) 0 4px, transparent 4px 5px, var(--brass) 5px 7px, transparent 7px 9px, var(--green-800) 9px 14px);
}
.speedlines--flip { transform: scaleY(-1); }

/* ---------- Knappar & fält ---------- */

.btn {
  --bg: var(--green-800); --fg: var(--cream-50); --edge: var(--green-950);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.35rem; border-radius: 12px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--bg); color: var(--fg);
  font: 700 .9rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .14em;
  box-shadow: 0 4px 0 var(--edge), 0 8px 18px -8px rgba(0,0,0,.35);
  transition: transform .12s, box-shadow .12s, filter .15s;
  position: relative; top: 0;
}
.btn:hover { filter: brightness(1.06); color: var(--fg); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge), 0 3px 8px -4px rgba(0,0,0,.3); }
.btn--brass { --bg: linear-gradient(180deg, var(--brass-light), var(--brass) 60%); --fg: var(--green-900); --edge: var(--brass-dark); }
.btn--green { --bg: var(--green-700); --edge: var(--green-900); }
.btn--ghost { --bg: transparent; --fg: var(--green-800); --edge: transparent; box-shadow: inset 0 0 0 2px var(--green-800); }
.btn--ghost:active { box-shadow: inset 0 0 0 2px var(--green-800); }
.btn--sm { padding: .55rem .85rem; font-size: .74rem; border-radius: 9px; white-space: nowrap; }
.btn--lg { padding: 1.05rem 1.6rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn + .btn { margin-left: .4rem; }
.btn--block + .btn--block { margin: .7rem 0 0; }

.field {
  width: 100%; font: 500 1.02rem/1.3 var(--f-body); color: var(--ink);
  padding: .78rem .9rem; border-radius: 10px;
  background: var(--cream-50); border: 2px solid var(--cream-300);
  box-shadow: inset 0 2px 0 rgba(11,46,35,.05);
  transition: border-color .15s, box-shadow .15s;
  appearance: none; -webkit-appearance: none;
}
.field:hover { border-color: var(--brass); }
.field:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 4px rgba(196,162,101,.35); }
select.field {
  padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230e3b2c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
textarea.field { resize: vertical; min-height: 3.2rem; }
.addr-field { margin-top: .5rem; }
.formrow { margin-bottom: 1.15rem; }
.has-error .field { border-color: var(--red); }
.err { color: var(--red); font-size: .9rem; margin: .35rem 0 0; font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid2--top { gap: 2.5rem; align-items: start; margin-top: 1rem; }
.grid3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0 1rem; }

/* Segmenterad väljare */
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 1.1rem; border: 0; border-radius: 14px; background: var(--cream-200); box-shadow: inset 0 1px 3px rgba(0,0,0,.14); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span { display: block; text-align: center; padding: .7rem .5rem; border-radius: 10px; font: 700 .84rem/1.1 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s; }
.segmented input:checked + span { background: var(--green-800); color: var(--cream-50); box-shadow: 0 3px 0 var(--green-950); }
.segmented input:focus-visible + span { outline: 3px solid var(--brass); }
.segmented input:disabled { cursor: not-allowed; }
.segmented input:disabled + span { opacity: .4; cursor: not-allowed; }

/* Platsväljare */
.seatpicker { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.seatpicker label { position: relative; }
.seatpicker input { position: absolute; opacity: 0; }
.seatpicker span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--cream-300); background: var(--cream-50); font: 400 1.5rem/1 var(--f-display); color: var(--green-800); cursor: pointer; transition: all .15s; }
.seatpicker span:hover { border-color: var(--brass); }
.seatpicker input:checked + span { background: var(--green-800); border-color: var(--green-800); color: var(--brass-light); transform: scale(1.06); box-shadow: 0 3px 0 var(--green-950); }
.seatpicker input:focus-visible + span { outline: 3px solid var(--brass); }

.swap {
  width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--cream-50);
  background: var(--brass); color: var(--green-900); font-size: 1.3rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 0 var(--brass-dark); transition: transform .3s;
  justify-self: end; margin: -.9rem 4.1rem -.9rem 0; position: relative; z-index: 2;
}
.swap:hover { transform: rotate(180deg); }

/* ---------- Flash ---------- */

.flash { margin: 1.2rem 0 0; padding: .9rem 1.2rem .9rem 3rem; border-radius: var(--r); font-weight: 600; position: relative; border: 2px solid; }
.flash::before { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; }
.flash--ok { background: #e5f0e7; border-color: var(--green-600); color: var(--green-900); }
.flash--ok::before { content: "✓"; }
.flash--info { background: var(--cream-50); border-color: var(--brass); color: var(--green-900); }
.flash--info::before { content: "ℹ"; }
.flash--error { background: #f8e3dc; border-color: var(--red); color: #5d1f13; }
.flash--error::before { content: "!"; font-weight: 800; }

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden; color: var(--cream-100);
  background:
    repeating-conic-gradient(from 0deg at 78% 34%, rgba(230,207,152,.06) 0 6deg, transparent 6deg 12deg),
    radial-gradient(ellipse at 78% 34%, var(--green-700), var(--green-800) 45%, var(--green-900));
  padding: 3.5rem 0 7.5rem;
}
.hero__sky { position: absolute; inset: 0; pointer-events: none; }
.hero__scene { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 300px; color: var(--brass); }
.hero__scene .sun { fill: var(--brass); opacity: .9; }
.hero__scene .sun-dots { color: var(--brass-light); opacity: .6; }
.hero__scene .hill--far { fill: #1a5a43; }
.hero__scene .church { fill: #154a37; }
.hero__scene .lake { fill: #3b7d68; opacity: .55; }
.hero__scene .ripples { stroke: var(--brass-light); stroke-width: 2; stroke-linecap: round; opacity: .35; }
.hero__scene .trees { fill: #0a2a20; }
.hero__scene .hill--near { fill: var(--green-950); }
.hero__scene .road { stroke: var(--brass); stroke-width: 3; stroke-dasharray: 26 18; opacity: .55; }

.hero__inner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero .eyebrow { color: var(--brass-light); }

/* Emaljskylt med logotypen */
.enamel {
  position: relative; max-width: 520px; margin: 0 0 2rem; padding: 14px 18px;
  background: #f8f2e2; border-radius: 18px; transform: rotate(-1.5deg);
  box-shadow: inset 0 0 0 3px var(--brass), inset 0 0 0 7px #f8f2e2, inset 0 0 0 8px var(--brass-dark),
              0 2px 0 #d8c9a3, 0 24px 40px -18px rgba(0,0,0,.7);
}
.enamel img { display: block; width: 100%; height: auto; border-radius: 8px; mix-blend-mode: multiply; }
.enamel i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6d8, var(--brass) 45%, var(--brass-dark)); box-shadow: 0 1px 1px rgba(0,0,0,.4); }
.enamel i:nth-of-type(1) { top: 9px; left: 9px; }
.enamel i:nth-of-type(2) { top: 9px; right: 9px; }
.enamel i:nth-of-type(3) { bottom: 9px; left: 9px; }
.enamel i:nth-of-type(4) { bottom: 9px; right: 9px; }
.hero__title { margin: 0 0 1.2rem; line-height: .82; }
.hero__title .script { display: block; font-size: clamp(3rem, 6vw, 4.6rem); color: var(--brass-light); margin-left: .1em; transform: rotate(-4deg); transform-origin: left; text-shadow: 3px 3px 0 var(--green-950); }
.hero__title .caps {
  display: block; font: 400 clamp(4.2rem, 10vw, 8rem)/.85 var(--f-display); letter-spacing: .02em; color: var(--cream-50);
  text-shadow: 3px 3px 0 var(--brass), 7px 7px 0 var(--green-950);
}
.hero__lead { font-size: 1.15rem; max-width: 46ch; color: var(--cream-200); margin: 0 0 1.8rem; }
.hero__stats { display: flex; gap: 0; margin: 0; flex-wrap: wrap; }
.hero__stats div { padding: .4rem 1.4rem; border-left: 2px solid rgba(230,207,152,.3); }
.hero__stats div:first-child { padding-left: 0; border-left: 0; }
.hero__stats dt { font: 600 .72rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .18em; color: var(--green-300); margin-bottom: .3rem; }
.hero__stats dd { margin: 0; font: 400 2.6rem/1 var(--f-display); color: var(--brass-light); }
.hero__stats small { font-size: .5em; color: var(--green-300); margin-left: .15em; }

/* Reseplanerare — en biljett */
.planner {
  position: relative; color: var(--ink);
  background: var(--cream-50) var(--paper-noise);
  border-radius: var(--r-lg); padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 0 0 6px rgba(253,250,241,.12), 0 30px 60px -20px rgba(0,0,0,.6);
}
.planner::before, .planner::after { /* perforeringshål */
  content: ""; position: absolute; top: 72px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-800);
}
.planner::before { left: -13px; }
.planner::after { right: -13px; }
.planner__head { display: flex; justify-content: space-between; align-items: center; margin: -.2rem 0 1.4rem; padding-bottom: 1rem; border-bottom: 2px dashed var(--cream-300); }
.planner__title { font: 400 2rem/1 var(--f-display); letter-spacing: .08em; color: var(--green-800); }
.planner__punch { width: 22px; height: 22px; border-radius: 50%; background: var(--cream-200); box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.planner__route { display: grid; background: var(--cream-100); border-radius: 14px; padding: .9rem .9rem .3rem; margin-bottom: 1rem; border: 1.5px solid var(--cream-200); }
.planner__field { display: block; margin-bottom: .7rem; }
.planner__alt { text-align: center; margin: .9rem 0 0; font-size: .95rem; color: var(--ink-2); }
.planner--compact { position: sticky; top: 110px; }
.planner--compact::before, .planner--compact::after { background: var(--cream-100); top: 64px; }
.planner--compact { box-shadow: var(--shadow); border: 1.5px solid var(--cream-200); }

/* ---------- Sektioner ---------- */

.section { padding: 4rem 0 1rem; }
.section--paper { margin-top: 3rem; padding: 3.5rem 0 3rem; background: var(--cream-200) var(--paper-noise); border-block: 2px solid var(--cream-300); }
.section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.more { font: 700 .85rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .14em; text-decoration: none; color: var(--brass-dark); }
.more:hover { color: var(--green-800); }

.pagehead { padding: 2.6rem 0 1.4rem; position: relative; }
.pagehead::after { content: ""; display: block; width: min(1180px, 100% - 32px); margin: 1.2rem auto 0; height: 7px; background: linear-gradient(var(--green-800) 0 3px, transparent 3px 4px, var(--brass) 4px 7px); }
.pagehead .h1 { margin: 0; }
.h1--route { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.h1--route .arrow { color: var(--brass); }
.back { display: inline-block; margin-bottom: 1rem; font: 700 .8rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .14em; text-decoration: none; }

/* ---------- Avgångstavla ---------- */

.board {
  background: linear-gradient(180deg, #1a231e, var(--board));
  border-radius: 18px; padding: 1rem 1rem 1.2rem;
  box-shadow: 0 0 0 6px #2b352f, 0 0 0 8px var(--brass-dark), 0 30px 50px -24px rgba(0,0,0,.6);
  margin: 1rem 0;
  font-family: var(--f-board); color: var(--amber);
}
.board__top { display: flex; justify-content: space-between; align-items: center; padding: .1rem .6rem .8rem; border-bottom: 1px solid #2c3832; margin-bottom: .3rem; }
.board__brand { font: 700 .76rem/1 var(--f-label); letter-spacing: .3em; color: #8d978f; }
.board__clock { font-size: 1.7rem; color: var(--amber); text-shadow: 0 0 10px rgba(255,184,77,.5); }
.board__row {
  display: grid; grid-template-columns: 6.5rem 5.2rem 1fr 1fr 3rem; gap: .8rem; align-items: center;
  padding: .55rem .6rem; text-decoration: none; color: var(--amber);
  font-size: 1.55rem; line-height: 1.05; letter-spacing: .06em;
  border-bottom: 1px dashed #26302b; text-shadow: 0 0 8px rgba(255,184,77,.35);
  border-radius: 6px; transition: background .15s;
}
.board__row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.board__row:hover { background: #1c2621; color: #ffd18a; }
.board__row--head { font: 700 .72rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: #77827a; text-shadow: none; border-bottom: 1px solid #2c3832; }
.board__time small { display: block; font-size: .7em; color: #b8915a; letter-spacing: .04em; }
.board__seats { text-align: right; }
.board__type { display: inline-block; padding: .18rem .45rem .1rem; border-radius: 4px; font-size: 1.1rem; text-shadow: none; }
.board__type.is-offer { background: #1f5c43; color: #c7f0d4; }
.board__type.is-request { background: #6e5626; color: #ffe2a8; }
.board__empty { display: block; color: #b89766; font-size: 1.3rem; text-align: center; padding: 1.4rem; white-space: normal; }

/* ---------- Linjeremsa ---------- */

.linestrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); overflow-x: auto; padding: 2.2rem .5rem 1rem; position: relative; scrollbar-width: thin; }
.linestrip__stop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--green-800); padding: 0 .4rem; }
.linestrip__stop::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 8px; background: var(--green-800); }
.linestrip__stop:first-child::before { left: 50%; }
.linestrip__stop:last-child::before { right: 50%; }
.linestrip__dot { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--cream-50); border: 6px solid var(--green-800); margin-bottom: .8rem; transition: transform .2s, background .2s; }
.linestrip__stop.is-terminal .linestrip__dot { background: var(--brass); width: 36px; height: 36px; margin-top: -3px; }
.linestrip__stop:hover .linestrip__dot { transform: scale(1.2); background: var(--brass-light); }
.linestrip__name { font: 700 .95rem/1.15 var(--f-label); }
.linestrip__area { font-size: .78rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; margin-top: .2rem; }

/* ---------- Så fungerar det ---------- */

.steps { list-style: none; padding: 0; margin: 2rem 0 2.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: s; }
.step { background: var(--cream-50) var(--paper-noise); border-radius: var(--r); padding: 1.6rem 1.3rem 1.3rem; box-shadow: var(--shadow); border: 1.5px solid var(--cream-200); position: relative; }
.step__num { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--green-800); color: var(--brass-light); font: 400 2rem/1 var(--f-display); box-shadow: 0 0 0 4px var(--cream-50), 0 0 0 6px var(--brass); margin-bottom: 1rem; }
.step h3 { font: 400 1.6rem/1 var(--f-display); letter-spacing: .04em; color: var(--green-800); margin: 0 0 .5rem; }
.step p { margin: 0; color: var(--ink-2); }

/* ---------- Resekort (resultat) ---------- */

.layout-split { display: grid; grid-template-columns: 340px 1fr; gap: 2.5rem; align-items: start; margin-top: 1.5rem; }
.layout-ride { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; margin-top: 1.5rem; }
.layout-ride aside { display: grid; gap: 1.2rem; position: sticky; top: 110px; }
.results__summary { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 1.6rem; }
.results__edit { display: none; font: 700 .8rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .12em; }
.routechip { display: inline-flex; gap: .5rem; padding: .55rem 1rem; border-radius: 99px; background: var(--green-800); color: var(--cream-50); font: 700 .9rem/1 var(--f-label); letter-spacing: .06em; }
.results .h3 { margin-top: 1.6rem; }

.ridelist { display: grid; gap: .9rem; margin-bottom: 1.5rem; }
.ride {
  --notch: var(--cream-100);
  display: grid; grid-template-columns: 112px 1fr 104px; text-decoration: none; color: var(--ink);
  background: var(--cream-50); border-radius: var(--r); box-shadow: var(--shadow); position: relative;
  transition: transform .18s, box-shadow .18s; overflow: hidden; border: 1.5px solid var(--cream-200);
}
.ride:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); color: var(--ink); }
.ride__stub {
  background: var(--green-800) var(--paper-noise); color: var(--cream-50);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem .5rem; text-align: center;
  position: relative;
}
.ride--request .ride__stub { background-color: var(--brass-dark); }
.ride__stub::after { /* perforering */
  content: ""; position: absolute; right: -1px; top: 8px; bottom: 8px; width: 2px;
  background: repeating-linear-gradient(var(--cream-50) 0 6px, transparent 6px 11px);
}
.ride__time { font: 400 2.3rem/1 var(--f-display); letter-spacing: .03em; }
.ride__date { font: 600 .78rem/1.2 var(--f-label); text-transform: uppercase; letter-spacing: .1em; opacity: .85; margin-top: .25rem; }
.ride__flex { font-size: .74rem; margin-top: .35rem; padding: .1rem .45rem; border-radius: 99px; background: rgba(255,255,255,.14); }
.ride__body { padding: 1rem 1.2rem; min-width: 0; }
.ride__route { display: flex; align-items: center; gap: .6rem; margin: .55rem 0 .6rem; flex-wrap: wrap; }
.ride__place { display: inline-flex; align-items: center; gap: .4rem; font: 700 1.08rem/1.2 var(--f-label); color: var(--green-900); }
.ride__line { flex: 0 1 50px; min-width: 24px; height: 3px; background: repeating-linear-gradient(90deg, var(--brass) 0 6px, transparent 6px 10px); }
.pin { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--green-700); background: var(--cream-50); flex-shrink: 0; }
.pin--to { background: var(--green-700); }
.ride__meta { display: flex; align-items: center; gap: .45rem; font-size: .92rem; color: var(--ink-2); flex-wrap: wrap; }
.ride__seats { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-left: 2px dashed var(--cream-200); padding: .6rem; }
.ride__seatsnum { font: 400 2.4rem/1 var(--f-display); color: var(--green-800); }
.ride__seatslbl { font: 600 .7rem/1.15 var(--f-label); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.ride--cancelled { opacity: .55; filter: grayscale(.7); }
.ridewrap { position: relative; }
.badge-pending { position: absolute; top: -8px; right: 12px; background: var(--red); color: #fff; font: 700 .72rem/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; padding: .35rem .6rem; border-radius: 99px; box-shadow: 0 2px 0 #6d2214; }
.ridewrap > .status { position: absolute; top: -8px; right: 12px; }

.tag { display: inline-block; font: 700 .68rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .14em; padding: .32rem .55rem; border-radius: 4px; }
.tag--offer { background: #dcebe2; color: var(--green-800); }
.tag--request { background: #f3e5c3; color: #6b5220; }

.status { display: inline-block; font: 700 .72rem/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; padding: .38rem .65rem; border-radius: 99px; background: var(--cream-200); color: var(--ink-2); }
.status--accepted { background: var(--green-700); color: var(--cream-50); }
.status--pending { background: var(--brass); color: var(--green-900); }
.status--declined, .status--cancelled { background: #e8cfc6; color: #6d2214; }

.empty { text-align: center; padding: 3rem 1rem; background: var(--cream-50); border-radius: var(--r-lg); border: 2px dashed var(--cream-300); }
.empty__sign { display: inline-block; font: 400 2rem/1 var(--f-board); letter-spacing: .12em; color: var(--amber); background: var(--board); padding: .7rem 1.4rem; border-radius: 8px; box-shadow: 0 0 0 4px #2b352f; margin-bottom: 1rem; text-shadow: 0 0 8px rgba(255,184,77,.4); }

.others { margin-top: 1rem; }
.others summary { cursor: pointer; font: 700 .9rem/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); padding: .8rem 0; }
.others[open] summary { margin-bottom: .6rem; }

/* ---------- Stjärnor ---------- */

.stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: .05em; vertical-align: -1px; }
.stars__bg { color: var(--cream-300); }
.stars__fg { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--brass); }
.stars__num { font: 700 .9rem/1 var(--f-label); color: var(--green-800); }
.stars--none { font-size: .82rem; color: var(--ink-2); font-style: italic; }

.starinput { display: inline-flex; flex-direction: row-reverse; gap: .1rem; margin: .2rem 0 .6rem; }
.starinput input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.starinput label { font-size: 2.1rem; line-height: 1; color: var(--cream-300); cursor: pointer; transition: color .12s, transform .12s; }
.starinput label:hover, .starinput label:hover ~ label,
.starinput input:checked ~ label { color: var(--brass); }
.starinput label:hover { transform: scale(1.15) rotate(-6deg); }
.starinput input:focus-visible + label { outline: 3px solid var(--brass); border-radius: 4px; }

/* ---------- Avatar ---------- */

.avatar {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  background: var(--green-700); color: var(--brass-light); font: 400 1.25rem/1 var(--f-display); letter-spacing: .05em; text-decoration: none;
  box-shadow: 0 0 0 2px var(--cream-50), 0 0 0 4px var(--brass);
}
.avatar--xs { width: 24px; height: 24px; font-size: .78rem; box-shadow: 0 0 0 1.5px var(--brass); }
.avatar--sm { width: 32px; height: 32px; font-size: .95rem; }
.avatar--lg { width: 70px; height: 70px; font-size: 1.9rem; }

/* ---------- Kort ---------- */

.card { background: var(--cream-50); border-radius: var(--r); padding: 1.4rem; box-shadow: var(--shadow); border: 1.5px solid var(--cream-200); margin-bottom: 1.4rem; }
.card--paper { background: var(--cream-200) var(--paper-noise); }
.callout { background: var(--green-800) var(--paper-noise); color: var(--cream-100); border-radius: var(--r-lg); padding: 1.5rem 1.6rem; margin: 1rem 0 2rem; box-shadow: 0 0 0 4px var(--cream-100), 0 0 0 6px var(--brass); }
.callout .h3 { color: var(--brass-light); }
.callout a { color: var(--cream-50); }
.callout .btn { color: var(--cream-50); }

.minilist { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .5rem; }
.minilist li { display: flex; align-items: center; gap: .5rem; }
.minilist--rate li { justify-content: space-between; padding: .6rem .8rem; background: rgba(255,255,255,.06); border-radius: 10px; gap: 1rem; }

.profilecard__who { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--ink); margin: .4rem 0 1rem; }
.profilecard__who strong { display: block; font-size: 1.15rem; color: var(--green-900); }
.profilecard__stats { display: grid; gap: .45rem; font-size: .95rem; }

.ratingrow { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; border-bottom: 1px dashed var(--cream-300); gap: .5rem; }
.ratingrow > span:first-child { font: 600 .82rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.pointlist { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .45rem; }
.pointlist b { display: inline-block; min-width: 2.6rem; font: 400 1.3rem/1 var(--f-display); color: var(--green-700); }

/* ---------- Stor biljett (resedetalj) ---------- */

.bigticket {
  display: grid; grid-template-columns: 1fr 150px; margin-bottom: 1.6rem;
  background: var(--cream-50) var(--paper-noise); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); position: relative; border: 1.5px solid var(--cream-200);
}
.bigticket::before, .bigticket::after { content: ""; position: absolute; right: 137px; width: 26px; height: 26px; border-radius: 50%; background: var(--cream-100); border: 1.5px solid var(--cream-200); }
.bigticket::before { top: -13px; }
.bigticket::after { bottom: -13px; }
.bigticket__main { padding: 1.6rem 1.8rem; }
.bigticket__row { display: flex; gap: 3rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.bigticket__row .muted { display: block; font-size: .92rem; }
.bigticket__time { display: block; font: 400 3.4rem/1 var(--f-display); color: var(--green-800); }
.bigticket__stub { border-left: 2px dashed var(--cream-300); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 1rem; }
.bigticket__no { font: 400 1.2rem/1 var(--f-board); letter-spacing: .1em; color: var(--ink-2); writing-mode: vertical-rl; transform: rotate(180deg); }
.bigticket.is-void .bigticket__main { opacity: .6; }

.stamp {
  --c: var(--ink-2);
  display: inline-block; padding: .35rem .7rem; border: 3px solid var(--c); border-radius: 8px; color: var(--c);
  font: 400 1.5rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-12deg);
  opacity: .82; mix-blend-mode: multiply;
  -webkit-mask-image: var(--paper-noise), linear-gradient(#000, #000);
  box-shadow: inset 0 0 0 2px transparent;
}
.stamp--green { --c: var(--green-600); }
.stamp--red { --c: var(--red); }

.routeline { list-style: none; margin: 0; padding: 0 0 0 .3rem; }
.routeline li { position: relative; padding: 0 0 .9rem 1.8rem; font: 600 1rem/1.2 var(--f-label); color: var(--green-900); }
.routeline li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--cream-50); border: 4px solid var(--green-700); z-index: 1; box-sizing: border-box; }
.routeline li::after { content: ""; position: absolute; left: 9px; top: 10px; bottom: -4px; width: 4px; background: var(--green-700); }
.routeline li:last-child::after { display: none; }
.routeline li.is-end { font-size: 1.15rem; font-weight: 700; }
.routeline li.is-end::before { width: 18px; height: 18px; left: 2px; top: 1px; background: var(--brass); border-color: var(--green-800); }
.routeline li.is-minor { font-weight: 400; font-size: .88rem; color: var(--ink-2); padding-bottom: .8rem; }
.routeline li.is-minor::before { width: 4px; height: 18px; left: 9px; top: 1px; border: 0; border-radius: 0; background: repeating-linear-gradient(var(--cream-50) 0 3px, var(--green-700) 3px 6px); }
.routeline summary { cursor: pointer; font: 600 .78rem/1.2 var(--f-label); text-transform: uppercase; letter-spacing: .1em; color: var(--brass-dark); list-style: none; }
.routeline summary::-webkit-details-marker { display: none; }
.routeline summary::after { content: " ▾"; }
.routeline details[open] summary::after { content: " ▴"; }
.routeline__minor { display: block; margin-top: .35rem; line-height: 1.5; }

.note { margin: 1.2rem 0 0; padding: 1rem 1.2rem; border-left: 4px solid var(--brass); background: var(--cream-100); border-radius: 0 10px 10px 0; font-style: italic; color: var(--ink-2); }

.people { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.person { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: start; padding: .9rem; border-radius: 12px; background: var(--cream-100); }
.person--declined, .person--cancelled { opacity: .6; }
.person__name { font-weight: 700; color: var(--green-900); text-decoration: none; margin-right: .4rem; }
.person__msg { margin: .35rem 0 0; font-style: italic; color: var(--ink-2); }
.person__rate { grid-column: 1 / -1; }
.contact { margin: .4rem 0 0; font-weight: 600; }
.contact--big { font-size: 1.15rem; line-height: 1.7; }
.rateform { background: var(--cream-50); border: 2px dashed var(--brass); border-radius: 12px; padding: 1rem 1.1rem; margin-top: .8rem; }
.rateform__q { margin: 0; }
.rateform .field { margin-bottom: .7rem; }
.bookform .field { margin-bottom: 1rem; }

/* ---------- Ny resa ---------- */

.tabs { display: flex; gap: .5rem; margin-bottom: -2px; position: relative; z-index: 1; }
.tabs a { flex: 1; text-align: center; padding: .9rem 1rem; border-radius: 14px 14px 0 0; text-decoration: none; background: var(--cream-200); color: var(--ink-2); font: 700 .88rem/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid var(--cream-300); border-bottom: 0; }
.tabs a.is-on { background: var(--cream-50); color: var(--green-800); }
.tabs + .card { border-top-left-radius: 0; border-top-right-radius: 0; }
.ticketform { padding: 1.8rem; }
.ticketform__route { display: grid; background: var(--cream-100); padding: 1.1rem 1.1rem .1rem; border-radius: 14px; margin-bottom: 1.2rem; border: 1.5px solid var(--cream-200); }

/* ---------- Inloggning ---------- */

.auth { display: grid; place-items: center; padding: 3rem 0; }
.auth__card { width: min(480px, 100%); background: var(--cream-50) var(--paper-noise); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); overflow: hidden; border: 1.5px solid var(--cream-200); }
.auth--wide .auth__card { width: min(640px, 100%); }
.auth__form { padding: 1.8rem; }
.auth__form .h2 { font-size: 2rem; }
.tickettabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--green-900); }
.tickettabs a { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: 1.1rem .5rem 1rem; text-decoration: none; color: var(--green-300); font: 400 1.6rem/1 var(--f-display); letter-spacing: .08em; position: relative; transition: background .2s, color .2s; }
.tickettabs a small { font: 600 .7rem/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.tickettabs__icon { font-size: 1.4rem; margin-bottom: .2rem; }
.tickettabs a.is-on { background: var(--cream-50); color: var(--green-800); }
.tickettabs a.is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--brass) 0 8px, transparent 8px 13px); }

.resekort__head { background: var(--green-800) var(--paper-noise); color: var(--cream-100); padding: 1.4rem 1.8rem 1.6rem; position: relative; border-bottom: 6px solid var(--brass); }
.resekort__title { display: block; font: 400 3rem/1 var(--f-script); color: var(--brass-light); }
.resekort__sub { font: 600 .78rem/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--green-300); }
.resekort__no { position: absolute; right: 1.6rem; top: 1.4rem; font: 400 1.4rem/1 var(--f-board); color: var(--amber); letter-spacing: .08em; }

.rolepick { border: 0; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.rolepick legend { margin-bottom: .45rem; }
.rolepick__opt { position: relative; }
.rolepick__opt input { position: absolute; opacity: 0; }
.rolepick__opt > span { display: flex; flex-direction: column; align-items: center; text-align: center; padding: .9rem .4rem; border-radius: 12px; border: 2px solid var(--cream-300); background: var(--cream-50); cursor: pointer; transition: all .15s; height: 100%; }
.rolepick__opt strong { font: 400 1.35rem/1 var(--f-display); letter-spacing: .05em; color: var(--green-800); }
.rolepick__opt small { font-size: .78rem; color: var(--ink-2); }
.rolepick__icon { font-size: 1.5rem; margin-bottom: .2rem; }
.rolepick__opt input:checked + span { border-color: var(--green-800); background: #e3eee6; box-shadow: 0 3px 0 var(--green-800); }
.rolepick__opt input:focus-visible + span { outline: 3px solid var(--brass); }

/* ---------- Klippkort ---------- */

.punchcard {
  background: linear-gradient(135deg, var(--cream-50), var(--cream-200)); border-radius: var(--r-lg);
  border: 2px solid var(--brass); box-shadow: inset 0 0 0 6px var(--cream-50), inset 0 0 0 7px var(--brass-light), var(--shadow-lift);
  padding: 1.8rem; margin-bottom: 1.6rem; position: relative; overflow: hidden;
}
.punchcard::before { content: "KLIPPKORT"; position: absolute; right: -1.2rem; bottom: 1.2rem; font: 400 5.5rem/1 var(--f-display); color: rgba(14,59,44,.05); letter-spacing: .1em; transform: rotate(-90deg); transform-origin: right bottom; pointer-events: none; }
.punchcard__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.punchcard__who { display: flex; align-items: center; gap: 1rem; }
.punchcard__name { display: block; font: 400 2rem/1 var(--f-display); letter-spacing: .03em; color: var(--green-900); }
.punchcard__level { font-family: var(--f-script); font-size: 1.4rem; color: var(--brass-dark); }
.punchcard__points { text-align: right; }
.punchcard__points span { display: block; font: 400 3.4rem/.9 var(--f-display); color: var(--green-800); }
.punchcard__points small { font: 700 .72rem/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.punchcard__holes { display: grid; grid-template-columns: repeat(10, 1fr); gap: .5rem; padding: 1rem 0; border-block: 2px dashed var(--cream-300); }
.hole { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--green-700); font: 400 1.2rem/1 var(--f-display); color: var(--green-700); background: var(--cream-50); max-width: 52px; justify-self: center; width: 100%; }
.hole.is-punched { background: var(--green-950); border-color: var(--green-950); color: transparent; box-shadow: inset 0 3px 6px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.7); position: relative; }
.hole.is-punched::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--cream-100) var(--paper-noise); opacity: .12; }
.punchcard__foot { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; font-weight: 600; color: var(--green-900); }
.progress { flex: 1; min-width: 120px; height: 10px; border-radius: 99px; background: var(--cream-300); overflow: hidden; }
.progress span { display: block; height: 100%; background: repeating-linear-gradient(135deg, var(--green-700) 0 8px, var(--green-600) 8px 16px); border-radius: inherit; }

.reviews { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.review { background: var(--cream-50); border-radius: 12px; padding: 1rem 1.2rem; border: 1.5px solid var(--cream-200); }
.review__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.review p { margin: .5rem 0; font-style: italic; }

/* ---------- Linjekarta ---------- */

.linemap { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.4rem; margin-top: 2rem; }
.linemap__zone { background: var(--cream-50); border-radius: var(--r); box-shadow: var(--shadow); border: 1.5px solid var(--cream-200); overflow: hidden; }
.linemap__area { margin: 0; padding: 1rem 1.3rem; background: var(--green-800) var(--paper-noise); color: var(--cream-50); font: 400 1.8rem/1 var(--f-display); letter-spacing: .05em; display: flex; flex-direction: column; gap: .3rem; border-bottom: 4px solid var(--brass); }
.linemap__area span { font: 700 .7rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-light); }
.linemap__stops { list-style: none; margin: 0; padding: 1rem 1.2rem 1.2rem; }
.linemap__stop { position: relative; display: grid; grid-template-columns: 24px 1fr auto auto; align-items: center; gap: .6rem; padding: .45rem 0; }
.linemap__stop::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 4px; background: var(--green-700); }
.linemap__stop:first-child::before { top: 50%; }
.linemap__stop:last-child::before { bottom: 50%; }
.linemap__dot { position: relative; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: var(--cream-50); border: 4px solid var(--green-700); }
.linemap__stop.is-major .linemap__dot { width: 22px; height: 22px; margin-left: 1px; background: var(--brass); border-color: var(--green-800); }
.linemap__name { font: 600 1rem/1.2 var(--f-label); color: var(--green-900); }
.linemap__stop.is-major .linemap__name { font-weight: 700; font-size: 1.08rem; }
.linemap__stop.is-spur { padding-left: 22px; }
.linemap__stop.is-spur::before { left: 32px; background: repeating-linear-gradient(var(--brass-dark) 0 5px, transparent 5px 9px); }
.linemap__stop.is-spur::after { content: ""; position: absolute; left: 12px; top: -2px; width: 22px; height: 14px; border-left: 4px solid var(--brass-dark); border-bottom: 4px solid var(--brass-dark); border-bottom-left-radius: 10px; opacity: .8; }
.linemap__stop.is-spur + .linemap__stop.is-spur::after { display: none; }
.linemap__stop.is-spur .linemap__dot { border-color: var(--brass-dark); }
.linemap__spur { display: block; font: 600 .66rem/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-dark); }
.linemap__count { font: 400 1.1rem/1 var(--f-board); background: var(--board); color: var(--amber); padding: .15rem .45rem; border-radius: 4px; }
.linemap__links { display: flex; gap: .3rem; opacity: .35; transition: opacity .15s; }
.linemap__stop:hover .linemap__links, .linemap__links:focus-within { opacity: 1; }
.linemap__links a { font: 700 .68rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .08em; padding: .35rem .5rem; border-radius: 6px; background: var(--cream-200); text-decoration: none; }
.linemap__links a:hover { background: var(--green-800); color: var(--cream-50); }

/* ---------- Karta (Leaflet + OpenStreetMap) ---------- */

.stop-picker { display: grid; grid-template-columns: 1fr auto; gap: 0 .45rem; }
.stop-picker .addr-field { grid-column: 1 / -1; }
.mapbtn {
  display: grid; place-items: center; width: 48px; border-radius: 10px; cursor: pointer;
  background: var(--green-800); color: var(--brass-light); border: 2px solid var(--green-800);
  box-shadow: 0 3px 0 var(--green-950); transition: transform .12s, background .15s;
}
.mapbtn svg { width: 22px; height: 22px; }
.mapbtn:hover { background: var(--green-700); }
.mapbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--green-950); }
.mapbtn.is-loading svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.netmap { margin: 2rem 0 2.5rem; }
.netmap__frame {
  display: grid; grid-template-columns: 1fr 300px; min-height: 560px;
  border-radius: 18px; overflow: hidden; background: var(--cream-50);
  box-shadow: 0 0 0 6px var(--green-800), 0 0 0 8px var(--brass), 0 30px 50px -24px rgba(0,0,0,.5);
}
.netmap__canvas { position: relative; min-height: 560px; background: var(--cream-200); }
.netmap__loading, .netmap__error { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 400 1.4rem/1 var(--f-board); color: var(--green-700); letter-spacing: .1em; }
/* Gammal karta: lite sepia på OSM-plattorna */
.netmap__canvas .leaflet-tile-pane, .mapdialog__map .leaflet-tile-pane { filter: sepia(.38) saturate(.85) contrast(.97) brightness(1.02); }
.leaflet-container { font-family: var(--f-body); background: #e9e0c6; }
.leaflet-control-attribution { font-size: 10px; background: rgba(253,250,241,.85) !important; }
.leaflet-bar a { color: var(--green-800) !important; }

.netmap__panel { padding: 1.4rem 1.3rem; background: var(--cream-50) var(--paper-noise); border-left: 4px solid var(--brass); display: flex; flex-direction: column; gap: .8rem; }
.netmap__paneltitle { font: 400 1.6rem/1 var(--f-display); letter-spacing: .06em; color: var(--green-800); padding-bottom: .7rem; border-bottom: 2px dashed var(--cream-300); }
.netmap__ends { display: grid; gap: .1rem; background: var(--cream-100); border: 1.5px solid var(--cream-200); border-radius: 12px; padding: .8rem .9rem; }
.netmap__end .lbl { margin-bottom: .25rem; }
.netmap__val { display: block; font: 700 1.05rem/1.25 var(--f-label); color: var(--ink-2); min-height: 1.3em; }
.netmap__val.is-set { color: var(--green-900); }
.netmap__val--from.is-set::before { content: "● "; color: var(--green-600); }
.netmap__val--to.is-set::before { content: "● "; color: var(--red); }
.swap.swap--sm { width: 36px; height: 36px; font-size: 1rem; margin: -.4rem 0 -.4rem auto; }
.netmap__info { margin: 0; font-size: .92rem; color: var(--ink-2); min-height: 1.2em; }
.btn.is-disabled { opacity: .45; pointer-events: none; }
.netmap__panel .linkbtn { align-self: center; font-size: .88rem; }
.netmap__legend { list-style: none; margin: auto 0 0; padding: .8rem 0 0; border-top: 1px dashed var(--cream-300); display: grid; gap: .35rem; font-size: .82rem; color: var(--ink-2); }
.netmap__legend li { display: flex; align-items: center; gap: .55rem; }
.lg { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--green-800); background: var(--cream-50); flex-shrink: 0; }
.lg--major { width: 16px; height: 16px; border-width: 3px; background: var(--brass-light); }
.lg--approx { border-style: dashed; }
.lg--spur { width: 22px; height: 0; border-radius: 0; border: 0; border-top: 4px dotted var(--green-800); }

.netmap__tip { background: var(--green-900); color: var(--cream-50); border: 0; border-radius: 6px; font: 600 .78rem/1.2 var(--f-label); letter-spacing: .04em; padding: .25rem .5rem; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.netmap__tip::before { border-top-color: var(--green-900) !important; }
.netmap__tip.is-major { background: var(--brass-light); color: var(--green-900); font-weight: 700; }
.netmap__tip.is-major::before { border-top-color: var(--brass-light) !important; }
.netmap__popup .leaflet-popup-content-wrapper { background: var(--cream-50); border-radius: 12px; border: 2px solid var(--green-800); box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); }
.netmap__popup .leaflet-popup-tip { background: var(--green-800); }
.netmap__popup .leaflet-popup-content { margin: .8rem .9rem; }
.netmap__pop strong { display: block; font: 400 1.35rem/1.05 var(--f-display); letter-spacing: .03em; color: var(--green-900); }
.netmap__area, .netmap__rides, .netmap__approx { display: block; font: 600 .72rem/1.4 var(--f-label); text-transform: uppercase; letter-spacing: .1em; color: var(--brass-dark); }
.netmap__rides { color: var(--green-700); }
.netmap__approx { color: var(--ink-2); font-style: italic; text-transform: none; letter-spacing: 0; }
.netmap__btns { display: flex; gap: .4rem; margin-top: .6rem; }
.netmap__btns button { flex: 1; border: 0; border-radius: 8px; padding: .5rem .6rem; cursor: pointer; font: 700 .72rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .08em; background: var(--green-800); color: var(--cream-50); box-shadow: 0 2px 0 var(--green-950); }
.netmap__btns button[data-set="to"] { background: var(--brass); color: var(--green-900); box-shadow: 0 2px 0 var(--brass-dark); }
.linemap__heading { margin-top: 1rem; }

/* Hovring: listan ⇄ kartan */
.linemap__stop { border-radius: 8px; transition: background .12s; }
.linemap__stop:hover, .linemap__stop:focus-within, .linemap__stop.is-hot { background: #fbecc8; }
.linemap__stop.is-hot .linemap__dot, .linemap__stop:hover .linemap__dot { box-shadow: 0 0 0 4px rgba(255,184,77,.55); }
.netmap__halo { transform-box: fill-box; transform-origin: center; animation: halo 1.1s ease-in-out infinite; }
@keyframes halo { 0%, 100% { stroke-opacity: 1; fill-opacity: .35; } 50% { stroke-opacity: .35; fill-opacity: .1; } }

.minimap {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 320px;
  border-radius: 14px; overflow: hidden; background: var(--cream-50);
  box-shadow: 0 0 0 4px var(--green-800), 0 0 0 6px var(--brass), 0 24px 40px -12px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(12px) scale(.97); pointer-events: none; transition: opacity .18s, transform .18s;
}
.minimap.is-on { opacity: 1; transform: none; }
.minimap__head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .55rem .8rem; background: var(--green-800) var(--paper-noise); border-bottom: 3px solid var(--brass); }
.minimap__name { font: 400 1.25rem/1 var(--f-display); letter-spacing: .04em; color: var(--cream-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minimap__area { font: 600 .66rem/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-light); white-space: nowrap; }
.minimap__map { height: 210px; }
.minimap__map .leaflet-tile-pane { filter: sepia(.38) saturate(.85) contrast(.97) brightness(1.02); }
.minimap .leaflet-control-attribution { font-size: 8px; }
@media (max-width: 899px) { .minimap { display: none; } }

.mapdialog { width: min(960px, 100vw - 24px); height: min(720px, 100dvh - 24px); padding: 0; border: 0; border-radius: 18px; background: var(--cream-50); box-shadow: 0 0 0 6px var(--green-800), 0 0 0 8px var(--brass), 0 40px 80px rgba(0,0,0,.6); overflow: hidden; }
.mapdialog[open] { display: flex; flex-direction: column; }
.mapdialog::backdrop { background: rgba(7,31,23,.7); backdrop-filter: blur(2px); }
.mapdialog__head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem .8rem 1.2rem; background: var(--green-800) var(--paper-noise); border-bottom: 4px solid var(--brass); }
.mapdialog__title { font: 400 1.5rem/1 var(--f-display); letter-spacing: .06em; color: var(--cream-50); }
.mapdialog__close { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: var(--brass); color: var(--green-900); font-size: 1.1rem; font-weight: 700; box-shadow: 0 2px 0 var(--brass-dark); }
.mapdialog__map { flex: 1; min-height: 300px; }
.mapdialog__hint { margin: 0; padding: .6rem 1.2rem; font: 600 .8rem/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: var(--cream-100); }

@media (max-width: 900px) {
  .netmap__frame { grid-template-columns: 1fr; }
  .netmap__canvas { min-height: 420px; }
  .netmap__panel { border-left: 0; border-top: 4px solid var(--brass); }
  .netmap__legend { grid-template-columns: 1fr 1fr; }
}

/* ---------- Footer ---------- */

.footer { background: var(--green-900) var(--paper-noise); color: var(--cream-200); margin-top: auto; }
.footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 2.5rem; padding: 3rem 0 2.5rem; }
.footer__caps { display: block; font: 400 1.6rem/1 var(--f-display); letter-spacing: .35em; color: var(--brass); margin-bottom: 1rem; }
.footer__brand p { max-width: 40ch; color: var(--green-300); }
.footer__h { font: 700 .78rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-light); margin: .5rem 0 1rem; }
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; color: var(--green-300); }
.footer__list a { color: var(--cream-100); text-decoration: none; }
.footer__list a:hover { color: var(--brass-light); text-decoration: underline; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 1rem 0; font-size: .82rem; color: var(--green-300); }
.ticket--mini { display: flex; flex-direction: column; align-items: center; padding: 1rem 1.4rem; border-radius: 10px; background: var(--cream-100); color: var(--green-800); transform: rotate(4deg); box-shadow: 0 10px 20px -8px rgba(0,0,0,.5); position: relative; border: 2px dashed var(--brass); }
.ticket__label { font: 700 .66rem/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.ticket__big { font: 400 3.6rem/1 var(--f-display); color: var(--green-800); }

/* ---------- Tankmätare ---------- */

.tank { text-align: center; }
.gauge { display: block; width: 100%; max-width: 260px; height: auto; margin: .3rem auto .2rem; overflow: visible; }
.gauge--sm { max-width: 190px; }
.gauge__bezel { fill: #1c2621; stroke: var(--brass); stroke-width: 3; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.gauge__face { stroke: var(--brass-dark); stroke-width: 1; }
.gauge__tick { stroke: var(--green-900); stroke-width: 2; stroke-linecap: round; }
.gauge__tick.is-long { stroke-width: 3.4; }
.gauge__zone { fill: none; stroke-width: 7; stroke-linecap: butt; opacity: .9; }
.gauge__zone--red { stroke: var(--red); }
.gauge__zone--green { stroke: var(--green-600); }
.gauge__zone--left { stroke: var(--green-600); opacity: .55; }
.gauge__zone--right { stroke: var(--brass); opacity: .7; }
.gauge__end { font: 400 19px/1 var(--f-display); fill: var(--green-900); text-anchor: middle; letter-spacing: .06em; }
.gauge__end--l { fill: var(--red); }
.gauge--pair .gauge__end { font-size: 12px; fill: var(--green-800); }
.gauge--pair .gauge__end--r { fill: var(--brass-dark); }
.gauge__half { font: 400 15px/1 var(--f-display); fill: var(--green-800); text-anchor: middle; }
.gauge__half--sm { font-size: 10px; letter-spacing: .14em; fill: var(--ink-2); }
.gauge__pump rect { fill: var(--green-800); }
.gauge__pump .gauge__pumpwin { fill: var(--brass-light); }
.gauge__pump path { stroke: var(--green-800); }
.gauge__needle { transform-origin: 100px 108px; transform: rotate(var(--a)); animation: needle 1.6s cubic-bezier(.3,1.5,.5,1) both; }
.gauge__needle path { fill: var(--red); filter: drop-shadow(1px 2px 1px rgba(0,0,0,.35)); }
.gauge__cap { fill: #1c2621; stroke: var(--brass); stroke-width: 2.5; }
.gauge__capdot { fill: var(--brass-light); }
@keyframes needle { 0% { transform: rotate(-70deg); } 100% { transform: rotate(var(--a)); } }
.gauge--pair .gauge__needle { animation-name: needle-pair; }
@keyframes needle-pair { 0% { transform: rotate(0deg); } 25% { transform: rotate(-30deg); } 50% { transform: rotate(25deg); } 100% { transform: rotate(var(--a)); } }

.tank__label { font: 400 1.35rem/1.1 var(--f-script); color: var(--brass-dark); margin-top: .2rem; }
.tank__label--sm { font: 600 .88rem/1.35 var(--f-body); color: var(--ink-2); margin-top: .5rem; }
.tank__nums { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: .35rem; font: 600 .76rem/1.2 var(--f-label); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.tank__nums b { font: 400 1.3rem/1 var(--f-display); color: var(--green-800); letter-spacing: .02em; margin-right: .15rem; }
.tank--pair .tank__nums { justify-content: space-between; text-transform: none; letter-spacing: 0; font-size: .82rem; }
.tank--sm { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--cream-300); }
.dash .tank--sm { margin-top: 0; padding-top: 0; border-top: 0; }
.dash__help { text-align: center; margin: .6rem 0 0; }

.ledger { padding-top: 2.5rem; }
.ledger__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; align-items: start; margin-top: 1rem; }
.ledger__me { grid-row: span 2; background: var(--green-800) var(--paper-noise); border-color: var(--green-900); }
.ledger__me .lbl { color: var(--brass-light); }
.ledger__me .tank__label { color: var(--brass-light); }
.ledger__me .tank__nums, .ledger__me .tank__nums b { color: var(--cream-100); }
.ledger__pair { text-decoration: none; color: var(--ink); transition: transform .18s, box-shadow .18s; margin: 0; }
.ledger__pair:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); color: var(--ink); }
.ledger__empty { align-self: center; }

/* ---------- Fasta turer ---------- */

.tag--schedule { background: var(--green-800); color: var(--brass-light); margin-left: .25rem; }
.board__fixed { margin-left: .4rem; color: var(--brass-light); font-size: 1.1rem; }

.lamps { display: flex; gap: .3rem; flex-wrap: wrap; margin: .5rem 0; }
.lamps--inline { margin: .35rem 0 0; }
.lamp {
  display: grid; place-items: center; width: 2.4rem; height: 1.6rem; border-radius: 5px;
  font: 700 .66rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .08em;
  background: #26302b; color: #5d6a62; box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.lamp.is-on { background: var(--amber); color: #3b2504; box-shadow: 0 0 10px rgba(255,184,77,.65), inset 0 -2px 0 rgba(0,0,0,.18); }

.schedlist { display: grid; gap: .9rem; margin-bottom: 2rem; }
.sched { display: grid; grid-template-columns: 110px 1fr auto; align-items: stretch; background: var(--cream-50); border: 1.5px solid var(--cream-200); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.sched.is-paused { opacity: .6; }
.sched__time { display: grid; place-items: center; background: var(--board); color: var(--amber); font: 400 2.2rem/1 var(--f-board); letter-spacing: .06em; text-shadow: 0 0 8px rgba(255,184,77,.45); }
.sched__body { padding: .9rem 1.1rem; min-width: 0; }
.sched__route { font: 700 1.08rem/1.25 var(--f-label); color: var(--green-900); }
.sched__route .arrow { color: var(--brass); margin: 0 .2rem; }
.sched__actions { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: .5rem; padding: .9rem 1.1rem; }
.sched__actions .linkbtn--danger { margin: 0; }

.daypick { border: 0; padding: 0; }
.daypick__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.daypick__days label { position: relative; }
.daypick__days input { position: absolute; opacity: 0; }
.daypick__days span { display: grid; place-items: center; height: 2.6rem; border-radius: 8px; cursor: pointer; font: 700 .72rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .06em; background: #26302b; color: #7d8a82; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); transition: all .15s; }
.daypick__days input:checked + span { background: var(--amber); color: #3b2504; box-shadow: 0 0 12px rgba(255,184,77,.6); }
.daypick__days input:focus-visible + span { outline: 3px solid var(--brass); }
.daypick__quick { display: flex; gap: 1rem; margin-top: .5rem; }
.daypick__quick .linkbtn { font-size: .85rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .45rem .8rem; border-radius: 99px; background: var(--cream-50); border: 1.5px solid var(--cream-300); text-decoration: none; font: 600 .86rem/1 var(--f-label); color: var(--green-800); }
.chip:hover { background: var(--green-800); color: var(--cream-50); border-color: var(--green-800); }
.minilist--sched li { align-items: flex-start; }
.minilist--sched strong { font: 400 1.3rem/1 var(--f-board); color: var(--green-800); min-width: 3rem; }

/* ---------- Tillgänglig för skjuts & motprestation ---------- */

.tabs--page { margin: 0 0 1.4rem; border-bottom: 2px solid var(--cream-300); }
.tabs--page a { flex: 0 1 auto; padding: .8rem 1.3rem; }
.tabs--page a.is-on { background: var(--cream-50); border-color: var(--cream-300); box-shadow: 0 2px 0 var(--cream-50); }

.req { color: var(--red); }
.comppick, .areapick { border: 0; padding: 0; min-width: 0; }
.comppick__help { margin: -.2rem 0 .6rem; }
.comppick__opts { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.comppick__opt { position: relative; }
.comppick__opt input { position: absolute; opacity: 0; }
.comppick__opt > span { display: flex; align-items: center; gap: .5rem; height: 100%; padding: .7rem .75rem; border-radius: 10px; border: 2px solid var(--cream-300); background: var(--cream-50); cursor: pointer; font: 700 .86rem/1.15 var(--f-label); color: var(--green-900); transition: all .15s; }
.comppick__icon { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--cream-200); font-size: 1rem; flex-shrink: 0; }
.comppick__opt input:checked + span { border-color: var(--green-800); background: #e3eee6; box-shadow: 0 3px 0 var(--green-800); }
.comppick__opt input:checked + span .comppick__icon { background: var(--green-800); color: var(--brass-light); }
.comppick__opt input:focus-visible + span { outline: 3px solid var(--brass); }
.comppick__fuel, .comppick__other { margin-top: .8rem; padding: .8rem; border-radius: 10px; background: var(--cream-100); border: 1.5px dashed var(--brass); }
.comppick__amount { display: grid; grid-template-columns: 6rem auto 1fr; gap: .5rem; align-items: center; }
.comppick__kr { font: 400 1.4rem/1 var(--f-display); color: var(--green-800); }

.comp { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem .3rem .35rem; border-radius: 99px; font: 700 .76rem/1.1 var(--f-label); letter-spacing: .03em; background: var(--cream-200); color: var(--green-900); border: 1.5px solid var(--cream-300); }
.comp__icon { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--green-800); color: var(--brass-light); font-size: .75rem; }
.comp--fuel { background: #fbecc8; border-color: var(--brass); }
.comp--fuel .comp__icon { background: var(--brass-dark); color: #fff; }
.comp--free { background: #e3eee6; border-color: var(--green-300); }
.comp--free .comp__icon { background: var(--red); color: #fff; }

.compbox { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.3rem; margin: -.4rem 0 1.4rem; border-radius: var(--r); background: var(--cream-50) var(--paper-noise); border: 2px dashed var(--brass); }
.compbox__icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; flex-shrink: 0; background: var(--green-800); color: var(--brass-light); font-size: 1.5rem; box-shadow: 0 0 0 3px var(--cream-50), 0 0 0 5px var(--brass); }
.compbox .lbl { margin-bottom: .2rem; }
.compbox__what { display: block; font: 400 1.6rem/1.1 var(--f-display); letter-spacing: .03em; color: var(--green-900); }

.acceptbox { display: flex; gap: .7rem; align-items: flex-start; margin: .2rem 0 1rem; padding: .9rem 1rem; border-radius: 10px; background: var(--cream-100); border: 2px solid var(--cream-300); cursor: pointer; }
.acceptbox input { width: 1.25rem; height: 1.25rem; margin-top: .1rem; accent-color: var(--green-700); flex-shrink: 0; }
.acceptbox.has-error { border-color: var(--red); }
.avail__whole { font: 600 1.05rem/1.4 var(--f-label); color: var(--green-900); margin: .2rem 0 .6rem; }

.ride--avail .ride__stub { background-color: #2f4a5c; }
.ride__until { font: 400 1.25rem/1 var(--f-display); opacity: .85; }
.tag--avail { background: #dde6ec; color: #2f4a5c; }
.ride__comp { margin-top: .55rem; }
.sched__time--range { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.sched__time--range small { font-size: .65em; opacity: .8; margin-top: .15rem; }
.sched--avail .sched__time { color: #9fd3ff; text-shadow: 0 0 8px rgba(159,211,255,.45); }
.sched__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .2rem; }
.segmented--sm { margin-bottom: .8rem; }
.segmented--sm span { padding: .55rem .4rem; font-size: .76rem; }

.navbadge { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; margin-left: .35rem; border-radius: 99px; background: var(--red); color: #fff; font-size: .7rem; letter-spacing: 0; vertical-align: 1px; animation: pulse-red 2.4s infinite; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(168,64,44,.55); } 70% { box-shadow: 0 0 0 7px rgba(168,64,44,0); } 100% { box-shadow: 0 0 0 0 rgba(168,64,44,0); } }
.callout--invite { background-color: #2f4a5c; }
.invite__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.invite__actions .btn + .btn { margin: 0; }

@media (max-width: 640px) {
  .comppick__opts { grid-template-columns: 1fr; }
  .compbox__what { font-size: 1.3rem; }
}

/* ---------- Split-flap animation ---------- */

[data-flap].is-flipping { color: #ffd18a; }

/* ---------- Responsivt ---------- */

.modeswitch button, .linkbtn { white-space: nowrap; }

@media (max-width: 1440px) and (min-width: 1141px) {
  .userchip__name { display: none; }
}
@media (max-width: 1320px) and (min-width: 1141px) {
  .brand__text { display: none; }
}

@media (max-width: 1140px) {
  .navtoggle { display: flex; }
  .masthead__inner { flex-wrap: wrap; }
  .mainnav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding: .5rem 0 1rem; }
  .mainnav.is-open { display: flex; }
  .mainnav ul { flex-direction: column; }
  .mainnav ul a { padding: .9rem 1rem; border-radius: 10px; font-size: .95rem; }
  .mainnav__side { flex-wrap: wrap; padding: .8rem 1rem 0; border-top: 1px dashed var(--cream-300); }
  .hero__inner { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .layout-split, .layout-ride { grid-template-columns: 1fr; }
  .layout-split > aside { order: 2; } /* resultaten först på små skärmar */
  .planner--compact, .layout-ride aside { position: static; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hide-sm { display: none; }
  .brand { gap: .5rem; min-width: 0; }
  .brand img { height: 34px; }
  .brand__script { font-size: 1.2rem; white-space: nowrap; }
  .brand__caps { font-size: 1rem; }
  .masthead__inner { min-height: 64px; gap: .6rem; flex-wrap: wrap; }
  .navtoggle { width: 42px; height: 42px; padding: 11px 10px; }
  .navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .hero { padding: 1.6rem 0 6rem; }
  /* Sökrutan direkt efter rubriken på mobil */
  .hero__inner { gap: 1.4rem; }
  .hero__copy { display: contents; }
  .enamel { order: 1; margin: 0 auto; max-width: 340px; padding: 9px 12px; }
  .enamel i { width: 8px; height: 8px; }
  .hero .eyebrow { order: 2; margin: 0; }
  .hero__title { order: 3; margin: -.6rem 0 0; }
  .hero__title .caps { font-size: 4rem; }
  .planner { order: 4; }
  .hero__lead { order: 5; margin: .4rem 0 0; font-size: 1.05rem; }
  .hero__stats { order: 6; display: grid; grid-template-columns: repeat(3, 1fr); }
  .hero__stats div { padding: .2rem .7rem; }
  .hero__stats dt { font-size: .62rem; letter-spacing: .1em; }
  .hero__stats dd { font-size: 2rem; }
  .planner { padding: 1.3rem 1.1rem 1.1rem; }
  .board { padding: .6rem .5rem .8rem; }
  .board__row { grid-template-columns: 4.2rem 1fr 2rem; font-size: 1.3rem; gap: .5rem; grid-template-areas: "time from seats" "type to seats"; }
  .board__row > :nth-child(1) { grid-area: time; }
  .board__row > :nth-child(2) { grid-area: type; }
  .board__row > :nth-child(3) { grid-area: from; }
  .board__row > :nth-child(4) { grid-area: to; }
  .board__row > :nth-child(5) { grid-area: seats; }
  .board__row--head { display: none; }
  .board__type { font-size: .95rem; }
  .steps { grid-template-columns: 1fr; gap: .8rem; }
  .step { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.1rem; }
  .step__num { grid-row: span 2; width: 46px; height: 46px; font-size: 1.7rem; margin: 0; }
  .step h3 { font-size: 1.4rem; align-self: end; }
  /* Linjeremsan blir lodrät */
  .linestrip { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; padding: 1rem 0 0; }
  .linestrip__stop { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 0 .8rem; padding: .3rem 0; }
  .linestrip__stop::before { top: 0; bottom: 0; left: 11px; right: auto; width: 8px; height: auto; }
  .linestrip__stop:first-child::before { top: 50%; left: 11px; }
  .linestrip__stop:last-child::before { bottom: 50%; right: auto; }
  .linestrip__dot { margin: 0; }
  .linestrip__stop.is-terminal .linestrip__dot { margin: 0 0 0 -3px; }
  .linestrip__area { margin: 0; }
  .grid2 { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .grid3 > :last-child { grid-column: 1 / -1; }
  .rolepick { grid-template-columns: 1fr 1fr 1fr; }
  .ride { grid-template-columns: 84px 1fr; }
  .ride__route { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .ride__line { display: none; }
  .results__edit { display: inline-block; }
  .ride__time { font-size: 1.8rem; }
  .ride__seats { grid-column: 1 / -1; flex-direction: row; gap: .5rem; border-left: 0; border-top: 2px dashed var(--cream-200); padding: .45rem; }
  .ride__seatsnum { font-size: 1.4rem; }
  .bigticket { grid-template-columns: 1fr; }
  .bigticket::before, .bigticket::after { display: none; }
  .bigticket__stub { border-left: 0; border-top: 2px dashed var(--cream-300); flex-direction: row; justify-content: space-between; padding: 1rem 1.4rem; }
  .bigticket__no { writing-mode: initial; transform: none; }
  .bigticket__main { padding: 1.3rem; }
  .person { grid-template-columns: auto 1fr; }
  .person__actions { grid-column: 1 / -1; }
  .punchcard { padding: 1.2rem; }
  .punchcard__holes { grid-template-columns: repeat(5, 1fr); }
  .footer__inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .footer__ticket { display: none; }
  .tabs a { font-size: .74rem; padding: .8rem .4rem; }
  .ticketform { padding: 1.2rem; }
  .minilist--rate li { flex-direction: column; align-items: flex-start; }
  .sched { grid-template-columns: 84px 1fr; }
  .sched__time { font-size: 1.8rem; }
  .sched__actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px dashed var(--cream-300); padding: .6rem 1rem; }
  .lamps { gap: .2rem; flex-wrap: nowrap; }
  .lamp { width: 1.75rem; height: 1.45rem; font-size: .56rem; letter-spacing: .02em; }
  .ledger__me { grid-row: auto; }
}

@media (max-width: 400px) {
  .brand img { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}