/* HoloInvestor · tier-listen i retning 8 «Snur hvis» (body[data-page="tierlist"]).
   Lenkes bare fra tierlist.html, rett etter style.css. Komponentene (båndet, svaret, miniatyren, feltet, knappen og
   neste steg) har stilen sin i components.css; her står flata med nivåene, flisene og lufta rundt dem.
   Flisen er en knapp rundt .mini-boks, ikke miniCard (bildet i miniCard er alltid pakket i en lenke). Valgt flis har
   formen for valgt rad (--flate, 1 px --blekk og 3 px --oliven fra venstre), og et tomt nivå er rasteret. Radius 0,
   ingen skygge, ingen overgang og ingen bevegelse. Dra med pekeren (B7): flisen er et grep, og flisen som
   dras følger --dx og --dy, satt fra skriptet, med transform. Det er direkte manipulering, så den har ingen overgang.
   AVVIK fra sidedesignet (eiers godkjenning 14.10.2026): brettet er mørkt (#3d3d3d, radene #262626) med fargede
   nivåbokser (data-tier 0 til 6 velger fargen) og vannmerke. Brettet setter sine egne tokens, så flisene og
   knappene står lyse på mørkt i begge moduser, og de lyse boksene har mørke tokens for «Legg her». */

body[data-page="tierlist"] main:focus { outline: none; }

/* .knapp har display: inline-flex, som overstyrer hidden-attributtet: uten disse står «Legg her» på alle nivåene før
   et kort er valgt, og de skjulte handlingene (logg inn, del, slett) står synlige */
body[data-page="tierlist"] .niva-velg[hidden],
body[data-page="tierlist"] .tier-handlinger [hidden] { display: none; }

/* overskriftene over svaret og flata, som på forseglet-siden */
body[data-page="tierlist"] .tier-tittel {
  font: 600 13px/28px var(--f-tall); letter-spacing: .06em; text-transform: uppercase; color: var(--blekk-2); margin: 0;
}
body[data-page="tierlist"] .tier-tittel:focus { outline: none; }
/* fellesskapets nivåer under svaret: luft over overskriften (etter «Snur hvis») og under den */
body[data-page="tierlist"] .svarblokk .tier-tittel { margin-top: var(--lin4); }
body[data-page="tierlist"] .svarblokk .tier-tittel + .grunn-fakta { margin-top: var(--lin2); }

/* velgeren, antallet og handlingene ved siden av svaret */
body[data-page="tierlist"] .tier-side { min-width: 0; }
body[data-page="tierlist"] .tier-side > * + * { margin-top: var(--lin3); }
body[data-page="tierlist"] .tier-side .listestatus:empty { display: none; }
body[data-page="tierlist"] .tier-side > #tierlist-msg:empty,
body[data-page="tierlist"] .tier-side > #tierlist-status:empty { margin-top: 0; }
body[data-page="tierlist"] .tier-handlinger { display: flex; flex-wrap: wrap; gap: var(--lin2); }
/* brikkeradene over velgeren (kategori, underkategori): luft mellom radene, og ingen luft over velgeren når ingen rad står */
body[data-page="tierlist"] .tier-brikker .velger + .velger { margin-top: var(--lin2); }
body[data-page="tierlist"] .tier-side > .tier-brikker:empty + * { margin-top: 0; }

/* flata: ett nivå under det andre, bunken sist */
body[data-page="tierlist"] .tier-grunn { min-width: 0; }
/* brettet: mørk ytterflate med radene på (eiers avvik 14.10.2026). Tokens som er satt her, gjelder flisene, rasteret og knappene inni */
body[data-page="tierlist"] .tier-brett {
  margin-top: var(--lin3); padding: var(--lin2); background: #3d3d3d; color: #f1f1f1;
  --blekk: #f1f1f1; --blekk-2: #cfcfcf; --linje: #8a8a8a; --papir: #262626; --flate: #4d4d4d; --oliven: #a9b84a;
}
body[data-page="tierlist"] .tier-flate { display: grid; gap: var(--lin1); user-select: none; -webkit-user-select: none; }
/* ett nivå er en rad: den fargede boksen med navnet i kolonne 1 (smal på mobil) og kortene på den mørke raden i kolonne 2.
   Rammen har radens farge og får blekk-farge på nivået under pekeren (.niva--maal) */
body[data-page="tierlist"] .niva {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: stretch; min-width: 0; padding: 0;
  background: #262626; border: 2px solid #262626;
}
/* bunken har en mørk boks; nivåene har lyse bokser med mørk tekst, og «Legg her» i dem får mørke tokens */
body[data-page="tierlist"] .niva-hode {
  grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--lin2); min-width: 0; min-height: 44px; padding: var(--lin2) var(--lin1); text-align: center;
  background: #4a4a4a; color: #f1f1f1;
}
body[data-page="tierlist"] .niva:not(.niva--bunke) .niva-hode { color: #222; --blekk: #222; --linje: #333; --oliven: #222; }
body[data-page="tierlist"] .niva[data-tier="0"] .niva-hode { background: #ff7f7f; }
body[data-page="tierlist"] .niva[data-tier="1"] .niva-hode { background: #ffbf7f; }
body[data-page="tierlist"] .niva[data-tier="2"] .niva-hode { background: #ffff7f; }
body[data-page="tierlist"] .niva[data-tier="3"] .niva-hode { background: #7fff7f; }
body[data-page="tierlist"] .niva[data-tier="4"] .niva-hode { background: #7fbfff; }
body[data-page="tierlist"] .niva[data-tier="5"] .niva-hode { background: #7f7fff; }
body[data-page="tierlist"] .niva[data-tier="6"] .niva-hode { background: #bfbfbf; }
body[data-page="tierlist"] .niva-navn { font: 600 15px/20px var(--f-tall); letter-spacing: 0; margin: 0; overflow-wrap: break-word; }
body[data-page="tierlist"] .niva-velg { width: 100%; justify-content: center; padding: var(--lin1); font-size: 13px; line-height: 1.2; text-align: center; }
/* plass til én flis: bildet i 63:88 inni boksen (1 px ramme og --lin1 luft på hver side, 10 px til sammen), og luften rundt */
body[data-page="tierlist"] .niva-kort {
  grid-column: 2; grid-row: 1; list-style: none; margin: 0; padding: var(--lin2); display: flex; flex-wrap: wrap;
  align-content: flex-start; gap: var(--lin2); min-width: 0;
  min-height: calc((var(--mini-s) - 10px) * 88 / 63 + 10px + 2 * var(--lin2));
}
body[data-page="tierlist"] .niva-kort > li { min-width: 0; margin: 0; }
body[data-page="tierlist"] .niva--tom .niva-kort { background-image: var(--raster); }
/* alle tre barna har egen plass: uten den hopper automatisk plassering over cellen .niva-tom tar, og rasteret havner i kolonne 1.
   Ordene i et tomt nivå står på rasteret, ikke under det */
body[data-page="tierlist"] .niva-tom {
  grid-column: 2; grid-row: 1; align-self: center; justify-self: start; margin: 0 0 0 var(--lin3); padding: 0 var(--lin1);
  font: 400 13px/20px var(--f-tall); color: var(--blekk-2); background: var(--papir);
}
/* vannmerket nederst til høyre i brettet: liten tekst i markup (ikke bakgrunn), så det følger med på skjermbilder */
body[data-page="tierlist"] .tier-vannmerke {
  margin: var(--lin1) 0 0; font: 500 12px/16px var(--f-tall); letter-spacing: .04em; text-align: right; color: #d6d6d6;
  user-select: none; -webkit-user-select: none;
}

/* flisen: en knapp uten egen form, så bare kortbildet i boksen synes. Den er et grep: pan-y lar siden rulle loddrett på
   berøring (og tar draget over når fingeren går sidelengs), og bildet tar ikke pekeren og kan ikke dras for seg */
body[data-page="tierlist"] .flis {
  display: block; width: var(--mini-s); margin: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit;
  cursor: grab; touch-action: pan-y; -webkit-appearance: none; appearance: none;
}
body[data-page="tierlist"] .flis .mini-bilde { pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
body[data-page="tierlist"] .flis:hover .mini-boks { border-color: var(--blekk); }
body[data-page="tierlist"] .flis:focus-visible { outline: 3px solid var(--oliven); outline-offset: 2px; }
/* valgt flis står som navngitt velger i formordboka (design-lint FORMORDBOK «valgt rad»), så velgeren står uten scope; .flis finnes bare her */
.flis[aria-pressed='true'] .mini-boks { background: var(--flate); border-color: var(--blekk); box-shadow: inset 3px 0 0 var(--oliven); }

/* draget (B7): flisen følger pekeren over de andre flisene, og nivået under pekeren får blekk-ramme. Mens noe dras, er
   markøren et grep over hele siden og ingenting markeres. Ingen overgang: flisen skal være der pekeren er */
body[data-page="tierlist"] .flis--dras {
  position: relative; z-index: 1; cursor: grabbing; transform: translate(var(--dx, 0), var(--dy, 0));
}
body[data-page="tierlist"] .niva--maal { border-color: var(--blekk); }
body.tier-drar { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* fra 768 px er nivået et grid med boksen i kolonne 1 (bredere) og kortene i kolonne 2, i større fliser og med større navn.
   Plassene står her også (de er de samme som på mobil), så et tomt nivå beholder rasteret i kolonne 2 */
@media (min-width: 768px) {
  body[data-page="tierlist"] .niva { display: grid; grid-template-columns: 160px minmax(0, 1fr); }
  body[data-page="tierlist"] .niva-hode { grid-column: 1; grid-row: 1; }
  body[data-page="tierlist"] .niva-kort { grid-column: 2; grid-row: 1; }
  body[data-page="tierlist"] .niva-tom { grid-column: 2; grid-row: 1; }
  body[data-page="tierlist"] .niva-navn { font-size: 17px; line-height: 24px; }
  body[data-page="tierlist"] .niva-velg { width: auto; padding: 0 var(--lin3); font-size: 15px; line-height: 1; }
  body[data-page="tierlist"] .niva-kort { min-height: calc((var(--mini-m) - 10px) * 88 / 63 + 10px + 2 * var(--lin2)); }
  body[data-page="tierlist"] .flis { width: var(--mini-m); }
}

/* neste steg står i spaltebredden, med margen fra kanten som på de andre sidene */
body[data-page="tierlist"] main > .neste {
  width: calc(100% - 2 * var(--marg)); max-width: calc(1200px - 2 * var(--marg));
  margin-left: auto; margin-right: auto; margin-bottom: var(--lin5);
}

/* skjemaet for eget spørsmål (B11): feltene i en kolonne med luft mellom, nivåene som en nummerert liste, og kortvelgeren (legacy.css gir
   .picker-box position: absolute) har en plassert beholder */
body[data-page="tierlist"] .tier-skjema > * + * { margin-top: var(--lin3); }
body[data-page="tierlist"] .tier-skjema [hidden] { display: none; }
body[data-page="tierlist"] .tier-skjema .velger + .velger { margin-top: var(--lin3); }
body[data-page="tierlist"] .tier-nivaaer { margin: var(--lin2) 0 0; padding: 0 0 0 var(--lin5); display: grid; gap: var(--lin2); }
body[data-page="tierlist"] .tier-nivaaer > li { margin: 0; padding-left: var(--lin1); }
body[data-page="tierlist"] .tier-skjema .tier-handlinger { margin-top: var(--lin2); }
body[data-page="tierlist"] .picker-host { position: relative; }
body[data-page="tierlist"] #tierlist-picked { list-style: none; margin: var(--lin2) 0 0; padding: 0; }
body[data-page="tierlist"] #tierlist-picked:empty { display: none; }
body[data-page="tierlist"] #tierlist-picked > li { display: flex; align-items: center; justify-content: space-between; gap: var(--lin2); min-height: 44px; border-bottom: 1px solid var(--linje); }
body[data-page="tierlist"] #tierlist-picked .picked-name { min-width: 0; overflow-wrap: anywhere; }
body[data-page="tierlist"] .tier-skjema .felt-hint:empty { display: none; }