/* Admin portal (DUKE-211): page layout only, from the approved mockup
   (business/clients/duke-ai/method/2026-10-14-admin-portal-mockup, its am- classes). Every component is a
   design-system class from public/duke/styles.css (v0.17.0): .signed-bar, .glance-tile--count, .state-chip,
   .seg-bar, .panel, .kv-row, .callout, .btn--xs with .btn__icon, .switch, .viewer-bar, and the expandable
   table row (.row-toggle, .row-detail, .table-wrap--expand). Nothing below restyles a system class; the few
   page parts the system has no class for (the stage board and its cards, the step dates, a product line)
   are drawn with the system's tokens only. Missing components go to the design-system session. */

/* The page: one column, wider than the client pages (the tables need the room). */
.am-app { max-width: 1180px; margin: 0 auto; padding: 2rem var(--gutter) 4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.am-app__head { display: grid; gap: .5rem; }
.am-app__head h1 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.1; text-wrap: balance; }
.am-app__head p { color: var(--text-2); max-width: 60ch; }
.am-src { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.am-note { font-size: .8125rem; color: var(--text-3); }

/* Pipeline: the share bar, then one tile per stage with its cards. */
.am-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; }
.am-bar i { display: block; background: var(--accent); opacity: .35; }
.am-bar i.is-hi { opacity: 1; }
.am-stages { display: grid; grid-template-columns: repeat(var(--stages, 5), minmax(0, 1fr)); gap: 10px; }
.am-stage { display: grid; gap: .75rem; align-content: start; padding: 1rem; border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: linear-gradient(180deg, var(--surface-hi), var(--surface-lo)); min-width: 0; }
.am-stage__top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.am-stage__n { font-family: var(--font-alt); font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.am-stage.is-accent .am-stage__n { color: var(--accent-ink); }
.am-card { display: grid; gap: 2px; padding: .6rem .7rem; border-radius: 8px; border: 1px solid var(--border-faint); background: var(--bg); font-size: .8125rem; min-width: 0; }
.am-card b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-card span { color: var(--text-3); font-size: .75rem; }

/* Partners and clients: a line under the row's name (the toggle's chevron is 1.1875rem wide). */
.am-sub { display: block; padding-inline-start: 1.1875rem; margin-top: 2px; color: var(--text-3); font-size: .75rem; overflow-wrap: anywhere; }
.am-table td { vertical-align: middle; }

/* Inside an open row: two panels side by side, one column when the detail is narrow (it is a size container). */
.am-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: start; }
.am-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.callout .am-actions { margin-top: .5rem; }
.am-steps { list-style: none; margin: 0; padding: 0; display: grid; align-items: start; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.am-steps li { display: grid; gap: 4px; font-size: .75rem; color: var(--text-3); min-width: 0; }
.am-steps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--neutral-darker); }
.am-steps li.is-on { color: var(--text-2); }
.am-steps li.is-on::before { background: var(--accent); }
.am-steps b { font-weight: 500; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-prod { display: grid; gap: 8px; }
.am-prod__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--border-faint); border-radius: 8px; font-size: .875rem; }
.am-prod__row span:not(.state-chip) { color: var(--text-3); font-size: .8125rem; display: block; }
.am-link { display: grid; gap: .5rem; justify-items: start; margin-top: .25rem; }
.am-link .field { width: 100%; }

/* Clients: the "Show test clients" switch and its line. */
.am-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }

/* View portal: the viewer bar sits under the client's header, on the client pages' own column. */
.am-view__pad { max-width: var(--container-md); margin: 1rem auto 0; padding-inline: var(--gutter); }

@container (max-width: 44rem) {
  .am-split { grid-template-columns: minmax(0, 1fr); }
  .am-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* A narrow table keeps the name, the one number that matters and the button; the rest is one tap away. */
@container (max-width: 40rem) {
  .am-table .am-hide-sm { display: none; }
}
@media (max-width: 991px) {
  .am-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .am-stages { grid-template-columns: minmax(0, 1fr); }
}