/* Scroll view is separate from the fixed A3 sheet. */
[hidden] { display: none !important; }
.chart-view-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: min(1180px,calc(100% - 32px)); margin: 0 auto 12px; }
.chart-view-switch { display: flex; background: #e8eff4; padding: 4px; border-radius: 10px; }
.chart-view-toolbar button { border: 1px solid transparent; border-radius: 7px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: #264b62; background: transparent; cursor: pointer; white-space: nowrap; }
.chart-view-switch button[aria-pressed="true"] { background: #fff; border-color: #c5d7e3; color: #0b5781; box-shadow: 0 2px 5px #15374d0d; }
.chart-view-toolbar .shortcut-side { border-color: #c5d7e3; background: #fff; }
.chart-view-toolbar button:focus-visible,.quick-shortcuts button:focus-visible,.quick-list:focus-visible { outline: 3px solid #1579b6; outline-offset: 2px; }
.quick-view { --quick-accent: #247c90; --quick-soft: #e4f6f8; width: min(1180px,calc(100% - 32px)); height: auto; min-height: 0; margin: 0 auto 24px; display: flex; flex-direction: column; background: #fff; border: 1px solid #d3e1e8; border-radius: 14px; overflow: hidden; }
.quick-view[data-tone="mint"] { --quick-accent:#397c65; --quick-soft:#e8f5ef; }
.quick-view[data-tone="lavender"] { --quick-accent:#645ca1; --quick-soft:#efedfa; }
.quick-view[data-tone="peach"] { --quick-accent:#985b37; --quick-soft:#fbefe7; }
.quick-view[data-tone="rose"] { --quick-accent:#9c5968; --quick-soft:#faecef; }
.quick-view-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px; background: var(--quick-soft); color: var(--quick-accent); }
.quick-view-header h2 { font-size: 16px; margin: 0; line-height: 1.4; }
.quick-view-header output { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quick-hint { margin: 0; padding: 8px 18px; color: #526d80; font-size: 12px; line-height: 1.5; }
.quick-body { --rail: 64px; display: grid; grid-template-columns: var(--rail) minmax(0,1fr); grid-template-areas: 'shortcuts routes'; gap: 10px; padding: 0 12px; flex: 1; min-height: 0; }
.quick-view[data-side="right"] .quick-body { grid-template-columns: minmax(0,1fr) var(--rail); grid-template-areas: 'routes shortcuts'; }
.quick-shortcuts { grid-area: shortcuts; display: grid; grid-template-rows: repeat(17,minmax(0,1fr)); gap: 3px; padding: 0; min-height: 0; }
.quick-shortcuts button { display: grid; place-items: center; min-height: 0; min-width: 0; padding: 0 2px; border: 1px solid #e2d389; border-radius: 5px; background: #fff8d6; color: #554600; font: 700 13px/1 Arial,sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; }
.quick-shortcuts button.active { background: #ffe77d; border-color: #a4891c; color: #292100; box-shadow: inset 3px 0 #ab8613; }
.quick-list { grid-area: routes; position: relative; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; border: 1px solid #d8e4eb; border-radius: 8px; }
.quick-row { display: grid; grid-template-columns: 68px minmax(0,1fr); align-items: center; gap: 14px; min-height: 94px; padding: 14px 18px 14px 0; border-bottom: 1px solid #dbe5eb; margin: 0; }
.quick-row:nth-child(even) { background: #f7fafc; }
.quick-row h3 { margin: 0; padding: 4px 8px; font: 800 25px/1.3 Arial,sans-serif; color: #1b4460; text-align: center; font-variant-numeric: tabular-nums; }
.quick-route { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.quick-dart { display: inline-flex; align-items: center; justify-content: center; min-width: 45px; padding: 6px 9px; border-radius: 6px; color: #fff; font: 800 15px/1.1 Arial,sans-serif; letter-spacing: .02em; }
.dart-s { background: #467862; }.dart-d { background: #007ba9; }.dart-t { background: #d52656; }.dart-bull { background: #7740c3; }.dart-empty { background: #edf1f4; color:#667c89; }
.quick-description { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 0; font-size: 13px; color: #284a61; line-height: 1.5; }
.quick-description span { color: #667c89; }
.quick-row.no-checkout h3 { color: #718793; }
.quick-legend { padding: 9px 12px; margin: 0; font-size: 11px; color: #587082; text-align: center; }
/* The document scrolls naturally; only the single shortcut rail is sticky. */
body[data-chart-view="quick"] { height: auto; overflow: visible; }
body[data-chart-view="quick"] .site-shell { min-height: 0; overflow: visible; }
.quick-view { height: auto; min-height: 0; display: block; overflow: visible; }
.quick-body { align-items: start; overflow: visible; padding-bottom: 8px; }
.quick-rail { grid-area: shortcuts; position: sticky; top: 8px; align-self: start; height: var(--rail-height,calc(100dvh - 16px)); max-height: 620px; display: flex; flex-direction: column; gap: 4px; }
.quick-shortcuts { flex: 1; min-height: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(17,minmax(0,1fr)); gap: 2px; }
.quick-settings { flex: 0 0 22px; display: grid; place-items: center; font-size: 10px; color: #245b7a; text-decoration: none; border: 1px solid #d3e1e8; border-radius: 4px; background: #fff; }
.quick-list { overflow: visible; scrollbar-gutter: auto; border-radius: 6px; }
.quick-row { min-height: 48px; padding: 4px 10px 4px 0; grid-template-columns: 48px minmax(0,1fr); gap: 8px; scroll-margin-top: 8px; }
.quick-row h3 { font-size: 20px; }
.quick-route { margin-bottom: 2px; gap: 4px; }
.quick-dart { padding: 3px 7px; min-width: 38px; font-size: 13px; border-radius: 4px; }
.quick-description { font-size: 11px; line-height: 1.4; }
.chart-view-toolbar { flex-wrap: wrap; }
.quick-view-header { border-radius: 14px 14px 0 0; padding: 8px 12px; }
.quick-hint { padding: 4px 12px 8px; }
@media screen and (max-width:700px), screen and (max-width:1100px) and (max-height:500px) {
 body[data-chart-view="quick"] > .usage-notice,
 body[data-chart-view="quick"] .site-menu-shell,
 body[data-chart-view="quick"] .screen-controls .site-tool-eyebrow,
 body[data-chart-view="quick"] .screen-controls .tool-intro,
 body[data-chart-view="quick"] .ad-slot { display: none; }
 body[data-chart-view="quick"] .site-shell { padding: 8px 8px 20px; }
 body[data-chart-view="quick"] .site-header-inner { min-height: 40px; padding-block: 4px; }
 body[data-chart-view="quick"] .screen-controls { width: 100%; margin: 0 0 8px; display: block; }
 body[data-chart-view="quick"] .screen-controls > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
 body[data-chart-view="quick"] .screen-controls h1 { font-size: 17px; line-height: 1.4; }
 body[data-chart-view="quick"] .tool-guide-access { margin: 0; }
 body[data-chart-view="quick"] .tool-guide-link { font-size: 10px; padding-block: 4px; }
 body[data-chart-view="quick"] .chart-tabs { width: 100%; margin: 0 0 6px; gap: 4px; padding: 0; }
 body[data-chart-view="quick"] .chart-tabs button { height: 34px; border-radius: 6px; }
 .chart-view-toolbar { width: calc(100% - 16px); gap: 4px; }
 body[data-chart-view="quick"] .chart-view-toolbar { width: 100%; margin: 0 0 6px; }
 .chart-view-toolbar button { font-size: 11px; padding: 6px 7px; }
 body[data-chart-view="quick"] .quick-view { width: 100%; margin: 0; }
 .quick-view-header { padding: 6px 8px; }
 .quick-view-header h2 { font-size: 12px; }
 .quick-view-header output { font-size: 12px; }
 .quick-hint { padding: 4px 8px; font-size: 10px; }
 .quick-body { --rail: 46px; gap: 6px; padding-inline: 5px; }
 .quick-shortcuts button { font-size: 12px; }
 .quick-row { min-height: 44px; grid-template-columns: 38px minmax(0,1fr); gap: 5px; padding: 3px 4px 3px 0; }
 .quick-row h3 { font-size: 18px; padding: 0 1px; }
 .quick-route { gap: 3px; }
 .quick-dart { min-width: 32px; font-size: 12px; padding: 3px 5px; }
 .quick-description { font-size: 10px; line-height: 1.4; }
 .quick-description span { display: none; }
 .quick-legend { font-size: 10px; padding: 6px; }
}
@media screen and (max-height:500px) and (orientation:landscape) {
 body[data-chart-view="quick"] .chart-tabs { grid-template-columns: repeat(5,minmax(0,1fr)); }
 .quick-shortcuts { gap: 1px; }
 .quick-shortcuts button { font-size: 10px; }
 .quick-row { min-height: 40px; }
}
@media print {
 #chartViewToolbar,#quickView { display: none !important; }
 #chartViewport { display: block !important; }
 .site-chrome { display:none !important; }
}

/* Matching pastel score bands, repeated every four shortcut groups. */
[data-band-tone="yellow"] { --band-light:#fff9e8; --band-dark:#fff0be; --band-button:#fff4cc; --band-active:#ffe697; --band-line:#d8bb60; --band-ink:#594813; }
[data-band-tone="green"] { --band-light:#f0f9f3; --band-dark:#ddf0e3; --band-button:#e6f4e9; --band-active:#bde2c9; --band-line:#85b89a; --band-ink:#27563b; }
[data-band-tone="blue"] { --band-light:#f0f7fc; --band-dark:#dcecf8; --band-button:#e5f1fb; --band-active:#b9d9f1; --band-line:#7eacca; --band-ink:#294e6b; }
[data-band-tone="pink"] { --band-light:#fff2f6; --band-dark:#f9e0ea; --band-button:#fde9f0; --band-active:#f1bed1; --band-line:#cf95ac; --band-ink:#734357; }
.quick-shortcuts button { background:var(--band-button); border-color:var(--band-line); color:var(--band-ink); }
.quick-shortcuts button.active { background:var(--band-active); color:var(--band-ink); border:2px solid var(--band-ink); box-shadow:inset 3px 0 var(--band-ink); }
.quick-row { background:var(--band-light); }
.quick-row:nth-child(even) { background:var(--band-dark); }
.quick-choices { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:10px; }
.quick-candidate { min-width:0; }
.quick-candidate.candidate-second { display:none; }
.quick-view[data-candidates="2"] .quick-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
.quick-view[data-candidates="2"] .candidate-second { display:block; }
.quick-route { flex-wrap:nowrap; }
.quick-dart { flex:0 0 auto; }
.quick-description { display:block; }
.quick-description b { font-weight:700; }
.quick-bull-legend { margin:0; padding:0 12px 8px; color:#516e7d; font-size:11px; line-height:1.4; }
.quick-rail { --safe-bottom:env(safe-area-inset-bottom,0px); top:var(--rail-top,8px); height:var(--rail-height,calc(100dvh - 32px)); max-height:620px; overflow:auto; }
.quick-top { flex:0 0 22px; min-height:0; display:grid; place-items:center; padding:0 2px; border:1px solid #b7cfdd; border-radius:4px; background:#e9f2f7; color:#245b7a; font:700 10px/1.1 Arial,sans-serif; cursor:pointer; }
.quick-shortcuts { overflow-y:auto; grid-template-rows:repeat(17,minmax(12px,1fr)); }
.quick-rail[data-compact="true"] { gap:2px; }
.quick-rail[data-compact="true"] .quick-top,.quick-rail[data-compact="true"] .quick-settings { flex-basis:18px; font-size:10px; }
.quick-rail[data-compact="true"] .quick-shortcuts { gap:1px; grid-template-rows:repeat(17,minmax(10px,1fr)); }
.quick-rail[data-compact="true"] .quick-shortcuts button { font-size:10px; }
.quick-rail[data-short="true"] .quick-top,.quick-rail[data-short="true"] .quick-settings { flex-basis:16px; font-size:9px; }
.quick-rail[data-short="true"] .quick-shortcuts { gap:0; grid-template-rows:repeat(17,minmax(9px,1fr)); }
.quick-rail[data-short="true"] .quick-shortcuts button { font-size:9px; border-width:1px; }
@media screen and (max-width:700px), screen and (max-width:1100px) and (max-height:500px) {
 .quick-bull-legend { padding:0 8px 6px; font-size:10px; }
 .quick-choices { gap:8px; }
}