/* GLAMAROO MARKETING design note, Charlie, lane S14, Sep 21 2026.
   Cards stay neutral (surface, line, no stripe): automations carry no color
   field in the data contract, so tint lives in mk-chip status, not the shell.
   would_send and test_mode share the warn tint on purpose, never green, so the
   honesty floor (never claim a real send happened) reads visually, not only
   in text. mk-rule borrows the display serif as a third deliberate hero use
   past DESIGN.md's two. Grid runs 1/2/3 columns at 640/1280; overflow-wrap:
   anywhere runs throughout so 320 and 390 never scroll sideways. Dark mode
   costs nothing extra, every color here is a var() that already flips under
   [data-theme="dark"] in design.css. */

/* ---------------------------------------------------------------- SCREEN */
.mk-screen {
  display: flex; flex-direction: column; flex: 1 1 auto;
  min-height: 0; min-width: 0; overflow-y: auto;
  padding: 24px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  gap: 20px;
}
@media (min-width: 768px) { .mk-screen { padding: 32px 28px 28px; gap: 24px; } }

.mk-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-head p { font-size: var(--fs-meta); color: var(--muted); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ TABS */
.mk-tabs {
  display: flex; align-items: flex-end; gap: 20px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; min-width: 0;
  flex: none; /* Sophie, sight pass: inside the screen's flex column the row shrank to its 1px border and the tabs vanished */
}
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 2px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--muted);
  font: inherit; font-size: var(--fs-body); font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.mk-tab:hover { color: var(--fg); }
.mk-tab[aria-selected="true"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
.mk-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------------ GRID */
.mk-grid { display: grid; grid-template-columns: 1fr; gap: 12px; min-width: 0; }
@media (min-width: 640px)  { .mk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .mk-grid { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ CARD
   No side stripe, ever. The rule is the hero; the toggle and the meta line
   wrap onto their own row once the card narrows, flex-wrap does the work. */
.mk-card {
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: 14px; row-gap: 10px;
  min-width: 0; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}

.mk-rule {
  font-family: var(--font-display); font-weight: 500;
  font-size: 19px; line-height: 1.3; letter-spacing: -.005em;
  color: var(--fg); flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere;
}
@media (min-width: 768px) { .mk-rule { font-size: 21px; } }

.mk-meta {
  font-size: var(--fs-meta); color: var(--muted);
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
  flex: 1 1 auto; min-width: 0;
}

/* ---------------------------------------------------------------- TOGGLE
   Button IS the 44x44 tap target; the visible track (::before) and thumb
   (::after) are centered inside it, smaller than the target on purpose. */
.mk-toggle {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-size: 0; color: transparent; /* Sophie, sight pass: the On or Off label stays for screen readers, it must not squeeze the track */
}
.mk-toggle::before {
  flex: none;
  content: ""; width: 40px; height: 24px; border-radius: 999px;
  background: var(--line); border: 1px solid var(--line);
  transition: background var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease);
}
.mk-toggle::after {
  content: ""; position: absolute; left: 5px; top: 50%;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-lift);
  transform: translateY(-50%) translateX(0);
  transition: transform var(--mo-fast) var(--mo-ease);
}
.mk-toggle[aria-checked="true"]::before { background: var(--accent); border-color: var(--accent); } /* Sophie, Sep 25: on must read against the off track, rose under every theme */
.mk-toggle[aria-checked="true"]::after { transform: translateY(-50%) translateX(16px); }
.mk-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
.mk-toggle:disabled { opacity: .4; cursor: not-allowed; }

/* ------------------------------------------------------------------ CHIP
   Status tints, existing tokens only. not_connected and queued read as the
   plain neutral chip (no rule needed, that is already the base look).
   would_send and test_mode share warn on purpose: never let a simulated
   send look like a real one. delivered gets the same ok tint as live/sent,
   plus weight, since a fourth hue is not on the token list. */
.mk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
  font-family: var(--font); font-size: var(--fs-chip); font-weight: 600;
  line-height: 1.5; white-space: nowrap;
}
.mk-chip[data-status="test_mode"],
.mk-chip[data-status="would_send"] {
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--warn) 32%, var(--line));
  color: var(--warn);
}
.mk-chip[data-status="live"],
.mk-chip[data-status="sent"],
.mk-chip[data-status="delivered"] {
  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
  color: var(--ok);
}
.mk-chip[data-status="delivered"] { font-weight: 700; }
.mk-chip[data-status="failed"] {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
  color: var(--danger);
}
.mk-chip[data-status="suppressed"] { border-style: dashed; color: var(--muted); }

/* ----------------------------------------------------------------- EMPTY */
.mk-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 48px 20px; text-align: center; color: var(--muted); min-width: 0;
}
.mk-empty h2 { color: var(--fg); }
.mk-empty p { max-width: 38ch; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------- LOG */
.mk-log { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid var(--line); }
.mk-log-row {
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: 12px; row-gap: 4px; min-width: 0;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.mk-log-row b {
  font-size: var(--fs-body); font-weight: 600; flex: 1 1 140px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-log-row time {
  font-size: var(--fs-meta); color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mk-log-row .mk-meta { flex: 2 1 160px; }

/* ------------------------------------------------------------------ STEP
   Markup agnostic on purpose: targets direct children, not <li>, since the
   campaign flow may be a div row, not a list. */
.mk-step {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0; padding: 0; min-width: 0;
}
.mk-step > * {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-meta); color: var(--muted); white-space: nowrap;
}
.mk-step > *::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: 0 0 auto;
}
.mk-step > *:not(:last-child)::after { content: ""; width: 20px; height: 1px; background: var(--line); flex: 0 0 auto; }
.mk-step > *[aria-current="step"] { color: var(--fg); font-weight: 600; }
.mk-step > *[aria-current="step"]::before { background: var(--accent); }
.mk-step > *[data-done="true"]::before { background: var(--ok); }

/* ------------------------------------------------------------------ NOTE */
.mk-note {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--line);
  color: var(--muted); font-size: var(--fs-meta); line-height: 1.5;
}
.mk-note b { color: var(--fg); font-weight: 600; }
.mk-note p { overflow-wrap: anywhere; margin: 0; }