/* ═══ Ribbon / tab-strip / segmented — skarn-framework components ════
 *
 * Font stack token — THE way to give UI chrome per-script fonts.
 * Components never hardcode faces; hosts override the token per locale:
 *   --skf-font-stack: 'Inter', 'Noto Sans Mongolian', 'Noto Sans Arabic', …
 *
 * Written with LOGICAL properties throughout: switching the host to a
 * vertical writing mode (data-skf-writing="vertical-rl|vertical-lr")
 * re-flows automatically — flex rows follow the inline axis, borders and
 * margins follow the block axis. */

/* Font stack is SCRIPT-driven, not language-driven: Latin & Cyrillic →
 * Inter, Mongolian → Noto Sans Mongolian, Arabic → Noto Naskh Arabic, in
 * every locale. Only the CJK face varies by :lang() (SC vs JP punctuation
 * forms genuinely differ). Per-glyph fallback does the mixing. */
:root {
  --skf-font-stack: 'Inter', 'Noto Sans Mongolian', 'Noto Sans Arabic',
                    system-ui, sans-serif;
}
:lang(mn) {
  --skf-font-stack: 'Inter', 'Noto Sans Mongolian', 'Noto Sans Arabic',
                    system-ui, sans-serif;
}
:lang(zh) {
  --skf-font-stack: 'Inter', 'Noto Sans Mongolian', 'Noto Sans Arabic',
                    'Noto Sans CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
:lang(ja) {
  --skf-font-stack: 'Inter', 'Noto Sans Mongolian', 'Noto Sans Arabic',
                    'Yu Gothic', 'Noto Sans CJK JP',
                    'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}
:lang(ar) {
  --skf-font-stack: 'Inter', 'Noto Sans Mongolian',
                    'Noto Naskh Arabic', 'Noto Sans Arabic',
                    'Geeza Pro', 'Segoe UI Arabic', sans-serif;
}
/* Mongolian is a vertical CURSIVE script: any letter-spacing breaks the
 * glyph joins, so reset tracking on text-bearing chrome for :lang(mn). */
:lang(mn) :is(.skf-btn, .skf-btn-toggle, .skf-cap-btn, .skf-seg-item, .skf-dd-btn,
  .skf-dd-item, .skf-ribbon-tab, .skf-tab, .skf-menu-item, .skf-fd-item,
  .skf-mode-btn, .skf-titlebar-btn, .skf-win-tab, .skf-tree-row, .skf-pane-row,
  .skf-statusbar, .skf-chip, .skf-group-name, .skf-heading, .skf-caption-heading,
  .skf-title-1, .skf-title-2, .skf-title-3, .skf-title-4) {
  letter-spacing: normal;
}

/* ── Tab strip ─────────────────────────────────────────────────────── */
.skf-ribbon-tabs {
  display: flex;
  gap: 16px;
  padding-inline: 18px;
}
.skf-ribbon-tab {
  background: none;
  border: none;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  padding-block: 10px 8px;
  padding-inline: 8px;
  font-family: var(--skf-font-stack);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--sh-muted);
  opacity: 0.82;
  cursor: pointer;
  transition: all var(--sh-motion);
}
.skf-ribbon-tab:hover { opacity: 1; color: var(--sh-accent); }
.skf-ribbon-tab.is-active {
  opacity: 1;
  color: var(--sh-accent);
  border-block-end-color: var(--sh-accent);
}
.skf-ribbon-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--sh-accent); }

.skf-ribbon-pages { padding-block: 5px 6px; padding-inline: 18px; min-block-size: 64px; }
.skf-ribbon-page { display: none; }
.skf-ribbon-page.is-active { display: flex; gap: 0; flex-wrap: wrap; align-items: stretch; }

/* ── Groups ────────────────────────────────────────────────────────── */
.skf-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  padding-inline-end: 18px;
  margin-inline-end: 18px;
  border-inline-end: 1px solid var(--sh-hairline);
}
.skf-group:last-child {
  border-inline-end: none; margin-inline-end: 0; padding-inline-end: 0;
}
.skf-group-row { display: flex; }
.skf-group-name {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-muted);
  text-align: center;
}

/* ── Caption buttons (icon-over-caption) ───────────────────────────── */
.skf-cap-btn {
  border-radius: var(--sh-radius);
  min-inline-size: 56px;
  min-block-size: 50px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-block: 5px; padding-inline: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sh-fg);
  cursor: pointer;
  transition: all var(--sh-motion);
  font-family: var(--skf-font-stack);
}
.skf-cap-btn svg { width: 22px; height: 22px; color: var(--sh-fg); transition: inherit; }
.skf-cap-btn .skf-cap {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--sh-fg);
  opacity: 0.78;
}
.skf-cap-btn:hover {
  background: transparent;
  border-color: var(--sh-accent);
}
.skf-cap-btn:hover svg, .skf-cap-btn:hover .skf-cap { color: var(--sh-accent); opacity: 1; }
.skf-cap-btn:active { background: var(--sh-accent); border-color: var(--sh-accent); }
.skf-cap-btn:active svg, .skf-cap-btn:active .skf-cap { color: var(--sh-bg); }
.skf-cap-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--sh-accent); }

/* ── Icon-only button (__SKF_UI.iconBtn) ───────────────────────────── */
.skf-icon-btn {
  inline-size: 32px;
  block-size: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--sh-radius);
  background: transparent;
  color: var(--sh-muted);
  cursor: pointer;
  transition: all var(--sh-motion);
}
.skf-icon-btn svg { width: 16px; height: 16px; }
.skf-icon-btn:disabled { opacity: 0.5; pointer-events: none; }
.skf-icon-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--sh-accent); }

/* ── Segmented control ─────────────────────────────────────────────── */
.skf-seg { display: flex; }
.skf-seg-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 26px;
  padding-block: 0;
  padding-inline: 11px;
  line-height: 1;
  font-size: 0.75rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sh-muted);
  font-family: var(--skf-font-stack);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--sh-motion);
}
.skf-seg .skf-seg-item + .skf-seg-item { margin-inline-start: -1px; }
.skf-seg .skf-seg-item:hover {
  color: var(--sh-accent); background: transparent;
  border-color: var(--sh-accent); position: relative; z-index: 1;
}
.skf-seg .skf-seg-item.checked {
  border-color: var(--sh-accent);
  box-shadow: inset 0 0 0 1px var(--sh-accent);
  color: var(--sh-accent);
  position: relative; z-index: 1;
}

/* ═══ Writing-mode & direction adaptation ════════════════════════════
 * Host opts in on <html> (or any container):
 *   data-skf-writing="vertical-rl" | "vertical-lr"
 *   dir="rtl" / data-skf-dir="rtl"
 *
 * Because everything above uses logical properties, the whole UI re-flows
 * automatically. The rules below only handle what logic cannot infer. */

:root[data-skf-writing="vertical-rl"],
:root[data-skf-writing="vertical-lr"],
[data-skf-writing="vertical-rl"], [data-skf-writing="vertical-lr"] {
  writing-mode: vertical-rl;
}
:root[data-skf-writing="vertical-lr"],
[data-skf-writing="vertical-lr"] { writing-mode: vertical-lr; }

/* Vertical typography — optional inline-axis tracking.
 * Vertical type can read tighter than horizontal (CJK sit full-width flush;
 * rotated Latin advances by its smaller side bearing). The default is the
 * font's own spacing (normal), which matches the horizontal rhythm 1:1;
 * hosts that want a little extra tracking set --skf-tracking-v to a length
 * (e.g. 0.02em) on any [data-skf-writing] element — it then applies to
 * chrome and document content alike. */
[data-skf-writing] {
  letter-spacing: var(--skf-tracking-v, normal);
}
/* Chinese sits tighter than the Latin around it. The engine wraps CJK runs
 * in .skf-cjk so ONLY Chinese gains tracking — English and every other
 * script keep the font's native spacing. Vertical flows only. */
[data-skf-writing] .skf-cjk {
  letter-spacing: var(--skf-tracking-cjk, 1.1px);
}

/* Active indicators mirror the horizontal design via logical edges:
 *   window tab  → block-start (top in horizontal, left in vertical-lr,
 *                 right in vertical-rl)
 *   ribbon tab  → block-end   (bottom in horizontal, right in vertical-lr,
 *                 left in vertical-rl)
 * The ribbon's base underline already uses border-block-end, so vertical
 * flows need NO override for it — the window tab is overridden below
 * because its base bar is a physical box-shadow. */

/* In vertical flows the tab's inline axis is vertical — the base 2px
 * padding-inline leaves the label hugging the top edge. Mirror the
 * horizontal top/bottom rhythm (6px/4px) onto the vertical padding. */
[data-skf-writing] .skf-ribbon-tab {
  padding-block: 14px 12px;
  padding-inline: 8px;
}

[data-skf-writing] .skf-group { gap: 10px; }
[data-skf-writing] .skf-group-name { text-align: start; letter-spacing: 0.08em; }
[data-skf-writing] .skf-cap-btn { justify-content: flex-start; }

/* pages wrap their groups into columns instead of stretching the chrome's
 * block extent indefinitely */
[data-skf-writing] .skf-ribbon-page {
  flex-wrap: wrap;
  align-content: start;
}

/* Horizontal island inside a vertical page (e.g. an Arabic quote). */
.skf-hflow { writing-mode: horizontal-tb; }

/* ── Vertical flow sizing ───────────────────────────────────────────
 * The window tab is strip-shaped: its physical length runs along the
 * inline (stack) axis and its thickness along the block axis. Its active
 * bar is the logical block-start edge (top in horizontal, left in
 * vertical-lr, right in vertical-rl); the base physical box-shadow is
 * replaced so the flow mirror works. */
[data-skf-writing] .skf-win-tab.active {
  box-shadow: none;
  border-block-start: 2px solid var(--sh-accent);
}

/* RTL fine-tuning */
[data-skf-dir="rtl"] .skf-cap,
[data-skf-dir="rtl"] .skf-group-name { text-align: center; }

/* ── Vertical typography helpers (see __SKF_UI.verticalText) ─────────
 * .skf-tcy combines a short digit run into ONE upright em (縦中横). Where
 * text-combine-upright is unavailable it degrades to upright glyphs so the
 * digits still stack vertically instead of rotating. */
.skf-tcy     { text-combine-upright: all; text-orientation: upright; }
.skf-vsep    { text-orientation: sideways; }  /* 08:30 → colon lies across the column */
.skf-upright { text-orientation: upright; }   /* emoji & friends stay upright */

/* replaced elements never rotate, but keep icons explicitly stable */
[data-skf-writing] .skf-cap-btn svg,
[data-skf-writing] .skf-icon-btn svg,
[data-skf-writing] .skf-seg-item svg { text-orientation: upright; }

/* ── Dropdown select (Office-style) ────────────────────────────────── */
.skf-dd { position: relative; display: inline-block; }
.skf-dd-btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  min-inline-size: 120px;
  padding-block: 5px; padding-inline: 10px;
  font-family: var(--skf-font-stack);
  font-size: 0.85rem;
  color: var(--sh-fg);
  background: transparent;
  border: 1px solid var(--sh-hairline);
  cursor: pointer;
  transition: all var(--sh-motion);
}
.skf-dd-btn:hover { border-color: var(--sh-accent); color: var(--sh-accent); }
.skf-dd-label { min-inline-size: 0; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skf-dd-chev { display: inline-flex; flex: none; }
.skf-dd-menu {
  display: none;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-inline-size: 100%;
  margin-block-start: 4px;
  padding-block: 4px;
  background: var(--sh-surface);
  border: 1px solid var(--sh-hairline);
  box-shadow: var(--sh-shadow-float, 0 4px 14px rgba(0,0,0,.18));
  z-index: 300;
  max-block-size: 280px;
  overflow-block: auto;
}
.skf-dd-item {
  display: block;
  position: relative;
  inline-size: 100%;
  padding-block: 6px; padding-inline: 12px;
  font-family: var(--skf-font-stack);
  font-size: 0.85rem;
  text-align: start;
  background: transparent; border: none;
  color: var(--sh-fg);
  cursor: pointer;
}
.skf-dd-item:hover { color: var(--sh-accent); background: var(--sh-hover); }
.skf-dd-item.checked { color: var(--sh-accent); }

/* ── Flow root — host's top-level container helper ───────────────────
 * Add class="skf-flow-root" to the app shell. In horizontal flows it is
 * viewport-height; in vertical flows the axes swap so the shell spans
 * the screen width (block) and height (inline) instead. */
.skf-flow-root { block-size: 100vh; }
[data-skf-writing] .skf-flow-root,
:root[data-skf-writing] .skf-flow-root {
  block-size: 100vw;
  inline-size: 100vh;
}

/* ═══ Shell chrome components — titlebar, window tabs, nav tree,
 * statusbar, font drawer, resize edges. Migrated from the Knickpoint
 * host shell; all logical-property based, vertical-flow ready. ═══ */

/* vertical adaptations */
[data-skf-writing] .skf-win-tabs { overflow: auto; }

.skf-titlebar, .app-ribbon, .skf-statusbar, .skf-sidebar, .skf-nav-toolbar {
  -webkit-user-select: none;
  user-select: none;
}

/* ═══ Custom titlebar (decorations: false) ═══════════════════════════ */

.skf-titlebar {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: stretch;
  block-size: 46px;
  padding-block: 0;
  padding-inline: 6px;
  /* above the ribbon: hover borders on the window tab / + button must not be
     painted over by the ribbon that follows in DOM order */
  position: relative;
  z-index: 2;
  /* Same recessed tone as the tab track and the controls sitting on it —
     the whole titlebar reads as ONE layer above the ribbon. */
  background: var(--sh-track);
  border-block-end: 1px solid var(--sh-hairline);
}

.skf-tb-side { display: flex; align-items: center; gap: 2px; min-inline-size: 0; }

.skf-tb-start { justify-self: start; padding-inline-end: 6px; }

.skf-tb-end { justify-self: end; }

.skf-win-tabs {
  display: flex;
  align-items: flex-end;
  min-inline-size: 0;
  overflow-inline: auto;
  scrollbar-width: none;
  /* tone comes from the titlebar layer itself — keep controls transparent */
}

.skf-titlebar-btn {
  inline-size: 32px; block-size: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid transparent;      /* Skarn grammar: pressed/active turns primary */
  background: transparent;            /* the titlebar layer already IS the track tone */
  color: var(--sh-muted);
  cursor: pointer;
  transition: all var(--sh-motion);
}

.skf-titlebar-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--sh-accent); }

.skf-titlebar-btn svg { width: 16px; height: 16px; }

.skf-sep { inline-size: 1px; block-size: 18px; margin-block: 0; margin-inline: 8px; background: var(--sh-hairline); }

.skf-titlebar .tb-mode {
  align-self: center;
  min-block-size: 0;
  padding: 0;
  background: transparent;
  gap: 0;
}

.skf-titlebar .tb-mode .skf-btn-toggle {
  min-block-size: 24px;
  padding-block: 0; padding-inline: 12px;
  font-size: 0.78rem;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.skf-titlebar .tb-mode .skf-btn-toggle.checked {
  border-color: var(--sh-accent);
  box-shadow: inset 0 0 0 1px var(--sh-accent);
  color: var(--sh-accent);
  background: transparent;
}

/* ── Window controls (三大金刚键) — always visible ── */
.skf-win-controls { display: flex; gap: 2px; margin-inline-start: 4px; }

.skf-win-btn {
  border-radius: var(--sh-radius);
  inline-size: 32px; block-size: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sh-muted);
  cursor: pointer;
  transition: all var(--sh-motion);
}

.skf-win-btn svg { width: 13px; height: 13px; stroke-width: 2.5; }

.skf-win-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--sh-accent); }

/* ═══ Slide-in panes — Office-style sidebar / task pane ═══════════════
 * Positioning is fully LOGICAL, so a pane mirrors with the writing mode:
 *     horizontal   → start = left column,  end = right column
 *     vertical-rl  → start = top bar,      end = bottom bar
 *   vertical-lr  → start = left bar,     end = right bar
 * `--skf-pane-size` is the pane's thickness along the inline axis (its
 * width in horizontal, its height as a bar in vertical); `--skf-pane-inset`
 * keeps it clear of the titlebar. Both are host-tunable. */
.skf-pane, .skf-sidebar {
  position: absolute;
  inset-block: var(--skf-pane-inset, 0) 0;
  inline-size: var(--skf-pane-size, 260px);
  z-index: 500; /* above editor overlays (find/math = 200) */
  display: flex;
  flex-direction: column;
  background: var(--sh-surface);
  visibility: hidden;           /* kills shadow/edge bleed when parked */
  box-shadow: none;
  transition: inset-inline-start var(--sh-motion), inset-inline-end var(--sh-motion),
              visibility 0s var(--sh-motion);
}

.skf-pane-start, .skf-sidebar {
  inset-inline-start: calc(-1 * var(--skf-pane-size, 260px));
  border-inline-end: 1px solid var(--sh-hairline);
}
.skf-pane-end {
  inset-inline-end: calc(-1 * var(--skf-pane-size, 260px));
  border-inline-start: 1px solid var(--sh-hairline);
}

.skf-pane-start.open, .skf-pane-end.open, body.sidebar-open .skf-sidebar,
body.sidebar-open .skf-pane-start {
  visibility: visible;
  box-shadow: var(--sh-shadow-float);
  transition: inset-inline-start var(--sh-motion), inset-inline-end var(--sh-motion);
}
.skf-pane-start.open, body.sidebar-open .skf-sidebar,
body.sidebar-open .skf-pane-start { inset-inline-start: 0; }
.skf-pane-end.open { inset-inline-end: 0; }

/* vertical: the pane becomes a bar across the block axis — keep its
 * thickness modest so it reads as a task bar, not a full-height column */
[data-skf-writing] .skf-pane,
[data-skf-writing] .skf-sidebar { --skf-pane-size: var(--skf-pane-size-v, 220px); }

/* ── Pane contents: header, list rows, chips ───────────────────────── */
.skf-pane-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 10px 8px; padding-inline: 12px;
  border-block-end: 1px solid var(--sh-hairline);
  font-weight: 600; font-size: 0.82rem; color: var(--sh-fg);
  flex: none;
}
.skf-pane-close {
  border: none; background: none; cursor: pointer;
  color: var(--sh-muted); font-size: 15px; line-height: 1;
  padding-block: 2px; padding-inline: 4px;
}
.skf-pane-close:hover { color: var(--sh-accent); }

.skf-pane-body { flex: 1; overflow: auto; padding-block: 2px 12px; }

.skf-pane-group {
  padding-block: 8px 2px; padding-inline: 12px;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sh-muted);
}
.skf-pane-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding-block: 3px; padding-inline: 12px;
  font-size: 0.86rem; color: var(--sh-fg);
}
.skf-pane-row-meta { color: var(--sh-muted); font-variant-numeric: tabular-nums; }
.skf-pane-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-block: 3px 7px; padding-inline: 12px;
}
.skf-chip {
  border: 1px solid var(--sh-hairline); background: transparent;
  color: var(--sh-accent); border-radius: 4px;
  padding-block: 0; padding-inline: 6px;
  font-size: 0.72rem; line-height: 1.6; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.skf-chip:hover { border-color: var(--sh-accent); }
.skf-pane-empty {
  padding-block: 12px; padding-inline: 12px;
  color: var(--sh-muted); font-size: 0.85rem;
}

.skf-nav-list {
  flex: 1;
  overflow-block: auto;
  padding-block: 2px 16px;
  padding-inline: 8px;
}

.skf-nav-empty {
  padding-block: 24px;
  padding-inline: 12px;
  color: var(--sh-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ═══ Tabs in titlebar — active tab fuses with content surface ══════ */

.skf-win-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
  max-inline-size: 200px;
  block-size: 38px;
  margin-block: 6px -1px;
  margin-inline: 0 2px;
  padding-block: 0;
  padding-inline: 12px 6px;
  border: 1px solid transparent;
  border-block-end: none;
  color: var(--sh-muted);
  font-size: 0.86rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all var(--sh-motion);
}

.skf-win-tab:hover { color: var(--sh-fg); background: var(--sh-bg); }

.skf-win-tab.active {
  color: var(--sh-fg);
  background: var(--sh-bg);   /* matches the ribbon surface */
  border-color: var(--sh-hairline);
  box-shadow: inset 0 2px 0 var(--sh-accent);   /* top pigment bar */
}

.skf-win-tab-label { overflow: hidden; text-overflow: ellipsis; }

.skf-win-tab-close {
  inline-size: 18px; block-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.5;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--sh-motion);
}

.skf-win-tab-close:hover { opacity: 1; color: var(--sh-danger); }

.skf-win-tab-add {
  align-self: flex-end;
  inline-size: 32px; block-size: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-block: 6px -1px;
  margin-inline: 0 2px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sh-muted);
  cursor: pointer;
  transition: all var(--sh-motion);
}

.skf-win-tab-add svg { width: 13px; height: 13px; }

.skf-win-tab-add:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--sh-accent); }

.skf-statusbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 28px;
  padding-block: 0;
  padding-inline: 16px;
  background: var(--sh-bg);
  border-block-start: 1px solid var(--sh-hairline);
  font-size: 0.76rem;
  color: var(--sh-muted);
}

.skf-status-sep { inline-size: 1px; block-size: 11px; background: var(--sh-hairline); }

.skf-status-spring { flex: 1; }

.skf-status-dim { opacity: 0.75; }

/* ═══ Explorer (VSCode-style tree) ═══════════════════════════════════ */

.skf-nav-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-block: 12px 8px;
  padding-inline: 12px;
}

.skf-nav-btn {
  inline-size: 28px; block-size: 28px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sh-muted);
  cursor: pointer;
  transition: all var(--sh-motion);
}

.skf-nav-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--sh-accent); }

.skf-nav-btn svg { width: 13px; height: 13px; }

.skf-nav-spring { flex: 1; }

/* Tree rows */
.skf-tree-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-block: 7px;
  padding-inline: 10px;
  font-size: 0.9rem;
  color: var(--sh-fg);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--sh-motion);
}

.skf-tree-row:hover { color: var(--sh-accent); background: var(--sh-hover); }

.skf-tree-row.selected {
  color: var(--sh-accent);
  background: var(--sh-hover);
}

.skf-tree-chev {
  width: 10px; height: 10px;
  flex: none;
  display: inline-flex;
  color: var(--sh-muted);
  transition: transform var(--sh-motion);
}

.skf-tree-row.open .skf-tree-chev { transform: rotate(90deg); }

.skf-tree-row:not(.dir) .skf-tree-chev { visibility: hidden; }

.skf-tree-glyph {
  width: 15px; height: 15px;
  flex: none;
  display: inline-flex;
  color: var(--sh-muted);
}

.skf-tree-row:hover .skf-tree-glyph, .skf-tree-row.selected .skf-tree-glyph { color: var(--sh-accent); }

.skf-tree-name { overflow: hidden; text-overflow: ellipsis; }

.skf-tree-row.file.dim { color: var(--sh-muted); opacity: 0.65; }

.skf-tree-row.file.dim .skf-tree-glyph { color: var(--sh-muted); }

.skf-nav-empty {
  padding-block: 24px;
  padding-inline: 12px;
  color: var(--sh-muted);
  font-size: 0.85rem;
  text-align: center;
}

.skf-row-acts {
  position: absolute;
  inset-inline-end: 4px;
  inset-block: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-inline: 2px;
  background: var(--sh-surface); /* mask the name tail beneath */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sh-motion);
}

.skf-tree-row { position: relative; }

.skf-tree-row:hover .skf-row-acts { opacity: 1; pointer-events: auto; }

.skf-row-act {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sh-muted);
  cursor: pointer;
  transition: all var(--sh-motion);
}

.skf-row-act svg { width: 10px; height: 10px; }

.skf-tree-rename {
  font: inherit;
  font-size: 0.9rem;
  color: var(--sh-fg);
  background: var(--sh-surface);
  border: 1px solid var(--sh-accent);
  box-shadow: 0 0 0 1px var(--sh-accent);
  padding-block: 1px;
  padding-inline: 6px;
  min-inline-size: 0;
  inline-size: 100%;
  outline: none;
}

/* ── Self-drawn resize edges (decorations fully off) ── */
.skf-rz-edge { position: fixed; z-index: 900; }

.skf-rz-n { top: 0;    left: 6px;  right: 6px;  height: 5px; }

.skf-rz-s { bottom: 0; left: 6px;  right: 6px;  height: 5px; }

.skf-rz-e { right: 0;  top: 6px;   bottom: 6px; width: 5px; }

.skf-rz-w { left: 0;   top: 6px;   bottom: 6px; width: 5px; }

.skf-rz-ne { top: 0; right: 0; width: 10px; height: 10px; }

.skf-rz-nw { top: 0; left: 0;  width: 10px; height: 10px; }

.skf-rz-se { bottom: 0; right: 0; width: 10px; height: 10px; }

.skf-rz-sw { bottom: 0; left: 0;  width: 10px; height: 10px; }

/* ═══ Skarn button grammar (shared) ══════════════════════════════════
 * rest   — transparent, no visible border
 * hover  — STILL no fill; accent hairline border + accent content
 * press  — accent fill, content flips to the background color
 * Applies to every chrome button via the shared classes below. */
.skf-titlebar-btn:hover, .skf-nav-btn:hover, .skf-win-tab-add:hover,
.skf-mode-btn:hover, .skf-row-act:hover, .skf-win-btn:hover,
.skf-icon-btn:hover {
  background: transparent;
  border-color: var(--sh-accent);
  color: var(--sh-accent);
}

.skf-titlebar-btn:active, .skf-nav-btn:active, .skf-win-tab-add:active,
.skf-mode-btn:active, .skf-row-act:active, .skf-win-btn:active,
.skf-icon-btn:active {
  background: var(--sh-accent);
  border-color: var(--sh-accent);
  color: var(--sh-bg);            /* content flips to bg color */
}

.skf-row-act.danger:hover { background: transparent; border-color: var(--sh-danger); color: var(--sh-danger); }

.skf-row-act.danger:active { background: var(--sh-danger); border-color: var(--sh-danger); color: #fff; }

.skf-win-close:hover { border-color: var(--sh-danger); color: var(--sh-danger); }

.skf-win-close:active { background: var(--sh-danger); border-color: var(--sh-danger); color: #fff; }

/* ── Single mode button (Live ⇄ Edit, two states) ── */
.skf-mode-btn {
  block-size: 26px;
  padding-block: 0;
  padding-inline: 14px;
  display: inline-flex;
  align-items: center;          /* centre the label on the block axis */
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sh-muted);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--sh-motion);
}

.skf-mode-btn:hover { color: var(--sh-accent); background: transparent; border-color: var(--sh-accent); }

.skf-mode-btn:active { background: var(--sh-accent); border-color: var(--sh-accent); color: var(--sh-bg); }

.skf-mode-btn.active {
  border-color: var(--sh-accent);
  box-shadow: inset 0 0 0 1px var(--sh-accent);
  color: var(--sh-accent);
}

/* ── Typography drawer (right side) — three independent dropdowns ── */
.skf-fontdrawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 300px;
  z-index: 700; /* above sidebar overlays */
  display: flex;
  flex-direction: column;
  background: var(--sh-surface);
  border-inline-start: 1px solid var(--sh-hairline);
  box-shadow: var(--sh-shadow-float);
  overflow-block: auto;
  padding-block-end: 16px;
}

.skf-fd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 16px 8px;
  padding-inline: 16px;
}

.skf-fd-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--sh-muted);
}

.skf-fd-title {
  margin-block-start: 10px;
  padding-block: 0 4px;
  padding-inline: 16px;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sh-muted);
}

.skf-fd-scope { position: relative; }

.skf-fd-select {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  inline-size: calc(100% - 32px);
  margin-block: 0;
  margin-inline: 16px;
  block-size: 34px;
  padding-block: 0;
  padding-inline: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  border: 1px solid var(--sh-hairline);
  background: transparent;
  color: var(--sh-fg);
  cursor: pointer;
  transition: all var(--sh-motion);
}

.skf-fd-select:hover { border-color: var(--sh-accent); color: var(--sh-accent); }

.skf-fd-select-label {
  min-inline-size: 0; flex: 1;
  text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.skf-fd-chev {
  width: 10px; height: 10px; flex: none;
  display: inline-flex;
  color: inherit;
  transform: rotate(90deg);
}

.skf-fd-dropdown {
  margin-block: 4px 0;
  margin-inline: 16px;
  border: 1px solid var(--sh-hairline);
  background: var(--sh-bg);
  box-shadow: var(--sh-shadow-float);
}

.skf-fd-search {
  display: block;
  inline-size: calc(100% - 20px);
  margin-block: 8px;
  margin-inline: 10px;
  block-size: 28px;
  padding-block: 0;
  padding-inline: 8px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--sh-fg);
  background: transparent;
  border: 1px solid var(--sh-hairline);
  outline: none;
}

.skf-fd-search:focus { border-color: var(--sh-accent); }

.skf-fd-list {
  max-block-size: 240px;
  overflow-block: auto;
}

.skf-fd-item {
  position: relative;
  padding-block: 7px;
  padding-inline: 12px;
  font-size: 0.92rem;
  color: var(--sh-fg);
  cursor: pointer;
  transition: all var(--sh-motion);
}

.skf-fd-item:hover { color: var(--sh-accent); background: var(--sh-hover); }

.skf-fd-item.selected {
  color: var(--sh-accent);
  background: var(--sh-hover);
}

/* Selected / checked indicator — a logical inline-start pigment bar.
 * LTR → left edge, RTL → right edge, vertical → top edge. */
.skf-tree-row.selected::before,
.skf-dd-item.checked::before,
.skf-fd-item.selected::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--sh-accent);
  pointer-events: none;
}

/* ── DnD drop highlight ── */
.skf-tree-row.drop-target {
  color: var(--sh-accent);
  background: var(--sh-hover);
  box-shadow: inset 0 0 0 1px var(--sh-accent);
}

/* ── Explorer context menu (right-click on tree rows) ── */
.skf-ctx-menu {
  position: fixed;
  z-index: 800;
  min-inline-size: 150px;
  padding: 4px;
  background: var(--sh-surface);
  border: 1px solid var(--sh-hairline);
  box-shadow: var(--sh-shadow-float);
}

.skf-ctx-item {
  display: block;
  inline-size: 100%;
  padding-block: 6px;
  padding-inline: 12px;
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--sh-fg);
  cursor: pointer;
}

.skf-ctx-item:hover { color: var(--sh-accent); background: var(--sh-hover); }

.skf-ctx-item.danger:hover { color: #fff; background: var(--sh-danger); }

.skf-ctx-sep { block-size: 1px; margin-block: 4px; margin-inline: 6px; background: var(--sh-hairline); }

/* vertical flows: strip-shaped chrome spans the full inline axis, while the
 * block axis (physical width) keeps the compact bar thickness */
[data-skf-writing] .skf-titlebar {
  inline-size: 100vh;
  block-size: 46px;
}
[data-skf-writing] .skf-statusbar {
  inline-size: 100vh;
  block-size: 28px;
}

/* ── Mongolian vertical ───────────────────────────────────────────────
 * Mongolian is a VERTICAL CURSIVE script — its glyphs join top-to-bottom
 * via positional (initial/medial/final) forms. The default
 * text-orientation:mixed is exactly right: it shapes Mongolian upright
 * WITH its cursive joins, and rotates horizontal-script characters
 * (Latin/digits) 90° as native Mongolian typesetting dictates.
 * text-orientation:upright was a mistake here — it forces every glyph
 * into an isolated upright presentation, breaking the joins entirely. */