/* «Τι παράγει η Ελλάδα» (partials/oikonomia.hbs). Sits on ekloges.css and the fiscal page's oikonomika.css (class "fisc"); only what this page adds. System: ekloges-design.md. */
/* identity: Greece = deep plum #7B3F98 (blue stays on links and controls, as site-wide), the E.U. the grey line (oikonomika.css), industries get their own category colours (oikonomia.js) */
#ekl.fisc.oikonomia{--gc:#7B3F98}
#ekl.fisc.oikonomia .f-lead{max-width:40ch}
#ekl.fisc.oikonomia .f-lead b{color:#7B3F98}
#ekl.fisc.oikonomia .fr-bar i{background:#7B3F98}
#ekl.fisc.oikonomia .f-strip .stat:hover .lbl{color:#7B3F98}
#ekl.fisc.oikonomia .legend[hidden],#ekl.fisc.oikonomia .legend li[hidden]{display:none}
/* legend with wrapping swatches (industries, products, regions) */
#ekl.fisc .mixleg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0}
#ekl.fisc .mixleg li{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
#ekl.fisc .mixleg i{display:inline-block;width:10px;height:10px;border-radius:2px}
/* a second heading inside a section */
#ekl.fisc .sechead.sub2{margin-top:64px}
@media (max-width:560px){#ekl.fisc .sechead.sub2{margin-top:44px}}
/* two tab rows on one chart (unit, level) */
#ekl.fisc .ctlrows{display:flex;flex-wrap:wrap;gap:6px 24px}
/* a chart on its own under a heading, or next to another: the same width rules as the fiscal page */
#ekl.fisc .chartcard>.ctl+.mixleg{margin-top:0}

/* ---- «Από τι αποτελείται η οικονομία»: the page's signature panel, between the lead sentence and the tiles. Two columns of a temple, Greece and the E.U.,
   cut into drums by industry; the drum's height is its share of value added. Full-bleed tint as the fiscal page's tinted section. ---- */
#ekl.fisc .gprog{--gtint:oklch(96.8% .022 320);position:relative;margin:14px 0 18px;padding:24px 0 20px;background:var(--gtint);box-shadow:0 0 0 100vmax var(--gtint);clip-path:inset(0 -100vmax)}
#ekl.fisc .gprog:empty{display:none}
#ekl.fisc .gp-title{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.2;color:var(--ink)}
#ekl.fisc .gp-nums{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:10px}
#ekl.fisc .gp-d{flex:1;min-width:0;padding:0 8px 6px;text-align:center;font-size:13px;color:var(--ink-2);line-height:1.35}
#ekl.fisc .gp-d strong{display:block;font-size:14px;font-weight:700;color:var(--ink)}
#ekl.fisc .gp-d strong i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:0}
#ekl.fisc .gp-d span{display:block;margin-top:3px}
/* the industry tabs and the previous / next buttons */
#ekl.fisc .gp-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;margin-top:12px}
#ekl.fisc .gp-chips{flex:1 1 320px;flex-wrap:wrap;gap:4px 14px}
#ekl.fisc .gp-chips button{display:inline-flex;align-items:center}
#ekl.fisc .gp-chips i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;flex:none}
#ekl.fisc .gp-step{display:inline-flex;gap:4px}
#ekl.fisc .gp-step button{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--rule);border-radius:4px;background:none;color:var(--ink-2);padding:0;cursor:pointer}
#ekl.fisc .gp-step button:hover{color:#7B3F98;border-color:#7B3F98}
#ekl.fisc .gp-step svg.lu{width:15px;height:15px;margin:0}
#ekl.fisc .gp-temple [data-i]{cursor:pointer}
#ekl.fisc .gp-n{display:flex;flex-direction:column}
#ekl.fisc .gp-n b{font-family:var(--display);font-weight:700;font-size:clamp(36px,4.8vw,58px);line-height:1;letter-spacing:-.01em}
#ekl.fisc .gp-n span{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
#ekl.fisc .gp-n.gr b{color:#7B3F98}
#ekl.fisc .gp-n.eu{align-items:flex-end;text-align:right}
#ekl.fisc .gp-n.eu b{color:#6B6F7A}
#ekl.fisc .gp-temple{margin:6px 0}
#ekl.fisc .gp-temple svg{display:block;width:100%;height:auto;overflow:visible}
/* the drums rise once on load (not for people who prefer reduced motion) */
@media (prefers-reduced-motion:no-preference){
  #ekl.fisc .gp-temple svg.anim .drum{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:gprise .7s cubic-bezier(.3,.6,.3,1) forwards}
  #ekl.fisc .gp-temple svg.anim .dtxt,#ekl.fisc .gp-temple svg.anim .dlab{opacity:0;animation:gpfade .4s ease-out 1s forwards}
}
@keyframes gprise{to{transform:scaleY(1)}}
@keyframes gpfade{to{opacity:1}}
@media (max-width:700px){#ekl.fisc .gprog{padding:20px 0 16px}}
@media (max-width:560px){#ekl.fisc .gp-nums{flex-wrap:wrap}#ekl.fisc .gp-d{order:3;flex-basis:100%;padding:8px 0 0}}
/* a sparkline after each tile's figure: how it got here */
#ekl.fisc .f-strip .num{display:flex;align-items:center;justify-content:space-between;gap:10px}
#ekl.fisc svg.spark{flex:none;width:72px;height:26px;overflow:visible}
@media (max-width:560px){#ekl.fisc svg.spark{width:60px}}
/* section markers: a short tab on the hairline, in the colour of what the section is about */
#ekl.fisc.oikonomia section.block{position:relative}
#ekl.fisc.oikonomia section.block::before{content:"";position:absolute;top:-1px;left:0;width:48px;height:3px;background:var(--sec,var(--ink))}
#ekl.fisc.oikonomia #oikonomia{--sec:#7B3F98}
#ekl.fisc.oikonomia #klados{--sec:#2F7886}
#ekl.fisc.oikonomia #viomichania{--sec:#33444F}
#ekl.fisc.oikonomia #exagoges{--sec:#C0862A}
#ekl.fisc.oikonomia #methodos{--sec:#6B6F7A}

/* clickable rows (as on the public-finance page): the pressed row is tinted in the page's plum */
#ekl.fisc.oikonomia .frows .fr[aria-pressed="true"]{background:color-mix(in oklch,#7B3F98 9%,transparent);box-shadow:inset 3px 0 0 #7B3F98}
#ekl.fisc .pick-hint{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:8px 12px;background:var(--paper-2);border-radius:4px;font-size:13.5px;font-weight:600;color:var(--ink)}
#ekl.fisc .pick-hint svg.lu{margin:0;color:#7B3F98}
#ekl.fisc .frows .fr{cursor:pointer}
#ekl.fisc .frows.plain .fr{cursor:default}
#ekl.fisc .frows.plain .fr:hover{background:none}
/* the treemap's hover card: the industry's share of value added over time */
#ekl.fisc .chartwrap{position:relative}
#ekl.fisc .tmtip{position:absolute;z-index:4;width:274px;padding:10px 12px;background:var(--paper);border:1px solid var(--ink);border-radius:4px;font-size:12.5px;line-height:1.4;pointer-events:none;box-shadow:0 4px 14px rgba(17,20,25,.14)}
#ekl.fisc .tmtip[hidden]{display:none}
#ekl.fisc .tmtip strong{display:block;font-size:13.5px}
#ekl.fisc .tmtip .tms{display:block;color:var(--ink-2);margin-bottom:2px}
#ekl.fisc .tmtip svg{display:block;width:100%;height:auto}
#ekl.fisc .tmtip .tml{display:flex;align-items:center;gap:6px;margin-top:2px}
#ekl.fisc .tmtip .tml i{width:10px;height:3px;border-radius:2px;flex:none}
#ekl.fisc .tmtip .tml.muted{color:var(--ink-2);display:block}
#ekl.fisc .tmc{cursor:pointer}
#ekl.fisc .tmc:hover rect{stroke:var(--ink);stroke-width:2.5}

/* «Πώς άλλαξε η σύνθεση της οικονομίας»: the two years to compare */
#ekl.fisc .yrpick{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--ink-2)}
#ekl.fisc .yrpick select{font:inherit;font-weight:700;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:5px 8px;cursor:pointer}
#ekl.fisc .yrpick select:hover,#ekl.fisc .yrpick select:focus-visible{border-color:#7B3F98;outline:none}