/* "Så tolkar du formraden i en V64-startlista" – editorial archive look: warm off-white documents, dark plum headings,
   muted blue-grey history, amber for questions, dark green for strong performance, brick red for clear risk. */
.fr {
  --fr-paper: #fbf7f0; --fr-paper-2: #f3ede2; --fr-plum: #4a2340; --fr-plum-2: #66334f; --fr-bluegrey: #6b7a8f; --fr-bluegrey-2: #e6ebf1;
  --fr-amber: #d99a1e; --fr-amber-2: #fff3d6; --fr-green: #1f6b3a; --fr-green-2: #e4f1e8; --fr-brick: #a63d2a; --fr-brick-2: #f8e3de; --fr-line: #ddd5c8;
  --fr-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  background: var(--fr-paper-2);
  color: #2b2430;
}
.fr h1, .fr h2, .fr h3, .fr h4 { font-family: var(--fr-serif); letter-spacing: 0; color: var(--fr-plum); }
.fr-hero { background: var(--fr-plum); color: #fff; padding-block: 8px 36px; }
.fr-hero h1 { color: #fff; font-size: clamp(34px, 4.6vw, 60px); }
.fr-hero .breadcrumbs, .fr-hero .breadcrumbs a { color: rgba(255, 255, 255, .8); }
.fr-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.fr-hero-grid > * { min-width: 0; }
.fr-ingress { font-size: clamp(16px, 1.5vw, 19px); color: #ead9e3; }
.fr-tagline { font-family: var(--fr-serif); font-size: 20px; font-style: italic; color: var(--fr-amber); }
.fr-hero-cards { list-style: none; display: flex; justify-content: center; padding: 20px 0; }
.fr-hero-card { display: grid; place-items: center; width: 92px; height: 120px; margin-left: -18px; border-radius: 6px; background: var(--fr-paper); color: var(--fr-plum); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); border: 1px solid var(--fr-line); font: 800 52px/1 var(--font); font-variant-numeric: tabular-nums; transform: rotate(-3deg); }
.fr-hero-card:first-child { margin-left: 0; }
.fr-hero-card:nth-child(2n) { transform: rotate(2deg); }
.fr-hero-arrow { text-align: center; color: #ead9e3; font-size: 14px; margin: 0; }

.fr-layout { padding-block: 24px 48px; }
.fr-paper { background: var(--fr-paper); border-radius: var(--radius); padding: clamp(20px, 3vw, 40px); max-width: none; border: 1px solid var(--fr-line); }
.fr-paper h2 { margin-top: 44px; padding-top: 10px; border-top: 3px double var(--fr-line); }
.fr-paper h2:first-of-type { margin-top: 24px; }
.fr-paper p, .fr-paper li { max-width: 72ch; }
.fr-paper .table-scroll { max-width: 100%; }
.fr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fr-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fr-two > *, .fr-three > * { min-width: 0; }
.fr-card { padding: 14px 16px; border-radius: 6px; background: #fff; border: 1px solid var(--fr-line); }
.fr-card h3, .fr-card h2.h3 { margin: 0 0 6px; font-size: 18px; }
.fr-questions { counter-reset: q; padding-left: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; margin: 12px 0 16px; }
.fr-questions li { counter-increment: q; padding: 8px 12px 8px 40px; position: relative; background: var(--fr-paper-2, rgba(0,0,0,.03)); border-radius: 6px; }
.fr-questions li::before { content: counter(q); position: absolute; left: 12px; top: 8px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fr-amber, #b7791f); }
@media (max-width: 720px) { .fr-questions { grid-template-columns: 1fr; } }
.fr-card ul { padding-left: 20px; display: grid; gap: 3px; }
.fr-k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fr-bluegrey); font-weight: 700; }
.fr-fiction { margin: 0 0 10px; padding: 8px 12px; border-radius: 6px; background: var(--fr-amber-2); border-left: 4px solid var(--fr-amber); font-size: 13px; font-weight: 700; }

/* Evidence folder */
.fr-folder { margin: 14px 0; padding: 14px; border-radius: 8px; background: var(--fr-bluegrey-2); border: 1px solid var(--fr-line); }
.fr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.fr-filter { min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--fr-bluegrey); background: #fff; color: #2b2430; font-weight: 700; font-size: 14px; }
.fr-filter[aria-pressed="true"] { background: var(--fr-plum); color: #fff; border-color: var(--fr-plum); }
.fr-filter-clear { border-style: dashed; }
.fr-timeline-note { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--fr-plum); }
.fr-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.fr-tab { display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 8px 6px; border-radius: 8px 8px 0 0; border: 1px solid var(--fr-line); border-bottom: 0; background: #f7f2e9; color: #2b2430; font-weight: 700; font-size: 13px; }
.fr-tab:nth-child(n+4) { background: #ede7dc; }
.fr-tab-plac { font: 800 24px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--fr-plum); }
.fr-tab[aria-selected="true"] { background: #fff; box-shadow: inset 0 3px 0 var(--fr-plum); }
.fr-tab.is-dim { opacity: .45; }
.fr-panel { background: #fff; border: 1px solid var(--fr-line); border-radius: 0 0 8px 8px; }
.fr-panel.is-old .fr-doc { background: #fbfaf7; }
.fr-doc { padding: 16px; }
.fr-doc-head { display: grid; grid-template-columns: auto auto 1fr; gap: 20px; align-items: start; padding-bottom: 12px; border-bottom: 1px dashed var(--fr-line); margin-bottom: 12px; }
.fr-grade { display: grid; gap: 4px; }
.fr-plac { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 8px; background: var(--fr-bluegrey-2); border: 1px solid var(--fr-bluegrey); font: 800 34px/1 var(--font); font-variant-numeric: tabular-nums; color: #2b2430; }
.fr-prest { display: inline-block; padding: 8px 12px; border-radius: 6px; font-weight: 800; background: var(--fr-paper-2); border: 1px solid var(--fr-line); }
.fr-prest.is-strong, .fr-col-prest.is-strong { background: var(--fr-green-2); color: var(--fr-green); border-color: var(--fr-green); }
.fr-prest.is-risk, .fr-col-prest.is-risk { background: var(--fr-brick-2); color: var(--fr-brick); border-color: var(--fr-brick); }
.fr-prest.is-weak, .fr-col-prest.is-weak { background: var(--fr-paper-2); color: var(--fr-bluegrey); }
.fr-scale { display: inline-flex; gap: 4px; }
.fr-scale span { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--fr-line); font-size: 13px; color: var(--fr-bluegrey); }
.fr-scale span.is-on { background: var(--fr-plum); color: #fff; border-color: var(--fr-plum); font-weight: 800; }
.fr-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 14px; margin: 0 0 10px; }
.fr-facts dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fr-bluegrey); font-weight: 700; }
.fr-facts dd { margin: 0; font-weight: 700; font-size: 14px; }
.fr-galopp { display: grid; gap: 8px; margin: 10px 0; padding: 12px; border-radius: 6px; background: var(--fr-brick-2); border: 1px solid var(--fr-brick); }
.fr-galopp > div { display: grid; gap: 2px; }
.fr-galopp .fr-v { font-weight: 800; }
.fr-warn { margin: 0; font-weight: 800; color: var(--fr-brick); }
.fr-zero { margin: 10px 0; border: 1px solid var(--fr-amber); border-radius: 6px; background: var(--fr-amber-2); }
.fr-zero summary { padding: 10px 12px; cursor: pointer; font-weight: 800; list-style: none; }
.fr-zero summary::-webkit-details-marker { display: none; }
.fr-zero summary::before { content: "+ "; }
.fr-zero[open] summary::before { content: "− "; }
.fr-zero > div { padding: 0 12px 12px; }
.fr-note { display: grid; gap: 4px; margin-top: 10px; }
.fr-note span { font-size: 13px; font-weight: 700; color: var(--fr-amber); }
.fr-note textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--fr-line); border-radius: 6px; font: inherit; background: var(--fr-paper); }

/* Form columns */
.fr-curve { margin: 12px 0 18px; padding: 12px; border-radius: 8px; background: #fff; border: 1px solid var(--fr-line); }
.fr-curve-summary { margin: 0 0 10px; }
.fr-cols { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.fr-col { display: grid; gap: 6px; justify-items: center; padding: 12px 6px; border-radius: 6px; background: var(--fr-bluegrey-2); text-align: center; }
.fr-col-plac { font: 800 30px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--fr-plum); }
.fr-col-prest, .fr-col-rel { padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 800; border: 1px solid var(--fr-line); background: #fff; }
.fr-col small { color: var(--fr-bluegrey); }

/* Examples */
.fr-example { margin: 12px 0; padding: 12px; border-radius: 8px; background: #fff; border: 1px solid var(--fr-line); }
.fr-ex-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fr-example-stacked .fr-ex-items { grid-template-columns: 1fr; }
.fr-ex-item { border: 1px solid var(--fr-line); border-radius: 6px; background: var(--fr-paper); }
.fr-ex-item summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; font-weight: 700; list-style: none; min-height: 44px; }
.fr-ex-item summary::-webkit-details-marker { display: none; }
.fr-ex-item summary::after { content: "Öppna"; margin-left: auto; font-size: 12px; color: var(--fr-bluegrey); }
.fr-ex-item[open] summary::after { content: "Stäng"; }
.fr-ex-item > div { padding: 0 10px 10px; font-size: 14px; }
.fr-ex-plac { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: var(--fr-bluegrey-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.fr-ex-summary.is-after strong { color: var(--fr-green); }
.fr-files { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.fr-file { min-width: 0; padding: 14px; border-radius: 6px; background: #fff; border: 1px solid var(--fr-line); border-top: 6px solid var(--fr-plum); }
.fr-file h4 { margin: 0 0 6px; }
.fr-file details summary { cursor: pointer; font-weight: 800; padding: 8px 0; }
.fr-check { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.fr-check li { position: relative; padding-left: 24px; }
.fr-check li::before { content: ""; position: absolute; left: 0; top: 5px; width: 13px; height: 13px; border-radius: 3px; border: 2px solid var(--fr-plum); }
.fr-mistakes > div { border-left-color: var(--fr-brick); background: #fff; }

.fr-more-btn { display: none; align-items: center; min-height: 44px; margin-top: 8px; padding: 8px 14px; border-radius: 6px; border: 2px solid var(--fr-plum); background: #fff; color: var(--fr-plum); font-weight: 800; }
.fr-more-btn[aria-expanded="true"] { background: var(--fr-plum); color: #fff; }

@media (max-width: 860px) {
  .fr-hero-grid, .fr-two, .fr-three, .fr-files, .fr-check { grid-template-columns: 1fr; }
  .fr-hero-card { width: 64px; height: 84px; font-size: 36px; margin-left: -10px; }
  .fr-doc-head { grid-template-columns: 1fr; gap: 10px; }
  .fr-cols, .fr-ex-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* Mobile: cards stacked chronologically; each shows placering, datum, bana, distans, prestation; the rest via a button */
  .fr-tabs { display: none; }
  .fr-panel { display: block !important; margin-top: 10px; border-radius: 8px; }
  .fr-panel[hidden] { display: block !important; }
  .fr-doc .fr-facts div:nth-child(n+4), .fr-doc > p, .fr-doc .fr-galopp, .fr-doc .fr-zero, .fr-doc .fr-note { display: none; }
  .fr-panel.is-open .fr-doc .fr-facts div:nth-child(n+4), .fr-panel.is-open .fr-doc > p, .fr-panel.is-open .fr-doc .fr-galopp, .fr-panel.is-open .fr-doc .fr-zero, .fr-panel.is-open .fr-doc .fr-note { display: revert; }
  .fr-panel.is-open .fr-doc .fr-facts div:nth-child(n+4) { display: block; }
  .fr-panel.is-open .fr-doc .fr-galopp { display: grid; }
  .fr-panel.is-open .fr-doc .fr-note { display: grid; }
  .fr-doc-head { grid-template-columns: auto 1fr; }
  .fr-doc-head .fr-grade:nth-child(3) { grid-column: 1 / -1; }
  .fr-more-btn { display: inline-flex; }
  .fr-cols, .fr-ex-items { grid-template-columns: 1fr; }
}