/**
 * plugins/blocks/zeusScholarGraph/styles/scholarGraph.css
 *
 * Copyright (c) 2026 Zeus Publishing
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * Citations-per-year chart for the sidebar. The bars are ordinary block
 * elements whose height is a percentage of a fixed track — no canvas, no SVG,
 * no script — so the chart prints, zooms and reflows like the rest of the page.
 *
 * Colours come from the hsmModern theme's custom properties so each journal's
 * palette carries through; every var() has a fallback so the block stays
 * presentable under a theme that defines none. Everything is scoped under
 * .block_zeus_scholar_graph: this file loads on every frontend page and must
 * not leak into the rest of it.
 *
 * Sized for a ~300px sidebar column with ten years in it, which leaves each
 * column under 30px. That budget is what dictates the small type, the
 * two-digit year labels and the bar width below.
 */

.block_zeus_scholar_graph .zeus_sg_chart {
	margin: 0 0 0.6rem;
	position: relative;
	/* Cizim alani ve yil satiri tek yerde tanimli: seviye katmani ikisinden
	   turetiliyor, biri degisirse cizgiler kendiliginden yerinde kaliyor. */
	/* Canli IDR'de cizim alani 174px ve en uzun cubuk 159px'e ciziliyor. Bizde
	   eksen yuvarlak tavana olcekleniyor (201 -> 250), yani en uzun cubuk
	   tavanin %80'i; ayni gorsel uzunluga varmak icin alan 200px olmali:
	   201/250 x 200 = 161px. */
	--zeus-sg-track: 200px;
	--zeus-sg-year: 1.15rem;
	/* Sagda seviye etiketlerine ayrilan olcu. */
	--zeus-sg-gutter: 30px;
}

/* Seviye cizgileri: silik, cubuklarin arkasinda. */
/* Sutunlar <li>; tema kenar cubugundaki her li'ye dolgu ve alt cizgi veriyor
   (.hsm_theme .pkp_block .content li). Grafikte ikisi de yanlis: her sutunun
   altina bir cizgi cizip sutunu 10.8px uzatiyor, boylece seviye katmani
   cizim alanindan 6px asagi kayiyordu. Ozgulluk bilerek yuksek - tema kurali
   uc sinif + eleman, bu dort sinif + eleman, yukleme sirasindan bagimsiz
   kazaniyor. */
.block_zeus_scholar_graph .zeus_sg_chart .zeus_sg_bars li.zeus_sg_col {
	padding: 0;
	border: none;
}

.block_zeus_scholar_graph .zeus_sg_grid {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--zeus-sg-year);
	height: var(--zeus-sg-track);
	pointer-events: none;
	z-index: 0;
}
.block_zeus_scholar_graph .zeus_sg_gridline {
	position: absolute;
	left: 0;
	right: 0;
	height: 0;
	border-top: 1px solid rgba(36, 49, 58, 0.11);
}
/* Taban cizgisi eksenin kendisi; ondan biraz daha belirgin. */
.block_zeus_scholar_graph .zeus_sg_gridline:first-child {
	border-top-color: rgba(36, 49, 58, 0.22);
}
.block_zeus_scholar_graph .zeus_sg_ticklabel {
	position: absolute;
	right: 0;
	/* Yaziyi kendi cizgisine ortala: etiketin tabani cizgide dursa rakam
	   cizginin altina kayik goruluyor. */
	transform: translateY(-50%);
	width: var(--zeus-sg-gutter);
	padding-left: 4px;
	font-size: 0.6rem;
	line-height: 1;
	color: rgba(36, 49, 58, 0.55);
	font-variant-numeric: tabular-nums;
}

.block_zeus_scholar_graph .zeus_sg_bars {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0 var(--zeus-sg-gutter) 0 0;
	position: relative;
	z-index: 1;
}

/* flex-basis 0 with min-width 0 makes every column exactly the same width no
   matter how wide its count is; without min-width a four-digit count would
   widen its own column and shear the axis. */
.block_zeus_scholar_graph .zeus_sg_col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
}

/* The count sits above its bar. Small, because at ten columns in 300px there
   is room for three digits and not a character more. */
/* Sayi artik surekli degil, sutunun uzerine gelince beliriyor. Yerini
   BIRAKARAK gizleniyor (opacity, display degil): gorunurken satir yuksekligi
   degisirse butun grafik zipliyordu. */
.block_zeus_scholar_graph .zeus_sg_count {
	/* Konum satir ici `bottom` ile cubugun tepesine baglaniyor; buradaki
	   margin onu birkac piksel yukari, cubuga degmeyecek kadar itiyor. */
	position: absolute;
	left: 50%;
	margin-bottom: 8px;
	font-size: 0.78rem;
	line-height: 1;
	font-weight: 700;
	color: #fff;
	background: #2f3d46;
	border-radius: 3px;
	padding: 3px 5px;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 3px);
	transition: opacity 0.14s ease, transform 0.14s ease;
	pointer-events: none;
	z-index: 2;
}
.block_zeus_scholar_graph .zeus_sg_col:hover .zeus_sg_count,
.block_zeus_scholar_graph .zeus_sg_col:focus-within .zeus_sg_count {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Fixed-height rail the bar grows inside. The percentage heights below are
   percentages OF this, so it must have a height of its own. */
.block_zeus_scholar_graph .zeus_sg_track {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	/* Canlidaki Scholar grafiginde cizim alani ~150px; 86px'te on yillik bir
	   seride ilk yillarin cubuklari 2-3px'e dusup okunmaz oluyordu. */
	height: var(--zeus-sg-track);
}

/* The axis, drawn under the bars and above the year labels — the way Scholar
   draws it, and the only thing separating a column's count from its year. Put
   on the track rather than as a border under the whole row, which would have
   ruled a line beneath the years instead and left the two rows of numbers
   reading as one block. The 1px overhang on each side closes the 2px flex gap
   so the line is continuous rather than dashed. */
/* Eksen cizgisi artik seviye katmanindaki sifir cizgisi; sutun basina bir
   daha cizmek ikisini ust uste bindirip cizgiyi kalinlastiriyordu. */

/* Renkler bilerek derginin markasindan BAGIMSIZ: blok uc dergide de ayni ve
   IDR'de lacivert, JOMDI'de kirmizi, HSM'de teal bir grafik cikiyordu. Yesil
   hicbirinin marka rengi degil, ustelik artan bir seriye yakisiyor; suren yil
   kehribar, tamamlanmislarla karistirilmasin diye. */
.block_zeus_scholar_graph .zeus_sg_bar {
	display: block;
	width: 78%;
	max-width: 22px;
	background: linear-gradient(180deg, #37806a 0%, #1f4f43 100%);
	border-radius: 3px 3px 0 0;
	transform-origin: bottom center;
	animation: zeus_sg_grow 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
	transition: filter 0.14s ease, opacity 0.14s ease, box-shadow 0.14s ease;
}
.block_zeus_scholar_graph .zeus_sg_col:hover .zeus_sg_bar {
	filter: brightness(1.15) saturate(1.15);
	box-shadow: 0 0 0 2px rgba(31, 79, 67, 0.3);
}

@keyframes zeus_sg_grow {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

/* Sutunlar sirayla yukselsin - hepsi ayni anda ciksa animasyon fark edilmiyor.
   Onalti adim on alti yillik pencereyi kapsiyor; sonrasi gecikmesiz cikar. */
.block_zeus_scholar_graph .zeus_sg_col:nth-child(1) .zeus_sg_bar { animation-delay: 0.00s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(2) .zeus_sg_bar { animation-delay: 0.04s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(3) .zeus_sg_bar { animation-delay: 0.08s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(4) .zeus_sg_bar { animation-delay: 0.12s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(5) .zeus_sg_bar { animation-delay: 0.16s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(6) .zeus_sg_bar { animation-delay: 0.20s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(7) .zeus_sg_bar { animation-delay: 0.24s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(8) .zeus_sg_bar { animation-delay: 0.28s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(9) .zeus_sg_bar { animation-delay: 0.32s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(10) .zeus_sg_bar { animation-delay: 0.36s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(11) .zeus_sg_bar { animation-delay: 0.40s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(12) .zeus_sg_bar { animation-delay: 0.44s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(13) .zeus_sg_bar { animation-delay: 0.48s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(14) .zeus_sg_bar { animation-delay: 0.52s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(15) .zeus_sg_bar { animation-delay: 0.56s; }
.block_zeus_scholar_graph .zeus_sg_col:nth-child(16) .zeus_sg_bar { animation-delay: 0.60s; }

/* Hareketi azaltilmis isletim sistemi ayarina saygi: cubuklar yerinde dursun. */
@media (prefers-reduced-motion: reduce) {
	.block_zeus_scholar_graph .zeus_sg_bar {
		animation: none;
	}
	.block_zeus_scholar_graph .zeus_sg_count {
		transition: none;
	}
}

/* The year in progress is not comparable with the finished years beside it, so
   it is drawn in the accent colour and named in the footnote under the chart.
   Colour is not the only signal: the footnote says which year it is, and the
   hidden table marks that row as well. */
.block_zeus_scholar_graph .zeus_sg_col_partial .zeus_sg_bar {
	background: linear-gradient(180deg, #86d6bd 0%, #4fa78b 100%);
}

.block_zeus_scholar_graph .zeus_sg_col_partial .zeus_sg_year {
	color: #2f7a63;
	font-weight: 700;
}

/* Yilin tamami yaziliyor. Pencere sekiz yila indigi icin sutun basina ~40px
   dusuyor; dort hane bu puntoyla rahat siğiyor. */
.block_zeus_scholar_graph .zeus_sg_year {
	height: var(--zeus-sg-year);
	line-height: var(--zeus-sg-year);
	font-size: 0.72rem;
	line-height: 1;
	padding-top: 4px;
	color: var(--hsm-ink, #24313a);
	opacity: 0.75;
	white-space: nowrap;
}

.block_zeus_scholar_graph .zeus_sg_note {
	margin: 0 0 0.6rem;
	font-size: 0.68rem;
	line-height: 1.35;
	color: var(--hsm-ink, #24313a);
	opacity: 0.75;
}

/* Totals: three cells across the block, value over label, the same
   small-caps-label-over-big-number shape the journal metrics block uses. */
.block_zeus_scholar_graph .zeus_sg_totals {
	display: flex;
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0.5rem 0 0;
	border-top: 1px solid var(--hsm-line, #e4e9ec);
}

.block_zeus_scholar_graph .zeus_sg_total {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0 2px;
	text-align: center;
}

.block_zeus_scholar_graph .zeus_sg_total_value {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--hsm-primary, #0795af);
	/* A five-digit lifetime total in a third of a sidebar has to be allowed to
	   shrink rather than push its neighbours out of the block. */
	overflow-wrap: anywhere;
}

.block_zeus_scholar_graph .zeus_sg_total_label {
	display: block;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hsm-ink, #24313a);
	opacity: 0.8;
}

/* Kaynak seridi: tazeleme etiketi solda, Scholar markasi sagda. */
.block_zeus_scholar_graph .zeus_sg_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}
.block_zeus_scholar_graph .zeus_sg_freshness {
	font-size: 0.68rem;
	color: var(--hsm-ink, #24313a);
	opacity: 0.7;
	white-space: nowrap;
}
.block_zeus_scholar_graph .zeus_sg_logo {
	display: inline-flex;
	flex: 0 1 auto;
	min-width: 0;
	line-height: 0;
}
/* Dar bir rayda marka once kucululsun, tazeleme etiketini sikistirmasin. */
.block_zeus_scholar_graph .zeus_sg_logo img {
	width: auto;
	height: 30px;
	max-width: 100%;
}

.block_zeus_scholar_graph a.zeus_sg_source:hover,
.block_zeus_scholar_graph a.zeus_sg_source:focus {
	color: var(--hsm-primary, #0795af);
	opacity: 1;
}

/* Visually hidden, still read aloud. Shipped here rather than borrowed from
   the theme so the block keeps its accessible table under any theme — clip
   rather than display:none, which would take the table out of the
   accessibility tree along with the layout. */
.block_zeus_scholar_graph .zeus_sg_sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}




/* --- Summary figures: label + All (+ Since) ---------------------------- */
.block_zeus_scholar_graph .zeus_sg_stats {
	display: grid;
	/* Sayi sutunlari SABIT genislikte, `auto` degil. auto'da her sutun kendi
	   en uzun sayisi kadar oluyordu: "1027" genis, "13" dar, dolayisiyla
	   basliklar (All / Since 2021) ile rakamlar farkli eksenlerde duruyordu.
	   Sabit genislikte ikisi de ayni sutunda ve ortalanabiliyor. */
	grid-template-columns: 1fr 4.2rem;
	gap: 0 0.7rem;
	margin: 0 0 1rem;
	font-size: 0.92rem;
}
.block_zeus_scholar_graph .zeus_sg_stats_two {
	grid-template-columns: 1fr 4.2rem 5.4rem;
}
.block_zeus_scholar_graph .zeus_sg_stat_head,
.block_zeus_scholar_graph .zeus_sg_stat_row {
	display: contents;
}
.block_zeus_scholar_graph .zeus_sg_stat_head > span {
	padding-bottom: 0.35rem;
	border-bottom: 2px solid var(--hsm-line, #e4e9ec);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--hsm-ink, #24313a);
	text-align: center;
	white-space: nowrap;
}
.block_zeus_scholar_graph .zeus_sg_stat_row > span {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--hsm-line, #e4e9ec);
}
/* Rakamlar kendi sutununda ortali; etiket (ilk hucre) solda kaliyor. */
.block_zeus_scholar_graph .zeus_sg_stat_row > .zeus_sg_stat_value {
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.zeus_sg_stat_row:last-child > span {
	border-bottom: 0;
}
.block_zeus_scholar_graph .zeus_sg_stat_label {
	color: #5b6b7a;
}
.block_zeus_scholar_graph .zeus_sg_stat_value {
	/* Ortali: sutun genisligi artik sabit, saga dayali rakamlar basliklariyla
	   ayni eksende durmuyordu. */
	text-align: center;
	font-weight: 700;
	color: var(--hsm-ink, #24313a);
	/* Tabular figures so the columns line up down the rows. */
	font-variant-numeric: tabular-nums;
}
.block_zeus_scholar_graph .zeus_sg_stat_since {
	color: #5b6b7a;
	font-weight: 600;
}

/* --- Chart ------------------------------------------------------------- */
.block_zeus_scholar_graph .zeus_sg_bar {
	/* A vertical gradient rather than a flat fill: at sidebar width the bars
	   are narrow, and a solid block of colour reads heavier than the figure
	   it represents. Darker at the base keeps them anchored to the axis. */
	background: linear-gradient(180deg,
		#37806a 0%,
		#1f4f43 100%);
	border-radius: 3px 3px 0 0;
	transition: filter 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.block_zeus_scholar_graph .zeus_sg_col:hover .zeus_sg_bar {
	filter: brightness(1.15) saturate(1.15);
	box-shadow: 0 0 0 2px rgba(31, 79, 67, 0.3);
}
/* Asil is otekileri geri cekmekte: dar bir kenar cubugunda tek bir cubugu
   parlatmak fark edilmiyor, komsulari soldurunca goz dogrudan kalan koyu
   cubuga gidiyor. Yil etiketi de birlikte one cikiyor, boylece hangi yila
   bakildigi rakama bakmadan anlasiliyor. */
.block_zeus_scholar_graph .zeus_sg_bars:hover .zeus_sg_col:not(:hover) .zeus_sg_bar {
	opacity: 0.28;
}
.block_zeus_scholar_graph .zeus_sg_bars:hover .zeus_sg_col:not(:hover) .zeus_sg_year {
	opacity: 0.4;
}
.block_zeus_scholar_graph .zeus_sg_col:hover .zeus_sg_year {
	font-weight: 700;
	color: #1f4f43;
}
.block_zeus_scholar_graph .zeus_sg_year {
	transition: opacity 0.14s ease, color 0.14s ease;
}
/* Suren yil: farkli renk VE grafigin altinda bir not - ayrim yalniz renge
   dayanmasin. */
.block_zeus_scholar_graph .zeus_sg_col_partial .zeus_sg_bar {
	background: linear-gradient(180deg, #86d6bd 0%, #4fa78b 100%);
}
.block_zeus_scholar_graph .zeus_sg_count {
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.block_zeus_scholar_graph .zeus_sg_bar,
	.block_zeus_scholar_graph .zeus_sg_count {
		transition: none;
	}
}