/* Systemlandschaft (#206). Prefix sl-. The window's full width (#207): register tables, tool cards;
   ids in mono as the shared key. Nothing scrolls sideways — cells wrap, and on a phone each table
   row stacks into a card. Square and flat like the rest of the app. */

.sl-page { font-family: var(--font-sans); margin: 0; padding: 0 clamp(16px, 3vw, 48px) 48px; color: var(--fill-primary); min-width: 0; }
.sl-header { border-bottom: var(--underline-bar) solid var(--bm-main); padding-bottom: 1rem; display: grid; gap: .5rem; }
.sl-kicker { margin: 0; font-family: ui-monospace, monospace; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bm-main); font-weight: 700; }
.sl-header h1 { margin: 0; font-size: 1.75rem; font-weight: 600; color: var(--bm-main); letter-spacing: .02em; }
.sl-lede { margin: 0; max-width: 70ch; font-size: .9375rem; }
.sl-meta { margin: 0; color: var(--grey-600); font-size: .8125rem; }
.sl-meta b { color: var(--fill-primary); font-weight: 600; }

.sl-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.sl-tabs .sl-tab { font-size: .875rem; font-weight: 500; color: var(--bm-main); text-decoration: none; border: 1px solid var(--bm-main); border-radius: var(--radius-none); padding: .3rem .9rem; }
.sl-tabs .sl-tab:hover { background: var(--grey-100); }
.sl-tabs .sl-tab[aria-current="page"] { background: var(--bm-main); color: var(--white); }

.sl-section { margin-top: 2.25rem; }
.sl-section h2 { display: flex; gap: .6rem; align-items: baseline; margin: 0 0 .3rem; font-size: 1.25rem; font-weight: 600; color: var(--bm-main); }
.sl-sec { font-family: ui-monospace, monospace; font-size: .8125rem; font-weight: 700; color: var(--grey-600); }
.sl-section h3 { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; margin: 1.4rem 0 .4rem; font-size: 1rem; font-weight: 600; }
.sl-grp { font-family: ui-monospace, monospace; font-size: .75rem; color: var(--grey-600); font-weight: 500; }
.sl-sub { margin: 0 0 .75rem; color: var(--grey-600); font-size: .875rem; max-width: 78ch; }
.sl-note { border: 1px solid var(--rule); border-left: var(--underline-bar) solid var(--bm-main); padding: .6rem .9rem; font-size: .875rem; margin: .5rem 0 1rem; max-width: 86ch; background: var(--white); }

.sl-filter { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .6rem 0 .4rem; }
.sl-filter__label { font-size: .8125rem; color: var(--grey-600); margin-right: .25rem; }
.sl-filter .sl-filter__button { font-size: .8125rem; font-weight: 500; color: var(--fill-primary); text-decoration: none; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-none); padding: .2rem .65rem; }
.sl-filter .sl-filter__button:hover { border-color: var(--bm-main); }
.sl-filter .sl-filter__button[aria-pressed="true"] { background: var(--bm-main); border-color: var(--bm-main); color: var(--white); }
.sl-filter__hint { font-size: .8125rem; color: var(--grey-600); margin-left: .35rem; }

.sl-table { background: var(--white); border: 1px solid var(--rule); }
.sl-table table { width: 100%; border-collapse: collapse; font-size: .84375rem; }
.sl-table th, .sl-table td { text-align: left; padding: .45rem .65rem; border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.sl-table thead th { background: var(--grey-100); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.sl-table tbody tr:last-child td { border-bottom: 0; }
.sl-table .sl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-table .sl-old { color: var(--grey-600); }
.sl-table .sl-id { font-family: ui-monospace, monospace; font-weight: 700; color: var(--bm-main); white-space: nowrap; font-size: .78125rem; }
.sl-table .sl-name { font-weight: 600; }
.sl-table .sl-name small { display: block; font-weight: 400; color: var(--grey-600); font-size: .75rem; }
.sl-table .sl-sys { color: var(--grey-600); font-size: .78125rem; }
.sl-table .sl-used { width: 26%; }
.sl-table tr.sl-dim td { opacity: .3; }
.sl-table tr.sl-hit td.sl-id { background: var(--grey-100); }
.sl-page code { font-family: ui-monospace, monospace; font-size: .86em; background: var(--grey-100); padding: 0 .25rem; }

.sl-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.sl-chip { font-family: ui-monospace, monospace; font-size: .6875rem; font-weight: 700; padding: .05rem .4rem; border: 1px solid transparent; white-space: nowrap; }
.sl-chip--read { color: var(--status-ok); background: color-mix(in srgb, var(--status-ok) 10%, var(--white)); }
.sl-chip--write { color: var(--status-error); background: color-mix(in srgb, var(--status-error) 10%, var(--white)); }
.sl-chip--none { color: var(--grey-600); border-color: var(--rule); }
.sl-flag { display: inline-block; font-family: ui-monospace, monospace; font-size: .65625rem; font-weight: 700; padding: 0 .4rem; margin-left: .35rem; vertical-align: 1px; }
.sl-flag--personal { color: var(--status-error); background: color-mix(in srgb, var(--status-error) 10%, var(--white)); }
.sl-flag--internal { color: var(--status-warn); background: color-mix(in srgb, var(--status-warn) 10%, var(--white)); }

.sl-tcards, .sl-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: .9rem; }
.sl-tcard, .sl-tool { background: var(--white); border: 1px solid var(--rule); border-top: var(--underline-bar) solid var(--bm-main); padding: .9rem 1rem; display: grid; gap: .5rem; align-content: start; min-width: 0; }
.sl-tcard header, .sl-tool header { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.sl-tcard h4, .sl-tool h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.sl-count, .sl-app { font-family: ui-monospace, monospace; font-size: .71875rem; color: var(--grey-600); white-space: nowrap; }
.sl-role { margin: 0; color: var(--grey-600); font-size: .8125rem; }
.sl-via { margin: 0; font-size: .84375rem; }
.sl-tcard dl { margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: .35rem .75rem; align-items: baseline; }
.sl-tcard dt { font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-600); font-weight: 700; }
.sl-tcard dt.sl-dt--write { color: var(--status-error); }
.sl-tcard dd { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }
.sl-src { display: inline-flex; gap: .3rem; align-items: baseline; font-size: .78125rem; padding: .1rem .45rem; background: color-mix(in srgb, var(--status-ok) 10%, var(--white)); }
.sl-src b { font-family: ui-monospace, monospace; font-size: .6875rem; color: var(--status-ok); }
.sl-src--write { background: color-mix(in srgb, var(--status-error) 10%, var(--white)); }
.sl-src--write b { color: var(--status-error); }
.sl-src--none { background: transparent; border: 1px solid var(--rule); color: var(--grey-600); }
@media (max-width: 520px) { .sl-tcard dl { grid-template-columns: 1fr; } }

.sl-tool__how { margin: 0; padding-left: 1.1rem; font-size: .84375rem; display: grid; gap: .2rem; }
.sl-tool__safe { margin: 0; font-size: .8125rem; }
.sl-tool__sources { display: flex; flex-wrap: wrap; gap: .25rem; align-items: baseline; font-size: .8125rem; }
.sl-tool__sources > b { font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-600); margin-right: .2rem; }
.sl-tool__sources > b.sl-tool__writes { color: var(--status-error); margin-left: .4rem; }
.sl-src__id { font-family: ui-monospace, monospace; font-size: .65625rem; font-weight: 700; color: var(--status-ok); }
.sl-src--write .sl-src__id { color: var(--status-error); }
.sl-tool__models > b { font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-600); }
.sl-tool__models ul { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .8125rem; }
.sl-tool__models li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: .5rem; align-items: baseline; }
.sl-tool__model-role { color: var(--grey-600); }
.sl-tool__models code, .sl-table code { overflow-wrap: anywhere; }
.sl-model__runs { font-size: .75rem; color: var(--grey-600); white-space: nowrap; }
@media (max-width: 520px) { .sl-tool__models li { grid-template-columns: 1fr; gap: 0; margin-bottom: .3rem; } .sl-model__runs { white-space: normal; } }
.sl-platform__title { margin-top: 2rem; }
.sl-platform { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .75rem; }
.sl-platform__item { border: 1px solid var(--rule); background: var(--white); padding: .75rem .9rem; display: grid; gap: .3rem; align-content: start; }
.sl-platform__item h4 { margin: 0; font-size: .9375rem; font-weight: 600; }
.sl-platform__item p { margin: 0; font-size: .8125rem; }

.sl-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-width: 900px; }
.sl-rank li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .75rem; background: var(--white); border: 1px solid var(--rule); padding: .6rem .9rem; align-items: baseline; font-size: .875rem; }
.sl-rank__n { font-size: 1.125rem; font-weight: 700; color: var(--bm-main); }
.sl-rank__ids { font-family: ui-monospace, monospace; font-size: .75rem; color: var(--grey-600); margin-left: .35rem; }

.sl-method { font-size: .84375rem; max-width: 86ch; margin: 0; }
.sl-method dt { font-weight: 700; margin-top: .6rem; }
.sl-method dd { margin: .1rem 0 0; }
.sl-footer { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: .8rem; color: var(--grey-600); font-size: .78125rem; }

/* A phone: every table row becomes a card, each cell under its column's name (data-label). */
@media (max-width: 760px) {
  .sl-table { border: 0; background: transparent; }
  .sl-table table, .sl-table tbody, .sl-table tr, .sl-table td { display: block; width: auto; }
  .sl-table thead { display: none; }
  .sl-table tr { background: var(--white); border: 1px solid var(--rule); margin-bottom: .5rem; }
  .sl-table td { border-bottom: 0; padding: .2rem .65rem; }
  .sl-table td.sl-num { text-align: left; }
  .sl-table td[data-label]::before { content: attr(data-label); display: block; font-size: .65625rem; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-600); font-weight: 700; }
  .sl-table .sl-used { width: auto; }
}