/* The blocks the platform's six routes are built from. Lifted from
 * mocks/pages/c/pages-c.css on branch fable-c — the mocks he picked — and
 * added beside base.css, sheet.css, tiles.css and cards.css, never carved into
 * them. Chrome (the header, the pill, the plate, the footer) is the site's
 * own; this file adds only the page head, the two section layouts (a band for
 * the five index pages, the orbit and its bodies for /about/), the comparison
 * rows, the plates row, the ledger, the lead form, the segmented pill, the
 * table and the empty state. Every colour and length resolves through a
 * --resurs-* token.
 *
 * One rule here is not from the lane: .stage-flat, which the picked mocks took
 * from the kit's main2.css. It is the shell of any route that has no hero, so
 * it belongs beside .sheet in site/sheet.css and not here — this lane may not
 * write that file, and the copy is listed in its report as a shared change
 * wanted. */

/* --- the shell of a route with no hero ----------------------------------- */
/* .sheet is beat two of the main page: it rides up over the photograph, so it
   is rounded, lifted and a viewport tall. A route that opens on itself has no
   photograph to ride over: same sheet, flattened, with the footer at the foot
   however short the page is. */
.stage-flat {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: calc(var(--resurs-header-height) + var(--resurs-gap-section));
  padding-bottom: 0;
  border-radius: 0;
  box-shadow: none;
}
.stage-flat > .page { width: min(100% - 2 * var(--resurs-gutter), var(--resurs-page-width)); }
.stage-flat > .site-footer { margin-top: auto; }

/* --- page head ------------------------------------------------------------- */
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
}
.page-title {
  margin-top: 10px;
  font-size: var(--resurs-size-page-title);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.page-lead {
  font-size: var(--resurs-size-meta);
  line-height: 1.5;
  color: var(--resurs-ink-muted);
  max-width: 44ch;
}

/* --- a body: one section of the page, shared by both versions ------------- */
.body-head { display: flex; align-items: flex-start; gap: 16px; }
.body-head .plate { width: 48px; height: 48px; }
.body-title {
  font-size: var(--resurs-size-band-title);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.body-caption {
  margin-top: 4px;
  font-size: var(--resurs-size-small);
  line-height: 1.4;
  color: var(--resurs-ink-muted);
}
.body-line { font-size: var(--resurs-size-nav); line-height: 1.5; max-width: 62ch; }
.body-note { font-size: var(--resurs-size-small); line-height: 1.5; color: var(--resurs-ink-soft); max-width: 62ch; }
.body-content > * + * { margin-top: 16px; }
.body-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* --- the band: one section of the five index routes ------------------------------------------------------------- */
/* A quiet titled band per section: head on the left, its rows on the right,
   on the pale grey ground of vtb.ru's comparison bands. */
/* minmax(0, 1fr), never auto: a band must shrink below its content's
   min-content (a table, a nowrap placeholder) and let that content scroll
   inside its own container instead of widening the page. */
.bands { margin-top: var(--resurs-gap-cards); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--resurs-card-gap); }
.band, .body-content, .row-main { min-width: 0; }
.band {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: 40px;
  padding: 32px 36px 34px 32px;
  border-radius: var(--resurs-radius-panel);
  background: var(--resurs-surface);
}
.band .body-head { flex-direction: column; gap: 14px; }

/* --- comparison rows ---------------------------------------------------------- */
/* The VTB row: an object on a plate, a name, a caption, and one value on the
   right - a labelled placeholder, a soft wording, or the call. White rows on
   the grey band, a hairline between them. */
.rows { display: grid; gap: 8px; }
.row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 14px;
  border-radius: var(--resurs-radius-tile);
  background: var(--resurs-ground);
  transition: box-shadow var(--resurs-quick) var(--resurs-ease);
}
.row:hover { box-shadow: inset 0 0 0 1px var(--resurs-hairline); }
.row:hover .plate { transform: translateY(-1px); --resurs-plate-cast: var(--resurs-plate-cast-lifted); }
.row .plate { width: 44px; height: 44px; }
.row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row-name { font-size: var(--resurs-size-body); font-weight: 500; line-height: 1.3; }
.row-caption { font-size: var(--resurs-size-small); line-height: 1.4; color: var(--resurs-ink-soft); }
.row-value { flex: none; display: flex; align-items: center; gap: 12px; font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); text-align: right; }
.row-value .card-link { margin: 0; padding: 0; }

/* --- the plates row: the index routes' mechanic -------------------------------------------- */
/* Named plates, edge to edge with no gap, so any point of the row is a plate;
   hover, focus or a click opens the matching detail beneath. */
.plates {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-radius: var(--resurs-radius-tile);
  background: var(--resurs-ground);
  box-shadow: inset 0 0 0 1px var(--resurs-hairline);
  overflow: hidden;
}
/* The index row on white, above the bands. */
.plates-top { margin-top: var(--resurs-gap-cards); }
.plates-under { margin-top: var(--resurs-card-gap); }
.plate-item {
  appearance: none;
  width: 100%;
  min-height: var(--resurs-plates-min-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--resurs-quick) var(--resurs-ease);
}
.plate-item + .plate-item,
.plates li + li .plate-item { box-shadow: inset 1px 0 0 var(--resurs-hairline); }
.plate-item:hover { background: var(--resurs-surface); }
.plate-item[aria-selected='true'] { background: var(--resurs-tint); }
.plate-item[aria-selected='true'] .plate { transform: translateY(-1px); --resurs-plate-cast: var(--resurs-plate-cast-lifted); }
.plate-item .plate { width: var(--resurs-plates-plate); height: var(--resurs-plates-plate); }
.plate-item:focus-visible { outline-offset: -3px; }
.plate-name { font-size: var(--resurs-size-small); font-weight: 500; line-height: 1.25; }

.plates-detail { margin-top: 12px; display: grid; gap: 8px; min-height: 44px; }
.plates-detail [data-detail] {
  padding: 10px 14px;
  border-radius: var(--resurs-radius-tile);
  font-size: var(--resurs-size-small);
  line-height: 1.45;
  color: var(--resurs-ink-soft);
}
.plates-detail [data-detail][data-open='false'] { display: none; }
.plates-detail [data-detail='hint'] { color: var(--resurs-ink-muted); padding-inline: 0; }
[data-active='all'] ~ .plates-detail [data-detail] { background: var(--resurs-ground); }
[data-active='all'] ~ .plates-detail [data-detail='hint'] { display: none; }

/* --- the orbit: the mechanic of /about/ ------------------------------------------------------------ */
/* The rayed sun of the mark turned inward: the platform at the centre, the
   page's sections on one ring, a hairline ray to each. Static: the ring never
   turns; hover, focus or a click on a contour opens its section below. */
.orbit-stage { margin-top: var(--resurs-gap-cards); display: grid; justify-items: center; }
.orbit {
  position: relative;
  width: var(--resurs-orbit-size);
  max-width: 100%;
  aspect-ratio: 1;
}
.orbit-rays { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-ring { fill: none; stroke: var(--resurs-hairline); stroke-width: 0.22; stroke-dasharray: 1.2 1.6; }
.orbit-ray { stroke: var(--resurs-hairline); stroke-width: 0.22; }

.orbit-hub,
.contour {
  appearance: none;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.orbit-hub {
  width: var(--resurs-orbit-hub);
  height: var(--resurs-orbit-hub);
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  gap: 4px;
  border-radius: 50%;
  background: var(--resurs-ground);
  box-shadow: inset 0 0 0 1px var(--resurs-hairline), var(--resurs-plate-cast);
  text-align: center;
  transition: box-shadow var(--resurs-quick) var(--resurs-ease), background var(--resurs-quick) var(--resurs-ease);
}
.orbit-hub:hover { box-shadow: inset 0 0 0 1px var(--resurs-hairline), var(--resurs-plate-cast-lifted); }
.orbit-hub[aria-selected='true'] { background: var(--resurs-tint); }
.orbit-hub-name { font-size: var(--resurs-size-hub); font-weight: 600; letter-spacing: 0.08em; }
.orbit-hub-caption { font-size: var(--resurs-size-orbit-label); color: var(--resurs-ink-muted); }

.contour {
  width: var(--resurs-orbit-node);
  padding: 12px 10px 12px;
  transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--resurs-orbit-radius)) rotate(calc(-1 * var(--a)));
  display: grid;
  justify-items: center;
  gap: 10px;
  border-radius: var(--resurs-radius-tile);
  background: var(--resurs-ground);
  transition: background var(--resurs-quick) var(--resurs-ease);
}
.contour .plate { width: var(--resurs-orbit-plate); height: var(--resurs-orbit-plate); }
.contour-name {
  font-size: var(--resurs-size-orbit-label);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}
.contour:hover { background: var(--resurs-surface); }
.contour:hover .plate { transform: translateY(-1px); --resurs-plate-cast: var(--resurs-plate-cast-lifted); }
.contour[aria-selected='true'] { background: var(--resurs-tint); }
.contour[aria-selected='true'] .contour-name { color: var(--resurs-accent); }
.contour[aria-selected='true'] .plate { transform: translateY(-1px); --resurs-plate-cast: var(--resurs-plate-cast-lifted); }

.orbit-detail { margin-top: var(--resurs-gap-cards); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--resurs-card-gap); }
.orbit-detail .body {
  padding: 32px 36px 34px 32px;
  border-radius: var(--resurs-radius-panel);
  background: var(--resurs-surface);
  animation: reveal var(--resurs-reveal) var(--resurs-ease);
}
.orbit-detail .body[data-open='false'] { display: none; }
.orbit-detail .body-content { margin-top: 22px; }
.orbit-detail .body[data-body='hub'] { background: var(--resurs-tint); }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --- team slots ----------------------------------------------------------------- */
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.slot {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: var(--resurs-radius-tile);
  background: var(--resurs-ground);
}
.slot-role { font-size: var(--resurs-size-small); font-weight: 500; }

/* --- the ledger ------------------------------------------------------------------ */
.ledger { display: grid; }
.ledger-row {
  display: grid;
  grid-template-columns: var(--resurs-ledger-date) 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--resurs-hairline);
  font-size: var(--resurs-size-small);
}
.ledger-row:last-child { border-bottom: 1px solid var(--resurs-hairline); }
.ledger-head { color: var(--resurs-ink-muted); border-top: 0; }
.ledger-date { color: var(--resurs-ink-muted); font-variant-numeric: tabular-nums; }

/* --- the empty state ------------------------------------------------------------ */
.empty {
  padding: 22px 20px;
  border: 1px dashed var(--resurs-placeholder-edge);
  border-radius: var(--resurs-radius-tile);
  font-size: var(--resurs-size-small);
  line-height: 1.45;
  color: var(--resurs-placeholder-ink);
  text-align: center;
}

/* --- the table (catalogue) ------------------------------------------------------ */
.table-scroll { overflow-x: auto; border-radius: var(--resurs-radius-tile); background: var(--resurs-ground); }
.table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: var(--resurs-size-small); }
.table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 500;
  color: var(--resurs-ink-muted);
  border-bottom: 1px solid var(--resurs-hairline);
}
.table td { padding: 16px; }

/* --- the segmented pill --------------------------------------------------------- */
.pill-seg {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--resurs-radius-pill);
  background: var(--resurs-surface);
  max-width: 100%;
  overflow-x: auto;
}
.pill-seg [role='tab'] {
  appearance: none;
  border: 0;
  padding: 8px 16px;
  border-radius: var(--resurs-radius-pill);
  background: transparent;
  color: var(--resurs-ink-muted);
  font: inherit;
  font-size: var(--resurs-size-small);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--resurs-quick) var(--resurs-ease), color var(--resurs-quick) var(--resurs-ease);
}
.pill-seg [role='tab']:hover { color: var(--resurs-ink); }
.pill-seg [role='tab'][aria-selected='true'] { background: var(--resurs-ground); color: var(--resurs-ink); box-shadow: 0 1px 1.5px var(--resurs-plate-seat); }

/* --- the lead form ---------------------------------------------------------------- */
.lead {
  margin-top: var(--resurs-gap-section);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: 40px;
  padding: 32px 36px 34px 32px;
  border-radius: var(--resurs-radius-panel);
  background: var(--resurs-tint);
}
.lead-form { display: grid; gap: 16px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field-label { font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); display: flex; gap: 6px; }
.field-optional { color: var(--resurs-placeholder-ink); }
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--resurs-field-edge);
  border-radius: var(--resurs-radius-tile);
  background: var(--resurs-ground);
  color: var(--resurs-ink);
  font: inherit;
  font-size: var(--resurs-size-body);
  transition: border-color var(--resurs-quick) var(--resurs-ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:hover,
.field textarea:hover { border-color: var(--resurs-field-edge-hover); }
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] { border-color: var(--resurs-invalid); background: var(--resurs-invalid-soft); }
.form-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form-foot .pill-accent { border: 0; font: inherit; cursor: pointer; }
.form-foot .pill-accent:disabled { cursor: default; opacity: 0.6; }
.form-message { font-size: var(--resurs-size-small); min-height: 1.4em; }
form[data-state='invalid'] .form-message,
form[data-state='error'] .form-message { color: var(--resurs-invalid); }
form[data-state='saved'] .form-message { color: var(--resurs-saved); }
form[data-state='submitting'] .form-message { color: var(--resurs-ink-muted); }
form[data-state='saved'] .fields { opacity: 0.55; }
.form-reset {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--resurs-accent);
  font: inherit;
  font-size: var(--resurs-size-small);
  cursor: pointer;
}
.form-reset:hover { color: var(--resurs-accent-hover); }
form:not([data-state='saved']):not([data-state='error']) .form-reset { display: none; }
.form-note { font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); }

/* --- the footer's app link ------------------------------------------------- */
/* One link under the channel row, not in it. The picked mock carried this as
   an inline style; a class is the same rule with a name. */
.footer-app { margin-top: 14px; }

/* --- media shell -------------------------------------------------------------------- */
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--resurs-card-gap); }
.shelf .body { padding: 26px 24px 28px; border-radius: var(--resurs-radius-panel); background: var(--resurs-surface); }
.shelf .body-content { margin-top: 20px; }
.channels-row { display: flex; gap: 10px; flex-wrap: wrap; }
.channels-row .channel {
  padding: 10px 16px 10px 12px;
  border-radius: var(--resurs-radius-pill);
  background: var(--resurs-ground);
  box-shadow: inset 0 0 0 1px var(--resurs-hairline);
  font-size: var(--resurs-size-small);
}
.channels-row .channel:hover { box-shadow: inset 0 0 0 1px var(--resurs-field-edge-hover); }

/* --- reduced motion --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .row, .row .plate, .plate-item, .plate-item .plate, .orbit-hub, .contour, .contour .plate,
  .field input, .field textarea, .pill-seg [role='tab'] { transition: none; }
  .orbit-detail .body { animation: none; }
  .row:hover .plate, .contour:hover .plate, .plate-item[aria-selected='true'] .plate,
  .contour[aria-selected='true'] .plate { transform: none; }
}

/* --- widths -------------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .page-head { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .band { grid-template-columns: 1fr; gap: 22px; padding: 26px 24px 28px; }
  .band .body-head { flex-direction: row; }
  .lead { grid-template-columns: 1fr; gap: 22px; padding: 26px 24px 28px; }
  .shelf { grid-template-columns: 1fr; }
}
/* Below this the ring has no room: the orbit becomes a stacked list, the hub
   first, the contours as rows, the same mechanic, a tap toggles. */
@media (max-width: 760px) {
  .orbit { width: 100%; aspect-ratio: auto; display: grid; gap: 8px; }
  .orbit-rays { display: none; }
  .orbit-hub, .contour { position: static; transform: none; width: 100%; }
  .orbit-hub { height: auto; padding: 18px; border-radius: var(--resurs-radius-tile); text-align: left; place-content: start; justify-items: start; }
  .contour { grid-template-columns: auto 1fr; justify-items: start; align-items: center; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--resurs-hairline); }
  .contour .plate { width: 44px; height: 44px; }
  .contour-name { text-align: left; font-size: var(--resurs-size-small); }
}
@media (max-width: 560px) {
  .band, .lead, .orbit-detail .body { padding: 20px 18px 22px; }
  .row { flex-wrap: wrap; }
  .row-value { flex-basis: 100%; justify-content: flex-start; padding-left: 60px; text-align: left; }
  .plates { display: flex; overflow-x: auto; }
  .plates li { flex: 0 0 auto; }
  .plate-item { width: auto; }
  .slots { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .form-foot .pill-accent { width: 100%; justify-content: space-between; }
  .body-head .plate { width: 44px; height: 44px; }
  /* A placeholder wraps here: the pill shape gives way to the column. */
  .placeholder { white-space: normal; }
  /* The contour filter tabs and the contact channels: same min-height rule
     as the other pill controls, held here rather than lifted to 1080px so
     the desktop tab strip keeps its own compact rhythm. */
  .pill-seg [role='tab'] { min-height: 44px; }
  .channels-row .channel { min-height: 44px; }
  .orbit-hub-caption { font-size: 14px; }
}