/* GENERATED by platform/adaptive/build.mjs — DO NOT EDIT.
   Source: platform/adaptive/adaptive.css. Edit there, then re-run the build.
   `build.mjs --check` fails if this copy has drifted. */
/* ── THE GARUDA ADAPTIVE CONTRACT ─────────────────────────────────────────
   Tokens and components for phone / tablet / desktop, for every module.
   This file is the SOURCE; each module's `web/garuda-adaptive.css` is a
   generated copy — run `node platform/adaptive/build.mjs`.

   Nothing in here lays a module out. It declares the numbers a module's own
   stylesheet keys on (`--tap-min`, `--safe-b`, `--kb`, `--vvh`), the four
   relocation shapes (drawer, sheet, dock, bottom bar) and ONE touch rule.
   A module's phone and tablet rules live in its own style.css and are keyed
   on `html[data-device="phone"]` / `"tablet"` — set by the inline gate that
   the build copies from adaptive.js into every index.html — never on a
   breakpoint of the module's own choosing.

   Specificity, not load order, is what makes these rules win: every one that
   must beat a module rule carries the `html[data-…]` prefix. */

:root {
  --tap-min: 44px;           /* Apple HIG 44pt; Material 48dp; below this a thumb misses */
  --tap-gap: 8px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --vvh: 100vh;              /* the visible height; adaptive.js rewrites it in px from visualViewport */
  --kb: 0px;                 /* on-screen keyboard height; 0 when it is down */
  --ad-bar-h: 56px;          /* the phone bottom bar */
  --ad-dock-h: 0px;          /* whatever sits above the bar (formula bar, filmstrip); a module sets it */
  --ad-sheet-max: 640px;     /* Material's bottom-sheet cap; centred on anything wider */
  --ad-z-bar: 88;
  --ad-z-drawer: 90;
  --ad-z-sheet: 92;
  --ad-z-popup: 94;
}
html[data-landscape="1"] { --ad-bar-h: 44px; }

/* ---- the one touch rule --------------------------------------------------
   Every control a finger can press is at least --tap-min tall. Specificity 0
   (`:where`) so any module rule wins, and the ribbon band, the tab strip and
   the status bar are exempt: the 92px band contract needs its 20px rows, and
   a tablet's band is held to the WCAG 24px floor instead. `.ad-exempt` opts a
   subtree out deliberately. `min-height` beats a fixed `height`, which is why
   the exemptions are load-bearing. */
html[data-touch="1"] :where(button, select, textarea, [role="button"], [role="menuitem"], [role="option"], [role="tab"], summary, a.tool, a.btn, a.iconbtn, a.icon-btn, a.navitem, a.rail-item, a.nav-item, a.brand, a.home-brand, a.home-nav-btn, a[class*="-btn"], a[class*="btn-"], a.tab, a.item,
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"])):where(:not(.ribbon *, .tabs *, .statusbar *, .rulerwrap *, .ruler *, .ad-exempt, .ad-exempt *)) {
  min-height: var(--tap-min);
}
/* (The two :where() lists above are ONE compound selector — a space between
   them once made this a descendant rule that matched nothing, and every
   28px title-bar button stayed 28px on a phone while the audit reported it.) */
/* A checkbox or radio is 13px by default; a finger needs the box itself
   to be a target even when its label is the one that counts. */
html[data-touch="1"] :where(input[type="checkbox"], input[type="radio"]):where(:not(.ad-exempt, .ad-exempt *)) { width: 22px; height: 22px; }
html[data-touch="1"] :where(button, a, .tool, [role="button"], [role="menuitem"], [role="tab"], label) {
  touch-action: manipulation;          /* no double-tap zoom, no 300ms click delay */
  -webkit-tap-highlight-color: transparent;
}

/* ---- drawer: a docked pane on a desktop, an overlay on a tablet, the whole
   screen on a phone. The pane keeps its own `hidden` logic; this only decides
   where a VISIBLE pane sits. `--ad-drawer-top` lets a module keep its title
   bar above the pane. */
html[data-device="tablet"] [data-ad-drawer]:not([hidden]),
html[data-device="phone"] [data-ad-drawer]:not([hidden]) {
  position: fixed !important;
  top: var(--ad-drawer-top, 0);
  bottom: calc(var(--ad-bar-h) * var(--ad-has-bar, 0) + var(--ad-dock-h) + var(--safe-b));
  z-index: var(--ad-z-drawer);
  width: min(var(--ad-drawer-w, 320px), 92vw);
  max-width: none;
  min-width: 0;
  height: auto;
  overflow: auto;
  background: var(--surface, #fff);
  box-shadow: 0 12px 40px rgba(15, 27, 60, .22);
  resize: none;
}
html[data-device="tablet"] [data-ad-drawer="left"]:not([hidden]),
html[data-device="phone"] [data-ad-drawer="left"]:not([hidden]) { left: 0; right: auto; }
html[data-device="tablet"] [data-ad-drawer="right"]:not([hidden]),
html[data-device="phone"] [data-ad-drawer="right"]:not([hidden]) { right: 0; left: auto; }
html[data-device="phone"] [data-ad-drawer]:not([hidden]) { width: auto; left: 0; right: 0; box-shadow: none; }

.ad-scrim {
  position: fixed; inset: 0; z-index: calc(var(--ad-z-drawer) - 1);
  background: rgba(15, 27, 60, .28);
}
.ad-scrim[hidden] { display: none; }

/* ---- the phone bottom bar ------------------------------------------------ */
.ad-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ad-z-bar);
  height: calc(var(--ad-bar-h) + var(--safe-b));
  padding: 0 4px var(--safe-b);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: 2px;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #d9dde3);
  box-shadow: 0 -6px 20px rgba(15, 27, 60, .08);
}
.ad-bar[hidden] { display: none; }
.ad-bar .ad-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tap-min); padding: 4px 2px;
  border: 0; border-radius: 10px; background: transparent; color: var(--text, #1f2937);
  font: inherit; font-size: 10.5px; line-height: 1.1; cursor: pointer;
  white-space: normal; text-align: center; overflow: hidden;
}
.ad-bar .ad-tab .ic, .ad-bar .ad-tab svg { width: 22px; height: 22px; flex: none; }
.ad-bar .ad-tab[aria-pressed="true"], .ad-bar .ad-tab[aria-expanded="true"] { color: var(--accent, #2f6be0); background: var(--accent-soft, rgba(47, 107, 224, .10)); }
.ad-bar .ad-tab:disabled { opacity: .38; }
.ad-bar .ad-tab-primary { font-weight: 650; }
html[data-landscape="1"] .ad-bar .ad-tab span:not(.ic) { display: none; }

/* The strip above the bar: a formula bar, a filmstrip, sheet tabs. */
.ad-dock {
  position: fixed; left: 0; right: 0; z-index: var(--ad-z-bar);
  bottom: calc(var(--ad-bar-h) + var(--safe-b) + var(--kb));
  min-height: 0; display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #d9dde3);
}
.ad-dock:empty { display: none; }
/* A scroll root that has to clear the bar and the dock. */
.ad-under-bar { padding-bottom: calc(var(--ad-bar-h) + var(--ad-dock-h) + var(--safe-b)) !important; }

/* ---- the sheet ----------------------------------------------------------- */
.ad-sheet {
  position: fixed; left: 0; right: 0; z-index: var(--ad-z-sheet);
  bottom: calc(var(--ad-bar-h) * var(--ad-has-bar, 0) + var(--safe-b));
  height: var(--ad-sheet-h, 50dvh);
  max-height: calc(var(--vvh) - 40px);
  max-width: var(--ad-sheet-max); margin: 0 auto;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface, #fff);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(15, 27, 60, .22);
  transition: height .18s ease;
  overscroll-behavior: contain;
}
.ad-sheet[hidden] { display: none; }
.ad-sheet-grab { flex: none; height: 22px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.ad-sheet-bar { width: 38px; height: 4px; border-radius: 2px; background: var(--border, #d0d5dc); }
.ad-sheet-head {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 0 8px 6px 12px; border-bottom: 1px solid var(--border, #e3e6eb);
}
.ad-sheet-title { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-sheet-slot { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
.ad-sheet-slot[hidden] { display: none; }
.ad-sheet-close, .ad-sheet-back {
  flex: none; width: var(--tap-min); height: var(--tap-min); border: 0; border-radius: 10px;
  background: transparent; color: var(--muted, #5b6472); font: inherit; font-size: 20px; cursor: pointer;
}
.ad-sheet-back { font-size: 26px; }
.ad-sheet-close:hover, .ad-sheet-back:hover { background: var(--surface-2, rgba(0, 0, 0, .05)); }
.ad-sheet-back[hidden] { display: none; }
.ad-sheet-body, .ad-sheet-page {
  flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--safe-b);
}
.ad-sheet-body[hidden], .ad-sheet-page[hidden] { display: none; }

/* A dropdown that placePopup() turned into a sheet on a phone. `!important`
   because modules place their menus with inline left/top. */
html[data-device="phone"] .ad-popup-sheet {
  position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important;
  bottom: calc(var(--ad-bar-h) * var(--ad-has-bar, 0) + var(--safe-b) + var(--kb)) !important;
  z-index: var(--ad-z-popup) !important;
  width: auto !important; max-width: var(--ad-sheet-max) !important; margin: 0 auto !important;
  max-height: min(70dvh, calc(var(--vvh) - 56px)) !important; overflow: auto !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -12px 40px rgba(15, 27, 60, .22) !important;
  transform: none !important;
}
html[data-device="phone"] .ad-popup-sheet > * { min-width: 0; }

/* A page pushed inside the sheet keeps the pushed element's own width rules
   from fighting the sheet. */
.ad-sheet-page > * { position: static !important; width: auto !important; max-width: none !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; }

/* ---- a hint for the reader --------------------------------------------- */
/* Rules a MODULE writes, in its own style.css, look like this:

     html[data-device="phone"]  .cmtpane { … }          -- phone
     html[data-device="tablet"] .cmtpane { … }          -- tablet
     html[data-touch="1"]       .iconbtn { min-height: var(--tap-min); }
     .app { height: 100vh; height: 100dvh; }            -- the pair, always

   and never `@media (max-width: …) { .x { display: none } }` — the build
   refuses that unless the line above says where the feature went. */