/*
 * DiscoveryEdge glue on top of ae-sentinel's shared styles (frame.css, components/*.css) and the design-system
 * tokens (ds/). Only tokens; the few literals are the DS components' own and say where they come from.
 * Screen-specific styles live in css/screens/<screen>.css, one owner each.
 */

/* Views are toggled with the hidden attribute; component classes set display, so hidden must win. */
[hidden] { display: none !important; }

/* Each view fills the content region (.ae-shell__main) the way an ae-sentinel page does. */
.ae-shell__main > .de-view { flex: 1 1 auto; min-width: 0; min-height: 0; }

/* ---- product identity (a DiscoveryEdge proposal; the DS SideNav has no product slot yet) ----
   Full width: the AE "A" mark and the product name on one row, level with the topbar.
   Rail: a neutral "DE" tile on top (orange stays "you are here"), the "A" mark pinned to the bottom. */
.de-brand { gap: var(--s-2); }
.de-brand__mark { flex: 0 0 auto; }
.de-brand__name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--weight-semibold) var(--text-md)/1.2 var(--font-sans); letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
}
.de-brand__tile {
  display: none; place-items: center;
  width: 28px; height: 28px; /* the rail's 34px nav row, less its padding */
  border-radius: var(--radius-sm);
  background: var(--surface-inverse); color: var(--text-inverse);
  font: var(--weight-bold) var(--text-xs)/1 var(--font-sans); letter-spacing: var(--tracking-wide);
}
.ae-sidenav.is-rail .de-brand__mark,
.ae-sidenav.is-rail .de-brand__name { display: none; }
.ae-sidenav.is-rail .de-brand__tile { display: grid; }
/* Rail order: the expand toggle stays in the topbar row (where collapse was), the tile sits one nav row below. */
.ae-sidenav.is-rail .ae-sidenav__toggle { order: -1; margin-block: calc((var(--topbar-h) - 30px) / 2); }
.ae-sidenav.is-rail .de-brand { height: var(--nav-row-h); }
/* One centre line in the rail: frame.css pads the list 4px left / 16px right for the labels, which pushes the
   icons 6px off the rail's centre. Centre the list and make each row a nav-row-sized square. */
.ae-sidenav.is-rail .ae-sidenav__scroll { padding-inline: var(--s-1); }
.ae-sidenav.is-rail .ae-navrow { width: var(--nav-row-h); margin-inline: auto; }
.de-sidenav__foot { display: none; }
.ae-sidenav.is-rail .de-sidenav__foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  height: var(--topbar-h);
}

/* ---- side navigation extras the DS SideNav defines and ae-sentinel did not need ---- */
/* SectionHeader (DS SideNav.jsx): overline 10px, 0.1em tracking, uppercase, --nav-section-fg, a trailing hairline */
.ae-sidenav__section {
  display: flex; align-items: center; gap: var(--s-2);
  margin: var(--s-4) var(--s-2) var(--s-1);
  font: var(--type-overline); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; /* DS SectionHeader */
  color: var(--nav-section-fg);
  list-style: none;
}
.ae-sidenav__section:first-child { margin-top: 0; }
.ae-sidenav__section::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border-subtle); }
.ae-sidenav.is-rail .ae-sidenav__section { display: none; }

/* NavBadge (DS SideNav.jsx): counts only, queues only; zero renders dimmed; on the selected row a scrim of white */
.ae-navrow__badge {
  flex-shrink: 0; min-width: 18px; padding-inline: 5px; /* DS NavBadge */
  border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted);
  font-size: var(--text-2xs); font-weight: var(--weight-medium); line-height: 16px; text-align: center;
}
.ae-navrow__badge.is-zero { opacity: 0.45; }
.ae-navrow[aria-current="page"] .ae-navrow__badge { background: var(--on-brand-scrim); color: var(--ae-neutral-0); }
.ae-sidenav.is-rail .ae-navrow__badge { display: none; }

/* A row the account cannot open yet (Full access required): stays readable, a lock glyph says why */
.ae-navrow__lock { display: inline-flex; flex-shrink: 0; color: var(--text-subtle); }
.ae-navrow.is-locked .ae-navrow__label { color: var(--text-muted); }
.ae-sidenav.is-rail .ae-navrow__lock { display: none; }

/* ---- top bar extras ---- */
.ae-topbar__account { position: relative; flex: 0 0 auto; }
.ae-menu__meta {
  display: grid; gap: 2px; padding: var(--s-2) var(--s-2) var(--s-1);
  font: var(--type-caption); color: var(--text-muted);
}
.ae-menu__meta strong { font: var(--type-body-sm); font-weight: var(--weight-semibold); color: var(--text-strong); overflow-wrap: anywhere; }

/* ---- sign-in: the register/sign-in switch sits on the form card ---- */
.ae-login__fine { font: var(--type-caption); color: var(--text-subtle); }

/* ---- BulkActionBar (DS feedback/BulkActionBar.jsx), inline placement in the reserved strip under a list card.
   Near-black in both schemes so it reads as "not part of the table"; rises in with the DS ae-bulk-bar-in keyframes. ---- */
.ae-bulk-bar {
  display: flex; align-items: center; gap: var(--s-2); max-width: 100%; overflow-x: auto;
  padding: var(--s-2) var(--s-4); border-radius: var(--radius-lg);
  background: var(--bulk-bar-bg); color: var(--bulk-bar-fg); box-shadow: var(--shadow-xl);
  animation: ae-bulk-bar-in var(--duration-normal) var(--ease-entrance) forwards;
}
.ae-bulk-bar__count {
  flex-shrink: 0; padding-inline: var(--s-3); border-radius: var(--radius-sm); background: var(--bulk-bar-count-bg);
  font: var(--type-body-sm); font-weight: var(--weight-medium); white-space: nowrap;
}
.ae-bulk-bar__rule { flex: none; width: 1px; align-self: stretch; margin: 2px var(--s-2); background: var(--bulk-bar-rule); }
.ae-bulk-bar__btn, .ae-bulk-bar__clear {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); flex-shrink: 0;
  height: var(--control-h-sm); padding-inline: var(--s-3); border: none; border-radius: var(--radius-control);
  background: transparent; color: inherit; font: var(--type-body-sm); white-space: nowrap; cursor: pointer;
  transition: var(--transition-control);
}
.ae-bulk-bar__clear { width: var(--control-h-sm); padding: 0; }
.ae-bulk-bar__btn:hover:not(:disabled), .ae-bulk-bar__clear:hover { background: var(--bulk-bar-hover-bg); }
.ae-bulk-bar__btn:focus-visible, .ae-bulk-bar__clear:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ae-bulk-bar__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ae-bulk-bar__btn--danger { color: var(--bulk-bar-danger-fg); }

/* ---- DataTable row selection: a neutral checkbox column (CLAUDE.md: checkboxes are never orange);
   a ticked row takes the selected band and hover does not repaint it ---- */
.ae-table .ae-table__select { width: 40px; min-width: 40px; padding-inline: var(--s-3) 0; }
.ae-table__select .ae-check { grid-template-columns: 16px; }
.ae-table tbody tr.is-selected { background-color: var(--table-row-selected-bg); }
.ae-table tbody tr.is-selected:hover { background-image: none; }

/* Nav rows are <button>s here (ae-sentinel's are links): drop the UA button chrome so the DS row is all that shows */
button.ae-navrow { margin: 0; border: 0; cursor: pointer; }

/* The sign-in tabs sit on the form card: the card's own padding is their inset (like .ae-card .ae-tabs__bar) */
.ae-login__card .ae-tabs__bar { --ae-tabs-inset: 0px; background: transparent; }

/* ---- Toast lift (css/components/overlays.css), scoped to the view on screen ----
   ae-sentinel renders one page at a time, so its two :root:has() lifts never meet. DiscoveryEdge keeps hidden views in
   the DOM, where the list-footer rule (higher specificity) would win even on a form page and the stack would cover the
   pinned action row. These rules look only at the visible view (.de-view:not([hidden])), with higher specificity, in
   the same order: list footer, list footer plus the reserved bulk-bar strip below the card, then the canvas row. */
:root:has(.de-view:not([hidden]) .ae-data-table.is-filled .ae-table-footer) .ae-toast-region {
  bottom: calc(var(--gutter-inset) + 2 * var(--s-2) + var(--control-h-sm) + var(--s-3));
}
:root:has(.de-view:not([hidden]) > .ae-list-screen__bulk):has(.de-view:not([hidden]) .ae-data-table.is-filled .ae-table-footer) .ae-toast-region {
  bottom: calc(var(--bulk-bar-h) + var(--s-6) + var(--s-1) + var(--gutter-inset) + 2 * var(--s-2) + var(--control-h-sm) + var(--s-3));
}
:root:has(.de-view.ae-form-canvas:not([hidden]) .ae-form-canvas__actions):has(.de-view.ae-form-canvas:not([hidden])) .ae-toast-region {
  bottom: calc(20px + 36.75px + 2 * var(--s-3) + var(--s-3)); /* overlays.css: DS CANVAS_BLOCK_GAP + the action row */
}