/* ============================================================
   DESIGN UPGRADE — Space & Organization levers (Donald's order,
   Oct 19, 2026: "Go ahead and upgrade the website design. Make
   sure I can choose to go back to the last version if I don't
   like the new one.")

   HOW THIS FILE WORKS — read before editing:
   · Layer N (plain rules, first) IS the new design. It loads
     after app.css and restates ONLY the lever-affected
     properties: type sizes, spacing, settings-group boxes,
     card-meta layout, the wide-screen flat scale. Layout,
     order, colors, components and app.css itself are untouched.
   · Layer P (html[data-design="prev"] rules, second) restates
     the pre-upgrade value of every property Layer N changed,
     breakpoint for breakpoint. A super admin flips it from
     Profile → Settings → Appearance (see js/design.js); the
     choice is per-browser (localStorage tn_design) and affects
     only that admin's own view — members always get Layer N.
   · Short final grid rows centering as a group (Lever 4) is the
     one lever CSS cannot express; js/design.js does it and
     stands down entirely in Previous mode.
   ============================================================ */

/* ---------- Layer N · Lever 1 — type scale -------------------
   Page title 32→26 · section heads 18→16 · card titles 16→14 ·
   body 16→14 (line-height 1.5→1.55) · card facts 12→11 ·
   prices 17→16 · big chips 15→13. Floors held: nothing under
   11px; pre-existing 9px micro-labels untouched; descriptive
   prose (.small, .page-desc, hints) stays 12px muted gray;
   titles stay centered and uniform. */
body { font-size: 14px; line-height: 1.55; }
h1 { font-size: 26px; }
.garages-page h1 { font-size: 26px; }
.drawer-head h2 { font-size: 16px; }
.admin-section h2 { font-size: 16px; }
.tool-card-title { font-size: 14px; }
.tool-card-meta { font-size: 11px; }
.tool-card-price { font-size: 16px; }
.tool-card-price small, .tool-card-price .rate-per { font-size: 11px; }
.chip { font-size: 13px; padding: 8px 14px; }
.price-line { font-size: 26px; }

/* ---------- Layer N · Lever 2 — air --------------------------
   Card padding 16→20 · card stack gap 16→20 · card-body
   padding 12×14→14×16 · feed grid gap 12→16 (20 at ≥1440) ·
   page edges 16→20 (24→28 at ≥1024) · page-head separation
   24→28 · drawer rows padding 10→14 · tool description block
   margins 20/40→24/48, side padding 16→20. One 4px rhythm. */
.card { padding: 20px; margin-bottom: 20px; }
.tool-card-body { padding: 14px 16px; }
.tool-grid { gap: 16px; }
#pub-tools .tool-grid { gap: 16px; }
.merch-grid { gap: 16px; }
.drawer-body .tool-grid { gap: 16px; }
.container { padding: 20px; }
.page-head-centered { margin-bottom: 28px; }
.tool-row { padding: 14px; }
.tool-buyer .tool-desc-block { margin: 24px auto 48px; padding: 0 20px; }
@media (min-width: 1024px) {
  .container { padding: 28px; }
  .tool-buyer .tool-desc-block { margin-top: 28px; }
}
@media (min-width: 1440px) {
  .tool-grid, #pub-tools .tool-grid, .merch-grid { gap: 20px; }
}

/* ---------- Layer N · Lever 3 — Settings grouped by air ------
   Scoped to Profile → Settings (js/views/profile.js wraps the
   tab in .settings-groups): groups keep their quiet labels and
   lose the bordered boxes; rows sit on the page ground and
   .feat-row siblings keep their hairlines. (Every card inside
   the settings wrapper un-boxes — a settings group often runs
   label → several stacked cards, and un-boxing only the first
   left the group half-boxed.) The two control cards above the
   wrapper (Appearance, Advanced-profile) and cards everywhere
   else on the platform keep the full border + house shadow. */
.settings-groups h3.mt {
  font-size: 13px; color: var(--muted); letter-spacing: 0.08em;
  font-weight: 700; margin: 28px 0 4px; text-align: left;
}
.settings-groups .card {
  background: transparent; border: none; box-shadow: none;
  border-radius: 0; padding: 8px 0 12px; margin-bottom: 8px;
}
/* Lever 6 companion: the language row's bold label is gone
   (the group label says it once) — keep the picker resting at
   the right edge, exactly where it sat beside the label. */
.settings-groups .lang-picker-row select { margin-left: auto; }

/* ---------- Layer N · Lever 5 — one calm meta line -----------
   Card faces that stack TWO .tool-card-meta lines (merch
   listings: category + stock; pro cards: company + facts) flow
   as ONE 11px line in the new design. Every fact is kept —
   the second line joins the first with the house " · "
   separator instead of stacking. (The main tool card already
   renders a single meta line; it only takes Lever 1's 11px.) */
.tool-card-body .tool-card-meta:has(+ .tool-card-meta) { display: inline; }
.tool-card-body .tool-card-meta + .tool-card-meta { display: inline; }
.tool-card-body .tool-card-meta + .tool-card-meta::before { content: " · "; }

/* ---------- Layer N · Lever 7 — one flat wide-screen scale ---
   The ≥1440/≥1920 type tug-of-war in app.css (an inflation
   block, then an audit block pulling most of it back) resolves
   to the Lever 1 scale at every width: Layer N loads last, so
   body / card title / price / card padding already hold flat;
   the one value the audit block pins above the flat scale is
   restated here. Width buys columns (app.css §D auto-fill) and
   the Lever 2 gaps — never bigger text. */
@media (min-width: 1920px) {
  h2 { font-size: 21px; }
}

/* ============================================================
   Layer P · PREVIOUS DESIGN — restores the pre-upgrade value
   of every property Layer N changed. The attribute lives on
   <html> (set pre-paint by the boot script in index.html when
   localStorage tn_design = 'prev', and live by js/design.js).
   ============================================================ */
html[data-design="prev"] body { font-size: 16px; line-height: 1.5; }
html[data-design="prev"] h1 { font-size: 32px; }
html[data-design="prev"] .garages-page h1 { font-size: 32px; }
html[data-design="prev"] .drawer-head h2 { font-size: 18px; }
html[data-design="prev"] .admin-section h2 { font-size: 18px; }
html[data-design="prev"] .tool-card-title { font-size: 16px; }
html[data-design="prev"] .tool-card-meta { font-size: 12px; }
html[data-design="prev"] .tool-card-price { font-size: 17px; }
html[data-design="prev"] .tool-card-price small,
html[data-design="prev"] .tool-card-price .rate-per { font-size: 12px; }
html[data-design="prev"] .chip { font-size: 15px; padding: 10px 18px; }
html[data-design="prev"] .price-line { font-size: 28px; }

html[data-design="prev"] .card { padding: 16px; margin-bottom: 16px; }
html[data-design="prev"] .tool-card-body { padding: 12px 14px; }
html[data-design="prev"] .tool-grid { gap: 12px; }
html[data-design="prev"] #pub-tools .tool-grid { gap: 12px; }
html[data-design="prev"] .merch-grid { gap: 12px; }
html[data-design="prev"] .drawer-body .tool-grid { gap: 12px; }
html[data-design="prev"] .container { padding: 16px; }
html[data-design="prev"] .page-head-centered { margin-bottom: 24px; }
html[data-design="prev"] .tool-row { padding: 10px; }
html[data-design="prev"] .tool-buyer .tool-desc-block { margin: 20px auto 40px; padding: 0 16px; }
@media (min-width: 1024px) {
  html[data-design="prev"] .container { padding: 24px; }
  html[data-design="prev"] .tool-buyer .tool-desc-block { margin-top: 28px; }
}
@media (min-width: 1440px) {
  html[data-design="prev"] .tool-grid,
  html[data-design="prev"] #pub-tools .tool-grid,
  html[data-design="prev"] .merch-grid { gap: 12px; }
}
@media (min-width: 1920px) {
  /* Today's effective TV gap for the plain tool grid is 20px
     (the old inflation block set it; the audit block never
     pulled it back) — Previous restores exactly that. */
  html[data-design="prev"] .tool-grid { gap: 20px; }
  html[data-design="prev"] h2 { font-size: 24px; }
}

html[data-design="prev"] .settings-groups h3.mt {
  font-size: 1.17em; color: inherit; letter-spacing: normal;
  font-weight: 700; margin: 1em 0; margin-top: 16px;
}
html[data-design="prev"] .settings-groups .card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 16px;
}

html[data-design="prev"] .tool-card-body .tool-card-meta:has(+ .tool-card-meta) { display: block; }
html[data-design="prev"] .tool-card-body .tool-card-meta + .tool-card-meta { display: block; }
html[data-design="prev"] .tool-card-body .tool-card-meta + .tool-card-meta::before { content: none; }