/* ============================================================
   gbppl-inspect-1 — INSPECT MODE, THE OVERLAY
   ------------------------------------------------------------
   Ton, 26.08: «переключать режимы View / Inspect, наводить на
   любые секции, блоки, что угодно, и видеть их properties. Или
   как в Figma: наводишь, и оверлей поверх показывает отступы. Не
   overkill, но если можем лучше — сделать». The first piece of
   team feedback behind it: the front end lead wants properties in
   the prototypes themselves.

   WHAT THIS FILE DRAWS. One layer over the page, and nothing in
   the page. The element under the pointer gets a hairline round
   its box, a plate above it naming what it is and how big it is,
   its padding filled from the inside and its margin hatched from
   the outside, with the number printed beside any side that has
   4px or more to show. The DOM of the page is never touched: no
   class is added to the thing being inspected, no style is
   written on it, so what the instrument measures is what the page
   renders when nobody is looking at it.

   THE LAYER. z-index 55: over the whole prototype stack (header
   31, page drawers 40, modal 50) and under the console (60) and
   the properties drawer (80/81), because the two things you must
   always be able to reach are the switch that turns this off and
   the panel it opens. It is pointer-events: none from root to
   leaf, so the pointer keeps finding the page.

   THE TWO SERVICE COLOURS ARE NOT SYSTEM COLOURS, and that is on
   purpose. Padding green and margin orange belong to the
   instrument, the way a ruler is yellow: they say "this is a
   measurement, not a design". They are declared on .gbi-layer
   below and used nowhere else in the system; do not promote them
   to tokens.css and do not reach for them in a component. Every
   other value here IS a token: the hairline and the live state
   are Blue 600, the plate is Zinc 950, the type is Inter at 12.

   gbppl-inspect-select-1 (03.09), at the foot of this file: the
   selection is muted on the PAGE and painted on the instrument, and
   the drawer points an I-beam at its own numbers. Valerie, the
   client's front end: «I'd like to be able to highlight the text so
   when I need to copy a color I can get it... I can't copy an
   individual line in here or anywhere in the drawer.» She could, all
   along, and could not see it.

   THE LENGTHS, AFTER gbppl-studio-tokens-1. Every length that is a
   rung is now written as one (--space-*, --radius). What stayed a
   number is the geometry of the DRAWING itself: the field inside a
   label, the pitch of the hatching and of the dashes, the blur of
   the halo behind a digit. None of them is a gap between blocks,
   the space scale does not describe them, and each carries a
   NO TOKEN line saying so.
   ============================================================ */

.gbi-layer {
  /* NO TOKEN, and never will be: the instrument's own two hues.
     See the note above before touching them. */
  --gbi-pad-fill: rgba(16, 150, 105, 0.22);
  --gbi-pad-ink: #0f7a56;
  --gbi-mar-fill: rgba(234, 120, 20, 0.18);
  --gbi-mar-ink: #a75708;

  position: fixed;
  inset: 0;
  /* gbppl-inspect-3: 55 stood below the drawer (scrim 80, panel 81),
     so a highlight on anything inside an open drawer was painted and
     never seen — Valerie's «inspect doesn't work when the drawer is
     open», the visible half of it. 85 stands above the drawer and
     below the tooltip (90).
     gbppl-comments-layer-1 (07.10): 85 became 1185, the studio band
     (old number plus 1100, the list is in comments.css, THE LAYER AND
     THE PIN). At 85 the instrument drew under any full screen window
     of a prototype (1000). It still stands over its own drawer
     (1180/1181, below) and under the console (1202). The tooltip
     plate lives in the top layer wherever the browser has one, so
     its fallback 90 is not a neighbour here any more. */
  z-index: 1185;                /* NO TOKEN: studio band */
  /* Clipped, so a margin band that runs off the top of the window
     can never add a scrollbar to the page it is measuring. */
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-sans);
}
.gbi-layer * { pointer-events: none; }
.gbi-layer[hidden] { display: none; }

/* ---- The instrument's drawer stands in the studio band ----
   gbppl-comments-layer-1 (07.10). The properties drawer and the
   comment thread are ONE gb-drawer, the instrument's own host,
   marked data-gbd-tag="gbi" (inspect.js drawerHost; drawer.js copies
   the tag onto the scrim and the panel it hangs on the body). Its
   numbers in drawer.css (80/81) are the page band: a page's own
   drawers keep them. This host alone climbs to 1180/1181, the old
   pair plus 1100, so it opens over a prototype's full screen window
   (1000) and its sheets (up to 1101), stays over the pins (1156)
   and under this overlay (1185) and the console (1202), exactly the
   order the four had before. Before this a reviewer clicked in
   comment mode on Start 227 and the form opened behind the window.
   NO TOKEN: studio band, the list is in comments.css. */
.gbd-scrim[data-gbd-tag="gbi"] { z-index: 1180; }  /* NO TOKEN: studio band */
.gbd-panel[data-gbd-tag="gbi"] { z-index: 1181; }  /* NO TOKEN: studio band */

/* ---- The box: one hairline, Blue 600, drawn with an outline so
   it never adds a pixel to the geometry it is describing. ---- */
.gbi-box {
  position: absolute;
  outline: 1px solid var(--blue-600);
  outline-offset: 0;
}

/* ---- Padding, filled from the inside ---- */
.gbi-pad {
  position: absolute;
  background: var(--gbi-pad-fill);
}

/* ---- Margin, hatched from the outside. Hatching rather than a
   flat fill because margin is space the element is claiming, not
   space it is holding, and the two must not read alike. ---- */
.gbi-mar {
  position: absolute;
  background: var(--gbi-mar-fill);
  /* NO TOKEN: 2 / 6 is the pitch of the hatching, the texture of the
     drawing rather than a distance in the layout. */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(234, 120, 20, 0.32) 0 2px,
    transparent 2px 6px
  );
}

/* ---- The gap between two children of a flex or grid parent.
   Inner space, so it speaks the padding colour. ---- */
.gbi-gap {
  position: absolute;
  background: var(--gbi-pad-fill);
}

/* ---- The numbers. 12, the floor of the system, never smaller:
   a measurement that cannot be read is not a measurement. ---- */
.gbi-num {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* NO TOKEN: 3 is the blur of the halo that keeps a digit legible
     over a photograph, not a length in the layout. */
  text-shadow: 0 0 3px var(--white), 0 0 3px var(--white), 0 0 3px var(--white);
}
.gbi-num--pad { color: var(--gbi-pad-ink); }
.gbi-num--mar { color: var(--gbi-mar-ink); }

/* ---- The plate. Zinc 950, the voice of the console, so the
   instrument reads as one thing wherever it appears.

   TWO LINES since gbppl-inspect-2 (the team, through Ton, 27.08:
   «просят показывать больше данных и чётче»). The name of the thing
   on the first line and heavier, its size and modifiers on the
   second and quieter. On one line all three ran together and the eye
   had to hunt for the name in the middle of a sentence; stacked, the
   answer is the first word. ---- */
.gbi-badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* NO TOKEN on 1 and 5: the plate is a LABEL, and its two lines and
     its inner field are set from the type, not from the space scale:
     a --space-8 field would make a badge the size of a button. */
  gap: 1px;
  max-width: calc(100vw - var(--space-16));
  padding: 5px var(--space-8);
  border-radius: var(--radius);
  background: var(--zinc-950);
  box-shadow: var(--shadow-panel);
  color: var(--white);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gbi-badge b { font-weight: 600; }
.gbi-badge__meta { display: flex; align-items: baseline; gap: var(--space-8); }
.gbi-badge i { font-style: normal; color: var(--zinc-400); }
.gbi-badge em {
  font-style: normal;
  color: var(--blue-400);
  font-variant-numeric: tabular-nums;
}

/* ---- The distances to the neighbours (gbppl-inspect-2) ----
   Held Alt, or an open drawer, and each side of the box grows a
   hairline to the nearest thing beside it. Blue 600, the colour of
   the box itself: this is the same measurement continued outwards,
   not a second kind of finding. No red anywhere — red in this system
   means an error, and a distance is not one.

   Solid to a sibling, DASHED to the parent's content edge. Two
   different questions, and they must never read as one answer. ---- */
.gbi-dist {
  position: absolute;
  background: var(--blue-600);
}
/* The dashes run ALONG the line, so the direction is spelt out: a
   pattern painted across a one-pixel bar comes out solid, and solid
   here already means something else. */
/* NO TOKEN on 3 / 6: the pitch of the dashes, the texture of the
   line rather than a distance in the layout. */
.gbi-dist--edge { background: none; }
.gbi-dist--v.gbi-dist--edge {
  background-image: repeating-linear-gradient(
    to bottom, var(--blue-600) 0 3px, transparent 3px 6px);
}
.gbi-dist--h.gbi-dist--edge {
  background-image: repeating-linear-gradient(
    to right, var(--blue-600) 0 3px, transparent 3px 6px);
}
/* The number in a plate rather than beside a line: over a photograph
   or a dark band a bare digit disappears, and a measurement that
   cannot be read is not a measurement. */
.gbi-dist__num {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  padding: 1px 5px;   /* NO TOKEN: the same label field as .gbi-badge, set from the type */
  border-radius: var(--radius);
  background: var(--blue-600);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- The first line of the drawer body: where this thing lives ----
   It used to stand in the foot, four screens of tables below the
   name. The first question a developer asks about a thing on a page
   is which file to open, so it comes first now (gbppl-inspect-2). ---- */
.gbi-lede {
  margin: 0 0 var(--space-16);
  color: var(--zinc-600);
  font-size: 14px;
  line-height: 1.5;
}
.gbi-lede code {
  /* The same monospace the documentation atoms use (docs.css). There
     is no token for it: tokens.css names the stack in a comment and
     stops there. */
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
  font-size: 13px;
  color: var(--zinc-900);
}

/* ---- The way from a measurement into the showcase card ----
   It stands in the drawer foot, which is a page that may be
   wearing body.gb-demo and its a { color: inherit }. The antidote
   comes in a pair, as it always must (ловушка 1 of the skill). */
a.gbi-oro,
body.gb-demo a.gbi-oro {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 2px;   /* NO TOKEN: the underline's own geometry, the same 2 the console's segments use */
}
a.gbi-oro:hover,
body.gb-demo a.gbi-oro:hover { color: var(--blue-700); }

/* ---- The page while it is being inspected ----
   The crosshair is the whole announcement: no tint over the page,
   no frame round the window. The mode is legible from the console
   and from the pointer, and the page underneath keeps looking
   exactly like itself, which is the point of inspecting it.

   The console and the drawer keep their own pointer: they are the
   two things you must still be able to operate, and a crosshair
   over a close button would say otherwise.

   The device stage joined the list with gbppl-panel-7: the dark
   field a framed page floats on belongs to the console, and a
   crosshair over it would promise a measurement that cannot be
   taken. Inside the frame the page has an instrument of its own. */
html.gbi-on,
html.gbi-on * { cursor: crosshair !important; }
html.gbi-on :is(.gbsp, .gbsp-stage, .gbd-panel, .gbd-scrim),
html.gbi-on :is(.gbsp, .gbsp-stage, .gbd-panel, .gbd-scrim) * { cursor: default !important; }
/* The `*` is not decoration (the same arithmetic comments.css spells
   out for Comment mode): a button in this house is never one node,
   `.gb-btn` carries a label span and an icon button carries an svg
   with its path, and without this the hand died on the word. */
html.gbi-on :is(.gbsp, .gbd-panel) :is(a, button),
html.gbi-on :is(.gbsp, .gbd-panel) :is(a, button) * { cursor: pointer !important; }

/* ---- Selection: muted on the page, alive on the instrument ----
   gbppl-inspect-select-1. Valerie, the client's front end, 02.09:
   «I'd like to be able to highlight the text so when I need to copy
   a color I can get it. the css lets me copy the block but I can't
   copy an individual line in here or anywhere in the drawer.»

   Nothing ever forbade the selection. The line below used to have no
   scope at all, and it paints the highlight TRANSPARENT: a drag
   inside the drawer did select, `getSelection()` did return the row,
   Ctrl+C did copy it, and the screen showed absolutely nothing. An
   invisible selection is not a selection to the person making it.

   The mute earns its place on the PAGE and only there. A drag over
   the page while inspecting is a measurement gesture — mousedown is
   cancelled in inspect.js for that very reason — and a blue band left
   over from before the mode was entered would sit on top of the
   overlay pretending to be part of the drawing.

   The studio's own two surfaces are the opposite case. The drawer and
   the console exist to hand numbers to a developer, so there the
   highlight is painted back, in Blue 200: a selection is a state, and
   state is blue (Ton-5). The rule below wins on specificity, one class
   deeper than the mute above it. */
html.gbi-on ::selection { background: transparent; }
html.gbi-on :is(.gbsp, .gbd-panel)::selection,
html.gbi-on :is(.gbsp, .gbd-panel) ::selection {
  background: var(--blue-200);
  color: var(--zinc-900);
}

/* And the pointer says so before the drag begins. The block above
   gives every descendant of the drawer `default`, which over a table
   of measured values reads «there is nothing here to take». The body
   of the drawer is prose and numbers, so it gets the I-beam; the
   controls in it keep the hand they already had, because the
   a/button rule above is one element more specific than this one. */
html.gbi-on :is(.gbd-body, .gbd-foot),
html.gbi-on :is(.gbd-body, .gbd-foot) * { cursor: text !important; }