@import url('/dynamics/scorecard/charts.css');

.scorecard-page {
  --series-ours: #2E8B57;
  --series-dynasim: #9A5BB5;
  color: var(--text-primary);
}
[data-theme="dark"] .scorecard-page,
.scorecard-page[data-theme="dark"] {
  --series-ours: #3FA072;
  --series-dynasim: #A27CCB;
}
.scorecard-page .brand { color: var(--text-primary); }
.scorecard-page .foot-fine { color: var(--text-secondary); }
.scorecard-page .nav { background: var(--canvas); }
.scorecard-page :focus-visible { outline: 2px solid var(--text-primary); outline-offset: 5px; }
.scorecard-page [hidden] { display: none !important; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 100; transform: translateY(-200%); padding: .6rem 1rem; background: var(--card); color: var(--text-primary); }
.skip-link:focus { transform: none; }
.scorecard-main { max-width: 1180px; margin: 0 auto; padding: 7.5rem 1.5rem 5rem; }
.scorecard-main > .strategy-crumb { font: .8rem var(--mono); color: var(--text-secondary); margin: 0 0 2.5rem; }
.scorecard-main a { color: var(--text-primary); text-underline-offset: .2em; }
.scorecard-main a:hover { text-decoration-thickness: 2px; }
.scorecard-hero { max-width: 940px; padding-bottom: 1.8rem; }
.scorecard-hero .eyebrow { color: var(--text-secondary); letter-spacing: .1em; font-size: .73rem; margin-bottom: 1.1rem; }
.scorecard-hero h1 { font-size: clamp(2.5rem, 6vw, 4.7rem); line-height: 1.07; letter-spacing: -.035em; max-width: 850px; margin-bottom: 1.5rem; }
.scorecard-lede { font-size: clamp(1.15rem, 2vw, 1.35rem); max-width: 820px; }
.scorecard-lede p { margin-bottom: 1rem; }
.scorecard-main button, .scorecard-main select, #tour-dialog button {
  font: .82rem/1.4 var(--mono); color: var(--text-primary); background: var(--card);
  border: 1px solid var(--border-strong); border-radius: 6px; min-height: 44px; padding: .65rem 1rem; cursor: pointer;
}
.scorecard-main button:hover, #tour-dialog button:hover { background: var(--section); }
.scorecard-main button[aria-pressed="true"] { background: var(--section); border-color: var(--text-primary); }
.scorecard-main button:disabled, #tour-dialog button:disabled { opacity: .55; cursor: default; }
#tour-start { background: var(--text-primary); color: var(--canvas); border-color: var(--text-primary); }
#tour-start:hover { background: var(--text-secondary); }
.control-row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1.3rem; }
.text-link { font: .8rem var(--mono); padding: .7rem .4rem; }
.score-section { padding-top: 2.8rem; margin-top: 2.8rem; border-top: 1px solid var(--border-strong); scroll-margin-top: 6rem; min-width: 0; }
.score-section h2 { max-width: 40ch; font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1.2; font-weight: 400; margin: 0 0 1.5rem; color: var(--text-primary); }
.score-section h3 { font-size: 1.13rem; line-height: 1.3; margin: 0 0 .75rem; color: var(--text-primary); font-weight: 600; }
.score-section p { margin: 0 0 1rem; }
.score-section ul { padding-left: 1.2rem; }
.score-section li { margin-bottom: .8rem; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.summary-card { border: 1px solid var(--border-strong); border-radius: 10px; padding: 1.35rem; background: var(--card); display: flex; flex-direction: column; min-width: 0; position: relative; }
.summary-card:focus-within, .summary-card:hover { border-color: var(--text-secondary); }
.summary-card h3 { font: .92rem/1.5 var(--mono); margin-bottom: 1rem; }
.summary-card h3 a { text-decoration: none; }
.summary-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
.summary-card abbr { position: relative; z-index: 1; }
.summary-card p { font-size: 1rem; line-height: 1.5; }
.summary-card .verdict { margin: auto 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border-soft); font-size: .95rem; display: flex; justify-content: space-between; gap: .5rem; }
.method-stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; padding: 0; gap: 1.2rem; margin: 1.7rem 0 2rem; }
.method-stepper li { font-size: .96rem; line-height: 1.55; border-top: 1px solid var(--border-strong); padding-top: 1rem; }
.step-number { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--border-strong); border-radius: 50%; margin-bottom: 1rem; font-size: .8rem; background: var(--section); }
.method-notes { columns: 2; column-gap: 2.5rem; }
.method-notes p { break-inside: avoid; }
.timeline-panel { padding: 1.5rem; border: 1px solid var(--border-strong); background: var(--card); border-radius: 10px; margin-top: 1.8rem; }
.timeline-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.timeline-heading h3 { margin: 0; }
.timeline-heading label { font: .75rem var(--mono); display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.timeline-heading select { max-width: 100%; }
.timeline-events { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; gap: 1.2rem; padding: 0; }
.timeline-events li { margin: 0; border-left: 2px solid var(--border-strong); padding-left: .85rem; min-width: 0; }
.timeline-events strong { display: block; font-size: 1rem; margin-bottom: .6rem; }
.timeline-events time, .timeline-events li > span { display: block; font: .73rem/1.7 var(--mono); color: var(--text-secondary); }
.timeline-copy { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border-soft); font-size: .95rem; }
.timeline-copy p { margin-bottom: 0; }
.exercise-source { font: .78rem/1.6 var(--mono); color: var(--text-secondary); }
.exercise-chart { margin: 1.75rem 0 2rem; min-width: 0; }
.exercise-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem 2.7rem; }
.copy-section { min-width: 0; border-top: 1px solid var(--border-soft); padding-top: 1.3rem; }
.copy-section summary { cursor: pointer; margin-bottom: 1rem; }
.copy-section summary h3, .presenter-notes summary h2 { display: inline; }
.copy-section summary::marker, .presenter-notes summary::marker { color: var(--text-secondary); }
.copy-body { font-size: 1.03rem; line-height: 1.6; }
.copy-table-wrap { width: 100%; overflow-x: auto; margin-bottom: 1rem; border: 1px solid var(--border-soft); border-radius: 6px; }
.copy-table-wrap table { width: 100%; border-collapse: collapse; font: .72rem/1.7 var(--mono); }
.copy-table-wrap th, .copy-table-wrap td { padding: .65rem; text-align: right; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.copy-table-wrap th:first-child { text-align: left; }
.copy-table-wrap thead th { background: var(--section); color: var(--text-secondary); }
.reading-section ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2.7rem; list-style: none; padding: 0; }
.reading-section li { border-left: 2px solid var(--border-strong); padding-left: 1.2rem; }
.next-section p { max-width: 850px; margin-bottom: 1.5rem; }
.standing-section p { max-width: 850px; }
.standing-section h3 { margin-top: 1.8rem; }
.standing-section .copy-table-wrap table { font: inherit; font-size: .84rem; line-height: 1.5; }
.standing-section .copy-table-wrap th, .standing-section .copy-table-wrap td { white-space: normal; text-align: left; vertical-align: top; min-width: 11rem; }
.standing-section .copy-table-wrap th:first-child { min-width: 8.5rem; }
.glossary-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; font-size: 1rem; }
.glossary-list dt { font-weight: 600; margin-bottom: .35rem; }
.glossary-list dd { color: var(--text-secondary); }
abbr[data-definition] { text-decoration: underline dotted var(--border-strong); text-underline-offset: .18em; cursor: help; }
.glossary-tooltip { position: fixed; z-index: 40; max-width: min(350px, calc(100vw - 24px)); padding: .9rem 1rem; background: var(--popover); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 8px; font-size: 1rem; line-height: 1.5; box-shadow: 0 8px 24px #0002; }
#drill { max-width: 850px; }
.section-note { color: var(--text-secondary); }
.drill-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .76rem; color: var(--text-secondary); margin-bottom: .75rem; }
.drill-card { padding: 2rem; border: 1px solid var(--border-strong); background: var(--card); min-height: 15rem; border-radius: 10px; cursor: pointer; display: grid; place-items: center; text-align: center; font-size: 1.2rem; }
.drill-card p:last-child { margin: 0; }
.drill-card.back { background: var(--section); }
.presenter-notes { max-width: 850px; }
.presenter-notes summary { cursor: pointer; }
.presenter-notes summary h2 { max-width: none; }
.presenter-notes h3 { margin-top: 1.8rem; }
#tour-dialog { position: fixed; inset: auto 1.5rem 1.5rem auto; width: min(440px, calc(100vw - 3rem)); max-height: calc(100dvh - 3rem); margin: 0; padding: 1.5rem; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--card); color: var(--text-primary); box-shadow: 0 16px 60px #0003; overflow-y: auto; }
#tour-dialog::backdrop { background: #0002; }
#tour-dialog h2 { font-size: 1.65rem; margin: 1rem 0 .75rem; line-height: 1.2; }
#tour-dialog p { margin-bottom: .75rem; line-height: 1.5; }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#tour-count { font-size: .8rem; color: var(--text-secondary); }
#tour-close { padding: .4rem .6rem; }
#tour-next { margin-left: auto; }
.tour-highlight { outline: 2px solid var(--text-secondary); outline-offset: 10px; }
@media (max-width: 1000px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline-events { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .scorecard-main { padding: 6.3rem 1.15rem 3.5rem; }
  .scorecard-main > .strategy-crumb { margin-bottom: 2rem; }
  .scorecard-hero { padding-bottom: .5rem; }
  .score-section { margin-top: 2rem; padding-top: 2rem; }
  .summary-grid, .exercise-copy, .reading-section ul, .glossary-list { grid-template-columns: minmax(0, 1fr); }
  .summary-card { padding: 1.25rem; }
  .method-stepper { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .method-stepper li { position: relative; padding: 1rem 0 .5rem 3.3rem; }
  .step-number { position: absolute; left: 0; top: 1rem; }
  .method-notes { columns: auto; }
  .timeline-panel { padding: 1.1rem; }
  .timeline-events { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .timeline-heading { align-items: flex-start; }
  .copy-section { padding-top: 1rem; }
  .exercise-copy { gap: .75rem; }
  .copy-section summary { min-height: 44px; margin-bottom: .25rem; }
  .copy-section summary h3 { line-height: 1.5; }
  .drill-card { padding: 1.3rem; min-height: 17rem; }
  #tour-dialog { right: 1rem; bottom: 1rem; width: calc(100vw - 2rem); max-height: 48dvh; padding: 1.1rem; }
  .tour-highlight { outline-offset: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scorecard-page *, .scorecard-page *::before, .scorecard-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.precision-note { color: var(--text-secondary); font-size: .9rem; max-width: 850px; }