.wall-system-switch {
  flex: none;
  display: flex;
  gap: 12px;
  border-bottom: 1px solid #aaa;
  margin-bottom: 12px;
}
.wall-system-switch a {
  padding: 8px 16px 7px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: #fff;
  color: #111;
  font: inherit;
  text-decoration: none;
}
.wall-system-switch a[aria-current="page"] {
  border-bottom-color: #111;
  font-weight: 700;
}
.rails-builder {
  display: grid;
  grid-template-columns: clamp(180px, 20%, 260px) minmax(0, 1fr);
  gap: 20px;
  min-height: 0;
  overflow: auto;
  padding-bottom: 16px;
}
.rails-controls { padding: 8px 16px 0 0; border-right: 1px solid #ddd; }
.rails-controls label { display: block; font-weight: 650; }
.rails-controls textarea,
.rails-controls input,
.rails-controls select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px;
  border: 1px solid #aaa;
  background: #fff;
  color: #111;
  font: inherit;
}
.rails-controls textarea { margin-top: 8px; resize: vertical; }
.rails-controls input[type="color"] { padding: 4px; max-width: 70px; }
.rails-hint { margin: 6px 0 15px; color: #565656; font-size: 13px; line-height: 1.45; }
.rails-fields { display: grid; gap: 6px; padding: 0 0 12px; font-size: 14px; }
.rails-fields label:not(:first-child) { margin-top: 6px; }
.rails-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.rails-heading h2 { margin: 0; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.15; }
.rails-comparison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rails-card { display: flex; flex-direction: column; padding: 12px; border: 1px solid #ccc; }
.rails-card h3 { margin: 0 0 12px; font-size: clamp(16px, 1.7vw, 24px); line-height: 1.18; }
.rails-preview {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 4 / 5;
  background: radial-gradient(ellipse at 50% 7%, #fff8 0%, transparent 76%), var(--rails-wall, #e7e1d7);
}
.rails-preview svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.rails-preview-large { height: clamp(300px, 55svh, 660px); aspect-ratio: auto; }
.rails-preview-large svg { max-width: 850px; }
.rails-card p { flex: 1; margin: 12px 0; font-size: 14px; }
.rails-card button, .rails-heading button {
  border: 1px solid #111;
  background: #fff;
  color: #111;
  padding: 8px 12px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.rails-card button:hover, .rails-heading button:hover { background: #111; color: #fff; }
.rails-card button:focus-visible, .rails-heading button:focus-visible, .wall-system-switch a:focus-visible { outline: 2px solid #33609a; outline-offset: 2px; }
.rails-fit { margin: 10px 0; font-size: 14px; }
.rails-fit[data-overflow="true"] { color: #912e1e; font-weight: 650; }
.rails-concept-note { margin-top: 12px; }
@media (max-width: 760px) {
  .wall-system-switch { margin-bottom: 7px; }
  .wall-system-switch a { padding-block: 5px; }
  .rails-builder { display: block; }
  .rails-controls { border-right: 0; padding: 0; margin-bottom: 18px; }
  .rails-controls textarea { min-height: 68px; }
  .rails-card { padding: 6px; }
  .rails-card h3 { font-size: 14px; }
  .rails-card p, .rails-card button { font-size: 12px; }
  .rails-comparison { gap: 5px; }
}
.rails-scene-actions { display: grid; gap: 8px; margin-top: 8px; }
.rails-scene-actions label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rails-scene-actions input[type="checkbox"] { width: 16px; min-height: 16px; }
.rails-save-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.rails-save-actions p { flex: 1 0 100%; margin: 0; }
.rails-scene-actions button, .rails-save-actions button { background: white; color: #111; border: 1px solid #999; padding: 7px 10px; font: inherit; cursor: pointer; }
.rails-save-actions #rails-save { color: white; background: #111; border-color: #111; }
.rails-save-actions a { padding: 7px 4px; }
#rails-rail-height-note { margin: 0; }
.rails-finish-choice { display: grid; gap: 6px; margin-bottom: 5px; }
.rails-finish-choice select { min-width: 0; }
.rails-finish-color:not([hidden]) { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.rails-finish-color input[type="color"] { width: 42px; min-height: 30px; }
#rails-corner-control select { margin-top: 6px; }
@media (min-width: 761px) {
  .rails-builder {
    flex: 1;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }
  .rails-controls, .rails-content { min-height: 0; overflow-y: auto; }
}
#rails-tile-options button {
  background: #fff;
  color: #111;
  border: 1px solid #999;
  padding: 6px 8px;
  font: inherit;
  cursor: pointer;
}
#rails-tile-options button:disabled { opacity: .55; cursor: default; }
#rails-tile-options button[aria-pressed="true"], #rails-add-tile:not(:disabled) { color: #fff; background: #111; border-color: #111; }
.rails-tile-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rails-tile-editor { display: grid; gap: 6px; border-top: 1px solid #ddd; padding-top: 9px; }
.rails-tile-editor .rails-tile-check { display: flex; gap: 7px; align-items: center; }
.rails-tile-check input[type="checkbox"] { width: 15px; min-height: 15px; }
#rails-tile-options .rails-hint { margin: 0; overflow-wrap: anywhere; }
.rails-preview [data-rails-tile] { cursor: pointer; fill: transparent; }
.rails-preview [data-rails-tile]:hover, .rails-preview [data-rails-tile]:focus-visible, .rails-preview [data-rails-tile][aria-pressed="true"] {
  stroke: #176fa8; stroke-width: 2; vector-effect: non-scaling-stroke;
}
.rails-tile-label { font-weight: 650; }
.rails-swatches { margin: 0; }
.rails-swatches .swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 4px; padding: 0 0 8px; }
.rails-swatches .rails-swatch-group { margin: 6px 0; color: #444; font-size: 11px; }
.rails-swatches .finish-swatch[data-texture="mesh"], .rails-swatches .current-swatch[data-texture="mesh"] {
  background-image: url('/assets/rails-perforated-steel.jpg');
  background-size: 170px auto;
}
.rails-swatches [data-texture="quilt"] { background-image: repeating-linear-gradient(45deg, #fff3 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, #0003 0 1px, transparent 1px 5px); }
.rails-swatches [data-texture="turf"] { background-image: repeating-linear-gradient(45deg, #fff3 0 1px, transparent 1px 3px); }
#rails-tile-options .rails-swatches .finish-swatch { background-color: var(--swatch); padding: 0; border: 1px solid #999; }
#rails-tile-options .rails-swatches .finish-swatch[aria-pressed="true"] { outline: 2px solid #111; outline-offset: 1px; }
.rails-preview [data-rails-tile] { cursor: grab; touch-action: none; }
.rails-preview .rails-tile-drag-source { cursor: grabbing; fill: #176fa826; }
.rails-preview .rails-tile-drag-target { fill: #176fa826; stroke: #176fa8; stroke-width: 2; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }