/* 31 jul 2026 — kopplingen tillbaka till pebel.app, plus inbäddningsläget. Kalkylatorn är en statisk sida i public/, alltså INTE en Next-route. Den får därför varken sajthedern, bottenflikarna eller desktop-docken som resten av webbappen ritar. I telefonappen (Expo-skalet) betyder det att en spelare som tryckt på "Card calculator" står på en sida helt utan flikrad — enda vägen ut är systemets bakåtsvep, och i appen finns inget synligt sådant. Därför en uttrycklig länk tillbaka. Den ligger i en EGEN fil i stället för i main.css, så att kalkylatorns ursprungliga stilmall kan bytas rakt av mot en nyare version från utvecklaren utan att den här raden går förlorad. Samma sak gäller inbäddningsreglerna längst ned: byts main.css ut ska de överleva. */ /* ---------- tillbakalänken ---------- */ /* Selektorn var tidigare `.topbar .pebel-back`. Länken bor inte längre i topbaren (se kommentaren i index.html), så prefixet är borta. */ .pebel-backbar { display: flex; justify-content: flex-end; padding: 8px 14px 0; } .pebel-back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--panel-line); background: rgba(255, 255, 255, .04); color: var(--muted); font-size: .74rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .15s ease, border-color .15s ease; } .pebel-back:hover { color: var(--accent); border-color: rgba(244, 169, 60, .45); } .pebel-back .pebel-back-mark { height: 15px; width: auto; display: block; } /* På smal telefon krymper länken till bara märket + pilen. Etiketten är det som tar bredd, och pilen ensam är begriplig. */ @media (max-width: 720px) { .pebel-backbar { padding: 6px 10px 0; } .pebel-back { padding: 6px 9px; font-size: .7rem; } .pebel-back .pebel-back-label { display: none; } } /* ============================================================================ INBÄDDAT LÄGE — [data-embed] på ============================================================================ Rohan, 31 jul: «baka in appen i sidan, mycket deadspace där nere - så att man inte blir låst i appen utan headern footern osv är kvar.» Sidan ligger då i en iframe på pebel.app/card-calculator, och pebel.app ritar sin riktiga header, flikrad och sidfot runt den. Flaggan sätts av ett litet inline-skript i (se index.html) innan första målningen. Reglerna nedan gör tre saker, och alla tre är nödvändiga: 1) Bort med kalkylatorns EGNA ramverk — topbar och tillbakalänk. Annars står två headers på varandra och tillbakalänken pekar till en sida användaren redan står på. 2) Bort med all höjd som mäts i vh/dvh. main.css sätter body{min-height:100vh} och .view{min-height:calc(100vh - 56px)}. I en iframe vars höjd sätts utifrån efter innehållets höjd blir det cirkulärt — och det är exakt den cirkeln som blev Rohans deadspace: iframen ärvde en skärmhöjd som inte hade med innehållet att göra. Här nollas de. 3) Genomskinlig bakgrund. Iframen ska inte rita en egen mörk platta ovanpå sidans; ramen runt om äger bakgrunden. ============================================================================ */ [data-embed] .topbar, [data-embed] .pebel-backbar, [data-embed] .foot { display: none !important; } [data-embed], [data-embed] body { min-height: 0; height: auto; overflow-x: hidden; } /* Bakgrunden nollas HELT. main.css lägger tre lager på body: två radiella glow-gradienter (grönt uppe i mitten, gult uppe till höger) och en linjär botten. Bottenfärgen --bg0 är #0d141b, alltså exakt samma som webbappens --c-bg, så DEN hade inte synts. Glowen hade däremot ritat en ljus fläck i överkanten av ramen med en tydlig kant där iframen slutar. `none` på background-image räcker inte ensamt eftersom kortformen också sätter background-color och -attachment. */ [data-embed] body { background: none transparent; } [data-embed] .view { min-height: 0; } /* Fristående DESKTOP behåller topbaren: den är enda vägen till My Hands och Account när sidan står för sig själv på cardplayer.pebel.app. På telefon döljer mobile.css den i analysvyn. Ingen regel behövs här för det fallet — raden står bara som anteckning så att ingen "städar" bort topbaren globalt. */ /* ============================================================================ FRISTÅENDE DESKTOP: EN SKÄRM, INGEN RULLNING ============================================================================ Rohan, 31 jul, sist av allt: «remove the scroll, it should be 1 page.» Analysvyn är helt BREDDSTYRD (se mobile.css): kortlek, bord och equity-remsa får sin höjd ur sin bredd, och totalen ligger stabilt på ca 1,79 gånger bredden. Vill man att en given HÖJD ska räcka sätter man alltså BREDDEN till den höjden delad med kvoten. 1,86 som tak i stället för uppmätta 1,79, som marginal; 96px är topbaren (56) plus tillbakalänken och luften runt den. VARFÖR HÄR OCH INTE I mobile.css: den filen har en uttrycklig regel om att aldrig röra vh/dvh/cqb, eftersom den läses även i iframen — och där sätts höjden UTIFRÅN av calc-frame.tsx, så en höjdmätning inne i dokumentet blir cirkulär. Regeln nedan är därför både placerad utanför den filen OCH uttryckligen undantagen för inbäddat läge via html:not([data-embed]). Inbäddat löses samma sak på pebel.app-sidan, i app/cardplayer/page.tsx. Bara från 721px och uppåt: telefonen rullar precis som förut, och den vyn har Rohan redan godkänt ("phone is better"). ============================================================================ */ @media (min-width: 721px) { html:not([data-embed]) body:has(#view-analyze.view-active) { overflow: hidden; } html:not([data-embed]) #view-analyze .main { max-width: min(460px, calc((100vh - 96px) / 1.86)); } }