/* ==========================================================================
   ATLAS DESIGN LANGUAGE — Tool Link
   Implements "Atlas Design Language, Rev 01 / 2026".

   Rules that are not negotiable, encoded here:
     · Radius 0 everywhere. Depth comes from value steps and 1px rules, never blur.
     · Spacing steps 8/16/24/32/56/96. Nothing between.
     · Coolant is a SIGNAL, not decoration. If two things are blue, neither is.
     · JetBrains Mono is for data only — never prose.
     · Roboto Slab never below 24px.
   ========================================================================== */

:root {
  /* Palette — 01.2 */
  --anvil:      #0B0C0D;  /* primary ground        70% */
  --cast:       #141618;  /* surface / card              */
  --graphite:   #4A4E52;  /* rules / disabled            */
  --mill:       #EDEBE7;  /* text / light ground   24% */
  --coolant:    #5FA8C4;  /* SOLE accent            6% */
  --fault:      #C4553F;  /* error state only            */

  /* Derived values — used only for rules and secondary text. */
  --rule:       #2A2D30;
  --rule-soft:  #1E2124;
  --text-body:  #B6B9BC;
  --text-mute:  #7E848A;
  --coolant-lo: rgba(95, 168, 196, 0.14);
  --fault-lo:   rgba(196, 85, 63, 0.14);

  /* Spacing — 01.4. Nothing between these. */
  --s1: 8px;  --s2: 16px; --s3: 24px;
  --s4: 32px; --s5: 56px; --s6: 96px;

  --max: 1440px;

  --slab: 'Roboto Slab', Georgia, serif;
  --sans: Archivo, system-ui, -apple-system, sans-serif;
  --cond: 'Barlow Condensed', Archivo, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--anvil);
  color: var(--mill);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Radius 0 everywhere — stated once, enforced globally. */
input, select, textarea, button, .panel, .btn, .chip, .tile, .field input {
  border-radius: 0;
}

a { color: var(--coolant); text-decoration: none; }
a:hover { color: #8FC9DE; }

/* --------------------------------------------------------------- typography */

.display {
  font-family: var(--slab);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

h1, .h1 {
  font-family: var(--slab);
  font-weight: 900;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}

h2, .h2 {
  font-family: var(--slab);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}

h3, .h3 {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0;
}

.eyebrow {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.eyebrow--accent { color: var(--coolant); }

.prose { color: var(--text-body); line-height: 1.6; text-wrap: pretty; }
.prose--wide { max-width: 700px; }

/* Data only. Never prose — 01.3. */
.mono { font-family: var(--mono); font-variant-ligatures: none; }

.muted { color: var(--text-mute); }
.dim   { color: var(--text-body); }
.num   { font-family: var(--mono); font-size: 13px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------- shell */

.shell { max-width: var(--max); margin: 0 auto; padding: 0 clamp(var(--s3), 5vw, var(--s6)); }

.topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--anvil);
  position: sticky; top: 0; z-index: 20;
}

.topbar__in {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s2) clamp(var(--s3), 5vw, var(--s6));
  display: flex; align-items: center; gap: var(--s4);
}

/* The glyph: bar field (D), the selected mark. Sheds bars as it scales down. */
.glyph {
  width: 28px; height: 28px; flex: none;
  background: var(--mill);
  padding: 3px;
  display: flex; flex-direction: column; gap: 2px;
}
.glyph i { flex: 1; background: var(--anvil); display: block; }

.brand { display: flex; align-items: center; gap: var(--s2); }
.brand__word {
  font-family: var(--slab); font-weight: 900; font-size: 24px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--mill);
}
.brand__sub {
  font-family: var(--cond); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-mute);
  border-left: 1px solid var(--rule); padding-left: var(--s2);
}

.nav { display: flex; gap: var(--s3); margin-left: auto; align-items: center; }
.nav a {
  font-family: var(--cond); font-size: 15px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-mute); padding: var(--s1) 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--mill); }
.nav a.is-active { color: var(--mill); border-bottom-color: var(--coolant); }

.page { padding-top: var(--s4); padding-bottom: var(--s6); }  /* never the shorthand: .shell owns the side gutters */
.page__head { margin-bottom: var(--s4); }
.page__head .eyebrow { display: block; margin-bottom: var(--s2); }

.stack   { display: flex; flex-direction: column; gap: var(--s3); }
.stack--tight { gap: 2px; }   /* the 2px seam — panels butt together */
.row     { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer  { flex: 1; }

/* ------------------------------------------------------------------- panels */

.panel {
  background: var(--cast);
  border: 1px solid var(--rule);
  padding: var(--s3);
}
.panel--flush { padding: 0; }
.panel--ground { background: var(--anvil); }

.panel__head {
  display: flex; align-items: baseline; gap: var(--s2);
  padding-bottom: var(--s2); margin-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}

/* ---------------------------------------------------------------- stat tile */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2px; }

.tile {
  background: var(--cast);
  border: 1px solid var(--rule);
  padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s1);
  min-height: 132px; justify-content: space-between;
}
.tile__label {
  font-family: var(--cond); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-mute);
}
.tile__value { font-family: var(--mono); font-size: 34px; line-height: 1; color: var(--mill); }
.tile__note  { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
.tile--signal .tile__value { color: var(--coolant); }
.tile--fault  .tile__value { color: var(--fault); }

/* ------------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--cast); }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }

table.data th {
  text-align: left;
  font-family: var(--cond); font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute);
  padding: var(--s2) var(--s2);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  background: var(--cast);
  position: sticky; top: 0;
}

table.data td {
  padding: var(--s2);
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  color: var(--text-body);
}
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: rgba(255,255,255,0.02); }

td.t-num, th.t-num { font-family: var(--mono); font-size: 13px; color: var(--mill); white-space: nowrap; }
td.t-name { color: var(--mill); }
td.t-right, table.data th.t-right { text-align: right; }

.desc { display: block; }
.desc__raw { color: var(--mill); }
.desc__tid {
  font-family: var(--mono); font-size: 12px; color: var(--coolant);
  border: 1px solid var(--coolant); padding: 0 5px; margin-right: var(--s1);
}

/* -------------------------------------------------------------------- chips */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--cond); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 3px 8px;
  border: 1px solid var(--graphite); color: var(--text-body);
  white-space: nowrap;
}
.chip--error   { border-color: var(--fault);   color: var(--fault);   background: var(--fault-lo); }
.chip--warning { border-color: var(--graphite); color: var(--mill); }
.chip--info    { border-color: var(--rule);    color: var(--text-mute); }
.chip--signal  { border-color: var(--coolant); color: var(--coolant); background: var(--coolant-lo); }

.chips { display: flex; flex-wrap: wrap; gap: 4px; }

/* ------------------------------------------------------------------- meters */

/* Confidence. Coolant only above the restructure threshold — below it the tool
   is residue, and colouring it like a pass would misreport the one number the
   cleaner's whole trust model rests on. */
.meter { display: flex; align-items: center; gap: var(--s1); min-width: 110px; }
.meter__track { flex: 1; height: 6px; background: var(--rule); min-width: 56px; }
.meter__fill  { height: 100%; background: var(--graphite); display: block; }
.meter__fill--pass { background: var(--coolant); }
.meter__val { font-family: var(--mono); font-size: 12px; color: var(--text-body); width: 34px; text-align: right; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  font-family: var(--cond); font-weight: 600; font-size: 15px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 12px var(--s3);
  border: 1px solid var(--graphite);
  background: transparent; color: var(--mill);
  cursor: pointer; line-height: 1;
  transition: background 90ms linear, color 90ms linear, border-color 90ms linear;
}
.btn:hover { border-color: var(--mill); color: var(--mill); }

/* The single most important action on a screen. Never more than one. */
.btn--primary { background: var(--coolant); border-color: var(--coolant); color: var(--anvil); }
.btn--primary:hover { background: #8FC9DE; border-color: #8FC9DE; color: var(--anvil); }

.btn--danger { border-color: var(--fault); color: var(--fault); }
.btn--danger:hover { background: var(--fault); color: var(--anvil); border-color: var(--fault); }

.btn--sm { padding: 8px var(--s2); font-size: 13px; }

.btn:disabled, .btn[aria-disabled="true"] {
  border-color: var(--rule); color: var(--graphite);
  background: transparent; cursor: not-allowed;
}

/* -------------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3); }
.field label {
  font-family: var(--cond); font-size: 14px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-mute);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="file"],
.field select {
  background: var(--anvil);
  border: 1px solid var(--rule);
  color: var(--mill);
  font-family: var(--sans); font-size: 16px;
  padding: 12px var(--s2);
  width: 100%;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--coolant);
}
.field input[type="file"] { font-family: var(--mono); font-size: 13px; padding: 10px var(--s2); }
.field__hint { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }

.error-text { color: var(--fault); font-size: 14px; }

/* ------------------------------------------------------------------ notices */

.notice {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--coolant);
  background: var(--cast);
  padding: var(--s2) var(--s3);
  color: var(--text-body);
}
.notice--fault { border-left-color: var(--fault); }

/* --------------------------------------------------------------- empty state */

.empty {
  border: 1px solid var(--rule);
  background: var(--cast);
  padding: var(--s5) var(--s3);
  text-align: center;
}
.empty .h2 { margin-bottom: var(--s2); }

/* ------------------------------------------------------------------ finding */

.finding {
  display: grid; grid-template-columns: 120px 1fr;
  gap: var(--s3); padding: var(--s3);
  border-bottom: 1px solid var(--rule-soft);
}
.finding:last-child { border-bottom: 0; }
.finding__msg { color: var(--mill); }
.finding__sug { color: var(--text-mute); font-size: 14px; margin-top: 6px; }
.finding__refs { font-family: var(--mono); font-size: 12px; color: var(--text-mute); margin-top: 6px; }

/* ---------------------------------------------------------------- plan block */

.plan {
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  white-space: pre-wrap; color: var(--text-body);
  background: var(--anvil); border: 1px solid var(--rule);
  padding: var(--s3); overflow-x: auto; margin: 0;
}

/* --------------------------------------------------------------- tag sheet */

/* A physical label is white stock with black print, so the preview inverts the
   UI on purpose: what you see is what leaves the printer, not what the app
   looks like. */
.tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: var(--s2);
}

.tag {
  background: var(--mill);
  color: var(--anvil);
  aspect-ratio: 2 / 1;
  display: grid;
  grid-template-columns: 29.5% 1fr;   /* margin + QR block, per LabelSpec */
  align-items: center;
  padding: 2.5%;
  overflow: hidden;
}

.tag__qr { width: 100%; display: block; }
.tag__qr svg { width: 100%; height: auto; display: block; }

.tag__lines {
  font-family: var(--mono);
  font-size: clamp(9px, 1.55vw, 13px);
  line-height: 1.42;
  padding-left: 4%;
  min-width: 0;
}

/* The printer hard-truncates at the ^FB width and never shrinks the type, so
   the preview clips the same way rather than wrapping and lying about fit. */
.tag__line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.tag-card { border: 1px solid var(--rule); background: var(--cast); }

.tag-card__meta {
  display: flex; justify-content: space-between; gap: var(--s2);
  padding: var(--s1) var(--s2);
  font-family: var(--mono); font-size: 11px; color: var(--text-mute);
  border-top: 1px solid var(--rule);
}

.tag-card__meta a { color: var(--text-mute); }
.tag-card__meta a:hover { color: var(--coolant); }
.tag-card__meta .is-warn { color: var(--fault); }

.printbar {
  display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap;
  border: 1px solid var(--rule); background: var(--cast);
  padding: var(--s2) var(--s3); margin-bottom: var(--s3);
}

.printbar select {
  background: var(--anvil); border: 1px solid var(--rule); color: var(--mill);
  font-family: var(--sans); font-size: 15px; padding: 10px var(--s2); min-width: 240px;
}

.printbar__status { font-family: var(--mono); font-size: 12px; color: var(--text-mute); }
.printbar__status.is-error { color: var(--fault); }
.printbar__status.is-ok { color: var(--coolant); }

/* ------------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--rule);
  margin-top: var(--s6);
  padding-top: var(--s3); padding-bottom: var(--s3);  /* .shell owns the side gutters */
  display: flex; gap: var(--s3); flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--text-mute);
}
.foot a { color: inherit; }
.foot a:hover { color: var(--text); }
a.brand { text-decoration: none; }

/* ---------------------------------------------------------------- auth page */

.auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--s3); }
.auth__card { width: 100%; max-width: 420px; }
.auth__brand { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }

/* ---------------------------------------------------------------- app shell */

.topbar__who { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.topbar__shop {
  font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mill);
}

/* The section tabs: one row under the brand, the shop's day left to right. */
.tabs { border-top: 1px solid var(--rule-soft); }
.tabs__in {
  max-width: var(--max); margin: 0 auto;
  padding: 0 clamp(var(--s3), 5vw, var(--s6));
  display: flex; gap: var(--s3); overflow-x: auto;
}
.tabs__tab {
  font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-mute);
  padding: var(--s1) 0 6px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs__tab:hover { color: var(--mill); }
.tabs__tab.is-active { color: var(--mill); border-bottom-color: var(--coolant); }
.tabs__tab.is-off { color: var(--graphite); cursor: default; }

/* Sub-sections inside a page (a library's tabs, settings). */
.subtabs { display: flex; gap: 2px; margin-bottom: var(--s3); border-bottom: 1px solid var(--rule); overflow-x: auto; }
.subtabs__tab {
  font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-mute);
  padding: var(--s1) var(--s2); border-bottom: 2px solid transparent; white-space: nowrap;
}
.subtabs__tab:hover { color: var(--mill); }
.subtabs__tab.is-active { color: var(--mill); border-bottom-color: var(--coolant); background: var(--cast); }

/* -------------------------------------------------------------- workspace */

/* Rail · main · drawer. The rail scopes, the main lists, the drawer details. */
.workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.workspace.has-drawer { grid-template-columns: 240px minmax(0, 1fr) 360px; }
.workspace__main { min-width: 0; }

.rail { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 120px; }
.rail__item {
  display: flex; justify-content: space-between; gap: var(--s1); align-items: baseline;
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-left: 2px solid transparent;
  color: var(--text-body); font-family: var(--sans); font-size: 14px;
  padding: var(--s1) var(--s2);
}
.rail__item:hover { background: var(--cast); color: var(--mill); }
.rail__item.is-active { background: var(--cast); color: var(--mill); border-left-color: var(--coolant); }
.rail__item--folder {
  margin-top: var(--s2);
  font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
}
.rail__item--lib { padding-left: var(--s3); }
.rail__count { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
.rail__empty { color: var(--text-mute); font-size: 14px; padding: var(--s1) var(--s2); margin: 0; }
.rail__form { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s3); padding: 0 var(--s2); }

.drawer {
  background: var(--cast); border: 1px solid var(--rule); padding: var(--s3);
  position: sticky; top: 120px; max-height: calc(100dvh - 140px); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s2);
}
.drawer__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); }
.drawer .tag-card { background: var(--anvil); }

.facts { display: grid; grid-template-columns: 120px 1fr; gap: var(--s1) var(--s2); margin: 0; font-size: 14px; }
.facts dt { font-family: var(--cond); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.facts dd { margin: 0; color: var(--mill); }

.plainlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

/* ---------------------------------------------------------------- toolbars */

.toolbar, .rangebar { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; margin-bottom: var(--s2); }
.rangebar { padding: var(--s1) var(--s2); background: var(--cast); border: 1px solid var(--rule); }
.rangebar .eyebrow { margin: 0; }

.input {
  background: var(--anvil); border: 1px solid var(--rule); color: var(--mill);
  font-family: var(--sans); font-size: 14px; padding: var(--s1) var(--s2); min-height: 40px;
}
.input:focus { outline: none; border-color: var(--coolant); }
.input--grow { flex: 1; min-width: 220px; }
.input--sm { min-height: 32px; padding: 4px var(--s1); font-size: 13px; }
.input--qty { width: 88px; text-align: right; font-family: var(--mono); }
.input.mono { font-family: var(--mono); font-size: 13px; }

.segmented { display: inline-flex; border: 1px solid var(--rule); }
.segmented__btn {
  background: transparent; border: 0; border-right: 1px solid var(--rule); cursor: pointer;
  font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute); padding: 0 var(--s2); min-height: 38px;
}
.segmented__btn:last-child { border-right: 0; }
.segmented__btn:hover { color: var(--mill); }
.segmented__btn.is-active { background: var(--coolant-lo); color: var(--coolant); }

.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 var(--s2); }

/* ------------------------------------------------------------ tool table */

table.data--tools { font-size: 13px; }
table.data--tools td { padding: var(--s1) var(--s2); vertical-align: middle; }
table.data--tools td.t-name { min-width: 240px; }
td.t-clip { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.data tr.is-selected td { background: var(--coolant-lo); }
table.data tr.is-open td { background: rgba(255,255,255,0.04); }
table.data tr.is-open td:first-child { box-shadow: inset 2px 0 0 var(--coolant); }
table.data tr.is-retired td { color: var(--text-mute); }
td.t-check, th.t-check { width: 40px; text-align: center; }
td.t-check input { width: 16px; height: 16px; accent-color: var(--coolant); cursor: pointer; }

.rowlink {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  color: var(--mill); font: inherit;
}
.rowlink:hover { color: var(--coolant); }
.rowsub { display: block; margin-top: 2px; font-size: 12px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s3); align-items: start; }
.help summary { cursor: pointer; }
.help[open] summary { margin-bottom: var(--s1); }

.question { border: 0; border-top: 1px solid var(--rule-soft); margin: 0; padding: var(--s2) 0; }
.question:first-of-type { border-top: 0; }
.question legend { color: var(--mill); padding: 0; margin-bottom: var(--s1); }
.choice { display: flex; gap: var(--s1); align-items: baseline; padding: 4px 0; cursor: pointer; color: var(--text-body); }
.choice input { accent-color: var(--coolant); }

a.tile { text-decoration: none; }
a.tile:hover { border-color: var(--graphite); }

@media (max-width: 1100px) {
  .workspace.has-drawer { grid-template-columns: 240px minmax(0, 1fr); }
  .workspace.has-drawer .drawer {
    grid-column: 1 / -1; position: static; max-height: none;
  }
}

@media (max-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 800px) {
  .workspace, .workspace.has-drawer { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .rail__item { width: auto; border-left: 0; border-bottom: 2px solid transparent; }
  .rail__item.is-active { border-bottom-color: var(--coolant); }
  .rail__item--folder { margin-top: 0; }
  .rail__item--lib { padding-left: var(--s2); }
  .rail__form { width: 100%; padding: 0; }
}

@media (max-width: 640px) {
  .finding { grid-template-columns: 1fr; gap: var(--s1); }
  .topbar__in { gap: var(--s2); }
  .brand__sub { display: none; }
  .topbar__who .num { display: none; }
  .tabs__in { gap: var(--s2); }
}

/* --------------------------------------------------------------- build tab */

.suggestion { padding: var(--s1) 0; border-top: 1px solid var(--rule-soft); }
.suggestion:first-of-type { border-top: 0; }