/* Politikerskolan, shared prototype styles.
   Folkhemmet design family (same as demokratiskolan), recolored to an
   institutional blue so the practitioner lens reads as a sibling, not a clone. */

:root{
  --paper:#f7f3ea; --paper-bright:#fffcf4;
  --ink:#141414; --ink-soft:#3c3a34;
  --accent:#345f86; --accent-deep:#0f2336; --accent-soft:#e8eef5;
  --line:#141414;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--accent);color:var(--paper-bright);}
a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.display{font-family:"Archivo Black","Archivo",sans-serif;font-weight:400;letter-spacing:-.015em;line-height:.96;}
.kicker{font-family:"Archivo",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;display:inline-flex;align-items:center;gap:12px;color:var(--ink-soft);}
.kicker::before{content:"";width:12px;height:12px;background:var(--accent);flex:none;}

/* header */
.sitehead{border-bottom:3px solid var(--ink);background:var(--paper);}
.sitehead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 28px;}
.wordmark{font-family:"Archivo Black",sans-serif;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;display:inline-flex;align-items:center;gap:12px;}
.wordmark::before{content:"";width:18px;height:18px;background:var(--accent);border:2px solid var(--ink);flex:none;}
.nav{display:flex;align-items:center;gap:24px;font-family:"Archivo",sans-serif;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;}
.nav a{text-decoration:none;border-bottom:3px solid transparent;padding-bottom:2px;}
.nav a:hover{border-bottom-color:var(--accent);}
.nav .navtag{background:var(--ink);color:var(--paper);padding:5px 10px;font-size:.7rem;letter-spacing:.1em;text-decoration:none;border-bottom:none;border-radius:12px;}
.nav .navtag:hover{background:var(--accent);}

/* top notice banner (politikerskolan blue) */
.topbanner{background:var(--accent);color:#fff;font-family:"Archivo",sans-serif;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;text-align:center;padding:9px 16px;line-height:1.4;}
.topbanner a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.topbanner a:hover{opacity:.85;}
.exticon{width:.82em;height:.82em;display:inline-block;vertical-align:-.08em;margin-left:.18em;flex:none;}

/* hero */
.hero{overflow:hidden;}
.hero .wrap{padding-top:64px;padding-bottom:30px;}
.hero h1{font-size:clamp(2.5rem,6vw,4.4rem);margin:22px 0 0;max-width:16em;}
.hero h1 .hl{background:var(--accent);color:var(--paper-bright);padding:0 .16em;border-radius:12px;display:inline-block;}
.hero .rule{width:190px;height:14px;background:var(--ink);margin:30px 0 26px;}
.hero .sub{font-size:1.2rem;line-height:1.55;color:var(--ink-soft);max-width:36em;font-weight:500;}

/* crossref to demokratiskolan */
.crossref{margin:34px 0 0;border:3px solid var(--ink);background:var(--paper-bright);box-shadow:8px 8px 0 var(--ink);border-radius:15px;padding:20px 24px;display:flex;gap:18px;align-items:flex-start;max-width:46em;}
.crossref .cr-ic{width:34px;height:34px;border:2px solid var(--ink);background:var(--accent);border-radius:9px;flex:none;}
.crossref p{font-size:.98rem;line-height:1.55;}
.crossref a{font-weight:700;border-bottom:3px solid var(--accent);text-decoration:none;}

/* sections */
.section{padding:70px 0 0;}
.secthead{border-top:8px solid var(--ink);padding-top:24px;display:flex;align-items:flex-start;gap:26px;flex-wrap:wrap;}
.secthead .idx{font-family:"Archivo Black",sans-serif;font-size:clamp(2.6rem,5vw,4rem);line-height:.9;color:var(--accent);letter-spacing:-.03em;}
.secthead .headcol{flex:1;min-width:260px;}
.secthead h2{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:clamp(1.8rem,4vw,2.8rem);line-height:.96;text-transform:uppercase;letter-spacing:.01em;}
.secthead .lede{margin-top:13px;font-size:1.04rem;color:var(--ink-soft);max-width:44em;}

/* level toggle */
.levels{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 8px;}
.levelbtn{font-family:"Archivo",sans-serif;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;border:3px solid var(--ink);background:var(--paper-bright);padding:13px 22px;border-radius:15px;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease;}
.levelbtn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}
.levelbtn.active{background:var(--accent);color:var(--paper-bright);}
.levelnote{font-family:"Archivo",sans-serif;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-top:10px;display:flex;align-items:center;gap:10px;}
.levelnote::before{content:"";width:24px;height:4px;background:var(--accent);}
.level-pane{display:none;}
.level-pane.show{display:block;}

/* prototype 1: flow / postgång */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px;}
.station{border:3px solid var(--ink);background:var(--paper-bright);border-radius:15px;box-shadow:7px 7px 0 var(--ink);display:flex;flex-direction:column;overflow:hidden;position:relative;}
.station .st-step{font-family:"Archivo Black",sans-serif;font-size:.8rem;letter-spacing:.04em;background:var(--ink);color:var(--paper);padding:8px 14px;display:flex;justify-content:space-between;align-items:center;}
.station .st-step .stage{color:var(--accent);}
.station .st-body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:9px;flex:1;}
.station h3{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:1.18rem;line-height:1.05;letter-spacing:-.01em;}
.station .st-what{font-size:.92rem;line-height:1.5;color:var(--ink-soft);flex:1;}
.station .st-who{font-family:"Archivo",sans-serif;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;border-top:2px solid var(--ink);padding-top:10px;display:flex;gap:9px;align-items:flex-start;}
.station .st-who::before{content:"";width:11px;height:11px;background:var(--accent);border:2px solid var(--ink);flex:none;margin-top:1px;}
.station.is-decision{background:var(--accent-soft);}
.station.is-decision .st-step{background:var(--accent);color:var(--paper-bright);}
.station.is-decision .st-step .stage{color:var(--accent-deep);}
.flowlegend{margin-top:18px;font-size:.9rem;color:var(--ink-soft);display:flex;gap:22px;flex-wrap:wrap;}
.flowlegend span{display:inline-flex;align-items:center;gap:9px;font-family:"Archivo",sans-serif;font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;}
.flowlegend .sw{width:16px;height:16px;border:2px solid var(--ink);}
.flowlegend .sw.norm{background:var(--paper-bright);}
.flowlegend .sw.dec{background:var(--accent);}

/* prototype 2: maktkartan / layers */
.maktkarta{margin-top:26px;display:flex;flex-direction:column;gap:14px;}
.layer{border:3px solid var(--ink);background:var(--paper-bright);border-radius:15px;box-shadow:7px 7px 0 var(--ink);display:grid;grid-template-columns:200px 1fr;overflow:hidden;}
.layer .ly-tab{background:var(--ink);color:var(--paper);padding:16px 18px;display:flex;flex-direction:column;gap:6px;justify-content:center;}
.layer .ly-tab .ly-role{font-family:"Archivo",sans-serif;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);}
.layer .ly-tab .ly-name{font-family:"Archivo Black",sans-serif;font-size:1.16rem;line-height:1.05;}
.layer .ly-body{padding:15px 18px;display:flex;flex-direction:column;gap:8px;}
.layer .ly-organs{display:flex;flex-wrap:wrap;gap:8px;}
.layer .ly-organs .organ{font-family:"Archivo",sans-serif;font-weight:600;font-size:.8rem;border:2px solid var(--ink);border-radius:12px;padding:6px 12px;background:var(--paper);}
.layer .ly-note{font-size:.9rem;color:var(--ink-soft);line-height:1.5;}
.layer.elected{background:var(--accent-soft);}
.layer.elected .ly-tab{background:var(--accent);}
.layer.elected .ly-tab .ly-role{color:var(--accent-deep);}
.layer .arrowdown{display:none;}
.mk-arrow{height:26px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.4rem;line-height:1;}

/* party bar */
.partybar{margin-top:14px;border:3px solid var(--ink);border-radius:15px;overflow:hidden;display:flex;font-family:"Archivo",sans-serif;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;}
.partybar .seg{padding:14px 16px;display:flex;align-items:center;gap:10px;}
.partybar .maj{background:var(--accent);color:var(--paper-bright);flex:3;}
.partybar .opp{background:var(--paper-bright);color:var(--ink);flex:2;}
.partybar .dot{width:12px;height:12px;border:2px solid currentColor;flex:none;}

/* two-column panels (formell vs reell, etc) */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px;}
.panel{border:3px solid var(--ink);background:var(--paper-bright);border-radius:15px;box-shadow:8px 8px 0 var(--ink);padding:22px 24px;}
.panel.dark{background:var(--ink);color:var(--paper);box-shadow:8px 8px 0 var(--accent);}
.panel.dark .pl-label{color:var(--accent);}
.panel .pl-label{font-family:"Archivo",sans-serif;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:10px;color:var(--ink);}
.panel .pl-label::before{content:"";width:12px;height:12px;background:var(--accent);border:2px solid var(--ink);flex:none;}
.panel.dark .pl-label::before{border-color:var(--paper);}
.panel h3{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:1.4rem;margin:12px 0 8px;line-height:1.05;}
.panel p{font-size:.98rem;line-height:1.6;color:var(--ink-soft);}
.panel.dark p{color:#d9d4c7;}
.panel ul{margin:10px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.panel li{font-size:.95rem;line-height:1.5;padding-left:22px;position:relative;}
.panel li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;background:var(--accent);border:2px solid var(--ink);}
.panel.dark li::before{border-color:var(--paper);}

/* prototype 3: matrix table */
.matrixwrap{margin-top:26px;overflow-x:auto;}
.matrix{width:100%;border-collapse:separate;border-spacing:0;min-width:720px;}
.matrix th,.matrix td{border:2px solid var(--ink);padding:14px 16px;text-align:left;vertical-align:top;background:var(--paper-bright);}
.matrix thead th{background:var(--ink);color:var(--paper);font-family:"Archivo Black",sans-serif;font-weight:400;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;}
.matrix thead th:first-child{background:var(--accent);color:var(--paper-bright);}
.matrix tbody th{font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;width:190px;background:var(--accent-soft);}
.matrix td{font-size:.93rem;line-height:1.5;color:var(--ink);}
.matrix tr.power td{background:var(--ink);color:var(--paper);font-weight:500;}
.matrix tr.power th{background:var(--accent);color:var(--paper-bright);}

/* glossary */
.glossary{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.gloss-group{grid-column:1 / -1;font-family:"Archivo",sans-serif;font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);border-bottom:3px solid var(--accent);padding-bottom:8px;margin-top:14px;}
.term{border:2px solid var(--ink);background:var(--paper-bright);border-radius:15px;padding:16px 18px;}
.term h4{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:1.1rem;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px;}
.term h4 .lvl{font-family:"Archivo",sans-serif;font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--paper-bright);background:var(--accent);padding:3px 8px;border-radius:8px;}
.term p{margin-top:9px;font-size:.93rem;line-height:1.55;color:var(--ink-soft);}

/* footer */
footer{margin-top:84px;}
.footstripes{height:18px;background:repeating-linear-gradient(135deg,var(--accent) 0 12px,var(--ink) 12px 24px);}
.footmain{background:var(--ink);color:var(--paper);}
.footmain .wrap{padding-top:48px;padding-bottom:48px;}
.footmark{font-family:"Archivo Black",sans-serif;font-size:clamp(1.5rem,3.6vw,2.2rem);text-transform:uppercase;line-height:1;}
.footmark .q{color:var(--accent);}
.footline{margin-top:22px;font-family:"Archivo",sans-serif;font-weight:500;font-size:.9rem;color:#d9d4c7;max-width:46em;}
.footline a{color:var(--accent);font-weight:700;}
.footnote{margin-top:28px;padding-top:20px;border-top:1px solid #3c3a34;font-family:"Archivo",sans-serif;font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:#8d887b;}

/* prototype switcher (for the designs index banner) */
.protobar{background:var(--accent-deep);color:var(--paper-bright);}
.protobar .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 28px;font-family:"Archivo",sans-serif;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;}
.protobar a{color:var(--paper-bright);text-decoration:none;border:2px solid rgba(255,255,255,.4);border-radius:12px;padding:6px 12px;}
.protobar a.here{background:var(--accent);border-color:var(--accent);}
.protobar a:hover{border-color:var(--paper-bright);}

@media(max-width:980px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));}
  .twocol{grid-template-columns:1fr;}
  .layer{grid-template-columns:1fr;}
  .layer .ly-tab{flex-direction:row;align-items:center;gap:12px;}
  .glossary{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .flow{grid-template-columns:1fr;}
  .sitehead .nav{display:none;}
  .partybar{flex-direction:column;}
}

/* organisation page extras */
.tricol{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px;}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.chip{font-family:"Archivo",sans-serif;font-weight:600;font-size:.82rem;border:2px solid var(--ink);border-radius:12px;padding:7px 13px;background:var(--paper-bright);}
.chip.solid{background:var(--accent);color:var(--paper-bright);}
.subhead{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:1.3rem;margin:30px 0 6px;letter-spacing:-.01em;}
.subhead:first-of-type{margin-top:18px;}
.bodytext{font-size:1.02rem;line-height:1.6;color:var(--ink-soft);max-width:46em;margin-top:10px;}
.bodytext b{color:var(--ink);}
.infonote{margin-top:22px;border-left:8px solid var(--accent);background:var(--accent-soft);padding:15px 20px;border-radius:0 12px 12px 0;font-size:.95rem;line-height:1.55;color:var(--accent-deep);max-width:48em;}
.levelhead{margin-top:14px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.levelhead .count{font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--paper-bright);background:var(--accent);padding:6px 12px;border-radius:12px;}
.backlink{display:inline-flex;align-items:center;gap:8px;margin-top:30px;font-family:"Archivo",sans-serif;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border-bottom:3px solid var(--accent);padding-bottom:3px;}
@media(max-width:860px){.tricol{grid-template-columns:1fr;}}

/* diagrams (org charts) */
.diagram{margin-top:22px;border:3px solid var(--ink);background:var(--paper-bright);border-radius:15px;box-shadow:8px 8px 0 var(--ink);padding:18px 22px 22px;overflow-x:auto;}
.diagram-cap{font-family:"Archivo",sans-serif;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:10px;display:flex;align-items:center;gap:10px;}
.diagram-cap::before{content:"";width:12px;height:12px;background:var(--accent);border:2px solid var(--ink);flex:none;}
.diagram svg{display:block;width:100%;height:auto;min-width:640px;}
.diaglegend{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font-family:"Archivo",sans-serif;font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);}
.diaglegend span{display:inline-flex;align-items:center;gap:8px;}
.diaglegend .sw{width:14px;height:14px;border:2px solid var(--ink);flex:none;}
.diaglegend .sw.acc{background:var(--accent);}
.diaglegend .sw.pl{background:var(--paper-bright);}
.panel.acc{background:var(--accent-soft);box-shadow:8px 8px 0 var(--accent);}