mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 15:46:30 +03:00
373039a837
* Give DESIGN.md a real type ramp so the design hook stops crying wolf The design hook fired on nearly every CSS file we touched. The cause was DESIGN.md's typography block: it declared seven named roles rather than a scale, and two of those roles used clamp(), which the extractor skipped outright. That left an allowlist of five sizes standing against the 86 distinct font sizes actually in use, so design-system-font-size flagged roughly 500 declarations. Editing any .astro page made it worse, because the companion-stylesheet scan re-reported the whole backlog. Extractor (cli/engine/design-system.mjs): - Read a typography.scale map as the enumerated ramp. - Read both clamp() endpoints as allowed sizes. These stay additive on purpose: clamp endpoints alone cannot switch the rule on, because a fully fluid system enumerates no discrete ramp and inferring one from its endpoints would flag every intermediate size. The existing abstention test still passes, and three new tests cover the added behavior. DESIGN.md: - Document a 19-step ramp, 8px through 72px at a 16px root. - Snap the five discrete role sizes onto ramp steps. This also fixes real drift. DESIGN.md claims to mirror kinpaku-tokens.css verbatim, but wordmark was 1.15rem in the CSS against 1.3rem documented, with tracking at 0.42em against 0.15em. Both are re-synced. Standardization, 64 declarations: - Six near-identical steps between 13.7px and 15.4px collapse onto 14 and 15. - .foundation-card-label, .designing-lane-mock-title and .designing-iterate-name each existed at two different sizes in two files. Now unified. - The wordmark rendered at four sizes (20.8, 18.4, 17, 16.8px). Now 18px, plus one deliberate smaller nav variant. Exemptions, for designs that are foreign on purpose: the antipattern-example fixtures, the neo-mirai case-study build, the periodic-table cell annotations in framework-viz.js (5 to 7px diagram geometry sitting at 2 to 3px offsets), and the .why-slop-* before-state card's Inter and gradient text. Verified by computed style across ten rendered pages: every element lands on a ramp step except clamp() values mid-interpolation, which is what fluid means. Full test suite and build validators pass. Generated provider output is deliberately left out; the sync workflow owns it. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Validate clamp() endpoints in usage, not just when reading DESIGN.md Reading clamp endpoints as documented steps without also checking them in source left an asymmetry: `isAllowedFontSizeRaw` returned true for anything failing the px/rem literal test, so `clamp(99rem, 1vw, 200rem)` passed. That is how `.ptable-symbol` at `clamp(1.45rem, 1.8vw, 1.8rem)` stayed invisible until someone measured computed styles, which is not a check the hook can run. Fluid values are now judged on their min and max. The viewport term interpolates between them and is never a fixed step, so it is left alone. Endpoints that cannot be resolved, such as var() or calc() or em, abstain rather than guess. Findings name the offending endpoint and use it as the ignore-value, because the whole clamp string is not actionable on its own. Turning the check on surfaced 22 fluid declarations that had never been looked at. Three used hero sizes above the ramp's 72px cap (80, 83.2 and 88px) alongside the display role's documented 89.6px max, so the top of the ramp was genuinely incomplete. Added the 80 and 88 steps, which gives the display end consistent 8px increments instead of 48/56/64/72 plus an orphan at 89.6, and fixes two declarations outright. The other 20 are snapped by a stated rule: nearest step, ties toward the smaller step, endpoints already matching a documented fluid role left as-is, and where nearest-step would make a breakpoint override meet or exceed its base, the next smaller step so the override still reduces. That last case applies once, to .designing-page-title. Also narrows the framework-viz.js waiver. The periodic-table cell annotations now carry two `impeccable-disable-line` comments naming the reason, instead of a config entry wildcarding the whole file for the rule. Inline waivers travel with the code and cannot silence future drift elsewhere in that file. Verified at 420px, 900px and 1600px across seven pages. The pinned ends are fully on-ramp; the only off-ramp values at 900px are the vw term mid-interpolation, which is what fluid means. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Address review: wordmark tracking picked the wrong side, stale ramp count Two review findings, both fair. Wordmark tracking (greptile, bugbot). This PR moved DESIGN.md's wordmark letterSpacing from 0.15em to 0.42em on the grounds that DESIGN.md claims to mirror kinpaku-tokens.css and the token read 0.42em. That was the wrong side to trust. `--ks-type-wordmark-track` has exactly one consumer, design-system.css:570, which is the specimen page. Every production lockup (.ks-wordmark, .kinpaku-chrome .site-header-brand-name, .footer-logo) hardcodes 0.15em, so 0.15em is what every visitor actually sees and what DESIGN.md already documented correctly before this PR touched it. Reverted the doc to 0.15em and moved the token to 0.15em as well, so the specimen now renders the same lockup as production instead of a wider one nothing else uses. Verified by computed style: header and specimen both report 18px with 2.7px tracking. No production visual change. Stale ramp count (copilot). The sidecar described an "18-step ramp, 8px through 72px". It went stale twice inside this PR, once when the 8 step was added and again when 80 and 88 were added for the hero display sizes. It is 21 steps, 8px through 88px. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Strip !important from the font-size ignore value Follow-on from the waiver wiring in the hook branch. The ignoreValue is what a `hooks ignore-value` waiver has to match, and `font-size: 1.4rem !important` emitted `1.4rem !important` while a plain declaration emitted `1.4rem`. Once font-size is a direct-value rule, that means the same size needs two different waivers depending on whether it carries a priority marker. font-family already strips the marker before matching, and there is a test for that. font-size now does the same. The snippet still shows the declaration as authored. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Have the wordmark rules consume their tokens instead of copying the values Follow-up to the tracking fix, and the residual half of what the reviewers were pointing at. `.ks-wordmark` and the kinpaku chrome lockup each repeated `1.125rem` and `0.15em` literally rather than reading `--ks-type-wordmark-size` and `--ks-type-wordmark-track`. That duplication is exactly how the token drifted to 0.42em while every production lockup stayed at 0.15em and nobody noticed, which is the confusion that started this thread. The values already agree, so this is a no-op visually and is verified as such: computed styles across the home, design-system, docs and changelog pages all still report 18px with 2.7px tracking. What changes is that there is now one place to edit, so the next tracking change cannot silently apply to the specimen page alone. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
1794 lines
44 KiB
CSS
1794 lines
44 KiB
CSS
/* ============================================================================
|
|
/docs — Neo Kinpaku redesign
|
|
|
|
Re-skins the docs index (/docs) and per-command detail (/docs/:slug) on the
|
|
dark lacquer kinpaku surface. Mirrors the /designing approach: remap the
|
|
generic light tokens (--color-paper, --color-cream, etc.) at the body class
|
|
so the inline visualizations from docs-visuals.css (.docs-viz-*) re-skin
|
|
into the dark theme without per-rule overrides.
|
|
|
|
Structure of this file mirrors the page structure:
|
|
1. Page scope + base
|
|
2. Sidebar (commands rail)
|
|
3. /docs index — categories + command tiles
|
|
4. /docs/:slug — breadcrumb, hero, related-commands footer
|
|
5. Prose body — markdown rendering on lacquer
|
|
6. Footer
|
|
============================================================================ */
|
|
|
|
@import "./kinpaku-tokens.css";
|
|
@import "./divider-patterns.css";
|
|
|
|
|
|
/* ============================================================================
|
|
1. PAGE SCOPE + BASE
|
|
============================================================================ */
|
|
|
|
.docs-kinpaku {
|
|
/* Surface/text/accent/font tokens default to kinpaku at :root now
|
|
(tokens.css), so the embedded docs-viz visualizations inherit dark
|
|
surfaces without a per-page remap. Only the --ks-muted alias (read by
|
|
name in this file) and the page shell remain. */
|
|
--ks-muted: var(--ks-text-muted);
|
|
--docs-accent: var(--ks-kinpaku);
|
|
--docs-accent-hover: var(--ks-kinpaku-pale);
|
|
--docs-accent-line: oklch(78% 0.12 82 / 0.42);
|
|
--docs-accent-wash: oklch(77% 0.13 82 / 0.10);
|
|
--docs-brand-accent: var(--ks-kinpaku);
|
|
--docs-panel-bg: var(--ks-lacquer-raised);
|
|
--docs-panel-hover-bg: oklch(11% 0.012 82);
|
|
--docs-row-bg: var(--ks-lacquer-raised);
|
|
--docs-row-hover-bg: oklch(13% 0.012 82);
|
|
|
|
background:
|
|
linear-gradient(180deg, oklch(7% 0.006 95), oklch(4% 0.004 95));
|
|
color: var(--ks-text);
|
|
font-family: var(--ks-font);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
html.light .docs-kinpaku {
|
|
--ks-champagne: oklch(16% 0 0);
|
|
--ks-text: oklch(24% 0 0);
|
|
--ks-text-muted: oklch(42% 0 0);
|
|
--ks-text-faint: oklch(55% 0 0);
|
|
--ks-rule: oklch(20% 0 0 / 0.12);
|
|
--docs-accent: var(--ks-patina);
|
|
--docs-accent-hover: var(--ks-patina-deep);
|
|
--docs-accent-line: oklch(70% 0.12 188 / 0.36);
|
|
--docs-accent-wash: oklch(70% 0.12 188 / 0.08);
|
|
--docs-brand-accent: var(--ks-kinpaku);
|
|
--docs-panel-bg: oklch(100% 0 0);
|
|
--docs-panel-hover-bg: color-mix(in oklch, oklch(100% 0 0), var(--docs-accent) 4%);
|
|
--docs-row-bg: oklch(100% 0 0);
|
|
--docs-row-hover-bg: color-mix(in oklch, oklch(100% 0 0), var(--docs-accent) 3%);
|
|
background: linear-gradient(180deg, var(--ks-lacquer), var(--ks-lacquer-deep));
|
|
}
|
|
|
|
.docs-kinpaku a {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Page reset: the docs layout is its own full-bleed grid, no Base.astro
|
|
measure cap. */
|
|
.docs-kinpaku.skills-layout-page main#main {
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-layout {
|
|
display: grid;
|
|
grid-template-columns: 240px minmax(0, 1fr);
|
|
gap: clamp(40px, 4vw, 72px);
|
|
padding: 0 clamp(22px, 4vw, 56px);
|
|
align-items: start;
|
|
max-width: 1500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.docs-kinpaku .skills-layout {
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
2. SIDEBAR — commands rail
|
|
|
|
Sticky rail. Command names use the main UI family; monospace is reserved
|
|
for literal commands and code, not navigation.
|
|
============================================================================ */
|
|
|
|
.docs-kinpaku .skills-sidebar {
|
|
position: sticky;
|
|
top: 86px;
|
|
align-self: start;
|
|
max-height: calc(100vh - 86px);
|
|
overflow-y: auto;
|
|
padding: 48px 0 64px;
|
|
border-right: 1px solid var(--ks-rule);
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--ks-rule) transparent;
|
|
}
|
|
|
|
@media (min-width: 961px) {
|
|
.docs-kinpaku .skills-sidebar {
|
|
min-height: calc(100vh - 86px);
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar::-webkit-scrollbar-thumb {
|
|
background: var(--ks-rule);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-inner {
|
|
padding-right: 22px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-label {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
border: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-group {
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-category {
|
|
display: block;
|
|
font-family: var(--ks-font);
|
|
font-size: 0.72rem;
|
|
font-weight: 650;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--docs-accent);
|
|
margin-bottom: 10px;
|
|
padding: 0 0 0 14px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-list li {
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-list a {
|
|
display: block;
|
|
padding: 5px 0 5px 12px;
|
|
border-left: 2px solid transparent;
|
|
font-family: var(--ks-font);
|
|
font-size: 0.94rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: var(--ks-text);
|
|
text-decoration: none;
|
|
transition: color 160ms var(--ks-ease),
|
|
border-color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-list a:hover {
|
|
color: var(--docs-accent-hover);
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-list a[aria-current="page"] {
|
|
color: var(--docs-accent);
|
|
font-weight: 600;
|
|
border-left-color: var(--docs-accent);
|
|
}
|
|
|
|
|
|
/* Mobile: collapse the sidebar behind a toggle. */
|
|
@media (max-width: 960px) {
|
|
.docs-kinpaku .skills-sidebar {
|
|
position: static;
|
|
max-height: none;
|
|
min-height: 0;
|
|
overflow: visible;
|
|
padding: 18px 0 0;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 12px 0;
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--ks-text-muted);
|
|
font-family: var(--ks-font);
|
|
font-size: 0.92rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-toggle-chevron {
|
|
transition: transform 220ms var(--ks-ease);
|
|
color: var(--docs-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-toggle[aria-expanded="true"] .skills-sidebar-toggle-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-inner {
|
|
display: none;
|
|
padding: 14px 0 24px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-sidebar-toggle[aria-expanded="true"] + .skills-sidebar-inner {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
3. /docs INDEX
|
|
|
|
Sections, in render order:
|
|
a. Starter hero
|
|
b. Intent chooser
|
|
c. Live mode callout
|
|
d. A typical session (linear workflow of 4 commands)
|
|
e. Pairs and chains (relational schema)
|
|
f. Full reference (cheatsheet by lifecycle phase)
|
|
============================================================================ */
|
|
|
|
.docs-kinpaku .docs-index {
|
|
padding: clamp(34px, 5vw, 70px) 0 clamp(80px, 10vw, 140px);
|
|
}
|
|
|
|
|
|
/* a. Starter rail ------------------------------------------------------ */
|
|
|
|
.docs-kinpaku .docs-start-rail {
|
|
display: grid;
|
|
gap: 28px;
|
|
margin-bottom: clamp(44px, 6vw, 72px);
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.docs-kinpaku .docs-index {
|
|
padding-top: 22px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-title {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-head {
|
|
display: grid;
|
|
gap: 14px;
|
|
max-width: 780px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-title {
|
|
font-family: var(--ks-font);
|
|
font-style: normal;
|
|
font-weight: 650;
|
|
font-size: 2.6rem;
|
|
line-height: 1.12;
|
|
letter-spacing: 0;
|
|
color: var(--ks-champagne);
|
|
margin: 0;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-title span {
|
|
color: var(--docs-accent);
|
|
font-family: var(--ks-mono);
|
|
font-weight: 500;
|
|
font-size: 0.82em;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-lede {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--ks-text);
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
/* Shared section scaffolding for the index sections ---------------- */
|
|
|
|
.docs-kinpaku .docs-chooser-section,
|
|
.docs-kinpaku .docs-manual-section,
|
|
.docs-kinpaku .docs-live,
|
|
.docs-kinpaku .docs-flow-section,
|
|
.docs-kinpaku .docs-chains-section,
|
|
.docs-kinpaku .docs-reference-section {
|
|
margin-bottom: clamp(48px, 6vw, 76px);
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-title,
|
|
.docs-kinpaku .docs-manual-title,
|
|
.docs-kinpaku .docs-live-title,
|
|
.docs-kinpaku .docs-flow-title,
|
|
.docs-kinpaku .docs-chains-title,
|
|
.docs-kinpaku .docs-reference-title {
|
|
font-family: var(--ks-font);
|
|
font-style: normal;
|
|
font-weight: 650;
|
|
font-size: 1.5rem;
|
|
line-height: 1.25;
|
|
letter-spacing: 0;
|
|
color: var(--ks-champagne);
|
|
margin: 0 0 12px;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-lede,
|
|
.docs-kinpaku .docs-manual-sub,
|
|
.docs-kinpaku .docs-flow-sub,
|
|
.docs-kinpaku .docs-chains-sub {
|
|
font-size: 1rem;
|
|
line-height: 1.65;
|
|
color: var(--ks-text);
|
|
margin: 0;
|
|
max-width: 52ch;
|
|
}
|
|
|
|
|
|
/* Quick start rail ----------------------------------------------------- */
|
|
|
|
.docs-kinpaku .docs-start-rail-sequence {
|
|
display: grid;
|
|
gap: clamp(12px, 1.8vw, 18px);
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-steps {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
@media (max-width: 940px) {
|
|
.docs-kinpaku .docs-start-rail-steps {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-step {
|
|
display: grid;
|
|
grid-template-rows: auto auto minmax(3.2em, auto) auto;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
padding: 18px 20px 20px;
|
|
background: var(--docs-row-bg);
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-num {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.72rem;
|
|
line-height: 1.1;
|
|
letter-spacing: 0.18em;
|
|
color: var(--docs-accent);
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-label {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.66rem;
|
|
line-height: 1.1;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-command {
|
|
display: block;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.94rem;
|
|
line-height: 1.45;
|
|
color: var(--docs-accent-hover);
|
|
min-height: 2.8em;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-step {
|
|
grid-template-columns: minmax(28px, auto) minmax(0, 1fr);
|
|
grid-template-rows: auto auto auto;
|
|
column-gap: 12px;
|
|
row-gap: 9px;
|
|
padding: 18px 20px 20px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-num {
|
|
grid-column: 1;
|
|
grid-row: 1 / 4;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-label,
|
|
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-command,
|
|
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-line {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-line {
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-note {
|
|
margin: 20px 0 0;
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-note a {
|
|
color: var(--docs-accent);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--docs-accent-line);
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-note a:hover {
|
|
color: var(--docs-accent-hover);
|
|
border-bottom-color: var(--docs-accent-hover);
|
|
}
|
|
|
|
@media (max-width: 940px) {
|
|
.docs-kinpaku .docs-start-rail-step,
|
|
.docs-kinpaku .docs-start-rail-step:last-child {
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.docs-kinpaku .docs-start-rail-command {
|
|
min-height: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* b. Intent chooser ---------------------------------------------------- */
|
|
|
|
.docs-kinpaku .docs-chooser-head,
|
|
.docs-kinpaku .docs-manual-head {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-list {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
border-top: 0;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-list-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 7px 18px;
|
|
align-items: center;
|
|
padding: 18px 20px;
|
|
background: var(--docs-row-bg);
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color 160ms var(--ks-ease),
|
|
background 160ms var(--ks-ease),
|
|
color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-list-row:hover {
|
|
background: var(--docs-row-hover-bg);
|
|
border-color: var(--docs-accent-line);
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-list-need {
|
|
font-size: 0.98rem;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-list-command {
|
|
display: inline-flex;
|
|
justify-self: end;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.74rem;
|
|
color: var(--docs-accent-hover);
|
|
line-height: 1.3;
|
|
padding: 5px 8px;
|
|
background: var(--docs-accent-wash);
|
|
border: 1px solid var(--docs-accent-line);
|
|
border-radius: 5px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.docs-kinpaku .docs-chooser-list-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chooser-list-command {
|
|
justify-self: start;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
|
|
/* c. Live mode callout ------------------------------------------------- */
|
|
|
|
.docs-kinpaku .docs-live {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
|
|
gap: clamp(36px, 5vw, 64px);
|
|
align-items: center;
|
|
padding: 0;
|
|
}
|
|
|
|
@media (max-width: 880px) {
|
|
.docs-kinpaku .docs-live {
|
|
grid-template-columns: 1fr;
|
|
gap: 32px;
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-cta {
|
|
margin: 26px 0 0;
|
|
}
|
|
|
|
/* Static browser frame mock. Light, low-shadow frame with a precise target
|
|
outline and mock action bar underneath. No animation; this is a teaching
|
|
diagram, not a demo. */
|
|
.docs-kinpaku .docs-live-figure {
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-frame {
|
|
position: relative;
|
|
background: var(--ks-lacquer-raised);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
box-shadow: 0 14px 30px oklch(0% 0 0 / 0.08);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-chrome {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 14px;
|
|
background: transparent;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: var(--ks-rule);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-url {
|
|
margin-left: 12px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.72rem;
|
|
color: var(--ks-text-muted);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-stage {
|
|
position: relative;
|
|
padding: 38px 28px 28px;
|
|
min-height: 220px;
|
|
background: transparent;
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-target {
|
|
position: relative;
|
|
padding: 22px 24px;
|
|
border: 1px solid var(--docs-accent-line);
|
|
border-radius: 2px;
|
|
background: var(--ks-lacquer);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-target-title {
|
|
font-family: var(--ks-font-display);
|
|
font-style: normal;
|
|
font-weight: var(--ks-type-headline-weight);
|
|
font-size: 1.5rem;
|
|
line-height: 1.15;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-target-sub {
|
|
margin-top: 8px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--docs-accent-hover);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-bar {
|
|
margin-top: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 10px 14px;
|
|
background: var(--ks-lacquer);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 2px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.74rem;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-bar-counter {
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-bar-accept {
|
|
margin-left: auto;
|
|
color: var(--docs-accent-hover);
|
|
}
|
|
|
|
.docs-kinpaku .docs-live-bar-divider {
|
|
width: 1px;
|
|
align-self: stretch;
|
|
background: var(--ks-rule);
|
|
margin-left: auto;
|
|
}
|
|
|
|
|
|
/* d. A typical session (linear flow of commands) ----------------------- */
|
|
|
|
.docs-kinpaku .docs-flow-head {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
}
|
|
|
|
@media (max-width: 880px) {
|
|
.docs-kinpaku .docs-flow {
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-step {
|
|
display: contents;
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-link {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 8px;
|
|
padding: 22px 22px 24px;
|
|
background: var(--docs-panel-bg);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 2px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color 180ms var(--ks-ease),
|
|
background 180ms var(--ks-ease);
|
|
min-height: 100%;
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-link:hover {
|
|
border-color: var(--docs-accent-line);
|
|
background: var(--docs-panel-hover-bg);
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-verb {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.66rem;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
color: var(--docs-accent);
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-cmd {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.94rem;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-tag {
|
|
font-size: 0.86rem;
|
|
line-height: 1.45;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-arrow {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 36px;
|
|
color: var(--docs-accent);
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-arrow svg {
|
|
width: 24px;
|
|
height: 8px;
|
|
}
|
|
|
|
@media (max-width: 880px) {
|
|
.docs-kinpaku .docs-flow-arrow {
|
|
width: 100%;
|
|
height: 18px;
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-alt {
|
|
margin: 22px 0 0;
|
|
font-family: var(--ks-font);
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
color: var(--ks-text-muted);
|
|
max-width: 60ch;
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-alt a {
|
|
color: var(--docs-accent);
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.88em;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--docs-accent-line);
|
|
transition: border-color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .docs-flow-alt a:hover {
|
|
color: var(--docs-accent-hover);
|
|
border-bottom-color: var(--docs-accent-hover);
|
|
}
|
|
|
|
|
|
/* e. Pairs and chains -------------------------------------------------- */
|
|
|
|
.docs-kinpaku .docs-chains-head {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chains-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.docs-kinpaku .docs-chains-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-chain {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 28px 28px 30px;
|
|
background: var(--docs-panel-bg);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chain-formula {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 14px;
|
|
margin: 0;
|
|
font-family: var(--ks-mono);
|
|
font-size: 1rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chain-cmd {
|
|
color: var(--docs-accent);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .docs-chain-cmd:hover {
|
|
color: var(--docs-accent-hover);
|
|
border-bottom-color: var(--docs-accent-hover);
|
|
}
|
|
|
|
.docs-kinpaku .docs-chain-arrow {
|
|
color: var(--docs-accent);
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.docs-kinpaku .docs-chain-line {
|
|
margin: 0;
|
|
font-size: 0.94rem;
|
|
line-height: 1.5;
|
|
color: var(--ks-text);
|
|
}
|
|
|
|
|
|
/* f. Full reference (cheatsheet) --------------------------------------- */
|
|
|
|
.docs-kinpaku .docs-reference-head {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 36px 48px;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.docs-kinpaku .docs-reference {
|
|
grid-template-columns: 1fr;
|
|
gap: 32px;
|
|
}
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-group {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-cat {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
margin: 0 0 6px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-count {
|
|
color: var(--ks-text-faint);
|
|
font-size: 0.86em;
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-row {
|
|
display: grid;
|
|
grid-template-columns: 96px minmax(0, 1fr);
|
|
align-items: baseline;
|
|
gap: 14px;
|
|
padding: 4px 0;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-row:hover .docs-reference-name {
|
|
color: var(--docs-accent-hover);
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-row:hover .docs-reference-line {
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-name {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.92rem;
|
|
color: var(--ks-text);
|
|
transition: color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .docs-reference-line {
|
|
font-size: 0.9rem;
|
|
line-height: 1.45;
|
|
color: var(--ks-text-muted);
|
|
transition: color 160ms var(--ks-ease);
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
4. /docs/:slug — breadcrumb, hero, related-commands footer
|
|
============================================================================ */
|
|
|
|
.docs-kinpaku .skills-main {
|
|
min-width: 0;
|
|
padding: 48px 0 clamp(80px, 10vw, 140px);
|
|
}
|
|
|
|
.docs-kinpaku .skills-main--docs-index {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.docs-kinpaku .skills-detail {
|
|
max-width: 900px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-muted);
|
|
margin: 0 0 36px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-breadcrumb a {
|
|
color: var(--ks-kinpaku);
|
|
text-decoration: none;
|
|
transition: color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .skills-breadcrumb a:hover {
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
.docs-kinpaku .skills-breadcrumb span[aria-hidden] {
|
|
color: var(--ks-text-faint);
|
|
}
|
|
|
|
|
|
/* Hero — eyebrow (category), title (/impeccable name), lede. */
|
|
.docs-kinpaku .sub-page-header {
|
|
margin-bottom: clamp(40px, 5vw, 64px);
|
|
}
|
|
|
|
.docs-kinpaku .sub-page-eyebrow {
|
|
display: block;
|
|
font-family: var(--ks-mono);
|
|
font-size: var(--ks-type-eyebrow-size);
|
|
letter-spacing: var(--ks-type-eyebrow-track);
|
|
text-transform: uppercase;
|
|
color: var(--ks-kinpaku);
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
/* Command name (h1) — display scale, kinpaku gold so it carries the
|
|
page identity. */
|
|
.docs-kinpaku .sub-page-title {
|
|
font-family: var(--ks-font-display);
|
|
font-weight: var(--ks-type-display-weight);
|
|
font-size: var(--ks-type-display-size);
|
|
line-height: var(--ks-type-display-line);
|
|
letter-spacing: var(--ks-type-display-track);
|
|
color: var(--ks-kinpaku);
|
|
margin: 0 0 20px;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.docs-kinpaku .sub-page-lede {
|
|
font-size: 1.125rem;
|
|
line-height: 1.65;
|
|
color: var(--ks-text);
|
|
margin: 0;
|
|
max-width: 56ch;
|
|
}
|
|
|
|
|
|
/* Related commands footer — chips with relation label + command name. */
|
|
.docs-kinpaku .skills-relationships {
|
|
margin-top: clamp(56px, 7vw, 88px);
|
|
padding-top: 32px;
|
|
border-top: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.docs-kinpaku .skills-relationships-title {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-kinpaku);
|
|
font-weight: 400;
|
|
margin: 0 0 18px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-relationships-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.docs-kinpaku .skills-relationship-chip {
|
|
display: inline-grid;
|
|
grid-auto-flow: column;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 2px;
|
|
background: var(--ks-lacquer-raised);
|
|
text-decoration: none;
|
|
transition: border-color 180ms var(--ks-ease),
|
|
background 180ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .skills-relationship-chip:hover {
|
|
border-color: var(--ks-kinpaku);
|
|
background: oklch(11% 0.012 82);
|
|
}
|
|
|
|
.docs-kinpaku .skills-relationship-label {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.64rem;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-text-faint);
|
|
}
|
|
|
|
.docs-kinpaku .skills-relationship-name {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.88rem;
|
|
color: var(--ks-kinpaku);
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
5. PROSE BODY — markdown rendering on lacquer
|
|
============================================================================ */
|
|
|
|
/* Vertical rhythm.
|
|
|
|
One base unit: 1em (≈ 16-17px at the prose font-size). Everything is a
|
|
multiple of that.
|
|
|
|
- paragraph-to-paragraph (sibling) = 1em
|
|
- paragraph-to-list = 1em (sibling rule)
|
|
- list-item-to-list-item = 0.25em (members of one thought)
|
|
- list-to-paragraph = 1em (sibling rule)
|
|
- block (pre/blockquote/hr) to neighbor = 1.4em (breathes more)
|
|
- h2 above body = 1.6em (anchor, not chasm)
|
|
- h3 above body = 1.2em
|
|
- heading to its body = 0.4em (kept tight)
|
|
*/
|
|
|
|
.docs-kinpaku .prose {
|
|
font-family: var(--ks-font);
|
|
font-size: 1.02rem;
|
|
line-height: 1.7;
|
|
color: var(--ks-text);
|
|
max-width: 76ch;
|
|
}
|
|
|
|
/* Single source of truth for margins:
|
|
- `.prose > *` zeros every direct child's margin (universal selector,
|
|
beats browser default but loses to element-selector rules).
|
|
- `.prose > * + *` adds the sibling gap.
|
|
- Element-specific overrides (h2, h3, h4) inherit from the same family.
|
|
Element-selector rules elsewhere in this file MUST NOT set `margin`
|
|
shorthand or `margin-top` — they'd outrank the sibling rule and starve
|
|
blocks of their spacing (this happened with the list + p combo). */
|
|
.docs-kinpaku .prose > * {
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose > * + * {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
/* Blocks (pre, blockquote, hr) get extra breath above and below. */
|
|
.docs-kinpaku .prose > pre + *,
|
|
.docs-kinpaku .prose > * + pre,
|
|
.docs-kinpaku .prose > blockquote + *,
|
|
.docs-kinpaku .prose > * + blockquote,
|
|
.docs-kinpaku .prose > .docs-note + *,
|
|
.docs-kinpaku .prose > * + .docs-note,
|
|
.docs-kinpaku .prose > hr + *,
|
|
.docs-kinpaku .prose > * + hr {
|
|
margin-top: 1.4em;
|
|
}
|
|
|
|
/* Note / callout block for prose docs (e.g. the GitHub Copilot built-in
|
|
aside under Step 1). Full hairline frame + faint gold-tinted ground so it
|
|
reads as an aside without a one-sided accent stripe (the side-tab tell the
|
|
detector flags). The gold icon carries the accent. */
|
|
.docs-kinpaku .prose .docs-note {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
background: color-mix(in oklch, var(--ks-kinpaku) 6%, var(--ks-lacquer-raised));
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 4px;
|
|
font-size: 0.95rem;
|
|
line-height: 1.55;
|
|
color: var(--ks-text);
|
|
}
|
|
.docs-kinpaku .prose .docs-note-icon {
|
|
flex: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 1px;
|
|
color: var(--ks-kinpaku);
|
|
}
|
|
.docs-kinpaku .prose .docs-note-icon svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
fill: currentColor;
|
|
}
|
|
.docs-kinpaku .prose .docs-note-text {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
.docs-kinpaku .prose .docs-note-text strong {
|
|
color: var(--ks-champagne);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.docs-kinpaku .prose h1,
|
|
.docs-kinpaku .prose h2,
|
|
.docs-kinpaku .prose h3,
|
|
.docs-kinpaku .prose h4 {
|
|
font-family: var(--ks-font-display);
|
|
color: var(--ks-champagne);
|
|
font-style: normal;
|
|
line-height: 1.2;
|
|
scroll-margin-top: 96px;
|
|
/* Intentionally no margin — see `.prose > *` rule above. */
|
|
}
|
|
|
|
.docs-kinpaku .prose > * + h2 {
|
|
margin-top: 1.6em;
|
|
}
|
|
|
|
.docs-kinpaku .prose > * + h3 {
|
|
margin-top: 1.2em;
|
|
}
|
|
|
|
.docs-kinpaku .prose > * + h4 {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.docs-kinpaku .prose > h2 + *,
|
|
.docs-kinpaku .prose > h3 + *,
|
|
.docs-kinpaku .prose > h4 + * {
|
|
margin-top: 0.4em;
|
|
}
|
|
|
|
/* h2/h3 follow the DESIGN.md type scale exactly:
|
|
- h2 (Headline): Alumni Sans, clamp 2.6-3.4rem, weight 600
|
|
- h3 (Title): Albert Sans, 1.18rem, weight 500
|
|
- h4: Albert Sans, 1rem, weight 600 (utility)
|
|
*/
|
|
.docs-kinpaku .prose h2 {
|
|
font-family: var(--ks-font-display);
|
|
font-size: var(--ks-type-headline-size);
|
|
font-weight: var(--ks-type-headline-weight);
|
|
line-height: var(--ks-type-headline-line);
|
|
letter-spacing: -0.005em;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.docs-kinpaku .prose h3 {
|
|
font-family: var(--ks-font);
|
|
font-size: var(--ks-type-title-size);
|
|
font-weight: var(--ks-type-title-weight);
|
|
line-height: var(--ks-type-title-line);
|
|
color: var(--ks-kinpaku);
|
|
}
|
|
|
|
.docs-kinpaku .prose h4 {
|
|
font-family: var(--ks-font);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
/* Lists. Margins are handled by the universal `> *` reset + sibling rule
|
|
above; only set list-specific padding and line-height here. */
|
|
.docs-kinpaku .prose ul,
|
|
.docs-kinpaku .prose ol {
|
|
padding-left: 1.4rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.docs-kinpaku .prose li + li {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.docs-kinpaku .prose li::marker {
|
|
color: var(--ks-kinpaku);
|
|
}
|
|
|
|
/* When a list item wraps multi-block content, hug its internals. */
|
|
.docs-kinpaku .prose li > p {
|
|
margin: 0;
|
|
}
|
|
.docs-kinpaku .prose li > * + * {
|
|
margin-top: 0.35em;
|
|
}
|
|
|
|
.docs-kinpaku .prose a {
|
|
color: var(--ks-kinpaku);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 4px;
|
|
text-decoration-color: oklch(78% 0.12 82 / 0.4);
|
|
transition: text-decoration-color 160ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .prose a:hover {
|
|
text-decoration-color: var(--ks-kinpaku);
|
|
}
|
|
|
|
.docs-kinpaku .prose strong {
|
|
color: var(--ks-champagne);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.docs-kinpaku .prose em {
|
|
font-style: italic;
|
|
color: var(--ks-champagne);
|
|
}
|
|
|
|
/* Inline code — champagne mono on a graphite chip. The chip is the
|
|
affordance; color stays neutral so a paragraph full of inline
|
|
references doesn't vibrate. Kinpaku is reserved for links, h3s,
|
|
eyebrows, and CTAs. `--ks-graphite-2` (≈19% lightness) reads as the
|
|
neutral gray the chip wants without picking up cool tint. */
|
|
.docs-kinpaku .prose code {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.84em;
|
|
color: var(--ks-code-fg);
|
|
background: var(--ks-code-bg);
|
|
border: 0;
|
|
padding: 0.14em 0.36em;
|
|
border-radius: var(--ks-code-radius);
|
|
}
|
|
|
|
.docs-kinpaku .prose :not(pre) > code {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
html.light .docs-kinpaku .prose code {
|
|
background: oklch(25% 0.02 95 / 0.08);
|
|
}
|
|
|
|
/* Inline code that is itself a link — get the kinpaku cue back, since
|
|
the link semantic is the meaningful one. */
|
|
.docs-kinpaku .prose a code {
|
|
color: var(--ks-code-cmd);
|
|
}
|
|
|
|
/* Fenced code blocks — deep lacquer terminal. Astro/Shiki emits dual-theme
|
|
CSS variables from site/lib/impeccable-shiki-theme.mjs; the wrapper keeps
|
|
the surface in the kinpaku token system while token spans swap by theme. */
|
|
.docs-kinpaku .prose pre,
|
|
.docs-kinpaku .prose .code-block,
|
|
.docs-kinpaku .prose pre.astro-code {
|
|
margin: 0;
|
|
padding: 22px 24px;
|
|
background: var(--ks-code-block-bg) !important;
|
|
color: var(--ks-code-block-fg) !important;
|
|
border: 1px solid var(--ks-code-block-border);
|
|
border-radius: var(--ks-code-block-radius);
|
|
overflow-x: auto;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.84rem;
|
|
line-height: 1.6;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.docs-kinpaku .prose pre.astro-code span {
|
|
color: var(--shiki-dark, var(--ks-code-block-fg));
|
|
}
|
|
|
|
html.light .docs-kinpaku .prose pre.astro-code span {
|
|
color: var(--shiki-light, var(--ks-code-block-fg));
|
|
}
|
|
|
|
.docs-kinpaku .prose > * + pre.astro-code,
|
|
.docs-kinpaku .prose > * + pre,
|
|
.docs-kinpaku .prose > * + .code-block-wrap {
|
|
margin-top: 1.25em;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(p, ul, ol) + :is(pre.astro-code, pre, .code-block-wrap) {
|
|
margin-top: 1.25em;
|
|
}
|
|
|
|
.docs-kinpaku .prose pre code,
|
|
.docs-kinpaku .prose .code-block code {
|
|
background: transparent;
|
|
border: 0;
|
|
padding: 0;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
border-radius: 0;
|
|
}
|
|
|
|
html.light .docs-kinpaku .prose pre code,
|
|
html.light .docs-kinpaku .prose .code-block code {
|
|
background: transparent;
|
|
}
|
|
|
|
.docs-kinpaku .prose .code-block-wrap {
|
|
position: relative;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Copy button on dark — match the kinpaku button voice. */
|
|
.docs-kinpaku .code-block-copy {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
padding: 4px 10px;
|
|
background: var(--ks-lacquer-raised);
|
|
border: 1px solid var(--ks-rule);
|
|
color: var(--ks-text-muted);
|
|
border-radius: 2px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.62rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity 180ms var(--ks-ease),
|
|
border-color 180ms var(--ks-ease),
|
|
color 180ms var(--ks-ease);
|
|
}
|
|
|
|
.docs-kinpaku .code-block-wrap:hover .code-block-copy,
|
|
.docs-kinpaku .code-block-copy:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.docs-kinpaku .code-block-copy::before {
|
|
content: "Copy";
|
|
}
|
|
|
|
.docs-kinpaku .code-block-copy:hover {
|
|
border-color: var(--ks-kinpaku);
|
|
color: var(--ks-kinpaku);
|
|
}
|
|
|
|
.docs-kinpaku .code-block-copy.is-copied {
|
|
opacity: 1;
|
|
border-color: var(--ks-kinpaku);
|
|
color: var(--ks-lacquer-deep);
|
|
background: var(--ks-kinpaku);
|
|
}
|
|
|
|
.docs-kinpaku .code-block-copy.is-copied::before {
|
|
content: "Copied";
|
|
}
|
|
|
|
.docs-kinpaku .prose blockquote {
|
|
margin: 0;
|
|
padding: 6px 0 6px 22px;
|
|
border-block: 0;
|
|
border-left: 2px solid var(--ks-kinpaku);
|
|
color: var(--ks-text);
|
|
font-style: italic;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-note {
|
|
padding: 4px 0 4px 20px;
|
|
border-left: 2px solid var(--ks-kinpaku);
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
.docs-kinpaku .prose hr {
|
|
border: 0;
|
|
height: 1px;
|
|
background: var(--ks-rule);
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.docs-kinpaku .prose th,
|
|
.docs-kinpaku .prose td {
|
|
padding: 10px 14px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.docs-kinpaku .prose th {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ks-kinpaku);
|
|
font-weight: 500;
|
|
border-bottom-color: var(--ks-kinpaku);
|
|
}
|
|
|
|
.docs-kinpaku .prose #what-goes-where + table td:first-child code {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.docs-kinpaku .prose table {
|
|
display: block;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.docs-kinpaku .prose th,
|
|
.docs-kinpaku .prose td {
|
|
min-width: 11rem;
|
|
}
|
|
}
|
|
|
|
/* Design Context guide -------------------------------------------------
|
|
|
|
The context page needs a quick mental model before it becomes reference
|
|
prose. Keep these modules small, sharp, and readable inside the normal
|
|
documentation measure.
|
|
*/
|
|
|
|
.docs-kinpaku .prose .docs-context-flow {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 1px;
|
|
background: var(--ks-rule);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-source,
|
|
.docs-kinpaku .prose .docs-context-flow-output {
|
|
display: grid;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
padding: 18px;
|
|
background: var(--ks-lacquer-raised);
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-source--generated {
|
|
background: var(--ks-lacquer-raised);
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-output {
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
|
|
column-gap: 20px;
|
|
align-items: center;
|
|
background: var(--ks-lacquer);
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-label {
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.62rem;
|
|
line-height: 1.2;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--docs-accent);
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-source strong,
|
|
.docs-kinpaku .prose .docs-context-flow-output strong {
|
|
color: var(--ks-champagne);
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.84rem;
|
|
line-height: 1.35;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-source span:last-child,
|
|
.docs-kinpaku .prose .docs-context-flow-output span:last-child {
|
|
color: var(--ks-text-muted);
|
|
font-size: 0.9rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-output .docs-context-flow-label,
|
|
.docs-kinpaku .prose .docs-context-flow-output span:last-child {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-output strong {
|
|
grid-column: 2;
|
|
grid-row: 1 / 3;
|
|
align-self: center;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) {
|
|
border-top: 1px solid var(--ks-rule);
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
padding: 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) + :is(.docs-context-details, .docs-prose-details) {
|
|
margin-top: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) summary {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 14px;
|
|
align-items: center;
|
|
padding: 16px 0;
|
|
color: var(--ks-champagne);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) summary::after {
|
|
content: "+";
|
|
font-family: var(--ks-mono);
|
|
color: var(--docs-accent);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details)[open] summary::after {
|
|
content: "-";
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) summary:focus-visible {
|
|
outline: 2px solid var(--ks-patina);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) > div {
|
|
display: grid;
|
|
gap: 0.8em;
|
|
padding: 0 0 18px;
|
|
color: var(--ks-text);
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) > div > * {
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose :is(.docs-context-details, .docs-prose-details) ul {
|
|
padding-left: 1.4rem;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.docs-kinpaku .prose .docs-context-flow {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-context-flow-output {
|
|
grid-column: auto;
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
|
|
/* Two-column editorial hero (when the command has a registered demo).
|
|
Demo on the left, h1 + lede on the right. Mirrors the old pre-Astro
|
|
layout: a slightly wider demo column (1.15fr) against a comfortable
|
|
text measure on the right (1fr). Collapses to single-column below
|
|
the breakpoint where the demo would be too cramped.
|
|
|
|
When there's no demo, the page renders the existing single-column
|
|
sub-page-header — no docs-hero wrapper, no grid. */
|
|
.docs-kinpaku .docs-hero--with-demo {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
|
|
gap: clamp(28px, 4vw, 48px);
|
|
align-items: center;
|
|
margin: 0 0 clamp(40px, 5vw, 64px);
|
|
}
|
|
|
|
@media (max-width: 880px) {
|
|
.docs-kinpaku .docs-hero--with-demo {
|
|
grid-template-columns: 1fr;
|
|
gap: 32px;
|
|
}
|
|
}
|
|
|
|
/* In the two-column hero, the h1 + lede sits in the right column and
|
|
doesn't need its own bottom margin (the grid gap handles spacing). */
|
|
.docs-kinpaku .docs-hero--with-demo .sub-page-header {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Command demo (rendered client-side by Doc.astro from
|
|
site/scripts/demos/commands/<id>.js). Same demos the homepage's
|
|
command carousel uses — one source of truth in the demo JS, two
|
|
surfaces that render from it.
|
|
|
|
Matches the homepage's dark dual-tone treatment: lacquer-raised
|
|
container with a subtle kinpaku-grid backing, then `before` and
|
|
`after` sides each picking up a different radial glow. The demo
|
|
content's `--color-*` tokens stay remapped to kinpaku (no local
|
|
light override) — shapes render light-on-dark and the kinpaku
|
|
accent shines. */
|
|
.docs-kinpaku .docs-command-demo {
|
|
margin: 0;
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background: var(--ks-lacquer-raised);
|
|
}
|
|
|
|
.docs-kinpaku .docs-command-demo :is(.split-comparison, .demo-split-comparison) {
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.docs-kinpaku .docs-command-demo .split-container {
|
|
height: 300px;
|
|
max-width: none;
|
|
border-radius: 0;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
background:
|
|
linear-gradient(90deg, oklch(78% 0.12 82 / 0.04) 1px, transparent 1px),
|
|
linear-gradient(180deg, oklch(78% 0.12 82 / 0.035) 1px, transparent 1px),
|
|
var(--ks-lacquer-raised);
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
.docs-kinpaku .docs-command-demo .split-before {
|
|
background:
|
|
linear-gradient(90deg, oklch(10% 0.006 95 / 0.92), oklch(12% 0.012 60 / 0.72)),
|
|
radial-gradient(circle at 28% 25%, oklch(78% 0.12 82 / 0.12), transparent 11rem);
|
|
}
|
|
|
|
.docs-kinpaku .docs-command-demo .split-after {
|
|
/* Doc.astro initSplitCompare uses skewAngle: 0 — vertical seam, not the
|
|
angled default from sub-pages.css / main.css. */
|
|
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
|
|
background: var(--ks-lacquer);
|
|
}
|
|
|
|
.docs-kinpaku .docs-command-demo .split-divider {
|
|
background: var(--ks-kinpaku);
|
|
box-shadow: 0 0 20px oklch(78% 0.12 82 / 0.4);
|
|
transform: translateX(-50%) !important;
|
|
}
|
|
|
|
.docs-kinpaku .docs-command-demo .demo-caption {
|
|
padding: 10px 16px;
|
|
font-family: var(--ks-mono);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.04em;
|
|
color: var(--ks-text-muted);
|
|
background: var(--ks-lacquer-deep);
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* Visualization wrappers inside the markdown body.
|
|
|
|
Default: .docs-viz-hero is a transparent layout container — no card
|
|
chrome, no border. The inner mock owns its own surface treatment, so
|
|
we don't get card-in-card.
|
|
|
|
When the wrapper contains a multi-tile group (.docs-viz-flow), apply
|
|
the tinted-plinth pattern from .ks-bento on the homepage:
|
|
- the wrapper becomes a graphite mat
|
|
- tiles sit on top in flat lacquer with no borders
|
|
- the gap between tiles is the plinth showing through as inset gutters
|
|
- depth contrast carries the edges; no double borders required */
|
|
|
|
.docs-kinpaku .prose .docs-viz-hero {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-viz-hero:has(.docs-viz-flow),
|
|
.docs-kinpaku .prose .docs-viz-hero:has(.docs-viz-variants) {
|
|
padding: 24px;
|
|
background: var(--ks-graphite-2);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-viz-flow {
|
|
gap: 8px;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-viz-flow-step,
|
|
.docs-kinpaku .prose .docs-viz-variant {
|
|
background: var(--ks-lacquer);
|
|
border: 0;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-viz-flow-step + .docs-viz-flow-step {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-viz-flow-step + .docs-viz-flow-step::before {
|
|
left: -8px;
|
|
width: 8px;
|
|
}
|
|
|
|
/* Accent / active states get a kinpaku-tinted fill instead of the
|
|
bordered/glow treatment from docs-visuals.css. */
|
|
.docs-kinpaku .prose .docs-viz-flow-step--accent,
|
|
.docs-kinpaku .prose .docs-viz-variant.is-active {
|
|
background: oklch(78% 0.12 82 / 0.16);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Per-variant theming in docs-visuals.css uses paper/cream/light-magenta
|
|
on the v1/v3 backgrounds — both off-brand here. Re-skin to lacquer
|
|
ramps so the variants still differ but stay kinpaku. */
|
|
.docs-kinpaku .prose .docs-viz-variant--v1 {
|
|
background: var(--ks-lacquer);
|
|
}
|
|
.docs-kinpaku .prose .docs-viz-variant--v3 {
|
|
background: var(--ks-lacquer-deep);
|
|
}
|
|
|
|
.docs-kinpaku .prose .docs-viz-caption {
|
|
margin-top: 16px;
|
|
color: var(--ks-text-muted);
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
6. FOOTER on dark surface
|
|
============================================================================ */
|
|
|
|
/* Footer chrome moved to kinpaku-kit.css (.kinpaku-chrome .site-footer). */
|