/* The tablet dashboard occupies one viewport; long candidate lists use pages. */
html, body { height: 100%; overflow: hidden; }
.app-shell { width: 100%; max-width: 1520px; height: 100dvh; padding: 8px 12px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 50px minmax(0, 1fr); gap: 8px; overflow: hidden; }
.app-header { min-height: 0; height: 50px; padding: 5px 12px; border-radius: 14px; }
.header-brand img { width: 116px; max-height: 36px; }
.icon-action { height: 33px; min-width: 33px; }
.full-panel-link { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--border); border-radius: 10px; color: #9acde8; text-decoration: none; font-size: 20px; }
main { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 2.6fr) minmax(0, 2.4fr); gap: 7px; }
.intro { grid-row: 1; min-height: 0; height: 47px; padding: 0 4px; }
.intro h1 { font-size: clamp(24px, 3vw, 32px); margin: 2px 0 0; }
.intro p, .intro-mark, .eyebrow { display: none; }
.notice { grid-row: 2; padding: 5px 9px; font-size: 11px; }
.demo-banner { grid-row: 3; padding: 5px 9px; font-size: 10px; gap: 6px; }
.demo-symbol { font-size: 15px; }
.controls { grid-row: 4; padding: 9px 12px; border-radius: 13px; }
.controls-top { margin-bottom: 5px; }
.turn-global { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.turn-global .turn-caption { display: block; }
.turn-global .quick-turn { width: 88px; height: 30px; }
.office-tabs button[hidden] { display: none !important; }
body[data-turn="2"] .office-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.office-tabs { gap: 6px; }
.office-tabs button { min-height: 32px; border-radius: 8px; font-size: 11px; }
.tab-icon { font-size: 15px; }
.scope-controls { margin-top: 6px; gap: 8px; }
.scope-buttons { min-height: 31px; padding: 2px; border-radius: 8px; }
.scope-buttons button { padding: 0 9px; font-size: 10px; }
.select-field { gap: 2px; min-width: 120px; }
.select-field span { font-size: 8px; }
.select-field select { height: 31px; border-radius: 8px; font-size: 11px; }
.quick-turn { height: 31px; border-radius: 8px; padding: 2px; }
.turn-field { gap: 2px; }
.turn-caption { font-size: 8px; }
.panel-switch { display: none; }
.overview-grid { grid-row: 5; min-height: 0; margin: 0; grid-template-columns: minmax(0, 1.55fr) minmax(265px, .95fr); gap: 8px; }
.below-grid { grid-row: 6; min-height: 0; margin: 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 8px; align-items: stretch; }
.feature, .progress-card, .totals-card, .ranking-card, .trend-card { min-height: 0; border-radius: 13px; }
.feature { padding: 10px 12px 7px; }
.section-kicker { font-size: 8px; }
.section-heading h2, .panel-heading h2 { font-size: 15px; margin-top: 3px; }
.status-chip { padding: 4px 6px; font-size: 8px; }
.feature-content { min-height: 0; gap: 5px; justify-content: flex-start; padding-top: 5px; }
.featured-candidate { flex: 1 1 0; min-height: 62px; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 7px; padding: 7px 8px; border-radius: 9px; }
.featured-candidate, .featured-candidate.first, .featured-candidate.second { background: linear-gradient(110deg, color-mix(in srgb, var(--party-color) 25%, transparent), rgba(255,255,255,.025) 75%); border-color: color-mix(in srgb, var(--party-color) 50%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--party-color) 12%, transparent); }
.featured-candidate .featured-rank, .featured-candidate.second .featured-rank, .featured-candidate .featured-numbers small, .featured-candidate.second .featured-numbers small { color: color-mix(in srgb, var(--party-color) 62%, white); }
.ranking-list .candidate-row .candidate-place, .ranking-list .candidate-row .candidate-votes small { color: color-mix(in srgb, var(--party-color) 62%, white); }
.featured-rank { font-size: 14px; }
.featured-identity img, .featured-identity .party-fallback { width: 21px; height: 21px; }
.featured-identity h3 { font-size: 12px; }
.candidate-visual { position: relative; display: inline-grid; place-items: center; width: 27px; height: 32px; flex: none; }
.candidate-visual .candidate-photo { display: block; width: 27px; height: 32px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(135,191,231,.28); background: #173047; }
.candidate-visual .party-logo-badge { position: absolute; right: -5px; bottom: -2px; display: grid; place-items: center; width: 16px; height: 16px; padding: 1px; border-radius: 4px; background: #dbe9f1; border: 1px solid #29465e; }
.candidate-visual .party-logo-badge .candidate-logo, .candidate-visual .party-logo-badge .party-fallback { width: 13px; height: 13px; border-radius: 2px; }
.featured-identity .candidate-visual { width: 23px; height: 27px; }
.featured-identity .candidate-visual .candidate-photo { width: 23px; height: 27px; }
.featured-identity .candidate-visual .candidate-logo, .featured-identity .candidate-visual .party-fallback { width: 21px; height: 21px; }
.featured-identity .candidate-visual .party-logo-badge .candidate-logo, .featured-identity .candidate-visual .party-logo-badge .party-fallback { width: 13px; height: 13px; }
.featured-party { margin: 2px 0 3px 30px; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.featured-bar { margin-left: 30px; height: 3px; }
.featured-numbers { grid-column: 3; padding-left: 2px; display: block; text-align: right; }
.featured-numbers strong { font-size: 13px; }
.featured-numbers small { font-size: 10px; margin-top: 1px; }
.winner-banner { flex: none; padding: 4px 7px; font-size: 9px; }
.feature-foot { padding-top: 4px; margin-top: 4px; font-size: 9px; }
.feature-wait { padding: 7px 8px; }
.feature-wait-icon { width: 32px; height: 32px; margin-bottom: 5px; font-size: 20px; border-radius: 9px; }
.feature-wait h3 { font-size: 15px; margin-bottom: 3px; }
.feature-wait p { font-size: 10px; line-height: 1.3; }
.overview-aside { display: flex; min-height: 0; }
.summary-combined { min-height: 0; overflow: hidden; padding: 9px 11px; border-radius: 13px; gap: 5px; }
.summary-votes { padding-top: 6px; }
.progress-wrap { margin-top: 4px; gap: 10px; justify-content: flex-start; flex-direction: row; }
.progress-ring { width: 53px; height: 53px; }
.progress-ring-inner { width: 43px; height: 43px; }
.progress-ring-inner strong { font-size: 13px; }
.progress-ring-inner span { font-size: 7px; }
.progress-detail { text-align: left; gap: 1px; }
.progress-detail span { font-size: 8px; }
.progress-detail strong { font-size: 13px; }
.progress-detail small { font-size: 9px; }
.totals-grid { margin-top: 5px; gap: 3px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.total-item { height: 29px; overflow: hidden; padding: 2px 7px; border-radius: 6px; }
.total-item span { display: block; font-size: 8px; line-height: 9px; }
.total-item strong { font-size: 11px; line-height: 13px; margin-top: 1px; }
.ranking-card, .trend-card { padding: 10px 12px; display: flex; flex-direction: column; overflow: hidden; }
.ranking-count, .trend-count { padding: 4px 6px; font-size: 9px; }
.ranking-tools { margin: 7px 0 4px; gap: 5px; }
.search-field input { height: 29px; font-size: 10px; }
.favorite-toggle { min-width: 84px; font-size: 10px; }
.ranking-list { flex: 1 1 0; height: 0; min-height: 0; overflow: hidden; }
.candidate-row { min-height: 45px; padding: 4px 2px; gap: 5px; grid-template-columns: 21px 24px 27px minmax(0, 1fr) auto; }
.candidate-row .candidate-visual { grid-column: 3; }
.candidate-logo, .party-fallback { width: 25px; height: 25px; }
.favorite-star { font-size: 19px; }
.candidate-info strong { font-size: 11px; }
.candidate-info small { font-size: 9px; margin-top: 1px; }
.candidate-votes { min-width: 65px; }
.candidate-votes strong { font-size: 11px; }
.candidate-votes small { font-size: 9px; margin-top: 1px; }
.ranking-empty { padding: 14px 5px; }
.ranking-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 25px; border-top: 1px solid rgba(173,204,231,.12); color: #89a9c2; font-size: 10px; }
.ranking-pagination > div { display: flex; gap: 5px; }
.ranking-pagination button { width: 24px; height: 21px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(150,196,230,.25); border-radius: 6px; color: #a7e2f4; background: rgba(50,118,169,.12); font-size: 19px; line-height: 1; }
.ranking-pagination button:disabled { opacity: .3; cursor: default; }
#trend-content { flex: 1 1 0; min-height: 0; overflow: hidden; }
.trend-content { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.trend-svg { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; margin-top: 4px; }
.trend-legend { flex: none; gap: 3px 10px; margin-top: 3px; }
.trend-legend-item { font-size: 9px; }
.trend-foot { flex: none; font-size: 9px; margin: 5px 0 0; }
.trend-empty { height: 100%; min-height: 0; padding: 5px; }
.trend-empty-icon { width: 35px; height: 35px; margin-bottom: 6px; font-size: 20px; border-radius: 10px; }
.trend-empty h3 { font-size: 13px; }
.trend-empty p { font-size: 10px; }
.seats-list { margin-top: 8px; gap: 4px; }
.seat-item { padding: 5px 7px; gap: 5px; }
.seat-item img, .seat-item .party-fallback { width: 20px; height: 20px; }
.seat-item-name { font-size: 10px; }
.seat-item strong { font-size: 11px; }
.seat-item { width: 100%; min-width: 0; color: #e6f3ff; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.seat-item:hover, .seat-item:focus-visible { border-color: rgba(118,216,239,.46); background: rgba(67,144,191,.18); transform: translateY(-1px); outline: none; }
.seat-item-arrow { color: #84b9d3; font-size: 18px; line-height: 1; }
.seat-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 5px; color: #93b4ce; font-size: 10px; }
.seat-pagination span { margin-right: 4px; }
.seat-pagination button { display: grid; place-items: center; width: 23px; height: 21px; padding: 0; border: 1px solid rgba(150,196,230,.25); border-radius: 6px; background: rgba(50,118,169,.12); color: #a7e2f4; font-size: 18px; cursor: pointer; }
.seat-pagination button:disabled { opacity: .35; cursor: default; }
.seat-modal[hidden] { display: none !important; }
.seat-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.seat-modal-backdrop { position: absolute; inset: 0; background: rgba(2,10,20,.75); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.seat-dialog { position: relative; display: flex; flex-direction: column; width: min(100%, 680px); max-height: min(710px, calc(100dvh - 28px)); min-height: 0; overflow: hidden; padding: 20px; border-radius: 20px; background: linear-gradient(145deg, rgba(20,49,75,.98), rgba(6,22,40,.98)); border-color: rgba(127,204,238,.3); box-shadow: 0 28px 90px rgba(0,0,0,.5), 0 0 45px rgba(42,151,218,.14); animation: seat-dialog-in .25s ease-out both; }
@keyframes seat-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.seat-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(164,201,228,.16); }
.seat-dialog-head h2 { margin: 5px 0 5px; color: #f0f8ff; font-size: clamp(20px, 3vw, 27px); line-height: 1.15; }
.seat-dialog-head p { margin: 0; color: #a3c4db; font-size: 12px; line-height: 1.4; }
.seat-dialog-close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid rgba(148,195,227,.28); border-radius: 10px; background: rgba(120,172,212,.12); color: #d7ecfa; font-size: 25px; line-height: 1; cursor: pointer; }
.seat-dialog-close:hover, .seat-dialog-close:focus-visible { background: rgba(118,203,228,.23); border-color: rgba(118,216,239,.6); outline: none; }
.seat-dialog-list { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 2px; scrollbar-color: rgba(112,177,217,.55) transparent; }
.seat-candidate { display: grid; grid-template-columns: 30px 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 54px; padding: 7px 3px; border-bottom: 1px solid rgba(164,201,228,.11); }
.seat-candidate:last-child { border-bottom: 0; }
.seat-candidate-rank { font-size: 12px; font-weight: 800; color: #82cfe5; text-align: center; }
.seat-candidate .candidate-visual { width: 32px; height: 38px; }
.seat-candidate .candidate-photo { width: 32px; height: 38px; }
.seat-candidate-identity { min-width: 0; }
.seat-candidate-identity strong, .seat-candidate-identity small, .seat-candidate-votes strong, .seat-candidate-votes small { display: block; }
.seat-candidate-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f2f8fe; font-size: 13px; }
.seat-candidate-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; color: #8facc5; font-size: 10px; }
.seat-candidate-votes { text-align: right; font-variant-numeric: tabular-nums; }
.seat-candidate-votes strong { color: #a1e5f2; font-size: 13px; }
.seat-candidate-votes small { color: #779bb7; font-size: 10px; }
.seat-dialog-note { flex: none; margin: 11px 0 0; padding: 10px 11px; border: 1px solid rgba(113,199,230,.17); border-radius: 10px; background: rgba(50,143,193,.09); color: #a7c7dd; font-size: 11px; line-height: 1.4; }
@media (max-width: 600px) { .seat-dialog { padding: 14px; border-radius: 16px; } .seat-dialog-head { padding-bottom: 9px; } .seat-dialog-head p { font-size: 10px; } .seat-candidate { gap: 6px; grid-template-columns: 24px 30px minmax(0,1fr) auto; min-height: 49px; } .seat-candidate-identity strong, .seat-candidate-votes strong { font-size: 11px; } .seat-candidate .candidate-visual, .seat-candidate .candidate-photo { width: 27px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .seat-dialog { animation: none; } .seat-item { transition: none; } }
.seats-card, .app-footer { display: none !important; }

@media (max-width: 700px) {
  .app-shell { padding: 6px; grid-template-rows: 43px minmax(0, 1fr); gap: 5px; }
  .app-header { height: 43px; padding: 4px 7px; }
  .header-brand img { width: 104px; }
  .header-divider, .header-period, .clock { display: none; }
  .header-actions { gap: 4px; }
  .connection { min-width: 0; padding: 5px; font-size: 9px; }
  .icon-action, .full-panel-link { width: 28px; min-width: 28px; height: 28px; padding: 0; }
  main { grid-template-rows: auto auto auto auto auto minmax(0, 1fr); gap: 5px; }
  .intro { height: 33px; padding: 0 3px; }
  .intro h1 { font-size: 24px; }
  .controls { padding: 6px; }
  .controls-top { display: flex; justify-content: flex-end; margin-bottom: 4px; }
  .control-caption, .source-line { display: none; }
  .office-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .office-tabs button { min-height: 29px; padding: 0 8px; flex: 0 0 auto; }
  .scope-controls { flex-wrap: nowrap; margin-top: 5px; gap: 4px; }
  .scope-buttons { min-height: 29px; width: auto; flex: 0 0 auto; }
  .scope-buttons button { padding: 0 5px; font-size: 9px; }
  .select-field { min-width: 0; flex: 1 1 0; }
  .select-field select { height: 29px; font-size: 10px; padding: 0 5px; }
  .turn-field { flex: 0 0 82px; }
  .quick-turn { height: 29px; }
  .quick-turn button { font-size: 10px; }
  .turn-global .turn-caption { display: block; }
  .panel-switch { grid-row: 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .panel-switch button { height: 28px; border: 1px solid var(--border); border-radius: 7px; background: rgba(22,44,67,.7); color: #98b8d2; font-size: 10px; font-weight: 700; }
  .panel-switch button[aria-pressed="true"] { background: rgba(51,141,194,.32); border-color: rgba(108,208,232,.5); color: #e6faff; }
  .overview-grid, .below-grid { grid-row: 6; min-height: 0; margin: 0; }
  .overview-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.45fr) minmax(0, .55fr); gap: 5px; }
  .overview-aside { display: flex; gap: 5px; }
  .below-grid { display: none; grid-template-columns: 1fr; }
  .below-grid .ranking-card, .below-grid .trend-card { display: none; }
  body[data-panel="ranking"] .overview-grid, body[data-panel="trend"] .overview-grid { display: none; }
  body[data-panel="ranking"] .below-grid, body[data-panel="trend"] .below-grid { display: grid; }
  body[data-panel="ranking"] .ranking-card, body[data-panel="trend"] .trend-card { display: flex; }
  .feature, .progress-card, .totals-card, .ranking-card, .trend-card { border-radius: 10px; }
  .feature { padding: 8px; }
  .section-heading h2, .panel-heading h2 { font-size: 14px; }
  .featured-candidate { grid-template-columns: 22px minmax(0, 1fr) auto; padding: 5px; }
  .featured-party, .featured-bar { margin-left: 28px; }
  .featured-numbers { grid-column: 3; padding-left: 0; display: block; text-align: right; }
  .featured-numbers strong { font-size: 12px; }
  .featured-numbers small { font-size: 9px; }
  .progress-card, .totals-card { padding: 7px; }
  .progress-wrap { flex-direction: column; gap: 2px; margin-top: 3px; }
  .progress-ring { width: 46px; height: 46px; }
  .progress-ring-inner { width: 37px; height: 37px; }
  .progress-ring-inner strong { font-size: 11px; }
  .progress-detail { text-align: center; }
  .progress-detail span { display: none; }
  .progress-detail strong { font-size: 11px; }
  .progress-detail small { font-size: 8px; }
  .totals-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px; }
  .total-item { height: 27px; padding: 2px 3px; }
  .total-item span { font-size: 7px; }
  .total-item strong { font-size: 10px; }
  .summary-combined { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 6px; padding: 7px 9px; }
  .summary-progress { min-width: 0; }
  .summary-votes { min-width: 0; border-top: 0; border-left: 1px solid rgba(171,204,232,.12); padding: 0 0 0 7px; }
  .summary-combined .progress-wrap { flex-direction: row; justify-content: flex-start; gap: 5px; margin-top: 6px; }
  .summary-combined .progress-ring { width: 43px; height: 43px; }
  .summary-combined .progress-ring-inner { width: 35px; height: 35px; }
  .summary-combined .progress-ring-inner strong { font-size: 10px; }
  .summary-combined .progress-ring-inner span { font-size: 6px; }
  .summary-combined .progress-detail { text-align: left; gap: 1px; }
  .summary-combined .progress-detail strong { font-size: 11px; }
  .summary-combined .progress-detail small { font-size: 8px; }
  .summary-combined .totals-grid { margin-top: 5px; gap: 2px; }
  .ranking-card, .trend-card { padding: 9px; }
  .candidate-row { min-height: 45px; }
}

@media (max-height: 650px) and (min-width: 701px) {
  .app-shell { grid-template-rows: 42px minmax(0,1fr); padding: 5px 8px; gap: 5px; }
  .app-header { height: 42px; }
  main { gap: 4px; grid-template-rows: auto auto auto auto auto minmax(0, 1fr); }
  .intro { height: 32px; }
  .intro h1 { font-size: 23px; }
  .controls { padding: 6px 9px; }
  .controls-top { display: flex; }
  .office-tabs button { min-height: 29px; }
  .scope-controls { margin-top: 4px; }
  .panel-switch { grid-row: 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .panel-switch button { height: 26px; border: 1px solid var(--border); border-radius: 7px; background: rgba(22,44,67,.7); color: #98b8d2; font-size: 10px; font-weight: 700; }
  .panel-switch button[aria-pressed="true"] { background: rgba(51,141,194,.32); border-color: rgba(108,208,232,.5); color: #e6faff; }
  .overview-grid, .below-grid { grid-row: 6; }
  .below-grid { display: none; grid-template-columns: 1fr; }
  .below-grid .ranking-card, .below-grid .trend-card { display: none; }
  body[data-panel="ranking"] .overview-grid, body[data-panel="trend"] .overview-grid { display: none; }
  body[data-panel="ranking"] .below-grid, body[data-panel="trend"] .below-grid { display: grid; }
  body[data-panel="ranking"] .ranking-card, body[data-panel="trend"] .trend-card { display: flex; }
}