/* ═══════════════════════════════════════════════════════════════════
   EdNotes webb — skrivbordsstilar

   Ingenting här delas med www/styles.css. Telefonens stilmall är
   telefonformad (hela filen har tre min-width-regler); den här är byggd för
   mus, tangentbord och breda skärmar.

   Färgerna kommer ur appens startskärm så de känns som samma produkt:
   djupgrönt (#0C2620 → #2A7D5F) och mintgrönt (#7FE3B8).

   ⚠️ GULD ÄR PRO-FÄRGEN. Använd den aldrig som accent för vanliga knappar —
   den ska betyda "det här är en Pro-sak" och inget annat.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tema ──
   Ljust läge på bar :root; mörkt skrivs över i BÅDA riktningarna
   (systeminställning + uttryckligt val), så ingen färg har sin enda
   definition inne i ett medieblock. */
:root {
  --bg:        #f4f6f5;
  --panel:     #ffffff;
  --panel-2:   #f7f9f8;
  --line:      rgba(12, 38, 32, .12);
  --ink:       #10201b;
  --ink-2:     rgba(16, 32, 27, .68);
  --ink-3:     rgba(16, 32, 27, .45);
  --acc:       #1B5E48;
  --acc-ink:   #ffffff;
  --acc-soft:  rgba(27, 94, 72, .10);
  --mint:      #17795c;
  --gold-a:    #C9A227;
  --gold-b:    #E8C468;
  --gold-ink:  #2B2000;
  --danger:    #b3261e;
  --shadow:    0 10px 40px rgba(12, 38, 32, .10);
  --shadow-lg: 0 24px 70px rgba(12, 38, 32, .22);
  --radius:    18px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:       #0e1013;
    --panel:    #161a1e;
    --panel-2:  #1c2126;
    --line:     rgba(255, 255, 255, .12);
    --ink:      #eef3f1;
    --ink-2:    rgba(238, 243, 241, .70);
    --ink-3:    rgba(238, 243, 241, .45);
    --acc:      #2A7D5F;
    --acc-soft: rgba(42, 125, 95, .18);
    --mint:     #7FE3B8;
    --shadow:   0 10px 40px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 70px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --bg:       #0e1013;
  --panel:    #161a1e;
  --panel-2:  #1c2126;
  --line:     rgba(255, 255, 255, .12);
  --ink:      #eef3f1;
  --ink-2:    rgba(238, 243, 241, .70);
  --ink-3:    rgba(238, 243, 241, .45);
  --acc:      #2A7D5F;
  --acc-soft: rgba(42, 125, 95, .18);
  --mint:     #7FE3B8;
  --shadow:   0 10px 40px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15.5px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ═══ INLOGGNINGS-/GRINDSKÄRM ═══ */
#screen {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
  background: radial-gradient(1200px 700px at 15% -10%, var(--acc-soft), transparent 60%), var(--bg);
}
/* ── Grindens ram ──
   .gate är kortets omslag och finns i ALLA lägen, så selektorerna nedan kan
   utgå från den. Den är också det som skiljer inloggningskortet från
   arbetsytans anteckningskort, som råkar heta .card de med: en bar `.card`
   här hade träffat båda. */
.gate { width: 100%; max-width: 520px; }

/* Två spalter först när det finns något att förklara — utloggad, e-post,
   återställning. Väntlägena (boot, inloggning, Pro-kontroll) och beskeden
   (Pro, inte Pro, fel) behåller det ensamma kortet: en säljpanel bredvid en
   snurra är brus, och Pro-beskedet bär sin egen förklaring. */
.gate--split {
  max-width: 950px;
  display: grid; grid-template-columns: 1fr 400px;
  gap: 26px; align-items: stretch;
}
@media (max-width: 900px) {
  /* I en spalt byter de plats: panelen är en hel skärmhöjd hög, och den som
     kommer hit för att logga in ska inte behöva scrolla förbi en säljtext för
     att hitta knappen. Kortet är lågt, så panelens rubrik syns ändå strax
     under den på en vanlig telefonskärm. */
  .gate--split { grid-template-columns: 1fr; max-width: 520px; }
  .gate--split > .card { order: -1; }
}

#screen .gate > .card {
  /* ⚠️ .card är OCKSÅ arbetsytans anteckningskort (längre ner i filen), och
     den sätter display:flex + gap. Det läckte hit: PRO-brickan sträcktes ut
     över hela kortets bredd av flexens stretch, och varje element fick 7 px
     extra ovanpå sina egna marginaler. Grindens kort är vanligt flöde. */
  display: block;
  width: 100%; max-width: 520px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 40px 38px 34px; text-align: center;
}
.gate--split > .card { align-self: center; }
.mark {
  width: 74px; height: 74px; margin: 0 auto 20px;
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1B5E48 0%, #0C2620 55%, #2A7D5F 100%);
  box-shadow: 0 10px 26px rgba(12, 38, 32, .30);
}
.mark svg { width: 38px; height: 38px; }
h1 { margin: 0 0 4px; font-size: 27px; font-weight: 620; letter-spacing: .1px; }
.tagline { margin: 0 0 22px; color: var(--mint); font-size: 14.5px; font-weight: 500; }
#screen .gate > .card p { margin: 0 0 20px; color: var(--ink-2); }
.small { font-size: 13.5px; color: var(--ink-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 20px;
  border: 1px solid transparent; border-radius: 12px;
  font: 600 15px/1 inherit; cursor: pointer; text-decoration: none;
  transition: filter .15s ease, background .15s ease;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn:not(:disabled):hover { filter: brightness(1.07); }
.btn:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.btn-primary { background: var(--acc); color: var(--acc-ink); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { background: var(--panel-2); }
.btn + .btn { margin-top: 10px; }
.btn-google { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
.btn-google svg { width: 19px; height: 19px; }

/* ── Reservvägen: e-post + lösenord (auth-web.js) ── */
.or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; color: var(--ink-3); font-size: 12.5px;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.afrm { text-align: start; margin: 0; }
.afrm-lbl { display: block; margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.afrm-in {
  width: 100%; padding: 12px 14px; margin: 0 0 14px;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  font: 400 15px/1.4 inherit;
}
.afrm-in:focus { outline: 2px solid var(--acc); outline-offset: -1px; }
/* .btn + .btn ger 10 px topmarginal; knappen i formuläret har ingen granne. */
.afrm .btn { margin-top: 4px; }
.lnk {
  display: block; width: 100%; margin: 14px 0 0; padding: 0;
  background: none; border: 0; color: var(--ink-3);
  font: 400 13.5px/1.5 inherit; text-decoration: underline; cursor: pointer;
}
.lnk:hover { color: var(--ink-2); }
.lnk:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
/* Motsvarigheten till .err för ett lyckat besked — samma form, lugn färg. */
.ok {
  margin: 0 0 18px; padding: 11px 14px; border-radius: 10px;
  background: var(--acc-soft); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 14px; text-align: start;
}

.pro-chip {
  display: inline-block; margin-bottom: 16px; padding: 5px 13px; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-b), var(--gold-a));
  color: var(--gold-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .9px;
}
.who {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; text-align: start;
}
.who img { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.who-name { font-weight: 600; font-size: 14.5px; }
.who-mail { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spin {
  width: 26px; height: 26px; margin: 6px auto 18px;
  border: 3px solid var(--acc-soft); border-top-color: var(--acc);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.err {
  margin: 0 0 18px; padding: 11px 14px; border-radius: 10px;
  background: rgba(179, 38, 30, .10); border: 1px solid rgba(179, 38, 30, .30);
  color: var(--danger); font-size: 14px; text-align: start;
}
:root[data-theme="dark"] .err, :root:not([data-theme="light"]) .err { color: #ff9b93; }
.foot {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-3);
}
.foot a { color: var(--ink-3); }
.foot-links { display: flex; gap: 14px; }
code { font-family: ui-monospace, "Roboto Mono", monospace; font-size: 11.5px; }

/* ── Kortets egen rubrik i tvåspaltsläget ──
   Märket och namnet står i panelen bredvid; kortet upprepar dem inte utan
   säger vad man ska göra här. */
.gate-head { margin: 0 0 6px; font-size: 22px; }
.gate-sub { margin: 0 0 22px !important; font-size: 14px; color: var(--ink-3) !important; }

/* ═══ SÄLJPANELEN VID INLOGGNINGEN ═══
   Samma gradient som appens startskärm och som .mark — den som kommer från
   ednotes.com ska känna igen sig, inte tro att hon hamnat på en inloggning
   till något annat.

   ⚠️ Inga filter och ingen backdrop-filter här. Ytan är stor, och en
   lagerframtvingande egenskap på en stor yta är grundorsaken bakom varje
   blinkning som lagats i det här projektet (RENDERING_FLICKER.md). En ren
   gradient kostar ingenting. */
.pitch {
  padding: 38px 34px 34px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #1B5E48 0%, #0C2620 55%, #2A7D5F 100%);
  box-shadow: var(--shadow);
  color: #EAF2E9;
  text-align: start;
  display: flex; flex-direction: column;
}
.pitch-mark { width: 46px; height: 46px; margin-bottom: 20px; }
.pitch-mark svg { width: 100%; height: 100%; }
.pitch-title {
  margin: 0 0 10px; color: #fff;
  font-size: 25px; font-weight: 620; line-height: 1.22; letter-spacing: -.01em;
}
.pitch-lead { margin: 0 0 22px; font-size: 14.5px; color: rgba(234, 242, 233, .78); }
.pitch-list {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: grid; gap: 10px; font-size: 14.5px; color: rgba(234, 242, 233, .92);
}
.pitch-list li { position: relative; padding-inline-start: 25px; }
/* Bocken som tecken, inte som två roterade ramar: den senare pekar åt fel
   håll i RTL, och arabiska ligger i språklistan även om den ännu inte kan
   väljas här. */
.pitch-list li::before {
  content: "\2713"; position: absolute; inset-inline-start: 0; top: 0;
  color: #7FE3B8; font-weight: 700;
}
/* Pro-rutan skjuts till botten så panelen och kortet slutar i jämnhöjd. */
.pitch-pro {
  margin-top: auto;
  padding: 18px 18px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
}
.pitch-pro .pro-chip { margin-bottom: 10px; }
.pitch-pro-title { margin: 0 0 6px; color: #fff; font-size: 15px; font-weight: 600; }
.pitch-pro-body { margin: 0 0 14px; font-size: 13.5px; color: rgba(234, 242, 233, .78); }
.pitch-pro-link {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 10px;
  background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 600;
  transition: background .15s ease;
}
.pitch-pro-link:hover { background: rgba(0, 0, 0, .5); }
.pitch-pro-link:focus-visible { outline: 3px solid #7FE3B8; outline-offset: 2px; }
.pitch-pro-link svg { width: 17px; height: 19px; flex: none; }

/* ── Stegen på "du har inte Pro"-skärmen ──
   En numrerad väg och inte en mening till: den som möts av grinden behöver
   veta exakt vad hon ska göra i telefonen, inte läsa om samma sak igen. */
.steps {
  counter-reset: st; list-style: none; text-align: start;
  margin: 0 0 20px; padding: 16px 18px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  display: grid; gap: 13px;
}
.steps li {
  position: relative; padding-inline-start: 34px;
  font-size: 14.5px; color: var(--ink-2);
}
.steps li::before {
  counter-increment: st; content: counter(st);
  position: absolute; inset-inline-start: 0; top: 0;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--acc); color: var(--acc-ink);
  font-size: 12.5px; font-weight: 700; line-height: 23px; text-align: center;
}
/* Play-knappen. Svart bakgrund oavsett tema — det är Googles märke, inte vårt,
   och det ska se likadant ut som badgen på ednotes.com. */
.btn-play { background: #000; color: #fff; border-color: rgba(255, 255, 255, .22); }
.btn-play svg { width: 19px; height: 21px; flex: none; }
/* Sist på Pro-skärmen, efter knapparna: en fotnot till den som redan betalat
   och undrar varför hon står här. */
.pro-hint { margin: 18px 0 0 !important; }

/* ═══ ARBETSYTAN ═══
   #screen centrerar inloggningskortet. Arbetsytan ska fylla fönstret — utan
   den här klassen sköts hela appen 189 px från vänsterkanten. */
#screen.screen--ws { display: block; padding: 0; min-height: 100vh; background: var(--bg); }

.ws { display: grid; grid-template-columns: 250px 1fr; height: 100vh; }

/* ── Sidopanel ── */
.ws-side {
  display: flex; flex-direction: column;
  background: var(--panel-2); border-inline-end: 1px solid var(--line);
  padding: 14px 10px; overflow-y: auto;
}
.side-top {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px 14px; font-weight: 640; font-size: 16px;
}
.side-top svg { width: 21px; height: 21px; color: var(--acc); }
.sync-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--acc);
  margin-inline-start: auto; animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
.side-h {
  padding: 16px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--ink-3);
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink-2);
  font: 500 14px/1.3 inherit; text-align: start; cursor: pointer;
}
.side-item:hover { background: var(--acc-soft); color: var(--ink); }
.side-item.on { background: var(--acc); color: var(--acc-ink); }
.side-item svg { width: 17px; height: 17px; flex: none; }
.side-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.side-item .tag { font-weight: 700; opacity: .55; width: 10px; text-align: center; }
.side-foot { margin-top: auto; padding-top: 14px; }
.side-user { display: flex; align-items: center; gap: 9px; padding: 8px 10px; font-size: 13px; color: var(--ink-2); }
.side-user img { width: 26px; height: 26px; border-radius: 50%; }
.side-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-link {
  width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink-3); font: 500 13px inherit; text-align: start; cursor: pointer;
}
.side-link:hover { background: var(--acc-soft); color: var(--ink); }

/* ── Topbar: sökfältet överst ── */
/* ⚠️ min-height: 0 är inte kosmetik — utan den scrollar HELA SIDAN.
   .ws-main är ett grid-item, och grid/flex-items har min-height: auto, vilket
   betyder "krymp aldrig under ditt innehåll". Då kan .grid-wrap inte hålla sig
   inom 100vh, dess overflow-y: auto får aldrig något att göra, och dokumentet
   växer i stället — varpå topbaren med sökfältet scrollar bort ur bild.
   Uppmätt: topbaren låg på -900 px efter 900 px scroll. */
.ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.q {
  flex: 1; min-width: 0; max-width: 620px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); color: var(--ink); font: 400 14.5px inherit;
}
.q:focus { outline: 2px solid var(--acc); outline-offset: -1px; }
.tb-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.tb-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: var(--ink-2); cursor: pointer;
}
.tb-btn:hover { background: var(--acc); color: var(--acc-ink); border-color: transparent; }
.tb-btn svg { width: 18px; height: 18px; }
.tb-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.tb-sort {
  height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: var(--ink-2); font: 500 13px inherit; cursor: pointer;
}

/* ── Kontoknappen och dess meny (usermenu.js) ── */
.tb-user { display: flex; align-items: center; margin-inline-start: 4px; }
.avatar {
  width: 34px; height: 34px; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--panel-2); display: grid; place-items: center; cursor: pointer;
}
.avatar-face { width: 100%; height: 100%; display: block; object-fit: cover; }
.umenu-initial {
  display: grid; place-items: center;
  background: var(--acc); color: var(--acc-ink); font: 600 15px/1 inherit;
}
.avatar:hover { border-color: var(--acc); }
.avatar:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }

/* Överlägget fångar klick utanför. z-index 100 = över redigeraren (61), under
   dialogerna (200) och toasterna (300) — menyn ska aldrig ligga över en ruta
   den själv öppnat. */
.umenu-wrap { position: fixed; inset: 0; z-index: 100; }
.umenu {
  position: fixed; min-width: 250px; max-width: min(320px, 88vw);
  max-height: calc(100vh - 80px); overflow-y: auto;
  padding: 8px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); box-shadow: var(--shadow-lg);
  animation: umenuIn .14s ease;
}
@keyframes umenuIn { from { opacity: 0; transform: translateY(-6px); } }
.umenu-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 14px; }
.umenu-photo { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; }
.umenu-who { min-width: 0; }        /* utan den kapas inte långa adresser */
.umenu-name { font-weight: 600; font-size: 14px; }
.umenu-mail { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umenu-sec {
  padding: 0 12px 6px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase; color: var(--ink-3);
}
.umenu-item {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font: 500 14px inherit;
  text-align: start; cursor: pointer;
}
.umenu-item:hover { background: var(--acc-soft); }
.umenu-item:focus-visible { background: var(--acc-soft); outline: 2px solid var(--acc); outline-offset: -2px; }
.umenu-sep { height: 1px; background: var(--line); margin: 8px 6px; }
.umenu-item.danger { color: var(--danger); }
.umenu-item.danger:hover { background: rgba(179, 38, 30, .10); }

/* ── Rutnätet ── */
/* Samma skäl som .ws-main ovan: ett flex-item med min-height: auto kan inte
   krympa, och då blir overflow-y verkningslöst. Det här är scroll-ytan. */
.grid-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px 60px; }
.grid {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.grid--small { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }

.card {
  position: relative;
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 15px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); color: inherit; cursor: pointer;
  transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}
.card:hover { box-shadow: var(--shadow); border-color: var(--acc); }
/* ── DRAGORDNINGEN (se shell.js) ──
   Tre tillstånd: rutnätet i dragläge (.grid--drag — korten GÅR att flytta),
   ett drag som pågår (.grid--drar), och det lyfta kortet (.card--lyft).
   user-select: none på korten i dragläge — annars börjar ett tryck som
   sedan dras markera text i stället för att lyfta kortet. */
.grid--drag .card { cursor: grab; user-select: none; -webkit-user-select: none; }

/* FLIP: grannarna får sin förflyttning som en transform-övergång. Bara
   under ett pågående drag — resten av tiden ska korten inte glida när
   rutnätet ritas om. Hover släcks samtidigt: pekaren sveper över korten
   medan man drar, och tjugo kort som blossar upp i tur och ordning är brus. */
.grid--drar .card { transition: transform .18s ease; }
.grid--drar .card:hover { box-shadow: none; border-color: var(--line); }

/* Det lyfta kortet. position/left/top/bredd/höjd sätts inline av skriptet.
   pointer-events: none är det som låter elementFromPoint se rutnätet UNDER
   kortet — pekarhändelserna når ändå kortet, eftersom det har pekarfångst. */
.card--lyft {
  z-index: 60;
  cursor: grabbing;
  pointer-events: none;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .30);
  border-color: var(--acc);
  transform: scale(1.03) rotate(.6deg);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Luckan kortet lämnar efter sig — och som flyttar sig dit kortet kommer att
   hamna. Streckad, inte fylld: den ska läsas som "tomt, reserverat". */
.card-plats {
  border: 2px dashed var(--line);
  border-radius: 14px;
  background: var(--acc-soft);
  box-sizing: border-box;
}

.card-top { display: flex; align-items: flex-start; gap: 6px; }
.card-title {
  flex: 1; min-width: 0; margin: 0;
  font-weight: 640; font-size: 15px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-ic svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.card-ic.star svg { color: var(--gold-a); }
.card-prev {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
}
.grid--small .card { padding: 11px 12px; }
.grid--small .card-title { font-size: 13.5px; }
.grid--small .card-prev { font-size: 12.5px; -webkit-line-clamp: 4; }

.card-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.card-items li {
  display: flex; gap: 7px; font-size: 13.5px; color: var(--ink-2); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-items li.done { color: var(--ink-3); text-decoration: line-through; }
.card-items .tick {
  width: 13px; height: 13px; flex: none; margin-top: 3px;
  border: 1.5px solid var(--ink-3); border-radius: 3px;
  font-size: 10px; line-height: 11px; text-align: center; color: var(--acc);
}
.card-items li.done .tick { border-color: var(--acc); }
.grid--small .card-items li { font-size: 12.5px; }
.card-more { font-size: 12px; color: var(--ink-3); }
.card-count { font-size: 11.5px; color: var(--ink-3); }

.card-meta {
  display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px;
  font-size: 11.5px; color: var(--ink-3);
}
.chip {
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  color: var(--c); font-weight: 600;
}
.when { margin-inline-start: auto; }

.empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 80px 24px; text-align: center; color: var(--ink-3);
}
.empty b { font-size: 16px; color: var(--ink-2); }
.empty p { margin: 0; font-size: 13.5px; }

/* ═══ AGENDAN ═══
   En läslista, inte ett rutnät: en spalt med läsbar radlängd, vänsterställd.
   Raderna är avsiktligt lugnare än korten — här skummar man datum, inte
   innehåll. Se web/agenda.js. */
.agenda { display: block; max-width: 720px; }

/* Månadsrubriken följer med i scrollen så man alltid ser var i tiden man är.
   Den behöver egen bakgrund — annars lyser raderna igenom när de passerar
   under. `top: -20px` motverkar .grid-wrap:s toppadding, så rubriken klistrar
   sig mot scroll-ytans kant och inte 20 px ned. */
.ag-month {
  position: sticky; top: -20px; z-index: 2;
  margin: 26px 0 4px; padding: 8px 0 6px;
  background: var(--bg);
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.ag-month:first-child { margin-top: 0; }

.ag-day {
  display: flex; align-items: baseline; gap: 8px;
  margin: 18px 0 8px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; color: var(--ink-2);
}
.ag-day:first-child { margin-top: 4px; }
/* Veckonumret skrivs bara vid veckoskifte — en orienteringspunkt, inte en
   etikett på varje rad. Därför diskret och skjuten åt sidan. */
.ag-week {
  margin-inline-start: auto; font-weight: 600; font-size: 11.5px;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

.ag-row {
  /* Enkelsidig kant → inga rundade hörn, annars ser stapeln avhuggen ut. */
  border-inline-start: 3px solid var(--bar, var(--acc));
  background: var(--panel); border-radius: 0;
  padding: 9px 13px; margin-bottom: 7px;
}
.ag-row--open { cursor: pointer; }
.ag-row--open:hover { background: var(--panel-2); }

.ag-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 3px;
}
.ag-kind {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--acc-soft); color: var(--acc); font-weight: 600;
}
.ag-kind svg { width: 12px; height: 12px; }
.ag-when { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ag-bell, .ag-rep { display: inline-flex; align-items: center; gap: 3px; }
.ag-bell svg, .ag-rep svg { width: 12px; height: 12px; }
.ag-chip { margin-inline-start: auto; font-size: 11px; }

.ag-title { margin: 0; font-size: 14.5px; font-weight: 600; }
.ag-prev {
  margin-top: 2px; font-size: 12.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Att händelser från telefonens kalender saknas är inget användaren kan gissa
   sig till — det står i vyn, inte bara i dokumentationen. */
.ag-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 22px; padding: 10px 13px; border-radius: 10px;
  background: var(--panel-2); color: var(--ink-2); font-size: 12px; line-height: 1.5;
}
.ag-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* ═══ MÅNADSKALENDERN ═══
   Sex rader × sju dagar plus en smal veckonummerkolumn. Rutnätet fyller ytan
   i höjd så månaden syns i ett svep — det är hela poängen med en månadsvy.
   Se web/calendar.js. */
.cal { display: flex; flex-direction: column; height: 100%; min-height: 520px; }

.cal-head, .cal-row { display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); }
.cal-head { border-bottom: 1px solid var(--line); }
.cal-dh, .cal-wk-h {
  padding: 6px 4px 8px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--ink-3);
}
.cal-body { flex: 1; display: flex; flex-direction: column; }
.cal-row { flex: 1; min-height: 78px; border-bottom: 1px solid var(--line); }
.cal-row:last-child { border-bottom: 0; }
.cal-wk {
  display: flex; justify-content: center; padding-top: 5px;
  font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  border-inline-end: 1px solid var(--line);
}

.cal-cell {
  position: relative; min-width: 0; padding: 3px 4px;
  border-inline-start: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.cal-cell:first-of-type { border-inline-start: 0; }
/* Dagar från grannmånaderna tonas ned men försvinner inte — man ska kunna se
   att veckan fortsätter, precis som i Google Kalender. */
.cal-cell.is-other { background: var(--panel-2); }
.cal-cell.is-other .cal-num { color: var(--ink-3); }

/* Bakgrundsknappen fyller rutan och ligger UNDER chipsen (z-index), så ett
   klick på en händelse aldrig skapar en ny. */
.cal-bg {
  position: absolute; inset: 0; z-index: 0;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.cal-bg:hover { background: var(--acc-soft); }

.cal-num {
  position: relative; z-index: 1; align-self: flex-start;
  padding: 2px 6px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  pointer-events: none;
}
.cal-cell.is-today .cal-num { background: var(--acc); color: #fff; font-weight: 700; }

.cal-chips { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-chip {
  display: block; width: 100%; padding: 1px 6px; border: 0; border-radius: 5px;
  background: transparent; color: var(--ink); cursor: pointer;
  font: 500 11.5px/1.6 inherit; text-align: start;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip:hover { background: var(--acc-soft); }
.cal-chip.is-locked { cursor: default; }
.cal-t { color: var(--ink-3); font-weight: 600; margin-inline-end: 4px; }
/* Pricken markerar färgen utan att fylla hela raden — samma lugna uttryck som
   Google för enkla händelser. */
.cal-chip--dot::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c); margin-inline-end: 5px; vertical-align: 1px;
}

/* Flerdagshändelse: en sammanhängande stapel. Ändarna är rundade bara där
   händelsen faktiskt börjar respektive slutar; däremellan går den ut i
   cellkanten så raden ser obruten ut tvärs över veckan. */
.cal-chip--span {
  background: color-mix(in srgb, var(--c) 30%, transparent);
  color: var(--ink); font-weight: 600;
  margin-inline: -4px; padding-inline: 10px; border-radius: 0;
}
.cal-chip--span.is-start { margin-inline-start: 0; border-start-start-radius: 5px; border-end-start-radius: 5px; }
.cal-chip--span.is-end { margin-inline-end: 0; border-start-end-radius: 5px; border-end-end-radius: 5px; }
.cal-chip--span:hover { background: color-mix(in srgb, var(--c) 42%, transparent); }

.cal-more {
  align-self: flex-start; padding: 0 5px; border: 0; border-radius: 5px;
  background: transparent; color: var(--ink-3); cursor: pointer;
  font: 600 11px inherit;
}
.cal-more:hover { background: var(--acc-soft); color: var(--acc); }

/* Verktygsradens månadsnavigering */
.tb-txtbtn {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); cursor: pointer;
  font: 600 13px inherit;
}
.tb-txtbtn:hover { border-color: var(--acc); color: var(--acc); }
.tb-month { font-size: 16px; font-weight: 700; margin-inline: 4px; white-space: nowrap; }

/* Dagslistan bakom "+N" */
.cal-daylist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.cal-dayrow {
  display: flex; gap: 10px; align-items: baseline; width: 100%;
  padding: 8px 10px; border: 0; border-inline-start: 3px solid var(--c);
  border-radius: 0; background: var(--panel-2); color: var(--ink);
  cursor: pointer; text-align: start; font: 500 13.5px inherit;
}
.cal-dayrow:hover { background: var(--acc-soft); }
.cal-dayt { flex: none; min-width: 44px; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cal-dayn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══ REDIGERAREN (överlägg) ═══ */
#edwrap { display: none; }
#edwrap.open { display: block; }
.ed-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 14, 12, .5); animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0 } }
.ed-card {
  position: fixed; z-index: 61;
  inset-block: 4vh; inset-inline-start: 50%;
  transform: translateX(-50%);
  width: min(860px, 92vw);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  overflow: hidden; animation: edIn .18s cubic-bezier(.2, .8, .2, 1);
}
@keyframes edIn { from { opacity: 0; transform: translateX(-50%) translateY(10px) } }

.ed-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.ic-btn {
  height: 34px; min-width: 34px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--ink-2); font: 500 13px inherit; cursor: pointer;
}
.ic-btn:hover { background: var(--panel-2); color: var(--ink); }
/* Aktivt läge (fäst/favorit) ska SYNAS: fylld ikon + tonad platta, inte bara
   en färgskiftning. fill via CSS vinner över svg:ns fill="none"-attribut. */
.ic-btn.on { color: var(--gold-a); background: rgba(201, 162, 39, .14); border-color: rgba(201, 162, 39, .38); }
.ic-btn.on svg { fill: currentColor; }
.ic-btn.danger:hover { background: rgba(179, 38, 30, .12); color: var(--danger); }
.ic-btn svg { width: 17px; height: 17px; }
.ed-state {
  margin-inline-end: auto; padding-inline-start: 4px;
  font-size: 12px; color: var(--ink-3); opacity: 0; transition: opacity .2s ease;
}
.ed-state.show { opacity: 1; }

.ed-title {
  border: 0; background: transparent; color: var(--ink);
  padding: 20px 30px 6px; font: 640 25px/1.25 inherit;
}
.ed-title:focus { outline: none; }
.ed-body { flex: 1; overflow-y: auto; padding: 0 30px 26px; }
.rich { min-height: 220px; font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.rich:focus { outline: none; }
.rich img { max-width: 100%; height: auto; border-radius: 10px; }

.items { display: flex; flex-direction: column; gap: 2px; }
.item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 9px; }
.item:hover { background: var(--panel-2); }
.item input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--acc); flex: none; }
.item-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.55; }
.item-text:focus { outline: none; }
.item.done .item-text { text-decoration: line-through; color: var(--ink-3); }
.item-x {
  border: 0; background: transparent; color: var(--ink-3);
  font-size: 18px; line-height: 1; cursor: pointer; opacity: 0; padding: 0 4px;
}
.item:hover .item-x { opacity: 1; }
.add-item {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink-3);
  font: 500 14px inherit; cursor: pointer;
}
.add-item:hover { background: var(--panel-2); color: var(--ink); }
.add-item svg { width: 16px; height: 16px; }

.share-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--acc-soft); color: var(--acc); font-size: 12px; font-weight: 600;
}
:root[data-theme="dark"] .share-chip, :root:not([data-theme="light"]) .share-chip { color: var(--mint); }
.share-chip svg { width: 13px; height: 13px; }
.ro-note { font-size: 12.5px; color: var(--ink-3); padding-inline-start: 4px; }

/* ═══ FORMATERINGSRADEN — LÄNGST NER ═══
   Nere vid texten i stället för uppe i ett menyfält: händerna är redan där,
   och man slipper flytta blicken till andra änden av fönstret för varje
   ordval. */
.fb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 9px 14px; border-top: 1px solid var(--line); background: var(--panel-2);
}
.fb-group { display: flex; align-items: center; gap: 3px; }
.fb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.fb-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--ink-2); font: 500 14px/1 inherit; cursor: pointer;
}
.fb-btn:hover { background: var(--panel); color: var(--ink); }
.fb-btn.on { background: var(--acc); color: var(--acc-ink); }

.fb-menu { position: relative; }
.fb-trig { flex-direction: column; gap: 1px; }
.fb-trig--wide { flex-direction: row; gap: 6px; min-width: 112px; justify-content: space-between; font-size: 13px; }
.trig-a { font-weight: 700; font-size: 14px; line-height: 1; }
.trig-bar { display: block; width: 14px; height: 3px; border-radius: 2px; }
.trig-hl {
  font-weight: 700; font-size: 14px; padding: 0 3px; border-radius: 3px;
  background: var(--gold-b); color: #2B2000;
}
.caret { font-size: 10px; opacity: .6; }

/* Popovern öppnas UPPÅT — raden sitter längst ner, så nedåt finns ingen plats. */
.fb-pop {
  position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0;
  display: none; z-index: 20; min-width: 210px; padding: 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg);
}
.fb-menu.open .fb-pop { display: block; }
.fb-pop-h {
  font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.sw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sw {
  width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--sw, transparent); border: 1px solid rgba(0, 0, 0, .18);
}
:root[data-theme="dark"] .sw, :root:not([data-theme="light"]) .sw { border-color: rgba(255, 255, 255, .22); }
.sw:hover { transform: scale(1.12); }
.sw-hl { border-radius: 7px; }
.sw-clear { background: var(--panel-2); position: relative; overflow: hidden; }
.sw-clear::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top left, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%);
}

.fb-pop--font { min-width: 200px; max-height: 320px; overflow-y: auto; padding: 8px; }
.font-opt {
  display: block; width: 100%; padding: 9px 12px; margin-bottom: 2px;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink);
  font-size: 16px; text-align: start; cursor: pointer;
}
.font-opt:hover { background: var(--acc-soft); }

/* ═══ DELNINGSDIALOG ═══ */
.dlg-wrap {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(6, 14, 12, .55); animation: fadeIn .16s ease;
}
.dlg {
  width: 100%; max-width: 440px; padding: 28px 26px 22px; text-align: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  /* ⚠️ Utan detta blir en hög dialog OKLICKBAR på en liten skärm: .dlg-wrap
     centrerar, så överskottet hamnar utanför vyporten åt BÅDA håll och
     Spara-knappen går inte att nå. Uppmätt: händelseformuläret 628 px i ett
     520 px högt fönster — elementFromPoint träffade inte dialogen alls.
     Intern scroll i stället, så innehållet alltid går att komma åt. */
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.dlg h2 { margin: 0 0 8px; font-size: 20px; font-weight: 640; }
.dlg p { margin: 0 0 16px; font-size: 14px; color: var(--ink-2); }
.dlg .small { margin-bottom: 16px; }
.dlg .code {
  margin: 4px 0 10px; padding: 14px; border-radius: 12px;
  background: var(--acc-soft); color: var(--acc);
  font: 700 30px/1 ui-monospace, "Roboto Mono", monospace; letter-spacing: 3px;
}
:root[data-theme="dark"] .dlg .code, :root:not([data-theme="light"]) .dlg .code { color: var(--mint); }
.linkfield {
  width: 100%; margin-bottom: 14px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: var(--ink-2);
  font: 400 12.5px ui-monospace, "Roboto Mono", monospace; text-overflow: ellipsis;
}

/* ═══ NOTISER ═══ */
#toasts {
  position: fixed; inset-block-end: 22px; inset-inline-start: 50%;
  transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 300;
}
.toast {
  padding: 11px 18px; border-radius: 11px;
  background: var(--ink); color: var(--bg);
  font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow);
  max-width: min(460px, 88vw); animation: toastIn .22s ease;
}
.toast.out { opacity: 0; transition: opacity .3s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px) } }

/* ═══ SMALARE FÖNSTER ═══ */
@media (max-width: 900px) {
  .ws { grid-template-columns: 1fr; }
  .ws-side { display: none; }
  .fb-sep { display: none; }
}
@media (max-width: 520px) {
  #screen .gate > .card { padding: 30px 22px 26px; }
  .pitch { padding: 28px 22px 26px; }
  h1 { font-size: 23px; }
  .grid-wrap { padding: 14px; }
  .dlg .code { font-size: 24px; letter-spacing: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .spin { animation-duration: 2.4s; }
  .btn, .card { transition: none; }
  .ed-card, .ed-scrim, .toast { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   VERSION 2 — efter Jonas återkoppling
   Ligger sist och skriver medvetet över reglerna ovan.
   ═══════════════════════════════════════════════════════════════════ */

/* ── STORA KORT: hela texten ska gå att läsa ──
   Högst två kolumner på en bred skärm, en kolumn på en smal. minmax med
   min(100%, 460px) är det som ger exakt det: 460 px är för brett för att
   rymmas två gånger under ~980 px, så det faller självt till en kolumn.
   Maxbredden hindrar att kolumnerna blir orimligt breda på en 34-tumsskärm —
   en textrad över 900 px är svår att följa med ögat. */
.grid--large {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  max-width: 1160px;
  gap: 18px;
}
/* Ingen avhuggning i storläget — det är hela poängen med det. */
.grid--large .card-prev {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: pre-wrap;
  font-size: 14.5px;
  line-height: 1.6;
}
.grid--large .card { padding: 18px 20px; gap: 9px; }
.grid--large .card-items li { white-space: normal; }

/* ── TYDLIG TITEL ──
   Titeln ska läsas som en titel, inte som första raden i brödtexten. */
.grid--large .card-title { font-size: 17.5px; }
.card-title {
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--ink);
}
.grid--large .card-top {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}

/* Redigerarens titel: större, egen rad, tydligt avskild från brödtexten. */
.ed-title {
  font: 700 27px/1.25 inherit;
  padding: 22px 30px 12px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 16px;
}
.ed-title::placeholder { color: var(--ink-3); font-weight: 600; }
.ed-body { padding-top: 0; }

/* ── DRAGNING ──
   Här låg VERSION 2:s regler för HTML5-draget (.card.dragging, en
   transition på .grid--drag .card). De är borta sedan 2026-09-07: draget
   bygger nu på pekarhändelser och har sina egna klasser (.grid--drar,
   .card--lyft, .card-plats) i grundavsnittet ovan. Det här blocket finns
   kvar bara för att ingen ska leta efter dem här — VERSION 2 skriver
   annars över allt ovanför, och en kvarlämnad transition på .grid--drag
   hade fått korten att glida vid varje omritning av rutnätet. */

/* ── Bilder i kortens förhandsvisning ──
   _plain() plockar bort taggar, så en bild syns inte i kortet. Det är med
   flit: ett kort med en halv bild i är svårare att läsa än ett utan. */

/* ── Verktygsraden: justering + bild ── */
.fb-btn svg { width: 17px; height: 17px; }

/* ═══════════════════════════════════════════════════════════════════
   ANTECKNINGSBAKGRUNDER

   Klassnamnen och färgerna är appens (note-bg-*, NOTE_BG_COLORS,
   NOTE_BG_PATTERNS). Samma `n.bg`-sträng ska ge samma yta på båda ställena.

   Bakgrunden målas av ett ::before-lager i stället för direkt på elementet.
   Det är vad appen gör, och skälet är blur/ljusstyrka på bildbakgrunder: ett
   filter på elementet självt hade suddat TEXTEN också.

   ⚠️ BLINKNINGSREGELN (CLAUDE.md): aldrig no-op-filter. `filter` sätts BARA
   på bildbakgrunderna, där det är själva funktionen — aldrig som
   `blur(0)` på färger och mönster, som skulle kosta ett kompositlager per
   kort utan att synas.
   ═══════════════════════════════════════════════════════════════════ */

/* Ytan som bär en bakgrund isolerar sitt ::before och lägger innehållet över. */
.card[class*="note-bg-"]:not(.note-bg-plain),
.ed-card[class*="note-bg-"]:not(.note-bg-plain) {
  isolation: isolate;
  color: var(--bg-text, inherit);
}
.card[class*="note-bg-"]:not(.note-bg-plain)::before,
.ed-card[class*="note-bg-"]:not(.note-bg-plain)::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background-color: var(--bg-color, transparent);
  background-image: var(--bg-pattern-image, none);
  background-size: var(--bg-pattern-size, auto);
}
/* Titel, brödtext och metadata ska ärva bakgrundens textfärg, annars blir
   ljus text på ljus pastell. */
.card[class*="note-bg-"]:not(.note-bg-plain) .card-title,
.card[class*="note-bg-"]:not(.note-bg-plain) .card-prev,
.card[class*="note-bg-"]:not(.note-bg-plain) .card-items li,
.card[class*="note-bg-"]:not(.note-bg-plain) .card-meta,
.card[class*="note-bg-"]:not(.note-bg-plain) .card-count { color: inherit; }
.card[class*="note-bg-"]:not(.note-bg-plain) .card-prev,
.card[class*="note-bg-"]:not(.note-bg-plain) .card-meta { opacity: .82; }
.card[class*="note-bg-"]:not(.note-bg-plain) .card-top { border-bottom-color: currentColor; opacity: 1; }

/* ── Tolv pastellfärger (exakt appens hex) ── */
.note-bg-col-1  { --bg-color: #fbf6ee; --bg-text: #1f2937; }
.note-bg-col-2  { --bg-color: #ffd6d6; --bg-text: #1f2937; }
.note-bg-col-3  { --bg-color: #ffe0c2; --bg-text: #1f2937; }
.note-bg-col-4  { --bg-color: #fff4b8; --bg-text: #1f2937; }
.note-bg-col-5  { --bg-color: #d6f5b8; --bg-text: #1f2937; }
.note-bg-col-6  { --bg-color: #c8efd6; --bg-text: #1f2937; }
.note-bg-col-7  { --bg-color: #b8e6e0; --bg-text: #1f2937; }
.note-bg-col-8  { --bg-color: #c8dbf5; --bg-text: #1f2937; }
.note-bg-col-9  { --bg-color: #cfd0f0; --bg-text: #1f2937; }
.note-bg-col-10 { --bg-color: #e0d2f0; --bg-text: #1f2937; }
.note-bg-col-11 { --bg-color: #f5d6e8; --bg-text: #1f2937; }
.note-bg-col-12 { --bg-color: #d7c2a8; --bg-text: #1f2937; }

/* ── Tre mönster ── */
.note-bg-grid {
  --bg-color: #f7f4ee; --bg-text: #3b3326;
  --bg-pattern-image: linear-gradient(0deg, #d8d3c4 1px, transparent 1px),
                      linear-gradient(90deg, #d8d3c4 1px, transparent 1px);
  --bg-pattern-size: 20px 20px;
}
.note-bg-lines {
  --bg-color: #fdfcf7; --bg-text: #3b3326;
  --bg-pattern-image: linear-gradient(180deg, transparent 23px, #c8c2b0 24px);
  --bg-pattern-size: 100% 24px;
}
.note-bg-dots {
  --bg-color: #fdfcf7; --bg-text: #3b3326;
  --bg-pattern-image: radial-gradient(circle, #c8c2b0 1.5px, transparent 1.5px);
  --bg-pattern-size: 18px 18px;
}

/* ── Bildbakgrunder ──
   Två lager: bilden med sina filter, och en överlagring som gör texten
   läsbar. Filtret sitter HÄR och bara här — se blinkningsregeln överst. */
.card[class*="note-bg-pic-"], .card.note-bg-custom,
.ed-card[class*="note-bg-pic-"], .ed-card.note-bg-custom {
  isolation: isolate;
  color: var(--bg-text, #1f2937);
}
.card[class*="note-bg-pic-"]:not(.note-bg-plain)::before, .card.note-bg-custom:not(.note-bg-plain)::before,
.ed-card[class*="note-bg-pic-"]:not(.note-bg-plain)::before, .ed-card.note-bg-custom:not(.note-bg-plain)::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  border-radius: inherit;
  background-image: var(--bg-image, none);
  background-size: cover; background-position: center;
  filter: blur(var(--bg-blur, 0px))
          brightness(var(--bg-bright, 1))
          saturate(var(--bg-sat, .85));
}
.card[class*="note-bg-pic-"]:not(.note-bg-plain)::after, .card.note-bg-custom:not(.note-bg-plain)::after,
.ed-card[class*="note-bg-pic-"]:not(.note-bg-plain)::after, .ed-card.note-bg-custom:not(.note-bg-plain)::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background-color: rgba(var(--bg-overlay-rgb, 255, 255, 255), var(--bg-overlay, .35));
}
/* Mörkt läge på en bildbakgrund → ljus text. */
[data-mode="dark"] { --bg-text: #f4f6f5; }
[data-mode="light"] { --bg-text: #1f2937; }

.card[class*="note-bg-pic-"] .card-title, .card.note-bg-custom .card-title,
.card[class*="note-bg-pic-"] .card-prev,  .card.note-bg-custom .card-prev,
.card[class*="note-bg-pic-"] .card-items li, .card.note-bg-custom .card-items li,
.card[class*="note-bg-pic-"] .card-meta,  .card.note-bg-custom .card-meta,
.card[class*="note-bg-pic-"] .card-count, .card.note-bg-custom .card-count { color: inherit; }

/* Redigeraren: titel och text ska följa med, och fälten är genomskinliga så
   bakgrunden syns bakom. */
.ed-card[class*="note-bg-"]:not(.note-bg-plain) .ed-title,
.ed-card[class*="note-bg-"]:not(.note-bg-plain) .rich,
.ed-card[class*="note-bg-"]:not(.note-bg-plain) .item-text { color: inherit; }
.ed-card[class*="note-bg-"]:not(.note-bg-plain) .ed-bar,
.ed-card[class*="note-bg-"]:not(.note-bg-plain) .fb {
  background: rgba(var(--bg-overlay-rgb, 255, 255, 255), .55);
  border-color: rgba(128, 128, 128, .28);
}
.ed-card[class*="note-bg-"]:not(.note-bg-plain) .ic-btn,
.ed-card[class*="note-bg-"]:not(.note-bg-plain) .fb-btn { color: inherit; }
/* `color: inherit` ovan har högre specificitet än .ic-btn.on och släckte
   aktiv-läget på anteckningar med bakgrund — guldet måste vinna även där. */
.ed-card[class*="note-bg-"]:not(.note-bg-plain) .ic-btn.on { color: var(--gold-a); }

/* ── Väljaren ── */
.dlg--bg { max-width: 560px; text-align: start; }
.dlg--bg h2 { text-align: center; }
.bg-sec {
  margin: 14px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--ink-3);
}
.bg-row { display: flex; flex-wrap: wrap; gap: 9px; }
.bg-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
  max-height: 220px; overflow-y: auto; padding-inline-end: 4px;
}
.bgsw {
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 10px;
  background-color: var(--panel-2); background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px var(--line);
}
.bg-grid .bgsw { width: 100%; height: 42px; }
.bgsw:hover { transform: scale(1.06); }
.bgsw.on { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc-soft); }
/* Mönsterrutorna visar sitt mönster i miniatyr. */
.bgsw[data-bg="grid"] {
  background-color: #f7f4ee;
  background-image: linear-gradient(0deg, #d8d3c4 1px, transparent 1px),
                    linear-gradient(90deg, #d8d3c4 1px, transparent 1px);
  background-size: 9px 9px;
}
.bgsw[data-bg="lines"] {
  background-color: #fdfcf7;
  background-image: linear-gradient(180deg, transparent 8px, #c8c2b0 9px);
  background-size: 100% 9px;
}
.bgsw[data-bg="dots"] {
  background-color: #fdfcf7;
  background-image: radial-gradient(circle, #c8c2b0 1.2px, transparent 1.2px);
  background-size: 8px 8px;
}
.bgsw[data-bg="plain"] { position: relative; overflow: hidden; }
.bgsw[data-bg="plain"]::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top left, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%);
}
.dlg--bg .btn { margin-top: 12px; }

/* ═══════════════════════════════════════════════════════════════════
   LISTOR, PROFILER OCH ETIKETTER
   ═══════════════════════════════════════════════════════════════════ */

/* ── Punkter: draghandtag och avklarad-sektion ── */
.item-grip {
  flex: none; width: 14px; margin-top: 2px;
  color: var(--ink-3); font-size: 13px; line-height: 1.4;
  cursor: grab; opacity: 0; user-select: none;
}
.item:hover .item-grip { opacity: 1; }
.item.dragging { opacity: .5; background: var(--acc-soft); }
.items { transition: none; }

/* Avklarade punkter samlas under en rubrik — men förblir klickbara, så en
   avbockad punkt går att ta tillbaka. */
.done-head {
  margin: 18px 0 6px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--ink-3);
}
.items--done { opacity: .72; }
.items--done .item:hover { opacity: 1; }

/* ── Sidopanel: plusknapp och redigeringspenna ── */
.side-h {
  display: flex; align-items: center; justify-content: space-between;
}
.side-add {
  width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer;
}
.side-add:hover { background: var(--acc-soft); color: var(--acc); }
.side-edit {
  margin-inline-start: auto; padding: 0 2px;
  font-size: 12px; opacity: 0; color: inherit; cursor: pointer;
}
.side-item:hover .side-edit { opacity: .75; }
.side-edit:hover { opacity: 1 !important; }

/* ── Redigeringsdialog för profil/etikett ── */
.dlg--edit { max-width: 420px; text-align: start; }
.dlg--edit h2 { text-align: center; }
.fld {
  width: 100%; padding: 11px 14px; margin-bottom: 4px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel-2); color: var(--ink);
  font: 500 15px inherit;
}
.fld:focus { outline: 2px solid var(--acc); outline-offset: -1px; }

/* ── Påminnelser på en anteckning ── */
.nr-list { text-align: start; margin-bottom: 6px; }
.nr-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 4px; border-radius: 9px;
  background: var(--panel-2); font-size: 13.5px;
}
.nr-row span { flex: 1; min-width: 0; }
/* Passerade påminnelser visas men tonas ned — de har redan ringt, och att
   dölja dem hade sett ut som om de försvunnit av sig själva. */
.nr-row.is-past { color: var(--ink-3); }
.nr-del {
  flex: none; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-3); cursor: pointer; font-size: 14px; line-height: 1;
}
.nr-del:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* ── Låst anteckning (läsvy) ── */
.lk-body {
  text-align: start; margin: 4px 0 12px; max-height: 46vh; overflow-y: auto;
  font-size: 14.5px; line-height: 1.6; color: var(--ink);
}
.lk-body img { max-width: 100%; height: auto; border-radius: 8px; }
.lk-items { text-align: start; margin: 4px 0 12px; padding: 0; list-style: none;
  max-height: 46vh; overflow-y: auto; }
.lk-items li { display: flex; gap: 8px; padding: 3px 0; font-size: 14.5px; }
.lk-items li.done { color: var(--ink-3); text-decoration: line-through; }
.lk-hint { margin-bottom: 14px; color: var(--ink-3); }

/* ── Händelseformuläret ── */
.ev-lbl {
  display: block; margin: 12px 0 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--ink-3);
}
/* Datum + start + slut på en rad: de hör ihop och läses tillsammans. */
.ev-row { display: flex; gap: 8px; }
.ev-col { flex: 1; min-width: 0; }
.ev-col .ev-lbl { margin-top: 12px; }
.ev-desc { resize: vertical; min-height: 68px; font-weight: 400; }
/* Påminnelser satta i appen (flera, eller en egen tid) rörs inte här — texten
   förklarar varför i stället för att en dropdown tyst skriver över dem. */
.ev-remlocked {
  margin: 0 0 4px; padding: 9px 12px; border-radius: 10px;
  background: var(--panel-2); color: var(--ink-2); text-align: start;
}
/* Felet står vid fältet, inte som en toast som hinner försvinna. */
.ev-err {
  margin: 10px 0 2px; padding: 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger); font-size: 13px; text-align: start;
}
.m-sec {
  margin: 16px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--ink-3);
}
.m-row { display: flex; flex-wrap: wrap; gap: 8px; }
.em {
  width: 38px; height: 38px; padding: 0; font-size: 19px; cursor: pointer;
  border: 2px solid transparent; border-radius: 10px;
  background: var(--panel-2);
}
.em:hover { background: var(--acc-soft); }
.em.on { border-color: var(--acc); }
.cl {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.cl:hover { transform: scale(1.1); }
.cl.on { border-color: var(--ink); }
.dlg--edit .btn { margin-top: 12px; }
.btn.danger { color: var(--danger); border-color: rgba(179, 38, 30, .35); }
.btn.danger:hover { background: rgba(179, 38, 30, .10); }
.dlg--edit .small { margin: 14px 0 0; }

/* ── Etikettväljaren på en anteckning ── */
.m-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.m-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--ink);
  font: 500 14.5px inherit; text-align: start; cursor: pointer;
}
.m-item:hover { background: var(--panel-2); }
.m-item.on { background: var(--acc-soft); border-color: var(--acc); }
.m-item .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }

/* ═══════════════════════════════════════════════════════════════════
   HOPFÄLLBAR AVKLARAD-SEKTION
   ═══════════════════════════════════════════════════════════════════ */

/* Rubriken är nu en knapp — den ska se ut som en rubrik men bete sig som
   något man kan trycka på. */
.done-head {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  margin: 18px 0 6px; padding: 12px 4px 6px;
  border: 0; border-top: 1px solid var(--line);
  background: transparent;
  font: 700 11.5px/1 inherit; letter-spacing: .6px;
  text-transform: uppercase; color: var(--ink-3);
  text-align: start; cursor: pointer;
  border-radius: 0 0 8px 8px;
}
.done-head:hover { color: var(--ink-2); background: var(--panel-2); }
.done-head .caret {
  display: inline-block; width: 10px;
  font-size: 10px; line-height: 1; opacity: .8;
}
.done-head.folded { margin-bottom: 2px; }

/* Punkter i listan får formatering — se till att fet/kursiv/färg syns även
   på en avklarad rad, men dämpat. */
.items--done .item-text b, .items--done .item-text strong,
.items--done .item-text span { opacity: .9; }
.item-text img { max-width: 100%; height: auto; border-radius: 8px; margin: 4px 0; }

/* ═══════════════════════════════════════════════════════════════════
   TECKENSTORLEK
   ═══════════════════════════════════════════════════════════════════ */

/* Minus – värde – plus. Värdet är ingen knapp och ska inte se ut som en. */
.fb-size { gap: 1px; }
.size-val {
  min-width: 26px; padding: 0 2px;
  font: 600 12.5px/1 ui-monospace, "Roboto Mono", monospace;
  color: var(--ink-2); text-align: center; user-select: none;
}
.fb-size .fb-btn { min-width: 26px; padding: 0 4px; font-size: 16px; }

/* Rubriken bär sin formatering som INLINE-stil (n.titleFmt → style-attribut).
   Grundstilen måste därför sätta font-size i en egen regel som ett
   style-attribut kan vinna över — den korta `font:`-genvägen längre upp
   sätter flera egenskaper på en gång och gör det svårare att skriva över
   bara storleken. */
.ed-title { font-size: 27px; }

/* ── Inställningspanelen (settings-web.js) ──
   Raden bär tre saker: namn, en underrad som säger vad den gör, och nuläget
   till höger. Underraden är hela poängen — utan den var menyn fyra ord där
   två av dem ("Back up", "Backup password") lät likadant och gjorde olika
   saker. Formen speglar telefonens .set-row, för det är samma användare. */
/* ⚠️ LISTAN SCROLLAR, INTE DIALOGEN. .dlg har ett eget max-height och skulle
   annars scrolla i sin helhet — vilket sköt "Stäng" utanför skärmen på en
   720 px-hög vy (uppmätt: 781 px innehåll i 670 px). Rubrik och knapp ska
   alltid stå still; det är raderna man bläddrar i. */
.st-list {
  text-align: start; margin: 4px 0 6px;
  max-height: min(58vh, 520px); overflow-y: auto;
  /* Utan detta klipps fokusringen på första och sista raden mot kanten. */
  padding: 2px;
}
.st-sec {
  margin: 15px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--ink-3);
}
.st-sec:first-child { margin-top: 6px; }
/* Adressen står under KONTO-rubriken, inte som en klickbar rad: den går inte
   att ändra här, och en rad som ser klickbar ut men inte är det är värre än
   ingen rad alls. */
.st-mail {
  margin: 0 0 8px; padding: 0 2px; font-size: 13px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px; margin-bottom: 3px;
  border: 1px solid transparent; border-radius: 11px;
  background: transparent; color: var(--ink);
  text-align: start; cursor: pointer; font: inherit;
}
.st-row:hover { background: var(--acc-soft); }
.st-row:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
/* min-width: 0 — utan den vägrar flexbarnet krympa och den långa underraden
   trycker ut nuläget ur dialogen i stället för att radbrytas. */
.st-txt { flex: 1; min-width: 0; }
.st-title { display: block; font-size: 14.5px; font-weight: 600; }
.st-desc {
  display: block; margin-top: 2px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}
.st-val {
  flex: none; font-size: 12px; font-weight: 600; color: var(--ink-3);
  padding: 3px 9px; border-radius: 999px; background: var(--panel-2);
}
.st-build {
  margin: 14px 2px 0; font-size: 11.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Skicka feedback (feedback-web.js) ── */
/* Samma regel som .st-list: rubriken och knapparna står still, innehållet
   scrollar. Se kommentaren i feedback-web.js för mätningen bakom. */
.fb-body { max-height: min(60vh, 440px); overflow-y: auto; padding: 2px; }
/* ⚠️ HÖJDEN SÄTTS I CSS, INTE MED rows=. rows vinner över min-height och
   gav 164 px oavsett fönsterhöjd, vilket sköt ut Skicka-knappen på en låg
   skärm. 150 px från ~750 px fönsterhöjd och uppåt, mindre därunder. */
.fb-text {
  resize: vertical; height: min(150px, 20vh); margin-bottom: 12px;
  font-weight: 400; line-height: 1.5;
}
.fb-check {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.fb-check input { margin: 2px 0 0; flex: none; accent-color: var(--acc); }
/* Den bifogade tekniska informationen står UTSKRIVEN. Att bifoga den är
   rimligt; att inte visa vad man bifogar är det inte. */
.fb-ctx { margin: 14px 0 0; color: var(--ink-3); }
.fb-ctx-val {
  display: inline-block; margin-top: 4px;
  font-family: ui-monospace, "Roboto Mono", monospace; font-size: 11.5px;
  color: var(--ink-3); word-break: break-word;
}

/* ── Admin: inkommen feedback (feedback-admin.js) ──
   Oöversatt vy, bara ett konto ser den. Formen är en lista med kort så en
   lång rapport går att läsa utan att raden blir en tapetremsa. */
.fba-list {
  text-align: start; margin: 4px 0 6px;
  max-height: min(62vh, 560px); overflow-y: auto; padding: 2px;
}
.fba-bar { display: flex; gap: 6px; margin-bottom: 10px; }
.fba-tab {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font: 600 12.5px inherit; cursor: pointer;
}
.fba-tab:hover { background: var(--acc-soft); }
.fba-tab.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.fba-card {
  padding: 11px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2);
}
/* Hanterade tonas ned men försvinner inte ur "Alla" — man vill kunna gå
   tillbaka och se vad man svarade på. */
.fba-card.is-done { opacity: .55; }
.fba-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.fba-who { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fba-when { flex: none; font-size: 12px; color: var(--ink-3); }
/* pre-wrap bevarar användarens radbrytningar utan att vi släpper in HTML —
   texten sätts med esc2(), aldrig som markup. */
.fba-text {
  white-space: pre-wrap; word-break: break-word;
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.fba-meta {
  margin-top: 8px; font-family: ui-monospace, "Roboto Mono", monospace;
  font-size: 11px; color: var(--ink-3); word-break: break-word;
}
.fba-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fba-btn {
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink-2);
  font: 600 12.5px inherit; cursor: pointer;
}
.fba-btn:hover { background: var(--acc-soft); color: var(--ink); }
.fba-btn.danger { color: var(--danger); }
.fba-btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.fba-empty { padding: 22px 8px; text-align: center; font-size: 13.5px; color: var(--ink-3); }
.fba-empty code {
  font-family: ui-monospace, "Roboto Mono", monospace; font-size: 12px;
  padding: 1px 5px; border-radius: 5px; background: var(--panel-2);
}

/* ── Skapa-knappen och dess meny ─────────────────────────────────────
   Två ikonknappar (anteckning/lista) ersatta av EN stor +, som i appen.
   Storleken är poängen: de gamla var lika stora som sortering och
   kortstorlek, så den viktigaste handlingen såg ut som en inställning. */
.tb-new {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px;
  background: var(--acc); color: var(--acc-ink);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.16);
}
.tb-new:hover { filter: brightness(1.08); }
.tb-new:active { transform: scale(.95); }
.tb-new svg { width: 24px; height: 24px; }
.nm { min-width: 210px; }
.nm-item { display: flex; align-items: center; gap: 10px; }
.nm-ic { display: inline-flex; align-items: center; width: 18px; height: 18px; opacity: .7; }
.nm-ic svg { width: 18px; height: 18px; }

/* Spara i stället för ett ensamt kryss. Innehållet sparas redan vid varje
   tangenttryck — knappen ändrar inte det, den gör det synligt. */
.ed-save {
  margin-inline-start: 4px;
  padding: 8px 16px;
  border: 0; border-radius: 10px;
  background: var(--acc); color: var(--acc-ink);
  font: 600 13.5px inherit;
  cursor: pointer;
}
.ed-save:hover { filter: brightness(1.08); }
.ed-save:active { transform: scale(.97); }

/* ── Bild på kortet ──────────────────────────────────────────────────
   Kortets förhandsvisning är ren text (_plain strippar all HTML), så en
   inklistrad bild syntes aldrig. Nu visas den första som en remsa. */
/* En RAD med små miniatyrer uppe till vänster, inte en bred remsa.
   Bilden är en upplysning om vad anteckningen innehåller — texten är
   fortfarande huvudsaken, och en remsa över hela kortet tog över det. */
.card-imgs {
  display: flex;
  gap: 6px;
  margin: 2px 0 9px;
  /* Ingen radbrytning: raden ska vara EN rad. Fler än taket kommer
     aldrig hit, men overflow skyddar smala kort. */
  flex-wrap: nowrap;
  overflow: hidden;
}
.card-img {
  display: block;
  /* Får KRYMPA men aldrig växa, och min-width: 0 tillåter det. Fem
     miniatyrer i ett smalt kort ska bli fem mindre rutor — inte fyra plus
     en avklippt, vilket är vad overflow ensamt hade gett. */
  flex: 0 1 auto;
  min-width: 0;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.grid--large .card-img { width: 84px; }
.grid--small .card-img { width: 58px; }

/* ── Sorteringsmenyn ─────────────────────────────────────────────────
   Bocken visar vad som gäller, som i vilken sorteringsmeny som helst. */
.sm { min-width: 210px; }
.sm-item { display: flex; align-items: flex-start; gap: 8px; }
.sm-item.on { color: var(--acc); font-weight: 600; }
.sm-tick { width: 14px; flex: 0 0 14px; line-height: 1.4; }
.sm-txt { display: flex; flex-direction: column; line-height: 1.35; }
.sm-hint { font-size: 12px; font-weight: 400; opacity: .65; }

/* Skapa-knappen sitter kvar vid sökrutan. .tb-actions har
   margin-inline-start: auto och åker till högerkanten — dit hör
   kontoknappen och vyinställningarna, inte den handling man oftast gör. */
.tb-newhost { display: flex; align-items: center; flex: 0 0 auto; }

/* ── Bildvisare ──────────────────────────────────────────────────────
   Helskärm över redigeraren. Bläddring med pilar, piltangenter eller
   hjulet; Escape och klick bredvid bilden stänger. */
.wv {
  position: fixed; inset: 0; z-index: 9450;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  animation: wvIn .16s ease-out;
}
@keyframes wvIn { from { opacity: 0 } to { opacity: 1 } }
.wv-img {
  max-width: 88vw; max-height: 86vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.wv-x {
  position: absolute; top: 16px; inset-inline-end: 18px;
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.wv-x:hover { background: rgba(255,255,255,.26); }
.wv-x svg { width: 22px; height: 22px; }
.wv-count {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.85); font: 600 14px inherit; letter-spacing: .4px;
  pointer-events: none;
}
.wv-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.wv-nav:hover { background: rgba(255,255,255,.26); }
.wv-nav svg { width: 26px; height: 26px; }
.wv-prev { inset-inline-start: 18px; }
.wv-next { inset-inline-end: 18px; }

/* Bilder i redigeraren ser klickbara ut, eftersom de är det. */
.rich img, .le-input img { cursor: zoom-in; }

/* ── Länkkort i rutnätet ─────────────────────────────────────────────
   Bara den första länken, som i appen och Keep. */
.card-link {
  display: flex; align-items: stretch; gap: 0;
  margin: 2px 0 9px;
  border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; cursor: pointer;
  background: var(--panel-2);
}
.card-link:hover { border-color: var(--acc); }
.card-link-img {
  flex: 0 0 auto; width: 74px; align-self: stretch;
  object-fit: cover; background: var(--panel-2);
}
.card-link-txt {
  min-width: 0; padding: 8px 10px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.card-link-title {
  font: 600 12.5px/1.35 inherit; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-link-dom { font-size: 11.5px; color: var(--ink-2); }

/* Länkar i redigeraren. De navigerar inte av sig själva i ett
   contenteditable — shell.js öppnar dem — men de ska SE klickbara ut. */
.rich a, .le-input a { color: var(--acc); text-decoration: underline; cursor: pointer; }