/* Husjakt – det nya utseendet, "B+C ljusare" (2026-10-21). Mats valde B+C
   bland tre livligare skisser, provade det i telefonen och tyckte att det
   blev "lite too much med allt tungt grönt". Den här versionen behåller det
   han gillade – korallen, formerna, fjädringen, rubrikerna, chippen med
   ikoner och illustrationen – men låter grönt vara en accent, inte en yta.

   Ett lager ovanpå stil.css och inget annat. **Varje regel här står under
   html.nytt-utseende**, och klassen sätts av app.js bara när
   seNyttUtseende(person) i logik.js säger ja – i dag bara för Mats. Allt nytt i
   gränssnittet visas först för honom (CLAUDE.md, 2026-09-23); de andra tre ser
   exakt samma app som förut, för utan klassen matchar ingenting i den här
   filen. test/tema.test.js läser filen och fäller en regel som står utanför.
   Undantaget är @font-face: den är ingen regel om något element, och
   webbläsaren hämtar typsnittet först när en regel använder det – alltså
   bara när klassen står på.

   Ytorna är ljust och varmt neutrala (mörkt neutrala i mörkt läge). Varje vy
   börjar under ett ljust sidhuvud med ett varmt sken i hörnet och landskapet
   – kullar, granar och ett hus – som en diskret, ljus siluett i nederkanten;
   texten är mörk och korallkakan står framför namnet. Bilden står kant i
   kant överst på korten, och ett hus utan bild får en ljus, luftig gradient
   (gryning, ljus himmel eller sand) med huset i en mörk linje. Plats och
   storlek står som chip med ikon. Flikraden svävar som en skiva av ljust
   glas med tunn skugga, och den valda fliken har en korallfärgad pill.
   Tillbakaraden är samma ljusa glas, och märkena på bilden är ljust glas med
   mörk text. Korallen är tertiär accent: den valda fliken, den tända
   stjärnan, startsidans "Klistra in länken" som FAB och kakan. Huvudknappen
   är en grön rundad kvadrat, sekundära knappar tonade piller; knappar
   fjädrar vid tryck. Rubrikerna i Outfit, brödtexten i Figtree som förut.

   Det som inte går ihop med husjaktens regler får ge vika för dem:
   - Ingen text under 1rem och ingen textstorlek mindre än i stil.css (issue
     159). Rubriker, pris och huvudknapp växer; ingenting krymper.
   - Tryckytor minst 3rem (48 px). Flikarna är 4,25rem höga som förut, inne i
     den svävande skivan.
   - Färgen bär aldrig betydelsen ensam: ✕, ? och ✓ står kvar i märkena, en
     vald knapp är fylld mot ofylld, och illustrationerna är dekor.
   - Ingen rörelse för den som bett telefonen om mindre: fjädringen och
     skalningen stängs av under prefers-reduced-motion.

   Specificitet: html.nytt-utseende väger (0,1,1). En bred regel här –
   "html.nytt-utseende button" – väger alltså mer än "button.stor" i
   stil.css och skulle skriva över den. De breda reglerna sätter därför bara
   egenskaper som ingen smalare regel i stil.css använder för att bära något
   (form, övergång, tillståndslager), och det som skiljer en knapp från en
   annan står i en regel lika smal som originalet. De tonade knapparna är en
   uppräkning, inte "alla knappar": en bred fyllning hade lagt en yta under
   kantlösa knappar som kartprickarna och faktaradens ✕.

   KONTRAST (WCAG 2.x, relativ luminans, uppmätt med ett skript ur
   hexvärdena nedan – inte uppskattat). Text kräver 4,5:1, en kontrolls kant
   och en ikon 3:1 (WCAG 1.4.11). Där en yta är halvgenomskinlig är
   kontrasten mätt mot blandningen över det sämsta innehållet som kan ligga
   under den (står vid varje tal). Kakan och illustrationerna är dekor.

   Ljust läge
     text på sidan 15,71 · på kortet 17,13 · i fält 17,13
     dämpad text på sidan 8,55 · på kortet 9,32 · i plats-chippet 7,88
       · chippets ikon (grön) 6,86
     kontrollkant mot kortet 4,70 · mot sidan 4,31 · mot fält 4,70
       · mot den tonade knappens egen fyllning 3,86
     text på tonad knapp (secondary-container) 14,07
     grön på sidan 7,44 · på kortet 8,11
     huvudknappen: vit på grön 8,11, under glansen överst 5,94, vid hover 10,79
     FAB:en: vit på korall 6,02 · korallpilen i utfällbara delar 5,52
     tänd stjärna: korall på korallcontainer 4,57 (ikon, 3:1)
     sidhuvudet: text på ytan 16,55, i nederkanten 14,89, i skenet 14,54,
       mot siluettens mörkaste ton 11,58; kakan 3,47 / 3,05 (dekor);
       fokusramen (grön) 7,84 / 7,05 / 6,88
     glaset (mätt vid 90 % vitt, nu 94 % och alltså minst så bra; sämsta
       fallet över huvudknappens gröna): text 14,58, dämpad text 7,93 – över sidan 16,99 / 9,24
     tillbakaknappens kant mot glaset 4,00, text 14,07
     flikraden: korallpillen mot glaset 5,13 · ikonen i pillen 6,02 ·
       pricken 6,02
     bildrutan utan bild (gryning): hjälptext 6,95–8,86, text 12,78–16,28,
       den gröna knappen mot gradienten 6,05–7,71
     bildmärket (glas 86 % vitt, sämsta fallet över svart): 12,37
     märken, on-container på container: brist 12,77 · uppfyllt 13,54
       · okänt 13,62; rollfärgen på sin container (stil.css) 5,14 · 5,14
       · 5,40; sidan på fylld brist / uppfyllt / okänt 6,00 · 5,94 · 6,21
   Mörkt läge
     text på sidan 14,74 · på kortet 13,40 · i fält 11,87
     dämpad text på sidan 10,82 · på kortet 9,84 · i chippet 9,06
       · chippets ikon 9,38
     kontrollkant mot kortet 5,38 · mot sidan 5,92 · mot fält 4,77
       · mot den tonade knappen 4,05
     text på tonad knapp 10,09
     grön på sidan 11,21 · på kortet 10,19 · mörk text på grön 7,93
       · under glansen 8,40 · vid hover 9,78
     FAB:en: mörk text på korall 7,75 · korallpilen 10,88 · tänd stjärna 5,51
     sidhuvudet: text 12,94 / 14,22 / i skenet 9,41, mot siluetten 9,65;
       kakan 9,55 / 6,95; fokusramen 9,84 / 10,81 / 7,16
     glaset (mätt vid 90 % mörkt, nu 94 %; sämsta fallet över den ljusgröna knappen): text
       10,18, dämpad 7,47 – över sidan 12,94 / 9,50
     tillbakaknappens kant mot glaset 4,09, text 10,09
     flikraden: korallpillen mot glaset 7,51 · ikonen i pillen 7,75 ·
       pricken 7,75
     bildrutan (grå): hjälptext 6,42–9,89, text 8,75–13,47, knappen 6,65–10,24
     bildmärket 12,37 · märken: brist 8,16 · uppfyllt 8,03 · okänt 7,72;
       rollfärgen på sin container 6,08 · 6,17 · 5,92; sidan på fylld
       brist / uppfyllt / okänt 10,83 · 11,27 · 11,33 */

/* Figtree, brödtexten. Variabel vikt 300–900, bara latin (å, ä, ö och é
   ingår). OFL 1.1, licensen i typsnitt/OFL.txt. Ur
   @fontsource-variable/figtree 5.3.0, 20 kB. swap: texten syns direkt i
   systemets typsnitt och byter när filen kommit. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('typsnitt/figtree-latin-wght-normal.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;
}
/* Outfit, rubrikerna och priset. Geometrisk och ren, tydlig också stor och
   tung. Variabel vikt 100–900, bara latin. OFL 1.1, licensen i
   typsnitt/OFL-outfit.txt. Ur @fontsource-variable/outfit 5.3.0, 32 kB. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('typsnitt/outfit-latin-wght-normal.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;
}

/* ---------------------------------------------------------------- färgroller

   M3:s roller ur appens gröna, handjusterade mot kontrasttalen ovan, plus
   en korall som tertiär. Ytorna är ljust och varmt neutrala, inte gröna –
   Mats 2026-10-21 om B+C: "lite too much med allt tungt grönt". Grönt är en
   accent: huvudknappen, valda val, ikoner. I mörkt läge är ytorna mörkt
   neutrala av samma skäl.

   hero är sidhuvudets ljusa yta, hero-2 dess nederkant; glas är flikradens
   och tillbakaradens glas efter att det sämsta innehållet lyst igenom –
   huvudknappens gröna i ljust läge, den ljusgröna knappen i mörkt – och
   kontrasten mäts mot det. Värdena är inskrivna; ingenting räknas ut i
   webbläsaren utom glasets blandning.

   Rollerna mappas sedan på appens egna variabler, så att varje regel i
   stil.css får färgen utan att skrivas om:
     --gron = primary            --gron-yta = secondary-container
     --papper = surface          --kort = fält och knappar
     --text = on-surface         --dampad = on-surface-variant
     --kant = outline-variant (dekor)   --kant-kontroll = outline (3:1)
     --brist / -yta = error / error-container, osv. */
html.nytt-utseende {
  --md-surface: #f6f5f2;
  --md-kort: #ffffff;
  --md-falt: #ffffff;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #fbfaf8;
  --md-surface-container: #edece7;
  --md-surface-container-high: #e5e4de;
  --md-on-surface: #1a1c1b;
  --md-on-surface-variant: #45474a;
  --md-outline: #74746f;
  --md-outline-variant: #d3d1ca;
  --md-primary: #1d5a40;
  --md-primary-hover: #134630;
  --md-on-primary: #ffffff;
  --md-primary-container: #c3ecd3;
  --md-on-primary-container: #072a19;
  --md-secondary-container: #dfece3;
  --md-on-secondary-container: #1f3a2c;
  --md-tertiary: #b13a17;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ffd8cb;
  --md-on-tertiary-container: #3d0b00;
  --md-error: #b3261e;
  --md-error-container: #f9dedc;
  --md-on-error-container: #410e0b;
  --md-uppfyllt: #2a6a43;
  --md-uppfyllt-container: #c9eed4;
  --md-on-uppfyllt-container: #05210f;
  --md-okant: #765600;
  --md-okant-container: #ffe3a1;
  --md-on-okant-container: #261a00;
  --md-hero: #fcfbf8;
  --md-hero-2: #f1efe8;
  --md-on-hero: #1a1c1b;
  --md-glas: #e8eeec;
  --md-on-glas: #1a1c1b;
  --md-on-glas-variant: #45474a;
  /* Den valda flikens pill och kakan framför sidrubriken (dekor). Pillen är
     korallen själv, inte dess ljusa container: mot det ljusa glaset hade en
     ljus pill bara skilt sig i kulör (1,12:1), och markeringen ska synas
     också för den som inte ser färgskillnaden. */
  --md-pill: #b13a17;
  --md-on-pill: #ffffff;
  --md-kaka: #d9643f;
  /* Märket på bilden: ljust glas, mörk text – samma i båda lägena, för
     bilden under är densamma. Mätt mot glaset över svart. */
  --md-bildmarke: #dbdbdb;
  --md-on-bildmarke: #1a1c1b;

  /* Appens variabler, ur rollerna. */
  --gron: var(--md-primary);
  --gron-ljus: var(--md-primary-hover);
  --gron-yta: var(--md-secondary-container);
  --papper: var(--md-surface);
  --kort: var(--md-falt);
  --text: var(--md-on-surface);
  --dampad: var(--md-on-surface-variant);
  --kant: var(--md-outline-variant);
  --kant-kontroll: var(--md-outline);
  --brist: var(--md-error);
  --brist-yta: var(--md-error-container);
  --uppfyllt: var(--md-uppfyllt);
  --uppfyllt-yta: var(--md-uppfyllt-container);
  --okant: var(--md-okant);
  --okant-yta: var(--md-okant-container);

  --yta-kort: var(--md-kort);
  /* Glaset: flikraden och tillbakaraden. 90 % täckning. */
  --glas: color-mix(in srgb, #ffffff 94%, transparent);
  --glas-kant: rgba(20, 30, 25, 0.08);
  /* Ett varmt sken uppe i sidhuvudets hörn, ur korallen. */
  --sken: color-mix(in srgb, var(--md-tertiary-container) 55%, transparent);

  /* Formskalan, Expressive: fält 0,9rem, huvudknappen 1,25rem (rundad
     kvadrat), kort 1,5rem, sekundära knappar piller. */
  --radie: 0.9rem;
  --radie-kort: 1.5rem;
  --radie-fab: 1.25rem;
  --skugga-kort: 0 1px 2px rgba(30, 30, 25, 0.06), 0 8px 24px -14px rgba(30, 30, 25, 0.28);
  --skugga-glas: 0 1px 2px rgba(30, 30, 25, 0.08), 0 8px 22px -12px rgba(30, 30, 25, 0.3);
  --hojd-1: 0 1px 2px rgba(20, 40, 30, 0.14), 0 1px 3px 1px rgba(20, 40, 30, 0.08);
  --hojd-3: 0 4px 8px 3px rgba(20, 40, 30, 0.1), 0 1px 3px rgba(20, 40, 30, 0.18);

  /* Rörelse: färger tonar, former och storlek fjädrar (överslag), som M3
     Expressive. Båda stängs av under prefers-reduced-motion längst ner. */
  --mjukt: 200ms cubic-bezier(0.2, 0, 0, 1);
  --fjader: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --rubrik: 'Outfit', 'Figtree', system-ui, sans-serif;

  /* Ljussättningarna för hus utan bild: gryning, ljus himmel och sand. */
  --gryning: radial-gradient(80% 90% at 80% 15%, #ffd6c4, transparent 70%), linear-gradient(170deg, #fde9de 0%, #fff8f2 75%);
  --himmel: radial-gradient(80% 90% at 80% 15%, #ffe6d3, transparent 65%), linear-gradient(170deg, #d5e7f2 0%, #f3f8fb 75%);
  --sand: radial-gradient(80% 90% at 80% 15%, #fff0cf, transparent 70%), linear-gradient(170deg, #efe1c6 0%, #fbf6ec 75%);
  /* Det öppnade kortet utan bild: gryningen i ljust läge, grått i mörkt. */
  --bildplats: var(--gryning);

  /* Illustrationerna, som bakgrundsbilder (img-src tillåter data: i
     _headers). Ren dekor.
     bild-hus: huset i en mörk linje, sol, kullar och granar i ljusa toner,
     för kort utan bild.
     bild-landskap: en diskret, ljus siluett av kullar, granar och ett hus,
     för sidhuvudet och bildrutan. */
  --bild-hus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 175' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='318' cy='52' r='22' fill='%23f4a585' fill-opacity='.85'/%3E%3Cpath d='M0 128c60-26 120-30 190-12s140 10 210-16v75H0z' fill='%23fff' fill-opacity='.6'/%3E%3Cpath d='M0 150c80-20 150-18 230-4s120 4 170-8v37H0z' fill='%23fff' fill-opacity='.85'/%3E%3Cg fill='%2399b8a6' fill-opacity='.75'%3E%3Cpath d='M60 140l14-34 14 34z'/%3E%3Cpath d='M82 142l12-28 12 28z'/%3E%3Cpath d='M300 140l14-36 14 36z'/%3E%3Cpath d='M326 144l10-24 10 24z'/%3E%3C/g%3E%3Cg fill='none' stroke='%232f4a3e' stroke-width='5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M160 136V96l40-32 40 32v40z' fill='%23fff' fill-opacity='.7'/%3E%3Cpath d='M150 104l50-42 50 42'/%3E%3Cpath d='M190 136v-22h20v22'/%3E%3Crect x='214' y='98' width='14' height='12' rx='2'/%3E%3Cpath d='M224 70v-12h10v20'/%3E%3C/g%3E%3C/svg%3E");
  --bild-landskap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='xMaxYMax slice'%3E%3Cpath d='M0 92c60-20 120-24 190-8s140 6 210-12v48H0z' fill='%23dde8df'/%3E%3Cpath d='M0 108c80-14 150-12 230-2s120 2 170-6v20H0z' fill='%23ebe3d3'/%3E%3Cg fill='%23c6d9cc'%3E%3Cpath d='M300 104l12-30 12 30z'/%3E%3Cpath d='M322 106l10-22 10 22z'/%3E%3Cpath d='M346 104l12-34 12 34z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23b4c7bb' stroke-width='3.5' stroke-linejoin='round'%3E%3Cpath d='M250 104V82l22-18 22 18v22z'/%3E%3C/g%3E%3C/svg%3E");
  /* M3 Expressives "cookie", åttabladig – kakan framför sidrubriken. */
  --form-kaka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2c8 0 11 9 18 11s15-4 20 2 0 14 4 20 10 9 8 16-10 9-11 16 4 15-2 20-14 0-20 4-9 10-17 10-11-9-18-11-15 4-20-2 0-14-4-20S-1 59 1 52s10-9 11-16-4-15 2-20 14 0 20-4S42 2 50 2z'/%3E%3C/svg%3E");
  --ikon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3h3v7.5H21v3h-7.5V21h-3v-7.5H3v-3h7.5z'/%3E%3C/svg%3E");
  --ikon-plats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
  --ikon-storlek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 12h8V3M11 12v9M15 12h6'/%3E%3C/svg%3E");
  accent-color: var(--gron);
}

@media (prefers-color-scheme: dark) {
  html.nytt-utseende {
    --md-surface: #121413;
    --md-kort: #1b1e1c;
    --md-falt: #252826;
    --md-surface-container-lowest: #0d0f0e;
    --md-surface-container-low: #171a18;
    --md-surface-container: #222523;
    --md-surface-container-high: #2b2e2c;
    --md-on-surface: #e4e6e4;
    --md-on-surface-variant: #c3c7c4;
    --md-outline: #8e938f;
    --md-outline-variant: #3b3f3c;
    --md-primary: #7fdcab;
    --md-primary-hover: #9df0c4;
    --md-on-primary: #00391f;
    --md-primary-container: #10432c;
    --md-on-primary-container: #b8f2cf;
    --md-secondary-container: #2c3530;
    --md-on-secondary-container: #d3e6da;
    --md-tertiary: #ffb59e;
    --md-on-tertiary: #5c1900;
    --md-tertiary-container: #7d2c12;
    --md-on-tertiary-container: #ffdbd0;
    --md-error: #f2b8b5;
    --md-error-container: #6e2a26;
    --md-on-error-container: #f9dedc;
    --md-uppfyllt: #9ad8ac;
    --md-uppfyllt-container: #1f4a2c;
    --md-on-uppfyllt-container: #c9eed4;
    --md-okant: #f0c560;
    --md-okant-container: #584100;
    --md-on-okant-container: #ffe3a1;
    --md-hero: #1e2120;
    --md-hero-2: #161817;
    --md-on-hero: #e4e6e4;
    --md-glas: #29352f;
    --md-on-glas: #e4e6e4;
    --md-on-glas-variant: #c3c7c4;
    --md-pill: #ffb59e;
    --md-on-pill: #5c1900;
    --md-kaka: #ffb59e;
    --md-bildmarke: #dbdbdb;
    --md-on-bildmarke: #1a1c1b;

    --glas: color-mix(in srgb, #1f2221 94%, transparent);
    --glas-kant: rgba(255, 255, 255, 0.08);
    --sken: color-mix(in srgb, var(--md-tertiary) 14%, transparent);
    --skugga-kort: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 24px -12px rgba(0, 0, 0, 0.8);
    --skugga-glas: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 24px -10px rgba(0, 0, 0, 0.7);
    --hojd-1: 0 1px 3px rgba(0, 0, 0, 0.4);
    --hojd-3: 0 6px 14px 2px rgba(0, 0, 0, 0.5);

    --gryning: radial-gradient(80% 90% at 80% 15%, #4a2d24, transparent 70%), linear-gradient(170deg, #2c2422 0%, #1c1b1a 75%);
    --himmel: radial-gradient(80% 90% at 80% 15%, #3a3028, transparent 65%), linear-gradient(170deg, #1d2833 0%, #171b1f 75%);
    --sand: radial-gradient(80% 90% at 80% 15%, #463a22, transparent 70%), linear-gradient(170deg, #2c271c 0%, #1c1a16 75%);
    /* Gryningen blev svagt rödbrun på det stora öppnade kortet (översynen
       2026-10-21), så där är den grå. Listans små rutor behåller den. */
    --bildplats: radial-gradient(80% 90% at 80% 15%, #3a3d3c, transparent 70%), linear-gradient(170deg, #262928 0%, #1c1d1d 75%);
    --bild-hus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 175' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='318' cy='52' r='22' fill='%23e9957a' fill-opacity='.8'/%3E%3Cpath d='M0 128c60-26 120-30 190-12s140 10 210-16v75H0z' fill='%23fff' fill-opacity='.05'/%3E%3Cpath d='M0 150c80-20 150-18 230-4s120 4 170-8v37H0z' fill='%23fff' fill-opacity='.08'/%3E%3Cg fill='%23fff' fill-opacity='.12'%3E%3Cpath d='M60 140l14-34 14 34z'/%3E%3Cpath d='M82 142l12-28 12 28z'/%3E%3Cpath d='M300 140l14-36 14 36z'/%3E%3Cpath d='M326 144l10-24 10 24z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23d4ddd8' stroke-width='5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M160 136V96l40-32 40 32v40z' fill='%23fff' fill-opacity='.06'/%3E%3Cpath d='M150 104l50-42 50 42'/%3E%3Cpath d='M190 136v-22h20v22'/%3E%3Crect x='214' y='98' width='14' height='12' rx='2'/%3E%3Cpath d='M224 70v-12h10v20'/%3E%3C/g%3E%3C/svg%3E");
    --bild-landskap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='xMaxYMax slice'%3E%3Cpath d='M0 92c60-20 120-24 190-8s140 6 210-12v48H0z' fill='%23252a27'/%3E%3Cpath d='M0 108c80-14 150-12 230-2s120 2 170-6v20H0z' fill='%232a2723'/%3E%3Cg fill='%232f3833'%3E%3Cpath d='M300 104l12-30 12 30z'/%3E%3Cpath d='M322 106l10-22 10 22z'/%3E%3Cpath d='M346 104l12-34 12 34z'/%3E%3C/g%3E%3Cg fill='none' stroke='%233a4540' stroke-width='3.5' stroke-linejoin='round'%3E%3Cpath d='M250 104V82l22-18 22 18v22z'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* ---------------------------------------------------------------- text

   font-size-adjust låser brödtextens x-höjd till 0,53 av storleken, vilket
   typsnitt som än visas – Robotos egen, alltså vad Anna-Carins Android visar
   nu. Rubrikerna i Outfit släpper låset: deras storlekar är större än i
   stil.css, och Outfits x-höjd vid de storlekarna är högre än dagens. */
html.nytt-utseende body {
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size-adjust: ex-height 0.53;
  -webkit-font-smoothing: antialiased;
  /* Flikraden svävar en bit ovanför kanten och är högre än i stil.css: 4,25rem
     flik, 0,35rem luft runt, 0,75rem till kanten. Sista knappen på sidan ska
     gå att rulla fram ovanför den, med en tumme luft till. */
  padding-bottom: calc(8rem + env(safe-area-inset-bottom));
}
html.nytt-utseende :is(h1, h2, h3) {
  font-family: var(--rubrik);
  font-size-adjust: none;
  letter-spacing: -0.015em;
}
/* Rubrikskalan från B: h1 1,6 → 2,4rem, h2 1,3 → 1,55rem. */
html.nytt-utseende h1 { font-size: 2.4rem; font-weight: 750; line-height: 1.05; }
html.nytt-utseende h2 { font-size: 1.55rem; font-weight: 700; line-height: 1.15; }
html.nytt-utseende h3 { font-weight: 650; line-height: 1.25; }
html.nytt-utseende .kort h3 { font-size: 1.35rem; }
/* Rubrikerna i de utfällbara delarna är rader i en lista, inte avsnitt: 1,55rem
   i 750 gjorde kortets nederdel till en vägg av rubriker. 1,35rem är ändå
   större än stil.css 1,3rem (och flerfiltrets 1,15rem). */
html.nytt-utseende .vikbar > summary :is(h2, h3) { font-size: 1.35rem; font-weight: 650; }
/* Ett långt namn bredvid stjärnan och rösten bryts hellre mellan orden. */
html.nytt-utseende .rubrikrad h3 { -webkit-hyphens: manual; hyphens: manual; }

/* ---------------------------------------------------------------- sidhuvudet

   Vyns rubrik står i ett lågt, ljust sidhuvud kant i kant: papperets ton och
   ett svagt varmt sken uppe i hörnet. Mats tyckte att det höga sidhuvudet med
   landskapet tog för stor plats och tog för mycket uppmärksamhet, så det är
   nu en rad – rubriken i 1,6rem som i stil.css, en liten korallkaka framför. */
html.nytt-utseende section.vy > h1:first-child {
  margin: -1rem -1rem 1rem;
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--md-on-hero);
  background:
    radial-gradient(60% 140% at 100% 0%, var(--sken), transparent 70%),
    var(--md-hero);
  border-bottom: 1px solid var(--kant);
  border-radius: 0 0 1.25rem 1.25rem;
}
html.nytt-utseende section.vy > h1:first-child::before {
  content: '';
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  background: var(--md-kaka);
  -webkit-mask: var(--form-kaka) center / contain no-repeat;
  mask: var(--form-kaka) center / contain no-repeat;
}

/* Tillbakaraden på det öppnade kortet: ljust glas som flikraden. */
html.nytt-utseende .tillbakarad {
  background: var(--glas);
  border-bottom: 1px solid var(--glas-kant);
  box-shadow: var(--skugga-glas);
  margin: -1rem -1rem 1rem;
  padding: 0.75rem 1rem;
  color: var(--md-on-glas);
  border-radius: 0 0 1.25rem 1.25rem;
}
/* Tillbakaknappen: ett tonat piller som de andra sekundära knapparna. */
html.nytt-utseende #tillbaka {
  background-color: var(--gron-yta);
  border-color: var(--kant-kontroll);
  color: var(--text);
  font-weight: 650;
}
html.nytt-utseende .tillbakanamn { font-family: var(--rubrik); font-size: 1.15rem; font-weight: 650; }

/* ---------------------------------------------------------------- knappar

   Formen säger vad knappen är: huvudknappen en rundad kvadrat, sekundära
   piller, fälten 0,9rem. Vid tryck skalas knappen ned och fjädrar tillbaka,
   och huvudknappens hörn rundas mer – formen svarar på fingret. */
html.nytt-utseende :is(button, .knapp) { border-radius: 999px; }
html.nytt-utseende :is(input, select, textarea) { border-radius: var(--radie); }
html.nytt-utseende :is(button, .knapp, input, select, textarea) {
  transition:
    background-color var(--mjukt),
    border-color var(--mjukt),
    color var(--mjukt),
    box-shadow var(--mjukt),
    border-radius var(--fjader),
    transform var(--fjader);
}
html.nytt-utseende :is(button, .knapp):not([disabled]):active { transform: scale(0.95); }
/* Telefonens egen tryckmarkering är en rektangel runt hela knappen, också
   runt de runda (Mats 2026-10-21). Den stängs av: tillståndslagret nedan och
   skalningen ovan visar trycket i knappens egen form. */
html.nytt-utseende :is(button, .knapp, a, summary, label) { -webkit-tap-highlight-color: transparent; }

/* Tillståndslagret: en hinna i innehållets egen färg ovanpå ytan, som en
   bakgrundsbild – den lägger sig över vilken bakgrundsfärg knappen än har. */
@media (hover: hover) {
  html.nytt-utseende :is(button, .knapp, .vikbar > summary):not([disabled]):hover {
    background-image: linear-gradient(color-mix(in srgb, currentColor 8%, transparent) 0 0);
  }
}
html.nytt-utseende :is(button, .knapp, .vikbar > summary):not([disabled]):is(:active, :focus-visible) {
  background-image: linear-gradient(color-mix(in srgb, currentColor 12%, transparent) 0 0);
}
html.nytt-utseende :is(input, select, textarea):focus-visible {
  border-color: var(--gron);
  outline: 3px solid var(--gron);
  outline-offset: 1px;
}

/* Huvudknappen: rundad kvadrat, höjd 3, en svag glans uppifrån som
   sidhuvudet, och 4rem hög (3,75rem i stil.css). */
html.nytt-utseende button.stor,
html.nytt-utseende label.knapp.stor,
html.nytt-utseende .letanu .knapp.stor {
  color: var(--md-on-primary);
  font-weight: 650;
  letter-spacing: 0.01em;
  min-height: 4rem;
  border-radius: var(--radie-fab);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  box-shadow: var(--hojd-3);
}
html.nytt-utseende button.stor:not([disabled]):active,
html.nytt-utseende label.knapp.stor:active {
  border-radius: 2rem;
  box-shadow: var(--hojd-1);
}
@media (hover: hover) {
  html.nytt-utseende button.stor:not([disabled]):hover,
  html.nytt-utseende label.knapp.stor:hover,
  html.nytt-utseende .letanu .knapp.stor:hover {
    background-color: var(--gron-ljus);
    border-color: var(--gron-ljus);
  }
}

/* Startsidans första knapp är appens viktigaste: en korallfärgad FAB med ett
   plustecken. Plustecknet är dekor – ordet bär. */
html.nytt-utseende #klistraknapp {
  background-color: var(--md-tertiary);
  border-color: var(--md-tertiary);
  color: var(--md-on-tertiary);
  min-height: 4.5rem;
  font-size: 1.3rem;
  border-radius: 1.5rem;
}
html.nytt-utseende #klistraknapp::before {
  content: '';
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  background: currentColor;
  -webkit-mask: var(--ikon-plus) center / contain no-repeat;
  mask: var(--ikon-plus) center / contain no-repeat;
}
@media (hover: hover) {
  html.nytt-utseende #klistraknapp:not([disabled]):hover {
    background-color: var(--md-tertiary);
    border-color: var(--md-tertiary);
  }
}

/* Övriga knappar har ingen egen yta, som M3:s konturknapp … */
html.nytt-utseende button:not(.stor):not(.marke):not([aria-pressed='true']):not(.rostmeny),
html.nytt-utseende a.knapp:not(.stor) {
  background-color: transparent;
}
/* … utom de sekundära knapparna med text och kant, som blir M3:s tonade
   piller: fyllda i secondary-container, kanten kvar i outline så att de syns
   som knappar också i solljus. En uppräkning, se överst. Fara-knapparna
   behåller sin ofyllda röda form. */
html.nytt-utseende :is(button.mild, .radgrupp > button, .planknapp, .lankknappar .knapp, .zoomknapp):not([aria-pressed='true']):not(.fara):not(.stor):not(#tillbaka) {
  background-color: var(--gron-yta);
}

/* Knapprader där ett val gäller (Aktiva, Favoriter …): det valda är fyllt,
   får en bock och fyrkantigare hörn – fylld mot ofylld och formen säger
   vilket som är valt, inte färgen. */
html.nytt-utseende .valrad button[aria-pressed='true'] {
  color: var(--md-on-primary);
  border-radius: var(--radie);
}
html.nytt-utseende .valrad button[aria-pressed='true']::before { content: '✓'; font-weight: 800; }
/* Röstknapparna behåller sin runda form även när de är valda (Mats 2026-10-21:
   "blir fyrkantiga vid tryck, ser fel ut"). Den ifyllda färgen räcker för att
   visa vilket svar som är valt. */

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

   Bilden först och kant i kant. Kortet har ingen kant, bara skugga. */
html.nytt-utseende .kort {
  background: var(--yta-kort);
  border-color: transparent;
  border-radius: var(--radie-kort);
  box-shadow: var(--skugga-kort);
  padding: 1.25rem;
  margin: 1.25rem 0;
}
/* Ramen runt husen i listan (seKortram): tunn och mörk, så att det syns var
   nästa kort börjar. --md-outline mot kortet: 4,70:1 i ljust läge, 5,38:1 i
   mörkt. */
html.nytt-utseende.kortram #objektlista .kort:not(.forslag) { border: 1px solid var(--md-outline); }
/* Svepet i listan stannar med ett hus i överkant (seRullstopp). Proximity och
   inte mandatory: bara nära en kortkant drar webbläsaren dit, och ett kort
   som är högre än skärmen går att rulla igenom. Bara medan listan står framme. */
html.nytt-utseende.rullstopp:has(#vy-objekt:not([hidden])) { scroll-snap-type: y proximity; }
/* Fokus som flyttas med tangentbord eller skärmläsare ska inte landa bakom
   flikraden längst ner. */
html.nytt-utseende { scroll-padding-bottom: 7rem; }
html.nytt-utseende.rullstopp #objektlista .kort:not(.forslag) { scroll-snap-align: start; scroll-margin-top: 0.75rem; }
html.nytt-utseende .kort > :is(.bildruta, .bildlank, .kortbild, .bildplats):first-child {
  margin: -1.25rem -1.25rem 1rem;
}
html.nytt-utseende .kort > .kortbild:first-child,
html.nytt-utseende .kort > :first-child .kortbild {
  border-radius: var(--radie-kort) var(--radie-kort) 0 0;
  aspect-ratio: 16 / 10;
}
html.nytt-utseende .kortbild,
html.nytt-utseende .miniatyr { border-radius: 1rem; }

/* Märkena på bilden: ljust glas med mörk text i stället för en svart
   platta. 92 % vitt (mätt vid 86 %, alltså minst så bra): över en svart
   fasad blir glaset ändå ljust nog för texten (mätt som --md-bildmarke).

   Ingen oskärpa bakom glaset, här eller i flikraden och tillbakaraden. En
   backdrop-filter räknas om för varje bildruta när listan rullar under den,
   och på en vanlig Android-telefon hackade rullningen (Mats 2026-10-21).
   Glaset är nästan tätt ändå, så oskärpan syntes knappt. */
html.nytt-utseende .bildmarke {
  background: color-mix(in srgb, #ffffff 92%, transparent);
  border: 1px solid rgba(0, 0, 0, 0.14);
  color: var(--md-on-bildmarke);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  padding-inline: 0.85rem;
  bottom: 0.75rem;
}
html.nytt-utseende .bildmarke:not(.bildmarke-karta) { right: 0.75rem; }
html.nytt-utseende .bildmarke-karta { left: 0.75rem; }

/* Ingen bild i listan: en illustrerad, ljus gradient i bildens ställe, så
   att listan får sin rytm av bilder också innan någon lagt in en – huset i
   en mörk linje mot gryning, ljus himmel eller sand. Ljussättningen växlar
   med kortets plats i listan: dekor, ingen betydelse och ingen ordning
   (CLAUDE.md, invariant 1). */
html.nytt-utseende #objektlista .kort:not(.forslag):not(.utsorteradrad):not(:has(.kortbild))::before {
  content: '';
  display: block;
  margin: -1.25rem -1.25rem 1rem;
  aspect-ratio: 16 / 7;
  border-radius: var(--radie-kort) var(--radie-kort) 0 0;
  border-bottom: 1px solid var(--kant);
  background: var(--bild-hus) center bottom / cover no-repeat, var(--gryning);
}
html.nytt-utseende #objektlista .kort:not(.forslag):not(.utsorteradrad):not(:has(.kortbild)):nth-child(3n + 2)::before {
  background: var(--bild-hus) center bottom / cover no-repeat, var(--himmel);
}
html.nytt-utseende #objektlista .kort:not(.forslag):not(.utsorteradrad):not(:has(.kortbild)):nth-child(3n)::before {
  background: var(--bild-hus) center bottom / cover no-repeat, var(--sand);
}

/* Det öppnade kortet utan bild: gryningen med landskapets ljusa siluett,
   och texten och knappen ovanpå. Texten mörk, knappen den vanliga gröna.
   I mörkt läge grå (--bildplats). */
html.nytt-utseende .bildplats {
  border: 0;
  border-bottom: 1px solid var(--kant);
  border-radius: var(--radie-kort) var(--radie-kort) 0 0;
  aspect-ratio: 16 / 11;
  padding-bottom: 2.5rem;
  background: var(--bild-landskap) right bottom / 100% auto no-repeat, var(--bildplats);
}
html.nytt-utseende .miniatyr.saknas {
  color: var(--dampad);
  background: var(--bild-hus) center bottom / cover no-repeat, var(--himmel);
}

html.nytt-utseende .kort a.rubriklank { text-underline-offset: 0.2em; }
/* Annonsen och kartan står två i bredd och bryts ofta på två rader med stor
   text; ett piller med två rader ser ut som ett ägg, så de får fältens radie. */
html.nytt-utseende .lankknappar .knapp { border-radius: var(--radie); }

/* Stjärnan och utsorteringen som runda ikonknappar. Den tända stjärnan får
   korallens container – fylld mot ihålig står kvar i tecknet. */
html.nytt-utseende :is(.stjarna, .kortikon) { border-radius: 999px; }
html.nytt-utseende .stjarna[aria-pressed='true'] {
  background-color: var(--md-tertiary-container);
  color: var(--md-tertiary);
}

/* Plats och storlek som chip med ikon: en nål för platsen, en planritning
   för storleken. Ikonerna är dekor; texten är densamma som förut. */
html.nytt-utseende .kort > p.plats {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.85rem 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  margin: 0.4rem 0;
}
html.nytt-utseende .kort > p.plats::before {
  content: '';
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  background: var(--gron);
  -webkit-mask: var(--ikon-plats) center / contain no-repeat;
  mask: var(--ikon-plats) center / contain no-repeat;
}
html.nytt-utseende .kort > p.plats.storlek::before {
  -webkit-mask-image: var(--ikon-storlek);
  mask-image: var(--ikon-storlek);
}

html.nytt-utseende .pris {
  font-family: var(--rubrik);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 0.3rem;
}
html.nytt-utseende .pris .slag { font-family: 'Figtree', system-ui, sans-serif; letter-spacing: 0; }
html.nytt-utseende .faktalista { gap: 0.35rem 1rem; }

html.nytt-utseende .hyresrad {
  border-color: transparent;
  border-radius: var(--radie-kort);
  background: var(--yta-kort);
  box-shadow: var(--skugga-kort);
}
html.nytt-utseende .bortalada .hyresrad { border-color: var(--kant-kontroll); box-shadow: none; }

/* Bladet på kartan: rundat upptill och en nivå högre. */
html.nytt-utseende .kartblad {
  background: var(--yta-kort);
  border-color: transparent;
  border-radius: 1.75rem 1.75rem 0 0;
  box-shadow: var(--skugga-kort);
}

/* Utfällbara delar: raden får ett tillståndslager som en knapp, pilen i
   korall vrids med fjädring. */
html.nytt-utseende .vikbar > summary {
  border-radius: 0.75rem;
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
}
html.nytt-utseende .vikbar > summary::before { color: var(--md-tertiary); transition: transform var(--fjader); }

/* ---------------------------------------------------------------- märken

   Chip: tonad container, texten i on-container – högre kontrast än i
   stil.css – och kanten kvar i rollens färg, så att tre märken bredvid
   varandra går att skilja åt också i gråskala tillsammans med tecknet.
   Tecknet (✕ ? ✓) är ikonen. Storleken är 1rem som förut. */
html.nytt-utseende .marke {
  border-radius: 999px;
  border-width: 1.5px;
  padding: 0.3rem 0.85rem 0.3rem 0.7rem;
}
html.nytt-utseende .marke.brist { color: var(--md-on-error-container); border-color: var(--md-error); }
html.nytt-utseende .marke.uppfyllt { color: var(--md-on-uppfyllt-container); border-color: var(--md-uppfyllt); }
html.nytt-utseende .marke.okant { color: var(--md-on-okant-container); border-color: var(--md-okant); }

/* Meddelanden: tonad yta, rundad, texten i on-container. */
html.nytt-utseende .upplysning {
  border-left-width: 0;
  border-radius: var(--radie);
  color: var(--md-on-okant-container);
  padding: 0.9rem 1.1rem;
}
html.nytt-utseende .upplysning.fel { color: var(--md-on-error-container); }

/* ---------------------------------------------------------------- flikraden

   En svävande skiva av ljust glas med tunn skugga, en bit ovanför kanten.
   90 % täckning: även över huvudknappens gröna blir glaset ljust nog för
   den dämpade texten (kontrasten är mätt på blandningen, --md-glas). Den
   valda fliken får korallens pill bakom ikonen och ett fetare, mörkare namn.
   Hela knappen är fortfarande tryckytan, 4,25rem hög ur stil.css. */
html.nytt-utseende nav.botten {
  inset: auto 0.75rem calc(0.75rem + env(safe-area-inset-bottom)) 0.75rem;
  padding: 0.35rem;
  border: 1px solid var(--glas-kant);
  border-radius: 1.75rem;
  background: var(--glas);
  box-shadow: var(--skugga-glas);
}
html.nytt-utseende nav.botten button {
  border-radius: 1.4rem;
  padding-inline: 0.25rem;
  color: var(--md-on-glas-variant);
  font-weight: 500;
  gap: 0.25rem;
}
/* Ingen hinna och ingen skalning över hela fliken – markeringen får lagret. */
html.nytt-utseende nav.botten button:is(:hover, :active, :focus-visible) { background-image: none; }
html.nytt-utseende nav.botten button:active { transform: none; }
html.nytt-utseende nav.botten button:focus-visible { outline-offset: -2px; }
html.nytt-utseende nav.botten :is(.ikon, button > svg) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 2rem;
  border-radius: 999px;
  transition: background-color var(--mjukt), width var(--fjader), transform var(--fjader);
}
html.nytt-utseende nav.botten button:active :is(.ikon, button > svg) { transform: scale(0.9); }
html.nytt-utseende nav.botten button[aria-current='page'] {
  color: var(--md-on-glas);
  box-shadow: none;
  font-weight: 700;
}
html.nytt-utseende nav.botten button[aria-current='page'] :is(.ikon, button > svg) {
  background-color: var(--md-pill);
  color: var(--md-on-pill);
  width: 4.5rem;
}
html.nytt-utseende nav.botten .prick {
  background: var(--md-tertiary);
  color: var(--md-on-tertiary);
}

/* Dator: flikraden svävar överst, ikon och namn på en rad, och markeringen
   ligger bakom hela fliken. Sidhuvudet blir ett rundat block i spalten. */
@media (min-width: 56rem) {
  html.nytt-utseende body { padding-top: 6.5rem; padding-bottom: 2rem; }
  html.nytt-utseende nav.botten { inset: 0.75rem 0.75rem auto 0.75rem; padding-block: 0.4rem; }
  html.nytt-utseende nav.botten :is(.ikon, button > svg) { width: auto; height: auto; }
  html.nytt-utseende nav.botten button[aria-current='page'] {
    background-color: var(--md-pill);
    color: var(--md-on-pill);
  }
  html.nytt-utseende nav.botten button[aria-current='page'] :is(.ikon, button > svg) { background-color: transparent; width: auto; }
  html.nytt-utseende .tillbakarad { margin-inline: 0; top: 5.5rem; border-radius: 1.25rem; }
  html.nytt-utseende section.vy > h1:first-child { margin: 0 0 1rem; border-radius: 1.25rem; }
  /* Flikraden ligger överst: svepet och fokus ska stanna under den. */
  html.nytt-utseende { scroll-padding-top: 6.5rem; }
}

/* ---------------------------------------------------------------- det städade kortet

   Det öppnade huset för Mats (seStadatKort, klassen stadat-kort på <html>).
   Mindre klotter: märkena som text bredvid frågeknappen, planerna
   bredvid varandra, länkarna i en låg rad under det man läser, och
   ta bort-knapparna som små länkar. Målen är fortfarande 3rem höga, som
   allt annat man trycker på. */
html.nytt-utseende.stadat-kort #objektvy .markesrad { gap: 0.35rem 0.9rem; align-items: center; margin: 0.75rem 0 0.5rem; }
html.nytt-utseende.stadat-kort #objektvy .markesrad .marke:is(.brist, .uppfyllt) {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
}
/* Bristerna och de uppfyllda på en rad, frågeknappen under dem. */
html.nytt-utseende.stadat-kort #objektvy .markesrad .frageknapp { order: 1; padding: 0.35rem 0.85rem; font-size: 1rem; }

html.nytt-utseende.stadat-kort #objektvy .visningsformular { margin: 0.9rem 0 0.4rem; gap: 0.4rem; }

/* Får brytas: med stor text i telefonen står knapparna under varandra i
   stället för att texten rinner ut över kanten. */
html.nytt-utseende.stadat-kort #objektvy .lankknappar {
  flex-wrap: wrap;
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--kant);
}
html.nytt-utseende.stadat-kort #objektvy .lankknappar .knapp {
  flex: 1 1 auto;
  min-height: 3rem;
  padding: 0.45rem 0.6rem;
  font-size: 1rem;
  text-align: center;
  justify-content: center;
}

/* Ta bort min röst och ta bort en kommentar: små, dämpade länkar och inga
   knappar som väger lika tungt som rösten. */
/* Två gånger #objektvy: knappregeln högre upp har ett id i sin :not() och
   vinner annars över den här. */
html.nytt-utseende.stadat-kort #objektvy#objektvy :is(.rostknappar + button.mild, .kommentarrad button.mild) {
  border: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  min-height: 3rem;
  padding: 0 0.75rem;
  font-size: 1rem;
  color: var(--dampad);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
html.nytt-utseende.stadat-kort #objektvy#objektvy .kommentarrad button.mild { margin-inline-start: 0.4rem; }

/* Delarna under huvudet som egna kort, ett per del, som i Material 3 och
   familjens andra appar: rösten, kommentarerna, adressen och varje hopfälld
   del i sin ruta med luft emellan. Bläddraren längst ner står fritt. */
html.nytt-utseende.stadat-kort #objektvy > :is(div:not([class]), .adressformular, details.vikbar) {
  background: var(--yta-kort);
  border: 0;
  border-radius: var(--radie-kort);
  box-shadow: var(--skugga-kort);
  margin: 0.75rem 0;
  padding: 0.5rem 1.25rem 1rem;
}
html.nytt-utseende.stadat-kort #objektvy > details.vikbar { padding-block: 0.25rem; }
html.nytt-utseende.stadat-kort #objektvy > details.vikbar[open] { padding-bottom: 1rem; }
html.nytt-utseende.stadat-kort #objektvy > div:not([class]) > h2:first-child { margin-top: 0.75rem; }
html.nytt-utseende.stadat-kort #objektvy > .adressformular > label:first-child { margin-top: 0.75rem; }
/* Rösterna står i ett kort: knapparnas egen ram räcker, ingen extra luft. */
html.nytt-utseende.stadat-kort #objektvy > div:not([class]) > :last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------- rörelserna

   Huskortet för Mats (seKortrorelser, klassen kortrorelser på <html>). Lugna
   och korta rörelser (Mats 2026-10-21: "lite plottrigt", första försöket
   studsade): en ruta glider upp och ner medan innehållet tonar fram, det
   valda röstsvaret byter färg mjukt, ett ändrat märke bland familjens röster
   tonar fram, en ny kommentar tonar in och en borttagen tonar ut. Ingenting
   rör sig när kortet öppnas, bara där man själv tryckt. Bara för den som
   inte bett telefonen om mindre rörelse. En webbläsare utan
   ::details-content fäller ut som förut. Rörelserna själva (@keyframes) står
   i stil.css, eftersom tema.css bara får ha regler. */
@media (prefers-reduced-motion: no-preference) {
  html.nytt-utseende.kortrorelser #objektvy { interpolate-size: allow-keywords; }
  html.nytt-utseende.kortrorelser #objektvy details.vikbar::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition:
      block-size 240ms cubic-bezier(0.2, 0, 0, 1),
      opacity 200ms ease-out,
      content-visibility 240ms allow-discrete;
  }
  html.nytt-utseende.kortrorelser #objektvy details.vikbar[open]::details-content { block-size: auto; opacity: 1; }

  html.nytt-utseende.kortrorelser #objektvy .rostknappar button {
    transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
  }
  html.nytt-utseende.kortrorelser #objektvy .rostdel .rostrakning .marke.ny { animation: tona-in 200ms ease-out both; }
  html.nytt-utseende.kortrorelser #objektvy .kommentarrad.ny { animation: tona-in-lagt 220ms ease-out both; }
  html.nytt-utseende.kortrorelser #objektvy .kommentarrad.bort { animation: tona-ut 180ms ease-in both; }
}
/* Den som bett telefonen om mindre rörelse får inga övergångar, ingen
   fjädring och ingen skalning vid tryck. */
@media (prefers-reduced-motion: reduce) {
  html.nytt-utseende *,
  html.nytt-utseende *::before,
  html.nytt-utseende *::after {
    transition: none !important;
  }
  html.nytt-utseende :is(button, .knapp):not([disabled]):active,
  html.nytt-utseende nav.botten button:active :is(.ikon, button > svg) { transform: none; }
}

/* Tvingade färger (Windows hög kontrast): skuggor, gradienter och tonade ytor
   försvinner, så korten och flikraden får tillbaka en riktig kant. */
@media (forced-colors: active) {
  html.nytt-utseende :is(.kort, .hyresrad) { border-color: CanvasText; }
  html.nytt-utseende nav.botten { border: 1px solid CanvasText; }
  html.nytt-utseende section.vy > h1:first-child { border: 1px solid CanvasText; }
}

/* Material 3 Expressive-komponenterna (seM3e, public/app/m3e.js) i appens egna
   färger och storlekar. Komponenterna temas med sina --m3e-variabler; deras
   egen stil ligger i skuggträdet och når inte resten av sidan. */

/* Rösten: en knappgrupp, samma ifyllda färg för den egna rösten som idag. */
/* De tre knapparna fyller raden och bryts till två rader på en smal telefon.
   En vanlig ram och inte m3e-button-group: gruppen gör den tryckta knappen
   bredare och grannarna smalare, och då rymdes de inte (Mats 2026-10-21). */
html.nytt-utseende.m3e .rostgrupp { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
html.nytt-utseende.m3e .rostgrupp m3e-button {
  flex: 1 1 auto;
  --m3e-button-medium-container-height: 3.5rem;
  --m3e-button-medium-label-text-font-size: 1.125rem;
  --m3e-button-medium-leading-space: 1rem;
  --m3e-button-medium-trailing-space: 1rem;
  --m3e-tonal-button-container-color: var(--md-secondary-container);
  --m3e-tonal-button-unselected-container-color: var(--md-secondary-container);
  --m3e-tonal-button-label-text-color: var(--md-on-secondary-container);
  --m3e-tonal-button-unselected-label-text-color: var(--md-on-secondary-container);
  --m3e-tonal-button-selected-label-text-color: var(--papper);
}
html.nytt-utseende.m3e .rostgrupp m3e-button.rost-ja { --m3e-tonal-button-selected-container-color: var(--uppfyllt); }
html.nytt-utseende.m3e .rostgrupp m3e-button.rost-kanske { --m3e-tonal-button-selected-container-color: var(--okant); }
html.nytt-utseende.m3e .rostgrupp m3e-button.rost-nej { --m3e-tonal-button-selected-container-color: var(--brist); }
/* I mörkt läge är de tre färgerna ljusa: mörk text på dem. */
@media (prefers-color-scheme: dark) {
  html.nytt-utseende.m3e .rostgrupp m3e-button { --m3e-tonal-button-selected-label-text-color: var(--md-surface); }
}

/* Huset överst som kort, delarna under som paneler. */
html.nytt-utseende.m3e #objektvy > m3e-card.huskort-m3e {
  display: block;
  margin: 0 0 0.75rem;
  --m3e-card-shape: var(--radie-kort);
  --m3e-elevated-card-container-color: var(--yta-kort);
  --m3e-elevated-card-text-color: var(--text);
  color: var(--text);
}
html.nytt-utseende.m3e #objektvy > m3e-card.huskort-m3e .kort { background: transparent; box-shadow: none; border: 0; margin: 0; }
html.nytt-utseende.m3e #objektvy > m3e-expansion-panel {
  display: block;
  margin: 0.75rem 0;
  --m3e-expansion-panel-container-color: var(--yta-kort);
  --m3e-expansion-panel-shape: var(--radie-kort);
  --m3e-expansion-panel-open-shape: var(--radie-kort);
  --m3e-expansion-panel-text-color: var(--text);
  --m3e-expansion-header-collapsed-height: auto;
  --m3e-expansion-header-expanded-height: auto;
  --m3e-expansion-header-padding-left: 1.25rem;
  --m3e-expansion-header-padding-right: 1.25rem;
  --m3e-expansion-panel-content-padding: 0 1.25rem 1rem;
  --m3e-expansion-header-toggle-icon-size: 1.75rem;
  /* Lite lugnare än komponentens 250 ms (Mats: "lite för snabb"), med M3:s
     betonade kurva: fart i början, mjuk inbromsning. */
  --m3e-collapsible-animation-duration: 350ms;
  --m3e-collapsible-animation-function: cubic-bezier(0.2, 0, 0, 1);
}
/* Långa rubriker radbryts i stället för att klippas, och raden är minst 3,5rem hög. */
html.nytt-utseende.m3e #objektvy .panelrubrik {
  margin: 0;
  padding-block: 0.85rem;
  font-size: 1.35rem;
  font-weight: 650;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  min-width: 0;
}

/* Listan och menyn: appens egna knappar står kvar, gömda, och M3E-delarna
   speglar dem. */
html.nytt-utseende.m3e :is(nav.botten, #vy-objekt .valrad).speglad { display: none !important; }
html.nytt-utseende.m3e m3e-nav-bar.meny-m3e {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow: var(--skugga-kort);
  --m3e-nav-bar-container-color: var(--yta-kort);
  --m3e-nav-item-label-text-font-size: 1rem;
  --m3e-nav-item-inactive-label-text-color: var(--text);
  --m3e-nav-item-active-label-text-color: var(--text);
  --m3e-nav-item-active-container-color: var(--md-tertiary-container);
  --m3e-nav-item-active-icon-color: var(--md-on-tertiary-container);
  color: var(--text);
}
html.nytt-utseende.m3e m3e-nav-item .ikon { font-size: 1.4rem; line-height: 1; }
html.nytt-utseende.m3e m3e-nav-item .prick-m3e {
  margin-inline-start: 0.3rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--md-tertiary);
  color: var(--md-on-tertiary);
  font-size: 1rem;
}
html.nytt-utseende.m3e m3e-chip-set.filter-m3e:not([hidden]) { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
html.nytt-utseende.m3e m3e-chip-set.filter-m3e m3e-filter-chip {
  --m3e-chip-container-height: 2.75rem;
  --m3e-chip-label-text-font-size: 1rem;
  --m3e-chip-unselected-label-text-color: var(--text);
  --m3e-outlined-chip-outline-color: var(--kant-kontroll);
  --m3e-chip-selected-container-color: var(--md-secondary-container);
  --m3e-chip-selected-label-text-color: var(--md-on-secondary-container);
  --m3e-chip-selected-leading-icon-color: var(--md-on-secondary-container);
}
/* Listans filter i en egen ruta (seFilterruta), med samma yta, rundning och
   skugga som husen under och huskortets delar. Inga streck: rutan räcker
   som gräns, och "Fler filter" står direkt under valen (Mats 2026-10-22:
   "ta bort det gråa strecket ovanför fler filter"). */
html.nytt-utseende .filterruta {
  background: var(--yta-kort);
  border-radius: var(--radie-kort);
  box-shadow: var(--skugga-kort);
  margin: 0.75rem 0 1rem;
  padding: 1rem 1.25rem 0.25rem;
}
html.nytt-utseende .filterruta > .valrad,
html.nytt-utseende.m3e .filterruta > m3e-chip-set.filter-m3e:not([hidden]) { margin: 0 0 0.75rem; }
html.nytt-utseende .filterruta > .flerfilter { border: 0; margin-top: 0; }
html.nytt-utseende .filterruta > .flerfilter[open] { padding-bottom: 0.75rem; }
html.nytt-utseende.m3e #objektlista > m3e-card.listkort-m3e {
  display: block;
  margin: 0 0 1rem;
  --m3e-card-shape: var(--radie-kort);
  --m3e-elevated-card-container-color: var(--yta-kort);
  --m3e-elevated-card-text-color: var(--text);
  color: var(--text);
}
html.nytt-utseende.m3e #objektlista > m3e-card.listkort-m3e > .kort { background: transparent; box-shadow: none; border: 0; margin: 0; }
/* Ramen runt husen (seKortram) står kvar inne i M3E-kortet. */
html.nytt-utseende.kortram.m3e #objektlista > m3e-card.listkort-m3e > .kort:not(.forslag) { border: 1px solid var(--md-outline); }