/* «Η πράσινη μετάβαση της Ελλάδας» (partials/prasini.hbs). Sits on ekloges.css and the fiscal page's oikonomika.css (class "fisc"); only what this page adds. System: ekloges-design.md. */
/* the E.U. is a grey line here too (see oikonomika.css); the 2030 target is a hollow ring with a dashed lead-in */
#ekl.fisc .legend i.tgkey{width:10px;height:10px;border-radius:50%;background:none;border:2px solid #B45F06}
#ekl.fisc .legend[hidden],#ekl.fisc .legend li[hidden]{display:none}
/* electricity mix legend: wrapping swatches */
#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 note under a chart (what is measured, why a figure is missing) */
#ekl.fisc .fnote{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
#ekl.fisc .fnote:empty{display:none}
/* second heading inside a section (emissions, then cost to households) */
#ekl.fisc .sechead.sub2{margin-top:64px}
@media (max-width:560px){#ekl.fisc .sechead.sub2{margin-top:44px}}
/* the 2030 goal in the lead sentence: amber, like the goal marks in the charts */
#ekl.fisc .f-lead b.tg{color:#B45F06}
/* ranked rows without the "press me" affordance (end uses, heating fuels) */
#ekl.fisc .frows.plain .fr{cursor:default}
#ekl.fisc .frows.plain .fr:hover{background:none}

/* ---- identity of this page (the fiscal page is blue; this one is green) ----
   Greece = deep green, the 2030 goal = amber, the E.U. = grey (oikonomika.css). Blue stays on links and controls, as site-wide. */
#ekl.fisc.prasini .f-lead{max-width:41ch}
#ekl.fisc.prasini .f-lead b{color:#0F7B5F}
#ekl.fisc.prasini .fr-bar i{background:#0F7B5F}
#ekl.fisc.prasini .f-strip .stat:hover .lbl{color:#0F7B5F}
/* «Στον δρόμο για το 2030»: the page's signature panel, between the lead sentence and the tiles. A stem grows towards a curl; the whole path is the goal. */
#ekl.fisc .gprog{--gtint:oklch(96.8% .024 165);position:relative;margin:14px 0 18px;padding:24px 0 20px;background:var(--gtint)}
/* full-bleed frame, as the fiscal page's tinted section: the shadow extends the tint to the window edges, clip-path keeps it to the panel's height; the content stays in the page column */
#ekl.fisc .gprog{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{position:relative;height:clamp(78px,9vw,100px);margin-top:6px}
#ekl.fisc .gp-n{position:absolute;bottom:0;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
#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);white-space:nowrap}
#ekl.fisc .gp-n.gr{transform:translateX(-100%)}
#ekl.fisc .gp-n.gr.flat{transform:none;align-items:flex-start;text-align:left}
#ekl.fisc .gp-n.gr b{color:#0F7B5F}
#ekl.fisc .gp-n.tg{right:0}
#ekl.fisc .gp-n.tg b{color:#B45F06}
#ekl.fisc .gp-vine{margin:4px 0 6px}
#ekl.fisc .gp-vine svg{display:block;width:100%;height:auto;overflow:visible}
/* draws itself once (not for people who prefer reduced motion): the stem grows, the leaves follow, the tip appears last */
@media (prefers-reduced-motion:no-preference){
  #ekl.fisc .gp-vine svg.anim .gstem{stroke-dasharray:1;stroke-dashoffset:1;animation:gpgrow 1.5s cubic-bezier(.3,.6,.3,1) .2s forwards}
  #ekl.fisc .gp-vine svg.anim .gleaf,#ekl.fisc .gp-vine svg.anim .gbud,#ekl.fisc .gp-vine svg.anim .gyear{opacity:0;animation:gpfade .45s ease-out forwards}
  #ekl.fisc .gp-vine svg.anim .gbud{animation-delay:1.55s}
}
@keyframes gpgrow{to{stroke-dashoffset:0}}
@keyframes gpfade{to{opacity:1}}
@media (max-width:700px){#ekl.fisc .gprog{padding:20px 0 16px}}
/* 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 the energy the section is about */
#ekl.fisc.prasini section.block{position:relative}
#ekl.fisc.prasini section.block::before{content:"";position:absolute;top:-1px;left:0;width:48px;height:3px;background:var(--sec,var(--ink))}
#ekl.fisc.prasini #anavsimes{--sec:#0F7B5F}
#ekl.fisc.prasini #reuma{--sec:#E8B923}
#ekl.fisc.prasini #eisagoges{--sec:#5B4636}
#ekl.fisc.prasini #spiti{--sec:#2FA89E}
#ekl.fisc.prasini #ekpompes{--sec:#8E9BAE}
#ekl.fisc.prasini #methodos{--sec:#6B6F7A}
#ekl.fisc.prasini{--gc:#0F7B5F}