@layer cards, base, layout-base, layout-screens, layout-top, components, state, motion;
@layer cards {
/* cards-render.css — карточки zidos.card/1 в чате Zidos.
   Вид и переходы по образцам app/w1-w8 (transitions.dev, free-рецепты):
   02 number-pop-in, 04 text-states-swap, 07 panel-reveal, 10 success-check,
   12 error-state-shake, 21 accordion. prefers-reduced-motion отключает всё.
   Монохром + единственный акцент коралл #F34B43 только у активного;
   зелёный/красный только у данных (дифф, прошло/упало). */

/* ---------- токены (светлая тема) ---------- */
:root {
  --z-frame: #f6f6f6;
  --z-side: #fcfcfc;
  --z-paper: #ffffff;
  --z-bubble: #f3f3f4;
  --z-bubble-own: #e9e9ea;
  --z-card: #ffffff;
  --z-card-sub: #f3f3f4;
  --z-card-sub2: #e9e9ea;
  --z-ink: #1a1c1f;
  --z-sub: #65676a;
  --z-faint: #8a8d90;
  --z-selected: #eff0f0;
  --z-pill: #111113;
  --z-pill-ink: #ffffff;
  --z-ok: #1a7f43;
  --z-ok-bg: rgba(46, 160, 67, 0.09);
  --z-bad: #b3261e;
  --z-bad-bg: rgba(248, 81, 73, 0.09);
  --z-coral: #f34b43;
  --z-shadow: 0 1px 2px rgba(20, 22, 25, 0.05), 0 12px 32px rgba(20, 22, 25, 0.08);
  --z-shadow-sm: 0 1px 2px rgba(20, 22, 25, 0.1);
  --z-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --z-font-code: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- токены (тёмная тема) ---------- */
[data-theme="dark"] {
  --z-frame: #202020;
  --z-side: #252525;
  --z-paper: #1b1b1b;
  --z-bubble: #2c2c2e;
  --z-bubble-own: #3b3b3f;
  --z-card: #262628;
  --z-card-sub: #323235;
  --z-card-sub2: #3b3b3f;
  --z-ink: #eeeeef;
  --z-sub: #a6a8ab;
  --z-faint: #84868a;
  --z-selected: #343435;
  --z-pill: #f1f1f2;
  --z-pill-ink: #111113;
  --z-ok: #5fd18d;
  --z-ok-bg: rgba(63, 185, 80, 0.14);
  --z-bad: #ff8a80;
  --z-bad-bg: rgba(248, 81, 73, 0.12);
  --z-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.35);
  --z-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---------- базовая страница демо ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--z-frame);
  color: var(--z-ink);
  font-family: var(--z-font-ui);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- оболочка приложения (демо) ---------- */
.zc-app {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 330px;
  grid-template-rows: minmax(0, 1fr); /* иначе ряд растянется на контент и лента не скроллится */
  height: 100vh;
  height: 100dvh;
}

.zc-sidebar {
  background: var(--z-side);
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.zc-win { display: flex; gap: 6px; align-items: center; padding: 2px 6px; }
.zc-win i { width: 11px; height: 11px; border-radius: 50%; background: var(--z-card-sub2); }
.zc-brand { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.zc-brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--z-coral); }
.zc-nav { display: flex; flex-direction: column; gap: 2px; }
.zc-nav-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--z-faint); padding: 0 8px; margin: 0 0 4px; }
.zc-nav-item { display: block; text-align: left; width: 100%; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--z-ink); border-radius: 9px; padding: 7px 8px; cursor: pointer; }
.zc-nav-item:hover { background: var(--z-selected); }
.zc-nav-item.is-current { background: var(--z-selected); font-weight: 600; }
.zc-nav-new { color: var(--z-sub); }

.zc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--z-frame); }

.zc-topbar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
.zc-topbar-title { font-size: 14px; font-weight: 650; }
.zc-spacer { flex: 1; }

.zc-seg { display: flex; gap: 2px; background: var(--z-bubble); border-radius: 9px; padding: 2px; }
.zc-seg button { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--z-sub); border-radius: 7px; padding: 3px 10px; cursor: pointer; }
.zc-seg button:hover { color: var(--z-ink); }
.zc-seg button.is-on { background: var(--z-card); color: var(--z-ink); box-shadow: var(--z-shadow-sm); }

.zc-iconbtn { width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--z-sub); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.zc-iconbtn:hover { background: var(--z-bubble); color: var(--z-ink); }
.zc-iconbtn.is-on { background: var(--z-bubble); color: var(--z-ink); }
.zc-iconbtn svg { width: 15px; height: 15px; }

.zc-feed { flex: 1; overflow-y: auto; padding: 6px 24px 28px; }
.zc-column { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }

.zc-sec { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--z-faint); margin: 12px 0 0; }

.zc-bubble-user {
  align-self: flex-end;
  max-width: 600px;
  width: fit-content;
  background: var(--z-bubble-own);
  color: var(--z-ink);
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 14px;
}

.zc-msg {
  align-self: flex-start;
  max-width: 600px;
  width: fit-content;
  background: var(--z-bubble);
  color: var(--z-ink);
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 14px;
  word-break: break-word;
}

/* ---------- карточка ---------- */
.zc-card {
  width: 100%;
  max-width: 560px;
  background: var(--z-card);
  border-radius: 16px;
  box-shadow: var(--z-shadow);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 18px;
  color: var(--z-ink);
}
.zc-card, .zc-card * { min-width: 0; }

.zc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.zc-title { font-size: 13px; font-weight: 650; letter-spacing: -0.005em; }
.zc-sub { font-size: 12px; color: var(--z-sub); }
.zc-mono { font-family: var(--z-font-code); font-size: 12px; }
.zc-sub .zc-mono { font-size: 11.5px; }
.zc-name { font-size: 13.5px; font-weight: 600; margin: 2px 0 4px; }
.zc-reason { font-size: 12.5px; color: var(--z-sub); margin: 2px 0 4px; }

.zc-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 8px 0 0; font-size: 12.5px; }
.zc-meta dt { color: var(--z-sub); }
.zc-meta dd { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* чипы-значения статусов */
.zc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: var(--z-card-sub); }
.zc-chip .zc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--z-sub); }
.zc-chip.is-ok { color: var(--z-ok); background: var(--z-ok-bg); }
.zc-chip.is-ok .zc-dot { background: var(--z-ok); }
.zc-chip.is-bad { color: var(--z-bad); background: var(--z-bad-bg); }
.zc-chip.is-bad .zc-dot { background: var(--z-bad); }
.zc-chip.is-live { color: var(--z-ink); }
.zc-chip.is-live .zc-dot { background: var(--z-coral); animation: zc-pulse 1.6s ease-in-out infinite; }
.zc-chip.is-code { font-family: var(--z-font-code); font-weight: 500; color: var(--z-bad); background: var(--z-bad-bg); font-size: 11.5px; }
.zc-chip.is-plain { color: var(--z-sub); font-weight: 500; }

.zc-badge-add { color: var(--z-ok); font-weight: 650; font-size: 12px; }
.zc-badge-rm { color: var(--z-bad); font-weight: 650; font-size: 12px; }
.zc-badge-part { color: var(--z-sub); background: var(--z-card-sub); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; }

/* ---------- кнопки действий ---------- */
.zc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.zc-btn {
  appearance: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 17px;
  min-height: 34px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: transparent;
  color: var(--z-ink);
  transition: transform 0.15s var(--ease), background 0.15s var(--ease), opacity 0.2s var(--ease);
}
.zc-btn-primary { background: var(--z-pill); color: var(--z-pill-ink); }
/* Opus 12.10: подъём на 1 px при наведении уводил кнопку из-под курсора у нижнего края → наведение мигало (видно с reduced motion). Тон вместо сдвига. */
.zc-btn-primary:hover { filter: brightness(1.07); }
.zc-btn-secondary { background: var(--z-card-sub); }
.zc-btn-secondary:hover { background: var(--z-card-sub2); }
.zc-btn-danger { color: var(--z-bad); padding: 0 10px; }
.zc-btn-danger:hover { background: var(--z-bad-bg); }
.zc-btn:focus-visible { outline: 2px solid var(--z-coral); outline-offset: 2px; }
.zc-btn[disabled], .zc-btn.is-done { cursor: default; }
.zc-btn[disabled]:hover, .zc-btn.is-done:hover { transform: none; }
.zc-btn.is-done.zc-btn-primary { background: var(--z-card-sub); color: var(--z-ink); }
.zc-btn.is-done.zc-btn-secondary { background: var(--z-card-sub); opacity: 0.85; }
.zc-btn.is-done.zc-btn-danger { background: transparent; color: var(--z-sub); }
.zc-btn.is-dim { opacity: 0.45; pointer-events: none; }
.zc-btn.is-busy { pointer-events: none; }

.zc-spin {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
}
.zc-btn.is-busy .zc-spin { display: inline-block; animation: zc-rot 0.7s linear infinite; }

.zc-check { display: none; width: 14px; height: 14px; }
.zc-check.is-in { display: inline-flex; animation: zc-pop 0.3s var(--ease); }
.zc-check svg { width: 14px; height: 14px; }
.zc-check svg path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: zc-check-draw 0.4s var(--ease) 0.05s forwards; }

/* ---------- плитки-счётчики (тесты, расход) ---------- */
.zc-tiles { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.zc-tile { flex: 1 1 96px; background: var(--z-card-sub); border-radius: 12px; padding: 9px 11px; min-width: 0; }
.zc-tile-val { font-size: 18px; font-weight: 650; line-height: 22px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.zc-tile-val.is-ok { color: var(--z-ok); }
.zc-tile-val.is-bad { color: var(--z-bad); }
.zc-tile-nodata { font-size: 12px; color: var(--z-sub); line-height: 22px; }
.zc-tile-lbl { font-size: 11.5px; color: var(--z-sub); margin-top: 2px; }

/* ---------- упавшие тесты ---------- */
.zc-failed { margin-top: 10px; }
.zc-failed-title { font-size: 11.5px; color: var(--z-sub); font-weight: 600; margin-bottom: 4px; }
.zc-failed-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.zc-failed-name { font-family: var(--z-font-code); font-size: 12px; color: var(--z-bad); background: var(--z-bad-bg); border-radius: 8px; padding: 4px 9px; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }

/* ---------- дифф ---------- */
.zc-hunk { margin-top: 10px; background: var(--z-card-sub); border-radius: 10px; overflow: hidden; }
.zc-hunk-meta { font-size: 11px; color: var(--z-faint); padding: 6px 10px 2px; }
.zc-diffrows { overflow-x: auto; padding-bottom: 6px; }
.zc-ln { display: grid; grid-template-columns: 30px 30px 12px auto; width: max-content; min-width: 100%; font-family: var(--z-font-code); font-size: 11.5px; line-height: 18px; }
.zc-ln-num { color: var(--z-faint); text-align: right; padding-right: 6px; user-select: none; font-variant-numeric: tabular-nums; }
.zc-ln-sign { user-select: none; }
.zc-ln-code { white-space: pre; tab-size: 4; padding-right: 12px; }
.zc-ln.ctx .zc-ln-code { color: var(--z-ink); }
.zc-ln.add { background: var(--z-ok-bg); }
.zc-ln.add .zc-ln-sign, .zc-ln.add .zc-ln-code { color: var(--z-ok); }
.zc-ln.rm { background: var(--z-bad-bg); }
.zc-ln.rm .zc-ln-sign, .zc-ln.rm .zc-ln-code { color: var(--z-bad); }

/* ---------- план ---------- */
.zc-steps { display: flex; flex-direction: column; margin-top: 6px; }
.zc-step { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
.zc-step-dot { width: 17px; height: 17px; border-radius: 50%; flex: none; margin-top: 1px; background: var(--z-card-sub2); display: inline-flex; align-items: center; justify-content: center; color: var(--z-sub); }
.zc-step-dot svg { width: 10px; height: 10px; }
.zc-step.is-running .zc-step-dot { background: transparent; }
.zc-step.is-running .zc-step-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--z-coral); animation: zc-pulse 1.6s ease-in-out infinite; }
.zc-step.is-completed .zc-step-dot { background: var(--z-card-sub); }
.zc-step-title { font-size: 13px; color: var(--z-ink); }
.zc-step.is-pending .zc-step-title { color: var(--z-sub); }
.zc-step-sub { font-size: 11.5px; color: var(--z-faint); }

/* ---------- команда, код, лог ---------- */
.zc-cmd { font-family: var(--z-font-code); font-size: 12.5px; background: var(--z-card-sub); border-radius: 10px; padding: 9px 12px; margin-top: 8px; overflow-wrap: anywhere; }
.zc-pre {
  font-family: var(--z-font-code);
  font-size: 11.5px;
  line-height: 17px;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--z-card-sub);
  color: var(--z-ink);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0 0;
}

/* ---------- аккордеон (21) ---------- */
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; }
.t-acc-panel-inner { overflow: hidden; min-height: 0; }
.t-acc-chevron { display: inline-flex; color: var(--z-sub); transition: transform 0.3s var(--ease); }
.t-acc[data-open="true"] .t-acc-chevron { transform: rotate(180deg); }

/* ---------- журнал действий (демо) ---------- */
.zc-logpanel { background: var(--z-side); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow: hidden; }
.zc-log-title { font-size: 13px; font-weight: 650; }
.zc-log-hint { font-size: 12px; color: var(--z-sub); margin: 0; }
.zc-log-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.zc-log-entry {
  background: var(--z-card);
  border-radius: 10px;
  box-shadow: var(--z-shadow-sm);
  font-family: var(--z-font-code);
  font-size: 11px;
  line-height: 16px;
  white-space: pre-wrap;
  word-break: break-all;
  padding: 8px 10px;
  animation: zc-pop 0.3s var(--ease);
}
.zc-log-entry .zc-log-key { color: var(--z-sub); }
.zc-log-empty { color: var(--z-faint); font-size: 12px; }

/* ---------- переходы transitions.dev (free) ---------- */

/* 07 panel-reveal: появление карточки */
.t-panel { opacity: 1; transform: none; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.t-panel[data-open="false"] { opacity: 0; transform: translateY(10px) scale(0.985); }

/* 02 number-pop-in: счётчики влетают */
.t-num { display: inline-block; animation: zc-num-pop 0.4s var(--ease) backwards; }
@keyframes zc-num-pop {
  from { opacity: 0; transform: translateY(5px); }
}

/* 12 error-state-shake: короткая тряска упавших данных */
.t-shake { animation: zc-shake 0.5s var(--ease); }
@keyframes zc-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* 04 text-states-swap: старая подпись уходит вверх, новая влетает снизу */
.t-text-swap { position: relative; display: inline-block; }
.t-text-swap .ts-out { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; animation: ts-out 0.28s var(--ease) forwards; white-space: nowrap; }
.t-text-swap .ts-in { display: inline-flex; align-items: center; animation: ts-in 0.28s var(--ease); white-space: nowrap; }
@keyframes ts-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-7px); } }
@keyframes ts-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

/* 10 success-check: галочка прочерчивается */
@keyframes zc-check-draw { to { stroke-dashoffset: 0; } }

/* вспомогательные */
@keyframes zc-rot { to { transform: rotate(360deg); } }
@keyframes zc-pulse { 50% { opacity: 0.45; } }
@keyframes zc-pop { from { opacity: 0; transform: scale(0.9); } }

/* ---------- prefers-reduced-motion: выключить всё ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .t-panel[data-open="false"] { opacity: 1; transform: none; }
  .zc-chip.is-live .zc-dot, .zc-step.is-running .zc-step-dot::after { animation: none !important; }
  .zc-check svg path { stroke-dashoffset: 0; animation: none !important; }
}

/* ---------- адаптив демо ---------- */
@media (max-width: 1180px) {
  .zc-app { grid-template-columns: 232px minmax(0, 1fr); }
  .zc-logpanel { display: none; }
}
@media (max-width: 820px) {
  .zc-app { grid-template-columns: minmax(0, 1fr); }
  .zc-sidebar { display: none; }
  .zc-topbar { padding: 10px 14px; }
  .zc-feed { padding: 6px 12px 20px; }
  .zc-card { padding: 12px 13px; }
  .zc-tile { flex: 1 1 84px; }
}

.zc-step-time { margin-left: auto; font-size: 12px; color: var(--z-muted, inherit); opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; }

.zc-btn[disabled]:not(.is-done) { opacity: .45; }
.zc-stale-note { margin-top: 10px; }

/* Proposed cards use the scene palette, with standalone-demo fallbacks. */
.zc-card[data-card-type="media_options"],
.zc-card[data-card-type="booking"],
.zc-card[data-card-type="event"] {
  background: var(--raised, var(--z-card));
  color: var(--ink, var(--z-ink));
  box-shadow: var(--shadow, var(--z-shadow));
  overflow-wrap: anywhere;
}
.zc-media-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.zc-media-option { display: flex; flex-direction: column; gap: 10px; padding: 10px; background: var(--panel, var(--z-card-sub)); border-radius: 12px; }
.zc-media-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 12px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--canvas, var(--z-frame)), var(--panel, var(--z-card-sub)), var(--raised, var(--z-card)));
  color: var(--muted, var(--z-sub));
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}
.zc-media-recommended { align-self: flex-start; color: var(--ink, var(--z-ink)); background: var(--raised, var(--z-card)); border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 600; }
.zc-media-headline { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; }
.zc-media-option .zc-actions { margin-top: auto; padding-top: 2px; }
.zc-media-option .zc-btn { width: 100%; padding: 8px 10px; }
.zc-booking-route { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: 20px; font-weight: 600; line-height: 26px; }
.zc-route-arrow { color: var(--muted, var(--z-sub)); }
.zc-event-title { margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 22px; }
.zc-doc-summary { margin: 10px 0 6px; white-space: pre-wrap; }
.zc-doc-ref { overflow-wrap: anywhere; }
.zc-doc-edits { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 12px 0 0; padding: 0; }
.zc-doc-edit { display: flex; flex-direction: column; gap: 4px; }
.zc-doc-before, .zc-doc-after { display: block; padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.zc-doc-before { background: var(--data-bad-bg, var(--z-bad-bg)); color: var(--data-bad, var(--z-bad)); text-decoration: line-through; }
.zc-doc-after { background: var(--data-ok-bg, var(--z-ok-bg)); color: var(--data-ok, var(--z-ok)); text-decoration: none; }
.zc-checklist-items { list-style: none; padding: 0; gap: 6px; }
.zc-checklist-items .zc-step-title { white-space: pre-wrap; overflow-wrap: anywhere; }
.zc-checklist-due { display: block; margin-top: 4px; }
.zc-purchase-amount { font-size: 20px; font-weight: 650; line-height: 26px; font-variant-numeric: tabular-nums; }
.zc-purchase-confirmation { background: var(--panel, var(--z-card-sub)); padding: 10px 12px; border-radius: 10px; margin: 12px 0 0; }
.zc-event-link { color: var(--action, var(--z-pill)); text-underline-offset: 3px; }
:is([data-card-type="doc_change"], [data-card-type="checklist"], [data-card-type="purchase"], [data-card-type="event"]) { overflow-wrap: anywhere; }
.zc-media-placeholder, .zc-media-text { box-sizing: border-box; padding: 12px; background: var(--panel, var(--z-card-sub)); color: var(--ink, var(--z-ink)); text-align: center; overflow-wrap: anywhere; white-space: pre-wrap; }
.zc-media-text { font-size: 20px; font-weight: 600; line-height: 1.35; }
.zc-media-rationale { margin: 4px 0 0; color: var(--muted, var(--z-sub)); white-space: pre-wrap; overflow-wrap: anywhere; }
:is([data-card-type="media_options"], [data-card-type="booking"], [data-card-type="event"]) .zc-meta dt { color: var(--muted, var(--z-sub)); }
:is([data-card-type="media_options"], [data-card-type="booking"], [data-card-type="event"]) .zc-btn { white-space: normal; max-width: 100%; }
:is([data-card-type="media_options"], [data-card-type="booking"], [data-card-type="event"]) .zc-btn-primary { background: var(--action, var(--z-pill)); color: var(--action-ink, var(--z-pill-ink)); }
:is([data-card-type="media_options"], [data-card-type="booking"], [data-card-type="event"]) .zc-btn-secondary { background: var(--panel, var(--z-card-sub)); color: var(--ink, var(--z-ink)); }
:is([data-card-type="media_options"], [data-card-type="booking"], [data-card-type="event"]) .zc-btn-secondary:hover { background: var(--canvas, var(--z-card-sub2)); }
:is([data-card-type="media_options"], [data-card-type="booking"], [data-card-type="event"]) .zc-btn:focus-visible { outline-color: var(--action, var(--z-pill)); }
:is([data-card-type="media_options"], [data-card-type="booking"], [data-card-type="event"]) .zc-btn.is-done { background: var(--panel, var(--z-card-sub)); color: var(--ink, var(--z-ink)); }
@media (max-width: 600px) {
  .zc-media-options { grid-template-columns: minmax(0, 1fr); }
  .zc-media-image { min-height: 100px; }
  .zc-booking-route { font-size: 18px; flex-wrap: wrap; }
}
}