/* Knickpoint UI Theme: Base
 * ==========================
 * Pure structural layout — positions, display, flex/grid, z-index,
 * box-sizing. Zero color, zero font, zero shadow, zero border-radius.
 *
 * Visual styling lives in per-theme CSS files:
 *   themes/fallback.css  — simple, chunky, functional
 *   themes/adwaita.css   — 1:1 GNOME libadwaita (deprecated)
 *
 * Component → Adwaita widget reference:
 *   Button → GtkButton        Switch → GtkSwitch
 *   Entry  → GtkEntry         Check  → GtkCheckButton
 *   Card   → .card            Dialog → AdwDialog
 *   Menu   → GtkPopoverMenu   Tab    → AdwTabView
 *   Tooltip → GtkTooltip      Toast  → AdwToast
 *   Progress → GtkProgressBar Badge  → AdwIndicatorBin
 */

/* ── Box sizing reset ─────────────────────────────────────────────── */
/* spacing scale (8px rhythm) — shared by the grid & utilities layer */
:root {
  --skf-space-1: 0.5rem;
  --skf-space-2: 1rem;
  --skf-space-3: 1.5rem;
  --skf-space-4: 2rem;
  --skf-space-5: 2.5rem;
  --skf-space-6: 3rem;
}
.skf-btn, .skf-entry, .skf-card, .skf-dialog, .skf-menu, .skf-tooltip,
.skf-switch, .skf-check, .skf-radio, .skf-progress, .skf-tab,
.skf-badge, .skf-toast, .skf-find-bar, .skf-find-bar *,
.skf-boxed-list, .skf-view-switcher, .skf-spinner, .skf-banner,
.skf-expander-row, .skf-entry-row, .skf-button-row, .skf-combo-row {
  box-sizing: border-box;
}

/* =====================================================================
 * 1. BUTTON
 * ===================================================================== */

.skf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.skf-btn:disabled { cursor: default; }

.skf-btn.skf-btn-circular { /* circular icon button */ }
.skf-btn.skf-btn-pill     { /* pill-shaped button */ }
.skf-btn.skf-btn-flat     { /* no chrome until hover */ }
.skf-btn.skf-btn-suggested { /* accent-filled */ }
.skf-btn.skf-btn-destructive { /* red-filled */ }

/* Button internal slots (icon + label layout) */
.skf-btn-icon-slot { display: inline-flex; align-items: center; justify-content: center; }
.skf-btn-label { display: inline; }

/* Toggle button (standalone press-in/press-out) */
.skf-btn-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer; user-select: none; flex-shrink: 0;
}

/* ── Linked button group ──────────────────────────────────────────── */
.skf-linked {
  display: inline-flex;
}
.skf-linked > * {
  border-radius: 0;
}
.skf-linked > *:first-child {
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
}
.skf-linked > *:last-child {
  border-start-end-radius: inherit;
  border-end-end-radius: inherit;
}
.skf-linked > * + * {
  margin-inline-start: -1px;
}

/* =====================================================================
 * 2. ENTRY (text input)
 * ===================================================================== */

.skf-entry {
  display: inline-block;
  box-sizing: border-box;
}
.skf-entry:disabled { cursor: default; }

.skf-textarea {
  display: block;
  box-sizing: border-box;
  resize: vertical;   /* horizontal writing: grow the block (vertical) axis */
}
/* vertical writing: the block axis is horizontal → resize that way */
[data-skf-writing] .skf-textarea { resize: horizontal; }

/* ── Entry Row (label + input on one line) ────────────────────────── */
.skf-entry-row {
  display: flex;
  align-items: center;
}
.skf-entry-row .skf-entry-row-label {
  flex-shrink: 0;
}

/* =====================================================================
 * 3. CHECKBOX & RADIO
 * ===================================================================== */

.skf-check, .skf-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.skf-check:disabled, .skf-radio:disabled { cursor: default; }
.skf-check-icon, .skf-radio-icon {
  display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
/* Checkbox tick — an SVG stroke "drawn out" via pathLength="1" +
 * stroke-dashoffset (ported 1:1 from the reference). Markup:
 *   <span class="skf-check-icon">
 *     <svg class="skf-check-mark" viewBox="0 0 24 24" aria-hidden="true">
 *       <path d="M4 11.5 L10 17.5 L20 6.5" fill="none" pathLength="1"/></svg>
 *   </span> */
.skf-check-mark {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* background first, tick delayed 0.08s (matches the reference timing) */
.skf-check.checked .skf-check-mark {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: opacity 0.15s, stroke-dashoffset 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;
}
.skf-check-label, .skf-radio-label {
  flex: 1;
}

/* =====================================================================
 * 4. SWITCH
 * ===================================================================== */

.skf-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.skf-switch-slider {
  display: block;
  position: relative;
  flex: none;
  box-sizing: border-box;
}
/* Knob travels along the LOGICAL inline axis: LTR left→right, RTL
 * right→left, vertical top→bottom (下为开). Elastic rebound curve. */
.skf-switch-slider::after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
  transition: inset-inline-start 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
              inset-block-start 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Selection-control animations (ported from the reference) ────────
 * checkbox tick "drawn out" (wipe), radio dot inset pop, press recoil,
 * switch track recoil. The switch recoil is JS-triggered: skf-behavior.js
 * adds .is-bumping whenever a .skf-switch toggles .checked. */
@keyframes skf-radio-in   { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes skf-radio-inset{ 0% { inset: 8px; opacity: 0; } 60% { inset: 2px; opacity: 1; } 100% { inset: 4px; opacity: 1; } }
@keyframes skf-pop        { 0% { transform: scale(1); } 40% { transform: scale(0.82); } 70% { transform: scale(1.15); } 100% { transform: scale(0.82); } }
/* switch track "recoil": the side the knob slams into bulges along the
 * LOGICAL inline axis (scaleX horizontal / scaleY vertical), origin on the
 * opposite side. JS adds .is-bumping on every toggle (skf-behavior.js). */
@keyframes skf-switch-bump-x { 0%, 100% { transform: scaleX(1); } 60% { transform: scaleX(1.08); } }
@keyframes skf-switch-bump-y { 0%, 100% { transform: scaleY(1); } 60% { transform: scaleY(1.08); } }
.skf-switch-slider.is-bumping { animation: skf-switch-bump-x 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.skf-switch.checked .skf-switch-slider.is-bumping { transform-origin: left; }
.skf-switch:not(.checked) .skf-switch-slider.is-bumping { transform-origin: right; }
[dir="rtl"] .skf-switch.checked .skf-switch-slider.is-bumping { transform-origin: right; }
[dir="rtl"] .skf-switch:not(.checked) .skf-switch-slider.is-bumping { transform-origin: left; }
[data-skf-writing] .skf-switch-slider.is-bumping { animation-name: skf-switch-bump-y; }
[data-skf-writing] .skf-switch.checked .skf-switch-slider.is-bumping { transform-origin: top; }
[data-skf-writing] .skf-switch:not(.checked) .skf-switch-slider.is-bumping { transform-origin: bottom; }
@media (prefers-reduced-motion: reduce) {
  .skf-switch-slider::after { transition-duration: 0.01ms; }
  .skf-switch-slider.is-bumping,
  .skf-check:active .skf-check-icon,
  .skf-radio:active .skf-radio-icon,
  .skf-check.checked .skf-check-mark,
  .skf-radio.checked .skf-radio-icon::after { animation: none; transition: none; }
}

/* =====================================================================
 * 5. CARD
 * ===================================================================== */

.skf-card {
  display: block;
}

/* ── Boxed List ───────────────────────────────────────────────────── */
.skf-boxed-list {
  display: flex;
  flex-direction: column;
}
.skf-boxed-list-row {
  display: flex;
  align-items: center;
}
.skf-boxed-list-row:first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}
.skf-boxed-list-row:last-child {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

/* =====================================================================
 * 6. LABEL (typography)
 * ===================================================================== */

.skf-title-1, .skf-title-2, .skf-title-3, .skf-title-4 { display: block; }
.skf-heading  { display: block; }
.skf-body     { display: block; }
.skf-caption  { display: block; }
.skf-caption-heading { display: block; }
.skf-label-dim { /* opacity: 0.55 */ }
.skf-label-accent { /* accent colored */ }
.skf-label-error { /* error colored */ }
.skf-label-warning { /* warning colored */ }
.skf-label-success { /* success colored */ }
.skf-monospace  { }
.skf-numeric    { font-variant-numeric: tabular-nums; }

/* =====================================================================
 * 7. MENU / POPOVER
 * ===================================================================== */

.skf-menu-backdrop {
  position: fixed; inset: 0; z-index: 200;
}
.skf-menu {
  position: absolute; z-index: 201;
  display: flex; flex-direction: column;
  min-inline-size: 120px;
  overflow: hidden;
}
.skf-menu-item {
  display: flex; align-items: center;
  cursor: pointer; user-select: none;
  white-space: nowrap;
}
.skf-menu-item:disabled { cursor: default; }
.skf-menu-separator {
  display: block;
}

/* ── Popover (anchored to a trigger element) ──────────────────────── */
.skf-popover {
  position: absolute; z-index: 202;
  display: flex; flex-direction: column;
}

/* =====================================================================
 * 8. DIALOG
 * ===================================================================== */

.skf-dialog-backdrop {
  position: fixed; inset: 0; z-index: 300;
  display: flex;
  align-items: center; justify-content: center;
}
.skf-dialog {
  display: flex; flex-direction: column;
  min-inline-size: 280px; max-inline-size: 90vw; max-block-size: 90vh;
}
.skf-dialog-header {
  display: flex; align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.skf-dialog-body {
  flex: 1;
  overflow-block: auto;
}
.skf-dialog-footer {
  display: flex; align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* =====================================================================
 * 9. TOOLTIP
 * ===================================================================== */

.skf-tooltip {
  position: absolute; z-index: 400;
  pointer-events: none;
}

/* =====================================================================
 * 10. TOAST (notification banner)
 * ===================================================================== */

.skf-toast-container {
  position: fixed; inset-block-end: 16px; z-index: 500;
  inset-inline: 0;
  display: flex; flex-direction: column;
  align-items: center;
}
.skf-toast {
  display: flex; align-items: center;
  white-space: nowrap;
}

/* =====================================================================
 * 11. PROGRESS BAR
 * ===================================================================== */

.skf-progress {
  display: block;
  overflow: hidden;
}
.skf-progress-bar {
  display: block;
  block-size: 100%;
  transition: inline-size 200ms ease;
}

/* =====================================================================
 * 12. SPINNER
 * ===================================================================== */

.skf-spinner {
  display: inline-flex;
  align-items: center; justify-content: center;
}

/* =====================================================================
 * 13. TAB BAR
 * ===================================================================== */

.skf-tab-bar {
  display: flex;
  overflow-inline: auto;
}
.skf-tab {
  display: inline-flex; align-items: center;
  cursor: pointer; user-select: none; flex-shrink: 0;
}

/* =====================================================================
 * 14. VIEW SWITCHER
 * ===================================================================== */

.skf-view-switcher {
  display: inline-flex; align-items: center;
}

/* =====================================================================
 * 15. BADGE
 * ===================================================================== */

.skf-badge {
  display: inline-flex; align-items: center; justify-content: center;
  user-select: none;
}

/* =====================================================================
 * 16. BANNER
 * ===================================================================== */

.skf-banner {
  display: flex; align-items: center;
}

/* =====================================================================
 * 17. EXPANDER ROW
 * ===================================================================== */

.skf-expander-row {
  display: flex; flex-direction: column;
  cursor: pointer; user-select: none;
}
.skf-expander-row-header {
  display: flex; align-items: center;
}
.skf-expander-row-arrow {
  display: flex; align-items: center; justify-content: center;
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.skf-expander-row.expanded .skf-expander-row-arrow {
  transform: rotate(0.5turn);
}
.skf-expander-row-body {
  display: none;
}
.skf-expander-row.expanded .skf-expander-row-body {
  display: block;
}

/* =====================================================================
 * 18. BUTTON ROW
 * ===================================================================== */

.skf-button-row {
  display: flex; align-items: center;
  cursor: pointer; user-select: none;
}

/* =====================================================================
 * 19. COMBO ROW (dropdown selector)
 * ===================================================================== */

.skf-combo-row {
  display: flex; align-items: center;
  cursor: pointer; user-select: none;
}
.skf-combo-row-arrow {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* =====================================================================
 * 20. FIND BAR (already implemented in ui/find-replace.js)
 * ===================================================================== */

.skf-find-bar {
  position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 200; /* absolute: anchored by #editor-host in app shell; falls back to viewport in standalone page */
  display: flex; flex-direction: column;
  max-inline-size: calc(100vw - 16px);
}
.skf-find-bar.skf-hidden { display: none; }
.skf-find-bar-row {
  display: flex; align-items: center;
}
.skf-find-entry {
  flex: 1; min-inline-size: 160px;
}
.skf-find-replace-row { display: none; }
.skf-find-replace-row.skf-visible { display: flex; }
.skf-find-btn {
  flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  user-select: none; line-height: 1;
}
.skf-find-count { white-space: nowrap; user-select: none; flex-shrink: 0; }
.skf-find-separator { flex-shrink: 0; }

/* =====================================================================
 * 21. MATH POPOVER (ui/math-input.js)
 * ===================================================================== */

.skf-math-popover {
  position: fixed; z-index: 200;
  display: none; flex-direction: column;
  min-inline-size: 320px; max-inline-size: 480px;
  overflow: auto;
}
.skf-math-popover-row {
  display: flex; align-items: center; gap: 4px;
  margin-block-end: 8px;
}
.skf-math-prefix {
  opacity: 0.33; font-family: var(--kp-font-mono, monospace);
  font-size: 1.1em; flex-shrink: 0; user-select: none;
}
.skf-math-input {
  flex: 1; min-inline-size: 0; min-block-size: 34px;
  font-size: inherit; font-family: var(--kp-font-mono, monospace);
}
.skf-math-preview {
  display: flex; align-items: center; justify-content: center;
  overflow-inline: auto;
  min-block-size: 48px;
}
.skf-math-btn-insert,
.skf-math-btn-cancel {
  flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  min-inline-size: 34px; min-block-size: 34px; padding: 0;
  border-radius: 9999px; border: none;
  font-size: 16px; font-weight: bold;
  transition: background 200ms;
}