/* indie10-controls.css — ONE control system for every button in the app.
 * ═══════════════════════════════════════════════════════════════════════
 *
 * MEASURED BEFORE WRITTEN. An audit of the running app found 60 visible
 * buttons wearing 39 DISTINCT treatments — 13 heights (11px to 40px), 7 border
 * radii, 9 font sizes, 4 weights and THREE font families, one of which was
 * Arial (i.e. buttons that set no font at all and inherited the browser
 * default). Three different accent colours were live in borders at once:
 * `+ New Game` teal rgba(63,224,200), `⌘ Chat` blue rgba(59,130,246),
 * `+ Project` cyan. That is why the interface reads as several apps.
 *
 * WHAT THIS FILE DOES
 * Collapses those 39 treatments onto a small scale. It is ADDITIVE and loads
 * after nd10-theme.css — it adds no markup, removes no selector, and deletes
 * no button. Behaviour is untouched; only paint changes.
 *
 * THE SCALE — three sizes, two radii, one font, two weights.
 *   sm  22px   9px   panel chrome, inline actions
 *   md  28px  10px   topbar clusters, tabs, most things
 *   lg  32px  11px   primary actions (Run, Enter)
 *
 * WHAT IS DELIBERATELY *NOT* FLATTENED
 * Run stays green and Folio stays gold. Those encode meaning — "this executes"
 * and "this is the other mode" — and erasing them would be tidiness at the cost
 * of legibility. They adopt the system's geometry and typography; they keep
 * their colour.
 *
 * EVERY COLOUR HERE IS A TOKEN. Re-skinning the entire control surface is
 * editing indie10-tokens.css, not this file.
 */

/* ── 1. THE BASELINE — applies to EVERY button, named or not.
   Naming eight classes was not enough: the audit's largest clusters were
   components I had not listed, and the buttons measuring 13.3333px were ones
   that declared no font-size at all and inherited the browser default. A
   baseline on the element itself catches every button written from now on,
   including ones no stylesheet knows about.

   Only the four properties that are safe to set blind are here — type, weight,
   tracking, radius. Height and padding are NOT: they carry layout, and
   flattening them globally would move things. Those are set per family below,
   where the consequences are visible. ── */
button,
.tb-btn, .app-mode, .ds-ctab, .rail-btn, .i10-action, .panel-ico, .find-btn {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
}

/* Buttons whose whole job is one glyph read better slightly larger and
   lighter — they are icons, not labels. */
.panel-ico, .tab-close, .ide-proj-add {
  font-weight: 400;
}

/* ── 2. ONE RADIUS SCALE. Was 0/3/4/5/6/7/8px — now 6px for controls, and
   only genuinely round things stay round. ── */
button, .tb-btn, .app-mode, .ds-ctab, .i10-action, .find-btn, .panel-ico {
  border-radius: 6px;
}
.rail-btn { border-radius: 8px; }   /* larger surface, keeps its softer corner */

/* ── 3. THE HEIGHT + TYPE SCALE ─────────────────────────────────────────
   Snaps the 13 measured heights onto three. Applied per family rather than
   globally, so nothing that depends on an odd height for layout moves. */

/* md — the default. Topbar clusters, mode tabs, chat tabs. */
.tb-btn, .app-mode, .ds-ctab {
  height: 28px;
  font-size: 10px;
  font-weight: 600;
  padding: 0 10px;
}

/* sm — panel chrome and inline actions. */
.find-btn, .ide-proj-add, .panel-ico {
  height: 22px;
  font-size: 9px;
  font-weight: 600;
}

/* lg — primary actions. */
.i10-action, .fs-enter-btn { min-height: 32px; font-size: 11px; font-weight: 700; }

/* ── 3b. THE HEIGHT SCALE — 13 measured heights onto 4, plus the rail.
   ═══════════════════════════════════════════════════════════════════════
   Mapped from a live inventory of every button by component, not guessed.
   The worst offenders were SIBLINGS that disagreed: .ide-tree-toolbar held
   20px and 22px buttons in the same bar, so the row read as ragged even
   though nothing was "wrong" with either.

     xs  20px   dense inline chrome (terminal, code-panel pills, clear)
     sm  24px   panel actions and toolbars — the workhorse
     md  28px   primary chrome: topbar clusters, tabs, editor actions
     lg  32px   commit actions: Run, chat send
     --  40px   .rail-btn keeps its own size; it is icon-over-label, a
                different component, and shrinking it would crush the label

   Heights are set with min-height, not height, so a control that genuinely
   needs to grow (wrapped label, larger glyph) still can instead of clipping
   its own text. ── */

/* xs */
.term-btn, .cp-pill, .console-clear {
  min-height: 20px; height: 20px;
}
/* sm — the workhorse. Absorbs the old 22/23/24/25 spread. */
.ide-tree-toolbar button, .find-btn, .ide-proj-add, .tab-add, .panel-ico,
.ds-term-cmdbar button, .cp-action, .vp-btn, .dsw-hit-btn, .ds-mode-btn,
.editor-tabs button {
  min-height: 24px; height: 24px;
}
/* .editor-tabs held classless 20px buttons ("⊟ Editor", "? Guide") directly
   beside a 24px .tab-add — siblings in one bar disagreeing by 4px. Scoped by
   container because those buttons carry no class of their own. */

/* lg, forced: the chat send button sets its own 34px, and min-height alone
   cannot pull a control DOWN. */
.ds-chat-footer button { height: 32px; }
/* md — absorbs 26 and 30 into the 28 that most chrome already used. */
.tb-btn, .ds-ctab, .app-mode, .insp-tab {
  min-height: 28px; height: 28px;
}
/* lg — the two controls that commit something. */
.run-btn, #btn-run, .ds-chat-footer button, .i10-action, .fs-enter-btn,
.editor-action-btn {
  min-height: 32px;
}
/* .editor-action-btn measured scrollHeight 29 inside a 28px box — it clips at
   md. It is a commit action anyway ("Upload" / "New" in the empty editor), so
   it belongs at lg. Caught by the clip check, not by eye. */

/* ── 4. ONE ACCENT. The stray blue and teal borders are overridden to the
   token, so an active control is the same colour everywhere. This is the
   single change that makes it read as one product. ── */
.tb-btn.active,
.ds-ctab.active,
.app-mode.active-dev,
.rail-btn.active,
.ide-proj-add {
  border-color: rgba(var(--accent-rgb), .40) !important;
  color: var(--blue);
}
.tb-btn.active, .ds-ctab.active, .app-mode.active-dev, .rail-btn.active {
  background: rgba(var(--accent-rgb), .14);
}

/* Idle chrome: one quiet treatment instead of five near-misses. */
.tb-btn:not(.active):not(.gold-active):not(.success):not(.warn):not(.danger) {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-mid);
}
.tb-btn:not(.active):not(.gold-active):hover {
  background: var(--rule-08);
  border-color: var(--rule-12);
  color: var(--text);
}

/* ── 5. SEMANTIC ACTIONS keep their colour, adopt the geometry.
   Run was 32px/800-weight solid green with black text — the weight and the
   black text were unique in the whole app. It stays unmistakably green. ── */
#btn-run, .tb-btn.success {
  height: 32px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: .5px;
}
.tb-btn.gold-active, .app-mode.active-folio {
  border-color: var(--gold-30) !important;
  background: var(--gold-d);
  color: var(--gold);
}

/* ── 6. SEGMENTED CONTROLS (Manual / Plan / Auto) — these measured 12px
   ARIAL at radius 0, i.e. entirely unstyled, sitting next to fully styled
   chrome. That contrast was the loudest single thing in the toolbar. ── */
.ds-mode-seg button,
.ds-seg button,
[class*="-seg"] > button {
  height: 22px;
  font-size: 9px;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-mid);
  padding: 0 9px;
}
.ds-mode-seg button.active,
.ds-seg button.active,
[class*="-seg"] > button.active {
  background: rgba(var(--accent-rgb), .16);
  border-color: rgba(var(--accent-rgb), .40);
  color: var(--blue);
}

/* ── 7. FOCUS. Was absent on most controls — a keyboard user could not see
   where they were. One ring, on the accent, everywhere. ── */
button:focus-visible,
.tb-btn:focus-visible, .app-mode:focus-visible, .ds-ctab:focus-visible,
.rail-btn:focus-visible, .i10-action:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), .70);
  outline-offset: 2px;
}

/* ── 8. DISABLED — one consistent read instead of per-component guesses. ── */
button:disabled, .tb-btn:disabled, .i10-action:disabled {
  opacity: .42;
  cursor: not-allowed;
}