/* =============================================================================
   Grid XY docs : demo & builder styling
   IMPORTANT: never set layout-affecting properties (padding, border, margin,
   width, flex, gap) on framework classes (.cell, .flex-x…). Demo visuals use
   only non-box-model props so they never bias the behaviour being shown.
   All rules are scoped under .gx-demo / .gx-builder.
   ========================================================================== */

:root {
  --gx-doc-accent: #5b6cff;
  --gx-doc-cell-bg: #eef1ff;
  --gx-doc-cell-bd: #c2cbff;
  --gx-doc-cell-fg: #2b3590;
}
[data-md-color-scheme="slate"] {
  --gx-doc-cell-bg: #2b2f55;
  --gx-doc-cell-bd: #4954a8;
  --gx-doc-cell-fg: #c7ccff;
}

/* --- Demo blocks --------------------------------------------------------- */
.gx-demo { margin: 1.1rem 0; }
.gx-demo + .gx-demo { margin-top: .6rem; }
/* Vertical rhythm between stacked example rows in a plain demo.
   Skipped when .gx-demo is itself a flex track (.flex-y/.flex-x) : there the
   demo's own gap (flex-gap-y) already spaces the rows. */
.gx-demo:not(.flex-x):not(.flex-y) > .flex-x + .flex-x { margin-top: .7rem; }

/* Decorate ONLY leaf cells : never cells that are themselves flex tracks
   (.cell.flex-x / .cell.flex-y wrappers), otherwise `display: grid` here
   would override their `display: flex` and break the grid. */
.gx-demo .cell:not(.flex-x):not(.flex-y) {
  background: var(--gx-doc-cell-bg);
  box-shadow: inset 0 0 0 1px var(--gx-doc-cell-bd); /* "border", zero box-model impact */
  border-radius: 6px;
  color: var(--gx-doc-cell-fg);
  font-size: .82rem;
  min-height: 2.6rem;
  display: grid;
  place-items: center;
  text-align: center;
}
.gx-demo .cell.alt:not(.flex-x):not(.flex-y) {
  background: var(--gx-doc-accent);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--gx-doc-accent);
}
/* Inner content box (used to visualise the padding grid without touching .cell) */
.gx-demo .cell .box {
  background: rgba(255, 255, 255, .55);
  border-radius: 4px;
  padding: .45rem .7rem;
  width: 100%;
}
.gx-demo .cell.alt .box { background: rgba(255, 255, 255, .18); }

/* A faint frame to materialise the grid container in demos */
.gx-demo .gx-frame { box-shadow: inset 0 0 0 1px var(--gx-doc-cell-bd); border-radius: 8px; padding: .4rem; }

/* =============================================================================
   Grid builder : floating side panel + live preview / generated code
   ========================================================================== */
.gx-builder {
  margin: 1.25rem 0;
  /* shared control metrics : keep selects, inputs and icon buttons aligned */
  --gx-ctrl-h: 1.7rem;
  --gx-radius: 7px;
  --gx-bd: color-mix(in srgb, var(--gx-doc-cell-bd) 70%, transparent);
  --gx-surface: color-mix(in srgb, var(--gx-doc-cell-bd) 9%, transparent);
}

/* Break out of the content column for more room (Material/Zensical layout) */
@media (min-width: 1220px) {
  .gx-builder { width: min(100% + 14rem, 78rem); }
}

.gx-builder__layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 880px) {
  .gx-builder__layout { grid-template-columns: 1fr; }
}

/* --- Configuration: collapsible section above the builder layout --- */
.gx-builder__config { margin-bottom: 1.25rem; }
.gx-builder__config-sub {
  font-weight: 500; font-size: .68rem; opacity: .6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
@media (max-width: 560px) { .gx-builder__config-sub { display: none; } }
.gx-builder__config-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1rem 1.4rem; margin-top: .7rem; align-items: start;
}
@media (max-width: 880px) { .gx-builder__config-grid { grid-template-columns: 1fr; } }
.gx-builder__config-fields > * + * { margin-top: .5rem; }
.gx-builder__config-out { min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.gx-builder__config-out .gx-builder__code pre { max-height: 360px; }

/* --- Floating panel --- */
.gx-builder__panel-host { position: sticky; top: 4.8rem; }
.gx-builder__panel {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .7rem;
  border: 1px solid var(--gx-bd);
  border-radius: 14px;
  background: var(--md-default-bg-color, #fff);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
  max-height: calc(100vh - 6rem);
  overflow: auto;
}

/* --- Grouped sections (cards) : clearer visual separation --- */
.gx-builder__group {
  border: 1px solid var(--gx-bd);
  border-radius: 11px;
  padding: .55rem .6rem .6rem;
  background: var(--gx-surface);
}
.gx-builder__group > * + * { margin-top: .45rem; }
.gx-builder__group-head {
  display: flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .82rem; letter-spacing: -.01em;
}
.gx-builder__group-head::before {
  content: ""; width: .26rem; height: .9rem; border-radius: 2px;
  background: var(--gx-doc-accent); flex: none;
}
/* collapsible config group */
details.gx-builder__group > summary { cursor: pointer; list-style: none; user-select: none; }
details.gx-builder__group > summary::-webkit-details-marker { display: none; }
details.gx-builder__group > summary::after {
  content: "▸"; margin-left: auto; font-size: .7rem; opacity: .55; transition: transform .15s ease;
}
details.gx-builder__group[open] > summary::after { transform: rotate(90deg); }
details.gx-builder__group[open] > summary { margin-bottom: .45rem; }

/* sub-headers inside a group */
.gx-builder__subhead {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .6;
}
.gx-builder__subhead-hint { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.gx-builder__hint { font-size: .66rem; opacity: .65; margin: 0; line-height: 1.35; }

/* compact label + control pairs */
.gx-builder__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .4rem; }
.gx-builder__field { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.gx-builder__field > label { font-size: .6rem; opacity: .72; font-weight: 600; }

.gx-builder select:not(.gx-builder__viewport-select),
.gx-builder input[type="number"],
.gx-builder input[type="text"] {
  width: 100%; height: var(--gx-ctrl-h); padding: 0 .35rem; border-radius: var(--gx-radius);
  font-size: .72rem; border: 1px solid var(--gx-bd); background: var(--md-default-bg-color, #fff);
  color: inherit; font-family: inherit; box-sizing: border-box; outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.gx-builder select:not(.gx-builder__viewport-select) { appearance: none; padding-right: 1.1rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right .45rem center, right .3rem center; background-size: .3rem .3rem, .3rem .3rem; background-repeat: no-repeat;
}
.gx-builder select:not(.gx-builder__viewport-select):focus,
.gx-builder input[type="number"]:focus,
.gx-builder input[type="text"]:focus {
  border-color: var(--gx-doc-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gx-doc-accent) 22%, transparent);
}
.gx-builder input:disabled { opacity: .55; }

/* --- Buttons --- */
.gx-builder__btn {
  cursor: pointer; border: 0; border-radius: var(--gx-radius); padding: 0 .6rem; height: var(--gx-ctrl-h);
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  background: var(--gx-doc-accent); color: #fff; font: inherit; font-weight: 600; font-size: .72rem;
  transition: filter .12s ease, background .12s ease;
}
.gx-builder__btn:hover { filter: brightness(1.07); }
.gx-builder__btn--ghost { background: transparent; color: var(--gx-doc-accent); box-shadow: inset 0 0 0 1px var(--gx-doc-accent); }
.gx-builder__btn--ghost:hover { background: color-mix(in srgb, var(--gx-doc-accent) 10%, transparent); filter: none; }
.gx-builder__btn--sm { height: 1.5rem; padding: 0 .5rem; font-size: .66rem; }

/* perfectly square icon button (the × remove buttons) */
.gx-builder__btn--icon {
  width: var(--gx-ctrl-h); height: var(--gx-ctrl-h); padding: 0; flex: none;
  background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--gx-bd);
  font-size: 1rem; line-height: 1; opacity: .65;
}
.gx-builder__btn--icon:hover {
  opacity: 1; filter: none; color: #fff;
  background: color-mix(in srgb, #e5484d 88%, transparent);
  box-shadow: inset 0 0 0 1px #e5484d;
}
.gx-builder__btn--icon > span { display: block; transform: translateY(-.02em); }
.gx-builder__icon-spacer { width: var(--gx-ctrl-h); height: var(--gx-ctrl-h); flex: none; }

/* full-width "add" button */
.gx-builder__btn--add {
  width: 100%; background: transparent; color: var(--gx-doc-accent);
  box-shadow: inset 0 0 0 1px var(--gx-bd); font-size: .68rem; font-weight: 600;
  border-style: dashed; gap: .35rem;
}
.gx-builder__btn--add:hover {
  background: color-mix(in srgb, var(--gx-doc-accent) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--gx-doc-accent); filter: none;
}
/* keep the + icon optically centered on the label baseline */
.gx-builder__btn--add > span { display: inline-flex; align-items: center; line-height: 1; }
.gx-builder__add-plus { font-size: 1rem; font-weight: 600; }

/* "Beta" badge on the builder page title */
.gx-badge {
  display: inline-block; vertical-align: middle; margin-left: .5rem;
  padding: .12em .5em; border-radius: 999px;
  font-size: .55em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--gx-doc-accent); translate: 0 -.15em;
}

/* Badge marking a feature configurable from _flexbox-settings.scss */
.gx-cfg {
  display: inline-flex; align-items: center; gap: .3em; vertical-align: middle;
  margin-left: .5rem; padding: .18em .55em .18em .45em; border-radius: 999px;
  font-size: .6rem; font-weight: 600; letter-spacing: .01em; text-transform: none;
  color: var(--gx-doc-accent); background: color-mix(in srgb, var(--gx-doc-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gx-doc-accent) 35%, transparent);
  white-space: nowrap; translate: 0 -.06em;
}
.gx-cfg::before { content: "\2699"; font-size: .85em; line-height: 1; }
h1 .gx-cfg, h2 .gx-cfg, h3 .gx-cfg { font-size: .5em; }

/* =============================================================================
   Class reference — "level" chips (container / track / cell / any element)
   Used on the API & classes page to show which classes go together.
   ========================================================================== */
.gx-lvl {
  display: inline-flex; align-items: center; gap: .4em; vertical-align: middle;
  padding: .1em .6em; border-radius: 999px;
  font-size: .8em; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.gx-lvl::before { content: ""; width: .62em; height: .62em; border-radius: 50%; background: currentColor; flex: none; }
.gx-lvl--container { color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 13%, transparent); }
.gx-lvl--track     { color: #3b82f6; background: color-mix(in srgb, #3b82f6 13%, transparent); }
.gx-lvl--cell      { color: #10b981; background: color-mix(in srgb, #10b981 15%, transparent); }
.gx-lvl--any       { color: #6b7280; background: color-mix(in srgb, #6b7280 15%, transparent); }
[data-md-color-scheme="slate"] .gx-lvl--container { color: #c4b5fd; }
[data-md-color-scheme="slate"] .gx-lvl--track     { color: #93c5fd; }
[data-md-color-scheme="slate"] .gx-lvl--cell      { color: #6ee7b7; }
[data-md-color-scheme="slate"] .gx-lvl--any        { color: #cbd5e1; }
/* heading-sized variant when used inside section titles */
h2 .gx-lvl, h3 .gx-lvl { font-size: .62em; vertical-align: middle; }

/* compact legend row above the anatomy block */
.gx-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 .2rem; }

/* Slightly larger social (GitHub) icon in the footer */
.md-social__link { width: 2rem; height: 2rem; }
.md-social__link svg { width: 1.3rem; height: 1.3rem; max-height: none; }

/* =============================================================================
   Layout examples page — a framed preview around a .gx-demo grid
   ========================================================================== */
.gx-ex {
  padding: .75rem;
  border: 1px solid var(--gx-doc-cell-bd);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gx-doc-cell-bd) 7%, transparent);
}
/* role-tinted cells to make app layouts readable */
.gx-demo .cell.is-bar:not(.flex-x):not(.flex-y) {
  background: color-mix(in srgb, var(--gx-doc-accent) 16%, transparent);
  color: var(--gx-doc-cell-fg); box-shadow: inset 0 0 0 1px var(--gx-doc-cell-bd);
  font-weight: 600;
}
.gx-demo .cell.is-muted:not(.flex-x):not(.flex-y) {
  background: color-mix(in srgb, var(--gx-doc-cell-bd) 30%, transparent);
}

/* --- Mode toggle (classic / block) --- */
.gx-builder__toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .22rem;
  border-radius: 9px; background: color-mix(in srgb, var(--gx-doc-cell-bd) 24%, transparent);
}
.gx-builder__toggle-btn {
  cursor: pointer; border: 0; border-radius: 7px; padding: .34rem .4rem;
  background: transparent; color: inherit; font: inherit; font-weight: 600; font-size: .74rem; opacity: .7;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
  white-space: nowrap; min-width: 0; text-overflow: ellipsis; overflow: hidden;
}
.gx-builder__toggle-btn:hover { opacity: 1; }
.gx-builder__toggle-btn.is-active {
  background: var(--md-default-bg-color, #fff); color: var(--gx-doc-accent); opacity: 1;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .14);
}

/* --- Repeater rows (config bp/gutter, responsive paliers, cell sizes) --- */
.gx-builder__chip-row {
  display: grid; grid-template-columns: 1fr 1fr var(--gx-ctrl-h); gap: .3rem; align-items: center;
}
.gx-builder__repeat { display: flex; flex-direction: column; gap: .3rem; }
.gx-builder__repeat:not(:empty) { margin-top: .05rem; }

/* --- Cells editor --- */
.gx-builder__cells { display: flex; flex-direction: column; gap: .45rem; }
.gx-builder__cell {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .45rem; border: 1px solid var(--gx-bd); border-radius: 9px;
  background: var(--md-default-bg-color, #fff);
}
.gx-builder__cell > * + * { margin-top: 0; }
.gx-builder__cell-head { display: flex; align-items: center; justify-content: space-between; }
.gx-builder__cell-name { font-size: .7rem; font-weight: 700; opacity: .75; }

/* --- Main: preview + code --- */
.gx-builder__main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.gx-builder__pane-title { font-weight: 700; font-size: .82rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.7rem; position: relative; z-index: 2; }
.gx-builder__pane-actions { display: flex; gap: .35rem; position: relative; z-index: 2; }
.gx-builder__viewport-controls { display: flex; align-items: center; gap: .4rem; font-weight: normal; font-size: .68rem; opacity: .85; position: relative; z-index: 2; }
/* the action buttons must stay clickable above any sibling/Material overlay */
.gx-builder__pane-title .gx-builder__btn { position: relative; z-index: 2; }
.gx-builder__viewport-host { display: inline-flex; }
.gx-builder__viewport-select {
  padding: 0 .4rem; height: 1.6rem; border-radius: var(--gx-radius); font-size: .68rem;
  border: 1px solid var(--gx-bd); background: var(--md-default-bg-color, #fff);
  color: inherit; font-family: inherit; outline: none;
}

/* Live preview in an iframe (its own viewport → real responsive). The dotted
   "graph-paper" background lives inside the iframe and adapts to light/dark. */
.gx-builder__preview-wrap {
  position: relative; z-index: 0;
  height: 340px; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--gx-bd);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  background: var(--md-default-bg-color, #fff);
}
.gx-builder__frame { display: block; width: 100%; height: 340px; border: 0; background: transparent; margin: 0; transform-origin: top left; }

/* keep below the pane-title buttons (it is positioned + later in the DOM) */
.gx-builder__code { position: relative; z-index: 0; }
.gx-builder__code pre { margin: 0; max-height: 300px; border-radius: 10px; }