/* ==========================================================================
   alexanderk.dev — styles
   Monospace "docs" look in Fira Code. Light or dark mode, colored with Tango,
   the default palette of GNOME and most Linux desktops and terminals.

   1. Tokens        colors, spacing, type, radius (light + dark)
   2. Base          reset, body, links, focus, utilities
   3. Layout        page widths, header, footer
   4. Components    buttons, hero, pill, chips, cards, grids, sections
   5. Content       entries (About), prose (README + posts), posts list
   6. Stats page
   7. Phones
   ========================================================================== */


/* ---------- 1. Tokens ---------- */
:root {
  /* colors (light): GNOME Terminal's "Tango Light", darkest Tango shades for
     color. Every text color passes WCAG AA on every surface it sits on. */
  --bg: #eeeeec;              /* aluminium 1 */
  --text: #2e3436;            /* aluminium 6 */
  --muted: #555753;           /* aluminium 5 */
  --border: #d3d7cf;          /* aluminium 2 */
  --card: rgba(255, 255, 255, 0.6);
  --soft: #ffffff;            /* secondary buttons, code, bar tracks, pills */
  --link: #204a87;            /* sky blue 3: links, focus ring, hovers */
  --label: #8f5902;           /* chocolate 3: eyebrows, taglines, company names */
  --mark: #4e9a06;            /* chameleon 3: bullets, quote bars */
  --star: #ce5c00;            /* orange 3: GitHub stars */
  /* code highlighting: only Tango shades that pass AA on the code background */
  --code-keyword: #204a87;    /* sky blue 3 */
  --code-string: #75507b;     /* plum 2 */
  --code-number: #cc0000;     /* scarlet red 2 */
  --code-function: #8f5902;   /* chocolate 3 */
  color-scheme: light;

  /* spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 80px;
  --space-11: 96px;

  /* type scale */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 48px;

  /* radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --font: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --header-height: 46px;
}

/* Dark colors, used when the visitor turns dark mode on (js/theme.js puts
   .dark on <html>). The site starts light for everyone, including with
   JavaScript off. */
:root.dark {
  --bg: #2e3436;              /* GNOME Terminal's "Tango Dark" */
  --text: #eeeeec;
  --muted: #babdb6;           /* aluminium 3 */
  --border: #555753;
  --card: rgba(255, 255, 255, 0.04);
  --soft: rgba(255, 255, 255, 0.07);
  --link: #729fcf;            /* sky blue 1 */
  --label: #e9b96e;           /* chocolate 1 */
  --mark: #8ae234;            /* chameleon 1 */
  --star: #fce94f;            /* butter 1 */
  --code-keyword: #fcaf3e;    /* orange 1 */
  --code-string: #8ae234;     /* chameleon 1 */
  --code-number: #fce94f;     /* butter 1 */
  --code-function: #e9b96e;   /* chocolate 1 */
  color-scheme: dark;
}


/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--header-height) + var(--space-6)); }   /* #links don't hide under the sticky header */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* One clear focus ring for keyboard users, everywhere */
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Inline code, wherever it appears */
code { font-family: inherit; font-size: 0.9em; }
:not(pre) > code { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--soft); }

.muted { color: var(--muted); }

/* Hidden on screen, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Skip to content": the first thing a keyboard user reaches */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 20;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  font-size: var(--fs-sm);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }   /* the skip link moves focus here; no ring needed */


/* ---------- 3. Layout ---------- */
.wrap   { max-width: 900px; margin: 0 auto; padding: 0 var(--space-5); }
.narrow { max-width: 680px; margin: 0 auto; padding: 0 var(--space-5); }

/* Header: sticky and slightly see-through */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--space-4); height: var(--header-height); }
.site-header .name { color: var(--text); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.site-nav { display: flex; gap: var(--space-1); margin: 0 auto; min-width: 0; }
.site-nav a { padding: 6px var(--space-3); border-radius: var(--radius); color: var(--muted); font-size: var(--fs-md); white-space: nowrap; }
.site-nav a:hover { color: var(--text); background: var(--soft); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--text); }
/* Private tab: only when logged in (js/signed-in.js); "Log in" hides then */
.nav-private, :root.signed-in .login-link { display: none; }
:root.signed-in .nav-private { display: inline-block; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Theme toggle: the sun shows in light mode, the moon in dark mode */
.icon-moon { display: none; }
:root.dark .icon-sun { display: none; }
:root.dark .icon-moon { display: inline; }

.site-footer { padding: var(--space-7) 0; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-xs); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.site-footer a { color: var(--muted); }
.footer-links { display: flex; gap: var(--space-4); padding: 0; list-style: none; }


/* ---------- 4. Components ---------- */
/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.btn:hover { color: var(--text); text-decoration: none; }
.btn.primary { background: transparent; border-color: var(--text); color: var(--text); }
.btn.primary:hover { background: var(--text); color: var(--bg); }
.btn.small { padding: var(--space-1) 10px; font-size: var(--fs-xs); }
.btn[aria-pressed="true"] { background: transparent; border-color: var(--text); color: var(--text); }
.icon-btn { display: inline-flex; padding: 6px; border: 0; background: none; color: var(--text); cursor: pointer; }
.icon-btn svg { width: 14px; height: 14px; }

/* Hero: the centered intro at the top of every page */
.hero { padding: var(--space-11) 0 72px; text-align: center; }
.eyebrow { color: var(--label); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.hero h1 { margin: var(--space-4) 0 6px; font-size: var(--fs-3xl); line-height: 1.1; letter-spacing: -0.025em; }
.tagline { color: var(--label); font-size: var(--fs-md); }
.lead { max-width: 560px; margin: 28px auto 0; color: var(--muted); line-height: 1.6; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--space-7); }

/* Pill for live GitHub stats */
.pill {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-1) 10px;
  margin-top: 14px;
  padding: var(--space-1) 14px;
  border: 1px solid var(--border);
  border-radius: var(--space-4);      /* not fully round, so it still looks right if it wraps */
  background: var(--soft);
  color: var(--muted);
  font-size: var(--fs-xs);
}
.pill > span { white-space: nowrap; }
.pill b { color: var(--text); font-weight: 500; }
.star { color: var(--star); }
/* A language name gets a dot in its Tango color (set by js/github.js) */
[data-field="language"][style*="--lang"]::before {
  content: "";
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: var(--lang);
}
.pill .sep { width: 1px; height: 12px; background: var(--border); }

/* Chips (tags) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.hero .chips { justify-content: center; }
.chip { padding: 2px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); font-size: var(--fs-2xs); }

/* Dates: "Jan 2025 – Present" */
.when { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }

/* Sections: full-width rule, then a title */
.section { padding: var(--space-10) 0; border-top: 1px solid var(--border); }
.section-title { margin-bottom: var(--space-3); font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -0.025em; }
.section-intro { margin-bottom: 36px; color: var(--muted); }

/* Grids of cards. min() keeps columns from ever being wider than the screen. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.grid.two { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }

.card {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.card-label { color: var(--label); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.card-title { font-size: var(--fs-md); font-weight: 500; }
.card-text { margin-top: 6px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; }

/* Project cards: the title is the link, stretched over the whole card.
   Each card spans 4 rows of the grid (head, stats, text, tags) through subgrid,
   so every part lines up across a row. */
.project {
  position: relative;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: var(--space-5);
}
.project:hover { border-color: var(--link); }
.project:has(.card-link:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
/* The date always sits top-right; a long title wraps beside it instead of pushing the date down */
.card-head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 var(--space-3); }
.project .card-title { font-size: var(--fs-base); font-weight: 600; }
.project .card-text { font-size: var(--fs-sm); }
.project .when { font-size: var(--fs-xs); }
.project .pill { justify-self: start; margin: var(--space-4) 0 var(--space-1); }
.project .chips { align-self: start; margin-top: 0; padding-top: 14px; }
.card-link { color: var(--text); }
.card-link:hover { text-decoration: none; }
.card-link:focus-visible { outline: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }   /* makes the whole card clickable */


/* ---------- 5. Content ---------- */
/* Experience / education entries (About page) */
.entry + .entry { margin-top: var(--space-8); }
.entry-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-4); }
.entry-title { font-size: var(--fs-base); font-weight: 600; }
.entry-where { margin-top: 2px; color: var(--label); font-size: var(--fs-sm); }
.entry ul { margin-top: var(--space-3); padding-left: 0; list-style: none; }
.entry li { position: relative; padding-left: var(--space-5); color: var(--muted); font-size: var(--fs-md); line-height: 1.6; }
.entry li + li { margin-top: var(--space-2); }
.entry li::before { content: "›"; position: absolute; left: var(--space-1); color: var(--mark); }

/* Long-form text: blog posts and READMEs (.prose), plus GitHub-only bits (.readme) */
.prose { font-size: 15px; line-height: 1.7; overflow-wrap: break-word; }   /* posts and walkthroughs */
.prose > * + * { margin-top: 14px; }
.prose > :first-child { margin-top: 0; }
.prose :is(h1, h2, h3, h4, h5, h6) { margin: 28px 0 var(--space-2); font-size: var(--fs-lg); letter-spacing: -0.01em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose pre { overflow-x: auto; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--soft); font-size: var(--fs-sm); }
/* Code highlighting: Prism's classes (walkthroughs, posts) and GitHub's (READMEs) */
.token.comment, .token.prolog, .token.doctype, .pl-c { color: var(--muted); font-style: italic; }
.token.keyword, .token.atrule, .token.selector, .token.tag, .pl-k { color: var(--code-keyword); }
.token.string, .token.char, .token.attr-value, .token.regex, .pl-s { color: var(--code-string); }
.token.number, .token.boolean, .token.constant, .token.property, .pl-c1 { color: var(--code-number); }
.token.function, .token.class-name, .token.attr-name, .token.builtin, .pl-en, .pl-smi { color: var(--code-function); }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-sm); }   /* wide tables scroll in place */
.prose th { color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-align: left; }
.prose th, .prose td { padding: var(--space-2) 14px var(--space-2) 0; border-bottom: 1px solid var(--border); }
.prose blockquote { margin-inline: 0; margin-bottom: 0; padding-left: var(--space-4); border-left: 3px solid var(--mark); color: var(--muted); }

.readme { margin-top: var(--space-6); font-size: var(--fs-md); }   /* READMEs are a size smaller */
.readme .anchor { display: none; }                        /* GitHub's link icons next to headings */
.readme .markdown-heading:first-child > *, .readme .markdown-body > :first-child { margin-top: 0; }

/* Research: each post is a preview card, image left and text right (stacked on phones).
   The image has a light and a dark version; only the one for the current theme shows. */
.posts { display: grid; gap: var(--space-5); padding: 0; list-style: none; }
.post-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--text);
}
.post-card:not(:has(.post-thumb)) { grid-template-columns: 1fr; }   /* a post without an image */
.post-card:hover { border-color: var(--link); text-decoration: none; }
.post-card:hover .post-title { color: var(--link); }
.post-thumb { min-height: 190px; border-right: 1px solid var(--border); background: var(--soft); }   /* fills the card's height */
.post-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-thumb .thumb-dark, :root.dark .post-thumb .thumb-light { display: none; }
:root.dark .post-thumb .thumb-dark { display: block; }
.post-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.post-body time { color: var(--muted); font-size: var(--fs-xs); }
.post-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; }
.post-summary { color: var(--muted); font-size: var(--fs-sm); }
.post-body .chips { margin-top: auto; padding-top: var(--space-2); }
.empty { padding: var(--space-7); border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted); font-size: var(--fs-md); text-align: center; }


/* Login form (login.html) */
.login-form { display: grid; gap: var(--space-2); max-width: 320px; margin: var(--space-7) auto 0; text-align: left; }
.login-form label { margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-sm); }
.login-form input { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--soft); color: var(--text); font: inherit; }
.login-form input:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.login-form button { justify-self: start; margin-top: var(--space-4); }
.login-error { padding: var(--space-3); border: 1px solid var(--code-number); border-radius: var(--radius); color: var(--code-number); font-size: var(--fs-sm); }


/* Embedded video: full width, always 16:9 */
.video { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--soft); }
.video iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-link { margin-top: var(--space-3); font-size: var(--fs-sm); }


/* ---------- 6. Stats page ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.stat { display: flex; flex-direction: column-reverse; padding: var(--space-5) var(--space-4); text-align: center; }   /* <dt> label below its <dd> number */
.stat-value { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.025em; }
.stat-label { margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); }
.highlights { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-7); margin-top: var(--space-6); font-size: var(--fs-md); }

.toggle { display: inline-flex; gap: 6px; margin-bottom: var(--space-6); }

/* Language bars: name | bar | value */
.bar-row { display: grid; grid-template-columns: 130px 1fr 110px; align-items: center; gap: 14px; font-size: var(--fs-sm); }
.bar-row + .bar-row { margin-top: 10px; }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 10px; border-radius: var(--radius-pill); background: var(--soft); }
.bar { height: 100%; border-radius: var(--radius-pill); background: var(--lang, var(--muted)); }   /* the language's Tango color */
.bar-value { color: var(--muted); text-align: right; }

.activity-summary { font-size: var(--fs-md); }
.latest { margin-top: var(--space-5); padding: 0; list-style: none; font-size: var(--fs-sm); }
.latest li { padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.latest code { font-size: var(--fs-xs); }


/* ---------- 7. Phones ---------- */
/* Tablets and small laptops: drop the name from the header so the nav and
   the LinkedIn / GitHub buttons fit (every page already shows the name big) */
@media (max-width: 820px) {
  .site-header .name { display: none; }
  .site-nav { margin: 0 auto 0 0; }
}

@media (max-width: 640px) {
  .header-actions .btn { display: none; }      /* LinkedIn and GitHub are still in the footer */
  .site-nav { gap: 0; }
  .site-nav a { padding: 6px var(--space-2); }
  .hero { padding: 64px 0 48px; }
  .hero h1 { font-size: 34px; }
  .section { padding: var(--space-9) 0; }
  .section-title { font-size: var(--fs-xl); }
  .post-card { grid-template-columns: 1fr; }
  .post-thumb { min-height: 0; aspect-ratio: 1200 / 630; border-right: 0; border-bottom: 1px solid var(--border); }
  .bar-row { grid-template-columns: 90px 1fr 80px; gap: 10px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* no lonely half-width tile at the end */
}

/* The smallest phones (iPhone SE and similar): tighten the header so it fits */
@media (max-width: 420px) {
  .wrap, .narrow { padding: 0 var(--space-4); }
  .site-header .wrap { gap: var(--space-2); }
  .site-nav a { padding: 6px; font-size: 12.5px; }
}

/* The narrowest phones (320–360px, e.g. iPhone SE): smaller nav text so
   "GitHub Stats" still fits. If a screen is ever narrower still, the nav
   scrolls sideways on its own instead of pushing the page wider. */
@media (max-width: 360px) {
  .wrap, .narrow { padding: 0 var(--space-3); }
  .site-nav a { padding: 6px var(--space-1); font-size: 11.5px; }
}
/* Signed in there's a fifth tab (Private), so make room. The public header is unchanged. */
@media (max-width: 1000px) {
  :root.signed-in .nav-long { display: none; }    /* "GitHub Stats" becomes "Stats" */
}
@media (max-width: 720px) {
  :root.signed-in .header-actions .btn { display: none; }   /* LinkedIn and GitHub are in the footer */
}
@media (max-width: 480px) {
  :root.signed-in .site-nav a { padding: 6px 5px; font-size: 12px; }
}
@media (max-width: 360px) {
  :root.signed-in .site-nav a { padding: 6px 3px; font-size: 11px; }
}
.site-nav { overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }