/* МТК 40 · добавки к общему каркасу карточки (assets/shared/card/card-frame.css).
 * Перенесены из одобренного макета (making-of/prototypes/mtk40-card-canon,
 * dvn 25.09): связи колонкой справа (model.side) с раскрытием пояснения.
 * Кегли — ступенями каркаса (название 76 · строка под ним 40 · значение 38 ·
 * текст 32–34 · подписи 24) и множатся на --content-scale (--cc-s): режим
 * слабовидящих укрупняет их сам. Красный — только точкой (тип связи «против»). */

/* ── Оверлей: карточка каркаса — сама панель ─────────────────────────────
 * Поверх слоя сцены, между полосами хрома ядра, как сами сцены: иначе высокая
 * карточка уходит под навбар. Строка сетки определённой высоты — иначе
 * max-height: 100% у карточки не от чего считать, и длинная карточка уходит
 * за край вместо своей прокрутки (рецепт 42). Фон — как у 42, но без
 * backdrop-filter: под карточкой у 40 канвы рисуют кадры («Хронология»
 * пересобирает кластеры каждый кадр), размытие 4K на каждом кадре — лишняя
 * нагрузка на GPU стола. */
.m40-detail {
  /* Токены палитры брендбука, которые каркас берёт без запасных значений.
   * Ядро их не объявляет (только --*-rgb), 42 держит их в :root своих
   * styles.css; у 40 они нужны только карточке — здесь, без утечки в сцены. */
  --paper: #F7F9EF;
  --brass: #D2B773;
  --window: #9DA3A8;
  --graphite: #435059;
  position: absolute;
  inset: 0;
  /* Выше призыва к жесту ядра (.kiosk-hint, z-index 40 в том же слое сцены):
   * на 20, как у 42, «↔ тяните полку» ложилась поверх карточки. Слой сцены —
   * свой контекст наложения, хром и финдер ядра снаружи это не задевает. */
  z-index: 45;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--m40-chrome-top, var(--kiosk-safe-top)) var(--edge-safe)
           var(--m40-chrome-bottom, var(--kiosk-safe-bottom));
  box-sizing: border-box;
  background: rgba(8, 12, 14, 0.74);
}
.m40-detail[hidden] { display: none; }
.m40-detail .cc-card { box-shadow: 0 32px 72px rgba(0, 0, 0, 0.55); }
.a11y .m40-detail { background: #000; }
.a11y .m40-detail .cc-card { background: #000; border-color: var(--a11y-accent, #FFD24A); }
.a11y .m40-detail .cc-type { color: var(--a11y-accent, #FFD24A); }

/* ── Колонка связей ────────────────────────────────────────────────────── */
.m40cc-conns__head {
  display: flex;
  align-items: center;
  gap: calc(16px * var(--cc-s));
  padding-bottom: calc(20px * var(--cc-s));
  border-bottom: 1px solid rgba(var(--brass-rgb), 0.25);
}
.m40cc-conns__icon { width: calc(48px * var(--cc-s)); height: calc(48px * var(--cc-s)); }
.m40cc-conns__label {
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-size: calc(26px * var(--cc-s));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--window);
}
.m40cc-conns__n {
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-weight: 600;
  font-size: calc(44px * var(--cc-s));
  line-height: 1;
  color: var(--paper);
}
/* список = .cc-side__scroll каркаса: прокрутка и min-height — там */
.m40cc-conns__list {
  /* ширина колонки типа — по самой длинной подписи языка (fit в shared.js) */
  --m40cc-type-w: calc(210px * var(--cc-s));
  --m40cc-dir-w: calc(30px * var(--cc-s));
  --m40cc-col-gap: calc(18px * var(--cc-s));
  list-style: none;
  margin: 0;
  padding: 0 calc(12px * var(--cc-s)) 0 0;
}
.m40cc-conn { border-bottom: 1px solid rgba(var(--paper-rgb), 0.08); }

/* Строка связи — кнопка во всю ширину, не ниже тач-минимума. */
.m40cc-conn__btn {
  display: grid;
  grid-template-columns: var(--m40cc-type-w) var(--m40cc-dir-w) minmax(0, 1fr) auto;
  column-gap: var(--m40cc-col-gap);
  align-items: baseline;
  width: 100%;
  min-height: var(--touch-min, 64px);
  padding: calc(18px * var(--cc-s)) 0;
  margin: 0;
  box-sizing: border-box;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.m40cc-conn__type {
  display: flex;
  align-items: center;
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-size: calc(24px * var(--cc-s));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--window);
  white-space: nowrap;
}
.m40cc-conn__type .cc-marker {
  width: calc(18px * var(--cc-s));
  height: calc(18px * var(--cc-s));
  margin-right: calc(12px * var(--cc-s));
}
.m40cc-conn__dir {
  font-family: "20 Kopeek", monospace;
  font-size: calc(30px * var(--cc-s));
  color: var(--brass);
}
.m40cc-conn__body { display: flex; flex-direction: column; gap: calc(4px * var(--cc-s)); }
.m40cc-conn__title {
  font-family: "21 Cent", "Noto Sans SC", Georgia, serif;
  font-size: calc(32px * var(--cc-s));
  line-height: 1.3;
  color: var(--paper);
}
.m40cc-conn__meta {
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-size: calc(24px * var(--cc-s));
  color: rgba(var(--paper-rgb), 0.62);
}
.m40cc-conn__pm {
  align-self: center;
  width: calc(44px * var(--cc-s));
  text-align: center;
  font-family: "20 Kopeek", monospace;
  font-size: calc(40px * var(--cc-s));
  line-height: 1;
  color: var(--brass);
}
.m40cc-conn__pm::before { content: "+"; }
.m40cc-conn__btn[aria-expanded="true"] .m40cc-conn__pm::before { content: "−"; }
.m40cc-conn__btn[aria-expanded="true"] .m40cc-conn__title { color: var(--brass); }
/* строка без пояснения (оно дословно повторяло описание) — не гармошка */
.m40cc-conn__btn.is-plain { cursor: default; }
.m40cc-conn__btn.is-plain .m40cc-conn__pm::before { content: none; }

/* Пояснение связи — под строкой, с латунной чертой слева, по отступу названия. */
.m40cc-conn__note {
  margin: 0 0 calc(22px * var(--cc-s))
    calc(var(--m40cc-type-w) + var(--m40cc-dir-w) + 2 * var(--m40cc-col-gap));
  padding: calc(14px * var(--cc-s)) calc(20px * var(--cc-s));
  border-left: 3px solid rgba(var(--brass-rgb), 0.7);
  background: rgba(var(--brass-rgb), 0.06);
  font-family: "21 Cent", "Noto Sans SC", Georgia, serif;
  font-size: calc(30px * var(--cc-s));
  line-height: 1.45;
  color: rgba(var(--paper-rgb), 0.9);
}
.m40cc-conn__note[hidden] { display: none; }