/* ==========================================================================
   Premium layer for every 歷年選舉 page (index / town / local-executive / councilor)
   Loaded last. Principles: no cursor glow on maps, hairline borders,
   soft layered depth, calm motion (spring ease, no overshoot).
   ========================================================================== */
:root{
  --pm-ease:cubic-bezier(.22,1,.36,1);
  --pm-ease-io:cubic-bezier(.65,0,.35,1);
  --pm-ink:#171310;
  --pm-paper:#ece6dc;
  --pm-card:#f6f2eb;
  --pm-hair:rgba(23,19,16,.09);
  --pm-hair-strong:rgba(23,19,16,.16);
  --pm-depth:0 1px 1px rgba(40,28,18,.04),0 2px 6px -2px rgba(40,28,18,.06),0 14px 32px -18px rgba(40,28,18,.22);
  --pm-depth-hover:0 1px 1px rgba(40,28,18,.05),0 6px 14px -6px rgba(40,28,18,.12),0 24px 48px -22px rgba(40,28,18,.32);
}
body.history-product{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body.history-product :is(.cand-votes,.meta-stats strong,.overview-stat strong,.election-overview-stat strong,.party-vote-card>b,.local-seat-card strong,.local-vote,.county-row-votes,.county-row-share,.local-head-stat strong,.councilor-town-votes){font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* --------------------------------------------------------------------------
   1. MAPS — remove every cursor glow / halo / smudge
   -------------------------------------------------------------------------- */
html body.history-product :is(#map,#mobile-map,#local-map,.local-map,.paired-compare-maps svg,.councilor-compare-maps svg){filter:none!important}
html body.history-product :is(.county,.local-county,.town,.archive-county,.paired-compare-maps path,.councilor-compare-maps path),
html body.history-product :is(.county,.local-county,.town,.archive-county,.paired-compare-maps path,.councilor-compare-maps path):is(:hover,.selected,.archive-compare-selected,[data-compare-selected="true"]){filter:none!important}
html body.history-product :is(.county,.local-county,.town,.archive-county,.paired-compare-maps path,.councilor-compare-maps path){transition:fill .6s var(--pm-ease),fill-opacity .35s var(--pm-ease),opacity .35s var(--pm-ease),stroke .2s ease,stroke-width .2s ease}
/* Focus by contrast instead of glow: hovered region gets a crisp ink outline, the rest recede. */
@media (hover:hover) and (pointer:fine){
  html body.history-product svg:has(:is(.county,.local-county,.archive-county,.paired-compare-maps path):hover) :is(.county,.local-county,.archive-county):not(:hover):not(.selected),
  html body.history-product .paired-compare-maps svg:has(path:hover) path:not(:hover):not(.selected){fill-opacity:.58}
  html body.history-product svg:has(.town:hover) .town:not(:hover):not(.selected){fill-opacity:.55}
  html body.history-product :is(.county,.local-county,.archive-county,.paired-compare-maps path,.councilor-compare-maps path):hover{stroke:var(--pm-ink)!important;stroke-width:1.8!important}
  html body.history-product .town:hover{stroke:#fff!important;stroke-width:1.8!important}
}
html body.history-product :is(.county,.local-county,.archive-county).selected{stroke:#E4022B!important;stroke-width:2.2!important}
/* Calm entrance for the map itself (runs once when the svg first paints). */
@keyframes pm-map-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
html body.history-product :is(#map,#local-map){animation:pm-map-in 1.1s var(--pm-ease) .12s both;transform-origin:50% 55%}

/* Map canvas: clean paper with a whisper of structure, no radial smudge. */
html body.history-archive :is(.map-panel,.local-map-panel){background:
  radial-gradient(rgba(23,19,16,.075) 1px,transparent 1.2px) 0 0/22px 22px,
  linear-gradient(180deg,#ede7dd 0%,#e7e0d4 100%)!important}
html body.history-town .map-panel{background:
  radial-gradient(rgba(255,255,255,.045) 1px,transparent 1.2px) 0 0/22px 22px,
  linear-gradient(180deg,#121110 0%,#0d0d0d 100%)!important}
html body.history-product :is(.map-title,.local-map-title) small{letter-spacing:.24em}
html body.history-product :is(.map-title,.local-map-title) strong{letter-spacing:-.02em}

/* Tooltip — frosted glass, follows the map theme. */
html body.history-product :is(#tooltip,.tooltip,.local-tooltip){padding:10px 13px;border-radius:14px;border:1px solid rgba(255,255,255,.6);background:rgba(250,247,242,.78);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);color:var(--pm-ink);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 30px -8px rgba(30,20,12,.28),0 2px 6px rgba(30,20,12,.08);font-size:12px;font-weight:800;line-height:1.55;letter-spacing:.01em}
html body.history-town :is(#tooltip,.tooltip){border-color:rgba(255,255,255,.12);background:rgba(28,25,22,.72);color:#f4f1ea;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 14px 34px -10px rgba(0,0,0,.6)}

/* Paired compare maps: paper cards instead of flat boxes. */
html body.history-product :is(.paired-compare-maps,.councilor-compare-maps)>section{border:1px solid var(--pm-hair);border-radius:18px;background:rgba(250,247,242,.72);box-shadow:var(--pm-depth)}
html body.history-product :is(.paired-compare-maps,.councilor-compare-maps)>section+section{box-shadow:var(--pm-depth)}
html body.history-product .paired-compare-maps header span{border-radius:8px}
@media(min-width:661px){html body.history-product :is(.paired-compare-maps,.councilor-compare-maps){top:98px!important}}
@media(max-width:660px){html body.history-product :is(.paired-compare-maps,.councilor-compare-maps){top:88px!important}}

/* --------------------------------------------------------------------------
   2. HEADER / QUERY BAR — glass, refined type
   -------------------------------------------------------------------------- */
html body.history-product .site-nav{background:rgba(13,13,13,.94)!important;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border-bottom-color:rgba(255,255,255,.06)!important}
html body.history-product :is(.archive-head,.local-hero) h1{letter-spacing:-.05em;background:linear-gradient(180deg,#fff 0%,#ece6dc 62%,#bdb4a7 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html body.history-product :is(.archive-query-shell,.local-query-shell){background:rgba(15,14,13,.9)!important;-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);border-bottom-color:rgba(255,255,255,.06)!important}
html body.history-product :is(.archive-query-field select,.archive-query-static,.local-field select){border-color:rgba(255,255,255,.1)!important;background-color:rgba(255,255,255,.045)!important;border-radius:12px!important;transition:border-color .2s ease,background-color .2s ease,box-shadow .25s ease}
html body.history-product :is(.archive-query-field select,.local-field select):hover{border-color:rgba(255,255,255,.2)!important;background-color:rgba(255,255,255,.07)!important}
html body.history-product .archive-year-nav .year-btn{border-radius:14px}
html body.history-product .archive-year-nav .year-btn:not(.on){border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.035)}
html body.history-product .archive-year-nav .year-btn{transition:transform .45s var(--pm-ease),background .25s ease,border-color .25s ease,color .25s ease,box-shadow .3s ease}
html body.history-product .archive-year-nav .year-btn:not(.on):hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07);transform:translateY(-2px)}

/* iOS-style segmented control with a sliding thumb (thumb injected by premium.js). */
html body.history-product .pm-seg{position:relative;isolation:isolate;border-color:rgba(255,255,255,.1)!important;background:rgba(255,255,255,.05)!important;border-radius:12px!important;padding:3px!important;gap:0!important;overflow:hidden}
html body.history-product .pm-seg>button{position:relative;z-index:1;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:9px!important;transition:color .3s var(--pm-ease)!important}
html body.history-product .pm-seg>button.on{color:#161310!important}
html body.history-product .pm-seg-thumb{position:absolute;z-index:0;top:3px;left:0;height:calc(100% - 6px);border-radius:9px;background:#f4f1ea;box-shadow:0 3px 8px rgba(0,0,0,.2),0 1px 1px rgba(0,0,0,.12),inset 0 .5px 0 rgba(255,255,255,.9);transition:transform .5s var(--pm-ease),width .5s var(--pm-ease),opacity .2s ease;pointer-events:none}
html body.history-product .pm-seg-thumb.pm-instant{transition:none}
html body.history-product .archive-layer-switch>.pm-seg-thumb{background:#f6c945;box-shadow:0 3px 10px rgba(246,201,69,.22),0 1px 1px rgba(0,0,0,.2)}
html body.history-product .archive-layer-switch>button.on{color:#111!important}
/* Compare stats sit inside the dark workspace: glass tiles, not paper. */
html body.history-product .archive-compare-stat{border-color:rgba(255,255,255,.08)!important;background:rgba(255,255,255,.04)!important;border-radius:14px!important}

/* --------------------------------------------------------------------------
   3. RESULT PANEL — paper, hairlines, soft depth
   -------------------------------------------------------------------------- */
html body.history-archive :is(.result-panel,.local-result){background:linear-gradient(180deg,#f1ece4 0%,#ece6dc 100%)!important}
html body.history-archive :is(#election-title,.local-result-head h2){letter-spacing:-.035em}
html body.history-archive :is(.section-label,.local-section-label){letter-spacing:.2em}

/* Stat tiles & insight cards: lighter, airier surfaces. */
html body.history-archive :is(.overview-stat,.election-overview-stat,.insight-card,.local-seat-card,.party-vote-card,.local-compare-stat,.local-compare-detail,.paired-compare-chart,.councilor-compare-chart,.local-overview-note){border:1px solid var(--pm-hair)!important;background:var(--pm-card)!important;border-radius:16px!important;box-shadow:var(--pm-depth)}
html body.history-archive .insight-card{border-radius:20px!important}
html body.history-archive .insight-card :is(.overview-stat,.party-vote-card){box-shadow:none}
html body.history-archive .party-vote-card{overflow:hidden;transition:transform .5s var(--pm-ease),box-shadow .5s var(--pm-ease)}
html body.history-archive .party-vote-card:before{width:4px;border-radius:0 4px 4px 0;top:14px;bottom:14px;inset:14px auto 14px 0}
html body.history-archive .party-vote-card:after{content:'';position:absolute;inset:auto -22% -70% auto;width:58%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--party-color,#999),transparent);opacity:.08;pointer-events:none}
html body.history-archive .party-vote-card>b{letter-spacing:-.03em}
html body.history-archive :is(.overview-stat,.election-overview-stat) strong{letter-spacing:-.02em}
html body.history-archive .party-vote-badge{box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 10px -4px rgba(0,0,0,.25)}
@media (hover:hover) and (pointer:fine){
  html body.history-archive :is(.party-vote-card,.local-seat-card):hover{transform:translateY(-2px);box-shadow:var(--pm-depth-hover)}
}

/* Candidate cards: dark glass slabs with hairline highlight. */
html body.history-archive :is(.candidate,.local-candidate,.councilor-candidate):not(.elected){border-color:rgba(255,255,255,.06)!important;background:linear-gradient(180deg,#221d19 0%,#1a1612 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 30px -18px rgba(30,20,12,.55)!important;border-radius:18px}
html body.history-archive :is(.candidate,.local-candidate){transition:transform .5s var(--pm-ease),box-shadow .5s var(--pm-ease)!important}
@media (hover:hover) and (pointer:fine){
  html body.history-archive :is(.candidate,.local-candidate):hover{transform:translateY(-2px)!important}
}
html body.history-archive :is(.bar,.local-bar,.paired-chart-track,.councilor-chart-track){border-radius:999px;overflow:hidden}
html body.history-archive :is(.bar>i,.local-bar>i,.local-bar i,.paired-chart-track i,.councilor-chart-track i){border-radius:inherit;transform-origin:left center;animation:pm-grow 1.1s var(--pm-ease) both}
@keyframes pm-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Area result card */
html body.history-archive .county-card{border-radius:20px!important;border-color:rgba(255,255,255,.06)!important;background:linear-gradient(180deg,#221d19 0%,#191512 100%)!important;box-shadow:0 20px 44px -24px rgba(30,20,12,.6)!important}
html body.history-archive .county-row{transition:background .25s ease}
html body.history-archive .county-empty,html body.history-archive .local-empty{border-radius:16px!important;border-style:solid!important;border-color:var(--pm-hair-strong)!important;background:rgba(255,255,255,.35)!important}
html body.history-archive .result-area-picker select,html body.history-archive .councilor-area-picker select{border-color:var(--pm-hair-strong)!important;border-radius:12px!important;background-color:#f6f2eb!important}

/* Turnout trend: draw-on line */
html body.history-archive .trend-line{stroke-linecap:round;stroke-linejoin:round}
html body.history-archive .trend-line[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:pm-draw 1.4s var(--pm-ease-io) .1s forwards}
html body.history-archive .trend-point{animation:pm-fade .6s ease both}
html body.history-archive .trend-point:nth-child(n){animation-delay:calc(.25s + var(--pm-i,0) * 80ms)}
@keyframes pm-draw{to{stroke-dashoffset:0}}
@keyframes pm-fade{from{opacity:0}to{opacity:1}}

/* Scroll reveal (classes toggled by premium.js). */
.pm-reveal{opacity:0;transform:translateY(14px);transition:opacity .8s var(--pm-ease),transform .9s var(--pm-ease);transition-delay:var(--pm-d,0ms)}
.pm-reveal.pm-in{opacity:1;transform:none}

/* Disclosure button */
html body.history-archive .archive-disclosure-action:after{border-color:var(--pm-hair-strong);background:#f6f2eb;transition:transform .45s var(--pm-ease)}
html body.history-archive .archive-result-disclosure:not([open]) .archive-disclosure-action:after{transform:rotate(90deg)}

/* --------------------------------------------------------------------------
   4. TOWN page (dark theme)
   -------------------------------------------------------------------------- */
html body.history-town .town-btn{border-radius:12px;border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.035);transition:transform .45s var(--pm-ease),background .25s ease,border-color .25s ease,color .25s ease}
html body.history-town .town-btn:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07)}
html body.history-town .town-btn.on{background:rgba(228,2,43,.14);border-color:rgba(228,2,43,.55);box-shadow:none}
html body.history-town .back{border-radius:999px;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* --------------------------------------------------------------------------
   5. Motion safety
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html body.history-product :is(#map,#local-map){animation:none}
  .pm-reveal{opacity:1;transform:none;transition:none}
  html body.history-archive .trend-line[pathLength]{stroke-dasharray:none;animation:none}
  html body.history-product .pm-seg-thumb{transition:none}
}
@media(max-width:660px){
  html body.history-archive :is(.candidate,.local-candidate):not(.elected){border-radius:14px!important}
  html body.history-archive :is(.overview-stat,.election-overview-stat,.party-vote-card,.local-seat-card){border-radius:14px!important}
}

/* --------------------------------------------------------------------------
   6. Layout fixes
   -------------------------------------------------------------------------- */
/* Cross-election compare (desktop): the paired maps stay in view while the long
   result column scrolls, and are sized to the viewport instead of the column. */
@media(min-width:901px){
  html body.history-product:is(.archive-comparing,.local-compare-active,.compare-map-active) .map-panel{position:sticky;top:var(--history-nav-h,62px);align-self:start;height:calc(100svh - var(--history-nav-h,62px));min-height:620px!important;max-height:980px}
}
html body.history-product .paired-offshore-box{fill:rgba(255,255,255,.5);stroke:rgba(23,19,16,.1);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
html body.history-product :is(.paired-compare-maps,.councilor-compare-maps) path[clip-path]:not(:hover):not(.selected){stroke-width:.35!important}
html body.history-product .paired-offshore-label{fill:#7a7166;font:800 9px 'Noto Sans TC',sans-serif;letter-spacing:.14em;pointer-events:none}
html body.history-product :is(.paired-compare-maps,.councilor-compare-maps) svg{overflow:hidden;padding:0}

/* Mobile 縣市長／議員 map: stack title → map → island cards → note, so nothing overlaps. */
@media(max-width:660px){
  html body.history-product:not(.local-compare-active):not(.compare-map-active) .local-map-panel{display:flex!important;flex-direction:column;min-height:0!important;padding:22px 16px 20px}
  html body.history-product:not(.local-compare-active):not(.compare-map-active) .local-map-panel .local-map-title{position:static!important}
  html body.history-product:not(.local-compare-active):not(.compare-map-active) .local-map-panel .local-map{position:relative!important;inset:auto!important;width:100%!important;height:clamp(330px,96vw,440px)!important;margin-top:8px}
  html body.history-product:not(.local-compare-active):not(.compare-map-active) .local-map-panel .local-mobile-insets{position:static!important;margin-top:10px}
  html body.history-product:not(.local-compare-active):not(.compare-map-active) .local-map-panel .local-map-status{position:static!important;margin-top:14px}
}