/* The skill rings' copy, chips and card, in the page (site/sections/skills.js).
   The rings render in k-skills under ?copy=0; this layer sits over its frame in the pin, at the
   exact places, sizes and timings the embed's own copy had (k-skills/index.html).
   Every class is k- prefixed and scoped to #skills: the shell's .chip, .facts and .sub are not these. */

#skills .k-ui {
  --k-parch: #F3E5AB; --k-mist: #8BA1C5; --k-slate: #5D6F96; --k-navy: #0B1221;
  --k-gold: #C5A059; --k-gold-hi: #E7C96A; --k-gold-hot: #FFD56A; --k-rift: #9B7CFF; --k-line: #2A3855; --k-line-hi: #425473;
  --k-glass: rgba(11, 18, 33, .78); --k-hair: rgba(197, 160, 89, .42); --k-hair-hi: rgba(197, 160, 89, .55);
  --k-display: "Geist", system-ui, sans-serif; --k-mono: "Geist Mono", ui-monospace, monospace;
  --k-out: cubic-bezier(.22, .9, .3, 1);
  --k-top: 112px;
  --k-left: clamp(24px, 4.2vw, 64px); --k-colw: min(520px, 36vw); --k-split: 57vh;
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  font: 400 16px/1.5 var(--k-display); color: var(--k-parch);
}
#skills .k-ui button, #skills .k-ui a { pointer-events: auto; touch-action: pan-y; }
#skills .k-ui ul { list-style: none; padding: 0; }

/* desktop: the copy stands on the picker, which never moves between chapters */
#skills .k-panel { position: absolute; left: var(--k-left); width: var(--k-colw); bottom: calc(100% - var(--k-split) + 26px); }
#skills .k-picker { position: absolute; left: var(--k-left); width: var(--k-colw); top: var(--k-split); }
.js #skills .k-panel > * { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--k-out), transform .6s var(--k-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js #skills .k-panel.on > * { opacity: 1; transform: none; transition-delay: calc(280ms + var(--i, 0) * 70ms); }
#skills .k-panel:not(.on) { pointer-events: none; }
.js #skills .k-panel:not(.on) > * { transition-duration: .28s; transition-delay: 0ms; }
#skills .k-ui.k-instant .k-panel > *, #skills .k-ui.k-instant .k-card, #skills .k-ui.k-instant .k-card *, #skills .k-ui.k-instant .k-chip,
#skills .k-ui.k-instant .k-hint { transition: none !important; }

#skills .k-kick { font: 500 11px/1 var(--k-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--k-mist); display: flex; gap: 10px; align-items: center; margin: 0 0 18px; }
#skills .k-kick::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k-rift); box-shadow: 0 0 10px rgba(155, 124, 255, .8); }
#skills .k-kick b { color: var(--k-parch); font-weight: 500; }
#skills .k-count { display: flex; align-items: center; gap: 18px; margin: 0 0 14px; }
#skills .k-count b { display: inline-flex; font: 600 clamp(96px, min(10vw, 17vh), 168px)/1 var(--k-display); letter-spacing: -0.065em; font-variant-numeric: tabular-nums; height: .84em; margin: -.04em 0 0; color: var(--k-gold-hi); }
#skills .k-count b .dg { display: block; height: .84em; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
#skills .k-count b .strip { display: block; will-change: transform; }
#skills .k-count b .strip i::before { content: attr(data-d); }
#skills .k-count b .strip i { display: block; height: .84em; font-style: normal; text-align: center; line-height: .84; background: linear-gradient(180deg, #F6DE8E 8%, #C5A059 78%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#skills .k-count .k-lbl { font: 500 clamp(15px, 1.25vw, 19px)/1.22 var(--k-display); letter-spacing: -0.01em; color: var(--k-parch); }
#skills .k-count .k-lbl i { font-style: normal; color: var(--k-mist); }
#skills .k-panel h2, #skills .k-panel h3 { font: 600 clamp(32px, 3.3vw, 56px)/0.98 var(--k-display); letter-spacing: -0.048em; margin: 0; text-wrap: balance; color: var(--k-parch); }
#skills .k-panel h3 { font-size: clamp(30px, 3vw, 50px); }
#skills .k-panel h2 em, #skills .k-panel h3 em { font-style: normal; color: var(--k-gold-hot); }
#skills .k-sub { font: 400 clamp(15px, 1.12vw, 17.5px)/1.5 var(--k-display); color: var(--k-mist); margin: 16px 0 0; max-width: 30em; letter-spacing: -0.005em; }
#skills .k-facts { margin: 20px 0 0; display: grid; gap: 9px; }
#skills .k-facts li { display: grid; grid-template-columns: 62px 1fr; align-items: baseline; gap: 12px; font: 400 14.5px/1.36 var(--k-display); color: var(--k-mist); letter-spacing: -0.005em; }
#skills .k-facts li b { font: 600 24px/1 var(--k-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--k-parch); text-align: right; }
#skills .k-facts li em { font-style: normal; color: var(--k-parch); }

/* category chips: one glass row, equal widths, never a sideways scroller */
#skills .k-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 4px; background: var(--k-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--k-line); border-radius: 8px; }
#skills .k-chip { min-height: 38px; margin: 0; padding: 6px 6px; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--k-mist); font: 500 12.5px/1.12 var(--k-display); letter-spacing: -0.005em; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; transition: color .2s var(--k-out), background-color .2s var(--k-out), border-color .2s var(--k-out); }
#skills .k-chip:hover { color: var(--k-parch); background: rgba(243, 229, 171, .05); }
#skills .k-chip[aria-pressed="true"] { color: var(--k-parch); border-color: var(--k-gold); background: rgba(197, 160, 89, .13); }
#skills .k-chip:focus-visible { outline: 2px solid var(--k-gold-hot); outline-offset: 2px; }
html.coarse #skills .k-chip { min-height: 46px; }

/* the skill card */
#skills .k-card { margin-top: 10px; display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: start; padding: 13px 14px 14px 13px; min-height: 102px; background: var(--k-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--k-hair); border-radius: 8px; }
#skills .k-ic { width: 58px; height: 58px; border-radius: 7px; background-color: #0d1424; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px var(--k-hair-hi); }
#skills .k-ic.cat { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px; }
#skills .k-ic.cat i { display: block; border-radius: 3px; background-color: #0d1424; background-repeat: no-repeat; }
#skills .k-card b { display: block; font: 600 18px/1.15 var(--k-display); letter-spacing: -0.02em; color: var(--k-parch); }
#skills .k-card small { display: block; margin-top: 5px; font: 500 10.5px/1.3 var(--k-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--k-gold-hi); }
#skills .k-card p { margin: 7px 0 0; font: 400 14px/1.42 var(--k-display); color: var(--k-mist); letter-spacing: -0.003em; }
#skills .k-card p.k-note { margin-top: 6px; font: 500 12.5px/1.35 var(--k-display); color: var(--k-parch); }
#skills .k-card p.k-note::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--k-gold-hi); vertical-align: 1px; }
#skills .k-card p[hidden] { display: none; }
#skills .k-body > * { transition: opacity .25s var(--k-out); }
#skills .k-card.swap .k-body > * { opacity: 0; transition-duration: .08s; }

#skills .k-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font: 500 13px/1.2 var(--k-display); color: var(--k-mist); white-space: nowrap; display: flex; align-items: center; gap: 10px; transition: opacity .4s var(--k-out); }
#skills .k-hint::after { content: attr(data-hint); }
#skills .k-hint i { width: 1px; height: 24px; background: linear-gradient(var(--k-slate), transparent); animation: k-drip 1.8s ease-in-out infinite; }
@keyframes k-drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }


@media (max-width: 760px) {
  #skills .k-ui { --k-top: calc(74px + env(safe-area-inset-top)); }
  #skills .k-panel { left: 16px; right: 16px; width: auto; top: var(--k-top); bottom: auto; }
  #skills .k-picker { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); }
  #skills .k-kick { margin-bottom: 10px; font-size: 10px; }
  #skills .k-count { gap: 12px; margin-bottom: 6px; }
  #skills .k-count b { font-size: 76px; }
  #skills .k-count .k-lbl { font-size: 14px; }
  #skills .k-panel h2, #skills .k-panel h3 { font-size: clamp(27px, 7.6vw, 34px); }
  #skills .k-sub { font-size: 14px; margin-top: 8px; line-height: 1.42; }
  #skills .k-facts { margin-top: 10px; gap: 5px; }
  #skills .k-facts li { grid-template-columns: 34px 1fr; gap: 9px; font-size: 13px; line-height: 1.3; }
  #skills .k-facts li b { font-size: 17px; }
  #skills .k-chips { margin-top: 0; gap: 2px; padding: 3px; }
  #skills .k-chip { flex-direction: column; gap: 4px; min-height: 46px; padding: 5px 2px; font-size: 11.5px; line-height: 1.05; }
  #skills .k-card { grid-template-columns: 46px 1fr; gap: 11px; padding: 11px 12px 12px 11px; min-height: 92px; margin-top: 8px; }
  #skills .k-ic { width: 46px; height: 46px; }
  #skills .k-card b { font-size: 16px; }
  #skills .k-card small { font-size: 9.5px; margin-top: 4px; }
  #skills .k-card p { font-size: 13px; margin-top: 5px; line-height: 1.38; }
  #skills .k-card p.k-note { font-size: 12px; }
  .js #skills .k-hide-sm { display: none !important; }
  #skills .k-hint { display: none; }
  #skills .k-card { height: 124px; align-content: start; overflow: hidden; }
  #skills .k-card p:not(.k-note) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #skills .k-card.noted p:not(.k-note) { -webkit-line-clamp: 2; }
}
@media (prefers-reduced-motion: reduce) { #skills .k-hint i { animation: none; } }

/* No JavaScript: one readable column, every chapter, fact and name in the open. */
html:not(.js) .show.skills { height: auto; }
html:not(.js) #skills .pin { position: relative; height: auto; overflow: visible; }
html:not(.js) #skills .k-ui { position: relative; inset: auto; display: grid; gap: 34px; padding: 110px clamp(18px, 4.2vw, 64px) 72px; pointer-events: auto; }
html:not(.js) #skills .k-panel, html:not(.js) #skills .k-picker { position: static; width: auto; max-width: 640px; }
html:not(.js) #skills .k-hint { display: none; }

/* ── every class and skill, after the pin: a closed <details> like the World's notes. Nothing in
   the pin is hidden for search; this is where the names live, for anyone who opens it. ── */
#skills-notes { padding: 7vh clamp(18px, 4.2vw, 64px) 0; color: var(--parch); }
#skills-notes summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 2px; border-top: 1px solid rgba(66, 84, 115, .6); border-bottom: 1px solid rgba(66, 84, 115, .6); font: 650 17px/1.3 var(--sans); color: var(--parch); }
#skills-notes summary::-webkit-details-marker { display: none; }
#skills-notes summary::after { content: "+"; flex: none; font: 400 22px/1 var(--sans); color: var(--gold); transition: transform .25s var(--ease); }
#skills-notes details[open] summary::after { transform: rotate(45deg); }
#skills-notes summary:hover { color: var(--gold-hi); }
#skills-notes summary:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; border-radius: 4px; }
#skills-notes .k-notes-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5vw; align-items: start; padding: 30px 0 6px; }
#skills-notes .k-n-tally { margin: 0; font: 850 clamp(30px, 2.8vw, 46px)/.95 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
#skills-notes .k-n-tally b { font-weight: inherit; }
#skills-notes .k-n-tally span { display: block; margin-top: 14px; font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); }
#skills-notes h3 { margin: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
#skills-notes .k-n-how { margin-top: 30px; }
#skills-notes .k-n-facts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
#skills-notes .k-n-facts li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: baseline; font-size: 15px; line-height: 1.5; color: var(--mist); }
#skills-notes .k-n-facts b { font: 600 20px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--parch); text-align: right; }
#skills-notes .k-n-more { margin: 24px 0 0; font-size: 15px; }
#skills-notes .k-n-lists { padding: 4px 22px; border-radius: 12px; background: rgba(11, 18, 33, .78); border: 1px solid rgba(197, 160, 89, .3); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9); }
#skills-notes .k-n-lists section { padding: 18px 0; }
#skills-notes .k-n-lists section + section { border-top: 1px solid rgba(42, 56, 85, .7); }
#skills-notes .k-n-lists p { margin: 8px 0 0; max-width: 46em; font-size: 14px; line-height: 1.5; color: var(--mist); }
#skills-notes .k-n-classes, #skills-notes .k-n-names { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
#skills-notes .k-n-classes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 22px; }
#skills-notes .k-n-classes li { font-size: 13.5px; line-height: 1.35; color: var(--mist); }
#skills-notes .k-n-classes b { display: block; font: 650 14.5px/1.3 var(--sans); color: var(--parch); }
#skills-notes .k-n-names { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 22px; font-size: 14.5px; line-height: 1.4; color: var(--parch); }
@media (max-width: 760px) {
  #skills-notes { padding: 5vh 16px 0; }
  #skills-notes summary { font-size: 16px; }
  #skills-notes .k-notes-in { grid-template-columns: 1fr; gap: 24px; padding-top: 22px; }
  #skills-notes .k-n-lists { padding: 2px 16px; }
  #skills-notes .k-n-classes { grid-template-columns: 1fr; }
  #skills-notes .k-n-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* without JavaScript the names read open (the facts are already in the column above) */
html:not(.js) #skills-notes details::details-content { content-visibility: visible; }
html:not(.js) #skills-notes summary { pointer-events: none; }
html:not(.js) #skills-notes summary::after { content: none; }
html:not(.js) #skills-notes .k-n-how { display: none; }