/* ============================================================
   gbppl-oro-1 — THE SHOWCASE CHROME
   ------------------------------------------------------------
   The frame every page of the Oro showcase wears: the rail on the
   left, the column on the right, and the type roles the documents
   speak in. One definition, seven pages — the showcase is not
   allowed to break its own first rule (Ton-6: reuse before you
   draw) by hand-sewing this frame into every file.

   Everything below is spent out of system\assets\tokens.css. No
   colour, no radius, no curve and no duration is invented here;
   where a number is not a token it is a layout measure (a rail
   width, a column max) and is marked as such.

   The type roles come from TYPE-SCALE.md: Noto Serif for titles
   (serif is TITLES ONLY, BRAND.md), Inter for everything else,
   and role 44 Eyebrow for the small unsaturated all-caps.
   ============================================================ */

/* The box model of the system (same rule shell.css opens with;
   the showcase does not use the container ladder, so it takes the
   reset alone rather than pulling a component it does not wear). */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--white); }

/* gbppl-oro-toc-1 — WHERE A FRAGMENT LANDS. The studio bar is
   sticky at the top of every showcase page (header.css,
   .gb-header--studio, position: sticky, top 0, --header-h tall), so
   a link to #anchor that scrolls the section to 0 puts its first
   line UNDER the bar. One declaration on the scroller answers every
   anchor on the page: the bar's own height plus one gutter of air,
   the same --space-24 the rail and the bar share. */
html { scroll-padding-top: calc(var(--header-h) + var(--space-24)); }

body {
  margin: 0;
  background: var(--white);
  color: var(--zinc-700);
  font-family: var(--font-sans);
  font-size: var(--font-size-root);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---- Eyebrow, type role 44, straight off the tokens ---- */
.gb-eyebrow {
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  line-height: 1;
  text-transform: uppercase;
  color: var(--eyebrow-color);
}

/* ============================================================
   THE SHELL
   ============================================================ */
/* Below 1024 the rail is a band across the top and the column runs
   under it, so the shell is a COLUMN and only becomes a row when
   there is width to put a rail beside the text. (Left as a row, a
   100%-wide rail pushes the column off the screen — the flex line
   does not wrap.) */
.oro {
  display: flex;
  flex-direction: column;
  /* Экран минус студийный бар над оболочкой (hub-9): полный 100vh
     сделал бы страницу выше экрана на высоту бара. */
  min-height: calc(100vh - var(--header-h));
}
@media (min-width: 1024px) {
  .oro { flex-direction: row; align-items: flex-start; }
}

/* ---- The rail ----
   264px is a layout measure, not a token: the system has no rail
   width yet. It is the narrowest width that holds "Tone of Voice"
   and its SOON plaque on one line. */
.oro-rail {
  flex: 0 0 auto;
  width: 100%;
  background: var(--zinc-50);
  border-bottom: 1px solid var(--zinc-200);
  padding: 24px 16px;
}
/* Обе цифры считаются от НИЗА студийного бара: с hub-9 (Тон 24.08)
   витрина стоит под тем же баром, что хаб и sandboxes.html,
   и рельса, липнущая к нулю, уезжала бы под него. --header-h — тот
   же токен, которым бар меряет собственную высоту. */
@media (min-width: 1024px) {
  .oro-rail {
    position: sticky;
    top: var(--header-h);
    width: 264px;
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    border-bottom: 0;
    border-right: 1px solid var(--zinc-200);
    padding: var(--space-32) var(--space-24)   /* gbppl-studio-bar-2 (Ton 28.08): the rail shares its gutter with the studio bar, 24 = the container's own gutter; 20 was off the scale */;
    display: flex;
    flex-direction: column;
  }
}

/* The identity lock of the showcase: the name in the title voice,
   the discipline under it in the eyebrow. Same two-part lock the
   hub bar wears (GildedBox | PROTOTYPES), set vertically because
   a rail is tall, not wide. */
.oro-lock { display: block; margin-bottom: 28px; }
.oro-lock-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--zinc-950);
}
.oro-lock-sub { display: block; margin-top: 7px; }

/* ---- The sections ---- */
.oro-nav { display: flex; flex-direction: column; gap: 2px; }

/* gbppl-oro-levels-1, Ton 28.08: «по атомарному дизайну компоненты
   делятся по уровням». The rail says so out loud, so the sections
   sit under caps captions. The caption is the SAME object as the
   one over the table of contents further down (one declaration
   block, two names): a rail must not hold two different ways of
   saying «what follows is a group». */
.oro-navgroup { margin-top: var(--space-24); }
.oro-navgroup:first-child { margin-top: 0; }

/* gbppl-oro-pages-1, Ton-19: «Base / Composite только как подписи
   в меню». A level inside Components is a caption over a run of
   pages, one rung quieter than the section caption above it: half
   the air (--space-24 → --space-16, both steps of the scale) and
   the same voice, because a rail must not hold two different ways
   of saying «what follows is a group». It is not a link and never
   was one: the two entries that used to point at
   components.html#base and #composite are gone with this wave. */
.oro-navgroup--sub { margin-top: var(--space-16); }

.oro-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--zinc-700);
  transition:
    background-color var(--mo-micro) var(--mo-move),
    border-color var(--mo-micro) var(--mo-move),
    color var(--mo-micro) var(--mo-move);
}
.oro-link:hover { background: var(--zinc-100); color: var(--zinc-900); }

/* ACTIVE = STATE, and state speaks in the accent (Ton-5: "активный
   пункт меню" is named in the principle by name). The fill and the
   hairline are the portal sidebar's own active pair, Blue 50 over
   Blue 200 (tokens.css: "Blue = CTA and sidebar active state").
   Zinc 100 is not used here: it is the HOVER, and a grey active
   item would contradict the very rule the About page states three
   screens to the right. */
.oro-link[aria-current="page"] {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-700);
  font-weight: 500;
}
.oro-link[aria-current="page"]:hover { background: var(--blue-50); color: var(--blue-700); }

/* A section that is not written yet. It refuses every affordance —
   no hover, no pointer — and says so with a plaque in the eyebrow
   voice on a Zinc 100 ground. The hub's own COMING SOON card,
   shrunk to a line. */
.oro-link--soon { color: var(--zinc-400); cursor: default; }
.oro-link--soon:hover { background: transparent; color: var(--zinc-400); }
.oro-soon {
  flex: 0 0 auto;
  padding: 3px 6px;
  background: var(--zinc-100);
  border-radius: var(--radius);
  /* The plaque already spoke in the eyebrow voice everywhere but the size:
     10px was a rung below the floor, and this is the word that tells a
     reader a whole section is missing. Eyebrow 12, like every other caps
     label in the system. */
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--zinc-400);
}

/* The caption over a run of links. It used to be declared together
   with the title of the page contents, back when the contents hung
   under the sections in this same rail; gbppl-oro-toc-1 took the
   contents out of the rail (see THE CONTENTS, further down) and the
   caption stayed here alone, with the only thing it captions. */
.oro-navgroup {
  display: block;
  margin-bottom: var(--space-8);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--zinc-400);
}

/* ---- The door back ----
   Ушла с hub-9 (Тон 24.08). Дверь назад в студию теперь несёт
   студийный бар над витриной: замок GildedBox | DESIGN STUDIO,
   три пункта навигации и LOCK. Ссылка «← Design Studio» внизу
   рельсы была бы четвёртым способом сделать то же самое, причём
   единственным, который выглядит не как навигация студии. */

/* ============================================================
   THE COLUMN
   ------------------------------------------------------------
   860px is a layout measure: the width at which a 16px Inter
   paragraph runs about 90 characters, which is where this kind of
   document reads. The system's container ladder is not used —
   it describes the product's full-bleed pages, not a document.
   ============================================================ */
.oro-main { flex: 1 1 auto; min-width: 0; padding: 40px 16px 0; }
@media (min-width: 1024px) { .oro-main { padding: 64px 40px 0; } }
@media (min-width: 1600px) { .oro-main { padding: 80px 64px 0; } }
.oro-col { max-width: 860px; }

/* ============================================================
   THE CONTENTS OF THIS PAGE (gbppl-oro-toc-1)
   ------------------------------------------------------------
   Ton, 29.08: «Навигация On this page у нас в левом меню, что
   неправильно. Навигацию по странице не нужно смешивать с
   навигацией по страницам. Если она есть, делать как плавающий
   sticky navbar справа с table of contents этой страницы.» And,
   choosing between two drafts the same morning: it is a BLOCK, a
   card on the ground of the page («грунт Zinc 50 или белый с
   волоском Zinc 200, --radius, паддинг --space-24, как карточки
   реестра»), standing beside the document at rest and pinning
   itself under the bar as the reader goes down. Not a bare list
   floating in the margin, and no shadow: a card, not a popover.

   WHY THE SURFACE IS .oro-card's. Zinc 50 is already spoken for on
   this screen: it is the ground of the rail. A second Zinc 50 block
   on the other side of the text would read as a second rail. White
   over a Zinc 200 hairline is the quiet card this document already
   draws on, and reusing it is the rule (Ton-14: the studio reuses
   its own patterns before it draws a new one). The only value that
   is not the card's is the padding, --space-24 at every width,
   because a list of links has no reason to change its gutter.

   THE THIRD COLUMN STARTS AT 1600, MEASURED, NOT FELT. The
   showcase column today is 921.5 at 1280 and 1180 from 1600 up
   (headed Chrome, 28.08 build, scrollbar included). A contents
   card of 240 plus a 24 gutter takes 264 out of the row, so:
     · 1280 → 921.5 − 264 = 657.5, the document loses a third
     · 1440 → 1081 − 264 = 817, still under the 1280 reading
     · 1600 → 1193 − 264 = 929, ABOVE the 1280 reading (921.5)
     · 1920 → 1513 − 264 = 1249, over the 1180 cap: unchanged
   1600 is therefore the first width where the card costs the
   document nothing it did not already have at 1280, and it is a
   step this file already keeps (the main padding opens up there).
   Below it the card lies down into a row of chips over the
   document, which is the same block, the same eyebrow and the same
   links, laid along instead of down.

   240 IS MEASURED TOO: «Composite components», the longest entry
   in the showcase, sets at 161.2px in the active weight; the card
   spends 24 + 24 on its gutters, 1 on the indent hairline, 16 + 8
   on the link, and 240 leaves 167. The next step up (248) fails
   the 1600 test above by half a pixel.
   ============================================================ */
.oro-toc {
  margin: 0 0 var(--space-32);
  padding: var(--space-24);
  background: var(--white);
  border: 1px solid var(--zinc-200);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}
/* The block is written by oro.js and stays out of the page until it
   has something to say; without this the display above would beat
   the attribute. */
.oro-toc[hidden] { display: none; }

.oro-toc-title { flex: 0 0 auto; }

/* Laid along, over the document: the row scrolls INSIDE ITSELF, so
   a page with fourteen sections never gives the document a
   horizontal scrollbar of its own. */
.oro-toc-list {
  display: flex;
  flex-direction: row;
  gap: var(--space-16);
  overflow-x: auto;
  /* Thin, not hidden: a row that scrolls and does not say so is a
     row whose last four entries do not exist. */
  scrollbar-width: thin;
  min-width: 0;
}
.oro-toc-link {
  flex: 0 0 auto;
  padding: var(--space-8) 0;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: var(--zinc-600);
  white-space: nowrap;
  /* The studio's one way of saying «this one, in a row»: the
     underline of .gbdoc-seg.is-on, 2px of Blue 600 (docs.css). */
  border-bottom: 2px solid transparent;
  transition:
    color var(--mo-micro) var(--mo-move),
    border-color var(--mo-micro) var(--mo-move);
}
.oro-toc-link:hover { color: var(--zinc-900); }
.oro-toc-link.is-here { color: var(--blue-600); font-weight: 600; border-bottom-color: var(--blue-600); }
/* In a row the levels are not indented: an indent along the
   horizontal reads as a gap, not as a rank. The sub links stay in
   document order and the rank comes back the moment the block
   stands up. */

@media (min-width: 1600px) {
  /* The row of the showcase becomes three: rail, document, contents.
     Order, not markup order: the block is written FIRST in the page
     so that below 1600 it lies over the document without any
     reordering at all, and only here does it move to the right. */
  .oro-main { display: flex; align-items: flex-start; gap: var(--space-24); }
  .oro-col { order: 1; flex: 1 1 auto; min-width: 0; }
  .oro-toc {
    order: 2;
    flex: 0 0 calc(var(--space-48) * 5);   /* 240, measured above */
    margin: 0;
    position: sticky;
    /* The bar is 80 and sticky, so the card stops one gutter under
       it and stays there. */
    top: calc(var(--header-h) + var(--space-24));
    max-height: calc(100vh - var(--header-h) - var(--space-24) * 2);
  }
  /* Standing up, the list is a column again, and the rank comes
     back as an indent against a hairline. The active entry lights
     the hairline beside it in Blue 600 (Ton-5: active is state, and
     state speaks in the accent) instead of the underline it wears
     lying down. */
  .oro-toc-list {
    flex-direction: column;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
  }
  .oro-toc-link {
    padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
    border-bottom: 0;
    border-left: 1px solid var(--zinc-200);
    white-space: normal;
  }
  .oro-toc-link:hover { border-left-color: var(--zinc-400); }
  .oro-toc-link.is-here { border-left-color: var(--blue-600); }
  .oro-toc-link--sub { padding-left: var(--space-32); }
  .oro-toc-link--sub2 { padding-left: var(--space-48); }
}

/* ---- Head of the page ---- */
.oro-head { padding-bottom: 36px; border-bottom: 1px solid var(--zinc-200); }
.oro-h1 {
  margin: 14px 0 0;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
}
@media (min-width: 1280px) { .oro-h1 { font-size: 42px; } }
.oro-lede {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--zinc-500);
}

/* ============================================================
   SECTIONS AND THEIR HEADS (gbppl-oro-heads-1, Ton 29.08)
   ------------------------------------------------------------
   Ton, third time on the same place: «Заголовки секций внутри
   страницы (Overview, Playground) я вообще не вижу. Ты сделал их
   eyebrow, а это не должно быть eyebrow. Я не понимаю, где одна
   секция заканчивается и где начинается другая. Eyebrow никогда не
   может быть заголовком; он может идти вместе с заголовком, чтобы
   его объяснить.»

   So a section on every showcase page is now one shape:

     <section id data-toc>
       <span class="gb-eyebrow">Playground</span>   the caption
       <h2 class="oro-h2">Build a button...</h2>    the name
       ...
     </section>

   The eyebrow explains, the serif names. Nothing on these pages
   uses the eyebrow role alone to open a section any more.

   THE BOUNDARY IS DRAWN, NOT FELT. A reader must not have to read
   two headings to find out that one section ended. Every section
   after the first carries a Zinc 200 hairline with --space-64 of
   air above it and --space-32 below (--space-48 from 1280, where
   the title itself steps 24 to 28). The air is deliberately NOT
   symmetric around the rule: the rule belongs to the head under it,
   the way the page head's own hairline belongs to the first section.
   The first section of a page draws no rule of its own, because
   .oro-head already ended in one.
   ============================================================ */
.oro-section {
  margin-top: var(--space-64);
  padding: var(--space-32) 0 0;
  border-top: 1px solid var(--zinc-200);
}
@media (min-width: 1280px) { .oro-section { padding-top: var(--space-48); } }
/* The page head ends in the hairline this section would otherwise
   draw: two rules --space-32 apart is a mistake, not a rhythm. */
.oro-head + .oro-section { margin-top: 0; border-top: 0; }

/* ---- The shelf is gone (gbppl-oro-cards-1, 28.08) ----
   .oro-shelf and .oro-shelf__line held the three level shelves of
   gbppl-oro-levels-1: a hairline, 64 of air, an Eyebrow over an
   .oro-h2 and a paragraph explaining what a level is. Ton settled
   the Components section that afternoon: an opening page plus a page
   per component, and no intermediate catalogue of big shelves. The
   level is now one Eyebrow across a row of the grid
   (.gbdoc-reg__group in docs.css), the paragraphs are gone, and both
   rules went with their only consumer rather than staying here dead.

   ---- Sections ---- (the rule itself now stands above, with the
   paragraph that explains it) */
/* .oro-h2 IS the section title of a showcase. .gbdoc-sub + .oro-h3 is
   the same title on a page this wave has not rewritten yet (select and
   input number are being written by another wave at this hour): the old
   caption keeps its place as the eyebrow and the line under it becomes
   the title, with no markup change at all. One declaration, two names,
   so the bridge cannot drift from what it bridges to. */
.oro-h2,
.gbdoc-sub + .oro-h3,
.gbdoc-sub:not(:has(+ .oro-h3)) {
  margin: 12px 0 0;
  text-transform: none;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--zinc-900);
}
@media (min-width: 1280px) {
  .oro-h2,
  .gbdoc-sub + .oro-h3,
  .gbdoc-sub:not(:has(+ .oro-h3)) { font-size: 28px; }
}
/* A caption with nothing under it was never a caption: it was the
   section's only name. So a lone .gbdoc-sub IS the title and reads as
   one, and it keeps the boundary docs.css gave it (the shorthand margin
   above would have taken it away). A .gbdoc-sub that does have a title
   under it stays the eyebrow it should be. Two pages are held up by
   these two rules while another wave has them open; when their markup
   is rewritten, both selectors go. */
.gbdoc-sub:not(:has(+ .oro-h3)) {
  margin-top: var(--space-64);
  padding-top: var(--space-32);
  border-top: 1px solid var(--zinc-200);
  color: var(--zinc-900);
}
@media (min-width: 1280px) {
  .gbdoc-sub:not(:has(+ .oro-h3)) { padding-top: var(--space-48); }
}
.gbdoc-card > .gbdoc-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.oro-h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1px;
  color: var(--zinc-900);
}
.oro-p {
  margin: 18px 0 0;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--zinc-700);
}
/* Роль ссылки в тексте. Класс .oro-a — та же роль для ссылки,
   которая стоит не в абзаце (в списке, в подписи): до hub-9 такая
   ссылка на странице About носила эти две строки инлайном в
   атрибуте style, то есть держала копию правила рядом с правилом. */
.oro-p a,
.oro-a {
  color: var(--blue-700);
  border-bottom: 1px solid var(--blue-200);
  transition: border-color var(--mo-micro) var(--mo-move);
}
.oro-p a:hover,
.oro-a:hover { border-bottom-color: var(--blue-700); }
.oro-note {
  margin: 18px 0 0;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--zinc-500);
}
.oro-strong { font-weight: 600; color: var(--zinc-900); }

/* A quiet card, the one surface this document draws on. Zinc 200
   hairline, the 5px brand radius, white ground — the hub door at
   rest, without the hover it has no business offering. */
.oro-card {
  background: var(--white);
  border: 1px solid var(--zinc-200);
  border-radius: var(--radius);
  padding: 20px;
}
@media (min-width: 1280px) { .oro-card { padding: 24px; } }

/* ---- The foot ---- */
.oro-foot {
  margin-top: 64px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--zinc-200);
  /* 13px Zinc 400 was the exact shape of Russell's "small faint text means
     I do not matter". The secondary role is 14, and the ink one step up. */
  font-size: 14px;
  letter-spacing: 0.2px;
  color: var(--zinc-500);
}
.oro-foot a { border-bottom: 1px solid var(--zinc-200); }
.oro-foot a:hover { color: var(--zinc-700); border-bottom-color: var(--zinc-400); }

/* Ton-7 says the SIGNATURE ignores reduced-motion. Nothing on
   these pages is the signature: the rail hovers and the copy
   toast are utility micro-motion, and utility motion is allowed
   to be polite. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}