/*
 * pef-calculator.css
 *
 * v6.7: Spår C (GUI-layout-och-delade-funktioner-spec_v6_3–v6.6,
 * avsnitt 13.10) är DevTools-bekräftat AVSKRIVEN för den här
 * kalkylatorn — ett <style>-block inbäddat i layoutens HTML-innehåll
 * visade sig alltid nå webbläsaren obehindrat, aktivt tillämpat.
 * Filen finns ändå kvar separat (bättre än 400+ rader CSS inline i
 * PHP-filen) men länkas in med en vanlig <link>-tagg, INTE via
 * wp_enqueue_style() — den tidigare enqueue-omläggningen är riven upp
 * igen eftersom motsvarande wp_enqueue_script()-variant för JS-filerna
 * sannolikt orsakade en separat CSV-import-regression (se avsnitt
 * 13.10.4 i spec_v6_7).
 *
 * Förutsätter calculator-base.css (CSS-variabler, grundlayout,
 * typsnitt) redan laddad separat, centralt i temat.
 *
 * v6.5/v6.7-tillägg: samtliga .tool-column-regler nedan med
 * flex-grow > 0 har fått ett explicit max-width (13.10.3), och
 * brytpunkten för PEF:s egna kolumnbredder sänktes från 820px till
 * 640px (13.10.5) för att matcha calculator-base.css:s tre
 * responsiva nivåer utan luckor.
 */

/* Scopad CSS för PEF-kalkylatorn, se Responsiv-design-spec-kalkylatorer.md avsnitt 3.5 */

/* Kort, diskret highlight vid klick på en punkt i grafen - se
   PEF-grafvisualisering-spec.md avsnitt 6.3. Inte en permanent
   färgändring, bara en visuell bekräftelse på att rätt rad hittades. */
.section-pef-calculator .pef-row-highlight {
	animation: pefRowHighlight 1.6s ease-out;
}
@keyframes pefRowHighlight {
	0%   { background-color: rgba(255, 213, 79, 0.55); }
	100% { background-color: transparent; }
}

.section-pef-calculator .pef-intro p:first-child { font-weight: 600; margin-bottom: 4px; }

/* .privacy-notice/.privacy-notice-clinical och .global-settings grund-CSS
   kommer nu från calculator-base.css (avsnitt 0.1), som laddas centralt en
   gång per sida - se GUI-layout-och-delade-funktioner-spec_v6.md avsnitt
   9.3 och PEF-kalkylator-spec v2 avsnitt 15.1. Bara PEF-specifika tillägg
   (kolumnproportionerna nedan) definieras här. */
.section-pef-calculator .global-settings-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px 14px;
}
/* Grid i stället för flex-wrap: garanterar exakt 4 respektive 3 fält per
   rad oavsett hur långa fältetiketterna är - flex-wrap bryter annars
   baserat på innehållets minsta bredd (t.ex. en lång etikett som
   "Referens-PEF (valfritt, L/min)"), vilket kunde tvinga fram ett fält
   för mycket ner på en egen rad. */
@media (min-width: 640px) {
	/* Ojämna kolumner: Personbästa/Referens-PEF får mer utrymme (längre
	   etiketter, t.ex. "Referens-PEF (valfritt, L/min)"), Morgon-/
	   Kvällsgräns är korta tidsfält och behöver mindre. */
	.section-pef-calculator .global-settings-row.row-4 { grid-template-columns: 1.3fr 1.3fr 0.8fr 0.8fr; }
	.section-pef-calculator .global-settings-row.row-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 480px) and (max-width: 639.98px) {
	.section-pef-calculator .global-settings-row.row-4,
	.section-pef-calculator .global-settings-row.row-3 { grid-template-columns: repeat(2, 1fr); }
}
.section-pef-calculator .global-settings-row label { min-width: 0; }

/* Morgon-/Kvällsgräns (input[type="time"]) saknar höjd annars: de ligger
   i .global-settings, inte .tool, så calculator-base.css:s ".tool
   input[type='time']"-regel (avsnitt 1) når dem inte - och den generiska
   44px-regeln i samma fil (avsnitt 6.5) listar bara text/date/number/
   select, inte time (native tidsfält byggs numera annars med
   .fhv-time-wrap, se GUI-spec v6 avsnitt 6.0/6.5). Utan denna regel
   renderas fälten i webbläsarens kortare default-höjd i stället för att
   matcha --row-h som Personbästa/Referens-PEF bredvid dem. */
.section-pef-calculator .setting-morning-cutoff,
.section-pef-calculator .setting-evening-cutoff {
	height: var(--row-h);
	min-height: var(--row-h);
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
	padding: 0 10px;
	border: 1px solid var(--border-strong);
	border-radius: 7px;
	font-family: inherit;
	background: #fff;
}

/* Radlayout: .tool/.tool-column/--row-h ärvs från calculator-base.css
   (avsnitt 1/2) - bara PEF:s egna kolumnbredder och radbrytningen mellan
   de två underraderna definieras här, se v2 avsnitt 15.3. Sex fält per
   rad överstiger GUI-layout-specens riktvärde (3-4 fält/rad), så raden
   delas i två underrader inom samma .tool-kort (samma mönster som redan
   löser motsvarande problem i Avancerad-vibrationskalkylator-spec_v5
   avsnitt 12): rad 1 = Datum/Klockslag/PEF, rad 2 = Bronkdilaterare/
   Dagtyp/Symtom-kommentar/Ta bort rad. En osynlig .tool-row-break
   (flex-basis: 100%) tvingar fram brytningen utan att kräva en egen
   wrapper-div runt varje underrad. */
.section-pef-calculator .tool.template { display: none; }
.section-pef-calculator .tool-row-break { flex-basis: 100%; height: 0; }
/* VIKTIGT: calculator-base.css sätter .tool { flex-wrap: nowrap } vid
   >=820px (avsnitt 2, för andra kalkylatorers enradiga fältuppsättning).
   PEF-kalkylatorns tvåradslayout (avsnitt 15.3) kräver flex-wrap: wrap
   för att .tool-row-break ska kunna tvinga fram radbrytningen - denna
   regel skriver uttryckligen över basens nowrap för just PEF-raderna. */
.section-pef-calculator .container-tools.pef .tool { flex-wrap: wrap; }
/*
	v6.7-fix: brytpunkten sänkt från 820px till 640px. calculator-base.css
	växlar .tool till radläge (flex-direction: row) redan vid 640px
	(flex-wrap: wrap upp till 819.98px, sedan nowrap från 820px och
	uppåt) — men dessa PEF-specifika kolumnbredder låg tidigare bara
	bakom 820px, vilket lämnade ett 640–819px-hål där .tool redan var i
	radläge men ingen av PEF:s kolumner hade någon breddregel alls (föll
	tillbaka på .tool-columns bas: ingen flex-basis, innehållsberoende
	bredd). Den riktiga sidans innehållskolumn (813px, avsnitt 13.3.1)
	ligger MITT I det hålet, vilket gjorde felet reproducerbart på en
	helt vanlig, icke-maximerad skrivbordswebbläsare — inte bara i smala
	DevTools-klämda vyer. Se GUI-layout-och-delade-funktioner-spec_v6_7,
	avsnitt 13.10.5.
*/
@media (min-width: 640px) {
	.section-pef-calculator .tool-column.date,
	.section-pef-calculator .tool-column.time { flex: 1 1 130px; max-width: 180px; }
	.section-pef-calculator .tool-column.pef-value { flex: 2 1 260px; max-width: 340px; }
	.section-pef-calculator .tool-column.bronchodilator,
	.section-pef-calculator .tool-column.day-type { flex: 1 1 150px; max-width: 200px; }
	.section-pef-calculator .tool-column.comment { flex: 2 1 200px; max-width: 320px; }
	.section-pef-calculator .container-tools.pef .row-icon { margin-inline-start: auto; align-self: flex-end; }
}

.visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.section-pef-calculator .pef-label-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }

.section-pef-calculator .pef-blows-wrap { display: flex; flex-direction: column; gap: 6px; }
.section-pef-calculator .pef-blows-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.section-pef-calculator .pef-blow-field { flex: 1 1 60px; max-width: 90px; }
.section-pef-calculator .pef-blow-field input { text-align: center; }

/* Klockslag: två sifferfält (timme/minut) i stället för en nativ
   <input type="time"> - se motivering vid updateMeasureTime() i
   pef-calc.js (native tidsfält tappar tyst hela värdet om användaren
   bara hinner skriva timmen, t.ex. "18:", innan fältet lämnas). */
/* Tidsfältet (.fhv-time-wrap) styling kommer nu från calculator-base.css
   avsnitt 6 - se v2 avsnitt 15.6 (bytt från lokalt namngiven
   .pef-time-wrap till den delade .fhv-time-wrap-klassen för konsekvens
   med resten av kalkylatorfamiljen). Ingen egen CSS behövs längre här. */

/* (i)-knapp: samma mönster som redan är verifierat i Vibrationskalkylatorns
   referensvy - en ren CSS-ritad kursiv "i" (::before), inget beroende av
   ett ikonteckensnitt (Material Symbols). Det var just avsaknaden av det
   teckensnittet som gjorde att den tidigare "info"-ikonen visades som
   fallback-text och blåste upp cirkeln. */
.section-pef-calculator .pef-info-wrap { position: relative; display: inline-flex; flex: 0 0 auto; vertical-align: middle; }
.section-pef-calculator .pef-info-btn {
	position: relative;
	width: 19px; height: 19px; flex: 0 0 auto;
	border-radius: 50%; border: 1px solid rgba(0,0,0,0.35);
	background: #fff; font-style: italic; font-family: Georgia, serif; font-size: 11.5px;
	color: rgba(0,0,0,0.6); display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0; line-height: 1;
}
.section-pef-calculator .pef-info-btn::before { content: "i"; }
/* Osynlig, förstorad träffyta (44x44, responsiv-specen 3.6) utan att göra
   själva ikonen visuellt stor. */
.section-pef-calculator .pef-info-btn::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.section-pef-calculator .pef-info-popover {
	display: none; position: absolute; z-index: 30; top: 24px; left: 0;
	width: 230px; max-width: 78vw; background: #fff; border: 1px solid rgba(0,0,0,0.12);
	border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.14); padding: 10px 12px;
	font-size: 12.5px; line-height: 1.5; color: rgba(0,0,0,0.65);
}
.section-pef-calculator .pef-info-popover.is-open { display: block; }

/* Grundläggande fältstorlekar (font-size 16px mot iOS-zoom, min-height
   44px, width 100%, samt .tool select/.tool input-höjden) ärvs nu från
   calculator-base.css avsnitt 1/6.5 - se v2 avsnitt 15.1. Bara PEF:s
   egna, inte redan täckta komponenter (info-popover, tidsfält m.m.)
   definieras i denna fil. */

/* Vita fält = användaren matar in, ljust grå fält = readonly/beräknat av
   appen. Denna färgkodning ärvs numera också från calculator-base.css
   avsnitt 1.1 (input[readonly]) - ingen egen regel behövs här. I denna
   kalkylator finns idag inga synliga readonly-inmatningsfält (bara ett
   dolt beräknat pefValue[]). */

.section-pef-calculator .csv-feedback { min-height: 1.2em; font-style: italic; font-size: 0.85rem; }

.section-pef-calculator .pef-csv-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	border: 2px dashed rgba(0,0,0,0.28);
	border-radius: 8px;
	padding: 18px 14px;
	margin: 10px 0 4px;
	cursor: pointer;
	color: rgba(0,0,0,0.65);
	font-size: 0.85rem;
	transition: border-color .15s, background-color .15s, color .15s;
}
.section-pef-calculator .pef-csv-dropzone:hover,
.section-pef-calculator .pef-csv-dropzone:focus-visible {
	border-color: #2a4d8f;
	outline: none;
}
.section-pef-calculator .pef-csv-dropzone.is-dragover {
	border-color: #2a4d8f;
	background: rgba(30, 100, 220, 0.06);
	color: #2a4d8f;
}
.section-pef-calculator .pef-csv-dropzone .m-icon { font-size: 22px; }
.section-pef-calculator .pef-csv-dropzone p { margin: 0; }

.section-pef-calculator .pef-calendar-strip { margin: 16px 0 8px; overflow-x: auto; }
.section-pef-calculator .pef-calendar-row { display: flex; gap: 2px; margin-bottom: 3px; }
.section-pef-calculator .calendar-cell {
	width: 14px; height: 14px; flex: 0 0 auto; border-radius: 2px; background: #eee;
}
.section-pef-calculator .pef-calendar-weekday .calendar-cell.is-weekend { background: #9aa5b1; }
.section-pef-calculator .pef-calendar-daytype .calendar-cell.is-work { background: #2768C7; }
.section-pef-calculator .pef-calendar-daytype .calendar-cell.is-off { background: #159947; }
/* Blandad dag (både arbete- och ledig-mätningar): diagonalt delad ruta */
.section-pef-calculator .pef-calendar-daytype .calendar-cell.is-mixed { background: linear-gradient(135deg, #2768C7 50%, #159947 50%); }
.section-pef-calculator .pef-calendar-daytype .calendar-cell.is-empty { background: transparent; }

.section-pef-calculator .pef-chart-container,
.section-pef-calculator .pef-variability-container {
	position: relative;
	height: 340px;
	margin: 16px 0;
	max-width: 100%;
}

/* Visas bara om Chart.js/grafritningen misslyckas (t.ex. CDN
   otillgängligt) - se try/catch runt renderPefChart()/
   renderVariabilityChart() i pef-calc.js. Utan detta fick ett
   grafmisslyckande bara en tom, förklaringslös vit yta. */
.section-pef-calculator .pef-chart-error {
	display: none;
	position: absolute; inset: 0;
	align-items: center; justify-content: center;
	text-align: center; padding: 24px;
	color: rgba(0,0,0,0.55); font-size: 0.9rem; font-style: italic;
}
.section-pef-calculator .pef-chart-error.visible { display: flex; }

/* Förklaring av PEF-grafens bakgrundsfärger (zon/arbetsdag/helg), se
   renderPefZoneLegend() i pef-calc.js. Egen, kompakt rad separat från
   Chart.js egen punkt-/linjelegend under grafen (som bara förklarar
   PEF/Symtom/Bronkdilaterare-punkterna) - annars hade nio blandade
   poster (4 punkter + 5 bakgrundsfärger) i en och samma legend blivit
   rörigt, särskilt på smala skärmar. */
.section-pef-calculator .pef-zone-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	justify-content: center;
	margin: -6px 0 16px;
	padding: 8px 10px;
	background: rgba(0,0,0,0.02);
	border-radius: 6px;
	font-size: 0.78rem;
	color: rgba(0,0,0,0.7);
}
.section-pef-calculator .pef-zone-legend:empty { display: none; }

/* Markörförklaring över veckgraferna (Ledig/Arbete/Kommentarer/Före/Efter),
   byggd av renderMarkerLegend() - samma utseende som zonförklaringen. */
.section-pef-calculator .pef-marker-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0 0 12px;
	font-size: 0.78rem;
	color: rgba(0,0,0,0.7);
}
.section-pef-calculator .pef-marker-legend:empty { display: none; }
.section-pef-calculator .pef-marker-legend .pef-zone-swatch {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.section-pef-calculator .pef-marker-legend .pef-marker-icon { flex: 0 0 auto; }
.section-pef-calculator .pef-zone-legend .pef-zone-swatch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.section-pef-calculator .pef-zone-legend .pef-zone-swatch-color {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	flex: 0 0 auto;
	display: inline-block;
}
/* Helg-swatchen är en grå ruta: helgen täcker hela dagens kolumn i graferna. */
.section-pef-calculator .pef-zone-legend .pef-zone-swatch-color.pef-zone-weekend {
	border: 1px solid rgba(0,0,0,0.12);
}
/* Mönster-swatchar: representerar zonernas diagonala canvas-mönster -
   återges här med en CSS repeating-linear-gradient som ger samma
   visuella intryck utan att behöva canvas. 28 % opacitet, matchande
   canvas-mönstrets rgba-alpha. Mittzonen ("Försämring", -45deg) lutar
   åt motsatt håll mot de yttre två (Bra kontroll/Varningsläge,
   pef-zone-pattern-reverse, 45deg) - samma riktningsskillnad som i
   grafen, se felrapport. */
.section-pef-calculator .pef-zone-legend .pef-zone-swatch-color.pef-zone-pattern {
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(180,140,0,0.28) 0, rgba(180,140,0,0.28) 1.5px,
		transparent 1.5px, transparent 5px
	);
	background-color: rgba(255,193,7,0.12);
	border: 1px solid rgba(180,140,0,0.3);
}
.section-pef-calculator .pef-zone-legend .pef-zone-swatch-color.pef-zone-pattern-good {
	background-image: repeating-linear-gradient(
		45deg,
		rgba(76,175,80,0.28) 0, rgba(76,175,80,0.28) 1.5px,
		transparent 1.5px, transparent 5px
	);
	background-color: rgba(76,175,80,0.08);
	border: 1px solid rgba(76,175,80,0.3);
}
.section-pef-calculator .pef-zone-legend .pef-zone-swatch-color.pef-zone-pattern-warning {
	background-image: repeating-linear-gradient(
		45deg,
		rgba(220,53,50,0.28) 0, rgba(220,53,50,0.28) 1.5px,
		transparent 1.5px, transparent 5px
	);
	background-color: rgba(220,53,50,0.08);
	border: 1px solid rgba(220,53,50,0.3);
}

.section-pef-calculator .pef-stat-panels {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 0;
}
@media (min-width: 768px) {
	.section-pef-calculator .pef-stat-panels { flex-direction: row; }
	.section-pef-calculator .pef-stat-panel { flex: 1 1 0; }
}
.section-pef-calculator .pef-stat-panel .pef-label-row h3 { margin: 0; }
.section-pef-calculator .pef-stat-panel .pef-label-row { margin-bottom: 2px; }
.section-pef-calculator .pef-stat-panel {
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 8px;
	padding: 12px 16px;
	background: rgba(0,0,0,0.02);
}
.section-pef-calculator .pef-stat-value { font-size: 1.3rem; font-weight: 600; margin: 4px 0; }
.section-pef-calculator .pef-stat-note { font-size: 0.82rem; opacity: 0.85; }
.section-pef-calculator .pef-stat-disclaimer { font-size: 0.82rem; opacity: 0.8; margin: 8px 0 16px; }

/* Utskrift/PDF: dölj interaktiva kontroller och den råa formulärvyn,
   visa i stället den upplästa rapporten (buildPrintReport() i
   pef-calc.js). Grafen, kalenderranden och resultatpanelerna (med sina
   (i)-förklaringar, nu alltid synliga i utskrift i stället för dolda
   bakom hover/klick) förblir synliga och kompletterar rapporten. */
.section-pef-calculator .pef-print-report { display: none; }
@media print {
	/* Webbläsare struntar som standard i CSS-bakgrundsfärger vid utskrift
	   (för att spara bläck/toner) om man inte uttryckligen ber om exakt
	   återgivning - ett välkänt, ofta förbisett utskriftsbeteende.
	   Bekräftat i testutskrift: zon-legendens färgrutor (bakgrundsfärg
	   satt via inline style, se renderPefZoneLegend() i pef-calc.js)
	   visade textetiketterna men inte själva färgrutorna. Detta gäller
	   ENDAST vanliga HTML-bakgrundsfärger - grafernas egna bakgrundszoner
	   (ritade som pixlar direkt på <canvas>, se dayBackgroundPlugin)
	   påverkas inte, de skrivs alltid ut som bilddata. */
	.section-pef-calculator,
	.section-pef-calculator * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		color-adjust: exact; /* äldre, icke-prefixad variant i vissa motorer */
	}
	.section-pef-calculator .row-icon,
	.section-pef-calculator .controls-row,
	.section-pef-calculator #printCalcResults,
	.section-pef-calculator .privacy-notice,
	.section-pef-calculator .lang-switcher,
	.section-pef-calculator .pef-intro,
	.section-pef-calculator .notes,
	.section-pef-calculator .global-settings,
	.section-pef-calculator .container-tools.pef,
	.section-pef-calculator .separator,
	.section-pef-calculator .pef-csv-dropzone,
	.section-pef-calculator .csv-feedback,
	.section-pef-calculator .pef-info-btn { display: none; }
	.section-pef-calculator .pef-chart-container,
	.section-pef-calculator .pef-variability-container {
		/* INGEN forcerad höjd här (tidigare 260px, mot skärmens 340px).
		   Två separata buggar i tidigare testrundor (legend som överlappar
		   nästa element, och senare hela grafens nedre del/legend/x-axel
		   avklippt) berodde båda på samma grundorsak: <canvas>-elementets
		   FAKTISKA pixelinnehåll ritas en gång, vid skärmstorleken, och
		   matchar då inte en container som tvingas till en annan höjd vid
		   utskrift om inte en omritning hinner ske i exakt rätt ögonblick
		   (chart.resize() i en beforeprint/matchMedia-lyssnare - se
		   pef-calc.js - vilket visat sig opålitligt i flera testmiljöer/
		   PDF-exportverktyg). Genom att behålla samma höjd i utskrift som
		   på skärmen uppstår aldrig den missmatchningen, oavsett om en
		   omritning faktiskt hinner köras eller ej. overflow:hidden ligger
		   kvar som ett sista skyddsnät mot framtida oförutsedda fall. */
		overflow: hidden;
	}
	.section-pef-calculator .pef-print-report { display: block; }
	/* Utan denna blir .pef-label-row (flex-rad) kvar i radläge även i
	   utskrift: popover-texten (nu display:block/position:static) hamnar
	   då som en flex-syskon-kolumn BREDVID rubriken i stället för under
	   den, och flyter ut över sidkanten - bekräftat i testutskrift
	   (ABC-score/Timepoint-rubrikerna blev sammanflätade med
	   förklaringstexten). display:block bryter ut flex-beteendet helt,
	   så rubrik och popover-text staplas normalt i stället. */
	.section-pef-calculator .pef-label-row,
	.section-pef-calculator .pef-info-wrap { display: block; }
	.section-pef-calculator .pef-info-popover {
		display: block; position: static;
		width: auto; max-width: none;
		background: none; border: none; box-shadow: none;
		padding: 2px 0 0; margin: 0 0 4px;
		font-size: 11px; color: rgba(0,0,0,0.7);
	}
}

.section-pef-calculator .pef-print-report h2 { font-size: 1.15rem; margin: 0 0 2px; }
.section-pef-calculator .pef-print-meta { font-size: 0.82rem; color: rgba(0,0,0,0.6); margin: 0 0 14px; }
.section-pef-calculator .pef-print-settings { border-collapse: collapse; margin: 0 0 16px; font-size: 0.85rem; }
.section-pef-calculator .pef-print-settings th { text-align: left; font-weight: 600; padding: 1px 10px 1px 0; }
.section-pef-calculator .pef-print-settings td { text-align: left; padding: 1px 24px 1px 0; }
.section-pef-calculator .pef-print-table {
	width: 100%;
	border-collapse: separate; /* INTE collapse - stör radbevarande (break-inside)
		vid sidbrytning i flera renderingsmotorer, bekräftat i testutskrift där en
		cells text delades mitt itu över en sidbrytning */
	border-spacing: 0;
	font-size: 0.82rem;
	margin-bottom: 16px;
}
.section-pef-calculator .pef-print-table th,
.section-pef-calculator .pef-print-table td {
	border-bottom: 1px solid rgba(0,0,0,0.3);
	border-right: 1px solid rgba(0,0,0,0.3);
	padding: 3px 7px;
	text-align: left;
}
.section-pef-calculator .pef-print-table th:first-child,
.section-pef-calculator .pef-print-table td:first-child { border-left: 1px solid rgba(0,0,0,0.3); }
.section-pef-calculator .pef-print-table thead th { border-top: 1px solid rgba(0,0,0,0.3); }
.section-pef-calculator .pef-print-table thead { display: table-header-group; } /* upprepa rubrikraden om tabellen delas över flera utskriftssidor */
/* Datum/Klockslag ska aldrig radbrytas inom en cell (t.ex. "2026-08-01"
   som två rader "2026-08-" + "01") - det var den faktiska orsaken till att
   en cell såg "avklippt" ut vid en sidbrytning i testutskrift, inte en
   verklig sidbrytning mitt i cellen. */
.section-pef-calculator .pef-print-table td:nth-child(1),
.section-pef-calculator .pef-print-table td:nth-child(2) { white-space: nowrap; }
/* break-inside/page-break-inside sätts på <tbody> (en per rad, se
   buildPrintReport() i pef-calc.js), INTE på <tr> direkt: Safaris
   utskrifts-/PDF-motor respekterar båda dessa egenskaper mycket
   opålitligt på <tr> (ett gammalt, väldokumenterat WebKit-problem) men
   hanterar dem betydligt pålitligare på <tbody>, som är en giltig
   fragmenteringsenhet - en <table> får innehålla flera <tbody>. */
.section-pef-calculator .pef-print-table tbody {
	break-inside: avoid;
	page-break-inside: avoid;
	display: table-row-group;
}
.section-pef-calculator .pef-print-notes h3 { font-size: 0.95rem; margin: 0 0 4px; }
.section-pef-calculator .pef-print-notes p { font-size: 0.85rem; white-space: pre-wrap; margin: 0 0 16px; }
.section-pef-calculator .pef-print-empty { font-style: italic; opacity: 0.75; }

/* ---------------------------------------------------------------------
   Veckografer (renderWeekCharts() i pef-calc.js): graf + tabell i linje.
   Tabellen är en CSS-grid med samma kolumnindelning som grafens
   kategoriaxel: etikettkolumnen är exakt lika bred som y-axeln (96px,
   satt via scales.y.afterFit i JS) och höger padding = chartens
   layout.padding.right (8px). Ändra inte ena utan den andra.
   --------------------------------------------------------------------- */
.section-pef-calculator .pef-week-block { margin: 20px 0 28px; }
.section-pef-calculator .pef-week-title,
.section-pef-calculator .pef-week-summary { break-after: avoid; page-break-after: avoid; }
/* Långa veckor delas av JS i flera delar (max 21 mätningar per del); en del bryts aldrig över sidgräns */
.section-pef-calculator .pef-week-scroll { break-inside: avoid; page-break-inside: avoid; margin-bottom: 10px; }
.section-pef-calculator .pef-week-title { margin: 0 0 2px; font-size: 1rem; }
.section-pef-calculator .pef-week-summary { margin: 0 0 6px; }
.section-pef-calculator .pef-week-scroll { overflow-x: auto; }
.section-pef-calculator .pef-week-inner { width: 100%; }
.section-pef-calculator .pef-week-canvas { position: relative; height: 240px; }
.section-pef-calculator .pef-week-table {
	display: grid; font-size: 12px; line-height: 1.25;
	border-top: 1px solid var(--line, #e1e4e8);
}
.section-pef-calculator .pef-wk-cell {
	display: flex; align-items: center; justify-content: center; text-align: center;
	min-width: 0; padding: 4px 2px; box-sizing: border-box;
	border-bottom: 1px solid var(--line, #e1e4e8);
	overflow-wrap: anywhere;
}
.section-pef-calculator .pef-wk-label {
	justify-content: flex-start; font-weight: 700; color: var(--muted, #5c6370);
	padding-left: 4px; text-align: left;
}
.section-pef-calculator .pef-wk-daystart { border-left: 1px solid rgba(0,0,0,0.35); }
.section-pef-calculator .pef-wk-dayhead { font-weight: 700; background: var(--bg-soft, #f6f7f9); }
.section-pef-calculator .pef-wk-time { color: var(--muted, #5c6370); font-size: 10px; white-space: nowrap; overflow-wrap: normal; letter-spacing: -0.2px; }
.section-pef-calculator .pef-wk-peak { font-weight: 700; color: #1565c0; white-space: nowrap; }
.section-pef-calculator .pef-wk-day { font-weight: 700; }
.section-pef-calculator .pef-wk-comment {
	/* Horisontell text (radbryts i den smala kolumnen). Cellen roteras inte:
	   en rotation skulle även flytta cellens kantlinje och därmed få
	   avgränsarna att hamna ur linje med övriga rader. */
	align-items: flex-start; justify-content: center;
	min-height: 32px; padding: 4px 2px;
	font-size: 10px; line-height: 1.2; text-align: center;
	overflow-wrap: anywhere; hyphens: auto;
}
[dir="rtl"] .section-pef-calculator .pef-week-inner { direction: ltr; } /* siffror/graf förblir LTR, se grundspec 9.6 */
@media print {
	.section-pef-calculator .pef-week-scroll { overflow: visible; }
	.section-pef-calculator .pef-week-inner { min-width: 0 !important; }
}

/* Knappar för att kopiera/ladda ner graf som bild (ej i utskrift) */
.section-pef-calculator .pef-chart-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.section-pef-calculator .pef-mini-btn {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
	border: 1px solid var(--line, #e1e4e8); background: #fff; border-radius: 8px;
	font-size: 13px; font-weight: 700; color: var(--ink, #232733); cursor: pointer;
}
.section-pef-calculator .pef-mini-btn:hover { border-color: var(--brand, #34398c); color: var(--brand, #34398c); }
.section-pef-calculator .pef-mini-btn.copied { background: var(--ok-bg, #eaf7ef); border-color: var(--ok, #2e9e5b); color: var(--ok, #2e9e5b); }
.section-pef-calculator .pef-mini-btn.pdf-error { background: var(--danger-bg, #fbe8e6); border-color: var(--danger, #c0392b); color: var(--danger, #c0392b); }
.section-pef-calculator .pef-mini-btn .m-icon { font-size: 18px; }
@media print { .section-pef-calculator .pef-chart-actions { display: none !important; } }

/* Hoppmeny + ankare (navigering vid många mätningar) */
.section-pef-calculator .pef-anchor { display: block; height: 0; scroll-margin-top: 80px; outline: none; }
.section-pef-calculator .pef-jump-nav {
	position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 9999;
	transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	display: flex; gap: 4px; justify-content: center; align-items: center;
	width: max-content; max-width: calc(100vw - 16px); padding: 4px;
	background: rgba(255,255,255,0.97); border: 1px solid var(--line, #e1e4e8); border-radius: 999px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.section-pef-calculator .pef-jump-nav.pef-jump-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .section-pef-calculator .pef-jump-nav { transition: none; } }
.section-pef-calculator .pef-top-actions { margin: 0 0 14px; }
.section-pef-calculator .pef-top-actions[hidden] { display: none; }
.section-pef-calculator .pef-jump-nav[hidden],
.section-pef-calculator .pef-jump-nav a[hidden],
.section-pef-calculator .pef-jump-results[hidden] { display: none; }
.section-pef-calculator .pef-jump-nav a {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 14px; border-radius: 999px;
	font-size: 13px; font-weight: 700; color: var(--ink, #232733); text-decoration: none; white-space: nowrap;
}
.section-pef-calculator .pef-jump-nav a:hover { background: var(--bg-soft, #f6f7f9); }
.section-pef-calculator .pef-jump-nav a.active { background: var(--brand, #34398c); color: #fff; }
.section-pef-calculator .pef-jump-nav a:focus-visible { outline: 2px solid var(--brand, #34398c); outline-offset: 2px; }
@media (max-width: 480px) { .section-pef-calculator .pef-jump-nav a { padding: 0 10px; font-size: 12.5px; } }
@media print { .section-pef-calculator .pef-jump-nav, .section-pef-calculator .pef-jump-results, .section-pef-calculator .pef-top-actions { display: none !important; } }


/* v29: huvudgrafen kan skrolla horisontellt när det finns många dagar. */
.section-pef-calculator .pef-chart-toolbar { display: flex; justify-content: flex-end; margin: 8px 0 -8px; }
.section-pef-calculator .pef-chart-toolbar[hidden], .section-pef-calculator .pef-chart-toolbar:empty { display: none; }
.section-pef-calculator .pef-chart-container { height: auto; }
.section-pef-calculator .pef-chart-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.section-pef-calculator .pef-chart-inner { position: relative; height: 340px; }
.section-pef-calculator .pef-chart-container .pef-chart-inner canvas { max-width: none; }
/* Kopia av y-axeln som ligger kvar medan grafen rullas (ritas av pefSyncYOverlay) */
.section-pef-calculator #pefYOverlay { position: absolute; display: none; pointer-events: none; background: #fff; }
.section-pef-calculator .pef-main-marker-legend { justify-content: center; margin: -6px 0 8px; }
@media print {
	.section-pef-calculator .pef-chart-toolbar { display: none !important; }
	.section-pef-calculator .pef-chart-scroll { overflow: visible; }
	.section-pef-calculator .pef-chart-inner { min-width: 0 !important; }
	.section-pef-calculator #pefYOverlay { display: none !important; }
}

/* v30: vid mycket data skrivs PEF-grafen (med kalenderrand och förklaringar) ut på en
   egen liggande A4-sida; övriga sidor förblir stående. Klassen sätts av
   pefMainChartLayout() i pef-calc.js. Named pages ("page") stöds av Chrome/Edge,
   Firefox och Safari 18+; äldre webbläsare skriver ut grafen stående som tidigare. */
@page pef-landscape { size: A4 landscape; margin: 10mm; }
@media print {
	.section-pef-calculator .pef-chart-print.pef-print-landscape {
		page: pef-landscape;
		break-before: page; page-break-before: always;
		break-after: page; page-break-after: always;
	}
	.section-pef-calculator .pef-chart-print.pef-print-landscape .pef-chart-inner { height: 430px; }
}