/* Impeccable kit — the global primitive vocabulary.
   Class names, values and states mirror the sources: the site kit
   (kinpaku-kit.css, documented in DESIGN.md §2) and the shipped extension
   surfaces (extension/shared/kinpaku.css, popup.css, panel.css, sidebar.css).
   Paper is the default ground; .theme-lacquer re-skins the same classes for
   the dark site theme. Reach for a primitive before inventing a class. */

/* ── Brand lockup ───────────────────────────────────────────── */
.ks-brand { display: inline-flex; align-items: center; gap: var(--ks-space-4); text-decoration: none; }
.ks-mark { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--ks-ink); }
.ks-mark svg { display: block; width: 100%; height: 100%; }
.ks-wordmark { font-family: var(--ks-font-wordmark); font-size: var(--ks-type-ui); font-weight: 600; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; color: var(--ks-ink); }
.theme-lacquer .ks-wordmark { font-weight: var(--ks-wordmark-weight); letter-spacing: var(--ks-wordmark-ls); font-size: var(--ks-wordmark-size); }
.theme-lacquer .ks-mark { color: var(--ks-kinpaku); }

/* ── Section scaffolding ────────────────────────────────────── */
.ks-section { width: 100%; max-width: var(--ks-container); margin-inline: auto; padding: var(--ks-space-2xl) var(--ks-gutter); }
.ks-section-head { display: flex; flex-direction: column; gap: var(--ks-space-sm); margin-bottom: var(--ks-space-lg); }
.ks-section-eyebrow { font-family: var(--ks-mono); font-size: var(--ks-eyebrow-size); font-weight: var(--ks-eyebrow-weight); letter-spacing: var(--ks-eyebrow-ls); text-transform: uppercase; color: var(--ks-text-muted); }
.ks-section-head h2 { margin: 0; font-family: var(--ks-headline-family); font-size: var(--ks-headline-size); font-weight: var(--ks-headline-weight); line-height: var(--ks-headline-lh); color: var(--ks-text-heading); }
.ks-section-sub { margin: 0; max-width: var(--ks-body-measure); font-size: var(--ks-body-size); line-height: var(--ks-body-lh); color: var(--ks-text-muted); }
.ks-subsection { margin-top: var(--ks-space-xl); }
.ks-subsection-label { font-family: var(--ks-mono); font-size: var(--ks-mono-label-size); letter-spacing: var(--ks-mono-label-ls); text-transform: uppercase; color: var(--ks-text-muted); }

/* ── Buttons ────────────────────────────────────────────────── */
.ks-button { display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; gap: var(--ks-space-3); min-height: 30px; padding: 7px 14px; border: 1px solid transparent; border-radius: var(--ks-radius-chip); font-family: inherit; font-size: var(--ks-type-label); font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color var(--ks-quick) var(--ks-ease), border-color var(--ks-quick) var(--ks-ease), color var(--ks-quick) var(--ks-ease), box-shadow var(--ks-quick) var(--ks-ease); }
.ks-button-lg { min-height: 58px; padding: 0 38px; font-size: var(--ks-text-15); }
.ks-button-primary { background: var(--ks-ink); border-color: var(--ks-ink); color: var(--ks-paper-raised); }
.ks-button-primary:hover { background: var(--ks-text); border-color: var(--ks-text); }
.ks-button-primary:active { background: oklch(8% 0 0); border-color: oklch(8% 0 0); }
.ks-button-secondary { background: var(--ks-paper-raised); border-color: var(--ks-edge); color: var(--ks-ink); box-shadow: var(--ks-cap-lift); }
.ks-button-secondary:hover { border-color: var(--ks-ink); }
.ks-button-secondary:active { background: var(--ks-gray); box-shadow: var(--ks-cap-press); }
.ks-button-ghost { background: transparent; border-color: transparent; color: var(--ks-text-muted); }
.ks-button-ghost:hover { color: var(--ks-ink); background: var(--ks-paper-deep); }
.ks-button[disabled], .ks-button-disabled { background: transparent; border-color: var(--ks-rule); color: var(--ks-text-mute-deep); box-shadow: none; cursor: default; }
.ks-button-arrow { display: inline-flex; width: 14px; height: 14px; }
.ks-button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-xs); }
.theme-lacquer .ks-button { border-radius: var(--ks-radius-xs); }
.theme-lacquer .ks-button-primary { background: var(--ks-kinpaku); border-color: var(--ks-kinpaku); color: var(--ks-on-gold); }
.theme-lacquer .ks-button-primary:hover { background: var(--ks-kinpaku-pale); border-color: var(--ks-kinpaku-pale); }
.theme-lacquer .ks-button-secondary { background: transparent; border-color: var(--ks-rule-strong); color: var(--ks-kinpaku); box-shadow: none; }
.theme-lacquer .ks-button-secondary:hover { border-color: var(--ks-patina); }
.theme-lacquer .ks-button-ghost { color: var(--ks-kinpaku); }
.ks-button:focus-visible, .ks-icon-button:focus-visible { outline: 2px solid var(--ks-patina); outline-offset: 2px; }

/* ── Icon button + tooltip ──────────────────────────────────── */
.ks-icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid transparent; border-radius: var(--ks-radius-chip); background: transparent; color: var(--ks-text-muted); cursor: pointer; transition: background-color var(--ks-quick) var(--ks-ease), border-color var(--ks-quick) var(--ks-ease), color var(--ks-quick) var(--ks-ease); }
.ks-icon-button svg { flex: none; }
.ks-icon-button:hover { background: var(--ks-paper-raised); border-color: var(--ks-rule); box-shadow: var(--ks-cap-lift); color: var(--ks-ink); }
.ks-icon-button:active { box-shadow: var(--ks-cap-press); }
.ks-icon-button.is-active { background: var(--ks-paper-raised); border-color: var(--ks-rule); box-shadow: var(--ks-cap-lift); color: var(--ks-ink); }
.ks-icon-button.is-active::after { content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--ks-kinpaku); box-shadow: var(--ks-led); }
.ks-icon-button.is-off { color: var(--ks-text-mute-deep); }
.ks-icon-button.is-copied { color: var(--ks-patina-deep); }
.ks-tooltip { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(0.97); transform-origin: top center; white-space: nowrap; padding: 4px 7px; border-radius: var(--ks-radius-chip); background: var(--ks-ink); color: var(--ks-paper); font-size: var(--ks-type-micro); opacity: 0; pointer-events: none; transition: opacity var(--ks-dur-tooltip) var(--ks-ease-out), transform var(--ks-dur-tooltip) var(--ks-ease-out); }
.ks-icon-button:hover .ks-tooltip, .ks-icon-button:focus-visible .ks-tooltip { opacity: 1; transform: translateX(-50%) scale(1); }

/* ── Cards ──────────────────────────────────────────────────── */
.ks-card { padding: var(--ks-space-md); border: 1px solid var(--ks-rule); border-radius: var(--ks-radius-sm); background: var(--ks-surface); color: var(--ks-text-body); }
.ks-card-title { margin: 0 0 var(--ks-space-4); font-size: var(--ks-title-size); font-weight: var(--ks-title-weight); line-height: var(--ks-title-lh); color: var(--ks-text-heading); }
.ks-card-meta { font-family: var(--ks-mono); font-size: var(--ks-text-11); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-text-muted); }

/* ── Bento ──────────────────────────────────────────────────── */
.ks-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; padding: 8px; background: var(--ks-surface-sunken); border: 1px solid var(--ks-rule); border-radius: var(--ks-radius-sm); }
.ks-bento-tile { grid-column: span 12; display: flex; flex-direction: column; gap: var(--ks-space-4); padding: var(--ks-space-sm); background: var(--ks-surface); border: 1px solid var(--ks-rule); border-radius: var(--ks-radius-xs); }
.ks-bento-tile--span-4 { grid-column: span 4; }
.ks-bento-tile--span-6 { grid-column: span 6; }
.ks-bento-tile--span-8 { grid-column: span 8; }
.ks-bento-num { font-family: var(--ks-mono); font-size: var(--ks-text-10); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ks-kinpaku-deep); }
.ks-bento-num[data-color="patina"] { color: var(--ks-patina-deep); }

/* ── Badge / Tag ────────────────────────────────────────────── */
.ks-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; padding: 0 8px; border: 1px solid var(--ks-rule); border-radius: var(--ks-radius-pill); background: var(--ks-paper-raised); font-size: var(--ks-type-micro); color: var(--ks-text-muted); }
.ks-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ks-gray-2); }
.ks-badge.is-detected { color: var(--ks-ink); }
.ks-badge.is-detected::before { background: var(--ks-kinpaku); box-shadow: var(--ks-led); }
.ks-badge.is-improved { color: var(--ks-patina-ink); }
.ks-badge.is-improved::before { background: var(--ks-patina); }
.ks-badge.is-ready::before { background: var(--ks-patina-deep); }
.ks-badge-row, .ks-tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-3); }
.ks-tag { display: inline-flex; align-items: center; gap: 5px; min-height: 16px; padding: 0 5px; border-radius: var(--ks-radius-chip); background: var(--ks-gray); color: var(--ks-text-muted); font-family: var(--ks-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.ks-tag.is-detected { background: var(--ks-kinpaku); color: var(--ks-on-gold); }
.ks-tag.is-improved { background: var(--ks-patina-pale); color: var(--ks-patina-ink); }
.ks-tag.is-ready { background: var(--ks-patina-deep); color: var(--ks-paper-raised); }
.ks-tag.is-neutral, .ks-tag.is-quiet { background: var(--ks-gray); color: var(--ks-text-muted); }

/* ── Form controls ──────────────────────────────────────────── */
.ks-form-sample { display: flex; flex-direction: column; gap: var(--ks-space-sm); }
.ks-field-label { font-size: var(--ks-type-label); color: var(--ks-text); }
.ks-select { min-height: 30px; padding: 6px 10px; border: 1px solid var(--ks-edge); border-radius: var(--ks-radius-chip); background: var(--ks-paper-raised); color: var(--ks-ink); font-family: inherit; font-size: var(--ks-type-label); box-shadow: var(--ks-cap-lift); transition: border-color var(--ks-quick) var(--ks-ease); }
.ks-select:hover { border-color: var(--ks-ink); }
.ks-checkbox { display: inline-flex; align-items: center; gap: 7px; padding: 2px 4px; border-radius: var(--ks-radius-chip); font-size: var(--ks-type-label); color: var(--ks-text); cursor: pointer; transition: background-color var(--ks-quick) var(--ks-ease); }
.ks-checkbox:hover { background: var(--ks-gray); }
.ks-checkbox input[type="checkbox"] { margin: 0; accent-color: var(--ks-patina-deep); }
.ks-toggle { display: inline-flex; align-items: center; gap: var(--ks-space-4); font-size: var(--ks-type-label); color: var(--ks-text); cursor: pointer; }
.ks-switch { position: relative; display: inline-block; width: 30px; height: 18px; flex: none; }
.ks-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ks-switch-track { position: absolute; inset: 0; border-radius: var(--ks-radius-pill); background: var(--ks-gray-2); box-shadow: var(--ks-track-recess); }
.ks-switch-track::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ks-paper-raised); box-shadow: var(--ks-cap-lift); transition: transform var(--ks-dur-hardware) var(--ks-ease-hardware); }
.ks-switch-track::after { content: ""; position: absolute; top: 7px; left: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--ks-gray-2); box-shadow: inset 0 1px 1px oklch(13% 0 0 / 0.18); transition: transform var(--ks-dur-hardware) var(--ks-ease-hardware), background-color var(--ks-quick) var(--ks-ease), box-shadow var(--ks-quick) var(--ks-ease); }
.ks-switch input:checked + .ks-switch-track::before, .ks-switch input:checked + .ks-switch-track::after { transform: translateX(12px); }
.ks-switch input:checked + .ks-switch-track::after { background: var(--ks-kinpaku); box-shadow: var(--ks-led); }
.ks-switch input:focus-visible + .ks-switch-track { outline: 2px solid var(--ks-patina); outline-offset: 2px; }

/* Segmented control: a recessed track carrying raised caps with a lit dot. */
.ks-segmented { display: inline-flex; align-self: flex-start; width: fit-content; gap: 2px; padding: 2px; border-radius: var(--ks-radius-chip); background: var(--ks-gray); box-shadow: var(--ks-track-recess); }
.ks-segmented button { position: relative; white-space: nowrap; padding: 3px 9px 3px 16px; border: none; border-radius: 2px; background: transparent; color: var(--ks-text-muted); font-family: inherit; font-size: var(--ks-type-micro); font-weight: 500; line-height: 1.4; cursor: pointer; transition: background-color var(--ks-quick) var(--ks-ease), color var(--ks-quick) var(--ks-ease), box-shadow var(--ks-quick) var(--ks-ease); }
.ks-segmented button::before { content: ""; position: absolute; top: 50%; left: 6px; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--ks-gray-2); box-shadow: inset 0 1px 1px oklch(13% 0 0 / 0.18); transition: background-color var(--ks-quick) var(--ks-ease), box-shadow var(--ks-quick) var(--ks-ease); }
.ks-segmented button:hover { color: var(--ks-ink); }
.ks-segmented button.active { background: var(--ks-paper-raised); box-shadow: var(--ks-cap-lift); color: var(--ks-ink); }
.ks-segmented button.active::before { background: var(--ks-kinpaku); box-shadow: var(--ks-led); }
.ks-segmented button:active { box-shadow: var(--ks-cap-press); transform: translateY(1px); }

/* ── Tabs ───────────────────────────────────────────────────── */
.ks-tabs { display: flex; flex-direction: column; gap: var(--ks-space-sm); }
.ks-tab-list { display: flex; gap: var(--ks-space-md); border-bottom: 1px solid var(--ks-rule); }
.ks-tab-list button { position: relative; padding: 0 0 8px; border: none; background: none; font-family: var(--ks-mono); font-size: var(--ks-text-11); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-text-muted); cursor: pointer; transition: color var(--ks-quick) var(--ks-ease); }
.ks-tab-list button:hover { color: var(--ks-ink); }
.ks-tab-list button.active { color: var(--ks-ink); }
.ks-tab-list button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ks-kinpaku); }
.ks-tab-panel { font-size: var(--ks-text-14); line-height: 1.6; color: var(--ks-text); }

/* ── Feedback ───────────────────────────────────────────────── */
.ks-toast { display: flex; align-items: flex-start; gap: var(--ks-space-4); padding: 10px 12px; border: 1px solid var(--ks-rule); border-radius: var(--ks-radius-sm); background: var(--ks-paper-raised); box-shadow: var(--ks-lift-1); font-size: var(--ks-type-label); color: var(--ks-text); transition: transform var(--ks-settle) var(--ks-ease), opacity var(--ks-settle) var(--ks-ease); }
.ks-toast-icon { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: var(--ks-radius-chip); background: var(--ks-gray); color: var(--ks-text-muted); font-size: 10px; }
.ks-toast.is-success .ks-toast-icon { background: var(--ks-patina-pale); color: var(--ks-patina-ink); }
.ks-toast.is-warning .ks-toast-icon { background: var(--ks-kinpaku); color: var(--ks-on-gold); }
.ks-toast-title { font-weight: 600; color: var(--ks-ink); }
.ks-toast-body { margin-top: 2px; font-size: var(--ks-type-micro); color: var(--ks-text-muted); }
.ks-toast-close { margin-left: auto; border: none; background: none; color: var(--ks-text-faint); font-size: 12px; cursor: pointer; }
.ks-toast-close:hover { color: var(--ks-ink); }
.ks-modal { width: 100%; max-width: 400px; padding: var(--ks-space-sm); border: 1px solid var(--ks-rule); border-radius: var(--ks-radius-lg); background: var(--ks-paper-raised); box-shadow: var(--ks-banner-lift); }
.ks-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-4); margin-bottom: var(--ks-space-4); }
.ks-modal-title { font-size: var(--ks-type-ui); font-weight: 600; color: var(--ks-ink); }
.ks-modal-body { font-size: var(--ks-type-label); line-height: 1.55; color: var(--ks-text-muted); }
.ks-modal-actions { display: flex; justify-content: flex-end; gap: var(--ks-space-3); margin-top: var(--ks-space-sm); }
.ks-modal-close { border: none; background: none; color: var(--ks-text-faint); font-size: 14px; line-height: 1; cursor: pointer; }
.ks-modal-close:hover { color: var(--ks-ink); }
.ks-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; text-align: center; }
.ks-empty-icon { width: 26px; height: 26px; margin-bottom: 14px; border-radius: var(--ks-radius-chip); background: var(--ks-gray); color: var(--ks-text-mute-deep); font-family: var(--ks-font-wordmark); font-size: 17px; font-weight: 600; line-height: 26px; }
.ks-empty-title { margin: 0 0 3px; font-size: var(--ks-type-ui); font-weight: 600; color: var(--ks-ink); }
.ks-empty-hint { margin: 0; font-size: var(--ks-type-micro); color: var(--ks-text-muted); }
.ks-skeleton { display: block; border-radius: var(--ks-radius-chip); background: linear-gradient(90deg, var(--ks-gray) 0%, var(--ks-paper-deep) 50%, var(--ks-gray) 100%); background-size: 200% 100%; animation: ks-shimmer 1.4s linear infinite; }
@keyframes ks-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ks-skeleton { animation: none; } }

/* ── Pagination ─────────────────────────────────────────────── */
.ks-pagination { display: inline-flex; align-items: center; gap: 2px; }
.ks-pagination button { min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--ks-radius-chip); background: transparent; font-family: var(--ks-mono); font-size: var(--ks-type-micro); color: var(--ks-text-muted); cursor: pointer; transition: background-color var(--ks-quick) var(--ks-ease), color var(--ks-quick) var(--ks-ease); }
.ks-pagination button:hover { background: var(--ks-paper-deep); color: var(--ks-ink); }
.ks-pagination button.active { background: var(--ks-paper-raised); border-color: var(--ks-rule); box-shadow: var(--ks-cap-lift); color: var(--ks-ink); }
.ks-pagination button[disabled] { color: var(--ks-text-mute-deep); cursor: default; background: none; }
.ks-pagination-gap { padding: 0 2px; font-family: var(--ks-mono); font-size: var(--ks-type-micro); color: var(--ks-text-faint); }

/* ── Changelog ──────────────────────────────────────────────── */
.ks-changelog { display: flex; flex-direction: column; }
.ks-changelog-entry { display: grid; grid-template-columns: 96px 1fr; gap: var(--ks-space-sm); padding: var(--ks-space-sm) 0; border-top: 1px solid var(--ks-rule); }
.ks-changelog-date { font-family: var(--ks-mono); font-size: var(--ks-text-11); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-text-faint); }
.ks-changelog-body { font-size: var(--ks-type-label); line-height: 1.6; color: var(--ks-text-muted); }
.ks-changelog-body strong { display: block; font-size: var(--ks-type-ui); color: var(--ks-ink); }
.ks-changelog-body strong em { display: inline-flex; align-items: center; margin-left: 6px; padding: 0 4px; border-radius: var(--ks-radius-chip); background: var(--ks-kinpaku); color: var(--ks-on-gold); font-family: var(--ks-mono); font-size: 9px; font-style: normal; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }

/* ── Links ──────────────────────────────────────────────────── */
a { color: var(--ks-link); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--ks-quick) var(--ks-ease), border-color var(--ks-quick) var(--ks-ease); }
a:hover { color: var(--ks-ink); border-bottom-color: var(--ks-kinpaku); }
.theme-lacquer a:hover { color: var(--ks-kinpaku); }

:focus-visible { outline: 2px solid var(--ks-patina); outline-offset: 2px; }