/* Iggy console components. Tokens only: every colour comes from tokens.css. Flat and quiet:
   1px rules instead of cards, no shadows, one radius scale (4px; 3px for badges and key hints). */

/* Motion: fast and small. Feedback never takes longer than --cp-duration-slow (200ms). The sign-in tree
   and the Overview flow lines are the only longer motion. The single reduced-motion block below turns
   every animation and transition off, and no information is carried by motion alone. */
:root {
  --cp-duration-fast: 120ms;
  --cp-duration-base: 160ms;
  --cp-duration-slow: 200ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.console {
  margin: 0;
  background: var(--cp-color-bg);
  color: var(--cp-color-fg);
  font-family: var(--cp-font-sans);
  font-size: var(--cp-text-base);
  line-height: var(--cp-text-base-leading);
  -webkit-font-smoothing: antialiased;
}

.console h1,
.console h2,
.console h3 {
  margin: 0;
  color: var(--cp-color-fg);
  font-family: var(--cp-font-serif);
  font-weight: var(--cp-weight-regular);
  text-wrap: balance;
}
.console h1 { margin-block-end: var(--cp-space-1); font-size: var(--cp-text-heading-lg); line-height: var(--cp-text-heading-lg-leading); }
.console h2 { font-size: var(--cp-text-heading-md); line-height: var(--cp-text-heading-md-leading); }
.console h3 { font-size: var(--cp-text-heading-sm); line-height: var(--cp-text-heading-sm-leading); }
.console h4 { margin: var(--cp-space-4) 0 var(--cp-space-2); font-size: var(--cp-text-sm); font-weight: var(--cp-weight-medium); line-height: var(--cp-text-sm-leading); }
:where(.console) p { margin: 0 0 var(--cp-space-3); text-wrap: pretty; }
.label { margin: 0 0 var(--cp-space-1); font-size: var(--cp-text-xs); font-weight: var(--cp-weight-medium); line-height: var(--cp-text-xs-leading); }

/* Links in running text are underlined in both themes; components (tabs, rows, buttons) carry a class. */
.console a:not([class]) {
  color: var(--cp-color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--cp-color-focus);
  outline-offset: 2px;
}

.cp-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Buttons: three variants of one height. Primary, secondary (the default) and quiet. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cp-space-2);
  min-block-size: var(--cp-target-min);
  min-inline-size: var(--cp-target-min);
  padding: 0 var(--cp-space-3);
  border: 1px solid var(--cp-color-secondary-border);
  border-radius: var(--cp-radius-sm);
  background: var(--cp-color-bg);
  color: var(--cp-color-fg);
  font: var(--cp-weight-medium) var(--cp-text-sm) / 1 var(--cp-font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--cp-duration-fast) ease-out, border-color var(--cp-duration-fast) ease-out;
}
.btn:hover { background: var(--cp-color-primary-muted); }
.btn-primary {
  background: var(--cp-color-primary);
  border-color: var(--cp-color-primary);
  color: var(--cp-color-on-primary);
}
.btn-primary:hover { background: var(--cp-color-primary-hover); border-color: var(--cp-color-primary-hover); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--cp-color-primary); }
.btn:disabled,
.btn[aria-disabled='true'] { cursor: not-allowed; border-style: dashed; }

/* Form controls: label above, hint below. */
.field { display: flex; flex-direction: column; gap: var(--cp-space-1); }
.field-label { font-size: var(--cp-text-sm); font-weight: var(--cp-weight-medium); line-height: var(--cp-text-sm-leading); }
.field-hint { margin: 0; font-size: var(--cp-text-xs); line-height: var(--cp-text-xs-leading); }
.field-error { margin: 0; font-size: var(--cp-text-sm); line-height: var(--cp-text-sm-leading); color: var(--cp-color-danger-fg); }
.input,
.select,
.textarea {
  inline-size: 100%;
  max-inline-size: 40rem;
  min-block-size: var(--cp-target-min);
  padding: 0 var(--cp-space-3);
  border: 1px solid var(--cp-color-border-control);
  border-radius: var(--cp-radius-sm);
  background: var(--cp-color-bg);
  color: var(--cp-color-fg);
  font: inherit;
}
.textarea { min-block-size: 6rem; padding-block: var(--cp-space-2); resize: vertical; }
.input[aria-invalid='true'],
.select[aria-invalid='true'],
.textarea[aria-invalid='true'] { border-color: var(--cp-color-danger-border); }
.input:disabled,
.select:disabled,
.textarea:disabled { border-style: dashed; }
input[type='checkbox'],
input[type='radio'] { inline-size: 1rem; block-size: 1rem; margin: 0; accent-color: var(--cp-color-primary); }

/* Badge and chip: 20px, one size, always with a text label; the marker glyph is decoration. */
.badge,
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-1);
  block-size: 1.25rem;
  padding: 0 6px;
  border: 1px solid var(--cp-color-neutral-border);
  border-radius: var(--cp-radius-xs);
  background: var(--cp-color-neutral-bg);
  color: var(--cp-color-neutral-fg);
  font-size: var(--cp-text-xs);
  font-weight: var(--cp-weight-medium);
  line-height: 1;
  white-space: nowrap;
}
.badge-success { background: var(--cp-color-success-bg); border-color: var(--cp-color-success-border); color: var(--cp-color-success-fg); }
.badge-warning { background: var(--cp-color-warning-bg); border-color: var(--cp-color-warning-border); color: var(--cp-color-warning-fg); }
.badge-danger { background: var(--cp-color-danger-bg); border-color: var(--cp-color-danger-border); color: var(--cp-color-danger-fg); }
.badge-info { background: var(--cp-color-info-bg); border-color: var(--cp-color-info-border); color: var(--cp-color-info-fg); }
.chip-band-high { background: var(--cp-band-high-bg); border-color: var(--cp-band-high-border); color: var(--cp-band-high-fg); }
.chip-band-medium { background: var(--cp-band-medium-bg); border-color: var(--cp-band-medium-border); color: var(--cp-band-medium-fg); }
.chip-band-low { background: var(--cp-band-low-bg); border-color: var(--cp-band-low-border); color: var(--cp-band-low-fg); }
.chip-band-no_match { background: var(--cp-band-none-bg); border-color: var(--cp-band-none-border); border-style: dashed; color: var(--cp-band-none-fg); }
.chip-escalate {
  background: var(--cp-color-escalate-solid);
  border-color: var(--cp-color-escalate-solid);
  color: var(--cp-color-on-escalate);
}
.chip-escalate::before { content: '\25B2'; font-size: 0.625rem; }

/* Keyboard hint: a small box. */
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.125rem;
  block-size: 1.125rem;
  padding: 0 var(--cp-space-1);
  border: 1px solid var(--cp-color-border-control);
  border-radius: var(--cp-radius-xs);
  font: var(--cp-weight-medium) 0.6875rem / 1 var(--cp-font-sans);
}

/* Section: flat, separated from the one above by a 1px rule. A form is the only boxed surface. */
.card {
  padding: var(--cp-space-4) 0 var(--cp-space-6);
  border: 0;
  border-block-start: 1px solid var(--cp-color-border);
  background: transparent;
}
.card > :first-child { margin-block-start: 0; }
.card > :last-child { margin-block-end: 0; }
.card .card { padding: 0; border: 0; }
form.card {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
  max-inline-size: 46rem;
  padding: var(--cp-space-4);
  border: 1px solid var(--cp-color-border);
  border-radius: var(--cp-radius-sm);
}
form.card > * { margin-block: 0; }
.card + .card,
.flow + .card { margin-block-start: var(--cp-space-2); }
form.card + form.card { margin-block-start: var(--cp-space-4); }
#tab-panel > .card:first-child { border-block-start: 0; }
#tab-panel { padding-block-start: var(--cp-space-3); }
.card > h2 { margin-block-end: var(--cp-space-3); }
.card h3 { margin-block-start: var(--cp-space-4); }
.card > h3:first-child { margin-block-start: 0; }
.card h2 + h3 { margin-block-start: 0; }
main > h2 { margin-block: var(--cp-space-6) var(--cp-space-2); }

/* List row */
.list { margin: 0; padding: 0; list-style: none; }
.list-row {
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
  min-block-size: 2.25rem;
  padding: var(--cp-space-2) 0;
  border-block-end: 1px solid var(--cp-color-border);
  color: var(--cp-color-fg);
  text-decoration: none;
  transition: background-color var(--cp-duration-fast) ease-out;
}
a.list-row:hover { background: var(--cp-color-primary-muted); }
.list-row[aria-current='true'] { background: var(--cp-color-primary-muted); box-shadow: inset 2px 0 0 var(--cp-color-selected-edge); }

/* Summary figure (a number with a caption) */
.tile-value { display: inline; margin: 0 var(--cp-space-2) 0 0; font-family: var(--cp-font-serif); font-weight: var(--cp-weight-regular); font-size: var(--cp-text-heading-lg); line-height: var(--cp-text-heading-lg-leading); }
.tile-label { display: inline; margin: 0; font-size: var(--cp-text-sm); line-height: var(--cp-text-sm-leading); }
.tile-label + .dl { margin-block-start: var(--cp-space-3); }

/* Tabs: 36px, a 2px Brand Blue underline marks the current one. */
.tabs { display: flex; gap: var(--cp-space-6); margin-block-start: var(--cp-space-2); border-block-end: 1px solid var(--cp-color-border); overflow-x: auto; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
  block-size: 2.25rem;
  margin-block-end: -1px;
  padding: 0;
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--cp-color-fg);
  font: var(--cp-weight-medium) var(--cp-text-sm) / 1 var(--cp-font-sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.tab:hover { color: var(--cp-color-primary); }
.tab[aria-current='page'] { color: var(--cp-color-primary); border-block-end-color: var(--cp-color-primary); }
.tab .badge { background: var(--cp-band-low-bg); border-color: var(--cp-band-low-border); color: var(--cp-band-low-fg); }

/* Table: 36-40px rows, header in the same type at 12px, 1px rules. */
.table { inline-size: 100%; border-collapse: collapse; color: var(--cp-color-fg); }
.table th,
.table td { padding: var(--cp-space-2) var(--cp-space-3); border-block-end: 1px solid var(--cp-color-border); text-align: start; vertical-align: middle; }
.table th:first-child,
.table td:first-child { padding-inline-start: 0; }
.table thead th { white-space: nowrap; block-size: 2rem; padding-block: 0; font-size: var(--cp-text-xs); font-weight: var(--cp-weight-medium); line-height: var(--cp-text-xs-leading); }
.table tbody th { font-weight: var(--cp-weight-regular); }
.table tbody td, .table tbody th { block-size: 2.5rem; }
.table td:not(.cell-grow),
.table tbody th { white-space: nowrap; }
/* A cell that can hold a long value shows one line and ends in an ellipsis; the full text is in title. */
.table td .muted:not(:first-child) { margin-inline-start: var(--cp-space-2); }
.table .cell-grow { inline-size: 100%; min-inline-size: 12rem; max-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inline alert: variants carry a text label in the markup, never colour alone. */
.alert {
  animation: notice-in var(--cp-duration-base) ease-out;
  padding: var(--cp-space-2) var(--cp-space-3);
  border: 1px solid var(--cp-color-neutral-border);
  border-radius: var(--cp-radius-sm);
  background: var(--cp-color-neutral-bg);
  color: var(--cp-color-neutral-fg);
}
.alert { margin-block: var(--cp-space-3); }
@keyframes notice-in { from { opacity: 0; } }
.alert-info { background: var(--cp-color-info-bg); border-color: var(--cp-color-info-border); color: var(--cp-color-info-fg); }
.alert-success { background: var(--cp-color-success-bg); border-color: var(--cp-color-success-border); color: var(--cp-color-success-fg); }
.alert-warning { background: var(--cp-color-warning-bg); border-color: var(--cp-color-warning-border); color: var(--cp-color-warning-fg); }
.alert-danger { background: var(--cp-color-danger-bg); border-color: var(--cp-color-danger-border); color: var(--cp-color-danger-fg); }
.alert-escalate { background: var(--cp-color-escalate-bg); border-color: var(--cp-color-escalate-border); color: var(--cp-color-escalate-fg); }
.alert a:not([class]) { color: inherit; }

/* Empty state */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cp-space-2);
  padding: var(--cp-space-6) var(--cp-space-4);
  border: 1px dashed var(--cp-color-border-control);
  border-radius: var(--cp-radius-sm);
  text-align: center;
}
.empty p { margin: 0; }

/* A swap target carries aria-busy while its fragment loads (console.js): a thin line, only if slow. */
[aria-busy='true'] { position: relative; }
[aria-busy='true']::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  block-size: 2px;
  background: var(--cp-color-primary);
  pointer-events: none;
  animation: fade-in var(--cp-duration-base) ease-out var(--cp-duration-base) backwards;
}
@keyframes fade-in { from { opacity: 0; } }

/* Access page */
.table-wrap { overflow-x: auto; }
.access-form .btn { align-self: flex-start; }
.access-form { display: flex; flex-direction: column; gap: var(--cp-space-3); max-inline-size: 28rem; }
.access-role { display: flex; align-items: center; gap: var(--cp-space-2); margin: var(--cp-space-1) 0; }

/* Description list */
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--cp-space-2) var(--cp-space-6); margin: 0; }
.dl dt { font-size: var(--cp-text-sm); font-weight: var(--cp-weight-medium); line-height: var(--cp-text-base-leading); }
.dl dd { max-inline-size: 75ch; margin: 0; text-wrap: pretty; }
.dl + .field-hint { margin-block-start: var(--cp-space-3); }
.field-hint + .dl { margin-block-start: var(--cp-space-3); }

/* Shell: a Charcoal sidebar with the logo at its head, and the page beside it. */
.console { min-block-size: 100vh; display: flex; flex-direction: column; }
/* Off screen until it takes keyboard focus. */
.skip-link { position: absolute; inset-inline-start: var(--cp-space-2); inset-block-start: -100px; z-index: 10; padding: var(--cp-space-2) var(--cp-space-3); background: var(--cp-color-bg); color: var(--cp-color-primary); }
.skip-link:focus { inset-block-start: var(--cp-space-2); }
/* The only light bar: on pages with no sidebar (error and no-access). The colour logo sits on Ivory. */
.topbar {
  display: flex;
  align-items: center;
  block-size: 3.75rem;
  padding: 0 var(--cp-gutter);
  border-block-end: 1px solid var(--cp-color-border);
}
.brand { display: inline-flex; }
.brand img { display: block; block-size: 1.375rem; inline-size: auto; }
.shell { flex: 1; display: grid; grid-template-columns: var(--cp-sidebar) minmax(0, 1fr); align-items: start; align-content: start; }
.shell-bare { grid-template-columns: minmax(0, 1fr); }
.shell > main { max-inline-size: var(--cp-content-max); inline-size: 100%; margin-inline: auto; padding: var(--cp-space-6) var(--cp-gutter) var(--cp-space-8); }
.shell-bare > main { margin-inline: 0; }

.side {
  position: sticky;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  block-size: 100vh;
  background: var(--cp-color-brand-surface);
  border-inline-end: 1px solid var(--cp-color-sidebar-rule);
  color: var(--cp-color-on-brand);
}
.side .brand { padding: 1.25rem 1.25rem var(--cp-space-6); }
.side .brand img { block-size: 1.25rem; }
.shell-menu { flex: 1; display: flex; flex-direction: column; min-block-size: 0; }
.shell-menu > summary { display: none; list-style: none; }
.sidebar { flex: 1; display: flex; flex-direction: column; gap: var(--cp-space-2); min-block-size: 0; overflow-y: auto; padding: 0 var(--cp-space-3) var(--cp-space-3); }
.sidebar ul { display: block; margin: 0; padding: 0; list-style: none; }
.sidebar-heading { margin: var(--cp-space-4) 0 var(--cp-space-1); padding-inline: var(--cp-space-2); font-size: var(--cp-text-xs); font-weight: var(--cp-weight-medium); line-height: var(--cp-text-xs-leading); }
.sidebar-end { margin-block-start: auto; padding-block-start: var(--cp-space-3); }
.sidebar-end .btn-quiet { inline-size: 100%; justify-content: flex-start; padding-inline: var(--cp-space-2); overflow: hidden; text-overflow: ellipsis; color: var(--cp-color-on-brand); }
.sidebar-end .btn-quiet:hover { background: var(--cp-color-brand-surface-elevated); }
.sidebar .btn:focus-visible { outline-color: var(--cp-color-focus-on-brand); }

/* Sidebar row: 32px. The current one is Brand Blue with a 2px Gold edge. */
.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cp-space-2);
  block-size: 2rem;
  padding: 0 var(--cp-space-2);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-color-on-brand);
  font-size: var(--cp-text-sm);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--cp-duration-fast) ease-out;
}
.nav-item:hover { background: var(--cp-color-brand-surface-elevated); }
.nav-item[aria-current='page'] { background: var(--cp-color-brand-surface-elevated); box-shadow: inset 2px 0 0 var(--cp-color-accent); font-weight: var(--cp-weight-medium); }
.nav-item:focus-visible { outline-color: var(--cp-color-focus-on-brand); }
/* Count of items waiting, a plain small number in the same box as a badge. */
.nav-count {
  display: inline-flex;
  align-items: center;
  block-size: 1.25rem;
  padding: 0 6px;
  border: 1px solid var(--cp-color-on-brand);
  border-radius: var(--cp-radius-xs);
  font-size: var(--cp-text-xs);
  font-weight: var(--cp-weight-medium);
  line-height: 1;
}
.site-footer { padding: var(--cp-space-3) var(--cp-space-2) 0; }
.site-footer p { margin: 0; font-size: var(--cp-text-xs); line-height: var(--cp-text-xs-leading); }
.shell-bare + .site-footer { padding: var(--cp-space-4) var(--cp-gutter); border-block-start: 1px solid var(--cp-color-border); }

/* Narrow screens: the sidebar becomes a Charcoal bar and folds behind the Menu button (a details
   element, no script). */
@media (max-width: 51.99rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; block-size: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; border-inline-end: 0; border-block-end: 1px solid var(--cp-color-sidebar-rule); }
  .side .brand { padding: var(--cp-space-4) 1.25rem; }
  .shell-menu { display: block; grid-column: 1 / -1; }
  .shell-menu > summary { display: flex; position: absolute; inset: 0 var(--cp-space-4) auto auto; margin-block: var(--cp-space-3); color: var(--cp-color-on-brand); border-color: var(--cp-color-on-brand); background: transparent; }
  .side { position: relative; }
  .shell > main { padding: var(--cp-space-4); }
  .shell > main { overflow-x: auto; }
}
/* Wide screens: the sidebar is always shown, whatever the details state. */
@media (min-width: 52rem) {
  .shell-menu::details-content { content-visibility: visible; display: flex; flex-direction: column; flex: 1; min-block-size: 0; }
}

/* Swapped regions and their alerts */
[data-swap-alert] { margin-block: var(--cp-space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--cp-space-3); }
[tabindex='-1']:focus { outline: none; }

/* The only reduced-motion rule in console*.css (tests/web/console/test_motion.py). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Overview: three flat columns, each under a 1px rule, joined by thin flow lines. */
.flow { display: grid; grid-template-columns: minmax(0, 1.1fr) var(--cp-space-8) minmax(0, 0.75fr) var(--cp-space-8) minmax(0, 1.25fr); align-items: start; margin-block: 0 var(--cp-space-6); }
.flow > .card { padding-block-end: 0; }
.flow-row { align-items: flex-start; padding-inline: 0; }
.flow-line { position: relative; align-self: start; block-size: 1px; margin-block-start: 2.5rem; background: var(--cp-color-border-control); }
.flow-line::after {
  content: '';
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 1px;
  background: var(--cp-color-border-control);
  animation: flow-move 2.4s ease-in-out infinite;
}
/* A failed source stops the line and shows it in the danger colour. */
.flow-line-still { background: var(--cp-color-danger-border); }
.flow-line-still::after { content: none; }
@keyframes flow-move {
  to { inset-inline-start: calc(100% - 5px); }
}
.overview-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-space-6); }
.overview-pair > .card { margin-block-start: 0; }
.muted { font-size: var(--cp-text-sm); line-height: var(--cp-text-sm-leading); }
.report-grid { display: grid; gap: var(--cp-space-2); margin-block: var(--cp-space-4); }
.report-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--cp-space-3); margin-block-end: var(--cp-space-2); }
@media (max-width: 51.99rem) {
  .flow,
  .overview-pair { grid-template-columns: minmax(0, 1fr); gap: var(--cp-space-3); }
  .flow-line { display: none; }
}

/* Error and no-access pages: no sidebar, so the page is a short statement on Ivory. */
.error-page { max-inline-size: 40rem; padding-block-start: var(--cp-space-6); }
.error-page h1 { margin-block: var(--cp-space-1) var(--cp-space-3); }