/* EMIM authoring UI — component layer.
 *
 * The twelve components in docs/ui/COMPONENTS.md. Nothing here is applied to an
 * existing screen yet: adding this file is visually inert until markup opts in
 * by using an `emim-` class. Screens are converted component by component, all
 * call sites at once, using docs/ui/INVENTORY.md as the checklist.
 *
 * Rules for this file: tokens only (no raw colour, spacing, radius or shadow),
 * no `!important`, one class per component with `--` modifiers and `__` parts,
 * and every interactive element keeps a visible focus ring.
 */

/* ---------------------------------------------------------------- foundation */

.emim-scope {
  font-family: var(--emim-font-sans);
  color: var(--emim-ink);
  background: var(--emim-ground);
}

.emim-scope :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

.emim-scope :where(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--emim-focus-ring);
  outline-offset: var(--emim-focus-offset);
}

/* Numbers that sit in columns align without switching typeface. */
.emim-num {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- 1 page header */

.emim-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--emim-space-6);
  padding-bottom: var(--emim-space-4);
}

.emim-page-header__title {
  margin: 0;
  font-size: var(--emim-text-page);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--emim-leading-tight);
}

.emim-page-header__meta {
  margin: var(--emim-space-2) 0 0;
  font-size: var(--emim-text-small);
  color: var(--emim-muted);
}

.emim-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--emim-space-2);
  flex-shrink: 0;
}

.emim-page-header--with-tabs {
  padding-bottom: 0;
  border-bottom: 1px solid var(--emim-line);
}

/* --------------------------------------------------------------- 2 step rail */

.emim-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--emim-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.emim-steps__step {
  display: flex;
  align-items: center;
  gap: var(--emim-space-2);
  padding: var(--emim-space-1) var(--emim-space-3);
  border-radius: var(--emim-radius-pill);
  font-size: var(--emim-text-ui);
  color: var(--emim-muted);
}

.emim-steps__step[aria-current="step"] {
  background: var(--emim-primary-tint);
  color: var(--emim-primary);
  font-weight: 600;
}

.emim-steps__step--done {
  color: var(--emim-accent);
}

.emim-steps__step--todo {
  color: var(--emim-disabled);
}

.emim-steps__marker {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--emim-radius-pill);
  background: var(--emim-primary);
  color: var(--emim-on-primary);
  font-size: var(--emim-text-small);
  font-variant-numeric: tabular-nums;
}

.emim-steps__rule {
  width: 24px;
  height: 1px;
  background: var(--emim-line);
}

.emim-steps--compact .emim-steps__step {
  padding: var(--emim-space-1) var(--emim-space-2);
}

/* -------------------------------------------------------------- 3 action bar */

.emim-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--emim-space-4);
  padding: var(--emim-space-4) var(--emim-space-7);
  background: var(--emim-surface);
  border-top: 1px solid var(--emim-line);
}

.emim-action-bar__group {
  display: flex;
  align-items: center;
  gap: var(--emim-space-3);
}

.emim-action-bar__hint {
  font-size: var(--emim-text-small);
  color: var(--emim-muted);
}

.emim-action-bar--sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

/* -------------------------------------------------------------------- 4 card */

.emim-card {
  box-sizing: border-box;
  padding: var(--emim-space-6) var(--emim-space-7);
  background: var(--emim-surface);
  border: 1px solid var(--emim-line);
  border-radius: var(--emim-radius-card);
  box-shadow: var(--emim-shadow-card);
}

.emim-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--emim-space-4);
  margin-bottom: var(--emim-space-4);
}

.emim-card__title {
  margin: 0;
  font-size: var(--emim-text-section);
  font-weight: 600;
}

.emim-card__note {
  margin: var(--emim-space-2) 0 0;
  max-width: 70ch;
  font-size: var(--emim-text-small);
  line-height: var(--emim-leading-body);
  color: var(--emim-muted);
}

/* Cards do not nest. Where a region needs separating inside a card, use a
 * divider or --quiet, not another bordered box. */
.emim-card__divider {
  margin: var(--emim-space-5) 0;
  border: 0;
  border-top: 1px solid var(--emim-line);
}

.emim-card--flush {
  padding: 0;
  overflow: hidden;
}

.emim-card--quiet {
  background: var(--emim-surface-quiet);
  box-shadow: none;
}

/* ------------------------------------------------------------------- 5 field */

.emim-field {
  display: flex;
  flex-direction: column;
  gap: var(--emim-space-2);
}

.emim-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--emim-space-3);
  font-size: var(--emim-text-label);
  font-weight: 600;
  color: var(--emim-ink-2);
}

/* "Optional" sits quietly beside the label instead of taking its own line. */
.emim-field__optional {
  font-size: var(--emim-text-small);
  font-weight: 400;
  color: var(--emim-muted);
}

.emim-field__control {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--emim-control-height);
  padding: 0 var(--emim-space-3);
  border: 1px solid var(--emim-line-strong);
  border-radius: var(--emim-radius-control);
  background: var(--emim-surface);
  color: var(--emim-ink);
  font-size: var(--emim-text-body);
  transition: border-color var(--emim-transition);
}

textarea.emim-field__control {
  padding: var(--emim-space-3);
  line-height: var(--emim-leading-body);
  resize: vertical;
}

.emim-field__control:hover {
  border-color: var(--emim-muted);
}

.emim-field__control:disabled {
  background: var(--emim-ground);
  color: var(--emim-muted);
}

.emim-field__control::placeholder {
  color: var(--emim-muted);
}

/* Help text is for a choice that is genuinely unclear, and is removed once the
 * choice is made. It is not a place to restate the label. */
.emim-field__help {
  margin: 0;
  font-size: var(--emim-text-small);
  line-height: var(--emim-leading-body);
  color: var(--emim-muted);
}

.emim-field__error {
  margin: 0;
  font-size: var(--emim-text-small);
  color: var(--emim-danger);
}

.emim-field--invalid .emim-field__control {
  border-color: var(--emim-danger);
}

.emim-field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--emim-space-3);
}

.emim-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--emim-space-5) var(--emim-space-6);
}

@media (max-width: 700px) {
  .emim-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------- 6 disclosure */

.emim-disclosure {
  border-top: 1px solid var(--emim-line);
  padding-top: var(--emim-space-4);
}

.emim-disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--emim-space-2);
  cursor: pointer;
  font-size: var(--emim-text-ui);
  font-weight: 600;
  color: var(--emim-primary);
  list-style: none;
}

.emim-disclosure__summary::-webkit-details-marker {
  display: none;
}

.emim-disclosure__summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--emim-transition);
}

.emim-disclosure[open] > .emim-disclosure__summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.emim-disclosure__body {
  padding-top: var(--emim-space-4);
}

/* ------------------------------------------------------------------ 7 button */

.emim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--emim-space-2);
  box-sizing: border-box;
  min-height: var(--emim-control-height);
  padding: 0 var(--emim-space-5);
  border: 1px solid var(--emim-line);
  border-radius: var(--emim-radius-control);
  background: var(--emim-surface);
  color: var(--emim-ink-2);
  font-size: var(--emim-text-ui);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--emim-transition), border-color var(--emim-transition);
}

.emim-btn:hover {
  background: var(--emim-ground);
}

.emim-btn:disabled,
.emim-btn[aria-disabled="true"] {
  color: var(--emim-muted);
  background: var(--emim-ground);
  cursor: not-allowed;
}

.emim-btn--primary {
  border-color: transparent;
  background: var(--emim-primary);
  color: var(--emim-on-primary);
  font-weight: 600;
}

.emim-btn--primary:hover {
  background: var(--emim-primary-hover);
}

.emim-btn--primary:disabled,
.emim-btn--primary[aria-disabled="true"] {
  background: var(--emim-line-strong);
  color: var(--emim-surface);
}

.emim-btn--approve {
  border-color: transparent;
  background: var(--emim-accent);
  color: var(--emim-on-accent);
  font-weight: 600;
}

.emim-btn--approve:hover {
  background: var(--emim-accent-hover);
}

.emim-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--emim-primary);
  font-weight: 600;
}

.emim-btn--ghost:hover {
  background: var(--emim-primary-tint);
}

.emim-btn--danger {
  border-color: transparent;
  background: var(--emim-danger);
  color: var(--emim-on-primary);
  font-weight: 600;
}

.emim-btn--danger:hover {
  background: var(--emim-danger-hover);
}

.emim-btn--compact {
  min-height: var(--emim-control-height-compact);
  padding: 0 var(--emim-space-3);
  font-size: var(--emim-text-small);
}

.emim-btn--icon {
  min-height: var(--emim-control-height-compact);
  width: var(--emim-control-height-compact);
  padding: 0;
}

.emim-btn__icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

/* -------------------------------------------------------------------- 8 chip */

.emim-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--emim-space-1);
  padding: var(--emim-space-1) var(--emim-space-3);
  border-radius: var(--emim-radius-pill);
  background: var(--emim-ground);
  color: var(--emim-ink-2);
  font-size: var(--emim-text-small);
  font-weight: 600;
  white-space: nowrap;
}

.emim-chip--info {
  background: var(--emim-primary-tint);
  color: var(--emim-primary-hover);
}

.emim-chip--approved {
  background: var(--emim-accent-tint);
  color: var(--emim-accent-hover);
}

.emim-chip--attention {
  background: var(--emim-attention-tint);
  color: var(--emim-attention);
}

.emim-chip--danger {
  background: var(--emim-danger-tint);
  color: var(--emim-danger);
}

/* ------------------------------------------------------------------- 9 meter */

.emim-meter {
  display: flex;
  align-items: center;
  gap: var(--emim-space-3);
}

.emim-meter__track {
  width: min(180px, 40vw);
  height: 6px;
  border-radius: var(--emim-radius-pill);
  background: var(--emim-line);
  overflow: hidden;
}

.emim-meter__fill {
  height: 100%;
  border-radius: var(--emim-radius-pill);
  background: var(--emim-accent);
  transition: width var(--emim-transition);
}

.emim-meter__label {
  font-size: var(--emim-text-small);
  color: var(--emim-ink-2);
  font-variant-numeric: tabular-nums;
}

.emim-meter--inline .emim-meter__track {
  width: 96px;
}

/* -------------------------------------------------------------- 10 review row */

.emim-rows {
  display: flex;
  flex-direction: column;
}

.emim-row {
  display: grid;
  grid-template-columns: var(--emim-row-columns, 32px minmax(0, 1fr) auto);
  align-items: center;
  gap: var(--emim-space-4);
  padding: var(--emim-space-4) var(--emim-space-6);
  border-bottom: 1px solid var(--emim-line);
  background: var(--emim-surface);
}

.emim-row:last-child {
  border-bottom: 0;
}

.emim-row__index {
  font-size: var(--emim-text-small);
  color: var(--emim-muted);
  font-variant-numeric: tabular-nums;
}

.emim-row__title {
  min-width: 0;
  font-size: var(--emim-text-body);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emim-row__meta {
  margin: var(--emim-space-1) 0 0;
  font-size: var(--emim-text-small);
  color: var(--emim-muted);
}

/* Status chips share one cell so they stay on a single line when a row stacks. */
.emim-row__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--emim-space-2);
  min-width: 0;
}

.emim-row__action {
  justify-self: end;
}

.emim-row__head {
  font-size: var(--emim-text-small);
  font-weight: 600;
  color: var(--emim-muted);
  background: var(--emim-surface-quiet);
}

.emim-row--selected {
  background: var(--emim-primary-tint);
}

/* An info chip would vanish against the selected row's tint. */
.emim-row--selected .emim-chip--info {
  background: var(--emim-surface);
}

.emim-row--approved .emim-row__title {
  color: var(--emim-ink-2);
}

/* Below tablet width a row stacks: index and title on the first line, then
 * status and actions beneath, aligned to the title column. */
@media (max-width: 899px) {
  .emim-row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--emim-space-2) var(--emim-space-3);
    padding: var(--emim-space-4);
  }

  .emim-row > *:nth-child(n + 3) {
    grid-column: 2;
  }

  .emim-row__action,
  .emim-row > *:nth-child(n + 3) {
    justify-self: start;
  }

  .emim-row__title {
    white-space: normal;
  }

  .emim-row__head {
    display: none;
  }
}

/* --------------------------------------------------------------- 11 side rail */

.emim-rail {
  box-sizing: border-box;
  width: 300px;
  flex: 0 0 300px;
  padding: var(--emim-space-5);
  background: var(--emim-surface);
  border: 1px solid var(--emim-line);
  border-radius: var(--emim-radius-card);
  box-shadow: var(--emim-shadow-card);
}

.emim-rail__title {
  margin: 0 0 var(--emim-space-3);
  font-size: var(--emim-text-label);
  font-weight: 600;
  color: var(--emim-muted);
}

.emim-rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--emim-space-3);
}

.emim-rail__item {
  display: flex;
  align-items: flex-start;
  gap: var(--emim-space-2);
  font-size: var(--emim-text-ui);
  color: var(--emim-ink-2);
}

.emim-rail__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--emim-accent);
}

.emim-rail__icon--pending {
  color: var(--emim-disabled);
}

.emim-rail__footer {
  margin-top: var(--emim-space-5);
  padding-top: var(--emim-space-4);
  border-top: 1px solid var(--emim-line);
}

.emim-rail--sticky {
  position: sticky;
  top: var(--emim-space-6);
}

@media (max-width: 899px) {
  .emim-rail {
    width: auto;
    flex: 1 1 auto;
  }
}

/* --------------------------------------------------------------- 12 feedback */

.emim-note {
  display: flex;
  align-items: flex-start;
  gap: var(--emim-space-3);
  padding: var(--emim-space-4);
  border: 1px solid var(--emim-line);
  border-radius: var(--emim-radius-control);
  background: var(--emim-surface-quiet);
  font-size: var(--emim-text-ui);
  line-height: var(--emim-leading-body);
  color: var(--emim-ink-2);
}

.emim-note__title {
  margin: 0 0 var(--emim-space-1);
  font-size: var(--emim-text-ui);
  font-weight: 600;
  color: var(--emim-ink);
}

.emim-note__body {
  margin: 0;
}

.emim-note--error {
  border-color: var(--emim-danger);
  background: var(--emim-danger-tint);
}

.emim-note--error .emim-note__title {
  color: var(--emim-danger);
}

.emim-note--success {
  border-color: var(--emim-accent-tint);
  background: var(--emim-accent-tint);
}

.emim-note--attention {
  border-color: var(--emim-attention-line);
  background: var(--emim-attention-tint);
}

.emim-note--attention .emim-note__title {
  color: var(--emim-attention);
}

/* An empty screen states what is missing and offers the action that fills it. */
.emim-note--empty {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--emim-space-3);
  padding: var(--emim-space-7);
  text-align: left;
  border-style: dashed;
}

.emim-note--loading .emim-note__spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 2px solid var(--emim-line-strong);
  border-top-color: var(--emim-primary);
  border-radius: var(--emim-radius-pill);
  animation: emim-spin 700ms linear infinite;
}

@keyframes emim-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .emim-note--loading .emim-note__spinner {
    animation-duration: 2400ms;
  }
}

/* ------------------------------------------------- flow containment (step 1) */
/* A create or edit flow owns the view while it is open: the surrounding chrome
 * is hidden rather than left scrolling behind the wizard. `emim-flow-open` is
 * set by the view that owns the layout (ManagementCampaigns.setCampaignFlowOpen);
 * `data-emim-flow-hidden` marks the chrome that steps aside. */
.emim-flow-open [data-emim-flow-hidden] {
  display: none;
}

/* The action row stays reachable without scrolling to the end of a long step. */
.emim-flow-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: var(--emim-space-5);
  padding: var(--emim-space-4) 0;
  background: var(--emim-surface);
  border-top: 1px solid var(--emim-line);
}

@supports not (position: sticky) {
  .emim-flow-footer {
    position: static;
  }
}

/* ===========================================================================
 * Motion and loading
 *
 * Three jobs: say that something is happening, keep a change from appearing
 * out of nowhere, and let an action be undone without a dialog. Everything
 * here honours prefers-reduced-motion: durations collapse to zero and
 * transforms are dropped, so the feedback remains and the movement does not.
 * ======================================================================== */

/* ------------------------------------------------------------- skeletons */
/* A skeleton mirrors the shape of what is loading. A spinner in the middle of
 * an empty panel says "wait"; a skeleton says "a list of five rows is coming",
 * which is the difference between waiting and knowing. */
.emim-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--emim-radius-control);
  background: var(--emim-line);
}

.emim-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  animation: emim-skeleton-sweep 1200ms ease-in-out infinite;
}

@keyframes emim-skeleton-sweep {
  to { transform: translateX(100%); }
}

.emim-skeleton--text { height: 12px; margin: 6px 0; }
.emim-skeleton--title { height: 18px; width: 40%; margin-bottom: var(--emim-space-3); }
.emim-skeleton--line-short { width: 60%; }
.emim-skeleton--thumb { width: 44px; height: 44px; border-radius: var(--emim-radius-control); }
.emim-skeleton--tile { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--emim-radius-card); }

.emim-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--emim-space-3);
  padding: var(--emim-space-4);
  border-bottom: 1px solid var(--emim-line);
}

.emim-skeleton-row__body { flex-grow: 1; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .emim-skeleton::after { animation: none; }
  .emim-skeleton { background: var(--emim-line); }
}

/* --------------------------------------------------------------- progress */
/* Work that takes minutes needs an estimate, not a spinner. */
.emim-progress {
  display: flex;
  align-items: center;
  gap: var(--emim-space-3);
}

.emim-progress__spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--emim-line-strong);
  border-top-color: var(--emim-primary);
  border-radius: var(--emim-radius-pill);
  animation: emim-spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .emim-progress__spinner { animation-duration: 2400ms; }
}

.emim-progress__label {
  font-size: var(--emim-text-small);
  color: var(--emim-muted);
}

/* ------------------------------------------------------------ transitions */
/* Content that replaces other content arrives from slightly below, so the eye
 * sees a change rather than a substitution. */
.emim-enter {
  animation: emim-enter var(--emim-motion-quick) var(--emim-ease-out);
}

@keyframes emim-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .emim-enter { animation: none; }
}

/* A drawer moves; a reduced-motion drawer simply appears. */
.emim-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(720px, 92vw);
  background: var(--emim-surface);
  border-left: 1px solid var(--emim-line);
  box-shadow: var(--emim-shadow-overlay);
  transform: translateX(100%);
  transition: transform var(--emim-motion-panel) var(--emim-ease-out);
}

.emim-drawer.is-open { transform: none; }

/* A drawer is a column: a head that stays put and a body that scrolls, so the
 * close button never scrolls out of reach in a long source document. */
.emim-drawer {
  display: flex;
  flex-direction: column;
}

.emim-drawer[hidden] { display: none; }

.emim-drawer--wide { width: min(980px, 96vw); }

.emim-drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--emim-space-4);
  padding: var(--emim-space-5);
  border-bottom: 1px solid var(--emim-line);
}

.emim-drawer__heading h2 {
  margin: 0;
  font-size: var(--emim-text-section);
}

.emim-drawer__subtitle {
  margin: var(--emim-space-2) 0 0;
  font-size: var(--emim-text-small);
  color: var(--emim-muted);
}

.emim-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--emim-space-5);
}

.emim-drawer__body:focus { outline: none; }

/* Below the tablet breakpoint a side panel is the wrong shape: it becomes a
 * sheet that covers the lower part of the screen, which is where a thumb is. */
@media (max-width: 700px) {
  .emim-drawer,
  .emim-drawer--wide {
    top: auto;
    left: 0;
    width: auto;
    max-height: 88vh;
    border-left: 0;
    border-top: 1px solid var(--emim-line);
    border-radius: var(--emim-radius-card) var(--emim-radius-card) 0 0;
    transform: translateY(100%);
  }
}

/* The page behind a drawer must not scroll under it. */
body.emim-drawer-open { overflow: hidden; }

.emim-drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(21, 46, 88, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--emim-motion-panel) var(--emim-ease-out);
}

.emim-drawer__scrim.is-open { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .emim-drawer { transition: none; }
}

/* ------------------------------------------------------------------ undo */
/* An approval should feel immediate and stay reversible. A toast with undo
 * beats a confirmation dialog: the common case costs nothing, and the mistake
 * costs one click. */
.emim-toast {
  position: fixed;
  left: 50%;
  bottom: var(--emim-space-6);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--emim-space-4);
  padding: var(--emim-space-3) var(--emim-space-4);
  border-radius: var(--emim-radius-control);
  background: var(--emim-ink);
  color: var(--emim-surface);
  font-size: var(--emim-text-ui);
  box-shadow: var(--emim-shadow-overlay);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--emim-motion-quick) var(--emim-ease-out),
              transform var(--emim-motion-quick) var(--emim-ease-out);
}

.emim-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.emim-toast__action {
  min-height: 32px;
  padding: 0 var(--emim-space-3);
  border: 0;
  border-radius: var(--emim-radius-control);
  background: rgba(255, 255, 255, 0.16);
  color: var(--emim-surface);
  font-size: var(--emim-text-small);
  font-weight: 600;
  cursor: pointer;
}

.emim-toast__action:hover { background: rgba(255, 255, 255, 0.26); }

@media (prefers-reduced-motion: reduce) {
  .emim-toast { transition: opacity var(--emim-motion-quick) linear; transform: translate(-50%, 0); }
}

/* ---------------------------------------------------------- check line */
/* An activity-level check belongs in the header as one line, not as a card
 * above every item. The line carries a verdict and a dot coloured by the
 * weakest score; the detail opens in a drawer. Same shape will serve the MLR
 * and accessibility checks when those land. */
.emim-checkline {
  display: flex;
  align-items: center;
  gap: var(--emim-space-3);
  width: 100%;
  min-height: 40px;
  padding: var(--emim-space-2) var(--emim-space-3);
  border: 1px solid var(--emim-line);
  border-radius: var(--emim-radius-control);
  background: var(--emim-surface);
  font: inherit;
  font-size: var(--emim-text-ui);
  color: var(--emim-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--emim-transition), background var(--emim-transition);
}

.emim-checkline:hover { border-color: var(--emim-line-strong); }

.emim-checkline[hidden] { display: none; }

.emim-checkline__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--emim-radius-pill);
  background: var(--emim-muted);
}

.emim-checkline__dot--strong { background: var(--emim-accent); }
.emim-checkline__dot--ok { background: var(--emim-primary); }
.emim-checkline__dot--attention { background: var(--emim-attention); }

.emim-checkline__label { flex: 1 1 auto; min-width: 0; }

.emim-checkline__verdict { font-weight: 600; }

.emim-checkline__meta {
  margin-left: var(--emim-space-2);
  color: var(--emim-muted);
  font-size: var(--emim-text-small);
}

.emim-checkline__open {
  flex: 0 0 auto;
  color: var(--emim-primary);
  font-size: var(--emim-text-small);
  font-weight: 600;
}

@media (max-width: 560px) {
  .emim-checkline { align-items: flex-start; flex-wrap: wrap; }
  .emim-checkline__meta { display: block; margin-left: 0; }
}

/* The four secondary scores behind a disclosure, so the drawer opens on the
 * weakest first rather than on all eight at once. */
.emim-drawer__more { margin-top: var(--emim-space-4); }

/* The source viewer is a drawer, not a centred modal: a reviewer judging a
 * claim needs the item still visible beside the passage it came from. The
 * inner column keeps its own classes and styling; only the shell changed. */
.emim-drawer .source-viewer-dialog {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.emim-drawer .source-viewer-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* The studio grid inside a drawer.
 *
 * The grid in platform-ui.css picks its column count from viewport media
 * queries, which is right for a full-width page and wrong inside a panel: at
 * 1440px it asks for three columns of whatever the drawer happens to be. Here
 * the columns are driven by the space actually available, so the tiles stay a
 * sensible size at every drawer width without a container query. */
.emim-drawer .visual-studio-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* An image must never widen the panel. The drawer scrolls vertically only;
 * a horizontal scrollbar here means a reviewer cannot see a whole image. */
.emim-drawer__body img { max-width: 100%; }
.emim-drawer__body { overflow-x: hidden; }

/* The edit row stacks inside a drawer. Its three-column layout needs the width
 * a full-page tile has; in a panel the two buttons take it and the instruction
 * field collapses to a few characters. The page keeps its own layout — the
 * viewport media query that would have stacked this never fires for a panel. */
.emim-drawer .visual-studio-edit { grid-template-columns: minmax(0, 1fr); }

/* Pending state — the one answer to "did my click do anything?".
 *
 * Driven by static/js/emim-pending.js, which is the single owner of when this
 * appears: nothing for the first 120ms, because a spinner that flashes for a
 * frame reads as a glitch and makes a fast action feel slow.
 *
 * The control keeps its size. A label that shrinks to a spinner shifts every
 * control beside it, and a row that reflows under the cursor is how a second,
 * unintended click lands. */
.emim-pending {
  position: relative;
  cursor: progress;
}

.emim-pending__spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--emim-radius-pill);
  opacity: 0.75;
  animation: emim-spin 700ms linear infinite;
}

/* Disabled controls are dimmed by the surrounding styles; a busy control is
 * working, not unavailable, so it keeps its weight. */
.emim-pending[aria-busy="true"][aria-disabled="true"] {
  opacity: 1;
}

.emim-pending__hidden {
  visibility: hidden;
}

.emim-pending__label {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .emim-pending__spinner {
    animation-duration: 2400ms;
  }
}

/* A region whose contents are stale while new data is on its way.
 *
 * For panels built from template markup and filled in by id, where a skeleton
 * cannot be used: replacing innerHTML there destroys the elements the renderer
 * is about to write into. The numbers stay readable — they are simply marked as
 * not the answer yet. */
.emim-refreshing:not(.emim-scene) {
  opacity: 0.55;
  transition: opacity 120ms ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .emim-refreshing,
  .emim-scene > * { transition: none; }
}

/* A surface that is on screen but not finished yet.
 *
 * `.emim-scene` is the stronger form of `.emim-refreshing`: the surface is
 * being prepared rather than merely refreshed, so it says so in words. Both
 * keep the existing content visible underneath — a person can see what they
 * are waiting for, and a slow surface never looks like an empty one. */
.emim-scene {
  position: relative;
  min-height: 180px;
  pointer-events: none;
}

/* The children are dimmed rather than the container. Opacity on the container
 * would create a compositing group the label could not escape, so the thing
 * explaining the wait would be the hardest part to read. */
.emim-scene > *:not([data-emim-scene-label]) {
  opacity: 0.45;
  transition: opacity 120ms ease;
}

.emim-scene__label {
  /* First child and sticky, so it stays in view down a long surface. */
  position: sticky;
  top: 24px;
  z-index: 2;
  display: flex;
  gap: var(--emim-space-3, 8px);
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 16px;
  border: 1px solid var(--emim-line, rgba(15, 23, 42, 0.12));
  border-radius: var(--emim-radius-pill, 999px);
  background: var(--emim-surface, #fff);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
  font-weight: 700;
  font-size: 0.9rem;
  /* The scene itself is dimmed; its label must not be. */
  opacity: 1;
}

.emim-scene .emim-scene__label .emim-pending__spinner {
  margin-right: 0;
}