/* SEMFE Alumni: one stylesheet, no build step.
   The look follows stouras.com/ucd-hackathon (navy + warm gold, Manrope, large
   rounded cards). Every colour is a variable below, and dark mode only
   re-points the variables, so a component never names a colour itself.
   Browser support: the last two versions of Chrome, Edge, Firefox and Safari
   (iOS and macOS), plus Samsung Internet. Nothing here needs :has(), CSS
   nesting or container queries; the few newer properties carry fallbacks. */

:root {
  --navy: #12355b;          /* primary: headings, links, dark buttons */
  --navy-deep: #0a2240;     /* header, dark sections */
  --navy-ink: #06162b;      /* footer, text on gold */
  --gold: #e3a938;          /* accent: primary buttons, highlights */
  --gold-deep: #c98f1f;
  --gold-soft: rgba(227, 169, 56, .16);
  --sky: #e7eff8;
  --mist: #f4f7fb;
  --bg: #ffffff;
  --surface: #ffffff;       /* cards */
  --ink: #16202b;
  --muted: #56667a;
  --line: #dbe3ec;          /* decorative borders (cards, panels) */
  --field-line: #7a8a9e;    /* form field borders: 3:1 against the page */
  --gold-text: #8a5a00;     /* gold as TEXT on light backgrounds (5.9:1) */
  --ok: #157347;
  --ok-soft: #e3f4ec;
  --warn: #9a6400;
  --warn-soft: #fff4dc;
  --err: #b42318;
  --err-soft: #fdecea;
  --focus: #12355b;         /* focus ring on light surfaces; gold on dark ones (below) */
  --chart: #1f5fae;         /* the one hue of the «Στατιστικά» charts (checked: band, chroma, 3:1) */
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(10, 34, 64, .10);
  --shadow-lg: 0 24px 60px rgba(10, 34, 64, .22);
  --max: 1120px;
  --header-h: 68px;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --chart: #4a8fe0;
    --navy: #9cc3f0;
    --sky: #16283f;
    --mist: #0f1c2e;
    --bg: #0b1626;
    --surface: #13233a;
    --ink: #e6edf5;
    --muted: #a3b3c6;
    --line: #26384f;
    --field-line: #6b7f99;
    --gold-text: var(--gold);
    --focus: #e3a938;
    --ok: #4cc38a;
    --ok-soft: #10301f;
    --warn: #f0b34a;
    --warn-soft: #33260b;
    --err: #ff8a80;
    --err-soft: #3a1512;
    --gold-soft: rgba(227, 169, 56, .14);
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--navy); text-underline-offset: .18em; }
a:not(.btn):hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); font-weight: 800; }
h3 { font-size: 1.18rem; font-weight: 800; }
h4 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }   /* no single word left alone on the last line (where supported) */
ul, ol { padding-left: 1.3em; }
strong { font-weight: 800; }
mark { background: var(--gold-soft); color: inherit; padding: 0 .2em; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.wrap { width: 92%; width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.narrow { max-width: 760px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--navy-ink); padding: 8px 14px; border-radius: 8px; z-index: 200; font-weight: 800; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.site-header, .hero, .page-hero, section.dark, .site-footer, .lightbox { --focus: #e3a938; }
.acct-menu, .nav-more-panel { --focus: var(--navy); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: 12px 24px; border-radius: 999px; font-weight: 800; font-size: 1rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  font-family: inherit; line-height: 1.2; text-align: center;
  -webkit-appearance: none; appearance: none;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn-primary { background: var(--gold); color: var(--navy-ink); box-shadow: 0 8px 24px rgba(227, 169, 56, .32); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-dark { background: #12355b; color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-danger { background: transparent; color: var(--err); border-color: currentColor; }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: .92rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; box-shadow: none; transform: none; }
@media (hover: hover) {
  .btn-primary:not([disabled]):hover { background: var(--gold-deep); transform: translateY(-1px); }
  .btn-ghost:not([disabled]):hover { background: rgba(255,255,255,.12); }
  .btn-dark:not([disabled]):hover { background: #0a2240; }
  .btn-outline:not([disabled]):hover { border-color: var(--navy); }
  .btn-danger:not([disabled]):hover { background: var(--err-soft); }
}
.btn:active { transform: scale(.98); }
@media (prefers-color-scheme: dark) {
  .btn-dark { background: #2a5a8e; }
}

/* ---------- header / nav ---------- */
.site-header {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 60;
  background: #0a2240; background: rgba(10, 34, 64, .94);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .wrap { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; min-width: 0; min-height: 44px; }
.brand-mark { width: 42px; height: 42px; flex: none; border-radius: 50%; background: #fff; padding: 3px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-text .top { font-size: .68rem; letter-spacing: .2em; font-weight: 700; opacity: .8; white-space: nowrap; max-height: 2.6em; overflow: hidden; }
.brand-text .bottom { font-size: 1.02rem; letter-spacing: .04em; font-weight: 800; white-space: nowrap; }
/* the account button (and on a wide screen the links) keep to the right */
.header-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a, .nav-more-btn { color: rgba(255,255,255,.88); text-decoration: none; font-weight: 700; font-size: .93rem; padding: 10px 11px; border-radius: 8px; white-space: nowrap; }
.nav a[aria-current="page"], .nav-more-btn.is-here { color: #fff; background: rgba(255,255,255,.12); }
@media (hover: hover) { .nav a:hover, .nav-more-btn:hover { background: rgba(255,255,255,.1); color: #fff; } }
/* «Ο Σύλλογος ▾»: the pages about the association, in one drop-down
   (site.js opens and closes it; without JavaScript it opens on hover/focus) */
.nav-more { position: relative; }
.nav-more-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: none; border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.nav-more-btn .caret { width: 14px; height: 14px; flex: none; opacity: .8; transition: transform .2s ease; }
.nav-more-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-more-panel {
  display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 70;
  grid-template-columns: 1fr 1fr; gap: 2px 8px; width: max-content; min-width: 380px; max-width: 86vw;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 8px;
}
.nav-more.open .nav-more-panel { display: grid; }
html:not(.js) .nav-more:hover .nav-more-panel, html:not(.js) .nav-more:focus-within .nav-more-panel { display: grid; }
.nav-group { display: flex; flex-direction: column; min-width: 0; }
.nav-group-h { display: block; padding: 10px 12px 6px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.nav .nav-more-panel a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; color: var(--ink); font-weight: 600; font-size: .95rem; white-space: normal; }
.nav .nav-more-panel a[aria-current="page"] { color: var(--ink); background: var(--mist); font-weight: 800; }
@media (hover: hover) { .nav .nav-more-panel a:hover { color: var(--ink); background: var(--mist); } }
/* the menu button sits at the far LEFT, before the logo, so the right-hand
   corner holds only the account button (a phone's usual layout) */
.nav-toggle { display: none; flex: none; background: none; border: 0; color: #fff; padding: 8px; margin-left: -8px; margin-right: -4px; cursor: pointer; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 10px; }
.nav-toggle svg { width: 28px; height: 28px; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }

/* account button / chip (filled in by auth.js) */
.acct-slot { display: flex; align-items: center; }
.acct-signin { white-space: nowrap; }
.acct-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 220px; min-height: 44px;
  padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08); color: #fff; font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer;
}
.acct-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-chip svg.caret { width: 14px; height: 14px; flex: none; opacity: .8; }
@media (hover: hover) { .acct-chip:hover { background: rgba(255,255,255,.16); } }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  background: var(--gold); color: var(--navy-ink); font-weight: 800; font-size: .9rem; overflow: hidden;
  background-size: cover; background-position: center;
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.4rem; }
.acct-menu-wrap { position: relative; }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 250px; max-width: 86vw;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 8px;
}
.linked .row .badge { margin-left: auto; }
.acct-menu .who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: .9rem; color: var(--muted); }
.acct-menu .who strong { display: block; color: var(--ink); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
.acct-menu a, .acct-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font: inherit; font-weight: 700; font-size: .95rem; background: none; border: 0; cursor: pointer; text-align: left;
}
.acct-menu svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
@media (hover: hover) { .acct-menu a:hover, .acct-menu button:hover { background: var(--mist); } }
/* the menu's quick links: a label over the name, a count or status on the right
   of a link (kept by auth.js noteMenu), the account page's own link in bold,
   and a divider before signing out */
.acct-menu .who small { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
.acct-menu .who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu a, .acct-menu button { font-weight: 600; }
.acct-menu a.strong { font-weight: 800; }
.acct-menu a > span, .acct-menu button > span { flex: 1 1 auto; min-width: 0; }
.acct-menu .count { flex: none; margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 800; line-height: 1.5; background: var(--mist); color: var(--muted); }
.acct-menu .count.ok { background: var(--ok-soft); color: var(--ok); }
.acct-menu .count.warn { background: var(--warn-soft); color: var(--warn); }
.acct-menu .count.err { background: var(--err-soft); color: var(--err); }
.acct-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.acct-menu .out, .acct-menu .out svg { color: var(--err); }

/* desktop: the brand never shrinks under the nav; the signed-in name lives in
   the menu (it stays the chip's accessible name) so the row always fits */
@media (min-width: 1101px) {
  .brand { flex-shrink: 0; }
  .nav > a, .nav-more-btn { padding-left: 9px; padding-right: 9px; }
  .acct-chip .nm { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .acct-chip { padding-right: 10px; }
}

@media (max-width: 1100px) {
  .js .nav-toggle { display: inline-flex; }
  html:not(.js) .site-header { position: static; }
  .js .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #0a2240; padding: 8px 16px 16px; display: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
    max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 18px 30px rgba(0,0,0,.28);
  }
  .js .nav.open { display: flex; }
  .js .nav a { padding: 13px 10px; font-size: 1.05rem; white-space: normal; }
  .js .nav a { border-radius: 0; }
  .js .nav a + a { border-top: 1px solid rgba(255,255,255,.08); }
  /* in the phone menu the drop-down is open for good: its two groups under
     their headings, then the other links */
  .js .nav-more-btn { display: none; }
  .js .nav-more-panel { display: block; position: static; width: auto; min-width: 0; max-width: none; padding: 0 0 8px; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.14); border-radius: 0; box-shadow: none; color: inherit; }
  .js .nav-group-h { padding: 14px 10px 4px; color: rgba(255,255,255,.62); }
  .js .nav .nav-more-panel a { color: rgba(255,255,255,.88); font-weight: 700; font-size: 1.05rem; padding: 13px 10px; border-radius: 0; }
  .js .nav .nav-more-panel a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.12); }
  /* no JS: the links simply wrap under the brand */
  html:not(.js) .site-header .wrap { flex-wrap: wrap; padding: 8px 0; }
  html:not(.js) .nav { flex-wrap: wrap; }
  .acct-chip .nm { max-width: 110px; }
}
@media (max-width: 1100px) and (hover: hover) {
  .js .nav .nav-more-panel a:hover { color: #fff; background: rgba(255,255,255,.1); }
}
@media (hover: hover) {
  html.js.nav-tight .nav .nav-more-panel a:hover { color: #fff; background: rgba(255,255,255,.1); }
}
@media (max-width: 1100px) and (max-height: 500px) {
  .js .nav a { padding: 9px 10px; }
}
/* a wide screen whose header row is a little too wide: tighter links first */
html.js.nav-compact .nav { gap: 0; }
html.js.nav-compact .nav > a, html.js.nav-compact .nav-more-btn { padding-left: 6px; padding-right: 6px; font-size: .88rem; }
/* the same menu on a wide screen whose header row does not fit: the web font
   failed (a wider fallback font), or the reader uses a larger text size.
   site.js measures and sets .nav-tight; keep in step with the block above */
html.js.nav-tight .nav-toggle { display: inline-flex; }
html.js.nav-tight .nav {
  position: absolute; left: 0; right: 0; top: 100%;
  flex-direction: column; align-items: stretch; gap: 0;
  background: #0a2240; padding: 8px 16px 16px; display: none;
  border-bottom: 1px solid rgba(255,255,255,.1);
  max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 18px 30px rgba(0,0,0,.28);
}
html.js.nav-tight .nav.open { display: flex; }
html.js.nav-tight .nav a { padding: 13px 10px; font-size: 1.05rem; white-space: normal; }
html.js.nav-tight .nav a { border-radius: 0; }
html.js.nav-tight .nav a + a { border-top: 1px solid rgba(255,255,255,.08); }
html.js.nav-tight .nav-more-btn { display: none; }
html.js.nav-tight .nav-more-panel { display: block; position: static; width: auto; min-width: 0; max-width: none; padding: 0 0 8px; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.14); border-radius: 0; box-shadow: none; color: inherit; }
html.js.nav-tight .nav-group-h { padding: 14px 10px 4px; color: rgba(255,255,255,.62); }
html.js.nav-tight .nav .nav-more-panel a { color: rgba(255,255,255,.88); font-weight: 700; font-size: 1.05rem; padding: 13px 10px; border-radius: 0; }
html.js.nav-tight .nav .nav-more-panel a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.12); }
@media (max-width: 420px) {
  /* too long for one line beside the buttons on most phones: it wraps
     ("ΣΥΛΛΟΓΟΣ / ΔΙΠΛΩΜΑΤΟΥΧΩΝ") instead of running under «Σύνδεση» */
  .brand-text .top { letter-spacing: .12em; font-size: .62rem; white-space: normal; line-height: 1.2; margin-bottom: 1px; }
  .brand-text .bottom { font-size: .92rem; }
  .brand-mark { width: 36px; height: 36px; }
  .acct-chip .nm { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .acct-chip { padding-right: 8px; }
  .acct-signin { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 380px) {
  .brand-text .top { letter-spacing: .06em; font-size: .56rem; }
  .site-header .wrap { gap: 8px; }
  .header-right { gap: 2px; }
}
@media (max-width: 360px) {
  /* menu button + logo + name + «Σύνδεση» on a 320px screen, even in a wider
     fallback font: a little less room around each */
  .site-header .wrap { gap: 6px; }
  .brand { gap: 8px; }
  .brand-mark, html.hdr-small .brand-mark { width: 32px; height: 32px; }
  .brand-text .bottom, html.hdr-small .brand-text .bottom { font-size: .86rem; letter-spacing: .02em; }
  .acct-signin { padding-left: 10px; padding-right: 10px; }
}

/* ---- the header slims down once the page is scrolled ----
   html.hdr-small is set by site.js past the first few pixels of a page and
   removed again back at the top: a slimmer bar, a slightly smaller logo and
   name, a shadow to lift it off the page. The name stays WHOLE: the
   "ΣΥΛΛΟΓΟΣ ΔΙΠΛΩΜΑΤΟΥΧΩΝ" line is part of the logo and is never hidden, at
   any scroll position or screen width (owner, 2026-10-01).
   Buttons keep their 44px touch height. site.js measures whether the row fits
   in the FULL-size state (html.hdr-measure switches the transitions off for
   that one measurement), so the links never change style as the page scrolls. */
.site-header { transition: background-color .25s ease, box-shadow .25s ease; }
.site-header .wrap { transition: min-height .25s ease; }
.brand-mark { transition: width .25s ease, height .25s ease; }
.brand-text .top { transition: font-size .25s ease, letter-spacing .25s ease; }
.brand-text .bottom { transition: font-size .25s ease; }
html.hdr-small { --header-h: 56px; }
html.hdr-small .site-header { background: #0a2240; background: rgba(10, 34, 64, .97); box-shadow: 0 6px 22px rgba(3, 12, 26, .28); }
html.hdr-small .brand-mark { width: 34px; height: 34px; }
html.hdr-small .brand-text .top { font-size: .62rem; letter-spacing: .18em; }
html.hdr-small .brand-text .bottom { font-size: .98rem; }
@media (max-width: 420px) {
  html.hdr-small .brand-text .top { font-size: .58rem; letter-spacing: .1em; }
}
@media (max-width: 380px) {
  html.hdr-small .brand-text .top { font-size: .54rem; letter-spacing: .06em; }
}
@media (min-width: 1101px) {
  html.hdr-small:not(.nav-tight) .nav > a, html.hdr-small:not(.nav-tight) .nav-more-btn { padding-top: 8px; padding-bottom: 8px; }
}
html.hdr-measure .site-header, html.hdr-measure .site-header * { transition: none !important; }

/* ---------- hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(227,169,56,.20), transparent 60%),
    radial-gradient(900px 500px at -10% 115%, rgba(64,150,255,.26), transparent 60%),
    linear-gradient(160deg, #0a2240 0%, #12355b 58%, #1b4f86 100%);
  padding: 76px 0 88px;
}
.hero::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.hero h1 .accent { color: var(--gold); }
.hero .lede { font-size: 1.14rem; max-width: 36em; color: rgba(255,255,255,.88); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-art { display: grid; place-items: center; }
.hero-logo {
  width: 100%; max-width: 360px; aspect-ratio: 1 / 1; border-radius: 50%;
  background: rgba(255,255,255,.96); padding: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.35), 0 0 0 10px rgba(255,255,255,.07), 0 0 0 22px rgba(227,169,56,.10);
}
.hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; letter-spacing: .02em;
}
.chip svg { width: 16px; height: 16px; flex: none; }
/* the association in four numbers, under the hero (like operationsacademia.org):
   a full-width row below the text and the logo; site.js counts each up */
.hero-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hero-stat {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-sm);
  padding: 18px 20px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-stat .value { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hero-stat .label { margin-top: 8px; color: rgba(255,255,255,.82); font-weight: 600; font-size: .9rem; line-height: 1.35; text-wrap: pretty; }
@media (max-width: 860px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hero { padding: 52px 0 60px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-art { order: -1; justify-items: start; }
  .hero-logo { max-width: 150px; padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.07); }
}
@media (max-width: 560px) {
  .hero { padding: 30px 0 44px; }
  .hero-logo { max-width: 96px; }
  .hero .lede { font-size: 1.04rem; }
  .hero .actions .btn { flex: 1 1 100%; }
  .hero-stat { padding: 14px; }
  .hero-stat .label { font-size: .84rem; }
}

/* page hero (inner pages): a shorter band with breadcrumb + title */
.page-hero {
  color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(900px 400px at 90% -30%, rgba(227,169,56,.18), transparent 60%),
    linear-gradient(160deg, #0a2240 0%, #12355b 70%, #1b4f86 100%);
  padding: 48px 0 52px;
}
.page-hero h1 { font-size: clamp(1.8rem, 5vw, 2.9rem); margin-bottom: .25em; hyphens: auto; }
/* on the narrowest phones a long Greek word («εκλογοαπολογιστική») must fit a
   line whole, not break in the middle */
@media (max-width: 380px) { .page-hero h1 { font-size: 1.5rem; } .hero h1 { font-size: 1.75rem; } }
.page-hero .lede { color: rgba(255,255,255,.86); max-width: 44em; margin: 0; font-size: 1.08rem; }
.crumbs { font-size: .88rem; margin-bottom: 14px; color: rgba(255,255,255,.75); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs a { color: rgba(255,255,255,.9); display: inline-block; padding: 9px 0; }
.crumbs span[aria-hidden] { opacity: .6; }
@media (max-width: 560px) { .page-hero { padding: 30px 0 34px; } }

/* ---------- sections ---------- */
section { padding: 80px 0; }
section.tight { padding: 56px 0; }
section.alt { background: var(--mist); }
section.dark { background: #0a2240; color: #fff; }
section.dark a:not(.btn) { color: var(--gold); }
.eyebrow { display: inline-block; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: var(--gold); }
.section-head { max-width: 46em; margin-bottom: 36px; }
.section-head p { color: var(--muted); font-size: 1.06rem; }
.dark .section-head p { color: rgba(255,255,255,.8); }
.section-foot { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; }
.two-col.middle { align-items: center; }
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* stats */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stats.one { grid-template-columns: minmax(0, 1fr); }            /* sentence-long labels */
@media (max-width: 380px) { .stats { grid-template-columns: minmax(0, 1fr); } }   /* «Διπλωματούχοι» whole, not split */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; box-shadow: var(--shadow); }
.stat .value { font-size: 2rem; font-weight: 800; color: var(--navy); line-height: 1; }
.stat .label { color: var(--muted); font-weight: 600; margin-top: 8px; font-size: .95rem; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .cards.two { grid-template-columns: minmax(0, 1fr); } }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px;
  box-shadow: var(--shadow); min-width: 0;
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--sky); color: var(--navy); display: grid; place-items: center; margin-bottom: 14px; }
.card .ic svg { width: 24px; height: 24px; }
.card .muted, .muted { color: var(--muted); }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards, .cards.two { grid-template-columns: minmax(0, 1fr); } }

/* numbered goals (Σκοπός) */
.goals { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: goal; }
.goals li {
  counter-increment: goal; position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px 18px 18px 66px; min-height: 64px;
}
.goals li::before {
  content: counter(goal); position: absolute; left: 16px; top: 16px; width: 36px; height: 36px; border-radius: 10px;
  background: var(--gold-soft); color: var(--gold-text); font-weight: 800; display: grid; place-items: center;
}
@media (max-width: 760px) { .goals { grid-template-columns: minmax(0, 1fr); } }

/* the statute's aims as a list that opens one at a time (like the FAQ on
   operationsacademia.org): a number, a short title, a plus that turns into a
   minus; the statute's own words inside */
.qa { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 880px; }
.qa details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.qa details[open] { box-shadow: var(--shadow); }
.qa summary {
  display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 13px 16px; cursor: pointer;
  list-style: none; font-weight: 700; font-size: 1.02rem; line-height: 1.35; border-radius: var(--radius-sm);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::marker { content: ''; }
@media (hover: hover) { .qa summary:hover { background: var(--mist); } }
.qa-n { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-text); font-weight: 800; font-size: .95rem; }
.qa-q { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.qa-i { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); }
.qa-i::before, .qa-i::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 1px;
  background: currentColor; transform: translate(-50%, -50%); transition: transform .2s ease;
}
.qa-i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa details[open] .qa-i::after { transform: translate(-50%, -50%); }
.qa details > p { margin: 0; padding: 2px 18px 18px 64px; }
@media (max-width: 560px) {
  .qa summary { padding: 12px 12px; gap: 12px; font-size: .98rem; }
  .qa details > p { padding: 0 14px 16px; }
}

/* «Τι νέο» (whats-new/, news-page.js): a dated list on a thin line; for an
   admin, what waits for approval in a box above it and the removed ones in a
   closed box below */
.news { max-width: 820px; }
.news-note:empty { display: none; }
.news-note { margin: 0 0 18px; }
.news-h { font-size: 1.2rem; margin: 0 0 16px; }
.news-list { list-style: none; margin: 0; padding: 0 0 0 24px; border-left: 2px solid var(--line); display: grid; gap: 24px; }
.news-item { position: relative; }
.news-item::before { content: ''; position: absolute; left: -32px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--bg); }
.news-item time { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .03em; color: var(--muted); }
.news-item h3 { margin: 4px 0 6px; font-size: 1.12rem; line-height: 1.35; }
.news-item p { margin: 0 0 6px; }
.news-edited { font-size: .85rem; color: var(--muted); }
.news-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.news-review { background: var(--warn-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 22px; margin-bottom: 32px; }
.news-review .news-item::before { box-shadow: 0 0 0 4px var(--warn-soft); }
.news-review-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 6px; }
.news-review h2 { font-size: 1.15rem; margin: 0; }
.news-count { display: inline-block; min-width: 1.8em; padding: 1px 8px; border-radius: 999px; background: var(--surface); color: var(--warn); font-size: .85rem; text-align: center; vertical-align: 2px; }
.news-removed { margin-top: 32px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 18px; }
.news-removed > summary { cursor: pointer; padding: 14px 0; font-weight: 700; min-height: 44px; }
.news-removed[open] { padding-bottom: 18px; }
.news-form { display: grid; gap: 4px; }
.news-hint { font-size: .85rem; margin: 0; }

/* timeline (history) */
.milestones { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 18px; }
.milestones::before { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: rgba(227,169,56,.45); }
.milestones li { position: relative; padding-left: 44px; }
.milestones li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(227,169,56,.2); }
.milestones .when { font-weight: 800; color: var(--gold); display: block; font-size: .92rem; letter-spacing: .04em; }
.milestones strong { display: block; color: #fff; font-size: 1.08rem; }
.milestones span.d { color: rgba(255,255,255,.8); }

/* people (board) */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.person {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px 20px;
  text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; min-width: 0;
}
.person img, .person .ph { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; border: 4px solid var(--sky); }
.person .role { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--gold-text); margin-bottom: 4px; }
.person h3 { font-size: 1.1rem; margin-bottom: 12px; }
.person .li { margin-top: auto; }
.people-mini { display: flex; flex-wrap: wrap; gap: 10px; }
.people-mini a { display: block; border-radius: 50%; }
.people-mini img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 0 0 1px var(--line); }
.linkedin-btn { color: #0a66c2; }
@media (prefers-color-scheme: dark) { .linkedin-btn { color: #70b5f9; } }

/* announcements */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.post-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; min-width: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) { .post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } }
.post-card .thumb { aspect-ratio: 16 / 9; background: linear-gradient(160deg, #0a2240, #1b4f86); overflow: hidden; }   /* the logo's colours while a picture loads */
.post-card .thumb img { width: 100%; height: 100%; object-fit: contain; }  /* the posts' pictures are posters: shown whole, never cut through a line of text */
.post-card .thumb.logo { display: grid; place-items: center; background: linear-gradient(160deg, #0a2240, #1b4f86); }
.post-card .thumb.logo img { width: 42%; height: auto; border-radius: 50%; background: #fff; padding: 6px; object-fit: contain; }
.post-card .body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card h3 { margin: 0; font-size: 1.1rem; }
.post-card p { color: var(--muted); margin: 0; font-size: .96rem; }
.post-card .more { margin-top: auto; padding-top: 6px; font-weight: 800; color: var(--navy); font-size: .95rem; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: .88rem; font-weight: 600; align-items: center; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--sky); color: var(--navy); font-weight: 800; font-size: .78rem; letter-spacing: .02em; }
.tag.events { background: var(--gold-soft); color: var(--gold-text); }
@media (max-width: 960px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .posts { grid-template-columns: minmax(0, 1fr); } }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
/* the section switcher under a page title: one segmented control, the current page shown selected */
.subnav { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); max-width: 100%; }
.subnav .btn { background: transparent; border-color: transparent; color: rgba(255,255,255,.9); box-shadow: none; }
.subnav .btn[aria-current="page"] { background: #fff; border-color: #fff; color: #0a2240; }
@media (hover: hover) { .subnav .btn:not([aria-current]):hover { background: rgba(255,255,255,.12); } }
@media (max-width: 560px) { .subnav { display: flex; gap: 2px; } .subnav .btn { flex: 1 1 auto; min-width: 0; padding-left: 8px; padding-right: 8px; } }
.filters button {
  min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer;
}
.filters button[aria-pressed="true"] { background: #12355b; border-color: #12355b; color: #fff; }
/* under the announcements: e-mail alerts and the feeds */
.follow { margin-top: 32px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.follow p { margin: 0 0 12px; }
.follow-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* long-form content (announcements, legal pages, about text) */
.prose { max-width: 760px; }
/* the legal pages (privacy, terms, data deletion): the text fills the page
   and is aligned on both sides; words break at syllables (lang="el") so the
   spaces stay even. On a phone a line holds too few words to justify well,
   so it stays aligned left there. */
.prose.wide { max-width: none; }
@media (min-width: 640px) {
  .prose.wide p, .prose.wide li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
  .prose.wide .muted { text-align: left; }
}
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose > :first-child { margin-top: 0; }
.prose img { border-radius: var(--radius-sm); margin: 20px 0; box-shadow: var(--shadow); }
.prose blockquote { margin: 20px 0; padding: 14px 20px; border-left: 4px solid var(--gold); background: var(--mist); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose blockquote p:last-child { margin: 0; }
.prose li + li { margin-top: 6px; }
.prose .sign { margin-top: 24px; }
.prose .date-right { text-align: right; color: var(--muted); }
.post-head .meta { color: rgba(255,255,255,.8); margin-top: 10px; }
.post-head .tag { background: rgba(255,255,255,.16); color: #fff; }
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #000; margin: 20px 0; box-shadow: var(--shadow); }
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video::before { content: 'Το βίντεο φορτώνει από το YouTube…'; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; color: rgba(255,255,255,.7); font-weight: 700; padding: 16px; text-align: center; }
@supports not (aspect-ratio: 1 / 1) { .video { height: 0; padding-bottom: 56.25%; } }
.post-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 44px; max-width: 760px; }
.post-nav a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; background: var(--surface); }
.post-nav small { display: block; color: var(--muted); font-weight: 700; }
li, .stat .label, .post-nav a, .card p { text-wrap: pretty; }
.post-nav .next { text-align: right; }
@media (max-width: 620px) { .post-nav { grid-template-columns: minmax(0, 1fr); } .post-nav .next { text-align: left; } }

/* documents (archive) */
.docs { display: grid; gap: 12px; }
.doc {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px;
}
.doc .ic { width: 48px; height: 48px; border-radius: 12px; background: var(--err-soft); color: var(--err); display: grid; place-items: center; font-weight: 800; font-size: .72rem; letter-spacing: .06em; }
.doc h3 { margin: 0; font-size: 1.02rem; }
.doc .muted { font-size: .88rem; }
.doc .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 620px) { .doc { grid-template-columns: 40px minmax(0, 1fr); } .doc .ic { width: 40px; height: 40px; } .doc .acts { grid-column: 1 / -1; justify-content: stretch; } .doc .acts .btn { flex: 1; } }
.pdf-frame { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: 12px; background: var(--mist); }
.doc-group { margin-bottom: 40px; }
.doc-group > h2 { font-size: 1.4rem; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; grid-auto-flow: dense; }
.gallery a { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; background: var(--sky); aspect-ratio: 4 / 3; }
/* a captioned photo takes a 2x2 block; dense packing fills the gaps around it */
.gallery a.wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery a.poster { background: #0a2240; }
.gallery a::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(10,34,64,.12); pointer-events: none; }
.gallery a.poster img { object-fit: contain; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
@media (hover: hover) { .gallery a:hover img { transform: scale(1.04); } }
.gallery figcaption, .gallery .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; color: #fff; font-weight: 700; font-size: .9rem; line-height: 1.35;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6) 18px, rgba(0,0,0,.82)); text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gallery a.wide { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; } .gallery .cap { font-size: .8rem; padding: 20px 10px 8px; } }
@supports not (aspect-ratio: 1 / 1) { .gallery a { height: 220px; } }

.lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 300; background: #050b16; display: flex; flex-direction: column; }
.lightbox .lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 12px 12px; min-height: 0; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lightbox .lb-cap { color: #fff; text-align: center; padding: 10px 16px 18px; font-weight: 600; min-height: 1.5em; }
/* dark discs with a light ring: on a phone the arrows sit ON the photo, and a
   light disc vanished over a bright one (a white poster, marble) */
.lightbox button { position: absolute; background: rgba(5, 11, 22, .72); box-shadow: 0 0 0 1px rgba(255,255,255,.35); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
@media (hover: hover) { .lightbox button:hover { background: rgba(5, 11, 22, .9); } }
.lightbox button svg { width: 24px; height: 24px; }
.lightbox .lb-close { top: 10px; right: 10px; }
.lightbox .lb-prev { left: 10px; top: 50%; margin-top: -24px; }
.lightbox .lb-next { right: 10px; top: 50%; margin-top: -24px; }
.lightbox .lb-count { position: absolute; top: 22px; left: 18px; color: rgba(255,255,255,.75); font-weight: 700; font-size: .9rem; }

/* support page */
.pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 960px) { .pay-grid { grid-template-columns: minmax(0, 1fr); } }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: .95rem; }
.kv dt { color: var(--muted); font-weight: 700; }
.kv dd { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.copy-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.copy-btn { min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--navy); font: inherit; font-weight: 800; font-size: .82rem; cursor: pointer; }
.copy-btn.done { color: var(--ok); border-color: var(--ok); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding: 18px 18px 18px 66px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.steps > li::before { content: counter(step); position: absolute; left: 16px; top: 16px; width: 36px; height: 36px; border-radius: 50%; background: #12355b; color: #fff; font-weight: 800; display: grid; place-items: center; }
.steps > li p:last-child { margin-bottom: 0; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 32px; }
.checklist li::before { content: ''; position: absolute; left: 0; top: .28em; width: 20px; height: 20px; border-radius: 50%; background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7f52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 13px no-repeat; }

/* notices */
.notice { border-radius: var(--radius-sm); padding: 14px 16px; border: 1px solid var(--line); background: var(--mist); margin: 0 0 16px; font-size: .96rem; }
.notice.ok { background: var(--ok-soft); border-color: transparent; color: var(--ink); }
.notice.warn { background: var(--warn-soft); border-color: transparent; color: var(--ink); }
.notice.err { background: var(--err-soft); border-color: transparent; color: var(--ink); }
.notice strong { display: block; margin-bottom: 2px; }
.notice p:last-child { margin: 0; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: .82rem; white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.err { background: var(--err-soft); color: var(--err); }
.badge.muted { background: var(--mist); color: var(--muted); }

/* forms (minmax(0, …): a long unbroken value, such as an e-mail address,
   wraps instead of widening the column past a phone's screen) */
.form { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .form .row { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field .lbl { font-weight: 800; font-size: .9rem; }
.field .hint { color: var(--muted); font-size: .85rem; font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--field-line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--gold-soft); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--err); }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .95rem; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy); }
.req { color: var(--err); }
.field input[readonly] { background: var(--mist); color: var(--muted); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 76px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 4px 10px; border: 0; background: none; color: var(--navy); font: inherit; font-weight: 800; font-size: .85rem; cursor: pointer; border-radius: 8px; }
.form-error { color: var(--err); font-weight: 700; font-size: .92rem; min-height: 1.2em; }
.form > .form-error:empty { min-height: 0; margin-bottom: -16px; }
.form-error:empty { min-height: 0; }
[data-methods-msg]:not(:empty) { margin-top: 10px; }   /* no gap until there is something to say (it stays in place for screen readers) */
.intro { font-size: .92rem; }
.form-ok { color: var(--ok); font-weight: 700; font-size: .92rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px 18px; margin: 0; min-width: 0; }
legend { font-weight: 800; padding: 0 6px; }

/* ---------- auth modal ---------- */
.modal-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 250; background: rgba(4, 12, 24, .62);
  display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px 24px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.modal {
  position: relative; width: 100%; max-width: 460px; background: var(--surface); color: var(--ink);
  border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; margin: auto 0;
}
.modal-head { padding: 26px 26px 0; }
.modal-head h2 { font-size: 1.5rem; margin-bottom: 6px; padding-right: 40px; }
.modal-head p { color: var(--muted); margin: 0; font-size: .95rem; }
.modal-body { padding: 20px 26px 26px; display: grid; gap: 14px; }
.modal-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--mist); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.modal-x svg { width: 20px; height: 20px; }
.tabs2 { display: grid; grid-template-columns: 1fr 1fr; background: var(--mist); border-radius: 999px; padding: 4px; }
.tabs2 button { min-height: 40px; border: 0; background: transparent; border-radius: 999px; font: inherit; font-weight: 800; color: var(--muted); cursor: pointer; }
.tabs2 button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.providers { display: grid; gap: 10px; }
.prov {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 16px;
  border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 800; font-size: .98rem; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.prov svg { width: 20px; height: 20px; flex: none; }
.prov.facebook { background: #0866ff; border-color: #0866ff; color: #fff; }
.prov.linkedin { background: #0a66c2; border-color: #0a66c2; color: #fff; }
@media (hover: hover) {
  .prov:not([disabled]):hover { border-color: var(--navy); }
  .prov.facebook:not([disabled]):hover { background: #0759d6; }
  .prov.linkedin:not([disabled]):hover { background: #0959aa; }
}
.prov[disabled] { opacity: .65; cursor: progress; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .85rem; font-weight: 700; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.link-btn { min-height: 40px; background: none; border: 0; padding: 6px 0; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.modal .small { font-size: .84rem; color: var(--muted); }
@media (max-width: 480px) {
  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal { max-width: none; border-radius: 0; min-height: 100%; margin: 0; }
  .modal-head { padding: 22px 18px 0; }
  .modal-body { padding: 18px 18px 28px; }
}
body.modal-open { overflow: hidden; }

/* account / members / admin */
.lock-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--sky); color: var(--navy); display: grid; place-items: center; }
.lock-ic svg { width: 26px; height: 26px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); min-width: 0; }
.panel + .panel { margin-top: 18px; }
.acct-grid > .panel + .panel { margin-top: 0; }        /* side by side: the grid gap spaces them */
.panel > :last-child { margin-bottom: 0; }
.panel h2 { font-size: 1.35rem; }
.profile-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-head .who { min-width: 0; flex: 1 1 14rem; }        /* a real width: on a phone the badge moves under the name */
.profile-head .who strong { display: block; font-size: 1.2rem; overflow-wrap: break-word; }
.profile-head .who .muted { overflow-wrap: anywhere; }         /* only a long e-mail address may break anywhere */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .acct-grid { grid-template-columns: minmax(0, 1fr); } }
.linked { display: grid; gap: 10px; }
.linked .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap; }
.linked .row span { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
/* the account page's small inline forms (set a password, merge) and the merge box */
.sub-form { margin: 14px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--mist); }
.sub-form .field { margin-bottom: 12px; }
.merge-box { margin: 14px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.merge-box h3 { font-size: 1.05rem; margin: 0 0 6px; }
.merge-box .sub-form { background: transparent; border-style: dashed; }
.prov-sm { gap: 8px; }
.prov-sm svg { width: 18px; height: 18px; flex: none; }
.notice.info { background: var(--mist); border-color: var(--line); border-left: 4px solid var(--gold); }
/* admin: registered users */
.chip-sm { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); font-size: .8rem; font-weight: 700; white-space: nowrap; margin: 0 2px 4px 0; }
table.data td.pick { width: 44px; }
table.data td.pick input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--navy); }
table.data tr.picked td { background: var(--sky); }
.keep-pick { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.keep-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.keep-opt input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--navy); }
.keep-opt:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; }
.users-panel .intro { max-width: 80ch; }
.linked svg { width: 20px; height: 20px; }
.dir-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.dir-tools .field { flex: 1 1 220px; }
.dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.dir .card { padding: 18px; }
.dir .card h3 { font-size: 1.04rem; margin-bottom: 4px; }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th, table.data td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th { background: var(--mist); font-weight: 800; white-space: nowrap; }
table.data td { overflow-wrap: break-word; }
table.data td a[href^="mailto:"] { overflow-wrap: anywhere; }      /* long addresses only */
table.data td.acts { min-width: 0; }
table.data .acts-in { display: flex; flex-wrap: wrap; gap: 6px; width: 290px; }
table.data .acts-in .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 720px) {
  table.data.stack thead { display: none; }
  table.data.stack, table.data.stack tbody, table.data.stack tr, table.data.stack td { display: block; width: 100%; }
  table.data.stack tr { border-bottom: 1px solid var(--line); padding: 10px 4px; }
  table.data.stack td { border: 0; padding: 4px 10px; min-width: 0; }
  table.data.stack td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
  table.data.stack .acts-in { width: auto; }
}
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 720px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.tile .v { font-size: 1.6rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.tile .l { color: var(--muted); font-weight: 700; font-size: .85rem; }
.loading { color: var(--muted); display: flex; align-items: center; gap: 10px; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* final cta */
.cta { text-align: center; padding: 88px 0; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.84); max-width: 36em; margin: 0 auto 26px; }
.cta .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* social */
.social { display: flex; flex-wrap: wrap; gap: 10px; }
.social a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 800; font-size: .95rem;
}
.social a svg { width: 22px; height: 22px; flex: none; }
.social .linkedin svg { color: #0a66c2; }
.social .facebook svg { color: #1877f2; }
.social .youtube svg { color: #ff0000; }
.social .instagram svg { color: #d6249f; }
@media (prefers-color-scheme: dark) { .social .linkedin svg { color: #70b5f9; } }

/* footer */
.site-footer { background: var(--navy-ink); color: rgba(255,255,255,.76); padding: 44px 0 30px; font-size: .92rem; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.footer-grid h2 { color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li a { display: inline-block; padding: 8px 0; text-decoration: none; color: rgba(255,255,255,.86); }
@media (hover: hover) { .footer-grid li a:hover { color: #fff; text-decoration: underline; } }
.footer-brand { display: flex; gap: 12px; align-items: flex-start; }
.footer-brand img { width: 46px; height: 46px; border-radius: 50%; background: #fff; padding: 3px; flex: none; }
.footer-brand p { margin: 0; }
.footer-social { display: flex; gap: 8px; margin-top: 14px; }
.footer-social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.footer-social svg { width: 20px; height: 20px; color: #fff; }
@media (hover: hover) { .footer-social a:hover { background: rgba(255,255,255,.18); } }
.footer-bottom a { display: inline-block; padding: 10px 0; }
.footer-bottom .legal { display: flex; flex-wrap: wrap; column-gap: 18px; }     /* no separator left dangling when the row wraps */
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 30px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- feedback: the Σχόλια page and the admin inbox ---------- */
.fb-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .fb-grid { grid-template-columns: minmax(0, 1fr); } }
.fb-signin { max-width: 680px; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-kinds legend { margin-bottom: 4px; }
.fb-kind { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--field-line); border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .95rem; }
.fb-kind input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.fb-kind:has(input:checked) { border-color: var(--navy); background: var(--mist); }
.fb-kind:focus-within { box-shadow: 0 0 0 3px var(--gold-soft); }
.fb-drop { border: 1.5px dashed var(--field-line); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.fb-drop.over { border-color: var(--navy); background: var(--mist); }
.fb-drop > p:first-child { margin: 0; font-size: .95rem; }
.fb-pick { position: relative; display: inline; cursor: pointer; }
.fb-pick input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.fb-pick:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.fb-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.fb-thumbs:not(:empty) { margin-top: 12px; }
.fb-thumb { position: relative; margin: 0; display: block; width: 116px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--mist); }
.fb-thumb img, .fb-thumb a { display: block; width: 100%; height: 100%; }
.fb-thumb img { object-fit: cover; }
.fb-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(4, 12, 24, .72); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.fb-working { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .9rem; }
.fb-mail { margin: 0; font-size: .92rem; overflow-wrap: anywhere; }
.afb-close .muted, .fb-thanks p { overflow-wrap: anywhere; }
.fb-ticket { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fb-ticket code { font-size: 1.35rem; font-weight: 800; letter-spacing: .04em; padding: 6px 12px; border-radius: 10px; background: var(--mist); }
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fb-item { border-top: 1px solid var(--line); padding-top: 14px; }
.fb-item:first-child { border-top: 0; padding-top: 0; }
.fb-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fb-item-head code { font-weight: 800; }
.fb-meta { margin: 4px 0 6px; font-size: .85rem; }
.fb-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.fb-answer { background: var(--ok-soft); border-radius: 10px; padding: 10px 14px; margin-top: 8px; }
.fb-answer p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.afb { padding-top: 0; }
.afb h2:focus { outline: none; }
.afb-card { margin-bottom: 16px; }
.afb-from, .afb-page { margin: 8px 0 0; overflow-wrap: anywhere; font-size: .95rem; }
.afb-card .fb-thumbs { margin-top: 12px; }
.afb-mail { font-size: .88rem; margin: 8px 0 0; }
.afb-actions { margin-top: 12px; }
.afb-close { margin-top: 12px; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  section { padding: 54px 0; }
  section.tight { padding: 40px 0; }
  .cta { padding: 60px 0; }
  .section-head { margin-bottom: 24px; }
  .card { padding: 20px 18px; }
  .panel { padding: 18px 16px; }
  .stat { padding: 18px 14px; }
  .stat .value { font-size: 1.7rem; }
}

/* ---- motion: numbers that count up, blocks that rise into view, and the
   "back to top" button (all driven by site.js; none of it when the reader
   asks for less motion, and everything is visible without JavaScript) ----
   A number waits, invisible, for site.js to start it from zero, so it is never
   seen at its final value first. If site.js never comes, it shows itself after
   two seconds anyway. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-count]:not(.is-counting) { opacity: 0; animation: semfe-show 0s linear 2s forwards; }
  /* hidden at once (no fade OUT), only the arrival is animated */
  .reveal { opacity: 0; transform: translateY(26px); }
  .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .75s cubic-bezier(.22, .9, .3, 1); }
}
@keyframes semfe-show { to { opacity: 1; } }
[data-glide-focus]:focus { outline: none; }
.to-top {
  position: fixed; right: 18px; bottom: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 55;
  width: 46px; height: 46px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; border: 2px solid rgba(227,169,56,.75); background: #0a2240; color: #fff;
  box-shadow: 0 10px 26px rgba(3, 12, 26, .32); --focus: #e3a938;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
.to-top svg { width: 22px; height: 22px; }
@media (hover: hover) { .to-top:hover { background: #12355b; } }
body.modal-open .to-top { display: none; }

/* ---- «Στατιστικά» (analytics/, assets/js/analytics-page.js) --------------
   One hue for every mark (--chart, a brighter blue in dark mode): each
   chart shows one measure, so colour never has to tell series apart. Text
   stays in the text colours; marks are thin, rounded at the data end and
   square at the baseline; grid lines recede. */
.an { display: grid; gap: 56px; }
.an-part > h2 { margin: 0 0 10px; }
.an-lead { color: var(--muted); max-width: 820px; margin: 0 0 16px; }
.an-range { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.an-period { color: var(--muted); font-size: .9rem; font-weight: 600; margin: 0 0 16px; }
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
@media (max-width: 760px) { .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; }
.an-kpi .value { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.an-kpi .label { color: var(--muted); font-weight: 600; font-size: .88rem; margin-top: 6px; line-height: 1.35; }
.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .an-grid { grid-template-columns: minmax(0, 1fr); } }
.an-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); min-width: 0; }
.an-card.an-wide { grid-column: 1 / -1; }
.an-card h3 { margin: 0 0 4px; font-size: 1.08rem; }
.an-sub { color: var(--muted); font-size: .86rem; margin: 0 0 14px; line-height: 1.45; }
.an-empty { color: var(--muted); font-size: .92rem; margin: 0; }
.an-scroll { width: 100%; overflow-x: auto; }
table.an-bars { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.an-bars th { text-align: left; font-weight: 600; padding: 7px 12px 7px 0; width: 46%; vertical-align: middle; overflow-wrap: break-word; hyphens: auto; line-height: 1.3; }
@media (max-width: 480px) { table.an-bars th { width: 54%; font-size: .88rem; } .an-card { padding: 18px 16px; } }
table.an-bars td { padding: 7px 0; vertical-align: middle; }
table.an-bars tr + tr > * { border-top: 1px solid var(--line); }
table.an-bars tr.an-other th { color: var(--muted); font-weight: 500; font-style: italic; }
.an-barwrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.an-bar { display: block; height: 10px; border-radius: 0 4px 4px 0; background: var(--chart); flex: none; }
tr.an-other .an-bar { background: var(--muted); }
.an-n { font-weight: 800; font-variant-numeric: tabular-nums; }
.an-pct { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.an-chart { position: relative; width: 100%; min-height: 40px; }
.an-chart svg { display: block; max-width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.an-chart svg text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.an-gridline { stroke: var(--line); stroke-width: 1; }
.an-baseline { stroke: var(--field-line); stroke-width: 1; }
.an-col { fill: var(--chart); }
.an-col.is-on { opacity: .72; }
.an-hit { fill: transparent; cursor: default; }

.an-line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.an-area { fill: var(--chart); opacity: .12; }
.an-cross { stroke: var(--muted); stroke-width: 1; }
.an-dot { fill: var(--chart); stroke: var(--surface); stroke-width: 2; }
.an-line-svg:focus, .an-cols-svg:focus { outline: none; }
.an-line-svg:focus-visible, .an-cols-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.an-tip { position: fixed; z-index: 60; pointer-events: none; max-width: 260px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 11px; font-size: .84rem; line-height: 1.4; }
.an-tip strong { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; }
.an-tip span { display: block; color: var(--muted); }
.an-numbers { margin-top: 4px; font-size: .9rem; }
.an-numbers summary { cursor: pointer; color: var(--navy); font-weight: 700; padding: 9px 0; }
.an-numbers table.data { margin-top: 8px; }
@media print { .an-range, .an-tip { display: none !important; } .an-numbers { display: none; } .an-card { break-inside: avoid; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .acct-slot, .skip, .cta, .lightbox, .modal-backdrop, .to-top { display: none !important; }
  .reveal, [data-count] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .hero-stat { background: none !important; border-color: #999 !important; }
  .hero, .page-hero { background: none !important; color: #000 !important; padding: 12px 0 !important; }
  .hero *, .page-hero * { color: #000 !important; }
  /* dark bands print as white paper: their light text must turn dark too, and
     shadows would print as grey smudges */
  section.dark, .milestones { background: none !important; }
  section.dark, section.dark *, .milestones, .milestones * { color: #000 !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
  section { padding: 16px 0 !important; }
  body { font-size: 12pt; background: #fff; color: #000; }
}