/* =====================================================================
   Arbetsytan – stil
   Bygger på tokens i site.css (färger, glas, radier). Inga färger hårdkodas
   här, så ljust och mörkt läge fungerar av sig själva.
   ===================================================================== */

/* Attributet hidden ska alltid dölja, även element som har display satt här nedan
   (annars vinner t.ex. .ay-meny{display:flex} över webbläsarens egen regel). */
.ay-sida [hidden]{display:none!important}

/* ---------- Layout: sidopanel + huvudyta ---------- */
/* Hela fönsterbredden används; kanterna linjerar med toppen (12 px in). */
body.ay-sida{padding-top:80px}
/* Ett och samma avstånd mellan alla glasytor (--glipa): toppen, sidopanelerna, dokumentets huvud,
   verktygsraden, pappret och korten. 14 px är också avståndet från toppen till sidopanelerna. */
.ay-sida{--glipa:14px}
.ay{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--glipa);padding:0 12px 60px}
/* Sidopanelen rullar för sig själv om den är lång, men utan synlig rullningslist.
   En mjuk toning upptill/nedtill (data-mer, satt av main.js) visar att det finns mer. */
/* Sidopanelen, verktygsraden och verktygspanelen är flytande glas (se site.css, --lg-*). */
.ay-side{position:sticky;top:80px;align-self:start;max-height:calc(100vh - 92px);overflow:auto;overscroll-behavior:contain;padding:14px 10px;
  background:var(--lg-glans),var(--lg-fill-tat);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border:1px solid transparent;box-shadow:var(--lg-kant),var(--lg-skugga);border-radius:var(--r-sm);scrollbar-width:none}
.ay-side::-webkit-scrollbar{display:none}
.ay-panel{scrollbar-width:none}
.ay-panel::-webkit-scrollbar{display:none}
.ay-panel[data-mer="ned"]{-webkit-mask-image:linear-gradient(#000 calc(100% - 44px),transparent);mask-image:linear-gradient(#000 calc(100% - 44px),transparent)}
.ay-panel[data-mer="upp"]{-webkit-mask-image:linear-gradient(transparent,#000 44px);mask-image:linear-gradient(transparent,#000 44px)}
.ay-panel[data-mer="båda"]{-webkit-mask-image:linear-gradient(transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(transparent,#000 44px,#000 calc(100% - 44px),transparent)}
.ay-side[data-mer="ned"]{-webkit-mask-image:linear-gradient(#000 calc(100% - 44px),transparent);mask-image:linear-gradient(#000 calc(100% - 44px),transparent)}
.ay-side[data-mer="upp"]{-webkit-mask-image:linear-gradient(transparent,#000 44px);mask-image:linear-gradient(transparent,#000 44px)}
.ay-side[data-mer="båda"]{-webkit-mask-image:linear-gradient(transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(transparent,#000 44px,#000 calc(100% - 44px),transparent)}
.ay-main{min-width:0}
.ay-sidebtn{display:none}
.ay-snav{display:flex;flex-direction:column;gap:2px}
.ay-nyknapp{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 2px 12px}
.ay-nyknapp .ik{width:16px;height:16px}
.ay-slbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:16px 10px 6px}
/* Hopfällbara delar: rubriken är en knapp med en pil som vrids när delen fälls ihop.
   Innehållet glider ihop med grid-raden 1fr → 0fr (fungerar i alla moderna webbläsare). */
button.ay-slbl{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 4px);margin:14px 2px 4px;padding:6px 8px;border:0;background:none;border-radius:9px;cursor:pointer;font-family:var(--f-sans);text-align:left}
button.ay-slbl:hover{background:var(--well);color:var(--ink)}
.ay-fallpil{width:14px;height:14px;transition:transform .25s var(--ease)}
[aria-expanded="false"]>.ay-fallpil{transform:rotate(-90deg)}
.ay-fall{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s var(--ease),opacity .2s var(--ease)}
.ay-fall>div{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px}
.ay-fall.stangd{grid-template-rows:0fr;opacity:0}
/* Programmets pil sitter där mappikonen satt. */
.ay-sprogpil{border:0;background:none;color:var(--muted);width:26px;height:30px;border-radius:9px;cursor:pointer;display:grid;place-items:center;flex:none;margin-right:-6px}
.ay-sprogpil:hover{background:var(--well-2);color:var(--ink)}
.ay-slank{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:11px;color:var(--ink-2);font:500 14px var(--f-sans);border:0;background:none;cursor:pointer;text-align:left;text-decoration:none!important}
.ay-slank:hover{background:var(--well)}
.ay-slank.på{background:var(--well-2);color:var(--ink);font-weight:600}
.ay-slank span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ay-slank small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Terminsmappar under ett program */
.ay-stermrad{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;padding:5px 10px 5px 4px;margin-top:2px;border-radius:9px;cursor:pointer;
  font:600 12.5px var(--f-sans);letter-spacing:.02em;color:var(--muted);text-align:left}
.ay-stermrad span{flex:1;min-width:0}
.ay-stermrad small{font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
.ay-stermrad:hover{background:var(--well);color:var(--ink)}
.ay-stermkurser{margin-left:7px;padding-left:6px}
.ay-slank .ik{width:16px;height:16px;color:var(--muted)}
.ay-srad{display:flex;align-items:center;gap:2px;position:relative}
.ay-srad .ay-slank{flex:1;min-width:0}
.ay-sedit{border:0;background:none;color:var(--muted);width:28px;height:28px;border-radius:9px;cursor:pointer;display:grid;place-items:center;opacity:0;flex:none}
.ay-sedit .ik{width:15px;height:15px}
.ay-srad:hover .ay-sedit,.ay-sedit:focus-visible{opacity:1}
.ay-sedit:hover{background:var(--well-2);color:var(--ink)}
@media (hover:none){.ay-sedit{opacity:.7}}
.ay-skurser{display:flex;flex-direction:column;gap:1px;margin-left:12px;padding-left:6px;border-left:1px solid var(--line)}
.ay-sprog{margin-bottom:4px}
.ay-sprog .ay-skurser{margin-top:1px}
.ay-sorphan{font-size:13px;color:var(--muted);margin:6px 10px 2px}
.ay-sny{border:0;background:none;color:var(--muted);font:500 13px var(--f-sans);padding:6px 10px;border-radius:10px;cursor:pointer;text-align:left}
.ay-sny:hover{color:var(--accent);background:var(--well)}
.ay-prick{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;background:var(--c-gra)}
.ay-prick.stor{width:16px;height:16px;margin-right:12px;vertical-align:.08em}

/* ---------- Rubriker i vyerna ---------- */
.ay-vyhead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:12px 0 24px}
.ay-vyhead .kicker{margin-bottom:8px}
.ay-h1{font-size:clamp(30px,3.6vw,44px);line-height:1.05;letter-spacing:-.035em;font-weight:700;margin:0 0 6px}
.ay-h2{font-size:22px;letter-spacing:-.02em;margin:34px 0 4px}
.ay-h3{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink);margin:22px 0 14px;text-decoration:none!important}
.ay-h3 small{font-size:12px;color:var(--muted);font-weight:500}
.ay-h3:hover{color:var(--accent)}
.ay-filter{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
/* Sorteringen ser ut som filterknapparna: en kapsel med egen pil (webbläsarens egen pil döljs). */
.ay-sortwrap{position:relative;display:inline-flex;align-items:center;color:var(--muted)}
.ay-sort{-webkit-appearance:none;appearance:none;font:500 14px var(--f-sans);color:var(--ink);background:var(--lg-glans),var(--lg-fill-tat);box-shadow:var(--lg-kant),0 1px 2px rgba(25,25,45,.06);border:0;border-radius:var(--r-pill);padding:10px 40px 10px 18px;cursor:pointer;transition:background .2s var(--ease)}
.ay-sort:hover{background:var(--lg-glans),var(--bg-2)}
.ay-sort:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.ay-sortwrap .ik{position:absolute;right:15px;width:15px;height:15px;pointer-events:none}
.ay-tom{padding:34px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px;border-radius:var(--r-sm)}
.ay-tom .big{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0}
/* Knappar med ikon: ikon och text på samma rad */
.ay .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.ay .btn .ik{width:16px;height:16px}

/* ---------- Dokumentkort ---------- */
.ay-rutnat{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--glipa)}
.ay-kort{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 18px 16px 22px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none!important;overflow:hidden;
  /* Flytande glas, som verktygsraden och Nytt dokument-kortet (ljusbrytning i kanten via glas.js).
     Fyllningen är den tätare varianten, så att utdraget går att läsa mot den rörliga bakgrunden. */
  background:var(--lg-glans),var(--lg-fill-tat);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-lins,var(--lg-blur));box-shadow:var(--lg-kant),var(--lg-skugga);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ay-kort::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--f,var(--c-gra))}
.ay-kort:hover{transform:translateY(-2px);box-shadow:var(--lg-kant),var(--glass-shadow)}
.ay-kort h3{font-size:17px;line-height:1.3;letter-spacing:-.01em;margin:0}
/* Det tomma kortet sist i varje rutnät: Nytt dokument. Flytande glas (samma material som
   verktygsraden, med ljusbrytning i Chromium via glas.js) och ett plus i mitten. */
.ay-nykort{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:150px;padding:16px;border:0;border-radius:var(--r-sm);cursor:pointer;
  font:600 14.5px var(--f-sans);color:var(--ink-2);background:var(--lg-glans),var(--lg-fill);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-lins,var(--lg-blur));
  box-shadow:var(--lg-kant),var(--lg-skugga);transition:transform .25s var(--ease),color .2s var(--ease),background .2s var(--ease),box-shadow .25s var(--ease)}
.ay-nykort:hover,.ay-nykort:focus-visible{transform:translateY(-2px);color:var(--accent);background:var(--lg-glans),var(--lg-fill-tat);box-shadow:var(--lg-kant),var(--glass-shadow);outline:none}
.ay-nykort:focus-visible{box-shadow:var(--lg-kant),0 0 0 3px var(--accent-soft)}
.ay-nykortplus{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--lg-glans),var(--lg-fill-tat);box-shadow:var(--lg-kant);color:inherit;transition:background .2s var(--ease)}
.ay-nykort:hover .ay-nykortplus{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.ay-nykortplus .ik{width:22px;height:22px}
.ay-korttopp{display:flex;justify-content:space-between;align-items:center;gap:8px}
/* Dokumenttyperna har var sin färg: text blå, tankekarta lila, lösningsschema orange.
   Färgen syns i typens etikett och som en svag ton i kortets hörn. Kanten till
   vänster är fortfarande kursens färg, så båda går att se på en gång. */
.ay-sida{--t-text:var(--c-bla);--t-karta:var(--c-lila);--t-schema:var(--c-orange);--t-pdf:var(--c-rod,#E5484D)}
[data-typ="pdf"]{--tf:var(--t-pdf)}
[data-typ="text"]{--tf:var(--t-text)}
[data-typ="karta"]{--tf:var(--t-karta)}
[data-typ="schema"]{--tf:var(--t-schema)}
.ay-kort{isolation:isolate}
.ay-kort::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--tf,transparent) 11%,transparent),transparent 62%)}
.ay-korttyp{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--tf,var(--muted)) 88%,var(--ink));background:color-mix(in srgb,var(--tf,var(--muted)) 13%,transparent);padding:4px 9px 4px 7px;border-radius:var(--r-pill)}
.ay-typchip{display:inline-flex;align-items:center;gap:8px}
.ay-typprick{width:9px;height:9px;border-radius:50%;background:var(--tf);flex:none}
.chip[aria-pressed="true"] .ay-typprick{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.ay-korttyp .ik{width:14px;height:14px}
.ay-kortutdrag{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.ay-kortfot{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.ay-kortkurs{font-size:12px;color:var(--muted);margin-right:4px;align-self:center}
.ay-etikett{display:inline-flex;align-items:center;gap:6px;font:600 11.5px var(--f-sans);padding:4px 10px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--f) 14%,transparent);color:color-mix(in srgb,var(--f) 80%,var(--ink))}
.ay-etikett::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--f)}
.ay-etikett.knapp{border:1px dashed color-mix(in srgb,var(--f) 45%,transparent);background:none;color:var(--muted);cursor:pointer;font-size:12px;padding:5px 11px}
.ay-etikett.knapp[aria-pressed="true"]{border-style:solid;border-color:transparent;background:color-mix(in srgb,var(--f) 16%,transparent);color:color-mix(in srgb,var(--f) 80%,var(--ink))}
.ay-etikett.knapp:hover{border-color:var(--f)}

/* ---------- Dokumentvyn ---------- */
.ay-dokhead{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--glipa)}
/* Dokumentets huvud (Tillbaka, kurs, titel, etiketter) ligger på en glasskiva, som verktygsraden,
   så att titeln läses lugnt mot den rörliga bakgrunden. Ljusbrytningen i kanten kommer från glas.js. */
.ay-dokhead{padding:14px 22px 16px;border-radius:28px;
  background:var(--lg-glans),var(--lg-fill);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-lins,var(--lg-blur));
  box-shadow:var(--lg-kant),var(--lg-skugga)}
/* Glaset (backdrop-filter) gör huvudet till ett eget lager; utan detta hamnar menyerna (⋯, Ladda ner)
   under verktygsraden. Höj huvudet bara medan en meny är öppen, så att det annars glider in under raden. */
.ay-dokhead{position:relative}
.ay-dokhead:has(.ay-meny:not([hidden])){z-index:20}
html.hyper .ay-dokhead{padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@media print{.ay-dokhead{padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}}
.ay-stig{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ay-tillbaka{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--f-sans);color:var(--f,var(--accent));padding:6px 12px 6px 8px;border:0;border-radius:var(--r-pill);background:color-mix(in srgb,var(--f,var(--accent)) 12%,transparent);cursor:pointer;transition:background .2s var(--ease)}
.ay-tillbaka:hover{background:color-mix(in srgb,var(--f,var(--accent)) 20%,transparent)}
.ay-tillbaka .ik{width:15px;height:15px;transform:rotate(180deg)}
.ay-kursbyte{width:auto;font-size:13px;padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;color:var(--muted)}
.ay-titel{font:700 clamp(28px,3.4vw,42px)/1.12 var(--f-sans);letter-spacing:-.035em;color:var(--ink);background:none;border:0;outline:none;padding:6px 0;width:100%;border-radius:8px}
.ay-titel:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}
.ay-dokrad{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ay-etiketter{display:flex;flex-wrap:wrap;gap:6px}
.ay-status-text{margin-right:auto}
.ay-dokknappar{display:flex;gap:6px;flex-wrap:wrap}
.ay-dokknappar .btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px}
.ay-dokknappar .btn .ik{width:16px;height:16px}
.ay-ikonknapp{padding:9px 11px!important}
/* Texten | handtaget | verktygspanelen. Panelens bredd styrs av handtaget (--panelbredd);
   clamp() håller den mellan 260 px och så bred att texten ändå får minst 420 px. */
.ay-dokgrid{display:grid;grid-template-columns:minmax(0,1fr) var(--glipa) clamp(260px,var(--panelbredd,360px),calc(100% - 434px));align-items:start}
.ay-dra{align-self:stretch;position:relative;cursor:col-resize;touch-action:none;outline:none}
.ay-dra::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;border-radius:2px;background:transparent;transition:background .2s var(--ease)}
/* Greppet: en liten knopp med tre prickar som följer med mitt på skärmen när man rullar. */
.ay-dra i{position:sticky;top:calc(50vh - 18px);display:block;width:10px;height:36px;margin:0 auto;border-radius:6px;
  background:radial-gradient(circle,var(--muted) 1.1px,transparent 1.6px) center/100% 7px repeat-y content-box,var(--bg-2);
  padding:8px 0;border:1px solid var(--line-strong);box-shadow:0 1px 4px rgba(0,0,0,.08);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.ay-dra:hover::before,.ay-dra:focus-visible::before,.ay-drar .ay-dra::before{background:var(--accent)}
.ay-dra:hover i,.ay-dra:focus-visible i,.ay-drar .ay-dra i{border-color:var(--accent);transform:scaleY(1.12)}
/* Medan man drar: ingen textmarkering, och pekaren är en dra-pil överallt. */
.ay-drar,.ay-drar *{cursor:col-resize!important;user-select:none!important;-webkit-user-select:none!important}
.ay-dokmain,.ay-dokkolumn{min-width:0}
/* Dokumentets knappar står i samma rad som Tillbaka, längst till höger. */
.ay-stig .ay-dokknappar{margin-left:auto}

/* Rullgardinsmeny */
.ay-menywrap{position:relative}
.ay-meny{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:240px;padding:6px;border-radius:16px;background:var(--lg-glans),var(--lg-fill-tat);-webkit-backdrop-filter:blur(24px) saturate(185%);backdrop-filter:blur(24px) saturate(185%);border:1px solid transparent;box-shadow:var(--lg-kant),0 18px 50px -14px rgba(0,0,0,.3);display:flex;flex-direction:column}
.ay-menypost{border:0;background:none;text-align:left;font:500 14px var(--f-sans);color:var(--ink);padding:10px 12px;border-radius:10px;cursor:pointer}
.ay-menypost:hover,.ay-menypost:focus-visible{background:var(--well);outline:none}
.ay-farligtext{color:var(--no)!important}

/* ---------- Verktygsraden ---------- */
.ay-bar{display:flex;flex-wrap:wrap;gap:6px 13px;align-items:center;justify-content:center;padding:8px;margin-bottom:var(--glipa);border-radius:18px;position:sticky;top:80px;z-index:5;
  background:var(--lg-glans),var(--lg-fill-tat);-webkit-backdrop-filter:var(--lg-lins,var(--lg-blur));backdrop-filter:var(--lg-lins,var(--lg-blur));border:1px solid transparent;box-shadow:var(--lg-kant),var(--lg-skugga)}
/* Verktygsraden ligger över text: lite mer oskärpa än sökfältet, så att ikonerna syns tydligt. */
.ay-bar{--lg-blur-lins:blur(6px) saturate(185%)}
/* Har raden fastnat i toppen (pappret rullar under den): 8 px bredare än pappret på var sida. */
.ay-bar{transition:margin .25s var(--ease),box-shadow .25s var(--ease)}
.ay-bar.fast{margin-left:-8px;margin-right:-8px;box-shadow:var(--lg-kant),var(--glass-shadow)}
@media (max-width:560px){.ay-bar.fast{margin-left:-4px;margin-right:-4px}}
/* Avgränsaren ritas i mellanrummet mellan grupperna, så att den inte påverkar var raden bryts. */
.ay-bargrp{display:flex;gap:2px;align-items:center;position:relative}
.ay-bargrp::after{content:"";position:absolute;right:-7px;top:5px;bottom:5px;width:1px;background:var(--line)}
.ay-bargrp:last-child::after,.ay-bargrp.radslut::after{display:none}
.ay-tb{border:0;background:none;color:var(--ink-2);min-width:34px;height:34px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 14px var(--f-sans);padding:0 8px}
.ay-tb:hover{background:var(--well)}
.ay-tb[aria-pressed="true"]{background:var(--well-2);color:var(--ink)}
.ay-tb .ik{width:18px;height:18px}
.ay-tbt{font-size:13px;font-weight:500}
.ay-pennor{gap:4px}
.ay-penna{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 8px;border-radius:9px;font:500 12px var(--f-sans);color:var(--ink-2);background:none}
.ay-penna i{width:14px;height:14px;border-radius:4px;flex:none}
.ay-penna[data-m="rek"] i{background:var(--m-rek)}.ay-penna[data-m="rf"] i{background:var(--m-rf)}.ay-penna[data-m="def"] i{background:var(--m-def)}.ay-penna[data-m="pra"] i{background:var(--m-pra)}.ay-penna[data-m="vik"] i{background:var(--m-vik)}
.ay-penna i{box-shadow:inset 0 0 0 1px var(--line-strong)}
.ay-penna:hover{background:var(--well)}
/* Vald penna (verktygsläge): fylld bakgrund och en ring i pennans färg. */
.ay-penna[aria-pressed="true"],.ay-tb[data-verktyg][aria-pressed="true"]{background:var(--bg-2);color:var(--ink);box-shadow:0 0 0 2px var(--accent),0 2px 8px -3px rgba(0,0,0,.2)}
.ay-penna[aria-pressed="true"] i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}

/* ---------- Verktygshjulet (håll Alt / ⌥) ---------- */
/* Ingen skiva bakom hjulet: i stället blir hela sidan suddig (.ay-hjulslöja). */
.ay-hjulslöja{position:fixed;inset:0;z-index:94;background:color-mix(in srgb,var(--bg) 22%,transparent);
  -webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);animation:slöjaIn .18s var(--ease)}
@keyframes slöjaIn{from{opacity:0}to{opacity:1}}
.ay-hjul{position:fixed;z-index:95;width:344px;height:344px;margin:-172px 0 0 -172px;border-radius:50%;
  animation:hjulIn .16s var(--ease);user-select:none;-webkit-user-select:none}
@keyframes hjulIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
/* Mitten och ringarna är flytande glas (samma material som sökfältet: --lg-*), med ljusbrytning i Chromium (glas.js). */
.ay-hjulmitt{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;
  background:var(--lg-glans),var(--lg-fill);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-lins,var(--lg-blur));box-shadow:var(--lg-kant),var(--lg-skugga);display:grid;place-items:center;text-align:center;font:600 12px/1.25 var(--f-sans);color:var(--ink-2);padding:10px}
.ay-hjulmitt span{position:relative;z-index:1}
/* Visaren: en prick vid mittens kant som pekar mot det verktyg man siktar på. */
.ay-hjulpost{position:absolute;width:130px;transform:translate(-50%,-23px);display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-align:center}
/* Ringar: en ofylld cirkel i verktygets färg med verktygets ikon i mitten (överstrykningspenna,
   sudd eller textmarkör). Färgen dras en aning mot mörkt i ljust läge och mot ljust i mörkt,
   så att även gult syns. Pekar man på en ring växer den och fylls svagt med färgen. */
.ay-hjulprick{--pl:color-mix(in srgb,var(--pf,var(--ink-2)) 84%,#000);position:relative;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;color:var(--pl);
  background:var(--lg-glans),var(--lg-fill);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-lins,var(--lg-blur));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--pl) 85%,transparent),var(--lg-kant),var(--lg-skugga);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s var(--ease)}
[data-theme="dark"] .ay-hjulprick{--pl:color-mix(in srgb,var(--pf,var(--ink-2)) 88%,#fff)}
.ay-hjulprick .ik{width:21px;height:21px}
.ay-verktygsbild{width:26px;height:26px;overflow:visible}
.ay-verktygsbild .kant{stroke:#1d1d1f}
[data-theme="dark"] .ay-verktygsbild .kant{stroke:#0b0b0d}
/* Etiketten på en liten glasbricka, så att den går att läsa oavsett text bakom. */
.ay-hjulnamn{font:600 12px/1.25 var(--f-sans);color:var(--ink);white-space:nowrap;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--lg-glans),var(--lg-fill-tat);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-kant),0 2px 8px -4px rgba(0,0,0,.25)}
.ay-hjulpost.på .ay-hjulprick{transform:scale(1.18);background:var(--lg-glans),color-mix(in srgb,var(--pl) 24%,var(--lg-fill-tat))}
/* Valt verktyg: svagt ifylld och fet etikett. */
.ay-hjulpost.nu .ay-hjulprick{background:var(--lg-glans),color-mix(in srgb,var(--pl) 14%,var(--lg-fill-tat))}
.ay-hjulpost.nu .ay-hjulnamn{font-weight:700;color:var(--ink)}
.ay-hjulpost.på .ay-hjulnamn{color:var(--ink)}
/* Pennornas namn syns på breda skärmar; annars bara färgen (namnet finns i verktygstipset). */
.ay-edwrap{container-type:inline-size}
@container (max-width:780px){.ay-penna span{display:none}.ay-penna{padding:0 7px}}

/* ---------- Pappret och texten ---------- */
/* Pappret i flytande glas, men tätare än korten (86 % yta), så att texten är lugn att läsa och skriva i.
   Ingen ljusbrytning i kanten: pappret ändrar höjd för varje rad, och kartan skulle räknas om hela tiden. */
.ay-papper{--kant:clamp(18px,3vw,48px);background:var(--lg-glans),color-mix(in srgb,var(--bg-2) 86%,transparent);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border-radius:var(--r);box-shadow:var(--lg-kant),var(--lg-skugga);border:1px solid transparent;padding:clamp(18px,2.4vw,36px) var(--kant);min-height:62vh}
/* Texten fyller pappret; bredden bestämmer du med handtaget. */
.ay-papper .ay-ed{max-width:none}
.ay-ed{font-size:var(--bas);line-height:var(--radavstand,1.72);color:var(--ink);outline:none;max-width:72ch;margin:0 auto;word-wrap:break-word}
.ay-ed:focus-visible{outline:none}
.ay-papper .ay-ed{min-height:46vh;cursor:text}
.ay-ed>*:first-child{margin-top:0}
.ay-ed p{margin:0 0 .85em;color:var(--ink)}
/* site.css begränsar alla h2 till 20 tecken (för sidrubriker); inte här */
.ay-ed h2,.ay-ed h3,.ay-ed h4,.ay-dlghead h2,.ay-h2,#ayPrint h1{max-width:none;text-wrap:wrap}
.ay-ed h2{font-size:1.45em;letter-spacing:-.02em;line-height:1.25;margin:1.6em 0 .45em}
.ay-ed h3{font-size:1.15em;letter-spacing:-.01em;line-height:1.3;margin:1.3em 0 .35em}
.ay-ed h4{font-size:1em;margin:1.1em 0 .3em}
.ay-ed ul,.ay-ed ol{margin:0 0 .9em;padding-left:1.4em}
.ay-ed li{margin:.2em 0}
/* Punktlistor med bindestreck (-) i stället för prickar, även i utskriften. */
.ay-ed ul{list-style-type:"-\2002"}
.ay-ed ul li::marker{color:var(--ink-2)}
/* Underpunkter: ett steg in, tätare, och egna tecken per nivå (- ◦ ▪, och 1 a i som i en disposition). */
.ay-ed li>ul,.ay-ed li>ol{margin:.2em 0 .1em;padding-left:1.3em}
.ay-ed ul ul{list-style-type:"◦\2002"}
.ay-ed ul ul ul{list-style-type:"▪\2002"}
.ay-ed ol ol{list-style-type:lower-alpha}
.ay-ed ol ol ol{list-style-type:lower-roman}
.ay-ed blockquote{margin:0 0 1em;padding:.4em 0 .4em 1.1em;border-left:3px solid var(--f,var(--accent));color:var(--ink-2);font-family:var(--f-serif);font-size:1.12em;font-style:italic}
/* Avdelare: en tunn linje mellan delar av texten. Klicka på den och tryck Backsteg för att ta bort den. */
.ay-ed hr{border:0;height:1.5px;background:var(--line-strong);margin:1.6em 0;border-radius:1px}
.ay-ed hr:hover{background:var(--muted)}
.ay-ed em{color:var(--ink-2)}
.ay-ed table{border-collapse:collapse;width:100%;margin:0 0 1em;font-size:.94em}
.ay-ed th,.ay-ed td{border:1px solid var(--line-strong);padding:8px 10px;vertical-align:top;text-align:left;min-width:60px}
.ay-ed th{background:var(--well);font-weight:600}
.ay-ed a{text-decoration:underline;text-underline-offset:3px}
.ay-ed .lag{font-size:.78em;vertical-align:.08em;margin:0 .1em}
.ay-ed a.dl{display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-weight:600;font-size:.92em;padding:1px 9px 1px 7px;border-radius:var(--r-pill);background:var(--well);color:var(--ink);cursor:pointer}
.ay-ed a.dl::before{content:"↗";color:var(--accent);font-size:.9em}
.ay-ed a.dl.trasig{opacity:.55;text-decoration:line-through}
.ay-ed mark[data-auto]{text-decoration:underline dotted 1.5px color-mix(in srgb,var(--ink) 35%,transparent);text-underline-offset:3px}
/* Textstorlek (data-t) räknas från dokumentets bas, inte från rubriken den står i.
   Basen är olika på skärmen, i förhandsvisningen och på papper. */
/* Grundstorleken: 17 px gånger dokumentets skala (stegaren i verktygsraden sätter --skala). */
.ay-ed{--bas:calc(17px * var(--skala, 1))}
.ay-forhand .ay-ed{--bas:15px}
.ay-ed span[data-t="9"]{font-size:calc(var(--bas) * 9 / 12)}.ay-ed span[data-t="10"]{font-size:calc(var(--bas) * 10 / 12)}.ay-ed span[data-t="11"]{font-size:calc(var(--bas) * 11 / 12)}.ay-ed span[data-t="14"]{font-size:calc(var(--bas) * 14 / 12)}.ay-ed span[data-t="16"]{font-size:calc(var(--bas) * 16 / 12)}.ay-ed span[data-t="18"]{font-size:calc(var(--bas) * 18 / 12)}.ay-ed span[data-t="20"]{font-size:calc(var(--bas) * 20 / 12)}.ay-ed span[data-t="24"]{font-size:calc(var(--bas) * 24 / 12)}.ay-ed span[data-t="28"]{font-size:calc(var(--bas) * 28 / 12)}
/* Justering per stycke. Marginaljusterad svensk text avstavas, så att det inte blir stora glipor. */
.ay-ed [data-j="center"]{text-align:center}
.ay-ed [data-j="right"]{text-align:right}
.ay-ed [data-j="justify"]{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
/* Stegaren i verktygsraden: − 12 + */
/* Hopfällbara delar. Under delen, i mitten, står en liten pil uppåt (fäll ihop) som syns
   när man pekar på delen eller skriver i den. Hopfälld syns bara första raden och tre
   prickar på samma plats (fäll ut). Pilen och prickarna är ritade med en mask: formen
   kommer från SVG-bilden, färgen från bakgrunden. Därför kan de vara grå i vila och få
   sidans gradient när man pekar på dem, i både ljust och mörkt läge.
   Klickytan är remsan under delen (padding-bottom), se påKnappen i editor.js. */
.ay-ed section[data-fall]{position:relative;padding-bottom:24px;margin-bottom:.35em}
.ay-ed section[data-fall]>:last-child{margin-bottom:0}
.ay-ed section[data-fall]::after{content:"";position:absolute;left:50%;bottom:3px;width:24px;height:12px;margin-left:-12px;cursor:pointer;
  background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M8 8l4-4 4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M8 8l4-4 4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transition:opacity .2s var(--ease)}
/* Pilen syns bara när man pekar på delen eller skriver i den (och alltid, svagt, på pekskärmar). */
.ay-ed section[data-fall]:hover::after,.ay-ed section[data-fall].aktiv::after{opacity:1}
@media (hover:none){.ay-ed section[data-fall]::after{opacity:.6}}
/* Pekar man på pilen eller prickarna får de gradienten. */
.ay-ed.ay-pålist section[data-fall]:hover::after{background:var(--grad)}
.ay-ed.ay-pålist,.ay-ed.ay-pålist *{cursor:pointer!important}
/* Hopfälld: bara första raden, och prickarna (som alltid syns, så att man ser att något är dolt). */
.ay-ed section.stangd>*:not(:first-child){display:none}
.ay-ed section.stangd>:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:0;color:var(--ink-2)}
.ay-ed section.stangd::after{opacity:1;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Ccircle cx='5' cy='6' r='2'/%3E%3Ccircle cx='12' cy='6' r='2'/%3E%3Ccircle cx='19' cy='6' r='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Ccircle cx='5' cy='6' r='2'/%3E%3Ccircle cx='12' cy='6' r='2'/%3E%3Ccircle cx='19' cy='6' r='2'/%3E%3C/svg%3E")}
.ay-storlek{gap:0}
.ay-storlek .ay-tb{min-width:32px;padding:0 6px}
.ay-storlek .ay-tb:disabled{opacity:.35;cursor:default;background:none}
.ay-storleksvisning{min-width:28px;text-align:center;font:600 14.5px var(--f-sans);color:var(--ink)}
/* Skrivna tecken i verktygsraden (H1, H2, A, §) i sidans typsnitt */
.ay-tbtyp{font:600 14.5px var(--f-sans)}
.ay-tbA{font-family:var(--f-sans);font-weight:600;line-height:1}
.ay-tbA.liten{font-size:12.5px;padding-top:3px}
.ay-tbA.stor{font-size:19px}
.ay-tbtecken{font:600 17px/1 var(--f-sans)}
.ay-ny{animation:ayNy 2.4s var(--ease)}
@keyframes ayNy{0%,30%{background:var(--accent-soft);box-shadow:0 0 0 6px var(--accent-soft)}100%{background:transparent;box-shadow:0 0 0 6px transparent}}
.ay-las{max-width:none}

/* ---------- Verktygspanelen ---------- */
.ay-panel{position:sticky;top:80px;max-height:calc(100vh - 92px);overflow:auto;border-radius:var(--r-sm);padding:12px;scrollbar-width:thin;
  background:var(--lg-glans),var(--lg-fill-tat);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border:1px solid transparent;box-shadow:var(--lg-kant),var(--lg-skugga)}
/* Två rader: verktygen utan AI överst, AI-verktygen under (brytningen är .ay-flikbryt). Varje flik är så bred som sin text. */
.ay-flikar{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px;background:var(--well);margin-bottom:14px}
.ay-flik{flex:1 1 auto;border:0;background:none;color:var(--ink-2);font:500 13px var(--f-sans);padding:8px 10px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.ay-flik:hover{color:var(--ink)}
.ay-flik[aria-selected="true"]{background:var(--bg-2);color:var(--ink);font-weight:600;box-shadow:0 2px 8px -3px rgba(0,0,0,.18)}
.ay-flik{position:relative}
.ay-flikbryt{flex-basis:100%;height:0}
/* AI-märket sitter i flikens hörn, så att det inte tränger texten */
.ay-aibadge{position:absolute;top:3px;right:4px;display:grid;place-items:center;color:var(--accent-2)}
.ay-aibadge .ik{width:11px;height:11px}
.ay-flikinnehall{padding:2px 4px 6px}
.ay-flikinnehall>*>.small:first-child{margin-top:0}
.ay-psek{margin:0 0 20px}
.ay-psek .lbl{display:flex;align-items:center;gap:8px}
.ay-antal{font-size:11px;background:var(--well-2);color:var(--ink-2);border-radius:var(--r-pill);padding:1px 8px;letter-spacing:0}
.ay-drad{padding:10px 0;border-bottom:1px solid var(--line)}
.ay-drad:last-child{border-bottom:0}
.ay-drad>small{display:block;font-size:12px;color:var(--muted);margin:2px 0 0 20px}
.ay-dradtitel{border:0;background:none;padding:0;display:flex;align-items:center;gap:10px;font:600 14.5px var(--f-sans);color:var(--ink);cursor:pointer;text-align:left}
.ay-dradtitel:hover span{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ay-varfor{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 0 20px}
.ay-varfor .lag,.ay-kpill{font-size:11.5px;padding:3px 9px}
.ay-kpill{display:inline-flex;align-items:center;font-weight:600;background:var(--well-2);color:var(--ink-2);border-radius:var(--r-pill);line-height:1.35}
.ay-begr{font-size:12.5px;color:var(--muted);font-style:italic}
.ay-lank{border:0;background:none;padding:0;font:600 13.5px var(--f-sans);color:var(--accent);cursor:pointer;text-align:left}
.ay-lank:hover{text-decoration:underline;text-underline-offset:3px}
.ay-kforslag,.ay-dubb,.ay-forslag,.ay-fallkort{border-radius:14px;background:var(--well);padding:12px 14px;margin:0 0 10px;display:flex;flex-direction:column;gap:8px}
.ay-kforslag p,.ay-dubb p,.ay-forslag p,.ay-fallkort p{margin:0}
.ay-ftopp{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ay-ftopp small{color:var(--muted);font-size:12.5px}
.ay-ftyp{font:700 11px var(--f-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--f,var(--accent))}
.ay-fcitat{border:0;background:var(--bg-2);border-radius:10px;padding:8px 10px;font:italic 13.5px/1.5 var(--f-sans);color:var(--ink-2);text-align:left;cursor:pointer;border-left:3px solid var(--f,var(--line-strong))}
.ay-fcitat:hover{color:var(--ink)}
.ay-forslag{border-left:4px solid var(--f)}
.ay-ftext{font-size:15px;line-height:1.55}
.ay-forslag .gact .btn,.ay-kforslag .gact .btn,.ay-dubb .gact .btn,.ay-fallkort .gact .btn{padding:8px 14px;font-size:13px}
.ay-sokform{display:flex;gap:8px}
.ay-sokform .gin{padding:10px 14px;font-size:15px}
.ay-sokform .btn{display:inline-flex;align-items:center;gap:6px;flex:none}
.ay-sokform .ik{width:15px;height:15px}
.ay-fallrad{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.ay-fallrad .flink{display:inline-flex;align-items:center;gap:5px}
.ay-fallrad .ik{width:14px;height:14px}
.ay-fallres{margin-top:12px}
.ay-lagar .btn.ghost{margin-top:10px}

/* AI-flikarna */
.ay-aiflik{display:flex;flex-direction:column;gap:14px}
.ay-aititel{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px}
.ay-aihead .small{margin:0}
.ay-aiinfo{margin:0;flex-basis:100%}
.ay-gate{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;background:var(--well)}
.ay-gate .small{margin:0}
.ay-legend{display:flex;flex-wrap:wrap;gap:6px}
.ay-legend span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:6px}
.ay-legend [data-m="rek"]{background:var(--m-rek)}.ay-legend [data-m="rf"]{background:var(--m-rf)}.ay-legend [data-m="def"]{background:var(--m-def)}.ay-legend [data-m="pra"]{background:var(--m-pra)}.ay-legend [data-m="vik"]{background:var(--m-vik)}
.ay-mlista{display:flex;flex-direction:column;gap:2px}
.ay-mrad{border:0;background:none;text-align:left;padding:8px 6px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:3px;font:14px/1.45 var(--f-sans);color:var(--ink)}
.ay-mrad:hover{background:var(--well)}
.ay-mrad small{color:var(--muted);font-size:12.5px}
.ay-sam .ay-karna{font-size:16px;font-weight:600;line-height:1.5}
.ay-punkter{padding-left:1.2em;margin:0 0 12px;font-size:14.5px;line-height:1.55}
.ay-punkter li{margin:0 0 6px}
.ay-punkter .lag{font-size:11px;padding:2px 8px}
.ay-begrepp{margin:0 0 12px;font-size:14px}
.ay-begrepp dt{font-weight:600;margin-top:8px}
.ay-begrepp dd{margin:2px 0 0;color:var(--ink-2)}
.ay-omdome{font-size:15.5px;line-height:1.55}
.ay-styrkor{margin:0 0 14px;padding-left:1.2em;font-size:14px;color:var(--ink-2)}
.ay-styrkor li::marker{content:"✓  ";color:var(--ok)}

/* ---------- Tankekartan ---------- */
.ay-kartyta{position:relative;overflow:auto;height:max(520px,calc(100vh - 300px));border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--glass-shadow-sm);display:flex;padding:12px;outline:none;cursor:grab;
  background-image:radial-gradient(var(--line-strong) 1px,transparent 1px);background-size:22px 22px}
.ay-kartyta:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}
.ay-kartyta svg{display:block;max-width:none;flex:none;margin:auto}   /* margin:auto centrerar utan att klippa av vänsterkanten när kartan är större än ytan */
.ay-kartyta.panorerar{cursor:grabbing;user-select:none}
.ay-kartyta .nod.drar{opacity:.8;pointer-events:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.ay-kartyta .nod.mål>rect:first-child{stroke:var(--accent);stroke-width:3px;filter:drop-shadow(0 0 8px var(--accent-soft))}
.ay-kartyta .nodplus{cursor:pointer}
.ay-kartyta .nodplus:hover circle{fill:var(--accent-soft)}
.ay-kartyta .nod{cursor:pointer}
.ay-kartyta .nod:hover rect:first-child{filter:brightness(.97)}
.ay-nodin{position:absolute;z-index:3;font:400 14.5px/20px var(--f-sans);text-align:center;color:var(--ink);background:var(--bg-2);border:2px solid var(--accent);border-radius:11px;padding:8px 12px;outline:none;resize:none;overflow:hidden;box-shadow:0 10px 30px -10px rgba(0,0,0,.35);cursor:text}
.ay-nodin[data-djup="0"]{font-weight:600;font-size:18px}
.ay-nodin[data-djup="1"]{font-weight:600;font-size:15px}
.ay-kartips{font-size:12.5px;color:var(--muted);margin:10px 4px 0}
.ay-fargval{gap:4px}
.ay-fargval.av{opacity:.4}
.ay-farg{width:24px;height:24px;border-radius:50%;border:0;background:var(--f);cursor:pointer;display:grid;place-items:center;color:#fff;padding:0;flex:none}
.ay-farg .ik{width:13px;height:13px;stroke-width:3;opacity:0}
.ay-farg[aria-pressed="true"] .ik,.ay-farg[aria-checked="true"] .ik{opacity:1}
.ay-farg:hover{transform:scale(1.12)}
.ay-fargrad{display:flex;flex-wrap:wrap;gap:8px}
.ay-fargrad .ay-farg{width:30px;height:30px}

/* ---------- Lösningsschemat ---------- */
.ay-schema{display:flex;flex-direction:column;gap:14px}
.ay-sfraga,.ay-sslut,.ay-steg{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--glass-shadow-sm);padding:18px 20px}
.ay-ruta{width:100%;resize:none;overflow:hidden;font:15px/1.55 var(--f-sans);color:var(--ink);background:var(--well);border:1px solid transparent;border-radius:10px;padding:9px 12px;outline:none;min-height:40px}
.ay-ruta:focus{background:var(--bg-2);border-color:var(--line-strong);box-shadow:0 0 0 3px var(--accent-soft)}
.ay-ruta.stor{min-height:76px}
.ay-steg{position:relative;border-left:5px solid var(--c-gra);transition:opacity .3s var(--ease)}
.ay-steg[data-res="ja"]{border-left-color:var(--ok)}
.ay-steg[data-res="nej"]{border-left-color:var(--no)}
.ay-steg[data-res="oklart"]{border-left-color:var(--c-gul)}
.ay-steg[data-res="fri"]{border-left-color:var(--c-bla)}
/* Lösningsschemats kort i flytande glas; stegens färgade vänsterkant står kvar. */
.ay-sfraga,.ay-sslut,.ay-steg{background:var(--lg-glans),var(--lg-fill-tat);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;box-shadow:var(--lg-kant),var(--lg-skugga)}
.ay-sfraga,.ay-sslut{border-left-color:transparent}
.ay-steg.efter-stopp{opacity:.55}
.ay-steg+.ay-steg::before,.ay-sfraga+.ay-steg::before{content:"";position:absolute;left:28px;top:-15px;width:2px;height:14px;background:var(--line-strong)}
.ay-steghead{display:flex;align-items:center;gap:12px}
.ay-stegnr{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg-2);display:grid;place-items:center;font:700 14px var(--f-sans);flex:none}
.ay-stegrubrik{flex:1;font:700 18px var(--f-sans);letter-spacing:-.01em;color:var(--ink);background:none;border:0;outline:none;padding:6px 4px;border-radius:8px;min-width:0}
.ay-stegrubrik:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}
.ay-stegverktyg{display:flex;gap:2px}
.ay-stegmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 14px 42px}
.ay-steglag{font:600 13px var(--f-sans);color:var(--ink);background:var(--well);border:0;border-radius:var(--r-pill);padding:7px 14px;width:200px;outline:none}
.ay-steglag:focus{box-shadow:0 0 0 3px var(--accent-soft)}
.ay-stegkomb{font:500 13px var(--f-sans);color:var(--ink-2);background:var(--well);border:0;border-radius:var(--r-pill);padding:7px 12px;cursor:pointer}
.ay-rekvisit{display:flex;flex-direction:column;gap:8px}
/* Varje rekvisit: rekvisitet och statusknapparna överst, omständigheter och bedömning bredvid varandra under. */
.ay-rekrad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"rek rek st" "fakta bed bed";gap:8px;align-items:start;padding:8px;border-radius:12px;border:1px solid transparent}
.ay-rekrad>.ay-rektext{grid-area:rek}.ay-rekrad>.ay-rekfakta{grid-area:fakta}.ay-rekrad>.ay-rekbed{grid-area:bed}.ay-rekrad>.ay-status{grid-area:st}
.ay-rekhead{display:none}
.ay-rekrad[data-status="ja"]{background:var(--ok-soft)}
.ay-rekrad[data-status="nej"]{background:var(--no-soft)}
.ay-rekrad[data-status="oklart"]{background:color-mix(in srgb,var(--c-gul) 14%,transparent)}
.ay-rekrad .ay-ruta{font-size:14px;min-height:38px;background:var(--bg-2);border-color:var(--line)}
.ay-rektext{font-weight:600}
.ay-status{display:flex;gap:3px;align-items:center}
.ay-st{width:32px;height:32px;border-radius:9px;border:1px solid var(--line-strong);background:var(--bg-2);color:var(--muted);cursor:pointer;display:grid;place-items:center;font:700 14px var(--f-sans);padding:0}
.ay-st .ik{width:16px;height:16px;stroke-width:2.6}
.ay-st[data-s="ja"][aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:#fff}
.ay-st[data-s="nej"][aria-pressed="true"]{background:var(--no);border-color:var(--no);color:#fff}
.ay-st[data-s="oklart"][aria-pressed="true"]{background:var(--c-gul);border-color:var(--c-gul);color:#1D1D1F}
.ay-stx{border-color:transparent;background:none}
.ay-stx:hover{color:var(--no)}
.ay-steg>.flink{margin:8px 0 0 0;display:inline-flex;align-items:center;gap:4px}
.ay-steg>.flink .ik{width:14px;height:14px}
.ay-stegres{font-size:13.5px;font-weight:600;color:var(--muted);margin-top:8px}
.ay-steg[data-res="ja"] .ay-stegres{color:var(--ok)}
.ay-steg[data-res="nej"] .ay-stegres{color:var(--no)}
.ay-snytt .btn{display:inline-flex;align-items:center;gap:6px}
.ay-snytt .ik{width:15px;height:15px}
.ay-sslut .lbl{margin-top:6px}
.ay-sslut .ay-ruta{margin-bottom:12px}
.ay-sdom{font-size:15px;font-weight:600;padding:12px 16px;border-radius:12px;background:var(--well);margin:4px 0 10px}
.ay-sdom[data-res="ja"]{background:var(--ok-soft);color:var(--ok)}
.ay-sdom[data-res="nej"]{background:var(--no-soft);color:var(--no)}
.ay-sslut>.small{margin:0}

/* ---------- Helhetskartan ---------- */
.ay-helyta{padding:8px;border-radius:var(--r-sm)}
.ay-helyta svg{width:100%;height:auto;display:block}
.ay-helyta .kant{stroke:var(--muted);stroke-opacity:.35;stroke-linecap:round;transition:stroke-opacity .2s}
.ay-helyta .kant.lank{stroke:var(--accent);stroke-opacity:.5;stroke-dasharray:6 5}
.ay-helyta .dimmad{opacity:.18}
.ay-helyta .hnod{cursor:pointer;outline:none}
.ay-helyta .hnod circle{stroke:var(--bg-2);stroke-width:2.5;transition:r .2s}
.ay-helyta .hnod text{font:600 12.5px var(--f-sans);fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.ay-helyta .hnod.fokus circle{stroke:var(--ink);stroke-width:3}
.ay-helyta .hnod:focus-visible circle{stroke:var(--accent);stroke-width:4}
.ay-helyta svg.hovrar .kant{stroke-opacity:.1}
.ay-helyta svg.hovrar .kant.på{stroke-opacity:.9;stroke:var(--accent)}
.ay-hlegend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 4px;font-size:13px;color:var(--ink-2)}
.ay-hlegend span{display:inline-flex;align-items:center;gap:7px}
.ay-hlista{margin-top:18px}
.ay-hrad{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.ay-hrad .ay-varfor{margin:0 0 0 auto}
.ay-pil{color:var(--muted)}

/* ---------- Dialoger ----------
   Grundstilen för dialogerna (.ay-dlg, .ay-form) finns i site.css, så att de
   fungerar på alla sidor (t.ex. pausinställningarna i Plugga). */
.ay-nytopp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:8px}
.ay-fält{display:flex;flex-direction:column;gap:2px}
.ay-fält .lbl{margin:0 0 4px}
.ay-nytt>.lbl,.ay-nytt>div>.lbl{margin:18px 0 8px}
.ay-mallar{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.ay-mall{display:flex;gap:12px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--bg-2);border-radius:14px;padding:12px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .2s,background .2s;width:100%}
.ay-mall:hover{border-color:var(--accent);background:var(--well)}
.ay-mall b{display:block;font-size:14.5px;margin-bottom:2px}
.ay-mall small{display:block;font-size:12.5px;line-height:1.45;color:var(--muted)}
.ay-mallik{width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--tf,var(--accent)) 14%,transparent);color:var(--tf,var(--accent));display:grid;place-items:center;flex:none}
.ay-mallmedval{display:flex;flex-direction:column;gap:6px}
/* Egna mallar: ett kryss i hörnet tar bort mallen. */
.ay-egenmall{position:relative}
.ay-egenmall .ay-mall{padding-right:46px}
.ay-mallbort{position:absolute;top:8px;right:8px;opacity:.55}
.ay-egenmall:hover .ay-mallbort,.ay-mallbort:focus-visible{opacity:1}
.ay-mallips{margin:16px 0 0;color:var(--muted)}
.ay-mallmedval .gin{padding:8px 12px;font-size:13.5px}
.ay-valj{display:flex;flex-direction:column;gap:10px}
.ay-valjlista{display:flex;flex-direction:column;max-height:50vh;overflow:auto}
.ay-valjrad{display:flex;align-items:center;gap:10px;border:0;background:none;text-align:left;padding:10px;border-radius:10px;cursor:pointer;font:500 14.5px var(--f-sans);color:var(--ink)}
.ay-valjrad:hover{background:var(--well)}
.ay-valjrad span{flex:1}
.ay-valjrad small{color:var(--muted);font-size:12.5px}
.ay-delarad{display:flex;gap:8px;margin:4px 0 12px}
.ay-delarad .gin{font-size:13px;padding:10px 12px}
.ay-dela>.btn,.ay-dela>.flink{margin:0 8px 8px 0}
.ay-delainfo{margin:8px 0 0}
.ay-forhand{margin-top:14px;max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:14px;padding:18px 22px;background:var(--bg)}
.ay-forhand .ay-ed{font-size:15px}
.ay-forhand svg{width:100%;height:auto}
.ay-check{display:flex;gap:10px;align-items:center;padding:8px 0;font-size:15px;cursor:pointer}
.ay-check input{width:18px;height:18px;accent-color:var(--accent)}
/* Förklaring under ett val i utskriftsrutan (t.ex. vilka lagrum som skrivs ut), indraget under rutan. */
.ay-checkunder{margin:-6px 0 6px 28px;font-size:13px;line-height:1.4;color:var(--muted)}
.ay-utskriftstatus{margin:6px 0 0;font-size:13.5px;color:var(--accent);min-height:1.4em}
.ay-utskriftstatus:empty{display:none}

/* ---------- Molnet och samarbete ---------- */
/* Rund bricka med initialer i personens färg */
.ay-avatar{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;font:700 11.5px var(--f-sans);letter-spacing:.02em;
  color:#fff;background:var(--f,var(--c-bla));box-shadow:0 0 0 2px var(--bg-2)}
.ay-narvarande{display:flex;align-items:center}
.ay-narvarande .ay-avatar+.ay-avatar{margin-left:-6px}
.ay-narvarande:empty{display:none}
.ay-andradav:empty{display:none}
/* Var en medarbetare skriver: färgad kant och namnet i marginalen */
.ay-ed>[data-narvaro]{position:relative;box-shadow:-14px 0 0 -11px var(--nf,var(--c-bla))}
.ay-ed>[data-narvaro]::before{content:attr(data-narvaro);position:absolute;right:100%;top:.15em;margin-right:16px;white-space:nowrap;
  font:600 10.5px/1 var(--f-sans);color:#fff;background:var(--nf,var(--c-bla));padding:3px 7px;border-radius:999px;pointer-events:none}
@media (max-width:900px){.ay-ed>[data-narvaro]::before{right:auto;left:0;top:-1.4em;margin:0}}
.ay-lasinfo{margin:6px 0 0;font-size:14px;color:var(--ink-2);background:var(--well);border-radius:12px;padding:10px 14px}
.ay-lasläge .ay-ed{cursor:default}
.ay-schema.ay-lasläge .ay-ruta{background:transparent;border-color:transparent}

/* Sidopanelens molnruta */
.ay-moln{margin:18px 2px 2px;padding:12px;border-radius:14px;background:var(--well);display:flex;flex-direction:column;gap:6px}
.ay-moln .small{margin:0;font-size:13px}
.ay-molntitel{margin:0;font-weight:600;font-size:14px}
.ay-molnknapp{padding:9px 14px;font-size:13px}
.ay-molnrad{display:flex;align-items:center;gap:8px;min-width:0}
.ay-molnnamn{flex:1;min-width:0;font:600 13.5px var(--f-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ay-molnstatus{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.ay-molnstatus::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.ay-moln[data-läge="synkar"] .ay-molnstatus::before{background:var(--c-gul);animation:gpulse 1.2s var(--ease) infinite}
.ay-moln[data-läge="offline"] .ay-molnstatus::before,.ay-moln[data-läge="fel"] .ay-molnstatus::before{background:var(--no)}
.ay-molnfel{margin:0;font-size:12.5px;color:var(--no);line-height:1.4}
.ay-molnut{align-self:flex-start;padding:4px 0;font-size:12.5px}
.ay-kortdelat{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--accent-2);font-weight:600;margin-right:6px}
.ay-kortdelat .ik{width:13px;height:13px}

/* Dela-dialogen: skriv tillsammans + skicka en kopia */
.ay-samarbete{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.ay-samarbete>.lbl,.ay-kopia>.lbl{margin:0 0 8px}
.ay-samarbete>.small{margin:0 0 10px}
.ay-bjudin{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.ay-bjudin .gin{padding:10px 12px;font-size:14.5px}
.ay-bjudin select.gin{padding-right:34px;cursor:pointer}
.ay-bjudinfo{margin:8px 0 12px!important}
.ay-medlemmar{display:flex;flex-direction:column}
.ay-medlem{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.ay-medlem:last-of-type{border-bottom:0}
.ay-medlemtext{flex:1;min-width:0;display:flex;flex-direction:column}
.ay-medlemtext b{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ay-medlemtext small{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.ay-rollval{font:500 13px var(--f-sans);color:var(--ink);background:var(--well);border:0;border-radius:var(--r-pill);padding:7px 10px;cursor:pointer}
.ay-rolltext{font-size:13px;color:var(--muted)}
.ay-vantar .ay-avatar{opacity:.6}
.ay-lamna{margin-top:12px;align-self:flex-start}
.ay-kopia .small{margin:0 0 10px}
@media (max-width:560px){.ay-bjudin{grid-template-columns:minmax(0,1fr) auto}.ay-bjudin .gin:first-child{grid-column:1/-1}}

/* ---------- Inloggning och betalning ---------- */
.ay-loginknappar{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:6px 0 2px}
.ay-loginknappar .pgoogle{margin:0}
/* Apples knapp enligt Apples riktlinjer: svart med vit logga (vit i mörkt läge) */
.ay-apple{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:220px;height:40px;padding:0 18px;border:0;border-radius:var(--r-pill);
  background:#000;color:#fff;font:500 15px -apple-system,BlinkMacSystemFont,"Helvetica Neue",var(--f-sans);cursor:pointer;letter-spacing:-.01em}
.ay-apple svg{width:16px;height:16px;margin-top:-2px}
.ay-apple:hover{background:#1d1d1f}
:root[data-theme="dark"] .ay-apple{background:#fff;color:#000}
:root[data-theme="dark"] .ay-apple:hover{background:#f2f2f2}
.ay-betalvagg{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;background:var(--grad-soft);border:1px solid var(--line)}
.ay-betalvagg>p{margin:0}
.ay-plustitel{font:700 12px var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)!important}
.ay-kop{display:flex;flex-direction:column;gap:10px}
.ay-kopval{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.ay-kopval small{font-size:12.5px;color:var(--muted)}
.ay-kontolank{align-self:flex-start;padding-left:0}
.ay-konto .ay-kontokropp{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:start}
.ay-kontokort{padding:20px 22px;border-radius:var(--r-sm);display:flex;flex-direction:column;gap:8px}
.ay-kontokort>p{margin:0}
.ay-saldo{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1}
.ay-molnkonto{font:500 12.5px var(--f-sans);color:var(--accent);text-decoration:none!important;padding:2px 0}
.ay-molnkonto.på{font-weight:700}
.ay-aiinfo:empty{display:none}

/* ---------- Förklaringar (klickbara ord) ---------- */
/* Klickbara ord: en tunn understrykning i sidans gradient (ritad som bakgrund längst ned,
   eftersom en vanlig understrykning inte kan ha gradient). padding-bottom lägger linjen strax
   under bokstäverna, så att en överstrykning med penna inte täcker den. Bryts ordet över två
   rader får båda raderna en egen linje (box-decoration-break). */
/* Klickbara ord (förklaringar) ser ut som lagrumspillen, men blå, med en liten (i): samma
   storlek, radhöjd och utfyllnad, så att de två pillerna är lika höga. En lång mening bryts
   inuti pillen. */
.ay-ed .not{display:inline-block;max-width:100%;cursor:pointer;font-size:.78em;font-weight:600;letter-spacing:.01em;line-height:1.35;vertical-align:.08em;margin:0 .1em;padding:5px 12px;
  color:var(--not-ink);background:var(--not-bg);border-radius:var(--r-pill);-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:box-shadow .2s var(--ease)}
.ay-ed .not::after{content:"";display:inline-block;width:1.05em;height:1.05em;margin-left:.4em;vertical-align:-.16em;background:currentColor;opacity:.7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16.5v-5M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16.5v-5M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat}
.ay-ed .not:hover{box-shadow:inset 0 0 0 1.5px var(--not-ink)}
.ay-notbubbla{position:fixed;z-index:85;max-width:min(380px,calc(100vw - 16px));padding:12px 14px 10px;border-radius:14px;
  background:var(--lg-glans),var(--lg-fill-tat);-webkit-backdrop-filter:blur(24px) saturate(185%);backdrop-filter:blur(24px) saturate(185%);border:1px solid transparent;box-shadow:var(--lg-kant),0 18px 50px -14px rgba(0,0,0,.3);animation:navIn .18s var(--ease)}
.ay-notbubbla p{margin:0;font:15px/1.55 var(--f-sans);color:var(--ink);white-space:pre-wrap}
.ay-notknappar{display:flex;gap:2px;margin:6px -8px 0}
.ay-nottext{min-height:96px;resize:vertical}

/* ---------- Min ordbok ---------- */
.ay-ordbok{max-width:900px}
.ay-ordbokinfo{color:var(--ink-2);margin:-8px 0 18px;max-width:62ch}
.ay-ordboksok{max-width:360px}
.ay-ordbokknappar{display:flex;gap:8px;flex-wrap:wrap}
.ay-ordlista{display:flex;flex-direction:column;gap:10px}
.ay-ordrad{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 18px;border-radius:var(--r-sm)}
.ay-ordrad h3{margin:0 0 4px;font-size:16.5px;letter-spacing:-.01em}
.ay-ordrad p{margin:0;color:var(--ink-2);line-height:1.55;white-space:pre-wrap}
.ay-ordknappar{display:flex;gap:2px;flex:none}
.ay-notordbok{margin-left:auto}

/* ---------- Avisering ---------- */
.ay-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:100;background:var(--ink);color:var(--bg);font:500 14px var(--f-sans);padding:12px 18px;border-radius:var(--r-pill);box-shadow:0 14px 40px -12px rgba(0,0,0,.4);transition:opacity .25s var(--ease),transform .25s var(--ease);max-width:calc(100vw - 32px)}
.ay-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Skärmstorlekar ---------- */
@media (max-width:1200px){
  .ay-dokgrid{grid-template-columns:minmax(0,1fr);gap:var(--glipa)}
  .ay-dra{display:none}
  .ay-panel{position:static;max-height:none}
}
@media (max-width:900px){
  .ay{grid-template-columns:minmax(0,1fr);padding:0 12px 70px;gap:12px}
  .ay-side{position:fixed;top:76px;left:12px;right:12px;bottom:auto;z-index:45;display:none;max-height:calc(100vh - 100px);background:var(--lg-glans),color-mix(in srgb,var(--bg-2) 86%,transparent);box-shadow:var(--lg-kant),var(--glass-shadow)}
  body.ay-sidaoppen .ay-side{display:block;animation:navIn .25s var(--ease)}
  .ay-sidebtn{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--well);color:var(--ink);font:600 14px var(--f-sans);padding:9px 14px;border-radius:var(--r-pill);cursor:pointer;margin-bottom:6px}
  .ay-sidebtn .ik{width:16px;height:16px}
  .ay-bar{top:76px}
  body.ay-sida{padding-top:78px}
  .ay-rekrad{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"rek st" "fakta fakta" "bed bed"}
  .ay-stegmeta{margin-left:0}
  .ay-nytopp{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .ay-flik{padding:8px 8px;font-size:12.5px}
  .ay-dokknappar .btn span{display:none}
  .ay-dokknappar .btn{padding:9px 11px}
  .ay-rutnat{grid-template-columns:minmax(0,1fr)}
  .ay-bargrp::after{display:none}
  .ay-papper{border-radius:var(--r-sm)}
  .ay-kartyta{min-height:420px}
}

/* ---------- Utskrift ----------
   Med "Skriv ut" byggs en ren vy (#ayPrint) och allt annat döljs. Skriver
   man ut sidan direkt (Ctrl P) döljs i alla fall menyer och paneler. */
#ayPrint{display:none}
@media print{
  @page{margin:18mm 16mm}
  body{padding:0!important;background:#fff!important;color:#000}
  body::before{display:none!important}
  .topbar,.ay-side,.ay-panel,.ay-bar,.ay-sidebtn,.ay-dokrad,.ay-stig,.ay-kartips,.ay-toast,footer{display:none!important}
  .ay{display:block;padding:0}
  .ay-papper{box-shadow:none;border:0;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.ay-skriver>*:not(#ayPrint){display:none!important}
  body.ay-skriver #ayPrint{display:block;color:#111;font:10.5pt/1.55 "Valley Sans","Helvetica Neue",Arial,sans-serif}
  #ayPrint h1{font-size:20pt;letter-spacing:-.02em;margin:0 0 2pt}
  .ay-printmeta{color:#666;font-size:9pt;margin:0 0 14pt;padding-bottom:8pt;border-bottom:.5pt solid #ccc}
  #ayPrint .ay-ed{max-width:none;font-size:10.5pt;--bas:10.5pt;line-height:1.6;color:#111}
  .ay-ed section[data-fall]{padding-bottom:0;margin-bottom:0}
  .ay-ed section[data-fall]>:last-child{margin-bottom:.85em}
  .ay-ed section[data-fall]::after{display:none}
  .ay-ed section.stangd>*{display:revert!important;white-space:normal!important;color:inherit!important}   /* utskrift visar allt */
  #ayPrint .ay-ed h2{font-size:14pt;break-after:avoid}
  #ayPrint .ay-ed h3{font-size:12pt;break-after:avoid}
  #ayPrint .ay-ed p,#ayPrint .ay-ed li{color:#111;orphans:3;widows:3}
  #ayPrint .ay-ed table{break-inside:auto}#ayPrint tr{break-inside:avoid}
  #ayPrint .ay-ed th,#ayPrint .ay-ed td{border-color:#999}
  #ayPrint .lag{background:none;color:#000;padding:0;font-size:inherit;font-weight:700}
  #ayPrint .lag-x::after{display:none}
  #ayPrint a.dl{background:none;padding:0;font-weight:600;color:#000}
  #ayPrint a.dl::before{content:"→ "}
  #ayPrint mark{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #ayPrint mark[data-auto]{text-decoration:none}
  #ayPrint .ay-printkarta{width:100%;height:auto;max-height:240mm}
  body.ay-pgra #ayPrint mark{background:none!important;text-decoration:underline 1pt;text-underline-offset:2pt}
  body.ay-pmarg #ayPrint{width:63%;padding-right:6mm;border-right:.5pt solid #bbb}
  /* Lagrummen sist: rubrik som i texten, lagens namn och paragrafen ordagrant. */
  .ay-printlagrum,#ayPrint .ay-ed h2.ay-printavsnitt{margin-top:18pt;padding-top:6pt;border-top:.5pt solid #ccc}
  .ay-printlagrum h2{font-size:14pt;margin:0 0 8pt;break-after:avoid}
  .ay-printlag{margin:0 0 11pt;break-inside:avoid-page}
  .ay-printlag h3{font-size:11pt;margin:0;break-after:avoid}
  .ay-printlag p{margin:0 0 4pt;color:#111}
  .ay-printlag .ay-printlagkalla{font-size:8.5pt;color:#666;margin-bottom:4pt}
  .ay-printlag .ay-printlagrubrik{font-weight:700;margin-top:4pt}
  .ay-printlag .ay-printlagfel{font-style:italic;color:#666;word-break:break-all}
  #ayPrint .ay-ed ol li b{font-weight:700}
  .ay-printrader{margin-top:18pt;height:110mm;background:repeating-linear-gradient(to bottom,transparent 0,transparent 9mm,#bbb 9mm,#bbb calc(9mm + .5pt));-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
}

/* ---------- Felsök inloggningen (#/felsok) ---------- */
.ay-felsok{max-width:820px}
.ay-felsektion{padding:20px 22px;margin-top:16px;border-radius:var(--r-sm)}
.ay-felsektion .ay-h2{margin:0 0 8px;font-size:19px}
.ay-felsektion>p{margin:0 0 10px;line-height:1.55}
.ay-felkodrad{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0 12px}
.ay-felkod{font:600 15px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--well);padding:9px 12px;border-radius:10px;user-select:all;word-break:break-all}
.ay-felrad{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.ay-felrad:first-child{border-top:0}
.ay-felrad p{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);word-break:break-word}
.ay-felmark{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;font:700 13px var(--f-sans);background:var(--well);color:var(--muted)}
.ay-felrad.ok .ay-felmark{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.ay-felrad.fel .ay-felmark{background:color-mix(in srgb,var(--no) 16%,transparent);color:var(--no)}
.ay-felsektion .ay-loginknappar{margin:6px 0 10px}
.ay-loginhjalp{align-self:center;margin-top:6px;font-size:13px}

/* ---------- PDF ----------
   Webbläsarens egen PDF-läsare i en ram, lika bred som pappret och nästan hela höjden. */
.ay-pdfram{border-radius:var(--r);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--glass-shadow-sm);
  height:calc(100vh - 230px);min-height:420px;display:grid;place-items:center}
.ay-pdfvisare{width:100%;height:100%;border:0;display:block;background:var(--bg-2)}
.ay-pdfinfo{color:var(--muted);font-size:15px;max-width:46ch;text-align:center;padding:24px;margin:0}
/* Dra en PDF över sidan: en tydlig ram visar att den går att släppa. */
body.ay-släpp .ay-main{outline:2px dashed var(--accent);outline-offset:6px;border-radius:var(--r)}
body.ay-släpp .ay-main::before{content:"Släpp PDF:en för att ladda upp den";position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:90;
  padding:10px 18px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font:600 14px var(--f-sans);box-shadow:var(--lg-skugga)}
/* Bubblan för en dokumentlänk: Öppna som tydlig knapp, Ta bort länken bredvid. */
.ay-lankbubbla .ay-notknappar{align-items:center}
.ay-lankbubbla .btn{padding:7px 14px;font-size:13.5px}