/* Kelk — base elements and page layout */

*, *::before, *::after { box-sizing: border-box; }
/* scrollbars in the theme's colors: the standard properties (Firefox, Chrome/Edge 121+), and the WebKit
   pseudo-elements for Safari and older Chromium (which ignore them where scrollbar-color is supported) */
* { scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
*:hover { scrollbar-color: var(--scroll-thumb-hover) var(--scroll-track); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--accent); }

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

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── page frame ───────────────────────────────────────────────────────── */

.app {
  max-width: 1680px;
  margin: 0 auto;
  padding: 16px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-height: 100%;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 300px; }   /* the tagline wraps before the tools leave the row */
.glyph-wrap { position: relative; flex: none; display: inline-flex; }
.brand .glyph {
  width: 40px; height: 40px; border-radius: 10px; border: 0; padding: 0; cursor: help;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; flex: none;
}
/* what the mark is: a card under it on hover, keyboard focus or a tap */
.brand-tip {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 40;
  width: max-content; max-width: min(320px, calc(100vw - 32px));
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--toast-bg); color: var(--toast-ink); box-shadow: var(--shadow);
  font-size: 12.5px; line-height: 1.7; font-weight: 400;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none;
}
.brand-tip::before {                                   /* the arrow, under the mark's middle */
  content: ''; position: absolute; top: -5px; inset-inline-start: 15px;
  border: 5px solid transparent; border-top: 0; border-bottom-color: var(--toast-bg);
}
.glyph:hover + .brand-tip, .glyph:focus + .brand-tip { opacity: 1; visibility: visible; transform: none; transition-delay: .25s; }
.glyph:focus + .brand-tip { transition-delay: 0s; }
.brand .glyph svg { width: 28px; height: 28px; }
.brand h1 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; }
/* the version beside the name: a quiet pill, Latin digits, the release notes behind it */
.title-row { display: flex; align-items: center; gap: 8px; }
.app-version {
  font: 600 11px/1 var(--font-latin); letter-spacing: .02em; padding: 3px 7px; border-radius: 999px;
  color: var(--accent-ink); background: var(--accent-soft); text-decoration: none; white-space: nowrap;
}
.app-version:hover, .app-version:focus-visible { background: var(--accent); color: var(--on-accent); }
.app-version:not([href]) { pointer-events: none; }
.brand .sub { color: var(--muted); font-size: 12.5px; }
.brand .sub .tag-arrows { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }

.topbar .spacer { flex: 1; }
.top-tools { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; margin-inline-start: auto; }
.top-tools > .sep { margin: 0 6px; }

/* workspace: editor | preview | settings
   side  (default)  editor | preview | settings
   stack            editor above preview, settings beside them
   The editor (side only) and the settings pane shrink to a rail when closed. */
.workspace {
  --ed-col: minmax(0, 1fr);
  --set-col: var(--pane-w);
  display: grid;
  grid-template-columns: var(--ed-col) minmax(0, 1fr) var(--set-col);
  grid-template-areas: "editor preview settings";
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.workspace.pane-closed { --set-col: var(--rail-w); }
.workspace.editor-closed:not(.stack) { --ed-col: var(--rail-w); }
.workspace.stack {
  grid-template-columns: minmax(0, 1fr) var(--set-col);
  grid-template-areas: "editor settings" "preview settings";
  grid-template-rows: minmax(min-content, 2fr) minmax(0, 3fr);   /* the editor never less than its bars and a few lines */
}
.editor-panel { grid-area: editor; }
.preview-panel { grid-area: preview; }
.settings { grid-area: settings; }

/* wide screens: the page is one screen high, each panel scrolls inside */
@media (min-width: 1101px) {
  .app { height: 100vh; height: 100dvh; min-height: 620px; }
}

@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: var(--ed-col) minmax(0, 1fr);
    grid-template-areas: "editor preview" "settings settings";
    grid-template-rows: auto auto;
  }
  .workspace.stack { grid-template-columns: minmax(0, 1fr); grid-template-areas: "editor" "preview" "settings"; grid-template-rows: auto; }
}
/* side by side from 901px: below that one column (the layout button goes) */
@media (max-width: 900px) {
  .workspace, .workspace.stack, .workspace.editor-closed:not(.stack) {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "editor" "preview" "settings"; grid-template-rows: auto;
  }
  .btn.layout-toggle { display: none; }
}
/* 901–1100px side by side, Settings below: both panels one height, so their bars line up */
@media (min-width: 901px) and (max-width: 1100px) {
  .workspace:not(.stack) > .editor-panel, .workspace:not(.stack) > .preview-panel { height: 82vh; height: 82dvh; min-height: 460px; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.panel-head h2 {
  margin: 0; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}
.panel-head .actions { margin-inline-start: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.panel-foot {
  border-top: 1px solid var(--line);
  padding: 8px 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--muted); font-size: 12.5px;
}

footer.note {
  color: var(--muted);
  font-size: 12.5px;
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
footer.note a { color: inherit; }

/* one panel maximized (Kelk.ui.maximize): the other panel hidden, Settings as its rail */
.workspace.max-editor, .workspace.max-preview {
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  grid-template-rows: minmax(0, 1fr);
}
.workspace.max-editor { grid-template-areas: "editor settings"; }
.workspace.max-preview { grid-template-areas: "preview settings"; }
.workspace.max-editor .preview-panel, .workspace.max-preview .editor-panel { display: none; }
/* 901–1100px (also a window zoomed into that width while a panel is maximized): Settings stays below the panel, a
   bar as in the layout around it — not the side column of a wide screen, where its label would lie flat */
@media (min-width: 901px) and (max-width: 1100px) {
  .workspace.max-editor, .workspace.max-preview { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .workspace.max-editor { grid-template-areas: "editor" "settings"; }
  .workspace.max-preview { grid-template-areas: "preview" "settings"; }
}
@media (max-width: 900px) {
  .workspace.max-editor, .workspace.max-preview { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .btn.btn-max { display: none; }                     /* one column: nothing to step aside */
}

/* phones: a compact frame */
@media (max-width: 600px) {
  .app { padding: 10px 10px 18px; gap: 10px; }
  .topbar { gap: 8px 10px; }
  .brand .glyph { width: 34px; height: 34px; border-radius: 9px; }
  .brand .glyph svg { width: 24px; height: 24px; }
  .brand h1 { font-size: 16px; }
  .brand .sub { font-size: 11.5px; line-height: 1.4; }
  .topbar .spacer { display: none; }
  .panel-head, .panel-foot { padding: 8px 10px; }
}