/* glitchcreator.css — THE GLITCH CREATOR's two panes (2026-08-22).

   One sheet for BOTH studio themes. Every colour is a token read through a
   two-deep fallback: the Specimen Lab's `--av-*` first, the classic house
   tokens second, so the panes wear whichever studio they are docked into and
   never carry a colour of their own.

   THE ONE DELIBERATE NON-TOKEN: a premade card in `cards=name` mode sits on
   a BLACK plate. That is the owner ruling the mode exists for (Paleo
   Passage, 2026-08-22: "just the name, black background") - black is the
   design, not a default that forgot to be themed. */

.gcr-shelf, .gcr-custom {
  --gcr-ink: var(--av-ink, var(--fg));
  --gcr-ink-2: var(--av-ink-2, var(--fg-mute, var(--fg)));
  --gcr-ink-3: var(--av-ink-3, var(--fg-mute, var(--fg)));
  --gcr-line: var(--av-line, var(--border-2, var(--edge, currentColor)));
  --gcr-line-dim: var(--av-line-dim, var(--border, var(--gcr-line)));
  --gcr-accent: var(--av-jade-lt, var(--accent-hi, var(--accent)));
  --gcr-accent-2: var(--av-jade, var(--accent));
  --gcr-bad: var(--av-amber, var(--bad, var(--warn)));
  --gcr-panel: var(--av-panel, var(--surface));
  --gcr-well: color-mix(in srgb, var(--gcr-panel) 78%, black);
  --gcr-sans: var(--av-sans, var(--font-ui, inherit));
  --gcr-display: var(--av-serif, var(--font-display, inherit));
  /* A pasted export is a wall of numbers: it is read in mono or it is
     not read at all. Two-deep like every token above it. */
  --gcr-mono: var(--av-mono, var(--font-mono, ui-monospace, monospace));
  font-family: var(--gcr-sans);
  color: var(--gcr-ink);
}

/* ---- the gate line (signed out / owners only) ---- */
.gcr-gate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---- the staff-only lock (2026-09-04) ----------------------------------
   A PANEL, not a line. The owners-only sentence above is one clause in a row
   with a button beside it; this one is the whole answer for the tab, so it
   reads as a closed door rather than as a caption someone forgot to remove.
   Every value is a token this sheet already resolves, so it inherits the
   owner's own theme with nothing new to configure and no colour hardcoded. */
.gcr-locked {
  border: 1px solid var(--gcr-line);
  /* Square, like every other edge in this sheet - the lab's own shape. */
  border-radius: 0;
  padding: 18px 16px;
  background: var(--gcr-well);
  text-align: center;
}
.gcr-locked-title {
  margin: 0;
  font-family: var(--gcr-mono);
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gcr-ink);
}
/* Only ever a SECOND line, so the margin belongs to the pair rather than to
   the element - a body drawn without a title above it must not float. */
.gcr-locked-title + .gcr-locked-body { margin: 8px 0 0; }
.gcr-locked-body { margin: 0; font-size: .9rem; }

/* ---- the shelf: premade cards ---- */
.gcr-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.gcr-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.gcr-plate {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 6px; min-height: 96px; padding: 14px 10px;
  border: 1px solid var(--gcr-line-dim); overflow: hidden; text-align: center;
  background: var(--gcr-well);
}
/* cards=name: the name alone, on black - the ruling */
.gcr-grid-name .gcr-plate { background: black; border-color: color-mix(in srgb, var(--gcr-accent) 35%, black); }
.gcr-grid-name .gcr-plate::before {
  /* a faint scan across the plate: the one hint that this is a glitch and
     not a colour - drawn from the accent at low alpha, never a picture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    180deg, transparent 0 3px,
    color-mix(in srgb, var(--gcr-accent) 9%, transparent) 3px 4px);
  mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
}
.gcr-card-name {
  position: relative; margin: 0; font-family: var(--gcr-display);
  font-weight: 500; font-size: 17px; line-height: 1.15; letter-spacing: .02em;
  color: var(--gcr-ink); text-transform: uppercase; overflow-wrap: anywhere;
}
.gcr-grid-name .gcr-card-name { color: white; text-shadow: 0 0 12px color-mix(in srgb, var(--gcr-accent) 55%, transparent); }
.gcr-card-pat {
  position: relative; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gcr-ink-3);
}
.gcr-grid-name .gcr-card-pat { color: color-mix(in srgb, white 55%, black); }
.gcr-strip { display: flex; width: 100%; height: 8px; margin-bottom: 6px; }
.gcr-strip span { flex: 1 1 0; }
.gcr-card .gcr-wear { width: 100%; }

/* ---- the composer ---- */
.gcr-lab { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-bottom: 12px; }
.gcr-field { display: grid; gap: 6px; min-width: 0; }
.gcr-label {
  margin: 0; font-family: var(--gcr-sans); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gcr-ink-3);
}
.gcr-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gcr-chip {
  font: inherit; font-size: 11.5px; min-width: 34px; min-height: 32px; padding: 5px 9px;
  cursor: pointer; border: 1px solid var(--gcr-line); border-radius: 0;
  background: color-mix(in srgb, var(--gcr-ink) 4%, transparent); color: var(--gcr-ink);
  transition: border-color .15s, background .15s, color .15s;
}
.gcr-chip:hover { border-color: var(--gcr-accent); }
.gcr-chip.is-on { background: var(--gcr-accent); border-color: var(--gcr-accent); color: black; font-weight: 600; }

.gcr-sheet {
  display: grid; gap: 4px; padding: 8px; margin: 0 0 12px;
  border: 1px solid var(--gcr-line-dim); background: var(--gcr-well);
}
.gcr-row { display: grid; grid-template-columns: minmax(64px, .9fr) repeat(4, minmax(0, 1fr)); gap: 4px; align-items: center; }
.gcr-row-head { margin-bottom: 2px; }
.gcr-k, .gcr-slot { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcr-ink-3); }
.gcr-k { text-align: center; }
/* ★ THE ROW'S NAME WRAPS, IT DOES NOT GET CUT (2026-09-04). It was
   `nowrap` + ellipsis, which on this rail read MARKIN…, UNDERB…, MALE DI… -
   three of the seven channels unnamed on a page whose whole job is picking a
   channel. Wrapping cannot squeeze the four number boxes beside it the way a
   wider label track would (they are `minmax(0, 1fr)` and were the original
   defect on this panel); a long name simply makes its own row taller, at
   every rail width including a phone's. */
.gcr-slot { overflow-wrap: anywhere; color: var(--gcr-ink-2); line-height: 1.2; }
.gcr-num {
  width: 100%; min-width: 0; height: 32px; padding: 4px 6px; border-radius: 0;
  font: inherit; font-family: var(--font-mono, var(--gcr-sans)); font-size: 12px;
  color: var(--gcr-ink); background: color-mix(in srgb, black 55%, var(--gcr-panel));
  border: 1px solid var(--gcr-line-dim); outline: 0;
  font-variant-numeric: tabular-nums;
}
.gcr-num:focus { border-color: var(--gcr-accent-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gcr-accent-2) 40%, transparent); }
.gcr-num.is-bad { border-color: var(--gcr-bad); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gcr-bad) 50%, transparent); }
.gcr-num-wide { width: 96px; }

.gcr-acts { display: flex; gap: 6px; margin: 12px 0; }
.gcr-acts .btn { flex: 1 1 0; min-width: 0; }
/* ★ THE SAME RAIL MEASUREMENT, AND A REAL DEFECT IT WAS ALREADY HIDING.
   `1fr auto auto` gives the two buttons whatever they want and the NAME BOX
   whatever is left - which on this ~300px rail measured about fourteen
   pixels. The control a player has to type into before they can save was, on
   a 1440px desktop, too narrow to type into. The name takes its own line and
   the two buttons share the next one, at every width. */
.gcr-save { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: stretch; }
#gcr-name { grid-column: 1 / -1; }
#gcr-name {
  min-width: 0; height: 36px; padding: 6px 10px; border-radius: 0; font: inherit;
  font-family: var(--gcr-display); font-size: 14px; color: var(--gcr-ink);
  background: color-mix(in srgb, black 55%, var(--gcr-panel)); border: 1px solid var(--gcr-line); outline: 0;
}
#gcr-name:focus { border-color: var(--gcr-accent-2); }
.gcr-note { min-height: 1.2em; margin: 8px 0 0; }

/* the two-press latch */
.gcr-armed { outline: 2px solid var(--gcr-accent); outline-offset: 1px; }

/* ---- the library ---- */
.gcr-library { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gcr-line-dim); }
.gcr-library .gcr-label { display: flex; justify-content: space-between; margin-bottom: 8px; }
.gcr-count { letter-spacing: .06em; }
.gcr-list { display: grid; gap: 6px; }
.gcr-look {
  display: grid; gap: 6px; padding: 8px 10px;
  border: 1px solid var(--gcr-line-dim); background: var(--gcr-well);
}
.gcr-look .gcr-strip { margin-bottom: 0; }
.gcr-look-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; min-width: 0; }
.gcr-look-head b { font-family: var(--gcr-display); font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcr-look-head span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcr-ink-3); white-space: nowrap; }
/* ★ THREE ACTIONS DO NOT FIT A 300px RAIL ON ONE LINE. Adding Copy beside
   Wear and Load pushed the row past its card and clipped the first button's
   label. It WRAPS instead: a min-width big enough to hold the longest label
   this row carries, and `flex-wrap` to take the third onto its own line when
   the rail is narrow. */
.gcr-look-acts { display: flex; flex-wrap: wrap; gap: 5px; }
.gcr-look-acts .btn { flex: 1 1 88px; min-width: 88px; }
/* ★ WEAR IS THE LONGEST LABEL AND THE PRIMARY ACTION, so it takes the line
   rather than being the one that gets clipped. Measured: three buttons on a
   285px row are 91px each and "Wear in game" needs about 120 - it rendered
   with its own text cut off and hanging past the card's left edge. */
.gcr-look-acts .gcr-look-wear { flex: 1 1 100%; }

@media (max-width: 640px) {
  .gcr-grid { grid-template-columns: 1fr 1fr; }
  .gcr-lab { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .gcr-chip, .gcr-num { min-height: 40px; }
}

/* ---- the two code doors (2026-08-22): export a glitch look as text, import
   one back. Deliberately the SAME shape as the studio deck's skin-code row -
   a button, a wide paste box, a name box, a button - because a player who has
   used that one has already learned this one. Its own status line, so a paste
   refusal never overwrites what the composer's line is saying. ---- */
.gcr-codes {
  /* ★ STACKED AT EVERY WIDTH, AND THAT IS A MEASUREMENT NOT A TASTE. This
     panel is a ~300px RAIL on a 1440px desktop, so a viewport media query is
     asking the wrong element how much room there is: the first cut laid four
     controls in one row, and on a real 1440 render the paste box - the whole
     point of the row - collapsed to about twenty pixels while the media query
     sat unfired. The two text boxes get their own lines and the two buttons
     share one, which reads at 300px and still reads at 900. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: stretch;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--gcr-line-dim);
}
#gcr-code, #gcr-code-name { grid-column: 1 / -1; }
#gcr-code, #gcr-code-name {
  min-width: 0; height: 36px; padding: 6px 10px; border-radius: 0; font: inherit;
  font-size: 13px; color: var(--gcr-ink);
  background: color-mix(in srgb, black 55%, var(--gcr-panel));
  border: 1px solid var(--gcr-line); outline: 0;
}
#gcr-code { font-family: var(--gcr-mono); }
#gcr-code-name { font-family: var(--gcr-display); }
#gcr-code:focus, #gcr-code-name:focus { border-color: var(--gcr-accent-2); }
.gcr-codes .gcr-note { grid-column: 1 / -1; }

/* THE OFFER ROW (2026-08-25) - a paste this library cannot hold is not a dead
   end. Full width for the same measured reason the boxes above are: this panel
   is a ~300px rail, and a sentence plus a button sharing a 1fr column puts
   about twenty pixels under the words. Drawn only when the server offered
   something, so it costs nothing on every other paste. */
.gcr-codes .gcr-offer {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.gcr-codes .gcr-offer .gcr-offer-note { margin: 0; min-height: 0; }

/* ★★★★★ THE ROW'S OWN SENTENCES ARE FORCED BACK ON, AND IT IS A MEASUREMENT
   (2026-08-25, rendered at 1440x900 in the Specimen Lab theme with Chromium's
   own computed style). `studiolab.css:1295` is
   `@media (min-width: 901px) and (max-height: 900px) { .save-note { display:
   none; } }` - a real rule for a real reason, keeping the deck's channel list
   whole on a short desktop. The cost nobody measured is that it also hides
   EVERY status line this row prints: "Added to your glitch looks.", "That code
   is damaged - copy it again", and the offer that carries the way through.
   Computed `display` on both `#gcr-code-note` and the offer's sentence read
   `none` with `offsetHeight` 0 while the button beside them rendered - a panel
   with a control in it and no words (feedback_a_gate_must_always_end_in_words).
   Scoped to THIS row only, and to a status line that is empty most of the
   time, so the deck's own economy is untouched. Two classes beat one, so this
   wins the cascade wherever the media rule applies.
   ★ The OFFER's own sentence does not carry `save-note` at all (see
   glitchcreator.js) - the same sheet also gives that class `order: 11`
   (:1856), which had put the sentence BELOW the button explaining it. */
.gcr-codes .gcr-note { display: block; }

@media (pointer: coarse) {
  #gcr-code, #gcr-code-name { min-height: 40px; }
}

/* 2026-08-25 breathing-room pass - paired with studiolab.css's block of the
   same date; desktop and up, token-only, appended overrides. */
@media (min-width: 901px) {
  .gcr-grid { gap: 14px; }
  .gcr-field { gap: 9px; }
  .gcr-chips { gap: 8px; }
  .gcr-chip { min-width: 40px; min-height: 36px; padding: 7px 13px; font-size: 12px; }
  .gcr-row { gap: 7px; }
  .gcr-sheet { margin: 4px 0; }
  .gcr-acts { gap: 9px; margin: 16px 0; }
  .gcr-save { gap: 9px; }
  .gcr-codes { margin-top: 14px; }
  .gcr-sexrow { margin: 6px 0 2px; }
}