/* Novus-appen — en egen, mycket mindre yta än medlemssidorna.
 *
 * Johnny 2026-09-25: «enbart öppna dörren och se sin profil och kunna köpa
 * medlemskap … så enkla menyer så inte allt bara visas direkt. luftigt men ändå
 * så litet så man får plats med mycket men uppdelat på rätt menysystem.»
 *
 * Därav: tre flikar i botten, EN sak per vy, och stora ytor att träffa med
 * tummen. Färgerna och knapparna ärvs från `sajt.css` så appen och sajten inte
 * glider isär.
 */
/* ⛔ LUFTEN FÖR BOTTENMENYN HÖR PÅ INNEHÅLLET, INTE PÅ SIDAN.
   Den satt på `body` — alltså också på inloggningsskärmen, där det inte finns
   någon meny. Resultatet: 844 px innehåll + 76 px tomrum = en sida som rullar
   i en app som inte har något att rulla till. Nu ligger den på `.appmain`, som
   är gömd när man är utloggad, så klarningen finns där menyn finns. */
.appyta { min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column;
  padding: 0; }

.apptopp { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(env(safe-area-inset-top) + .9rem) 1.2rem .9rem; }
.appgym { display: block; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  font-size: .82rem; }
.appstatus { display: block; color: var(--dis); font-size: .86rem; margin-top: .15rem;
  /* En rad, alltid. Ett långt kortnamn knuffade annars «Mer» ur huvudet. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apptopp > div { min-width: 0; }
#dorr-kop { display: flex; justify-content: center; }
.applank { background: none; border: 0; color: var(--dis); font: inherit; font-size: .86rem;
  text-decoration: underline; cursor: pointer; padding: .4rem; }

.appmain { flex: 1; box-sizing: border-box;
  padding: 0 1.2rem calc(76px + env(safe-area-inset-bottom)); }
.appvy { display: flex; flex-direction: column; gap: 1.1rem; padding: 0; }
/* Inloggningen är appens första bild, och den ska se ut som medlemssidornas:
   samma märke, samma foto, samma blå BankID-knapp. Två olika inloggningar till
   samma gym läser som två olika produkter. */
/* ⛔ `border-box`, annars LÄGGS luften till höjden: `min-height: 100dvh` plus
   72 px padding gav en 916 px hög sida i ett 844 px fönster, och då rullar
   inloggningen. Johnny 2026-09-26: *«det går scrolla i appen så något är
   felbyggt»* — en app som gungar när man drar i den läser som en webbsida. */
#vy-in { position: relative; box-sizing: border-box;
  justify-content: center; align-items: center; text-align: center;
  /* ⛔ MÅTTEN KRYMPER MED SKÄRMEN. En fast textstorlek som ryms på en iPhone 15
     rullar på en SE och simär på en Pro Max — Johnny 2026-09-26: *«minska ner
     texten så man inte behöver scrolla, men det är olika på olika telefoner»*.
     `clamp` med `vh` löser det en gång i stället för en bräckpunkt per modell. */
  gap: clamp(.55rem, 2.1vh, 1.3rem); min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + clamp(1rem, 3vh, 2rem)) 1.6rem clamp(1.2rem, 3vh, 2.5rem); }
/* Loggan är det som tar mest plats på en kort skärm. Taket i `vh` gör att den
   viker ner sig i stället för att knuffa knappen under kanten. */
#vy-in .applogga { max-height: 24vh; }
#vy-in #in-text { font-size: clamp(.88rem, 1.9vh, 1rem); margin: 0; }
/* Fotot i eget lager med en slöja över — utan slöjan blir vit text en
   läsbarhetsfråga varje gång kunden byter bild. */
#vy-in::before { content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(6,7,10,.34) 0%, rgba(6,7,10,.18) 42%, rgba(6,7,10,.72) 100%),
    url('/bild/lokalen.jpg') 74% 44% / cover no-repeat; }
#vy-in > * { position: relative; z-index: 1; }
#vy-in .knapp { width: min(100%, 320px); padding: clamp(.62rem, 1.7vh, .95rem) 1.8rem; }
/* Inloggningen: ett fält och en knapp åt gången. ⚠️ `font-size: 16px` är inte
   en smaksak — under det zoomar iOS in sidan när fältet får fokus, och då sitter
   knappen utanför skärmen. */
/* ⛔ ALLT i inloggningen delar EN kolumn. Raden «Inte medlem ännu?» låg utanför
   och blev bredare än fälten — då tappar blocket sin mittlinje och hela sidan
   läser som osymmetrisk, även om varje del för sig är centrerad.
   Johnny 2026-09-26: *«hela första sidan är inte centrerad»*. */
#in-knappar { display: flex; flex-direction: column; align-items: center;
  gap: clamp(.5rem, 1.8vh, 1rem); width: min(100%, 320px); }
#vy-in form { display: flex; flex-direction: column; gap: .7rem; width: 100%; }
.infalt { width: 100%; box-sizing: border-box; padding: clamp(.62rem, 1.7vh, .95rem) 1rem;
  /* ⚠️ 16px är ett GOLV, inte en smaksak: under det zoomar iOS in sidan när
     fältet får fokus, och då hamnar knappen utanför skärmen. */
  font-size: 16px;
  border-radius: 14px; border: 1px solid var(--ram-ljus); background: rgba(6, 7, 10, .72);
  color: var(--vit); font-family: inherit; text-align: center; letter-spacing: .06em; }
.infalt::placeholder { color: var(--dis); letter-spacing: normal; }
#in-kod { letter-spacing: .5em; font-size: clamp(1.1rem, 2.6vh, 1.35rem); font-weight: 700; }
/* Länken på EGEN rad under frågan — på en rad blev det en bruten mening som
   radbröts mitt i. (Johnny: *«lägg bli medlem på Novus Gym under inte medlem än»*.) */
#vy-in .in-webb { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.15); }
#vy-in .in-webb .knapp { display: inline-block; box-sizing: border-box; text-decoration: none; margin-top: .3rem;
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.85); border-radius: 12px; font-weight: 700; }
#in-fel { color: #ff8f8f; }
#vy-in .knapp:not(.tom) { background: var(--blaa); border-color: var(--blaa-ljus); color: var(--vit); }
.applogga { width: min(52vw, 190px); height: auto; color: var(--vit); }
.applogga .lm-namn { font: 700 25px system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
  Arial, sans-serif; letter-spacing: 6.5px; }
.applogga .lm-gym { font: 700 13px system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
  Arial, sans-serif; letter-spacing: 5px; }

/* Dörren: knappen ska gå att träffa utan att titta. */
.dorrknapp { width: min(100%, 320px); max-width: 46dvh; aspect-ratio: 1 / 1;
  margin: .6rem auto .2rem;
  border-radius: 50%; border: 1px solid var(--ram-ljus); background: var(--vit); color: var(--svart);
  font: 800 1.25rem/1.2 inherit; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  display: grid; place-items: center; transition: transform .12s, opacity .2s; }
.dorrknapp:active { transform: scale(.97); }
.dorrknapp:disabled { opacity: .45; cursor: not-allowed; }
.dorrknapp.oppnad { background: #2fbf71; border-color: #2fbf71; }

.appkort { border: 1px solid var(--ram); border-radius: 18px; padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .35rem; }
/* ⛔ Egna namn: sajtens `.tal` och `.etikett` bär versaler och ett glödstreck
   (`sajt.css`), och kortet fick ett streck rakt genom undertexten. */
.appkort .apptal { font-size: 2rem; font-weight: 800; line-height: 1; }
.appkort .appunder { color: var(--dis); font-size: .86rem; line-height: 1.45; }

/*
 * Menyn: tre flikar för en medlem, inget mer. Fler än så och appen blir
 * medlemssidorna igen.
 *
 * ⚠️ Sedan 2026-10-11 finns en FJÄRDE flik — men bara för gymmets
 * administratörer, och bara för den som kryssat i den. Regeln ovan gäller
 * alltså fortfarande för alla som är medlemmar och inget annat.
 *
 * ⛔ `grid-auto-columns` i stället för `repeat(3, 1fr)`: antalet kolumner var
 * hårdkodat, så en fjärde flik hade lagt sig på rad två under de tre. Nu
 * räknar rutnätet själv, och en gömd flik (`[hidden]` i `sajt.css` är
 * `display: none !important`) räknas inte alls.
 */
.appmeny { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(6, 7, 10, .94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--ram); padding-bottom: env(safe-area-inset-bottom); }
.appflik { background: none; border: 0; color: var(--dis); font: inherit; font-size: .74rem;
  padding: .7rem .2rem .8rem; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  cursor: pointer; }
.appflik.aktiv { color: var(--vit); }
.appikon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }

.appnotis { position: fixed; left: 1rem; right: 1rem; bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 40; padding: .9rem 1.1rem; border-radius: 14px; font-size: .95rem;
  background: #12301f; color: #bff0cf; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.appnotis.fel { background: #3a1616; color: #ffc9c9; }
.appnotis.varning { background: #3a2f16; color: #ffe6ad; }

/* Närvarokortet. Samma färger som medlemssidornas beläggning (`sajt.css`), så
   grönt betyder samma sak i båda ytorna — men ORDET bär betydelsen, färgen
   förstärker den bara. Var tolfte man ser ingen skillnad på grönt och rött. */
.narvaro .apptal { font-size: 1.5rem; }
.narvaro.gron .apptal { color: #6ee7a8; }
.narvaro.gul .apptal { color: #f2cf6a; }
.narvaro.rod .apptal { color: #ff8f8f; }

/* Ett kort som kräver något av medlemmen — inte ett larm, men inte heller ett
   fält bland andra. */
.appkort.varning { border-color: rgba(242, 207, 106, .45); gap: .6rem; }
.appkort.varning strong { color: #f2cf6a; }
.appkort.varning p { color: var(--dis); font-size: .9rem; margin: 0; }
.appkort.varning .knapp { align-self: flex-start; }

.appvy h2 { font-size: 1.35rem; margin: .4rem 0 0; }
.applankar { display: flex; flex-direction: column;
  border: 1px solid var(--ram); border-radius: 18px; overflow: hidden; }
.applankrad { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.1rem; text-decoration: none; color: var(--vit);
  border-bottom: 1px solid var(--ram); }
.applankrad:last-child { border-bottom: 0; }
.applankrad:active { background: rgba(255, 255, 255, .06); }
.applankrad .pil { color: var(--dis); font-size: 1.2rem; line-height: 1; }
/* Avslutsgruppen (Logga ut, Radera konto) är rader som de andra, i egen grupp.
   ⚠️ Knappar ärver inte länkens typsnitt eller bakgrund — nollställ dem. */
.applankar.avslut { margin-top: 1.2rem; }
button.applankrad { background: none; border: 0; border-bottom: 1px solid var(--ram);
  font: inherit; cursor: pointer; justify-content: flex-start; }
button.applankrad:last-child { border-bottom: 0; }

.apprad { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--ram); }
.apprad:last-child { border-bottom: 0; }
.apprad .namn { font-weight: 700; }
.apprad .under { color: var(--dis); font-size: .86rem; }
/* Värdet till höger får aldrig knuffa ut namnet: ett långt kortnamn ska brytas,
   inte skjuta datumet utanför skärmen. */
.apprad .varde { text-align: right; }
.appkort .apprad:first-child { padding-top: .2rem; }

@media (min-width: 720px) {
  .appmain, .apptopp { max-width: 560px; margin: 0 auto; width: 100%; }
  .appmeny { max-width: 560px; margin: 0 auto; border-radius: 18px 18px 0 0; }
}

/* Granskningsinloggningen (js/app.js). Liten och diskret — den är till för en
   granskare hos Apple, inte för medlemmar. Ritas bara när servern säger att
   vägen finns. */
#vy-in.med-granskning { justify-content: flex-start; min-height: auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 3rem); }
.granskaruta { display: flex; flex-direction: column; gap: .5rem; width: min(100%, 320px);
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--ram); }
.granskaruta input { padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--ram);
  background: rgba(6, 7, 10, .7); color: var(--vit); font: inherit; }
.granskaruta .knapp { width: 100%; }

/*
 * Adminflikens tal. Större än i adminvyn, för det här läses med en telefon i
 * handen mitt i en gymlokal — ofta på väg någonstans.
 *
 * ⚠️ Två kolumner, aldrig fler: fyra tal i bredd på 390 px blir fyra tal man
 * måste zooma in på, och då är «tydliga siffror» inte längre tydliga.
 */
.apptal-rutor { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.apptal-ruta { border: 1px solid var(--ram); border-radius: 16px; padding: .85rem .9rem;
  display: flex; flex-direction: column; gap: .15rem; border-top-width: 2px; }
.apptal-ruta .rub { color: var(--dis); font-size: .68rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1.3; }
.apptal-ruta .tal { font-size: 1.75rem; font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; }
.apptal-ruta .und { color: var(--dis); font-size: .76rem; line-height: 1.35; }
/* Samma två färger som adminvyns områden: grönt för medlemmar, gyllene för
   pengar. Känner man igen dem från datorn slipper man läsa rubriken. */
.apptal-ruta.folk { border-top-color: #7ee2a8; }
.apptal-ruta.folk .tal { color: #7ee2a8; }
.apptal-ruta.pengar { border-top-color: #ffd27a; }
.apptal-ruta.pengar .tal { color: #ffd27a; }
/* Ett tal som är ett helt belopp får bryta ut ur rutnätet — «25 137 kr» ryms
   inte i en halv telefonbredd utan att krympa till oläslighet. */
.apptal-ruta.bred { grid-column: 1 / -1; }

/*
 * ── PROFILEN SKA FÅ PLATS UTAN ATT RULLAS ─────────────────────────────────
 *
 * Johnny 2026-10-11: *«i appen profil ska helst inte scrollas, antingen gör vi
 * texten mindre eller delar upp info på fler flikar»*.
 *
 * Mätt FÖRE på en iPhone SE (375×667, den minsta telefonen som fortfarande är
 * i bruk): synlig yta 516 px mellan topprad och bottenmeny, profilens innehåll
 * 852 px — alltså 336 px som bara gick att nå genom att rulla.
 *
 * Valet blev MINDRE, inte fler flikar. Appens doktrin är «så enkla menyer så
 * inte allt bara visas direkt» (Johnny 2026-09-25), och en femte flik för att
 * slippa rulla hade löst problemet genom att skapa det ursprungliga.
 *
 * ⛔ Ingen uppgift är dold. Det är luften som krympt. En vy som får plats genom
 * att gömma något får inte plats — den ljuger bara om det.
 */

/* Tätare faktarader — bara i profilen, via `tat`. Köpvyns kort rörs inte: där
   är raderna få och luften bär dem. */
.appkort.tat { padding: .45rem .9rem; gap: 0; }
.appkort.tat .apprad { padding: .42rem 0; gap: .8rem; }
.appkort.tat .apprad:first-child { padding-top: .3rem; }
.appkort.tat .apprad:last-child { padding-bottom: .3rem; border-bottom: 0; }
.appkort.tat .namn { font-size: .82rem; }
/* ⚠️ Värdet högerställs och får bryta. En lång mejladress sprängde raden till
   två och tog 70 px i stället för 35 — det var den enskilt största posten. */
.appkort.tat .varde { font-size: .92rem; text-align: right;
  overflow-wrap: anywhere; min-width: 0; }

/* Länkraderna: samma rader, mindre luft. ⚠️ 44 px är Apples minsta träffyta
   och golvet här — under det blir listan svår att träffa med tummen, och då
   har jag bytt ett rullningsproblem mot ett sämre. */
.appvy#vy-profil .applankrad { padding: .62rem 1.1rem; min-height: 44px; font-size: .95rem; }

/*
 * De två sista knapparna sida vid sida.
 *
 * ⛔ `flex-wrap: wrap` + `flex: 1 1 auto` lät dem radbryta på 375 px och raden
 * blev 127 px — alltså två rader igen, fast med extra luft. Mätt, inte gissat.
 * Nu ett rutnät med två lika kolumner och text som inte får brytas: antingen
 * ryms båda på en rad, eller så krymper texten — men raden blir aldrig två.
 */
.profilknappar { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  margin-top: .8rem; }
.profilknappar .knapp { margin: 0; align-self: auto; white-space: nowrap;
  padding-left: .5rem; padding-right: .5rem; min-width: 0;
  font-size: .76rem; letter-spacing: .05em; }
/* ⛔ Åsidosätter `.radera-konto`/`.logga-ut` som bär egna marginaler för det
   gamla läget under varandra. Lämnas de kvar hamnar knapparna snett. */
.profilknappar .radera-konto, .profilknappar .logga-ut { margin-top: 0; align-self: auto; }

/*
 * Luften MELLAN profilens tre block.
 *
 * ⚠️ `.appvy` har `gap: 1.1rem`, vilket är rätt för en vy med två block och
 * gott om plats. Profilen har tre och ingen plats — 35 px av de 336 som skulle
 * bort låg i de två mellanrummen. ⛔ Ändras bara här: dörrvyn behöver sin luft,
 * det är en skärm med en knapp mitt på.
 */
#vy-profil { gap: .7rem; }

/* ⚠️ 44 px är Apples minsta träffyta och GOLVET. Under det byter jag ett
   rullningsproblem mot en lista som är svår att träffa med tummen, och det är
   en sämre affär. Raderna ligger på exakt 44 nu — de får inte bli tätare. */
#vy-profil .applankrad { padding: .55rem 1.1rem; min-height: 44px; }

/*
 * ── Adminflikens tal: grupperade, och tidsspannen i samma ruta ────────────
 *
 * Johnny 2026-10-11: *«nu är det blandat rutor med ekonomi och andra
 * händelser. försök få det samsat. o kansk inte behöver ha en ruta för varje
 * sak, dag vecka månad år kan nog stå i samma ruta snyggt under varandra»*.
 */
/* ⚠️ `.appvy h2` sätter 1,35 rem och vinner på specificitet — rubriken blev
   enorm. Egen vy-prefixad regel, inte ett `!important`. */
#vy-oversikt .apprubrik { font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dis); margin: 1.2rem 0 .5rem; }
#vy-oversikt .apprubrik:first-child { margin-top: .2rem; }
/* Grupperna under varandra; rutnätet bor i varje grupp, inte i behållaren. */
#oversikt-tal { display: flex; flex-direction: column; }

.apptr-lista { display: flex; flex-direction: column; margin-top: .25rem; }
.apptr { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .34rem 0; border-bottom: 1px solid var(--ram); }
.apptr:last-child { border-bottom: 0; padding-bottom: 0; }
.apptr-namn { color: var(--dis); font-size: .86rem; }
/* ⚠️ `tabular-nums` så kolumnen står rakt. Tal under varandra som glider i
   sidled är svårare att jämföra än tal i en tabell — och det är jämförelsen
   som är hela poängen med att lägga dem i samma ruta. */
.apptr-varde { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.apptal-ruta.folk .apptr-varde { color: #7ee2a8; }
.apptal-ruta.pengar .apptr-varde { color: #ffd27a; }
/* Sista raden är den man tittar efter — året, respektive totalen. */
.apptr:last-child .apptr-varde { font-size: 1.4rem; }

/*
 * ── iOS-STIL I HELA APPEN ─────────────────────────────────────────────────
 *
 * Johnny 2026-10-17: *«kan du få stilen på alla sidor som ios»* — efter att
 * Profilens listor fått färgade ikonrutor. Det här avsnittet gör resten av
 * appen till samma familj, som iPhones egna Inställningar i mörkt läge:
 *  - svart botten, grupperade ytor i #1C1C1E utan ram, 12 px rundning;
 *  - tunna avdelare som börjar EFTER ikonen, inte vid kanten;
 *  - knappar i systemblått med vanlig gemen text, inga versaler;
 *  - flikraden med blå aktiv flik och grå övriga.
 * ⛔ Bara appen (`body.appyta`). Sajten och medlemssidorna har egen stil, och
 * ⚠️ avsnittet ligger SIST med avsikt: det ska vinna över reglerna ovan utan
 * `!important`. Flyttas det upp slutar det gälla tyst.
 */
.appyta {
  --ios-bg: #000; --ios-grupp: #1C1C1E; --ios-linje: #38383A;
  --ios-gra: #8E8E93; --ios-bla: #0A84FF; --ios-rod: #FF453A;
  background: var(--ios-bg);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.appyta .dis { color: var(--ios-gra); }

/* Toppraden: namnet som en vanlig rubrik, «Mer» som en blå textknapp. */
.appyta .appgym { letter-spacing: -.01em; text-transform: none; font-size: 1.15rem; font-weight: 700; }
.appyta .appstatus { color: var(--ios-gra); font-size: .85rem; }
.appyta .applank { color: var(--ios-bla); text-decoration: none; font-size: 1.05rem; font-weight: 500; }

/* Grupperade ytor. */
.appyta .appkort, .appyta .applankar, .appyta .apptal-ruta {
  background: var(--ios-grupp); border: 0; border-radius: 12px; }
.appyta .appkort.varning { box-shadow: inset 0 0 0 1px rgba(255, 214, 10, .45); }
.appyta .apprad, .appyta .apptr { border-bottom-color: var(--ios-linje); border-bottom-width: .5px; }
.appyta .apprad .namn { font-weight: 400; }
.appyta .apprad .varde { color: var(--ios-gra); }

/* Listrader: avdelaren ritas som ett eget streck som börjar efter ikonen. */
.appyta .applankrad { position: relative; border-bottom: 0; }
.appyta .applankrad:not(:last-child)::after { content: ''; position: absolute; right: 0; bottom: 0;
  left: 1.1rem; height: .5px; background: var(--ios-linje); }
.appyta .applankrad.iosrad:not(:last-child)::after { left: calc(1.1rem + 30px + .85rem); }
.appyta .applankrad .pil { color: #5A5A5F; font-size: 1.5rem; font-weight: 300; }
.appyta .applankrad:active { background: #2C2C2E; }

/* Knappar: systemblå, gemen text, rundad rektangel — inte sajtens vita piller. */
.appyta .knapp { background: var(--ios-bla); color: #fff; border: 0; border-radius: 12px;
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 1.05rem;
  padding: .85rem 1.4rem; box-shadow: none; text-align: center; }
.appyta .knapp:hover { box-shadow: none; }
.appyta .knapp.tom { background: transparent; color: var(--ios-bla); }
.appyta .knapp.fara { background: transparent; color: var(--ios-rod); }
.appyta #dorr-kop .knapp { width: min(100%, 320px); }

/* Dörrknappen behåller sin stora runda yta — det är den man träffar utan att
   titta — men texten följer resten av appen. */
.appyta .dorrknapp { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.45rem;
  border: 0; box-shadow: 0 10px 40px rgba(255, 255, 255, .08); }
.appyta .dorrknapp.oppnad { background: #30D158; color: #fff; }

.appyta .appvy h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
/* Förklarande text under en grupp, som iOS fotnoter. */
.appyta .iosfot { color: var(--ios-gra); font-size: .82rem; line-height: 1.4; margin: .5rem 1.1rem 0; }

/* Adminflikens tal: samma gruppyta, färgen sitter kvar i siffrorna. */
.appyta .apptal-ruta { border-top-width: 0; }
.appyta #vy-oversikt .apprubrik { color: var(--ios-gra); font-weight: 600; letter-spacing: .02em;
  margin-left: 1rem; }

/* Flikraden. */
.appyta .appmeny { background: rgba(22, 22, 24, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--ios-linje); }
.appyta .appflik { color: var(--ios-gra); font-size: .66rem; font-weight: 500; padding: .55rem .2rem .6rem; }
.appyta .appflik.aktiv { color: var(--ios-bla); }
.appyta .appflik.aktiv .appikon { stroke-width: 2.1; }
.appyta .appikon { width: 25px; height: 25px; }

/* ── Butiken i appen (2026-10-25) ───────────────────────────────────────────
   Johnny: «luftigt stilrent». Två varor i bredd, kvadratisk bild, namn och
   pris fritt under. Hela kortet är knappen. Samma utseende som medlemssidorna. */
.appyta .appvyrubrik { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: .2rem 0 .3rem; }
.appyta .varor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; margin-top: 1.2rem; }
@media (min-width: 620px) { .appyta .varor { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.appyta .vara { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: .2rem;
  cursor: pointer; min-width: 0; -webkit-tap-highlight-color: transparent; }
.appyta .vara:focus-visible { outline: 2px solid var(--ios-bla); outline-offset: 4px; border-radius: 14px; }
.appyta .vara-bild { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden;
  background: var(--ios-grupp); margin-bottom: .55rem; transition: transform .15s ease; }
.appyta .vara:active .vara-bild { transform: scale(.97); }
.appyta .vara-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.appyta .vara-bild.tom { display: grid; place-items: center; color: var(--ios-gra); font-size: 2.4rem; font-weight: 300; }
.appyta .vara-slut { position: absolute; left: .55rem; top: .55rem; padding: .2rem .55rem; border-radius: 999px;
  background: rgba(0, 0, 0, .7); color: #fff; font-size: .72rem; font-weight: 600; }
.appyta .vara.slut { cursor: default; }
.appyta .vara.slut .vara-bild img { opacity: .45; }
.appyta .vara-namn { color: #fff; font-size: .98rem; font-weight: 600; line-height: 1.25; }
.appyta .vara-text { color: var(--ios-gra); font-size: .84rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.appyta .vara-pris { color: #fff; font-size: .95rem; margin-top: .15rem; }

/* Köprutan: ett ark som glider upp underifrån. */
.appark { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .6); }
.appark-ruta { width: 100%; background: var(--ios-grupp); border-radius: 14px 14px 0 0; display: grid; gap: .55rem;
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); animation: apparkupp .22s cubic-bezier(.2, .7, .3, 1); }
@keyframes apparkupp { from { transform: translateY(100%); } to { transform: none; } }
.appark-ruta h3 { margin: 0; font-size: 1.3rem; font-weight: 700; }
.appark-pris { margin: 0; font-size: 1.6rem; font-weight: 700; }
.appark-storlek-rubrik { margin: .5rem 0 0; font-size: .85rem; color: var(--ios-gra); }
.appark-storlek-rubrik.kravs { color: var(--ios-rod); }
.appark-storlekar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .4rem; }
.appark-storlekar .storlek { min-width: 3.2rem; padding: .7rem .9rem; border-radius: 10px; font: inherit; font-weight: 600;
  background: #2C2C2E; color: #fff; border: 1.5px solid transparent; cursor: pointer; }
.appark-storlekar .storlek[aria-pressed="true"] { border-color: var(--ios-bla); background: rgba(10, 132, 255, .18); }

/* ── Kännas som en app, inte en webbsida (Johnny 2026-10-25) ────────────────
   Ingen textmarkering, ingen förstoringslupp vid långt tryck, och ingen
   rullning i sidled eller gummibandsstuds. Fält man skriver i går fortfarande
   att markera — annars kan man inte rätta ett felskrivet nummer. */
html:has(body.appyta) { overscroll-behavior: none; overflow-x: hidden; }
body.appyta { overscroll-behavior: none; overflow-x: hidden; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.appyta input, body.appyta textarea { -webkit-user-select: text; user-select: text; }