/* Fyndmotorn – ett enda stilark (docs/MOBILDESIGN_2026-10-10.md).
   Ersätter style.css, v7.css, usability.css, ui5b.css och ui5c.css.
   Ljust läge på hela sajten, en accentfärg som bara används för pris, hörn på 6–8 px,
   inga färgövergångar, sparsamma skuggor. Färger är tokens i två lager: råa värden
   (--raw-*) och betydelse (--bg, --text, --price ...). Komponenterna använder bara
   betydelsenamnen, så ett mörkt läge senare är ett nytt värde för samma namn.
   Text är minst 14 px (16 px i inmatningsfält), klickytor minst 24 px och 44 px för
   huvudknappar. Typsnitten ligger på sajten själv (assets/fonts, SIL OFL 1.1). */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
 color-scheme:light;
 /* Lager 1: råa värden. Bara lager 2 hänvisar hit. */
 --raw-white:#FFFFFF;--raw-paper:#FAFAF8;--raw-gray-50:#F2F3F5;--raw-gray-100:#E8EAED;--raw-gray-200:#D3D7DD;
 --raw-gray-500:#6B7482;--raw-gray-600:#4F5865;--raw-gray-700:#363E4B;--raw-gray-900:#131A25;
 --raw-amber-50:#FFF1E0;--raw-amber-700:#A84300;--raw-amber-900:#7A3000;
 --raw-green-50:#E6F4EC;--raw-green-700:#12683D;
 --raw-red-50:#FCEBEA;--raw-red-700:#B3261E;
 --raw-yellow-50:#FFF4D6;--raw-brown-700:#7C4A00;
 --raw-blue-700:#0A58CA;
 /* Mörkt läge, lager 1: råa värden. Lager 2 nedan pekar om samma betydelsenamn hit. */
 --raw-dk-bg:#12161C;--raw-dk-surface:#1A2029;--raw-dk-quiet:#232B36;--raw-dk-line:#323B48;--raw-dk-line-strong:#8B95A4;
 --raw-dk-text:#ECEFF3;--raw-dk-muted:#AAB3C0;--raw-dk-action-hover:#C9D0DA;
 --raw-dk-amber:#FFB26B;--raw-dk-amber-strong:#FFC994;--raw-dk-amber-tint:#3A2610;
 --raw-dk-green:#74D6A0;--raw-dk-green-tint:#14301F;--raw-dk-brown:#F3C46E;--raw-dk-brown-tint:#33270F;
 --raw-dk-red:#FF918A;--raw-dk-red-tint:#3C1A18;--raw-dk-blue:#8DBBFF;--raw-dk-badge:#2B3340;--raw-dk-badge-text:#D0D6DF;
 /* Lager 2: betydelse. */
 --bg:var(--raw-paper);--surface:var(--raw-white);--surface-quiet:var(--raw-gray-50);
 --line:var(--raw-gray-200);--line-strong:var(--raw-gray-500);
 --text:var(--raw-gray-900);--text-muted:var(--raw-gray-600);
 --action:var(--raw-gray-900);--action-text:var(--raw-white);--action-hover:var(--raw-gray-700);
 --price:var(--raw-amber-700);--price-strong:var(--raw-amber-900);--price-tint:var(--raw-amber-50);
 --ok:var(--raw-green-700);--ok-tint:var(--raw-green-50);
 --warn:var(--raw-brown-700);--warn-tint:var(--raw-yellow-50);
 --danger:var(--raw-red-700);--danger-tint:var(--raw-red-50);
 --focus:var(--raw-blue-700);
 --badge-bg:var(--raw-gray-100);--badge-text:var(--raw-gray-700);
 --tile:var(--raw-white);
 --radius-s:6px;--radius-m:8px;
 --shadow-sheet:0 -2px 12px rgba(19,26,37,.14);
 --font-text:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
 --font-head:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
 --wrap:1100px;--gutter:16px;
}
/* Mörkt läge: följer telefonens inställning ("Auto") eller valet i menyn ("Ljust" / "Mörkt", sparat på enheten). */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
 --bg:var(--raw-dk-bg);--surface:var(--raw-dk-surface);--surface-quiet:var(--raw-dk-quiet);
 --line:var(--raw-dk-line);--line-strong:var(--raw-dk-line-strong);
 --text:var(--raw-dk-text);--text-muted:var(--raw-dk-muted);
 --action:var(--raw-dk-text);--action-text:var(--raw-dk-bg);--action-hover:var(--raw-dk-action-hover);
 --price:var(--raw-dk-amber);--price-strong:var(--raw-dk-amber-strong);--price-tint:var(--raw-dk-amber-tint);
 --ok:var(--raw-dk-green);--ok-tint:var(--raw-dk-green-tint);
 --warn:var(--raw-dk-brown);--warn-tint:var(--raw-dk-brown-tint);
 --danger:var(--raw-dk-red);--danger-tint:var(--raw-dk-red-tint);
 --focus:var(--raw-dk-blue);
 --badge-bg:var(--raw-dk-badge);--badge-text:var(--raw-dk-badge-text);
 --tile:var(--raw-white);
 --shadow-sheet:0 -2px 12px rgba(0,0,0,.55);
 color-scheme:dark;
}}
:root[data-theme=dark]{
 --bg:var(--raw-dk-bg);--surface:var(--raw-dk-surface);--surface-quiet:var(--raw-dk-quiet);
 --line:var(--raw-dk-line);--line-strong:var(--raw-dk-line-strong);
 --text:var(--raw-dk-text);--text-muted:var(--raw-dk-muted);
 --action:var(--raw-dk-text);--action-text:var(--raw-dk-bg);--action-hover:var(--raw-dk-action-hover);
 --price:var(--raw-dk-amber);--price-strong:var(--raw-dk-amber-strong);--price-tint:var(--raw-dk-amber-tint);
 --ok:var(--raw-dk-green);--ok-tint:var(--raw-dk-green-tint);
 --warn:var(--raw-dk-brown);--warn-tint:var(--raw-dk-brown-tint);
 --danger:var(--raw-dk-red);--danger-tint:var(--raw-dk-red-tint);
 --focus:var(--raw-dk-blue);
 --badge-bg:var(--raw-dk-badge);--badge-text:var(--raw-dk-badge-text);
 --tile:var(--raw-white);
 --shadow-sheet:0 -2px 12px rgba(0,0,0,.55);
 color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:12px;scroll-padding-bottom:88px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.5 var(--font-text);font-variant-numeric:tabular-nums}
p,li,dd,dt,h1,h2,h3,a,summary,legend,label,small,span{overflow-wrap:anywhere}
.num,.rc-amount,.wordmark-text,.beta{overflow-wrap:normal}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{opacity:.55;cursor:default}
a,button,summary,select,input{touch-action:manipulation}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip{position:absolute;left:8px;top:-100px;z-index:60;background:var(--surface);color:var(--text);padding:12px 16px;border:2px solid var(--text);border-radius:var(--radius-m)}
.skip:focus{top:8px}
.site-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
/* Siffror och priser bryts aldrig. */
.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.mode-banner{background:var(--text);color:var(--surface);text-align:center;font-size:0.875rem;padding:6px 12px}

/* Rubriker */
h1,h2,h3{font-family:var(--font-head);font-weight:700;letter-spacing:-.01em;line-height:1.2}
h2{font-size:1.375rem}
h3{font-size:1.125rem}

/* Knappar och fält */
input,select,textarea{width:100%;min-height:44px;padding:8px 12px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius-s);font-size:1rem;line-height:1.3}
textarea{resize:vertical}
input[type=search]{-webkit-appearance:none;appearance:none;border-radius:var(--radius-s)}
select{appearance:auto}
input[type=checkbox],input[type=radio]{width:24px;height:24px;min-height:0;padding:0;accent-color:var(--action);flex:none}
::placeholder{color:var(--text-muted);opacity:1}
label{display:flex;flex-direction:column;gap:4px;font-size:0.875rem;font-weight:600}
.primary,.button-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;background:var(--action);color:var(--action-text);border-radius:var(--radius-m);font-weight:600;font-size:1rem;text-decoration:none}
.primary:hover{background:var(--action-hover)}
.subtle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius-m);font-size:0.9375rem;font-weight:600;color:var(--text)}
.subtle:hover{background:var(--surface-quiet)}
.subtle[aria-pressed=true]{background:var(--surface-quiet);border-color:var(--text)}
.text-button{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:0.9375rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--text)}
.error{color:var(--danger);font-weight:600;font-size:0.9375rem;margin-top:8px}
.field-hint{font-size:0.875rem;color:var(--text-muted);margin-top:6px}

/* Sidhuvud: en rad */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:20}
.header-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-height:56px;padding-block:6px}
.wordmark{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--text);min-width:0}
.wordmark-icon{display:inline-flex;flex:none}
.wordmark-icon img{width:32px;height:32px;display:block}
.wordmark-text{font:700 1.25rem/1 var(--font-head);letter-spacing:-.01em;white-space:nowrap}
.beta{flex:none;font:600 0.875rem/1 var(--font-text);padding:4px 6px;border-radius:var(--radius-s);background:var(--badge-bg);color:var(--badge-text)}
.header-tools{margin-left:auto;display:flex;gap:6px}
.icon-button,.menu-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 12px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius-m);font-weight:600;font-size:0.9375rem;color:var(--text);list-style:none;cursor:pointer;white-space:nowrap}
.menu-button::-webkit-details-marker{display:none}
.mobile-only{display:inline-flex}
.main-nav,.menu-panel{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--surface);border-bottom:1px solid var(--line-strong);padding:6px var(--gutter) 12px;flex-direction:column;box-shadow:var(--shadow-sheet)}
.main-nav.open,.menu[open] .menu-panel{display:flex}
.nav-link{display:flex;align-items:center;gap:0;min-height:48px;padding:0 4px;font:600 1rem/1.2 var(--font-text);text-decoration:none;color:var(--text);background:none;border:0;border-top:1px solid var(--line);text-align:left;width:100%}
.nav-link:first-child{border-top:0}
.nav-link:hover,.nav-link[aria-pressed=true]{text-decoration:underline}
.menu{margin-left:auto}
.page-nav{display:none}
@media (min-width:761px){
 .mobile-only,.menu{display:none}
 .main-nav,.page-nav{display:flex;position:static;flex-direction:row;gap:4px;margin-left:auto;padding:0;border:0;box-shadow:none;background:none}
 .nav-link{width:auto;border:0;padding:0 12px;border-radius:var(--radius-s)}
 .header-tools{display:none}
}
@media (max-width:400px){.wordmark-text{font-size:1.125rem}.icon-button,.menu-button{padding:0 8px}.header-tools{gap:4px}}
@media (max-width:339px){.beta{display:none}.rc-more{flex-basis:7rem}}

/* Startvy: kort hero, sökfält först */
.hero{background:var(--surface);border-bottom:1px solid var(--line);padding:10px 0 12px}
.hero-line{font-size:clamp(1rem,4.6vw,1.25rem);line-height:1.5rem;font-weight:700;margin-bottom:8px}
.searchbar{display:flex;gap:8px;position:relative}
.search-field{position:relative;flex:1 1 auto;min-width:0}
.search-field svg{position:absolute;left:12px;top:14px;color:var(--text-muted);pointer-events:none}
.search-field input{min-height:48px;padding-left:40px;border-color:var(--text);border-width:2px;font-size:1rem}
.search-submit{flex:none;min-width:80px}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:25;background:var(--surface);border:1.5px solid var(--text);border-radius:var(--radius-m);overflow:hidden;box-shadow:var(--shadow-sheet)}
.suggest li{min-height:44px;display:flex;align-items:center;padding:0 14px;font-size:1rem;cursor:pointer;border-top:1px solid var(--line)}
.suggest li:first-child{border-top:0}
.suggest li[aria-selected=true],.suggest li:hover{background:var(--surface-quiet);font-weight:600}
.quick{display:flex;gap:8px;overflow-x:auto;scroll-padding-inline:var(--gutter);margin:10px calc(var(--gutter)*-1) 0;padding:2px var(--gutter);min-height:48px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.quick::-webkit-scrollbar{display:none}
#examples{display:contents}
.example-button{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius-s);font-size:0.9375rem;font-weight:600;white-space:nowrap;scroll-snap-align:start;color:var(--text)}
.example-button:hover{background:var(--surface-quiet)}
.status-line{font-size:0.875rem;color:var(--text-muted);min-height:42px;margin-top:6px;display:flex;flex-wrap:wrap;gap:0 6px;align-content:flex-start}
.status-line b{color:var(--text);font-weight:700}
.page-search{padding-block:10px}
#ov-updated{flex-basis:100%}

/* Startsidans sektioner */
.home-section{padding:20px 0 4px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.section-head-text{display:grid;gap:2px}
.section-sub{font-size:0.875rem;color:var(--text-muted)}
.section-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:0.9375rem;text-decoration:underline;text-underline-offset:3px;color:var(--text)}
/* The tile grid reserves its height before the counts arrive, so nothing below it moves when it fills (CLS). */
.categories5{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:8px;min-height:35rem;align-content:start}
.cat-tile{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);text-decoration:none;color:var(--text);min-width:0}
.cat-tile:hover{border-color:var(--text)}
.cat-icon{flex:none;width:36px;height:36px;display:grid;place-items:center;background:var(--surface-quiet);border-radius:var(--radius-s)}
.cat-text{display:grid;min-width:0}
.cat-name{font-weight:600;font-size:0.9375rem;line-height:1.2}
.cat-count{font-size:0.875rem;color:var(--text-muted)}
.card-grid{display:grid;gap:8px}
.start-cards>:nth-child(n+4){display:none}
.needs5{display:grid;gap:8px}
.need5{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);min-height:44px;width:100%}
.need5:hover{border-color:var(--text)}
.need5-icon{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--surface-quiet);border-radius:var(--radius-s)}
.need5-text{display:grid;gap:2px;min-width:0}
.need5-text b{font-size:1rem}
.need5-text span{font-size:0.875rem;color:var(--text-muted)}
.promise{margin-top:24px;background:var(--surface);border-block:1px solid var(--line)}
.promise-grid{display:grid;gap:16px;padding-block:20px}
.promise-item{display:grid;gap:2px}
.promise-item h3{font-family:var(--font-text);font-size:1rem;font-weight:700}
.promise-item p{font-size:0.875rem;color:var(--text-muted)}
body[data-view=overview] #results-section{display:none}
body[data-view=search] .overview-only,body[data-view=search] .hero-line{display:none}
body[data-view=search] .quick,body[data-view=search] .status-line{display:none}
body[data-view=search] .hero{padding:10px 0}

/* Resultatvy */
#results-section{padding:10px 0 8px}
.results-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.filter-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:var(--surface);border:2px solid var(--text);border-radius:var(--radius-m);font-weight:700;font-size:1rem;color:var(--text)}
.filter-button svg{flex:none}
#result-count{font-weight:700;font-size:1rem;min-height:24px}
.applied{display:flex;align-items:center;gap:8px;margin-top:8px}
.chips{display:flex;gap:8px;overflow-x:auto;flex:1 1 auto;min-width:0;padding-block:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px 0 12px;background:var(--surface);border:1.5px solid var(--text);border-radius:var(--radius-s);font-size:0.875rem;font-weight:600;white-space:nowrap;color:var(--text)}
.chip .x{display:inline-grid;place-items:center;width:28px;height:28px;font-size:1rem;line-height:1}
.applied .text-button{flex:none}
.search-actions{display:flex;gap:8px;margin-top:8px}
.search-actions .subtle{flex:1 1 0;min-height:44px}
#result-meta{font-size:0.875rem;color:var(--text-muted);margin-top:8px}
#result-meta:empty{display:none}
.natural-note{display:grid;gap:6px;margin-top:8px;font-size:0.875rem}
.natural-understood,.natural-unsupported{padding:8px 10px;border-radius:var(--radius-s)}
.natural-understood{background:var(--surface-quiet);color:var(--text)}
.natural-chip{display:inline-block;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-s);padding:2px 8px;margin:4px 6px 0 0;font-weight:600}
.natural-unsupported{background:var(--danger-tint);color:var(--danger)}
.natural-unsupported p{margin-top:4px}
.results{display:grid;gap:8px;margin-top:10px}
.empty{border:1.5px dashed var(--line-strong);border-radius:var(--radius-m);padding:24px 16px;text-align:center;display:grid;gap:10px;justify-items:center;background:var(--surface)}
.empty h3{font-size:1.25rem}
.empty p{font-size:0.9375rem;color:var(--text-muted);max-width:520px}
.skeleton{height:190px;border-radius:var(--radius-m);background:var(--line);animation:pulse 1.4s ease-in-out infinite alternate}
@keyframes pulse{to{opacity:.45}}
.pagination{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:16px 0 8px}
.pagination span{font-size:0.875rem;color:var(--text-muted)}
.pagination .subtle{min-width:120px}

/* Annonskort: samma uppgifter i samma ordning, cirka 190 px högt på 390 px bredd */
.card.rc{display:grid;gap:3px;padding:7px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);min-width:0;position:relative}
.rc-head{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:start}
.rc-icon{width:48px;height:48px;display:grid;place-items:center;background:var(--surface-quiet);border-radius:var(--radius-s);color:var(--text)}
.rc-title{font:600 1rem/1.25rem var(--font-text);letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;min-width:0;padding-top:2px;color:var(--text)}
.rc-save{width:44px;height:44px;margin:-2px -6px 0 0;display:grid;place-items:center;color:var(--text-muted);border-radius:var(--radius-m)}
.rc-save:hover{color:var(--text)}
.rc-save[aria-pressed=true]{color:var(--danger)}
.rc-save[aria-pressed=true] svg path{fill:currentColor}
.rc-pricing{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 8px}
.rc-price,.rc-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0}
.rc-label{font-size:0.875rem;line-height:1.625rem;color:var(--text-muted);white-space:nowrap}
.rc-amount{font:700 1.25rem/1.625rem var(--font-text);color:var(--price);font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-total{text-align:right}
.rc-total .rc-amount{font-size:1rem;color:var(--text)}
.rc-missing{font:600 0.9375rem/1.625rem var(--font-text);color:var(--text-muted)}
.rc-facts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px;font-size:0.875rem;line-height:1.125rem}
.rc-meta{color:var(--text)}
.rc-meta.risk{color:var(--danger);font-weight:600}
.rc-checked{color:var(--text-muted)}
.rc-checked.stale{color:var(--warn);font-weight:600}
.rc-ends{font-size:0.875rem;line-height:1.125rem;color:var(--text)}
.rc-clock{font-weight:600}
.rc-ends.none{color:var(--text-muted)}
.rc-ends.none .rc-clock{font-weight:400}
.rc-full{overflow-wrap:anywhere}
.rc-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:2px}
.rc-cta{flex:1 1 9rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;background:var(--action);color:var(--action-text);border-radius:var(--radius-m);font-size:1rem;font-weight:600;text-decoration:none;white-space:nowrap}
.rc-cta:hover{background:var(--action-hover);color:var(--action-text)}
.rc-no-link{flex:1 1 150px;min-height:44px;display:flex;align-items:center;font-size:0.9375rem;color:var(--text-muted)}
.rc-more{flex:0 1 8rem;min-width:0}
@media (min-width:380px){.rc-more{flex-basis:9.8rem}}
.rc-more summary{display:flex;justify-content:center;align-items:center;gap:6px;min-height:44px;width:100%;padding:0 10px;border:1.5px solid var(--line-strong);border-radius:var(--radius-m);font-size:0.875rem;line-height:1.15;font-weight:600;list-style:none;cursor:pointer;background:var(--surface)}
.rc-more summary::-webkit-details-marker{display:none}
.rc-more summary::after{content:'';flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.rc-more[open]{flex:1 1 100%}
.rc-more[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.rc-more-body{display:grid;gap:8px;padding:10px 2px 2px;font-size:0.875rem}
.rc-note{color:var(--text)}
.rc-specs,.rc-trust{display:flex;flex-wrap:wrap;gap:6px}
.rc-specs li,.rc-trust li{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-s);background:var(--surface-quiet);font-weight:600;font-size:0.875rem}
.rc-trust li{background:var(--ok-tint);color:var(--ok)}
.rc-seller{color:var(--text)}
.rc-seller-note,.rc-alt{color:var(--text-muted)}
.rc-detail{justify-self:start;min-height:44px;padding:0 14px;border:1.5px solid var(--text);border-radius:var(--radius-m);font-weight:600;font-size:0.9375rem;background:var(--surface)}
.rc-ad{font-size:0.875rem;color:var(--text-muted)}
.price-total{padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:var(--radius-m);line-height:1.5;font-weight:600;font-size:1.0625rem;margin:8px 0}
.price-total.complete{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.price-total.incomplete{background:var(--surface-quiet);color:var(--text)}
.price-total .origin{display:block;font-weight:400;font-size:0.875rem;margin-top:4px}
.product-card{padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);display:grid;gap:6px}
.product-count{font-size:0.875rem;color:var(--text-muted)}
.product-open{background:var(--action);color:var(--action-text);min-height:44px;border-radius:var(--radius-m);font-weight:600;padding:0 14px}
.card-source,.price-type{font-size:0.875rem;color:var(--text-muted)}
.price{font:700 1.375rem/1.625rem var(--font-text);color:var(--price)}

/* Dialoger och filterpanelen */
dialog{width:min(720px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--radius-m);background:var(--surface);color:var(--text);overflow:hidden;box-shadow:var(--shadow-sheet)}
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:rgba(19,26,37,.55)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--line);flex:none;background:var(--surface)}
.dialog-head span,.dialog-head h2{font:700 1.125rem/1.2 var(--font-head)}
.close-button{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--line-strong);border-radius:var(--radius-m);font-size:1.5rem;line-height:1;flex:none}
dialog>h2,dialog>p,dialog>#info-content,dialog>form,dialog>#detail-content,dialog>.sheet-form{padding-inline:16px}
dialog>h2{margin-top:12px;font-size:1.375rem}
dialog>p,#info-content p{margin:10px 0;font-size:1rem}
dialog>#detail-content,dialog>#info-content,dialog>form{overflow:auto;padding-bottom:16px;min-height:0;flex:1 1 auto}
dialog form{display:grid;gap:14px;align-content:start;padding-top:8px}
.feedback-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:0.875rem}
#detail-content h2{font-size:1.375rem;margin:12px 0 8px}
.detail-group{margin:12px 0;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m)}
.detail-group h3{font-size:1.125rem;margin-bottom:8px}
.detail-data{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.detail-data div{background:var(--surface-quiet);padding:8px 10px;border-radius:var(--radius-s)}
.detail-data dt{font-size:0.875rem;color:var(--text-muted)}
.detail-data dd{margin:2px 0 0;font-weight:600;overflow-wrap:anywhere}
.detail-missing{color:var(--text-muted)}
.original-description{white-space:pre-wrap;overflow-wrap:anywhere;font-size:0.9375rem;background:var(--surface-quiet);padding:12px;border-radius:var(--radius-s);max-height:320px;overflow:auto}
.detail-illustration{display:flex;align-items:center;gap:12px;margin-top:8px}
.detail-illustration img{width:48px;height:48px;object-fit:contain}
.illustration-label{font-size:0.875rem;color:var(--text-muted)}
.term-button{min-height:44px;padding:0 6px;font-size:0.9375rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.glossary dt{font-weight:700;margin-top:12px}.glossary dd{margin:0}
.card-updated,.freshness{font-size:0.875rem;color:var(--text-muted);margin:8px 0}
.freshness.stale{color:var(--warn);font-weight:600}
.seller-link{display:inline-flex;flex-direction:column;gap:2px}
.ad-label{font-size:0.875rem;color:var(--text-muted)}
.go-button{margin-top:8px}
.sheet{width:min(560px,calc(100vw - 24px))}
.sheet-form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;padding:0!important}
.sheet-body{overflow:auto;overscroll-behavior:contain;padding:14px 16px;display:grid;gap:18px;align-content:start;flex:1 1 auto;min-height:0;scroll-padding-bottom:16px}
.sheet-foot{display:flex;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface);flex:none}
.sheet-foot .primary{flex:1 1 auto}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:700;font-size:1rem;padding:0;margin-bottom:6px}
.check-row{flex-direction:row;align-items:center;gap:12px;min-height:44px;font-size:1rem}
.sort-options{display:grid;gap:6px}
.sort-option{display:grid;grid-template-columns:24px 1fr;gap:2px 12px;align-items:start;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--radius-m);font-weight:600;font-size:1rem;flex-direction:row;cursor:pointer;min-height:48px}
.sort-option:has(input:checked){border-color:var(--text);background:var(--surface-quiet)}
.sort-option small{grid-column:2;font-weight:400;font-size:0.875rem;color:var(--text-muted)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.more-filters{border:1px solid var(--line);border-radius:var(--radius-m)}
.more-filters>summary{min-height:48px;display:flex;align-items:center;padding:0 12px;font-weight:700;cursor:pointer;list-style:none}
.more-filters>summary::-webkit-details-marker{display:none}
.more-filters>summary::after{content:'+';margin-left:auto;font-size:1.25rem;font-weight:400}
.more-filters[open]>summary::after{content:'−'}
.more-filters>div{display:grid;gap:12px;padding:0 12px 12px}
.sources-field legend{margin-bottom:2px}
.coverage{font-size:0.875rem;color:var(--text-muted);margin-bottom:6px}
.source-actions{display:flex;flex-wrap:wrap;gap:4px 12px}
#source-options{display:grid;gap:0}
#source-options label{flex-direction:row;align-items:center;gap:4px 12px;min-height:44px;padding:6px 0;border-bottom:1px solid var(--line);font-weight:500;font-size:0.9375rem;flex-wrap:wrap}
.source-state{font-size:0.875rem;color:var(--text-muted);flex-basis:100%;padding-left:36px;margin-top:-2px}
.source-state.stale,.source-state.error{color:var(--warn);font-weight:600}
.saved-searches{display:grid;gap:8px;margin-top:8px}
.saved-search-row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.saved-search-row .subtle{flex:1;justify-content:flex-start;text-align:left}
.share-field{width:100%}
#real-sources:not([hidden]){display:inline-flex;font-weight:700}

/* Provtext, tack och verktygsfält */
.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:70;max-width:min(92vw,520px);background:var(--text);color:var(--surface);padding:12px 16px;border-radius:var(--radius-m);font-size:0.9375rem}

/* Sidfot */
.site-footer{margin-top:24px;background:var(--surface);border-top:1px solid var(--line)}
.footer-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding-block:20px}
.footer-row p{font-size:0.875rem;color:var(--text-muted)}
.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.footer-nav a,.footer-nav button{display:flex;align-items:center;min-height:44px;font-size:0.9375rem;font-weight:600;color:var(--text);text-align:left;text-decoration:underline;text-underline-offset:3px}

/* Statiska sidor, kategori- och familjesidor */
.page{padding:20px var(--gutter) 32px;max-width:760px;margin:0 auto}
.page article{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.page h1{font-size:1.75rem;line-height:1.15}
.page h2{font-size:1.3125rem;margin-top:20px}
.page p,.page li{font-size:1rem;line-height:1.6;color:var(--text)}
.page ul{list-style:disc;padding-left:22px}
.page li{margin:6px 0}
.page .lead{font-size:1.0625rem}
.page .page-note{color:var(--text-muted);font-size:0.9375rem}
.page .owner-fact{background:var(--warn-tint);border:1px solid var(--warn);border-radius:var(--radius-m);padding:10px 12px;font-weight:600}
.page code{font-size:0.875rem;background:var(--surface-quiet);padding:1px 4px;border-radius:4px}
.page-hero{background:var(--surface);border-bottom:1px solid var(--line)}
.page-hero .site-wrap{padding-block:16px 18px;display:grid;gap:8px}
.page-hero .crumb{font-size:0.875rem;font-weight:600;color:var(--text-muted)}
.page-hero .crumb a{display:inline-flex;align-items:center;min-height:44px}
.page-hero h1{font-size:1.625rem;line-height:1.15}
.page-hero p{font-size:1rem;color:var(--text-muted)}
.page-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:8px;margin-top:4px}
.page-stats li{background:var(--surface-quiet);border:1px solid var(--line);border-radius:var(--radius-m);padding:8px 12px;display:grid;gap:0;min-width:0}
.page-stats b{font:700 1.25rem/1.3 var(--font-text);white-space:nowrap}
.page-stats span{font-size:0.875rem;color:var(--text-muted)}
.page-body{padding-block:16px 24px}
.page-body .page-note{font-size:0.9375rem;color:var(--text-muted);max-width:760px;margin-bottom:14px}
.page-body h2{margin-bottom:10px}
.page-more{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;margin-top:16px;background:var(--action);color:var(--action-text);border-radius:var(--radius-m);font-weight:600;text-decoration:none}
.page-more:hover{background:var(--action-hover);color:var(--action-text)}
.page-cards{margin-top:0}

/* Samtycke (av vid lansering, se consent.json) */
.consent-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:640px;margin:0 auto;padding:16px;border-radius:var(--radius-m);background:var(--surface);color:var(--text);border:1.5px solid var(--text);box-shadow:var(--shadow-sheet)}
.consent-banner h2{margin:0 0 6px;font-size:1.125rem}
.consent-banner p{margin:0 0 12px;font-size:0.9375rem;line-height:1.45}
.consent-actions{display:flex;gap:10px}
.consent-btn{flex:1 1 0;min-height:44px;border-radius:var(--radius-m);border:2px solid var(--text);background:var(--surface);color:var(--text);font-weight:700}
#consent-reopen{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}

/* Bredare skärmar */
@media (min-width:700px){
 .categories5{min-height:17.5rem}
 .card-grid,.results{grid-template-columns:repeat(2,minmax(0,1fr))}
 .start-cards>:nth-child(n+4){display:grid}
 .start-cards>:nth-child(n+5){display:none}
 .needs5,.promise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-stats{display:flex;flex-wrap:wrap}
 .page-stats li{min-width:150px}
 .footer-nav{display:flex;flex-wrap:wrap;gap:0 16px}
 .hero-line{font-size:1.375rem}
 .detail-data{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
 .results,.page-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
 .start-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
 .promise-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Panelen ligger i nederkant på mobil. */
@media (max-width:699px){
 dialog.sheet{width:100%;max-width:none;margin:auto 0 0;max-height:92dvh;border-radius:var(--radius-m) var(--radius-m) 0 0}
 dialog:not(.sheet){width:100%;max-width:none;margin:auto 0 0;max-height:96dvh;border-radius:var(--radius-m) var(--radius-m) 0 0}
}
/* Mycket smalt (320 px) och stor text (200 %): inget får bli avklippt. */
@media (max-width:359px){
 .field-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Mörkt läge: logotyp och illustrationer är ritade för ljus botten och får en ljus platta. */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .wordmark-icon img,:root:not([data-theme=light]) .detail-illustration img{background:var(--tile);border-radius:var(--radius-s);padding:2px}}
:root[data-theme=dark] .wordmark-icon img,:root[data-theme=dark] .detail-illustration img{background:var(--tile);border-radius:var(--radius-s);padding:2px}