/* ═══════════════════════════════════════════════════════════════
   Samlify 2.0, designsystem
   Varmt papper, tyst chrome, färgen bärs av connectorerna.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* DESIGN.md §2. Exact values, no rounding. The product keeps its own
     variable names because 140 files read them; only the values are the
     design system's. --paper is the page ground (DESIGN --bg), --surface
     is the card fill, --surface-2 the inset areas (DESIGN --paper). */
  /* AMENDMENT to §6. DESIGN.md puts the card on --surface and the page on
     --bg, which is right for marketing: five sections, one card each. On a
     board of seven cards it inverts figure and ground, and the tint reads
     as seven beige blocks instead of one calm field. §4 and §7 are marked
     PROPOSED and say to revise from real screens, so the product takes the
     same two tokens the other way round: tinted page, white cards. No new
     hex, §2 untouched. See DECISIONS.md 18 August. */
  --paper:#F3F1EC; --surface:#FFFFFF; --surface-2:#F3F1EC; --surface-3:#EAE7DF;
  /* --surface-2 is the inset role (§2 calls it --paper). #FDFCFA is a one
     percent step on a white card, so a search field or a calendar chip
     stopped reading as recessed at all. The tint does that job here. */
  --ink:#1F1E1B; --ink-2:#78746B; --ink-3:#B6B1A6;
  --line:#E4E0D7; --line-2:#F0EDE6; --line-hover:#CFC9BC;
  --glass:var(--paper); --glass-2:var(--paper);
  /* §2, 18 August 2026: the accent is warm orange, not the old blue.
     DESIGN.md §11 flagged the app as the unfinished half of that move and
     asked for one pass, never widget by widget. This is the pass. --signal
     is the same hue by decision and keeps its own token because it has its
     own job: the eyebrow and the timestamp, never a status. */
  --accent:#C0522B; --accent-2:#A64523; --accent-soft:#FBEFEA;
  --accent-line:color-mix(in srgb,var(--accent) 20%,transparent);
  --signal:#C0522B;
  /* The ink of our own mark in the rail. Its own token because it is the one
     place the mark stands alone with no plate behind it, so the choice
     between ink and accent is made here and nowhere else. */
  --marke-ink:var(--ink);
  /* §6 gives no red. Critical collapses into warn; destructive
     confirmation is ink on --warn-soft. */
  --crit:#A96A08; --crit-soft:#FBF3E6; --crit-line:color-mix(in srgb,#A96A08 22%,transparent);
  --warn:#A96A08; --warn-soft:#FBF3E6; --warn-line:color-mix(in srgb,#A96A08 22%,transparent);
  --ok:#28734F; --ok-soft:#EAF3EE; --ok-line:color-mix(in srgb,#28734F 22%,transparent);
  --c-gmail:#1F1E1B; --c-cal:#1F1E1B; --c-notion:#1F1E1B; --c-fortnox:#1F1E1B;
  --c-slack:#1F1E1B; --c-ms:#1F1E1B; --c-hubspot:#1F1E1B; --c-motor:#C0522B;
  /* §2 elevation: two levels and no third. */
  --sh:0 2px 6px rgba(31,30,27,.03);
  --sh-md:0 .8rem 1.2rem rgba(31,30,27,.04), 0 1.6rem 3.2rem rgba(31,30,27,.04);
  --sh-lg:0 .8rem 1.2rem rgba(31,30,27,.04), 0 1.6rem 3.2rem rgba(31,30,27,.04);
  --r:10px; --r-md:10px; --r-sm:8px;
  /* Proposed addition to §2: a 16px control at --r-sm is a circle, and a
     circle means radio button. */
  --r-xs:4px;
  --ease:cubic-bezier(0,0,.2,1);
  --dim:.34;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px; line-height:1.5; font-weight:400;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;text-align:left}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
svg{display:block;flex:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.dsp{font-family:'Inter',-apple-system,sans-serif;font-weight:600;letter-spacing:-.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mut{color:var(--ink-2)} .mut3{color:var(--ink-3)}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(140,134,124,.28);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(140,134,124,.5);background-clip:padding-box}

/* ══ topbar ══ */
.bar{
  position:sticky;top:0;z-index:45;height:54px;display:flex;align-items:center;gap:10px;
  padding:0 20px;background:var(--glass);border-bottom:1px solid var(--line-2);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand .mk{width:24px;height:24px;border-radius:6px;background:var(--ink);color:var(--surface);display:grid;place-items:center}
.brand b{font-family:'Inter',-apple-system,sans-serif;font-weight:600;font-size:15px;letter-spacing:-.02em}
.brand .v{font-size:11px;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:1px 4px;letter-spacing:.02em}
.co{display:flex;align-items:center;gap:7px;height:28px;padding:0 9px 0 4px;border-radius:999px;color:var(--ink-2);font-size:13px;transition:background .2s}
.co:hover{background:var(--surface-3)}
.co .av{width:20px;height:20px;border-radius:6px;background:var(--surface-3);color:var(--ink-2);display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:.02em}
.cmd{
  flex:1;min-width:0;max-width:460px;margin:0 auto;height:32px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 6px 0 12px;
  color:var(--ink-3);font-size:13px;transition:border-color .2s,background .2s,box-shadow .2s;
  white-space:nowrap;overflow:hidden;
}
.cmd span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.cmd>span:nth-child(2){flex:1}
.cmd:hover{border-color:var(--ink-3);background:var(--surface)}
.cmd .k{margin-left:auto;font-size:11px;border:1px solid var(--line);border-radius:6px;padding:1px 5px;background:var(--surface);color:var(--ink-3)}
.right{display:flex;align-items:center;gap:4px;flex:none}
.ib#btnMenu{display:none}
.ib{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink-2);transition:background .18s,color .18s;position:relative}
.ib:hover{background:var(--surface-3);color:var(--ink)}
.ib.on{background:var(--accent-soft);color:var(--accent)}
.ib .dot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--crit);border:1.5px solid var(--surface)}
.pb{height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:.18s}
.pb.ghost{color:var(--ink);border:1px solid var(--line);background:var(--surface)}
.pb.ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.pb.pri{background:var(--accent);color:var(--paper)}
.pb.pri:hover{background:var(--accent-2)}
/* "Testdata". Syns bara utanför prod, och ska synas: se MILJO i tavla.ts. */
.miljomarke{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  background:var(--warn-soft);color:var(--warn)}
.demochip{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:3px 9px;transition:.18s}
.demochip:hover{color:var(--ink);border-color:var(--ink-3)}
.demochip.on{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}

/* ══ stage ══ */
/* `width:100%` är inte överflödig. .stage är ett flexbarn i en kolumn, och
   `margin:0 auto` stänger av stretch: utan bredden krymper ytan till
   INNEHÅLLETS bredd (719 px), och brädet står kvar som en smal spalt mitt
   på en bred skärm hur mycket plats som än finns. Samma fälla är lagad en
   gång till för djupvyn längre ned i filen. Se LEARNINGS.md. */
.stage{width:100%;max-width:1400px;margin:0 auto;padding:26px 26px 150px}

/* ══ AI-raden ══ */
.prio{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);padding:20px 22px 10px;margin-bottom:20px;transition:opacity .35s var(--ease)}
.prio-h{display:flex;align-items:center;gap:9px;padding:0 2px 10px}
.prio-h .sp2{color:var(--accent)}
.prio-h .lbl{font-family:'Inter',-apple-system,sans-serif;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.prio-h .n{margin-left:auto;font-size:11px;color:var(--ink-3)}
.pi{display:grid;grid-template-columns:auto minmax(0,1fr) 322px 26px;gap:13px;align-items:start;
  padding:15px 4px 16px;border-top:1px solid var(--line-2);position:relative;transition:opacity .3s}
.pi:first-of-type{border-top:0}
.pi .sev{width:7px;height:7px;border-radius:50%;margin-top:7px;flex:none}
.pi .sev.crit{background:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}
.pi .sev.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.pi .sev.info{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pi .bd{min-width:0;flex:1}
.pi .tx{font-size:15px;line-height:1.5;letter-spacing:-.008em}
.pi .tx b{font-weight:500}
.pi .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
/* Båda kolumnerna har fast bredd, och knappen fyller sin cell. Då är varje
   primärknapp exakt lika bred som varje annan primärknapp, varje sekundär
   lika bred som varje annan sekundär, och båda kanterna blir lodräta linjer
   ögat kan följa. Att låta knappen växa med sin etikett ger en ojämn kant
   som ser ut som slarv även när knapparna faktiskt är lika höga. */
.pi .acts{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:8px;align-items:start}
.pi .acts .mini{white-space:nowrap;justify-content:center;height:32px;width:100%;overflow:hidden}
.pi .acts .mini.pri{grid-column:2}
.pi .acts .mini:not(.pri){grid-column:1}
.pi .dis{justify-self:end}
/* En punkt som just löste sig försvinner inte tyst. Den står kvar några
   sekunder med sin text nedtonad och ett tydligt Klart bredvid, så att den
   som åtgärdade något ser att det räknades. */
.pi.klar{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;animation:klarin .34s var(--ease)}
.pi.klar .tx{opacity:.42}
.pi.klar .sev{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.pi.klar .klarm{display:inline-flex;align-items:center;gap:6px;color:var(--ok);background:var(--ok-soft);
  border:1px solid var(--ok-line);border-radius:999px;padding:5px 13px 5px 10px;font-size:13px;font-weight:600;
  white-space:nowrap;animation:klarpop .42s var(--ease) .06s both}
.pi.klar.gar{opacity:0;transition:opacity .45s var(--ease)}
@keyframes klarin{from{background:var(--ok-soft)}to{background:transparent}}
@keyframes klarpop{0%{opacity:0;transform:scale(.82)}62%{opacity:1;transform:scale(1.06)}100%{transform:scale(1)}}
.src{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;padding:2px 8px 2px 5px}
.src .m{width:13px;height:13px;border-radius:6px;display:grid;place-items:center;color:var(--paper);font-size:11px;font-weight:700;flex:none}
.why{font-size:11px;color:var(--ink-3);border-bottom:1px dashed var(--line);padding-bottom:1px}
.why:hover{color:var(--ink-2)}
.whybox{margin:2px 0 6px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);padding:11px 13px;font-size:13px;color:var(--ink-2);display:none}
.whybox.on{display:block}
.whybox .f{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-top:1px dashed var(--line-2)}
.whybox .f:first-of-type{border-top:0}
.whybox b{color:var(--ink);font-weight:500}
.prio.empty{padding:14px 16px}
.prio .zen{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
/* Dörrarna in till mejlen ligger på egen rad under meningen. Raden rymmer
   fyra knappar, och på 430 px ryms två: `flex:1 0 100%` bryter dem nedåt i
   stället för att klämma ihop dem bredvid texten, och indraget ställer dem
   under första bokstaven och inte under ikonen (17 px plus 9 px lucka). */
.prio .zenval{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px;padding-left:26px}

/* ══ rutnätet ══ */
.grid{position:relative;transition:height .5s var(--ease)}
/* Ombyggnad utan glidande kort, se build() i motorn. */
.grid.nofx,.grid.nofx .w{transition:none}
.w{
  position:absolute;top:0;left:0;background:var(--surface);border-radius:var(--r);
  box-shadow:var(--sh);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .52s var(--ease),width .52s var(--ease),height .52s var(--ease),
             opacity .34s var(--ease),box-shadow .3s,filter .34s var(--ease);
}
/* will-change ligger PA DEN SOM DRAS, inte pa alla fjorton.
   `will-change:transform` pa .w gjorde varje widget till ett eget
   kompositionslager permanent. Rutnatet raknar fram kolumnbredden med en
   division (colW), och radens hojd ovanfor slutar pa en kvarts pixel, sa
   lagren hamnade pa brutna koordinater. Ett lager pa en bruten koordinat
   rastreras och skalas in igen, och da blir ALLT i widgeten suddigt: text,
   ikoner, skiljelinjer. Det ser ut som dalig upplosning och ar det.
   Vid drag och storleksandring ar lagret ratt, och da satts det. */
/* Den markerade raden inuti en påstigen widget. Exakt samma 2 px i
   accentfärgen som :focus-visible högst upp i filen ger, för det ÄR samma
   sak för ögat: här står du. En andra fokusstil hade lärt ut två saker.

   Den kan inte VARA :focus-visible: DOM-fokus ligger kvar på .w, för en rad
   som `paint` ritar om hade tagit fokus med sig i soptunnan. Se rovMark.
   Offset är negativ så att ramen ligger innanför radens egen yta i stället
   för att skära grannraden ovanför. */
.w .rovrad{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.w.dragging,.w.resizing{will-change:transform}
.w.dragging{transition:none;z-index:32;box-shadow:var(--sh-lg);cursor:grabbing}
.w.resizing{transition:none;z-index:32;box-shadow:var(--sh-lg)}
.drop{position:absolute;border-radius:var(--r);background:var(--accent-soft);border:1.5px dashed var(--accent-line);opacity:0;transition:transform .28s var(--ease),width .28s var(--ease),height .28s var(--ease),opacity .2s;pointer-events:none;z-index:1}
.drop.on{opacity:1}
.wh{height:50px;display:flex;align-items:center;gap:9px;padding:0 12px 0 17px;flex:none}
.wh .mk{width:21px;height:21px;border-radius:6px;display:grid;place-items:center;color:var(--paper);font-size:11px;font-weight:700;flex:none}
.mk.line{background:var(--surface);border:1.3px solid var(--c-cal);color:var(--c-cal)}
.wh h3{font-family:'Inter',-apple-system,sans-serif;font-weight:600;font-size:15px;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh .cnt{font-size:11px;font-weight:500;color:var(--ink-2);background:var(--surface-3);border-radius:999px;padding:1px 6px;flex:none}
.wh .cnt.hot{background:var(--crit-soft);color:var(--crit)}
.wh .tools{margin-left:auto;display:flex;align-items:center;gap:1px;opacity:0;transition:opacity .18s}
.w:hover .wh .tools,.w:focus-within .wh .tools{opacity:1}
.wt{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--ink-3);transition:.15s}
.wt:hover{background:var(--surface-3);color:var(--ink)}
.wt.rm{display:none}
body.edit .wt.rm{display:grid}
body.edit .wt.exp{display:none}
.wb{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 11px 14px;min-height:0}
/* En rullning som borjade i en lista stannar i listan sa lange listan har
   kvar att ge, och far sedan ga vidare ut i bradet. `contain` stod forut pa
   varje yta inuti ett kort, och det kostade mer an det gav: en lista som tog
   slut (eller aldrig var langre an sitt kort) lasta hela sidan sa lange
   pekaren rorde kortet, och man fick sikta i springan mellan tva rutor for
   att komma nedat. Kvar star bara overlaggen, dar sidan bakom aldrig ska
   folja med.
   Inkorgens andlosa historik overlever bytet: webblasaren later rullningen
   sitta kvar i listan under samma rorelse, sa slutet flyger man inte forbi,
   det kraver ett nytt tag pa hjulet. Och `mailBotten` hinner hamta aldre
   brev under tiden, varpa listan har kvar att ge igen. */
.sheet-b,.pal .rs{overscroll-behavior:contain}
.wb.flush{padding:0}
.wb.pad{padding:0 16px 16px}

/* Tomt kort. En ruta utan data ska säga vad som saknas och bära knappen
   som fixar det. Samma markup i widgeten och i djupvyn. */
.tomk{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:10px;height:100%;min-height:130px;padding:20px 24px;color:var(--ink-3)}
.tomk .mk{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--paper);font-size:13px;font-weight:700}
.tomk b{font-size:13px;font-weight:500;color:var(--ink);letter-spacing:-.005em}
.tomk p{font-size:13px;line-height:1.55;max-width:38ch}
.tomk .btn{margin-top:2px}

/* Lägg till widget ligger under brädet i stället för i en verktygsrad
   som bara syns i ett läge. Den enda knappen som behöver finnas när
   greppet är en gest. */
.addw{display:flex;align-items:center;gap:7px;margin:14px auto 0;padding:8px 15px;border-radius:999px;
  font-size:13px;color:var(--ink-3);border:1px dashed var(--line);transition:.18s var(--ease)}
.addw:hover{color:var(--ink);border-color:var(--accent-line);background:var(--surface)}
body.deep .addw{display:none}

/* Kortets krom är ett handtag och går inte att markera. Innehållet är
   text man ska kunna kopiera: ett stycke ur ett mejl, ett fakturanummer,
   en adress. Gesten krockar inte med markeringen, för ett långtryck som
   rör sig mer än några pixlar avbryts och blir en markering i stället. */
.w{-webkit-user-select:none;user-select:none}
.w .wb,.w input,.w textarea{-webkit-user-select:text;user-select:text}
/* Under själva greppet markeras ingenting. Långtrycket ska inte lämna en
   blå släpa efter draget. */
body.griper .w .wb{-webkit-user-select:none;user-select:none}

/* greppläge */
body.edit .w{box-shadow:var(--sh),0 0 0 1.5px var(--accent-line)}
body.edit .wh{cursor:grab}
body.edit .w .tools{opacity:1}
body.edit .wb{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.66}
/* Storlekshandtag på alla fyra kanter och alla fyra hörn. Kortet har
   overflow:hidden, så handtagen ligger INNANFÖR kanten: ett handtag som
   sticker ut i gallret klipps bort och går inte att ta i. Kanterna slutar
   18 px från hörnen så att hörnet, som ändrar två mått samtidigt, alltid
   vinner den pixel man siktar på. */
.rz{position:absolute;display:none;z-index:3}
body.edit .rz{display:block}
[data-rz="n"],[data-rz="s"]{left:18px;right:18px;height:9px;cursor:ns-resize}
[data-rz="n"]{top:0}
[data-rz="s"]{bottom:0}
[data-rz="w"],[data-rz="e"]{top:18px;bottom:18px;width:9px;cursor:ew-resize}
[data-rz="w"]{left:0}
[data-rz="e"]{right:0}
[data-rz="nw"],[data-rz="ne"],[data-rz="sw"],[data-rz="se"]{width:20px;height:20px}
[data-rz="nw"]{top:0;left:0;cursor:nwse-resize}
[data-rz="ne"]{top:0;right:0;cursor:nesw-resize}
[data-rz="sw"]{bottom:0;left:0;cursor:nesw-resize}
[data-rz="se"]{bottom:0;right:0;cursor:nwse-resize}
/* Vinkeln i hörnet är märket som säger att kortet går att ta i. Fyra sådana
   på varje kort gånger sju kort är en vägg av accentfärg, så de tänds på det
   kort pekaren står över. Rutnätet i vila ska vara lugnt. */
[data-rz="nw"]::after,[data-rz="ne"]::after,[data-rz="sw"]::after,[data-rz="se"]::after{
  content:"";position:absolute;width:8px;height:8px;opacity:0;transition:opacity .16s}
.w:hover [data-rz]::after,.w:focus-within [data-rz]::after,.w.resizing [data-rz]::after{opacity:1}
[data-rz="nw"]::after{top:6px;left:6px;border-left:1.8px solid var(--accent);border-top:1.8px solid var(--accent);border-radius:6px 0 0 0}
[data-rz="ne"]::after{top:6px;right:6px;border-right:1.8px solid var(--accent);border-top:1.8px solid var(--accent);border-radius:0 3px 0 0}
[data-rz="sw"]::after{bottom:6px;left:6px;border-left:1.8px solid var(--accent);border-bottom:1.8px solid var(--accent);border-radius:0 0 0 3px}
[data-rz="se"]::after{bottom:6px;right:6px;border-right:1.8px solid var(--accent);border-bottom:1.8px solid var(--accent);border-radius:0 0 3px 0}
/* En pekskärm har ingen hovring att tända dem med. */
@media (hover:none){body.edit [data-rz]::after{opacity:1}}
.editbar{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(190%);z-index:55;
  display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-radius:999px;
  /* Ogenomskinlig botten i stallet for frostat glas. backdrop-filter tvingar
     upp raden i ett eget kompositionslager, och den ligger dessutom pa en
     bruten x-position (centrerad med translateX(-50%) over en innehallsstyrd
     bredd). Lager plus bruten position ger mjuk text, samma sak som gjorde
     hela bradet suddigt. Skillnaden i utseende ar knappt marbar, skillnaden
     i skarpa ar det. Se LEARNINGS. */
  background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-md);opacity:0;pointer-events:none;
  transition:transform .5s var(--ease),opacity .3s;
}
body.edit .editbar{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.editbar .t{font-size:13px;color:var(--ink-2);margin-right:4px}
.menu{position:absolute;bottom:52px;left:50%;transform:translateX(-50%) scale(.96);transform-origin:bottom center;opacity:0;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-md);padding:6px;min-width:212px;transition:.24s var(--ease)}
.menu.on{opacity:1;transform:translateX(-50%) scale(1);pointer-events:auto}
.menu button{display:flex;width:100%;gap:9px;align-items:center;padding:8px 10px;border-radius:8px;font-size:13px;transition:background .15s}
.menu button:hover{background:var(--surface-3)}
.menu button small{display:block;color:var(--ink-3);font-size:11px;font-weight:400}
.menu .sep{height:1px;background:var(--line-2);margin:5px 8px}

/* ══ tråden (lens) ══ */
body.lens .w{opacity:var(--dim);filter:saturate(.25)}
body.lens .w.lit{opacity:1;filter:none;box-shadow:var(--sh-md),0 0 0 1px color-mix(in srgb,var(--accent) 42%,transparent)}
body.lens .prio{opacity:var(--dim)}
body.lens .prio:has(.lit-item){opacity:1}
body.lens .prio:has(.lit-item) .pi:not(.lit-item){opacity:.32}
body.lens .prio:has(.lit-item) .pi.lit-item::after{display:none}
.w.lit .wh h3{color:var(--accent)}
body.lens .w.lit [data-item]{opacity:.3;transition:opacity .3s}
body.lens .w.lit [data-item].lit-item{opacity:1}
.lit-item{position:relative}
body.lens .lit-item::after{content:"";position:absolute;inset:-1px;border-radius:8px;border:1.5px solid var(--accent);pointer-events:none;animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.tlink{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 6px 1px 4px;flex:none;transition:.15s;white-space:nowrap}
.tlink:hover{background:var(--accent);color:var(--paper)}
.threadbar{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(150%);z-index:56;
  max-width:min(1280px,calc(100vw - 36px));display:flex;align-items:center;gap:12px;
  padding:9px 9px 9px 17px;border-radius:20px;background:var(--glass-2);border:1px solid var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  box-shadow:var(--sh-lg);transition:transform .55s var(--ease),opacity .3s var(--ease),visibility .55s;
  /* Gömningen får inte bero på listens höjd. translateY(150%) räcker bara
     när listen är högre än sina 22 px till kanten, och i produkten börjar
     den tom och cirka 20 px hög: då blev de översta pixlarna kvar som en
     grå bubbla mitt i underkanten. Prototypen har alltid innehåll och
     visade därför aldrig felet. */
  opacity:0;visibility:hidden;
}
.threadbar.on{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
.threadbar .ttl{font-family:'Inter',-apple-system,sans-serif;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.threadbar .sub{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.chain{display:flex;align-items:center;gap:5px;overflow-x:auto;padding:2px 0;scrollbar-width:none}
.chain::-webkit-scrollbar{display:none}
.chain .ar{color:var(--ink-3);flex:none;opacity:.55}
.cnode{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:11px;white-space:nowrap;transition:.18s;flex:none}
.cnode:hover{border-color:var(--accent);color:var(--accent)}
.cnode .m{width:15px;height:15px;border-radius:6px;display:grid;place-items:center;color:var(--paper);font-size:11px;font-weight:700;flex:none}

/* ══ delade primitiver ══ */
.seg{display:inline-flex;background:var(--surface-3);border-radius:999px;padding:2px;gap:2px;flex:none}
.seg button{height:23px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:500;color:var(--ink-2);transition:.18s;white-space:nowrap}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(26,25,23,.1)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;border-radius:999px;padding:2px 8px;white-space:nowrap;flex:none}
.pill .d{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.p-crit{color:var(--crit);background:var(--crit-soft)}
.p-warn{color:var(--warn);background:var(--warn-soft)}
.tomfalt{color:var(--crit);font-weight:600}
.mini[disabled]{opacity:.45;cursor:not-allowed}
.avtaltext{width:100%;min-height:46vh;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);resize:vertical}
.avtaltext.har-tomma{border-color:var(--crit)}
.p-ok{color:var(--ok);background:var(--ok-soft)}
.p-info{color:var(--accent);background:var(--accent-soft)}
.p-mut{color:var(--ink-2);background:var(--surface-3)}
/* Basstorlek för varje märke. Kontextreglerna (.wh .mk, .cc .mk, .act .mk …)
   har högre specificitet och vinner ändå. Utan den här hade ett märke i
   ett sammanhang som INTE sätter storlek fått sin SVG:s egen storlek, och
   Notion-loggan i brödsmulan blev 300 px hög. En bokstav har ingen egen
   storlek; en logotyp har det. */
.mk{width:16px;height:16px;flex:none;display:grid;place-items:center}
.av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--paper);flex:none;letter-spacing:.02em}
.row{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:12px;transition:background .16s;cursor:pointer;position:relative}
.row:hover{background:var(--surface-3)}
/* `.cand` (kandidatraderna i Obemannade pass) bär samma t1/t2 som `.row` men
   låg utanför selektorn, så namn och detalj rann ihop till en rad:
   "Erik SandbergTäby · 9 min · ledig". Klassnamnet är kontraktet; den som
   återanvänder det ska få samma utseende. */
.row .t1,.row .t2,.cand .t1,.cand .t2{display:block}
.row .t1,.cand .t1{font-size:13px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t2,.cand .t2{font-size:13px;line-height:1.45;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .rt{margin-left:auto;font-size:11px;color:var(--ink-3);flex:none;display:flex;align-items:center;gap:6px}
/* Misslyckade utföranden. `.t2` kapar med ellips, och det är rätt för en
   underrad som upprepar något som står någon annanstans. Här ÄR meningen
   innehållet: varför det inte gick och vad hon gör åt det. Mätt i
   webbläsaren 26 augusti 2026 på 430 px, där raden slutade "Samlify har
   inte behörigheten som h…" och kunden alltså inte kunde läsa skälet till
   att hennes ja inte blev av. En kapad förklaring är samma fel som ingen
   förklaring. */
.miss-rad .miss-t{display:block;font-size:13px;line-height:1.45;color:var(--ink-2);white-space:normal;overflow:visible;text-overflow:clip}
.miss-rad .miss-t+.miss-t{margin-top:3px}
/* Etiketten går före texten på en smal skärm: den säger bara "Gick inte",
   och meningen under säger allt annat. */
@media (max-width:560px){.miss-rad .rt{margin-left:0}}
.grow{min-width:0;flex:1}
.empt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:100%;min-height:90px;color:var(--ink-3);font-size:13px;text-align:center;padding:16px}
.bk{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2);padding:6px 8px;border-radius:8px}
.bk:hover{background:var(--surface-3);color:var(--ink)}
.mini{height:26px;padding:0 10px;border-radius:8px;font-size:11px;font-weight:500;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);color:var(--ink);transition:.16s;background:var(--surface)}
.mini:hover{border-color:var(--ink-3);background:var(--surface-2)}
.mini.pri{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.mini.pri:hover{background:var(--accent-2);border-color:var(--accent-2)}
.mini.dang{color:var(--crit);border-color:var(--crit-line)}
.mini.dang:hover{background:var(--crit-soft)}
.bar-m{height:4px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.bar-m i{display:block;height:100%;border-radius:6px}

/* ══ mini-appar ══ */
/* Gmail */
.gm-tb{display:flex;align-items:center;gap:8px;padding:2px 5px 8px}
.mrow .dot{position:absolute;left:2px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--c-gmail)}
.mrow.unread .t1{font-weight:600}
.mread{padding:2px 6px 8px}
.mread h4{font-size:15px;font-weight:500;letter-spacing:-.012em;line-height:1.35;margin:8px 0 6px}
.mread .fr{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.mread .bdy{font-size:13px;line-height:1.62;color:var(--ink-2);padding:11px 0 4px}
.mread .bdy p{margin-bottom:9px}
.att{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:5px 10px 5px 7px;font-size:11px;color:var(--ink-2);margin-top:2px}
/* ── brevet som avsändaren formgav det ──────────────────────────────
   Allt innanför `.brev` är avsändarens: färger, knappar, tabellen.
   Reglerna här gör tre saker och inget mer. De håller brevet innanför
   rutan (en 600 px bred tabell får inte skjuta ut widgeten), de ger det
   ett vitt kort att stå på så att svart text syns i mörkt läge, och de
   ger en läsbar utgångspunkt för det avsändaren INTE satt. Allt
   avsändaren satt själv ligger inline och vinner över det här. */
.bdy.brev{background:var(--paper);color:#1f2328;border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:12px 13px;margin:2px 0 6px;overflow-x:auto;font-size:13px;line-height:1.55}
.bdy.brev *{max-width:100%}
/* The whole letter, whatever the widget's width.
   A newsletter is built for 600 px and more: `width="700"` on the table,
   `width:700px` inline on the cell, a button as wide as the layout.
   `max-width:100%` alone does not hold those in (a cell keeps its 700
   and pushes past the table), so in a narrow widget the right edge was
   cut off behind a horizontal scrollbar (Bizee's letter, 19 August
   2026). These rules make the sender's layout fluid instead: tables and
   cells give up their fixed widths, text wraps, images scale down but
   never up. Columns lose their exact proportions; the text is all there.
   `!important` because the widths are inline and would otherwise win. */
.bdy.brev table,.bdy.brev td,.bdy.brev th,.bdy.brev div,.bdy.brev p,.bdy.brev span,.bdy.brev a{max-width:100%!important;min-width:0!important;box-sizing:border-box}
.bdy.brev table{width:auto!important}
/* A table the sender made full-width stays full-width: a header band
   over a short text must not shrink to the text. Pixel widths above are
   the ones that overflow; a percentage never does. */
.bdy.brev table[width="100%"],.bdy.brev table[style*="width:100%"],.bdy.brev table[style*="width: 100%"]{width:100%!important}
.bdy.brev td,.bdy.brev th{width:auto!important;white-space:normal!important}
.bdy.brev *{overflow-wrap:anywhere}
/* `height:auto` bara på hämtade bilder. En blockerad bild bär en
   genomskinlig pixel som källa, och pixelns kvadratiska proportioner hade
   gjort en 118×28 logotyp till en 118×118 platta. Utan regeln får
   width- och height-attributen bestämma, alltså brevets egna mått. */
.bdy.brev img{max-width:100%!important;border:0}
.bdy.brev img:not([data-blockerad]){height:auto!important}
/* En bild som inte hämtats ska se ut som ett medvetet val, inte som en
   trasig fil. Webbläsarens brustna ikon säger fel sak, och alt-texten
   mitt i brevet läser som ett fel. Raden ovanför brevet säger vad som
   hänt och hur man hämtar den. */
.bdy.brev img[data-blockerad]{background:#f1f2f4;border:1px dashed #d9d9de;border-radius:6px;
  min-width:20px;min-height:18px;font-size:0;color:transparent}
.bdy.brev table{border-collapse:collapse}
.bdy.brev p{margin:0 0 9px}
.bdy.brev a{color:#1a56db;text-decoration:underline}
.bdy.brev h1,.bdy.brev h2,.bdy.brev h3{font-size:15px;margin:0 0 8px;line-height:1.3}
/* Raden om blockerade bilder. Vår text om avsändarens brev, alltså vårt
   krom och inte deras: den ska se ut som resten av Samlify. */
.bildsparr{display:flex;align-items:center;gap:8px;padding:7px 9px;margin:2px 0 6px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);
  font-size:11px;color:var(--ink-3)}
.bildsparr .grow{min-width:0}
.draft{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r-md);padding:11px 12px;margin-top:11px;animation:pop .35s var(--ease)}
.draft .hd{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:7px}
.draft .tx{font-size:13px;line-height:1.6;white-space:pre-line}
/* Utkastet redigeras där det står. En text man ska godkänna men inte kan
   rätta skrivs om för hand någon annanstans, och då är utkastet inte en
   funktion utan ett extra steg. Ramen syns först vid pekaren, så rutan är
   lugn att läsa och ändå uppenbart ett fält. */
/* Ram och innerkant är 8 px tillsammans, därför drar marginalen ut rutan
   exakt lika mycket åt båda håll: texten hamnar på samma vänsterkant som
   rubriken ovanför, med eller utan ram. */
.draft textarea.tx{display:block;box-sizing:border-box;width:calc(100% + 16px);margin:-6px -8px;padding:5px 7px;
  border:1px solid transparent;border-radius:var(--r-sm);background:none;color:var(--ink);
  font:inherit;font-size:13px;line-height:1.6;resize:vertical;outline:0;white-space:pre-wrap}
.draft textarea.tx:hover{border-color:var(--accent-line)}
.draft textarea.tx:focus{border-color:var(--accent);background:var(--surface)}
.draft .ft{display:flex;gap:6px;margin-top:10px}
.draft .skrivs{min-height:1.6em}
/* Thinking: the mark turns alone in the box. Writing: the caret, no mark. */
.draft .skrivs .tank-m{display:none;color:var(--accent);opacity:.7}
.draft .skrivs.tanker .tank-m{display:inline-flex}
.draft .skrivs.tanker .caret{display:none}
/* The draft is typed out under an orange caret, the same caret as the
   landing page headline. Before the text lands the caret stands alone at
   the start of the empty box: the box is open, something is writing. */
.draft .caret{display:inline-block;width:2px;height:.95em;margin-left:2px;vertical-align:-.12em;
  background:var(--accent);border-radius:1px;animation:utkastblink 1s steps(1,end) infinite}
@keyframes utkastblink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.draft .caret{animation:none;opacity:1}}
.shim{height:9px;border-radius:6px;background:linear-gradient(90deg,var(--surface-3) 25%,var(--line-2) 37%,var(--surface-3) 63%);background-size:400% 100%;animation:sh 1.3s linear infinite;margin-bottom:7px}
@keyframes sh{from{background-position:100% 0}to{background-position:0 0}}
/* Kalender */
.cal-strip{display:flex;gap:3px;padding:2px 4px 9px}
.cal-strip .d{flex:1;text-align:center;padding:5px 0 6px;border-radius:8px;font-size:11px;color:var(--ink-3);transition:.16s}
.cal-strip .d:hover{background:var(--surface-3)}
.cal-strip .d b{display:block;font-family:'Inter',-apple-system,sans-serif;font-weight:600;font-size:13px;color:var(--ink);margin-top:2px}
.cal-strip .d.on{background:var(--ink)}
.cal-strip .d.on b,.cal-strip .d.on{color:var(--surface)}
.day{position:relative;padding-left:36px}
.day .hr{position:relative;height:30px;border-top:1px solid var(--line-2)}
.day .hr span{position:absolute;left:-36px;top:-7px;font-size:11px;color:var(--ink-3);width:30px;text-align:right}
.ev{position:absolute;left:38px;right:6px;border-radius:8px;padding:4px 8px;font-size:11px;line-height:1.3;overflow:hidden;cursor:pointer;transition:.16s;border-left:2.5px solid}
.ev b{font-weight:500;display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev small{opacity:.75;font-size:11px}
.ev:hover{filter:brightness(.97);transform:translateX(1px)}
.ev.short small{display:none}
.ev.short b{font-size:11px}
.nowline{position:absolute;left:32px;right:6px;height:1.5px;background:var(--crit);z-index:2}
.nowline::before{content:"";position:absolute;left:-4px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--crit)}
/* Notion */
.nt-tabs{display:flex;gap:2px;padding:2px 4px 7px;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.nt-tabs button{font-size:11px;color:var(--ink-3);padding:4px 8px;border-radius:6px;font-weight:500}
.nt-tabs button.on{color:var(--ink);background:var(--surface-3)}
.chk2{width:17px;height:17px;border:1.6px solid var(--ink-3);border-radius:6px;flex:none;display:grid;
  place-items:center;color:transparent;transition:.16s;margin-top:2px;background:none}
.chk2:hover{border-color:var(--ok)}
.chk2.on{background:var(--ok);border-color:var(--ok);color:var(--paper)}
.chk{width:15px;height:15px;border-radius:6px;border:1.5px solid var(--ink-3);flex:none;display:grid;place-items:center;color:transparent;transition:.18s;margin-top:1px}
.chk.on{background:var(--ok);border-color:var(--ok);color:var(--paper)}
.tk.done .t1{text-decoration:line-through;color:var(--ink-3)}
.nadd{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;color:var(--ink-3);font-size:13px;width:100%}
.nadd:hover{background:var(--surface-3)}
.nadd input{border:0;outline:0;background:none;flex:1;font-size:13px;min-width:0}
/* Leveranser */
.tl{position:relative;padding-left:20px;margin-top:4px}
.tl::before{content:"";position:absolute;left:5.5px;top:6px;bottom:8px;width:1.5px;background:var(--line)}
.tl .st{position:relative;padding:0 0 12px}
.tl .st .pt{position:absolute;left:-20px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.tl .st.done .pt{border-color:var(--ok);background:var(--ok)}
.tl .st.bad .pt{border-color:var(--crit);background:var(--crit)}
.tl .st.now .pt{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tl .st .lb{font-size:13px;font-weight:500;display:flex;gap:8px;align-items:baseline}
.tl .st .lb i{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:400}
.tl .st .nt2{font-size:11px;color:var(--ink-2);margin-top:1px;line-height:1.45}
/* Attest */
.inv{border:1px solid var(--line);border-radius:var(--r-md);padding:13px;margin:2px 2px 8px;background:var(--surface-2);animation:pop .3s var(--ease)}
.inv .amt{font-family:'Inter',-apple-system,sans-serif;font-weight:600;font-size:24px;letter-spacing:-.025em;line-height:1.1}
.dev{display:flex;gap:7px;align-items:flex-start;background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:7px 9px;font-size:11px;line-height:1.4;margin-top:9px}
/* Pass */
.cand{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px}
.cand:hover{background:var(--surface-3)}
.ring{width:30px;height:30px;flex:none;position:relative;display:grid;place-items:center;font-size:11px;font-weight:600}
/* Chat */
.chat{display:flex;flex-direction:column;gap:9px;padding:4px 5px}
/* Bara det DU säger ligger i en bubbla.
   Svaret är löpande text, som i Claude. Skälet är att en bubbla ramar in
   ett yttrande, och ett svar på tio rader i en ram blir en vägg: ögat ser
   formen före orden. Frågan är kort och tjänar på ramen, svaret är långt
   och tjänar på att slippa den. Samma regel som tankeraden, som inte
   heller är en bubbla: den har inte sagt något än. */
.bub{max-width:88%;padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.5}
.bub.me{align-self:flex-end;background:var(--accent);color:var(--paper);border-bottom-right-radius:5px}
.bub.ai{align-self:stretch;max-width:100%;background:none;padding:2px 2px 6px;
  border-radius:0;line-height:1.62}
.chips{display:flex;flex-wrap:wrap;gap:5px;padding:4px 5px 0}
.chip{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--ink-2);transition:.16s}
.chip:hover{border-color:var(--accent);color:var(--accent)}
/* Skrivfältet ligger STILLA längst ned, oavsett hur högt kortet är och hur
   långt samtalet blivit. Det låg tidigare sist i det som rullar, alltså
   åkte det ur bild så fort svaren blev fler än kortet rymde, och man fick
   rulla ned för att skriva. Varje chatt gör tvärtom, av goda skäl. */
.w[data-w="ai"] .wb,#page .aivy{display:flex;flex-direction:column;overflow:hidden}
.w[data-w="ai"] .chat,#page .aivy .chat{flex:1;overflow-y:auto;min-height:0}
/* Djupvyn behöver ett tak för att raderna ovanför ska betyda något: utan
   det är kortet lika högt som samtalet, `flex:1` blir "så hög som
   innehållet", och då rullar hela sidan i stället för chatten. Ett tak och
   inte en fast höjd, så att ett kort samtal ger ett kort kort. Klassen
   sätts av `vyklass` i widgetregistret. */
/* A HEIGHT, NOT A CAP, and that is a deliberate reversal.

   It used to be `max-height`, so that a short conversation gave a short
   card. The cost of that only shows up when you measure it: the card is
   sized by its content, so it GREW with every answer, and the composer
   walked down the screen the whole way. Measured at 430 px wide in a
   1400 px window, empty card 703 px and full card 1190 px, which is the
   field moving 487 px over one conversation. The notice above would have
   added one more 32 px step to that same walk, because a content sized
   card has no slack for `flex:1` to give back.

   Fixed, the chat is the only thing that changes size, the field does not
   move at all, and the notice costs nothing when it arrives. `min()`
   keeps the old cap for short windows, where it still decides. */
#page .aivy{height:min(720px,calc(100vh - 210px))}
.w[data-w="ai"] .chips,.w[data-w="ai"] .ask{flex:none}

/* Orden rutan lärt sig. Bara i djupvyn: widgeten är en chat, och en tabell
   där hade trängt undan det hon kom för. Listan är egen rullning med ett
   eget tak, så att den aldrig knuffar ut skrivfältet. */
#page .aivy .ordlista{flex:none;margin:10px 5px 0;padding-top:9px;border-top:1px solid var(--line);
  max-height:180px;overflow-y:auto}
.ordrubrik{font-size:11px;font-weight:600;color:var(--ink-2);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:6px}
.ordrad{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:6px 0;border-bottom:1px solid var(--line-2,var(--line));font-size:13px}
.ordrad:last-child{border-bottom:0}
.ordknapp{display:flex;gap:5px;flex:none}
/* Ordforradet sitter i ett .cc-kort: @container mater kortet, inte fonstret. */
@container(max-width:400px){
  .ordrad{flex-direction:column;gap:5px}
  .ordknapp{width:100%}
}

/* Fältet växer nedåt i stället för att rada texten åt höger. Radbrytning
   kräver en textarea: en input har ingen. Enter skickar, skift+enter ger
   en ny rad, se keydown i 05-engine.js. */
.ask{display:flex;align-items:flex-end;gap:7px;margin:6px 5px 0;border:1px solid var(--line);
  border-radius:12px;padding:4px 5px 4px 12px;background:var(--surface-2)}
/* Gnistan centreras pa textens SISTA rad, inte i hela rutan: falt och knapp
   ar bottenfasta sedan faltet borjade vaxa pa hojden, och en ikon som
   ligger kvar i gamla mitten ser felplacerad ut redan pa en rad. En rad ar
   24 px hog (18 px text + 3+3 padding), ikonen 13: (24-13)/2 ≈ 5,5. */
.ask>svg{flex:none;align-self:flex-end;margin-bottom:5.5px;color:var(--ink-3)}

/* ── What is left of the month ─────────────────────────────────────
   The notice sits above the assistant composer, which is where the
   action is rather than in a corner she learns not to look at.

   IT IS OUT OF FLOW, AND THAT IS THE WHOLE POINT. Measured in a browser
   at 430 px: a normal sibling above `.ask` moves the composer 0 px in
   the widget (the chat is `flex:1` and simply gives up the room) but
   34 px in the deep view, which has a cap and no fixed height, so it
   grows instead. Pulling the field out from under someone mid sentence
   is worse than the limit being announced at all, so the notice is
   positioned against `.ask` and takes part in no layout anywhere. It
   lands on the chips row, which steps aside in `aiChipsRad`.

   One accent and one weight for both states. `slut` is the arrival and
   carries the tint; `nara` is a remark and stays quiet. Neither is red:
   a spending limit reached on plan is not an error. */
/* NO BOX AND NO TINT, and both are decisions rather than omissions. A
   bordered field on a light fill directly above the composer read as a
   second, disabled text input: the first screenshot at 430 px had two
   identical looking fields stacked, and the sentence looked like
   placeholder text. And DESIGN.md says the accent appears about once per
   screen, which the inbox already spends on the thread pills. So this is
   what the plan page does with the same sentence: muted text for the
   warning, ink for the arrival, and no colour of its own. */
/* --ink-2 and not --ink-3 for the warning. #B6B1A6 on the card measures
   about 2.1:1, which is under AA for text this size, and a line nobody
   can read is a line that may as well not be drawn. --ink-2 is 4.6:1. */
.anvnotis{display:block;font-size:11.5px;line-height:1.4;color:var(--ink-2);
  text-decoration:none;transition:.16s}
.anvnotis:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.anvnotis.slut{color:var(--ink)}
.anvnotis b{font-weight:600;color:var(--ink)}
.anvnotis[hidden]{display:none}
/* In the column, between the chips and the composer.

   IT SITS IN ORDINARY FLOW, AND THAT IS MEASURED RATHER THAN ASSUMED.
   The rule is that the notice must never push the composer down when it
   appears. Inserting a 32 px flow element above `.ask` and reading the
   field's position back, at 430 px wide:

     widget on the board          0 px, every window height and length
     deep view, window 860 px     0 px, empty and 40 messages
     deep view, window 1400 px    0 px with 40 messages, 32 px when empty

   One case out of six, and the reason is `#page .aivy` below: the chat is
   `flex:1`, so it gives up the room instead of the composer moving, but
   only while the card has room to give. On a tall window with a short
   conversation the card was under its cap and grew instead. The
   `min-height` there is what closes that case, and it is the whole fix.

   An earlier draft positioned this absolutely instead. That measured 0 px
   everywhere, but it had to lie over the chips row, and hiding the chips
   took the Clear button away with them: `tests/e2e/assistent.spec.ts`
   caught it. Out of flow was the wrong trade. */
.anvnotis.anv-ai{margin:6px 5px 0}
/* In the inbox the widget is a list with its own chrome, so here the
   notice IS a row in the column: nothing below it is a text field, and
   the list scrolls on its own. */
.anvnotis.anv-inkorg{margin:2px 10px 7px}

.ask:focus-within{border-color:var(--accent-line)}
.ask textarea{flex:1;border:0;outline:0;background:none;font:inherit;font-size:13px;min-width:0;
  resize:none;padding:3px 0;line-height:1.45;max-height:96px;overflow-y:auto;color:var(--ink)}
.ask .wt{flex:none;margin-bottom:1px}
/* Raden som visas medan assistenten arbetar. Ersatter de tre prickarna:
   markets trad snurrar, prickarna tands i tur och ordning, och bredvid
   star ett ord och en klocka. Se tankRad() i 05-engine.js.
   Bredden fastnaglas INTE: orden ar olika langa, och en ruta som hoppar i
   sidled varannan sekund drar mer uppmarksamhet an svaret gor. Market och
   klockan ligger darfor i flode, och bara siffrorna har tabularsiffror. */
/* Tankeraden är INTE en bubbla. En bubbla är något någon sagt, och medan
   rutan tänker har den inte sagt något än: en tom bubbla som ligger och
   väntar läser som ett svar som inte kom. Bubblan ritas därför först när
   det finns text i den. Raden här är bara märket, ordet och klockan. */
.tank{display:flex;align-items:center;gap:8px;align-self:flex-start;
  padding:5px 2px}
/* Karnan ar hardkodad i marke() enligt varumarkesreglerna, men den maste
   folja temat har: var(--ink-2) forsvinner i en mork bubbla. */
.tank-m{display:flex;color:var(--c-motor);animation:tanksnurr 3.4s linear infinite}
.tank-m svg{display:block}
.tank-m circle{animation:tankpuls 1.5s ease-in-out infinite}
.tank-m g:nth-of-type(2) circle{animation-delay:.14s}
.tank-m g:nth-of-type(3) circle{animation-delay:.28s}
.tank-m g:nth-of-type(4) circle{animation-delay:.42s}
.tank-m g:nth-of-type(5) circle{animation-delay:.56s}
.tank-m g:nth-of-type(6) circle{animation-delay:.7s}
/* Ordet är halvfett och skimrar. Skimret är det som gör att raden läses som
   pågående arbete i stället för som en fryst etikett, och det kostar mindre
   uppmärksamhet än en snurra: ögat ser rörelsen utan att dras till den. */
.tank-o{font-size:13px;font-weight:600;color:var(--ink-2);
  background:linear-gradient(90deg,var(--ink-3) 30%,var(--ink) 50%,var(--ink-3) 70%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:tankskimmer 1.9s linear infinite}
.tank-o::after{content:'…'}
@keyframes tanksnurr{to{transform:rotate(360deg)}}
@keyframes tankpuls{0%,100%{opacity:.28}50%{opacity:1}}
@keyframes tankskimmer{to{background-position:-220% 0}}
/* Den som slagit av rorelse ska fa raden, inte snurren. Ordet och klockan
   bar redan hela beskedet. Skimret slas av pa samma satt, och da maste
   texten fa tillbaka sin farg: en genomskinlig text utan skimmer ar en
   osynlig text. */
@media (prefers-reduced-motion:reduce){
  .tank-m,.tank-m circle{animation:none}
  .tank-o{animation:none;background:none;-webkit-text-fill-color:currentColor;color:var(--ink-2)}
}
/* KPI */
.kpis{display:flex;gap:8px;padding:2px 4px}
.kpi{flex:1;min-width:0;background:var(--surface-2);border-radius:var(--r-md);padding:10px 12px}
.kpi .n{font-family:'Inter',-apple-system,sans-serif;font-weight:600;font-size:24px;letter-spacing:-.03em;line-height:1.15}
.kpi .l{font-size:11px;color:var(--ink-2);margin-top:2px;line-height:1.3}
.spark{display:flex;align-items:flex-end;gap:2px;height:16px;margin-top:7px}
.spark i{flex:1;background:var(--accent-line);border-radius:6px;min-height:2px}
/* Anteckning */
.note{width:100%;height:100%;border:0;outline:0;resize:none;background:none;font-size:13px;line-height:1.6;color:var(--ink);padding:2px 5px}
/* Slack */
.sl{padding:4px 6px}
.sl .msg{display:flex;gap:9px;padding:6px 0}
.sl .msg .bd{min-width:0}
.sl .nm{font-size:13px;font-weight:600;display:flex;gap:7px;align-items:baseline}
.sl .nm i{font-style:normal;font-weight:400;font-size:11px;color:var(--ink-3)}
.sl .tx{font-size:13px;line-height:1.5;color:var(--ink-2)}
.sl .rp{font-size:11px;color:var(--accent);margin-top:3px}

/* ══ sheet / drill-in ══ */
.scrim{position:fixed;inset:0;background:rgba(26,25,23,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .45s var(--ease);z-index:58}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:50%;bottom:0;width:min(1060px,calc(100vw - 32px));height:min(86vh,900px);
  transform:translateX(-50%) translateY(101%);background:var(--surface);border-radius:20px 24px 0 0;
  box-shadow:var(--sh-lg);z-index:59;display:flex;flex-direction:column;overflow:hidden;
  transition:transform .58s var(--ease);
}
.sheet.on{transform:translateX(-50%) translateY(0)}
.sheet .hnd{width:38px;height:4px;border-radius:6px;background:var(--line);margin:9px auto 0;flex:none}
.sheet-h{display:flex;align-items:center;gap:11px;padding:14px 22px 13px;flex:none}
.sheet-h .mk{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--paper);font-size:11px;font-weight:700}
.sheet-h h2{font-family:'Inter',-apple-system,sans-serif;font-weight:600;font-size:17px;letter-spacing:-.02em}
.sheet-h .sub{font-size:13px;color:var(--ink-3)}
.sheet-b{flex:1;overflow-y:auto;padding:0 22px 28px}
.sect{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:16px 2px 8px}

/* Kärnan, i Anslutningar när ingenting är inkopplat.
   Huset är prototypens, scenen är motorfilens och ligger i en shadow-rot
   (se `karnanMonta` i 05-engine.js), så de två uppsättningarna klassnamn
   kan inte nå varandra. Måtten står här och inte i scenen: scenen är
   16:9 och skalar med sin bredd, huset avgör hur bred den får bli.
   Taket på 720 px är därför inte prydnad. Utan det blir slingan 1200 px
   bred på en stor skärm, alltså 675 px hög, och då står korten under den
   under vikningen på just den vy som ska säga "börja här". */
.karnhus{max-width:720px;margin:4px 0 6px}
.karnscen{display:block;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.karnord{padding:12px 2px 0}
.karnord b{display:block;font-size:15px;font-weight:500}
.karnord span{display:block;color:var(--ink-2);font-size:13px;line-height:1.5;margin-top:3px;max-width:60ch}
@media(max-width:560px){.karnhus{margin:2px 0 4px}}

/* connectors */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:11px}
/* Air between the groups on Connections: a heading straight after a card
   grid doubles its distance, so the next group reads as a new group and
   not as a continuation of the previous one (William, 21 August 2026). */
.cgrid+.sect{padding-top:34px}
.cc{border:1px solid var(--line);border-radius:var(--r-md);padding:14px;transition:.2s;background:var(--surface);container-type:inline-size}
.cc:hover{border-color:var(--ink-3)}
.cc .top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.cc .mk{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--paper);font-size:13px;font-weight:700}
.cc h4{font-size:13px;font-weight:500}
/* Statusraden är kortets enda text. Den får bryta på två rader (synktexten
   är lång i vissa lägen) utan att knappen hoppar: kortet är en kolumn med
   knappen sist. */
.cc .ccst{font-size:11px;color:var(--ink-3);line-height:1.45;margin-top:1px}
/* `.fel` var röd och bar leverantörens råtext. Kvar som alias, i varningston,
   för markup som inte hunnit med. Se `.ccfel` nedan. */
.cc .ccst.varn,.cc .ccst.fel{color:var(--warn)}
/* Ett fel på ett kort är inte en fara, det är en sak att trycka på, och
   kortet bär en knapp för just den saken. Rött (--crit) står kvar för det
   som faktiskt kostar pengar: en faktura som avviker, ett certifikat som
   gått ut. En koppling som tappat sin åtkomst är gul och en mening.
   EGET BLOCK, inte toppraden: kortet är 232 px brett, och en mening bredvid
   en bricka blev en remsa med tre tecken per rad. */
.cc .ccfel{
  font-size:11px;line-height:1.5;color:var(--warn);
  background:var(--warn-soft);border:1px solid var(--warn-line);
  border-radius:var(--r-sm);padding:8px 10px;margin:0 0 10px;
}
.cc.harfel{border-color:var(--warn-line)}
.cc.harfel:hover{border-color:var(--warn)}
.cc .sc{font-size:11px;color:var(--ink-2);line-height:1.5;margin-bottom:11px}
.cc .ft{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Knappar i ett kort bryts inte mitt i ordet. "Koppla från" pa tva rader
   ser ut som ett fel i bygget, inte som en knapp. */
.cc .ft .mini{white-space:nowrap}

/* ── de tva anslutningarna, som tva rader i kortet ──────────────────
   Claude-kortet ar det enda i listan dar TVA saker ska kopplas in, och
   de gor olika nytta: den ena later dig fraga i Claude, den andra later
   rutan har svara. Ett enda "Ansluten" hade dolt vilken av dem som
   fattas, och det ar precis det man behover veta. */
.steg{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid var(--line-2)}
.steg .pt{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--surface-3);color:var(--ink-3);font-size:11px;font-weight:600}
.steg.klar .pt{background:var(--ok);color:var(--paper)}
.steg .nm{font-size:13px;font-weight:500;letter-spacing:-.01em}
.steg .vad{font-size:11px;color:var(--ink-3);line-height:1.4;display:block}
.steg .lage{margin-left:auto;font-size:11px;font-weight:500;color:var(--ink-3);white-space:nowrap}
/* Raden bar tre saker pa en smal yta: namn, lage och knapp. Under 380 px
   far knappen ga ned pa egen rad i stallet for att klamma namnet. @container
   mater KORTET, inte fonstret: ett smalt kort i ett brett fonster ska wrappa. */
@container(max-width:380px){
  .steg{flex-wrap:wrap}
  /* Basis utan egen vanstermarginal, och det ar hela skillnaden. Med
     `margin-left:29px` blev basis plus marginal exakt 100 %, alltsa kunde
     texten aldrig dela rad med pricken och siffran hamnade ensam pa en
     egen rad ovanfor namnet. Uppmatt 17 augusti: radhojd 130 px med
     marginalen, 87 px utan, och utan den sitter pricken bredvid namnet
     som den ska. De 29 px som texten annars hade behovt for indraget
     kommer fran pricken sjalv (18 px) plus radens gap (9 px). */
  .steg .grow{flex:1 0 calc(100% - 29px);margin-left:0}
  .steg .lage{margin-left:29px;white-space:normal}
  .steg .stegbort{margin-left:0;margin-top:2px}
}
.steg.klar .lage{color:var(--ok)}
/* Frånkopplingen per rad. Ligger där lägestexten annars står, för raden
   säger redan vad som är anslutet: en knapp OCH ordet "Ansluten" bredvid
   varandra är två sätt att säga samma sak på en rad som är 250 px bred. */
.steg .stegbort{flex:none;height:23px;padding:0 8px;font-size:11px;margin-left:2px}
.steg .stegbort:hover{color:var(--crit);border-color:var(--crit-line)}
.scope{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line-2);font-size:13px}
.scope small{display:block;color:var(--ink-3);font-size:11px}

/* ══ modal / godkännandespärr ══ */
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(26,25,23,.26);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal.on{display:flex}
.modal .bx{width:min(560px,100%);max-height:86vh;overflow-y:auto;background:var(--surface);border-radius:20px;box-shadow:var(--sh-lg);padding:22px;animation:mo .38s var(--ease)}
@keyframes mo{from{opacity:0;transform:scale(.965) translateY(8px)}to{opacity:1;transform:none}}
.modal h3{font-family:'Inter',-apple-system,sans-serif;font-weight:600;font-size:17px;letter-spacing:-.02em;margin-bottom:5px}
.modal .sb{font-size:13px;color:var(--ink-2);line-height:1.55;margin-bottom:14px}
.act{display:flex;gap:11px;padding:11px;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:8px;transition:.2s;background:var(--surface-2)}
.act.off{opacity:.45}
.act .mk{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--paper);font-size:11px;font-weight:700;flex:none;margin-top:1px}
.act .t{font-size:13px;font-weight:500;line-height:1.4}
.act .d{font-size:11px;color:var(--ink-2);line-height:1.5;margin-top:3px;white-space:pre-line}
.act .sw{margin-left:auto;flex:none}
.sw{width:34px;height:20px;border-radius:999px;background:var(--surface-3);position:relative;transition:.24s var(--ease);flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.22);transition:.24s var(--ease)}
.sw.on{background:var(--ok)}
.sw.on::after{transform:translateX(14px)}
.gate{display:flex;gap:9px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);padding:10px 12px;font-size:11px;color:var(--ink-2);line-height:1.5;margin:4px 0 14px}
.mfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.btn{height:36px;padding:0 16px;border-radius:8px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.18s;border:1px solid transparent}
.btn.pri{background:var(--accent);color:var(--paper)}
.btn.pri:hover{background:var(--accent-2)}
.btn.sec{border-color:var(--line);color:var(--ink)}
.btn.sec:hover{background:var(--surface-3)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ══ palett ⌘K ══ */
.pal{position:fixed;inset:0;z-index:75;display:none;justify-content:center;padding-top:14vh;background:rgba(26,25,23,.2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pal.on{display:flex}
.pal .bx{width:min(580px,calc(100vw - 32px));height:max-content;max-height:60vh;background:var(--surface);border-radius:20px;box-shadow:var(--sh-lg);overflow:hidden;animation:mo .32s var(--ease);display:flex;flex-direction:column}
.pal .in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-2);flex:none}
.pal input{flex:1;border:0;outline:0;background:none;font-size:15px;letter-spacing:-.01em}
.pal .rs{overflow-y:auto;padding:6px}
.pal .r{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;font-size:13px;cursor:pointer}
.pal .r.on{background:var(--surface-3)}
.pal .r .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal .r .k{margin-left:auto;font-size:11px;color:var(--ink-3);flex:none}

/* ══ prefixrutan ══
   Syns medan `s` (eller `g`) väntar på sin bokstav, och visar vilka
   bokstäver som finns just nu. Utan den känns det som att appen hängt
   sig: tangenten tog, men ingenting hände förrän man tryckte igen.

   Nere till VÄNSTER med avsikt, alltså mitt emot toasten i det motsatta
   hörnet. Rutan lever i 1,5 sekunder och toasten i fem; låg de i samma
   hörn hade den ena flyttat den andra mitt under en tangenttryckning.
   Formen är lånad från toasten så att de två läses som samma röst. */
.genv{position:fixed;left:20px;bottom:20px;z-index:80;display:none;
  flex-direction:column;max-width:236px;
  background:var(--ink);color:var(--paper);border-radius:12px;padding:10px 12px;
  font-size:13px;box-shadow:var(--sh-md);animation:ti .2s var(--ease)}
.genv.on{display:flex}
.genv b{font-weight:600;font-size:13px;margin-bottom:5px}
.genv span{display:flex;align-items:center;gap:7px;opacity:.82;font-size:11px;line-height:1.55}
.genv kbd{font:inherit;font-weight:600;min-width:16px;text-align:center;flex:none;
  background:rgba(255,255,255,.16);border-radius:6px;padding:0 4px}

/* ══ toast ══ */
.toasts{position:fixed;right:20px;bottom:20px;transition:bottom .4s var(--ease);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
body.lens .toasts,body.edit .toasts{bottom:96px}
/* Beskedet flyttar på sig, aldrig knappen.

   Toasten ligger på z-index 80, alltså över både godkännandespärren
   (.modal, 70) och skrivrutan (.skriv, 70), och alla tre är förankrade i
   nederkanten. Uppmätt 15 augusti på fyra riktiga telefonmått med en
   Ångra-toast, som är den toast spärren själv producerar: stapeln täcker
   primärknappen i spärren på allihop (375x667 knappen 562 till 598 och
   toasten 572 till 647, 430x932 knappen 804 till 840 och toasten 837 till
   912), och i skrivrutan täcker den spärrnoten även på 1440.

   Hård regel 9 står på att en människa ser exakt vad hon godkänner, så
   det som får flytta sig är beskedet. Alternativet, att höja .modal och
   .skriv över toasten, lägger beskedet bakom modalens dimmer och tar med
   sig Ångra-knappen dit. Hela motivet står i DECISIONS.md 15 augusti 2026.

   66 px är topprutans 54 plus 12. Testbandet i dev och preview gör
   topprutan 22 px högre, och där skär toasten bandets underkant. Bandet
   finns inte i prod (06-live.js visar det bara för dev och preview), och
   ett tal som är rätt i prod slår ett tal som är rätt i dev. */
body:has(#modal.on) .toasts,body:has(#skriv) .toasts{top:66px;bottom:auto}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);border-radius:12px;padding:11px 13px;font-size:13px;box-shadow:var(--sh-md);animation:ti .45s var(--ease);max-width:340px}
.toast small{display:block;opacity:.7;font-size:11px;line-height:1.4}
.toast button{color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px;font-size:13px;flex:none}
@keyframes ti{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.toast.out{animation:to .3s var(--ease) forwards}
@keyframes to{to{opacity:0;transform:translateY(6px) scale(.98)}}

/* ══ nedräkningsringen i toasten ══
   Fem sekunder som ingen ser är fem sekunder som inte finns: rapporten som
   bad om det här började med "kan ej se om de 5 sek är aktiva". Ringen
   ligger INUTI toasten, på bockens plats, och inte bredvid den. Två
   flytande saker i samma hörn konkurrerar, och den som rör sig vinner.

   Tre val värda att inte göra om:

   Ringen är `currentColor` och det tomma är `none`. Toasten är svart i
   ljust tema och tvärtom i mörkt, så ringen ärver temat och kan aldrig
   hamna fel. En färg här hade varit ett tredje tal att hålla synkat.

   I mitten står connectorns eget märke, inte en siffra. 5, 4, 3 i en
   cirkel som är tolv pixlar hög går inte att läsa, och en ring som töms
   säger redan hur lång tid som är kvar. Märket säger dessutom VART brevet
   är på väg, vilket siffran inte gör. Google-färger vore direkt osant:
   kanalen kan vara Outlook eller Slack.

   Och det är en enda CSS-animation, ingen timer. En timer som ritar om
   DOM:en fem gånger i sekunden kan fortsätta ticka efter att toasten
   tagits bort. Den här kan inte det: försvinner noden slutar den. */
/* 18 August 2026: the ring got a faint track behind the arc, and grew
   from 22 to 26 px. Without the track the emptying arc had nothing to
   empty INTO, so it read as a spinner or a decoration, and William did
   not see that a countdown was there at all. The track is the same
   currentColor at low opacity: the tail the arc has eaten stays visible
   as the part that is gone. */
.tring{position:relative;width:26px;height:26px;flex:none;display:grid;place-items:center}
.tring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.tring circle{fill:none;stroke:currentColor;stroke-width:2.25}
.tring .spar{opacity:.18}
.tring .arc{opacity:.95;stroke-linecap:round;
  stroke-dasharray:var(--omk);stroke-dashoffset:0;
  animation:tring var(--frist,5000ms) linear forwards}
@keyframes tring{to{stroke-dashoffset:var(--omk)}}
.tring .mrk{width:12px;height:12px;border-radius:6px;display:grid;place-items:center;
  font-size:11px;font-weight:600;color:var(--paper);line-height:1}
.tring .mrk svg{position:static;width:100%;height:100%;transform:none}
/* Den som stängt av rörelse får ringen som en stillastående ram. Att i
   stället dölja den vore att ta bort informationen, inte rörelsen. */
@media (prefers-reduced-motion:reduce){.tring .arc{animation:none;opacity:.3}}

/* ══ mobil ══ */
@media (max-width:900px){
  .bar{padding:0 12px;gap:7px}
  .stage{padding:16px 14px 90px}
  /* Redigeringsläget är skrivbordsbara, så dess knapp ska inte heller finnas här.
     Anslutningar och logg nås via ⌘K. Toppraden får aldrig bre ut sig. */
  .usage{display:none}
  .app{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;bottom:0;width:270px;height:100dvh;transform:translateX(-101%);
    transition:transform .4s var(--ease);box-shadow:var(--sh-lg);border-right:1px solid var(--line)}
  body.navopen .rail{transform:none}
  .page-h h1{font-size:24px}
  #btnLog,#btnConn{display:none}
  .cmd{max-width:none;min-height:44px} .cmd .k{display:none}
  .brand .v{display:none}
  /* Traffyta: Apple HIG krav, 44x44 px minimum pa touch. Uppmatt 16 augusti:
     .ib 30x32, .railtoggle 26x26, .nav 245x34, .mini 170x32, .wt 24x24,
     .why 114x19. Alla under 44 pa minst en axel. */
  .ib{min-width:44px;min-height:44px}
  .co,.demochip{display:none}
  .stage{padding:16px 14px 90px}
  /* Prioritetsraden: knapparna tar hela bredden och far 44 px hojd.
     Gap okar sa att .why inte overlappar .mini (uppmatt 74x19 px). */
  .pi{flex-wrap:wrap}
  .pi .acts{margin-left:0;width:100%;margin-top:10px;gap:10px}
  .pi .acts .mini{min-height:44px;height:44px}
  .why{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
  .wt{min-width:44px;min-height:44px}
  .mini{min-height:44px}
  /* Navigationsraden i den utfallda listen: 44 px hojd. */
  .nav{min-height:44px}
  .railtoggle{min-width:44px;min-height:44px}
  .threadbar{flex-wrap:wrap;left:12px;right:12px;transform:translateY(150%);max-width:none;width:auto}
  .threadbar.on{transform:translateY(0);opacity:1;visibility:visible}
  .sheet{width:100%;border-radius:20px 20px 0 0;height:92vh}
  /* Sheeten far en stangknapp, och handtaget far en storre traffyta. */
  .sheet .hnd{width:48px;height:5px;margin:0 auto;padding:20px 40px;cursor:pointer}
  .editbar{left:12px;right:12px;transform:translateY(190%);flex-wrap:wrap;justify-content:center;padding:8px}
  body.edit .editbar{transform:translateY(0)}
  .editbar .t{display:none}
  /* "drag it out" goes away where the drag does not exist. This is the SAME
     breakpoint the grab gesture is switched off at (`SMAL` in
     05b-utritning.js reads it from here, never the other way round), so a
     card in the drawer stops advertising a gesture that cannot be made. The
     Add button beside it is the whole of what works on a phone, and it
     works. Both drawers, the home screen's and a job's, because the label
     was equally untrue in both. */
  .cc .dra{display:none}
  .chain{max-width:100%}
  /* Toasten: full bredd pa mobil i stallet for max 340 px i ena hornet.
     Uppmatt 16 augusti: pa 390 px skymde toasten .why (114x19 px overlapp)
     och skar den hojdmassigt smala knappen. */
  .toasts{left:12px;right:12px;align-items:stretch}
  .toast{max-width:none}
  /* Prefixrutan syns bara med ett tangentbord inkopplat, men den kan ligga
     kvar i vägen om ett sådant finns. Samma marginal som toasten. */
  .genv{left:12px;right:12px;bottom:12px;max-width:none}
  .toast button{min-height:44px;min-width:44px;padding:8px}
  /* Modal: switchar och knappar under 44 px. .sw 34x20, .btn 36 px. */
  .sw{width:51px;height:31px}
  .sw::after{width:27px;height:27px}
  .sw.on::after{transform:translateX(20px)}
  .btn{min-height:44px}
}

/* Märket i medgivandedialogen. Utan en egen kontextregel föll det till
   basstorleken 16 px och la sig i vänsterkanten, vilket fick den viktigaste
   dialogen i produkten att se ostädad ut. */
.oa-mk{display:flex;justify-content:center}
.oa-mk .mk{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--paper);font-size:17px;font-weight:700}

/* märken: konturmärket och Notions vita platta vinner över kontextfärgen */
.mk.line{background:var(--surface)!important;color:var(--c-cal)!important;border:1.3px solid var(--c-cal);font-weight:700}

/* ── riktiga logotyper ──────────────────────────────────────
   Ett märke som bär sin egen form ska inte ligga på en färgad platta:
   plattan är det vi ritar när vi INTE har logotypen. Reglerna ligger
   efter kontextreglerna (.act .mk, .cc .mk, .wh .mk) med flit. Annars
   vinner kontextens bakgrundsfärg och logotypen blir en färgad kloss.
   Storleken ärvs från kontexten; bara ytan nollställs. */
/* Enfärgade märken (Notion, GitHub) ritas med `var(--logoink)`, inte med
   `currentColor`. Skälet: kontextreglerna sätter `color:var(--paper)` på varje märke
   (.cc .mk, .act .mk, .wh .mk) och har högre specificitet än `.logo`. Notions
   svarta N blev därför vitt på vitt och försvann helt i Anslutningar. En
   variabel går inte att råka skriva över på det sättet. */
.logo{background:none!important;border:0!important;padding:0;overflow:visible;--logoink:#191817}
.logo svg{width:100%;height:100%;display:block}
.logo.b-github{background:#24292F!important;border-radius:22%;--logoink:var(--paper)}
/* Fortnox F, samma sak av samma skäl. Mörkgrönt som i deras appikon, vitt i
   mörkt läge, vilket är Fortnox egen variant för mörk botten. Ringens tre
   färger står i märket och rör sig inte. */
.logo.b-fortnox{--fnxf:#007533}

/* ═══════════════════════════════════════════════════════════════
   Appkrom: varje connector får sitt eget välkända utseende.
   Widgeten är inte en ruta MED data från Gmail; den ÄR en liten
   Gmail. Det enda Samlify-blå som får finnas inuti en app är
   trådmärket: vår funktion, vår färg.
   ═══════════════════════════════════════════════════════════════ */
.w.chrome > .wh{display:none}
.w.chrome > .wb{padding:0;overflow:hidden}
.wtools{
  position:absolute;top:7px;right:8px;z-index:6;display:flex;gap:1px;padding:2px;border-radius:8px;
  background:var(--glass);-webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%);
  box-shadow:0 1px 3px rgba(26,25,23,.16);opacity:0;transform:translateY(-2px);transition:.18s var(--ease);pointer-events:none;
}
.w:hover .wtools,.w:focus-within .wtools{opacity:1;transform:none;pointer-events:auto}
/* I greppläget delar knapparna hörn med handtaget uppe till höger. De flyttar
   in en aning så att vinkeln i hörnet syns hel. */
body.edit .wtools{opacity:1;transform:none;pointer-events:auto;top:14px;right:14px}
.appbar{display:flex;align-items:center;gap:8px;padding:9px 11px;flex:none}
.appbar b{font-size:13px;font-weight:600;letter-spacing:-.01em}
.applist{flex:1;overflow-y:auto;min-height:0}

/* ── Gmail ─────────────────────────────────────────────────── */
.gm{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--gr:var(--ink);--gb:var(--ink);--gread:var(--surface);--gline:var(--line-2);--gink:var(--ink);--gmut:var(--ink-2);--gfield:var(--surface-2);
  display:flex;flex-direction:column;height:100%;background:var(--surface);color:var(--gink)}
.gm-top{display:flex;align-items:center;gap:11px;padding:13px 14px 9px;flex:none}
.gm-logo{width:22px;height:22px;flex:none}
.gm-logo svg{width:100%;height:100%;display:block}
.gm-word{font-size:15px;color:var(--gmut);letter-spacing:-.01em;font-weight:400;flex:none}
.gm-search{flex:1;min-width:0;height:34px;border-radius:8px;background:var(--gfield);display:flex;
  align-items:center;gap:8px;padding:0 8px 0 12px;color:var(--gmut);font-size:13px;cursor:text}
.gm-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:13px;color:var(--gink)}
/* Krysset syns forst nar det finns nagot att rensa. Det ritas av
   handelselyssnaren, inte av en omritning: darav [hidden] i egen regel,
   annars vinner display:grid over attributet. */
.gm-x{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--gmut)}
.gm-x:hover{background:rgba(32,33,36,.08);color:var(--gink)}
.gm-x[hidden]{display:none}
/* Widgetens egna verktyg (.wtools) ligger i ovre hogra hornet och tander sig
   vid hovring, alltsa rakt ovanpa hogerkanten av soket. Soket slutar dar i
   stallet. I helskarmsvyn finns inga wtools, sa reserven galler bara
   widgeten. */
.w .gm-top{padding-right:42px}
.gm-comp{height:32px;padding:0 13px;border-radius:999px;background:var(--gfield);color:var(--gb);
  font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;flex:none}
.gm-comp:hover{filter:brightness(.97)}
.gm-tools{display:flex;align-items:center;gap:11px;padding:10px 15px 9px;color:var(--gmut);font-size:11px;flex:none}
/* Hämta nya mejl. Samma plats som i Gmail: i verktygsraden ovanför listan,
   till vänster. Snurran går bara medan hämtningen pågår. */
.gm-sync{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--gmut);flex:none;margin:-2px 0 -2px -4px}
.gm-sync:hover{background:var(--gread);color:var(--gink)}
.gm-sync.snurrar{color:var(--gink)}
.gm-sync.snurrar svg{animation:snurr .6s cubic-bezier(.4,0,.2,1)}
@keyframes snurr{to{transform:rotate(360deg)}}
.gm-tools .cnt2{margin-left:auto;white-space:nowrap}
/* Skrivknappen sitter i toppraden, till VANSTER om soket.
   Fyra platser provades, och skalen star i LEARNINGS. Den sista flytten var
   inte en smaksak: .wtools (widgetens egna verktyg) ligger i ovre hogra
   hornet av VARJE widget och tander sig vid hovring, alltsa exakt nar nagon
   strackar sig efter skrivknappen. En knapp under dem gar inte att klicka.
   Till vanster om soket ar dessutom dar Gmails egen skrivknapp sitter pa
   skrivbordet.

   Vit ruta, mjuk skugga i tva lager (den narmaste ger kanten, den avlagsna
   hojden) och en flerfargad penna. Vaxer nagot vid hovring, sa att den kanns
   som en knapp och inte som en dekal. */
.gm{position:relative}
.gm-fab{flex:none;width:36px;height:36px;border-radius:8px;
  background:var(--paper);display:grid;place-items:center;z-index:5;
  box-shadow:0 1px 2px rgba(60,64,67,.28),0 2px 6px 1px rgba(60,64,67,.14);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.gm-fab:hover{transform:scale(1.1);box-shadow:0 1px 2px rgba(60,64,67,.3),0 4px 10px 2px rgba(60,64,67,.18)}
.gm-fab:active{transform:scale(1.02)}
/* I morkt lage foljer rutan med. Den var vit ett tag, med skalet att pennan
   ar ritad for vit botten, men en vit platta i en morkt lage-vy lyser som en
   lampa och drar blicken till fel sak. Samma faltfarg som resten av
   Gmail-kromet, och en tunn kant sa att knappen fortfarande lyfter.
   Pennans spets ar var(--ink) som attribut i SVG:n, och en CSS-regel slar ett
   attribut: utan raden nedan forsvinner spetsen mot den morka bottnen. */
  box-shadow:0 1px 2px rgba(0,0,0,.6),0 6px 16px 2px rgba(0,0,0,.45)}
@media(max-width:640px){.gm-fab{width:32px;height:32px;border-radius:8px}}

/* Skrivrutan. Nere till hoger, over bradet, som Gmails egen: ett mejl
   skrivs medan man last nagot annat, och en modal mitt pa skarmen slacker
   precis det man skriver om. */
.skriv{position:fixed;right:18px;bottom:18px;width:min(480px,calc(100vw - 36px));z-index:70;
  background:var(--surface);border:1px solid var(--line);border-radius:12px 12px 10px 10px;
  box-shadow:0 2px 6px rgba(0,0,0,.08),0 24px 48px -18px rgba(0,0,0,.34);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(10px);transition:opacity .16s var(--ease),transform .2s var(--ease)}
.skriv.pa{opacity:1;transform:none}
.sk-top{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 14px;background:var(--surface-3);
  border-bottom:1px solid var(--line);font-size:13px}
.sk-top b{font-weight:600;letter-spacing:-.01em}
.sk-x{margin-left:auto;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--ink-2)}
.sk-x:hover{background:var(--surface-2);color:var(--ink)}
.sk-falt label{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line);
  font-size:11px;color:var(--ink-3)}
.sk-falt input{flex:1;min-width:0;border:0;background:transparent;padding:10px 0;font:inherit;font-size:13px;color:var(--ink)}
.sk-falt input:focus{outline:none}
/* Mottagarförslagen hänger under Till-raden. `position:relative` sitter på
   etiketten och inte på fältet: ett input kan inte bära ett barn, alltså är
   etiketten den enda behållaren som finns att ankra i. */
.sk-falt label{position:relative}
.cp-forslag{position:absolute;left:0;right:0;top:100%;z-index:3;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.15);
  padding:4px;margin-top:2px;max-height:212px;overflow-y:auto}
.cp-forslag[hidden]{display:none}
.cp-f{display:flex;align-items:baseline;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer}
.cp-f.pa{background:var(--surface-2)}
.cp-f .n{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:52%}
.cp-f .e{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:auto}
.sk-body{border:0;background:transparent;resize:none;padding:12px 14px;min-height:190px;
  font:inherit;font-size:13px;line-height:1.55;color:var(--ink)}
.sk-body:focus{outline:none}
.sk-fot{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
.sk-not{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3);line-height:1.35}
/* Frågan vid stängning. Ligger i rutan och inte i en modal: det är rutans
   innehåll den handlar om, och en modal mitt på skärmen hade släckt det man
   just skrivit. */
/* ── forhandsvisningen ────────────────────────────────────────────
   Egen yta och inte `.modal`: modalen ar godkannandesteget med sina tva
   steg och sin atgardslista, och en bild som ska fylla skarmen har inget
   av det. z-index over skrivrutan (70), for rutan oppnas OVANFRAN den. */
.bilvis{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:28px;
  opacity:0;transition:opacity .14s var(--ease)}
.bilvis.pa{opacity:1}
.bv-bak{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 46%,transparent)}
.bv-ram{position:relative;z-index:1;display:flex;flex-direction:column;
  width:min(980px,100%);max-height:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.08),0 24px 48px -18px rgba(0,0,0,.34);
  transform:translateY(8px) scale(.99);transition:transform .18s var(--ease)}
.bilvis.pa .bv-ram{transform:none}
.bv-top{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 14px;
  background:var(--surface-3);border-bottom:1px solid var(--line);flex:none}
.bv-namn{display:flex;align-items:baseline;gap:7px;min-width:0;flex:1;font-size:13px}
.bv-namn svg{align-self:center;flex:none;color:var(--ink-3)}
.bv-namn b{font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bv-namn i{font-style:normal;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.bv-ib{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;
  color:var(--ink-2);flex:none;text-decoration:none}
.bv-ib:hover{background:var(--surface-2);color:var(--ink)}
/* Rutig botten, sa att en PNG med genomskinlighet gar att se kanten pa. */
.bv-yta{flex:1;min-height:0;overflow:auto;display:grid;place-items:center;padding:14px;
  background:var(--surface-2)}
.bv-bild{max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;
  border-radius:6px;background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
.bv-text{width:100%;margin:0;padding:14px;background:var(--surface);border-radius:6px;
  font:inherit;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:12.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;
  overflow-wrap:anywhere;align-self:stretch}
.bv-yta .tomk{background:transparent;border:0}
/* Pilarna ligger OVANPA ytan och inte i foten: en fot till hade atit
   hojd fran bilden, och det ar bilden man oppnade rutan for. */
.bv-pil{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border-radius:50%;display:grid;place-items:center;color:var(--ink);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.bv-pil:hover{background:var(--surface)}
.bv-pil.v{left:12px}
.bv-pil.h{right:12px}
@media(max-width:640px){
  .bilvis{padding:0}
  .bv-ram{width:100%;height:100%;max-height:100%;border-radius:0;border:0}
  .bv-bild{max-height:calc(100vh - 120px)}
}
/* Brickan i skrivrutan ar en knapp nu. Krysset star kvar som egen knapp. */
.bil-b[data-a]{cursor:pointer}
.bil-b[data-a]:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.gm-att[data-a]{cursor:pointer}

/* Filerna pa godkannandekortet. Samma bricka som i skrivrutan, sa att
   det som stod i brevet nar det skrevs ser likadant ut nar nagon sager ja
   till det. Lank nar bytena ar vara, annars bara en bricka. */
.rv-bil{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rv-bil .bil-b{text-decoration:none}
a.bil-b:hover{border-color:var(--accent-line);background:var(--accent-soft)}
/* Gemet i listraden. Ett antal bara nar det ar fler an en: "1" bredvid en
   gemikon sager ingenting som ikonen inte redan sagt. */
.rv-gem{display:inline-flex;align-items:center;gap:2px;margin-left:6px;
  font-size:10.5px;font-weight:600;color:var(--ink-3);vertical-align:middle}

/* Bilagorna i skrivrutan. Brickorna ligger MELLAN texten och foten, dar
   de syns utan att flytta pa Skicka: en rad som knuffar ned knappen gor
   att man trycker fel nar den tredje filen landar. */
.sk-bil{display:flex;flex-wrap:wrap;gap:6px;padding:9px 14px;border-top:1px solid var(--line);
  max-height:112px;overflow-y:auto}
/* Summan ligger utanfor rullningen: den ska sta kvar nar brickorna rullar. */
.bil-sum{padding:8px 14px 0;border-top:1px solid var(--line);
  font-size:11px;font-weight:600;letter-spacing:-.01em;color:var(--ink-3)}
.bil-sum+.sk-bil{border-top:0;padding-top:6px}
.bil-b{display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:4px 4px 4px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);
  font-size:11.5px;line-height:1.3;color:var(--ink-2)}
.bil-b svg{flex:none;color:var(--ink-3)}
.bil-b b{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.bil-b i{font-style:normal;color:var(--ink-3);white-space:nowrap}
.bil-x{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;color:var(--ink-3);flex:none}
.bil-x:hover{background:var(--line);color:var(--ink)}
/* Under uppladdning: dampad och med en linje som ror sig, sa att den som
   slappte en stor fil ser att nagot hander i stallet for att undra. */
.bil-b.laddar{color:var(--ink-3);position:relative;overflow:hidden}
.bil-b.laddar b{color:var(--ink-2)}
.bil-b.laddar::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:40%;
  background:var(--accent);border-radius:2px;animation:bilgar 1.1s ease-in-out infinite}
@keyframes bilgar{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
/* DESIGN.md §6 ger ingen rod: kritiskt faller ihop med varning. En fil
   som inte gick upp ar ockra pa ockra-mjukt, inte rod. */
.bil-b.fel{border-color:var(--warn-line);background:var(--warn-soft);color:var(--warn)}
.bil-b.fel b,.bil-b.fel i,.bil-b.fel svg{color:var(--warn)}

/* Gemet. Sitter efter Skicka och fore meningen, alltsa dar handen redan
   ar, och ar en ikonknapp och inte en knapp med text: den ar en av tva
   handlingar i foten och den mindre av dem. */
.sk-gem{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;
  color:var(--ink-2);flex:none}
.sk-gem:hover{background:var(--surface-2);color:var(--ink)}
/* Knappen krymper inte. Foten ar en flexrad, och nar meningen bredvid blev
   langre ("Waiting for the file to upload.") pressades Skicka ihop till
   "Skick" med ikonen bortklippt. Texten ar den som ska brytas, inte
   knappen. */
.sk-fot .btn.pri{flex:none}
.sk-fot .btn.pri.sk-vantar{opacity:.5;pointer-events:none}
.sk-not{min-width:0}

/* Slappzonen. Ligger over hela rutan och ritas bara medan nagot dras:
   den som drar en fil siktar pa brevet, inte pa en liten ruta i det. */
.sk-drop{position:absolute;inset:0;z-index:2;display:none;place-items:center;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:2px dashed var(--accent);border-radius:inherit;pointer-events:none}
.skriv.drar .sk-drop{display:grid}
.sk-drop b{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  letter-spacing:-.01em;color:var(--accent)}

.sk-fraga{padding:12px 14px 13px;border-top:1px solid var(--line);background:var(--surface-2)}
.sk-fraga b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.sk-fraga span{display:block;font-size:11px;color:var(--ink-3);margin:3px 0 10px;line-height:1.45}
.sk-fraga .rad{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:640px){.skriv{right:8px;left:8px;bottom:8px;width:auto}.sk-body{min-height:140px}
  /* Brickorna far mindre plats an knapparna nar skarmen ar smal: Skicka
     ska ligga kvar pa skarmen aven med tio filer i brevet. */
  .sk-bil{max-height:74px;padding:8px 12px}.bil-b b{max-width:112px}}

/* Planet lamnar rutan. Ikonen i Skicka ar redan ett pappersflygplan, sa
   utskicket behover ingen ny symbol: den lyfter ur knappen, gar ut ur rutan,
   gor en loop och ar borta. Kvittot ar rorelsen. Skalet ar att ett utskick
   som bara byter en textrad kanns oavslutat, och den som skickat ett mejl
   vill se att det gick ivag.

   Tva element, for banan och loopen ar tva olika rorelser: yttre `.flygplan`
   flyger, inre `.flygplan i` snurrar runt en punkt under sig sjalv. Ett enda
   element hade fatt valja, och en loop utan bana ser ut som en snurrande
   ikon. Positionen sätts av JS ur knappens plats, se `planFlyger`. */
.flygplan{position:fixed;z-index:200;pointer-events:none;color:var(--accent);
  animation:flygbana 1.15s cubic-bezier(.3,.06,.36,1) forwards}
.flygplan i{display:block;transform-origin:50% 185%;animation:flygloop 1.15s linear forwards}
.flygplan svg{display:block}
@keyframes flygbana{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.85)}
  8%  {opacity:1;transform:translate(calc(-50% + 10px),calc(-50% - 40px)) scale(1.1)}
  40% {opacity:1;transform:translate(calc(-50% + 54px),calc(-50% - 236px)) scale(1.1)}
  72% {opacity:1;transform:translate(calc(-50% + 98px),calc(-50% - 326px)) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + 176px),calc(-50% - 570px)) scale(.4)}
}
@keyframes flygloop{
  0%,40%   {transform:rotate(0)}
  72%,100% {transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){
  .flygplan{animation-duration:.3s}
  .flygplan i{animation:none}
  @keyframes flygbana{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(calc(-50% + 40px),calc(-50% - 60px)) scale(.6)}}
}

/* The task chip on its way from ⌘K to the assistant. Same idiom as the
   plane above: it starts on the pixel the row stood on and is gone when it
   lands. Toast colours, so it reads as a receipt and not as a new row. */
.uppdrag-flyg{position:fixed;z-index:200;pointer-events:none;display:flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:13px;
  box-shadow:var(--sh-md);white-space:nowrap;max-width:min(60vw,420px);will-change:transform,opacity}
.uppdrag-flyg span{overflow:hidden;text-overflow:ellipsis}
.uppdrag-flyg svg{flex:none;color:var(--accent)}

/* Mappmenyn. Egen rad ovanfor verktygsraden: mappen ar VAR man ar, filtret
   ar vad man ser dar, och tva val pa samma rad las som ett. */
.gm-mappar{display:flex;align-items:center;gap:2px;padding:0 10px 0 10px;border-bottom:1px solid var(--gline);overflow-x:auto;scrollbar-width:none}
.gm-mappar::-webkit-scrollbar{display:none}
.gm-mappar button{display:flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:13px;padding:8px 10px 7px;color:var(--gmut);border-bottom:2px solid transparent;margin-bottom:-1px}
.gm-mappar button:hover{color:var(--gb)}
.gm-mappar button.on{color:var(--gb);font-weight:500;border-bottom-color:var(--gb)}
.gm-mappar button i{font-style:normal;font-size:11px;padding:1px 5px;border-radius:999px;background:var(--gfield);color:var(--gmut)}
.gm-mappar button.on i{background:var(--gb);color:var(--paper)}
.gm-f{display:flex;gap:5px}
.gm-f button{font-size:11px;padding:2px 9px;border-radius:999px;color:var(--gmut);border:1px solid transparent}
.gm-f button:hover{background:var(--gread)}
.gm-f button.on{background:var(--gfield);color:var(--gb);font-weight:500}
.gm-row .star.on{color:var(--warn)}
.gm-cb{width:13px;height:13px;border:1.6px solid var(--gmut);border-radius:6px;flex:none;opacity:.75}
.gm-row{display:grid;grid-template-columns:auto auto minmax(84px,152px) 1fr auto;align-items:center;gap:9px;
  padding:11px 15px;background:var(--gread);border-bottom:1px solid var(--gline);cursor:pointer;font-size:13px;position:relative}
.gm-row:hover{box-shadow:inset 1px 0 0 var(--gline),0 1px 3px rgba(60,64,67,.22);z-index:1;background:var(--surface)}
.gm-row.unread{background:var(--surface);font-weight:600}
.gm-row .star{color:var(--ink-3);font-size:13px}
.gm-row.unread .star{color:var(--ink-3)}
.gm-row.unread .star.on{color:var(--warn)}  /* stjärnan vinner över oläst-grått, oavsett ordning ovan */
.gm-from{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Avsändaren är ett eget mål inuti raden. Understrykningen kommer först vid
   hovring: en prickad linje under varje namn i en lista på tvåhundra rader
   gör listan orolig, och den som söker adressen hittar den ändå. */
.gm-from .avs{cursor:pointer}
.gm-from .avs:hover{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.gm-avs2{font-size:11px;color:var(--gmut);display:block;cursor:pointer;width:fit-content;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-avs2:hover{color:var(--ink-2)}
/* Utkastraden. Gmail skriver "Utkast" i rött där avsändaren står, och det
   är rätt läst: raden är inte ett brev man fått, den är ett man inte
   skickat. Färgen är vår röda och inte Gmails, för märket i widgeten är
   deras men signalfärgerna är våra. */
.gm-row .star.utk{color:var(--gmut);font-size:11px}
.utkpill{background:var(--crit-soft);color:var(--crit);margin-right:6px;padding:1px 6px;font-size:11px}
.gm-line{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-line i{font-style:normal;color:var(--gmut);font-weight:400}
.gm-date{font-size:11px;color:var(--gmut);white-space:nowrap;font-weight:inherit;display:flex;align-items:center;gap:6px}
/* Papperskorgen tonar in vid hovring, alltid synlig pa pekskarm. */
.gm-sudda{opacity:0;transition:opacity .15s;cursor:pointer;color:var(--gmut);flex:none;padding:0;background:none;border:none;line-height:0}
.gm-row:hover .gm-sudda{opacity:1}
.gm-sudda:hover{color:var(--crit)}
@media(hover:none){.gm-sudda{opacity:.45}}
/* Foten under raderna. Listan visar femtio brev i taget och hamtar fler
   nar man rullar ned, sa botten maste saga vad den ar: mer pa vag, mer
   att rulla till, eller slut. En tyst botten laser man som ett tak. */
.gm-mer{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;
  font-size:11px;color:var(--gmut);background:var(--gread);border-bottom:1px solid var(--gline)}
.gm-mer svg{animation:snurr 1s linear infinite}
.gm-mer.klar{color:var(--gmut);opacity:.8}
/* Snurran medan soket gar. Google ritar sin egen som en cirkel dar bagen
   bade roterar och andrar langd, alltsa tva rorelser pa samma element: den
   yttre `svg` snurrar jamnt, den inre `circle` drar ihop och slapper ut sitt
   strecksegment. En enda av dem lader som en frusen ikon som vantar.
   Fargen ar GOOGLES bla (`--gb`), aldrig `--accent`: AdminOS-blatt inuti en
   connector-widget ar tradmarket och ingenting annat. Se plan §4. */
.gm-soker{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:15px;height:100%;min-height:130px;padding:22px;text-align:center;
  color:var(--gmut);font-size:13px}
.gm-soker .gsnurr{color:var(--gb);animation:gsnurr-varv 1.5s linear infinite}
.gm-soker .gsnurr circle{stroke-dasharray:100.5;transform-origin:50% 50%;
  animation:gsnurr-bage 1.5s ease-in-out infinite}
@keyframes gsnurr-varv{to{transform:rotate(360deg)}}
@keyframes gsnurr-bage{
  0%  {stroke-dashoffset:94;transform:rotate(0)}
  50% {stroke-dashoffset:24;transform:rotate(48deg)}
  100%{stroke-dashoffset:94;transform:rotate(360deg)}
}
.gm-read{padding:6px 20px 20px;overflow-y:auto}
.gm-read h4{font-size:17px;font-weight:400;letter-spacing:-.012em;line-height:1.35;margin:6px 0 12px;color:var(--gink)}
.gm-read .fr{display:flex;align-items:center;gap:10px;padding-bottom:12px}
.gm-read .bdy{font-size:13px;line-height:1.72;color:var(--gink);padding:2px 0 6px}
.gm-read .bdy p{margin-bottom:10px}
/* Bilagechips som i Gmail: filmärke i typens färg, namn, storlek. Ett
   chip med href är en riktig nedladdning; ett utan är demodata. */
.gm-atts{display:flex;flex-wrap:wrap;gap:7px;padding:4px 0 8px}
.gm-att{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--gline);border-radius:8px;padding:6px 11px 6px 8px;font-size:11px;color:var(--gmut);background:var(--surface);text-decoration:none;max-width:100%}
a.gm-att{cursor:pointer}
a.gm-att:hover{background:var(--gread);border-color:var(--gmut)}
.gm-attm{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--paper);border-radius:6px;padding:3px 5px;line-height:1}
.gm-attn{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-attz{flex:none;color:var(--gmut)}
/* Stjärnan i brevets verktygsrad. Text-glyf, inte svg, samma som raden. */
.gc-ib.gm-star{font-size:15px}
.gc-ib.gm-star.on{color:var(--warn)}
.gm-reply{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--gline);border-radius:999px;height:32px;padding:0 16px;font-size:13px;color:var(--gink);background:var(--surface)}
.gm-reply:hover{background:var(--gread)}
/* .gc-ib är kalenderns ikonknapp och lånas i läsvyn. Den behöver
   Gmails dämpade färg, inte kalenderns (som inte finns här). */
.gm .gc-ib{color:var(--gmut)}
.gm .gc-ib:hover{background:var(--gread);color:var(--gink)}

/* ── Google Kalender ─────────────────────────────────────────
   Fyra vyer på samma rutnät. Radhöjden kommer ALLTID från `--gcrh`, som
   JS sätter till samma tal det positionerar posterna med. Tidigare
   räknade JS med 32 px medan CSS ritade 38: timraderna sköt 66 px
   utanför sin behållare och la sig ovanpå listan under. */
.gc{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--gcb:var(--ink);--gcline:var(--line-2);--gcink:var(--ink);--gcmut:var(--ink-2);
  --gchov:rgba(60,64,67,.07);
  display:flex;flex-direction:column;height:100%;background:var(--surface);color:var(--gcink)}
.gc-top{display:flex;align-items:center;gap:8px;padding:10px 12px;flex:none;border-bottom:1px solid var(--gcline)}
.gc-logo{width:21px;height:21px;flex:none}
.gc-logo svg{width:100%;height:100%;display:block}
.gc-top .m{font-size:13px;color:var(--gcink);font-weight:500;letter-spacing:-.01em;white-space:nowrap;flex:none}
.gc-btn{height:26px;padding:0 11px;border:1px solid var(--gcline);border-radius:999px;font-size:11px;
  color:var(--gcink);flex:none;display:inline-flex;align-items:center;gap:4px}
.gc-btn:hover{background:var(--gchov)}
.gc-nav{display:flex;gap:1px;color:var(--gcmut);flex:none}
.gc-ib{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--gcmut);flex:none}
.gc-ib:hover{background:var(--gchov);color:var(--gcink)}
.gc-per{font-size:13px;color:var(--gcink);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gc-per i{font-style:normal;color:var(--gcmut);font-size:11px}
.gc-top .gc-per:last-child{margin-left:auto;font-size:13px;color:var(--gcmut)}
.gc-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.gc-cta{height:30px;padding:0 14px;border-radius:999px;background:var(--gcb);color:var(--paper);font-size:13px;
  font-weight:500;display:inline-flex;align-items:center;gap:6px;flex:none}
.gc-cta:hover{filter:brightness(1.08)}
.gc-head{display:flex;align-items:flex-end;gap:10px;padding:4px 13px 8px;border-bottom:1px solid var(--gcline);flex:none}
.gc-tz{font-size:11px;color:var(--gcmut);width:46px;flex:none;padding-bottom:5px;text-align:right;padding-right:8px}
.gc-day{text-align:center;line-height:1.15;flex:none;padding-bottom:2px}
.gc-day span{font-size:11px;letter-spacing:.08em;color:var(--gcb);text-transform:uppercase}
.gc-day b{display:grid;place-items:center;width:30px;height:30px;margin:2px auto 0;border-radius:50%;
  background:var(--gcb);color:var(--paper);font-size:15px;font-weight:400}
.gc-day.off span{color:var(--gcmut)}
.gc-day.off b{background:none;color:var(--gcink)}
.gc-day.off:hover b{background:var(--gchov)}
.gc-dl{font-size:13px;color:var(--gcmut);padding-bottom:6px}
.gc-body{flex:1;overflow-y:auto;min-height:0}
.gc-body.flush{overflow:hidden;display:flex;flex-direction:column}
/* rutnätet: en tidsränna och en eller sju dagsspalter */
.gc-grid,.gw-grid{display:flex;position:relative;padding-right:8px}
.gc-gut{width:46px;flex:none}
.gc-hh{height:var(--gcrh);position:relative}
.gc-hh span{position:absolute;right:8px;top:-7px;font-size:11px;color:var(--gcmut)}
.gc-hh:first-child span{display:none}      /* som i Google: första timmen namnges inte */
.gc-day1,.gw-col{flex:1;min-width:0;position:relative;border-left:1px solid var(--gcline)}
.gw-col.today{background:rgba(26,115,232,.04)}
.gc-hr{height:var(--gcrh);border-bottom:1px solid var(--gcline);cursor:pointer;transition:background .12s;position:relative}
.gc-hr:hover{background:var(--gchov)}
/* En tom timrad SÅG inte klickbar ut. Bakgrundstonen vid hovring säger
   "något händer här", inte vad, och `title` läses först efter en sekund.
   Plustecknet är hela svaret, och det finns bara medan pekaren står still
   på raden: en yta full av plustecken hade varit brus. */
.gc-hr:hover::after{content:"+";position:absolute;left:5px;top:50%;transform:translateY(-50%);
  font-size:13px;line-height:1;color:var(--gcmut);pointer-events:none}
.gc-evs{position:absolute;top:0;left:0;right:5px;bottom:0;pointer-events:none}
.gc-ev{position:absolute;border-radius:6px;padding:2px 6px;font-size:11px;line-height:1.25;overflow:hidden;
  cursor:pointer;color:var(--paper);pointer-events:auto;box-shadow:0 0 0 1px var(--surface)}
.gc-ev b{font-weight:500;display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-ev small{opacity:.88;font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-ev.tiny{padding:0 6px;display:flex;align-items:center}
.gc-ev.tiny b{font-size:11px}
.gc-ev.pale{color:var(--gcink)}
.gc-ev:hover{filter:brightness(1.07)}
/* En bokning som går över midnatt ritas i två bitar, en per dygn. Den
   räta kanten är hela markeringen: ett block med ett rakt snitt mot
   dygnsgränsen och en rundad kant i andra änden läses som avskuret, och
   det är precis vad det är. Ingen färg och ingen ikon, för §2 säger en
   accent per skärm och en kalender full av block är där en sida annars
   växer tre. Vilken bokning det är står i etiketten: båda bitarna bär
   hela spannet, "22:00–02:00". */
.gc-ev.f-efter{border-bottom-left-radius:0;border-bottom-right-radius:0}
.gc-ev.f-fore{border-top-left-radius:0;border-top-right-radius:0}
/* Nulinjen ligger över timraderna och är två pixlar hög. Utan den här
   raden svalde den klicket på precis den tid man oftast vill boka, alltså
   nu, och en rad som inte svarar läses som en trasig kalender. */
/* THE EDGE MARKER: what sits outside the grid's window.
   Sticky INSIDE the scroller, so nothing has to work out where the
   scroller sits on the page. Its own height is zero, so a marker that
   lights up moves nothing: it lies over the grid instead of pushing it.
   The button is absolute against the marker, which is positioned and is
   therefore its own containing block.

   TWO BOXES AND NOT ONE, and that is the whole point. Section 9 puts the
   floor for a tap target at 44 px and calls it non negotiable. The pill
   somebody READS is 26 px, the calendar's own control height, the same as
   `.gc-ib` and `.gc-btn` beside it: at 44 the painted pill would cover
   more than an hour of the day it is pointing into, on a grid whose rows
   are 34 px. So the BUTTON is the 44 px target and the pill inside it is
   what gets drawn. The floor is met and nothing on the grid is hidden, so
   there is no deviation here to argue about.

   The hit area that comes with that is deliberately no wider than the
   pill, and it sits at the very edge of the scroller where the hour rows
   are the least likely thing anyone is aiming at. */
.gc-kant{position:sticky;height:0;z-index:5;pointer-events:none}
.gc-kant[hidden]{display:none}
.gc-kant-t{top:0}
.gc-kant-b{bottom:0}
.gc-kantb{position:absolute;right:6px;pointer-events:auto;height:44px;padding:0 6px;
  display:flex;align-items:center;background:none;border:0;cursor:pointer}
.gc-kant-t .gc-kantb{top:0}
.gc-kant-b .gc-kantb{bottom:0}
/* The pill. It is the button's only child box, so the ring on focus goes
   here rather than round the invisible 44 px target, which would have
   drawn a rectangle nobody can see the edges of. */
.gc-kantp{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border:1px solid var(--gcline);border-radius:999px;background:var(--surface);
  color:var(--gcink);font-size:11px;box-shadow:var(--sh)}
.gc-kantb:hover .gc-kantp{background:var(--gchov)}
.gc-kantb:focus{outline:0}
.gc-kantb:focus-visible .gc-kantp{outline:2px solid var(--accent);outline-offset:2px}
.gc-kanti{display:flex;color:var(--gcmut)}
.gc-kantf{display:flex;gap:3px}
.gc-kantf i{display:block;width:6px;height:6px;border-radius:50%}
.gc-kantp b{font-weight:600;font-variant-numeric:tabular-nums}
.gc-now{position:absolute;left:0;right:5px;height:2px;background:var(--signal);z-index:3;border-radius:6px;pointer-events:none}
.gc-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--signal)}
.gc-next{padding:12px 15px 18px;border-top:1px solid var(--gcline);margin-top:10px}
.gc-lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gcmut);padding-bottom:4px}
.gc-nx{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;cursor:pointer;border-radius:8px}
.gc-nx:hover{background:var(--gchov)}
.gc-nx .t1x{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-nx .t2x{display:block;font-size:11px;color:var(--gcmut)}
.gc-dot{width:9px;height:9px;border-radius:50%;flex:none}
.gc-h1{font-size:17px;font-weight:400;letter-spacing:-.015em;line-height:1.3}
.gc-sub{font-size:13px;color:var(--gcmut);margin-top:3px}
.gc-kv{display:flex;gap:10px;align-items:flex-start;margin-top:11px;font-size:13px;color:var(--gcmut)}
.gc-kv svg{margin-top:1px}
/* veckovyn */
.gw-head{display:flex;align-items:flex-end;padding:4px 8px 6px 0;border-bottom:1px solid var(--gcline);flex:none}
.gw-head .gc-day{flex:1;min-width:0}
/* månadsvyn */
.gm2{display:flex;flex-direction:column;height:100%;min-height:0}
.gm2-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--gcline);flex:none}
.gm2-head span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gcmut);text-align:center;padding:7px 0}
.gm2-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.gm2-c{border-right:1px solid var(--gcline);border-bottom:1px solid var(--gcline);padding:1px 3px 4px;
  min-width:0;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.gm2-c:hover{background:var(--gchov)}
.gm2-c.ute{background:var(--surface-2)}
.gm2-c.ute .n,.gm2-c.ute .gm2-e{opacity:.5}
.gm2-c .n{font-size:11px;text-align:center;padding:4px 0 2px;color:var(--gcmut);flex:none}
.gm2-c .n b{font-weight:400;color:var(--gcink);padding:2px 5px;border-radius:999px}
.gm2-c.idag .n b{background:var(--gcb);color:var(--paper);font-weight:500}
.gm2-e{display:flex;align-items:center;gap:5px;font-size:11px;padding:2px 4px;border-radius:6px;width:100%;min-width:0;color:var(--gcink)}
.gm2-e i{width:7px;height:7px;border-radius:50%;flex:none}
.gm2-e span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gm2-e:hover{background:var(--gchov)}
.gm2-mer{font-size:11px;color:var(--gcmut);padding:0 5px;text-align:left}
.gm2-mer:hover{color:var(--gcb)}
/* årsvyn */
.gy{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:20px 22px;padding:20px}
.gy-m h4{font-size:13px;font-weight:600;color:var(--gcb);margin-bottom:5px;text-transform:capitalize}
.gy-g{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.gy-g .wd{font-size:11px;color:var(--gcmut);text-align:center;padding-bottom:2px}
.gy-d{font-size:11px;height:23px;border-radius:50%;display:grid;place-items:center;color:var(--gcink);position:relative;text-align:center}
.gy-d:hover{background:var(--gchov)}
.gy-d.idag{background:var(--gcb);color:var(--paper)}
.gy-d.has::after{content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--gcb)}
.gy-d.idag.has::after{background:var(--paper)}
/* ── möten: lista till vänster, mötet till höger ────────────── */
.mt2{display:grid;grid-template-columns:268px minmax(0,1fr);height:100%;min-height:0}
.mt2-list{border-right:1px solid var(--line-2);overflow-y:auto;padding:0 10px 20px;background:var(--surface-2)}
.mt2-lh{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);padding:16px 8px 6px;font-weight:500}
.mt2-i{display:block;width:100%;padding:10px 11px;border-radius:8px;margin-bottom:4px;border:1px solid transparent;transition:.15s}
.mt2-i:hover{background:var(--surface-3)}
.mt2-i.on{background:var(--surface);border-color:var(--line);box-shadow:var(--sh)}
.mt2-i .t1{display:block;font-size:13px;font-weight:500;line-height:1.35}
.mt2-i .t2{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.mt2-m{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.mt2-src{display:flex;gap:9px;align-items:center;padding:8px}
.mt2-src .mk{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--paper);font-size:11px;font-weight:700;flex:none}
.mt2-src b{font-size:13px;font-weight:500;display:block}
.mt2-src small{font-size:11px;color:var(--ink-3)}
.mt2-body{overflow-y:auto;padding:20px 26px 10px;min-width:0}
.mt2-h{display:flex;align-items:flex-start;gap:12px;padding-bottom:14px}
.mt2-h h2{font-size:24px;font-weight:600;letter-spacing:-.022em;line-height:1.25}
.mt2-sum{font-size:13px;line-height:1.62;color:var(--ink-2);max-width:78ch;margin-bottom:12px}
.mt2-sok{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;
  padding:0 11px;height:26px;background:var(--surface);text-transform:none;letter-spacing:0}
.mt2-sok input{border:0;outline:0;background:none;font-size:11px;width:150px;color:var(--ink)}
.mt2-tx{border-left:2px solid var(--line);padding-left:14px;max-width:88ch}
.mt2-r{display:grid;grid-template-columns:46px 128px minmax(0,1fr);gap:10px;padding:6px 0;font-size:13px;line-height:1.55}
.mt2-r .ts2{color:var(--ink-3);font-size:11px;font-variant-numeric:tabular-nums}
.mt2-r .who2{color:var(--ink);font-weight:500;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt2-r .sa{color:var(--ink-2);min-width:0}
.eng.live{background:var(--crit-soft);color:var(--crit)}
.eng.live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:bl 1.4s infinite}
.lnk{color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-size:inherit}
@media (max-width:900px){.mt2{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .mt2-list{border-right:0;border-bottom:1px solid var(--line-2);max-height:170px}
  .mt2-body{padding:16px 14px}
  .mt2-r{grid-template-columns:42px minmax(0,1fr);gap:4px 8px}
  .mt2-r .sa{grid-column:2}}

/* formuläret för en post */
.frm{display:flex;flex-direction:column;gap:11px;margin:4px 0 14px}
.frm-r{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:9px}
.fl{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--ink-3);min-width:0}
.fl input{height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);
  padding:0 10px;font-size:13px;color:var(--ink);outline:0;min-width:0;width:100%}
.fl input:focus,.fl textarea:focus{border-color:var(--accent);background:var(--surface)}
.fl textarea{border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:9px 10px;
  font:inherit;font-size:13px;line-height:1.6;color:var(--ink);outline:0;resize:vertical;min-height:150px;width:100%}
/* Prispaketen i prislistan: ett namn, ett pris, vad priset är per, och
   en väg bort. Samma radgrammatik som varje annan rad med fält i en
   ruta, alltså fälten först och åtgärden sist. Knappen ligger i linje
   med fälten och inte med etiketterna, därför align-items:end. */
.prispaket-rad{display:grid;grid-template-columns:1.2fr .8fr 1.1fr auto;gap:8px;align-items:end;margin:0 0 8px}
.prispaket-rad .fl select{height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);
  padding:0 4px 0 8px;font:inherit;font-size:13px;color:var(--ink);outline:0;min-width:0;width:100%}
.prispaket-rad .mini{height:34px}
.swat{display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}
.sw2{width:22px;height:22px;border-radius:50%;flex:none;transition:.15s}
.sw2:hover{transform:scale(1.12)}
.sw2.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}

/* ── Notion ────────────────────────────────────────────────── */
.nt{--ntink:var(--ink);--ntmut:var(--ink-2);--ntblue:var(--ink);--ntline:var(--line-2);
  display:flex;flex-direction:column;height:100%;background:var(--surface);color:var(--ntink);padding:15px 19px 16px}
.nt-bc{font-size:11px;color:var(--ntmut);display:flex;align-items:center;gap:5px;flex:none}
.nt-bc b{font-weight:500;color:var(--ntink)}
/* Källväljaren sitter i brödsmulan och ska se ut som texten den ersätter,
   inte som ett formulär. Ramen kommer fram när man pekar på den, så att
   den som letar efter ett byte hittar det. Bara produkten ritar den. */
.nt-bc .ntkalla{font:inherit;font-size:11px;color:var(--ntmut);background:transparent;
  border:1px solid transparent;border-radius:6px;padding:1px 3px;max-width:160px}
.nt-bc .ntkalla:hover{border-color:var(--ntline);color:var(--ntink)}
.nt-bc .ntkalla:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.nt-h1{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:7px 0 9px;display:flex;align-items:center;gap:8px;flex:none}
.nt-tabs2{display:flex;gap:14px;border-bottom:1px solid var(--ntline);margin-bottom:6px;flex:none}
.nt-tabs2 button{font-size:13px;color:var(--ntmut);padding:4px 0 6px;border-bottom:2px solid transparent;margin-bottom:-1px}
.nt-tabs2 button.on{color:var(--ntink);border-color:var(--ntink);font-weight:500}
.nt-blocks{flex:1;overflow-y:auto;min-height:0;margin:0 -6px}
.nt-b{display:flex;align-items:flex-start;gap:9px;padding:7px 6px;border-radius:6px;font-size:15px;line-height:1.55;cursor:pointer;position:relative}
.nt-b:hover{background:var(--ntline)}
.nt-b .hdl{position:absolute;left:-9px;top:6px;color:var(--ntmut);opacity:0;font-size:11px}
.nt-b:hover .hdl{opacity:.7}
.nt-cb{width:15px;height:15px;border:1.4px solid var(--ink-3);border-radius:6px;flex:none;margin-top:3px;display:grid;place-items:center;color:transparent;transition:.15s}
.nt-cb.on{background:var(--ntblue);border-color:var(--ntblue);color:var(--paper)}
.nt-b.done .tx2{color:var(--ntmut);text-decoration:line-through}
/* Krysset syns när raden hovras, och alltid på en pekskärm: `:hover` finns
   inte där, och en knapp som bara går att nå med mus är ingen knapp på en
   telefon. Träffytan är 24 px även när ikonen är 11. */
.nt-del{flex:none;width:24px;height:24px;margin:-2px -4px 0 0;border-radius:6px;display:grid;place-items:center;
  color:var(--ntmut);opacity:0;transition:opacity .12s,background .12s}
.nt-b:hover .nt-del,.nt-del:focus-visible{opacity:1}
.nt-del:hover{background:var(--ntline);color:var(--crit)}
@media (hover:none){.nt-del{opacity:.55}}
.nt-tom{font-size:13px;color:var(--ntmut);padding:6px 6px 2px}
.nt-new{font-size:13px;color:var(--ntmut);padding:5px 6px;flex:none}
.nt-h2{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ntink);
  margin:14px 0 3px;display:flex;align-items:baseline;gap:9px}
.nt-h2:first-child{margin-top:2px}
.nt-h2 i{font-style:normal;font-size:11px;font-weight:400;color:var(--ntmut)}

/* ── Slack ─────────────────────────────────────────────────── */
.sk{--skink:var(--ink);--skmut:var(--ink-2);--skblue:var(--ink);--skline:var(--line-2);
  display:flex;flex-direction:column;height:100%;background:var(--surface);color:var(--skink)}
.sk-top{display:flex;align-items:center;gap:8px;padding:14px 15px 11px;border-bottom:1px solid var(--skline);flex:none}
.sk-top b{font-size:15px;font-weight:900;letter-spacing:-.02em}
.sk-top .mem{font-size:11px;color:var(--skmut);border:1px solid var(--skline);border-radius:6px;padding:1px 6px;display:flex;gap:4px;align-items:center}
/* Kanalraden. Ligger under rubriken och inte i den: rubriken säger vilken
   kanal man läser, raden säger vilka som finns. Ritas bara när det finns
   mer än en, en ensam flik är en knapp som inte gör något. Färgen på den
   valda tas ur ytan och inte ur vitt, för --skblue är ljus i mörkt läge. */
.sk-tabs{display:flex;gap:5px;padding:9px 13px 0;flex:none;overflow-x:auto;scrollbar-width:none}
.sk-tabs::-webkit-scrollbar{display:none}
.sk-tabs button{font:inherit;font-size:11px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  padding:4px 10px;border-radius:12px;border:1px solid var(--skline);background:transparent;color:var(--skmut)}
.sk-tabs button:hover{background:var(--skline);color:var(--skink)}
.sk-tabs button.on{background:var(--skblue);border-color:var(--skblue);color:var(--surface)}
.sk-list{flex:1;overflow-y:auto;min-height:0;padding:6px 0}
.sk-m{display:flex;gap:11px;padding:9px 15px;position:relative}
.sk-m:hover{background:var(--skline)}
.sk-av{width:30px;height:30px;border-radius:6px;flex:none;display:grid;place-items:center;color:var(--paper);font-size:11px;font-weight:700}
.sk-n{font-size:13px;font-weight:900;letter-spacing:-.01em;display:flex;align-items:baseline;gap:7px}
.sk-n i{font-style:normal;font-weight:400;font-size:11px;color:var(--skmut)}
.sk-tx{font-size:13px;line-height:1.52;color:var(--skink)}
.sk-rc{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--skline);background:var(--surface-2);border-radius:12px;padding:1px 7px;font-size:11px;margin-top:5px;color:var(--skmut)}
.sk-th{font-size:11px;color:var(--skblue);font-weight:700;margin-top:4px;display:flex;align-items:center;gap:6px}
.sk-box{margin:8px 13px 13px;border:1px solid var(--line);border-radius:8px;padding:6px 6px 6px 10px;
  font-size:13px;color:var(--skmut);flex:none;display:flex;align-items:center;gap:6px}
.sk-box .sk-in{flex:1;min-width:0;border:0;outline:0;background:none;font-size:13px;color:var(--skink)}
.sk-send{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;color:var(--skmut);flex:none}
.sk-send:hover{background:var(--skline);color:var(--ok)}
.nt-new input{border:0;outline:0;background:none;width:100%;font-size:13px;color:var(--ntink)}

/* ── Fortnox ───────────────────────────────────────────────── */
.fx{--fxg:var(--ink);--fxink:var(--ink);--fxmut:var(--ink-2);--fxline:var(--line-2);
  display:flex;flex-direction:column;height:100%;background:var(--surface);color:var(--fxink)}
.fx-top{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid var(--fxline);flex:none}
.fx-logo{width:20px;height:20px;flex:none}
.fx-logo svg{width:100%;height:100%;display:block}
.fx-top b{font-size:13px;font-weight:600}
.fx-top .tag{margin-left:auto;font-size:11px;color:var(--fxg);background:rgba(14,158,110,.1);border-radius:6px;padding:2px 7px;font-weight:600}
.fx-body{flex:1;overflow-y:auto;min-height:0;padding:15px 15px 16px}
.fx-doc{border:1px solid var(--fxline);border-radius:6px;overflow:hidden}
.fx-doc .hdr{display:flex;align-items:baseline;gap:8px;padding:9px 11px;background:var(--surface-2);border-bottom:1px solid var(--fxline)}
.fx-doc .hdr b{font-size:13px;font-weight:600}
.fx-f{display:grid;grid-template-columns:1fr 1fr;gap:0}
.fx-f div{padding:11px 13px;border-bottom:1px solid var(--fxline)}
.fx-f div:nth-child(odd){border-right:1px solid var(--fxline)}
.fx-f small{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--fxmut);margin-bottom:2px}
.fx-f b{font-size:13px;font-weight:600}
.fx-sum{display:flex;align-items:baseline;justify-content:space-between;padding:9px 11px;background:var(--surface-2)}
.fx-sum b{font-size:17px;font-weight:700;letter-spacing:-.02em}
.fx-btn{height:30px;padding:0 14px;border-radius:6px;font-size:13px;font-weight:600;background:var(--fxg);color:var(--paper);display:inline-flex;align-items:center;gap:6px}
.fx-btn:hover{filter:brightness(.94)}
.fx-btn.gh{background:none;color:var(--fxink);border:1px solid var(--fxline)}
.fx-btn.gh:hover{background:var(--surface-3);filter:none}
.fx-tbl{margin-top:11px;border-top:1px solid var(--fxline)}
.fx-tr{display:flex;align-items:center;gap:9px;padding:7px 2px;border-bottom:1px solid var(--fxline);font-size:11px}
.fx-tr .n{font-weight:600}
.fx-tr .amt2{margin-left:auto;font-weight:600}

/* ── Stripe-doftande nyckeltal ─────────────────────────────── */
.sp{display:grid;gap:12px;padding:13px;height:100%;align-content:start}
.sp-c{border:1px solid var(--line);border-radius:12px;padding:13px 15px 9px;min-width:0;background:var(--surface)}
.sp-l{font-size:11px;color:var(--ink-2);display:flex;align-items:center;gap:5px}
.sp-l .i{width:11px;height:11px;border-radius:50%;border:1px solid var(--ink-3);color:var(--ink-3);font-size:11px;display:grid;place-items:center}
.sp-n{font-family:'Inter',-apple-system,sans-serif;font-weight:600;font-size:24px;letter-spacing:-.03em;margin-top:3px;display:flex;align-items:baseline;gap:7px}
.sp-d{font-size:11px;font-weight:500;border-radius:6px;padding:1px 5px}
.sp-d.up{color:var(--ok);background:var(--ok-soft)}
.sp-d.dn{color:var(--crit);background:var(--crit-soft)}
.sp-p{font-size:11px;color:var(--ink-3);margin-top:1px}


/* ── motor kontra modell ────────────────────────────────────── */
.eng{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;border-radius:6px;padding:2px 6px;white-space:nowrap;flex:none}
.eng.rule{color:var(--ok);background:var(--ok-soft)}
.eng.model{color:var(--accent);background:var(--accent-soft)}
.usage{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px;white-space:nowrap}
.usage b{color:var(--ink-2);font-weight:500}

/* ── granskningssteget ──────────────────────────────────────── */
.rv{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:10px;background:var(--surface)}
.rv-h{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.rv-h .ch{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:var(--paper);font-size:11px;font-weight:700;flex:none}
.rv-h .to{font-size:13px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-f{display:flex;gap:9px;padding:7px 11px;border-bottom:1px solid var(--line-2);font-size:11px}
.rv-f b{color:var(--ink-3);font-weight:400;width:56px;flex:none}
.rv textarea{width:100%;border:0;outline:0;resize:vertical;background:none;color:var(--ink);
  font:inherit;font-size:13px;line-height:1.62;padding:11px;min-height:120px;display:block}
/* The letter still being written in step 2: same box as the textarea,
   the text typed out under the orange caret. */
.rv-skrivs{font-size:13px;line-height:1.62;padding:11px;min-height:120px;max-height:420px;overflow-y:auto;white-space:pre-wrap;color:var(--ink)}
/* Thinking: the mark turns alone in the box. Writing: the caret, no mark. */
.rv-skrivs .tank-m{display:none;color:var(--accent);opacity:.7}
.rv-skrivs.tanker .tank-m{display:inline-flex}
.rv-skrivs.tanker .caret{display:none}
.rv-skrivs .caret{display:inline-block;width:2px;height:.95em;margin-left:2px;vertical-align:-.12em;
  background:var(--accent);border-radius:1px;animation:utkastblink 1s steps(1,end) infinite}
@media (prefers-reduced-motion:reduce){.rv-skrivs .caret{animation:none;opacity:1}}
/* The notice under step 2 when the letter still has [brackets] to fill in. */
.luckor{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--accent);margin:8px 0 2px}
.luckor[hidden]{display:none}
.rv-ft{display:flex;align-items:center;gap:8px;padding:8px 11px;border-top:1px solid var(--line-2);background:var(--surface-2)}
.rv-ft .st2{font-size:11px;color:var(--ink-3);margin-left:auto}
/* Två steg i en dialog. Nummer till vänster, som bockas av när steget är
   klart. Skillnaden mot `.stepper` ovanför: den visar var i ett flöde man
   är, det här visar vad som återstår att göra på en annan maskin. */
.steg2{display:flex;gap:11px;padding:13px 0;border-top:1px solid var(--line-2)}
.steg2:first-of-type{border-top:0}
.steg2 .nr{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--surface-3);color:var(--ink-3);font-size:11px;font-weight:600;margin-top:1px}
.steg2 b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.steg2.klar .nr{background:var(--ok);color:var(--paper)}
.steg2.klar b{color:var(--ok)}
.stepper{display:flex;align-items:center;gap:8px;margin:-2px 0 14px}
.step{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)}
.step .n2{width:17px;height:17px;border-radius:50%;background:var(--surface-3);color:var(--ink-3);
  display:grid;place-items:center;font-size:11px;font-weight:600}
.step.on{color:var(--ink)}
.step.on .n2{background:var(--accent);color:var(--paper)}
.step.done .n2{background:var(--ok);color:var(--paper)}
.stepper .ln{flex:1;height:1px;background:var(--line)}

/* ── under huven: minne, regler, lärdomar ───────────────────── */
.hood{display:grid;grid-template-columns:212px 1fr;gap:16px;min-height:330px}
.mdtree{border-right:1px solid var(--line-2);padding-right:12px}
.mdgrp{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:10px 6px 4px}
.mdf{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:6px;font-size:13px;color:var(--ink-2);
  cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdf:hover{background:var(--surface-3);color:var(--ink)}
.mdf.on{background:var(--accent-soft);color:var(--accent)}
.mdview{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);padding:14px 16px;min-width:0}
.mdview pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.62;
  white-space:pre-wrap;word-break:break-word;color:var(--ink-2)}
.mdview pre b{color:var(--ink);font-weight:600}
.mdview pre i{color:var(--accent);font-style:normal}
.rule{display:flex;gap:11px;padding:10px 2px;border-top:1px solid var(--line-2)}
.rule:first-of-type{border-top:0}
.rule .bd2{min-width:0;flex:1}
.rule .t3{font-size:13px;font-weight:500}
.rule .d3{font-size:11px;color:var(--ink-2);line-height:1.5;margin-top:2px}
.rule .r3{font-size:11px;color:var(--ink-3);text-align:right;flex:none;white-space:nowrap}
.learn{display:flex;gap:10px;padding:11px 2px;border-top:1px solid var(--line-2)}
.learn:first-of-type{border-top:0}
.learn .sig{font-size:11px;font-weight:600;color:var(--ink-2);background:var(--surface-3);border-radius:999px;
  padding:2px 7px;flex:none;height:max-content}
.tabs{display:flex;gap:2px;background:var(--surface-3);border-radius:999px;padding:2px;width:max-content;margin-bottom:4px}
.tabs button{height:26px;padding:0 13px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink-2)}
.tabs button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(26,25,23,.1)}
@media (max-width:760px){.hood{grid-template-columns:1fr}.mdtree{border-right:0;border-bottom:1px solid var(--line-2);padding:0 0 8px}}




/* ── minnesraden och skälfältet ──────────────────────────────
   Minnet visas som en egen rad i AI-punkten, inte som en källchip:
   det är inte var uppgiften kommer ifrån, det är vad ni gjorde
   förra gången. Skälfältet efterfrågas bara när beslutet avviker. */
.memline{display:flex;gap:9px;align-items:flex-start;margin-top:9px;padding:9px 11px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--line-2);font-size:13px;line-height:1.52;color:var(--ink-2)}
.memline svg{color:var(--ink-3);margin-top:2px}
.whyf{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r-md);padding:11px 13px;margin:4px 0 12px}
.whyf label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:500;color:var(--accent);margin-bottom:7px}
.whyf textarea{width:100%;border:0;outline:0;resize:vertical;background:none;color:var(--ink);font:inherit;
  font-size:13px;line-height:1.55;min-height:52px;display:block}
.whyf .hint{font-size:11px;color:var(--ink-3);margin-top:6px}

/* ══════════════════════════════════════════════════════════════
   Vänsterlisten. 1.0 hade åtta vyer och ingen överblick; 2.0 har
   överblicken på hemskärmen och listen enbart för DJUPET: de vyer
   där man arbetar sig igenom något helt i stället för att se de
   tre viktigaste raderna. Hem är fortfarande utgångsläget.
   ══════════════════════════════════════════════════════════════ */
.app{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100%}
.rail{
  background:var(--surface);border-right:1px solid var(--line-2);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;z-index:46;
}
.rail-top{display:flex;align-items:center;gap:10px;padding:17px 18px 12px;flex:none}
.rail-top .mk{width:30px;height:30px;display:grid;place-items:center;flex:none}
.rail-top b{font-size:18px;font-weight:600;letter-spacing:-.024em}
.rail-top .v{font-size:11px;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:1px 4px}
.navgrp{padding:6px 12px 0}
.navgrp .lbl2{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);padding:12px 8px 5px;font-weight:500}
.nav{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:8px;
  color:var(--ink-2);font-size:13px;line-height:1.2;transition:background .16s,color .16s;position:relative}
.nav:hover{background:var(--surface-3);color:var(--ink)}
.nav.on{background:var(--accent-soft);color:var(--accent);font-weight:500}
.nav .ic{opacity:.75;flex:none}
.nav.on .ic{opacity:1}
.nav .tx3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav .cnt2b{margin-left:auto;font-size:11px;font-weight:500;background:var(--surface-3);color:var(--ink-2);
  border-radius:999px;padding:1px 7px;flex:none}
.nav.on .cnt2b{background:var(--surface);color:var(--accent)}
.nav .cnt2b.hot{background:var(--crit-soft);color:var(--crit)}
.railfot{margin-top:auto;border-top:1px solid var(--line-2);padding:7px 8px;flex:none}
.railfoot{padding:8px 10px;border-radius:8px;display:flex;align-items:center;gap:10px;width:100%;text-align:left;transition:background .16s}
.railfoot:hover{background:var(--surface-3)}
.railfoot .av2{width:29px;height:29px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.railfoot .nm2{font-size:13px;font-weight:500;line-height:1.25}
.railfoot .rl{font-size:11px;color:var(--ink-3)}
.main{min-width:0;display:flex;flex-direction:column}
.scrim2{position:fixed;inset:0;background:rgba(26,25,23,.3);opacity:0;pointer-events:none;transition:opacity .3s;z-index:44}
body.navopen .scrim2{opacity:1;pointer-events:auto}

/* ══ djupvy ══ */
.page{display:none}
body.deep .page{display:block}
body.deep .prio,body.deep .grid{display:none}
.page-h{display:flex;align-items:flex-start;gap:13px;padding:2px 2px 18px}
.page-h .mk{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--paper);font-size:13px;font-weight:700;flex:none}
.page-h h1{font-size:24px;font-weight:600;letter-spacing:-.028em;line-height:1.2}
.page-h .sub3{font-size:13px;color:var(--ink-2);margin-top:4px;max-width:70ch;line-height:1.55}
.page-h .acts2{margin-left:auto;display:flex;gap:8px;flex:none}
.card2{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);padding:20px 22px;margin-bottom:16px}
.card2 h3{font-size:15px;font-weight:600;letter-spacing:-.015em;margin-bottom:4px}
.card2 .lead{font-size:13px;color:var(--ink-2);line-height:1.6;max-width:76ch}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.kv{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line-2);font-size:13px}
.kv:first-of-type{border-top:0}
.kv b{width:190px;flex:none;font-weight:400;color:var(--ink-3)}
.chain2{display:flex;flex-direction:column;gap:0;margin-top:6px}
.chain2 .ln2{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line-2);align-items:flex-start}
.chain2 .ln2:first-child{border-top:0}
.chain2 .ts{font-size:11px;color:var(--ink-3);width:96px;flex:none;font-variant-numeric:tabular-nums}
.chain2 .who{font-size:11px;color:var(--ink-3);margin-left:auto;flex:none;white-space:nowrap}
.edi{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid var(--line-2)}
.edi:first-of-type{border-top:0}
.edi code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;background:var(--surface-3);
  border-radius:6px;padding:2px 6px;color:var(--ink-2)}


.oa-top{display:flex;align-items:center;gap:8px;justify-content:center;padding:0 0 10px;margin-bottom:6px;
  border-bottom:1px solid var(--line-2);color:var(--ink-3);font-size:11px}
.oa-top code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
.oa-acc{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);color:var(--ok);transition:.18s}
.oa-acc:hover{border-color:var(--ink-3);background:var(--surface-2)}
.oa-acc .grow{color:var(--ink)}


/* ── radmatchning ────────────────────────────────────────────
   Två kolumner som ska vara identiska, och en tredje som säger om
   de är det. Ögat ska hitta avvikelsen utan att läsa siffrorna. */
.mt{display:grid;grid-template-columns:minmax(0,1.6fr) 1fr 1fr auto;gap:0;font-size:13px}
.mt .h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  padding:0 10px 7px;font-weight:500}
.mt .c{padding:11px 10px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:8px;min-width:0}
.mt .c.num{justify-content:flex-end;font-variant-numeric:tabular-nums}
.mt .r-ok .c{background:transparent}
.mt .r-fel .c{background:var(--crit-soft)}
.mt .r-fel .c:first-child{box-shadow:inset 2px 0 0 var(--crit)}
.mt .miss{color:var(--ink-3);font-style:italic}
.mt .badge{font-size:11px;font-weight:600;border-radius:6px;padding:2px 7px;white-space:nowrap}
.mt .badge.ok{color:var(--ok);background:var(--ok-soft)}
.mt .badge.fel{color:var(--crit);background:var(--crit-soft)}
.fkauto{display:flex;gap:11px;align-items:flex-start;margin-left:auto;max-width:430px;cursor:pointer}
.fkauto small{display:block;font-size:11px;color:var(--ink-3);line-height:1.45;margin-top:2px}
.fkauto b{font-size:13px}
.chk3{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line-2);font-size:13px}
.chk3:first-of-type{border-top:0}
.chk3 .ic2{width:16px;flex:none;margin-top:1px}
.chk3 .ic2.ok{color:var(--ok)} .chk3 .ic2.fel{color:var(--crit)}
.chk3 b{font-weight:500;display:block}
.chk3 span{color:var(--ink-2);font-size:13px;line-height:1.45}
.verdict{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);
  font-size:13px;line-height:1.55;margin-bottom:16px}
.verdict.stopp{background:var(--crit-soft);color:var(--crit)}
.verdict.ren{background:var(--ok-soft);color:var(--ok)}
.verdict b{font-weight:600}
@media (max-width:760px){.mt{grid-template-columns:1fr auto}.mt .h:nth-child(2),.mt .h:nth-child(3){display:none}}

/* ── hopfällbar lista ──────────────────────────────────────
   NN/g: att dölja navigationen halverar upptäckbarheten och gör
   det värre på skrivbord än på mobil. Därför är listen synlig som
   standard och hopfällning är ett val användaren gör och som kommer
   ihåg, aldrig något systemet gör åt dem. */
.app{transition:grid-template-columns .34s var(--ease)}
body.railmini .app{grid-template-columns:68px minmax(0,1fr)}
.railtoggle{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3);
  margin-left:auto;flex:none;transition:.18s}
.railtoggle:hover{background:var(--surface-3);color:var(--ink)}
body.railmini .rail-top b,body.railmini .rail-top .v,
body.railmini .navgrp .lbl2,body.railmini .nav .tx3,body.railmini .nav .cnt2b,
body.railmini .railfoot span:not(.av2){display:none}
body.railmini .rail-top{padding:17px 0 12px;justify-content:center}
body.railmini .rail-top{flex-direction:column;gap:8px}
body.railmini .railtoggle{margin:0}
body.railmini .nav{justify-content:center;padding:10px 0}
body.railmini .navgrp{padding:4px 10px 0}
body.railmini .navgrp::before{content:"";display:block;height:1px;background:var(--line-2);margin:8px 6px}
body.railmini .navgrp:first-child::before{display:none}
body.railmini .railfoot{justify-content:center;padding:8px 0}
body.railmini .nav .ic{position:relative}
/* räknaren blir en prick när texten är borta. Informationen försvinner inte */
body.railmini .nav[data-count]::after{content:"";position:absolute;top:7px;right:14px;width:6px;height:6px;
  border-radius:50%;background:var(--crit)}
.rail{position:sticky}

/* ── djupvyn är en helskärmsvy, inte ett stort kort ──────────
   En widget som förstoras ska sluta se ut som en widget. En connectorvy
   fyller hela ytan till höger om listen, precis som appen den härmar gör
   i sin egen flik: marginal runt en inkorg är en attrapp, inte en inkorg.
   Kvar blir en 48 px-rad som säger vad vyn är och var datan kommer ifrån. */
/* .stage är ett flex-barn i en kolumn. `margin:0 auto` stänger av stretch
   och gör bredden shrink-to-fit. Vyn blev 1007 px mitt i en 1196 px yta och
   såg centrerad ut med avsikt. Nollställ marginalen, inte bara max-bredden. */
body.appview .stage{max-width:none;padding:0;margin:0;width:100%}
body.appview .page{height:calc(100vh - 54px);display:flex;flex-direction:column;min-height:0}
.apphead{display:flex;align-items:center;gap:11px;padding:0 16px 0 18px;height:48px;flex:none;
  border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.apphead .mk{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  color:var(--paper);font-size:11px;font-weight:700;flex:none}
.apphead b{font-size:15px;font-weight:600;letter-spacing:-.015em;flex:none}
.apphead .sub4{font-size:11px;color:var(--ink-3);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.apphead .acts3{margin-left:auto;display:flex;gap:8px;flex:none;align-items:center}
.appfull{flex:1;min-height:0;background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
.appfull > *{flex:1;min-height:0}

/* ══ kontopopover ══
   Ett konto är fyra rader, inte en helskärmsvy. Den öppnas DÄR man klickade:
   på användaren nere till vänster fälls den ut uppåt, på avataren uppe till
   höger nedåt. En panel som alltid kommer mitt på skärmen tvingar ögat att
   flytta sig och lämna det man höll på med. */
.pop{position:fixed;z-index:76;width:274px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:13px 14px 12px;
  opacity:0;transform:translateY(4px) scale(.985);transition:opacity .16s var(--ease),transform .16s var(--ease)}
.pop.on{opacity:1;transform:none}
.pop .id{display:flex;align-items:center;gap:10px;padding-bottom:11px;border-bottom:1px solid var(--line-2)}
.pop .id .av2{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.pop .id b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.pop .id span{display:block;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop .kvp{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13px}
.pop .kvp b{font-weight:500;color:var(--ink-3)}
.pop .kvp span{text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop .rad{border-top:1px solid var(--line-2);margin-top:6px;padding-top:9px;display:flex;gap:7px}
.pop .rad .btn{flex:1;justify-content:center}

/* ══ dra ut ur lådan ══
   Att klicka Lägg till lämnar widgeten längst ned, och sedan får man dra dit
   den ändå. Att dra ut den direkt är samma gest som på en hemskärm: lådan
   tonas ned så att brädet syns, och släppet bestämmer platsen. */
.trayfly{position:fixed;left:0;top:0;z-index:82;pointer-events:none;display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 11px 7px 8px;
  box-shadow:var(--sh-lg);font-size:13px;font-weight:600}
body.dragurlada{user-select:none;-webkit-user-select:none}
body.dragurlada .sheet{opacity:.08;pointer-events:none;transition:opacity .18s var(--ease)}
body.dragurlada .scrim{opacity:0;pointer-events:none}
.cc[data-tray]{cursor:grab}
.cc[data-tray]:active{cursor:grabbing}
.cc .dra{font-size:11px;color:var(--ink-3);align-self:center;margin-left:auto}

/* ══ inloggning i prototypen ══
   Utan den här vyn slutade "Logga ut" i ett tomt bräde som fortfarande bar
   Anna Lindqvists namn i listen, alltså någon annans konto. Prototypen har
   ingen server, så knappen loggar in direkt och säger det rakt ut. */
.login{position:fixed;inset:0;z-index:90;display:none;place-items:center;background:var(--paper);padding:24px}
body.loginlage .login{display:grid}
body.loginlage .app,body.loginlage .editbar,body.loginlage .threadbar{display:none}
.login .bx2{width:min(388px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-md);padding:26px 26px 22px}
.login .mrk{display:flex;align-items:center;gap:9px;margin-bottom:19px;font-weight:600;font-size:15px}
.login h1{font-size:24px;letter-spacing:-.02em;margin-bottom:7px}
.login p{font-size:13px;line-height:1.6;color:var(--ink-2);margin-bottom:17px}
.login label{display:block;font-size:11px;color:var(--ink-3);margin-bottom:6px}
.login input{width:100%;height:40px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);padding:0 12px;font-size:13px;color:var(--ink);font-family:inherit}
.login input:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.login .btn{width:100%;justify-content:center;margin-top:13px;height:40px}
.login .fot{margin-top:17px;padding-top:15px;border-top:1px solid var(--line-2);font-size:11px;
  line-height:1.6;color:var(--ink-3)}
.login .fot a{color:var(--ink-2);text-decoration:underline;cursor:pointer}

/* ══ mobilöverstyrningar, SIST I FILEN MED AVSIKT ══
   En regel som läggs till efter ett @media-block vinner över blocket vid
   samma specificitet, oavsett media query. Varje ny komponent som behöver
   ett mobilbeteende ska därför få det här nere, inte i blocket ovanför. */
@media (max-width:900px){
  .usage{display:none}
  .app{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;bottom:0;width:270px;height:100dvh;transform:translateX(-101%);
    transition:transform .4s var(--ease);box-shadow:var(--sh-lg);border-right:1px solid var(--line)}
  body.navopen .rail{transform:none}
  .page-h h1{font-size:24px}
  #btnLog,#btnConn{display:none}   /* nås via ⌘K; greppgesten är avstängd på mobil */
  .hood{grid-template-columns:1fr}
  .mdtree{border-right:0;border-bottom:1px solid var(--line-2);padding:0 0 8px}
  .mdview pre{font-size:11px}
  .rv textarea{min-height:100px}
  .stepper{flex-wrap:wrap}
  /* Godkännandeknappen får inte ligga under en kant. Rutan rullar internt
     (max-height:86vh), och footern låg sist i rullningen: på en telefon syntes
     bara överkanten av "Granska 2 utgående" vid nederkanten, vilket läses som
     ett avklippt fönster och inte som något att rulla till.

     Regeln står HÄR och inte bland modalreglerna med flit. På en bred skärm
     får rutan plats, och en sticky rad där satte igång en pendling: raden
     ändrar boxens rullhöjd, rullisten kommer och går, textbredden ändras med
     den, och höjden ändras igen. Playwright såg det som ett element som
     aldrig står stilla, och tre prov i kallor-ui föll på just det. */
  .modal .mfoot{position:sticky;bottom:-22px;z-index:1;margin:16px -22px -22px;
    padding:13px 22px 22px;background:var(--surface);border-top:1px solid var(--line-2)}
  .pi{grid-template-columns:auto minmax(0,1fr) 26px}
  .pi .acts{grid-column:1/-1;display:flex;flex-wrap:wrap;margin-top:10px;gap:10px}
  .pi .acts .mini{min-width:0;min-height:44px;height:44px;width:auto;flex:1 1 calc(50% - 5px)}
  /* Åtgärderna tar hela bredden, alltså flyttades nästa barn till en egen
     rad, och krysset stod ensamt längst ned till vänster som en knapp utan
     hemvist. Det hör till kortet och inte till åtgärderna: uppe till höger,
     samma plats som på varje annat kort. */
  .pi:not(.klar) .dis{grid-column:3;grid-row:1}
  body.railmini .app{grid-template-columns:1fr}
  body.appview .page{height:calc(100dvh - 54px)}
  .apphead{padding:0 12px;gap:8px}
  .apphead .sub4{display:none}
  /* Kalenderns toppbar rymmer inte fyra vyer plus period på 430 px.
     Den bryter i stället för att klippa månaden till "a…". */
  .gc-top{flex-wrap:wrap;row-gap:8px}
  .gc-right{flex:1 0 100%;margin-left:0;justify-content:space-between}
  .gy{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;padding:14px}
  .gm2-c .n{font-size:11px}
  .gm2-e span{font-size:11px}
  .mt2-sok input{width:110px}
  .ib#btnMenu{display:grid}                 /* måste slå .ib#btnMenu-regeln ovan */
  .app{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;bottom:0;width:270px;height:100dvh;transform:translateX(-101%);
    transition:transform .4s var(--ease);box-shadow:var(--sh-lg);border-right:1px solid var(--line);z-index:47}
  body.navopen .rail{transform:none}
  /* Under brytpunkten staplas korten i en spalt och greppgesten är avstängd.
     Handtag som inte gör något får inte synas. */
  body.edit .rz{display:none}
  .gm-fab{width:44px;height:44px}
}


/* ═══════════════════════════════════════════════════════════════════
   DESIGN.md conformance layer, 18 August 2026.

   DESIGN.md says: "If code and this file disagree, this file wins."
   Everything below exists to make that true. It is one block so the whole
   delta reads in one place, and so it can be folded into the base file
   once the team has approved it.

   Comments are English per CLAUDE.md rule 4. UI strings stay Swedish:
   the surrounding product is Swedish, and a half translated screen is
   worse than an untranslated one. The English first migration has its
   own work order.

   Four places where the file contradicts itself or the product, all
   resolved deliberately and listed in the handoff:
     1. Timestamps are --ink-faint in §2 and --signal in the same section.
        Resolved: --signal for the eyebrow, --ink-2 for list timestamps
        (§9 forbids --ink-faint for anything a user must read).
     2. §3 prose says headings are never 600; the product table in the
        same section says section headings are 600. Resolved: page titles
        500, section headings 600.
     3. §6 gives no red. --crit collapses into --warn.
     4. §9 wants 44px targets, §6 wants 36px small buttons. Resolved:
        36px on a mouse, 44px on touch.
   ═══════════════════════════════════════════════════════════════════ */


/* ── §3 type. Product scale, not the marketing scale. ───────────────
   Page title 24/30 w500 · Section heading 17/23 w600 · Row primary
   15/21 w500 · Row secondary 13/18 w400 muted · Table header 12/16
   uppercase w600 · Micro label 11 w600 · numbers tabular. */
body{font-size:13px;line-height:1.5}
.page-h h1{font-size:24px;line-height:1.25;font-weight:500;letter-spacing:-.012em}
.card2 h3,.sheet-h h2,.modal h3{font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.006em}
.wh h3,.apphead b{font-size:15px;line-height:1.4;font-weight:500;letter-spacing:0}
.row .t1,.cand .t1,.mt2-i .t1{font-size:15px;line-height:1.4;font-weight:500}
.row .t2,.cand .t2,.mt2-i .t2{font-size:13px;line-height:1.4;font-weight:400;color:var(--ink-2)}
.sect,.lbl2,.mdgrp,.gc-lbl,.mt2-lh,.ordrubrik,.mt .h,.fx-f small,.b-fnx .tab{
  font-size:12px;line-height:1.35;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.pill,.eng,.tag,.utkpill,.miljomarke,.badge{font-size:11px;line-height:1;font-weight:600}
/* §3: headings are weight 500. The display class was 600 everywhere. */
.dsp,.brand b,.rail-top b,.login h1,.gc-h1,.nt-h1,.sp-n,.kpi .n,.fx-sum b,.mt2-h h2{font-weight:500}
/* §3: every number is tabular. body sets it, these overrode it back. */
.tank-o,.gm-row,.sp-n,.kpi .n{font-variant-numeric:tabular-nums}

/* ── §5 motion. 100 to 150ms, and only the four safe properties. ────
   The grid engine transitioned width, height and box-shadow, which §5
   names explicitly. Width and height now snap; transform still glides,
   because the reflow when a card is dragged is the one orchestrated
   moment on this surface. */
.w{transition:transform .15s var(--ease),opacity .12s var(--ease)}
.grid{transition:none}
.prio,.drop,.editbar,.threadbar,.sheet,.scrim,.app,.rail,.pop,.skriv{
  transition-duration:.15s!important}
*{transition-duration:.12s}
.w,.prio,.drop,.editbar,.threadbar,.sheet,.scrim,.app,.rail,.pop,.skriv,
.matare,.karna,.glod,.bricka,.led{transition-duration:.15s}
/* §5, global and non negotiable. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ── §6 cards. --surface fill, no border, no shadow. ────────────────
   This is where most of the visual noise went. Seven cards on the board
   used to carry a shadow and a hairline each. */
.w,.prio,.card2,.cc,.inv,.sp-c,.kpi,.rv,.mdview,.karnscen{
  background:var(--surface);box-shadow:none;border:0}
.cc{border:1px solid transparent}
.cc:hover{border-color:var(--line);background:var(--surface)}
.card2{padding:20px 22px;margin-bottom:16px;border-radius:var(--r)}
.w{border-radius:var(--r)}
.prio{border-radius:var(--r);padding:20px 22px 10px;margin-bottom:20px}
/* §2 elevation: --sh-med is the ONE floating panel per view. */
.modal .bx,.sheet,.pal .bx,.pop,.skriv,.toast,.trayfly{box-shadow:var(--sh-md)}
.modal .bx,.pal .bx,.pop,.skriv{border-radius:var(--r)}
.sheet{border-radius:var(--r) var(--r) 0 0}

/* ── §6 buttons. Pill, 44 and 36, weight 500, exactly two styles. ───
   Primary was accent blue in eleven places. §2 allows accent about once
   per screen, and §6 gives primary an ink fill. The one blue filled
   control in the system is the capture submit, which the product does
   not have. */
.btn,.pb,.mini,.fx-btn,.gc-btn,.gc-cta,.gm-reply,.gm-comp,.addw,.chip,.demochip{
  border-radius:999px;font-weight:500}
.btn{height:44px;padding:0 20px;font-size:13px}
.pb,.mini,.fx-btn,.gc-btn,.gc-cta,.gm-reply{height:36px;padding:0 16px;font-size:13px}
.btn.pri,.pb.pri,.mini.pri,.fx-btn:not(.gh),.gc-cta{
  background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.btn.pri:hover,.pb.pri:hover,.mini.pri:hover,.fx-btn:not(.gh):hover,.gc-cta:hover{
  background:#000;border-color:#000;filter:none}
.btn.sec,.pb.ghost,.mini:not(.pri):not(.dang),.gc-btn,.gm-reply{
  background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.sec:hover,.pb.ghost:hover,.mini:not(.pri):not(.dang):hover,.gc-btn:hover,.gm-reply:hover{
  background:var(--surface-3);border-color:var(--line-hover)}
/* §2: destructive confirmation is ink on --warn-soft. There is no red. */
.mini.dang{background:var(--warn-soft);color:var(--ink);border:1px solid transparent}
.mini.dang:hover{background:var(--warn-soft);border-color:var(--warn-line)}
/* §9 tap targets. §6 keeps 36px on a mouse; touch gets the floor. */
@media (pointer:coarse){
  .mini,.pb,.fx-btn,.gc-btn,.gc-cta,.gm-reply,.wt,.ib,.gc-ib,.gm-bk{min-height:44px;min-width:44px}
}

/* ── §2 colour rules. Brand colour lives in the logo mark and nowhere
   else. This retires the "each widget IS a little Gmail" chrome: the
   logos stay and do the attribution work (§7), the colour goes. It is
   the largest structural change in this pass and it is what makes the
   board read as one product instead of five. ─────────────────────── */
.gm{--gr:var(--ink);--gb:var(--ink);--gread:var(--surface);--gline:var(--line-2);
    --gink:var(--ink);--gmut:var(--ink-2);--gfield:var(--surface-2)}
.gc{--gcb:var(--ink);--gcline:var(--line-2);--gcink:var(--ink);--gcmut:var(--ink-2);
    --gchov:var(--surface-3)}
.nt{--ntink:var(--ink);--ntmut:var(--ink-2);--ntblue:var(--ink);--ntline:var(--line-2)}
.sk{--skink:var(--ink);--skmut:var(--ink-2);--skblue:var(--ink);--skline:var(--line-2)}
.fx{--fxg:var(--ink);--fxink:var(--ink);--fxmut:var(--ink-2);--fxline:var(--line-2)}
.gm,.gc,.nt,.sk,.fx{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--surface)}
/* Mark plates. A real logo keeps its own colours (that is the point of
   §7 attribution); a letter plate is our drawing, so it is ink. */
.mk:not(.logo),.src .m:not(.logo),.ch:not(.logo),.av,.sk-av,.tring .mrk:not(.logo){
  background:var(--ink)!important;color:var(--paper)!important}
.mk.line{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)}
/* Our own mark in the rail is not a letter plate, so it gets no plate: the
   eight blades stand straight on the rail and carry the ink themselves. The
   plate rule above wins with !important, so this one has to answer it. */
.rail-top .mk{background:none!important;color:var(--marke-ink)!important}
/* The compose pencil keeps Gmail's colours (see the defs in the shell).
   The plate is the tint, not white: the card is white now, so a white
   button on it stopped being a button. */
.gm-fab{background:var(--surface-2);box-shadow:none;border:1px solid var(--line)}
.gm-fab:hover{background:var(--surface-3);box-shadow:none;transform:scale(1.06)}
/* The now line is a timestamp, so §2 makes it --signal. */
.gc-now,.gc-now::before,.nowline,.nowline::before{background:var(--signal)}
/* A star is a flag, not a brand. */
.gm-row .star.on,.gc-ib.gm-star.on{color:var(--warn)}

/* ── §6 rows. 48px comfortable, separated by --divider only. ────────
   §7 density: comfortable by default. */
.row,.gm-row,.cand,.sk-m,.gc-nx,.edi,.menyrad{min-height:48px}
.gm-row{padding:12px 16px;border-bottom:1px solid var(--line-2)}
.gm-row,.gm-row.unread{background:var(--surface)}
.gm-row:hover{background:var(--surface-3);box-shadow:none}
/* Unread is carried by weight and ink, not by a second background. */
.gm-row:not(.unread) .gm-from,.gm-row:not(.unread) .gm-line{color:var(--ink-2)}
.gm-row.unread{font-weight:600}
.gm-row:has(.gm-cb.on){background:var(--accent-soft)}
.gm-date{color:var(--ink-2)}
.row:hover{background:var(--surface-3)}
.row:not([data-a]){cursor:default}
.row:not([data-a]):hover{background:transparent}

/* ── §6 tags. 11px w600 pill, text and background from one family,
   never a bare coloured dot without a label. ──────────────────────── */
.pill{border-radius:999px;padding:3px 9px}
.p-crit{color:var(--warn);background:var(--warn-soft)}
.eng{border-radius:999px;padding:3px 8px;letter-spacing:.04em}
.eng.rule{color:var(--ok);background:var(--ok-soft)}
.eng.model{color:var(--ink-2);background:var(--surface-3)}
/* The severity dot in the priority list was a bare colour with no label,
   which §6 forbids. Order already carries priority and every row has an
   action, so the dot is deleted rather than labelled (§1, §12). */
.pi .sev{display:none}
.pi{grid-template-columns:minmax(0,1fr) 300px 26px;gap:16px;padding:16px 4px;border-top:0}
.pi+.pi{border-top:1px solid var(--line-2)}
@media (max-width:900px){
  .prio .pi{grid-template-columns:minmax(0,1fr) 26px}
  .prio .pi .acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  /* Stacked, the borderless secondary reads as a caption rather than a
     control, so it gets its ghost outline back (§6 has exactly two). */
  .prio .pi .acts .mini{flex:1 1 140px;width:auto;min-height:44px}
  .prio .pi .acts .mini:not(.pri){border-color:var(--line);background:transparent}
  .prio .pi:not(.klar) .dis{grid-column:2;grid-row:1}
}

/* ── §7 the priority panel. "VIKTIGAST NU" is an eyebrow, so §2 puts
   it in --signal. It is the one signal use on the surface. ────────── */
.prio-h .lbl{color:var(--signal);font-weight:600;letter-spacing:.1em}
.prio-h .sp2{color:var(--signal)}
.prio-h .n{color:var(--ink-3)}
.pi .tx{font-size:15px;line-height:1.45}
.pi .meta{margin-top:8px;gap:10px}
.src{background:none;border:0;padding:0;color:var(--ink-2);font-size:11px;font-weight:400}
.src .m{width:13px;height:13px}
.pi .why,.pi .dis{opacity:0;transition:opacity .12s}
.pi:hover .why,.pi:hover .dis,.pi:focus-within .why,.pi:focus-within .dis{opacity:1}
@media(hover:none){.pi .why,.pi .dis{opacity:1}}
/* One button per row since 18 August, so the column sizes to the label
   instead of clipping it. The floor keeps a short label from reading as a
   smaller, lesser action than a long one on the row above. */
.pi .acts{grid-template-columns:minmax(0,1fr) auto;gap:8px}
.pi .acts .mini{height:36px;width:auto;min-width:148px;padding:0 18px}
.pi .acts .mini:not(.pri){border-color:transparent;background:none;color:var(--ink-2)}
.pi .acts .mini:not(.pri):hover{color:var(--ink);background:var(--surface-3)}

/* ── §7 the link marker: --accent-soft fill plus a tag. ──────────── */
.tlink{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:2px 8px;font-weight:600}
.tlink:hover{background:var(--accent);color:var(--paper)}
body.lens .lit-item::after{border-color:var(--accent)}
body.lens .w.lit [data-item].lit-item{background:var(--accent-soft);border-radius:var(--r-sm)}
.threadbar{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-radius:var(--r);box-shadow:var(--sh-md)}
/* §7: state the linking rule wherever links are shown. */
.trad-regel{display:block;font-size:11px;color:var(--ink-3);margin-top:3px}

/* ── §7 the approval surface. Nothing pre selected as done, no green
   before approval, undo in plain language next to the buttons. ───── */
.modal .bx{padding:24px;border-radius:var(--r)}
.act{border:1px solid var(--line-2);background:var(--surface-2);border-radius:var(--r);padding:14px}
.act .eng{display:none}
/* The toggle was --ok green while nothing had happened yet. §7 point 3
   forbids green before approval; ink says selected without saying done. */
.sw.on{background:var(--ink)}
.sw.on::after{background:var(--paper)}
.modal .gate{background:none;border:0;padding:8px 2px 0;margin:0;font-size:13px;color:var(--ink-2)}
.modal .mfoot{margin-top:14px;gap:8px}
.stepper{margin-bottom:18px}
.step.on .n2{background:var(--ink);color:var(--paper)}
.rv{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface-2)}
.rv-h,.rv-ft{background:transparent;border-color:var(--line-2)}

/* ── §4 shell. Rail 240px, content to 1400px, base unit 4px. ─────── */
@media(min-width:901px){.app{grid-template-columns:240px minmax(0,1fr)}
  .stage{padding:16px 24px 150px}}
.rail{background:var(--paper);border-right:1px solid var(--line-2)}
.bar{height:56px;background:var(--paper);border-bottom:0;
  -webkit-backdrop-filter:none;backdrop-filter:none}
/* The rail already owns these, and §12 says try deleting a neighbour. */
#btnConn,#btnLog,.usage{display:none}
.cmd{background:var(--surface);border:1px solid var(--line);border-radius:999px;height:36px}
.cmd:hover{border-color:var(--line-hover);background:var(--surface)}
/* §7: --accent is the active nav item. That is its one job in the shell. */
.nav.on{background:var(--accent-soft);color:var(--accent)}
.nav .cnt2b{background:var(--surface-3);color:var(--ink-2);font-size:11px;font-weight:600}
.nav.on .cnt2b{background:var(--paper);color:var(--accent)}
.nav .cnt2b.hot{background:var(--warn-soft);color:var(--warn)}
.apphead{background:var(--paper);border-bottom:1px solid var(--line-2)}
.appfull{background:var(--surface)}
.railfot{border-top:1px solid var(--line-2)}

/* ── §9 accessibility floor. ─────────────────────────────────────── */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
.w .rovrad{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm)}

/* ── the Gmail widget on the board: rows, search, compose. Folders,
   filters and the counter live in the deep view, one click away. §1. ── */
.w .gm-mappar,.w .gm-tools,.w .gm-cb{display:none}
.w .gm-top{padding:12px 44px 10px 14px}
.w .gm-row{grid-template-columns:auto minmax(84px,150px) 1fr auto}
.wh{height:52px;padding:0 14px 0 18px}
.wh .cnt{background:none;color:var(--ink-3);padding:0;font-weight:600;font-size:11px}
.wh .cnt.hot{background:none;color:var(--warn)}
.gc-top,.fx-top,.sk-top,.nt-tabs2{border-bottom:1px solid var(--line-2)}
.fx-doc,.fx-f div,.fx-tr,.mt2-list{border-color:var(--line-2)}
.fx-doc .hdr,.fx-sum{background:var(--surface-2)}
.mt2-list{background:var(--surface-2)}
.kv,.edi,.chain2 .ln2,.rule,.learn,.chk3,.scope,.steg,.steg2{border-color:var(--line-2)}

/* ── multi select in the inbox. A control either does something or it
   does not exist. See DECISIONS.md 18 August. ────────────────────── */
.gm-cb{width:16px;height:16px;padding:0;border:1.6px solid var(--ink-3);border-radius:var(--r-xs);
  flex:none;display:grid;place-items:center;background:none;color:transparent;opacity:1}
.gm-cb:hover{border-color:var(--ink)}
.gm-cb.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gm-cb.del{border-color:var(--ink)}
.gm-cb.del::after{content:"";width:8px;height:2px;border-radius:1px;background:var(--ink)}
.gm-bulk{display:flex;align-items:center;gap:2px}
.gm-bulk b{font-size:12px;font-weight:600;color:var(--ink);margin-right:8px;white-space:nowrap}
.gm-bk{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;color:var(--ink-2)}
.gm-bk:hover{background:var(--surface-3);color:var(--ink)}
.gm-bk.txt{width:auto;padding:0 12px;font-size:13px}

/* ── Anpassa menyn: the same grouping as the menu it edits. ───────── */
.segrad{display:flex;gap:8px;flex-wrap:wrap}
.menygrupp+.menygrupp{margin-top:16px}
.menygrupp .lbl2{padding:0 0 5px}
.menyrad{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line-2)}
.menyrad .ic{color:var(--ink-3);flex:none;display:flex}
.menyrad b{flex:1;font-weight:400;font-size:15px}

/* ── §9 no horizontal overflow at 320px. Grid children need min-width. ── */
@media(max-width:374px){
  .stage{padding:12px 12px 120px}
  .pi .acts{grid-template-columns:1fr}
  .threadbar,.editbar{left:8px;right:8px}
}
.split>*,.cgrid>*,.frm-r>*,.mt>*{min-width:0}

/* Calendar events. The colour is the customer's own calendar colour, so
   it is information and it stays, but as a 3px bar instead of a filled
   block. Seven filled chips were the largest mass of colour on the board
   and §2 keeps colour for meaning, not for area. */
.gc-ev{color:var(--ink);background:var(--surface-2);box-shadow:none;border-radius:var(--r-xs)}
.gc-ev small{color:var(--ink-2);opacity:1}
.gc-ev:hover{filter:none;background:var(--surface-3)}
.gc-ev.pale{color:var(--ink)}
/* The severity dot is hidden, so the resolved row is two columns now. */
.pi.klar{grid-template-columns:minmax(0,1fr) auto}
.pi.klar .klarm{background:var(--ok-soft);border-color:transparent}
/* Attachment chips carry the label only. */
.gm-attm{background:var(--surface-3);color:var(--ink-2);font-weight:600}

/* Engine marks: our glyph, our ink, no plate. Fills its slot like a logo
   so the widget headers stay on one baseline. */
.mk.motorglyf{background:none!important;color:var(--ink)!important;border:0}
.mk.motorglyf svg{width:100%;height:100%}
.src .m.samlify,.ch.samlify,.mk.samlify{background:none!important;color:var(--accent)!important}
.src .m.samlify svg,.ch.samlify svg,.mk.samlify svg{width:100%;height:100%}
/* Brand plates that have no real logo file: ink, never a guessed colour. */
.fx-top .tag{background:var(--surface-3);color:var(--ink-2)}
.gm-comp{background:var(--surface-3);color:var(--ink)}
/* §2: accent about once per screen. The rail's active item is that once,
   so the demo switch is neutral. */
.demochip.on{color:var(--ink-2);border-color:var(--line);background:var(--surface-3)}
/* §7 point 3: nothing green before approval. Regel and Utkast are told
   apart by the word, which is what the word is for. */
.eng.rule,.eng.model{color:var(--ink-2);background:var(--surface-3)}
.eng.live{color:var(--warn);background:var(--warn-soft)}
/* ── Utkorgen, helsidan ─────────────────────────────── */
.rev-block{padding:2px 0 14px}
.rev-block+.rev-block{border-top:1px solid var(--line-2);padding-top:12px}
.rev-rubrik{display:flex;align-items:center;gap:8px;padding:4px 8px 8px;flex-wrap:wrap}
.rev-rubrik .rev-sok{flex:0 1 260px;margin-left:auto;height:32px}
.rev-tomt{font-size:13px;padding:10px 8px 4px;line-height:1.5;max-width:56ch}
.rev-rad{position:relative}
.rev-rad.rev-hist{opacity:.78}
.rev-rad.rev-hist:hover{opacity:1}
.rev-nar{font-size:11px;color:var(--ink-3)}
.rev-nar.fel{color:var(--crit)}
.rev-bort{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid transparent;background:transparent;
  color:var(--ink-3);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .12s,background .12s}
.rev-rad:hover .rev-bort,.rev-bort:focus-visible{opacity:1}
.rev-bort:hover{background:var(--crit-soft);color:var(--crit);border-color:transparent}
@media (max-width:640px){.rev-bort{opacity:1}.rev-rubrik .rev-sok{flex-basis:100%;margin-left:0}}

/* ── Mallen for korningen i arbetsgruppen ─────────── */
.modal .tgm-bx{width:min(720px,100%)}
.tgm{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin:12px 0 4px}
.tgm-kol{display:flex;flex-direction:column;gap:6px;min-width:0}
.tgm-rub{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 2px}
.tgm-lista{display:flex;flex-wrap:wrap;gap:6px;min-height:38px;padding:6px;border:1px dashed var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.tgm-lista.med{border-style:solid;background:var(--surface)}
.tgm-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 9px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer;user-select:none;max-width:100%}
.tgm-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgm-chip i{display:grid;place-items:center;color:var(--ink-3);font-style:normal}
.tgm-chip.med{background:var(--accent-soft);border-color:transparent;color:var(--ink);cursor:grab}
.tgm-chip.med:active{cursor:grabbing}
.tgm-chip.med i{color:var(--ink-3)}
.tgm-chip:hover{border-color:var(--line-hover)}
.tgm-chip.med:hover i{color:var(--crit)}
.tgm-chip.lyft{opacity:.45}
.tgm-streck{position:fixed;width:2px;border-radius:2px;background:var(--accent);pointer-events:none;z-index:80}
.tgm-tomt{font-size:12px;color:var(--ink-3);padding:6px 4px}
.fl .tgm-text{min-height:64px;max-height:120px}
.fl .kor-med{min-height:52px;max-height:110px}
.tgm-prev{display:flex;flex-direction:column;gap:6px;min-width:0}
.tgm-bubbla{white-space:pre-wrap;font-size:13px;line-height:1.5;padding:10px 12px;border-radius:14px 14px 14px 4px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink);min-height:120px;overflow-wrap:anywhere}
.tgm-knapp{align-self:stretch;text-align:center;font-size:12.5px;padding:7px;border-radius:9px;border:1px solid var(--line);color:var(--ink-2);background:var(--surface)}
.gate .lnk,.steg .lage.lnk{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.steg .lage.lnk{font-size:11px}
.vylank{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.tgm{grid-template-columns:1fr}}

.tgm-chip.egen{border-style:dashed}
.tgm-chip.egen.med{border-style:solid}
.tgm-rader{display:flex;flex-direction:column;gap:4px}
.tgm-rad{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 8px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface)}
.tgm-rad .grow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tgm-bort{flex:none;width:22px;height:22px;border-radius:6px;border:0;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.tgm-bort:hover{background:var(--crit-soft);color:var(--crit)}
.tgm-ny{display:flex;gap:6px;margin-top:2px}
.tgm-ny input{flex:1;min-width:0;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:0 10px;font:inherit;font-size:12.5px;color:var(--ink)}
.tgm-ny input:focus{outline:0;border-color:var(--accent);background:var(--surface)}
.kor-snips{display:flex;flex-wrap:wrap;gap:6px}
.kor-snip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-3);font:inherit;font-size:12.5px;cursor:pointer;max-width:100%}
.kor-snip svg{opacity:0;width:0;transition:width .1s,opacity .1s}
.kor-snip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kor-snip.on{background:var(--accent-soft);border-color:transparent;color:var(--ink)}
.kor-snip.on svg{opacity:1;width:11px}

/* ── rullgardinen ───────────────────────────────── */
.dd{position:relative;min-width:0}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface-2);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.dd-btn:focus-visible{outline:0;border-color:var(--accent);background:var(--surface)}
.dd-btn[aria-expanded="true"]{border-color:var(--accent);background:var(--surface)}
.dd-btn .dd-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-btn svg{flex:none;color:var(--ink-3)}
.dd-lista{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:240px;overflow:auto;padding:4px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--sh-md)}
.dd-val{display:block;width:100%;padding:7px 9px;border:0;border-radius:7px;background:transparent;color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.dd-val:hover,.dd-val:focus-visible{background:var(--surface-2);outline:0}
.dd-val.on{background:var(--accent-soft);color:var(--ink)}
.nt-h .dd{display:inline-block;min-width:160px}
.nt-h .dd-btn{height:28px;font-size:12px}

.av-mallar{margin-top:18px;padding-top:12px;border-top:1px solid var(--line-2)}
.av-mallar-h{display:flex;align-items:center;gap:8px;padding:2px 8px 8px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.ml-ph{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fl .ml-text{min-height:200px;font-family:inherit;line-height:1.5}

.tgch{display:flex;flex-direction:column;gap:6px;margin:12px 0 4px}
.tgch-rad{display:grid;grid-template-columns:1.3fr 1.4fr 1fr auto auto;gap:6px;align-items:center}
.tgch-rad input{height:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:0 9px;font:inherit;font-size:12.5px;color:var(--ink);min-width:0}
.tgch-rad input:focus{outline:0;border-color:var(--accent);background:var(--surface)}
.tgch-tg{grid-column:1 / -1;font-size:11px;color:var(--ok);display:inline-flex;align-items:center;gap:4px}
@media (max-width:640px){.tgch-rad{grid-template-columns:1fr 1fr}}
/* Fyra kolumner ryms inte på en telefon. Namn och pris på första raden,
   perioden och bort-knappen på nästa: priset ska stå bredvid namnet, det
   är de två som läses ihop. */
@media (max-width:640px){.prispaket-rad{grid-template-columns:1fr 1fr}
  .prispaket-rad .mini{grid-column:2;justify-self:end}}

.av-prev{white-space:pre-wrap;font-size:12.5px;line-height:1.55;padding:12px 14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink);min-height:160px;max-height:52vh;overflow:auto;overflow-wrap:anywhere}
.tgch-rad{grid-template-columns:1.2fr 1.3fr .9fr auto auto}
.tgch-rad .tgch-anv{grid-column:1 / 4}

/* ══ arbetsytorna: katalogen och jobbets egen sida ══
   No new tokens and no new colour.

   The catalogue is a GRID of cards. `auto-fill` with `minmax(300px,1fr)`
   gives three columns on a wide screen, two on a laptop and one on a
   phone, without a single breakpoint written by hand. 300px is the
   narrowest width where a requirement row with its one line of reason
   still reads as a row and not as a paragraph.

   `min-width:0` on every child, DESIGN.md §6: without it something with
   `nowrap` inside the card blows the whole view out when the grid
   collapses. */
.yagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:16px}
.yagrid>.card2{margin-bottom:0;min-width:0;display:flex;flex-direction:column}
/* The foot at the bottom of EVERY card. A row of cards with their feet at
   different heights is what makes a grid look broken. The requirement list
   takes the slack, the foot stays put. */
.yagrid>.card2>.ykrav{flex:1 1 auto}
.yak-h{display:flex;align-items:flex-start;gap:13px}
.yak-mk{display:flex;gap:5px;flex:none;padding-top:2px}
.yak-akt{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.ykrav{margin-top:14px}
/* Märket i kravraden. `.mk` är ett rutnät och bryter radflödet; här ska
   det stå bredvid ordet, alltså inline-grid. */
.ykmk{display:inline-grid;width:14px;height:14px;vertical-align:-3px;margin-right:7px}

/* The requirement row, compact. Met: a tick and the label, nothing else.
   Missing: the same label, its one line of reason, and the WHOLE row is
   the button. Six rows with a button each is six buttons, and that is what
   turned one card into one screen. No accent anywhere: §2 allows about one
   per screen and the lit menu row has already spent it. */
.ykr{display:flex;align-items:flex-start;gap:9px;padding:6px 0;width:100%;text-align:left;
  background:none;border:0;border-top:1px solid var(--line-2);color:inherit;font:inherit}
.ykrav .ykr:first-child{border-top:0}
.ykr-m{width:16px;height:16px;border-radius:50%;flex:none;margin-top:1px;
  display:grid;place-items:center}
.ykr.klar .ykr-m{background:var(--ok);color:var(--paper)}
/* A ring, not a filled dot, and in `--ink-2` and never `--ink-3`: §9
   calls the faintest tone decorative, and this has to be read. */
.ykr.saknas .ykr-m{box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.ykr-t{min-width:0;flex:1 1 auto}
.ykr .nm{font-size:13px;font-weight:500;letter-spacing:-.01em;display:block}
.ykr.klar .nm{color:var(--ink-2)}
.ykr .vad{font-size:11px;color:var(--ink-2);line-height:1.45;display:block;margin-top:2px}
button.ykr{cursor:pointer;transition:background-color .12s var(--ease);border-radius:6px}
button.ykr:hover{background:var(--surface-3)}
button.ykr:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (pointer:coarse){button.ykr{min-height:44px;align-items:center}}

/* The foot: the count, a quiet sentence when there is one, and the
   button. */
.yak-f{display:flex;align-items:center;gap:11px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.yak-f .grow{min-width:0;flex:1 1 auto}
.yak-n{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
/* Kravtråden överst på jobbsidan, när något blivit rött efteråt. */
.yablock .ykrav{margin-top:10px}
/* Kanalens lägesrader. En mening och, när det finns något att göra, en
   knapp. Ingen bricka: raden säger redan vad som gäller. */
.yarad{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-2);line-height:1.5}
.yarad .grow{min-width:0}
.yarad .mini{flex:none}
.ya-tak-falt{width:78px;height:36px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface-2);padding:0 10px;font:inherit;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.yatak .rt{display:flex;align-items:center;gap:8px;flex:none}
/* §9: fokusringen ska SYNAS. Fälten i chaufförsregistret slog av
   konturen och bytte bara rambärg, och registret står numera på en egen
   sida och inte bara i en ruta. */
.ya-tak-falt:focus-visible,.tgch-rad input:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-color:var(--line)}
/* §9: 44 px på en pekskärm. Fälten var 32, krysset i chaufförsraden 22 och
   länkarna i Telegram-kortets steg 17. De två sista fanns redan, men de
   ritas numera på en HEL sida och inte bara i en ruta man öppnar med mus. */
@media (pointer:coarse){
  .tgch-rad input,.ya-tak-falt{min-height:44px}
  .tgm-bort{min-width:44px;min-height:44px}
  .steg .lage.lnk{min-height:44px;display:inline-flex;align-items:center}
}
.card2+.sect{padding-top:26px}
/* Chaufförsregistret på en HEL sida, inte i en 620 px ruta. Rutan tvingar
   Telegram-namnet ned på egen rad, vilket är rätt där och slöseri här:
   fyra chaufförer blev åtta rader på en sida som är 1 200 px bred.
   Rutan (`.bx`) rörs inte, bara kortet. */
@media(min-width:901px){
  .card2 .tgch-rad{grid-template-columns:1.1fr 1.2fr .85fr 1fr auto auto}
  .card2 .tgch-rad .tgch-anv{grid-column:auto}
}
/* Sidhuvudets knappar fick `flex:none` när det bara fanns en. Två stycken
   sprängde då sidan på 430 px i stället för att radbrytas, och en sida som
   rullar i sidled är §9 brutet. Krymp och radbryt, aldrig spill. */
.page-h .acts2{flex:none;flex-wrap:wrap;row-gap:8px;justify-content:flex-end}
/* En avstängd knapp ska se avstängd ut, inte grå och massiv. Samma form
   som `.mini[disabled]` redan hade. */
.btn[disabled]{opacity:.45;cursor:not-allowed}
/* §9: ingenting rullar i sidled på 320 px. Under 374 går sidhuvudets
   knappar ned på egen rad under rubriken i stället för att spilla ut.
   Fakturakontroll och Behörighetsbevis spillde redan innan det här (mätt
   till 339 px på en 320 px skärm, 21 augusti 2026); samma rad lagar dem. */
/* Sidhuvudets knappar går ned på egen rad på en telefon. Rubriken är ofta
   ETT långt ord ("Chaufförsutskick") och kan inte krympa, så alternativet
   är att knappen antingen spiller ut eller pressas till tre rader text.
   Mätt på 430 px: 443 px bred sida med knappen kvar på rubrikens rad. */
@media(max-width:640px){
  .page-h{flex-wrap:wrap;row-gap:10px}
  /* Bara knapparna byter rad. Märket ska stå kvar bredvid rubriken: en
     ensam glyf på egen rad läser som en bild utan bildtext. */
  .page-h .acts2{flex:1 0 100%;margin-left:0;justify-content:flex-end}
}
/* En rad med KNAPPAR i högerkolumnen tar en egen rad på en telefon. `.rt`
   har `flex:none` och `.grow` har `min-width:0`, så knapparna klämmer texten
   till noll i stället för att flytta på sig: mätt på 430 px försvann
   bussarnas registreringsnummer helt medan "Send a run" stod kvar. `:has`
   och inte alla rader, för en bricka ensam ryms bredvid texten och ska
   stanna där. Felet fanns i Tillgångar innan Chaufförsutskicket, och
   jobbsidan ärvde det genom att rita samma rad, vilket är hela poängen med
   att den komponerar. */
@media(max-width:640px){
  .tbl .row{flex-wrap:wrap}
  .row .rt:has(.mini){flex:1 0 100%;margin-left:0;justify-content:flex-end;flex-wrap:wrap;row-gap:6px}
  .yatak{flex-wrap:wrap}
  .yatak .grow{flex:1 0 100%}
  /* Chaufförsraden föll tillbaka till fem kolumner på en telefon: regeln
     längre ned i filen står utan mediefråga och vann över den som fanns.
     Två kolumner, och Telegram-namnet över hela bredden. */
  .tgch-rad{grid-template-columns:1fr 1fr}
  .tgch-rad .tgch-anv{grid-column:1 / -1}
}
/* 430 px: knappen får sin egen rad under rubriken i stället för att
   klämma meningen till en remsa. Mätt i webbläsaren, inte gissat. */
@media (max-width:640px){
  .yak-h{flex-wrap:wrap}
  .yak-akt{width:100%;justify-content:flex-start}
  .yak-akt .btn{flex:1 1 auto}
  .yarad{flex-wrap:wrap;gap:8px}
  .yatak .rt{width:100%;justify-content:flex-end}
}
/* ══ jobbsidans kalender ══════════════════════════════════════════
   Rutnätet är byggt för att fylla en hel vy (`.gc` har height:100%). På en
   jobbsida är det ett avsnitt bland sex, alltså behöver det en ram med en
   bestämd höjd att fylla.

   Höjden är MÄTT och inte gissad: 57 px topprad plus 60 px dagrubriker
   plus fjorton timrader à 34 px är 593, alltså rymmer 596 hela dygnet
   06:00 till 20:00 utan att rutnätet får en egen rullning inuti en sida
   som redan rullar. Samma höjd i båda vyerna med flit: ett avsnitt som
   byter höjd när man trycker på Månad hoppar under fingret. */
.yakalk{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);
  overflow:hidden;margin-bottom:16px}
.yakal{height:596px}
/* ── the job page's board ──────────────────────────────────────────
   The same engine as the home screen, so the same measurements: the cards
   are absolutely positioned and the height is written by JS. The class is
   deliberately NOT `.grid`: `body.deep .grid` is `display:none`, which is
   how the home screen's board gets out of the way when a page opens. If
   the two shared a class, every job page would be blank. */
.yabrade{position:relative;transition:height .5s var(--ease);margin-top:6px}
.yabrade.nofx,.yabrade.nofx .w{transition:none}
/* A job box is a card, so it gets a card's air rather than the home
   board's tighter eleven pixels. `flush` is the calendar, which has its
   own. */
.w[data-w^="ya."] > .wb{padding:0 16px 16px}
.w[data-w^="ya."] > .wb.flush{padding:0}
.w[data-w^="ya."] .lead{margin-bottom:12px}
.w[data-w^="ya."] .card2{margin-bottom:0;padding:0;background:none;box-shadow:none}
/* A row that carries buttons puts them on a line of their own inside a job
   box. The reason is measured: the row in The buses is a name plus two
   buttons, and in a box four columns wide the buttons took the full width
   and the bus's NAME disappeared completely. Same rule as the phone one
   further up, and it applies here at every width, because a box can be
   dragged to any width at all and there is no breakpoint to hang it on. */
.w[data-w^="ya."] .row{flex-wrap:wrap}
.w[data-w^="ya."] .row .rt:has(.mini){flex:1 0 100%;margin-left:0;
  justify-content:flex-end;flex-wrap:wrap;row-gap:6px}
/* The calendar fills its box instead of standing on 596 fixed pixels. The
   day SCROLLS inside the grid and is never squeezed (`--gcrh` is 34 px,
   written on the grid element itself by `calDayGrid`), so a small box shows
   fewer hours but never lies about how long one of them is. That is the
   whole reason the floor is three rows and not one: measured at 5x3, the
   grid is still 24 rows of 34 px from 00:00 to 23:00. */
.w .yakalk{background:none;border-radius:0;box-shadow:none;margin-bottom:0;
  display:flex;flex-direction:column;height:100%}
.w .yakal{height:auto;flex:1 1 auto;min-height:0}
.w .yakalf{padding:9px 14px}
.yakal .gc{background:var(--surface)}
/* Raden under rutnätet. Den finns för att ingen ska undra vart resten av
   veckan tog vägen, och den bär vägen dit. */
.yakalf{display:flex;align-items:center;gap:12px;padding:11px 16px;
  border-top:1px solid var(--line-2);background:var(--surface-2);
  font-size:13px;color:var(--ink-2);line-height:1.5;flex-wrap:wrap}
.yakalf .grow{min-width:0;flex:1 1 12ch}
.yakalf .mini{flex:none}
/* LÄSLÄGE. En tom timme är annars en knapp som skapar en post, och en
   pekare och ett plustecken lovar då något den här ytan inte gör.
   Kalendern i menyn är den enda som skapar poster. */
.gc-hr.las{cursor:default}
.gc-hr.las:hover{background:none}
.gc-hr.las:hover::after{content:none}
.gc-ev.las,.gc-hdev.las,.gm2-e.las,.gm2-mer.las{cursor:default}
.gc-ev.las:hover{filter:none}
.gm2-e.las:hover{background:none}
.gm2-c.las{cursor:default}
.gm2-c.las:hover{background:none}
/* 640 px: veckan ritas som en månad, se `yaKalRit` i 05d-vyer.js. Här står
   bara höjden. Månaden har sex rader och inga timrader, och 470 px ger en
   rad på 72 px, alltså plats för dagsiffran och två poster. Mätt. */
@media(max-width:640px){
  .yakal{height:470px}
  .yakal .gm2-c .n{padding:2px 0 1px}
  /* En cell är 57 px på 430 och 45 på 320, och klockslaget ritades som
     "19:..." respektive "1...". Ett tecken plus tre punkter säger
     ingenting alls, så texten går bort och pricken står kvar centrerad
     under datumet, som varje månadsvy på en telefon gör det. Färgen är
     kvar och bär fortfarande om körningen är tagen. Hela meningen finns i
     `title`, och vägen till den står i raden under rutnätet. */
  .yakal .gm2-e span{display:none}
  .yakal .gm2-e{justify-content:center;padding:1px 0}
  .yakal .gm2-e i{width:8px;height:8px}
  .yakal .gm2-mer{text-align:center}
}

/* ══ kopplingsrutorna, längst ned ═════════════════════════════════
   Samma rutnätsidiom som katalogen, en aning smalare: rutan bär fyra fakta
   och katalogkortet bär sex rader och en knapp. `min-width:0` på varje
   barn, DESIGN.md §6, annars spränger synkraden vyn när rutnätet faller
   ihop. */
.ykop{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:11px;margin-bottom:16px}
/* Toppställt, inte centrerat. Synkraden är två rader lång i en smal ruta,
   och med centrering hamnade brickan mitt i meningen i stället för bredvid
   namnet. Mätt på 1440 px 22 augusti. */
.ykb{display:flex;align-items:flex-start;gap:11px;min-width:0;width:100%;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);transition:background-color .12s var(--ease),border-color .12s var(--ease)}
.ykb:hover{background:var(--surface-3);border-color:var(--line-hover)}
.ykb:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ykb-mk{flex:none;display:grid}
.ykb-mk .mk{width:28px;height:28px;border-radius:8px;display:grid;place-items:center}
.ykb-t{min-width:0;flex:1 1 auto}
/* Namnet BRYTS, det klipps inte. "Google Kalender" mätte 102 px i en
   kolumn som gav 100, och kortet sa "Google Kalen...". Ett namn man inte
   kan läsa ut är sämre än ett namn på två rader. */
.ykb-t .nm{display:block;font-size:13px;font-weight:500;letter-spacing:-.01em;
  line-height:1.35;overflow-wrap:anywhere}
/* Synkraden är två rader lång och klipps därefter. Den är `--ink-2` och
   inte den svagaste tonen: §9 kallar den dekorativ, och när något synkade
   är något man läser. */
.ykb-t .st{display:block;font-size:11px;color:var(--ink-2);line-height:1.4;
  margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ykb-l{flex:none;margin-top:1px}
.ykb-av{color:var(--ink-2);background:var(--surface-3)}
/* Kortet som rutan tog en till, lyft en gång. §5: en rörelse hör hemma i
   CSS, och `prefers-reduced-motion` stänger av den globalt utan att någon
   behöver komma ihåg det. */
@keyframes ylyft{0%{box-shadow:0 0 0 0 var(--accent-soft)}
  45%{box-shadow:0 0 0 6px var(--accent-soft)}
  100%{box-shadow:0 0 0 0 transparent}}
.cc.ylyft{animation:ylyft .9s var(--ease)}
/* §9: 44 px på en pekskärm. Rutan är 53 px hög på en mus och klarar det
   ändå, men raden skrivs ut så att den inte tappas om paddingen krymper. */
@media (pointer:coarse){.ykb{min-height:44px}}