/*
  style.css

  Designretning (seksjon 9): bildene er grensesnittet. Appen skal kunne brukes
  med én hånd, i dårlig lys, på tretti sekunder. Derfor ligger all navigasjon
  nederst innenfor tommelens rekkevidde, alle ark kommer opp fra bunnen, og
  ingenting som kan trykkes på er under 48 px.

  Paletten er bevisst nøytral i v1. Liila velger farger når hun har sett appen.
*/

/*
  Palett: skogbunn i skumring, med lanternelys.

  Morke gronntoner som bakgrunn, pergamentfarget tekst i stedet for hvit, og
  varm rav som aksent — den skal lese som lys fra en lykt, ikke som en
  systemknapp. Fargene er dempede med vilje: plaggbildene er innholdet, og et
  tema som roper overdover dem.
*/
:root {
  --bakgrunn: #0f150e;
  --bakgrunn-topp: #172015;
  --flate: #1a2318;
  --flate-hoy: #24301f;
  --tekst: #ece5d5;
  --tekst-dempet: #9aa892;
  --kant: #2e3b2a;
  --aksent: #e3b169;
  /* Tekst oppa aksentfargen. Ma vare mork nok til a leses pa rav. */
  --aksent-tekst: #17200f;
  --glod: rgba(227, 177, 105, 0.3);
  --fare: #e0897c;

  --radius: 0.85rem;
  --bunnlinje-hoyde: 4.5rem;

  /* Trygg sone under telefonens gestur-linje */
  --trygg-bunn: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Lysere i toppen, morkere ned — som lys som siles gjennom lovverket.
     fixed sa den ikke ruller med innholdet og avslorer seg som en stripe. */
  background: linear-gradient(180deg, var(--bakgrunn-topp) 0%, var(--bakgrunn) 60%);
  background-attachment: fixed;
  color: var(--tekst);
  font-family: system-ui, -apple-system, sans-serif;
  /* Hindrer at dobbelttrykk zoomer i stedet for å trykke */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.skjult {
  display: none;
}

/*
  hidden-attributtet slar av elementer i JS. Nettleserens standardregel for det
  er bare `display: none`, og den taper mot enhver klasse som setter display
  selv — .felter (flex), .rutenett (grid), .lookliste (grid), .grupper (flex).
  Uten !important her ble felter og rutenett staende synlige selv om koden sa
  at de var skjult. Dette er et av de fa stedene !important er riktig svar:
  regelen skal vinne over alt, og det er nettopp poenget med attributtet.
*/
[hidden] {
  display: none !important;
}


/* ---------- Topplinje ---------- */

.topplinje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.5rem;
}

.tittel {
  margin: 0;
  /* Antikva pa overskrifter gir eventyrbok-folelsen uten a laste en webfont —
     og en webfont ville matt vendres for at appen skal virke i flymodus. */
  font-family: Georgia, 'Noto Serif', 'Times New Roman', serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ikonknapp {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tekst-dempet);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.ikonknapp:active {
  background: var(--flate);
}


/* ---------- Innhold ---------- */

.innhold {
  flex: 1;
  overflow-y: auto;
  /* Plass til bunnlinja, som ligger over innholdet */
  padding: 0 1.25rem calc(var(--bunnlinje-hoyde) + var(--trygg-bunn) + 1rem);
  -webkit-overflow-scrolling: touch;
}

.tomtilstand {
  margin: 25% 0 0;
  color: var(--tekst-dempet);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
}


/* ---------- Kategorifilter ---------- */

.filterrad {
  /* Blir stående mens hun blar. Med tretti plagg forsvinner den ellers opp,
     og hun må rulle helt til topps for å bytte kategori. */
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.75rem 0 1rem;
  /* Ma vare ugjennomsiktig nok til at kort som ruller under ikke synes, men
     ikke en flat farge — bakgrunnen er en gradient, og en flat flate her
     tegnet seg som en synlig boks. Blur mot det som ligger bak i stedet. */
  background: color-mix(in srgb, var(--bakgrunn-topp) 82%, transparent);
  backdrop-filter: blur(10px);
  /* Rada skal kunne dras vannrett uten at siden ruller med */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.filterrad::-webkit-scrollbar {
  display: none;
}

.filterknapp {
  flex: 0 0 auto;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--kant);
  border-radius: 999px;
  background: transparent;
  color: var(--tekst-dempet);
  font: inherit;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
}

.filterknapp.valgt {
  background: var(--aksent);
  border-color: var(--aksent);
  color: var(--aksent-tekst);
  font-weight: 600;
}


/* ---------- Plaggrutenett ---------- */

.rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
}

.plaggkort {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--flate);
  overflow: hidden;
  cursor: pointer;
  /* Stående format: de fleste plagg fotograferes på høykant */
  aspect-ratio: 3 / 4;
}

.plaggkort img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plaggkort:active {
  opacity: 0.7;
}

/* Avhuket i look-byggeren */
.plaggkort.avhuket {
  outline: 3px solid var(--aksent);
  outline-offset: -3px;
}

.plaggkort.avhuket::after {
  content: '✓';
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--aksent);
  color: var(--aksent-tekst);
  font-size: 1rem;
  font-weight: 700;
}


/*
  Kategorigrupper: én rad per kategori, ovenfra og ned på kroppen.
  Brukes i look-byggeren og når et look vises. Har hun to overdeler, står de
  ved siden av hverandre i samme rad.
*/
.grupper {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.gruppe {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/*
  Mindre kort her enn i plaggbiblioteket. Et look skal kunne ses i sin helhet
  uten a rulle — det er hele poenget med a vise plaggene ovenfra og ned. Med
  bibliotekets storrelse fikk man se to og et halvt plagg av gangen.

  Flex og ikke grid, fordi radene skal midtstilles. Med et rutenett havnet en
  ensom underdel i venstre kolonne, og antrekket leste seg som en venstremarg
  i stedet for en stabel.
*/
.gruppe .rutenett {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.gruppe .plaggkort {
  width: 104px;
}

.gruppenavn {
  text-align: center;
}

.gruppenavn {
  color: var(--tekst-dempet);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ---------- Look-kort ---------- */

.lookliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}

.lookkort {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--flate);
  color: var(--tekst);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lookkort:active {
  opacity: 0.7;
}

/* Fire miniatyrer i kvadrat. Har looket færre, strekker de som finnes seg. */
.kollasje {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  aspect-ratio: 1 / 1;
  margin-bottom: 0.4rem;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--flate-hoy);
}

.kollasje img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ett bilde alene fyller hele kvadratet */
.kollasje img:only-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* To bilder: hver sin halvdel, ellers blir nederste høyre rute stående tom */
.kollasje img:first-child:nth-last-child(2),
.kollasje img:first-child:nth-last-child(2) ~ img {
  grid-row: span 2;
}

/* Tre bilder: det første tar venstre halvdel, de to andre stables til høyre */
.kollasje img:first-child:nth-last-child(3) {
  grid-row: span 2;
}

.kollasje-tom {
  grid-column: span 2;
  align-self: center;
  padding: 0 0.5rem;
  color: var(--tekst-dempet);
  font-size: 0.8rem;
  text-align: center;
}

.looknavn {
  font-family: Georgia, 'Noto Serif', 'Times New Roman', serif;
  font-size: 0.95rem;
  font-weight: 600;
}

.lookantall {
  color: var(--tekst-dempet);
  font-size: 0.8rem;
}


/* ---------- Bunnlinje ---------- */

.bunnlinje {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: calc(var(--bunnlinje-hoyde) + var(--trygg-bunn));
  padding-bottom: var(--trygg-bunn);
  border-top: 1px solid var(--kant);
  /* Litt gjennomsiktig så man ser at innholdet fortsetter under */
  background: color-mix(in srgb, var(--bakgrunn) 92%, transparent);
  backdrop-filter: blur(12px);
}

.faneknapp {
  flex: 1;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--tekst-dempet);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.faneknapp.valgt {
  color: var(--tekst);
  font-weight: 600;
}

.plussknapp {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--aksent);
  color: var(--aksent-tekst);
  font: inherit;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  /* Lykta. Eneste stedet i appen med glod — den skal trekke oyet dit. */
  box-shadow: 0 0 1.5rem var(--glod);
}

.plussknapp:active {
  opacity: 0.75;
}


/* ---------- Ark (dialog) ---------- */

/*
  <dialog> gir oss fokusfelle, Esc-lukking og backdrop gratis. Standardplassering
  er midt på skjermen; her dras arket ned til bunnen, der tommelen er.
*/
.ark {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  /*
    Arket er sa hoyt som innholdet trenger, opp til 92 % av skjermen.

    Merk: dette virker bare fordi .arkinnhold under har flex: 1 1 auto.
    Med flex: 1 (som betyr flex-basis: 0) bidro den med omtrent ingenting til
    hoyden, og arket klappet sammen til en enkelt tekstlinje. Ror du den
    regelen, kommer denne buggen tilbake.
  */
  max-height: 92dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--bakgrunn);
  color: var(--tekst);
  overflow: hidden;
}

.ark[open] {
  display: flex;
  flex-direction: column;
}

.ark::backdrop {
  background: rgba(8, 14, 8, 0.72);
}

.arkhode {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--kant);
}

.arktittel {
  margin: 0;
  font-family: Georgia, 'Noto Serif', 'Times New Roman', serif;
  font-size: 1.1rem;
  font-weight: 600;
}

.arkinnhold {
  flex: 1 1 auto;
  /* Ma til for at en flex-item skal kunne krympe under innholdets storrelse.
     Uten den ruller ikke .arkinnhold — den vokser ut av arket i stedet. */
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.arkbunn {
  display: flex;
  /* Rad, ikke kolonne: nar bade «Ta nytt bilde» og «Lagre plagg» er framme
     deler de bredden i stedet for a spise to knappehoyder av arket. */
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem calc(0.75rem + var(--trygg-bunn));
  border-top: 1px solid var(--kant);
}

.storbilde {
  display: grid;
  place-items: center;
  /* Lavere enn for. Med 50dvh presset bildet kategori- og fargefeltet ut av
     syne, og hun matte rulle for a finne dem etter a ha tatt bildet. */
  min-height: 26dvh;
  max-height: 36dvh;
  border-radius: var(--radius);
  background: var(--flate);
  overflow: hidden;
}

.storbilde img {
  max-width: 100%;
  max-height: 36dvh;
  object-fit: contain;
  display: block;
}

.tomtekst,
.hjelpetekst {
  margin: 0;
  color: var(--tekst-dempet);
  font-size: 0.9rem;
  line-height: 1.5;
}


/*
  Nar bildet er hele poenget — plaggdetaljen — far det mer plass enn i
  nytt-plagg-arket, der det deler skjermen med kategori og farge.
*/
.storbilde.stor {
  min-height: 44dvh;
  max-height: 56dvh;
}

.storbilde.stor img {
  max-height: 56dvh;
}


/* ---------- Fjern bakgrunn ---------- */

/*
  Redigeringsarket er hoyt med vilje. Her er bildet arbeidsflaten, ikke en
  illustrasjon — jo mindre av skjermen som gar til knapper, jo bedre.
*/
.ark-stor {
  height: 94dvh;
}

.arkinnhold.tett {
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
}

/*
  Rutemonster bak lerretet. Uten det er gjennomsiktig og morkegronn det samme
  pa skjermen, og hun ser ikke hva som faktisk ble klippet bort.

  flex: 1 gjor at flata sluker all plassen de andre radene ikke trenger.
  min-height: 0 ma til for at den skal kunne krympe i en flex-kolonne.
*/
.lerretflate {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0.35rem;
  border-radius: var(--radius);
  background-color: #2a3327;
  background-image:
    linear-gradient(45deg, #202818 25%, transparent 25%, transparent 75%, #202818 75%),
    linear-gradient(45deg, #202818 25%, transparent 25%, transparent 75%, #202818 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}

#bg-lerret {
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 0.4rem;
  /* Uten dette ruller siden i stedet for at fingeren tegner. */
  touch-action: none;
  cursor: crosshair;
  transform-origin: center center;
}

/* Knapper som ligger oppa lerretet i stedet for a ta en egen rad. */
.lerretverktoy {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(15, 21, 14, 0.72);
  backdrop-filter: blur(8px);
}

.flytknapp {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 21, 14, 0.72);
  backdrop-filter: blur(8px);
  color: var(--tekst);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.lerretverktoy .flytknapp {
  background: transparent;
  backdrop-filter: none;
}

.flytknapp:disabled {
  opacity: 0.3;
  cursor: default;
}

.angreknapp {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-size: 0.85rem;
}

.zoomtall {
  min-width: 3.2rem;
  color: var(--tekst-dempet);
  font-size: 0.8rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.hjelpetekst.liten {
  font-size: 0.82rem;
  text-align: center;
}

.modusrad {
  display: flex;
  gap: 0.35rem;
}

.modusknapp {
  flex: 1;
  min-height: 2.8rem;
  padding: 0 0.3rem;
  border: 1px solid var(--kant);
  border-radius: 999px;
  background: transparent;
  color: var(--tekst-dempet);
  font: inherit;
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}

.modusknapp.valgt {
  background: var(--aksent);
  border-color: var(--aksent);
  color: var(--aksent-tekst);
  font-weight: 600;
}

.modusknapp:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Etiketten star ved siden av glideren, ikke over — det sparer en linje hver. */
.gliderrad {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gliderrad .feltnavn {
  flex: 0 0 7.5rem;
  font-size: 0.78rem;
}

.gliderrad input[type="range"] {
  flex: 1;
  height: 2.2rem;
  accent-color: var(--aksent);
}

/*
  Utklipte plagg vises i sin helhet i stedet for a beskjaeres. Har bakgrunnen
  blitt fjernet, er formen poenget — da skal ikke rutenettet klippe av ermene.
*/
.plaggkort img[data-utklipt],
.kollasje img[data-utklipt] {
  object-fit: contain;
}


/*
  Nar bildet er hele poenget — plaggdetaljen — far det mer plass enn i
  nytt-plagg-arket, der det deler skjermen med kategori og farge.
*/
.storbilde.stor {
  min-height: 44dvh;
  max-height: 56dvh;
}

.storbilde.stor img {
  max-height: 56dvh;
}


/* ---------- Fjern bakgrunn ---------- */

/*
  Rutemonster bak lerretet. Uten det er gjennomsiktig og morkegronn det samme
  pa skjermen, og hun ser ikke hva som faktisk ble klippet bort.
*/
.lerretflate {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  border-radius: var(--radius);
  background-color: #2a3327;
  background-image:
    linear-gradient(45deg, #202818 25%, transparent 25%, transparent 75%, #202818 75%),
    linear-gradient(45deg, #202818 25%, transparent 25%, transparent 75%, #202818 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}

/* Zoom skjer som en transform pa lerretet; flata her klipper det som gar utenfor. */
.lerretflate {
  overflow: hidden;
  height: 46dvh;
}

#bg-lerret {
  max-width: 100%;
  max-height: 46dvh;
  display: block;
  border-radius: 0.5rem;
  /* Uten dette ruller siden i stedet for at fingeren tegner. */
  touch-action: none;
  cursor: crosshair;
  transform-origin: center center;
}

.modusrad {
  display: flex;
  gap: 0.4rem;
}

.modusknapp {
  flex: 1;
  min-height: 2.9rem;
  padding: 0 0.5rem;
  border: 1px solid var(--kant);
  border-radius: 999px;
  background: transparent;
  color: var(--tekst-dempet);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.modusknapp.valgt {
  background: var(--aksent);
  border-color: var(--aksent);
  color: var(--aksent-tekst);
  font-weight: 600;
}

.modusknapp:disabled {
  opacity: 0.35;
  cursor: default;
}

.zoomtall {
  flex: 0 0 auto;
  min-width: 3.6rem;
  color: var(--tekst-dempet);
  font-size: 0.85rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.lettknapp:disabled {
  opacity: 0.35;
  cursor: default;
}

/*
  Utklipte plagg vises i sin helhet i stedet for a beskjaeres. Har bakgrunnen
  blitt fjernet, er formen poenget — da skal ikke rutenettet klippe av ermene.
*/
.plaggkort img[data-utklipt],
.kollasje img[data-utklipt] {
  object-fit: contain;
}


/* ---------- Skjemafelter ---------- */

.felter {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.felt {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.feltnavn {
  color: var(--tekst-dempet);
  font-size: 0.8rem;
}

.felt select,
.felt input {
  min-height: 3rem;
  padding: 0 0.9rem;
  border: 1px solid var(--kant);
  border-radius: 0.75rem;
  background: var(--flate);
  color: var(--tekst);
  font: inherit;
  /* Må være minst 16px, ellers zoomer nettleseren inn når feltet får fokus */
  font-size: 1rem;
}


/* ---------- Knapper ---------- */

.hovedknapp {
  flex: 1;
  width: 100%;
  min-height: 3.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--aksent);
  color: var(--aksent-tekst);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.hovedknapp:active {
  opacity: 0.75;
}

.hovedknapp:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Nedtonet variant. Brukes nar knappen star ved siden av en viktigere en. */
.hovedknapp.sekundar {
  background: transparent;
  border: 1px solid var(--kant);
  color: var(--tekst);
  font-weight: 500;
}

.hovedknapp.farlig {
  background: transparent;
  border: 1px solid var(--kant);
  color: var(--fare);
}

.knapperad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lettknapp {
  flex: 1 1 45%;
  min-height: 3rem;
  padding: 0 1rem;
  border: 1px solid var(--kant);
  border-radius: 999px;
  background: var(--flate);
  color: var(--tekst);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.lettknapp:active {
  opacity: 0.7;
}


/* ---------- Bevegelse ---------- */

@media (prefers-reduced-motion: no-preference) {
  .ark[open] {
    animation: opp 0.22s ease-out;
  }

  @keyframes opp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}