/* ============================================================
   gbppl-comments-b — COMMENT MODE, THE PIN AND THE THREAD
   ------------------------------------------------------------
   Ton, 27.08: «комментарий принадлежит объекту (строке текста,
   элементу); видно, кто оставил; на комментарии можно отвечать,
   мини-диалог». Spec: studio\docs\COMMENT-MODE-SPEC.md.
   Behaviour and the whole of the mode: comments.js.

   gbppl-comments-c, 28.08: two answers to Ton on the day. The status
   chip goes quieter inside the console (THE STATUS CHIP), and the free
   text field of the drawer moves onto the variant the live lead form
   wears (THE FREE TEXT FIELD). Nothing else moved.

   gbppl-comments-dress-1, 01.09: Ton, «Drawer с комментами выглядит
   каким-то немножечко кривым... переключение модов выглядит тоже
   странным... окно input-текста тоже какое-то кривоватое». Three
   answers, all of them a change of DRESS and none of them a new
   drawing: the fields come back onto the default field of the system
   with one label voice (comments.js, fieldBlock), the kind switch
   becomes the system Toggle button, and the whole body of the drawer
   is brought onto ONE COLUMN and ONE RHYTHM. The two sections that
   carry it are THE ONE COLUMN and THE RHYTHM, below.

   gbppl-comments-hitbox-1, 01.09: the same drawer, three hours later
   and in front of the client. Ton: «Тыкал по полям, но туда ничего
   не нажимается» and «Не могу нормально навести курсор на кнопку
   Resolve». A dressed drawer you cannot hit is worse than an
   undressed one you can, and both faults were here, in this file:
   an eight pixel dead band the label's margin left under every caps
   line (THE WHOLE ROW IS THE FIELD), and a blanket `default` cursor
   that reached every child of every control in the drawer, taking
   the caret off the fields and the pointer off the button labels
   (AND A CONTROL ANSWERS FOR ITS OWN INSIDES). Neither organism was
   at fault and neither was touched.

   gbppl-comments-hover-1, 02.09: Ton, «я бы хотел, чтобы комменты
   было видно по hover... как в Figma: появляется bubble с текстом
   коммента». One new drawing, THE BUBBLE ON HOVER, and it is the
   instrument's own plate grown a paragraph, not a fourth surface.

   gbppl-comments-layer-1, 07.10: the reviewer on Start 227 clicked
   Logo 1 in comment mode and saw nothing. The pin (56) and the
   thread drawer (81) were painted under the page's full screen
   window (customizer and Sandbox V3 window, 1000; the email sheet
   stands at 1101). The studio does not argue with a page's window
   for a place: every studio layer now stands in ONE BAND above the
   page band, each one at its old number plus 1100, so the order of
   the studio's own layers among themselves is the order it was
   (pins under the device stage, under the drawer, under the
   instrument, under the console). The band is written out once, in
   THE LAYER AND THE PIN below; the console climbed from 1102 to 1202
   to stay over the drawer it always stood over.

   WHAT THIS FILE DRAWS, AND WHAT IT DELIBERATELY DOES NOT.
   Four things are new here and nothing else: the pin on the page,
   the bubble it shows under the pointer, the shelf of threads in the
   console, and the thread inside the drawer. The hairline round the hovered element and the plate that
   names it are Inspect's and are drawn by Inspect (inspect.css); the
   segment of the Mode toggle is the console's (studio-panel.css); the
   fields are auth.css, the buttons are button.css, the Note | Suggest
   text control is the system Toggle button (toggle.css, since
   gbppl-comments-dress-1), and the drawer is drawer.css. Тон-14,
   пункт 2: сначала ищем среди существующих классов, заводим своё
   только с записью, почему не подошло.

   THE LAYER SITS INSIDE <gb-studio-panel>. Ловушка 19 скилла: a layer
   hung on document.body reads the bundle's --space-* on the vendored
   catalog. The host is display: contents, so a fixed child of it is
   laid out exactly as it would be in the body, and the scale is ours.

   THE LENGTHS. Every one is a rung (--space-*, --radius, the type
   floor 12) or carries a NO TOKEN line saying which drawing it
   belongs to. The three NO TOKENs of this file are the z-index of the
   layer, the width of the pin's ring, and the two-pixel underline
   offset the console's segments already use.
   ============================================================ */

/* ============================================================
   THE LAYER AND THE PIN
   ------------------------------------------------------------
   z 1156 (gbppl-comments-layer-1, 07.10; was 56). A pin has to be
   visible over the page, the page's own windows included, and must
   never cover the switch that turns it off.
   NO TOKEN: the system has no z-index scale (tokens.css has none).
   The numbers form two bands and this one belongs to the list, not
   to a length scale:
     PAGE BAND, up to 1101: header 31, page drawers 80/81, auth 999,
       the full screen windows of a prototype 1000 (customizer,
       Sandbox V3 window), their sheets 1001-1003, email sheet 1101.
     STUDIO BAND, the old studio number plus 1100, so nothing in the
       studio changed places with anything else in the studio:
       pins 1156 (here), device stage 1158 and its bar 1159
       (studio-panel.css), the instrument's drawer 1180/1181 and its
       overlay 1185 (inspect.css), the console 1202 and its snap
       outline 1203 (studio-panel.css).
   A page that needs a window over 1101 is a question for the band,
   not a new number: the studio has to stay over it.
   ============================================================ */
.gbc-layer {
  position: fixed;
  inset: 0;
  z-index: 1156;                /* NO TOKEN: studio band, see above */
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-sans);
}
.gbc-layer[hidden] { display: none; }

/* 24 = --space-24, the same rung the console's rotate button stands
   on (.gbsp-tb__rot). A pin is a target as much as a mark: at 24 it
   is still hittable on a phone and still small enough to sit on a
   line of text without covering the word it is about. */
.gbc-pin {
  position: absolute;
  width: var(--space-24);
  height: var(--space-24);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* NO TOKEN on the 1px ring: it is the same white ring the count
     badge wears (--count-badge-ring) so a blue disc stays legible on
     a dark photograph, but that token is the badge's own slot and
     borrowing another component's slot is not reuse. */
  border: 1px solid var(--white);
  border-radius: var(--radius-circle);
  background: var(--blue-600);
  box-shadow: var(--shadow-panel);
  color: var(--white);
  font-family: inherit;
  font-size: 12px;              /* the floor of the system, as .gbi-num */
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--mo-micro) var(--mo-move),
              transform var(--mo-micro) var(--mo-move);
}
.gbc-pin:hover { background: var(--blue-700); }
.gbc-pin:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* Resolved is not a state you are in, it is a state you left, and
   blue in this system means live state (Тон-5). So a settled pin
   goes grey and stops asking for the eye. */
.gbc-pin.is-done { background: var(--zinc-500); }
.gbc-pin.is-done:hover { background: var(--zinc-600); }

/* The one whose thread is open on screen. NO TOKEN on the 2: it is
   the ring width the system already draws round a focused segment
   (.gbsp-seg / .gbdoc-seg :focus-visible), not a gap in a layout. */
.gbc-pin.is-open { box-shadow: 0 0 0 2px var(--blue-200), var(--shadow-panel); }

/* Not posted yet: no number, because it has none, and dashed,
   because it is a proposal and not a record. */
.gbc-pin--new {
  background: transparent;
  border: 1px dashed var(--blue-600);
  box-shadow: none;
  pointer-events: none;
}

/* ============================================================
   THE DRAWER NEVER COVERS WHAT IT IS ABOUT (gbppl-comments-side-1, 12.10)
   ------------------------------------------------------------
   Ton, 12.10: the thread on Start 227 opened over the right panel,
   and the note it was about stood under the drawer. The rule and its
   numbers live in comments.js (same name); this is its dress.

   THE LEFT SIDE. The organism's panel, mirrored: it stands on the
   left edge (after the console's rail when the rail is docked left,
   --gbc-inset set by the script) and enters and leaves through that
   edge on the organism's own clocks. Only the instrument's host
   (data-gbd-tag="gbi") ever wears it; a page's own drawers keep their
   one side. The is-open rule is repeated here because this selector
   outranks drawer.css's .gbd-panel.is-open. */
.gbd-panel[data-gbd-tag="gbi"][data-gbc-side="left"] {
  right: auto;
  left: var(--gbc-inset, 0px);
  transform: translateX(calc(-100% - var(--gbc-inset, 0px)));
}
.gbd-panel[data-gbd-tag="gbi"][data-gbc-side="left"].is-open { transform: translateX(0); }

/* THE MARK. While a thread or a form is open, the scrim is cut round
   the element (the hole, comments.js) and this ring stands on the
   hole's edge, inside the light. Blue 600 is the instrument's own
   line for «this one» (.gbi-box); NO TOKEN on the 2: the ring width
   the open pin and a focused segment already draw. Square, like the
   instrument's box, so the ring and the hole are one rectangle. */
.gbc-mark {
  position: absolute;
  box-shadow: inset 0 0 0 2px var(--blue-600);
  pointer-events: none;
}

/* THE PEEK. On the phone the drawer is the screen, so the element it
   is about cannot be beside it. The first line of the body says which
   one: its role and its words in quotes, held at the top while the
   thread scrolls. Dressed as the drawer's own band (the foot: Zinc 50
   with a Zinc 200 hairline), 14 on 1.5 like every aside line here,
   two lines at most. Over 767 the element is on screen and lit, and
   the peek is not drawn. */
.gbc-peek { display: none; }
@media (max-width: 767px) {
  .gbc-peek {
    --gbc-peek-gutter: var(--space-24);   /* the body's own padding at this width (drawer.css) */
    position: sticky;
    top: calc(-1 * var(--gbc-peek-gutter));   /* the sticky edge is the body's padding edge: the strip rides the very top */
    z-index: 1;
    display: block;
    margin: calc(-1 * var(--gbc-peek-gutter)) calc(-1 * var(--gbc-peek-gutter)) var(--space-16);
    padding: var(--space-8) var(--gbc-peek-gutter);
    border-bottom: 1px solid var(--zinc-200);
    background: var(--zinc-50);
    font-size: 14px;
    line-height: 1.5;
    color: var(--zinc-600);
  }
  .gbc-peek__line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .gbc-peek__role { font-weight: 600; color: var(--zinc-900); }
}
@media (max-width: 639px) {
  .gbc-peek { --gbc-peek-gutter: var(--space-16); }
}

/* ============================================================
   THE BUBBLE ON HOVER (gbppl-comments-hover-1, 02.09)
   ------------------------------------------------------------
   Ton, 02.09: «я бы хотел, чтобы комменты было видно по hover:
   припинили коммент на canvas — навести курсор и увидеть, кто что
   писал, без клика. Как в Figma: появляется bubble с текстом
   коммента, и с большого расстояния, не нажимая на каждый, сразу
   видишь суть.»

   IT IS THE INSTRUMENT'S PLATE, GROWN A PARAGRAPH. .gbi-badge is
   already the studio's answer to «name the thing under the pointer»:
   Zinc 950, --radius, --shadow-panel, ink 12 for the meta. This
   bubble answers the same kind of question about the same kind of
   object, so it speaks in that voice and adds exactly two things the
   badge never needed — a line of running text at the documentation
   size, and a wrap.

   AND THE DARK GROUND IS A MEASUREMENT, NOT A MOOD. The bubble hangs
   over WHATEVER is under the pin: the white catalog, the near black
   home hero, a photograph inside a listing card. Zinc 950 with
   --shadow-panel keeps an edge on all three; a light card keeps none
   on the first — which is the reason the console itself is dark
   (gbppl-panel-3, Ton 26.08: «белый на белом не видно»). The light
   surface of this mode is spoken for: it belongs to the drawer, and
   the drawer opens on a CLICK. Reading and working are not the same
   loudness.

   NO TAIL, NO BORDER, NO POINTER. `pointer-events: none` — you
   cannot land in it and never need to; every action of a thread
   lives one click away. The clamp is three lines: the shelf in the
   console already cuts a preview at 60 characters and Ton reads
   these from across the room, so the bubble cuts at a line end
   instead, and the rest waits in the drawer.

   THE LENGTHS. --space-8 / --space-16 / --space-64 and the type
   floor 12; the max width is five rungs of 64 (320) — wide enough
   for about a dozen words a line at 14, narrow enough that two
   bubbles could never stand side by side and be confused for one
   surface. Read on the island, never off :root (ловушка 21в): the
   flip in comments.js takes the same two rungs with
   getComputedStyle on .gbc-layer.
   ============================================================ */
.gbc-bubble {
  position: absolute;
  box-sizing: border-box;
  max-width: calc(var(--space-64) * 5);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius);
  background: var(--zinc-950);
  box-shadow: var(--shadow-panel);
  color: var(--white);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--mo-micro) var(--mo-move);
}
.gbc-bubble.is-in { opacity: 1; }

/* The head of a message, compressed: the same order, the same ink
   and the same 8 under it as .gbc-msg__by wears in the drawer. */
.gbc-bubble__by {
  margin: 0 0 var(--space-8);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--white);
}
.gbc-bubble__by time,
.gbc-bubble__n {
  margin-left: var(--space-8);
  font-weight: 400;
  color: var(--zinc-400);
}
.gbc-bubble__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--zinc-200);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;   /* одно длинное слово не растягивает плашку */
}
/* A bubble with no text under the head (a suggestion whose «why» is
   empty draws nothing) must not keep the gap the head reserves. */
.gbc-bubble__by:last-child { margin-bottom: 0; }

/* The page while a comment is being placed. Same crosshair Inspect
   uses and for the same reason: the pointer is choosing an object,
   not following a link. The console, the drawer and the pins keep
   their own pointer — they are the things you still operate. */
html.gbc-on,
html.gbc-on * { cursor: crosshair !important; }
html.gbc-on :is(.gbsp, .gbsp-stage, .gbd-panel, .gbd-scrim, .gbc-layer),
html.gbc-on :is(.gbsp, .gbsp-stage, .gbd-panel, .gbd-scrim, .gbc-layer) * { cursor: default !important; }

/* ============================================================
   AND A CONTROL ANSWERS FOR ITS OWN INSIDES
                              (gbppl-comments-hitbox-1, 01.09)
   ------------------------------------------------------------
   Ton, live in front of the client: «Не могу нормально навести
   курсор на кнопку Resolve. Навожу, а стрелочка часто остаётся
   обычной, не меняется на pointer. Это или ошибка нашего компонента
   Outline Button, или конкретно этой кнопки.» Neither. It is this
   block, and the arithmetic says so.

   The line above hands `default` to EVERY DESCENDANT of the console
   and the drawer, weight (0,2,1). The line that gave the buttons
   their pointer reached the BUTTON only, weight (0,2,2) — and a
   button in this house is never one node: `.gb-btn` carries a
   `.gb-btn__label` span, `.gb-btn--icon` carries an `<svg>` with its
   `<path>`. Those children matched the first rule and nothing else,
   so the pointer lived in the padding and died on the word. Measured
   before the fix, thread drawer at 1280: Resolve 28 of 35 sample
   points pointer, the three over the letters `default`; the close
   cross 15 of 35, the whole glyph `default`. Outside Comment mode
   the same label reads `pointer` on every page of the studio (the
   organism declares `cursor: pointer` on `.gb-btn` and cursor
   inherits), so nothing is wrong with button.css and nothing was
   touched there.

   AND A FIELD AIMS LIKE A FIELD. Same rule, other half of the same
   complaint: «вообще не понимаю, куда там целиться». The blanket
   `default` also took the I-beam off the inputs — a text field in
   Comment mode was pointing at itself with an arrow, on all 81
   sample points of both fields. `.gba-input` is the field class of
   the house, so the rule is written on it and not on the tag: a
   checkbox that arrives in the console later must not inherit a
   caret. The label of a field is part of the same target (see THE
   WHOLE ROW IS THE FIELD, below) and aims with it.

   OPEN TO TON: the same caret on `.gba-label` at the OWNER, so a
   label reads the same on the login, the gate and the checkout.
   Browsers point an arrow at a `<label>` by default, so this is a
   departure and not a bug fix; here it is scoped to the drawer,
   where the label and its air are one row with the control.
   ============================================================ */
html.gbc-on :is(.gbsp, .gbd-panel) :is(a, button),
html.gbc-on :is(.gbsp, .gbd-panel) :is(a, button) *,
html.gbc-on .gbc-pin { cursor: pointer !important; }

html.gbc-on :is(.gbsp, .gbd-panel) .gba-input,
html.gbc-on .gbd-panel .gbc-field > .gba-label { cursor: text !important; }

/* A locked form says so with the pointer too. `.gb-btn:disabled`
   needs no line of its own: the organism takes it out of
   `pointer-events`, so the pointer reads the row underneath, which
   is already `default`. */
html.gbc-on .gbd-panel .gba-input:disabled,
html.gbc-on .gbd-panel .gbc-form.is-down .gbc-field > .gba-label { cursor: not-allowed !important; }

/* SELECTION: MUTED ON THE PAGE, ALIVE ON THE INSTRUMENT.
   gbppl-inspect-select-1, the twin of the block in inspect.css and
   the same finding. The first line paints the highlight transparent
   and used to have no scope at all, so the text of a thread could be
   dragged over and copied and the screen showed nothing back. The
   mute belongs to the PAGE, where a drag is the aiming gesture of
   Comment mode and mousedown is cancelled for it. In the console and
   in the thread drawer the highlight is painted back in Blue 200:
   a selection is a state, and state is blue (Ton-5). */
html.gbc-on ::selection { background: transparent; }
html.gbc-on :is(.gbsp, .gbd-panel)::selection,
html.gbc-on :is(.gbsp, .gbd-panel) ::selection {
  background: var(--blue-200);
  color: var(--zinc-900);
}

/* The pointer says so before the drag begins. Everything in the body
   and the foot of the drawer is prose, a name or a number — the line
   that says which element the thread is about, the author, the time,
   the message — and it reads as text. The fields, the buttons and the
   locked form keep the pointers the three blocks above give them:
   each of those is one element or one class more specific than this
   line, which is written at (0,2,1) on purpose so it can only ever
   beat the blanket `default` it is answering. */
html.gbc-on :is(.gbd-body, .gbd-foot),
html.gbc-on :is(.gbd-body, .gbd-foot) * { cursor: text !important; }

/* ============================================================
   THE SHELF IN THE CONSOLE
   ------------------------------------------------------------
   Its furniture is the console's own: .gbsp-trough with .gbsp-cell
   for the filter (gbppl-panel2-build-1: the same figure Mode and
   Device wear), .gbsp-link for a row, .gbsp-note for the count.
   Everything below is what those classes cannot say — a row of two
   lines, a number in front of it, a status chip.
   ============================================================ */
.gbc-count { font-variant-numeric: tabular-nums; }
.gbc-count[hidden] { display: none; }

/* Счёт стоит над жёлобом и прижат к нему ступенью; своего верхнего
   поля у него нет — его даёт поле полки. */
.gbc-count { margin: 0 0 var(--space-8); }

.gbc-filter { margin-bottom: var(--space-8); }

.gbc-list { margin-top: var(--space-8); }

.gbc-item {
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
}
.gbc-item__head,
.gbc-item__line { display: block; }
.gbc-item__head {
  font-size: 12px;
  line-height: 1.4;
  color: var(--zinc-400);
}
.gbc-item__n {
  margin-right: var(--space-8);
  color: var(--blue-400);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gbc-item__line {
  font-size: 14px;
  line-height: 1.4;
  color: var(--zinc-200);
}
/* gbppl-comments-place-1 (12.10): where the comment was left (page,
   screen, element and its words), under its line. The head's role,
   word for word: a third voice in a row of two would be louder than
   the fact it carries. */
.gbc-item__place {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--zinc-400);
}
.gbc-empty {
  padding: var(--space-8) 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--zinc-500);
}

/* ============================================================
   THE STATUS CHIP, ON BOTH GROUNDS
   ------------------------------------------------------------
   The same chip is read in two places with opposite grounds: the
   console is Zinc 950, the drawer is white. One class, two grounds,
   declared in that order — base for the light surface, override
   inside the console — rather than two classes saying one thing.
   ============================================================ */
.gbc-chip {
  display: inline-block;
  margin-left: var(--space-8);
  padding: 0 var(--space-8);
  border-radius: var(--radius);
  background: var(--zinc-100);
  color: var(--zinc-600);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  line-height: 1.6;
  text-transform: uppercase;
  vertical-align: baseline;
}
/* gbppl-comments-c, 28.08. In the console the chip was louder than the
   line it labels: a Zinc 800 plate stood off the Zinc 950 ground and, in a
   216px box, took a line of its own. THE PLATE was the shouting half, not
   the ink, so the plate is the half that moves: one rung down the same
   scale, onto the ground it sits on, no new numbers. The ink stays Zinc
   400. Dropping it too (tried, measured) puts 12px 600 caps at 3.8:1 on
   Zinc 900 — quieter and unreadable is not quieter. The light ground is
   untouched: Eyebrow on a Zinc 100 plate is the shape Ton described, and
   in the white drawer it never shouted. */
/* The hover bubble is the third ground, and it is the console's: one
   selector gains one name rather than a fourth chip being drawn
   (gbppl-comments-hover-1). */
.gbsp .gbc-chip,
.gbc-bubble .gbc-chip { background: var(--zinc-900); color: var(--zinc-400); }
.gbc-chip--lost { background: var(--zinc-200); color: var(--zinc-700); }
/* One rung louder than a plain status on both grounds: "element moved" is
   a warning about the anchor, not a state of the thread. */
.gbsp .gbc-chip--lost { background: var(--zinc-800); color: var(--zinc-300); }

/* ============================================================
   THE THREAD IN THE DRAWER
   ============================================================ */
.gbc-msg { margin: 0 0 var(--space-16); }
.gbc-msg:last-of-type { margin-bottom: var(--space-24); }

/* A reply is the same message one step in, and the step is drawn by
   a hairline rather than by a second card: the drawer is 520 wide
   and a nested box would eat it. */
.gbc-msg--reply {
  padding-left: var(--space-16);
  border-left: 1px solid var(--zinc-200);
}

.gbc-msg__by {
  margin: 0 0 var(--space-8);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--zinc-900);
}
.gbc-msg__by time {
  margin-left: var(--space-8);
  font-weight: 400;
  color: var(--zinc-500);
}
.gbc-msg__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--zinc-800);
  white-space: pre-wrap;
}

/* WAS AND NOW. Two rows, one grid, the key in the eyebrow voice: a
   suggestion is only readable when the two versions stand one under
   the other and start at the same column. */
.gbc-diff {
  margin: 0 0 var(--space-16);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius);
  background: var(--zinc-50);
}
.gbc-diff__row {
  display: flex;
  gap: var(--space-16);
  margin: 0;
  padding: var(--space-8) 0;
  font-size: 15px;
  line-height: 1.5;
}
.gbc-diff__row + .gbc-diff__row { border-top: 1px solid var(--zinc-200); }
.gbc-diff__k {
  flex: 0 0 var(--space-48);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--zinc-500);
}
.gbc-diff__v { flex: 1 1 auto; min-width: 0; color: var(--zinc-500); }
.gbc-diff__v--new { color: var(--zinc-900); }
/* The same block inside the FORM is a row of the form, and rows of a
   form are 24 apart (gbppl-comments-dress-1). Inside a posted message
   it stays 16: there it is part of the message, not a row beside one. */
.gbc-diff--live { margin-bottom: var(--space-24); }

/* ---- the form ----
   Fields are auth.css, the Post button is the organism, the kind
   switch is toggle.css. Only the rhythm and the things those files
   cannot know about live here.

   ============================================================
   THE RHYTHM (gbppl-comments-dress-1, 01.09)
   ------------------------------------------------------------
   Every gap in this drawer was 16, from the line under the title to
   the button at the bottom, so nothing grouped: the two lines that
   say WHAT THIS IS stood as far from each other as they stood from
   the form, and the three rows of the form stood as close to each
   other as the label stands to its own field. A form in this house
   has two gaps and they are tokens: --form-block-gap 32 between
   blocks and --form-row-gap 24 between rows (skill §5). The drawer
   spends exactly those, and the only 8 left is the one INSIDE a row,
   between a label and the control it names.

   AND IT SPENDS THEM AS THEIR RUNGS, NOT BY THEIR NAMES — ловушка 21,
   found by running this wave on the vendored catalog before believing
   it. --form-row-gap is DERIVED: tokens.css declares it on :root as
   var(--space-24), a custom property is substituted where it is
   DECLARED, and on live/catalog/index.html the bundle owns --space-24
   on :root at 96. oro-ui-override.css hands our scale back on the
   islands, but by then the derived name has already computed, and it
   inherits into the drawer as 96. Measured with the thread open on
   the catalog at 1280: every row of this form stood 96 apart. So the
   rule is named in this comment and the rungs are spent in the rules,
   which is the only spelling that survives a page whose :root is not
   ours. The general form of it: on that page a derived token is not a
   token, and only --space-* itself is restored.
   ============================================================ */
.gbc-form { margin: var(--space-32) 0 0; }

/* ЛОВУШКА 3 СКИЛЛА: auth.css воспроизводит preflight В СВОЁМ СКОУПЕ
   (gb-guest-header / gb-auth-flow), а тред живёт в дровере, который
   стоит в body любой страницы, в том числе без reset. Без антидота
   у input и textarea остаются рамки по умолчанию, и подчёркнутое
   поле превращается в бокс. Локальный, с комментом, как велит
   ловушка.

   Второй половиной того же preflight приходит box-sizing: без него
   width 100% плюс паддинг 12 дают поле шире тела дровера ровно на
   свои поля, и подчёркивание уходит за правый край (замер 28.08 на
   live/index.html: 544 в 472). */
.gbc-form .gba-input {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-bottom-width: 1px;
}

/* ============================================================
   THE ONE COLUMN (gbppl-comments-dress-1, 01.09)
   ------------------------------------------------------------
   Ton: «окно input-текста тоже какое-то кривоватое вообще глобально
   в системе». It is, and the instrument says where: the caps label
   of a field stands 12px TO THE LEFT of its own text, because the
   label has no padding and the input has pad-x 12. Measured on
   system/oro/field.html, system/pages/auth.html, the gate and the
   portal at 1280 — label x and text x differ by exactly 12 on every
   static-label field in the house.

   AND IT IS THE CLIENT'S OWN, NOT OURS. harvest/public-login/1280
   .json, the live guest login: heading, subtitle, Google button,
   label and submit all start at x 340, and the input starts at 340
   with padding-left 12 — its text at 352 is the ONE thing on that
   page off the page's column. We copied it faithfully.

   THIS DRAWER STRAIGHTENS ITSELF AND NOTHING ELSE. Studio furniture
   lives on the system more strictly than a prototype does (Тон-14),
   and here the field stands directly under a line of running text
   that starts at the body's own edge, so the 12 is visible in a way
   it is not on a login card. Inside .gbc-form the text comes onto
   the column: sub, lede, labels, field text, button and hint all
   start on one edge, which is ловушка 16 read one level down — одна
   кромка у всех секций.

   THE SAME FIX AT THE OWNER IS TON'S CALL, NOT THIS WAVE'S: it moves
   the caret on the login, the gate, the checkout and the portal, and
   two of those pages belong to a wave in flight. Numbers and a
   three-way montage are in the report of this wave. */
.gbc-form .gba-input { padding-inline: 0; }

/* .gba-field носит поля 0 8px живой сетки Materialize: внутри формы
   лид-страницы это часть колонки, в дровере — лишний сдвиг от края
   тела. Обнуляется здесь, у потребителя, а не у владельца. */
.gbc-field { padding: 0; margin-bottom: var(--space-24); }

/* ============================================================
   THE WHOLE ROW IS THE FIELD
                              (gbppl-comments-hitbox-1, 01.09)
   ------------------------------------------------------------
   Ton, live in front of the client: «Тыкал по полям, но туда
   ничего не нажимается — практически невозможно попасть курсором в
   input.» The instrument found the hole and it is exactly eight
   pixels tall. A 4px grid over the whole block of both fields,
   thread drawer at 1280, 1056 sample points: every row hit its
   control except two — y 304..311 under the name label and y
   410..417 under the comment label, 0 of 22 each. `elementFromPoint`
   named the thief: `DIV.gba-field.gbc-field`, the wrapper itself,
   showing through the gap. Worse than dead: the drawer panel takes
   focus for a stray click inside it, so a jab at that band did not
   miss quietly, it BLURRED the field the previous jab had focused.

   The gap was this file's own — `margin-bottom` on the label. The
   other carriers of the owner measure 0 there (auth drawer, guest
   login, the gate, all four fields of the booking lead form: label
   bottom == control top), so nothing at the owner is at fault and
   nothing at the owner moves.

   The fix is the gap changing hands, not size: 8 as PADDING inside
   the `<label for>` instead of MARGIN outside it. Geometry is
   identical to the pixel (label box 18 → 26, control top where it
   always was), and the browser's own rule does the rest — a click
   anywhere in a label puts the caret in the control it names. The
   row now reads and behaves as one object from the top of its caps
   line to the underline, edge to edge of the body column, which is
   what a field with a frame does and what ours only looked like.
   ============================================================ */
.gbc-field > .gba-label { padding-bottom: var(--space-8); }

/* ============================================================
   THE FREE TEXT FIELD (gbppl-comments-c, 28.08)
   ------------------------------------------------------------
   Ton, on a screenshot of the thread drawer: «Странно выглядит и
   работает наш компонент FreeText». Two of the three answers — no
   handle and a ceiling — outgrew this file and are quoted below from
   their new home. The third — the choice of VARIANT — was reversed on
   01.09 by gbppl-comments-dress-1
   after Ton read the drawer again: the floating variant of the live
   lead form gives a floating label to the single line field and a
   static one to the multiline, which is two label voices in a form of
   two fields. The drawer wears the DEFAULT field now, one voice for
   both, and the argument is in comments.js.

   NO HANDLE, A CEILING AND SIX PIXELS: ALL THREE WENT HOME
   (gbppl-field-autogrow-1, 01.09). Ton on the multiline field: «я
   тоже склоняюсь к Auto-Grow, поле должно расти», and a behaviour the
   whole system gets cannot live in the drawer that asked for it
   first. The resize corner (it let the field grow wider than a 520px
   column), the ceiling of three rungs of 64, the scroll past it and
   the block box that ends the 6px of strut under every free text
   field are now declared once, in auth.css, on .gba-textarea. This
   drawer reads them like every other carrier and keeps only what is
   genuinely its own: the column below. The live lead form of the
   booking is the one field that stays on its own live mechanics, and
   auth.css says why on the spot.

   AND THE FLOOR CAME DOWN TO ONE LINE (gbppl-comments-hitbox-1,
   01.09). Ton: «чтобы она была растягиваемой, а не большой по
   дефолту. Это сразу сбивает, непонятно, куда ставить курсор». The
   live 80 is still the FIELD's floor; what the thread asks for is a
   different STARTING height, which is an axis and not a rewrite.
   .gba-textarea--line at the owner puts the floor on the same rung of
   the control ladder the name field stands on (48 / 56 / 64), and the
   empty drawer becomes rows of one height. Growth, the ceiling of 192
   and the quiet ground at the ceiling are untouched, and the class is
   worn by this drawer alone: the checkout keeps the live 80 until Ton
   says otherwise.
   ============================================================ */

/* A locked field says so with ink, not with a browser default grey:
   the line steps back one rung and the text and label go with it. Both
   values are rungs the field already stands on — Zinc 400 is its own
   placeholder ink, Zinc 200 one rung back from its own Zinc 400 line —
   so nothing new is declared here. */
.gbc-form .gba-input:disabled,
.gbc-form .gba-input:disabled:hover {
  border-color: var(--zinc-200);
  color: var(--zinc-400);
  cursor: not-allowed;
  -webkit-text-fill-color: var(--zinc-400);   /* Safari paints its own grey otherwise */
  opacity: 1;
}
/* The label stands BEFORE the control now, so the sibling combinator
   that used to reach it (input:disabled ~ label) cannot; the form's
   own is-down does the whole job, and it always did the half that
   mattered — the form is locked whole or not at all (ловушка 22). */
.gbc-form.is-down .gbc-field > .gba-label { color: var(--zinc-400); }
.gbc-form.is-down .gbc-hint { color: var(--zinc-600); }

.gbc-as {
  margin: 0 0 var(--space-24);
  font-size: 14px;
  line-height: 1.5;
  color: var(--zinc-500);
}

/* The quiet way out of a decision already made. Not a button: it
   changes a name, it does not perform the page's business
   (docs.css, 26.08: «контролы не кнопки»). The antidote comes in a
   pair, as it always must on a page wearing body.gb-demo. */
button.gbc-link,
body.gb-demo button.gbc-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 2px;   /* NO TOKEN: the underline's own geometry, the 2 the console's segments use */
  cursor: pointer;
}
button.gbc-link:hover,
body.gb-demo button.gbc-link:hover { color: var(--blue-700); }

/* THE KIND SWITCH IS A ROW OF THE FORM (gbppl-comments-dress-1).
   .gb-toggle is inline-flex, and an inline-level box in a block
   column sits in an anonymous line box: it would collect the body's
   line-height under itself and put a few stray pixels into a rhythm
   made of rungs. The wrapper is a flex row, so the track hugs its two
   words and the gap below is exactly the row gap. */
.gbc-kinds {
  display: flex;
  margin-bottom: var(--space-24);
}

.gbc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-24);
}
/* The hint is a line UNDER the actions, never a third item beside
   them: «Ctrl and Enter posts» fitted at the side and the two service
   lines did not, so one place said its piece from two different
   places depending on how long the sentence was. */
.gbc-hint {
  margin: var(--space-8) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--zinc-500);
}