/* TrueGlass V4: the app frame (D14b). Linked after v4.css by the signed-in
   sealing pages. ui.js appChrome sets body.app-mode only once
   /v4/capabilities says web seals are enabled, and every rule below is
   scoped to it, so public pages, fixture pages and offline mode keep the
   website chrome exactly as before. Tokens come from v4.css :root.
   Motion is CSS only; v4.css turns it all off under reduced motion. */

body.app-mode {
  --app-header-h: 56px;
  --app-tabbar-h: 64px;
  --app-camera-raise: 20px;
}

/* ── the slim header: brand left, Account right ─────────────────────── */
body.app-mode .app-header {
  flex-wrap: nowrap;
  gap: 12px;
  min-height: var(--app-header-h);
  padding-top: 0;
  padding-bottom: 0;
}
body.app-mode .app-header .v4-brand { gap: 8px; font-size: 1.0625rem; min-width: 0; }
body.app-mode .app-header .v4-brand img { width: 26px; height: 26px; flex: none; }
body.app-mode .app-nav {
  order: 0;
  flex: none;
  flex-basis: auto;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 0 0 auto;
}
body.app-mode .app-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--tg-border);
  border-radius: 999px;
  background: var(--tg-surface);
  color: var(--tg-ink);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
body.app-mode .app-nav a .tg-icon { width: 20px; height: 20px; flex: none; }
body.app-mode .app-nav a[aria-current="page"] {
  border-color: var(--tg-accent);
  background: var(--tg-accent-tint);
  color: var(--tg-accent-ink);
  font-weight: 500;
}

/* a dark surface (the camera): opt in with body.app-surface-dark */
body.app-mode.app-surface-dark { background: #000000; }
body.app-mode.app-surface-dark .app-header {
  background: #000000;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
body.app-mode.app-surface-dark .app-header .v4-brand { color: #FFFFFF; }
body.app-mode.app-surface-dark .app-header .brand-glass { color: var(--tg-accent-light); }
body.app-mode.app-surface-dark .app-nav a {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
body.app-mode.app-surface-dark .app-nav a[aria-current="page"] {
  border-color: var(--tg-accent-light);
  color: #FFFFFF;
}

/* ── the bottom tab bar ─────────────────────────────────────────────── */
body.app-mode .app-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 176px) auto minmax(0, 176px);
  justify-content: center;
  align-items: center;
  justify-items: center;
  gap: 0 8px;
  height: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom));
  padding: 0 max(12px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px, env(safe-area-inset-left));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--tg-border);
  box-shadow: 0 -4px 16px rgba(22, 22, 22, 0.05);
}
body.app-mode .app-tab {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 72px;
  max-width: 100%;
  min-height: 52px;
  padding: 6px 10px 4px;
  border-radius: 12px;
  color: var(--tg-faint);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
body.app-mode .app-tab .tg-icon { width: 22px; height: 22px; flex: none; }
body.app-mode .app-tab[aria-current="page"] { color: var(--tg-accent-ink); font-weight: 500; }
/* the current tab carries a bar as well as its colour */
body.app-mode .app-tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 3px;
  margin-left: -12px;
  border-radius: 0 0 3px 3px;
  background: currentColor;
}

/* the raised round camera tab with the mark */
body.app-mode .app-tab.app-tab-camera {
  display: grid;
  place-items: center;
  align-self: start;
  width: 60px;
  height: 60px;
  min-width: 0;
  min-height: 0;
  margin-top: calc(-1 * var(--app-camera-raise));
  padding: 0;
  border: 3px solid var(--tg-accent);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 6px 16px rgba(69, 102, 217, 0.28);
  transition: transform var(--tg-productive) var(--tg-ease), box-shadow var(--tg-productive) var(--tg-ease);
}
body.app-mode .app-tab-camera .tg-mark { width: 32px; height: 32px; }
body.app-mode .app-tab-camera:active { transform: scale(0.94); }
body.app-mode .app-tab.app-tab-camera[aria-current="page"]::before { content: none; }
body.app-mode .app-tab.app-tab-camera[aria-current="page"] {
  box-shadow: 0 0 0 4px rgba(143, 166, 255, 0.45), 0 6px 16px rgba(69, 102, 217, 0.32);
}

/* room under the footer so the fixed bar never hides its last line */
body.app-mode .app-tabbar ~ .v4-footer {
  padding-bottom: calc(40px + var(--app-tabbar-h) + var(--app-camera-raise) + env(safe-area-inset-bottom));
}
/* and focus or scroll-into-view stops above the bar */
:root:has(> body.app-mode > .app-tabbar) {
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

@media (hover: hover) and (pointer: fine) {
  body.app-mode .app-nav a:hover { background: var(--tg-g10); color: var(--tg-ink); }
  body.app-mode .app-nav a[aria-current="page"]:hover { background: var(--tg-accent-tint); color: var(--tg-accent-ink); }
  body.app-mode.app-surface-dark .app-nav a:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
  body.app-mode .app-tab:hover { color: var(--tg-ink); }
  body.app-mode .app-tab[aria-current="page"]:hover { color: var(--tg-accent-ink); }
  body.app-mode .app-tab-camera:hover {
    box-shadow: 0 0 0 4px var(--tg-accent-tint), 0 6px 16px rgba(69, 102, 217, 0.32);
  }
}

/* ── round action buttons (52 px, label below) ──────────────────────── */
body.app-mode .round-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 18px 0 16px;
  padding: 0;
  list-style: none;
}
body.app-mode .round-action {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 96px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tg-ink);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.app-mode .round-action-icon,
body.app-mode .round-action > svg:first-child {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--tg-accent-tint);
  color: var(--tg-accent-ink);
  transition: transform var(--tg-productive) var(--tg-ease), box-shadow var(--tg-productive) var(--tg-ease);
}
body.app-mode .round-action > svg:first-child { padding: 14px; }
body.app-mode .round-action-icon .tg-icon,
body.app-mode .round-action-icon .tg-mark { width: 24px; height: 24px; }
body.app-mode .round-action-primary .round-action-icon,
body.app-mode .round-action-primary > svg:first-child { background: var(--tg-accent); color: #FFFFFF; }
body.app-mode .round-action:active .round-action-icon,
body.app-mode .round-action:active > svg:first-child { transform: scale(0.94); }
body.app-mode .round-action-note { display: block; font-size: 0.6875rem; color: var(--tg-faint); }
/* the disabled look: grey disc, grey words, no pointer, no press */
body.app-mode .round-action:disabled,
body.app-mode .round-action[aria-disabled="true"] { color: var(--tg-faint); cursor: default; }
body.app-mode .round-action:disabled .round-action-icon,
body.app-mode .round-action:disabled > svg:first-child,
body.app-mode .round-action[aria-disabled="true"] .round-action-icon,
body.app-mode .round-action[aria-disabled="true"] > svg:first-child {
  background: var(--tg-g10);
  color: var(--tg-g50);
  transform: none;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  body.app-mode .round-action:not(:disabled):not([aria-disabled="true"]):hover .round-action-icon,
  body.app-mode .round-action:not(:disabled):not([aria-disabled="true"]):hover > svg:first-child {
    box-shadow: 0 0 0 3px var(--tg-accent-light);
  }
}

/* ── stat cards ─────────────────────────────────────────────────────── */
body.app-mode .stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.app-mode .stat-cards.stat-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.app-mode .stat-card {
  min-width: 0;
  margin: 0;
  padding: 12px 12px 10px;
  border: 1px solid var(--tg-border);
  border-radius: 14px;
  background: var(--tg-surface);
  overflow-wrap: anywhere;
}
body.app-mode .stat-value {
  display: block;
  font-size: clamp(1.125rem, 5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
body.app-mode .stat-value small { font-size: 0.75rem; font-weight: 400; color: var(--tg-faint); letter-spacing: 0; }
body.app-mode .stat-label { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.3; color: var(--tg-muted); }

/* ── tabs (role=tablist): an underline marks the selected one ───────── */
body.app-mode .app-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin: 18px 0 12px;
  border-bottom: 1px solid var(--tg-border);
}
body.app-mode .app-tabs [role="tab"] {
  min-height: 44px;
  margin: 0 0 -1px;
  padding: 10px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--tg-faint);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.3;
  cursor: pointer;
}
body.app-mode .app-tabs [role="tab"][aria-selected="true"] {
  color: var(--tg-ink);
  font-weight: 500;
  border-bottom-color: var(--tg-accent);
}
@media (hover: hover) and (pointer: fine) {
  body.app-mode .app-tabs [role="tab"]:hover { color: var(--tg-ink); }
}

/* ── grouped lists: rows with a value or a chevron at the right ─────── */
body.app-mode .app-list-head {
  margin: 22px 2px 8px;
  font-family: var(--tg-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: var(--tg-caps-track);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--tg-faint);
}
body.app-mode .app-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--tg-border);
  border-radius: 14px;
  background: var(--tg-surface);
  overflow: hidden;
}
body.app-mode .app-list > * + * { border-top: 1px solid var(--tg-border); }
body.app-mode .app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  color: var(--tg-ink);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}
body.app-mode button.app-row {
  width: 100%;
  border-width: 0;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}
body.app-mode .app-list > * + button.app-row { border-top: 1px solid var(--tg-border); }
body.app-mode .app-row-main { flex: 1 1 auto; min-width: 0; }
body.app-mode .app-row-sub { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.4; color: var(--tg-faint); }
body.app-mode .app-row-value {
  flex: 0 1 auto;
  max-width: 55%;
  color: var(--tg-muted);
  font-size: 0.875rem;
  text-align: right;
}
body.app-mode .app-row .tg-icon-chevron { flex: none; width: 18px; height: 18px; color: var(--tg-g50); }
@media (hover: hover) and (pointer: fine) {
  body.app-mode a.app-row:hover,
  body.app-mode button.app-row:hover { background: var(--tg-g10); color: var(--tg-ink); }
}

/* ── the bottom sheet ([hidden] when closed) ────────────────────────── */
body.app-mode .app-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  max-width: 560px;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  margin: 0 auto;
  padding: 8px max(18px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--tg-border);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--tg-surface);
  color: var(--tg-ink);
  box-shadow: 0 -8px 32px rgba(22, 22, 22, 0.16);
  animation: app-sheet-in 220ms var(--tg-ease) both;
}
/* the grab handle (decoration only) */
body.app-mode .app-sheet::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 2px;
  background: var(--tg-g30);
}
body.app-mode .app-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
body.app-mode .app-sheet-title { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
@keyframes app-sheet-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ── full-width buttons (48 px) ─────────────────────────────────────── */
body.app-mode .app-btn-primary,
body.app-mode .app-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tg-productive) var(--tg-ease), transform var(--tg-productive) var(--tg-ease);
}
body.app-mode .app-btn-primary { background: var(--tg-accent); color: #FFFFFF; }
body.app-mode .app-btn-secondary { background: var(--tg-accent-tint); color: var(--tg-accent-ink); }
body.app-mode :is(.app-btn-primary, .app-btn-secondary) + :is(.app-btn-primary, .app-btn-secondary) { margin-top: 10px; }
body.app-mode .app-btn-primary:active,
body.app-mode .app-btn-secondary:active { transform: scale(0.98); }
body.app-mode .app-btn-primary:disabled,
body.app-mode .app-btn-primary[aria-disabled="true"],
body.app-mode .app-btn-secondary:disabled,
body.app-mode .app-btn-secondary[aria-disabled="true"] {
  border-color: var(--tg-border);
  background: var(--tg-g10);
  color: var(--tg-faint);
  cursor: not-allowed;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  body.app-mode .app-btn-primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--tg-accent-ink); color: #FFFFFF; }
  body.app-mode .app-btn-secondary:not(:disabled):not([aria-disabled="true"]):hover {
    border-color: var(--tg-accent-light);
    color: var(--tg-accent-ink);
  }
}

/* ── chips ──────────────────────────────────────────────────────────── */
body.app-mode .app-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--tg-border);
  border-radius: 999px;
  background: var(--tg-g10);
  color: var(--tg-muted);
  font-size: 0.75rem;
  line-height: 1.3;
  overflow-wrap: break-word;
}
body.app-mode .app-row > .app-chip { flex: none; }
body.app-mode .app-chip .tg-icon { width: 14px; height: 14px; flex: none; }

/* ── visually hidden, still read out ────────────────────────────────── */
body.app-mode .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* ── the home-screen app: safe areas (H1, PWA-4) ────────────────────── */
/* The five app pages declare viewport-fit=cover. Opened from the home
   screen, a page can then run under the status bar, a notch or the
   gesture bar. Each env(safe-area-inset-*) is that band's size there and
   0 in an ordinary browser tab, so these rules change nothing in a tab.
   Already counted before this block: the banner, always the frame's top
   edge, pads its top (v4.css); --tg-gutter takes the side insets for the
   banner, the slim header and the pages (v4.css); the tab bar, the sheet
   and the footer pad their bottoms (above); the camera surface counts the
   top and the bottom (seal-capture.css). One thing was left: the skip
   link, which shows at the top-left corner when focused. */
body.app-mode .skip-link { top: env(safe-area-inset-top, 0px); }
body.app-mode .skip-link:focus { left: env(safe-area-inset-left, 0px); }

/* ── forced colours and print ───────────────────────────────────────── */
@media (forced-colors: active) {
  body.app-mode .app-nav a[aria-current="page"],
  body.app-mode .app-tab[aria-current="page"] { outline: 2px solid LinkText; outline-offset: 2px; }
  body.app-mode .app-tab[aria-current="page"]::before { forced-color-adjust: none; background-color: LinkText; }
  body.app-mode .app-tabs [role="tab"] { border-bottom-style: none; }
  body.app-mode .app-tabs [role="tab"][aria-selected="true"] { border-bottom: 2px solid Highlight; }
  body.app-mode .round-action-icon,
  body.app-mode .round-action > svg:first-child { border: 1px solid CanvasText; }
}
@media print {
  body.app-mode .app-tabbar,
  body.app-mode .app-sheet { display: none; }
}