/* style/components/sidebar-rows.css
   Layout helpers for streamlined sidebar rows
   Generated for task: 94-streamline-sidebar-ui
*/

:root {
  /* compact reserved widths (token-driven, compact mode) */
  --pfse-sidebar-numeric-w: 48px;    /* ultra-compact numeric inputs */
  --pfse-sidebar-color-chip-w: 18px; /* ultra-compact color chip */
  --pfse-sidebar-actions-w: 40px;    /* ultra-compact action buttons block */
  --pfse-sidebar-control-height-xs: var(--pfse-control-height-sm);
  --pfse-sidebar-gap: var(--pfse-spacing-2);
  /* grid column widths for trace rows */
  --pfse-trace-col: minmax(0, 1fr);
}

.growth-knob-row {
  display: flex;
  align-items: center;
  gap: var(--pfse-sidebar-gap);
  padding: calc(var(--pfse-spacing-2) * 0.45) 0;
  min-height: var(--pfse-sidebar-control-height-xs);
}

.growth-knob-row .growth-knob-label {
  flex: 0 0 112px; /* reduced from 160px to match compact traces */
  margin-right: var(--pfse-spacing-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.growth-knob-row .growth-knob-control {
  flex: 1 1 auto;
}

/* Container for all trace rows */
.trace-rows,
/* Back-compat shim: map legacy selector to new layout */
.trace-shade-editor {
  display: flex;
  flex-direction: column;
  gap: var(--pfse-sidebar-gap);
  /* allow temporary horizontal inspect when very narrow panels */
  overflow-x: auto;
}

.trace-row {
  display: grid;
  grid-template-columns: repeat(4, var(--pfse-trace-col));
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    "d-full d-full d-full d-full"
    "theta theta shading shading"
    "fillchip samples filltoggle fillalpha";
  row-gap: var(--pfse-spacing-1);
  column-gap: var(--pfse-spacing-2);
  align-items: start;
  justify-items: start;
  padding: calc(var(--pfse-spacing-1)) 0;
  min-height: calc(var(--pfse-sidebar-control-height-xs) * 2);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 12px;
}

.trace-row__cell {
  display: flex;
  align-items: flex-start;
  gap: var(--pfse-spacing-1);
  min-width: 0;
}

.trace-row__cell--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--pfse-spacing-1);
}

.trace-row__cell--theta { grid-area: theta; justify-content: flex-start; }
.trace-row__cell--shading { grid-area: shading; justify-content: flex-start; }

.trace-row__cell--fillchip { grid-area: fillchip; justify-content: flex-start; }
.trace-row__cell--samples { grid-area: samples; justify-content: flex-start; }
.trace-row__cell--filltoggle { grid-area: filltoggle; justify-content: flex-start; }
.trace-row__cell--fillalpha { grid-area: fillalpha; justify-content: flex-start; }

.trace-row__cell--d-full {
  grid-area: d-full;
  justify-content: flex-start;
  flex-direction: column;
  align-items: stretch;
  gap: var(--pfse-spacing-1);
}

.trace-row__title-row {
  width: 100%;
}

.trace-row__stroke-control {
  display: flex;
  align-items: center;
  gap: var(--pfse-spacing-2);
  width: 100%;
}

.trace-row__fill-row {
  display: flex;
  align-items: center;
  gap: var(--pfse-spacing-2);
  width: 100%;
}

.trace-row__hidden {
  visibility: hidden;
  pointer-events: none;
}

.trace-row__cell--spacer {
  visibility: hidden;
  pointer-events: none;
}

/* Make numeric inputs denser */
.trace-row .reserved-numeric { padding: 2px 4px; text-align: right; }

/* ensure color chips are compact and don't overflow */
.trace-row .reserved-color-chip { border-radius: 3px; overflow: hidden; }

/* Reserved widths for conditional controls to avoid reflow when hidden */
.trace-row .reserved-numeric {
  width: var(--pfse-sidebar-numeric-w);
  min-width: var(--pfse-sidebar-numeric-w);
}

.trace-row .reserved-color-chip {
  width: var(--pfse-sidebar-color-chip-w);
  min-width: var(--pfse-sidebar-color-chip-w);
  height: var(--pfse-sidebar-color-chip-w);
}

.trace-row__actions {
  width: var(--pfse-sidebar-actions-w);
  min-width: var(--pfse-sidebar-actions-w);
  display: flex;
  gap: var(--pfse-spacing-1);
  justify-content: flex-end;
}

/* Compact action buttons/icons */
.trace-row__actions button,
.trace-row__actions .icon {
  height: 20px;
  min-width: 20px;
  padding: 0 4px;
  font-size: 11px;
  border-radius: 4px;
}

/* Shrink numeric / slider value fields */
.trace-row .reserved-numeric,
.number-slider__value {
  width: var(--pfse-sidebar-numeric-w);
  min-width: var(--pfse-sidebar-numeric-w);
  height: var(--pfse-control-height-sm);
  font-size: 12px;
  padding: 2px 6px;
}

/* smaller color chip */
.trace-row .reserved-color-chip,
.trace-row .color-chip {
  width: var(--pfse-sidebar-color-chip-w);
  height: var(--pfse-sidebar-color-chip-w);
  min-width: var(--pfse-sidebar-color-chip-w);
  border-radius: 3px;
}

/* Keep the stroke swatch visible by neutralizing the icon button fill inside the tiny chip */
.trace-row .color-chip__actions .btn-icon {
  background: transparent;
  border: none;
  padding: 0;
  min-width: auto;
  color: var(--pfse-text-high);
}
.trace-row .color-chip__actions .btn-icon:hover,
.trace-row .color-chip__actions .btn-icon:active {
  background: transparent;
  border: none;
}

/* Hide but preserve space for conditional controls */
.trace-row .conditional {
  transition: visibility 0.12s linear, opacity 0.12s linear;
}

.trace-row .conditional.hidden {
  visibility: hidden;
  opacity: 0;
}

/* Small focus/hover affordance */
.trace-row:focus-within,
.trace-row:hover {
  background: rgba(0,0,0,0.01);
}

/* Ensure discrete slider fills the trace bottom cell and value badge aligns */
.trace-row__stroke-control .number-slider { flex: 1 1 auto; width: 100%; }
.trace-row__stroke-control .number-slider__meta { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.trace-row__cell--a-left .caption { text-align: left; }