/* Build plans UI (step 6): options bar, Layers rows, Properties form, Materials window. Uses tokens.css only. */

/* Options bar: Build Plan tool */
.optionsbar .opt-plan-snap button { white-space: nowrap; }

/* Layers: plan rows */
.plan-chip { flex: none; width: 12px; height: 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius); box-sizing: border-box; }
.lyr-badge.nether-plan { color: #ff9a6a; border-color: #8a4a2c; background: rgba(247, 107, 21, .12); }

/* Properties: plan */
.pp-plan-form .pp-xyz { display: grid; grid-template-columns: 14px 1fr 14px 1fr 14px 1fr; align-items: center; gap: 3px; }
.pp-plan-form .pp-xyz label { color: var(--text-dim); text-align: center; }
.pp-plan-form .pp-xyz input { width: 100%; min-width: 0; }
.pp-plan-form .pp-static { color: var(--text); font-family: var(--font-mono); }
.pp-rotrow { display: flex; align-items: center; gap: 6px; }

/* Materials window */
.mat-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.mat-win { width: 640px; max-width: calc(100vw - 32px); max-height: 84vh; display: flex; flex-direction: column; background: var(--bg-panel); border: 1px solid var(--border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, .6); color: var(--text); font-size: var(--fs-ui); }
.mat-title { display: flex; align-items: center; gap: 8px; background: var(--bg-panel-header); border-bottom: 1px solid var(--border); padding: 6px 10px; font-weight: 600; color: var(--text-bright); }
.mat-title .mat-sub { color: var(--text-dim); font-weight: 400; font-family: var(--font-mono); font-size: var(--fs-small); }
.mat-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.mat-bar .spacer { flex: 1; }
.mat-scroll { overflow: auto; min-height: 80px; background: var(--bg-input); }
.mat-table { width: 100%; border-collapse: collapse; }
.mat-table th { position: sticky; top: 0; background: var(--bg-panel-header); text-align: left; font-weight: 600; color: var(--text-dim); padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; cursor: default; user-select: none; }
.mat-table th:hover { color: var(--text-bright); }
.mat-table th.sorted { color: var(--text-bright); }
.mat-table th.num, .mat-table td.num { text-align: right; font-family: var(--font-mono); }
.mat-table td { padding: 3px 8px; border-bottom: 1px solid var(--border); }
.mat-table tr:hover td { background: var(--bg-hover); }
.mat-table tr.gathered td { color: var(--text-dim); }
.mat-table tr.gathered td.name { text-decoration: line-through; }
.mat-table tfoot td { position: sticky; bottom: 0; background: var(--bg-panel-header); font-weight: 600; color: var(--text-bright); border-top: 1px solid var(--border-strong); }
.mat-swatch { display: inline-block; width: 14px; height: 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius); box-sizing: border-box; vertical-align: middle; }
.mat-empty { padding: 16px 10px; color: var(--text-dim); }
.mat-foot { display: flex; align-items: center; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--border); }
.mat-foot .spacer { flex: 1; }
.mat-foot .mat-status { color: var(--text-dim); font-size: var(--fs-small); }