/*
 * The signed-out pages and the admin, on the Kairo design system.
 *
 * Every colour here is a `--k-*` token from tokens.css — the generated export
 * of the system's DESIGN.md — or one of the few app-level aliases declared in
 * :root below. The system's rules that shape this file: ivory is the canvas
 * and paper the reading surface; ink carries the type; violet is the brand
 * and the main action on a light surface; lime is only ever an accent on ink;
 * a status is never stated in colour alone. Controls round at 8px, action
 * buttons at 15px, panels at 14px, compact labels as pills.
 *
 * With Propshaft, assets are served without preprocessing and CSS precedence
 * follows the standard cascade — dashboard.css loads after this file and
 * restates the form furniture (.field, .button, .flash, .badge) inside the
 * dashboard shell where the metrics need it tighter.
 */

:root {
  /* The app's own aliases over the tokens. The signed-out pages and the admin
     used to carry a palette of their own (--color-background, --color-accent)
     drawn for a dark screen; the names are kept, because the rules below are
     written against them, and each now resolves to the system's token. */
  --color-background: var(--k-color-ivory);
  --color-surface: var(--k-color-paper);
  --color-accent: var(--k-color-violet);
  --color-accent-deep: var(--k-color-violet-deep);
  --color-text: var(--k-color-ink);
  --color-text-soft: var(--k-color-ink-soft);
  --color-text-muted: var(--k-color-muted);
  --color-line: var(--k-color-line);

  /* Ink regions — the dashboard's rail and headline bands — need three shades
     the system's ink theme does not name: a rule, a lifted surface, and a
     secondary text that still clears 4.5:1 on ink. #465067 is the border the
     system's own k-theme-ink uses. */
  --ink-line: #465067;
  --ink-raised: #232e47;
  --ink-muted: #a3abc2;
  --ink-faint: #8a93ad;
  /* The warning hue for ink: the system's own is a brown that vanishes on it. */
  --ink-amber: #f3c46b;

  --sans: "Manrope", system-ui, sans-serif;
  --display: "Space Grotesk", "Manrope", sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  /* The pipeline's stages: the brand colour at the one that pays, darkening
     ink through the ones a brand is still moving through, muted at the two
     ends where it has stopped. Every hue clears 3:1 on paper, because a 3px
     stripe is a state indicator — the system's sky and mint, at 1.5:1, were
     tried here and vanished. Tokens rather than literals because two places
     state a stage in colour — the strip above the brands table and the chip
     on a brand's own page — and a stage that was a different hue in each
     would read as two facts. Churned is deliberately not the error red: it
     is a state of the business, and a row of red in the admin every morning
     trains the reader to stop seeing it. */
  --stage-lead: var(--k-color-control-border);
  --stage-demo: var(--k-color-ink-soft);
  --stage-onboarding: var(--k-color-success);
  --stage-customer: var(--k-color-violet);
  --stage-churned: var(--k-color-warning);
  --stage-lost: var(--k-color-line);
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--k-color-lime);
  color: var(--k-color-ink);
}

/* Every control, not only the text inputs that styled it themselves. The admin
   is largely tabbing between one-word links inside table rows, and the UA's
   default ring is a dark halo that disappears against ivory. The system's
   focus is deep violet on light and lime on ink; the dashboard's ink regions
   restate it. No `border-radius` here: at one class of specificity it would
   beat `.button`'s own and square the button off the moment it took focus. */
:focus-visible {
  outline: 3px solid var(--color-accent-deep);
  outline-offset: 3px;
}

.landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 2rem;
}

.landing__brand {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.landing__mark {
  width: 88px;
  height: 88px;
}

.landing__wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.landing__name {
  margin: 0;
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.landing__byline {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.landing__signin {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 14px 22px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--k-color-paper);
  text-decoration: none;
  background-color: var(--color-accent);
  border: 1px solid transparent;
  border-radius: var(--k-radius-button);
  transition: background-color var(--k-duration-fast) var(--k-ease-standard);
}

.landing__signin:hover {
  background-color: var(--color-accent-deep);
}

@media (width <= 480px) {
  .landing__brand {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem;
  }

  .landing__name {
    font-size: 2.25rem;
  }
}

/* Authentication pages */

.auth {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem 1.25rem;
}

.auth__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-text);
}

.auth__mark {
  width: 44px;
  height: 44px;
}

.auth__brand-name {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.auth__card {
  width: 100%;
  max-width: 25rem;
  padding: 2rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--k-radius-panel);
}

.auth__title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.auth__subtitle {
  margin: 0.5rem 0 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.auth__footer {
  margin: 1.5rem 0 0;
  text-align: center;
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.field__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
}

.field__link {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.field__link:hover {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The system's field: an explicit border, since a line alone is never the
   sole boundary of an input, and a 48px height. */
.field__input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0.75rem 0.875rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--k-color-control-border);
  border-radius: var(--k-radius-control);
  caret-color: var(--color-accent-deep);
  transition: border-color var(--k-duration-fast) var(--k-ease-standard);
}

.field__input::placeholder {
  color: var(--color-text-muted);
}

.field__input:hover {
  border-color: var(--color-text);
}

.field__input:focus {
  border-color: var(--color-accent-deep);
}

.field__input[aria-invalid="true"] {
  border-color: var(--k-color-error);
}

/* The system's primary action: violet on light, deepening on hover, the 15px
   corner the brand's buttons are recognised by. A label is never shrunk or
   uppercased to fit; it wraps and the button grows. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--k-color-paper);
  background-color: var(--color-accent);
  border: 1px solid transparent;
  border-radius: var(--k-radius-button);
  cursor: pointer;
  transition: background-color var(--k-duration-fast) var(--k-ease-standard),
    color var(--k-duration-fast) var(--k-ease-standard),
    transform var(--k-duration-fast) var(--k-ease-standard);
}

.button:hover {
  background-color: var(--color-accent-deep);
}

.button:active:not(:disabled) {
  transform: translateY(1px);
}

.button:disabled {
  color: var(--color-text-soft);
  background-color: var(--color-line);
  cursor: not-allowed;
  transform: none;
}

/* A status carries its meaning in words; the colour supplements it. */
.flash {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid;
  border-radius: var(--k-radius-control);
}

.flash--alert {
  color: var(--k-color-error);
  background-color: var(--k-color-error-bg);
  border-color: color-mix(in srgb, var(--k-color-error) 25%, transparent);
}

.flash--notice {
  color: var(--k-color-success);
  background-color: var(--k-color-success-bg);
  border-color: color-mix(in srgb, var(--k-color-success) 25%, transparent);
}

/* Admin */

/* One shell. Every band below — header, store nav, panels — used to centre
   itself with its own max-width, which let the axes drift: a 32rem form panel
   floated to the middle of the page while the title above it hung on the left.
   Containing once here means everything hangs from the same left edge and the
   reading axis runs straight down the page. */
.admin {
  max-width: 68rem;
  min-height: 100dvh;
  margin-inline: auto;
  padding: 2rem 1.5rem 4rem;
}

.admin__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.admin__nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.admin__nav-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  transition: color var(--k-duration-fast) var(--k-ease-standard),
    border-color var(--k-duration-fast) var(--k-ease-standard);
}

.admin__nav-link:hover {
  color: var(--color-text);
}

/* The same mark the store nav uses for the screen you are on, for the same
   reason: without it every admin page's header is identical and the only way to
   know where you are is to read the heading below it. */
.admin__nav-link--current {
  color: var(--color-accent-deep);
  border-bottom-color: currentcolor;
}

.admin__nav-link--button {
  padding: 0 0 0.25rem;
  font-family: inherit;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

/* Sign out is not a destination, and last in a row of five identical links it
   sat one slip from the audit log. Ruled off so it reads as a different kind of
   thing, and never underlined — it is never the current section. */
.admin__nav-signout {
  display: flex;
  align-items: center;
  margin-left: 0.25rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-line);
}

.admin__panel {
  padding: 1.75rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--k-radius-panel);
}

/* Narrow panels stay on the shell's left axis rather than centring: a form
   that starts under the title reads as part of the same page. */
.admin__panel--narrow {
  max-width: 32rem;
}

.admin__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin__title {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.admin__panel-header .admin__title {
  margin: 0;
}

.admin__hint {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* A button with a one-line explanation beside it, above a table. */
.admin__toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
}

.admin__toolbar form {
  margin: 0;
}

.admin__muted {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  padding: 0.625rem 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-line);
}

.table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}

/* On the row, not the cells: a row background paints beneath the cells', so the
   denied tint below still reads through the hover instead of being replaced by
   it. Worth having at all because the audit log is seven columns wide and the
   store list six — carrying a value across one by eye is the common mistake. */
.table tbody tr:hover {
  background-color: var(--k-color-lavender-soft);
}

.table__row--disabled td {
  opacity: 0.55;
}

.table__row--denied td {
  background-color: var(--k-color-error-bg);
}

/* Audit details are a single JSON string with no spaces in it, so a cell holding
   one has a max-content width of the whole payload and drags the table past the
   panel. The width has to be carried by a block inside the cell: `max-width` on
   a `td` under auto table layout is advisory and browsers ignore it. Wrapped
   rather than truncated — an audit log that hides half of what was recorded is
   worse than a tall row. */
.table__json {
  min-width: 18rem;
  max-width: 26rem;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

/* Below roughly 830px the audit table's seven columns are already at their
   min-content width and there is nothing left to give, so it scrolls inside the
   panel instead of pushing through its border. */
.table-scroll {
  overflow-x: auto;
}

/* Right-aligned inside the cell rather than made a flex container: `display:
   flex` on a `td` takes the cell out of table layout, so it stops stretching to
   the row's height and its own bottom border lands above the rest of the row's
   — a broken rule under the last column of every table here. The spacing the
   flex gap used to carry is carried by the children instead. */
.table th.table__actions,
.table td.table__actions {
  text-align: right;
}

/* `button_to` wraps each button in a form; inline-block so several sit on one
   line and the margin below applies to them. */
.table__actions form {
  display: inline-block;
}

/* Half the intended gap: inline-blocks are separated by the whitespace between
   the tags as well, which supplies the rest. */
.table__actions > * + * {
  margin-left: 0.5rem;
}

/* Links in the system are the ink underlined; deep violet marks the ones that
   do something. */
.table__link {
  display: inline-block;
  /* A one-word link in a table row is a small target; the padding widens the
     hit area to the system's 44px and the negative margin gives the height
     back, so the rows stay as tight as they are. */
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent-deep);
  text-decoration: none;
  white-space: nowrap;
}

.table__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.table__link--button {
  padding: 0;
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.table__link--danger {
  color: var(--k-color-error);
}

/* The system's tag: a pill, bold, small, on a tinted ground. The text names
   the state; the tint supplements it. */
.badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  border-radius: var(--k-radius-pill);
}

.badge--admin {
  color: var(--k-color-violet-deep);
  background-color: var(--k-color-lavender);
}

.badge--disabled {
  color: var(--k-color-error);
  background-color: var(--k-color-error-bg);
}

.field--check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.field__check {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-accent);
}

.field__hint {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.button--compact {
  margin-top: 0;
  min-height: 36px;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  text-decoration: none;
}

.token-reveal {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--k-radius-control);
  background-color: var(--k-color-lavender-soft);
}

.token-reveal__label {
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent-deep);
}

.token-reveal__value {
  display: block;
  padding: 0.625rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  word-break: break-all;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 6px;
}

/* Selects share the text input's shell; only the native chrome differs. */
select.field__input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--k-color-control-border) 50%),
    linear-gradient(135deg, var(--k-color-control-border) 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 0.375rem 0.375rem;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

/* A store's edit page stacks several panels; brands and users need only one. */
.admin__panel--stacked {
  margin-top: 1.5rem;
}

.admin__title--section {
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

.admin__hint--flush {
  margin: 0 0 1.5rem;
}

.admin__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 1.5rem;
  margin: 1.5rem 0 0;
}

.admin__facts dt {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.admin__facts dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Outlined rather than filled: findable, and never the thing a thumb lands on
   by accident. Filling on hover is the confirmation it is meant. */
.button--danger {
  color: var(--k-color-error);
  background-color: var(--color-surface);
  border-color: color-mix(in srgb, var(--k-color-error) 40%, transparent);
}

.button--danger:hover {
  color: var(--k-color-paper);
  background-color: var(--k-color-error);
  border-color: var(--k-color-error);
}

.table__link--button:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* --- One store's records ------------------------------------------------- */

/* The page's identity, above the content panel on every store screen: the
   store's name and state, then one left-to-right band of grouped links. It
   used to hug the right edge as a label/links grid, which put a second
   right-aligned nav directly under the global one and left the title alone on
   the left; stacked, the whole header reads straight down. The rule under the
   band is what separates "which store, which screen" from the screen itself. */
.store-nav {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-line);
}

.store-nav__head {
  margin-bottom: 1.5rem;
}

.store-nav .admin__title {
  margin: 0 0 0.25rem;
}

/* Grouping carried by proximity: wide gaps between the three clusters, narrow
   gaps within one. Wrapping moves a whole cluster to the next line, so a group
   never splits across rows before its own links do. */
.store-nav__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3.5rem;
}

.store-nav__label {
  display: block;
  margin-bottom: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.store-nav__links {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* The -1px drops the 2px current-screen underline onto the band's own rule, so
   the active link reads as a tab sitting on it rather than floating above. */
.store-nav__link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
  padding-bottom: 0.875rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color var(--k-duration-fast) var(--k-ease-standard),
    border-color var(--k-duration-fast) var(--k-ease-standard);
}

.store-nav__link:hover {
  color: var(--color-text);
}

.store-nav__link--current {
  color: var(--color-accent-deep);
  border-bottom-color: currentcolor;
}

.filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.filters__input {
  width: auto;
  min-width: 9rem;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
}

.pagination__controls {
  display: flex;
  gap: 1.25rem;
}

/* Forms with several short fields on a line: money, dates, codes. */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
}

.field--stack {
  justify-content: flex-start;
}

/* Qualified with `.table th` so the header wins its own alignment back — the
   plain class loses to `.table th` on specificity, not on order. Figures are
   set in the mono voice, tabular, so a column of them lines up. */
.table td.table__number,
.table th.table__number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table td.table__number {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.badge--manual {
  color: var(--k-color-warning);
  background-color: var(--k-color-warning-bg);
}

/* A Neo action whose effect has been measured and held, against one still being
   watched. Deliberately not green/red: monitoring is not a failure state. */
.badge--validated {
  color: var(--k-color-success);
  background-color: var(--k-color-success-bg);
}

.badge--monitoring {
  color: var(--color-text-soft);
  background-color: var(--k-color-lavender-soft);
}

/* Not yet taken: paper on a line, the tint of something that has not happened.
   Not warning, which is the forecast badge that usually sits beside it. */
.badge--todo {
  color: var(--color-text-soft);
  background-color: var(--k-color-paper);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.admin__muted--code {
  margin: -0.75rem 0 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  word-break: break-all;
}

.admin__title--minor {
  margin-top: 2rem;
  font-size: 1.125rem;
}

.admin__hint--warning {
  padding: 0.75rem 1rem;
  color: var(--k-color-warning);
  background-color: var(--k-color-warning-bg);
  border: 1px solid color-mix(in srgb, var(--k-color-warning) 25%, transparent);
  border-radius: var(--k-radius-control);
}

.field__hint--callout {
  padding: 0.75rem 1rem;
  background-color: var(--k-color-lavender-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--k-radius-control);
}

.details {
  border-top: 1px solid var(--color-line);
  padding-top: 1rem;
}

.details__summary {
  min-height: 44px;
  display: list-item;
  align-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.details__summary:hover {
  color: var(--color-text);
}

/* --- One store's paid media ---------------------------------------------- */

.filters__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.account {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line);
}

.account__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.account__head .admin__title {
  margin: 0 0 0.25rem;
}

/* The summary strip sits directly under the filters, where the table's own top
   margin would otherwise push it away from them. */
.admin__facts--flush {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* --- The brand pipeline --------------------------------------------------- */

/* The stage strip above the brands table: the pipeline read left to right, and
   the filter for it. Counts lead because the shape of the pipeline — where the
   brands have piled up — is what the strip is looked at for; the label is what
   you read once one of them is surprising. */
.pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0;
}

.pipeline__stage {
  flex: 1 1 6rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--k-radius-control);
  color: var(--color-text);
  text-decoration: none;
  /* Every stage keeps a top edge so the coloured ones below are a difference in
     hue rather than in weight, and a stage at zero does not read as disabled. */
  border-top: 3px solid var(--color-line);
}

.pipeline__stage:hover {
  border-color: var(--k-color-control-border);
  border-top-color: var(--stage-color, var(--k-color-control-border));
}

/* The selected stage, stated with the fill rather than only the border: the
   list under it is filtered, and a filter you cannot see is a table that looks
   like it has lost rows. */
.pipeline__stage--on {
  background-color: var(--k-color-lavender);
  border-color: var(--k-color-control-border);
}

/* Muted text on the lavender fill falls under 4.5:1; the selected stage's
   label darkens to stay legible. */
.pipeline__stage--on .pipeline__label {
  color: var(--color-text-soft);
}

.pipeline__count {
  display: block;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.pipeline__label {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

/* The hues themselves are tokens in :root, shared with the stage chip on a
   brand's page — see the reasoning there. Set through --stage-color so the
   hover above can keep the stage's own edge. */
.pipeline__stage--lead { --stage-color: var(--stage-lead); border-top-color: var(--stage-lead); }
.pipeline__stage--demo { --stage-color: var(--stage-demo); border-top-color: var(--stage-demo); }
.pipeline__stage--onboarding { --stage-color: var(--stage-onboarding); border-top-color: var(--stage-onboarding); }
.pipeline__stage--customer { --stage-color: var(--stage-customer); border-top-color: var(--stage-customer); }
.pipeline__stage--churned { --stage-color: var(--stage-churned); border-top-color: var(--stage-churned); }
.pipeline__stage--lost { --stage-color: var(--stage-lost); border-top-color: var(--stage-lost); }

/* The per-row stage control. Sized down from a full field: it sits in a table
   cell, and at the default width it pushed every column after it off the page. */
.stage-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stage-form__select {
  width: auto;
  min-width: 8rem;
  min-height: 36px;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
}

/* `.button` declares its own display, which outranks the user agent's rule for
   the hidden attribute. Without this the button the controller hides once it
   has taken over stays on screen next to every select. */
.stage-form__submit[hidden] {
  display: none;
}

/* A section of a form page that is its own write — ruled off from what precedes
   it rather than merged into the form above. */
.admin__section {
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}

.admin__section .admin__title--minor {
  margin-top: 0;
}

/* --- One brand ------------------------------------------------------------ */

/* The brand page's identity, above the content and outside the card — the same
   template the store screens use, so moving between a brand and its store never
   moves where you look to see where you are. The rule under it does the store
   nav's job of separating "who this is" from the page about them. There is no
   link band under it because a brand has no sub-screens: its store, its history
   and its grants are sections of this one page. */
.brand-head {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line);
}

.brand-head .admin__title {
  margin: 0 0 0.75rem;
}

/* One line of small facts. Baseline-aligned rather than centred so the chip's
   label sits on the line the prose beside it does, and each separator is its
   own element so a wrap breaks between facts instead of inside one. */
.brand-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.625rem;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* The stage, in the same hue the pipeline strip gives it, so the list and the
   brand's own page agree at a glance. The dot carries the colour and the label
   carries the meaning — a stage is never stated in colour alone. */
.stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--k-radius-pill);
}

.stage-chip::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--stage-color, var(--color-line));
}

.stage-chip--lead { --stage-color: var(--stage-lead); }
.stage-chip--demo { --stage-color: var(--stage-demo); }
.stage-chip--onboarding { --stage-color: var(--stage-onboarding); }
.stage-chip--customer { --stage-color: var(--stage-customer); }
.stage-chip--churned { --stage-color: var(--stage-churned); }
.stage-chip--lost { --stage-color: var(--stage-lost); }

/* --- One store's Instagram inbox ------------------------------------------ */

/* Messages per day. Two series, so two hues, and the same two the dashboard's
   support chart uses for the same two directions — violet for what a customer
   sent, sky for what the account sent back — so the admin's view and the
   merchant's agree. Horizontal geometry is in percentages and vertical in
   pixels — see Admin::InstagramChart — so nothing is stretched. */
.dm-chart {
  margin-top: 1.5rem;
}

/* The legend keeps to the title's line: the description under the title is
   long enough to fill the row, and wrapped, the legend would land above or
   below the title depending on the panel's width. */
.dm-chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.dm-chart__head > div {
  flex: 1 1 auto;
  min-width: 0;
}

/* The minor title's own top margin is for a heading under a table; here it
   would drop the title a line below the legend beside it. */
.dm-chart__head .admin__title {
  margin: 0 0 0.25rem;
}

.dm-legend {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem 1rem;
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.dm-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.dm-swatch {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 2px;
}

.dm-swatch--inbound,
.dm-chart__bar--inbound,
.dm-dot--inbound {
  fill: var(--k-color-violet);
  background-color: var(--k-color-violet);
}

.dm-swatch--outbound,
.dm-chart__bar--outbound,
.dm-dot--outbound {
  fill: var(--k-color-sky);
  background-color: var(--k-color-sky);
  /* Sky on paper is 1.6:1; the hairline is what makes it a mark. */
  stroke: color-mix(in srgb, var(--color-text) 40%, transparent);
  stroke-width: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 40%, transparent);
}

/* The Google Analytics chart stacks the same way — engaged sessions on the
   baseline, the rest on top — and wears the same two hues in the same roles,
   so the two admin charts read alike: violet for the segment that matters,
   sky, hairlined, for the remainder. */
.dm-swatch--engaged,
.dm-chart__bar--engaged {
  fill: var(--k-color-violet);
  background-color: var(--k-color-violet);
}

.dm-swatch--other,
.dm-chart__bar--other {
  fill: var(--k-color-sky);
  background-color: var(--k-color-sky);
  stroke: color-mix(in srgb, var(--color-text) 40%, transparent);
  stroke-width: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 40%, transparent);
}

/* A day before the connection: the same hues at a third of the ink, so the
   bar reads as a floor rather than a count. The legend swatch repeats it. */
.dm-chart__day--partial .dm-chart__bar {
  opacity: 0.35;
}

.dm-swatch--partial {
  background-color: var(--k-color-violet);
  opacity: 0.35;
}

.dm-chart__wrap {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  grid-template-rows: auto auto;
  margin: 1rem 0 0;
}

.dm-chart__ylabels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160px;
  padding-top: 18px;
  box-sizing: border-box;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: right;
  padding-right: 0.5rem;
}

.dm-chart__ylabels span {
  line-height: 0;
}

.dm-chart__plot svg {
  display: block;
  overflow: visible;
}

.dm-chart__grid {
  stroke: var(--color-line);
  stroke-width: 1;
}

.dm-chart__hit {
  fill: transparent;
}

.dm-chart__day:hover .dm-chart__hit {
  fill: var(--k-color-lavender-soft);
}

.dm-chart__xlabels {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  margin-top: 0.375rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.dm-chart .details {
  margin-top: 1rem;
}

/* Which way the last word in a thread went, beside the preview text. */
.dm-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  vertical-align: middle;
}

/* The thread. Sides rather than colours carry direction — a customer's
   message hangs left, the account's right, the way every inbox draws it —
   and the dot on the meta line repeats it for a reader who cannot see the
   offset. The bubbles themselves differ only in tint: an inbound message on
   paper, an outbound one on lavender. */
.dm-thread {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-msg {
  max-width: 85%;
}

.dm-msg--outbound {
  align-self: flex-end;
  text-align: right;
}

.dm-msg__meta {
  margin-bottom: 0.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.dm-msg__body {
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--k-radius-panel);
  text-align: left;
  overflow-wrap: anywhere;
}

.dm-msg--inbound .dm-msg__body {
  border-bottom-left-radius: 4px;
}

.dm-msg--outbound .dm-msg__body {
  background-color: var(--k-color-lavender-soft);
  border-bottom-right-radius: 4px;
}

.dm-msg__body div + div {
  margin-top: 0.375rem;
}