/* skills.uberblick.ai: the agents.uberblick.ai palette in IBM Plex Sans, Plex Mono for commands, skill names and labels. A quiet sidebar on every page, Kamal-style. */
:root {
  --bg: #f7f6f9; --fg: #1d1b24; --muted: #686476; --line: #dcd9e4; --accent: #6a4bd6; --code: #eeecf3;
  --tint: #ebe6fa; --panel: #fbfafd; --on-accent: #ffffff;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121118; --fg: #e8e6ee; --muted: #9b97a9; --line: #2b2935; --accent: #ab93ff; --code: #1c1a24;
  --tint: #1f1a33; --panel: #17161e; --on-accent: #121118; color-scheme: dark }
  :root:not([data-theme="light"]) .shot .l { display: none } :root:not([data-theme="light"]) .shot .d { display: block } }
:root[data-theme="dark"] { --bg: #121118; --fg: #e8e6ee; --muted: #9b97a9; --line: #2b2935; --accent: #ab93ff; --code: #1c1a24;
  --tint: #1f1a33; --panel: #17161e; --on-accent: #121118; color-scheme: dark }
:root[data-theme="dark"] .shot .l { display: none } :root[data-theme="dark"] .shot .d { display: block }

*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--sans); padding-inline: 20px; -webkit-font-smoothing: antialiased }
a { color: var(--accent); text-underline-offset: 3px }
a:hover { text-decoration-thickness: 2px }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
p { margin: 0 0 14px; max-width: 68ch }
code { font-family: var(--mono) }
p code, td code, li code, dd code { background: var(--code); padding: 1px 5px; border-radius: 3px; font-size: 0.92em }
img { max-width: 100%; display: block }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }

.top { max-width: 1120px; margin: 0 auto; display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; padding-block: 26px 0 }
.mark { font-weight: 600; color: var(--fg); text-decoration: none }
.mark span { color: var(--accent) }
.count { color: var(--muted); font-size: 14px }
.top nav { margin-left: auto; display: flex; gap: 20px; font-size: 14px }
.top nav a { color: var(--muted); text-decoration: none }
.top nav a:hover { color: var(--fg) }
.foot { max-width: 1120px; margin: 64px auto 0; border-top: 1px solid var(--line); padding-block: 24px 48px; font-size: 13px; color: var(--muted); display: flex; gap: 8px 20px; flex-wrap: wrap }
.foot a { color: var(--muted) }

.layout { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding-block: 40px 0 }
.side summary { display: none }
.side-in { position: sticky; top: calc(20px + env(safe-area-inset-top, 0px)); display: grid; gap: 14px }
.filter { width: 100%; font: 13.5px var(--mono); color: var(--fg); background: var(--code); border: 1px solid var(--line); border-radius: 5px; padding: 6px 10px }
.filter::placeholder { color: var(--muted) }
.side ul { list-style: none; margin: 0; padding: 0; font-size: 14px }
.side .grp { color: var(--fg); font-weight: 600; display: block; padding: 3px 0 }
.side .grp span { color: var(--muted); font-weight: 400 }
.side ul ul { margin: 2px 0 12px; padding-left: 12px; border-left: 1px solid var(--line) }
.side ul ul a { display: block; padding: 2px 0 2px 10px; margin-left: -13px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; overflow-wrap: anywhere }
.side ul ul a:hover { color: var(--fg); border-left-color: var(--line) }
.side ul ul a.on { color: var(--fg); border-left-color: var(--accent) }
.side .plain a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none }
.side .plain a:hover, .side .plain a.on { color: var(--fg) }
.main { min-width: 0 }

.tabs { border: 1px solid var(--line); border-radius: 6px; background: var(--code); overflow: hidden; max-width: 640px }
.tablist { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line) }
.tablist button { font: 500 13px var(--mono); color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer }
.tablist button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent) }
.panel { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px }
.panel code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 14px }
.panel.sh code::before { content: "$ "; color: var(--muted) }
.copy { font: 500 12.5px var(--mono); color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 3px 9px; cursor: pointer; flex-shrink: 0 }
.copy:hover { border-color: var(--muted) }
.note { font-size: 13px; color: var(--muted); margin: 10px 0 0 }

.shot { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel) }
.shot .bar { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted) }
.shot .d { display: none }
.shot img { width: 100%; height: auto }
.shot figcaption { font-size: 12.5px; color: var(--muted); padding: 8px 12px; border-top: 1px solid var(--line) }

.kicker { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px }
h2.h { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 18px; text-wrap: balance }

/* Skill page */
.crumb { font-size: 13px; color: var(--muted); margin: 0 0 10px }
.crumb a { color: var(--muted) }
.sk-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 14px }
.sk-title h1 { font-size: clamp(26px, 4.4vw, 36px); line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; margin: 0; text-wrap: balance }
.chip { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px }
.chip.acc { color: var(--accent); border-color: var(--accent) }
.sk-lede { font-size: 16px; margin-bottom: 26px }
.sk-sec { margin-top: 48px }
.sk-sec > h2 { font-size: 17px; font-weight: 600; margin: 0 0 14px }
.sk-sec > h2::before { content: "## "; color: var(--muted); font-weight: 400 }
.asks { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.asks li { background: var(--tint); color: var(--fg); border-radius: 6px; padding: 5px 12px; font-size: 13.5px }
.steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; max-width: 68ch }
.steps li::marker { color: var(--accent); font-weight: 600 }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0 }
.facts div { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; display: grid; gap: 2px; align-content: start }
.facts dt { font-weight: 600; font-size: 14px }
.facts dd { margin: 0; font-size: 13px; color: var(--muted) }
.table { overflow-x: auto }
.kv { border-collapse: collapse; font-size: 14px; width: 100% }
.kv th, .kv td { text-align: left; vertical-align: top; padding: 8px 16px 8px 0; border-bottom: 1px solid var(--line) }
.kv th { font-weight: 400; color: var(--muted); white-space: nowrap; width: 1% }
.srcs { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; margin: 0; padding: 0; list-style: none }
.shots { display: grid; gap: 24px }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); flex-wrap: wrap }
.pager a { text-decoration: none; display: grid; gap: 2px; font-weight: 500 }
.pager a span { font-size: 12px; color: var(--muted); font-weight: 400 }
.pager .next { margin-left: auto; text-align: right }

@media (max-width: 899px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 24px 0 }
  .side { border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px }
  .side summary { display: block; cursor: pointer; font-size: 14px; color: var(--muted) }
  .side[open] summary { margin-bottom: 10px }
  .side-in { position: static }
}
@media (max-width: 520px) { .top nav { margin-left: 0; width: 100% } }

/* Overview: claim, problem in prose, skill directory, questions, recent changes, who builds it. */
.hero { padding-block: 8px 0 }
.hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 18px; text-wrap: balance; max-width: 22ch }
.lede { font-size: 16.5px; margin: 0 0 24px; max-width: 62ch }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px }
.cta .tabs { flex: 1 1 420px }
.cta > a { font-weight: 500; text-decoration: none; white-space: nowrap }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 32px; border-block: 1px solid var(--line) }
.stat { padding: 14px 16px 14px 0; display: grid; gap: 0 }
.stat + .stat { padding-left: 16px; border-left: 1px solid var(--line) }
.stat b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums }
.stat span { font-size: 12.5px; color: var(--muted) }
.blk { margin-top: 72px }
.blk > h2 { font-size: clamp(21px, 2.6vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 16px; text-wrap: balance; max-width: 30ch }
.blk-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 20px }
.blk-h h2 { font-size: clamp(21px, 2.6vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; margin: 0; text-wrap: balance }
.blk-h a { font-size: 14px; white-space: nowrap }
.blk-intro { color: var(--muted); font-size: 14px; margin: -8px 0 20px }

.qcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.qcard { border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.qcard .lab { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted) }
.qcard h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; text-wrap: balance }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px }
.links li { display: flex; gap: 10px; align-items: baseline; min-width: 0 }
.tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; flex-shrink: 0 }

.changes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.changes li { display: grid; grid-template-columns: 110px 70px minmax(0, 1fr); gap: 4px 16px; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: 14px; align-items: baseline }
.changes time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px }
.changes .tag { justify-self: start }

.about p { font-size: 15px }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px }
.cols h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600 }
.cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px }
.cols a { color: var(--muted); text-decoration: none; overflow-wrap: anywhere }
.cols a:hover { color: var(--fg) }

@media (max-width: 760px) {
  .qcards, .cols { grid-template-columns: minmax(0, 1fr) }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .stat:nth-child(3) { padding-left: 0; border-left: 0 }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line) }
  .changes li { grid-template-columns: 100px minmax(0, 1fr) } .changes li > span:last-child { grid-column: 1 / -1 }
}

/* Skill directory on the overview: one block per group, one row per skill. Grows by adding rows. */
.gblock { margin-top: 28px }
.gblock-h { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; padding-bottom: 10px }
.gblock-h .num { color: var(--accent); font: 600 13px var(--mono) }
.gblock-h h3 { margin: 0; font-size: 18px; font-weight: 600 }
.gblock-h p { grid-column: 2; margin: 0; font-size: 14px; color: var(--muted) }
.gblock-h code { grid-column: 3; grid-row: 1; font-size: 12px; color: var(--muted) }
.sk-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.sk-list a { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: 4px 20px; padding: 14px 10px 14px 50px; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; align-items: baseline }
.sk-list a:hover { background: var(--tint) }
.sk-list .n { font: 500 14px var(--mono); color: var(--accent); overflow-wrap: anywhere }
.sk-list .d { font-size: 14.5px }
.sk-list .d span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px }
.sk-list .v { font: 12px var(--mono); color: var(--muted) }
@media (max-width: 760px) {
  .sk-list a { grid-template-columns: minmax(0, 1fr) auto; padding-left: 10px }
  .sk-list .d { grid-column: 1 / -1 }
  .gblock-h { grid-template-columns: 36px minmax(0, 1fr) } .gblock-h code { grid-column: 2; grid-row: auto }
}
code, .mark, .count, .kicker, .tag, .num, .changes time, .side ul ul a, .crumb, .chip, .lab, .shot .bar, .shot figcaption, .note { font-family: var(--mono) }
.kicker, .lab { font-size: 11.5px }