/* The browse-library shell: a grid of pictures, and whatever a page narrows it by. The shape catalog keeps its
   filters in an aside beside the grid (catalog.css); the style library keeps them in a strip above it, because
   a search box and a row of chips are horizontal things and a grid wants the width. */

.lib-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

.lib-filters {
  flex-shrink: 0; width: 240px; padding: var(--space-3);
  border-right: 1px solid var(--border); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-3);
}

.lib-main { flex: 1; min-width: 0; overflow-y: auto; padding: var(--space-3); }
.lib-intro { margin: 0 0 var(--space-3); max-width: 62ch; font-size: var(--font-sm); color: var(--text-secondary); }
.lib-count { margin: 0 0 var(--space-2); font-size: var(--font-xs); color: var(--text-secondary); }
.lib-status { text-align: center; color: var(--text-secondary); font-size: var(--font-sm); padding: var(--space-3); }

.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }

.lib-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-panel, var(--bg)); border: 1px solid var(--border); border-radius: var(--radius-sm);
}

.lib-card-fig { flex: 1; min-height: 130px; display: flex; align-items: center; justify-content: center; padding: 10px; background: var(--canvas); }
.lib-card-fig svg { width: 100%; height: auto; max-height: 180px; display: block; margin: 0 auto; }

.lib-card-badges {
  position: absolute; top: 6px; left: 6px; z-index: 2; pointer-events: none;
  display: flex; flex-wrap: wrap; gap: 3px; max-width: calc(100% - 12px);
}
.lib-badge {
  padding: 1px 6px; font-size: 10px; font-family: ui-monospace, monospace; text-transform: lowercase;
  background: var(--bg-panel, var(--bg)); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.lib-card-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px 8px; border-top: 1px solid var(--border);
}
.lib-card-meta { font-family: ui-monospace, monospace; font-size: var(--font-xs); color: var(--text-secondary); }
.lib-card-note {
  margin: 0; padding: 6px 8px; font-size: var(--font-xs); line-height: 1.45;
  color: var(--text-secondary); border-top: 1px solid var(--border);
}

/* One picture of what is being authored, on the ground the canvas uses. */
.lib-fig {
  display: flex; align-items: center; justify-content: center; min-height: 150px;
  padding: 10px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.lib-fig svg { width: 100%; height: auto; max-height: 260px; display: block; }

/* ── the browse page: a strip over a grid ─────────────────────────────────────────────────────────── */
.lib-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.lib-strip {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
}
.lib-strip-gap { flex: 1 1 auto; }
.lib-strip .lib-count { margin: 0; }

.lib-search {
  display: flex; align-items: center; gap: var(--space-2); flex: 0 1 260px; min-width: 180px;
  height: var(--control-height); padding: 0 var(--space-2);
  background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.lib-search:focus-within { border-color: var(--accent); }
.lib-search svg { width: var(--icon-xs); height: var(--icon-xs); color: var(--text-muted); flex: 0 0 auto; }
.lib-search-input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  color: var(--text-primary); font: inherit; font-size: var(--font-sm); outline: none;
}

.lib-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3); }

/* A card is a link to its editor, so the whole figure is the target. */
a.lib-card-fig { text-decoration: none; }
.lib-card:hover { border-color: var(--accent); }

/* ── the chooser: the six libraries, over what each one holds ─────────────────────────────────────── */
.lib-hero { margin-bottom: var(--space-4); }
.lib-hero-title { margin: 0 0 var(--space-2); font-size: var(--font-2xl); color: var(--text-bright); }
.lib-hero-lead { margin: 0; max-width: 72ch; color: var(--text-secondary); }
.lib-choices { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lib-choice-fig {
  display: flex; align-items: center; justify-content: center; height: 96px; overflow: hidden;
  background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.lib-choice-fig svg { max-width: 100%; max-height: 100%; }
.lib-choice-empty { font-size: var(--font-xs); color: var(--text-muted); }

/* ── the editor page: the outline, its fields, and the preview companion ──────────────────────────── */
/* A node's outline row and the fields that edit it are one thing said twice, so the two columns are
   adjacent and the picture takes a column of its own on the right. */
.lib-name { padding: 0 0 var(--space-2); }

.lib-outline { display: flex; flex-direction: column; gap: 1px; }
.lib-outline-row {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: 5px 8px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-primary); font: inherit; font-size: var(--font-sm);
  text-align: left; cursor: pointer;
}
.lib-outline-row:hover { background: var(--bg-selected-hover); }
.lib-outline-row--picked { background: var(--bg-selected); color: var(--text-strong); box-shadow: var(--shadow-ring); }
.lib-outline-mark { flex: 0 0 auto; display: grid; place-items: center; width: var(--icon-xs); height: var(--icon-xs); }
.lib-outline-mark svg { width: 100%; height: 100%; color: var(--text-muted); }
.lib-outline-row--picked .lib-outline-mark svg { color: var(--text-strong); }
.lib-outline-swatch { width: 100%; height: 100%; border-radius: 2px; border: 1px solid var(--border-swatch); }
.lib-outline-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-outline-tag {
  flex: 0 0 auto; font-family: ui-monospace, monospace; font-size: 10px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 4px;
}


/* The fields of the picked node — or of every node, on a document that does not nest. It is the widest
   column because it is the one being authored; the save bar sits against its foot, out of the scroll. */
.lib-fields {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  overflow: hidden; background: var(--bg-base);
}
.lib-fields-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: var(--space-4); }

/* A form is read along its labels, so the column stops widening well before the window does. */
.lib-doc { display: flex; flex-direction: column; gap: var(--space-4); max-width: 780px; }

/* Every section at once, in as many columns as fit — what a flat document is for. */
.lib-doc--sheet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start; gap: var(--space-3) var(--space-4); max-width: 1120px;
}
.lib-doc--sheet .panel-section { margin: 0; }
/* A section wide enough to hold a row of controls rather than a column of them takes the full width. */
.lib-doc--sheet .lib-section--wide { grid-column: 1 / -1; }

/* The section an outline row reaches on a flat document — marked while it is the picked one, so a scroll
   that lands mid-column still says which row was asked for. */
.lib-section { scroll-margin-top: var(--space-3); border-radius: var(--radius-sm); }
.lib-section--picked { box-shadow: var(--shadow-ring); }

.lib-foot {
  flex-shrink: 0; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-panel); border-top: 1px solid var(--border);
}
.lib-foot .panel-actions { margin: 0 0 0 auto; }
.lib-foot-note { margin: 0; }

/* The picture, as a companion rather than a stage: a fixed column the resize handle can widen, positioned
   so the view chips and the sample dock hang from it the way they hang from a canvas. */
.lib-preview {
  width: 420px; position: relative;
  background: var(--bg-canvas); border-left: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: auto; padding: var(--space-3);
}
.lib-stage-figure {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3);
  width: 100%; max-width: 560px;
}
.lib-stage-figure figure { margin: 0; display: flex; align-items: center; justify-content: center; }
/* A companion is narrow and tall, so a picture in it is fitted to the width it has and capped on the
   height it may claim — the other way round leaves a wide section drawn small in a column of empty. */
.lib-stage-figure .lib-fig { min-height: 0; padding: var(--space-2); }
.lib-stage-figure .lib-fig svg { width: 100%; height: auto; max-height: 38vh; }

/* The house views in a companion column: the building over the cuts, stacked rather than side by side,
   because a column this wide fits one picture across and three of them would each be a thumbnail. The
   building is a WebGL canvas the scene positions against this box, so the box is what has to have a size:
   it claims the column's width outright rather than shrinking to fit a picture the way a cut does. */
.lib-stage-figure .house-views__iso { position: relative; height: 26vh; width: 100%; }
.lib-stage-figure .house-views__cuts { display: flex; gap: var(--space-2); justify-content: center; height: 16vh; }
.lib-stage-figure .house-views__cut { height: 100%; min-width: 0; }
.lib-stage-figure .house-views__cut svg { height: 100%; width: auto; max-width: 100%; }

/* The turn sits over the picture rather than beside it: the canvas fills its box, and a control in the flow
   would push the box the scene measures. Shown on hover or focus, so a still building is just the building. */
.house-views__turn {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  opacity: 0; transition: opacity var(--transition-fast);
}
.house-views__iso:hover .house-views__turn,
.house-views__turn:focus-visible { opacity: 1; }

/* Nothing to draw with: the note takes the box the canvas would have had, so the cuts below it do not jump. */
.house-views__iso--flat { display: flex; align-items: center; justify-content: center; }
.house-views__note { margin: 0; padding: 0 var(--space-4); text-align: center;
                     color: var(--text-muted); font-size: var(--font-sm); }

/* One view, alone: nothing shares the column with it, so it takes all of it. */
.lib-stage-figure:has(.house-views__iso:only-child) .house-views__iso,
.lib-stage-figure .house-views__cuts:only-child { height: 52vh; }

/* The chrome inside the companion is narrower than a canvas's, so it hugs the edges it hangs from. */
.lib-preview .canvas-layer-bar { top: 8px; right: 8px; left: 8px; justify-content: flex-end; }
.lib-preview .canvas-dock { bottom: 10px; }
.lib-preview .canvas-note { position: absolute; left: 0; right: 0; bottom: 52px; text-align: center; }

/* A bucket is a binding and the swatch of what that binding paints, side by side — the control and its
   answer, which is the whole reason the fields column has width. */
.lib-bucket { display: flex; align-items: flex-start; gap: var(--space-3); }
.lib-bucket-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lib-bucket-swatch { flex: 0 0 64px; width: 64px; }

/* The geometry knobs read across rather than down: three unrelated questions, none of which is a step. */
.lib-knobs { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: flex-start; }
.lib-knobs > .field { flex: 1 1 240px; min-width: 0; max-width: 360px; }
/* The bedrock floor is a mode and the number it takes: one question, so the two share a row and the mode —
   which carries a sentence — gets the width, not the count. */
.lib-knobs .panel-actions { flex-wrap: nowrap; gap: var(--space-2); }
.lib-knobs .panel-actions > :first-child { flex: 1 1 auto; min-width: 0; }
.lib-knobs .panel-actions .field-input--slim { flex: 0 0 68px; width: 68px; }