/* Rust base planner (/rust-base-planner) — see docs/PLANNER_SPEC.md §7.
   Colors are the §7 palette (don't bikeshed). The canvas box below is
   CLS-critical: it must reserve its size from first paint so the 3D canvas
   mounting in never shifts layout. */

.pl-wrap { color: #f1f1f1; max-width: 1000px; }
.pl-wrap a { color: #cd412b; }
.pl-note { font-size: 13px; font-style: italic; opacity: .8; }

/* ---- CLS-critical canvas box (reserved from first paint) ---- */
.pl-canvas {
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 340px;
    max-height: 72vh;
    background: #1a1d21;
    border: 1px solid #2c3136;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.pl-canvas canvas { display: block; width: 100%; height: 100%; }
.pl-noscript {
    position: absolute; inset: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 1rem; color: #f1f1f1;
}

/* ---- palette + controls ---- */
.pl-palette { margin: 1rem 0 .75rem; }
.pl-tools, .pl-tiers, .pl-actions {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center;
}
.pl-actions { gap: 14px; }
/* Door-type selector — only shown (JS toggles [hidden]) while Door is active. */
.pl-doors:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.pl-level, .pl-mode, .pl-undo { display: flex; gap: 6px; align-items: center; }
.pl-level-label { min-width: 34px; text-align: center; font-weight: bold; }

.pl-chip {
    background: #2b2f34; color: #f1f1f1; border: 1px solid #444a52;
    padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px;
    white-space: nowrap;
}
.pl-chip:hover:not(:disabled) { border-color: #cd412b; }
.pl-chip.pl-active { background: #cd412b; border-color: #cd412b; color: #fff; }
.pl-chip:disabled { opacity: .55; cursor: default; }

.pl-btn {
    background: #cd412b; color: #fff; border: none;
    padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold;
}
.pl-btn:disabled { opacity: .55; cursor: default; }

/* ---- live cost panel ---- */
.pl-cost {
    margin-top: 1rem; background: #1c1c1c; border: 1px solid #444;
    border-radius: 8px; padding: 14px;
}
.pl-cost-h { font-size: 18px; margin: 14px 0 8px; color: #f1f1f1; }
.pl-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-card {
    display: flex; flex-direction: column; min-width: 110px;
    background: #242424; border: 1px solid #444a52; border-left: 3px solid #cd412b;
    border-radius: 6px; padding: 8px 12px;
}
.pl-card.pl-upkeep { border-left-color: #f0a020; }
.pl-card.pl-raid { border-left-color: #8f9296; }
.pl-amt { font-size: 20px; font-weight: bold; color: #fff; }
.pl-card.pl-upkeep .pl-amt { color: #f0a020; }
.pl-lbl { font-size: 13px; opacity: .85; margin-top: 2px; }
.pl-share-row { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#planner-share-msg { margin: 0; }

/* ---- shared-layout (SSR) block ---- */
.pl-shared {
    background: rgba(205, 65, 43, 0.08); border: 1px solid #cd412b;
    border-radius: 8px; padding: 10px 14px; margin: 1rem 0;
}
/* SSR piece breakdown — a compact 2-column list so a big base doesn't run long. */
.pl-shared-counts {
    columns: 2; column-gap: 24px; margin: .5rem 0; padding-left: 1.2rem;
    font-size: 14px;
}
.pl-shared-counts li { break-inside: avoid; margin-bottom: 2px; }
.pl-shared .pl-cost-h { margin: 12px 0 6px; }
@media (max-width: 390px) { .pl-shared-counts { columns: 1; } }

.pl-steps li { margin-bottom: 6px; }
.pl-faq h3 { margin-top: 1rem; }

/* Build/Look toggle is mobile-only — desktop orbits on right-drag (§7 D8),
   so hide the mode toggle from ~laptop width up. */
@media (min-width: 1024px) {
    .pl-mode { display: none; }
}

/* ---- mobile: palette becomes a horizontally scrollable chip row ---- */
@media (max-width: 390px) {
    .pl-tools, .pl-tiers, .pl-doors:not([hidden]) {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .pl-chip { flex: 0 0 auto; }
}