/*
 * Fitting pages to the window (js/fit.js; owner's request, 2026-10-17).
 * Section tabs instead of long stacks, panels that scroll inside
 * themselves instead of the page, and two columns on a wide screen.
 */

/* Every page uses the width of a wide screen; a form or a reading page keeps its own narrower width. */
@media (min-width: 1101px) {
  .app-main-content { max-width: 1760px; padding-top: var(--space-4); padding-bottom: var(--space-4); }
}

/* Section tabs. */
.fit-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.fit-tab { height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-muted); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fit-tab:hover { color: var(--color-text); background: var(--color-bg-secondary); }
.fit-tab.is-on { background: var(--color-accent); color: #fff; }
.fit-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fit-tab-n { font-family: var(--font-mono, monospace); font-weight: 500; opacity: 0.85; }
[data-fit-tab][hidden] { display: none !important; }
@media (max-width: 768px) {
  .fit-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fit-tabs::-webkit-scrollbar { display: none; }
  .fit-tab { height: 40px; }
}

/* Two or three columns on a wide screen, one on a phone. */
.fit-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.fit-cols > * { min-width: 0; }
@media (min-width: 1101px) {
  .fit-cols { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
  .fit-cols.fit-cols-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit-cols.fit-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A table in its own box, no taller than the window, its header row kept in view. */
.fit-table { max-height: calc(100dvh - 220px); overflow: auto; border-radius: var(--radius-md); }
.fit-table thead th { position: sticky; top: 0; z-index: 1; background: var(--color-surface); }
/* A phone has one scroll, the page's: a table flows with it and only scrolls sideways when wider than the screen. */
@media (max-width: 1100px) {
  .fit-table { max-height: none; overflow-y: visible; overflow-x: auto; }
}

/* An element sized to the window (fitToWindow). At least the window's height,
   and longer when its content is (owner's report, 2026-10-17: "I cannot
   scroll the page and see everything; a little scroll is ok"): the page then
   scrolls a little, and each panel is kept to about a screen, scrolling
   inside itself only when it holds more than that. */
@media (min-width: 1101px) and (min-height: 640px) {
  .fit { min-height: max(420px, calc(100dvh - var(--fit-top, 120px) - var(--space-4))); display: flex; flex-direction: column; gap: var(--space-3); }
  .fit > .fit-grow { flex: 1; }
  .fit .fit-scroll { max-height: calc(100dvh - 140px); overflow: auto; }
  .fit > .fit-cols { flex: 1; align-items: stretch; }
  .fit > .fit-cols > * { max-height: calc(100dvh - 140px); overflow: auto; }
}

/* Scroll bars (owner's request, 2026-10-17: "too many scroll bars, vertical
   and horizontal"). Thin and dark everywhere; a row meant to be swiped shows
   none; and a panel that scrolls down never also scrolls sideways. A panel's
   bar shows all the time, faint, so a panel with more below says so (owner's
   report, 2026-10-17: content below the fold seemed out of reach). */
* { scrollbar-width: thin; scrollbar-color: var(--color-bg-tertiary) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--color-bg-tertiary); border-radius: 8px; }
*::-webkit-scrollbar-corner { background: transparent; }
.ck-scroll:hover, .fit-table:hover, .fit .fit-scroll:hover, .bp-col-main:hover, .bp-col-side:hover, .fit > .fit-cols > *:hover {
  scrollbar-color: var(--color-bg-tertiary) transparent;
}
.ck-scroll:hover::-webkit-scrollbar-thumb, .fit-table:hover::-webkit-scrollbar-thumb, .bp-col-main:hover::-webkit-scrollbar-thumb, .bp-col-side:hover::-webkit-scrollbar-thumb { background: var(--color-bg-tertiary); }
.ck-scroll, .bp-col-main, .bp-col-side, .fit .fit-scroll { overflow-x: hidden; }
.ck-strip, .fit-tabs, .ck-tabs, .bot-tabs, .ss-row { scrollbar-width: none; }
.ck-strip::-webkit-scrollbar, .fit-tabs::-webkit-scrollbar, .ck-tabs::-webkit-scrollbar, .bot-tabs::-webkit-scrollbar { display: none; }
/* Nothing wider than the window: no sideways page scroll on a phone. */
/* clip, not hidden: hidden would make the body a second scroller beside the page's own. */
html, body { overflow-x: clip; }