/* Генезис.юа — розділ «Архітектура»: шари, матриця залежностей, покриття, картка модуля.
   Спирається на токени та .glass/.panel/.table з app.css — тут лише те, чого там немає. */

#main .tabs { margin: var(--s-4) 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.muted.sm, .sm { font-size: .82rem; }

/* ---------- вердикт меж шарів */
.verdict { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--hairline-out); background: rgba(29,185,84,.08); }
.verdict.bad { background: var(--bad-bg); }
.verdict .ico { width: 22px; height: 22px; flex: none; color: var(--ok-ink); margin-top: 2px; }
.verdict.bad .ico { color: var(--bad-ink); }
.verdict p { margin: var(--s-1) 0 0; max-width: 78ch; }

/* ---------- смуги шарів */
.layer-list { display: flex; flex-direction: column; gap: var(--s-3); }
.layer-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(80px, 2fr) auto auto; gap: var(--s-3);
  align-items: center; padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline-out); }
.layer-row:last-child { border-bottom: 0; }
.layer-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.layer-name b { font-family: var(--font); }
.layer-name .muted { font-size: .78rem; }
.layer-num { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--ink-2); white-space: nowrap; }
.layer-row .bar > i { background: linear-gradient(90deg, var(--blue), #2F7DE1 60%, var(--gold)); }
.layer-row.l-domain .bar > i { background: linear-gradient(90deg, #1DB954, #7BE2A3); }
.layer-row.l-app .bar > i { background: linear-gradient(90deg, var(--blue), #6FA8FF); }
.layer-row.l-infra .bar > i { background: linear-gradient(90deg, var(--gold-600), var(--gold)); }
.layer-row.l-config .bar > i { background: linear-gradient(90deg, #8A6BFF, #C0B0FF); }

/* ---------- смужка покриття */
.cov { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 110px; }
.cov::before { content: ""; position: absolute; }
.cov > i { display: block; height: 8px; border-radius: 5px; background: var(--ok); box-shadow: inset 0 1px 1px rgba(255,255,255,.4); transition: width 1s var(--ease); }
.cov { position: relative; padding: 3px 0; }
.cov > b { font-family: var(--font); font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cov.ok > i { background: linear-gradient(90deg, #1DB954, #7BE2A3); }
.cov.warn > i { background: linear-gradient(90deg, var(--warn), var(--gold)); }
.cov.bad > i { background: linear-gradient(90deg, var(--bad), #FF9A9E); }

/* ---------- матриця залежностей */
.table.matrix th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--ink-2); }
.table.matrix td.cell-ok { color: var(--blue-600); font-weight: 700; }
.table.matrix td.cell-bad { color: var(--bad-ink); font-weight: 800; background: var(--bad-bg); }
.table.matrix td.dim { color: var(--muted); text-align: right; }

/* ---------- опис коду: шари та пакети */
.layer-panel { border-left: 3px solid var(--hairline-out); }
.layer-panel.l-domain { border-left-color: #1DB954; }
.layer-panel.l-app { border-left-color: var(--blue); }
.layer-panel.l-infra { border-left-color: var(--gold-600); }
.layer-panel.l-config { border-left-color: #8A6BFF; }
.layer-panel.l-tests { border-left-color: var(--neutral); }
.layer-badges { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.layer-descr { color: var(--ink-2); max-width: 90ch; line-height: 1.6; }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); }
.pkg { padding: var(--s-4); border-radius: var(--r-md); background: rgba(255,255,255,.4); border: 1px solid var(--hairline-out);
  display: flex; flex-direction: column; gap: var(--s-2); }
.pkg header { display: flex; flex-direction: column; gap: 2px; }
.pkg header b { font-family: var(--font); color: var(--blue-600); }
.pkg header .muted { font-size: .76rem; }
.pkg p { margin: 0; font-size: .86rem; line-height: 1.5; }
.pkg-files { display: flex; flex-wrap: wrap; gap: 6px; }
.file-chip { font-family: var(--font); font-size: .74rem; font-weight: 600; padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(0,87,183,.08); color: var(--ink-2); word-break: break-all; }
.file-chip.more { background: rgba(255,215,0,.25); color: var(--gold-900); }
.file-chip.ok { background: var(--ok-bg); color: var(--ok-ink); }

/* ---------- знахідки */
.insight { border-left: 3px solid var(--neutral); }
.insight.bad { border-left-color: var(--bad); }
.insight.warn { border-left-color: var(--warn); }
.insight.info { border-left-color: var(--info); }
.insight p { max-width: 92ch; line-height: 1.6; }
.insight .action { color: var(--ink-2); }
.ins-items { display: flex; flex-direction: column; gap: 2px; }
.ins-row { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr) minmax(140px, auto); gap: var(--s-3);
  align-items: baseline; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: .86rem; }
.ins-row:nth-child(odd) { background: rgba(0,87,183,.04); }
.ins-row .muted { text-align: right; white-space: nowrap; }
.ins-row .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }

/* ---------- точки входу */
.entry { border-top: 1px solid var(--hairline-out); padding-top: var(--s-2); }
.entry > summary { cursor: pointer; font-weight: 700; font-family: var(--font); font-size: .9rem; padding: var(--s-2) 0; color: var(--ink-2); }
.entry > summary:hover { color: var(--blue-600); }
.entry-grp { margin: var(--s-2) 0; }
.entry-grp > b { font-family: var(--font); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.entry-row { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; padding: 3px 0; font-size: .84rem; }
.entry-row code { font-size: .8rem; color: var(--ink); background: rgba(0,87,183,.07); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.entry-row .verb { font-weight: 800; color: var(--blue-600); margin-right: 6px; }
.entry-row .muted { flex: 1 1 240px; min-width: 0; }

/* ---------- таблиця модулів */
.mod-filters { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.mod-filters input[type="search"] { flex: 1 1 240px; min-width: 0; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  border: 1px solid var(--hairline-out); background: rgba(255,255,255,.45); color: var(--ink); font: inherit; font-size: .9rem; }
.mod-filters select { padding: var(--s-2) var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--hairline-out);
  background: rgba(255,255,255,.45); color: var(--ink); font: inherit; font-size: .88rem; }
.mod-filters .check { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--ink-2); }
.table.mods td { vertical-align: top; }
.mod-link { font-family: var(--font); font-weight: 700; cursor: pointer; }
.chip-sm.l-domain { background: var(--ok-bg); color: var(--ok-ink); }
.chip-sm.l-app { background: var(--info-bg); color: var(--info-ink); }
.chip-sm.l-infra { background: rgba(255,215,0,.22); color: var(--gold-900); }
.chip-sm.l-config { background: rgba(138,107,255,.18); color: #5B44C0; }
.chip-sm.l-tests { background: var(--neutral-bg); color: var(--neutral-ink); }

/* ---------- картка модуля */
.mod-card-root { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.mod-scrim { position: absolute; inset: 0; background: rgba(11,31,68,.35); backdrop-filter: blur(3px); animation: fade .25s var(--ease) both; }
.mod-card { position: relative; width: min(720px, 100%); height: 100%; overflow-y: auto; border-radius: var(--r-lg) 0 0 var(--r-lg);
  padding: var(--s-5); animation: slide-in .35s var(--ease) both; }
.mod-card-body { display: flex; flex-direction: column; gap: var(--s-4); }
.mod-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.mod-card-head h2 { font-size: 1.25rem; }
.mod-card-head p { margin: var(--s-1) 0 0; font-size: .8rem; word-break: break-all; }
.mod-sect h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 var(--s-2); }
.dep-list { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-3); align-items: baseline; font-size: .84rem; }
.dep-list .mono { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .mod-card, .mod-scrim { animation: none; }
  .cov > i, .layer-row .bar > i { transition: none; }
}

@media (max-width: 1100px) { .two-col { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .layer-row { grid-template-columns: 1fr auto; grid-template-areas: "name num" "bar bar" "cov cov"; }
  .layer-name { grid-area: name; } .layer-num { grid-area: num; } .layer-row .bar { grid-area: bar; } .layer-cov { grid-area: cov; }
  .ins-row { grid-template-columns: 1fr; gap: 2px; }
  .ins-row .muted { text-align: left; }
  .mod-card { border-radius: 0; padding: var(--s-4); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pkg,
  :root:not([data-theme="light"]) .mod-filters input[type="search"],
  :root:not([data-theme="light"]) .mod-filters select { background: rgba(255,255,255,.05); color: var(--ink); }
  :root:not([data-theme="light"]) .verdict { background: rgba(29,185,84,.12); }
  :root:not([data-theme="light"]) .chip-sm.l-config { color: #C0B0FF; }
}
:root[data-theme="dark"] .pkg,
:root[data-theme="dark"] .mod-filters input[type="search"],
:root[data-theme="dark"] .mod-filters select { background: rgba(255,255,255,.05); color: var(--ink); }
:root[data-theme="dark"] .verdict { background: rgba(29,185,84,.12); }
:root[data-theme="dark"] .chip-sm.l-config { color: #C0B0FF; }