/* /planner: the Workshop Planner. */
.pl-layout { display: grid; gap: 22px; }
/* The side panel sticks only beside the plan, never over the lists below it. */
.pl-work { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.pl-side { position: sticky; top: calc(var(--header-h, 64px) + 16px); display: grid; gap: 12px; }
.pl-side h2, .pl-main h2, .pl-lists h2 { margin: 0; font-size: 1.1rem; }
.pl-head { display: grid; gap: 8px; }
.pl-add { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-spaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-spaces button { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-dark); background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.pl-spaces button[aria-current="true"] { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, transparent); }
.pl-spaces small { color: var(--muted-dark); font-family: var(--font-mono); font-size: 11.5px; }
.pl-space-form { display: grid; gap: 8px; font-size: 13.5px; }
.pl-space-form .pl-dims { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.pl-space-form label { display: flex; align-items: center; gap: 6px; }
.pl-space-form .pl-dims input { width: 76px; }
.pl-space-form .pl-name { width: 100%; }
.pl-space-form .hint { margin: 0; font-size: 12.5px; color: var(--muted-dark); }
.pl-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-palette .ut-chip, .pl-chip { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-dark); background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.pl-chip[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: var(--teal-ink); }
.pl-brush { display: flex; flex-wrap: wrap; gap: 8px 12px; width: 100%; font-size: 13px; }
.pl-brush label { display: flex; align-items: center; gap: 6px; }
.pl-brush select { width: auto; }
.pl-bed { display: grid; gap: 4px; font-size: 13.5px; }
.pl-main { display: grid; gap: 10px; min-width: 0; }
.pl-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pl-size, .pl-total { margin: 2px 0 0; font-size: 13px; color: var(--muted-dark); }
.pl-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-stage { border-radius: 12px; background: var(--carbon-3, #262a2e); padding: 12px; overflow: hidden; }
.pl-3d { width: 100%; height: 520px; display: block; border-radius: 8px; touch-action: none; }
.pl-3d[hidden], .pl-svg[hidden] { display: none; }
.pl-views { display: inline-flex; gap: 2px; }
.pl-views [aria-pressed="true"], [data-pl-real][aria-pressed="true"] { background: var(--teal); color: var(--carbon); }
.pl-svg { width: 100%; height: auto; max-height: 560px; display: block; touch-action: none; user-select: none; }
.pl-space { fill: rgba(232, 226, 207, .06); stroke: rgba(232, 226, 207, .55); stroke-width: 1.2; }
.pl-cell { fill: transparent; stroke: rgba(232, 226, 207, .14); stroke-width: .6; cursor: pointer; }
.pl-cell:hover { fill: rgba(158, 196, 181, .16); }
.pl-item rect { fill: #9ec4b5; stroke: #1e2124; stroke-width: 1; cursor: grab; }
.pl-item.pl-cable rect { fill: #b9b2a3; }
.pl-item.pl-cable text { fill: var(--text); }
.pl-joint { fill: #b9b2a3; pointer-events: none; }
.pl-item.pl-sel rect { stroke: #39ff8b; stroke-width: 2.4; }
.pl-item.pl-bad rect { fill: #e0816f; }
.pl-item text { fill: #1e2124; font-family: var(--font-ui); font-weight: 600; pointer-events: none; }
.pl-front { fill: var(--muted-dark); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.pl-help { margin: 0; font-size: 13px; color: var(--muted-dark); }
.pl-selected:empty, .pl-warn:empty { display: none; }
.pl-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-dark); font-size: 13.5px; }
.pl-selected label { display: flex; align-items: center; gap: 6px; }
.pl-selected select { width: auto; }
.pl-warn { margin: 0; padding: 10px 12px 10px 28px; border-radius: 10px; background: color-mix(in srgb, #e0a33a 18%, var(--carbon)); border: 1px solid #e0a33a; font-size: 13.5px; display: grid; gap: 4px; }
.pl-lists { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.pl-lists section { display: grid; gap: 8px; }
.pl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pl-table th { text-align: left; font: 500 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted-dark); padding: 6px 8px; }
.pl-table td { padding: 8px; border-top: 1px solid var(--line-dark); vertical-align: top; }
.pl-table td:first-child { font-family: var(--font-mono); white-space: nowrap; }
.pl-table small { display: block; color: var(--muted-dark); font-size: 12px; }
.pl-table td:last-child { text-align: right; white-space: nowrap; }
.pl-note { margin: 0; font-size: 13px; color: var(--muted-dark); }
.pl-queue { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 14px; }
.pl-queue small { color: var(--muted-dark); }
@media (max-width: 900px) {
  .pl-work, .pl-lists { grid-template-columns: minmax(0, 1fr); }
  .pl-side { position: static; }
  .pl-table th:nth-child(3), .pl-table td:nth-child(3) { display: none; }
}

.pl-plates { display: grid; gap: 12px; }
.pl-plate { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--line-dark); border-radius: 12px; }
.pl-plate svg { width: 150px; height: 150px; display: block; }
.pl-plate ul, .pl-else ul { margin: 6px 0 8px; padding-left: 18px; font-size: 13px; }
.pl-plate small, .pl-else small { color: var(--muted-dark); }
.pl-bed { fill: var(--carbon-3); stroke: var(--line-dark); }
.pl-plate .k-bin, .pl-plate .k-part { fill: #9ec4b5; }
.pl-plate .k-tile { fill: #d9c09a; }
.pl-plate .k-base { fill: #8a9096; }
.pl-plate .k-small { fill: #e8e1cf; }
.pl-else { padding: 10px; border: 1px dashed var(--line-dark); border-radius: 12px; }
@media (max-width: 520px) { .pl-plate { grid-template-columns: 1fr; } .pl-plate svg { width: 100%; height: auto; } }
.pl-sync { margin: 10px 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--muted-dark); }

/* The drawer library */
.pl-lib { width: min(720px, calc(100vw - 24px)); }
.pl-lib-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; max-height: min(56vh, 520px); overflow: auto; }
.pl-lib-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--line-dark); border-radius: 12px; }
.pl-lib-item img, .pl-lib-noimg { width: 88px; height: 66px; object-fit: cover; border-radius: 8px; background: color-mix(in srgb, var(--teal) 10%, transparent); display: grid; place-items: center; color: var(--muted-dark); font-size: 11px; }
.pl-lib-item b { display: block; }
.pl-lib-item small { color: var(--muted-dark); display: block; margin-top: 2px; }
.pl-lib-item .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pl-lib-wait { color: var(--warn, #e0a33a); font-size: 12px; }
.pl-share-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.pl-share-size { margin: 0 0 12px; color: var(--muted-dark); font-size: 14px; }
.pl-share-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
@media (max-width: 560px) { .pl-share-grid { grid-template-columns: 1fr; } .pl-lib-item { grid-template-columns: 64px minmax(0, 1fr); } .pl-lib-item img, .pl-lib-noimg { width: 64px; height: 48px; } }

/* Notes and progress: what goes in each part, what's done, what's left. */
.pl-item.pl-done rect { fill: color-mix(in srgb, #9ec4b5 45%, var(--carbon, #1e2124)); stroke-dasharray: 4 3; }
.pl-item.pl-done text { fill: var(--text); }
.pl-item .pl-note-text { font-weight: 500; opacity: .85; }
.pl-it-note input { width: 14em; }
.pl-progress:empty { display: none; }
.pl-progress { font-size: 13.5px; line-height: 1.5; display: grid; gap: 6px; }
.pl-bar { height: 8px; border-radius: 99px; background: var(--line-dark); overflow: hidden; }
.pl-bar span { display: block; height: 100%; background: #9ec4b5; border-radius: 99px; }
.pl-notes { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; }
.pl-notes textarea { font-weight: 400; resize: vertical; }
.pl-progress p { margin: 0; }

/* My plans: named plans on your account */
.pl-saved { margin: 4px 0 14px; border: 1px solid var(--line-dark); border-radius: 12px; }
.pl-saved > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font: 600 14.5px/1.2 var(--font-ui); }
.pl-saved > summary::-webkit-details-marker { display: none; }
.pl-saved > summary small { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--carbon-3); font: 600 12px/1.5 var(--font-mono); text-align: center; }
.pl-saved > summary small:empty { display: none; }
.pl-saved-body { padding: 0 12px 12px; display: grid; gap: 10px; }
.pl-saved-form { display: flex; gap: 6px; }
.pl-saved-form .input { flex: 1; min-width: 0; }
.pl-saved-note { margin: 0; font-size: 13px; color: var(--muted-dark); }
.pl-saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-saved-list li { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-dark); }
.pl-saved-list li.on { border-color: var(--teal); }
.pl-saved-list li > span:first-child { display: grid; gap: 2px; min-width: 0; }
.pl-saved-list small { color: var(--muted-dark); font-size: 12px; }
.pl-saved-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.pl-saved-empty { color: var(--muted-dark); font-size: 13px; border-style: dashed !important; }
.link-btn { background: none; border: 0; padding: 0; color: var(--teal-text); font: inherit; text-decoration: underline; cursor: pointer; }
/* The whole kit, ready to print */
.pl-kit { grid-column: 1 / -1; padding: 14px; border: 1px solid var(--teal); border-radius: 14px; background: color-mix(in srgb, var(--teal) 7%, transparent); display: grid; gap: 8px; margin-bottom: 12px; }
.pl-kit h3 { margin: 0; font-size: 16px; }
.pl-kit-pick { display: grid; gap: 4px; font-size: 13px; }
.pl-kit-pick .input { width: 100%; min-width: 0; }
.pl-kit-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-kit .ready-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.pl-kit .ready-pick { display: grid; gap: 4px; font-size: 13px; }
.pl-kit .ready-pick .input { width: 100%; min-width: 0; }