/* The departments route as the sun, Route A: the orbit — his pick of
 * 2026-09-03, ported from mocks/sun/fable-1/sun.css. Two concentric rings
 * around the axis, the stable core inside, the venture directions outside,
 * one tile per department, evenly spaced, nothing rotating. Chrome (header,
 * plate, footer, sheet) comes from site/*.css; this file adds only the flat
 * stage a route page needs, the figure, its switch and its panel. Every
 * colour and length resolves through design/ or orbit.tokens.css. */

/* --- the flat stage ------------------------------------------------------
 * A route page has no hero: the fixed header sits on white from the first
 * pixel, so the sheet is flat and clears the header itself. Ported from
 * mocks/main2/fable/main2.css, where the picked style contract declares it.
 * WANTED SHARED CHANGE: these five rules belong in site/act2-shared.css
 * beside .sheet-with-footer — every route but the main page needs them, and
 * this lane may not edit a shared file. */
.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)); }
/* A section page that ends in the footer keeps the footer at the foot. */
.stage-flat > .site-footer { margin-top: auto; }

/* --- the head: heading, subtitle, the switch ----------------------------- */
.sun-controls {
  margin-top: var(--resurs-gap-head);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sun-controls .switch-label { font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); }

/* The segmented pill, the VTB switch: a grey track, the chosen segment white
   and seated. Buttons, not links: it filters the figure, it goes nowhere. */
.segmented {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--resurs-radius-pill);
  background: var(--resurs-surface);
}
.segmented button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 8px 18px;
  border-radius: var(--resurs-radius-pill);
  background: transparent;
  color: var(--resurs-ink-muted);
  font: inherit;
  font-size: var(--resurs-size-small);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--resurs-quick) var(--resurs-ease),
              color var(--resurs-quick) var(--resurs-ease),
              box-shadow var(--resurs-quick) var(--resurs-ease);
}
.segmented button:hover { color: var(--resurs-ink); }
.segmented button[aria-checked='true'] {
  background: var(--resurs-ground);
  color: var(--resurs-ink);
  font-weight: 500;
  box-shadow: 0 1px 1.5px var(--resurs-plate-seat), inset 0 0 0 1px var(--resurs-plate-edge);
}

/* --- the stage: figure beside its panel ---------------------------------- */
.sun-stage {
  margin-top: var(--resurs-gap-cards);
  /* The lowest names hang a little under the outer ring. */
  padding-bottom: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--resurs-panel-width);
  gap: var(--resurs-orbit-gap);
  align-items: start;
}

/* --- the figure ---------------------------------------------------------- */
.orbit {
  position: relative;
  width: 100%;
  max-width: var(--resurs-orbit-size);
  aspect-ratio: 1;
  margin-inline: auto;
}
.orbit-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* The rings are hairlines; the stroke stays one pixel at any figure size. */
.orbit-lines .ring {
  fill: none;
  stroke: var(--resurs-hairline);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  transition: opacity var(--resurs-quick) var(--resurs-ease);
}
/* A spoke exists for every department and is drawn only for the active one:
   the dash runs from the axis to the plate. Its colour is the star's cascade,
   violet at the axis, sea-wave at the rim, one gradient in user space. The
   dash is measured in figure units (orbit.js sets --len to the spoke's
   length), so the stroke scales with the figure rather than being
   non-scaling: a non-scaling stroke dashes in screen space and breaks the
   line into pieces. */
.orbit-lines .spoke {
  fill: none;
  stroke: url(#sun-cascade);
  stroke-width: var(--resurs-spoke-width);
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  opacity: 0;
  transition: stroke-dashoffset var(--resurs-draw) var(--resurs-ease),
              opacity var(--resurs-quick) var(--resurs-ease);
}
.orbit-lines .spoke[data-on] { stroke-dashoffset: 0; opacity: 1; }

/* The axis: the rayed sun from the mark on the star's gradient, seated like
   a plate, and the role beneath it. A role, never a name. The box IS the
   disc, centred on the rings' own centre; the caption hangs under it and
   takes no part in the centring. */
.orbit-axis {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--resurs-axis-size) * 0.62);
  height: calc(var(--resurs-axis-size) * 0.62);
}
.axis-disc {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--resurs-sun-gradient);
  color: var(--resurs-sun-ink);
  box-shadow: inset 0 0 0 1px var(--resurs-sun-rim), var(--resurs-sun-seat);
}
.axis-disc .icon { width: 46%; height: 46%; }
.axis-text {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  width: var(--resurs-axis-size);
  text-align: center;
}
.axis-role {
  display: block;
  font-size: var(--resurs-size-axis-role);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.axis-line { display: none; }

/* One department: the icon object on its ring, its name beneath. Positioned
   by two percentages orbit.js derives from the same radii the rings use; the
   plate's centre is the point on the ring, the name hangs under it.
   Translate only, never rotate: the tiles stand upright on their ring. */
.orbit-tile {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  transform: translate(-50%, calc(var(--resurs-orbit-plate) / -2));
  display: grid;
  justify-items: center;
  gap: 8px;
  width: var(--resurs-orbit-tile-width);
  text-align: center;
  border-radius: var(--resurs-radius-tile);
  transition: opacity var(--resurs-quick) var(--resurs-ease);
}
.orbit-tile .plate { width: var(--resurs-orbit-plate); height: var(--resurs-orbit-plate); }
.orbit-tile .tile-name {
  font-size: var(--resurs-size-tile-name);
  line-height: 1.25;
  color: var(--resurs-ink);
  transition: color var(--resurs-quick) var(--resurs-ease);
}
/* Hover reaches the object, not the ring: the plate rises the pixel a held
   thing rises, the name holds. */
.orbit-tile[data-active] .plate {
  transform: translateY(-2px);
  --resurs-plate-cast: var(--resurs-plate-cast-lifted);
}
.orbit-tile[data-active] .tile-name { font-weight: 500; }
.orbit-tile:focus-visible { outline-offset: 6px; }

/* The switch dims the other contour; both rings stay in the one figure. */
.orbit[data-contour='a'] .orbit-tile[data-ring='b'],
.orbit[data-contour='b'] .orbit-tile[data-ring='a'] { opacity: var(--resurs-dim); }
.orbit[data-contour='a'] .ring[data-ring='b'],
.orbit[data-contour='b'] .ring[data-ring='a'] { opacity: var(--resurs-dim); }

/* The ring labels head the phone grid; on the orbit the panel's legend
   names the rings. */
.ring-label { display: none; }

/* --- the panel ----------------------------------------------------------- */
.orbit-panel {
  position: sticky;
  top: calc(var(--resurs-header-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 300px;
  padding: 30px 30px 28px;
  border-radius: var(--resurs-radius-panel);
  background: var(--resurs-surface);
}
.orbit-panel[data-panel-state='active'] { background: var(--resurs-tint); }
.panel-kicker { color: var(--resurs-ink-muted); }
.panel-title {
  font-size: var(--resurs-size-title);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.panel-line {
  margin-top: 6px;
  font-size: var(--resurs-size-small);
  line-height: 1.5;
  color: var(--resurs-ink-soft);
  max-width: 40ch;
}
.panel-legend { margin-top: 22px; display: grid; gap: 0; }
.panel-legend li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--resurs-hairline);
  font-size: var(--resurs-size-small);
}
.panel-legend li:last-child { border-bottom: 1px solid var(--resurs-hairline); }
/* The legend swatch is the ring itself: a hairline circle, the inner one
   smaller within the same box. */
.legend-ring {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--resurs-ink-muted);
}
.legend-ring[data-ring='a'] { width: 14px; height: 14px; margin-inline: 4px; }
.legend-name { flex: 1; }
.legend-count { color: var(--resurs-ink-muted); font-variant-numeric: tabular-nums; }
.panel-hint { margin-top: 18px; font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); }
.panel-dive { margin-top: auto; padding-top: 26px; }
.orbit-panel[data-panel-state='active'] .panel-legend,
.orbit-panel[data-panel-state='active'] .panel-hint { display: none; }
.orbit-panel[data-panel-state='rest'] .panel-dive { display: none; }

/* --- reduced motion: the figure stands complete, nothing draws ------------ */
html[data-motion='reduced'] .orbit-lines .spoke,
html[data-motion='reduced'] .orbit-lines .ring,
html[data-motion='reduced'] .orbit-tile,
html[data-motion='reduced'] .segmented button { transition: none; }
html[data-motion='reduced'] .orbit-tile[data-active] .plate { transform: none; }

/* --- widths --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .sun-stage { grid-template-columns: 1fr; gap: 32px; }
  .orbit-panel { position: static; min-height: 0; padding: 24px 22px; }
  .panel-line { max-width: 60ch; }
}

/* The phone: the sun becomes a compact grid, not an orbit. The axis heads the
   grid as one full row; the two rings become two labelled groups of VTB rows,
   two across; the drawn rings and the panel go. No transform anywhere. */
@media (max-width: 560px) {
  .stage-flat { padding-top: calc(64px + var(--resurs-gap-section)); }
  .sun-controls { margin-top: 24px; }
  .segmented { width: 100%; }
  /* The base rule keeps every label on one line, which is fine at 1440 but
     not for «Венчурные направления» in a third of a 360px track - it wraps
     here instead of forcing the row wide. */
  .segmented button { flex: 1; padding: 8px 10px; font-size: 14px; min-height: 44px; white-space: normal; text-align: center; }
  .sun-stage { margin-top: 28px; }
  .orbit {
    max-width: none;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .orbit-lines { display: none; }
  .orbit-axis {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
    height: auto;
    padding: 14px 16px;
    border-radius: var(--resurs-radius-tile);
    background: var(--resurs-tint);
  }
  .axis-disc { width: 52px; height: 52px; flex: none; }
  .axis-text { position: static; transform: none; margin-top: 0; width: auto; text-align: left; }
  .axis-line { display: block; margin-top: 2px; font-size: var(--resurs-size-small); line-height: 1.35; color: var(--resurs-ink-soft); }
  .ring-label {
    display: block;
    grid-column: 1 / -1;
    margin-top: 14px;
    margin-bottom: 2px;
    font-size: var(--resurs-size-small);
    font-weight: 400;
    color: var(--resurs-ink-muted);
  }
  .orbit-tile {
    position: static;
    transform: none;
    width: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 10px 12px 10px 10px;
    background: var(--resurs-surface);
    text-align: left;
  }
  .orbit-tile .plate { width: 40px; height: 40px; }
  .orbit-tile .tile-name { font-size: var(--resurs-size-small); }
  .orbit-panel { display: none; }
}