/* ==========================================================================
   TEKNOLOGISTEN — produktsidorna
   ==========================================================================
   Modellregistret. Tabellen och specifikationstabellerna ärv stilarna från
   guide.css (.table-scroll, table.regler), så den här filen har bara det som
   är nytt: filterraden, jämförelsetabellen och modellposterna.
   ========================================================================== */

/* Ett streck betyder "publiceras inte", inte noll. Den ska läsas som ett tomrum
   och inte som ett värde, därför dämpad och aldrig fet. */
.tom { color: var(--muted); }

/* Symbolen för en produktfamilj står inte längre här: kategorikorten på
   produktsidan, registersidan, recensionssidan och guidelistan delar samma
   symbol, och den ritas av `_meny/kategorier.mjs` med sina stilar i
   `guide.css` (`.kategori-kort`). Filen här har kvar registret. */

/* ── Registret ───────────────────────────────────────────────────────────── */

.register { margin-top: 4px; }

.register__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px 32px;
  margin-bottom: 26px;
}

.register__tal { display: grid; gap: 4px; }

.register__antal {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink-2);
}

.register__antal strong {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  margin-right: 6px;
}

.register__lager {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.register__lager strong { color: var(--signal); font-weight: 500; }

/* Filterraden kräver skript för att göra något. Utan skript visas hela
   tabellen i stället, och då vore knapparna bara en rad som inte svarar. */
.register__filter { display: none; }

.js .register__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
}

.register__grupp {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
}

.register__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  background: var(--void);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.register__tab:hover { color: var(--ink-2); background: var(--panel); }

.register__tab[aria-pressed="true"] {
  color: var(--signal-bright);
  background: var(--signal-wash);
  box-shadow: inset 0 -2px 0 var(--signal);
}

.register__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.register__n {
  font-variant-numeric: tabular-nums;
  color: inherit;
  opacity: 0.7;
}

/* ── Jämförelsetabellen ──────────────────────────────────────────────────── */

.register__tabell { min-width: 940px; }

.register__tabell tbody tr { transition: background-color 0.2s var(--ease); }
.register__tabell tbody tr:hover { background: var(--panel); }

.register__tabell th[scope="row"] {
  font-weight: 500;
  white-space: nowrap;
}

.register__namn {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.register__namn:hover { color: var(--signal); border-bottom-color: var(--signal); }

/* Årsmodellen står i adressen men inte alltid i namnet. Den visas som ett
   litet tillägg så att två modeller med samma namn går att skilja. */
.register__ar {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
}

.pill--slut {
  color: var(--amber);
  border-color: rgba(255, 179, 71, 0.4);
  background: rgba(255, 179, 71, 0.08);
}

.register__tom {
  margin-top: 26px;
  padding: 26px 28px;
  border: 1px dashed var(--line);
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--ink-2);
}

.register__kalla,
.register__metod {
  margin-top: 30px;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--muted);
}

.register__metod {
  max-width: 760px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}

.register__metod h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}

.register__metod p { margin-bottom: 14px; }
.register__metod p:last-child { margin-bottom: 0; }

/* ── Modellposterna ──────────────────────────────────────────────────────── */

.modellpost {
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.2s var(--ease);
}

.modellpost:first-of-type { border-top: 1px solid var(--line-soft); }
.modellpost[open] { background: linear-gradient(180deg, rgba(25, 21, 39, 0.5), transparent 60%); }

.modellpost__huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 22px;
  min-height: 56px;
  padding: 14px 18px 14px 40px;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.modellpost__huvud::-webkit-details-marker { display: none; }

.modellpost__huvud:hover { background: var(--panel); }
.modellpost__huvud:focus-visible { outline: 2px solid var(--signal); outline-offset: -3px; }

/* Egen markör i stället för triangeln: ett plustecken som blir ett minus. */
.modellpost__huvud::before {
  content: "+";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--signal);
}

.modellpost[open] .modellpost__huvud::before { content: "−"; }

.modellpost__namn {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
}

.modellpost__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.78rem;
  color: var(--muted);
}

.modellpost__kropp { padding: 4px 18px 32px 40px; }

.modellpost__text p {
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--ink-2);
  margin-bottom: 14px;
}

.modellpost__spec { min-width: 520px; font-size: 0.88rem; }
.modellpost__spec th[scope="row"] { width: 42%; color: var(--muted); font-weight: 400; }
.modellpost__batteri { min-width: 460px; font-size: 0.88rem; }

.modellpost__fakta {
  display: grid;
  gap: 10px 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.modellpost__fakta li { display: flex; gap: 10px; }

.modellpost__nyckel {
  flex: none;
  min-width: 116px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}

.modellpost__citat {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 2px solid var(--line-lit);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
  font-style: italic;
}

.modellpost__kalla {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.modellpost__kalla a { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.modellpost__kalla a:hover { color: var(--signal); border-bottom-color: var(--signal); }

/* ── Säljs av ────────────────────────────────────────────────────────────── */

/* En modell kan säljas av flera butiker, och varje butik har sitt eget pris och
   sin egen lagerstatus. Butikslistan står därför över källraden, en butik per
   rad, med statusen som samma pill som i tabellen. */
.modellpost__butiker {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.modellpost__butiker ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.modellpost__butiker li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
}

.modellpost__butiker a {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.modellpost__butiker a:hover {
  color: var(--signal);
  border-bottom-color: var(--signal);
}

.modellpost__butiker .mono { color: var(--ink-2); }

.modellpost__utforanden {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ── Smal skärm ──────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .register__head { align-items: flex-start; }
  .register__filter { width: 100%; }
  .register__grupp { flex: 1 1 100%; }
  .register__tab { flex: 1 1 auto; justify-content: center; }
  .modellpost__huvud { padding: 14px 14px 14px 34px; }
  .modellpost__huvud::before { left: 12px; }
  .modellpost__kropp { padding: 4px 14px 26px 34px; }
  .modellpost__nyckel { min-width: 96px; }

  /* Specifikationen är två kolumner och upp till 27 rader. I sidled betyder det
     att varje värde skärs av, och en tabell som måste rullas i sidled för att
     läsas är inte läst. Nyckeln läggs därför ovanför värdet i stället, så hela
     raden syns utan att något rörs. Reglerna skriver `table.modellpost__spec`
     och inte bara klassen, eftersom `table.regler` i guide.css annars vinner
     och tvingar fram en minsta bredd på 560 px. */
  table.modellpost__spec { display: block; min-width: 0; }

  .modellpost__spec tbody,
  .modellpost__spec tr,
  .modellpost__spec th,
  .modellpost__spec td { display: block; }

  table.modellpost__spec th,
  table.modellpost__spec td { padding: 0; border-bottom: 0; }

  .modellpost__spec tr {
    padding: 10px 0;
    border-top: 1px solid var(--line-soft);
  }

  .modellpost__spec tr:first-child { border-top: 0; padding-top: 2px; }

  .modellpost__spec th[scope="row"] {
    width: auto;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* Batteritabellen är tre korta kolumner. Med cellmåttet som guide.css ger
     tabeller behöver den 261 px och får 253, alltså åtta pixlar för mycket.
     Med stramare celler ryms den och behåller därför sina kolumner. */
  table.modellpost__batteri { min-width: 0; font-size: 0.82rem; }

  table.modellpost__batteri th,
  table.modellpost__batteri td { padding: 9px 8px; }
}