/* System Catalog — ITPU visual system.
 * Токены: _ds/.../tokens/*.css. Квадратные углы, hairline-рамки, teal-заголовки.
 */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body, #5B5B5B);
  background: var(--surface-page, #FEFEFE);
  display: flex;
  flex-direction: column;
}
a { color: var(--text-link, #008ACF); text-decoration: none; }
a:hover { color: var(--text-link-hover, #39C2D7); }
h1, h2, h3, h4 { margin: 0; color: var(--text-heading, #464547); font-weight: 600; }
p { margin: 0; }

.eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted, #9D9E9E); margin: 0;
}

/* ── header ─────────────────────────────────────────────── */
.hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 28px 16px; border-bottom: 1px solid var(--border-default, #D9DADA);
}
.hdr__brand { display: flex; align-items: center; gap: 16px; }
.badge {
  width: 44px; height: 44px; border-radius: 50%; background: var(--itpu-sharp-blue, #39C2D7);
  color: #FEFEFE; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: lowercase;
}
.hdr__title {
  font-size: 20px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--itpu-sharp-blue, #39C2D7);
}
.hdr__sub { font-size: 12px; color: var(--text-muted, #9D9E9E); }
.hdr__right { display: flex; align-items: center; gap: 16px; }
.pathtag {
  font-size: 11px; letter-spacing: .08em; color: var(--text-muted, #9D9E9E);
}
.pathtag::before { content: '▢ '; color: var(--itpu-sharp-blue, #39C2D7); }

.btn {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--itpu-sharp-blue, #39C2D7);
  background: var(--itpu-sharp-blue, #39C2D7); color: #FEFEFE;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn:hover { background: var(--itpu-bright-blue, #008ACF); border-color: var(--itpu-bright-blue, #008ACF); }
.btn:active { opacity: .9; }
.btn--ghost { background: transparent; color: var(--itpu-dark-gray, #464547); border-color: var(--border-default, #D9DADA); }
.btn--ghost:hover { color: var(--itpu-bright-blue, #008ACF); border-color: var(--itpu-bright-blue, #008ACF); background: transparent; }
.btn[aria-busy='true'] { opacity: .55; pointer-events: none; }

/* ── tabs ───────────────────────────────────────────────── */
.tabs {
  display: flex; align-items: stretch; gap: 0; padding: 0 28px;
  border-bottom: 1px solid var(--border-default, #D9DADA); background: var(--surface-tint, #F7F8F8);
}
.tab {
  padding: 13px 20px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--itpu-gray-500, #898989); border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--itpu-bright-blue, #008ACF); }
.tab.is-on { color: var(--itpu-dark-gray, #464547); border-bottom-color: var(--itpu-sharp-blue, #39C2D7); background: #FEFEFE; }
.tabs__meta { margin-left: auto; align-self: center; font-size: 11px; color: var(--text-muted, #9D9E9E); letter-spacing: .04em; }

.alert {
  margin: 0; padding: 12px 28px; font-size: 12px;
  background: var(--itpu-coral-100, #F5DDD8); color: #8E3324;
  border-bottom: 1px solid var(--itpu-coral-300, #E49687);
}

main { flex: 1; min-height: 0; display: flex; }
.pane { flex: 1; min-height: 0; display: flex; }
.pane[hidden] { display: none; }

/* ── filters rail ───────────────────────────────────────── */
.filters {
  width: 232px; flex: none; padding: 22px 20px 40px; overflow: auto;
  border-right: 1px solid var(--border-subtle, #EBECEC); background: var(--surface-tint, #F7F8F8);
  display: flex; flex-direction: column; gap: 24px;
}
.filters__group { display: flex; flex-direction: column; gap: 10px; }
.filters__group > .eyebrow { padding-top: 8px; border-top: 1px solid var(--border-default, #D9DADA); }
.checks { display: flex; flex-direction: column; gap: 7px; }
.chk { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--itpu-dark-gray, #464547); cursor: pointer; }
.chk input { accent-color: var(--itpu-sharp-blue, #39C2D7); width: 14px; height: 14px; margin: 0; }
.chk .swatch { width: 10px; height: 10px; flex: none; }
.chk .count { margin-left: auto; font-size: 11px; color: var(--text-muted, #9D9E9E); }
.input {
  font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 2px;
  border: 1px solid var(--border-default, #D9DADA); background: #FEFEFE; color: var(--itpu-dark-gray, #464547);
}
.input:focus { outline: 2px solid var(--itpu-sharp-blue, #39C2D7); outline-offset: -1px; border-color: var(--itpu-sharp-blue, #39C2D7); }
.seg { display: flex; border: 1px solid var(--border-default, #D9DADA); }
.seg button {
  flex: 1; font: inherit; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 4px; background: #FEFEFE; color: var(--itpu-gray-500, #898989); border: 0; cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--border-default, #D9DADA); }
.seg button.is-on { background: var(--itpu-sharp-blue, #39C2D7); color: #FEFEFE; }
.filters__legendnote { font-size: 11px; color: var(--text-muted, #9D9E9E); }

/* ── catalog ────────────────────────────────────────────── */
.catalog { flex: 1; min-height: 0; display: flex; }
.catalog__body { flex: 1; min-height: 0; overflow: auto; padding: 26px 32px 64px; }
.grouphead {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px;
  padding-top: 10px; border-top: 1px solid var(--border-default, #D9DADA);
}
.grouphead h2 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.grouphead .eyebrow { margin-left: auto; }
.group + .group { margin-top: 34px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.ncard {
  display: block; padding: 15px 16px 16px; background: #FEFEFE;
  border: 1px solid var(--border-subtle, #EBECEC); border-radius: 2px;
  color: inherit; transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ncard:hover { border-color: var(--itpu-sharp-blue, #39C2D7); box-shadow: 0 2px 10px rgba(38, 56, 82, .07); color: inherit; }
.ncard__top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.ncard__dot { width: 9px; height: 9px; flex: none; }
.ncard__cat { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted, #9D9E9E); }
.ncard__name { font-size: 14.5px; font-weight: 600; color: var(--itpu-dark-gray, #464547); }
.ncard__id { font-size: 11px; color: var(--text-muted, #9D9E9E); margin-top: 2px; }
.ncard__meta { display: flex; gap: 10px; margin-top: 11px; font-size: 11px; color: var(--itpu-gray-500, #898989); }
.tagx {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid var(--border-default, #D9DADA); color: var(--itpu-gray-700, #5B5B5B);
}
.tagx--brand { background: var(--itpu-blue-050, #E4F4F8); border-color: var(--itpu-blue-200, #A9DCEA); color: #1F6E80; }

/* node page */
.nodepage { max-width: 980px; }
.backlink { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.nodepage__head { margin: 14px 0 24px; padding-top: 12px; border-top: 1px solid var(--border-default, #D9DADA); }
.nodepage__head h2 { font-size: 30px; letter-spacing: .02em; color: var(--itpu-sharp-blue, #39C2D7); }
.nodepage__head .sub { font-size: 12px; color: var(--text-muted, #9D9E9E); margin-top: 4px; }
.nodepage__cols { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 34px; align-items: start; }
.meta { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px 14px; font-size: 13px; margin-bottom: 26px; }
.meta dt { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted, #9D9E9E); padding-top: 3px; }
.meta dd { margin: 0; color: var(--itpu-dark-gray, #464547); }
.md { font-size: 14px; color: var(--text-body, #5B5B5B); text-wrap: pretty; }
.md h2 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; margin: 26px 0 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle, #EBECEC); }
.md h3 { font-size: 13.5px; margin: 20px 0 8px; }
.md p { margin: 0 0 11px; }
.md ul, .md ol { margin: 0 0 12px; padding-left: 20px; }
.md li { margin-bottom: 5px; }
.md code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: var(--surface-tint, #F7F8F8); padding: 1px 5px; border: 1px solid var(--border-subtle, #EBECEC); }
.md pre { background: var(--surface-tint, #F7F8F8); border: 1px solid var(--border-subtle, #EBECEC); padding: 12px 14px; overflow: auto; }
.md pre code { border: 0; background: none; padding: 0; }
.md table { border-collapse: collapse; font-size: 13px; margin: 0 0 14px; }
.md th, .md td { border: 1px solid var(--border-subtle, #EBECEC); padding: 6px 10px; text-align: left; }
.side { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 20px; }
.side__box { border: 1px solid var(--border-subtle, #EBECEC); padding: 14px 15px 16px; }
.side__box .eyebrow { margin-bottom: 10px; }
.rel { display: flex; flex-direction: column; gap: 8px; }
.rel__item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rel__item .ncard__dot { width: 8px; height: 8px; }
.rel__kind { margin-left: auto; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #9D9E9E); }
.empty { font-size: 13px; color: var(--text-muted, #9D9E9E); padding: 30px 0; }

/* ── graph ──────────────────────────────────────────────── */
.graphwrap { flex: 1; min-height: 0; display: flex; }
.graphstage { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; }
.graphstage__bar {
  display: flex; align-items: center; gap: 16px; padding: 12px 20px;
  border-bottom: 1px solid var(--border-subtle, #EBECEC);
}
.graphstage__actions { margin-left: auto; display: flex; gap: 8px; }
.localbadge {
  font-size: 12px; font-weight: 600; color: var(--itpu-bright-blue, #008ACF);
  background: rgba(0, 138, 207, .1); border-radius: 4px; padding: 4px 10px;
}
.cy { flex: 1; min-height: 0; background: #FEFEFE; }
.inspector {
  position: absolute; right: 18px; top: 66px; width: 288px;
  background: #FEFEFE; border: 1px solid var(--border-default, #D9DADA);
  box-shadow: 0 6px 26px rgba(38, 56, 82, .12); padding: 16px 17px 18px;
}
.inspector__x {
  position: absolute; right: 8px; top: 6px; border: 0; background: none; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--itpu-gray-400, #9D9E9E);
}
.inspector__x:hover { color: var(--itpu-dark-gray, #464547); }
.inspector h3 { font-size: 15px; margin: 6px 0 3px; }
.inspector .sub { font-size: 11px; color: var(--text-muted, #9D9E9E); }
.inspector p.desc { font-size: 12.5px; margin: 12px 0 14px; color: var(--text-body, #5B5B5B); }
.inspector .row { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; }
.legend { display: flex; flex-direction: column; gap: 7px; }
.legend__row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--itpu-dark-gray, #464547); }
.legend__line { width: 22px; height: 0; border-top: 2px solid; flex: none; }

@media (max-width: 1080px) {
  .nodepage__cols { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
}