/* ==========================================================================
   GATE 90 — KOMPONENTER
   Kräver tokens.css.
   Alla färger kommer från tokens. Ingen hex i den här filen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GRUNDER
   -------------------------------------------------------------------------- */

.g90-eyebrow {
  font-family: var(--g90-mono);
  font-size: var(--g90-size-eyebrow);
  letter-spacing: var(--g90-track-eyebrow);
  text-transform: uppercase;
  color: var(--g90-eyebrow);
  margin: 0 0 9px;
}

.g90-data {
  font-family: var(--g90-mono);
  font-size: var(--g90-size-data);
  letter-spacing: var(--g90-track-mono);
}

.g90-chip {
  display: inline-block;
  font-family: var(--g90-mono);
  font-size: var(--g90-size-chip);
  letter-spacing: 0.14em;
  background: var(--g90-gold);
  color: var(--g90-ink);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.g90-slogan {
  font-family: var(--g90-voice);
  font-style: italic;
  font-size: 24px;
  line-height: 1.2;
  color: var(--g90-on-sand);
  margin: 0 0 16px;
}
.g90-slogan em { font-style: italic; color: var(--g90-gold-deep); }

.g90-logo {
  font-family: var(--g90-mono);
  font-weight: 700;
  letter-spacing: var(--g90-track-logo);
  text-transform: uppercase;
  color: var(--g90-gold);
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.g90-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--g90-ink);
  padding: 15px 18px;
}
.g90-header__actions { display: flex; gap: 14px; color: var(--g90-on-ink-dim); }

/* --------------------------------------------------------------------------
   TEMAKORT  (Inspiration)
   Ink på sand. Ingen guldskena. Guldet tillhör pappersobjektet.
   -------------------------------------------------------------------------- */

.g90-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--g90-ink);
  border-radius: var(--g90-radius);
  padding: 13px 16px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--g90-on-ink);
}
.g90-card__title {
  font-family: var(--g90-display);
  font-size: var(--g90-size-title);
  margin: 0 0 3px;
  color: var(--g90-on-ink);
}
.g90-card__sub {
  font-size: var(--g90-size-small);
  color: var(--g90-on-ink-muted);
  margin: 0;
}
.g90-card__chevron { color: var(--g90-on-ink-dim); flex: none; }

/* --------------------------------------------------------------------------
   1. BAGAGELAPP  —  veckans utvalda (Inspiration)
   Ett per skärm. Alltid hjälten. Enda gula ytan.
   -------------------------------------------------------------------------- */

.g90-tag {
  position: relative;
  display: block;
  background: var(--g90-gold);
  color: var(--g90-ink);
  padding: 15px 74px 15px 52px;
  margin: 0 0 22px;
  transform: rotate(-2.5deg);
  filter: drop-shadow(0 7px 16px rgba(15, 19, 27, 0.25));
  clip-path: polygon(0 50%, 30px 0, 100% 0, 100% 100%, 30px 100%);
  text-decoration: none;
}
/* Hålet */
.g90-tag::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border: 3px solid #A8791B;
  background: var(--g90-page);
  border-radius: 50%;
}
/* Streckkoden */
.g90-tag::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 16px;
  bottom: 16px;
  width: 30px;
  background: repeating-linear-gradient(
    90deg,
    var(--g90-ink) 0 3px,
    transparent 3px 7px
  );
}
.g90-tag__eyebrow {
  font-family: var(--g90-mono);
  font-size: var(--g90-size-eyebrow);
  letter-spacing: var(--g90-track-eyebrow);
  text-transform: uppercase;
  color: var(--g90-gold-deep);
  margin: 0 0 4px;
}
.g90-tag__title {
  font-family: var(--g90-display);
  font-size: 19px;
  margin: 0 0 4px;
  color: var(--g90-ink);
}
.g90-tag__meta {
  font-family: var(--g90-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--g90-gold-deep);
  margin: 0;
}

/* --------------------------------------------------------------------------
   2. BOARDINGKORT  —  Min resa
   Perforering till höger. Stubben bär avgången.
   -------------------------------------------------------------------------- */

.g90-pass {
  display: flex;
  background: var(--g90-ink);
  border-radius: var(--g90-radius-lg);
  color: var(--g90-on-ink);
  margin-bottom: 12px;
}
.g90-pass__main { flex: 1; padding: 18px 20px; min-width: 0; }
.g90-pass__stub {
  position: relative;
  flex: none;
  width: 132px;
  padding: 18px 12px;
  border-left: 1.5px dashed var(--g90-line-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Perforeringshålen — fylls med sidans bakgrund */
.g90-pass__stub::before,
.g90-pass__stub::after {
  content: '';
  position: absolute;
  left: calc(var(--g90-notch) * -1);
  width: calc(var(--g90-notch) * 2);
  height: calc(var(--g90-notch) * 2);
  border-radius: 50%;
  background: var(--g90-page);
}
.g90-pass__stub::before { top: calc(var(--g90-notch) * -1); }
.g90-pass__stub::after  { bottom: calc(var(--g90-notch) * -1); }

.g90-pass__brand {
  font-family: var(--g90-mono);
  font-size: var(--g90-size-eyebrow);
  letter-spacing: var(--g90-track-eyebrow);
  color: var(--g90-gold);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--g90-line-ink);
}
.g90-pass__label {
  font-family: var(--g90-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--g90-on-ink-dim);
  margin: 0 0 4px;
}
.g90-pass__match {
  font-family: var(--g90-display);
  font-size: 22px;
  margin: 0 0 5px;
}
.g90-pass__meta {
  font-family: var(--g90-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--g90-on-ink-muted);
  margin: 0;
}
.g90-pass__code {
  font-family: var(--g90-display);
  font-size: 26px;
  color: var(--g90-gold);
  margin: 0 0 4px;
}
.g90-pass__barcode {
  width: 100%;
  height: 42px;
  margin-top: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--g90-on-ink-muted) 0 2px,
    transparent 2px 4px,
    var(--g90-on-ink-muted) 4px 7px,
    transparent 7px 10px
  );
}

/* --------------------------------------------------------------------------
   3. BILJETTSTUBBE  —  matchkort i listan
   Samma perforering, halva höjden. Flygplatskoden gör listan skanningsbar.
   -------------------------------------------------------------------------- */

.g90-stub {
  display: flex;
  align-items: stretch;
  background: var(--g90-ink);
  border-radius: var(--g90-radius);
  color: var(--g90-on-ink);
  margin-bottom: 10px;
  text-decoration: none;
}
.g90-stub__main { flex: 1; padding: 13px 18px; min-width: 0; }
.g90-stub__end {
  position: relative;
  flex: none;
  width: 96px;
  border-left: 1.5px dashed var(--g90-line-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.g90-stub__end::before,
.g90-stub__end::after {
  content: '';
  position: absolute;
  left: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--g90-page);
}
.g90-stub__end::before { top: -9px; }
.g90-stub__end::after  { bottom: -9px; }

.g90-stub__time {
  font-family: var(--g90-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--g90-gold);
  margin: 0 0 5px;
}
.g90-stub__match {
  font-family: var(--g90-display);
  font-size: var(--g90-size-title);
  margin: 0 0 4px;
}
.g90-stub__venue {
  font-family: var(--g90-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--g90-on-ink-muted);
  margin: 0;
}
.g90-stub__code {
  font-family: var(--g90-display);
  font-size: 24px;
  color: var(--g90-gold);
  margin: 0;
}
.g90-stub__tag {
  font-family: var(--g90-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--g90-on-ink-dim);
  margin: 3px 0 0;
}

/* --------------------------------------------------------------------------
   4. TAVELRAD  —  träfflistan
   Inga kort. Bara rader. Ljusstyrkan faller nedåt: närmast i tid = tänd.
   -------------------------------------------------------------------------- */

.g90-board {
  background: var(--g90-ink);
  border-radius: var(--g90-radius);
  padding: 2px 20px;
}
.g90-board__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--g90-line-ink);
  font-family: var(--g90-mono);
  font-size: var(--g90-size-data);
  letter-spacing: var(--g90-track-mono);
  color: var(--g90-on-ink-dim);
  text-decoration: none;
}
.g90-board__row:last-child { border-bottom: none; }
.g90-board__match { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ljusstyrketrappan. Endast rad 1 är fullt tänd. */
.g90-board__row--next { color: var(--g90-gold); }
.g90-board__row--t2   { color: var(--g90-on-ink-muted); }
.g90-board__row--t3   { color: var(--g90-on-ink-dim); }
.g90-board__row--t4   { color: var(--g90-on-ink-dim); opacity: 0.65; }

/* --------------------------------------------------------------------------
   5. STÄMPEL  —  sparat & besökt
   Enda stället där färg varierar. Streckad = inte samlad ännu.
   -------------------------------------------------------------------------- */

.g90-stamp {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--g90-gold-deep);
  color: var(--g90-gold-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-7deg);
  opacity: 0.88;
}
.g90-stamp::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.g90-stamp__label {
  font-family: var(--g90-display);
  font-size: 17px;
  margin: 0;
  color: currentColor;
}
.g90-stamp__meta {
  font-family: var(--g90-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  margin: 2px 0 0;
  color: currentColor;
}
.g90-stamp--visited {
  border-color: var(--g90-stamp-visited);
  color: var(--g90-stamp-visited);
  transform: rotate(5deg);
}
.g90-stamp--empty {
  border: 2px dashed var(--g90-eyebrow);
  color: var(--g90-eyebrow);
  opacity: 0.4;
  transform: rotate(-3deg);
}
.g90-stamp--empty::before { display: none; }

.g90-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 8px 0;
}

/* --------------------------------------------------------------------------
   TOMTILLSTÅND
   Hårstreck, aldrig streckad ram. Streckat betyder "släpp något här".
   -------------------------------------------------------------------------- */

.g90-empty { text-align: center; padding: 24px 14px; }
.g90-empty::before {                 /* guldstreck 32×1.5px, opacity .6 — ersätter den streckade ramen */
  content: '';
  display: block;
  width: 32px;
  height: 1.5px;
  margin: 0 auto 14px;
  background: var(--g90-gold-deep);
  opacity: 0.6;
}
.g90-empty__title {
  font-family: var(--g90-display);
  font-size: var(--g90-size-title);
  color: var(--g90-on-sand);
  margin: 0 0 6px;
}
.g90-empty__body {
  font-size: var(--g90-size-small);
  line-height: 1.6;
  color: var(--g90-on-sand-muted);
  margin: 0 0 16px;
}
.g90-empty__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   INFOLÅDA  (ersätter den ljusblå rutan)
   -------------------------------------------------------------------------- */

.g90-note {
  background: var(--g90-paper);
  border: 0.5px solid var(--g90-line-sand);
  border-radius: var(--g90-radius);
  padding: 14px 16px;
}
.g90-note p { margin: 0 0 7px; font-size: var(--g90-size-small); line-height: 1.55; color: var(--g90-on-sand); }
.g90-note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   NAVIGATIONSLISTA  (Guiden — lista, inte kort)
   -------------------------------------------------------------------------- */

.g90-list { border-top: 0.5px solid var(--g90-line-sand); }
.g90-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px;
  border-bottom: 0.5px solid var(--g90-line-sand);
  font-size: 16px;
  color: var(--g90-on-sand);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   BILJETTSTUBBE FÖR RESOR  (sand-variant — Min resa & temasidans stängda resor)
   Samma perforering som .g90-stub, men på sand. Landskoden gör listan skanningsbar.
   -------------------------------------------------------------------------- */

.g90-tripstub {
  display: flex;
  align-items: stretch;
  background: var(--g90-sand);
  border: 0.5px solid var(--g90-line-sand);
  border-radius: var(--g90-radius);
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--g90-on-sand);
}
.g90-tripstub__main { flex: 1; padding: 13px 18px; min-width: 0; }
.g90-tripstub__end {
  position: relative;
  flex: none;
  width: 92px;
  border-left: 1.5px dashed var(--g90-line-sand);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.g90-tripstub__end::before,
.g90-tripstub__end::after {
  content: '';
  position: absolute;
  left: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--g90-page);
}
.g90-tripstub__end::before { top: -9px; }
.g90-tripstub__end::after  { bottom: -9px; }
.g90-tripstub__name  { font-family: var(--g90-display); font-size: var(--g90-size-title); margin: 0 0 4px; color: var(--g90-on-sand); }
.g90-tripstub__meta  { font-family: var(--g90-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--g90-on-sand-muted); margin: 0; }
.g90-tripstub__code  { font-family: var(--g90-display); font-size: 22px; color: var(--g90-gold-deep); margin: 0; }
.g90-tripstub__month { font-family: var(--g90-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--g90-on-sand-muted); margin: 3px 0 0; }

/* --------------------------------------------------------------------------
   TOAST  (bekräftelser — steg 15)  mörk platta, guld mono, versaler
   -------------------------------------------------------------------------- */

.g90-toast {
  display: inline-block;
  font-family: var(--g90-mono);
  font-size: var(--g90-size-data);
  letter-spacing: var(--g90-track-mono);
  text-transform: uppercase;
  background: var(--g90-ink);
  color: var(--g90-gold);
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(10, 12, 17, 0.4);
}

/* --------------------------------------------------------------------------
   INLINE-VARNING  (småfel — steg 14)  sand, guldbrun vänsterkant, mono-etikett
   -------------------------------------------------------------------------- */

.g90-inline {
  background: var(--g90-sand);
  border-left: 3px solid var(--g90-warn);
  border-radius: var(--g90-radius);
  padding: 11px 14px;
}
.g90-inline__label {
  font-family: var(--g90-mono);
  font-size: var(--g90-size-eyebrow);
  letter-spacing: var(--g90-track-eyebrow);
  text-transform: uppercase;
  color: var(--g90-warn);
  margin: 0 0 3px;
}
.g90-inline p { margin: 0; font-size: var(--g90-size-small); line-height: 1.5; color: var(--g90-on-sand); }

/* --------------------------------------------------------------------------
   KVALITETSGOLV
   -------------------------------------------------------------------------- */

.g90-card:focus-visible,
.g90-stub:focus-visible,
.g90-tag:focus-visible,
.g90-list__item:focus-visible,
.g90-board__row:focus-visible {
  outline: 2px solid var(--g90-gold);
  outline-offset: 2px;
}

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