@import url('/design/css/tokens.css');
@import url('/design/css/base.css');
@import url('/design/css/components.css');

.ag-page { max-width: var(--shell-max); margin: 0 auto; padding: var(--gutter); display: grid; gap: 1.5rem; }
.ag-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ag-wordmark { margin: 0; font-size: 1.75rem; font-weight: 620; letter-spacing: -0.03em; }
.ag-sub { margin: 0.25rem 0 0; }
.ag-identity .dean-core { padding: 1.25rem; display: grid; gap: 0.5rem; }
.ag-identity strong { font-size: 1.0625rem; }
.ag-perms { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.ag-signed-out { display: grid; gap: 0.5rem; }

.ag-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ag-grid { display: grid; gap: 0.75rem; }
.ag-row { display: grid; gap: 0.5rem; }
.ag-row .dean-core { padding: 1.125rem; display: grid; gap: 0.375rem; }
.ag-form { display: grid; gap: 0.875rem; max-width: 34rem; }
.ag-form-row { display: grid; gap: 0.875rem; grid-template-columns: 1fr 1fr; }
.ag-total { margin: 0.25rem 0; font-family: var(--mono); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ag-trace { margin: 0.5rem 0 0; padding: 0.75rem; border-radius: var(--r-panel); background: var(--ink-sunken); }
.ag-trace summary { cursor: pointer; }
.ag-trace table { margin-top: 0.75rem; }
.ag-blocked { margin: 0.25rem 0; padding: 0.75rem 1rem; border-radius: var(--r-panel); background: var(--alert-wash); color: var(--alert); font-size: var(--t-small); }
.ag-blocked[hidden] { display: none; }
.ag-section-title { margin: 0 0 0.75rem; }

/* Client-facing document. Paper, not software. */
.pp-doc { max-width: 46rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 4rem) var(--gutter); display: grid; gap: 2rem; }
.pp-head { display: grid; gap: 0.5rem; }
.pp-head h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.03em; }
.pp-option { padding: 1.5rem; border-radius: var(--r-core); background: var(--paper-raise); box-shadow: inset 0 0 0 1px var(--paper-hair); display: grid; gap: 0.75rem; }
.pp-option h2 { margin: 0; font-size: 1.25rem; }
.pp-includes { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.pp-includes li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--paper-hair); }
.pp-amount { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pp-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 0.5rem; }
.pp-total strong { font-family: var(--mono); font-size: 1.5rem; }
.pp-note { margin: 0; color: var(--paper-mute); font-size: var(--t-small); }
.ag-rules td:nth-child(2) { text-align: right; }
.ag-rules td:last-child, .ag-rules th:last-child { text-align: left; font-family: var(--sans); }
.ag-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.ag-lane { padding: 0.75rem; border-radius: var(--r-panel); background: var(--ink-sunken); display: grid; gap: 0.375rem; align-content: start; }
.ag-events { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }
.ag-dealroom-form { margin-top: 0.75rem; }
.ag-cancel td:not(:first-child), .ag-cancel th:not(:first-child) { text-align: right; }
.ag-radar .dean-core { padding: 1.25rem; display: grid; gap: 0.5rem; border-left: 3px solid var(--alert); }
.ag-radar[hidden] { display: none; }
.ag-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.ag-metrics .dean-core { padding: 1.125rem; display: grid; gap: 0.375rem; }
.ag-code { margin: 0.75rem 0; padding: 0.875rem; border-radius: var(--r-panel); background: var(--ink-sunken); font-family: var(--mono); font-size: var(--t-micro); overflow-x: auto; }

/* Search */
.ag-search-form { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; }
.ag-search-query { grid-column: 1 / -1; }
.ag-search-actions { grid-column: 1 / -1; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ag-result { padding: 1.25rem; display: grid; gap: 0.75rem; }
.ag-result-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.ag-result-title { margin: 0; font-size: 1.125rem; }
.ag-result-price { display: grid; justify-items: end; gap: 0.125rem; text-align: right; }
.ag-result-price .ag-total { margin: 0; }
.ag-result-quote { justify-self: start; }
.ag-offer-note { margin: 0; }

/* Notices */
.ag-notices { display: grid; gap: 0.5rem; }
.ag-notices[hidden] { display: none; }
.ag-notice { padding: 0.875rem 1rem; border-radius: var(--r-panel); background: var(--ink-sunken); border-left: 3px solid var(--paper-hair); display: grid; gap: 0.25rem; }
.ag-notice p { margin: 0; }
.ag-notice--important { border-left-color: var(--alert); }
.ag-notice--urgent { border-left-color: var(--alert); background: var(--alert-wash); }

/* Knowledge base */
.ag-kb-group { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; }
.ag-kb-article { padding: 1.125rem; display: grid; gap: 0.5rem; }
.ag-kb-article p:last-child { margin: 0; }
.ag-quoting { margin: -0.25rem 0 0.5rem; }

/* Provider onboarding */
.ag-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ag-tabs [aria-current="true"] { background: var(--accent); color: var(--accent-ink, #fff); }
.ag-tabpanel[hidden] { display: none; }
.ag-blockers { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.ag-blockers li { display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; border-radius: var(--r-panel); background: var(--ink-sunken); }
.ag-chip--ready { background: var(--ok-wash, var(--ink-sunken)); }
.ag-chip--blocked { background: var(--alert-wash); color: var(--alert); }
.ag-ready { border-left: 3px solid var(--ok, var(--paper-hair)); }
.ag-warn { margin: 0 0 0.5rem; color: var(--alert); }

/* Grid children default to min-width:auto, so an input's intrinsic width pushes the row wider
   than the column and the whole page scrolls sideways on a phone. */
.ag-search-form > *, .ag-form > *, .ag-form-row > * { min-width: 0; }
.ag-search-form input, .ag-search-form select, .ag-form input, .ag-form select { width: 100%; min-width: 0; }

/* A tall multi-select in a row of short inputs overlapped the row above: `align-items: end`
   bottom-aligns every cell, so the tall one grows upward past its own label. */
.ag-search-form { align-items: start; }
.ag-search-form .ag-search-actions { align-self: end; }
.ag-search-form select[multiple] { min-height: 6rem; }

/* Front door — the header actions, and the dashboard the home page never had */
.ag-head-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
.ag-nav .is-current { background: var(--ink-raise); color: var(--chalk); }

.ag-signin { margin: 0.75rem 0 0; }

.ag-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.ag-stat { display: grid; gap: 0.25rem; padding: 1rem 1.125rem; border-radius: var(--r-panel); background: var(--ink-sunken); min-width: 0; }
.ag-stat-value { font-family: var(--mono); font-size: 1.5rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.ag-dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; align-items: start; }
.ag-dash-cols > * { min-width: 0; }

.ag-list { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.ag-list li { padding: 0.5rem 0.75rem; border-radius: var(--r-panel); background: var(--ink-sunken); overflow-wrap: anywhere; }
.ag-list li.ag-alert { background: var(--alert-wash); color: var(--alert); }

/* `[hidden]` is a UA rule of the lowest possible specificity, so ANY class that sets `display`
   silently defeats it — which is why `.ag-tabpanel[hidden]`, `.ag-radar[hidden]` and friends
   above each had to restate it. The signed-out nav and Sign out button were visible for exactly
   this reason. Stated once, for every element, so the next one does not need its own rule. */
[hidden] { display: none !important; }

/* Sign-in form on the front door */
.ag-signin-form { display: grid; gap: 0.875rem; max-width: 22rem; }
.ag-signin-form > * { min-width: 0; }
.ag-signin-form input { width: 100%; min-width: 0; }


/* The wordmark now lives in the shared .dean-lockup; these are retained only so
   any page still carrying the old markup does not lose its type. */
.ag-head { align-items: center; gap: 1rem; }

/* The sign-in gate: one centred card on the field, as the school app does it. */
.ag-gate .ag-page { min-height: 100vh; align-content: center; justify-items: center; }
.ag-gate .ag-head { width: 100%; max-width: 26rem; justify-content: flex-start; }
.ag-gate #identityShell { width: 100%; max-width: 26rem; }
.ag-gate #identityShell .dean-core { padding: 1.75rem; }
.ag-signin-title { margin: 0; font-size: 1.5rem; font-weight: 680; letter-spacing: -0.02em; }
.ag-signin-lede { margin: 0 0 0.25rem; }
.ag-signin-form { display: grid; gap: 0.875rem; max-width: none; }
.ag-signin-form > * { min-width: 0; }
.ag-signin-form input { width: 100%; min-width: 0; }

/* Cards carry their own padding now that the shell is the elevated surface. */
.ag-identity .dean-core { padding: 1.25rem 1.375rem; }