/* "Loppklass och proposition i V64" – eligibility gates. Palette: warm paper white, deep wine-red headings,
   dark slate-blue proposition text, muted gold-ochre gates, pale mint passed, brick red failed, light grey tables. */
.pr {
  --pr-paper: #fbf8f2; --pr-paper-2: #f3eee4; --pr-wine: #6b1f2e; --pr-wine-2: #8a3142; --pr-slate: #2e4057; --pr-slate-2: #e6ebf2;
  --pr-ochre: #b08a3e; --pr-ochre-2: #f3e8cf; --pr-mint: #dff2e6; --pr-mint-ink: #1f5b3a; --pr-brick: #a8432f; --pr-brick-2: #f7e1db;
  --pr-grey: #eceae6; --pr-line: #d9d2c4; --pr-ink: #25282d;
  background: var(--pr-paper-2);
  color: var(--pr-ink);
}
.pr h1, .pr h2, .pr h3 { color: var(--pr-wine); letter-spacing: -.01em; }
.pr a { color: var(--link); }
.pr .tabular, .pr .num { font-variant-numeric: tabular-nums; }

/* hero */
.pr-hero { background: var(--pr-paper); border-bottom: 1px solid var(--pr-line); padding-block: 8px 28px; }
.pr-hero h1 { font-size: clamp(30px, 4.4vw, 54px); margin: 12px 0 4px; }
.pr-tagline { font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; color: var(--pr-slate); margin: 0 0 16px; }
.pr-hero-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px; align-items: center; }
.pr-startcard { background: #fff; border: 2px solid var(--pr-slate); border-radius: 10px; padding: 12px 14px; }
.pr-startcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pr-startcard li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--pr-line); font-weight: 700; }
.pr-startcard li:last-child { border-bottom: 0; }
.pr-k { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pr-startcard .pr-k { font-weight: 700; }
.pr-fiction { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--pr-grey); border: 1px dashed var(--pr-line); margin: 0 0 8px; }
.pr-fig { width: 100%; height: auto; display: block; margin: 12px 0; }
.pr-ground { fill: var(--pr-ochre-2); }
.pr-horse path { fill: var(--pr-slate); }
.pr-horse-eye { fill: var(--pr-paper); }
.pr-gate-post { fill: var(--pr-ochre); }
.pr-gate-bar { fill: var(--pr-ochre); opacity: .45; }
.pr-gate-ok { fill: var(--pr-mint); stroke: var(--pr-mint-ink); stroke-width: 2; }
.pr-gate-tick { fill: none; stroke: var(--pr-mint-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pr-gate-n { fill: var(--pr-slate); font: 800 14px/1 var(--font); }
.pr-hgates { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pr-hgate { display: grid; gap: 4px; padding: 8px; border-radius: 8px; background: #fff; border-top: 4px solid var(--pr-ochre); font-size: 13px; }
.pr-hgate-n { font-weight: 800; color: var(--pr-wine); }
.pr-hgate-c { font-weight: 700; color: var(--pr-slate); font-stretch: condensed; letter-spacing: -.01em; }
.pr-pass { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--pr-mint-ink); background: var(--pr-mint); border-radius: 4px; padding: 2px 6px; width: fit-content; }
.pr-ico { width: 14px; height: 14px; flex: none; }
.pr-ico path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* paper */
.pr-layout { padding-block: 24px 48px; }
.pr-paper { background: var(--pr-paper); border: 1px solid var(--pr-line); border-radius: var(--radius); padding: clamp(20px, 3vw, 40px); max-width: none; }
.pr-paper h2 { margin-top: 48px; padding-top: 12px; border-top: 3px solid var(--pr-ochre-2); }
.pr-paper p, .pr-paper li { max-width: 72ch; }
.pr-paper ul + p, .pr-paper ol + p, .pr-paper .table-scroll + p, .pr-paper .pr-fig + p { margin-top: 12px; }
.pr-ingress { font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; }
.pr-code { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--pr-slate-2); color: var(--pr-slate); border: 1px solid #cdd6e2; font: 700 .95em/1.55 var(--font); font-stretch: condensed; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
.pr-prop .pr-code { font-size: 1.05em; }
.pr-two, .pr-three { display: grid; gap: 14px; margin: 14px 0; }
.pr-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-two > *, .pr-three > * { min-width: 0; }
.pr-card { padding: 14px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--pr-line); }
.pr-card h3 { margin-top: 0; }
.pr-note { font-weight: 700; color: var(--pr-slate); margin: 10px 0 0; }
.pr-table th { background: var(--pr-grey); }

/* gate cards */
.pr-gcards { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; counter-reset: none; }
.pr-gcards li.pr-gcard { max-width: none; }
.pr-gcard { position: relative; padding: 14px 16px 14px 22px; border-radius: 8px; background: #fff; border: 1px solid var(--pr-line); border-left: 8px solid var(--pr-ochre); }
.pr-gcard h3 { margin: 0 0 8px; font-size: 18px; }
.pr-gcard dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pr-gcard dt { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pr-gcard dd { margin: 2px 0 0; }

/* document */
.pr-doc { margin: 16px 0; }
.pr-doc-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pr-doc-paper { list-style: none; margin: 0; padding: 16px; background: #fff; border: 1px solid var(--pr-line); border-radius: 6px; box-shadow: 0 2px 0 var(--pr-line); display: grid; gap: 6px; }
.pr-doc-paper li.pr-doc-line { max-width: none; }
.pr-doc-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 2px solid transparent; border-radius: 6px; background: var(--pr-slate-2); color: var(--pr-slate); font: 700 16px/1.3 var(--font); font-stretch: condensed; text-align: left; cursor: pointer; }
.pr-doc-btn:hover { border-color: var(--pr-slate); }
.pr-doc-btn[aria-expanded="true"] { border-color: var(--pr-wine); background: #fff; }
.pr-doc-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pr-wine); color: #fff; font-size: 13px; flex: none; }
.pr-doc-exp { padding: 6px 10px 4px 46px; font-size: 15px; }
.pr-doc-exp p { margin: 2px 0 0; }
.pr-doc-side { display: none; }
html.js .pr-doc-exp { display: none; }
html.js .pr-doc-side { display: block; position: sticky; top: 16px; padding: 14px 16px; border-radius: 8px; background: var(--pr-ochre-2); border-left: 6px solid var(--pr-ochre); min-height: 120px; }
.pr-doc-side p { margin: 4px 0 0; }

/* class building */
.pr-building { margin: 16px 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pr-building > .pr-fiction, .pr-building > .pr-note { grid-column: 1 / -1; }
.pr-floors { list-style: none; margin: 0; padding: 0; border: 3px solid var(--pr-slate); border-radius: 8px 8px 0 0; background: #fff; }
.pr-floors li.pr-floor { max-width: none; }
.pr-floor { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--pr-line); align-items: center; }
.pr-floor:last-child { border-bottom: 0; }
.pr-floor-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 4px; background: var(--pr-slate-2); color: var(--pr-slate); font-weight: 800; }
.pr-floor-name { font-weight: 700; }
.pr-floor-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.pr-floor-chips:empty { display: none; }
.pr-bchip { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--pr-grey); border: 1px solid var(--pr-line); }
.pr-bchip.is-today { background: var(--pr-wine); color: #fff; border-color: var(--pr-wine); }
.pr-lift { padding: 12px 14px; border-radius: 8px; background: #fff; border: 1px solid var(--pr-line); }
.pr-lift-move { margin: 0 0 10px; }
.pr-lift-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.pr-lift-legend li { display: flex; align-items: center; gap: 8px; }
.pr-arrow { display: inline-block; width: 22px; height: 22px; flex: none; vertical-align: middle; background: var(--pr-slate); clip-path: polygon(50% 0, 100% 45%, 65% 45%, 65% 100%, 35% 100%, 35% 45%, 0 45%); }
.pr-arrow-down { transform: rotate(180deg); }
.pr-arrow-level { transform: rotate(90deg); }

/* money scale */
.pr-scale { margin: 16px 0; padding: 14px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--pr-line); }
.pr-scale-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-weight: 700; color: var(--pr-slate); }
.pr-scale-line { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--pr-ochre-2), var(--pr-ochre)); }
.pr-smarks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pr-smarks li.pr-smark { max-width: none; }
.pr-smark { display: grid; gap: 2px; padding: 10px; border-radius: 6px; background: var(--pr-paper); border-top: 4px solid var(--pr-ochre); }
.pr-smark-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--pr-slate); }
.pr-smark-c { font-size: 14px; color: var(--pr-slate); }
.pr-smark[data-pos="0"] { border-top-color: var(--pr-ochre-2); }

/* per start */
.pr-perstart { margin: 16px 0; padding: 14px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--pr-line); }
.pr-perstart h3 { margin-top: 0; }
.pr-ps { margin: 0; padding: 12px; border-radius: 6px; background: var(--pr-paper); display: grid; gap: 4px; }
.pr-ps dt { font-weight: 800; color: var(--pr-wine); }
.pr-ps dd { margin: 0; }
.pr-ps-per { font-size: 20px; font-weight: 800; color: var(--pr-slate); }

/* stair */
.pr-stair-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; }
.pr-fig-stair { min-width: 560px; margin: 0; }
.pr-step { fill: var(--pr-grey); stroke: var(--pr-line); stroke-width: 1; }
.pr-step.is-ex { fill: var(--pr-ochre-2); stroke: var(--pr-ochre); stroke-width: 2; }
.pr-step-n { fill: var(--pr-slate); font: 800 14px/1 var(--font); }
.pr-step-lbl { fill: var(--pr-wine); font: 800 12px/1 var(--font); }
.pr-step-amt { fill: var(--pr-slate); font: 700 11px/1 var(--font); }
.pr-stair-arrow { stroke: var(--pr-wine); stroke-width: 3; }
.pr-fig-stair marker path { fill: var(--pr-wine); }
.pr-stair-atext { fill: var(--pr-wine); font: 800 14px/1 var(--font); }

/* tillägg */
.pr-track { fill: var(--pr-ochre-2); }
.pr-sline { stroke: var(--pr-slate); stroke-width: 4; stroke-dasharray: 8 5; }
.pr-sline.is-front { stroke-dasharray: none; }
.pr-slbl, .pr-dim-t { fill: var(--pr-slate); font: 700 13px/1 var(--font); }
.pr-thorse circle { fill: var(--pr-slate); }
.pr-thorse.is-back circle { fill: var(--pr-wine); }
.pr-dim { stroke: var(--pr-wine); stroke-width: 2; fill: none; }
.pr-finish { stroke: var(--pr-wine); stroke-width: 5; }
.pr-fig-till-v { display: none; max-width: 300px; margin-inline: auto; }
.pr-qs { list-style: none; padding: 0; display: grid; gap: 6px; }
.pr-qs li { padding: 8px 12px; border-radius: 6px; background: var(--pr-slate-2); font-weight: 700; color: var(--pr-slate); }

/* heats */
.pr-heats { margin: 16px 0; }
.pr-heats-flow { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: 10px; max-width: 560px; }
.pr-heat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pr-heat { padding: 10px 12px; border-radius: 6px; background: #fff; border: 1px solid var(--pr-line); font-weight: 700; }
.pr-heat-join { height: 100%; min-height: 100px; border: 3px solid var(--pr-ochre); border-left: 0; border-radius: 0 10px 10px 0; }
.pr-final { display: grid; gap: 4px; padding: 16px; border-radius: 8px; background: var(--pr-wine); color: #fff; font-weight: 800; font-size: 20px; }
.pr-final small { font-size: 13px; font-weight: 600; }
.pr-heat-arrow { display: none; }
.pr-heats figcaption { margin-top: 10px; font-weight: 700; color: var(--pr-slate); }

/* light/dark */
.pr-ld { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.pr-ldcard { padding: 14px 16px; border-radius: 8px; border: 2px solid var(--pr-slate); background: #fff; }
.pr-ldcard.is-dark { background: var(--pr-slate-2); border-style: dashed; }
.pr-ldcard h3 { margin: 6px 0; }
.pr-ld-ico { width: 36px; height: 36px; }
.pr-ld-ico path, .pr-ld-ico circle { fill: none; stroke: var(--pr-slate); stroke-width: 2.5; }
.pr-ld-note { grid-column: 1 / -1; }

/* eye */
.pr-eye { margin: 16px 0; }
.pr-eye-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: center; }
.pr-fig-eye { max-width: 320px; margin: 0; }
.pr-ring { fill: none; stroke: var(--pr-ochre); stroke-width: 2; }
.pr-ring-1 { fill: var(--pr-ochre-2); }
.pr-ring-t { fill: var(--pr-slate); font: 800 12px/1 var(--font); }
.pr-eye-c { fill: var(--pr-wine); font: 800 28px/1 var(--font); }
.pr-eye-list { font-weight: 700; display: grid; gap: 4px; }
.pr-eye figcaption { margin-top: 10px; font-weight: 700; color: var(--pr-slate); }

/* situations */
.pr-sits { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pr-sits li.pr-sit { max-width: none; }
.pr-sit { padding: 14px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--pr-line); border-top: 5px solid var(--pr-wine); }
.pr-sit h3 { margin: 0 0 4px; }
.pr-sit-q { font-weight: 700; color: var(--pr-slate); }
.pr-mini { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.pr-mini th, .pr-mini td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--pr-line); font-variant-numeric: tabular-nums; }
.pr-mini th { background: var(--pr-grey); }

/* class check */
.pr-cls h3 { display: flex; align-items: center; gap: 8px; }
.pr-cls-sym { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; border: 2px solid; }
.pr-cls.is-plus .pr-cls-sym { color: var(--pr-mint-ink); background: var(--pr-mint); }
.pr-cls.is-neutral .pr-cls-sym { color: var(--pr-slate); background: var(--pr-slate-2); }
.pr-cls.is-minus .pr-cls-sym { color: var(--pr-brick); background: var(--pr-brick-2); }

/* mistakes */
.pr-mistakes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.pr-mistakes > div { padding: 12px 14px; border-radius: 8px; background: #fff; border-left: 5px solid var(--pr-brick); }
.pr-mistakes strong { display: block; margin-bottom: 4px; }

/* protocol */
.pr-proto { margin: 16px 0; padding: 16px; border-radius: 6px; background: #fff; border: 2px solid var(--pr-slate); background-image: repeating-linear-gradient(0deg, transparent 0 33px, var(--pr-grey) 33px 34px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pr-proto > .pr-k, .pr-proto > .small { grid-column: 1 / -1; margin: 0; }
.pr-proto-g { border: 0; margin: 0; padding: 0; min-width: 0; }
.pr-proto-g legend { font-weight: 800; color: var(--pr-wine); margin-bottom: 6px; }
.pr-proto-g ul { list-style: none; margin: 0; padding: 0; }
.pr-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 600; }
.pr-check input { width: 22px; height: 22px; accent-color: var(--pr-slate); }

@media (prefers-reduced-motion: reduce) {
  .pr * { transition: none !important; animation: none !important; }
}
@media (max-width: 900px) {
  .pr-hgates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pr-three { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pr-hero-grid { grid-template-columns: 1fr; }
  .pr-fig-hero { max-width: 460px; margin-inline: auto; }
  .pr-hgates { grid-template-columns: 1fr; }
  .pr-hgate { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; }
  .pr-two, .pr-ld, .pr-sits, .pr-mistakes, .pr-proto, .pr-smarks, .pr-building, .pr-doc-grid, .pr-eye-grid { grid-template-columns: 1fr; }
  .pr-gcard dl { grid-template-columns: 1fr; }
  html.js .pr-doc-exp:not([hidden]) { display: block; }
  html.js .pr-doc-side { display: none; }
  .pr-fig-till { display: none; }
  .pr-fig-till-v { display: block; }
  .pr-heats-flow { grid-template-columns: 1fr; }
  .pr-heat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-heat { text-align: center; padding: 10px 4px; }
  .pr-heat-join { min-height: 0; height: 26px; border: 0; display: grid; place-items: center; }
  .pr-heat-arrow { display: block; width: 22px; height: 22px; background: var(--pr-ochre); clip-path: polygon(0 20%, 100% 20%, 50% 100%); }
  .pr-fig-eye { margin-inline: auto; }
  .pr-cards thead { display: none; }
  .pr-cards, .pr-cards tbody, .pr-cards tr, .pr-cards td { display: block; width: 100%; }
  .pr-cards tr { margin-bottom: 8px; border: 1px solid var(--pr-line); border-radius: 6px; background: #fff; }
  .pr-cards td { display: flex; justify-content: space-between; gap: 10px; }
  .pr-cards td::before { content: attr(data-label); font-weight: 700; color: var(--muted); }
}