/* The look of the interface: ONE palette and TWO typefaces (R37, R38), in the measurements of
   artifacts/mockup-chatt-och-rollspel.html — the same 258 px sidebar, the same 58 px top row, the
   same cards, chips and bubbles. What is added here and not in the mock-up is the sign-in page,
   built in the same visual language because the mock-up does not draw one. No text lives in this
   file.

   EVERY COLOUR OF THE INTERFACE IS WRITTEN HERE AND NOWHERE ELSE. The rules below the tokens ask
   for a colour by what it IS — a surface, a border, the accent — so the two modes are two lists of
   values and not two stylesheets, and a new view that uses the tokens is right in both modes
   without a line of its own. --color-* and --font-* are the names to use; the short names after
   them (--bg, --panel, --line …) are the mock-up's own and are kept, pointing at the very same
   tokens, so the hundreds of rules already written against them stand.

   ONE ACCENT: the wine red of the logotype, #7B2D2A, read out of the logotype itself
   (artifacts/LearningLeader_logo_oxblood_black.png), and it is the SAME in both modes. There is no
   blue, no green and no amber anywhere in the interface any more. What used to be told apart by
   hue is now told apart by something that survives one accent: the two knowledge levels by the
   accent against a quiet chip, the three conversation styles by the strength of their tone and by
   the shape of their symbol, the difficulty of a counterpart by its stars and the word beside
   them.

   TWO USES OF THE ACCENT, and they are not the same token. --color-accent is a FILL, with
   --color-accent-contrast written on it (the LL mark, the primary button, the chosen chip, a high
   level); --color-accent-text is the accent AS INK — text, a symbol, a border, a focus ring, a
   7 px dot — and in dark mode that is a lighter step of the same wine red, because #7B2D2A on a
   near-black page holds 2:1 and nothing a person has to read or find may sit that close to its
   background. Both are the logotype's one tone; only the ink is lifted far enough to be seen.
   Every pair below is measured: ink on its own background keeps at least 4.5:1, every mark at
   least 3:1. */
:root{
  /* The two typefaces, declared in static/fonts/fonts.css and served by this app itself (R38).
     Lora is the serif voice — headings, scenario titles, the criterion names of the assessment and
     the answer bubbles — and Inter is the interface — buttons, labels, menus, everything the body
     of the page inherits. The families after them are what the browser draws while a file is on
     its way, and for a glyph outside the latin subset. */
  --font-serif:'Lora',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- light mode: a warm bone-white page, white surfaces, hairline borders (R37) */
  --color-bg:#FAF8F5;
  --color-surface:#FFFFFF;
  /* The second surface, a step quieter than the first: a hover, the person's own bubble, the
     track of a progress bar — never a panel of its own. */
  --color-surface-2:#F2EEE8;
  --color-border:#E7E2DB;
  --color-text:#1A1613;
  --color-muted:#6B6259;
  --color-accent:#7B2D2A;
  --color-accent-contrast:#FFFFFF;
  --color-accent-text:#7B2D2A;
  /* The accent at its very weakest: a wash behind something that is marked, never behind text
     that has to carry on reading as body text. */
  --color-accent-soft:#F6EBE9;
  /* THE GREY OF THE LEFT MENU'S ICONS (R58), its own token and not the muted text's: the line
     icons are meant to REST against the page, a step quieter than a word beside them, so the tone
     is read off the mock-up (artifacts/mockup-ikoner-och-stilrad.svg) — this warm grey against the
     bone-white page, a lighter one against the near-black in dark mode. It is a MARK and not text:
     it keeps more than 3:1 against both surfaces in both modes, measured, and the name of the post
     is always there in words beside it or in its label. The accent is what a chosen or pointed-at
     post gets, and that is --color-accent-text, not a token of its own. */
  --color-icon:#6B6560;
  /* A fault is a state and not an accent: one step brighter and more scarlet than the logotype's
     wine, so a refused field is not read as a chosen one. */
  --color-danger:#A3211B;
  /* THE CREDIT METER'S THREE TONES (R210, chat/CITATIONS_CONTRACT.md §6): the fill follows what
     has been used and not the branding's palette — green 0-74 %, orange 75-89 %, red 90-100 %.
     Each keeps at least 3:1 against the menu's --color-bg and --color-surface in its mode. */
  --credit-ok:#2E7D32;
  --credit-notice:#B85C00;
  --credit-warning:#B3261E;
  /* THE FIVE STATUSES OF AN ACCOUNT (R105): each its own pair, a tint and an ink, and the status's
     name is always written in the badge too — the colour never stands alone. Every ink keeps more
     than 4.5:1 against its tint (WCAG AA), in both modes. */
  /* Inkognitomarkeringen (R399): text mot bakgrund 12,6:1 i ljust läge. */
  --incognito-bg:#2F3542;--incognito-ink:#FFFFFF;--incognito-line:#2F3542;
  --status-invited:#E4ECF7;--status-invited-ink:#1D3F6E;
  --status-active:#E1F0E2;--status-active-ink:#1E5426;
  --status-deactivated:#ECE8E2;--status-deactivated-ink:#4A433C;
  --status-deleting:#FBEAD5;--status-deleting-ink:#713A05;
  --status-pending-payment:#FFF1BF;--status-pending-payment-ink:#5A4300;
  --status-deleted:#F6E1DF;--status-deleted-ink:#7B2420;
  --color-scrim:rgba(26,22,19,.52);
  --color-shadow:rgba(26,22,19,.16);
  /* The three conversation styles as a tone on the Companion's own bubble (R22): the accent's own
     hue at three strengths — the faintest for Kort, the strongest for Utmanande — with a border a
     step firmer. They are deliberately this weak: the body text (--color-text), the numbered
     references (--color-accent-text) and the source list (--color-muted) all keep more than 4.5:1
     against every one of them, measured, in both modes, and no tone is more than 1.3:1 from the
     panel it sits on. */
  --bub-brief:#FBF6F5;--bub-brief-line:#EFE1DF;
  --bub-thoughtful:#F8EFEE;--bub-thoughtful-line:#E9D3D0;
  --bub-challenging:#F4E7E5;--bub-challenging-line:#E2C6C2;
  /* The symbol on a style's card in the administration view (R31): the accent's own hue at three
     steps, in the same order as the bubble tones above — Kort the softest, Utmanande the deepest
     — so the three cards are still told apart at a glance without a second colour entering the
     interface. Each keeps more than 4.5:1 against the panel in both modes, measured, because a
     20 px drawing has to be read and not guessed at. */
  --style-brief:#96514C;
  --style-thoughtful:#7B2D2A;
  --style-challenging:#5A1F1D;
  /* The chili of Utmanande (R59, artifacts/mockup-chiliikon-utmanande.svg): the one filled and
     coloured style symbol — its body in the accent, a green stalk and a light streak of shine —
     so that it stands out in the style row and after COMPANION. In dark mode the body is a
     lighter shade of the accent, so it is seen against the near-black. writeBrandTokens writes
     the same three from the active profile's accent. */
  --chili-body:#7B2D2A;
  --chili-stalk:#5E7A4F;
  --chili-shine:rgba(255,255,255,.55);
  /* The four levels of the assessment (R78): fixed MEANING colours, red 1, orange 2, yellow 3,
     green 4. They are not part of the branding — writeBrandTokens never writes them, so switching
     profile leaves them as they are. -ink is the digit on the fill (at least 4.5:1, measured),
     -line the pill's edge, darker on the yellow so the pill is seen on a white card. */
  --level-1:#C62828;--level-1-ink:#FFFFFF;--level-1-line:#C62828;
  --level-2:#E8711A;--level-2-ink:#1A1310;--level-2-line:#C25A0E;
  --level-3:#F2C230;--level-3-ink:#1A1310;--level-3-line:#A88412;
  --level-4:#2E7D32;--level-4-ink:#FFFFFF;--level-4-line:#2E7D32;
  /* The FIVE levels of the assessment (R78, contract assessment-5-levels §6.4), light mode: pink 1,
     yellow 2, light green 3, medium green 4, dark green 5, each pill FILLED. -ink is the digit on
     the fill, WCAG 2.1 relative-luminance contrast (AA needs at least 4.5:1):
       1 #F8A5C2 / #1A1310  9.74:1      2 #F5D04A / #1A1310 12.24:1     3 #A8DBA8 / #1A1310 11.68:1
       4 #4CAF50 / #1A1310  6.60:1      5 #1B5E20 / #FFFFFF  7.87:1
     -line is the pill's edge, darker than the light fills so the pill is seen on a white card.
     Scale 4 (assessments made before the five levels, R393) keeps the old four colours above:
       1 #C62828 / #FFFFFF  5.62:1      2 #E8711A / #1A1310  5.95:1
       3 #F2C230 / #1A1310 10.95:1      4 #2E7D32 / #FFFFFF  5.13:1 */
  --rp5-1:#F8A5C2;--rp5-1-ink:#1A1310;--rp5-1-line:#D6337A;
  --rp5-2:#F5D04A;--rp5-2-ink:#1A1310;--rp5-2-line:#B8920F;
  --rp5-3:#A8DBA8;--rp5-3-ink:#1A1310;--rp5-3-line:#4E9A51;
  --rp5-4:#4CAF50;--rp5-4-ink:#1A1310;--rp5-4-line:#2E7D32;
  --rp5-5:#1B5E20;--rp5-5-ink:#FFFFFF;--rp5-5-line:#1B5E20;
  /* Gold stars on the user's scenario cards (R390, R418; docs/gold-stars-contract.md §6). A darker
     amber than the scale's yellow, so the star itself is seen on a white card: fill #B97A00 on
     #FFFFFF 3.6:1, edge #7A4E00 on #FFFFFF 7.9:1 (WCAG 1.4.11 asks 3:1 for a graphic). */
  --gold-star:#B97A00;--gold-star-line:#7A4E00;
  /* The green frame of a completed card (R423; docs/gold-stars-contract.md §6): #2E7D32 on the
     white card #FFFFFF 5.1:1 (WCAG 1.4.11 asks 3:1). */
  --card-completed:#2E7D32;

  /* ---- the mock-up's own short names, pointing at the tokens above */
  --bg:var(--color-bg);
  --panel:var(--color-surface);
  --panel2:var(--color-surface-2);
  --line:var(--color-border);
  --text:var(--color-text);
  --dim:var(--color-muted);
  --icon:var(--color-icon);
  --accent:var(--color-accent);
  --accent-ink:var(--color-accent-contrast);
  --bad:var(--color-danger);

  /* THE WIDTH OF THE LEFT MENU (R35), in one place: the mock-up's 258 px unfolded and a narrow
     64 px column folded. The menu takes its width from here and the content area is what is left
     of the row (main is flex:1), so the two always add up to the window and nothing has to be
     measured twice. The folded value is written on the page by the picker at the top of the menu
     (data-sidebar on <html>, the rule below), and before the first paint by the little script in
     the <head> of index.html, so a folded menu never flashes wide. */
  --sidebar-w:var(--sidebar-open-w);
  /* The unfolded width a person can drag between 220 and 420 px (R79): written on <html> as an
     inline --sidebar-open-w by the grip at the menu's right edge, and before the first paint by
     the script in index.html's <head>; the folded 64 px below still wins over it. */
  --sidebar-open-w:258px;

  /* Form fields, scroll bars and the browser's own furniture follow the mode too. */
  color-scheme:light;
}

/* The menu folded: the one value that changes, and every rule that draws the narrow column is
   under the same attribute further down (search for data-sidebar). */
html[data-sidebar="collapsed"]{--sidebar-w:64px;}

/* ---- dark mode: near-black page, panels a step up, borders a step up again (R37).
   The same list twice, on purpose and not by mistake: once for the person who has CHOSEN dark
   (html[data-theme="dark"], written by the picker in the top row and kept in localStorage), and
   once for the person who has chosen nothing and whose computer or telephone says dark
   (html:not([data-theme]), which is the state the app starts in). A chosen light mode therefore
   stays light on a dark machine: html[data-theme="light"] is matched by neither rule and keeps the
   values of :root. Change one list and change the other. */
html[data-theme="dark"]{
  --color-bg:#141312;
  --color-surface:#1C1A19;
  --color-surface-2:#24211F;
  --color-border:#2B2825;
  --color-text:#F2EEE9;
  --color-muted:#A39B91;
  --color-accent:#7B2D2A;
  --color-accent-contrast:#FFFFFF;
  --color-accent-text:#D9ADA7;
  --color-accent-soft:#241A19;
  --color-icon:#9A938C;
  --color-danger:#FF8E82;
  --credit-ok:#6CC17A;
  --credit-notice:#F0943C;
  --credit-warning:#FF8E82;
  --incognito-bg:#E6E9F0;--incognito-ink:#1A1D24;--incognito-line:#E6E9F0;
  --status-invited:#1C2938;--status-invited-ink:#A9C8F0;
  --status-active:#1B2D1E;--status-active-ink:#9ED7A4;
  --status-deactivated:#2A2725;--status-deactivated-ink:#CFC7BE;
  --status-deleting:#33250F;--status-deleting-ink:#F2C185;
  --status-pending-payment:#332A08;--status-pending-payment-ink:#F2D77A;
  --status-deleted:#381D1B;--status-deleted-ink:#F4A9A1;
  --color-scrim:rgba(8,7,7,.66);
  --color-shadow:rgba(0,0,0,.45);
  --bub-brief:#211C1B;--bub-brief-line:#352C2A;
  --bub-thoughtful:#2A2120;--bub-thoughtful-line:#45332F;
  --bub-challenging:#352624;--bub-challenging-line:#533A36;
  --style-brief:#F0CEC9;
  --style-thoughtful:#D9ADA7;
  --style-challenging:#BE857E;
  --chili-body:#A63D39;--chili-stalk:#7E9C6E;--chili-shine:rgba(255,255,255,.45);
  --level-1:#E5645C;--level-1-ink:#1A1310;--level-1-line:#E5645C;
  --level-2:#F0954A;--level-2-ink:#1A1310;--level-2-line:#F0954A;
  --level-3:#EDC94A;--level-3-ink:#1A1310;--level-3-line:#EDC94A;
  --level-4:#5FB865;--level-4-ink:#1A1310;--level-4-line:#5FB865;
  /* Five levels, dark mode (R78): a little softer so they do not glare on the near-black.
       1 #E58FB0 / #1A1310  7.77:1      2 #E3C24E / #1A1310 10.57:1     3 #94CC97 / #1A1310  9.91:1
       4 #4F9F55 / #1A1310  5.61:1      5 #2E7D32 / #FFFFFF  5.13:1
     Level 5's edge is the lighter green, so the dark pill is seen on the dark card. Scale 4:
       1 #E5645C / #1A1310  5.51:1      2 #F0954A / #1A1310  7.95:1
       3 #EDC94A / #1A1310 11.41:1      4 #5FB865 / #1A1310  7.45:1 */
  --rp5-1:#E58FB0;--rp5-1-ink:#1A1310;--rp5-1-line:#E58FB0;
  --rp5-2:#E3C24E;--rp5-2-ink:#1A1310;--rp5-2-line:#E3C24E;
  --rp5-3:#94CC97;--rp5-3-ink:#1A1310;--rp5-3-line:#94CC97;
  --rp5-4:#4F9F55;--rp5-4-ink:#1A1310;--rp5-4-line:#4F9F55;
  --rp5-5:#2E7D32;--rp5-5-ink:#FFFFFF;--rp5-5-line:#5FB865;
  /* Gold stars, dark mode: #F2C230 on the dark card #1C1A19 10.3:1, edge a lighter gold. */
  --gold-star:#F2C230;--gold-star-line:#FFE08A;
  /* Completed card, dark mode: the lighter green #5FB865 on the dark card #1C1A19 7.1:1. */
  --card-completed:#5FB865;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme]){
    --color-bg:#141312;
    --color-surface:#1C1A19;
    --color-surface-2:#24211F;
    --color-border:#2B2825;
    --color-text:#F2EEE9;
    --color-muted:#A39B91;
    --color-accent:#7B2D2A;
    --color-accent-contrast:#FFFFFF;
    --color-accent-text:#D9ADA7;
    --color-accent-soft:#241A19;
    --color-icon:#9A938C;
    --color-danger:#FF8E82;
    --credit-ok:#6CC17A;
    --credit-notice:#F0943C;
    --credit-warning:#FF8E82;
    --incognito-bg:#E6E9F0;--incognito-ink:#1A1D24;--incognito-line:#E6E9F0;
    --status-invited:#1C2938;--status-invited-ink:#A9C8F0;
    --status-active:#1B2D1E;--status-active-ink:#9ED7A4;
    --status-deactivated:#2A2725;--status-deactivated-ink:#CFC7BE;
    --status-deleting:#33250F;--status-deleting-ink:#F2C185;
    --status-pending-payment:#332A08;--status-pending-payment-ink:#F2D77A;
    --status-deleted:#381D1B;--status-deleted-ink:#F4A9A1;
    --color-scrim:rgba(8,7,7,.66);
    --color-shadow:rgba(0,0,0,.45);
    --bub-brief:#211C1B;--bub-brief-line:#352C2A;
    --bub-thoughtful:#2A2120;--bub-thoughtful-line:#45332F;
    --bub-challenging:#352624;--bub-challenging-line:#533A36;
    --style-brief:#F0CEC9;
    --style-thoughtful:#D9ADA7;
    --style-challenging:#BE857E;
  --chili-body:#A63D39;--chili-stalk:#7E9C6E;--chili-shine:rgba(255,255,255,.45);
  --level-1:#E5645C;--level-1-ink:#1A1310;--level-1-line:#E5645C;
  --level-2:#F0954A;--level-2-ink:#1A1310;--level-2-line:#F0954A;
  --level-3:#EDC94A;--level-3-ink:#1A1310;--level-3-line:#EDC94A;
  --level-4:#5FB865;--level-4-ink:#1A1310;--level-4-line:#5FB865;
  /* Five levels, dark mode (R78): a little softer so they do not glare on the near-black.
       1 #E58FB0 / #1A1310  7.77:1      2 #E3C24E / #1A1310 10.57:1     3 #94CC97 / #1A1310  9.91:1
       4 #4F9F55 / #1A1310  5.61:1      5 #2E7D32 / #FFFFFF  5.13:1
     Level 5's edge is the lighter green, so the dark pill is seen on the dark card. Scale 4:
       1 #E5645C / #1A1310  5.51:1      2 #F0954A / #1A1310  7.95:1
       3 #EDC94A / #1A1310 11.41:1      4 #5FB865 / #1A1310  7.45:1 */
  --rp5-1:#E58FB0;--rp5-1-ink:#1A1310;--rp5-1-line:#E58FB0;
  --rp5-2:#E3C24E;--rp5-2-ink:#1A1310;--rp5-2-line:#E3C24E;
  --rp5-3:#94CC97;--rp5-3-ink:#1A1310;--rp5-3-line:#94CC97;
  --rp5-4:#4F9F55;--rp5-4-ink:#1A1310;--rp5-4-line:#4F9F55;
  --rp5-5:#2E7D32;--rp5-5-ink:#FFFFFF;--rp5-5-line:#5FB865;
  /* Gold stars, dark mode: #F2C230 on the dark card #1C1A19 10.3:1, edge a lighter gold. */
  --gold-star:#F2C230;--gold-star-line:#FFE08A;
  /* Completed card, dark mode: the lighter green #5FB865 on the dark card #1C1A19 7.1:1. */
  --card-completed:#5FB865;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* The page itself carries the background too, so the colour behind an elastic scroll at the top
   or the bottom of the window is the mode's and not the browser's white. */
html{background:var(--color-bg)}
body{background:var(--bg);color:var(--text);font:15px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none !important}

/* ---------------------------------------------------------------- the two voices (R38)
   The interface is Inter: it is what body hands down, and every button, field, chip, tab, label
   and menu in this file says font:inherit, so they are all Inter without a rule of their own.
   Lora is asked for by name, and only where the person's specification puts it: headings,
   scenario titles, the criterion names of the assessment and the chat's answer bubbles. Three
   weights are declared (400, 500, 600 — see fonts.css) and nothing else: the 620 and 650 the
   mock-up's own rules ask for in places are matched to the drawn 600, so no weight in this
   interface is one the browser thickened by itself. */
h1,h2,h3,h4,h5,
.rptitle,            /* a scenario in the administrator's catalogue */
#personaTitle,       /* the scenario a counterpart is being chosen for */
.pname,              /* the counterpart's own name */
.crithead .t,        /* the criterion name in the assessment (R8) */
.crittitle,          /* the same criterion in the editor (R25) */
.stylename,
.kbtitle{font-family:var(--font-serif)}
h1,h2,h3,h4,h5{font-weight:600}
/* The chat's answers, and the counterpart's lines in the role-play, which are the same kind of
   reading: the bubble's own text is Lora. The person's own bubbles (.turn.mine) stay in the
   interface's Inter, so the two sides of a conversation are told apart by the voice as well as by
   the side they stand on. What is NOT reading matter inside a bubble — the source list under the
   answer, the waiting line, the state of an answer that was stopped — is interface, and says so. */
.turn:not(.mine) .bub{font-family:var(--font-serif)}
.turn:not(.mine) .bub .sources,
.turn:not(.mine) .bub .writing,
.turn:not(.mine) .bub .astate,
.turn:not(.mine) .bub .cite{font-family:var(--font-sans)}

/* ---------------------------------------------------------------- frame */
/* HELA RAMENS HÖJD, OCH DÄRMED SAMTALSYTANS (R51). Två värden, och webbläsaren tar det sista den
   förstår: 100vh för en gammal webbläsare och 100dvh för en modern — dvh krymper när telefonens
   adressfält fälls in, vilket vh inte gör, så nederkanten är verkligen nederkanten. När mobilens
   tangentbord visas räcker inte heller dvh: då sätter app.js höjden rakt på elementet ur
   window.visualViewport (den enda som vet hur mycket av rutan tangentbordet tar) och tar bort den
   igen när tangentbordet fälls ned. Fotområdet med meddelandefältet ligger alltid i nederkanten av
   DEN höjden, så fältet står kvar över tangentbordet i stället för att hamna under det. */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden}
/* sidebar */
/* The width is the one variable at the top of this file (R35), so the menu and the content area
   beside it move together; the transition is what makes a fold a slide rather than a jump. */
.side{--ll-menu-bg:var(--panel);position:relative;width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--ll-menu-bg);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;transition:width .16s ease,padding .16s ease}
@media (prefers-reduced-motion:reduce){.side{transition:none}}
/* The grip on the unfolded menu's right edge (R79): a strip astride the border that turns the
   pointer into col-resize, with a thin line in the accent while it is held or hovered. On a touch
   screen (pointer:coarse) the strip is wider so a finger hits it. While a drag is going on the
   slide is turned off, so the menu and the content area beside it follow the hand step by step,
   and no text is selected. The folded menu has no grip at all. */
.sidegrip{position:absolute;top:0;bottom:0;inset-inline-end:-5px;width:10px;cursor:col-resize;touch-action:none;z-index:5;background:transparent}
.sidegrip::after{content:'';position:absolute;top:0;bottom:0;inset-inline-start:50%;width:2px;margin-inline-start:-1px;background:transparent;transition:background .12s ease}
.sidegrip:hover::after,.sidegrip:focus-visible::after,html.sideresizing .sidegrip::after{background:var(--color-accent-text, var(--accent, currentColor))}
.sidegrip:focus-visible{outline:none}
@media (pointer:coarse){.sidegrip{inset-inline-end:-14px;width:28px}}
html[data-sidebar="collapsed"] .sidegrip{display:none}
html.sideresizing .side{transition:none}
html.sideresizing,html.sideresizing *{cursor:col-resize !important;user-select:none;-webkit-user-select:none}
/* The brand area: the logotype (R36) with the one word under it that is not part of the name.
   A column, so the lockup stands where the product's name stood and Companion under it. */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:4px 6px 18px}
.bsub{font-size:12px;color:var(--dim)}
/* In the left menu the logotype stands alone on its row: the word "Companion" beside it is gone
   in every profile, Learning Leader's own too (bug 2026-10-22; it stood to the right of the
   logotype since 2026-10-19). The folded menu below keeps only the mark. */
.side .brand{flex-direction:row;align-items:center;gap:0}
/* The logotype in the unfolded menu fills the room its row has (bugs 2026-10-21 and 2026-10-22).
   The image's box is the whole width of the row and --side-logo-max high, which is the header
   band's height less 3 px of air above and below; object-fit:contain draws the file inside it with
   its own proportions and never cuts it, so whichever of the two runs out first decides the size:
   the Learning Leader wordmark (440:153) is as high as the band lets it be, a long customer logo
   as wide as the row. */
/* The brand row IS the menu's part of the header band (bug 2026-10-21: it stood below the menu's
   18 px padding and reached under the header's line). It starts at the top of the menu and is as
   high as .top above its line (58 px less the 1 px border), so the logotype is centred on the same
   middle as the top row to the right and its 44 px never reach the line. */
.side .brand{--side-logo-max:51px;height:57px;margin:-18px 0 8px;padding:0 6px}
.side .brandlogo{flex:1 1 auto;min-width:0}
.side .brandlogo img{height:var(--side-logo-max);width:100%;max-width:100%;object-fit:contain;object-position:left center}
/* The word belongs to Learning Leader's own standard profile only: with any other profile active
   the server (and app.js on a switch) puts data-brand="custom" on <html> (Rasmus Lind, 2026-10-20). */
html[data-brand="custom"] .brand .bsub{display:none}

/* ------------------------------------------------------------- the logotype component (R36)

   ONE component, used wherever the product's name is shown — the left menu's brand area and the
   sign-in page's header, and anywhere else it is wanted: a <span class="brandlogo"> with the
   three images in it and exactly one of them drawn. WHICH one is CSS's answer alone, so the swap
   happens the moment the mode is switched: no reload, no JavaScript, and nothing that has to run
   before the first paint. The alt text is "Learning Leader" on all three — a name, the same in
   both languages, so it stands in the markup and not in the catalogue.

     data-logo="wordmark"   the whole lockup: black with the wine-red L against a light surface,
                            white against a dark one. The two files are the same shape to the
                            pixel, so nothing in the layout moves when the mode changes.
     data-logo="mark"       the wine-red L alone, for a narrow place.

   The MODE is the one from R37 and nothing of this component's own: html[data-theme] when a
   person has chosen, prefers-color-scheme when nobody has. The FOLDED left menu is the state
   from R35, html[data-sidebar="collapsed"], which turns the menu's wordmark into the L without
   the markup changing.

   --logo-h is the size: the height of the image, which the width follows (the files keep their
   own proportions). Set it per place — a rule here, or inline on the element. */
.brandlogo{display:inline-flex;align-items:center;--logo-h:28px}
.brandlogo img{display:none;height:var(--logo-h);width:auto}
.brandlogo[data-logo="wordmark"] .logo-light{display:block}
html[data-theme="dark"] .brandlogo[data-logo="wordmark"] .logo-light{display:none}
html[data-theme="dark"] .brandlogo[data-logo="wordmark"] .logo-dark{display:block}
@media (prefers-color-scheme:dark){
  html:not([data-theme]) .brandlogo[data-logo="wordmark"] .logo-light{display:none}
  html:not([data-theme]) .brandlogo[data-logo="wordmark"] .logo-dark{display:block}
}
/* The narrow mark (R36): its dark version in light mode, its light one in dark mode (app.js puts
   the dark version in both images when a profile has no light one). */
.brandlogo[data-logo="mark"] .logo-mark{display:block}
html[data-theme="dark"] .brandlogo[data-logo="mark"] .logo-mark{display:none}
html[data-theme="dark"] .brandlogo[data-logo="mark"] .logo-mark-dark{display:block}
@media (prefers-color-scheme:dark){
  html:not([data-theme]) .brandlogo[data-logo="mark"] .logo-mark{display:none}
  html:not([data-theme]) .brandlogo[data-logo="mark"] .logo-mark-dark{display:block}
}
.authtop .brandlogo{--logo-h:26px}
.nav{position:relative;display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--dim);font:inherit;text-align:start;padding:9px 10px;border-radius:9px;cursor:pointer}
.nav:hover{background:var(--panel2);color:var(--text)}
.nav.active{background:var(--panel2);color:var(--text);font-weight:600}
.nav .ico{width:20px;height:20px;flex:0 0 20px}

/* ---------------------------------------------------- VÄNSTERMENYNS IKONER (R35, R58)

   EN IKON ÄR EN FIL I LÖSNINGEN, inte en teckensymbol och inget som hämtas utifrån: de fem
   ikonerna ligger som SVG i static/icons/ (se ICONS.md) och serveras av samma container som
   sidan. De är ritade i en och samma tunna linjestil — stroke-width 1.6 på ritytan 24x24, med
   stroke="currentColor" och fill="none" — så raden står jämn: samma vikt, samma rityta, samma
   20 px i menyn.

   De läggs på som en MASK och inte som en bild, så att FÄRGEN är tokens och inte filens: masken
   är ikonens linjer och background-color är färgen i dem. Vilande är det menyns egen gråton
   (--color-icon, en egen ton per läge), och accenten som ink (--color-accent-text) är vad en post
   får när den är vald (.nav.active) eller pekas på — med pekaren, och vid tangentbordsfokus, så
   att samma sak syns för den som tabbar. Nytt samtal följer samma regel som de fyra lägesposterna
   — vilande grå, accent när den pekas på eller har fokus — precis som mock-upen ritar plustecknet.

   Ikonerna hämtas INTE som egna filer: icons_build.py bäddar in varje fil i static/icons/ som en
   data-adress i blocket nedan (--icon-<namn>), och reglerna läser masken därifrån. En ikon hänger
   därför aldrig på en egen förfrågan — en mask vars fil inte kommer ritar annars ingenting. Färgerna
   har reservvärden, så en ikon aldrig blir genomskinlig om en token saknas. */
/* ICONS:BEGIN — skrivet av icons_build.py ur static/icons/*.svg; ändra filerna, inte här */
:root{
  --icon-admin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h8.3M18.7 7H20'/%3E%3Cpath d='M4 12h2M11.6 12H20'/%3E%3Cpath d='M4 17h9M19.4 17H20'/%3E%3Ccircle cx='15.5' cy='7' r='2.2'/%3E%3Ccircle cx='8.8' cy='12' r='2.2'/%3E%3Ccircle cx='16.2' cy='17' r='2.2'/%3E%3C/svg%3E");
  --icon-camera:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5h3l1.6-2.5h5.8l1.6 2.5h3a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18V9a1.5 1.5 0 0 1 1.5-1.5Z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
  --icon-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13.5c0 1.4-1.1 2.5-2.5 2.5H10l-4.5 3.5V16C4.6 15.8 4 14.7 4 13.5V6.5C4 5.1 5.1 4 6.5 4h11C18.9 4 20 5.1 20 6.5Z'/%3E%3C/svg%3E");
  --icon-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  --icon-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --icon-coach:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9.2' r='3'/%3E%3Cpath d='M3.4 19.8c0-3.1 2.5-5.6 5.6-5.6s5.6 2.5 5.6 5.6'/%3E%3Cpath d='M15.2 3.8h4.3c.8 0 1.5.7 1.5 1.5v2.9c0 .8-.7 1.5-1.5 1.5h-1.2l-1.9 1.6V9.7h-1.2c-.8 0-1.5-.7-1.5-1.5V5.3c0-.8.7-1.5 1.5-1.5Z'/%3E%3C/svg%3E");
  --icon-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='11' height='11' rx='2.2'/%3E%3Cpath d='M15.5 8.5V6.7c0-1.2-1-2.2-2.2-2.2H6.7c-1.2 0-2.2 1-2.2 2.2v6.6c0 1.2 1 2.2 2.2 2.2h1.8'/%3E%3C/svg%3E");
  --icon-document:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 3.5v4h4M8.5 12.5h7M8.5 16h5'/%3E%3C/svg%3E");
  --icon-edit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 5.3 18.7 8.8 9 18.5l-4.5 1 1-4.5Z'/%3E%3Cpath d='M13.2 7.3 16.7 10.8'/%3E%3C/svg%3E");
  --icon-file-pdf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 3.5v4h4'/%3E%3Cpath d='M8.5 17.5c1.6-.6 4.6-3.6 4-6.3-.3-1.2-1.8-1-1.6.4.3 2.3 2.7 4.6 4.6 4.9 1.2.2 1.4-1 .3-1.3-2-.5-5.6.9-7.3 2.3Z'/%3E%3C/svg%3E");
  --icon-file-powerpoint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 3.5v4h4'/%3E%3Cpath d='M11.5 11a3.5 3.5 0 1 0 3.5 3.5h-3.5Z'/%3E%3C/svg%3E");
  --icon-file-word:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 3.5v4h4'/%3E%3Cpath d='m8.3 11.5 1.3 5.5 2.4-4.5 2.4 4.5 1.3-5.5'/%3E%3C/svg%3E");
  --icon-folder:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5a2 2 0 0 1 2-2h4l2 2.2h7a2 2 0 0 1 2 2v7.8a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E");
  --icon-idea:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.7.6 1 1.3 1 2.1h5c0-.8.3-1.5 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  --icon-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Ccircle cx='9' cy='9.5' r='1.6'/%3E%3Cpath d='m4 17.5 5-5 3.5 3.5 2.5-2.5 4.5 4.5'/%3E%3C/svg%3E");
  --icon-logout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5H7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h7'/%3E%3Cpath d='M10 12h10M16.5 8.5 20 12l-3.5 3.5'/%3E%3C/svg%3E");
  --icon-new-conversation:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5V18.5M5.5 12H18.5'/%3E%3C/svg%3E");
  --icon-paperclip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.4 12.2 19.2a5 5 0 0 1-7.1-7.1l8.3-8.3a3.4 3.4 0 0 1 4.8 4.8l-8.3 8.3a1.7 1.7 0 0 1-2.4-2.4l7.6-7.6'/%3E%3C/svg%3E");
  --icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5V18.5M5.5 12H18.5'/%3E%3C/svg%3E");
  --icon-roleplay:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.6' r='2.9'/%3E%3Cpath d='M3.4 19.6c0-3.1 2.5-5.6 5.6-5.6s5.6 2.5 5.6 5.6'/%3E%3Ccircle cx='16.4' cy='7.9' r='2.2'/%3E%3Cpath d='M15.3 14.9c2.7.2 4.9 2.3 4.9 5'/%3E%3C/svg%3E");
  --icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l4.5 4.5'/%3E%3C/svg%3E");
  --icon-speaker:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.5v5h3.2l4.8 4V5.5l-4.8 4Z'/%3E%3Cpath d='M15.6 9.2a4 4 0 0 1 0 5.6'/%3E%3Cpath d='M18.2 6.8a7.4 7.4 0 0 1 0 10.4'/%3E%3C/svg%3E");
  --icon-style-bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 3.2 6.2 13.6h4.4L9.8 20.8 17.4 9.9h-4.6Z'/%3E%3C/svg%3E");
  --icon-style-chili:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 7.5C19.5 8.5 19.8 11 18.3 13.2C15.5 17.2 9.5 19.6 4.2 18.6C3.2 18.4 3.1 17.6 4 17.3C8.5 15.8 12.5 12.6 14.4 8.6C15 7.4 16.3 6.9 17.5 7.5Z' fill='%237B2D2A' stroke='%237B2D2A' stroke-width='1.2'/%3E%3Cpath d='M16.9 9.9C16.5 11.4 15.4 12.7 13.9 13.7' fill='none' stroke='%23FFFFFF' stroke-opacity='0.55' stroke-width='1.1'/%3E%3Cpath d='M14.5 8.3C15.3 6.9 17.2 6.5 18.7 7.6' fill='none' stroke='%235E7A4F' stroke-width='1.6'/%3E%3Cpath d='M16.9 7C17.2 5.4 18.2 4.3 19.8 4' fill='none' stroke='%235E7A4F' stroke-width='1.6'/%3E%3C/svg%3E");
  --icon-style-graduation-cap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.6 12 5.6l9 4-9 4Z'/%3E%3Cpath d='M7 11.5v4.9c0 1.6 2.2 2.8 5 2.8s5-1.2 5-2.8v-4.9'/%3E%3Cpath d='M20.2 10.7v4.1'/%3E%3C/svg%3E");
  --icon-thumbs-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 13.5v-9h2.3c.7 0 1.2.5 1.2 1.2v6.6c0 .7-.5 1.2-1.2 1.2Z'/%3E%3Cpath d='M16.5 13.5 13 19.8c-1.3 0-2.3-1.1-2.1-2.4l.5-3H6.5c-1.3 0-2.2-1.2-1.9-2.4l1.5-6c.2-.9 1-1.5 1.9-1.5h8.5'/%3E%3C/svg%3E");
  --icon-thumbs-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 10.5v9H5.2c-.7 0-1.2-.5-1.2-1.2v-6.6c0-.7.5-1.2 1.2-1.2Z'/%3E%3Cpath d='M7.5 10.5 11 4.2c1.3 0 2.3 1.1 2.1 2.4l-.5 3h4.9c1.3 0 2.2 1.2 1.9 2.4l-1.5 6c-.2.9-1 1.5-1.9 1.5H7.5'/%3E%3C/svg%3E");
  --icon-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M9.5 7V5.2c0-.7.5-1.2 1.2-1.2h2.6c.7 0 1.2.5 1.2 1.2V7'/%3E%3Cpath d='M6.5 7l.8 11.3c.1 1 .9 1.7 1.9 1.7h5.6c1 0 1.8-.7 1.9-1.7L17.5 7'/%3E%3Cpath d='M10.2 10.5v6M13.8 10.5v6'/%3E%3C/svg%3E");
  --icon-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.75'/%3E%3Cpath d='M4.75 20a7.25 7.25 0 0 1 14.5 0'/%3E%3C/svg%3E");
}
/* ICONS:END */
.side .ico[data-icon]{
  display:block;width:20px;height:20px;flex:0 0 20px;
  background-color:var(--color-icon, currentColor);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:20px 20px;mask-size:20px 20px;
  transition:background-color .12s ease;
}
.side .ico[data-icon="idea"]{-webkit-mask-image:var(--icon-idea);mask-image:var(--icon-idea)}
/* Idélådan (R160): menyvalet i den personliga menyn (R112) med märket för osedda uppdateringar,
   en liten prick på profilraden (utfälld och ihopfälld) så att det syns när menyn är stängd, och
   sidans egna ytor. Ikonen är samma glödlampa i menyns linjestil (icons/idea.svg). */
.memenu .ico[data-icon="idea"]{-webkit-mask-image:var(--icon-idea);mask-image:var(--icon-idea)}
.memenu .ideabadge{margin-inline-start:auto;min-width:20px;min-height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:650;display:inline-flex;align-items:center;justify-content:center}
.me .ideadot{position:absolute;top:5px;inset-inline-start:30px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--panel)}
html[data-sidebar="collapsed"] .me .ideadot{inset-inline-start:auto;inset-inline-end:6px}
/* Sidan Idélåda står i static/ideas.css (R160); här finns bara menyvalet ovan och formulärdelarna nedan. */
.ideaerr{color:var(--color-danger,#b3261e);font-size:12.5px;margin:4px 0}
dialog.ideadlg{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:20px 22px;width:min(560px,94vw)}
dialog.ideadlg::backdrop{background:var(--color-scrim)}
.ideafield{display:block;margin-top:12px}
.ideafield label{display:block;font-size:13px;margin-bottom:4px}
.ideafield input,.ideafield textarea,.ideafield select{width:100%;box-sizing:border-box;font:inherit;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.ideacount{display:block;text-align:end;font-size:12px;color:var(--dim)}
.ideasimilar{background:var(--bg);border-radius:8px;padding:8px 12px;margin-top:8px;font-size:13px}
.ideasender{border:0;padding:0;margin:12px 0 0}
.idearadio{display:block;padding:4px 0}
.ideabtns{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
#ideaToast{position:fixed;bottom:20px;inset-inline:0;margin-inline:auto;inline-size:max-content;max-inline-size:calc(100vw - 32px);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:10px;z-index:200}
@media (max-width:640px){
  .ideacard{flex-direction:column}.ideaside{flex-basis:auto}
  dialog.ideadlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  #ideaStatus{margin-inline-start:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.side .ico[data-icon]{transition:none}}

.secttl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:22px 10px 8px}
.conv{display:block;width:100%;text-align:start;background:none;border:0;color:var(--dim);font:inherit;padding:7px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv:hover{background:var(--panel2);color:var(--text)}
.convempty{font-size:12px;color:var(--dim);padding:2px 10px;margin:0}
/* The foot of the menu (R35): the horizontal divider, Admin under it, and the person's own name
   last. The divider is the foot's top edge, so Admin always stands between it and the name. */
.sidefoot{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.av{width:30px;height:30px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--dim);flex:0 0 30px}
/* THE PERSONAL ROW (R112, R129): one button — the round 32 px circle with the picture (cut to fill
   it, object-fit: cover) or the initials, the name and a quiet chevron from the app's own thin
   line icons. The menu it opens (#meMenu) is a .ctxmenu, placed above the row by app.js. */
.me{position:relative;display:flex;align-items:center;gap:10px;width:100%;margin-top:4px;padding:7px 8px;background:none;border:0;border-radius:9px;color:var(--text);font:inherit;font-size:13px;text-align:start;cursor:pointer;min-height:44px}
.me:hover,.me[aria-expanded="true"],.me.active{background:var(--panel2)}
.me:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px}
.me .av{width:32px;height:32px;flex:0 0 32px;overflow:hidden;font-weight:600}
.avimg{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.av .avimg[hidden],.av .avini[hidden]{display:none}
.who{min-width:0;flex:1 1 auto}
.whoname{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The credit meter under the name (R210, credits/CONTRACT.md §16): a 2 px line the full width of
   the name's column, the track in the border tone and the fill — used_percent of the width — in
   the active profile's accent until the status is read; then .is-ok (green, 0-74 %), .is-notice
   (orange, 75-89 %) or .is-warning (red, 90-100 %) — the --credit-* tokens above. Folded (R35) the name's column is not drawn, so the same line stands
   under the avatar instead (#creditMini). */
.creditmeter{display:block;position:relative;width:100%;height:2px;margin-top:4px;border-radius:1px;background:var(--color-border);overflow:hidden}
.creditmeter[hidden],.creditmini[hidden]{display:none}
.creditfill{display:block;height:100%;width:0;border-radius:1px;background:var(--color-accent);transition:width .25s ease,background-color .25s ease}
.creditmeter.is-ok .creditfill,.creditmini.is-ok .creditfill{background:var(--credit-ok)}
.creditmeter.is-notice .creditfill,.creditmini.is-notice .creditfill{background:var(--credit-notice)}
.creditmeter.is-warning .creditfill,.creditmini.is-warning .creditfill{background:var(--credit-warning)}
.creditmini{display:none}
html[data-sidebar="collapsed"] .creditmini:not([hidden]){display:block;position:absolute;bottom:3px;left:50%;width:28px;height:2px;margin-left:-14px;border-radius:1px;background:var(--color-border);overflow:hidden}
.side .ico.mechev{width:16px;height:16px;flex:0 0 16px;-webkit-mask-size:16px 16px;mask-size:16px 16px;-webkit-mask-image:var(--icon-chevron-down);mask-image:var(--icon-chevron-down);transition:transform .12s ease,background-color .12s ease}
.me[aria-expanded="true"] .ico.mechev{transform:rotate(180deg)}
.me:hover .ico.mechev,.me:focus-visible .ico.mechev{background-color:var(--color-accent-text, var(--accent, currentColor))}
.memenu{min-width:200px}
.memenu .ico[data-icon="user"]{-webkit-mask-image:var(--icon-user);mask-image:var(--icon-user)}
.memenu .ico[data-icon="document"]{-webkit-mask-image:var(--icon-document);mask-image:var(--icon-document)}
.memenu .ico[data-icon="logout"]{-webkit-mask-image:var(--icon-logout);mask-image:var(--icon-logout)}
.memenu button{min-height:40px}
/* Redigera texter / Edit texts (R279): a menuitemcheckbox, its state a tick at the end of the row. */
.memenu .ico[data-icon="edit"]{-webkit-mask-image:var(--icon-edit);mask-image:var(--icon-edit)}
.memenu .edittextscheck{margin-inline-start:auto;width:16px;height:16px;flex:0 0 16px;border:1.5px solid var(--color-border);border-radius:4px;box-sizing:border-box}
.memenu [aria-checked="true"] .edittextscheck{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--color-surface,#fff)}
@media (prefers-reduced-motion:reduce){.side .ico.mechev{transition:none}}

/* ---------------------------------------------------- the left menu folded and unfolded (R35)

   TWO STATES, ONE MARKUP. Every post in the menu carries its icon, its name (.navname, .convname)
   and a small label (.sidelbl) with the name again, out of the SAME key in the catalogue — the
   folded state hides the names and shows the label at hover and at keyboard focus, and the
   unfolded state is what it has always been: icon, name and the conversation list under Mina
   samtal. Nothing here is a second copy of a text, and nothing here is a width of its own: the
   column is --sidebar-w at the top of this file.

   The picker itself is a small button in the mould of .iconbtn, at the top of the menu above the
   posts. app.js writes aria-expanded on it, and that attribute — not a class — is what picks the
   arrow: the double arrow left while the menu is unfolded (a click folds it to the left) and right
   while it is folded. Before app.js has run the markup says expanded, which is the menu as the
   page is drawn. */
.sidetoggle{display:flex;align-items:center;justify-content:center;margin:0 0 10px auto;width:32px;height:30px;padding:0;background:none;border:1px solid var(--line);border-radius:8px;color:var(--dim);cursor:pointer}
.sidetoggle:hover{background:var(--panel2);color:var(--text)}
.sidetoggle:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px}
.sidetoggle svg{width:16px;height:16px;display:none}
.sidetoggle[aria-expanded="true"] .ico-collapse{display:block}
.sidetoggle[aria-expanded="false"] .ico-expand{display:block}
/* The label beside a folded post: it is in the markup in both states, so the one place a name is
   written down stays one place, and it is only DRAWN when the menu is folded. */
.sidelbl{display:none}

html[data-sidebar="collapsed"] .side{padding:18px 8px;align-items:center}
/* The picker sits in the middle of the narrow column, and the wine-red L is all that is left of
   the brand (R36): the wordmark and Companion have no room in it. The L's own file is square
   with an even margin around the letter, so centring the image centres the letter — the same
   two lines of padding as the unfolded brand keep it on the height it has always sat at. */
html[data-sidebar="collapsed"] .sidetoggle{margin:0 auto 10px}
html[data-sidebar="collapsed"] .brand{align-items:center;justify-content:center;padding:4px 0 14px}
html[data-sidebar="collapsed"] .side .brand{padding:0;margin-bottom:10px}
html[data-sidebar="collapsed"] .brand .bsub{display:none}
html[data-sidebar="collapsed"] .side .brandlogo{--logo-h:34px}
html[data-sidebar="collapsed"] .side .brandlogo{min-width:0;flex:0 0 auto}
html[data-sidebar="collapsed"] .side .brandlogo img{height:var(--logo-h);width:auto;max-width:none}
html[data-sidebar="collapsed"] .side .brandlogo[data-logo] .logo-light,
html[data-sidebar="collapsed"] .side .brandlogo[data-logo] .logo-dark{display:none}
html[data-sidebar="collapsed"] .side .brandlogo[data-logo] .logo-mark{display:block}
html[data-sidebar="collapsed"][data-theme="dark"] .side .brandlogo[data-logo] .logo-mark{display:none}
html[data-sidebar="collapsed"][data-theme="dark"] .side .brandlogo[data-logo] .logo-mark-dark{display:block}
@media (prefers-color-scheme:dark){
  html[data-sidebar="collapsed"]:not([data-theme]) .side .brandlogo[data-logo] .logo-mark{display:none}
  html[data-sidebar="collapsed"]:not([data-theme]) .side .brandlogo[data-logo] .logo-mark-dark{display:block}
}
/* The icons, in the same order, with the same active mark and the same click as unfolded: only
   the names, the tag, the section heading and the conversation list are gone. */
html[data-sidebar="collapsed"] .side .nav{width:48px;justify-content:center;gap:0;padding:9px 0}
html[data-sidebar="collapsed"] .side .convnew{position:relative;width:48px;display:flex;align-items:center;justify-content:center;padding:9px 0;margin-top:4px;overflow:visible}
html[data-sidebar="collapsed"] .side .convnew .ico{display:block;width:20px;height:20px;flex:0 0 20px}
html[data-sidebar="collapsed"] .navname,
html[data-sidebar="collapsed"] .convname,
html[data-sidebar="collapsed"] .side .secttl,
html[data-sidebar="collapsed"] .side .convlist,
html[data-sidebar="collapsed"] .side #convEmpty,
html[data-sidebar="collapsed"] .side #convError,
html[data-sidebar="collapsed"] .me .who,
html[data-sidebar="collapsed"] .me .mechev{display:none}
/* Nytt samtal is the fourth post of the menu in BOTH states, so it carries its + in both: unfolded
   it is icon plus name on one line, lined up with the three posts above it, and folded it is the
   icon alone (the rule further up, which hides .convname while the menu is folded and nowhere
   else). The folded rules for the post and its icon stand above and win on specificity. */
.side .convnew{display:flex;align-items:center;gap:10px;padding:9px 10px}
.side .convnew .ico{width:20px;height:20px;flex:0 0 20px}
html[data-sidebar="collapsed"] .sidefoot{align-items:center;width:100%}
html[data-sidebar="collapsed"] .me{justify-content:center;width:48px;padding:6px 0}
html[data-sidebar="collapsed"] .side .me:hover .sidelbl,
html[data-sidebar="collapsed"] .side .me:focus-visible .sidelbl{opacity:1}
html[data-sidebar="collapsed"] .side .me[aria-expanded="true"] .sidelbl{opacity:0}
/* The label stands OUTSIDE the narrow column — absolutely placed against the post, left at the
   column's right edge — so it is never cut off by the 64 px. It is kept in the page at opacity 0
   rather than taken away, because app.js points the post's aria-labelledby at it: a screen reader
   reads the name even while the eye needs a hover to see it. */
html[data-sidebar="collapsed"] .sidelbl{display:block;position:absolute;inset-inline-start:calc(100% + 12px);top:50%;transform:translateY(-50%);z-index:70;white-space:nowrap;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 26px var(--color-shadow);color:var(--text);font-family:var(--font-sans);font-size:12.5px;font-weight:400;padding:5px 10px;opacity:0;pointer-events:none;transition:opacity .12s ease}
html[data-sidebar="collapsed"] .side .nav:hover .sidelbl,
html[data-sidebar="collapsed"] .side .nav:focus .sidelbl,
html[data-sidebar="collapsed"] .side .nav:focus-visible .sidelbl,
html[data-sidebar="collapsed"] .side .convnew:hover .sidelbl,
html[data-sidebar="collapsed"] .side .convnew:focus .sidelbl,
html[data-sidebar="collapsed"] .side .convnew:focus-visible .sidelbl{opacity:1}
@media (prefers-reduced-motion:reduce){html[data-sidebar="collapsed"] .sidelbl{transition:none}}
/* VÄNSTERMENYNS INLINE-IKONER (R58): Chatt, Rollspel, Coach, Nytt samtal och Admin bär appens egen
   SVG ur icons/menuIcons.js (app.js, paintMenuIcons) — ingen mask, ingen fil, ingen url(). Ikonen
   är 24 × 24 px utfälld och ihopfälld, med samma linjevikt (stroke-width 1.6 i SVG:n) i ljust och
   mörkt läge, och färgen är currentColor: menyns gråton i vila (--color-icon: #6B6560 ljust,
   #9A938C mörkt) och den aktiva produktens accent (--color-accent-text ur brandingens tokens) på
   den valda posten, och när posten pekas på eller har fokus. --ll-menu-bg är menyns bakgrund, i
   båda lägena ur --panel; Admin-ikonens knoppar fylls med den, och en post som bär den ljusare
   ytan (vald eller under pekaren) ger dem samma yta, så att linjen bryts bakom knopparna. */
.side .nav:hover,.side .nav.active,.side .convnew:hover{--ll-menu-bg:var(--panel2)}
.side .ico[data-menu-icon]{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;color:var(--color-icon, #6B6560);transition:color .12s ease}
.side .ico[data-menu-icon] .ll-icon{display:block;width:24px;height:24px;flex:0 0 24px}
html[data-sidebar="collapsed"] .side .ico[data-menu-icon]{display:flex;width:24px;height:24px;flex:0 0 24px}
.side .nav.active .ico[data-menu-icon],
.side .nav:hover .ico[data-menu-icon],
.side .nav:focus-visible .ico[data-menu-icon],
.side .convnew:hover .ico[data-menu-icon],
.side .convnew:focus-visible .ico[data-menu-icon]{color:var(--color-accent-text, var(--accent, currentColor))}
@media (prefers-reduced-motion:reduce){.side .ico[data-menu-icon]{transition:none}}
/* main */
main{flex:1;display:flex;flex-direction:column;min-width:0}
.top{min-height:58px;flex:0 0 auto;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:var(--panel)}
.crumb{font-size:13px;color:var(--dim)}
.tools{display:flex;align-items:center;gap:8px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:none;border:0;color:var(--dim);font:inherit;font-size:12px;padding:5px 10px;cursor:pointer}
.seg button.on{background:var(--panel2);color:var(--text);font-weight:600}
.aboutbtn{display:inline-flex;align-items:center;justify-content:center}
.aboutbtn svg{width:18px;height:18px}
dialog.ask.about .aboutlinks a{color:var(--color-accent-text, var(--accent, currentColor))}
.iconbtn{background:none;border:1px solid var(--line);color:var(--dim);border-radius:8px;width:32px;height:30px;cursor:pointer}
/* THE LANGUAGE PICKER (R34), drawn after artifacts/Ska_rmavbild 2026-10-17 kl. 16.10.23.png: a
   small button with the flag of the language being read and a chevron, and under it a menu with
   one row per language — flag, the language's own name, and on the row in use a tick to the right
   and a tinted background. Both pickers in the interface are this one component (languagePicker
   in app.js), so this is the only place it is drawn.

   NOT ONE COLOUR OF ITS OWN: the surfaces, the hairlines, the ink and the shadow are the tokens
   at the top of this file, the tint behind the chosen row is --color-accent-soft and the tick is
   the accent as ink (--color-accent-text) — so the picker is right in both modes without a second
   list of values. The only colours in it are the two flags', and those are the flags' own,
   because a flag is a picture and not a surface. The text is Inter like the rest of the
   interface's furniture; the two language names in it are app.js's constants and never texts. */
.langpick{position:relative;display:inline-flex}
.langbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);border-radius:8px;color:var(--dim);font:inherit;font-family:var(--font-sans);font-size:12px;min-height:30px;padding:0 7px;cursor:pointer}
.langbtn:hover{background:var(--panel2);color:var(--text)}
.langbtn:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px}
.langbtn .chev{width:14px;height:14px;flex:0 0 auto}
/* The flag itself, the same box in the button and on every row so the menu reads as a column.
   The two flags have different proportions of their own (2:1 and 16:10), so they are let fill
   the box and cropped evenly rather than squashed — both are symmetrical about the crop. */
.langpick .flag{width:22px;height:16px;flex:0 0 auto;border:1px solid var(--line);border-radius:3px;object-fit:cover;display:block}
.langmenu{position:absolute;z-index:70;top:calc(100% + 6px);inset-inline-end:0;min-width:188px;display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 12px 32px var(--color-shadow)}
/* The menu is hidden with the hidden attribute, and display:flex above would otherwise win. */
.langmenu[hidden]{display:none}
.langrow{display:flex;align-items:center;gap:10px;width:100%;text-align:start;background:none;border:0;color:var(--text);font:inherit;font-family:var(--font-sans);font-size:13.5px;padding:8px 10px;border-radius:8px;cursor:pointer}
.langrow:hover{background:var(--panel2)}
.langrow:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:-2px}
.langrow .langname{flex:1;min-width:0;white-space:nowrap}
.langrow.on{background:var(--color-accent-soft);font-weight:600}
/* The tick holds its place on every row, so the names stand in one column whichever row is in
   use: it is hidden and not taken away. */
.langrow .tick{width:17px;height:17px;flex:0 0 auto;color:var(--color-accent-text, var(--accent, currentColor));visibility:hidden}
.langrow.on .tick{visibility:visible}
/* The light/dark picker (R37), in the top row of the header both the sign-in page and the app
   frame carry — so it is in reach of the chat, the role-play, the assessment and the
   administration view alike. It is interface, so it is set in Inter like the language picker
   beside it, and its icon is a 16 px sun or moon in currentColor: one drawing, the button's own
   text colour, right in both modes with no colour of its own. app.js writes data-mode with the
   mode that holds, and that is what picks the icon — the sun in dark mode, the moon in light,
   which is the mode a click gives. */
.themebtn{display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:var(--font-sans)}
.themebtn:hover{background:var(--panel2);color:var(--text)}
.themebtn:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px}
.themebtn svg{width:16px;height:16px;display:none}
.themebtn[data-mode="dark"] .ico-sun{display:block}
.themebtn[data-mode="light"] .ico-moon{display:block}
/* Before app.js has run there is no data-mode yet, and an empty 32 px box would be a hole in the
   row: the moon stands there, which is the mode a light page would be switched to. */
.themebtn:not([data-mode]) .ico-moon{display:block}
.body{flex:1;overflow:auto;padding:30px 34px 26px}
.screen{display:none}
.screen.show{display:block}
.wrap{max-width:780px;margin:0 auto}

/* ---- SAMTALSYTAN: FAST HÖJD, ETT RULLANDE FLÖDE OCH ETT FAST FOTOMRÅDE (R51)

   Ett samtal är inte en sida som rullar: ytan är exakt så hög som utrymmet under topplisten
   (flex-kolumn, 100 % av ytan), ENDAST meddelandeflödet rullar (overflow-y:auto) och
   meddelandefältet ligger i ett fotområde i nederkanten som inte kan rulla någonstans. Inget
   position:fixed och ingenting som svävar: fältet är en vanlig rad i kolumnen, så det ligger kvar
   när flödet rullar och följer inte med innehållet.

   data-surface="conversation" på .body är det som slår om layouten, och app.js sätter den för de
   två vyer som ÄR ett samtal — chatten alltid, rollspelet när själva samtalet står på skärmen.
   Attributet står också i markupen från början, så det första som ritas är rätt. I övriga vyer
   (katalogen, bedömningen, administrationen) är .body den rullande ytan som förut: ingen rad här
   rör dem.

   Fotområdet har EGEN yta och EGEN kantlinje ur tokens (--panel, --line), så att det som rullar
   förbi inte syns igenom i varken ljust eller mörkt läge. */
.body[data-surface="conversation"]{display:flex;flex-direction:column;overflow:hidden;padding:0}
.body[data-surface="conversation"] > .wrap{flex:0 0 auto}
.body[data-surface="conversation"] > .screen.show{flex:1 1 auto;min-height:0;display:flex;
  flex-direction:column}
/* Själva samtalsytan: flödet tar allt som finns och fotområdet precis sin egen höjd. De två
   raderna efter är inte överflödiga: .convo sätter display, och då måste de två sätt en vy göms
   på — klassen .show på en skärm, attributet hidden på rollspelets samtal — säga emot den, annars
   ligger en samtalsyta kvar och tar höjd i en vy som inte visar den. */
.convo{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
/* R52: EN sidomarginal för hela samtalsytan — flödet, systemmeddelandena och fotområdet med
   meddelandefältet använder samma värde, i chatten och i rollspelet, ljust och mörkt. */
:root{--convo-gutter:34px}
@media (max-width:640px){:root{--convo-gutter:14px}}
.screen.convo:not(.show){display:none}
.convo[hidden]{display:none}
/* Flödet, det enda som rullar. Luften nedtill (28 px) är till för att sista meddelandet aldrig
   ska hamna bakom fältet — scroll-padding gör samma sak för en rullning som webbläsaren själv
   gör, till ett fokuserat fält eller ett ankare. */
.convoflow{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scroll-padding-bottom:28px;padding-block:30px 28px;padding-inline:var(--convo-gutter)}
/* Flödet är lika brett som ytan — rullningslisten hör till kanten av fönstret, som förut — och
   det som står i det är lika brett som .wrap var: 780 px, centrerat. Det är därför samtalet ser
   likadant ut som i mock-upen fast ytan nu är en kolumn med fast höjd. */
.convoflow > *{max-width:780px;margin-inline-start:auto;margin-inline-end:auto}
/* Systemmeddelandena ("Samtalet är borttaget.", "Rollspelet är pausat."): ingen bubbla, bara liten
   dämpad text på en egen rad mellan flödet och fotområdet — alltså längst ner i samtalsytan, precis
   ovanför meddelandefältet, hur kort samtalet än är. Utan synligt meddelande tar raden ingen höjd. */
.sysnotes{flex:0 0 auto;padding-block:0;padding-inline:var(--convo-gutter)}
.sysnote{max-width:780px;margin:0 auto 8px;font-size:12px;line-height:1.4;color:var(--dim);
  text-align:center;background:none;border:0;padding:0}
/* Fotområdet: egen yta, egen kantlinje, och plats för telefonens egen nederkant. */
.convofoot{flex:0 0 auto;background:var(--panel);border-top:1px solid var(--line);
  padding-block:12px calc(12px + env(safe-area-inset-bottom,0px));padding-inline:var(--convo-gutter)}
.convofoot .foot{max-width:780px;margin:0 auto}
/* Fältet i fotområdet har ingen marginal uppåt (den hörde till ett fält som låg i flödet) och
   ligger mot bakgrunden i stället för mot panelen, så kanten mellan de två syns. */
.convofoot .composer{margin:0;background:var(--bg)}
h1{font-size:26px;margin:0 0 6px;font-weight:650}
.lead{color:var(--dim);margin:0 0 26px}
.note{font-size:12px;color:var(--dim);margin:0 0 14px}
.btn{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 16px;font:inherit;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}
.btn.ghost{color:var(--dim)}
.ribbon{display:flex;align-items:flex-start;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:18px;font-size:13px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent-text, var(--accent, currentColor));flex:0 0 7px;margin-top:6px}
.ribbon .t{font-weight:620;display:block}
.ribbon .b{color:var(--dim)}

/* ---------------------------------------------------------------- Knowledge (admin) */
/* The same panel, line and accent as the mock-up's cards and chips, so the view belongs with the
   chat and the role-play. No text lives in this file either. */
.panelbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:28px}
.panelbox h2{font-size:14px;font-weight:620;margin:0 0 14px}
.field select,.field input[type=file],.field input[type=text]{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;outline:none}
.field select:focus,.field input:focus{border-color:var(--color-accent-text)}
.field input[type=file]{cursor:pointer}
.panelbox .btn.primary{margin-top:4px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.msg.wait{color:var(--dim);border-color:var(--line)}
/* VÄNTELÄGESINDIKERINGEN för de tre flöden som köar sitt arbete (R42): uppladdningen i
   Kunskap, bedömningen efter ett rollspel och Översätt i scenarioformuläret. Samma
   komponent i alla tre, i mock-upens egna mått — den tysta ytan (--panel2), hårstrecket och
   accenten som bläck i snurran — så den hör ihop med korten och chipsen omkring den och är rätt i
   både ljust och mörkt läge utan ett eget värde. Ingen hex-kod står här: varje färg är en token.
   Köad snurrar långsamt och pågår snabbare, så de två tillstånden syns åt även för den som inte
   läser raden. */
.jobwait{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 12px;font-size:13px;color:var(--dim)}
.jobwait::before{content:'';width:13px;height:13px;flex:0 0 13px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--color-accent-text);animation:jobspin .9s linear infinite}
.jobwait[data-status="queued"]::before{animation-duration:2s}
.jobwait .jws{color:var(--color-accent-text, var(--accent, currentColor));font-weight:620}
.jobwait .jwn{color:var(--dim)}
@keyframes jobspin{to{transform:rotate(360deg)}}
/* Den som har bett om mindre rörelse får snurran långsam i stället för ingen indikering alls. */
@media (prefers-reduced-motion:reduce){.jobwait::before{animation-duration:2.8s}}
/* Samma tillstånd som ett chip i dokumentlistan: inläsningen som ligger i kön eller pågår bär
   snurran i litet format, den som misslyckats bär felets egen färg och ingen rörelse. */
.tagp.jobtag{display:inline-flex;align-items:center;gap:6px}
.tagp.jobtag::before{content:'';width:9px;height:9px;flex:0 0 9px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--color-accent-text);animation:jobspin 1.1s linear infinite}
.tagp.jobtag[data-job="queued"]::before{animation-duration:2s}
.tagp.jobtag[data-job="failed"]{color:var(--bad);border-color:var(--bad)}
.tagp.pmissing{color:var(--bad);border-color:var(--bad)}
.note.pcatmissing{color:var(--bad);font-weight:600}
.tagp.jobtag[data-job="failed"]::before{display:none}
.listhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.listhead h2{font-size:14px;font-weight:620;margin:0}
.kbrow{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:10px}
.kbrow .main{flex:1;min-width:0}
.kbtitle{font-weight:620;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbfile{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbmeta{font-size:12px;color:var(--dim)}
.tagp{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:20px;padding:2px 10px;white-space:nowrap}
/* The two knowledge levels, told apart with ONE accent (R37): Learning Leader's own material is
   the accent filled in, the organisation's is the accent drawn as an outline. Filled against
   outlined is a difference that survives a single hue, holds in both modes and does not ask
   anybody to remember which colour meant which. */
.tagp.lvl-learning_leader{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-contrast);font-weight:600}
.tagp.lvl-organization{color:var(--color-accent-text, var(--accent, currentColor));border-color:var(--color-accent-text)}
.tagp.lvl-global{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-contrast);font-weight:600}
.tagp.lvl-enterprise{color:var(--color-accent-text, var(--accent, currentColor));border-color:var(--color-accent-text)}
.tagp.lvl-product,.tagp.lvl-department{color:var(--color-accent-text, var(--accent, currentColor));border-style:dashed;border-color:var(--color-accent-text)}
/* Modulen ett globalt dokument ligger i (R90): en tyst etikett, samma chip som de andra. */
.tagp.kbmod{font-weight:500;color:var(--text);background:var(--panel2)}
/* Modullistan och medlemslistan (R90, R91): de kan vara tiotals, så listan rullar i sin ruta och
   har ett sökfält ovanför. */
.kbmodlist{max-height:360px;overflow:auto;border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
.kbmodrow .main,.kbdeptrow .main{flex:1;min-width:0;font-weight:400}
.kbmodrow .main .treelabel,.kbdeptrow .main .treelabel{font-weight:620}
input.kbsearch{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--text);font:inherit;font-size:13px;outline:none;margin:6px 0}
input.kbsearch:focus{border-color:var(--color-accent-text)}
h3.kbsub{font-size:14px;font-weight:620;margin:18px 0 4px}
dialog.ask .field{display:block;margin-top:12px}
/* Where a document has got to (R9): the two ends are marked — searchable in the accent, failed in
   the colour of a fault — and the three on the way stay the quiet chip, so a row that is still
   being worked on does not shout. */
.tagp.st-searchable{color:var(--color-accent-text, var(--accent, currentColor));border-color:var(--color-accent-text)}
.tagp.st-failed{color:var(--bad);border-color:var(--bad)}
.kbfail{font-size:12px;color:var(--bad);margin-top:2px}
.rowbtn{background:none;border:1px solid var(--line);color:var(--dim);border-radius:8px;font:inherit;font-size:12px;padding:5px 10px;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.rowbtn:hover{background:var(--panel2);color:var(--text)}
.rowbtn.danger{color:var(--bad);border-color:var(--bad)}
.kbconfirm{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);flex-wrap:wrap}
/* KATALOGSTRUKTUREN i Kunskap (R55): mappar i mappar, hur djupt som helst. Djupet visas
   med ett indrag och ett hårstreck till vänster — samma hårstreck och samma tysta yta som
   korten omkring, inget eget värde — så en gren syns höra till sin mapp utan en egen färg.
   Mappraden och dokumentraden är samma rad med olika vikt: mappen är namnet i halvfet, ett
   dokument i mappen är dämpat, så trädet läses som en struktur och inte som en lista. */
.treetop{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.treenode{margin:0}
.treekids{margin-inline-start:14px;padding-inline-start:12px;border-inline-start:1px solid var(--line)}
.treerow,.treedoc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 10px;border-radius:10px}
.treerow{font-weight:620;font-size:14px}
.treerow:hover,.treedoc:hover{background:var(--panel2)}
.treedoc{font-size:13px;color:var(--dim)}
.treeicon{color:var(--dim);font-size:11px}
.treelabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36ch}
.treecount{font-size:11px;color:var(--dim);font-weight:400}
.treerow .rowbtn,.treedoc .rowbtn{margin-inline-start:auto;font-weight:400}
.treerow .rowbtn~.rowbtn,.treedoc .rowbtn~.rowbtn{margin-inline-start:0}
.kbcrumbs{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:13px;margin:0 0 10px;padding:0 10px}
.kbcrumbs .kbcrumb{color:var(--color-accent-text, var(--accent, currentColor));text-decoration:none}
.kbcrumbs .kbcrumb:hover{text-decoration:underline}
.kbcrumbs .kbsep{color:var(--dim)}
.kbcrumbs .kbhere{color:var(--text);font-weight:620}
a.treelabel.kbopen{color:var(--text);text-decoration:none}
a.treelabel.kbopen:hover{text-decoration:underline}
.treeicon.ico{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain}
.treeicon.ico[data-icon="folder"]{-webkit-mask-image:var(--icon-folder);mask-image:var(--icon-folder)}
.treeicon.ico[data-icon="admin"]{-webkit-mask-image:var(--icon-admin);mask-image:var(--icon-admin)}
.treeicon.ico[data-icon="document"]{-webkit-mask-image:var(--icon-document);mask-image:var(--icon-document)}
.kbask .kbwarn{color:var(--bad);font-weight:620;flex-basis:100%}
.treeform,.treemove{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0}
.treeform input.treename,.treemove select.treepick{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--text);font:inherit;font-size:13px;outline:none}
.treeform input.treename:focus,.treemove select.treepick:focus{border-color:var(--color-accent-text)}
/* Dokumentets språk (R72): en liten etikett "Språk" och koden som en bricka av samma slag som nivån,
   en väljare för den som får rätta den. Samma linjer och färger som raden, i ljust och mörkt. */
.kblang{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.kblanghead{font-size:11px;color:var(--dim)}
.tagp.kblangtag{font-family:var(--font-sans);text-transform:lowercase}
select.kblangpick{background:var(--panel2);color:var(--text);font:inherit;font-family:var(--font-sans);font-size:11px;padding:2px 8px;cursor:pointer;outline:none}
select.kblangpick:focus{border-color:var(--color-accent-text)}
select.kblangpick:disabled{cursor:default;opacity:.7}
.kblangnote{font-size:11px;color:var(--color-accent-text, var(--accent, currentColor));white-space:nowrap}
.kblangnote.err{color:var(--bad);white-space:normal}
.rowbtn.primary{color:var(--text);border-color:var(--color-accent-text)}
/* The progress of an upload (R13): the mock-up has no bar of its own, so it is built in its visual
   language — the chip's rounded track in panel2 and the accent as the fill. */
.uprog{margin:4px 0 16px}
.uprogtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;color:var(--dim);margin-bottom:6px}
.upct{font-weight:650;color:var(--text);font-variant-numeric:tabular-nums}
.utrack{height:8px;border-radius:20px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.ubar{display:block;height:100%;width:0;background:var(--color-accent-text, var(--accent, currentColor));border-radius:20px;transition:width .15s linear}

/* ------------------------------------------------- the role-play catalogue (admin, R5, R6)
   The same panel, card, chip and button as the mock-up's own catalogue and persona rows
   (artifacts/mockup-chatt-och-rollspel.html): the scenario rows carry the mock-up's .tags/.tagp
   chips, and a counterpart row is the mock-up's .persona row with its avatar, its name, its
   character line and the difficulty at the right. No text lives in this file. */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:720px){.twocol{grid-template-columns:1fr}}
.collbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.field textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;outline:none;resize:vertical}
.field textarea:focus{border-color:var(--color-accent-text)}
.rowbtns{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
/* one scenario in the catalogue list */
.rprow{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.rprow.on{border-color:var(--color-accent-text);box-shadow:inset 0 0 0 1px var(--color-accent-text)}
.rptop{display:flex;align-items:flex-start;gap:12px}
.rptitle{font-weight:620;font-size:14px}
.rpmeta{font-size:12px;color:var(--dim)}
.rpbtns{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.rpconfirm{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);flex-wrap:wrap;margin-top:10px}
/* one counterpart of the chosen scenario */
.persona{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.pav{width:40px;height:40px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);flex:0 0 40px;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:13px}
.pname{font-weight:620;font-size:14px}
.prole{font-size:12px;color:var(--dim)}
/* The grade of a scenario with a counterpart (R425, R426; docs/roleplay-difficulty-contract.md
   §6.2): a WORD in a quiet outlined pill — the body text on the second surface, framed by the
   ordinary border — never stars and never the gold stars' amber or the completed card's green, so
   the two can never be mistaken for each other. Text and surface are the theme's own tokens, which
   keep their contrast in light and both dark modes (R37). */
.rp-difficulty{display:inline-flex;align-items:center;padding-block:1px;padding-inline:8px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);color:var(--text);font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;vertical-align:baseline}
.pdiff{margin-inline-start:auto;padding-inline-start:10px;text-align:end;white-space:nowrap}
.card .rp-card-difficulty{margin-block:6px 0;margin-inline:0}
.ribbon .rp-difficulty,#feedbackLead .rp-difficulty{margin-inline:2px}

/* the language-column heading and a field's own error line, used by the scenario's
   Standardtillstånd and the persona form. */
.critlbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.critfielderr{display:block;font-size:12px;color:var(--bad);margin-top:4px}

/* ------------------------------------------------------------ administration (R32, R31)
   The row of tabs over the administrator's one view, and the cards of the first tab: one per
   conversation style, with its icon in the style's own colour, its name and its system prompt in
   a field to write in. The tab row is the mock-up's own segmented control (.seg) laid flat: the
   tab that holds carries the accent under it and nothing else, so the row stays as quiet as the
   left menu it belongs with. No text lives in this file. */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap}
.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);font:inherit;
  font-size:14px;padding:9px 14px;cursor:pointer;margin-bottom:-1px}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text);border-bottom-color:var(--color-accent-text);font-weight:620}
.tabs.groups{margin-bottom:0}
.tabs.groups:has(+ .tabs.subtabs[hidden]){margin-bottom:22px}
.tabs.groups .tab{font-weight:620;color:var(--text)}
.tabs.groups .tab:not(.on){color:var(--dim)}
.tabs.subtabs{background:var(--color-surface-2,color-mix(in srgb,var(--line) 25%,transparent));
  padding:2px 6px 0;border-radius:0 0 8px 8px}
.tabs.subtabs .tab{font-size:13px;padding:7px 12px}
.tab:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:-2px}
.inforow-lang{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tabpanel{display:block}

.stylecard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:14px}
.stylehead{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.stylename{font-weight:620;font-size:15px}
.styleother{font-size:12px;color:var(--dim)}
.stylecard .field{display:block;margin-bottom:12px}
.stylecard .field>span{display:block;font-size:12px;color:var(--dim);margin-bottom:4px}
.stylecard .rowbtns{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stylecard .msg{margin:0}
/* Omrankning av källor (R283, static/admin/conversationStyles.js): kryssrutan och, direkt intill den,
   de två talfälten på en rad som bryts på en smal skärm. Av = talfälten nedtonade och inte valbara;
   färgerna är temats variabler, så samma regler gäller i ljust och mörkt läge. */
.stylererank{display:flex;align-items:flex-start;gap:12px 22px;flex-wrap:wrap;margin:2px 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.stylererank .rerankcheck{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:20px}
.stylererank .rerankcheck label{font-weight:560;cursor:pointer}
.stylererank .rerankcheck input{inline-size:18px;block-size:18px;margin:0;accent-color:var(--color-accent-text);cursor:pointer}
.stylererank .reranknumbers{display:flex;gap:12px 18px;flex-wrap:wrap;flex:1 1 320px}
.stylererank .rerankfield{display:flex;flex-direction:column;gap:4px;flex:1 1 150px;max-inline-size:260px;transition:opacity .15s}
.stylererank .rerankfield label{font-size:12px;color:var(--dim)}
.stylererank .rerankfield input{inline-size:7em;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--text);font:inherit;outline:none}
.stylererank .rerankfield input:focus{border-color:var(--color-accent-text)}
.stylererank input:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.stylererank .rerankfield input[aria-invalid=true]{border-color:var(--bad)}
.stylererank .rerankhelp{font-size:12px;color:var(--dim);line-height:1.35}
.stylererank .rerankerr{margin:2px 0 0;font-size:13px;color:var(--bad)}
.stylererank .rerankfield.is-off{opacity:.5}
.stylererank .rerankfield.is-off input,.stylererank .rerankfield input:disabled{cursor:not-allowed;background:var(--panel2);color:var(--dim)}
/* Samtalsstilar i tre delar (R220): rubrikerna Gemensam grund, Chatt och Rollspel, AI-instruktionernas
   kort som stilkorten. Översätt / Translate finns inte (R200 är struket). */
.stylesection{margin:22px 0 8px}
.stylesection>.stylesectionhead{font-size:17px;font-weight:650;margin:0 0 4px}
.stylesection>.stylesectionhelp{margin:0 0 10px;color:var(--dim);font-size:13px}
.aicard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:14px}
.aicard .aihelp{margin:0 0 8px;color:var(--dim);font-size:13px}
.aicard .field{display:block;margin-bottom:12px}
.aicard .field>span{display:block;font-size:12px;color:var(--dim);margin-bottom:4px}
.aicard .msg{margin:0}
.aicard textarea.aitext{inline-size:100%;box-sizing:border-box;resize:vertical}
.aicard[data-instruction="common.ground"] textarea.aitext{min-block-size:18em}

/* The symbol in front of a style's name on its CARD in the administration view, and nowhere else
   (R31): 20 px, the style's own hue, and aria-hidden — the name beside it says the same thing in
   words. The chat's own style picker carries no symbol, so nothing here reaches it. */
.styleico{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px}
.styleico svg{width:20px;height:20px;display:block}
.stylecard[data-style=brief] .styleico{color:var(--style-brief)}
.stylecard[data-style=thoughtful] .styleico{color:var(--style-thoughtful)}
.stylecard[data-style=challenging] .styleico{color:var(--style-challenging)}

/* Översätt/Translate in the two forms of the catalogue (R28, R29): what was filled in, and the
   differences that were NOT written over — each with both texts, what differs and the three
   things the administrator can do about it. */
.translate{margin-top:18px}
.translate h2{font-size:14px;font-weight:620;margin:0 0 4px}
.conflict{background:var(--panel2);border:1px solid var(--bad);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.conflict .cfield{font-weight:620;font-size:13px}
.conflict .cdiff{font-size:12px;color:var(--dim);margin:2px 0 8px}
.conflict .cside{font-size:13px;margin-bottom:6px}
.conflict .cside .clbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);display:block}
.conflict .rpbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.conflict.kept{border-color:var(--line);opacity:.75}

/* ------------------------------------------- the role-play the person sees (R5, R6)
   The mock-up's own two screens: the search field over the catalogue (s-catalog) and the
   counterpart rows one of which is chosen (s-persona). The rows are the same .persona box as the
   administrator's, with .pick on it when it is a choice and not a listing. */
.search{display:flex;gap:10px;margin-bottom:14px}
.search input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;outline:none}
.search input:focus{border-color:var(--color-accent-text)}
.persona.pick{width:100%;text-align:start;font:inherit;color:var(--text);cursor:pointer}
.persona.pick:hover{border-color:var(--color-accent-text)}
.persona.on{border-color:var(--color-accent-text);box-shadow:inset 0 0 0 1px var(--color-accent-text)}
.pwho{min-width:0}
.backbtn{margin-bottom:16px}

/* ------------------------------------------- motpartens porträtt, PersonaPortrait (R39)
   EN komponent, på de två ställen där en motpart visas: raden i motpartsvalet (#personaList) och
   huvudet över det pågående rollspelet (.rpshead). Markupen byggs av app.js (personaPortrait) och
   är densamma på båda ställena — bara storleken skiljer, och den står i --portrait-w.

   Ramen är ett klassiskt porträtt: fast 4:5 (aspect-ratio, så bilden aldrig behöver sträckas),
   skuren som en ellips (border-radius:50% / 50%), med en hårfin kantlinje och en bakgrund ur de
   gemensamma färgtokens — ingen egen accentfärg någonstans i den här komponenten.

   Bilden fyller ramen med object-fit:cover: servern beskär redan till 4:5 (persona_images.py), så
   cover är det som håller även för ett foto som av något skäl inte är det.

   Saknas bilden visas dummy-illustrationen, appens egen statiska tillgång i två varianter, och
   vilken av dem som ritas avgörs av CSS och inte av JavaScript — samma temamekanism som
   logotypen (R36, R37): html[data-theme="dark"] för den som valt mörkt och prefers-color-scheme
   för den som inte valt något. Specificiteten är därför med flit densamma i alla fyra reglerna
   (.pframe .pdummy-*), annars skulle .pframe img ta över och båda varianterna visas. */
.pport{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;--portrait-w:56px}
.pframe{display:block;position:relative;width:var(--portrait-w);aspect-ratio:4 / 5;border-radius:50% / 50%;border:1px solid var(--line);background:var(--panel2);overflow:hidden;flex:0 0 auto}
.pframe img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:none}
.pframe .pphoto{display:block}
.pframe .pdummy-light{display:block}
html[data-theme="dark"] .pframe .pdummy-light{display:none}
html[data-theme="dark"] .pframe .pdummy-dark{display:block}
@media (prefers-color-scheme:dark){
  html:not([data-theme]) .pframe .pdummy-light{display:none}
  html:not([data-theme]) .pframe .pdummy-dark{display:block}
}
/* Vilket av de två som gäller: data-has-image på komponenten, satt av app.js — och av
   bildens egen onerror, så en bild som inte går att hämta blir dummy-illustrationen i samma ram
   i stället för en trasig bildikon. Reglerna är med flit specifikare än mode-reglerna ovan. */
.pport[data-has-image="true"] .pframe .pdummy-light,
.pport[data-has-image="true"] .pframe .pdummy-dark{display:none}
.pport[data-has-image="false"] .pframe .pphoto{display:none}
/* Byt bild, bara för en administratör (R39, R33): den lilla radknappen, under porträttet, och
   spinnern och felraden på samma plats så att inget hoppar medan en uppladdning pågår. */
.pxbtn{font-size:11px;padding:3px 8px}
.pxwait{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--dim)}
.pxwait::before{content:'';width:12px;height:12px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--color-accent-text);animation:pxspin .8s linear infinite}
@keyframes pxspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pxwait::before{animation-duration:2.4s}}
.pxerr{margin:0;font-size:11px;color:var(--bad);text-align:center;max-width:calc(var(--portrait-w) + 60px)}
/* Raden i motpartsvalet är inte längre en knapp i sig: porträttets egen knapp får inte ligga
   inuti en annan knapp. Själva valet är knappen över namnet och karaktären (.ppick), och ett
   klick var som helst på raden går samma väg — den bubblar dit. */
.ppick{flex:1;min-width:0;display:flex;align-items:flex-start;gap:12px;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:start;cursor:pointer}
.ppick:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:3px;border-radius:8px}
/* Huvudet över det pågående rollspelet: porträttet till vänster, bandet och raden om att samtalet
   är skilt från chatten till höger. Porträttet är en storlek större här än i raden. */
.rpshead{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.rpshead .pport{--portrait-w:84px}
.rpsheadmain{flex:1;min-width:0}
.rpsheadmain .ribbon{margin-bottom:8px}
.rpsheadmain .note{margin:0}
/* the scenario's own texts when it is chosen (R66, R67): the short description, and the purpose
   and the person's role as labelled blocks of their own, on the mock-up's quiet surface */
.scendesc{margin:0 0 14px}
.scenbrief{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 12px}
.scenbrief .collbl{margin-bottom:6px}
.scenbrieft{margin:0;white-space:pre-line}
.rpsheadmain .scenbrief{margin:10px 0 0}
/* the role-play itself (s-session): the dialog that asks before a conversation that is going on is
   started over. The conversation's own lines are the chat's .turn bubbles, so the two look alike —
   it is the same kind of reading — and a reply that did not come is that same bubble with the
   chat's own .astate row in it (.turn.notice), so the role-play has no error box of its own.
   .retryrow is the feedback's row (Försök igen under the judgement that did not come). */
.retryrow{display:flex;gap:10px;margin:-6px 0 14px}
dialog.ask{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:20px 22px;max-width:430px;font:inherit}
dialog.ask::backdrop{background:var(--color-scrim)}
dialog.ask h2{font-size:16px;font-weight:650;margin:0 0 8px}
dialog.ask p{margin:0;font-size:13px;color:var(--dim)}

/* ------------------------------------------- the feedback after the role-play (R8)
   The mock-up's own s-feedback, measurement for measurement: one .crit card per criterion of the
   scenario with the criterion's name at the left and the level it was given as a pill at the right
   (.rate, filled in its level's colour, a dashed pill for Ej bedömbart), under
   them what the criterion is, the description of that level, Claude's judgement and motivation and
   the advice for next time, and the reading tips in one .tips panel where each row is a link into
   the document viewer. The failure stands in a card of its own so that Försök igen sits with the
   sentence that explains it. No text lives in this file. */
.crit{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.crithead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.crithead .t{font-weight:620;font-size:14px}
.rate{font-size:12px;border-radius:20px;padding:2px 10px;border:1px solid var(--line);color:var(--dim);text-align:end;white-space:nowrap}
/* Varje graderad bubbla fylls i sin nivås färg (R78), satt från nivån själv (data-level), inte
   från platsen i listan: siffran står kvar i texten och aria-label, så färgen är aldrig ensam. */
.rate[data-level]{font-weight:650}
.rate[data-level="1"]{background:var(--level-1);border-color:var(--level-1-line);color:var(--level-1-ink)}
.rate[data-level="2"]{background:var(--level-2);border-color:var(--level-2-line);color:var(--level-2-ink)}
.rate[data-level="3"]{background:var(--level-3);border-color:var(--level-3-line);color:var(--level-3-ink)}
.rate[data-level="4"]{background:var(--level-4);border-color:var(--level-4-line);color:var(--level-4-ink)}
/* The scale-aware bubble (contract assessment-5-levels §6.4): rp-level--<scale>-<n>, the scale from
   the answer's own "scale". Scale 5 takes the five colours, scale 4 the old four (R393). */
.rate.rp-level{font-weight:650}
.rate.rp-level--5-1{background:var(--rp5-1);border-color:var(--rp5-1-line);color:var(--rp5-1-ink)}
.rate.rp-level--5-2{background:var(--rp5-2);border-color:var(--rp5-2-line);color:var(--rp5-2-ink)}
.rate.rp-level--5-3{background:var(--rp5-3);border-color:var(--rp5-3-line);color:var(--rp5-3-ink)}
.rate.rp-level--5-4{background:var(--rp5-4);border-color:var(--rp5-4-line);color:var(--rp5-4-ink)}
.rate.rp-level--5-5{background:var(--rp5-5);border-color:var(--rp5-5-line);color:var(--rp5-5-ink)}
.rate.rp-level--4-1{background:var(--level-1);border-color:var(--level-1-line);color:var(--level-1-ink)}
.rate.rp-level--4-2{background:var(--level-2);border-color:var(--level-2-line);color:var(--level-2-ink)}
.rate.rp-level--4-3{background:var(--level-3);border-color:var(--level-3-line);color:var(--level-3-ink)}
.rate.rp-level--4-4{background:var(--level-4);border-color:var(--level-4-line);color:var(--level-4-ink)}
/* The bubble by the judgement's own scale (assessment-scale §5, R419): level4-n the four old colours
   of a judgement on the scale 1–4, level5-n the five of R78. The variables carry the dark variants
   (html[data-theme="dark"] and prefers-color-scheme:dark), so the digit keeps its contrast there. */
.rate.level4-1{background:var(--level-1);border-color:var(--level-1-line);color:var(--level-1-ink)}
.rate.level4-2{background:var(--level-2);border-color:var(--level-2-line);color:var(--level-2-ink)}
.rate.level4-3{background:var(--level-3);border-color:var(--level-3-line);color:var(--level-3-ink)}
.rate.level4-4{background:var(--level-4);border-color:var(--level-4-line);color:var(--level-4-ink)}
.rate.level5-1{background:var(--rp5-1);border-color:var(--rp5-1-line);color:var(--rp5-1-ink)}
.rate.level5-2{background:var(--rp5-2);border-color:var(--rp5-2-line);color:var(--rp5-2-ink)}
.rate.level5-3{background:var(--rp5-3);border-color:var(--rp5-3-line);color:var(--rp5-3-ink)}
.rate.level5-4{background:var(--rp5-4);border-color:var(--rp5-4-line);color:var(--rp5-4-ink)}
.rate.level5-5{background:var(--rp5-5);border-color:var(--rp5-5-line);color:var(--rp5-5-ink)}
/* Ej bedömbar: the reason under the pill, in the card's own reading text. */
.crit .critna{margin:0 0 8px;color:var(--text)}
/* Ej bedömbart: inte ett omdöme, utan en punkt samtalet inte gav något att bedöma. Den streckade
   ramen är samma språk som ett fält som saknas i kriterieredigeraren. */
.rate.na{border-style:dashed}
.crit p{margin:0;font-size:13px;color:var(--dim)}
.crit .critabout{margin-bottom:8px}
/* Nivåbeskrivningen som bedömningen vilar på: kriteriets egen skala, inte Claudes text. */
.crit .critlevel{border-inline-start:2px solid var(--line);padding-inline-start:10px;margin-bottom:8px;color:var(--text);opacity:.9}
/* Alla nivåbeskrivningar på skala 5 (R11, assessment-i18n §5): siffran i nivåns egen färg (samma
   variabler som bubblan, med mörka varianter), den givna nivån framhävd. */
.crit .critscale{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.crit .critscaleitem{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--dim);padding:3px 6px;border-radius:8px;border:1px solid transparent}
.crit .critscaleitem.is-given{color:var(--text);border-color:var(--line);background:var(--panel2)}
.crit .critscalenum{flex:none;min-width:20px;text-align:center;font-size:11px;font-weight:650;border-radius:10px;padding:1px 6px;border:1px solid var(--line)}
.critscalenum.rp-level--5-1{background:var(--rp5-1);border-color:var(--rp5-1-line);color:var(--rp5-1-ink)}
.critscalenum.rp-level--5-2{background:var(--rp5-2);border-color:var(--rp5-2-line);color:var(--rp5-2-ink)}
.critscalenum.rp-level--5-3{background:var(--rp5-3);border-color:var(--rp5-3-line);color:var(--rp5-3-ink)}
.critscalenum.rp-level--5-4{background:var(--rp5-4);border-color:var(--rp5-4-line);color:var(--rp5-4-ink)}
.critscalenum.rp-level--5-5{background:var(--rp5-5);border-color:var(--rp5-5-line);color:var(--rp5-5-ink)}
/* Markeringen vid en text ur reservordningen ("Visas på svenska") och vid ett AI-utkast: liten,
   men i sidans egen text- och panelfärg, så kontrasten håller i ljust och mörkt läge. */
.textlang,.textdraft{display:inline-block;font-size:11px;font-weight:600;line-height:1.4;padding:0 6px;border-radius:6px;border:1px solid var(--line);background:var(--panel2);color:var(--text);vertical-align:baseline;white-space:nowrap;font-style:normal}
.textdraft{border-style:dashed}
.crit .critsay{color:var(--text);margin-bottom:6px}
.crit .critwhy .lbl{color:var(--dim);font-weight:650}
.crit .critadvice{margin:10px 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.crit .crittips{margin:0;padding-inline-start:18px;font-size:13px;color:var(--dim)}
.crit .crittips li{margin:2px 0}
/* The judgement in fixed sections (R122): under the name and the level bubble, one subheading per
   section in the serif of the criterion names, Innebörd first; the text under it is the card's
   own reading text. Light and dark come from the same tokens as the rest of the card. */
.crit .critsec{margin-top:10px}
.crit .critsechead{margin:0 0 3px;font-family:var(--font-serif);font-size:13.5px;font-weight:600;color:var(--text)}
.crit .critsectext{color:var(--text);opacity:.9;line-height:1.5;white-space:pre-line}
.crit.critsections .critwhy{margin-top:6px}
/* Each criterion its own disclosure (R424): the head is a button the width of the card with the
   name and the level bubble, and the content under it is hidden while the criterion is folded in.
   The focus ring is the accent of the page in light and dark; no text lives here. */
.crit .crithead.crittoggle{width:100%;margin:0;padding:2px 0;background:none;border:0;border-radius:8px;font:inherit;color:var(--text);text-align:start;cursor:pointer}
.crit.is-open .crithead.crittoggle{margin-bottom:8px}
.crit .crithead.crittoggle:focus-visible{outline:2px solid var(--color-accent-text, var(--accent, currentColor));outline-offset:4px}
.crit .crithead.crittoggle:hover .t{text-decoration:underline;text-underline-offset:3px}
.crit .critend{display:inline-flex;align-items:center;gap:8px;flex:none}
.crit .critchev{width:8px;height:8px;border-inline-end:2px solid var(--dim);border-block-end:2px solid var(--dim);transform:rotate(45deg);margin-block-end:3px;transition:transform .15s}
.crit.is-open .critchev{transform:rotate(-135deg);margin-block:3px 0}
.crit .critbody[hidden]{display:none}
.crit .critlead{color:var(--text);line-height:1.5}
/* Pågående-läget: medan bedömningen tas fram står bara väntraden och den här noteringen kvar. */
.waitnote{font-size:12px;color:var(--dim);margin:-6px 0 14px}
.tips{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:18px}
.tips h3{margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}
.tip{display:flex;gap:8px;align-items:baseline;padding:4px 0;font-size:13px;flex-wrap:wrap}
.tip .arrow{color:var(--dim)}
.tip button{background:none;border:0;color:var(--color-accent-text, var(--accent, currentColor));font:inherit;cursor:pointer;text-decoration:underline;padding:0;text-align:start}
.tip .tiplvl{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:20px;padding:1px 8px}
.errcard{background:var(--panel);border:1px solid var(--bad);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.errcard .msg{margin:0;border:0;background:none;padding:0}
.errcard .retryrow{margin:10px 0 0}

/* ---------------------------------------------------------------- the chat */
/* The chips, the cards, the composer, the bubbles and the source list, with the mock-up's own
   measurements. The chat's bubbles are .turn and not the mock-up's .msg: .msg is already the
   notice line of this interface (the sign-in error, the waiting line), and one class cannot be
   both a panel with a border and a bare block. */
.chiplbl{font-size:12px;color:var(--dim);margin:0 0 8px;letter-spacing:.04em}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--dim);border-radius:20px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer}
.chip:hover{color:var(--text)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
/* Katalogens ämnesetiketter är av/på-knappar (R131): en vald syns på fyllning, kant och bock, inte
   på färg ensam, och tangentbordets fokus har en egen ring utanför knappen. */
#catalogTopics .chip.on{border-color:var(--color-accent-text);box-shadow:inset 0 0 0 1px var(--accent-ink)}
#catalogTopics .chip.on::before{content:"\2713\00a0";font-weight:700}
#catalogTopics .chip:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.chip[disabled]{opacity:.55;cursor:not-allowed}

/* ---------------------------------------------------------------- SAMTALSSTILSRADEN (R59, R60)

   Raden ligger ÖVERST i chattrutan — den är första elementet i kolumnen, före rubriken och före
   meddelandelistan — och ligger kvar där i både ett tomt och ett pågående samtal. Avstånden,
   kantlinjen och placeringen är design-tokens och inga lösa färger: den hårfina avdelaren under
   raden är --line, och marginalen under den är det som gör att raden aldrig lägger sig över
   rubriken eller flödet (mock-upens linje under stilraden,
   artifacts/mockup-ikoner-och-stilrad.svg, panel C). Därför fungerar den i ljust och i mörkt läge
   utan en egen regel per läge.

   KNAPPARNA är mock-upens: ett lugnt, lätt rundat fält med knapphål i kanten, inte chattens runda
   pillerform. Den valda bär accentens svagaste tvätt med accentens kant och accentens bläck —
   aktiv brandingprofils egna tokens (--color-accent-soft, --color-accent-text, som
   writeBrandTokens skriver per profil).

   IKONEN ligger närmast till vänster om namnet, samma 18 px och samma 8 px avstånd för alla tre.
   Den läggs på som en MASK (filen sätts av app.js ur serverns ikonbeteckning) och färgen är
   currentColor: ikonen tar därför knappens egen textfärg, och den valda stilens ikon framhävs på
   exakt samma sätt som dess namn — i accentfärgen — utan en enda regel som nämner en stil. */
/* R60: etiketten står på SAMMA rad som knapparna, till vänster om dem och centrerad i höjdled, och
   raden bryts snyggt på en smal skärm. Den är sticky överst i flödet, så den rullar inte bort med
   meddelandena; bakgrunden är sidans egen (--bg), så den fungerar i ljust och mörkt läge.
   Bugg 2026-10-27: raden är INTE en del av flödets 780 px-kolumn (.convoflow > *) — linjen under
   den går över samtalsytans hela bredd, med samma marginal (--convo-gutter) som meddelandefältet. */
.stylerow{max-width:none;margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
  position:sticky;top:-30px;z-index:3;background:var(--bg);
  box-shadow:0 -30px 0 0 var(--bg)}
.stylerow .chiplbl{margin:0;flex:0 0 auto}
.stylerow .chips{margin-bottom:0}
.stylerow .chip{display:inline-flex;align-items:center;gap:8px;border-radius:9px;padding:8px 14px;
                color:var(--text);background:var(--panel)}
.stylerow .chip:hover{border-color:var(--color-accent-text)}
.stylerow .chip.on{background:var(--color-accent-soft);border-color:var(--color-accent-text);
                   color:var(--color-accent-text, var(--accent, currentColor));font-weight:600}
.stylerow .styleico{display:block;width:18px;height:18px;flex:0 0 18px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:18px 18px;mask-size:18px 18px;
}
/* A filled symbol (the chili) is drawn inline in its own colours and is no mask. */
.styleico.filled{background-color:transparent}
/* A style whose icon is unknown draws nothing — never a solid square in the text colour (R58). */
.styleico.noicon{background-color:transparent}
.stylerow .styleico.filled svg{width:18px;height:18px;display:block}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;text-align:start;font:inherit;color:var(--text)}
.card:hover{border-color:var(--color-accent-text)}
.card h3{margin:0 0 4px;font-size:14px;font-weight:620}
.card p{margin:0;font-size:13px;color:var(--dim)}
/* The user's gold stars on a scenario card (R390, R418): 1–3 inline stars, nothing at 0. */
.card .rp-gold-stars{display:flex;gap:2px;margin:0 0 6px;line-height:0}
/* A completed card (1–3 gold stars, R423): a green frame, two pixels wide, kept on hover too. */
.card.rp-card--completed,.card.rp-card--completed:hover{border:2px solid var(--card-completed);padding:13px 15px}
.rp-gold-stars svg{width:16px;height:16px;flex:none}
.rp-gold-stars path{fill:var(--gold-star);stroke:var(--gold-star-line);stroke-width:1;stroke-linejoin:round}
@media (max-width:720px){.grid{grid-template-columns:1fr}}
/* the composer */
.composer{max-width:780px;margin:22px auto 0;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
/* The field is a textarea, because Shift + Enter puts a line break in it (R24): no resize, no scroll
   bar until it has grown as far as it may, and app.js sets its height from what is written in it
   so a second line is seen. The placeholder — the prompt, a gap of three spaces and the keyboard
   hint (R23) — keeps its spaces: a field does not collapse white space. */
.composer input,.composer textarea{flex:1;min-width:0;background:none;border:0;color:var(--text);font:inherit;outline:none}
.composer textarea{resize:none;overflow-y:auto;max-height:132px;padding:0;margin:0;display:block;line-height:1.5}
.round{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--dim);cursor:pointer;font-size:14px}
.round.send{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0}
/* Pilen i skicka-knappen: fet och i knappens egen textfärg, så att den syns lika tydligt i ljust och
   mörkt läge och i varje brandingprofil. Knappens form, storlek och färg är desamma som förut. */
.round.send .sendarrow{width:18px;height:18px;display:block;flex:0 0 auto}
.round[disabled]{opacity:.45;cursor:not-allowed}
/* DIKTERINGEN (R49, R50): mikrofonknappen är en vanlig .round tills den lyssnar — då bär den
   accenten, så att det syns på knappen själv att den är igång, och inte bara på raden under.
   Pulsen är ett tecken på att något pågår; den stängs av för den som bett om mindre rörelse. */
.round.dictate:not([disabled]){color:var(--text)}
.round.dictate svg{width:16px;height:16px;display:block;margin:0 auto}
.round.dictate.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  animation:micpulse 1.6s ease-in-out infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 var(--color-accent-soft)}
  50%{box-shadow:0 0 0 4px var(--color-accent-soft)}}
@media (prefers-reduced-motion:reduce){.round.dictate.on{animation:none}}
/* Texten intill mikrofonknappen (R50): den står alltid under fältet, på personens eget språk, och
   säger vart talet går. Diskret, men läsbar — den är en upplysning och inte en dekoration. */
.speechnote{margin:8px 0 0;font-size:12px;color:var(--dim)}
.speechstate{margin:6px 0 0;font-size:12px;color:var(--color-accent-text, var(--accent, currentColor))}
.speechstate.bad{color:var(--bad)}
/* Sköldraden under meddelandefältet (R64), i chatten och i rollspelet. */
.privacynote{margin:6px 0 0;font-size:12px;color:var(--dim);display:flex;align-items:center;
  flex-wrap:wrap;gap:4px}
.privacynote svg{width:14px;height:14px;flex:0 0 auto}
.privacynote .privacyinfo{background:none;border:0;padding:0;font:inherit;color:var(--color-accent-text, var(--accent, currentColor));
  text-decoration:underline;cursor:pointer}
dialog.ask.privacy p + p{margin-top:10px}
dialog.ask.privacy .rowbtns{margin-top:16px}
/* the thread */
/* Who said it is seen before it is read (R22): the Companion's answers — and the counterpart's
   lines in the role-play, which are the same .turn — stand at the left of the column and the
   person's own at the right, and a bubble takes at most 78 % of the column so that the step
   between the two sides is plain. The sender's label sits on its bubble's own side, which is what
   the align-items of the column does. */
.turn{margin-bottom:20px;display:flex;flex-direction:column;align-items:flex-start;
      max-width:min(78%,560px);margin-inline-end:auto}
.turn.mine{align-items:flex-end;margin-inline-end:0;margin-inline-start:auto}
.turn .who{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;
           display:flex;align-items:center;gap:6px}
/* The style's own symbol right after COMPANION (R59), the same one as in the style row. */
.turn .who .styleico{display:block;width:15px;height:15px;flex:0 0 15px;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:15px 15px;mask-size:15px 15px}
.turn .who .styleico.filled{background-color:transparent}
.turn .who .styleico.filled svg{width:15px;height:15px;display:block}
/* The style's name after its symbol, in the chosen language (R167). */
.turn .who .whostyle{min-width:0;overflow-wrap:anywhere}
.bub{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;max-width:100%;min-width:0}
.bub p{margin:0 0 10px}
.bub p:last-child{margin:0}
/* ---- SVARET SOM FORMATERAD TEXT (R48)
   Companion svarar i Markdown, och .bub.md är svaret ritat ur den: fetstil som fetstil,
   underrubriker som tydliga rubriker (det är de LÅNGA Eftertänksamma svaren som behöver dem),
   punkt- och numrerade listor som indenterade punkter med ett litet vertikalt avstånd EFTER
   listan, citat med sin egen kantlinje och kod i den fasta bredden. Rubrikerna är h2-h4 och tar
   bubblans egen textfärg — de är ett svars underrubriker och inte sidans egna, så de ligger nära
   brödtexten i storlek. Allt är tokens: ingen färg och inget avstånd står lös här. */
.bub.md h2,.bub.md h3,.bub.md h4{margin:16px 0 8px;line-height:1.3;color:var(--text);
                                 font-family:var(--font-serif)}
.bub.md>h2:first-child,.bub.md>h3:first-child,.bub.md>h4:first-child{margin-top:0}
.bub.md h2{font-size:17px;font-weight:620}
.bub.md h3{font-size:15px;font-weight:620}
.bub.md h4{font-size:14px;font-weight:620}
.bub.md ul,.bub.md ol{margin:0 0 12px;padding-inline-start:22px}
.bub.md li{margin:0 0 4px}
.bub.md li:last-child{margin-bottom:0}
.bub.md>ul:last-child,.bub.md>ol:last-child{margin-bottom:0}
.bub.md blockquote{margin:0 0 12px;padding:2px 0 2px 12px;border-inline-start:2px solid var(--line);
                   color:var(--dim)}
.bub.md blockquote>p:last-child{margin:0}
.bub.md code,.bub.md pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
                         font-size:.92em}
.bub.md code{background:var(--panel2);border-radius:4px;padding:1px 4px}
.bub.md pre{margin:0 0 12px;padding:10px 12px;background:var(--panel2);border:1px solid var(--line);
            border-radius:8px;overflow-x:auto}
.bub.md pre code{background:none;padding:0}
.bub.md>pre:last-child{margin-bottom:0}
.bub.md a{color:var(--color-accent-text, var(--accent, currentColor))}
/* En tabell (GFM): tunna kantlinjer i tokens, så den följer ljust och mörkt läge. Den är ett eget
   block som rullar i sidled när den är bredare än bubblan — på en smal skärm rullar tabellen, inte
   sidan. */
.md table.mdtable,.page table.mdtable{display:block;max-width:100%;width:max-content;overflow-x:auto;
  margin:0 0 12px;border-collapse:collapse;font-size:.95em;-webkit-overflow-scrolling:touch}
.md table.mdtable:last-child{margin-bottom:0}
.mdtable th,.mdtable td{border:1px solid var(--line);padding:6px 10px;text-align:start;
  vertical-align:top;min-width:6em;overflow-wrap:normal;word-break:normal}
.mdtable th{background:var(--panel2);font-weight:620;color:var(--text)}
.mdtable .al-left{text-align:left}
.mdtable .al-center{text-align:center}
.mdtable .al-right{text-align:right}
.turn.mine .bub{background:var(--panel2)}
/* The tone of the style the ANSWER was written in — the chat only, and never the person's own
   bubble, which stays neutral on both sides of the conversation. The role-play's bubbles carry no
   tone class at all and are therefore the plain panel colours. */
.turn.tone-brief .bub{background:var(--bub-brief);border-color:var(--bub-brief-line)}
.turn.tone-thoughtful .bub{background:var(--bub-thoughtful);border-color:var(--bub-thoughtful-line)}
.turn.tone-challenging .bub{background:var(--bub-challenging);border-color:var(--bub-challenging-line)}
/* a numbered reference in the answer: a button, so it can be reached with the keyboard too */
.cite{color:var(--color-accent-text, var(--accent, currentColor));cursor:pointer;font-size:12px;vertical-align:super;font-weight:700;text-decoration:none;background:none;border:0;padding:0 1px;font-family:inherit;line-height:1}
.cite:hover{text-decoration:underline}
.sources{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.srcgrp{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:10px 0 6px}
/* The whole row is the button that opens the source, so there is one thing to click and one to
   tab to; it still reads as the mock-up's row and not as a box with a border. */
.src{display:flex;gap:8px;align-items:baseline;font-size:13px;padding:3px 4px;width:100%;
     text-align:start;background:none;border:0;color:inherit;font-family:inherit;cursor:pointer;border-radius:7px}
.src:hover{background:var(--panel2)}
.src:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px}
.src .n{color:var(--color-accent-text, var(--accent, currentColor));font-weight:700;flex:0 0 auto}
/* one row of the source list: the number, the document, the level it came from and the place */
.src .what{flex:1;min-width:0;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.src .srcdoc{font-weight:620}
.src .srclvl{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:20px;padding:1px 8px;white-space:nowrap}
/* The level a source came from: the same filled-against-outlined difference as the chips of the
   Knowledge, so one accent is enough here too. */
.src .srclvl.lvl-learning_leader{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-contrast);font-weight:600}
.src .srclvl.lvl-organization{color:var(--color-accent-text, var(--accent, currentColor));border-color:var(--color-accent-text)}
.src .srcplace{color:var(--dim)}
/* A document that is no longer in Knowledge: named neutrally and quieter than one that is. */
.src .srcdoc[data-missing]{font-weight:400;font-style:italic;color:var(--dim)}
.src .srcopen{color:var(--color-accent-text, var(--accent, currentColor));font-size:12px;text-decoration:underline;white-space:nowrap}
/* R175 (chat/CITATIONS_CONTRACT.md §5): [[n]] in the answer is the small raised button [n] in the
   answer's own serif voice; a time-sensitive source carries its date muted after it (KRE-10).
   General knowledge is not marked at all. */
.turn:not(.mine) .bub .cite.scite{font-family:var(--font-serif)}
.cite.scite{display:inline-flex;align-items:baseline;gap:3px;margin-inline-start:1px;border-radius:4px}
.cite.scite:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px}
.cite.scite .scdate{color:var(--dim);font-weight:400;font-size:11px}
/* A source of Knowledge carries its module as a small bubble and its page after it (R175). */
.src .srcmod{font-size:11px;padding:1px 8px}
/* The levelled list is folded (R175): only the heading Källor and the chevron after it, with no
   line counting the sources. A click on the heading or the chevron unfolds the list by level; the chevron
   turns 180° while it is open. Logical properties only (R166), so it mirrors with the writing
   direction; the colours are the theme's tokens, so light and dark need nothing of their own. */
.sources.levelled .srchead{display:flex;align-items:center;gap:4px;margin-block-end:2px}
.sources.levelled .srctitle{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--dim);cursor:pointer;user-select:none}
.sources.levelled .srctitle:hover{color:var(--text)}
.sources.levelled .srcchev{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;inline-size:28px;block-size:28px;padding:0;border:0;border-radius:7px;background:none;color:var(--dim);cursor:pointer}
.sources.levelled .srcchev:hover{background:var(--panel2);color:var(--text)}
.sources.levelled .srcchev:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px}
.sources.levelled .srcchevicon{display:block}
.sources.levelled.is-open .srcchevicon{transform:rotate(180deg)}
@media (prefers-reduced-motion:no-preference){.sources.levelled .srcchevicon{transition:transform .2s ease}}
.sources.levelled .srcbody[hidden]{display:none}
.sources.levelled .srcbody{margin-block-start:4px}
@media (max-width:640px){.sources.levelled .srcchev{inline-size:40px;block-size:40px}}
/* The domain · type · date of a web source's row. */
.src .srcmeta{color:var(--dim);font-size:12.5px}
/* A web source's row is a link to the page (new tab) and reads like the other rows; a row without
   anything to open (no doc_ref, or an address that is not http/https) is a plain line. */
a.src{text-decoration:none;color:inherit}
a.src:hover .srcdoc{text-decoration:underline}
div.src{cursor:default}
div.src:hover{background:none}
.src .srcopen{flex:0 0 auto}
/* Row n after a click on [n] in the text (R175): the list unfolds and the row stays marked (until another
   [n] or the list is folded) in the accent's soft tint and
   an outline that keeps 3:1 against the bubble in both modes. */
.src.ssrc.is-target{background:var(--color-accent-soft);box-shadow:inset 0 0 0 2px var(--color-accent-text)}
@media (prefers-reduced-motion:no-preference){.src.ssrc{transition:background-color .3s ease,box-shadow .3s ease}}
/* While an answer is being written (R16): the waiting line and the stop button on one row, so the
   way to stop the answer stands where the person is already looking. */
.liverow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.liverow .msg{margin:0 0 14px}
.chatstop{margin:0 0 14px}
/* The answer's own bubble while it is written, and when it was stopped or failed. */
.writing{color:var(--dim);font-size:13px;margin:10px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.writing .caret{display:inline-block;width:7px;height:14px;background:var(--color-accent-text, var(--accent, currentColor));border-radius:1px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.astate{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;border-top:1px dashed var(--line);padding-top:10px;font-size:13px;color:var(--dim)}
.astate .badge{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:20px;padding:2px 10px;white-space:nowrap}
.astate.cancelled .badge{color:var(--dim)}
.astate.error .badge{color:var(--bad);border-color:var(--bad)}
.astate.truncated{margin-bottom:10px}
.astate.truncated .badge{color:var(--bad);border-color:var(--bad)}
.turn[data-status=cancelled] .bub{border-style:dashed}
.turn[data-status=error] .bub{border-color:var(--bad)}
/* the conversation list in the left column */
.convlist{overflow:auto;min-height:0}
/* Åldersgrupperna i historiken (R54): en underrubrik per grupp, mindre och tystare än lägets egen
   rubrik över listan. En grupp utan poster finns inte i markupen alls, så den tar ingen plats. */
.histgroup + .histgroup{margin-top:10px}
.histttl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);opacity:.8;padding:0 10px;margin:0 0 4px}
/* En post med tidpunkt (rollspelet): scenariot på första raden, tidpunkten under den. */
.conv.histtwo{white-space:normal;line-height:1.25}
.conv.histtwo .histname{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv.histtwo .histwhen{display:block;font-size:11px;color:var(--dim);opacity:.85}
.conv.convnew{color:var(--color-accent-text, var(--accent, currentColor))}
.conv.on{background:var(--panel2);color:var(--text);font-weight:600}
.convempty.err{color:var(--bad)}
/* One row of Mina samtal: the name opens the conversation, and a right-click on it opens the
   little menu whose one choice is Radera (R21). The confirmation takes the whole width of the row
   under the name. */
.convrow{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.convrow .conv{flex:1;min-width:0}
.convrow.on{background:var(--panel2);border-radius:8px}
.convrow.menuopen{background:var(--panel2);border-radius:8px}
.convconfirm{flex:0 0 100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--dim);padding:4px 10px 8px}
/* The little menu itself: it stands where the pointer was, over everything else, and is no wider
   than its one choice needs. */
.ctxmenu{position:fixed;z-index:60;min-width:170px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px;box-shadow:0 12px 32px var(--color-shadow)}
.ctxmenu button{display:flex;align-items:center;gap:9px;width:100%;text-align:start;background:none;border:0;color:var(--text);font:inherit;font-size:13px;padding:7px 10px;border-radius:7px;cursor:pointer}
.ctxmenu button:hover{background:var(--panel2)}
.ctxmenu button.danger{color:var(--bad)}
.ctxmenu button[aria-disabled="true"]{color:var(--dim);cursor:default;opacity:.6}
.ctxmenu button[aria-disabled="true"]:hover{background:none}
.ctxmenu button:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px}
/* The menu's top line is the conversation's timestamp (R21): not a choice, so it has no hover, and
   a line under it parts it from the two choices. */
.ctxmenu .ctxstamp{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--dim);padding:6px 10px 8px;margin-bottom:3px;border-bottom:1px solid var(--line);white-space:nowrap}
/* The three icons are files of the solution's own (static/icons/clock.svg, edit.svg, trash.svg),
   drawn in the same thin line as the menu's icons (stroke-width 1.6 on 24x24) and laid on as a
   mask, so their colour is tokens: the menu's grey (--color-icon, one per mode) at rest, the
   accent when the choice is pointed at or has focus. */
.ctxmenu .ico[data-icon]{
  display:block;width:16px;height:16px;flex:0 0 16px;
  background-color:var(--color-icon, currentColor);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:16px 16px;mask-size:16px 16px;
}
.ctxmenu .ico[data-icon="clock"]{-webkit-mask-image:var(--icon-clock);mask-image:var(--icon-clock)}
.ctxmenu .ico[data-icon="edit"]{-webkit-mask-image:var(--icon-edit);mask-image:var(--icon-edit)}
.ctxmenu .ico[data-icon="trash"]{-webkit-mask-image:var(--icon-trash);mask-image:var(--icon-trash)}
.ctxmenu button:not([aria-disabled="true"]):hover .ico[data-icon],
.ctxmenu button:not([aria-disabled="true"]):focus-visible .ico[data-icon]{background-color:var(--color-accent-text, var(--accent, currentColor))}
/* Ändra namn on the row (R21): the name is a text field in the row's own place and size. */
.convrow.renaming{background:var(--panel2);border-radius:8px}
.convrename{flex:1;min-width:0;width:100%;font:inherit;font-size:inherit;color:var(--text);background:var(--panel);border:1px solid var(--color-accent-text);border-radius:7px;padding:5px 8px;margin:1px 0;outline:none}
/* The open conversation's name beside the breadcrumb. */
.crumbs{display:flex;align-items:baseline;gap:8px;min-width:0}
.crumbtitle{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.crumbtitle::before{content:'·';color:var(--dim);margin-inline-end:8px}
/* The role-plays that are still going on, over the cards of the catalogue (R7): the status row is
   the interface's own ribbon, with Återuppta samtalet at its right end. */
#catalogOngoing .ribbon{align-items:center}
#catalogOngoing .rpopen{flex:1;min-width:0}
#catalogOngoing .btn{flex:0 0 auto}

/* ---------------------------------------------------------------- sign-in */
.auth{display:flex;flex-direction:column;height:100vh}
.authtop{min-height:58px;flex:0 0 auto;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:var(--panel)}
.authtop .brand{padding:0}
.authbody{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:48px 20px}
.authcard{width:100%;max-width:420px}
.authcard h1{font-size:24px}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:12px;color:var(--dim);margin-bottom:5px;letter-spacing:.04em}
.field input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;outline:none}
.field input:focus{border-color:var(--color-accent-text)}
.authcard .btn.primary{width:100%;margin-top:4px}
.msg{font-size:13px;border-radius:10px;padding:9px 12px;margin:0 0 14px;border:1px solid var(--line);background:var(--panel)}
.msg.err{color:var(--bad);border-color:var(--bad)}
.colorhex[aria-invalid="true"]{border-color:var(--bad);outline:1px solid var(--bad)}
.msg.ok{color:var(--text);border-color:var(--color-accent-text)}
/* Glömt lösenord? under inloggningen och Tillbaka under de två korten (auth/CONTRACT.md §6.2):
   en länk till utseendet, en knapp till sättet, med en träffyta på 44 px. */
.authlinks{margin:18px 0 0;text-align:center}
.linkbtn{background:none;border:0;padding:10px 6px;min-height:44px;font:inherit;font-size:14px;color:var(--color-accent-text, var(--accent, currentColor));text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{text-decoration-thickness:2px}
.linkbtn:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px;border-radius:6px}
#resetCard .note{margin:-8px 0 14px;font-size:12px;color:var(--dim)}
.fielderr{margin:-8px 0 14px;font-size:13px;color:var(--bad)}
#resetCard .field input[aria-invalid="true"]{border-color:var(--bad);outline:1px solid var(--bad)}
#resetInvalid .msg{margin-bottom:14px}
/* Inbjudningssidan (R103): uppgifterna, valet mellan lösenord och länk, och felet med nästa steg. */
.invitecard h1:focus{outline:none}
.invitecard h1:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:4px;border-radius:4px}
.invitefacts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 18px;font-size:14px}
.invitefacts dt{color:var(--dim)}
.invitefacts dd{margin:0;font-weight:560;overflow-wrap:anywhere}
.invitechoice{border:1px solid var(--line);border-radius:10px;padding:8px 14px;margin:0 0 14px}
.invitechoice legend{font-size:12px;color:var(--dim);padding:0 4px}
.invitepick{display:flex;gap:10px;align-items:center;min-height:44px;cursor:pointer}
.invitepick input{width:18px;height:18px;accent-color:var(--color-accent)}
.invitepick input:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.invitecard .field input[aria-invalid="true"]{border-color:var(--bad);outline:1px solid var(--bad)}
#inviteError p{margin:0}
#inviteError .invitenext{margin-top:6px;font-weight:620}
.invitelogin .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none}
#invDepartment:disabled{opacity:.75;cursor:not-allowed}

/* ---------------------------------------------------------------- the document viewer (R2, R76)
   FULL WIDTH: the viewer stands in main under the header and, while it is open, main carries
   .docfull, which hides .body — the message list, the composer and the privacy line — so the
   document takes the conversation's place at the whole width of the chat window. Closed it is not
   drawn at all. The text is read in a centred column of a readable length (about 80ch); a PDF
   page and a slide get a wider column and are scaled to it. */
.doc{display:none;background:var(--panel)}
.doc.show{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0}
main.docfull > .body{display:none}
.dochead{min-height:58px;display:flex;align-items:center;border-bottom:1px solid var(--line);padding:8px 20px;gap:14px}
.docback{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-weight:620}
.docwho{min-width:0;flex:1 1 auto}
.docinner{max-width:80ch;margin:0 auto}
.doc[data-format="pdf"] .docinner,.doc[data-format="pptx"] .docinner{max-width:min(100%,1100px)}
.dochead .t{font-size:13px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doclvl{font-size:11px;color:var(--dim)}
.docacts{display:flex;align-items:center;gap:4px;flex:0 0 auto}
#docDownload{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.docbody{padding:20px 24px 28px;overflow:auto;flex:1 1 auto;min-height:0}
/* Where in the document the reference points, over the sheet itself. It stays at the top while
   the document is scrolled, so the place that was cited is readable wherever the reader is. */
.docplace{position:sticky;top:0;z-index:1;background:var(--panel);font-size:11.5px;
          color:var(--dim);margin:0 0 8px;padding:4px 0}
/* The sheet a document is read on. It was a paper white of its own; it is the mode's own surface
   now, so the viewer is a panel of this interface in both modes and not a lit window in a dark
   room (R37). A PDF page keeps its own paper, below: that white belongs to the document. */
.page{background:var(--color-surface);color:var(--color-text);border:1px solid var(--line);border-radius:6px;padding:28px 32px;font-size:15px;line-height:1.7;min-height:420px}
@media (max-width:640px){.docbody{padding:12px}.page{padding:18px 16px}.dochead{padding:8px 12px;flex-wrap:wrap}}
.page h4{margin:0 0 10px;font-size:17px}
.page h5{margin:16px 0 6px;font-size:15.5px}
.page h5:first-child{margin-top:0}
.page p{margin:0 0 10px}
.page p:last-child{margin-bottom:0}
/* One section of a Markdown file, one paragraph of a Word document, one slide of a PowerPoint —
   and the one the reference points at, marked where it stands so the place is seen and not only
   scrolled to. */
.sec{padding:2px 0}
/* A Markdown file is read formatted, like the chat's answers (R48): the same blocks as .bub.md. */
.page ul,.page ol{margin:0 0 10px;padding-inline-start:22px}
.page li{margin:0 0 4px}
.page blockquote{margin:0 0 10px;padding:2px 0 2px 12px;border-inline-start:2px solid var(--line);color:var(--dim)}
.page code,.page pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.page code{background:var(--panel2);border-radius:4px;padding:1px 4px}
.page pre{margin:0 0 10px;padding:10px 12px;background:var(--panel2);border:1px solid var(--line);
          border-radius:8px;overflow-x:auto}
.page pre code{background:none;padding:0}
.sec.hit{background:var(--color-accent-soft);border-inline-start:3px solid var(--color-accent-text);border-radius:4px;padding:8px 10px;margin:8px -10px}
.sec .hittag{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-accent-text, var(--accent, currentColor));margin-bottom:4px}
/* The PDF page itself: drawn by pdf.js onto a canvas as wide as the sheet. */
.pdfbox{display:block;margin:-6px -4px 0;min-height:420px}
.pdfbox canvas{display:block;width:100%;height:auto;background:#fff}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;font-size:12px;color:var(--dim)}
.pager button{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:7px;padding:3px 9px;cursor:pointer;font:inherit}
.pager button:disabled{opacity:.45;cursor:default}

/* ------------------------------------------- rapporten av ett samtal (R52, R53)
   R52: meddelandefältet sträcker sig över samtalsytans hela bredd, med samma marginal mot kanterna
   som samtalsytan själv (--convo-gutter, samma som flödets). Knappen Gör en rapport av samtalet
   finns bara på ett ställe: som dokumentikon i knappraden under varje svar (.answeractions). */
.convo{position:relative}
.convofoot .foot{max-width:none;margin:0}
.convofoot .composer{max-width:none;width:100%;box-sizing:border-box}

/* Dialogen: samma ruta som appens övriga frågor (dialog.ask), bredare eftersom de tre varianterna
   står som egna val med sin beskrivning under namnet. Det valda valet bär accenten — aria-pressed
   är det som styr, så tangentbordet och skärmläsaren ser samma sak som ögat. */
dialog.ask.report{max-width:520px}
.reportform{margin:14px 0 4px}
.reportform .flabel{display:block;font-size:12px;font-weight:620;color:var(--dim);margin:0 0 6px}
.variants{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.variant{display:flex;flex-direction:column;gap:2px;text-align:start;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;color:var(--text);cursor:pointer}
.variant .vn{font-weight:620;font-size:13.5px}
.variant .va{font-size:12px;color:var(--dim)}
.variant[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.variant[aria-pressed="true"] .vn{color:var(--color-accent-text, var(--accent, currentColor))}
#reportTitle{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);
  color:var(--text);border-radius:10px;padding:9px 12px;font:inherit}
.reportform .formats{display:inline-flex;margin:0}
.reportform #reportFormatLabel{margin-top:14px}
.reportform .formats button{padding:7px 14px;font-size:13px}
.downloads{margin:12px 0 4px}
.downloads .rowbtns{margin:0}
dialog.ask.report .msg{margin:10px 0 0}
dialog.ask.report .jobwait{margin:12px 0 0;flex-wrap:wrap}
.reportready{position:fixed;inset-inline-end:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  max-width:calc(100vw - 36px);box-sizing:border-box;background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px 10px 14px;box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:14px}
.reportready[hidden]{display:none}
.reportready .rrt{font-weight:620}
.reportready.failed .rrt{color:var(--color-danger-text,#b42318);font-weight:500}

/* ------------------------------------------- the Branding tab's logotype fields (R43, R45)
   One box per part with its preview: the light versions on a dark ground, so a white logotype is
   seen, and the narrow mark at the size it has in the folded menu (34px) next to a larger one. */
.logogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:10px}
.logobox{border:1px solid var(--color-border);border-radius:10px;padding:12px;background:var(--color-surface)}
.logobox .note{font-size:12px;color:var(--dim);margin:0 0 8px}
.logoprev{display:flex;align-items:center;justify-content:center;min-height:72px;margin-bottom:10px;border-radius:8px;background:#FFFFFF;padding:10px}
.logobox.onDark .logoprev{background:#1A1A1A}
.logoprev img{max-height:56px;max-width:100%;width:auto}
.logoprev.markprev img{height:34px;width:34px;object-fit:contain}
.logoprev .none{font-size:12px;color:#8A8A8A}
.logobox input[type="file"]{max-width:100%;font-size:12px}

/* Personakatalogen (R68), scenariots personas och Byt motpart (R69, R70). Bara appens egna
   färgvariabler; ingen text bor här. */
.btn.danger{color:var(--bad);border-color:var(--bad)}
.pcathead{display:flex;gap:18px;align-items:flex-start;margin-bottom:6px}
.pcathead .pport{--portrait-w:96px;max-width:140px}
.pcathead .pport .note{font-size:11px;text-align:center}
.pcatcommon{flex:1 1 auto;min-width:0}
.pcatcommon .twocol{gap:0 18px}
.field input[readonly]{opacity:.7;cursor:not-allowed}
.field .req{font-style:normal;color:var(--bad)}
.tab.bad{color:var(--bad)}
.pcatlangs{margin:14px 0 16px}
.pcatform .field input.bad,.pcatform .field textarea.bad,.pcatform .field select.bad{border-color:var(--bad)}
.pcatrow .tagp.pstatus-approved{border-color:var(--color-accent-text)}
.rppersonas{border-top:1px solid var(--line);padding-top:14px;margin:6px 0 18px}
.rppick{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-bottom:18px}
.rppersona{display:flex;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.rppersona.on{border-color:var(--color-accent-text);box-shadow:inset 0 0 0 1px var(--color-accent-text)}
.rppersona input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;accent-color:var(--color-accent-text)}
.rppersona .pport{--portrait-w:40px}
.rppersona .pwho{flex:1 1 auto;min-width:0}
.rpstate{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.rpstate .collbl{margin-bottom:8px}
.rpswitch{display:flex;gap:8px;align-items:flex-end;margin-top:10px;flex-wrap:wrap}
.rpswitch .field{margin-bottom:0;min-width:220px}
@media (max-width:640px){.pcathead{flex-direction:column}.pcatcommon .twocol{grid-template-columns:1fr}}

/* ------------------------------------------------ the actions under an answer (R74, R75) */
/* Fyra små, lugna knappar under varje färdigt svar: Kopiera, Tumme upp, Tumme ner, Läs upp. Inga
   ramar och ingen fyllning i vila — bara ikonen (och ordet) i den dämpade grå som menyns ikoner
   vilar i (--color-icon); accenten som ink (--color-accent-text) när knappen pekas på, har fokus
   eller är vald (en tumme som har skickats, Läs upp medan den läser). Ikonerna är appens egna
   linjeikoner (static/icons/, stroke-width 1.6, viewBox 24) ritade som mask i knappens textfärg,
   så de följer aktiv brandingprofil i både ljust och mörkt läge utan en färg i filerna. */
.answeractions{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin-top:6px;font-family:var(--font-sans)}
.answeractions .actbtn{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:0 8px;border:0;border-radius:8px;background:none;color:var(--color-icon, currentColor);font:inherit;font-size:12px;cursor:pointer;transition:color .12s ease,background-color .12s ease}
.answeractions .actbtn .ico{display:block;width:16px;height:16px;flex:0 0 16px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px 16px;mask-size:16px 16px}
.answeractions .actbtn:hover,.answeractions .actbtn:focus-visible,.answeractions .actbtn[aria-pressed="true"]{color:var(--color-accent-text, var(--accent, currentColor));background-color:var(--panel2)}
.answeractions .actbtn:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px}
.answeractions .actbtn:disabled{opacity:.45;cursor:default;background:none;color:var(--color-icon, currentColor)}
.answeractions .ico[data-icon="copy"]{-webkit-mask-image:var(--icon-copy);mask-image:var(--icon-copy)}
.answeractions .ico[data-icon="thumbs-up"]{-webkit-mask-image:var(--icon-thumbs-up);mask-image:var(--icon-thumbs-up)}
.answeractions .ico[data-icon="thumbs-down"]{-webkit-mask-image:var(--icon-thumbs-down);mask-image:var(--icon-thumbs-down)}
.answeractions .ico[data-icon="speaker"]{-webkit-mask-image:var(--icon-speaker);mask-image:var(--icon-speaker)}
.answeractions .actnote{font-size:12px;color:var(--dim);margin-inline-start:6px}
.answeractions .actnote.bad{color:var(--bad)}
/* The dialog of the thumbs: the app's own question box (dialog.ask), with a comment field and the
   consent to share it. */
dialog.ask.answerfb{width:min(430px,92vw)}
dialog.ask.answerfb .flabel{display:block;font-size:13px;color:var(--dim);margin:4px 0 6px}
dialog.ask.answerfb textarea{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;font-size:13px;outline:none;resize:vertical}
dialog.ask.answerfb textarea:focus{border-color:var(--color-accent-text)}
dialog.ask.answerfb .fbshare{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:13px;color:var(--dim);cursor:pointer}
dialog.ask.answerfb .fbshare input{width:16px;height:16px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--color-accent-text)}
dialog.ask.answerfb .msg{margin:10px 0 0}
dialog.ask.answerfb .rowbtns{margin-top:16px}

/* Avsnittet Brandingprofiler i fliken Branding (R44): rubriken med plusknappen bredvid — en av
   appens tunna linjeikoner (static/icons/plus.svg) ritad som mask i knappens textfärg — och en
   rad per profil. Den aktiva raden bär accentens kant och märket Aktiv; den valda raden (källan
   för plusknappens kopia) en tunn inre ring. Bara appens egna tokens, så allt följer aktiv
   brandingprofil i båda lägena. */
.brandprofhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brandprofhead h2{margin:0}
.brandadd.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--color-icon, currentColor);cursor:pointer;transition:color .12s ease,border-color .12s ease}
.brandadd.iconbtn:hover,.brandadd.iconbtn:focus-visible{color:var(--color-accent-text, var(--accent, currentColor));border-color:var(--color-accent-text)}
.brandadd.iconbtn:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px}
.brandadd.iconbtn:disabled{opacity:.45;cursor:default}
.brandadd .ico{display:block;width:20px;height:20px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px 20px;mask-size:20px 20px}
.brandadd .ico[data-icon="plus"]{-webkit-mask-image:var(--icon-plus);mask-image:var(--icon-plus)}
.brandrows{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.brandrow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel2);cursor:pointer}
.brandrow:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px}
.brandrow.picked{box-shadow:inset 0 0 0 1px var(--color-accent-text)}
.brandrow.active{border-color:var(--color-accent-text)}
.brandrow .brandhead{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 260px}
.brandrow .brandname{font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.brandrow .brandbadge{font-size:11px;font-weight:620;letter-spacing:.04em;text-transform:uppercase;color:var(--color-accent-text, var(--accent, currentColor));border:1px solid var(--color-accent-text);border-radius:999px;padding:2px 8px;flex:0 0 auto}
.brandrow .brandscope{font-size:12px;color:var(--dim);flex:0 0 auto}
.brandrow .rowbtns{margin:0}
.brandrow .panelbox{flex:1 1 100%;margin:4px 0 0;cursor:default}
.palstrip{display:inline-flex;gap:2px;flex:0 0 auto}
.palbox{display:block;width:12px;height:18px;border-radius:3px;border:1px solid var(--line)}
#brandingTools{margin-top:12px}
/* Färgpaletten (R98): två kolumner, ljust läge till vänster och mörkt till höger, en rad per färg
   med etikett, en liten färgruta och ett smalt hexfält lagom brett för #RRGGBB. Accenten gäller
   båda lägena och står på en egen rad under kolumnerna. På en smal skärm staplas kolumnerna. */
.colorcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin-top:10px}
.colorcol h3.collbl{font-size:12px;letter-spacing:.04em;color:var(--dim);margin:0 0 8px;font-weight:620}
.colorcol.coloraccent{margin-top:12px;max-width:50%}
.colorrow{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.colorrow .colorlbl{flex:1 1 auto;min-width:0;font-size:13px}
.colorrow .colorswatch{flex:0 0 28px;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.colorrow .colorswatch::-webkit-color-swatch-wrapper{padding:2px}
.colorrow .colorswatch::-webkit-color-swatch{border:0;border-radius:4px}
.colorrow .colorswatch::-moz-color-swatch{border:0;border-radius:4px}
.colorrow .colorhex{flex:0 0 auto;width:calc(7ch + 22px);box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;padding:6px 8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--text);text-transform:uppercase}
.colorrow .colorhex:focus{border-color:var(--color-accent-text);outline:none}
.colorrow .colorhex[aria-invalid="true"]{border-color:var(--bad);outline:1px solid var(--bad)}
.colorrow.bad .colorlbl{color:var(--bad)}
@media (max-width:640px){.colorcols{grid-template-columns:1fr}.colorcol.coloraccent{max-width:none}}
#brandingEditor:not(:empty){margin-bottom:28px}
dialog.ask#brandingAddAsk .field{margin:14px 0 0}
dialog.ask#brandingAddAsk .msg{margin:10px 0 0}
dialog.ask#brandingAddAsk .rowbtns{margin-top:16px}

/* Fliken Organisation (R87): en inställningsrad med text till vänster och en brytare till höger.
   Brytaren är samma tokens som resten av sidan, så den följer ljust och mörkt läge och brandingen:
   av = den tysta ytan med hårstreck, på = accentens fyllnad. */
.orgname{color:var(--dim);font-size:13px;margin:0 0 14px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px;max-width:640px}
.settext{display:flex;flex-direction:column;gap:3px}
.setlabel{font-weight:620}
.sethelp{color:var(--dim);font-size:13px}
.switch{position:relative;flex:0 0 44px;width:44px;height:24px;padding:0;border-radius:12px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;transition:background .15s,border-color .15s}
.switch .knob{position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:var(--dim);transition:transform .15s,background .15s}
.switch[aria-checked="true"]{background:var(--color-accent);border-color:var(--color-accent)}
.switch[aria-checked="true"] .knob{transform:translateX(20px);background:var(--color-accent-contrast)}
.switch:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.switch:disabled{opacity:.55;cursor:default}

/* BIFOGADE FILER I MEDDELANDEFÄLTET (R80, R81, R83). Raden står överst i fältet (fältet radbryter,
   raden tar hela bredden), med samma kantlinje, rundning och typografi som fältet och färgerna ur
   aktiv brandingprofils tokens i ljust och mörkt läge. En bild är serverns miniatyr, ett dokument
   ett litet kort med namn och ikon. Ikonerna är appens linjeikoner ritade som mask i textfärgen. */
.composer{flex-wrap:wrap}
/* R82: raden rullar i sidled i stället för att radbryta och trycka ned fältet. Utrymmet överst och
   till höger är för Ta bort-knapparnas pekyta, som sticker ut en bit utanför filen. */
.composer .attachtop{flex:1 0 100%;min-width:0;max-height:40vh;max-height:40dvh;overflow-y:auto;
  overscroll-behavior:contain}
.composer .attachtop:not(:has(> :not([hidden]))){display:none}
.composer .attachtray{min-width:0;display:flex;flex-wrap:nowrap;gap:14px;margin:0 0 4px;
  padding:12px 12px 8px 2px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-padding-inline:12px;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--line)}
.composer .attachtray[hidden]{display:none}
.round.attach{display:flex;align-items:center;justify-content:center;color:var(--color-icon, currentColor);background:none}
.round.attach[hidden]{display:none}
.round.attach:hover,.round.attach:focus-visible{color:var(--color-accent-text, var(--accent, currentColor));border-color:var(--color-accent-text)}
.attach .ico,.attachface .ico{display:block;width:18px;height:18px;background-color:currentColor;
  -webkit-mask:no-repeat center/contain;mask:no-repeat center/contain}
.ico[data-icon="paperclip"]{-webkit-mask-image:var(--icon-paperclip);mask-image:var(--icon-paperclip)}
.ico[data-icon="camera"]{-webkit-mask-image:var(--icon-camera);mask-image:var(--icon-camera)}
.attachface .ico[data-icon="image"]{-webkit-mask-image:var(--icon-image);mask-image:var(--icon-image)}
.attachface .ico[data-icon="file-pdf"]{-webkit-mask-image:var(--icon-file-pdf);mask-image:var(--icon-file-pdf)}
.attachface .ico[data-icon="file-word"]{-webkit-mask-image:var(--icon-file-word);mask-image:var(--icon-file-word)}
.attachface .ico[data-icon="file-powerpoint"]{-webkit-mask-image:var(--icon-file-powerpoint);mask-image:var(--icon-file-powerpoint)}
.attachface .ico[data-icon="document"]{-webkit-mask-image:var(--icon-document);mask-image:var(--icon-document)}
.attachitem{position:relative;flex:0 0 auto;display:flex;flex-direction:column;gap:4px;max-width:220px;border-radius:10px;
  font-family:var(--font-sans);font-size:12px;color:var(--text)}
.attachface{border:1px solid var(--line);border-radius:10px;background:var(--panel2);overflow:hidden;color:var(--color-icon, currentColor)}
.attachface.pic{width:64px;height:64px;display:flex;align-items:center;justify-content:center}
.attachface.pic .attachthumb{width:100%;height:100%;object-fit:cover;display:block}
.attachface.doc{display:flex;align-items:center;gap:8px;padding:8px 30px 8px 10px;min-height:46px;min-width:150px}
.attachface.doc .ico{width:22px;height:22px;flex:0 0 22px;color:var(--color-accent-text, var(--accent, currentColor))}
.attachwords{display:flex;flex-direction:column;min-width:0}
.attachname{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.attachtype{color:var(--dim);font-size:11px}
/* Ta bort (R82): knappen är en osynlig pekyta på 44×44 px; krysset i mitten är den lilla runda
   knappen som syns, på samma plats som förut i bildens och kortets hörn. */
.attachremove{position:absolute;top:-12px;inset-inline-end:-12px;width:44px;height:44px;padding:0;border:0;
  background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;z-index:1}
.attachitem:has(.attachface.doc) .attachremove{top:-5px;inset-inline-end:-5px}
.attachx{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--dim);line-height:1;font-size:14px}
.attachremove:hover .attachx,.attachremove:focus-visible .attachx{color:var(--bad);border-color:var(--bad)}
.attachremove:focus-visible{outline:none}
.attachremove:focus-visible .attachx{outline:2px solid var(--color-accent-text);outline-offset:1px}
.attachitem:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.attachremovelabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.attachbar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.attachbar > span{display:block;height:100%;background:var(--accent);transition:width .15s linear}
.attachbar.busy > span{animation:attachbusy 1.2s ease-in-out infinite}
@keyframes attachbusy{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.attachbar > span{transition:none}.attachbar.busy > span{animation:none}}
.attachnote{margin:0;color:var(--dim);font-size:11px;line-height:1.35;max-width:220px}
.attachnote.bad{color:var(--bad)}
.attachitem[data-phase="failed"] .attachface{border-color:var(--bad)}
/* Filerna i den egna bubblan, överst. */
.bubattach{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;justify-content:flex-end}
.bubattach .attachopen{text-decoration:none;color:inherit;border-radius:10px}
.bubattach .attachopen:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.bubattach .attachface.pic{width:96px;height:96px}
.bubattach .attachface.doc{padding-inline-end:12px}
/* Släppytan över samtalet medan filer dras över det. */
.convo{position:relative}
.dropzone{position:absolute;inset:8px;z-index:30;display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--color-accent-text);border-radius:14px;background:var(--panel);opacity:.94;pointer-events:none}
.dropzone[hidden]{display:none}
.dropzone p{margin:0;font-size:16px;font-weight:600;color:var(--color-accent-text, var(--accent, currentColor))}

/* UPPLYSNINGEN OM BIFOGADE FILER (R86) och tangentbordsraden (R82): under filraden, i fältets egen
   typografi och färger. Upplysningen fälls ut av den första filen och av länken. */
.composer .attachinfo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0 0 6px;
  font-size:12px;color:var(--dim)}
.composer .attachinfo[hidden]{display:none}
.attachinfolink{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;margin:-8px 0;
  background:none;border:0;font:inherit;color:var(--color-accent-text, var(--accent, currentColor));text-decoration:underline;cursor:pointer}
.attachinfolink svg{width:15px;height:15px;flex:0 0 auto}
.attachinfolink:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px;border-radius:6px}
@media (pointer:coarse){.attachkeys{display:none}}
.attachprivacy{flex:1 0 100%;margin:4px 0 0;padding:10px 12px;border:1px solid var(--line);border-inline-start:3px solid var(--color-accent-text);
  border-radius:10px;background:var(--panel2);color:var(--text);font-size:13px;line-height:1.45}
.attachprivacy[hidden]{display:none}
.attachprivacy p{margin:0 0 8px}
.attachprivacy .attachprivacyhead{font-weight:600}
.attachprivacy .btn{min-height:44px;padding:6px 14px;font-size:13px}
.attachprivacy .attachprivacyact{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.attachprivacy .attachprivacyhide{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.attachprivacy .attachprivacyhide input{width:18px;height:18px;margin:0;accent-color:var(--color-accent-text);cursor:pointer}
.attachprivacy .attachprivacyhide label{cursor:pointer}
/* MOBIL (R82): bifoga-knappen och Ta foto har en pekyta på minst 44×44 px. */
@media (max-width:640px),(pointer:coarse){
  .round.attach{width:44px;height:44px;flex:0 0 44px}
  .composer{gap:6px}
}
/* En smal skärm (R82): fältet får en egen rad under filerna, och knapparna står under det —
   bifoga till vänster, mikrofon och skicka till höger — så att fältet inte krymper till en remsa. */
@media (max-width:480px){
  #chatForm > textarea,#sessionForm > textarea{flex:1 0 100%;order:1;padding:4px 2px}
  #chatForm > .round,#sessionForm > .round{order:2}
  #chatForm > .round.dictate,#sessionForm > .round.dictate{margin-inline-start:auto}
}

/* Produkter och Tenants (R88, R89, R95): the two catalogue lists are rows of cells in a grid, the
   form is Knowledge's own .panelbox and .field, and a customer's features are text with
   the "inherited" label — never checkboxes. */
.catlist{margin:0 0 24px}
.catrow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,.7fr) auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:8px;font-size:13px}
#prodDocs .catrow{grid-template-columns:minmax(0,1.6fr) minmax(0,.6fr) auto}
/* Listorna i sidor (R107, static/admin/lists.js): kolumnerna sätts per lista i --lst-cols. */
#usrList .catrow,.lsttable .catrow{grid-template-columns:var(--lst-cols,minmax(0,1fr))}
.lstbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:0 0 16px}
.lstbar .field{margin:0;min-width:150px;flex:0 1 190px}
.lstbar .lstsearch{flex:1 1 240px}
.lstbar input[type=search]{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;outline:none;min-height:44px;box-sizing:border-box}
.lstbar select,.lstbar .btn,.lstpager .btn{min-height:44px}
.lstsort{background:none;border:0;padding:4px 0;color:inherit;font:inherit;cursor:pointer;text-align:start}
.lstsort:hover,.lstsort:focus-visible{color:var(--text);text-decoration:underline}
.lstpager{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin:-12px 0 24px;flex-wrap:wrap}
.lstinfo{color:var(--dim);font-size:13px}
.lstacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.agrfacts{display:grid;gap:10px;margin:0 0 16px}
.agrfact{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:12px}
.agrfact dt{color:var(--dim)}
.agrfact dd{margin:0;font-weight:600}
#usrList .catact{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
#usrList .usrlevel{font:inherit;font-size:12px;width:100%}
.catrow.cathead{background:none;border-color:transparent;padding-top:0;padding-bottom:0;color:var(--dim);font-size:12px}
.catcell{min-width:0;overflow:hidden;text-overflow:ellipsis}
.catcell.catname{font-weight:620}
.catact{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
/* Enterprise-tenants (R119, R121): rubriken med plusknappen bredvid — kompakt, 44×44 px att
   träffa, bara temats färger (ljust och mörkt) och en synlig fokusring — och en lista där varje
   kolumnrubrik står vänsterställd rakt ovanför sina vänsterställda värden. */
.tenhead{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.tenhead h1{margin:0}
.tenadd.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--color-icon, currentColor);font:inherit;font-size:24px;font-weight:500;line-height:1;cursor:pointer;transition:color .12s ease,border-color .12s ease}
.tenadd.iconbtn:hover,.tenadd.iconbtn:focus-visible{color:var(--color-accent-text, var(--accent, currentColor));border-color:var(--color-accent-text)}
.tenadd.iconbtn:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
#tenList .catcell,#tenList .lstsort{text-align:start;justify-self:stretch}
#tenList .cathead .lstsort{display:block;width:100%}
#tenDeleteUsers{margin-top:6px;font-weight:600;color:var(--text)}
#tenDeleteText{margin-top:8px}
dialog.ask#tenDeleteAsk .msg{margin:10px 0 0}
/* Ta bort en produkt (R195): samma ruta; ett stopp listar de fyra talen i felrutan. */
#prodDeleteText{margin-top:8px}
dialog.ask#prodDeleteAsk .msg{margin:10px 0 0}
dialog.ask#prodDeleteAsk .msg p{color:inherit}
dialog.ask#prodDeleteAsk .proddelcounts{margin:6px 0;padding-inline-start:18px;font-weight:600}
.catmove{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--dim)}
.catmove select{background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;padding:4px 8px}
.catpair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.catset{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 14px}
.catset legend,.catlabel{font-size:12px;color:var(--dim);padding:0 4px}
.catcheck{display:flex;gap:10px;align-items:center;min-height:44px;cursor:pointer}
.catcheck input{width:18px;height:18px;accent-color:var(--color-accent)}
.cattag{display:inline-block;margin-inline-start:8px;font-size:11px;color:var(--color-accent-text, var(--accent, currentColor));border:1px solid var(--color-accent-text);border-radius:20px;padding:2px 10px}
.catfeatures{margin:8px 0 0;padding-inline-start:18px}
.catbtns{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}
.catbtns .field{flex:1;margin:0}
.field input[type=email]{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;outline:none}
/* Status, platser, Delegering och Revisionslogg (R101, R104–R106). */
.statusbadge{display:inline-block;font-size:12px;font-weight:600;line-height:1.3;border:1px solid currentColor;border-radius:20px;padding:2px 10px;white-space:nowrap;background:var(--panel2);color:var(--text)}
.statusbadge[data-status="invited"]{background:var(--status-invited);color:var(--status-invited-ink)}
.statusbadge[data-status="active"]{background:var(--status-active);color:var(--status-active-ink)}
.statusbadge[data-status="deactivated"]{background:var(--status-deactivated);color:var(--status-deactivated-ink)}
.statusbadge[data-status="deleting"]{background:var(--status-deleting);color:var(--status-deleting-ink);border-style:dashed}
.statusbadge[data-status="deleted"]{background:var(--status-deleted);color:var(--status-deleted-ink)}
.statusbadge[data-status="pending_payment"]{background:var(--status-pending-payment);color:var(--status-pending-payment-ink)}
/* R102: en åtgärd som den sista aktiva Enterprise-admin inte får (avstängd) och varför. */
.usrlasthelp{display:block;font-size:12px;opacity:.8;margin-top:4px;white-space:normal}
.lstacts .rowbtn[disabled],.usrlevel[disabled]{opacity:.55;cursor:not-allowed}
/* R101: Delegeringens enda brytare. */
.dlgswitch{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin:0 0 16px;background:var(--panel2)}
.dlgswitch input{width:18px;height:18px}
/* Betalsidan (R105, CONTRACT_roles.md §6). */
.paycard .statusbadge{margin:4px 0 12px}
.catcell.usrstatus{overflow:visible}
.usrstatus{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.usrdue{font-size:11px;color:var(--dim)}
.usrseats{display:inline-block;font-size:14px;font-weight:600;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 14px;margin:-8px 0 16px}
.usrseats[data-full="true"]{border-color:var(--status-deleting-ink)}
.usrconfirmname{font-weight:620;margin:0 0 4px}
#dlgList .catrow{grid-template-columns:minmax(0,2fr) minmax(150px,1fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1fr)}
.dlgvalue[data-value="no"] .dlgword{color:var(--dim)}
.dlgvalue[data-value="delegable"] .dlgword{color:var(--color-accent-text, var(--accent, currentColor));font-weight:600}
.dlgtoggle{display:flex;gap:10px;align-items:center;min-height:44px;cursor:pointer}
.dlgtoggle input{width:20px;height:20px;accent-color:var(--color-accent)}
#audList .catrow{grid-template-columns:minmax(130px,.9fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr)}
.audfilter{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:0 0 16px}
.audfilter .field{margin:0;min-width:160px}
.audfilter input[type=date],#tenSeats{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;outline:none}
#tenSeats[aria-invalid="true"]{border-color:var(--bad)}
#tenSeatsHint{display:block;margin-top:6px}
@media (max-width:760px){
  .catrow,#prodDocs .catrow,#usrList .catrow,.lsttable .catrow,#dlgList .catrow,#audList .catrow{grid-template-columns:1fr}
  .catrow.cathead{display:none}
  .catact{justify-content:flex-start}
  .catpair{grid-template-columns:1fr}
}

/* ------------------------------------------------- Mina dokument (R91)
   Knowledge's own panel, progress bar, chips and row buttons; the drop area is the chat's
   dashed accent, and every control is at least 44 px high. */
.sidefoot .nav{min-height:44px}
.side .ico[data-icon="document"]{-webkit-mask-image:var(--icon-document);mask-image:var(--icon-document)}
.mdprivate{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-inline-start:3px solid var(--color-accent-text);border-radius:10px;padding:10px 14px;margin:-12px 0 20px}
.mddrop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:2px dashed var(--line);border-radius:12px;padding:22px 16px;margin-bottom:12px;transition:border-color .12s ease,background-color .12s ease}
.mddrop p{margin:0}
.mddrop .note{margin:0 0 6px}
.mddrop.over{border-color:var(--color-accent-text);background:var(--panel2)}
.mdchoose{min-height:44px;min-width:44px}
.mdchoose:focus-visible,.mdrow .rowbtn:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.mdfile{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mdrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.8fr) minmax(0,.6fr) minmax(0,1fr) minmax(0,.8fr) auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 16px;margin-bottom:8px;font-size:13px}
.mdrow.mdhead{background:none;border-color:transparent;padding-top:0;padding-bottom:0;color:var(--dim);font-size:12px}
.mdcell{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mdcell.mdtitle{font-weight:620}
.mdcell.mdacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;overflow:visible}
.mdrow .rowbtn{min-height:44px;min-width:44px;padding:6px 14px}
.mdask{font-size:12px;color:var(--text)}
@media (max-width:760px){
  .mdrow{grid-template-columns:1fr}
  .mdrow.mdhead{display:none}
  .mdcell[data-label]::before{content:attr(data-label) ': ';color:var(--dim);font-weight:400}
  .mdcell.mdacts{justify-content:flex-start}
}

/* Reservspråk för Kunskap (R94): superadmins ordnade lista i fliken Kunskap. Bara
   temats variabler, så ljust och mörkt läge följer med; varje knapp har en synlig fokusram. */
.fblist{list-style:none;margin:8px 0 6px;padding:0;border-top:1px solid var(--line)}
.fbrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border-bottom:1px solid var(--line)}
.fbrow:hover{background:var(--panel2)}
.fbpos{color:var(--dim);font-size:12px;min-width:2ch;text-align:end}
.fbname{font-weight:620;font-size:14px;color:var(--text)}
.fbcode{color:var(--dim);font-size:12px}
.fbtools{display:flex;gap:6px;margin-inline-start:auto;flex-wrap:wrap}
.fbbtn{min-height:32px}
.fbbtn:disabled{opacity:.45;cursor:default}
.fbbtn:focus-visible,#kbFallbackAdd:focus-visible,#kbFallbackSave:focus-visible,.fbpick:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.fbaddlabel{font-size:13px;color:var(--dim)}
.fbown{color:var(--text)}

/* ------------------------------------------- Produkter: nivåer och info-rutan (R111, R65) */
.cattier{line-height:1.45}
.cattier + .cattier{margin-top:4px}
.tierlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:10px 0 14px}
.tiercard{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--panel2)}
.tiercard .catset{margin:8px 0 8px}
.tiercard .catbtns{margin:0}
.tiernew{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.tiernew .field{flex:1 1 220px;margin:0}
.infotabs{display:inline-flex;margin:4px 0 14px}
.infotabs button{padding:7px 14px;font-size:13px}
.inforow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;gap:10px;align-items:end;margin:0 0 8px}
.inforow .field{margin:0}
@media (max-width:640px){.inforow{grid-template-columns:1fr}}
#prodInfoBody{width:100%;box-sizing:border-box;resize:vertical}
dialog.ask.about .aboutbody p{white-space:pre-line}

/* ------------------------------------------- Logotyp i fyra delar (R109): en underrubrik per läge */
.logomode + .logomode{margin-top:18px}
.logomodehead{font-size:14px;font-weight:620;margin:14px 0 0}

/* Min profil (R113, R129): the picture beside its buttons, and the four fields two by two. */
.pfavatar{display:flex;align-items:flex-start;gap:18px}
.av.pfav{width:88px;height:88px;flex:0 0 88px;font-size:28px;font-weight:600;overflow:hidden}
.pfavside{min-width:0;flex:1 1 auto}
.pfavside .note{margin-bottom:10px}
.pfavbtns{display:flex;flex-wrap:wrap;gap:8px;position:relative}
.pfavbtns .btn{min-height:40px}
.panelbox .pfavbtns .btn.primary{margin-top:0}
.pfgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.pffield input,.pffield select{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;outline:none;min-height:42px}
.pffield input:focus,.pffield select:focus{border-color:var(--color-accent-text)}
.pfemail{margin-top:2px}
.pfactions{display:flex;gap:10px}
.pfavside .msg,.pfform .msg{margin-top:12px}
@media (max-width:640px){.pfgrid{grid-template-columns:1fr}.pfavatar{flex-direction:column}}

/* Tenantens Kunskap (R116): rutan #tenKbBox under Enterprise-listan. Bara temats tokens, så
   den följer ljust och mörkt läge; varje knapp och rullgardin har en träffyta på minst 44 px. */
#tenList .lstacts .rowbtn{min-height:44px;min-width:44px;padding:6px 12px}
.tenkb{margin-top:8px}
.tenkbhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tenkbhead h2{margin:0;color:var(--text)}
.tenkbhead h2:focus{outline:none}
.tenkbhead h2:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.tenkb .btn,.tenkb .rowbtn,.tenkb select,.tenkb input[type=text],.tenkb input[type=file]{min-height:44px}
.tenkb .rowbtn{min-width:44px;padding:6px 12px}
.tenkb .btn:focus-visible,.tenkb .rowbtn:focus-visible,#tenList .lstacts .rowbtn:focus-visible,
dialog.ask#tenKbAsk .btn:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.tenkb .catmove select{min-height:44px;background:var(--panel2);color:var(--text);border-color:var(--line)}
.tenkb .catbtns{align-items:flex-end}
.tenkb .catbtns .btn{flex:0 0 auto}
#tenKbFolders .catrow{grid-template-columns:minmax(0,1.6fr) minmax(0,.6fr) auto}
#tenKbDocs .catrow{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.6fr) auto}
.tenkb .catfolder{color:var(--dim)}
dialog.ask#tenKbAsk .btn{min-height:44px}
@media (max-width:760px){
  #tenKbFolders .catrow,#tenKbDocs .catrow{grid-template-columns:1fr}
}
/* Avdelningsspecifik kunskap (R217): rutan #depKbBox under listan i fliken Avdelningar. Samma ruta
   som #tenKbBox (.tenkb ovan); här bara det som avdelningens ruta har utöver den — en förloppsrad
   per fil, fältet som byter namn och språkväljaren. Bara temats tokens (ljust och mörkt läge),
   logiska egenskaper och rader som bryts, så att 40 % längre text får plats; minst 44 px träffyta. */
#depList .catact .rowbtn{min-block-size:44px;min-inline-size:44px;padding-block:6px;padding-inline:12px}
#depList .catact .rowbtn:focus-visible,
dialog.ask#depKbAsk .btn:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
dialog.ask#depKbAsk .btn{min-block-size:44px}
#depKbFolders .catrow{grid-template-columns:minmax(0,1.6fr) minmax(0,.6fr) auto}
#depKbDocs .catrow{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.6fr) auto}
.depkb .catact{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.depkb .kbfiles{margin-block:4px 16px}
.depkb .kbfile{margin-block:0 10px}
.depkb .kbfilename{overflow-wrap:anywhere;color:var(--text)}
.depkb .kbfileerr{color:var(--bad);font-weight:600;white-space:normal;text-align:end}
.depkb .kbfile-failed .ubar{background:var(--bad)}
.depkb .kbrename{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.depkb .kbrename input{flex:1 1 12rem;min-inline-size:0;min-block-size:44px;padding-inline:10px;
  background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px}
.depkb .kbformat{margin-inline-start:4px}
@media (max-width:760px){
  #depKbFolders .catrow,#depKbDocs .catrow{grid-template-columns:1fr}
  .depkb .catact{justify-content:flex-start}
}
/* Rollspelskatalogens produktväljare, produkter, standardkriterier (R123–R125). */
.srlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rpfilter{margin:0 0 12px;max-width:320px}
.rpfilter select{width:100%;min-height:44px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--text);font:inherit}
.rpfilter select:focus-visible,.catcheck input:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.rpproducts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 14px}
.rpdefaults{margin-top:28px}
#s-admin-default-criteria .rpdefaults{margin-top:0}
.critform .col.bad{border-inline-start:3px solid var(--bad);padding-inline-start:10px}
/* Standardkriterierna direkt i listan (R125): fälten i raden, nivåerna fällbara, felet vid fältet. */
.rpdefrow .critinline{margin-top:8px}
.rpdefrow .critinline .field{display:block;margin-bottom:8px}
.rpdefrow .critinline .field>span{display:block;font-size:12px;color:var(--dim);margin-bottom:3px}
.rpdefrow .critlevels>summary{cursor:pointer;font-size:13px;color:var(--dim);margin:2px 0 6px}
.rpdefrow .critfielderr{margin:4px 0 0}
.rpdefrow .rpdefsaid{margin:4px 0 0;min-block-size:1em}
.rpdefrow.new{border-style:dashed}
/* Ett kriterium med fem nivåer (static/admin/criteria5.js, R125, R26, R410): temats färger, så att
   ljust och mörkt läge följer med. */
.crit5{margin-top:8px}
.crit5 .crit5field{display:block;margin-bottom:8px}
.crit5 .crit5label{display:block;font-size:12px;color:var(--dim);margin-bottom:3px}
.crit5levels>summary{cursor:pointer;font-size:13px;color:var(--dim);margin:2px 0 6px}
.crit5levels[open]>summary{color:var(--fg, inherit)}
.crit5ai{font-size:11px;border:1px dashed var(--line);border-radius:20px;padding:0 7px;color:var(--dim);white-space:nowrap}
.crit5badge{display:inline-block;font-size:11px;font-weight:600;border:1px solid var(--color-accent-text, currentColor);color:var(--color-accent-text, inherit);border-radius:20px;padding:1px 8px;white-space:nowrap;vertical-align:middle}
.crit5err{margin:4px 0 0}
.crit5range{font-size:12px;color:var(--dim);margin-inline-start:8px}
.crit5levels[data-invalid]>summary{color:var(--bad)}
.crit5note{margin:6px 0 10px}
.crit5box{margin-block:18px}
.crit5defaults{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.crit5actions{margin-top:12px}
.crit5preview p{margin:6px 0}
.crit5stalelist{margin:4px 0 8px;padding-inline-start:20px;font-size:13px;color:var(--dim)}
.critlang{font-size:13px;font-weight:620;margin:0 0 8px;color:var(--dim)}
/* R130: paketets funktioner under två underrubriker */
.catgroup+.catgroup{margin-top:10px}
.catsub{font-size:13px;font-weight:600;margin:6px 0 2px;color:var(--text)}
/* R114: sidbakgrunden som gradient, per läge */
body{background-image:var(--bg-image,none);background-attachment:fixed}
.colorgrad{margin:2px 0 8px}
.colorgrad .gradrows{padding-inline-start:12px;border-inline-start:2px solid var(--line)}
/* R127: produktväljaren bredvid språkväljaren */
.prodpick{display:inline-flex;align-items:center;gap:6px}
.prodpick .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.prodpick select{height:30px;border:1px solid var(--line);border-radius:8px;background:var(--panel, transparent);color:var(--text);font:inherit;font-size:12px;padding:0 6px;max-width:180px}
/* Kundtypsväljaren (R219): Direct / Enterprise, smalare än produkt- och kundväljaren bredvid. */
.prodpick select.custtype{max-width:120px}
.prodpick select:disabled{opacity:.6;cursor:progress}
/* Enterprise utan kunder (R231): samma väljare, med tomtexten i kursiv och ingen väntmarkör. */
.prodpick select.empty:disabled{cursor:default;font-style:italic}
@media (max-width:640px){.prodpick select{max-width:120px}.prodpick select.custtype{max-width:96px}}
.prodpick select:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:1px}

/* R152: den aktiva produktens variantetikett bredvid ihopfällningsknappen — samma versaler,
   spärrning och dämpade färg som rubriken Mina samtal (.secttl), men större. Färgen är en token,
   så den följer ljust och mörkt läge (R37). */
/* R152 (products/CONTRACT.md §6.4): the label is always ONE line and has the whole row up to the
   double-arrow button. Unfolded the row is a size container, so the label's size follows the row:
   14px where there is room, a little smaller in the narrowest menu (220px, R79), where LEDARE OCH
   CHEF and FÖRTROENDEVALD still fit whole; anything longer ends in an ellipsis, with the whole
   text in title. Folded the row is no container (it would shrink to nothing around the button). */
.siderow{display:flex;align-items:center;gap:6px;margin:0 0 10px}
html:not([data-sidebar="collapsed"]) .siderow{container-type:inline-size}
.siderow .sidetoggle{margin:0 0 0 auto;flex:none}
.sidevariant{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-inline-start:4px;font-size:14px;font-size:clamp(12px,6.6cqi,14px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);line-height:30px}
.sidevariant[hidden],
html[data-sidebar="collapsed"] .sidevariant{display:none}
html[data-sidebar="collapsed"] .siderow .sidetoggle{margin:0 auto}
/* R142: rollerna i fliken Produkter. */
.rolebox{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 16px}
.rolehead{display:flex;align-items:center;gap:6px}
.rolenames{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.roletabs{display:flex;gap:6px;margin:8px 0}
.roletabs [aria-pressed="true"]{border-color:var(--color-accent-text);color:var(--color-accent-text, var(--accent, currentColor))}
.rolemandate{width:100%;box-sizing:border-box}
.rolehelp{display:flex;justify-content:space-between;gap:8px}
.rolesub{margin:14px 0 6px;font-size:14px}
.roleprices{border-collapse:collapse;font-size:13px}
.roleprices th,.roleprices td{border-bottom:1px solid var(--line);padding:4px 12px 4px 0;text-align:start}
.tierprice[aria-invalid="true"],#prodManagerPrice[aria-invalid="true"]{border-color:var(--color-danger,#b00020)}
.kbwarn{display:inline-block;margin-inline-start:6px;font-size:11px;padding:1px 8px;border-radius:20px;border:1px solid var(--color-warning,#a15c00);color:var(--color-warning,#a15c00)}
.msg.warn{color:var(--color-warning,#a15c00);border-color:var(--color-warning,#a15c00)}

/* ------------------------------------------- svarsraden infälld/utfälld och tänksnurran (R153, R155) */
.answeractions .actlabel{display:none}
.answeractions.expanded .actlabel{display:inline}
.answeractions .acttoggle{margin-inline-start:auto}
/* Gör en rapport av samtalet (R52): en tunn dokumentikon, ritad här (inget hämtas), i samma ruta
   24×24 och med samma linjebredd 1,6 som Kopiera, tummarna och Läs upp. */
.answeractions .ico[data-icon="report"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 3.5v4h4M8.5 12.5h7M8.5 16h5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 3.5v4h4M8.5 12.5h7M8.5 16h5'/%3E%3C/svg%3E")}
.answeractions .ico[data-icon="chevron"]{-webkit-mask-image:var(--icon-chevron-down);mask-image:var(--icon-chevron-down);transform:rotate(-90deg);transition:transform .15s ease}
.answeractions.expanded .ico[data-icon="chevron"]{transform:rotate(90deg)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.turn .who .thinkspin{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex:0 0 15px;position:relative}
.turn .who .thinkdot{display:block;width:12px;height:12px;box-sizing:border-box;border-radius:50%;border:2px solid var(--line);border-top-color:var(--color-accent-text);animation:jobspin .9s linear infinite}
@media (prefers-reduced-motion:reduce){
  .turn .who .thinkdot{animation:none;border-top-color:var(--line);background:radial-gradient(circle,var(--color-accent-text) 0 3px,transparent 3.5px)}
  .answeractions .ico[data-icon="chevron"]{transition:none}
}

/* Rollspelskatalogen (R135, R136, R138, R139): små rubriker, persona på kortet, de två knapparna. */
.smallhead{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:620;margin:0 0 8px}
/* Under the short description (R199): the space sits above the row, and the line wraps beside the
   picture instead of pushing the card wider on a narrow screen. */
.cardpersona{display:flex;align-items:center;gap:8px;margin:8px 0 0;min-width:0}
.cardpersona .pframe.pavatar{flex:0 0 auto}
.pframe.pavatar{--portrait-w:28px;width:28px;height:28px;aspect-ratio:1;border-radius:50%}
.cardpersona .pframe[data-has-image="true"] .pdummy-light,.cardpersona .pframe[data-has-image="true"] .pdummy-dark{display:none}
.cardpersona .pframe[data-has-image="false"] .pphoto{display:none}
.cardpersonaline{font-size:11px;color:var(--dim);line-height:1.3;min-width:0;overflow-wrap:anywhere}
.listbtns{display:inline-flex;gap:8px;flex-wrap:wrap}

/* Kunskaps samlade vy (R157/R158): en enda kolumn (R196) — uppladdningsytan och filraderna överst i
   vyns hela bredd, katalogträdet under dem. Bara logiska egenskaper (R166) och appens egna färger,
   så att ljust och mörkt läge följer med. */
.kbt-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-block-end:10px}
.kbt-crumb{margin-inline-start:auto;min-inline-size:0;overflow-wrap:anywhere}
.kbt-levelpick{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--dim);min-inline-size:0}
.kbt-levelpick select{max-inline-size:100%}
/* Väljaren Nivå och, bredvid den, Enterprise-tenanten och avdelningen (R299–R301): samma utseende
   som adminvyns andra små väljare, ur appens egna färger i ljust och mörkt läge. */
.kbt-levelset{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-inline-size:0}
.kbt-levelpick[hidden]{display:none}
.kbt-levelpick select{background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;padding-block:4px;padding-inline:8px;outline:none}
.kbt-levelpick select:focus{border-color:var(--color-accent-text)}
/* Tenant- och avdelningsväljaren innan något är valt ("Välj …", kb_pick_*) och avdelningen innan
   tenanten är vald (MY_DOCUMENTS_VIEW_CONTRACT.md §9): nedtonad, i båda lägena. */
.kbt-levelpick select:disabled{color:var(--dim);opacity:.6;cursor:not-allowed}
.kbt-levelpick select option{background:var(--panel2);color:var(--text)}
.kbt-main{display:flex;flex-direction:column;gap:6px;inline-size:100%;min-inline-size:0}
.kbt-context{margin:0;font-size:13px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.kbt-context[hidden]{display:none}
@media (max-width:640px){.kbt-levelset{inline-size:100%}.kbt-levelpick{inline-size:100%}.kbt-levelpick select{flex:1}.kbt-crumb{margin-inline-start:0}}
.kbt-wrap{display:flex;flex-direction:column;gap:12px;inline-size:100%;min-inline-size:0}
.kbt-side{display:flex;flex-direction:column;gap:12px;inline-size:100%;min-inline-size:0}
.kbt-tree{inline-size:100%;min-inline-size:0;padding-block:8px;padding-inline:0;box-sizing:border-box}
.kbt-list{list-style:none;margin:0;padding:0}
.kbt-row{cursor:pointer}
.kbt-row.sel{background:var(--panel2)}
.kbt-row.over{outline:2px dashed var(--color-accent-text)}
.kbt-name{overflow-wrap:anywhere;min-inline-size:0}
.kbt-badge{font-size:11px;border-radius:10px;padding-block:2px;padding-inline:8px;background:var(--color-accent-text, var(--accent, currentColor));color:var(--color-accent-contrast);font-weight:600}
.kbt-status{font-size:12px;color:var(--dim);font-weight:400}
/* Dokumentets AI-steg efter inläsningens status (R282): Väntar/Bearbetas/Klar, eller felet och Kör om. */
.kbt-ai{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;min-inline-size:0}
.kbt-ai[hidden]{display:none}
.kbt-aistate{border:1px solid var(--line);border-radius:999px;padding-block:1px;padding-inline:8px;color:var(--dim);white-space:nowrap}
.kbt-aistate[data-ai-status="pending"],.kbt-aistate[data-ai-status="processing"]{display:inline-flex;align-items:center;gap:5px;color:var(--color-accent-text, var(--accent, currentColor));border-color:var(--color-accent-text)}
.kbt-aistate[data-ai-status="pending"]::before,.kbt-aistate[data-ai-status="processing"]::before{content:'';width:8px;height:8px;flex:0 0 8px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--color-accent-text);animation:jobspin 1.1s linear infinite}
.kbt-aistate[data-ai-status="pending"]::before{animation-duration:2s}
.kbt-aistate[data-ai-status="done"]{background:var(--status-active);color:var(--status-active-ink);border-color:var(--status-active-ink)}
.kbt-aistate[data-ai-status="failed"]{color:var(--bad);border-color:var(--bad)}
.kbt-aierr{color:var(--bad);overflow-wrap:anywhere;min-inline-size:0}
@media (prefers-reduced-motion:reduce){.kbt-aistate::before{animation:none!important}}
@media (max-width:640px){.kbt-ai{flex-basis:100%}}
.kbaistep{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;min-inline-size:0}
.kbt-tools{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap}
.kbt-ask{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-block-end:10px}
.kbt-drop{border:2px dashed var(--line);border-radius:10px;padding:18px;text-align:center;color:var(--dim);inline-size:100%;box-sizing:border-box}
.kbt-drop.over,.kbt-drop:focus{border-color:var(--color-accent-text);outline:none}
.kbt-side>.panelbox{inline-size:100%;box-sizing:border-box;margin:0}
.kbt-uploads{list-style:none;margin-block:0 8px;margin-inline:0;padding:0;max-block-size:320px;overflow:auto}
/* En filrad i hela bredden: namnet och läget på första raden, förloppet under i hela bredden.
   Namnet bryts var som helst och kortas med ellips först när tre rader inte räcker. */
.kbt-up{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding-block:6px;padding-inline:0;border-block-end:1px solid var(--line);font-size:13px;inline-size:100%;box-sizing:border-box}
.kbt-up .utrack{grid-column:1 / -1;grid-row:2}
.kbt-upname{grid-column:1;grid-row:1;min-inline-size:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;text-overflow:ellipsis}
.kbt-upstate{grid-column:2;grid-row:1;font-size:12px;color:var(--dim);text-align:end;white-space:nowrap}
.kbt-up.failed .kbt-upname{grid-column:1 / -1}
.kbt-upstate.err{color:var(--bad);grid-column:1 / -1;grid-row:3;text-align:start;white-space:normal;overflow-wrap:anywhere}
.kbt-upstate.ok{color:var(--status-active-ink)}

/* Idélådan: stjärnor, statusetiketter (Kravspec 10.2), svar, Anmäl (R161, R162). */
.ideatag.st-new,.ideatag.st-declined,.ideatag.st-merged{background:#F0EEEB;color:#5E5852}
.ideatag.st-declined,.ideatag.st-merged{background:#EFEDEA}
.ideatag.st-planned{background:#E6ECF5;color:#2B4870}
.ideatag.st-done{background:#E5EFE8;color:#2D5B41}
html[data-theme="dark"] .ideatag.st-new,html[data-theme="dark"] .ideatag.st-declined,html[data-theme="dark"] .ideatag.st-merged{background:var(--line);color:var(--text)}
html[data-theme="dark"] .ideatag.st-planned{background:#243651;color:#cddcf3}
html[data-theme="dark"] .ideatag.st-done{background:#23412f;color:#cfe8d8}
@media (prefers-color-scheme:dark){
  html:not([data-theme]) .ideatag.st-new,html:not([data-theme]) .ideatag.st-declined,html:not([data-theme]) .ideatag.st-merged{background:var(--line);color:var(--text)}
  html:not([data-theme]) .ideatag.st-planned{background:#243651;color:#cddcf3}
  html:not([data-theme]) .ideatag.st-done{background:#23412f;color:#cfe8d8}
}
.idealabels{margin-inline-start:6px;display:inline-flex;gap:6px}
.ideahiddentag{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--color-accent-text);color:var(--color-accent-text, var(--accent, currentColor))}
.ideastars{margin-top:6px}
.ideastarrow,.ideastarro{display:inline-flex;gap:2px;vertical-align:middle}
.ideastarbtn{min-width:36px;min-height:36px;border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--color-accent-text, var(--accent, currentColor));border-radius:8px}
.ideastarbtn:hover{background:var(--line)}
.ideastarbtn:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.ideastar{font-size:20px;color:var(--color-accent-text, var(--accent, currentColor))}
.ideastarsum{margin-inline-start:8px;font-size:13px;color:var(--dim)}
.ideaanswer{margin-top:8px;padding:8px 12px;border-inline-start:3px solid var(--color-accent-text);background:var(--line);border-radius:6px}
.ideamerged{margin:6px 0}
.ideareportbtn{margin-top:12px}
@media (max-width:767px){.ideacard{flex-direction:column}.ideaside{flex:none}}

/* Språkväljaren byggd ur GET /api/languages (R166, R171) och fliken Språk. Logiska egenskaper och
   flexibla storlekar, så att en text 40 procent längre än den engelska inte klipps. */
.langbtn{padding-block:2px;padding-inline:8px;max-inline-size:min(60vw,240px)}
.langbtnname{min-inline-size:0;overflow-wrap:anywhere;text-align:start}
.langbtnmark{display:inline-flex}
.langpick .flagsym{inline-size:auto;min-inline-size:22px;block-size:auto;border:0;font-size:16px;line-height:1;text-align:center}
/* The globe of a language with no flag of its own is an icon in the ink of the interface, not an
   emoji: it is drawn on every machine, and right in both modes. */
.langpick .flagglobe{border:0;color:var(--dim);display:inline-flex;align-items:center;justify-content:center}
.langpick .flagglobe svg{inline-size:16px;block-size:16px}
.langmenu{inset-inline-end:0;min-inline-size:220px;max-inline-size:min(92vw,320px)}
.langsearch{inline-size:100%;box-sizing:border-box;margin-block-end:4px;padding-block:6px;padding-inline:10px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px}
.langlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-block-size:min(50vh,320px);overflow-y:auto}
.langrow{text-align:start;padding-inline:10px}
.langrow .langname{white-space:normal;overflow-wrap:anywhere}
.langnone{padding-block:8px;padding-inline:10px;color:var(--dim);font-size:13px}
.langadm{display:flex;flex-direction:column;gap:4px}
.langadmrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-block:6px;padding-inline:8px;border-block-end:1px solid var(--line)}
.langadmrow>*:nth-child(1){flex:0 0 7em;min-inline-size:0;overflow-wrap:anywhere}
.langadmrow>*:nth-child(2){flex:1 1 10em;min-inline-size:0;overflow-wrap:anywhere;text-align:start}
.langadmrow>*:nth-child(3){flex:0 0 7em}
.langadmhead{font-weight:600;color:var(--dim)}
.langadmstatus.on{color:var(--color-accent-text, var(--accent, currentColor))}
.langadmstatus.off{color:var(--dim)}
.langadmtools{display:flex;flex-wrap:wrap;gap:6px;margin-inline-start:auto}
.langadmform{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:8px}
/* Bara textfälten växer: kryssrutan Jämför med (.wlcmpon) och radioknapparna fick annars 12em och
   trängde ihop sin etikett till "Jäm för med" (Språk och texter → Taggar, R168). :where håller vikten. */
.langadmform input:where(:not([type="checkbox"],[type="radio"])){flex:1 1 12em;min-inline-size:0;padding-block:6px;padding-inline:10px}
/* Lägg till / Add och förloppet per innehållstyp (R201): bara app.css:s tokens (ljust och mörkt),
   logiska egenskaper (R166), inget med fast bredd så att längre texter radbryts. */
.langadmemoji{margin-inline-end:.4em}
dialog.langadmdlg{inline-size:min(480px,94vw);max-inline-size:94vw}
dialog.langadmdlg .langadmform{flex-direction:column;flex-wrap:nowrap;margin:0}
dialog.langadmdlg .field{display:flex;flex-direction:column;gap:4px;margin:0;font-size:13px}
dialog.langadmdlg .field input,dialog.langadmdlg fieldset input[type="text"]{flex:none;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px}
dialog.langadmdlg input[aria-invalid="true"]{border-color:var(--bad)}
dialog.langadmdlg fieldset{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;border:1px solid var(--line);border-radius:10px;padding-block:8px 10px;padding-inline:12px;margin:0;font-size:13px}
dialog.langadmdlg fieldset input[type="text"]{inline-size:7em;flex:0 1 7em;padding-block:4px;padding-inline:8px}
dialog.langadmdlg fieldset input:disabled{opacity:.5}
dialog.langadmdlg legend{padding-inline:4px;font-weight:600}
dialog.langadmdlg .msg{margin:0}
dialog.langadmdlg .rowbtns{margin-block-start:6px}
dialog.langadmdlg input:focus-visible,.langprog button:focus-visible,#langAdminAddOpen:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.langprogs{display:flex;flex-direction:column;gap:12px;margin-block-start:14px}
.langprog{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding-block:12px;padding-inline:14px}
.langprog[data-state="done"]{border-color:var(--status-active-ink)}
.langprog[data-state="failed"]{border-color:var(--bad)}
.langprogtitle{font-size:15px;font-weight:650;margin:0 0 6px;overflow-wrap:anywhere}
.langprogtitle:focus{outline:none}
.langprogstate{margin:0 0 8px;font-size:13px;color:var(--dim)}
.langprogbatches{margin:-4px 0 8px;font-size:13px;color:var(--dim)}
.langprogstate.done{color:var(--status-active-ink);font-weight:600}
.langprogstate.failed{color:var(--bad);font-weight:600}
.langprogtypes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.langprogtype{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-size:13px}
.langprogname{flex:1 1 12em;min-inline-size:0;overflow-wrap:anywhere;color:var(--text)}
.langprogcount{flex:0 1 auto;color:var(--dim);font-variant-numeric:tabular-nums}
.langprogbar{flex:1 0 100%;block-size:4px;border-radius:2px;background:var(--line);overflow:hidden}
.langprogfill{display:block;block-size:100%;inline-size:0;background:var(--color-accent-text, var(--accent, currentColor));transition:inline-size .3s}
.langprogtype.complete .langprogfill{background:var(--status-active-ink)}
.langprog .rowbtns{margin-block-start:10px}
.langprog .rowbtns button[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.langprogfill{transition:none}}

/* Arbetsspråk och språkstatus (R164): logiska egenskaper och radbrytning, så 30 språk och 40 % längre texter ryms */
.langwork{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:end;margin-block:4px 14px;max-inline-size:100%}
.langpick select{min-inline-size:12em;max-inline-size:100%}
.langstatus{max-inline-size:100%;overflow-wrap:anywhere}
.langstatus summary{cursor:pointer;padding-block:4px}
.langstatus ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:6px 0 0;padding:0}
.langstatus li{padding-block:2px;padding-inline:8px;border:1px solid var(--line,#ccd);border-radius:10px;overflow-wrap:anywhere}
.langstatus li.empty{opacity:.65}

/* Texter som är 40 procent längre än de engelska (R166, NFR-06/07): knappar, flikar, menyrader,
   tabellrubriker, etiketter och meddelandebubblor får bryta raden i stället för att klippas eller
   rinna in i grannen. Höjderna i raderna ovan är min-height, så en rad som bryts växer. */
.btn,.rowbtn,.tab,.seg button,.langbtn,.langrow,.nav,.answeractions .actbtn{overflow-wrap:break-word}
th,label,legend,.turn,.turn .who,.ribbon,.panelbox h2,.listhead h2,.crumb{overflow-wrap:anywhere}
th{text-align:start}

/* Arbetsspråkets rullgardin med sökfält i redigeringsvyerna (R168, static/admin/langpicker.js). */
.wlp { position: relative; display: inline-block; min-inline-size: 12rem; }
.wlpbtn { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; inline-size: 100%; padding: .35rem .6rem; border: 1px solid var(--line, #ccc); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.wlpmenu { position: absolute; z-index: 30; inset-inline-start: 0; inset-block-start: calc(100% + 4px); min-inline-size: 100%; inline-size: max-content; max-inline-size: 22rem; padding: .35rem; border: 1px solid var(--line, #ccc); border-radius: 8px; background: var(--panel); color: var(--text); box-shadow: 0 6px 20px var(--color-shadow); }
.wlpsearch { inline-size: 100%; box-sizing: border-box; margin-block-end: .3rem; padding: .3rem .5rem; font: inherit; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
/* Väljarens ytor är temats egna (--panel, --panel2, --text), så att den går att läsa i mörkt läge. */
.wlplist { list-style: none; margin: 0; padding: 0; max-block-size: 16rem; overflow-y: auto; }
.wlprow { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: 6px; cursor: pointer; }
.wlprow:hover, .wlprow:focus { background: var(--panel2); outline: 2px solid var(--focus, #2563eb); outline-offset: -2px; }
.wlprow.on { font-weight: 600; }
.wlprow.off .wlprowname { opacity: .75; }
/* Flaggan i arbetsspråksväljaren: samma ruta som i gränssnittets språkväljare (.langpick .flag). */
.wlp .flag { inline-size: 22px; block-size: 16px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 3px; object-fit: cover; display: block; box-sizing: border-box; }
.wlp .flagsym { inline-size: auto; min-inline-size: 22px; block-size: auto; border: 0; font-size: 16px; line-height: 1; text-align: center; }
.wlp .flagblank { border-color: transparent; }
.wlp .flagglobe { border: 0; color: var(--dim); display: inline-flex; align-items: center; justify-content: center; }
.wlp .flagglobe svg { inline-size: 16px; block-size: 16px; }
.wlpmark { display: inline-flex; }
.wlpchev { display: inline-flex; flex: 0 0 auto; }
.wlpchev svg { inline-size: 14px; block-size: 14px; }
.wlpname { flex: 1; min-inline-size: 0; text-align: start; }
.wlpcode { font-size: .8rem; opacity: .7; }
.wlpoff { font-size: .75rem; border-radius: 999px; padding: 0 .45rem; background: var(--status-deactivated, #eee); color: var(--status-deactivated-ink, #555); }
.wlpnone { padding: .3rem .5rem; opacity: .7; }
.uitpair { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.uitpair.comparing { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.uitpair textarea { inline-size: 100%; box-sizing: border-box; }
.uitcomparebox textarea { background: var(--bg, #f6f6f6); }
.uitfieldlabel { display: block; font-size: .85rem; margin-block-end: .2rem; }

/* Språkväljaren Språk i personformuläret, stilkorten och scenarioformuläret (R168, langpicker.js bar).
   Personformuläret och scenarioformuläret visar ett språk i taget: ingen jämförelse, ingen andra spalt. */
.wlbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-block: .5rem .75rem; }
.wlblbl { font-weight: 600; }
/* Jämför med (R168, langpicker.js compareControl): kryssrutan och direkt efter den rullgardinen. */
.wlcmp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.wlcmpon { display: inline-flex; flex: none; align-items: center; gap: .3rem; margin: 0; white-space: nowrap; }
.wlcmpon > input { flex: none; margin: 0; }
/* Språket är arbetsspråkets väljare (.wlp: flagga och eget namn, R166), samma färger i ljust och mörkt. */
.wlcmplang.wlp { max-inline-size: 16rem; }
.wlberr { color: var(--danger, #b00020); font-size: .9em; }
.wlstate { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-block-start: .3rem; font-size: .85em; }
.wlstate.is-stale { padding: .4rem; border: 1px solid var(--warn, #c80); border-radius: 8px; }
.wlstate .tpsuggest { flex-basis: 100%; }
.wlcompare { display: grid; gap: .2rem; margin-block-start: .35rem; }
.wlcomparelang { font-size: .85em; opacity: .8; }
/* Det jämförda språket på en egen yta som följer läget: --color-surface-2 finns i ljust och mörkt (en
   fast ljus färg gjorde den ljusa texten oläslig i mörkt läge). */
.wlcomparevalue { background: var(--color-surface-2, #f5f5f5); color: var(--text); }
/* Sida vid sida (R168), bara där jämförelsen finns kvar (Samtalsstilar, produktens namn; Info-rutan
   nedan): arbetsspråkets fält till vänster, det jämförda språket till höger, raderna i linje
   (subgrid); på en smal skärm under varandra. Person- och scenarioformuläret har ingen. */
.stylework .field:has(> .wlcompare), #prodNameField:has(> .wlcompare) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .75rem; align-items: start; }
.stylework .field:has(> .wlcompare) > *, #prodNameField:has(> .wlcompare) > * { grid-column: 1; }
.stylework .field:has(> .wlcompare) > .wlcompare, #prodNameField:has(> .wlcompare) > .wlcompare { grid-column: 2; grid-row: 1 / span 2; grid-template-rows: subgrid; margin-block-start: 0; }
@media (max-width: 640px) {
  .stylework .field:has(> .wlcompare), #prodNameField:has(> .wlcompare) { grid-template-columns: minmax(0, 1fr); }
  .stylework .field:has(> .wlcompare) > .wlcompare, #prodNameField:has(> .wlcompare) > .wlcompare { grid-column: 1; grid-row: auto; grid-template-rows: none; margin-block-start: .35rem; }
}
/* Namn / Name i Samtalsstilar (R216): ett enradigt fält för ett ord, inte formulärets hela bredd. */
.field input.stylenamefield, .stylework .wlcompare input.wlcomparevalue { inline-size: min(100%, 26ch); max-inline-size: 30ch; }
/* Info-rutan under Produkter (catalog.js): rubrik och text på det jämförda språket till höger, och
   kontrollen Jämför med i linje med arbetsspråkets väljare (.langwork, .field). */
.langwork > .wlcmp { margin-block-end: 14px; align-self: end; }
#prodInfoForm.comparing .infopair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .75rem; align-items: start; }
#prodInfoForm .infocmp[hidden] { display: none; }
#prodInfoForm .infocmp textarea, #prodInfoForm .infocmp input { background: var(--color-surface-2, #f5f5f5); color: var(--text); }
/* Produkter → Info-rutan (infoBox.js): en lång text visas hela i båda spalterna — rutan växer med
   texten i stället för att rulla; inget i spalten bryter ut ur sin halva. */
#prodInfoForm textarea { field-sizing: content; min-block-size: 10em; }
#prodInfoForm .infopair > * { min-inline-size: 0; }
#prodInfoForm .infocmp ul { overflow-wrap: anywhere; }
#infoBoxPick { margin-block-end: 12px; }
#infoBoxCommon { margin-block-start: 28px; }
@media (max-width: 640px) { #prodInfoForm.comparing .infopair { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Webbsök (delmål 5, R176, R179)
   Adminfliken Webbsök (static/admin/websearch.js), kryssrutan i Min profil och webbsökets rad i
   chattens svar. Bara logiska egenskaper, så att sidan vänds rätt i ett språk som skrivs från höger. */
.wsbody { display: grid; gap: 20px; }
.wsbody .panelbox { padding-block: 18px; padding-inline: 20px; }
.wshead { margin-block: 0 12px; font-size: 1.15rem; }
.wsbody .catsub { margin-block: 18px 6px; }
/* Högsta antal webbsökningar per svar (R176): superadmins talfält överst i fliken Webbsök. */
.wsmaxuses { padding-block: 18px; padding-inline: 20px; margin-block-end: 20px; }
.wsmaxuses[hidden] { display: none; }
.wsmaxuses input[type="number"] { inline-size: 7em; }
.wsmaxuses input[aria-invalid="true"] { border-color: var(--bad); }
.wsswitchrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block: 8px; }
.wsswitch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.wsswitch input[role="switch"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  inline-size: 44px; block-size: 24px; margin: 0; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--line); cursor: pointer;
  transition: background .15s ease;
}
.wsswitch input[role="switch"]::after {
  content: ''; position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
  inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: var(--text); opacity: .55; transition: inset-inline-start .15s ease;
}
.wsswitch input[role="switch"]:checked { background: var(--accent); border-color: var(--accent); }
.wsswitch input[role="switch"]:checked::after { inset-inline-start: 22px; background: var(--accent-ink, #fff); opacity: 1; }
.wsswitch input[role="switch"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wsswitch input[role="switch"]:disabled { opacity: .6; cursor: default; }
.wsstate { font-size: .85rem; padding-block: 2px; padding-inline: 10px; border-radius: 999px;
  background: var(--status-deactivated); color: var(--status-deactivated-ink); }
.wsstate.on { background: var(--status-active); color: var(--status-active-ink); }
.wsexplain { border-inline-start: 3px solid var(--line); padding-inline-start: 12px; margin-block: 8px 14px; }
.wsexplain .note { margin-block: 4px; }
.wsconfirm { border: 1px solid var(--accent); border-radius: 12px; background: var(--panel);
  padding-block: 12px; padding-inline: 16px; margin-block: 8px 14px; }
.wsconfirm .catsub { margin-block-start: 0; }
.wsactions { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 10px; }
.wscuratedonly { margin-block-start: 6px; }
.wsfeatureoff { color: var(--status-deleting-ink); }
.wsform { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-block: 10px 4px; }
.wsform .field { margin: 0; min-inline-size: 150px; flex: 1 1 150px; }
.wsform input, .wsform select { inline-size: 100%; }
.wssettings .field { flex: 1 1 220px; }
.wsdefault { display: block; margin-block-start: 2px; font-size: .8rem; }
.wstable .catlist { margin-block: 6px; }
.wstable .catrow { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
#wsFlagged .catrow { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.wsquery { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.wsconflicts { font-weight: 600; }

.pfweb { border: 1px solid var(--line); border-radius: 12px; margin-block: 14px 4px;
  padding-block: 10px 6px; padding-inline: 14px; }
.pfweb legend { padding-inline: 6px; font-weight: 600; }
.pfwebcheck { display: flex; align-items: flex-start; gap: 8px; }
.pfwebnext { font-style: italic; }
.pfweb .msg[hidden] { display: none; }

/* Minne i Min profil (R186, ISO-19): samma inställningsrad och brytare som fliken Organisation —
   bara temats tokens, så den följer ljust och mörkt läge och brandingens accent; texten är Inter. */
.pfmemrow { max-width: none; }
.pfmemctl { display: flex; align-items: center; gap: 10px; flex: none; }
.pfmemstate { min-width: 2.5em; text-align: end; font-size: 13px; font-weight: 600; color: var(--dim); }
.pfmemstate.on { color:var(--color-accent-text, var(--accent, currentColor)); }
.pfmem .switch { min-height: 24px; }
.pfmem .switch::before { content: ""; position: absolute; inset: -10px; }
.pfmem .msg { margin-block: 0 12px; }
.pfmemofftitle { font-weight: 600; font-size: 13px; margin: 0 0 4px; }
.pfmemoff { margin: 0 0 12px; padding-inline-start: 20px; color: var(--dim); font-size: 13px; line-height: 1.5; }
.pfmemprivate { display: flex; align-items: center; gap: 6px; margin: 0; }
.pfmemorgoff { margin: 0 0 12px; padding-block: 6px; padding-inline: 10px; border-radius: 10px;
  background: var(--panel2); border-inline-start: 3px solid var(--status-deleting-ink); color: var(--text); }

/* Hela minnet i Min profil (R190): Om mig, Min utveckling och Våra samtal, varje post en rad med
   typ, status, datum, text och ursprung, och knapparna Ändra och Radera. Bara temats tokens. */
.pfmemtools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-block-end: 8px; }
.pfmemlists .msg { margin-block: 0 12px; }
.pfmempart { margin-block: 14px 0; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.pfmempart:first-child { border-block-start: 0; padding-block-start: 0; margin-block-start: 4px; }
.pfmempart h3 { font-size: 15px; font-weight: 650; margin: 0 0 2px; }
.pfmempart > .note { margin: 0 0 8px; }
.pfmemgroup { margin-block: 10px 0; }
.pfmemgroup h4, .pfmemconvtitle { font-size: 13px; font-weight: 650; margin: 0 0 6px; }
.pfmemprogress { padding-block: 8px; padding-inline: 10px; border-radius: 10px; background: var(--panel2); }
.pfmemprogress .note { margin: 0 0 6px; }
.pfmemempty { margin: 0; font-style: italic; }
.pfmemitems { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pfmemitem { padding-block: 8px; padding-inline: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); overflow-wrap: anywhere; }
.pfmemitem.focus { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }
.pfmemitem[data-status="proposal"] { border-style: dashed; }
.pfmemmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--dim); }
.pfmembadge { display: inline-block; padding-block: 1px; padding-inline: 8px; border-radius: 999px;
  background: var(--panel2); color: var(--text); font-weight: 600; }
.pfmembadge.pfmemtype { background: var(--color-accent); color: var(--color-accent-contrast); }
.pfmemtext { margin-block: 6px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.pfmemfrom { margin: 0 0 6px; font-size: 12px; color: var(--dim); }
.pfmemconvlink { color:var(--color-accent-text, var(--accent, currentColor)); }
.pfmemgone { font-style: italic; }
.pfmemactions { display: flex; flex-wrap: wrap; gap: 6px; }
.pfmemactions .btn { min-height: 30px; padding-block: 4px; font-size: 13px; }
.pfmemedit .field { display: block; margin-block-end: 8px; }
.pfmemedit textarea { inline-size: 100%; box-sizing: border-box; font: inherit; }
.pfmemeditrow { display: flex; flex-wrap: wrap; gap: 10px; }
.pfmemconv { margin-block: 10px 0; padding-block: 10px; padding-inline: 12px; border: 1px solid var(--line); border-radius: 12px; }
.pfmemconv > .note { margin-block: 6px; }
.pfmemconvdel { margin-block-start: 8px; }
/* Läget Coach under Min profil (R287): Coach/Mentor på posten, länkarna till coachsamtalet och
   sammanfattningen, och raderingen under en sammanfattning i Våra samtal. Bara temats variabler,
   så att ljust och mörkt läge följer med. */
.pfmembadge.pfmemvariant { background: transparent; border: 1px solid var(--line); color:var(--color-accent-text, var(--accent, currentColor)); }
.pfmemfrom .pfmemconvlink + .pfmemconvlink { margin-inline-start: 12px; }
.pfmemconvtools { margin-block-start: 8px; padding-block-start: 6px; border-block-start: 1px solid var(--line); }
.pfmemconvtools > .note { margin: 0; }
.pfmemlinks { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }
.pfmemlinks .note { flex-basis: 100%; }
dialog.ask.pfmemexport { max-width: 460px; }

/* Mina uppgifter / My data (R265, gdpr/CONTRACT.md §21): sist på Min profil, bara appens variabler,
   så ljust och mörkt läge följer av sig själva. Text på panelen är --text eller --dim (minst 4.5:1 i
   båda lägena); den röda knappen i dialogen har panelens färg på --bad (7:1 ljust, 7.6:1 mörkt). */
.pfmydata h3 { font-size: 13.5px; font-weight: 620; margin: 0 0 6px; }
.pfmdpart + .pfmdpart { border-block-start: 1px solid var(--line); margin-block-start: 18px; padding-block-start: 16px; }
.pfmdstatus { margin: 0 0 12px; border-radius: 6px; }
.pfmdstatus:focus { outline: none; }
.pfmdstatus:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 3px; }
.pfmdstate { margin: 0 0 6px; font-size: 13px; color: var(--text); }
.pfmdstate[hidden], .pfmdsize[hidden] { display: none; }
.pfmdstate.is-ready { font-weight: 600; color:var(--color-accent-text, var(--accent, currentColor)); }
.pfmdstate.is-failed { color: var(--bad); }
.pfmdsize { margin: 0; }
.pfmdprogress { position: relative; block-size: 6px; max-inline-size: 360px; margin: 2px 0 10px; border-radius: 3px;
  background: var(--color-surface-2); border: 1px solid var(--line); overflow: hidden; }
.pfmdprogress[hidden] { display: none; }
.pfmdprogress span { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2%; border-radius: 3px;
  background:var(--color-accent-text, var(--accent, currentColor)); transition: inline-size .4s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .pfmdprogress span { transition: none; }
}
/* Exporten i fyra format (delmål 4, §33): rullgardinen Format, knapparna Ladda ner och Mejla mig,
   och förloppet under dem; samma variabler, så ljust och mörkt läge följer av sig själva. */
.pfmydata .field.pfmdformat { display: block; max-inline-size: 420px; margin: 4px 0 12px; }
.pfmydata .field.pfmdformat > span { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-block-end: 4px; }
.pfmydata .field.pfmdformat select:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }
.pfmydata .field.pfmdformat select:disabled { opacity: .7; cursor: default; }
#pfMdExport .pfmdbtns { margin-block-end: 12px; }
.pfmydata .pfmdbtns .btn:disabled { opacity: .6; cursor: progress; }
.pfmdprogress { block-size: 8px; }
.pfmdlinkrow { margin: 6px 0 0; }
.pfmdlinkrow[hidden] { display: none; }
.pfmdbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.pfmdbtns a.btn { display: inline-block; text-decoration: none; }
.panelbox .pfmdbtns .btn.primary { margin-top: 0; }
.pfmddanger h3 { color: var(--bad); }
dialog.ask.pfmddelete { max-width: 480px; }
dialog.ask.pfmddelete p.pfmdwarn { color: var(--text); font-weight: 600; margin-block-end: 10px; }
dialog.ask.pfmddelete p.pfmdlisthead { color: var(--text); margin-block-end: 4px; }
.pfmdlist { margin: 0 0 10px; padding-inline-start: 20px; color: var(--dim); font-size: 13px; line-height: 1.5; }
dialog.ask.pfmddelete p.pfmdkept { margin-block-end: 14px; }
dialog.ask.pfmddelete p.pfmdhelp { margin: -8px 0 14px; font-size: 12px; }
dialog.ask.pfmddelete .fielderr { color: var(--bad); }
.btn.pfmdconfirm { background: var(--bad); border-color: var(--bad); color: var(--panel); font-weight: 650; }
.btn.pfmdconfirm:focus-visible, .pfmydata .btn:focus-visible, .pfmydata a.btn:focus-visible {
  outline: 2px solid var(--color-accent-text); outline-offset: 2px; }

/* Minnet under ett svar i chatten (R189, ANV-06): vad som sparades eller glömdes, och små
   markeringar för posterna svaret bygger på — var och en en länk till posten i Min profil. */
.memmarks { display: grid; gap: 6px; margin-block-start: 6px; font-size: .86rem; }
.memnote { margin: 0; padding-block: 5px; padding-inline: 10px; border-radius: 10px; background: var(--panel2);
  border-inline-start: 3px solid var(--line); overflow-wrap: anywhere; }
.memnote.saved { border-inline-start-color: var(--accent); }
.memnote.refused, .memnote.off { color: var(--dim); }
.memlink { color:var(--color-accent-text, var(--accent, currentColor)); }
.memused { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--dim); }
.memchip { display: inline-block; padding-block: 1px; padding-inline: 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text); text-decoration: none; font-size: .8rem; }
.memchip:hover, .memchip:focus-visible { border-color: var(--color-accent-text); color:var(--color-accent-text, var(--accent, currentColor)); }
/* Fas 1 (memory/CONTRACT.md F4): Companions bekräftelse av minneshandlingen och markeringen Minne
   med de använda posterna som lista — samma variabler, alltså samma i ljust och mörkt läge. */
.memnote.memaction.remembered, .memnote.memaction.forgotten { border-inline-start-color: var(--accent); }
.memnote.memaction.refused_profile, .memnote.memaction.refused_sensitive,
.memnote.memaction.refused_off, .memnote.memaction.none { color: var(--dim); }
.memactionlabel { font-weight: 600; color: var(--text); }
.memusedlabel { font-weight: 600; }
.memusedlist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* Delmål 3 (memory/CONTRACT.md F13.7, F13.8): bekräftelseraden för en sparad eller borttagen post,
   knappen "Minne: N poster" som fäller ut posterna, den länkade posten i Min profil och meddelandet
   en länk till ursprunget pekar på. Färgerna är temats variabler, så de följer ljust och mörkt läge;
   den markerade postens ram är dessutom tjockare i mörkt läge. */
.memconfirm { margin: 0; padding-block: 5px; padding-inline: 10px; border-radius: 10px; background: var(--panel2);
  border-inline-start: 3px solid var(--color-accent-text); color: var(--text); overflow-wrap: anywhere; }
.memconfirm.removed { border-inline-start-color: var(--dim); }
.memusedbox { display: grid; gap: 4px; justify-items: start; }
.memusedtoggle { display: inline-flex; align-items: center; gap: 4px; padding-block: 1px; padding-inline: 8px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel2); color: var(--dim);
  font: inherit; font-size: .8rem; cursor: pointer; }
.memusedtoggle::after { content: ""; inline-size: .38em; block-size: .38em; margin-inline-start: 2px;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(-45deg); }
.memusedtoggle[aria-expanded="true"]::after { transform: rotate(45deg); }
.memusedtoggle:hover, .memusedtoggle:focus-visible { border-color: var(--color-accent-text); color:var(--color-accent-text, var(--accent, currentColor)); }
.memusedtoggle:focus-visible, .memusedlink:focus-visible, .pfmemoriginlink:focus-visible {
  outline: 2px solid var(--color-accent-text); outline-offset: 2px; }
.memusedentries { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.memusedentries[hidden] { display: none; }
.memusedlink { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding-block: 3px;
  padding-inline: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); text-decoration: none; }
.memusedlink:hover { border-color: var(--color-accent-text); }
.memusedtype { font-weight: 600; color:var(--color-accent-text, var(--accent, currentColor)); }
.memusedtext { overflow-wrap: anywhere; }
.memuseddate { color: var(--dim); font-size: .78rem; }
.pfmemitem.memhighlight { border: 2px solid var(--color-accent-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-text) 25%, transparent); }
html[data-theme="dark"] .pfmemitem.memhighlight { border-width: 3px; }
@media (prefers-color-scheme:dark){
  html:not([data-theme]) .pfmemitem.memhighlight { border-width: 3px; }
}
.pfmementryorigin { margin: 4px 0 0; font-size: .86rem; }
.pfmemoriginlink { color:var(--color-accent-text, var(--accent, currentColor)); }
.turn.msgfocus > .bub { outline: 2px solid var(--color-accent-text); outline-offset: 3px; }
.pfmemby { color: var(--dim); font-size: .8rem; }
.memorgrow { max-width: none; margin-block-start: 8px; }
.memorgctl { display: flex; align-items: center; gap: 10px; flex: none; }
.memorgstate { min-width: 2.5em; text-align: end; font-size: 13px; font-weight: 600; color: var(--dim); }
.memorgstate.on { color:var(--color-accent-text, var(--accent, currentColor)); }
.memorgpick { display: block; margin-block: 6px; }

.websearchnote { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-block-end: 10px; padding-block: 6px; padding-inline: 10px; border-radius: 10px;
  font-size: .88rem; background: var(--panel2); border-inline-start: 3px solid var(--line); }
.websearchnote.busy { border-inline-start-color: var(--accent); }
.websearchnote.warn { border-inline-start-color: var(--status-deleting-ink); }
.websearchicon { inline-size: 10px; block-size: 10px; border-radius: 50%; flex: none;
  background: var(--line); }
.websearchnote.busy .websearchicon { background: var(--accent); animation: websearchpulse 1s ease-in-out infinite; }
.websearchnote.warn .websearchicon { background: var(--status-deleting-ink); }
.websearchlink { color: var(--accent); }
@keyframes websearchpulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .websearchnote.busy .websearchicon { animation: none; } }

/* ---- Kontrollera svaret och Sök vidare (delmål 3 och 6, R180, R182; VALIDATION_CONTRACT.md §7).
   Knappen Kontrollera svaret står bredvid Sök vidare i svarets knapprad och bär alltid sin text.
   Svarets egna meningar markeras på plats, utan att texten ändras: en ton under meningen
   (span.vmark) och en liten markering efter den (span.vchip) — grönt Kontrollerat mot [källa],
   [datum], bärnstensfärgat Avviker med Se redovisningen, dämpat Kunde inte kontrolleras. Under
   svaret sammanfattningen och redovisningen. Bara tokens, så ljust och mörkt läge och
   brandingprofilen följer med; bara logiska egenskaper, så höger-till-vänster också. */
.turn .who .whosearch { display: inline-flex; align-items: center; gap: 6px; text-transform: none;
  letter-spacing: 0; font-size: 11.5px; color: var(--dim); }
.turn .who .whosearchdot { inline-size: 7px; block-size: 7px; border-radius: 50%; flex: none;
  background: var(--accent); animation: websearchpulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .turn .who .whosearchdot { animation: none; } }
.vmark { border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vmark.verified { background: var(--status-active);
  box-shadow: inset 0 -2px 0 var(--status-active-ink); }
.vmark.deviates { background: var(--status-deleting);
  box-shadow: inset 0 -2px 0 var(--status-deleting-ink); }
.vmark.unchecked { text-decoration: underline dotted var(--dim); text-decoration-thickness: 1px;
  text-underline-offset: 3px; }
.vchip { display: inline-block; margin-inline-start: 2px; padding-block: 0; padding-inline: 7px;
  border: 1px solid var(--line); border-radius: 20px; font-family: var(--font-sans); font-size: 11px;
  font-weight: 400; font-style: normal; line-height: 1.6; color: var(--dim); vertical-align: 1px;
  text-decoration: none; white-space: normal; }
.vchip.verified { background: var(--status-active); color: var(--status-active-ink);
  border-color: transparent; }
.vchip.deviates { background: var(--status-deleting); color: var(--status-deleting-ink);
  border-color: transparent; }
.vchip.deviates .vchipword { font-weight: 600; }
.vchip.unchecked { background: var(--panel2); }
.vchip .vchiplink { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vchip .vchiplink:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 1px; }
.vresult { margin-block: 10px 0; padding-block-start: 8px; border-block-start: 1px solid var(--line);
  font-family: var(--font-sans); font-size: .85rem; color: var(--dim); }
.vresult p { margin-block: 2px; }
.vresult .vsummary { color: var(--text); }
.vrecon { margin-block: 10px 4px; padding-block: 8px; padding-inline: 12px; border-radius: 10px;
  background: var(--panel2); border-inline-start: 3px solid var(--status-deleting-ink);
  font-family: var(--font-sans); font-size: .9rem; color: var(--text); }
.vrecon .vrechead { font-weight: 600; margin-block-end: 4px; }
.vrecon p { margin-block: 4px; }
.vrecon .vrecnote:focus { outline: 2px solid var(--color-accent-text); outline-offset: 2px;
  border-radius: 4px; }
.vrecon .vrecclaim { font-style: italic; }
.vrecon .vrecwhy { color: var(--dim); }
.vrecon .vrecwhy .vchiplink { color:var(--color-accent-text, var(--accent, currentColor)); }
.websearchnote.vchecking, .websearchnote.vrefused { margin-block: 10px 0; font-size: .85rem; }
.answeractions .ico[data-icon="validate"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5 6v5.5c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6l-7-2.5Z'/%3E%3Cpath d='m8.8 12.2 2.3 2.3 4.3-4.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5 6v5.5c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6l-7-2.5Z'/%3E%3Cpath d='m8.8 12.2 2.3 2.3 4.3-4.6'/%3E%3C/svg%3E"); }
/* Kontrollera svaret bär alltid sin text, som Sök vidare. */
.answeractions .actvalidate .actlabel { display: inline; }
.answeractions .ico[data-icon="search"] { -webkit-mask-image: var(--icon-search);
  mask-image: var(--icon-search); }
/* Sök vidare bär alltid sin text, också i den infällda raden. */
.answeractions .actdeep .actlabel { display: inline; }
.deepdive { align-self: stretch; margin-block: 10px 0; padding-block: 10px; padding-inline: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.deepdive .deephead { font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-block-end: 8px; }
.deepdive .websearchnote { margin-block-end: 0; }
.deepdive .deepbody p { margin-block: 0 8px; }
.cite.webcite { text-decoration: none; color:var(--color-accent-text, var(--accent, currentColor)); }
/* Sök på webben när Kunskap inte räcker (delmål 4, R177): raden och knappen under svaret, ovanför
   knappraden, och avsnittet Webbsök. Bara tokens, så ljust och mörkt läge och brandingprofilen
   följer med; bara logiska egenskaper. */
.weboffer { align-self: stretch; margin-block: 8px 0; font-family: var(--font-sans); }
.webofferrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding-block: 6px; padding-inline: 10px; border-radius: 10px; font-size: .88rem;
  background: var(--panel2); color: var(--text); border-inline-start: 3px solid var(--line); }
.webofferline { flex: 1 1 220px; }
.weboffer .webofferbtn { padding-block: 4px; padding-inline: 12px; font-size: 12.5px;
  font-weight: 600; color:var(--color-accent-text, var(--accent, currentColor)); border-color: var(--color-accent-text);
  background: var(--panel); }
.weboffer .webofferbtn:hover { background: var(--panel2); }
.weboffer .webofferbtn:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 1px; }
.webofferbusy { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); }
.webofferdot { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none;
  background: var(--accent); animation: websearchpulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .webofferdot { animation: none; } }
.webofferfailed { color: var(--status-deleting-ink); }
.weboffer[data-websearch-state="refused"] .webofferrow,
.weboffer[data-websearch-state="failed"] .webofferrow { border-inline-start-color: var(--status-deleting-ink); }
.weboffer[data-websearch-state="searching"] .webofferrow { border-inline-start-color: var(--accent); }
.websection { margin-block: 10px 0; padding-block: 10px; padding-inline: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); }
.websection .webhead { font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); margin-block-end: 8px; }
.websection .webbody p { margin-block: 0 8px; }
.websection .webbody p:last-child { margin-block-end: 0; }
/* Täckning och webbsök på begäran (delmål 3, R251): raden om vad som saknas med delarna i en
   lista, knappen Sök på webben efter det som saknas och avsnittet Webbsök med tilläggets källor. */
.gaprow { align-items: flex-start; }
.gaprow .websearchicon { margin-block-start: 5px; }
.gapmissing { flex: 1 1 260px; min-inline-size: 0; }
.gapmissing .webofferline { display: block; }
.gapparts { margin-block: 4px 0; padding-inline-start: 18px; color: var(--text); }
.gapparts li { margin-block: 2px 0; }
.gapoffer .webofferbtn { align-self: center; }
.gapoffer .webofferbtn:disabled { opacity: .55; cursor: default; }
.gapoffer .webofferbtn:disabled:hover { background: var(--panel); }
.gapoffer[data-gap-state="pending"] .webofferrow { border-inline-start-color: var(--accent); }
.gapoffer[data-gap-state="failed"] .webofferrow,
.gapoffer[data-gap-state="refused"] .webofferrow { border-inline-start-color: var(--status-deleting-ink); }
.gapsection .webofferbusy { font-size: .88rem; }
.gapsection .sources { margin-block-start: 10px; }
.gapfailed { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.gapfailedhead { color: var(--status-deleting-ink); font-weight: 600; }
.gapfailedtext { color: var(--dim); }
/* Adminfliken Minne (minnet delmål 2, R187, R188): policyns grupper, versionerna och en rad per
   AI-funktion. Byggs av static/admin/memory.js. */
.memadm { max-inline-size: 760px; }
.memadm .memversion { font-weight: 650; margin-block: 0 4px; }
.memgroup { border: 1px solid var(--line); border-radius: 10px; margin-block: 0 16px;
  padding-block: 10px 12px; padding-inline: 14px; min-inline-size: 0; }
.memgroup .memlegend { font-weight: 620; padding-inline: 4px; }
.memtyperow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 18px; padding-block: 8px; border-block-end: 1px solid var(--line); }
.memtyperow:last-child { border-block-end: 0; }
.memtypename { flex: 1 1 220px; }
.memchoices { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.memchoice, .memcheck { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.memcheck { padding-block: 5px; }
.memcheck.locked { cursor: default; }
.memlocked { font-size: 12px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px;
  padding-block: 1px; padding-inline: 8px; }
.memwords input[type=number] { inline-size: 10em; background: var(--panel2); }
.memsub { font-size: 13px; color: var(--dim); margin-block: 8px 4px; }
.mempriority { margin-block: 0; padding-inline-start: 22px; }
.memversionlist { list-style: none; margin: 0; padding: 0; }
.memversionrow { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding-block: 6px; border-block-end: 1px solid var(--line); }
.memversionrow:last-child { border-block-end: 0; }
.memversionrow .memvnum { font-weight: 650; min-inline-size: 3em; }
.memversionrow .memvwhen { color: var(--dim); font-size: 13px; }
.memversionrow .memvcur { font-size: 12px; border: 1px solid var(--color-accent-text); border-radius: 999px;
  padding-block: 1px; padding-inline: 8px; }
.memllmrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px;
  padding-block: 12px; border-block-start: 1px solid var(--line); }
.memllmrow .memllmname { grid-column: 1 / -1; font-size: 14px; font-weight: 620; margin-block: 0 10px; }
.memllmrow .note, .memllmrow .msg, .memllmrow .btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 640px) { .memllmrow { grid-template-columns: minmax(0, 1fr); } }

/* R202: the scenario form's persona choice — checkbox, round portrait and name read-only, and the
   link to the persona's own form; and the persona form's read-only list of its scenarios. */
.rppersona{flex-wrap:wrap;cursor:default}
.rppersona .rppick1{display:flex;gap:10px;align-items:center;flex:1 1 auto;min-width:0;cursor:pointer}
.rppersona .rppick1 .pport .pframe{aspect-ratio:1 / 1;border-radius:50%;overflow:hidden}
.rppersona .pname{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.rppersona .rpopenpersona{flex:0 0 auto;font-size:13px;color:var(--color-accent-text, var(--accent, currentColor))}
.pcatusedin{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.pcatusedin h3{margin:0 0 6px;font-size:15px}
.pcatusedlist{margin:0;padding-inline-start:20px}
.pcatusedlist li{margin:3px 0}
.pcatusedlist a{color:var(--color-accent-text, var(--accent, currentColor))}

/* Krediter (R208, static/admin/credits.js): prislistan, kreditens värde, multiplikatorerna och
   veckotilldelningen. Tabellerna rullar i sidled på en smal skärm i stället för att spräcka sidan. */
.crwrap{max-width:960px}
.cradm .crsection h3{font-size:13px;font-weight:620;margin:18px 0 8px}
.cradm .crtopbtns{margin:0 0 14px}
.crtable{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 12px;display:block;overflow-x:auto}
.crtable th{text-align:start;font-weight:600;color:var(--dim);font-size:12px;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.crtable td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.crtable .crnum{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.crtable input,.crtable select{width:100%;min-width:90px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--text);font:inherit}
.crtable input[aria-invalid="true"],.cradm .field input[aria-invalid="true"]{border-color:var(--bad);outline:1px solid var(--bad)}
.crformtable td:first-child input{min-width:100px}
.crformtable td:nth-child(2) input{min-width:160px}
.crfielderr{color:var(--bad);font-size:12px;margin:4px 0 8px}
.crversion{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 12px}
.crcurrent{border-color:var(--color-accent-text)}
.crversionhead{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 8px}
.crwhen{font-weight:600}
.crbadge{font-size:11px;border-radius:20px;padding:2px 10px;border:1px solid var(--line);color:var(--dim)}
.crbadge.crnow{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}
.crbadge.crfuture{border-color:var(--color-accent-text);color:var(--color-accent-text, var(--accent, currentColor))}
.crcount,.crnote{font-size:12px;color:var(--dim)}
.crprovidername{font-size:12px;font-weight:600;margin:8px 0 4px}
.crhistory{margin-top:14px}
.crhistory>summary{cursor:pointer;font-weight:600;margin:0 0 10px}
.crold>summary{cursor:pointer;list-style-position:inside}
.crold>summary .crversionhead{display:inline-flex;margin:0}
.crform{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 16px;background:var(--panel)}
.crform h3{margin-top:0}
.crform .crdate input{max-width:220px}
.crinline{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.crinline .field{margin-bottom:0;max-width:240px}
.crinline .btn.primary{margin:0}
.crrowerr td{border-bottom:none;padding-top:0}
/* Avstämning (R211, credits/RECONCILIATION.md §7): one table per provider, the server's strings as they are. */
.crreconmonth{margin:0 0 14px}
.crreconmonth select,.crreconmonth input{max-width:160px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--text);font:inherit}
.crreconwrap{overflow-x:auto;margin:0 0 16px}
.crrecontable{display:table;margin:0}
.crrecontable caption{text-align:start;caption-side:top;padding:0 0 4px}
.crrecontable th{white-space:normal;vertical-align:bottom}
.crrecontable .crmodel{text-align:start;white-space:nowrap}
.crrecontable .crrecontotal th,.crrecontable .crrecontotal td{font-weight:700;color:var(--text);border-top:2px solid var(--line)}
.crrecontable .crreconestimated td{font-size:12px;font-style:italic;color:var(--dim);background:var(--panel2);border-bottom:none}
.crreconhint{font-size:12px}
/* NEW VERSION (R212, ai_models/CONTRACT.md §7.3): the small notice app.js shows when
   GET /api/version answers another id than the page was loaded with. Fixed at the bottom-left of
   the window in every view — chat, role-play, administration, Min profil — and never centred; its
   start edge sits over the left menu, folded or not, and it is drawn above everything else
   (the menu, a dialog's scrim at 200). Only the palette's tokens, so light and dark both follow. */
.versionnotice{position:fixed;inset-inline-start:16px;inset-block-end:16px;z-index:1000;
  inline-size:min(340px,calc(100vw - 32px));box-sizing:border-box;
  background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);
  border-radius:12px;box-shadow:0 8px 24px var(--color-shadow);padding:14px 16px;
  font-family:var(--font-sans);font-size:14px;line-height:1.45}
.versionnotice[hidden]{display:none}
.versionnotice p{margin:0 0 12px}
.versionnotice .versionactions{display:flex;flex-wrap:wrap;gap:8px}
.versionnotice .btn{padding:7px 14px}
.versionnotice .btn.later{background:transparent;border-color:var(--color-border);color:var(--color-text)}
.versionnotice .btn:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}

/* Produkter (R43): kolumnen Brandingprofil är borttagen — brandingen står i Produkter → Ändra. */
#prodList .catrow{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.6fr) minmax(0,.7fr) auto}
@media (max-width:760px){#prodList .catrow{grid-template-columns:1fr}}
/* Avsnittet Branding i Produkter → Ändra (R43, R98, R109, R114): paletten och logotypen i fyra
   delar som två rutor i avsnittet, i appens egna tokens så att det följer ljust och mörkt läge. */
.prodbranding > .panelbox{margin:12px 0 0;background:var(--color-surface)}
.prodbranding h3{font-size:15px;margin:0 0 4px}
.prodbranding .colorcol h3.collbl{font-size:12px}
.prodbranding .pbnote{margin:8px 0 0}

/* Idélådan: svaret i den utfällda idéraden (ideas/CONTRACT.md §31.2, R222) — "Svar från Learning
   Leader", texten med radbrytningar kvar och datumet, efter motivering/utfall. */
#s-ideas .ideareply{background:var(--i-system,#F0EBE4);border-left:4px solid var(--i-accent,#7A2E27);border-radius:10px;padding:10px 14px;margin:0 0 12px;font-size:15px}
#s-ideas .ideareply-h{margin:0 0 4px;font-size:15px;font-weight:700}
#s-ideas .ideareply-text{margin:0 0 4px;white-space:pre-wrap}
#s-ideas .ideareply-date{margin:0;font-size:14px;color:var(--i-dim,#5E5751)}

/* Admin, fliken Idélåda (§31.1, R225): verktygsraden, tabellen nyast först och den öppnade idén.
   Statusetiketterna har färgerna i idelada-spec.md §9.2; texten bär alltid betydelsen (ID-38). */
#s-admin-ideas .ideaadmintools{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;margin:0 0 12px}
#s-admin-ideas .ideaadmintool select{min-height:44px;min-width:200px}
#s-admin-ideas .ideaadmintable{width:100%;border-collapse:collapse;font-size:15px}
#s-admin-ideas .ideaadmintable th{text-align:left;font-weight:600;padding:8px 10px;border-bottom:2px solid #D9D2C9}
#s-admin-ideas .ideaadmintable td{padding:8px 10px;border-bottom:1px solid #E4DED6;vertical-align:middle}
#s-admin-ideas .ideaadminrow{cursor:pointer}
#s-admin-ideas .ideaadminrow:hover,#s-admin-ideas .ideaadminrow.on{background:rgba(122,46,39,.06)}
#s-admin-ideas .ideaadminrow.hidden-idea .ideaadminopen{opacity:.75}
#s-admin-ideas .ideaadminopen{background:none;border:0;padding:0;min-height:44px;font:inherit;font-weight:600;color:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#s-admin-ideas .ideaadminopen:focus-visible{outline:2px solid #7A2E27;outline-offset:2px}
#s-admin-ideas .ideaadminhidden,#s-admin-ideas .ideaadminreplied{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid #D9D2C9}
#s-admin-ideas .ideaadminhidden{background:#2A2421;color:#fff;border-color:#2A2421}
#s-admin-ideas .ideaadmintag{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
#s-admin-ideas .ideaadmintag-dot{width:8px;height:8px;border-radius:50%;flex:none}
#s-admin-ideas .ideaadmintag.st-received{background:#ECE8E2;color:#3F3935}
#s-admin-ideas .ideaadmintag.st-received .ideaadmintag-dot{background:#8A817A}
#s-admin-ideas .ideaadmintag.st-planned{background:#E2EBF6;color:#1D4673}
#s-admin-ideas .ideaadmintag.st-planned .ideaadmintag-dot{background:#3C73B5}
#s-admin-ideas .ideaadmintag.st-done{background:#DFEFE3;color:#1E5530}
#s-admin-ideas .ideaadmintag.st-done .ideaadmintag-dot{background:#3E8E57}
#s-admin-ideas .ideaadmintag.st-not_planned{background:#FFFFFF;color:#5E5751;box-shadow:inset 0 0 0 1px #D9D2C9}
#s-admin-ideas .ideaadmintag.st-not_planned .ideaadmintag-dot{background:transparent;box-shadow:inset 0 0 0 1.5px #8A817A}
#s-admin-ideas .ideaadmintag.st-merged{background:#F0EBE4;color:#4A433E}
#s-admin-ideas .ideaadmintag.st-merged .ideaadmintag-dot{background:#4A433E}
#s-admin-ideas .ideaadmindetail{margin-top:20px}
#s-admin-ideas .ideaadminhead{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
#s-admin-ideas .ideaadminhead h2{margin:0}
#s-admin-ideas .ideaadmindesc,#s-admin-ideas .ideaadminreplybody,#s-admin-ideas .ideahistory-comment{white-space:pre-wrap}
#s-admin-ideas .ideaadminsection{border:1px solid #E4DED6;border-radius:16px;padding:14px 18px;margin:14px 0}
#s-admin-ideas .ideaadminsection h3{margin-top:0}
#s-admin-ideas .ideaadminfield textarea,#s-admin-ideas .ideaadminfield input,#s-admin-ideas .ideaadminfield select{width:100%;max-width:640px;min-height:44px}
#s-admin-ideas .ideaadminactions{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
#s-admin-ideas .ideaadminactions .btn,#s-admin-ideas .ideaadminsection .btn{min-height:44px}
#s-admin-ideas .ideaadminreplytext{background:#F0EBE4;border-left:4px solid #7A2E27;border-radius:10px;padding:10px 14px}
#s-admin-ideas .ideaadminreplyby{margin:0 0 4px;font-weight:700}
#s-admin-ideas .ideaadminreplybody{margin:0}
#s-admin-ideas .ideahistory{padding-left:20px}
#s-admin-ideas .ideahistory-row{margin:0 0 8px}
#s-admin-ideas .ideahistory-comment{margin:2px 0 0}
html[data-theme="dark"] #s-admin-ideas .ideaadmintag.st-not_planned{background:transparent;color:#D6CFC7}
html[data-theme="dark"] #s-admin-ideas .ideaadminreplytext{background:rgba(255,255,255,.06)}

/* Samtal och rollspel per produkt och kund (R235, R236; docs/history-context-contract.md §5).
   Tom-texten i Mina samtal / Mina rollspel är .convempty ovan: dämpad text ur temats --dim, så
   den läses i både ljust och mörkt läge. Ett rollspel som hör till en annan vy ger en vanlig
   notis ovanför katalogen — dämpad som chattens .sysnote, varken fel- eller klar-färg. */
.plainnote{font-size:13px;line-height:1.4;color:var(--dim);margin:0 0 12px;padding:8px 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel2)}

/* Delmål 4 (R68, R69, R252, R254; static/admin/personas.js). Personakatalogen: taggarna i listan,
   kompakta enradiga fält (som R216) och mallens hjälptext under avsnittets rubrik; vägrad
   borttagning med scenarierna som länkar. Scenarioformuläret: Relation till användaren och Förvald
   motpart direkt under en ikryssad persona i samma kort. */
.pcattags{align-items:center;margin-top:6px}
.pcattagslbl{font-size:13px;color:var(--dim)}
.pcatform .field.pcatcompact input,.pcatform .pcatcommon .field input[type=text]{max-inline-size:30ch}
.pcatform .pcatcommon .field select{max-inline-size:30ch}
.pcatform .field .pcathelp{display:block;font-size:12.5px;line-height:1.35;color:var(--dim);margin-block:2px 4px}
.pcatinuse .msg{margin:0 0 6px}
.pcatinuselist{margin:0 0 8px;padding-inline-start:20px}
.pcatinuselist li{margin:3px 0}
.pcatinuselist a{color:var(--color-accent-text, var(--accent, currentColor))}
.pcatinusedefault{color:var(--dim)}
.rppersona .rppersonaopts{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:end;
  padding-block-start:8px;margin-block-start:4px;border-block-start:1px solid var(--line)}
.rppersona .rppersonaopts .field{margin:0}
.rppersona .rppersonaopts select{max-inline-size:24ch}
.rppersona .rpdefault{display:inline-flex;gap:6px;align-items:center;cursor:pointer;font-size:14px;padding-block-end:6px}
.rppersona .rpdefault input{accent-color:var(--color-accent-text)}
#rpScenarioForm .field[data-field="hidden_purpose"] .note,
#rpScenarioForm .field[data-field="moves_forward_examples"] .note,
#rpScenarioForm .field[data-field="expertise"] .note{display:block;font-size:12.5px;color:var(--dim);margin-block:2px 4px}
/* The scenario form's two groups (R257): Info till användaren and Info till personan, each with its
   legend in the same style. The fields keep the look they have outside a group. */
#rpWorkCol .rpgroup{min-inline-size:0;margin-block:6px 14px}
#rpWorkCol .rpgroup legend{font-size:12.5px;font-weight:620;letter-spacing:.02em}

/* ------------------------------------------------ Importera ett scenario (R253)
   The app's own question box (dialog.ask), wider for the drop area. Logical properties only, so a
   right-to-left language mirrors it; every row wraps, so texts much longer than the English fit. */
dialog.ask.rpimport{inline-size:min(560px,94vw);max-inline-size:none}
dialog.ask.rpimport .rpdrop{position:relative;margin-block-start:14px;border:2px dashed var(--line);border-radius:12px;background:var(--panel2);padding-block:14px;padding-inline:16px;transition:border-color .12s ease}
dialog.ask.rpimport .rpdrop:focus-within,dialog.ask.rpimport .rpdrop.is-over{border-color:var(--color-accent-text)}
dialog.ask.rpimport .rpdrop.has-file{border-style:solid}
dialog.ask.rpimport .rpdrop.is-off{opacity:.55}
dialog.ask.rpimport .rpdroplbl{display:flex;flex-direction:column;gap:4px;cursor:pointer;overflow-wrap:anywhere}
dialog.ask.rpimport .rpdrop.is-off .rpdroplbl{cursor:default}
dialog.ask.rpimport .rpdroptitle{font-weight:620;color:var(--text)}
dialog.ask.rpimport .rpdrophint,dialog.ask.rpimport .rpdroplimit{font-size:13px;color:var(--dim)}
dialog.ask.rpimport .rpdrop input[type=file]{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}
dialog.ask.rpimport .rpdropfile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-block-start:10px;color:var(--text)}
dialog.ask.rpimport .rpdropname{font-weight:620;overflow-wrap:anywhere;min-inline-size:0}
dialog.ask.rpimport .field > span{display:block;margin-block-end:4px;overflow-wrap:anywhere}
dialog.ask.rpimport textarea:disabled{opacity:.55}
dialog.ask.rpimport .rpimportproducts{margin-block:14px 0}
dialog.ask.rpimport .rpproducts{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
dialog.ask.rpimport .catcheck span{overflow-wrap:anywhere}
dialog.ask.rpimport .jobwait{margin-block:14px 0;flex-wrap:wrap}
dialog.ask.rpimport .msg{margin-block-start:12px}
dialog.ask.rpimport .actions{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:16px}
dialog.ask.rpimport .actions .btn{white-space:normal;text-align:center}

/* ------------------------------------------------------------------ Samtyckesvyn (R264)
   gdpr/CONTRACT.md §9: visas i stället för appens innehåll så länge en policy väntar. Bara appens
   egna variabler, så ljust och mörkt läge följer av sig själva. Medan den första frågan efter
   inloggningen är ute syns inte appen (data-consent="checking"). */
html[data-consent="checking"] #viewApp{visibility:hidden}
.consent{width:100%;min-height:100vh;background:var(--color-bg);color:var(--color-text);display:flex;justify-content:center;padding:32px 16px;box-sizing:border-box}
.consent[hidden]{display:none}
.consentcard{width:100%;max-width:820px;margin:0 auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;padding:28px 28px 22px;box-sizing:border-box;align-self:flex-start}
.consenttop{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.consentheading{font-family:var(--font-serif);font-size:26px;margin:0}
.consentintro{color:var(--color-muted);margin:8px 0 18px}
.consentlist{display:flex;flex-direction:column;gap:18px}
.consentdoc{border:1px solid var(--color-border);border-radius:12px;padding:16px 18px;background:var(--color-bg)}
.consentdochead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.consentdoctitle{font-size:18px;margin:0}
.consentdocmeta{margin:0;color:var(--color-muted);font-size:13px}
.consentshown{margin:6px 0 0;font-size:12.5px;color:var(--color-muted);font-style:italic}
.consenttext{max-height:42vh;overflow:auto;margin:12px 0;padding:12px 14px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);line-height:1.55}
.consenttext:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.consentcheck{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-weight:500}
.consentcheck input{margin-top:3px;width:18px;height:18px;accent-color:var(--color-accent)}
.consentactions{margin-top:20px}
.consenthint{margin:0 0 10px;color:var(--color-muted);font-size:13px}
.consentbtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.consentbtns .consentaccept{margin-inline-end:auto}
.consentbtns .btn[disabled]{opacity:.55;cursor:not-allowed}
.policytext h2{font-size:18px;margin:14px 0 6px}
.policytext h3{font-size:16px;margin:12px 0 6px}
.policytext h4{font-size:14.5px;margin:10px 0 4px}
.policytext p{margin:0 0 10px}
.policytext ul,.policytext ol{margin:0 0 10px;padding-inline-start:22px}
.policytext blockquote{margin:0 0 10px;padding:4px 12px;border-inline-start:3px solid var(--color-border);color:var(--color-muted)}
.policytext a{color:var(--color-accent-text, var(--accent, currentColor))}
@media (max-width:600px){.consentcard{padding:20px 16px}.consenttext{max-height:50vh}}

/* ------------------------------------------------------------------ Adminfliken Policyer (R264) */
.poladm .polfilters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 16px}
.poladm .polfield{display:flex;flex-direction:column;gap:4px;font-size:13px;min-width:150px}
.poladm .polfield select,.poladm .polfield input{font:inherit;font-size:14px;padding:7px 9px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);color:var(--color-text)}
.poladm .poltools{margin-inline-start:auto}
.poladm .poltablewrap{overflow-x:auto}
.poladm .poltable{width:100%;border-collapse:collapse;font-size:14px}
.poladm .poltable th{text-align:start;font-weight:600;color:var(--color-muted);font-size:12.5px;padding:8px 10px;border-bottom:1px solid var(--color-border)}
.poladm .poltable td{padding:9px 10px;border-bottom:1px solid var(--color-border);vertical-align:top}
.poladm .poltype{display:flex;flex-direction:column}
.poladm .poltitle{font-size:12.5px}
.poladm .polnum{font-variant-numeric:tabular-nums}
.poladm .polopencol{text-align:end;white-space:nowrap}
.poladm .polstatus{display:inline-block;font-size:12px;padding:1px 9px;border-radius:20px;border:1px solid var(--color-border);color:var(--color-muted)}
.poladm .polstatus-draft{border-color:var(--color-warning,#a15c00);color:var(--color-warning,#a15c00)}
.poladm .polstatus-published{border-color:var(--color-accent-text);color:var(--color-accent-text, var(--accent, currentColor));background:var(--color-accent-soft)}
.poladm .polform{display:flex;flex-direction:column;gap:14px;max-width:900px}
.poladm .polformtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.poladm .polformtitle{margin:0;font-size:20px}
.poladm .polback{margin-inline-end:8px}
.poladm .polrow1{display:flex;align-items:center;gap:10px}
.poladm .pollanglbl,.poladm .polbodylbl{font-size:13px;font-weight:600}
.poladm .polkeys{display:flex;flex-wrap:wrap;gap:12px 22px}
.poladm .polkey{display:flex;flex-direction:column;font-size:13px}
.poladm .polkeylbl{color:var(--color-muted);font-size:12px}
.poladm .pollangs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px}
.poladm .pollangslbl{color:var(--color-muted)}
.poladm .pollang{padding:1px 8px;border-radius:20px;border:1px solid var(--color-border)}
.poladm .pollang-src{border-color:var(--color-accent-text)}
.poladm .pollang-missing,.poladm .pollang-stale{border-style:dashed;color:var(--color-muted)}
.poladm .poltitlefield input{font-size:16px}
.poladm .poleditor{border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);overflow:hidden}
.poladm .poltoolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}
.poladm .poltool{min-width:32px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;background:none;color:var(--color-text);font:inherit;font-size:13px;cursor:pointer}
.poladm .poltool:hover,.poladm .poltool:focus-visible{border-color:var(--color-border);background:var(--color-surface)}
.poladm .poltool.polb{font-weight:700}.poladm .poltool.poli{font-style:italic}.poladm .poltool.polu{text-decoration:underline}
.poladm .poleditarea{min-height:260px;max-height:60vh;overflow:auto;padding:12px 14px;outline:none;line-height:1.55;color:var(--color-text)}
.poladm .poleditarea:focus-visible{box-shadow:inset 0 0 0 2px var(--color-accent-text)}
.poladm .polread{border:1px solid var(--color-border);border-radius:10px;padding:12px 14px;background:var(--color-surface);max-height:60vh;overflow:auto}
.poladm .polreadtitle{margin:0}
.poladm .polmodes{border:1px solid var(--color-border);border-radius:10px;padding:10px 12px;margin:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.poladm .polmode{display:flex;gap:8px;align-items:flex-start}
.poladm .polconfirm{border:1px solid var(--color-accent-text);border-radius:10px;padding:12px 14px;background:var(--color-accent-soft);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.poladm .polconfirm p{flex-basis:100%;margin:0}
.poladm .polbtns{display:flex;flex-wrap:wrap;gap:10px}
.poladm .polldel{margin-inline-start:auto}
.poladm .btn[disabled]{opacity:.55;cursor:not-allowed}
.poladm .btn.small{padding:4px 12px;font-size:13px}
.msg.info{color:var(--color-text);border-color:var(--color-border)}
/* Personuppgiftsbiträdesavtalet (R270; static/admin/tenantDpa.js): kompakta enradiga fält (som
   R216) under Ändra-kortet för en Enterprise-tenant, och samma uppgifter som text i Avtal. Bara
   variablerna, så ljust och mörkt läge följer resten; datumväljaren följer color-scheme. */
.tendpa .tendpaintro{margin:-6px 0 14px}
.tendpa .tendpafield input{max-inline-size:30ch}
.tendpa .tendpafield input[type=date]{max-inline-size:20ch;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;outline:none}
.tendpa .tendpafield input:focus-visible{border-color:var(--color-accent-text);outline:2px solid var(--color-accent-text);outline-offset:1px}
.tendpa .tendpafield input[aria-invalid="true"]{border-color:var(--bad);outline:1px solid var(--bad)}
.tendpa .tendpafield input:disabled{opacity:.7;cursor:not-allowed}
.tendpa .tendpaupdated{margin:0 0 10px}
.tendpa-read .tendpafacts{margin-block-end:10px}
/* Gallring (R268; static/admin/retention.js): sifferfälten i ett rutnät, den gällande värdet under
   varje fält och rullgardinen för Enterprise-kunden. Bara variablerna, så ljust och mörkt läge
   följer resten av adminvyn. */
.retadm .retgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 18px}
.retadm .retfield input{max-inline-size:16ch}
.retadm #retTenant .retfield input{max-inline-size:none}
.retadm .retfield .retnote{display:block;margin:6px 0 0;font-size:12px;letter-spacing:0;color:var(--dim)}
.retadm .retfield input[aria-invalid="true"]{border-color:var(--bad);outline:1px solid var(--bad)}
.retadm .retfield input:focus-visible,.retadm .retpick select:focus-visible{border-color:var(--color-accent-text);outline:2px solid var(--color-accent-text);outline-offset:1px}
.retadm .retfield input:disabled,.retadm .retpick select:disabled{opacity:.7;cursor:not-allowed}
.retadm .retpick select{max-inline-size:40ch}
.retadm .retintro{margin:-6px 0 14px}
.retadm .retupdated{margin:0 0 10px}
.retadm .btn[disabled]{opacity:.55;cursor:not-allowed}
/* Intrångsanmälan (R269; static/admin/breach.js), Revisionsloggens sidor (R271; auditLog.js) och
   Statistik (R271; usage_stats.js). Bara variablerna, så ljust och mörkt läge följer adminvyn. */
.bradm .brtop{margin:0 0 12px}
.bradm .brstatus{display:inline-block;font-size:12px;font-weight:600;line-height:1.3;border:1px solid currentColor;border-radius:20px;padding:2px 10px;white-space:nowrap;background:var(--panel2);color:var(--text)}
.bradm .brstatus[data-status="queued"],.bradm .brstatus[data-status="sending"]{color:var(--color-accent-text, var(--accent, currentColor))}
.bradm .brstatus[data-status="failed"]{color:var(--bad)}
.bradm .brcounts{display:block;margin-top:4px;font-size:12px}
.bradm .brformtop{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}
.bradm .brformtitle{margin:0}
.bradm .brstate{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0 0 14px}
.bradm .brstate dt{color:var(--dim)}
.bradm .brstate dd{margin:0}
.bradm .brlangrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px}
.bradm .brlangs{display:flex;flex-wrap:wrap;gap:6px}
.bradm .brlang{border:1px solid var(--color-border);border-radius:20px;padding:2px 10px;background:var(--panel2);color:var(--text);font:inherit;font-size:12px;cursor:pointer}
.bradm .brlang.on{border-color:var(--color-accent-text);outline:1px solid var(--color-accent-text)}
.bradm .brlang[data-complete="false"]{border-style:dashed}
.bradm .brlangmark{color:var(--bad);font-weight:700}
.bradm .brfield input,.bradm .brfield textarea,.bradm .bremails{width:100%;box-sizing:border-box}
.bradm .brbody,.bradm .bremails{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;resize:vertical}
.bradm [aria-invalid="true"]{border-color:var(--bad);outline:1px solid var(--bad)}
.bradm .brmodes{border:1px solid var(--color-border);border-radius:10px;padding:10px 12px;margin:12px 0;display:flex;flex-direction:column;gap:8px}
.bradm .brmode{display:flex;gap:8px;align-items:center}
.bradm .brtenants{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 14px;margin-inline-start:24px;max-height:240px;overflow:auto}
.bradm .brtenant{display:flex;gap:8px;align-items:center}
.bradm .bremails{margin-inline-start:24px;width:calc(100% - 24px)}
.bradm .brconfirm{border:1px solid var(--color-accent-text);border-radius:10px;padding:12px 14px;background:var(--color-accent-soft);display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.bradm .brconfirm p{flex-basis:100%;margin:0}
.bradm .brpreview{margin-top:16px}
.bradm .brcount{font-weight:600;margin:6px 0}
.bradm .brper{margin:0 0 8px;padding-inline-start:20px}
.bradm .brmail{border:1px solid var(--color-border);border-radius:10px;padding:12px 14px;background:var(--color-surface);white-space:pre-wrap}
.bradm .brmailsubject{margin:0 0 8px}
.bradm .btn[disabled]{opacity:.55;cursor:not-allowed}
.audpager{display:flex;gap:12px;align-items:center;margin:12px 0}
.audpager .btn[disabled]{opacity:.55;cursor:not-allowed}
.audfilter select,.audfilter input[type=text]{width:100%}
.audfilter [aria-invalid="true"]{border-color:var(--bad);outline:1px solid var(--bad)}
.ustadm .ustnum{font-variant-numeric:tabular-nums}
.ustadm .ustsuppressed{color:var(--dim);font-style:italic}
.ustadm .usttotal{font-weight:600}

/* R150: tillägget Ambassadör i adminvyns listor — märkningen bredvid nivån och brytaren per konto
   (bara superadmin), och Ingen kund för ett konto utan medlemskap. Färgerna är temats variabler,
   så ljust och mörkt läge följer med. */
.lvlbox{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.badge.ambbadge{font-size:11px;font-weight:600;color:var(--color-accent-text, var(--accent, currentColor));border:1px solid var(--color-accent-text);border-radius:20px;padding:1px 8px;white-space:nowrap;background:transparent}
.usramb{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:13px;color:var(--text)}
.usramb input{accent-color:var(--color-accent);cursor:pointer}
.usrnotenant{color:var(--dim);font-style:italic}
#productSwitch option[data-kind="tenant"]{font-weight:600}

/* ------------------------------------------------------------------ läget Coach (R35, R287) */
/* Väljaren Coach / Mentor, byggd som chattens stilrad (.stylerow): samma linje under, samma
   sticky läge överst i flödet och samma framhävning av valet, i ljust och mörkt läge ur tokens. */
.coachpicker{max-width:none;margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
  position:sticky;top:-30px;z-index:3;background:var(--bg);box-shadow:0 -30px 0 0 var(--bg)}
.convoflow > .coachpicker{max-width:none}
.coachpicker .chiplbl{margin:0;flex:0 0 auto}
.coachpicker .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0}
.coachopt{position:relative;display:inline-flex;align-items:center;gap:10px;border-radius:9px;
  padding:6px 14px 6px 6px;color:var(--text);background:var(--panel);text-align:start}
.coachopt:hover{border-color:var(--color-accent-text)}
.coachopt.on{background:var(--color-accent-soft);border-color:var(--color-accent-text);color:var(--color-accent-text, var(--accent, currentColor))}
.coachopt:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.coachportrait{width:32px;height:32px;border-radius:50%;flex:0 0 32px;display:block;object-fit:cover}
.coachwords{display:flex;flex-direction:column;line-height:1.2}
.coachname{font-weight:600}
.coachtitle{font-size:12px;color:var(--dim)}
.coachopt.on .coachtitle{color:inherit}
/* Förklaringen: synlig vid hovring och tangentbordsfokus (R35), annars kvar i sidan för
   aria-describedby men osynlig. */
.coachtip{position:absolute;inset-inline-start:0;top:calc(100% + 8px);z-index:20;width:max-content;max-width:320px;
  white-space:normal;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 10px 26px var(--color-shadow);color:var(--text);font-size:12.5px;font-weight:400;
  padding:8px 10px;opacity:0;pointer-events:none;transition:opacity .12s ease}
.coachopt:hover .coachtip,.coachopt:focus .coachtip,.coachopt:focus-visible .coachtip{opacity:1}
@media (prefers-reduced-motion:reduce){.coachtip{transition:none}}
.coachend{display:flex;justify-content:flex-end;margin:6px 0 10px}
/* Avslutsrutan: frågan, förslagen per grupp, egna förslag och Spara / Spara inget. */
.coachclosebox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:8px 0 18px}
.coachclosebox .coachq{font-weight:600;margin:0 0 12px}
.coachpendinglead{color:var(--dim);margin:0 0 6px}
.coachgroup{margin:0 0 12px}
.coachgroupttl{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim);margin:0 0 6px}
.coachprops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.coachprop,.coachadd{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.coachfield{display:contents}
.coachproptext,.coachaddtext{flex:1 1 220px;min-width:0}
.coachproptext,.coachaddtext,.coachpropdate,.coachadddate,.coachaddtype{font:inherit;color:var(--text);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.coachadd{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.coachsummary p{margin:0;color:var(--text)}
.coachactions{display:flex;gap:10px;margin-top:14px}
/* Coachsamtalets början och slut (delmål 2, R288–R290): uppföljningsbubblan med Prata om något
   annat, avslutsrutan som modal dialog och raden när inget sparas. Bara temats variabler, så att
   ljust och mörkt läge följer med. */
.turn .coachfollowup{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;margin:0 0 6px;font-size:13px;color:var(--dim)}
.turn .coachfollowuplbl{display:inline-block;font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.04em;
  color:var(--color-accent-text, var(--accent, currentColor));border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.turn .coachfollowuptext{color:var(--text)}
.turn .coachothertopic{margin-top:8px}
.coachclosenote{margin:6px 0 14px}
.coachclosenote p{margin:0}
.coachclosenote p + p{margin-top:4px;color:var(--dim)}
dialog.ask.coachdlg{width:min(640px,94vw);max-width:94vw;max-height:88vh;overflow:auto}
dialog.ask.coachdlg[hidden]{display:none}
dialog.ask.coachdlg .coachdlgtop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
dialog.ask.coachdlg .coachdlgx{flex:0 0 auto;width:30px;height:30px;font-size:18px;line-height:1;background:transparent;
  color:var(--text);border:1px solid var(--line);border-radius:999px;cursor:pointer}
dialog.ask.coachdlg .coachdlglead{margin:0 0 14px}
dialog.ask.coachdlg .coachdlglead p + p{margin-top:6px}
dialog.ask.coachdlg .coachgroupempty{margin:0;font-size:13px}
dialog.ask.coachdlg .coachprop .coachfieldlbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog.ask.coachdlg .coachpropcheck{width:18px;height:18px;margin:0;accent-color:var(--color-accent-text)}
dialog.ask.coachdlg fieldset.coachadd{border:0;border-top:1px solid var(--line);margin:12px 0 0;padding:10px 0 0;min-width:0}
dialog.ask.coachdlg .coachaddttl{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim);padding:0;margin:0 0 6px}
dialog.ask.coachdlg .coachadd .coachfieldlbl{font-size:12.5px;color:var(--dim)}
dialog.ask.coachdlg .coachactions{flex-wrap:wrap}
dialog.ask.coachdlg :focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
@media (max-width:560px){dialog.ask.coachdlg{width:100vw;max-width:100vw;max-height:100dvh;margin:0;border-radius:0}}

/* Berikningens instruktion under katalogträdet i Innehåll → Kunskap (R298, R306–R309,
   docs/enrichment-rerun-contract.md §7): samma kort och textruta som Samtalsstilarnas prompter
   (.aicard, .field textarea.aitext); här bara det som saknas, i appens färgvariabler så att ljust och
   mörkt läge följer med. Startknappen är nedtonad med .btn[disabled] tills en modul är ikryssad. */
.kbt-enrichment{margin-top:18px}
.kbt-enrichment:empty{display:none}
.aicard.enrich .stylehead{flex-wrap:wrap}
.aicard.enrich h2.stylename{margin:0}
.aicard.enrich .enrich-version{margin:0;font-variant-numeric:tabular-nums}
.aicard.enrich .enrich-version[hidden]{display:none}
.aicard.enrich textarea.aitext{min-block-size:18em}
.aicard.enrich .enrich-lang{max-inline-size:22ch;margin-bottom:4px}
.aicard.enrich .enrich-actions{margin:0 0 12px}
.aicard.enrich .btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.enrich-modules{border:1px solid var(--line);border-radius:10px;background:var(--panel2);padding:10px 14px 14px;margin:0 0 12px;min-inline-size:0}
.enrich-modules[hidden]{display:none}
.enrich-legend{font-size:12px;color:var(--dim);letter-spacing:.04em;padding:0 4px}
.enrich-modlist{display:flex;flex-direction:column;gap:6px;margin:4px 0 12px}
.enrich-module{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}
.enrich-module input{accent-color:var(--color-accent-text);margin:0}
.enrich-module .enrich-modcount{margin:0}
.aicard.enrich .msg[hidden]{display:none}
dialog.ask.enrichdlg{max-width:460px}
dialog.ask.enrichdlg p + p{margin-top:10px}
dialog.ask.enrichdlg .enrich-overwrite{color:var(--text);font-weight:600}
dialog.ask.enrichdlg :focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}

/* Frågebanken i Innehåll → Kunskap (R302, R310) */
.aicard.qb .qb-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.aicard.qb .btn[disabled]{opacity:.5;cursor:not-allowed}
.aicard.qb .qb-status{margin:0 0 14px;color:var(--text)}
.aicard.qb .qb-file{max-inline-size:36ch;margin-bottom:8px}
.aicard.qb .qb-result{margin:12px 0 0}
.aicard.qb .qb-result[hidden],.aicard.qb .qb-bank-count[hidden]{display:none}
.aicard.qb .qb-rows{border-collapse:collapse;inline-size:100%;font-size:13px;color:var(--text)}
.aicard.qb .qb-rows td{border-top:1px solid var(--line);padding:6px 8px;vertical-align:top}
.aicard.qb .qb-rownr{white-space:nowrap;color:var(--dim)}
.aicard.qb .qb-resultcell{white-space:nowrap;font-weight:600}
.aicard.qb .qb-bank-count{margin:12px 0 0}

/* Mätning av sökningen i Innehåll → Kunskap (R312–R314, R317) */
.aicard.sm .sm-alarm{border:1px solid var(--bad);color:var(--text);background:var(--panel2);border-radius:8px;padding:10px 12px;margin:0 0 12px}
.aicard.sm .sm-alarm[hidden],.aicard.sm .sm-warning[hidden]{display:none}
.aicard.sm .sm-warning{border-inline-start:4px solid var(--accent);background:var(--panel2);color:var(--text);padding:8px 10px;margin:0 0 10px}
.aicard.sm .sm-modules{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 10px;color:var(--text)}
.aicard.sm .btn[disabled]{opacity:.5;cursor:not-allowed}
.aicard.sm .sm-status{margin:10px 0;color:var(--text)}
.aicard.sm .sm-badge{display:inline-block;border:1px solid var(--line);border-radius:10px;padding:1px 8px;margin-inline-end:6px;font-size:12px;font-weight:600;color:var(--text);background:var(--panel2)}
.aicard.sm .sm-stale{border-color:var(--bad);color:var(--bad)}
.aicard.sm .sm-trial,.aicard.sm .sm-mark-recommended{border-color:var(--accent)}
.aicard.sm .sm-table{border-collapse:collapse;inline-size:100%;font-size:13px;color:var(--text);margin:8px 0}
.aicard.sm .sm-table th,.aicard.sm .sm-table td{border-top:1px solid var(--line);padding:6px 8px;text-align:start;vertical-align:top}
.aicard.sm .sm-recommended{background:var(--panel2)}
.aicard.sm .sm-rec-values{background:var(--panel2);color:var(--text);padding:8px 10px;border-radius:8px;overflow:auto}

/* Inkognito (R399, docs/incognito-contract.md §10): markeringen överst i samtalsytan i Chatt,
   Rollspel och Coach. Färgerna är variablerna ovan, så kontrasten (≥ 4,5:1) håller i båda lägena. */
.incognito-banner{display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem;padding:.6rem .9rem;
  border-radius:10px;border:1px solid var(--incognito-line);background:var(--incognito-bg);
  color:var(--incognito-ink);font-weight:600;font-size:.92rem;line-height:1.4}
.incognito-banner::before{content:"";flex:0 0 auto;width:.6rem;height:.6rem;border-radius:50%;
  background:var(--incognito-ink)}
.incognito-banner[hidden]{display:none}

/* Personakatalogen: namnen per språk med status, Kön och Granska kön (R173;
   docs/persona-localization-contract.md §8). The badges borrow the account statuses' pairs, which
   already change for dark mode, so every pair keeps its contrast in both modes. Logical properties
   only, so a right-to-left language mirrors the row. */
.pnamestatus{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-block:2px 12px}
.pnamestatus .pnamelabel{font-size:12px;color:var(--dim)}
.pnamestatus .note{flex-basis:100%;margin:0}
.pnamestatus .btn.small{margin-inline-start:auto;padding-block:4px;padding-inline:10px;font-size:12px}
.pnamebadge{display:inline-block;padding-block:2px;padding-inline:9px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid transparent}
.pnamebadge-source{background:var(--color-accent-soft);color:var(--color-accent-text);border-color:var(--color-accent-text)}
.pnamebadge-ai{background:var(--status-invited);color:var(--status-invited-ink)}
.pnamebadge-copied{background:var(--status-deactivated);color:var(--status-deactivated-ink)}
.pnamebadge-local{background:var(--status-active);color:var(--status-active-ink)}
.pnamebadge-stale{background:var(--status-deleting);color:var(--status-deleting-ink)}
.pnamebadge-missing{background:var(--status-deleted);color:var(--status-deleted-ink)}
.pgenderreview{display:flex;flex-wrap:wrap;gap:4px 8px;margin-block:10px 0;padding-block:8px;padding-inline:12px;border-radius:10px;background:var(--status-deleting);color:var(--status-deleting-ink)}

/* Rollspel → Pronomen (R173; §3.1): one table per language, the genders down, the forms across. */
.pronlang{margin-block-end:22px}
.pronlang h2{font-size:16px;margin-block:0 8px}
.prontable{inline-size:100%;border-collapse:collapse}
.prontable th,.prontable td{text-align:start;padding-block:6px;padding-inline:8px;border-block-end:1px solid var(--line);vertical-align:top}
.prontable thead th{font-size:12px;color:var(--dim);font-weight:600}
.prontable tbody th{font-weight:500;inline-size:22%}
.prontable input{inline-size:100%;box-sizing:border-box;font:inherit;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding-block:6px;padding-inline:8px}
.prontable input.bad{border-color:var(--color-danger)}
.prontable .proninherited{display:block;color:var(--dim);font-weight:400}

/* Inställningar → E-post (R428; docs/email-transport-contract.md §5): tre radioknappar och Spara, i
   temats egna färger (ljust och mörkt läge) och med logiska egenskaper. */
.emailwrap{max-width:720px}
.emailset-modes{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:0 0 16px;padding-block:14px 16px;padding-inline:18px}
.emailset-modes legend{font-weight:650;padding-inline:6px;color:var(--text)}
.emailset-modes[aria-invalid="true"]{border-color:var(--bad)}
.emailset-mode{display:flex;align-items:flex-start;gap:10px;padding-block:8px;padding-inline:4px;cursor:pointer;color:var(--text)}
.emailset-mode input{margin-block-start:3px;accent-color:var(--accent);inline-size:16px;block-size:16px}
.emailset-mode input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.emailset-text{display:flex;flex-direction:column;gap:2px}
.emailset-help{color:var(--dim);font-size:12.5px}
.emailset-error{color:var(--bad);margin-block:8px 0;font-size:13px}
.emailset-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.emailset-note{margin:0;color:var(--text);font-size:13px}
.emailset-error[hidden],.emailset-note[hidden]{display:none}

.emailms{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:0 0 16px;padding-block:14px 16px;padding-inline:18px}
.emailms[hidden]{display:none}
.emailms-title{font-size:15px;font-weight:650;margin-block:0 4px;color:var(--text)}
.emailms-field{display:flex;flex-direction:column;gap:4px;margin-block-start:12px}
.emailms-field label{font-weight:600;color:var(--text);font-size:13.5px}
.emailms-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.emailms-input{flex:1 1 280px;min-inline-size:0;padding-block:7px;padding-inline:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}
.emailms-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.emailms-input[aria-invalid="true"]{border-color:var(--bad)}
.emailms-badge{font-size:12px;font-weight:650;padding-block:2px;padding-inline:10px;border-radius:999px;border:1px solid var(--line);color:var(--text);background:var(--panel)}
.emailms-badge[data-set="true"]{border-color:var(--accent)}

/* Hjälp (R432–R435; static/help.js): ?-knappen, flikarna, valet av sätt att fråga, fältet och svaret.
   Logiska egenskaper och temats variabler, så ljust och mörkt läge följer med. */
.helpbtn.on{background:var(--accent-soft);border-color:var(--color-accent-text, var(--accent));color:var(--color-accent-text, var(--accent))}
.helppage{max-inline-size:780px;margin-inline:auto}
.helppage .tabs{display:flex;gap:4px;border-block-end:1px solid var(--line);margin-block-end:22px}
.helppage .tab{background:none;border:0;border-block-end:2px solid transparent;color:var(--dim);font:14px var(--font-sans, inherit);padding:9px 14px;cursor:pointer;margin-block-end:-1px}
.helppage .tab:hover{color:var(--text)}
.helppage .tab.on{color:var(--text);border-block-end-color:var(--color-accent-text, var(--accent));font-weight:620}
.helppage .tab:focus-visible,.helppage .modeopt:focus-visible{outline:2px solid var(--color-accent-text, var(--accent));outline-offset:2px}
.helppage .smallhead{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:620;margin:0 0 8px}
.helppage .modepicker{margin:0 0 16px}
.helppage .modes{display:flex;flex-wrap:wrap;gap:8px}
.helppage .modeopt{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;padding-block:6px;padding-inline:6px 14px;background:var(--panel);color:var(--text);font:inherit;text-align:start;cursor:pointer;min-block-size:44px}
.helppage .modeopt:hover{border-color:var(--color-accent-text, var(--accent))}
.helppage .modeopt.on{background:var(--accent-soft);border-color:var(--color-accent-text, var(--accent));color:var(--color-accent-text, var(--accent))}
.helppage .modeopt[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.helppage .modeico{inline-size:32px;block-size:32px;flex:0 0 32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--line)}
.helppage .modeico svg{inline-size:18px;block-size:18px}
.helppage .modewords{display:flex;flex-direction:column;line-height:1.2}
.helppage .modename{font-weight:600}
.helppage .modetitle{font-size:12px;color:var(--dim)}
.helppage .modeopt.on .modetitle{color:inherit}
.helppage .note{font-size:12px;color:var(--dim);margin:0 0 14px}
.helppage .composer{margin-block:22px 0;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.helppage .composer textarea{flex:1 1 0;min-inline-size:0;background:none;border:0;color:var(--text);font:inherit;outline:none;resize:none;line-height:1.5}
.helppage .composer:focus-within{border-color:var(--color-accent-text, var(--accent))}
.helperror{margin-block-start:10px}
.helpanswer{margin-block-start:20px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.helpanswer .helptext{margin:0 0 12px;white-space:pre-wrap}
.helpcite{color:var(--color-accent-text, var(--accent));font-weight:600;text-decoration:none;margin-inline:1px}
.helpcite:hover,.helpcite:focus-visible{text-decoration:underline}
.helpsources{margin:0;padding-inline-start:22px;font-size:13px}
.helpsource{margin-block-end:8px}
.helpsource:focus-visible{outline:2px solid var(--color-accent-text, var(--accent));outline-offset:2px}
.helpsrckind{color:var(--dim)}
.helpsnippet{margin:2px 0 0;color:var(--dim)}
/* Importera persona (R451): ett fält som importen inte fyllde i är markerat, i ljust och mörkt läge. */
.field.is-missing{border-inline-start:3px solid var(--color-accent-text);padding-inline-start:8px}
.pimissing{color:var(--color-accent-text);font-weight:600;font-size:.85em}
.field.is-missing input,.field.is-missing textarea,.field.is-missing select{border-style:dashed}

/* SAMTAL MED EN AVATAR I HJÄLP (R433, R444–R448, R22; static/help_avatar.js). Bubblorna är chattens
   egna .turn/.bub och följer därmed samma högsta bredd och sidoförskjutning med logiska egenskaper;
   ingen tonklass och ingen variabel för samtalsstilen sätts, och användarens bubbla är neutral
   (--panel2) i ljust och mörkt läge. */
.avstage{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:14px;margin-block-start:12px}
.avstage .stagebar{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.avstage .stagebar .smallhead{margin:0}
.avlang{position:relative}
.avlang .langbtn{min-block-size:36px}
.avlangnote{margin:0}
.avstage .video{position:relative;aspect-ratio:16/9;border-radius:12px;background:var(--panel2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden}
.avstage .avvideo{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.avstage .avatar{inline-size:96px;block-size:120px;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:40px;font-weight:600;color:var(--dim)}
.avstage .videolabel{margin:0;font-family:var(--font-serif);font-weight:600;position:relative}
.avstage .presence{position:absolute;inset-inline-start:12px;inset-block-start:12px;margin:0;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--bad);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.avstage .pdot{inline-size:9px;block-size:9px;border-radius:50%;background:var(--bad)}
.avstage .presence.online{color:var(--ok)}
.avstage .presence.online .pdot{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.avstage .ready{position:absolute;inset-inline-end:12px;inset-block-start:12px;margin:0;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--bad);background:var(--bad-soft);border:1px solid var(--bad);border-radius:999px;padding:3px 10px}
.avstage .ready.on{color:var(--ok);background:var(--ok-soft);border-color:var(--ok)}
.avcaptions{display:flex;flex-direction:column;gap:6px;max-block-size:300px;overflow:auto}
.avcaptions .smallhead{margin:0}
.avlines{display:flex;flex-direction:column}
.avlines .turn{margin-block-end:12px}
.avstage .avsay{display:flex;gap:8px}
.avstage .avsay input{flex:1 1 auto;min-inline-size:0;min-block-size:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit}
.avstage .controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.avstage .talk,.avstage .pausecall,.avstage .endcall{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:44px;padding-inline:18px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:14px var(--font-sans);cursor:pointer}
.avstage .endcall{background:none}
.avstage .talk.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.avstage .talk[aria-disabled=true],.avstage .pausecall[aria-disabled=true],.avstage .endcall[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.avstage .talk.disabled{background:var(--panel2);border-color:var(--line);color:var(--dim)}
.avstage .avico svg{inline-size:18px;block-size:18px;display:block}
.avstage .talk:focus-visible,.avstage .pausecall:focus-visible,.avstage .endcall:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
.avcredit a{color:var(--color-accent-text);text-decoration:underline;text-underline-offset:2px}
@media (max-width:720px){.avstage .controls{flex-direction:column;align-items:stretch}.avlines .turn{max-inline-size:88%}}
.avstage{--ok:#2E7D4F;--ok-soft:color-mix(in srgb,var(--ok) 14%,var(--panel));--bad-soft:color-mix(in srgb,var(--bad) 12%,var(--panel))}
html[data-theme=dark] .avstage{--ok:#6FCF97}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .avstage{--ok:#6FCF97}}