/* Copied from /website/assets/styles.css for Flask static serving */
* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background:#0d1117; color:#e6edf3; line-height:1.55; }
:root { --link:#58a6ff; --link-hover:#79c0ff; --link-bg:rgba(88,166,255,0.08); }
:root { --accent:#4cc2ff; --accent-alt:#ffb347; --bg:#0d1117; --bg-alt:#161b22; --border:#30363d; --text-dim:#8b949e; --radius:10px; --max-width:880px; --shadow:0 4px 12px -2px rgba(0,0,0,0.4),0 2px 4px -1px rgba(0,0,0,0.3); --gradient:linear-gradient(135deg,#4cc2ff,#a970ff 55%,#ffb347); }
.site-header { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; background:rgba(13,17,23,0.85); backdrop-filter: blur(8px); border-bottom:1px solid var(--border); }
.brand { font-weight:700; font-size:1.1rem; background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.5px; }
.site-nav { display:flex; gap:.75rem; }
.site-header .brand { flex:0 0 auto; }
.site-nav { flex:1 1 auto; justify-content:center; }
.header-spacer { flex:0 0 auto; width:32px; }
.site-nav a { text-decoration:none; color:var(--text-dim); font-weight:500; padding:.5rem .85rem; border-radius:8px; position:relative; }
.site-nav a.active, .site-nav a:hover { color:#fff; background:var(--bg-alt); }
@media (max-width: 760px) { .site-nav { justify-content:center; } .header-spacer { display:none; } }
.content { padding:1.25rem clamp(.75rem,2vw,2rem) 3rem; max-width:var(--max-width); margin:0 auto; }
.hero { padding:1rem 0 1.25rem; }
.hero h1 { font-size:clamp(2.1rem,6vw,3.2rem); line-height:1.05; margin:0 0 .6rem; letter-spacing:.5px; }
.hero.minimal { padding-bottom:.5rem; }
.tagline { font-size:clamp(1rem,2.4vw,1.25rem); color:var(--text-dim); max-width:640px; margin-top:0; }
.hello-block { display:flex; gap:1.25rem; margin-top:1.25rem; align-items:flex-start; flex-wrap:wrap; }
.hello-media { display:flex; flex-direction:column; gap:.6rem; align-items:center; }
.hello-media .avatar { width:130px; height:130px; border-radius:50%; object-fit:cover; border:2px solid var(--border); box-shadow:0 4px 10px -2px rgba(0,0,0,.5); background:#111; }
.hello-media .site-logo { width:64px; opacity:.9; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.hello-text { flex:1; min-width:240px; font-size:.95rem; max-width:620px; }
.hello-text p { margin:.55rem 0; }
@media (max-width:620px) { .hello-block { flex-direction:column; } .hello-media { flex-direction:row; justify-content:flex-start; } .hello-media .site-logo { width:48px; } }
.quick-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.6rem; margin-top:1.1rem; }
.quick-facts > div { background:var(--bg-alt); padding:.65rem .75rem; border:1px solid var(--border); border-radius:8px; }
.label { display:block; font-size:.65rem; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); margin-bottom:.15rem; font-weight:600; }
h2 { margin:2.2rem 0 .9rem; font-size:1.35rem; letter-spacing:.5px; position:relative; }
h2::after { content:""; position:absolute; left:0; bottom:-.4rem; width:54px; height:3px; background:var(--gradient); border-radius:2px; }
p a, .list-simple a, .timeline a, .card a, .markdown-body a { color:var(--link); text-decoration:none; font-weight:500; position:relative; }
p a:hover, .list-simple a:hover, .timeline a:hover, .card a:hover, .markdown-body a:hover { color:#fff; }
p a::after, .list-simple a::after, .timeline a::after, .card a::after, .markdown-body a::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--gradient); transform:scaleX(0); transform-origin:left; transition:.3s; }
p a:hover::after, .list-simple a:hover::after, .timeline a:hover::after, .card a:hover::after, .markdown-body a:hover::after { transform:scaleX(1); }
p a:focus-visible, .list-simple a:focus-visible, .timeline a:focus-visible, .card a:focus-visible, .markdown-body a:focus-visible { outline:2px solid var(--link); outline-offset:2px; border-radius:4px; background:var(--link-bg); }
p { margin:.75rem 0; }
section p:first-of-type { margin-top:.25rem; }
.skills { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:.5rem 0 0; }
.skills li { background:var(--bg-alt); padding:.45rem .7rem; border-radius:20px; font-size:.8rem; border:1px solid var(--border); }
.timeline article { background:var(--bg-alt); padding:1rem 1rem .85rem; border:1px solid var(--border); border-radius:12px; margin-bottom:.9rem; position:relative; }
.timeline h3 { margin:.1rem 0 .35rem; font-size:1rem; }
.period { font-weight:500; color:var(--accent); font-size:.8rem; margin-left:.4rem; }
.exp-item { padding:0 !important; }
.exp-header { all:unset; cursor:pointer; display:flex; align-items:center; gap:.6rem; width:100%; padding:1rem 1rem 1rem; font-size:1rem; font-weight:600; }
.exp-header:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
.exp-header .exp-title { flex:1; }
.exp-indicator { background:var(--bg); border:1px solid var(--border); width:1.3rem; height:1.3rem; display:grid; place-items:center; border-radius:6px; font-size:.8rem; font-weight:700; line-height:1; transition:transform .25s; }
.exp-header[aria-expanded='true'] .exp-indicator { transform:rotate(45deg); }
.exp-desc { max-height:0; overflow:hidden; padding:0 1rem; transition:max-height .35s ease, padding .35s ease; }
.exp-desc.open { padding:0 1rem 1rem; }
.exp-desc p { margin:.2rem 0 0; }
@media (prefers-reduced-motion: reduce) { .exp-desc { transition:none; } .exp-indicator { transition:none; } }
.cards { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.cards.snapshot { grid-template-columns:repeat(4,1fr); }
@media (max-width: 900px) { .cards.snapshot { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px) { .cards.snapshot { grid-template-columns:1fr; } }
.card { background:var(--bg-alt); padding:1rem .95rem 1rem; border:1px solid var(--border); border-radius:12px; display:flex; flex-direction:column; gap:.4rem; position:relative; }
.card h3 { margin:.1rem 0 .25rem; font-size:1rem; }
.card .meta { list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; padding:0; margin:.2rem 0 0; }
.card .meta li { background:#1f242c; padding:.3rem .55rem; font-size:.65rem; letter-spacing:.5px; border-radius:14px; color:var(--text-dim); border:1px solid #262c35; }
.card:hover { border-color:#3a424c; }
.list-simple { padding-left:1.1rem; }
.list-simple li { margin:.35rem 0; }
.list-steps { counter-reset:step; list-style:none; padding:0; margin:.5rem 0 0; }
.list-steps li { counter-increment:step; background:var(--bg-alt); margin:.55rem 0; padding:.65rem .8rem .65rem 2.1rem; border:1px solid var(--border); border-radius:10px; position:relative; }
.list-steps li::before { content:counter(step); position:absolute; left:.7rem; top:50%; transform:translateY(-50%); width:1.2rem; height:1.2rem; display:grid; place-items:center; border-radius:4px; background:var(--gradient); font-size:.65rem; font-weight:600; color:#fff; }
.site-footer { margin-top:3rem; padding:2.2rem 1rem 3rem; text-align:center; font-size:.8rem; color:var(--text-dim); display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; border-top:1px solid var(--border); background:#0d1117; }
.site-footer a { color:#fff; text-decoration:none; font-weight:500; position:relative; }
.site-footer a::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--gradient); transform:scaleX(0); transform-origin:left; transition:.3s; }
.site-footer a:hover::after { transform:scaleX(1); }
@media (prefers-reduced-motion:no-preference) { .card, .timeline article, .quick-facts > div, .list-steps li { transition:border-color .3s, background-color .3s; } h1, h2 { animation:fadeSlide .6s ease; } }
@keyframes fadeSlide { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0);} }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0d1117; }
::-webkit-scrollbar-thumb { background:#2a3139; border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:#3a424c; }

/* -------------------------------------------------- */
/* Data Tables (Participatory Budgeting examples)     */
/* -------------------------------------------------- */
/* Wrapper ensures horizontal scroll on narrow viewports */
.table-wrapper { 
	width:100%;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	margin:1.2rem 0;
	border:1px solid var(--border);
	border-radius:12px;
	background:var(--bg-alt);
	box-shadow:var(--shadow);
}

.table-wrapper table { 
	width:100%; 
	border-collapse:collapse; 
	min-width:520px; /* allow scrolling instead of squashing too much */
	font-size:.85rem;
}

.table-wrapper caption { 
	text-align:left; 
	font-weight:600; 
	padding:.75rem .9rem .4rem; 
	font-size:.75rem; 
	letter-spacing:.5px; 
	text-transform:uppercase; 
	color:var(--text-dim); 
}

table.data-table thead th { 
	background:#1b222c; 
	position:sticky; 
	top:0; 
	z-index:2; 
	text-align:left; 
	font-weight:600; 
	font-size:.65rem; 
	letter-spacing:.75px; 
	text-transform:uppercase; 
	padding:.55rem .75rem; 
	border-bottom:1px solid var(--border); 
	white-space:nowrap; 
}

table.data-table tbody td { 
	padding:.55rem .75rem; 
	border-bottom:1px solid #20262d; 
	vertical-align:top; 
}

table.data-table tbody tr:last-child td { border-bottom:none; }

/* Subtle row stripes */
table.data-table tbody tr:nth-child(even):not(.approved):not(.rejected) { background:#141a22; }

/* Status highlighting */
table.data-table tbody tr.approved { 
	background:linear-gradient(90deg, rgba(46,160,67,0.18), transparent 90%); 
}
table.data-table tbody tr.rejected { 
	background:linear-gradient(90deg, rgba(248,81,73,0.20), transparent 90%); 
}

/* Add a left accent border for stronger affordance on wider screens */
@media (min-width:640px) {
	table.data-table tbody tr.approved { box-shadow:inset 4px 0 0 0 rgba(46,160,67,0.55); }
	table.data-table tbody tr.rejected { box-shadow:inset 4px 0 0 0 rgba(248,81,73,0.55); }
}

/* Compact mode on very small screens: shrink padding */
@media (max-width:480px) {
	table.data-table thead th, 
	table.data-table tbody td { padding:.45rem .55rem; }
	.table-wrapper { margin:1rem -0.5rem; border-radius:0; }
}

/* Accessible focus state if table becomes focusable (e.g. via JS) */
.table-wrapper:focus-within { box-shadow:0 0 0 2px var(--accent); }

/* Utility badges inside cells (optional future use) */
.status-badge { 
	display:inline-block; 
	padding:.2rem .45rem; 
	font-size:.6rem; 
	font-weight:600; 
	letter-spacing:.5px; 
	text-transform:uppercase; 
	border:1px solid var(--border); 
	border-radius:6px; 
	background:#1f2730; 
}
.status-badge.approved { color:#3fb950; border-color:rgba(63,185,80,.4); }
.status-badge.rejected { color:#f85149; border-color:rgba(248,81,73,.4); }

/* When user prefers higher contrast, deepen backgrounds */
@media (prefers-contrast: more) {
	table.data-table tbody tr.approved { background:rgba(46,160,67,0.35); }
	table.data-table tbody tr.rejected { background:rgba(248,81,73,0.38); }
}


/* Sports table */
.sports-table { display:grid; gap:4px; margin-top:.6rem; }
.sports-row { display:grid; grid-template-columns:120px 1fr 140px; gap:.75rem; align-items:center; background:var(--bg-alt); padding:.55rem .75rem; border:1px solid var(--border); border-radius:8px; font-size:.8rem; }
.sports-head { background:#1b222c; font-size:.7rem; text-transform:uppercase; letter-spacing:.8px; font-weight:600; position:sticky; top:0; z-index:1; }
.sports-head .sports-cell { opacity:.85; }
.sports-cell { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sports-date time { font-variant-numeric:tabular-nums; }
.sports-result { text-align:right; }
.sports-result .metric { background:#1f2730; padding:.35rem .55rem; border-radius:20px; font-weight:500; font-size:.7rem; position:relative; display:inline-flex; gap:.4rem; align-items:center; }
.sports-result .metric::before { content:attr(data-label); background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600; font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; }
@media (max-width:620px) { .sports-row { grid-template-columns:90px 1fr; }
	.sports-head { display:none; }
	.sports-result { justify-self:start; text-align:left; }
	.sports-row .sports-result .metric { margin-top:.25rem; }
	.sports-row { flex-direction:column; }
}

/* Articles table (mirrors sports aesthetics) */
.articles-table { display:grid; gap:4px; margin-top:.6rem; }
.articles-row { display:grid; grid-template-columns:1.2fr 110px 110px 170px; gap:.75rem; align-items:start; background:var(--bg-alt); padding:.55rem .75rem; border:1px solid var(--border); border-radius:8px; font-size:.75rem; text-decoration:none; color:inherit; position:relative; }
.articles-head { background:#1b222c; font-size:.65rem; text-transform:uppercase; letter-spacing:.8px; font-weight:600; position:sticky; top:0; z-index:1; }
.articles-head .articles-cell { opacity:.85; }
.articles-cell { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Make whole row clickable (anchor wrapper) */
.article-row-link { cursor:pointer; }
.article-row-link:hover { border-color:#3a424c; background:#1b222c; }
.article-row-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Remove underline animation previously on title link */
.article-link { text-decoration:none; }
.articles-row .articles-cell:nth-child(1) { white-space:normal; overflow:visible; }
.articles-title { white-space:normal; line-height:1.25; }
.article-link { color:var(--text); text-decoration:none; background:linear-gradient(90deg,var(--accent) 0,var(--accent) 100%); background-size:0 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .35s; }
.article-link:hover, .article-link:focus { background-size:100% 1px; }
.lang-badge { display:inline-block; font-size:.55rem; font-weight:600; letter-spacing:.7px; text-transform:uppercase; background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; border:1px solid var(--border); padding:.15rem .4rem .1rem; border-radius:10px; margin-right:.3rem; vertical-align:middle; }
.articles-date time { font-variant-numeric:tabular-nums; }
.articles-tags { display:flex; flex-wrap:wrap; gap:.3rem; }
.tag-chip { background:#1f2730; border:1px solid var(--border); padding:.2rem .45rem; font-size:.55rem; font-weight:600; text-transform:uppercase; letter-spacing:.6px; border-radius:14px; line-height:1; }
@media (max-width:860px) {
	.articles-row { grid-template-columns:1.2fr 80px 90px; }
	.articles-head { grid-template-columns:1.2fr 80px 90px 1fr; }
	.articles-row .articles-tags { grid-column:1 / -1; justify-content:flex-start; }
	.articles-row { font-size:.7rem; }
}
@media (max-width:620px) { 
	.articles-head { display:none; }
	.articles-row { 
		display:flex; 
		flex-direction:column; 
		gap:.4rem; 
		font-size:.7rem; 
		text-decoration:none; 
	}
	.articles-row .articles-title { order:1; }
	.articles-row .articles-date { order:2; font-variant-numeric:tabular-nums; font-size:.65rem; opacity:.85; }
	.articles-row .articles-platform { order:3; font-size:.6rem; text-transform:uppercase; letter-spacing:.7px; opacity:.8; }
	.articles-row .articles-tags { order:4; }
	.articles-row .tag-chip { font-size:.5rem; }
}

/* Languages section */
.languages-grid { display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); margin-top:.65rem; justify-items:start; }
.lang-card { position:relative; background:var(--bg-alt); border:1px solid var(--border); border-radius:12px; padding:.5rem .45rem .45rem; display:flex; flex-direction:column; align-items:center; gap:.35rem; overflow:hidden; isolation:isolate; width:90px; }
.lang-card::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(76,194,255,.18),transparent 60%); opacity:0; transition:.5s; pointer-events:none; }
.lang-card:hover::after { opacity:1; }
.lang-name { font-weight:600; font-size:.8rem; letter-spacing:.3px; text-align:center; }
.lang-level { font-size:.55rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lang-meter { width:44px; height:44px; transform:rotate(-90deg); }
.lang-meter circle { fill:none; stroke-width:3; }
.lang-meter .meter-bg { stroke:#1f2730; opacity:.5; }
.lang-meter .meter-fg { stroke:url(#gradLang) var(--accent); stroke-linecap:round; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); transition:stroke-dasharray 1.2s cubic-bezier(.77,0,.2,1); }
.lang-card[data-level] .meter-fg { animation:growDash .9s ease forwards; }
@keyframes growDash { from { stroke-dasharray:0 113; } }
.lang-card:focus-within, .lang-card:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.lang-legend { font-size:.6rem; letter-spacing:.8px; text-transform:uppercase; color:var(--text-dim); margin-top:.6rem; }

/* Reduce motion respects */
@media (prefers-reduced-motion: reduce) { .lang-meter .meter-fg { transition:none; animation:none; } }

/* Mobile layout refinement (v2): keep vertical cards, give them a bit more width */
@media (max-width:600px) {
	.languages-grid { grid-template-columns:repeat(auto-fill,minmax(85px,1fr)); gap:.5rem; }
	.lang-card { flex-direction:column; padding:.45rem .4rem .4rem; gap:.3rem; width:85px; }
	.lang-meter { width:38px; height:38px; }
	.lang-name { font-size:.72rem; }
}
@media (max-width:420px) { /* force exactly two columns so items aren't ultra narrow */
	.languages-grid { grid-template-columns:repeat(3,minmax(0,1fr)); justify-items:start; }
	.lang-card { width:80px; }
}
@media (max-width:300px) { /* true tiny screens */
	.languages-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.lang-card { width:75px; margin:0; }
	.lang-meter { width:36px; height:36px; }
}

/* -------------------------------------------------- */
/* Markdown Body Enhancements (images, general flow)  */
/* -------------------------------------------------- */
/* Ensure markdown container has reasonable typography (can extend later) */
.markdown-body { font-size:.95rem; line-height:1.6; }

/* Base image styling: constrain oversize images, center them, and keep aspect ratio */
.markdown-body img { 
	max-width:100%;               /* never overflow container */
	height:auto;                  /* preserve aspect ratio */
	display:block;                /* block for consistent centering */
	margin:1.25rem auto;          /* vertical rhythm & center */
	border:1px solid var(--border);
	border-radius:10px;
	background:#111;              /* neutral bg if image has transparency */
	box-shadow:0 4px 12px -3px rgba(0,0,0,.55);
}

/* Default width cap for readability: large charts rarely need the full text width */
@media (min-width:900px) {
	.markdown-body img { max-width:75%; }
}

/* Inline (small) images: use Markdown attr_list: ![Alt](img.png){.inline} */
.markdown-body img.inline { 
	display:inline-block; 
	margin:.2rem .6rem .4rem 0; 
	max-width:160px; 
	vertical-align:middle; 
	box-shadow:none; 
}

/* Full-width override: ![Alt](img.png){.full} */
.markdown-body img.full { max-width:100% !important; }

/* Tight variant for icons/emojis: ![Alt](img.png){.icon} */
.markdown-body img.icon { 
	max-width:32px; 
	margin:0 .35rem; 
	padding:0; 
	border:none; 
	box-shadow:none; 
	background:transparent; 
}

/* Respect user prefers-reduced-motion: avoid subtle hover effects if added later */
@media (prefers-reduced-motion: reduce) {
	.markdown-body img { transition:none; }
}

/* Don't show animated underline overlay on pure image links */
.markdown-body a:has(img)::after { display:none; }
.markdown-body a:has(img):hover { filter:brightness(1.05); }

/* Basic heading refinement inside markdown (minimal since you requested link styling parity) */
.markdown-body h1, .markdown-body h2, .markdown-body h3 { font-weight:600; letter-spacing:.5px; }
.markdown-body h1 { font-size:clamp(1.9rem,5vw,2.6rem); margin:1.4rem 0 1rem; }
.markdown-body h2 { font-size:1.4rem; margin:2.1rem 0 .9rem; position:relative; }
.markdown-body h2::after { content:""; position:absolute; left:0; bottom:-.45rem; width:54px; height:3px; background:var(--gradient); border-radius:2px; }
.markdown-body h3 { font-size:1.15rem; margin:1.8rem 0 .7rem; }

/* Inline code parity */
.markdown-body code { background:#1b222c; padding:.15rem .4rem; border:1px solid #30363d; border-radius:6px; font-size:.75rem; }