/* =========================================================================
   Affischen i verkstaden — applager
   Ett tokenlager + ett karaktarslager som gor Blyerts-apparna till en familj.
   Laddas EFTER appens egen CSS. Andra paletten har, inte i apparna.
   Blyerts 2026-09-01
   ========================================================================= */

@font-face{font-family:'DM Sans';src:url('https://blyerts.com/wp-content/uploads/blyerts-fonts/dm-sans-normal-400_700.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('https://blyerts.com/wp-content/uploads/blyerts-fonts/dm-sans-italic-400_700.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}

/* -------------------------------------------------------------------------
   1. TOKENLAGRET — sanningen. Alla appars gamla tokennamn pekar hit.
   ------------------------------------------------------------------------- */
:root{
  /* Affischen */
  /* Plats for att gora (2026-09-06) */
  --bl-paper:#FAF6EB; --bl-card:#FAF6EB; --bl-ink:#101C2C;
  --bl-orange:#101C2C; --bl-accent:#101C2C; --bl-grey:#D9CFBA; --bl-dark:#101C2C;
  --bl-postit:#FBF1C4; --bl-surface:#F3ECDA;
  --bl-line:#D9CFBA; --bl-line-soft:#E8DDC2;
  --bl-ink-75:#4E5563; --bl-ink-60:rgba(16,28,44,.6); --bl-ink-45:rgba(16,28,44,.45);
  --bl-display:'DM Sans',Arial,sans-serif;
  --bl-sans:'DM Sans',Arial,sans-serif;
  --bl-radius:12px;

  /* Kontextbiblioteket + Stack (mittkit) */
  --bg:var(--bl-paper); --card:var(--bl-card); --ink:var(--bl-ink); --navy:var(--bl-ink);
  --mut:var(--bl-ink-75); --gul:var(--bl-postit); --linje:var(--bl-line); --r:var(--bl-radius);

  /* AI-kartan */
  --subtle:var(--bl-surface); --pill:var(--bl-surface);
  --border:var(--bl-line); --border-strong:var(--bl-ink);
  --muted:var(--bl-ink-75); --subtle-text:var(--bl-ink-45);
  --accent:var(--bl-orange); --accent-pale:var(--bl-postit);
  --neg:#8B3A2E; --pos:#3F5C43; --radius:var(--bl-radius);

  /* Simula */
  --papper:var(--bl-paper); --papper2:var(--bl-surface); --kort:var(--bl-card);
  --tusch:var(--bl-ink); --gron:#3F5C43;

  /* Artiklar + Ordboken (hubx) */
  --hx-ink:var(--bl-ink); --hx-paper:var(--bl-paper); --hx-soft:var(--bl-card);
  --hx-mut:var(--bl-ink-75); --hx-line:var(--bl-line);
  --hx-sans:var(--bl-sans); --hx-serif:var(--bl-sans);
  --hx-mono:var(--bl-sans);

  /* Papper-legacy (blyerts-tokens.css) */
  --bp-ink:var(--bl-ink); --bp-gul:var(--bl-postit); --bp-gul-djup:var(--bl-orange);
  --bp-papper:var(--bl-paper); --bp-papper-djup:var(--bl-grey); --bp-kort:var(--bl-card);
  --bp-mut:var(--bl-ink-75); --bp-linje:var(--bl-line); --bp-border:var(--bl-line);
  --bp-font:var(--bl-sans); --bp-mono:var(--bl-sans);
}

/* -------------------------------------------------------------------------
   2. BAS — typsnittet ar det som binder ihop mest
   ------------------------------------------------------------------------- */
body{font-family:var(--bl-sans);color:var(--bl-ink);background:var(--bl-paper)}
button,input,select,textarea{font-family:inherit}
a{color:var(--bl-accent)}

/* Sma versal-etiketter: Affischens fig./kicker-ton */
.bl-app-kicker,.hubx-kicker{font-family:var(--bl-sans) !important;font-size:11px !important;
  letter-spacing:.18em !important;text-transform:uppercase !important;font-weight:600 !important;
  color:var(--bl-accent) !important}

/* -------------------------------------------------------------------------
   3. KARAKTARSLAGRET - Plats for att gora: 1 px linje, 12 px horn, inga skuggor,
   pill-knappar i kobolt, DM Sans 500 i rubriker. (Affischen: .bak-20260906)
   ------------------------------------------------------------------------- */
.card,.cardn,.kort1,.valkort,.hubx-card,.hubx-panel{
  background:var(--bl-card) !important;
  border:1px solid var(--bl-line) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  transition:transform .15s;
}
.card:hover,.cardn:hover,.valkort:hover{transform:translateY(-3px);box-shadow:none !important;background:var(--bl-surface) !important}
.chip,.tag,.typ,.typepill,.edchips>*,.kx-begrepp{
  border-radius:25px !important;
  border:1px solid #A79F8C !important;
  background:var(--bl-paper) !important;
  color:var(--bl-ink) !important;
  font-size:12px !important;letter-spacing:0;font-weight:500 !important;text-transform:none !important;
  display:inline-block !important;width:auto !important;
}
.tag:not([class*="wpgb"]){padding:4px 12px !important}
.hubx-card .tag,.hubx-panel .tag{display:inline-block !important;width:auto !important;align-self:flex-start !important}
.chip.on,.chip[aria-pressed="true"]{
  background:var(--bl-ink) !important;color:#fff !important;
  border-top-color:var(--bl-ink) !important;border-right-color:var(--bl-ink) !important;
  border-bottom-color:var(--bl-ink) !important;border-left-color:var(--bl-ink) !important;
}
.typepill{border-top-color:var(--bl-line) !important;border-right-color:var(--bl-line) !important;
  border-bottom-color:var(--bl-line) !important;border-left-color:var(--bl-line) !important;background:var(--bl-postit) !important;color:var(--bl-accent) !important}
.card.sel,.valkort.vald,.kort1.vald{box-shadow:0 0 0 2px var(--bl-accent) !important;
  border-top-color:var(--bl-accent) !important;border-right-color:var(--bl-accent) !important;
  border-bottom-color:var(--bl-accent) !important;border-left-color:var(--bl-accent) !important}
input[type="search"],input[type="text"],input[type="number"],select,textarea{
  border:1px solid #A79F8C !important;border-radius:8px !important;
  background:var(--bl-paper) !important;color:var(--bl-ink) !important;
}
input[type="search"]{border-radius:28px !important}
button,.knappar>*,.exempelbtn,.intervjubtn,.hubx-btn-primary,.hubx-btn-ghost{
  border:1px solid #A79F8C !important;border-radius:30px !important;font-weight:500 !important;
  background:var(--bl-paper);color:var(--bl-ink);
}
.primar,.hubx-btn-primary,button.primar{background:var(--bl-accent) !important;color:#fff !important;border-color:var(--bl-accent) !important}
.sekundar,.hubx-btn-ghost{background:transparent !important;color:var(--bl-ink) !important}
input[type="range"]{accent-color:var(--bl-accent)}
.nk-lapp,.nk-cta,.nkvax{box-shadow:none !important;border:1px solid var(--bl-line) !important;border-radius:12px !important}
.nk-cta,.nk-cta:hover{background:var(--bl-accent) !important;color:#fff !important;border-color:var(--bl-accent) !important;border-radius:30px !important}
header h1,.nk-topp h3{text-transform:none !important}
.nm{font-family:var(--bl-sans) !important;font-weight:500 !important;text-transform:none !important;
  line-height:1.2 !important;letter-spacing:-.01em;font-size:19px !important}
.fgroup>strong,.lbl,.sl-name{font-size:12px !important;letter-spacing:0 !important;
  text-transform:none !important;font-weight:500 !important;color:var(--bl-ink-75) !important}
.sak,.kort{border:0 !important;background:transparent !important;color:var(--bl-ink-75) !important;box-shadow:none !important}
.kolhuvud,.kanvasrubrik{font-family:var(--bl-sans) !important;font-weight:500 !important;
  text-transform:none !important;line-height:1.2 !important;letter-spacing:-.01em}
.steg,.num{font-family:var(--bl-sans) !important;font-weight:500 !important;color:var(--bl-accent) !important}
.pin{background:var(--bl-postit) !important;border:1px solid var(--bl-line) !important;border-radius:12px !important}
.hubx-h2{font-family:var(--bl-sans) !important;font-weight:500 !important;
  text-transform:none !important;line-height:1.1 !important;letter-spacing:-.02em}
.hubx-sub{color:var(--bl-ink-75) !important}
.hubx-band{background:var(--bl-surface) !important}
.hubx-dark{background:var(--bl-dark) !important;color:#fff !important}
.hubx-status,.hubx-stat{border-radius:8px !important}
.wpgb-facet .wpgb-button,.wpgb-facet button{
  background:var(--bl-accent) !important;color:#fff !important;
  border:1px solid var(--bl-accent) !important;border-radius:30px !important;font-weight:500 !important;
}
.wpgb-facet input[type="search"],.wpgb-facet input[type="text"]{
  border:1px solid #A79F8C !important;border-radius:28px !important;background:var(--bl-paper) !important;
}
.wpgb-facet .wpgb-checkbox-label,.wpgb-facet label{color:var(--bl-ink) !important}
.kx-filter .wpgb-facet-title:not(.wpgb-sr-only){display:none !important}
.wpgb-facet [class*="wpgb-"]:is(h1,h2,h3,h4){font-family:var(--bl-sans) !important;
  font-size:12px !important;letter-spacing:0 !important;text-transform:none !important;
  color:var(--bl-ink-75) !important;font-weight:500 !important}
.bl-app-kicker,.hubx-kicker{font-family:var(--bl-sans) !important;font-size:.88rem !important;
  letter-spacing:0 !important;text-transform:none !important;font-weight:500 !important;
  color:var(--bl-ink) !important}
/* --- Morkt lage ---------------------------------------------------------
   FluentCommunitys morka tema (html.dark / data-color-mode="dark") satter
   ljus rubrikfarg pa HELA dokumentet, ocksa inuti apparnas kort. Kortet ar
   kvar pa papper -> rubriken blir ljus mot ljust och forsvinner.
   Affischen ar papper och black. Apparna behaller darfor sitt ljusa ark
   aven nar ramen ar mork ("ett ark pa ett morkt skrivbord"), och vi
   ateroverer bara textfargerna som FC har tagit over.
   Vill vi nagon gang ha ett riktigt morkt Affischen-lage: vand de sex
   tokens i :root ovan bakom samma valjare. Det ar ett designbeslut. */
html.dark .hubx,html[data-color-mode="dark"] .hubx,
html.dark .kx,html[data-color-mode="dark"] .kx,
html.dark .hubx-card,html[data-color-mode="dark"] .hubx-card,
html.dark .hubx-panel,html[data-color-mode="dark"] .hubx-panel{
  color:var(--bl-ink) !important}
html.dark .hubx :is(h1,h2,h3,h4,h5,h6),
html[data-color-mode="dark"] .hubx :is(h1,h2,h3,h4,h5,h6),
html.dark .kx :is(h1,h2,h3,h4,h5,h6),
html[data-color-mode="dark"] .kx :is(h1,h2,h3,h4,h5,h6){
  color:var(--bl-ink) !important}
html.dark .hubx p,html[data-color-mode="dark"] .hubx p,
html.dark .kx p,html[data-color-mode="dark"] .kx p{color:var(--bl-ink-75) !important}
html.dark .hubx a,html[data-color-mode="dark"] .hubx a,
html.dark .kx a,html[data-color-mode="dark"] .kx a{color:var(--bl-ink) !important}
html.dark .hubx-kicker,html[data-color-mode="dark"] .hubx-kicker{
  color:var(--bl-accent) !important}
html.dark .hubx-dark,html[data-color-mode="dark"] .hubx-dark{
  color:var(--bl-paper) !important}
html.dark .hubx-dark :is(h1,h2,h3,h4,h5,h6,p,a),
html[data-color-mode="dark"] .hubx-dark :is(h1,h2,h3,h4,h5,h6,p,a){
  color:var(--bl-paper) !important}

/* --- Ordbokens A-O-register ---------------------------------------------
   Facet 5 ("Ordboken - A-O", post_field/post_title) har inga rader i
   wp_wpgb_index -> wpgb ritar bara "All" plus tva utslagna sifferknappar.
   Dolt tills facetten indexerats om (WP Grid Builder -> Facetter -> spara
   facetten, eller kor om indexeringen). Ta bort raden nar den ger bokstaver. */
.kx-az{display:none !important}

/* --- Gemensam rubrikskala -----------------------------------------------
   Apparna satte sina egna h1: Simula 44, AI-kartan 30, Kontextbiblioteket
   och Stack 26, Kontexta/Ordboken 40. Samma typsnitt men fyra storlekar
   las som fyra appar. En skala for alla. Anton tal inte negativ spardrift
   (Stack/Kontextbiblioteket hade -.02em) och behover 1.22 for Aao.
   body:not(.fluent_com_wp_pages) = apparnas egna dokument i iframen;
   .hubx/.kx = apparna som ar WP-sidor i FC-ramen. */
.hubx h1,.kx h1,body:not(.fluent_com_wp_pages) h1{
  font-family:var(--bl-sans) !important;
  font-weight:500 !important;
  font-size:clamp(28px,3.2vw,40px) !important;
  line-height:1.08 !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
  color:var(--bl-ink) !important;
}

/* --- Stack: verktygskortet (.nk) + modal (.mod, dr-*) -------------------
   .nk har EGNA lokala variabler (--p,--k,--b,--o,--pi ...) som inte lyssnar
   pa :root. Vands har. Plats for att gora, 2026-09-06. */
.nk{--p:#FAF6EB;--k:#FAF6EB;--b:#101C2C;--o:#101C2C;--ac:#101C2C;--gr:#D9CFBA;--mo:#101C2C;
  --pi:#FBF1C4;--l:#D9CFBA;--b75:#4E5563;--b45:rgba(16,28,44,.55);--rr:8px !important}
.nk,.mod{font-family:var(--bl-sans) !important}
.mod{border:1px solid var(--bl-line) !important;border-radius:16px !important;box-shadow:0 20px 60px rgba(16,28,44,.18) !important}
.nk-topp,.nk-fot{border-color:var(--bl-line) !important}
.nk-topp h3{font-family:var(--bl-sans) !important;font-weight:500 !important;text-transform:none !important;
  letter-spacing:-.02em !important;line-height:1.1 !important}
.nk-fig,.nk-marke,.nk-bd .v,.nk-kalla,.dr-fam,.sl{letter-spacing:0 !important;text-transform:none !important;font-weight:500 !important;font-size:12px !important}
.nk-fig,.dr-fam,.sl{color:var(--bl-ink-75) !important}
.nk-marke,.nk-bd,.nk-kalla.ok,.nk-kalla.obekraftad,.vm,.dr-eds .e,.kpr,.kcc{border:1px solid var(--bl-line) !important;border-radius:25px !important;background:var(--bl-paper) !important;color:var(--bl-ink) !important}
.nk-bd{border-radius:8px !important}
.nk-bd .v{color:var(--bl-accent) !important}
.nk-kalla.obekraftad{background:var(--bl-postit) !important;color:var(--bl-accent) !important;border-color:var(--bl-postit) !important}
.nk-kalla.ingen{border:1px dashed var(--bl-line) !important;border-radius:25px !important}
.nk-lapp{background:var(--bl-postit) !important;border:1px solid var(--bl-line) !important;border-radius:12px !important;box-shadow:none !important;transform:none !important}
.nk-cta,.dr-cta,.mod button,.mod a.btn,.bb button{background:var(--bl-accent) !important;color:#fff !important;border:1px solid var(--bl-accent) !important;border-radius:30px !important;font-weight:500 !important;box-shadow:none !important;transform:none !important}
.nk-cta:hover,.dr-cta:hover,.mod button:hover{background:#FFCD00 !important;box-shadow:none !important;transform:none !important}
.nkvax{font-family:var(--bl-sans) !important;background:var(--bl-paper) !important;color:var(--bl-ink) !important;border:1px solid #A79F8C !important;border-radius:25px !important;box-shadow:none !important;transform:none !important}
.nkvax[aria-pressed="true"]{background:var(--bl-ink) !important;color:#fff !important;border-color:var(--bl-ink) !important}
.nkvax:focus-visible{outline:3px solid var(--bl-accent) !important}
.dr-sec{border-top:1px solid var(--bl-line) !important}
.nk .star,.nk-topp h3 span,.stjarna,.star{color:var(--bl-accent) !important}

/* --- wpgb filterchips i Stack-stil (Ordbok/Kontexta) 2026-09-06 v5 ---
   Alla facet-wrappers (p, facet, fieldset, ul, li) ar display:contents sa att
   chipsen blir direkta flex-barn i .kx-filters. Sok = egen rad, Rensa hogerstalld. */
.kx-filters{display:flex !important;flex-wrap:wrap;gap:10px !important;align-items:center !important;padding:18px 20px !important;margin-top:34px}
.kx-filters p,.kx-filters br{display:none}
.kx-filters p:has(.wpgb-facet){display:contents}
.kx-filter{display:contents}
.kx-filters .kx-filter .hubx-kicker,.kx-filters .kx-filter .wpgb-facet-title{display:none !important}
.kx-filters .kx-filter .wpgb-facet,.kx-filters .kx-filter .wpgb-facet fieldset,.kx-filters .kx-filter .wpgb-facet legend,.kx-filters .kx-filter .wpgb-checkbox-facet,.kx-filters .kx-filter .wpgb-checkbox-facet ul,.kx-filters .kx-filter .wpgb-checkbox-facet li{display:contents !important;margin:0 !important;padding:0 !important;border:0}
.kx-filters .kx-filter.kx-filter-sok .wpgb-facet{display:block !important;flex:0 0 100%;width:100%;margin:0 0 6px !important}
.kx-filters .kx-filter.kx-filter-sok .wpgb-facet form,.kx-filters .kx-filter.kx-filter-sok .wpgb-search-facet{margin:0 !important;padding:0 !important}
.kx-filters .kx-filter.kx-filter-sok .wpgb-input,.kx-filters .kx-filter.kx-filter-sok input[type=search]{width:100% !important;max-width:none;margin:0 !important;padding-top:11px !important;padding-bottom:11px !important}
.kx-filters .kx-filter .wpgb-checkbox-facet .wpgb-checkbox{display:inline-flex !important;align-items:center;border:1px solid #A79F8C !important;border-radius:25px !important;padding:8px 14px !important;font-size:14px !important;font-weight:500 !important;line-height:1.2 !important;cursor:pointer;background:#fff !important;color:#101C2C !important;margin:0 !important;transition:border-color .15s,background .15s}
.kx-filters .kx-filter .wpgb-checkbox-facet .wpgb-checkbox:hover{border-color:#101C2C !important}
.kx-filters .kx-filter .wpgb-checkbox-facet .wpgb-checkbox .wpgb-checkbox-control{display:none !important}
.kx-filters .kx-filter .wpgb-checkbox-facet .wpgb-checkbox-label{margin:0 !important;padding:0 !important;font-size:14px !important;font-weight:500 !important;line-height:1.2 !important;white-space:nowrap;color:#101C2C !important;opacity:1 !important}
.kx-filters .kx-filter .wpgb-checkbox-facet .wpgb-checkbox-label span{font-weight:400;opacity:.6}
.kx-filters .kx-filter .wpgb-checkbox-facet .wpgb-checkbox[aria-pressed=true],.kx-filters .kx-filter .wpgb-checkbox-facet .wpgb-checkbox[aria-pressed=mixed]{background:#101C2C !important;border-color:#101C2C !important}
.kx-filters .kx-filter .wpgb-checkbox-facet .wpgb-checkbox[aria-pressed=true] .wpgb-checkbox-label,.kx-filters .kx-filter .wpgb-checkbox-facet .wpgb-checkbox[aria-pressed=mixed] .wpgb-checkbox-label{color:#fff !important}
.kx-filters .kx-filter .wpgb-checkbox-facet .wpgb-checkbox[aria-pressed=true] .wpgb-checkbox-label span{opacity:.8}
.kx-filters .kx-filter.kx-filter-rensa .wpgb-facet{display:block !important;margin-left:auto !important;flex:0 0 auto}
.kx-filters .kx-filter.kx-filter-rensa .wpgb-reset-facet{display:block !important}
.kx-filters .kx-filter.kx-filter-rensa .wpgb-reset{background:transparent !important;color:#101C2C !important;border:1px solid #A79F8C !important;border-radius:25px !important;padding:8px 14px !important;font-size:14px !important;font-weight:500 !important;opacity:1 !important;box-shadow:none !important;line-height:1.2 !important;min-height:0 !important;margin:0 !important}
.kx-filters .kx-filter.kx-filter-rensa .wpgb-reset:hover{border-color:#101C2C !important}
@media(max-width:860px){.kx-filters{padding:14px 16px !important}.kx-filters .kx-filter.kx-filter-rensa .wpgb-facet{margin-left:0 !important}}


/* --- Apparna i FC-ramen: samma yta som portalen (2026-09-06) ------------
   FC:s innehallsyta ar --bl-surface (#F3ECDA). Apparnas egna dokument i
   iframen var vita -> vit rektangel med graa falt pa sidorna. Nu ligger
   apparna pa samma yta och korten (vita) far bara utgora arket. */
body:not(.fluent_com_wp_pages){background:var(--bl-surface) !important}
body:not(.fluent_com_wp_pages) .sok,body:not(.fluent_com_wp_pages) input[type=search],body:not(.fluent_com_wp_pages) input[type=text]{background:var(--bl-paper)}