/* ==========================================================================
   kuhnchris.eu — dark navy / lightblue / skyblue
   Layered on top of hugo-profile. Loaded last, so it wins.
   ========================================================================== */

/* ---------- Palette tokens ---------- */
:root {
  --ki-bg:            #0a0f1c;
  --ki-bg-alt:        #0d1424;
  --ki-surface:       #111a2e;
  --ki-surface-2:     #16223c;
  --ki-border:        #1e2f4d;
  --ki-border-soft:   #17253f;

  --ki-text:          #dce7f5;
  --ki-text-dim:      #8296b3;
  --ki-text-faint:    #5b6d8a;

  --ki-sky:           #38bdf8;   /* primary accent */
  --ki-sky-soft:      #7dd3fc;   /* light accent   */
  --ki-sky-deep:      #0ea5e9;
  --ki-sky-glow:      rgba(56, 189, 248, .18);

  --ki-light-blue:    #7cb8f0;
  --ki-mp:            #60a5fa;   /* MP = blue  */
  --ki-hp:            #34d399;   /* HP = green */
  --ki-xp:            #a78bfa;   /* XP = violet */

  --ki-radius:        10px;
  --ki-radius-sm:     6px;
  --ki-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ki-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ki-max-w: 1080px;
}

/* The theme toggles .dark / .light on <html> and <body>. Drive our palette off that.
   NOTE: the light palette is the override here; the dark tokens above are the default,
   so a body with no class (or .dark) still renders dark. */
body.light {
  --ki-bg:            #f2f7fc;
  --ki-bg-alt:        #e8f1fa;
  --ki-surface:       #ffffff;
  --ki-surface-2:     #eef6ff;
  --ki-border:        #c8ddF0;
  --ki-border-soft:   #dcebf8;

  --ki-text:          #0d1b2e;
  --ki-text-dim:      #4a6285;
  --ki-text-faint:    #7791b0;

  --ki-sky:           #0284c7;
  --ki-sky-soft:      #0369a1;
  --ki-sky-deep:      #075985;
  --ki-sky-glow:      rgba(2, 132, 199, .14);

  --ki-light-blue:    #1d6fa5;
  --ki-mp:            #2563eb;
  --ki-hp:            #059669;
  --ki-xp:            #7c3aed;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  background: var(--ki-bg) !important;
  color: var(--ki-text) !important;
  font-family: var(--ki-sans);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#content { flex: 1 0 auto; }

a { color: var(--ki-sky); text-decoration: none; }
a:hover { color: var(--ki-sky-soft); text-decoration: underline; }

::selection { background: var(--ki-sky); color: #04101d; }

:focus-visible {
  outline: 2px solid var(--ki-sky);
  outline-offset: 2px;
}

/* Subtle top glow so the dark page isn't flat */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 340px;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, var(--ki-sky-glow), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

#content, header.ki-header, footer { position: relative; z-index: 1; }

/* ==========================================================================
   KeepIt-style menu bar
   ========================================================================== */
.ki-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ki-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ki-border-soft);
  font-family: var(--ki-sans);
}

.ki-header-inner {
  max-width: var(--ki-max-w);
  margin: 0 auto;
  padding: 0.7rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ki-title {
  font-family: var(--ki-mono);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ki-text) !important;
  text-decoration: none !important;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.ki-title:hover { color: var(--ki-sky) !important; }

.ki-title-name::before { content: "~"; color: var(--ki-sky); margin-right: .15rem; }

.ki-menu { margin-left: auto; }

.ki-menu-list {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ki-menu-item {
  display: inline-block;
  padding: .32rem .68rem;
  border-radius: var(--ki-radius-sm);
  font-family: var(--ki-mono);
  font-size: .88rem;
  color: var(--ki-text-dim) !important;
  text-decoration: none !important;
  transition: color .15s, background .15s;
}
.ki-menu-item:hover {
  color: var(--ki-sky-soft) !important;
  background: var(--ki-surface-2);
  text-decoration: none !important;
}
.ki-menu-item.active {
  color: var(--ki-sky) !important;
  background: var(--ki-sky-glow);
}

.ki-tools {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: .5rem;
  padding-left: .6rem;
  border-left: 1px solid var(--ki-border-soft);
}

.ki-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 0; border-radius: var(--ki-radius-sm);
  background: transparent;
  color: var(--ki-text-dim);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.ki-tool:hover { color: var(--ki-sky); background: var(--ki-surface-2); }

/* The upstream theme also styles #sun/#moon with `body.dark #moon` and
   `body:not(.dark) #sun`, which outranks a bare id selector and left BOTH icons
   hidden in dark mode (an empty button rendered as a stray dark square).
   Match its specificity and load later, so exactly one icon shows. */
body.dark #sun,
body:not(.dark) #moon {
  display: block;
}
body.dark #moon,
body:not(.dark) #sun {
  display: none;
}

.ki-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 30px; height: 30px;
  border: 0; border-radius: var(--ki-radius-sm);
  background: transparent; cursor: pointer;
  padding: 0 6px;
}
.ki-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--ki-text-dim);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.ki-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ki-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ki-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.ki-search {
  max-width: var(--ki-max-w);
  margin: 0 auto;
  padding: 0 1.1rem .8rem;
}
.ki-search input {
  width: 100%;
  padding: .5rem .8rem;
  font-family: var(--ki-mono);
  font-size: .9rem;
  color: var(--ki-text);
  background: var(--ki-surface);
  border: 1px solid var(--ki-border);
  border-radius: var(--ki-radius-sm);
}

@media (max-width: 719px) {
  .ki-toggle { display: flex; order: 3; }
  .ki-tools { order: 2; margin-left: auto; border-left: 0; padding-left: 0; }
  .ki-menu {
    order: 4;
    flex-basis: 100%;
    margin-left: 0;
    /* collapsed until the hamburger is tapped (toggles .is-open from JS) */
    display: none;
  }
  .ki-menu.is-open { display: block; }
  .ki-header-inner { flex-wrap: wrap; }
  .ki-menu-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: .4rem;
  }
  .ki-menu-item { display: block; }
}

/* ==========================================================================
   Stat bars  (shared by sheet, skills, shortcodes)
   ========================================================================== */
.stat-track {
  position: relative;
  display: block;
  flex: 1 1 auto;
  height: 9px;
  min-width: 40px;
  background: var(--ki-surface-2);
  border: 1px solid var(--ki-border-soft);
  border-radius: 999px;
  overflow: hidden;
}

.stat-lg { height: 11px; }

.stat-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ki-sky-deep), var(--ki-sky-soft));
  box-shadow: 0 0 10px var(--ki-sky-glow);
  /* animate in on load */
  animation: ki-fill .9s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes ki-fill {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@media (prefers-reduced-motion: reduce) {
  .stat-fill { animation: none; }
  html { scroll-behavior: auto; }
}

.stat-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--ki-mono);
  font-size: .85rem;
  margin: .4rem 0;
}
.stat-label { min-width: 6rem; color: var(--ki-text-dim); }
.stat-value { color: var(--ki-sky); font-variant-numeric: tabular-nums; min-width: 2.2rem; text-align: right; }

.stat-hp    .stat-fill { background: linear-gradient(90deg, #059669, var(--ki-hp)); box-shadow: 0 0 10px rgba(52,211,153,.18); }
.stat-mp    .stat-fill { background: linear-gradient(90deg, #1d4ed8, var(--ki-mp)); box-shadow: 0 0 10px rgba(96,165,250,.18); }
.stat-xp    .stat-fill { background: linear-gradient(90deg, #6d28d9, var(--ki-xp)); box-shadow: 0 0 10px rgba(167,139,250,.18); }

/* ==========================================================================
   XP bar
   ========================================================================== */
.xp-block { margin: 1.1rem 0 .4rem; font-family: var(--ki-mono); }

.xp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .78rem;
  margin-bottom: .3rem;
}
.xp-level {
  color: var(--ki-xp);
  font-weight: 700;
  letter-spacing: .08em;
}
.xp-num { color: var(--ki-text-faint); font-variant-numeric: tabular-nums; }

.xp-track {
  display: block;
  height: 12px;
  background: var(--ki-surface-2);
  border: 1px solid var(--ki-border-soft);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
/* segment ticks, like a JRPG bar */
.xp-track::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 24px, var(--ki-bg) 24px 25px);
  opacity: .35;
  pointer-events: none;
}
.xp-fill {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6d28d9, var(--ki-xp) 70%, #c4b5fd);
  box-shadow: 0 0 12px rgba(167,139,250,.25);
  animation: ki-fill 1.1s cubic-bezier(.22,.61,.36,1) both;
}

/* ==========================================================================
   Character sheet
   ========================================================================== */
#character-sheet { padding-bottom: 1rem; }

.sheet-kicker {
  font-family: var(--ki-mono);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ki-sky);
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.sheet-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ki-border), transparent);
}

.sheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 1.2rem;
}
@media (max-width: 860px) {
  .sheet-grid { grid-template-columns: 1fr; }
}

.sheet-identity,
.sheet-attributes,
.sheet-skills {
  background: linear-gradient(180deg, var(--ki-surface), var(--ki-bg-alt));
  border: 1px solid var(--ki-border);
  border-radius: var(--ki-radius);
  padding: 1.1rem 1.2rem;
}

.sheet-identity { position: relative; overflow: hidden; }
.sheet-identity::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ki-sky), var(--ki-sky-soft), transparent);
}

.sheet-name {
  font-family: var(--ki-mono);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ki-text) !important;
  margin: 0 0 .2rem;
  letter-spacing: -.01em;
}
.sheet-title {
  font-size: .85rem;
  color: var(--ki-sky-soft);
  margin-bottom: .9rem;
}

.sheet-meta { margin: 0 0 .3rem; font-family: var(--ki-mono); font-size: .8rem; }
.sheet-meta > div {
  display: flex;
  gap: .5rem;
  padding: .18rem 0;
  border-bottom: 1px dashed var(--ki-border-soft);
}
.sheet-meta dt {
  color: var(--ki-text-faint);
  margin: 0;
  min-width: 5.4rem;
  cursor: help;
}
.sheet-meta dd { margin: 0; color: var(--ki-text); }

.vitals { display: grid; gap: .45rem; margin-top: .9rem; }
.vital {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ki-mono);
  font-size: .78rem;
}
/* The label and the value are FIXED width, and the track grows from a zero basis.
   With auto-width values, HP's "138/150" is wider than MP's "26/50", so HP's bar
   got less free space and the two tracks came out different lengths. Pinning both
   ends makes every track exactly the same width regardless of the numbers. */
.vital-label {
  color: var(--ki-text-dim);
  flex: 0 0 1.6rem;
  width: 1.6rem;
}
.vital-num {
  color: var(--ki-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex: 0 0 5.4rem;
  width: 5.4rem;
}
.vital .stat-track { flex: 1 1 0; }
.vital-max { color: var(--ki-text-faint); font-size: .85em; }

.vital-hp .stat-fill { background: linear-gradient(90deg, #059669, var(--ki-hp)); box-shadow: 0 0 10px rgba(52,211,153,.2); }
.vital-mp .stat-fill { background: linear-gradient(90deg, #1d4ed8, var(--ki-mp)); box-shadow: 0 0 10px rgba(96,165,250,.2); }

.sheet-h3 {
  font-family: var(--ki-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ki-text-faint);
  margin: 0 0 .8rem;
  font-weight: 600;
}

.attr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .9rem 1.3rem;
}

.attr-head {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-family: var(--ki-mono);
  font-size: .8rem;
  margin-bottom: .25rem;
}
.attr-abbr {
  font-weight: 700;
  color: var(--ki-sky);
  min-width: 2.6rem;
}
.attr-label { color: var(--ki-text); }
.attr-num {
  margin-left: auto;
  color: var(--ki-text-dim);
  font-variant-numeric: tabular-nums;
}
.attr-note {
  display: block;
  margin-top: .28rem;
  font-size: .7rem;
  color: var(--ki-text-faint);
  line-height: 1.35;
}

/* Skill panels and rows are defined once, further down, in the shared
   ".skill-panels / .skill-panel / .skill-row" block. */

/* ==========================================================================
   Hero
   ========================================================================== */
#hero .subtitle {
  font-family: var(--ki-mono);
  color: var(--ki-sky) !important;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
#hero h1 {
  font-family: var(--ki-mono);
  font-weight: 700;
  color: var(--ki-text) !important;
  letter-spacing: -.02em;
}
#hero h2 {
  font-family: var(--ki-sans);
  font-weight: 500;
  color: var(--ki-sky-soft) !important;
}
#hero .hero-content { color: var(--ki-text-dim) !important; max-width: 46ch; }
#hero .hero-content strong { color: var(--ki-text) !important; }
#hero img {
  border: 1px solid var(--ki-border) !important;
  background: var(--ki-surface);
  box-shadow: 0 0 0 4px var(--ki-sky-glow), 0 18px 50px rgba(0,0,0,.45);
}

.btn {
  background: var(--ki-sky) !important;
  color: #04101d !important;
  border: 1px solid var(--ki-sky) !important;
  font-family: var(--ki-mono);
  font-size: .85rem;
  border-radius: var(--ki-radius-sm);
  padding: .45rem 1rem;
}
.btn:hover {
  background: var(--ki-sky-soft) !important;
  color: #04101d !important;
  text-decoration: none;
}
.btn-outline-info, .btn-outline-info:hover {
  background: transparent !important;
  border: 1px solid var(--ki-sky) !important;
  color: var(--ki-sky) !important;
}
.social-icon {
  background: transparent !important;
  border: 1px solid var(--ki-border) !important;
  color: var(--ki-text-dim) !important;
}
.social-icon:hover { border-color: var(--ki-sky) !important; color: var(--ki-sky) !important; }

/* ==========================================================================
   Section headers
   ========================================================================== */
#about h3, #experience h3, #education h3, #projects h3, #achievements h3, #contact h3 {
  font-family: var(--ki-mono);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ki-sky) !important;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
#experience .exp-more {
  font-family: var(--ki-mono);
  font-size: .78rem;
  color: var(--ki-text-faint);
  margin: .9rem 0 0;
}
#experience .exp-more a { color: var(--ki-sky) !important; }

#about h4, #experience h4, #education h4, #projects h4, #achievements h4, #contact h4 {
  font-family: var(--ki-mono);
  color: var(--ki-text) !important;
}

.card {
  background: var(--ki-surface) !important;
  border: 1px solid var(--ki-border) !important;
  border-radius: var(--ki-radius) !important;
  color: var(--ki-text) !important;
  transition: border-color .18s, transform .18s;
}
.card:hover { border-color: var(--ki-sky) !important; }
a.card:hover { transform: translateY(-2px); }
.card-title { color: var(--ki-text) !important; font-family: var(--ki-mono); }
.card-text { color: var(--ki-text-dim) !important; }
.card-footer { background: transparent !important; border-top: 1px solid var(--ki-border-soft) !important; }
.text-secondary { color: var(--ki-text-dim) !important; }

/* ==========================================================================
   Blog — risotto-flavoured content
   ========================================================================== */
#list-page h2, .list-page-title {
  font-family: var(--ki-mono);
  color: var(--ki-sky) !important;
  letter-spacing: .04em;
}

/* Post title block.
   NOTE: the h1 carries Bootstrap's `.text-center` class, so the old rule
   `#single .title .text-center { font-size: .8rem }` was ALSO matching the h1
   itself and rendering the post title at 12.8px. Scope the meta styling to
   .post-meta only, never a descendant selector that can reach the heading. */
#single {
  padding-top: 2.5rem;
}

#single .title {
  margin-bottom: 2rem;
}

#single .title h1 {
  font-family: var(--ki-mono);
  color: var(--ki-text) !important;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: 0 0 .7rem;
  /* the upstream theme dims this to 0.8 opacity; full strength reads better
     against the dark background */
  opacity: 1;
}

#single .title .post-meta {
  font-family: var(--ki-mono);
  font-size: .8rem;
  color: var(--ki-text-faint) !important;
}

#single .featured-image img {
  border: 1px solid var(--ki-border);
  border-radius: var(--ki-radius);
}

/* Long-form post body */
.page-content {
  font-family: var(--ki-sans);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ki-text);
  max-width: 70ch;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
  font-family: var(--ki-mono);
  color: var(--ki-text) !important;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: .7rem;
  line-height: 1.3;
}

/* risotto touch: hash-prefixed headings */
.page-content h2::before { content: "## "; color: var(--ki-sky); opacity: .55; }
.page-content h3::before { content: "### "; color: var(--ki-sky); opacity: .55; }
.page-content h4::before { content: "#### "; color: var(--ki-sky); opacity: .55; }

.page-content p { margin-bottom: 1.15rem; }

.page-content a {
  color: var(--ki-sky);
  border-bottom: 1px solid var(--ki-sky-glow);
}
.page-content a:hover { color: var(--ki-sky-soft); border-bottom-color: var(--ki-sky-soft); }

.page-content ul, .page-content ol { margin-bottom: 1.15rem; padding-left: 1.4rem; }
.page-content li { margin-bottom: .35rem; }
.page-content li::marker { color: var(--ki-sky); }

.page-content blockquote {
  position: relative;
  margin: 1.4rem 0;
  padding: .1rem 0 .1rem 1.2rem;
  border-left: 2px solid var(--ki-sky);
  color: var(--ki-text-dim);
  font-style: italic;
}
.page-content blockquote p:last-child { margin-bottom: 0; }

.page-content code {
  font-family: var(--ki-mono);
  font-size: .875em;
  background: var(--ki-surface-2) !important;
  color: var(--ki-sky-soft);
  padding: .12em .38em;
  border-radius: 4px;
  border: 1px solid var(--ki-border-soft);
}

.page-content pre {
  background: var(--ki-bg-alt) !important;
  border: 1px solid var(--ki-border);
  border-radius: var(--ki-radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-size: .86rem;
  line-height: 1.6;
  margin-bottom: 1.4rem;
}
.page-content pre code {
  background: transparent !important;
  border: 0;
  padding: 0;
  color: var(--ki-text);
  font-size: inherit;
}

.page-content table {
  width: 100%;
  margin-bottom: 1.4rem;
  border-collapse: collapse;
  font-size: .92rem;
  display: block;
  overflow-x: auto;
}
.page-content th, .page-content td {
  border: 1px solid var(--ki-border);
  padding: .5rem .7rem;
  text-align: left;
}
.page-content th {
  background: var(--ki-surface);
  font-family: var(--ki-mono);
  font-size: .82rem;
  color: var(--ki-sky-soft);
}

.page-content img {
  max-width: 100%;
  border-radius: var(--ki-radius);
  border: 1px solid var(--ki-border);
}

.page-content hr {
  border: 0;
  border-top: 1px solid var(--ki-border);
  margin: 2rem 0;
}

.page-content del { color: var(--ki-text-faint); }

mark {
  background: var(--ki-sky-glow);
  color: var(--ki-text);
  padding: 0 .2em;
}

/* task lists */
.page-content input[type="checkbox"] { accent-color: var(--ki-sky); margin-right: .4rem; }
.page-content li.task-list-item { list-style: none; margin-left: -1.2rem; }

/* ---------- Sidebar: TOC + tags ---------- */
/* The sidebar column starts level with the post title, so the TOC does not
   float up next to the heading. */
#stickySideBar {
  padding-top: .4rem;
}

.sticky-sidebar .toc h5,
.sticky-sidebar .tags h5,
.sticky-sidebar .social h5 {
  font-family: var(--ki-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ki-sky) !important;
  font-weight: 600;
}

.toc-content { font-size: .84rem; font-family: var(--ki-mono); }
.toc-content a { color: var(--ki-text-dim) !important; text-decoration: none; }
.toc-content a:hover { color: var(--ki-sky) !important; }
#TableOfContents { padding-left: .8rem; border-left: 1px solid var(--ki-border-soft); }
#TableOfContents ul { list-style: none; padding-left: .7rem; margin: 0; }
#TableOfContents > ul { padding-left: 0; }
#TableOfContents li { margin: .18rem 0; }

.tags-ul { display: flex; flex-wrap: wrap; gap: .35rem; }
.tags-ul a, .tag-chip {
  display: inline-block;
  font-family: var(--ki-mono);
  font-size: .76rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: var(--ki-surface-2);
  border: 1px solid var(--ki-border);
  color: var(--ki-sky) !important;
  text-decoration: none !important;
}
.tags-ul a:hover, .tag-chip:hover {
  background: var(--ki-sky-glow);
  border-color: var(--ki-sky);
  color: var(--ki-sky-soft) !important;
}

/* ==========================================================================
   Taxonomy (tags) pages
   ========================================================================== */
.taxonomy-page h1, .term-page h1 {
  font-family: var(--ki-mono);
  color: var(--ki-sky) !important;
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin: 1.5rem 0 2rem;
}
.tag-cloud .tag-chip { font-size: .85rem; padding: .3rem .7rem; }
.tag-cloud .tag-chip .count { color: var(--ki-text-faint); margin-left: .35rem; font-size: .78em; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  background: var(--ki-bg-alt) !important;
  border-top: 1px solid var(--ki-border-soft);
  margin-top: 3rem;
  font-family: var(--ki-mono);
  font-size: .82rem;
}
footer a { color: var(--ki-sky) !important; }
#recent-posts .h3 { color: var(--ki-sky) !important; font-family: var(--ki-mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
.text-danger { color: var(--ki-sky) !important; }

/* ==========================================================================
   Post cards: list / term / taxonomy
   The upstream theme ships css/list.css with `#list-page .post-footer` and
   `#list-page .card` rules that hard-code the LIGHT palette
   (`background-color: var(--secondary-color) !important`, which defaults to
   #f8f9fa) and use `float-start`/`float-end` for the date + Read row. Our
   list/term/taxonomy templates deliberately do NOT link list.css, so none of
   that applies — the date span was unstyled and the floats collapsed. We own
   the whole card here instead, and use flex rather than floats.
   ========================================================================== */
#list-page .card {
  background: var(--ki-surface) !important;
  border: 1px solid var(--ki-border) !important;
  border-radius: var(--ki-radius) !important;
  box-shadow: none;
  overflow: hidden;
  transition: border-color .18s, transform .18s;
}
#list-page .card:hover {
  border-color: var(--ki-sky) !important;
}
a.card:hover { transform: translateY(-2px); }

#list-page .card-text,
#list-page .card-text * {
  background: transparent !important;
  color: var(--ki-text-dim) !important;
}
#list-page .card-text p { margin-bottom: 0; }

/* the row at the bottom of each card: date on the left, Read on the right */
#list-page .post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding: .6rem 1rem;
  background: var(--ki-bg-alt) !important;
  border-top: 1px solid var(--ki-border-soft);
}

#list-page .post-footer .post-date {
  color: var(--ki-text-faint) !important;
  font-family: var(--ki-mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#list-page .post-footer .btn {
  background: transparent !important;
  border: 1px solid var(--ki-border) !important;
  color: var(--ki-sky) !important;
  font-size: .76rem;
  padding: .18rem .6rem;
  white-space: nowrap;
}
#list-page .post-footer .btn:hover {
  background: var(--ki-sky-glow) !important;
  border-color: var(--ki-sky) !important;
  color: var(--ki-sky-soft) !important;
}

/* The "latest transmissions" cards in the footer sit outside #list-page, but use
   the same post-footer markup, so they need the same treatment explicitly. */
#recent-posts .card {
  background: var(--ki-surface) !important;
  border: 1px solid var(--ki-border) !important;
  border-radius: var(--ki-radius) !important;
  overflow: hidden;
}
/* The upstream footer.css paints `.card-text *` with the LIGHT palette
   (`background-color: var(--secondary-color) !important`, #f8f9fa by default),
   which shows up as a near-white slab behind each card description. Override it
   for our own palette. */
#recent-posts .card-text,
#recent-posts .card-text * {
  background: transparent !important;
  color: var(--ki-text-dim) !important;
}
#recent-posts .card-text p { margin-bottom: 0; }
#recent-posts .card-title { color: var(--ki-text) !important; }

#recent-posts .post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem 1rem;
  background: var(--ki-bg-alt) !important;
  border-top: 1px solid var(--ki-border-soft);
}
#recent-posts .post-footer .post-date {
  color: var(--ki-text-faint) !important;
  font-family: var(--ki-mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#recent-posts .post-footer .btn {
  background: transparent !important;
  border: 1px solid var(--ki-border) !important;
  color: var(--ki-sky) !important;
  font-size: .76rem;
  padding: .18rem .6rem;
  white-space: nowrap;
}
#recent-posts .post-footer .btn:hover {
  background: var(--ki-sky-glow) !important;
  border-color: var(--ki-sky) !important;
  color: var(--ki-sky-soft) !important;
}

#projects .badge, #projects .badge-secondary {
  background: var(--ki-surface-2) !important;
  color: var(--ki-sky) !important;
  border: 1px solid var(--ki-border);
  font-family: var(--ki-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: .18rem .45rem;
}

#projects .card h5 { line-height: 1.35; }

/* ==========================================================================
   Skill panels — one treatment for skills / still-learning / languages.
   Each group is a bordered panel; inside, every skill uses the same two-line
   row: name (+ optional state) on the first line, the bar on the second.
   ========================================================================== */
.skill-panels {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}

.skill-panel {
  background: linear-gradient(180deg, var(--ki-surface), var(--ki-bg-alt));
  border: 1px solid var(--ki-border);
  border-radius: var(--ki-radius);
  padding: 1rem 1.1rem 1.1rem;
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .7rem 1.3rem;
}

.skill-row {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.skill-row-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--ki-mono);
  font-size: .82rem;
  line-height: 1.3;
}
.skill-row-name { color: var(--ki-text); }
.skill-row-state {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ki-text-faint);
}

.skill-row .stat-track { width: 100%; }

/* weak skills read as "in progress" rather than as another claim to expertise */
.skill-row.is-weak .skill-row-name { color: var(--ki-text-dim); }
.skill-row.is-weak .stat-track { border-style: dashed; }
.skill-row.is-weak .stat-fill {
  background: linear-gradient(90deg, var(--ki-sky-deep), var(--ki-sky));
  box-shadow: none;
  opacity: .75;
}

/* ==========================================================================
   Skill network — bubbles radiating from the person
   ========================================================================== */
.bubble-caption {
  font-family: var(--ki-mono);
  font-size: .78rem;
  color: var(--ki-text-faint);
  margin: -.4rem 0 1.3rem;
  max-width: 68ch;
}

.bubble-net {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

/* the person: a hub the families hang off */
.bubble-centre {
  flex: 0 0 auto;
  position: relative;
}
/* connective ring, purely decorative */
.bubble-centre::after {
  content: "";
  position: absolute;
  inset: -1.1rem;
  border: 1px dashed var(--ki-border);
  border-radius: 50%;
  pointer-events: none;
}

.bubble-families {
  flex: 1 1 520px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .9rem 1.1rem;
}

.bubble-family { position: relative; }

.bubble-skills {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0 0 0 .8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  /* the family -> skills connector */
  border-left: 1px solid var(--ki-border);
}

/* ---- a bubble ---- */
.bub {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  text-align: center;
  border-radius: 999px;
  border: 1px solid var(--ki-border);
  background: var(--ki-surface);
  color: var(--ki-text);
  font-family: var(--ki-mono);
  line-height: 1.25;
  padding: .3rem .7rem;
  transition: transform .16s, border-color .16s, background .16s;
}
.bub:hover { transform: translateY(-2px); border-color: var(--ki-sky); }

.bub-name { font-size: .76rem; }

/* sizes by role */
.bub-skill {
  font-size: calc(var(--bub-scale, 1) * 1rem);
  padding: calc(.22rem + var(--bub-scale, 1) * .1rem) calc(.55rem + var(--bub-scale, 1) * .2rem);
  color: var(--ki-text-dim);
  border-radius: 999px;
}
.bub-skill .bub-name { font-size: .72rem; color: var(--ki-text); }

.bub-family {
  font-size: .84rem;
  font-weight: 600;
  padding: .34rem .85rem;
  background: var(--ki-surface-2);
}

.bub-centre {
  font-size: 1rem;
  font-weight: 700;
  padding: 1.1rem 1.5rem;
  background: linear-gradient(160deg, var(--ki-surface-2), var(--ki-bg-alt));
  border: 1px solid var(--ki-sky);
  box-shadow: 0 0 0 4px var(--ki-sky-glow);
}
.bub-centre .bub-name { font-size: 1.05rem; }
.bub-note {
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ki-sky);
  font-weight: 400;
}

/* a sub-skill that is a form of another (GDScript via Godot) */
.has-parent {
  border-style: dashed;
  color: var(--ki-text-faint);
}
.bub-parent {
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ki-text-faint);
  opacity: .8;
}

/* ---- states ---- */
.bub-core   { border-color: var(--ki-border); }
.bub-active { border-color: rgba(56, 189, 248, .45); }
.bub-active .bub-name { color: var(--ki-sky-soft); }

.bub-deprecated {
  border-style: dashed;
  border-color: var(--ki-border-soft);
  background: transparent;
  opacity: .62;
}
.bub-deprecated .bub-name { color: var(--ki-text-dim); }
.bub-deprecated.bub-family { opacity: .75; }

/* ---- legend ---- */
.bubble-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin: 1.4rem 0 0;
  padding: 0;
  font-family: var(--ki-mono);
  font-size: .7rem;
  color: var(--ki-text-faint);
}
.bubble-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.legend-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--ki-border);
  display: inline-block;
}
.dot-core { background: var(--ki-surface-2); }
.dot-active { border-color: rgba(56, 189, 248, .6); }
.dot-deprecated { background: transparent; border-style: dashed; }

@media (max-width: 640px) {
  .bubble-net { gap: 1.1rem; }
  .bubble-centre { margin: 0 auto; }
  .bubble-centre::after { display: none; }
  .bubble-families { flex-basis: 100%; }
}

/* ==========================================================================
   Skill tree
   ========================================================================== */
.tree-caption {
  font-family: var(--ki-mono);
  font-size: .78rem;
  color: var(--ki-text-faint);
  margin: -.4rem 0 1.1rem;
}

.tree {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tier;
}

.tree-tier {
  position: relative;
  padding: 0 0 1.1rem 2.2rem;
  border-left: 1px solid var(--ki-border);
  margin-left: .55rem;
}
.tree-tier:last-child { border-left-color: transparent; padding-bottom: 0; }

/* node on the rail */
.tree-tier::before {
  content: "";
  position: absolute;
  left: -5px;
  top: .35rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ki-bg);
  border: 2px solid var(--ki-sky);
}

.tree-tier-head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}
.tree-tier-name {
  font-family: var(--ki-mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ki-sky) !important;
  margin: 0;
}
.tree-tier-note {
  font-family: var(--ki-mono);
  font-size: .72rem;
  color: var(--ki-text-faint);
}

.tree-nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.tree-node {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .22rem .6rem .22rem .45rem;
  border-radius: 999px;
  background: var(--ki-surface);
  border: 1px solid var(--ki-border);
  font-family: var(--ki-mono);
  font-size: .76rem;
  color: var(--ki-text-dim);
}
.node-mark {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.node-name { color: var(--ki-text); }
.node-state {
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ki-text-faint);
}

/* state colours: mastered = solid, learned = half, learning = ring */
.node-mastered .node-mark { background: var(--ki-hp); }
.node-mastered { border-color: rgba(52, 211, 153, .35); }
.node-learned  .node-mark { background: var(--ki-sky); }
.node-learning .node-mark { background: transparent; box-shadow: inset 0 0 0 2px var(--ki-sky); }
.node-learning { border-style: dashed; }

/* ==========================================================================
   Achievements — medal wall with hover/focus cards
   ========================================================================== */
.medal-row { margin-bottom: 1.5rem; }

.medal-row-name {
  font-family: var(--ki-mono) !important;
  font-size: .74rem !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 .7rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--ki-text-dim) !important;
}

.medal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem .6rem;
}

.medal-cell { position: relative; }

.medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: 104px;
  padding: .5rem .25rem;
  background: transparent;
  border: 0;
  border-radius: var(--ki-radius-sm);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .16s, background .16s;
}
.medal:hover, .medal:focus-visible { transform: translateY(-3px); background: var(--ki-surface); }

/* The tier class is on both the row heading and each disc, so one rule covers
   the label colour and the metal gradient together.
   NOTE: the ID rule `#achievements h4 { color: ... !important }` further down
   this file beats any class selector, so the row label needs the ID too. */
.ach-platinum { color: #c4b5fd; --disc-1: #ddd6fe; --disc-2: #7c3aed; }
.ach-gold     { color: #fcd34d; --disc-1: #fde68a; --disc-2: #b45309; }
.ach-silver   { color: #cbd5e1; --disc-1: #e2e8f0; --disc-2: #64748b; }
.ach-bronze   { color: #d8a07a; --disc-1: #f0c8a4; --disc-2: #8a4b20; }

/* Row labels: ID + class so it outranks `#achievements h4`. */
#achievements .medal-row-name.ach-platinum { color: #c4b5fd !important; }
#achievements .medal-row-name.ach-gold     { color: #fcd34d !important; }
#achievements .medal-row-name.ach-silver   { color: #cbd5e1 !important; }
#achievements .medal-row-name.ach-bronze   { color: #d8a07a !important; }

/* The disc inherits --disc-1/--disc-2 from its tier class. Do NOT set fallbacks
   here: a declaration on .medal-disc would override the inherited tier values
   and every medal would render in the same grey. The var() fallbacks below only
   apply if no tier class is present. */
.medal-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.28), transparent 55%),
              linear-gradient(160deg, var(--disc-1, #8296b3), var(--disc-2, #475569));
  box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.10);
}

.medal-ring {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.34);
}

.medal-wip {
  position: relative;
  font-family: var(--ki-mono);
  font-size: .62rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.medal-caption {
  font-family: var(--ki-mono);
  font-size: .68rem;
  line-height: 1.3;
  text-align: center;
  color: var(--ki-text-dim);
  overflow-wrap: anywhere;
}
.medal:hover .medal-caption, .medal:focus-visible .medal-caption { color: var(--ki-text); }

/* hover / focus detail card */
.medal-tip {
  position: absolute;
  z-index: 40;
  bottom: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 250px;
  padding: .7rem .8rem;
  background: var(--ki-bg-alt);
  border: 1px solid var(--ki-border);
  border-radius: var(--ki-radius-sm);
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s, transform .15s, visibility .15s;
}
.medal-cell:hover .medal-tip,
.medal:focus-visible + .medal-tip,
.medal-cell:focus-within .medal-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.medal-tip-title {
  display: block;
  font-family: var(--ki-mono);
  font-size: .8rem;
  color: var(--ki-text);
  margin-bottom: .15rem;
}
.medal-tip-tier {
  display: block;
  font-family: var(--ki-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.medal-tip-body {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ki-text-dim);
  margin: 0 0 .35rem;
}
.medal-tip-stats {
  font-family: var(--ki-mono);
  font-size: .68rem;
  color: var(--ki-text-faint);
  margin: 0;
}
.medal-tip-link {
  display: inline-block;
  margin-top: .4rem;
  font-family: var(--ki-mono);
  font-size: .72rem;
  color: var(--ki-sky) !important;
}

@media (max-width: 560px) {
  .medal-tip { left: 0; transform: translateY(4px); width: min(240px, 70vw); }
  .medal-cell:hover .medal-tip, .medal:focus-visible + .medal-tip, .medal-cell:focus-within .medal-tip {
    transform: translateY(0);
  }
}

/* ==========================================================================
   GitHub repositories (button-loaded)
   ========================================================================== */
.repo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1rem;
}
.repo-intro {
  font-family: var(--ki-mono);
  font-size: .78rem;
  color: var(--ki-text-dim);
  margin: 0;
}
.repo-status {
  display: block;
  font-size: .7rem;
  color: var(--ki-text-faint);
  margin-top: .15rem;
}

.repo-load {
  font-family: var(--ki-mono);
  font-size: .76rem;
  padding: .38rem .8rem;
  color: var(--ki-sky);
  background: var(--ki-surface);
  border: 1px solid var(--ki-sky);
  border-radius: var(--ki-radius-sm);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.repo-load:hover:not(:disabled) { background: var(--ki-sky); color: #04101d; }
.repo-load:disabled { opacity: .55; cursor: progress; }
.repo-load.is-busy { animation: ki-pulse 1.1s ease-in-out infinite; }
@keyframes ki-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .repo-load.is-busy { animation: none; } }

.repo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .7rem;
}

.repo {
  padding: .7rem .85rem;
  background: var(--ki-surface);
  border: 1px solid var(--ki-border-soft);
  border-radius: var(--ki-radius-sm);
  transition: border-color .16s, transform .16s;
}
.repo:hover { border-color: var(--ki-sky); transform: translateY(-2px); }

.repo-link {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  text-decoration: none !important;
}
.repo-name {
  font-family: var(--ki-mono);
  font-size: .84rem;
  color: var(--ki-text);
  overflow-wrap: anywhere;
}
.repo:hover .repo-name { color: var(--ki-sky); }

.repo-stars {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-family: var(--ki-mono);
  font-size: .74rem;
  color: #fbbf24;
  flex: 0 0 auto;
}
.repo-star-num { color: var(--ki-text-dim); }

.repo-desc {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ki-text-dim);
  margin: .3rem 0 .4rem;
}

.repo-meta {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--ki-mono);
  font-size: .68rem;
  color: var(--ki-text-faint);
}
.repo-lang { display: inline-flex; align-items: center; gap: .3rem; }
.repo-lang-dot { width: 8px; height: 8px; border-radius: 50%; }

.repo-foot { margin-top: 1rem; text-align: center; }
.repo-all {
  font-family: var(--ki-mono);
  font-size: .76rem;
  color: var(--ki-sky) !important;
}

/* ---------- Empty state (no list baked into the page) ---------- */
.repo-empty {
  border: 1px dashed var(--ki-border);
  border-radius: var(--ki-radius);
  background: var(--ki-bg-alt);
  padding: 1.6rem 1.2rem;
  text-align: center;
}
.repo-empty-title {
  font-family: var(--ki-mono);
  font-size: .86rem;
  color: var(--ki-text-dim);
  margin: 0 0 .4rem;
}
.repo-empty-body {
  font-size: .8rem;
  color: var(--ki-text-faint);
  margin: 0 auto;
  max-width: 46ch;
}
.repo-empty-body strong { color: var(--ki-sky); font-weight: 500; }

/* ---------- Consent dialog ---------- */
.repo-dialog {
  border: 1px solid var(--ki-border);
  border-radius: var(--ki-radius);
  background: var(--ki-surface);
  color: var(--ki-text);
  padding: 0;
  max-width: min(440px, 92vw);
  font-family: var(--ki-mono);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
}
.repo-dialog::backdrop {
  background: rgba(4, 8, 16, .72);
  backdrop-filter: blur(2px);
}
.repo-dialog-inner { padding: 1.2rem 1.3rem 1.1rem; }
.repo-dialog-title {
  font-family: var(--ki-mono);
  font-size: .9rem;
  font-weight: 700;
  color: var(--ki-sky) !important;
  margin: 0 0 .6rem;
}
.repo-dialog-body {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--ki-text-dim);
  margin: 0 0 1.1rem;
  white-space: pre-line;
}
.repo-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
}
.repo-dialog-btn {
  font-family: var(--ki-mono);
  font-size: .78rem;
  padding: .35rem .85rem;
  border-radius: var(--ki-radius-sm);
  border: 1px solid var(--ki-border);
  background: transparent;
  color: var(--ki-text-dim);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.repo-dialog-btn:hover { color: var(--ki-text); border-color: var(--ki-text-dim); }
.repo-dialog-btn.is-confirm { border-color: var(--ki-sky); color: var(--ki-sky); }
.repo-dialog-btn.is-confirm:hover { background: var(--ki-sky); color: #04101d; }

/* ==========================================================================
   Still learning (self-assessed weak spots) + languages
   ========================================================================== */
/* ==========================================================================
   Achievements — medal wall with hover/focus cards
   ========================================================================== */
.medal-row { margin-bottom: 1.5rem; }

.medal-row-name {
  font-family: var(--ki-mono) !important;
  font-size: .74rem !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 .7rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--ki-text-dim) !important;
}

.medal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem .6rem;
}

.medal-cell { position: relative; }

.medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: 104px;
  padding: .5rem .25rem;
  background: transparent;
  border: 0;
  border-radius: var(--ki-radius-sm);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .16s, background .16s;
}
.medal:hover, .medal:focus-visible { transform: translateY(-3px); background: var(--ki-surface); }

/* The tier class is on both the row heading and each disc, so one rule covers
   the label colour and the metal gradient together.
   NOTE: the ID rule `#achievements h4 { color: ... !important }` further down
   this file beats any class selector, so the row label needs the ID too. */
.ach-platinum { color: #c4b5fd; --disc-1: #ddd6fe; --disc-2: #7c3aed; }
.ach-gold     { color: #fcd34d; --disc-1: #fde68a; --disc-2: #b45309; }
.ach-silver   { color: #cbd5e1; --disc-1: #e2e8f0; --disc-2: #64748b; }
.ach-bronze   { color: #d8a07a; --disc-1: #f0c8a4; --disc-2: #8a4b20; }

/* Row labels: ID + class so it outranks `#achievements h4`. */
#achievements .medal-row-name.ach-platinum { color: #c4b5fd !important; }
#achievements .medal-row-name.ach-gold     { color: #fcd34d !important; }
#achievements .medal-row-name.ach-silver   { color: #cbd5e1 !important; }
#achievements .medal-row-name.ach-bronze   { color: #d8a07a !important; }

/* The disc inherits --disc-1/--disc-2 from its tier class. Do NOT set fallbacks
   here: a declaration on .medal-disc would override the inherited tier values
   and every medal would render in the same grey. The var() fallbacks below only
   apply if no tier class is present. */
.medal-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.28), transparent 55%),
              linear-gradient(160deg, var(--disc-1, #8296b3), var(--disc-2, #475569));
  box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.10);
}

.medal-ring {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.34);
}

.medal-wip {
  position: relative;
  font-family: var(--ki-mono);
  font-size: .62rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.medal-caption {
  font-family: var(--ki-mono);
  font-size: .68rem;
  line-height: 1.3;
  text-align: center;
  color: var(--ki-text-dim);
  overflow-wrap: anywhere;
}
.medal:hover .medal-caption, .medal:focus-visible .medal-caption { color: var(--ki-text); }

/* hover / focus detail card */
.medal-tip {
  position: absolute;
  z-index: 40;
  bottom: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 250px;
  padding: .7rem .8rem;
  background: var(--ki-bg-alt);
  border: 1px solid var(--ki-border);
  border-radius: var(--ki-radius-sm);
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s, transform .15s, visibility .15s;
}
.medal-cell:hover .medal-tip,
.medal:focus-visible + .medal-tip,
.medal-cell:focus-within .medal-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.medal-tip-title {
  display: block;
  font-family: var(--ki-mono);
  font-size: .8rem;
  color: var(--ki-text);
  margin-bottom: .15rem;
}
.medal-tip-tier {
  display: block;
  font-family: var(--ki-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.medal-tip-body {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ki-text-dim);
  margin: 0 0 .35rem;
}
.medal-tip-stats {
  font-family: var(--ki-mono);
  font-size: .68rem;
  color: var(--ki-text-faint);
  margin: 0;
}
.medal-tip-link {
  display: inline-block;
  margin-top: .4rem;
  font-family: var(--ki-mono);
  font-size: .72rem;
  color: var(--ki-sky) !important;
}

@media (max-width: 560px) {
  .medal-tip { left: 0; transform: translateY(4px); width: min(240px, 70vw); }
  .medal-cell:hover .medal-tip, .medal:focus-visible + .medal-tip, .medal-cell:focus-within .medal-tip {
    transform: translateY(0);
  }
}

/* ==========================================================================
   Achievements
   ========================================================================== */
.ach-heading {
  font-family: var(--ki-mono) !important;
  font-size: .78rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: var(--ki-sky) !important;
  margin-bottom: 1.4rem;
}

.ach-tier { margin-bottom: 1.6rem; }

.ach-tier-name {
  font-family: var(--ki-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 .8rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  /* the theme's section h3/h4 rules win on specificity, so re-assert with !important */
  color: var(--ki-text-dim) !important;
}
.ach-count {
  font-size: .68rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--ki-surface-2);
  border: 1px solid var(--ki-border);
  color: var(--ki-text-faint);
  letter-spacing: 0;
}

.ach-platinum { color: #c4b5fd !important; }
.ach-gold     { color: #fcd34d !important; }
.ach-silver   { color: #cbd5e1 !important; }
.ach-bronze   { color: #d8a07a !important; }

/* tier rails: a 3px vertical accent instead of a full card border */
.ach {
  display: flex;
  gap: .9rem;
  height: 100%;
  padding: .9rem 1rem;
  background: var(--ki-surface);
  border: 1px solid var(--ki-border-soft);
  border-left-width: 3px;
  border-radius: var(--ki-radius-sm);
  transition: border-color .18s, transform .18s;
}
.ach:hover { transform: translateY(-2px); }
.ach-platinum  { border-left-color: #a78bfa; }
.ach-gold      { border-left-color: #fbbf24; }
.ach-silver    { border-left-color: #94a3b8; }
.ach-bronze    { border-left-color: #b87333; }
.ach-inprogress { background: var(--ki-bg-alt); }

.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: .8rem;
}

.ach-title {
  font-family: var(--ki-mono);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ki-text) !important;
  margin: 0 0 .35rem;
  line-height: 1.35;
}

.ach-content {
  font-size: .84rem;
  color: var(--ki-text-dim);
  line-height: 1.55;
}
.ach-content p { margin-bottom: 0; }

.ach-stats {
  margin-top: .5rem;
  font-family: var(--ki-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--ki-text-faint);
}

.ach-link {
  display: inline-block;
  margin-top: .5rem;
  font-family: var(--ki-mono);
  font-size: .76rem;
  color: var(--ki-sky) !important;
}

.ach-progress {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .65rem;
}
.ach-pct {
  font-family: var(--ki-mono);
  font-size: .7rem;
  color: var(--ki-text-faint);
  font-variant-numeric: tabular-nums;
  min-width: 2.4rem;
  text-align: right;
}

/* ---------- AI artwork footnote marker ---------- */
/* A compact "ai-gen*" link directly under each portrait. The full wording lives
   once in the footer, targeted by id, so the disclosure is present without
   crowding the layout. */
.art-credit {
  display: inline-block;
  font-family: var(--ki-mono);
  font-size: .58rem;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--ki-text-faint) !important;
  text-decoration: none !important;
  opacity: .75;
  margin-top: .6rem;
  padding: .1rem .3rem;
  border: 1px solid var(--ki-border-soft);
  border-radius: 4px;
  transition: opacity .15s, color .15s, border-color .15s;
}
.art-credit:hover,
.art-credit:focus-visible {
  opacity: 1;
  color: var(--ki-sky) !important;
  border-color: var(--ki-sky);
  text-decoration: none !important;
}

/* The about section wraps the image in a flex row, which turns a block-level
   caption into a sibling and parks it beside/above the image. Taking the
   container out of flow for the caption is the robust fix. */
.image.d-flex { flex-wrap: wrap; }
.image.d-flex .art-credit {
  flex: 0 0 100%;
  margin: .6rem auto 0;
  text-align: center;
}

.aigen-footnote {
  color: var(--ki-text-dim);
  font-weight: 600;
}

/* ---------- Footer credits ---------- */
.credits {
  line-height: 1.9;
  font-size: .8rem;
}
.credits .credit-model {
  /* the robot glyph renders emoji-coloured in most fonts; keep it on-palette */
  font-family: var(--ki-mono), "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: .95em;
  filter: saturate(0.35) hue-rotate(150deg);
  margin-left: .1em;
}
.credits .credit-model-name { color: var(--ki-text-dim); }
.credits .credit-by { color: var(--ki-text-faint); opacity: .8; }

/* ==========================================================================
   Misc
   ========================================================================== */
.pagination { gap: .35rem; }
.page-link {
  background: var(--ki-surface) !important;
  border: 1px solid var(--ki-border) !important;
  color: var(--ki-text-dim) !important;
  font-family: var(--ki-mono);
  font-size: .82rem;
}
.page-link:hover { background: var(--ki-surface-2) !important; color: var(--ki-sky) !important; }
.active > .page-link { background: var(--ki-sky) !important; border-color: var(--ki-sky) !important; color: #04101d !important; }

#readingTime { color: var(--ki-text-faint) !important; }

#scrollProgressBar {
  background: var(--ki-sky) !important;
  height: 3px;
}

.animate { animation: ki-fade .7s ease both; }
@keyframes ki-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.container { max-width: var(--ki-max-w); }

#search-content:empty { display: none; }

/* Bootstrap's card shadow/hover is too heavy for this palette */
.shadow-sm { box-shadow: none !important; }