/* deepJ · ЛИНИЯ C — composition.css (15.09). Единая система семейств представлений:
   один шрифт,одни края и интервалы,тихие поверхности — контрастные данные.
   Семейство различимо СТРУКТУРОЙ без чтения заголовка (список / даты / превью /
   полосы структуры / показатель с единицей). Референс download.png прочитан на
   уровне КОМПОЗИЦИИ: общий заголовочный пояс у всех карточек,плотность различает
   семейство,размеры ≈3:2:1 — это дело раскладки (линия A),здесь — лица.
   Честность: нейтральные знаки glyphs.mjs вместо брендов приложений (проект ≠
   Фитнес); даты из текста ≠ события календаря; полосы = объём абзацев,не аудио;
   метрики — вторичная текстовая мета внизу лица. */

/* ── Лицо семейства: тихая поверхность ──────────────────────────────────── */
.fam-face{
  font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  display:flex;flex-direction:column;
  min-width:0;
  padding:16px 18px 12px;
  border-radius:var(--r-surface);
  background:linear-gradient(160deg,#ffffff,#fbfcfd);
  box-shadow:0 2px 4px #24375807,0 14px 30px #233f6512,inset 0 0 0 1px #435a7810;
  color:var(--ink);text-align:left;
}/* canon1 [materials]: content faces never carry glass — even floating ones get the
   light standard underlay (translucent white,no blur); glass stays with controls. */
.fam-face--glass{
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 6px 24px rgba(20,32,56,.1);
}/* ── Заголовочный пояс: один для ВСЕХ семейств (референс: «единый поясок») ── */
.fam-head{
  display:flex;align-items:center;gap:8px;
  padding-bottom:9px;margin-bottom:11px;
  border-bottom:1px solid var(--sep);
}.fam-sign{display:inline-flex;color:var(--ink-2)}.fam-sign svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.fam-name{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink-3);font-weight:600}.fam-title{font-size:20px;font-weight:600;letter-spacing:var(--tr-20);line-height:1.25;margin:0 0 10px;color:var(--ink)}/* ── Секции: единый ритм интервалов ─────────────────────────────────────── */
.fam-sec{margin:0 0 11px}.fam-sec-title{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink-3);font-weight:600;margin-bottom:6px}/* связи по типам: цвет ребра — единственный цветной элемент лица */
.fam-link-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid #eef1f5;font-size:12px;color:var(--ink-2)}.fam-link-row:last-child{border-bottom:0}.fam-dot{width:8px;height:8px;border-radius:50%;flex:none}.fam-link-row span{flex:1;min-width:0}.fam-link-row b{font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink)}/* хронология: рельс дат,выровненный по табличным цифрам */
.fam-date-row{display:flex;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px solid #eef1f5;font-size:12px}.fam-date-row:last-child{border-bottom:0}.fam-date-row b{font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink);flex:none;min-width:52px}.fam-date-row span{flex:1;min-width:0;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/* полосы структуры текста: объём абзацев (НЕ аудиоволна — подпись в секции) */
.fam-bar-row{display:flex;align-items:flex-end;gap:3px;height:54px;padding:2px 0 0}.fam-bar{flex:1;min-width:3px;border-radius:2.5px 2.5px 1px 1px;background:#3c4a5cd9}/* факты: вторичные строки «ключ — табличное число» */
.fam-fact-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:4.5px 0;border-bottom:1px solid #eef1f5;font-size:11px;color:var(--ink-3)}.fam-fact-row:last-child{border-bottom:0}.fam-fact-row b{font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink)}/* превью документа/заметки: сам текст — носитель различимости */
.fam-preview p{font-size:12px;line-height:1.55;color:var(--ink-2);margin:0 0 7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.fam-quote{font-size:12px;line-height:1.5;color:var(--ink-2);margin:0 0 10px;padding-left:10px;border-left:2px solid var(--sep)}/* показатель: число + единица + смысл — все три обязательны */
.fam-stat{display:flex;flex-direction:column;gap:2px;margin:2px 0 10px}.fam-stat b{font-size:28px;font-weight:700;letter-spacing:var(--tr-26);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;font-family:ui-rounded,-apple-system,BlinkMacSystemFont,system-ui,sans-serif}.fam-stat small{font-size:11px;color:var(--ink-3);margin-left:2px}.fam-stat span{font-size:11px;color:var(--ink-3)}/* вторичная мета объёма: последняя строка лица,тихая */
.fam-meta{margin-top:auto;padding-top:8px;border-top:1px solid var(--sep);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}/* честное отсутствие: без выдуманных секций */
.cmp-page{
  font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  min-height:100vh;margin:0;padding:40px 36px 64px;background:var(--surface-2);color:var(--ink);
.cmp-tile{width:330px;max-width:100%;height:auto;overflow:visible;padding:20px 22px;border-radius:var(--r-surface);
  background:linear-gradient(145deg,#fff,#f9fafcee);box-shadow:0 2px 4px #24375807,0 18px 35px #233f6514,inset 0 0 0 1px #435a7810}
@media (max-width:760px){.cmp-page{padding:28px 18px 48px}.cmp-cols{grid-template-columns:1fr}}/* finish3 (§7.1): строка основания связи — тихая,под строкой связи */
.reader-link-wrap{display:block;margin:0 0 2px}.reader-link-wrap .reader-link{display:flex}.link-why{display:block;padding:2px 12px 8px 26px;color:var(--mut,var(--ink-2));font-size:12px;line-height:1.45;letter-spacing:var(--tr-12)}.link-why::before{content:'— ';opacity:.6}/* finish8 (§12.1.3): бегущий импульс по новой нити — только на реальном событии,один вдох 1.8с,гаснет сам; reduced-motion — класс не вешается */
.strand-impulse{
 animation:strandRun 1.8s ease-out forwards;
}@keyframes strandRun{
 0%{stroke-opacity:1;stroke-width:5}
 30%{stroke-opacity:.95}
 100%{stroke-opacity:.55}
}
@media (prefers-reduced-motion: reduce){.strand-impulse{animation:none}}/* finish5 (§9.2): семантические метрики-строки вместо колец; документ-фрагмент расшифровки */
.aw-metric-rows{display:flex;flex-direction:column;gap:4px;margin:6px 0 2px}.aw-metric-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px}.aw-metric-row b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:var(--tr-17)}.aw-metric-row small{color:var(--mut,var(--ink-2));font-size:12px}.aw-idea-clip{margin:8px 2px 2px;font-size:13px;line-height:1.5;color:var(--ink,var(--ink));opacity:.85;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.aw-doc-meta{display:block;color:var(--mut,var(--ink-2));font-size:11px;margin:4px 0 6px}.aw-doc-frag{font-size:13px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.aw-link-types{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.aw-link-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:rgba(120,120,128,.1);font-size:11px}/* finish7 (§11.4): режим переноса — призрак,подсветка цели,метка источника */
.reader-move{position:absolute;top:14px;right:56px;width:34px;height:34px;border-radius:var(--r-field);border:none;background:rgba(120,120,128,.14);color:inherit;display:grid;place-items:center;cursor:pointer}.reader-move:hover{background:rgba(120,120,128,.24)}.tile.ink-moving{outline:2px dashed rgba(0,113,227,.55);outline-offset:3px;border-radius:inherit}.tile.move-target{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:inherit}/* evidence6: content stays opaque; feedback uses the control surface. */
.reader-links h3{color:var(--ink)} /* 1scale: кегль/регистр — единый источник style.css */.reader-links .reader-link-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;margin:0 0 12px;padding:8px 0 12px;border-bottom:1px solid rgba(60,60,67,.12)}.reader-link-wrap .reader-link{min-height:44px;grid-column:1;grid-row:1;padding:8px 0;align-items:center;gap:8px;color:var(--ink)}.reader-link-wrap .reader-link span:not(.sf-icon){white-space:normal;line-height:1.35}.reader-link-wrap .reader-link small{letter-spacing:0;text-transform:none;color:var(--ink-2);font-size:12px}.reader-link-wrap .link-remove{grid-column:2;grid-row:1;width:44px;min-height:44px;align-self:start;color:var(--ink-2)}.relation-evidence{grid-column:1/-1;padding:0 0 0 16px;font-size:13px;line-height:1.5;color:#3a3a3c}.relation-origin{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#48484a}.relation-origin .apple-symbol{width:14px;height:14px;flex:none}.reader-body .relation-evidence p{margin:6px 0}.relation-file{display:block;font-size:11px;color:var(--ink-2);overflow-wrap:anywhere}.relation-evidence summary{display:flex;align-items:center;min-height:44px;cursor:pointer;color:var(--accent);font-size:13px;list-style:none}.relation-evidence summary::before{content:'›';display:inline-block;margin-right:8px;transform:rotate(0);transition:transform 160ms ease-out cubic-bezier(.2,1,.3,1)}.relation-evidence details[open] summary::before{transform:rotate(90deg)}.relation-evidence blockquote{margin:0 0 8px;padding-left:12px;border-left:2px solid #d1d1d6;color:#3a3a3c}.relation-feedback{position:fixed;z-index:45;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);padding:8px 12px 8px 16px;border-radius:var(--r-surface);background:rgba(250,250,252,.96);box-shadow:0 6px 32px rgba(0,0,0,.13),inset 0 0 0 1px rgba(0,0,0,.06);font-size:13px;color:var(--ink);animation:relation-feedback-in 180ms ease-out}.relation-feedback>.apple-symbol{width:20px;height:20px;flex:none;color:var(--ink-2)}.relation-feedback [role=status]{max-width:380px;line-height:1.4}.relation-feedback button{min-width:44px;min-height:44px;border-radius:var(--r-field);padding:8px;font:inherit;flex:none}.relation-undo{color:var(--accent);font-weight:600}.relation-feedback button:disabled{color:var(--ink-3);cursor:default}.relation-feedback-close .apple-symbol{width:14px;height:14px;margin:auto}.relation-feedback[hidden],.relation-feedback button[hidden]{display:none}.relation-feedback button:active:not(:disabled){background:var(--sep)}.relation-feedback button:focus-visible,.reader-links button:focus-visible,.relation-evidence summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@keyframes relation-feedback-in{from{opacity:0;transform:translate(-50%,5px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:650px){.relation-feedback{gap:6px;padding:8px 8px 8px 12px}.relation-feedback>.apple-symbol{display:none}.relation-feedback [role=status]{font-size:12px}.reader-link-wrap .reader-link{flex-wrap:wrap}.reader-link-wrap .reader-link small{flex-basis:calc(100% - 24px)}.reader-link-wrap .reader-link span:not(.sf-icon){flex-basis:80%;padding-left:16px}}
@media(prefers-reduced-motion:reduce){.relation-feedback{animation:none}.relation-evidence summary::before{transition:none cubic-bezier(.2,1,.3,1)}}
@media(prefers-contrast:more){.relation-file,.relation-origin{color:var(--ink)}.relation-feedback{background:#fff;outline:1px solid var(--ink-2)}.reader-links .reader-link-wrap{border-color:var(--ink-2)}}.reader-undo{min-height:44px;padding:8px 12px;margin:0 0 8px;border-radius:var(--r-field);font-size:13px;color:var(--accent);background:var(--chip)}.reader-undo:disabled{color:var(--ink-3);cursor:default}/* The info action shares the counter row; navigation keeps four clear targets. */
.surface-pages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 6px;align-items:center}.surface-pages>small{grid-column:1/4;grid-row:1;white-space:nowrap;line-height:1.4}.surface-pages .surface-info{grid-column:4;grid-row:1;justify-self:end}.surface-pages .corpus-action{min-width:44px;padding-inline:8px}/* Reading needs an opaque paper surface above the moving CSS3D scene. */
.reader-panel{background:#fbfbfd}