@layer base {
/**
 * plan-builder.css — Guide-x
 * Plan form modal: the left sidebar (tools + pin-type tabs + zones), the
 * canvas system, the dropzone, the radial pin picker, the pin EDIT popup,
 * the custom pin-type modal and the cross-floor pairing dialog.
 * The per-pin "details card" panel, its form fields and the RAG preview
 * drawer were deleted 2026-07-27 (Phase 8 orphan sweep) - they had not been
 * rendered since the baseline commit.
 * Depends on: layout.css, modals.css (uses .modal-backdrop)
 */

/* ── Plan Form Modal ── */
.plan-form-box {
    background: var(--bg);
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    /* Fill the entire viewport to give the canvas maximum space */
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pf-header {
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pf-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.pf-project-name {
    flex: 1;
    text-align: center;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pf-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font-size: 20px;
    cursor: pointer;
    border-radius: 4px;
}
.pf-close:hover { color: #fff; background: var(--border); }
.pf-meta-grid {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}
.pf-meta-grid .pf-meta-field { max-width: 260px; }
.plan-form-box:not(.has-canvas) .pf-sidebar { visibility: hidden; width: 0; border: 0; padding: 0; }
.plan-form-box:not(.has-canvas) .pf-body    { grid-template-columns: 0 1fr; }
.pf-meta-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pf-meta-label {
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pf-meta-input,
.pf-field input[type=text],
.pf-field select,
.pf-field textarea {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 9px 11px;
    color: var(--ink);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.pf-meta-input:focus,
.pf-field input[type=text]:focus,
.pf-field select:focus,
.pf-field textarea:focus { border-color: rgba(99,199,106,0.4); }
/* Mandatory-field error state. Wins over :focus so the user keeps seeing the
   red border while typing into an empty required field. */
.pf-meta-input.error,
.pf-meta-input.error:focus { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.pf-meta-input::placeholder,
.pf-field input[type=text]::placeholder,
.pf-field textarea::placeholder { color: var(--ink-3); }
.pf-body {
    flex: 1;
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.pf-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    border-right: 1px solid var(--border);
    background: var(--bg-2);
}
.pf-tabs {
    flex: 1;
    padding: 8px 0 14px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    min-width: 0;
}
.pf-tabs-section-head {
    font-size: 9px;
    letter-spacing: 1.6px;
    color: var(--ink-3);
    font-weight: 700;
    padding: 10px 16px 6px;
    text-transform: uppercase;
}
.pf-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.12s;
}
.pf-tab:hover { background: var(--hover); }
.pf-tab.active {
    background: var(--hover);
    border-left-color: var(--flame);
}
/* Sidebar pin glyph — matches the round pin + letter-badge the user sees on canvas. */
.pf-tab-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.22);
    border: 1.5px solid rgba(0,0,0,0.35);
}
.pf-tab-label {
    font-size: 11px;
    letter-spacing: 0.4px;
    color: var(--ink-2);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pf-tab.active .pf-tab-label { color: #fff; }
.pf-tab-count {
    font-size: 11px;
    color: var(--ink-3);
    background: var(--bg-2);
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    flex-shrink: 0;
}
/* Tab + its hidden sub-items. Hovering the group reveals the sub-items so
   they're discoverable without crowding the sidebar. Sub-items are clickable
   and set a sub-type that the auto-name uses (e.g. "Hallway 1"). */
.pf-tab-group { position: relative; }
.pf-tab-group:hover .pf-tab-sub,
.pf-tab-group.has-active-sub .pf-tab-sub { display: block; }
.pf-tab-sub-item.active {
    background: rgba(99,199,106,0.13);
    color: var(--flame);
    font-weight: 700;
}

/* ── Tool buttons (sit above the tab list in the left sidebar) ── */
.pf-tools {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.pf-tool-vbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px;
    background: var(--bg);
    color: var(--ink-2);
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s, border-color 0.15s, color 0.15s;
}
.pf-tool-vbtn:hover {
    transform: translateY(-1px);
    background: var(--hover);
    border-color: var(--ink-3);
    color: #fff;
}
.pf-tool-vbtn .pf-tool-vbtn-icon {
    font-size: 14px;
    line-height: 1;
}
.pf-tool-vbtn.active {
    background: var(--flame);
    border-color: var(--flame);
    color: #fff;
    box-shadow: 0 3px 12px rgba(99,199,106,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
.pf-content {
    overflow-y: auto;
    padding: 18px 22px;
    min-height: 0;
}
.pf-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.12s;
    overflow: hidden;
}
.pf-card:hover { border-color: var(--border); }
.pf-card.expanded { border-color: var(--border); background: var(--bg-2); }
.pf-card.expanded .pf-card-head {
    border-bottom: 1px solid var(--hover);
    background: var(--bg-2);
}
.pf-card-name {
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    padding: 2px 6px 2px 0;
    width: 100%;
    border-bottom: 1px dashed transparent;
}
.pf-card-name::placeholder { color: var(--ink-3); font-weight: 400; font-style: italic; }
.pf-card-name:hover { border-bottom-color: var(--border); }
.pf-card-name:focus {
    border-bottom-color: var(--flame);
    background: var(--bg-2);
    padding-left: 4px;
}
.pf-card-icon-btn.danger { font-size: 16px; font-weight: 400; line-height: 1; padding: 0 8px; }
.pf-card-icon-btn.danger:hover { color: #ff6b6b; border-color: #3a1a1a; background: #1a0e0e; }
.pf-card.expanded .pf-card-chevron { color: var(--flame); transform: rotate(180deg); }
.pf-field-row.single { grid-template-columns: 1fr; }
.pf-toggle-switch.on { background: rgba(99,199,106,0.27); }
.pf-toggle-switch.on::after {
    transform: translateX(16px);
    background: var(--flame);
}
.pf-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.pf-footer-error {
    color: #ff6b6b;
    font-size: 11px;
    flex: 1;
}
.pf-footer-buttons {
    display: flex;
    gap: 10px;
}
.pf-kbd-hints {
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
}
.pf-kbd-hints span { display: inline-flex; align-items: center; }
.pf-kbd-hints .pf-kbd-sep { color: var(--border); font-weight: 700; }
.pf-kbd-hints kbd {
    background: var(--hover);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 6px;
    font-family: inherit;
    font-size: 9px;
    color: var(--ink-2);
    margin-right: 6px;
}
.pf-conn-pill.on {
    background: rgba(99,199,106,0.13);
    border-color: var(--flame);
    color: var(--flame);
    font-weight: 600;
}
.pf-conn-pill.on:hover {
    background: rgba(99,199,106,0.2);
}
/* Typed links: open-plan pills echo the canvas (dashed = no separating
   door/wall); the tiny DOOR/OPEN tag names the type. Legacy untyped links
   keep the plain .on look. */
.pf-conn-pill.on.open {
    border-style: dashed;
}/* ── Collapsible meta header ── */
.pf-header.collapsed .pf-meta-grid { display: none; }
.pf-header.collapsed .pf-header-summary { display: block; }/* ── Canvas visual plan system ── */
/* When canvas is active: tabs | CANVAS | form-right.
   Preview hides. Form slides into the right column. */
.plan-form-box.has-canvas .pf-body {
    grid-template-columns: 300px 1fr;
}
.plan-form-box.has-canvas .pf-sidebar { visibility: visible; width: auto; }
.plan-form-box.has-canvas .pf-content {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pf-canvas-region {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.pf-canvas-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 10px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--hover);
    flex-shrink: 0;
}
.pf-canvas-toolbar-spacer {
    flex: 1;
}
.pf-zoom-segment {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-2);
}
.pf-zoom-segment .pf-canvas-tool-btn {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 5px 11px;
}
.pf-zoom-segment .pf-canvas-tool-btn:hover {
    background: var(--hover);
}
.pf-zoom-segment .pf-canvas-zoom-label {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 0 8px;
    line-height: 22px;
    min-width: 44px;
}
.pf-canvas-tool-btn {
    background: var(--hover);
    border: 1px solid var(--border);
    color: var(--ink-2);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
    white-space: nowrap;
}
.pf-canvas-tool-btn:hover { color: var(--ink); border-color: var(--ink-3); background: var(--border); }
.pf-canvas-tool-btn.active { background: var(--flame); border-color: var(--flame); color: #fff; }
.pf-canvas-tool-group .pf-canvas-tool-btn { border-radius: 0; border: none; border-right: 1px solid var(--border); }
.pf-canvas-tool-group .pf-canvas-tool-btn:last-child { border-right: none; }
.pf-canvas-tool-group .pf-canvas-tool-btn.active { border-color: var(--flame); }
.pf-canvas-tool-btn.pf-tool-big {
    padding: 9px 22px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg-2);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pf-canvas-tool-btn.pf-tool-big:hover { transform: translateY(-1px); background: var(--hover); border-color: var(--ink-3); }
.pf-canvas-tool-btn.pf-tool-big.active {
    background: var(--flame);
    border-color: var(--flame);
    color: #fff;
    box-shadow: 0 4px 14px rgba(99,199,106,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
.pf-canvas-tool-btn.pf-tool-big .pf-tool-icon { font-size: 15px; margin-right: 6px; }
.pf-view-btn.active { background: var(--border); color: var(--flame); }
.pf-canvas-page-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--ink-2);
}
.pf-canvas-page-btn {
    background: var(--hover);
    border: 1px solid var(--border);
    color: var(--ink-2);
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* color: var(--ink), not #fff — the button keeps its light background on hover,
   so white text made the page-nav glyphs vanish (white-on-near-white). */
.pf-canvas-page-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.pf-canvas-wrap {
    flex: 1;
    position: relative;
    background: #ffffff;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}
.pf-canvas-wrap canvas {
    position: absolute;
    top: 0;
    left: 0;
}
/* Idle (no tool active) — default arrow. The tool-* class-specific rules
   below override this when a tool is selected. */
.pf-canvas-wrap { cursor: default; }
.pf-canvas-wrap.tool-select { cursor: default; }
.pf-canvas-wrap.tool-pin { cursor: crosshair; }
.pf-canvas-wrap.tool-connect { cursor: cell; }
.pf-canvas-wrap.tool-label { cursor: crosshair; }
.pf-canvas-wrap.tool-zone  { cursor: crosshair; }
.pf-canvas-wrap.tool-erase { cursor: not-allowed; }
/* Tabs column becomes a vertical stack so zones section can sit above the tab list. */
.pf-tabs { display: flex; flex-direction: column; }
.pf-tabs-list { display: flex; flex-direction: column; }
/* ── Flat zones sidebar (above tabs) ── */
.pf-zones-section {
    padding: 8px 12px 8px;
    border-bottom: 1px solid var(--ink);
    background: var(--bg-2);
    font-family: Geist, -apple-system, BlinkMacSystemFont, sans-serif;
    flex-shrink: 0;
}
.pf-zones-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.pf-zones-title {
    font-size: 10px; letter-spacing: 1.4px; font-weight: 700; color: var(--ink-3);
}
.pf-zones-count {
    display: inline-block; min-width: 18px; padding: 0 6px;
    margin-left: 4px; border-radius: 9px; background: var(--flame); color: #fff;
    font-size: 10px; line-height: 16px; text-align: center;
}
.pf-zones-hint { font-size: 10px; color: var(--ink-2); letter-spacing: 0.4px; }
.pf-zones-empty {
    font-size: 11px; color: var(--ink-2); padding: 4px 0 6px; font-style: italic;
}
.pf-zones-list { display: flex; flex-direction: column; gap: 4px; }
.pf-zone-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px; border-radius: 6px; background: #fff;
    border: 1px solid var(--ink);
}
.pf-zone-swatch-dot {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.15); cursor: pointer; flex-shrink: 0;
}
.pf-zone-name {
    flex: 1; min-width: 0; padding: 4px 8px;
    border: 1px solid transparent; border-radius: 5px;
    font-size: 12px; font-weight: 600; color: var(--ink); background: transparent;
    font-family: inherit; outline: none;
}
.pf-zone-name:hover  { border-color: var(--border); background: var(--bg-2); }
.pf-zone-name:focus  { border-color: var(--flame); background: #fff; }
.pf-zone-del {
    width: var(--tap-min); height: var(--tap-min); padding: 0; flex-shrink: 0;
    border: 1px solid #f4c6c6; background: #fff5f5; color: #c23030;
    border-radius: 5px; font-size: 14px; font-weight: 700;
    cursor: pointer; line-height: 1;
}
.pf-zone-del:hover { background: #ffe5e5; }
.pf-canvas-wrap.panning { cursor: grabbing; }

/* ── In-place plan loader ──
   Shown in the plan area while an uploaded sheet is being prepared, so the
   rest of the plan form stays usable instead of the app-wide blocker taking
   the whole window. Deliberately the same shape as .gx-full-loader (mark,
   label, track, hint) and it borrows that file's keyframes — this is the same
   wait, just moved to where the thing being waited for will appear.
   These class names are new, so the unlayered adapter sheet has no competing
   rule for them and this layered block is not outranked. */
.pf-canvas-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #191916;
    font-family: Inter, system-ui, sans-serif;
    user-select: none;
}
.pf-canvas-loader__mark {
    display: flex;
    align-items: baseline;
    height: 52px;
    color: var(--flame, #c9624a);
    font: 600 42px/1 "JetBrains Mono", monospace;
    letter-spacing: -8px;
    margin-right: 8px;
}
.pf-canvas-loader__cursor { animation: gxFullLoaderBlink 760ms steps(1, end) infinite; }
.pf-canvas-loader__label {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.pf-canvas-loader__track {
    position: relative;
    width: 180px;
    height: 2px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(25, 25, 22, .12);
}
.pf-canvas-loader__track span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: var(--flame, #c9624a);
    animation: gxFullLoaderTravel 1.15s cubic-bezier(.65, 0, .35, 1) infinite;
}
.pf-canvas-loader__hint {
    margin-top: 11px;
    color: #77766f;
    font: 500 10px/1.4 "JetBrains Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
    .pf-canvas-loader__cursor, .pf-canvas-loader__track span { animation: none; }
    .pf-canvas-loader__track span { width: 100%; opacity: .65; }
}

/* ── Dropzone ── */
.pf-canvas-dropzone {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    margin: 10px 22px;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--bg-2);
}
.pf-canvas-dropzone:hover { border-color: rgba(99,199,106,0.53); background: var(--bg); }
.pf-canvas-dropzone.drag-over { border-color: var(--flame); background: var(--flame-soft); }
.pf-canvas-dropzone-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--hover);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--flame);
    font-size: 16px;
}
.pf-canvas-dropzone-body {
    flex: 1;
    min-width: 0;
}
.pf-canvas-dropzone-text {
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 600;
}
.pf-canvas-dropzone-hint {
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 2px;
}
.pf-canvas-dropzone-btn {
    background: var(--hover);
    border: 1px solid var(--flame);
    color: var(--flame);
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: all 0.12s;
}
.pf-canvas-dropzone-btn:hover { background: var(--flame); color: #fff; }
/* ── Canvas onboarding hint ── */
.pf-canvas-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.75);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 11px;
    /* Light text: the pill is 75% black, so the dark var(--ink-2) was unreadable. */
    color: rgba(255,255,255,0.92);
    pointer-events: none;
    white-space: nowrap;
    z-index: 5;
    transition: opacity 0.3s;
}
.pf-canvas-hint kbd {
    background: var(--border);
    border: 1px solid var(--ink-3);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 9px;
    color: var(--ink-2);
    margin: 0 2px;
    font-family: inherit;
}
.pf-rag-drawer.open { transform: translateX(0); }
.pf-canvas-zoom-label {
    font-size: 10px;
    color: var(--ink-3);
    min-width: 38px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Wizard busy overlay (shown during slow async steps) ── */
.gf-wizard-busy {
    position: fixed;
    inset: 0;
    z-index: var(--z-popover);
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: gfFadeIn 0.18s ease;
}
.gf-wizard-busy-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 240px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.55);
}
.gf-wizard-busy-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--border);
    border-top-color: var(--flame);
    border-radius: 50%;
    animation: gfSpin 0.8s linear infinite;
}
.gf-wizard-busy-msg {
    font-size: 12px;
    letter-spacing: 0.6px;
    color: var(--ink-2);
    font-weight: 500;
}
@keyframes gfSpin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}
@keyframes gfFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Upload wizard (page pick + crop) ── */
.gf-wizard .modal-box {
    max-width: 1100px;
    width: 95vw;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
}
.gf-crop-viewport {
    position: relative;
    background: #000;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: auto;
    cursor: crosshair;
    margin: 8px 0 14px;
    user-select: none;
    max-height: 65vh;
}
.gf-crop-viewport canvas { display: block; margin: 0 auto; }
.gf-crop-rect {
    position: absolute;
    border: 2.5px dashed var(--flame);
    background: rgba(99,199,106,0.22);
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
    pointer-events: none;
    display: none;
    box-sizing: border-box;
    z-index: 2;
}

/* ── Radial pin-type picker ── */
/* Anchor: a 0×0 fixed-position point at the click location. Children use
   absolute positioning inside this point and `transform: translate(-50%,-50%)`
   to center their visual midpoint on (left, top). Sizes scale with
   --pf-picker-scale (set inline by JS from canvas zoom) so the ring stays
   visually proportional to nearby pins. */
.pf-pin-picker {
    position: fixed;
    width: 0;
    height: 0;
    z-index: var(--z-popover);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    --pf-picker-scale: 1;
}
.pf-pin-picker.open {
    opacity: 1;
    pointer-events: auto;
}
.pf-pin-picker-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(8px * var(--pf-picker-scale));
    height: calc(8px * var(--pf-picker-scale));
    background: var(--flame);
    border-radius: 50%;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(99,199,106,0.25), 0 2px 6px rgba(0,0,0,0.5);
}
.pf-pin-picker-ring {
    position: absolute;
    left: 0;
    top: 0;
    /* width/height set inline by JS (= 2 × radius). */
    border-radius: 50%;
    border: 1.5px dashed rgba(99,199,106,0.35);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.pf-pin-picker-btn {
    position: absolute;
    transform: translate(-50%, -50%);
    width: calc(36px * var(--pf-picker-scale));
    height: calc(36px * var(--pf-picker-scale));
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.35);
    color: #fff;
    font-weight: 800;
    font-size: calc(13px * var(--pf-picker-scale));
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    padding: 0;
    transition: transform 0.12s ease, box-shadow 0.12s;
}
.pf-pin-picker-btn:hover {
    transform: translate(-50%, -50%) scale(1.18);
    box-shadow: 0 5px 16px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pf-pin-picker-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc(3px * var(--pf-picker-scale));
    font-size: calc(8px * var(--pf-picker-scale));
    letter-spacing: 1.2px;
    font-weight: 700;
    color: #fff;
    background: rgba(10,10,10,0.85);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
}

/* ── Read-only Initial Design Assessment view ── */
/* Assessment view uses its own #assessmentModal — see guide-x-adapter.css
   for .assessment-box sizing + chrome overrides. The styles below are
   shared (summary sidebar, pin popover) so they apply in both contexts. */
.pf-assessment-summary {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}/* ─── Pin context menu ───
   Right-click popover for editing a placed pin (name + door count + delete).
   Built by showPinContextMenu() in plan-builder.js — that function only
   sets the position (left/top) inline; everything else lives here. */
/* ── Pin EDIT dialog ─────────────────────────────────────────────────────
   Built from the BRIEF questionnaire components (gf-brief-box / -head /
   -body / modal-btn foot), same shell as the pin-type modal and the pairing
   dialog. Only the few new bits are styled here. The #id width override
   needs !important because guide-x-adapter.css sizes .gf-brief-box
   unlayered, and this whole sheet sits in @layer base. */
#pfPinEditBox {
    width: min(520px, 92vw) !important;
    max-width: min(520px, 92vw) !important;
}
#pfPinEditBox .gf-brief-title-row { display: flex; align-items: center; gap: 10px; }
/* The pin's own colour + badge, so the dialog is unmistakably about THIS pin. */
.pf-pin-edit-dot {
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.pf-pin-edit-label {
    display: block;
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    letter-spacing: -0.005em;
    margin-bottom: 5px;
}
/* Protected: a two-line row so the explanation can never wrap mid-phrase.
   The !important is load-bearing — guide-x-adapter.css sets
   `.gf-brief-q input { width: 100% }` UNLAYERED, which stretches the
   checkbox across the dialog and shoves its label out of the box. This
   sheet is inside @layer base, so specificity alone cannot win. */
.pf-pin-edit-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.pf-pin-edit-check input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    flex: none !important;
    margin: 1px 0 0;
    accent-color: var(--cat, var(--ink));
    cursor: pointer;
}
.pf-pin-edit-check > span { flex: 1; min-width: 0; }
.pf-pin-edit-check-name {
    display: block; font-size: 12.5px; font-weight: var(--font-weight-semibold);
    color: var(--ink); line-height: 1.3;
}
.pf-pin-edit-check-hint { display: block; font-size: 11px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.pf-pin-edit-check:hover .pf-pin-edit-check-name { color: var(--cat, var(--ink)); }
/* Nothing in this dialog may cause a sideways scrollbar. */
#pfPinEditBox .gf-brief-body { overflow-x: hidden; }
.pf-pin-edit-delete { color: #ba1a1a; }

.pf-pin-popover.open { opacity: 1; }/* ── Stair-link prompt modal (fired on pin-tool drop when siblings exist) ──
   Built from the BRIEF questionnaire components (gf-brief-box / -head /
   -body / modal-btn foot) — only the option rows are styled here. The #id
   width override needs !important for the same @layer reason as the
   pin-type modal above: the adapter sizes .gf-brief-box unlayered. */
#pfStairLinkModal {
    width: min(480px, 92vw) !important;
    max-width: min(480px, 92vw) !important;
}
.pf-stair-link-modal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pf-stair-link-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.pf-stair-link-option:hover {
    border-color: var(--ink);
    background: var(--hover);
}
.pf-stair-link-option-dot {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 10px; font-weight: 700;
}
.pf-stair-link-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-stair-link-option-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-stair-link-option-floor { font-size: 11.5px; color: var(--muted); }
.pf-stair-link-option-chevron { flex: none; font-size: 16px; color: var(--ink-3); }
.pf-stair-link-option:hover .pf-stair-link-option-chevron { color: var(--ink); }

/* ── Custom pin types ─────────────────────────────────────────────────────────
   The modal is built from the BRIEF questionnaire components (gf-brief-q /
   gf-brief-input / gf-brief-select / modal-btn); only the genuinely new bits
   are styled here. The box size is an #id rule because guide-x-adapter.css
   sizes .gf-brief-box with !important (the brief needs 760px for ten
   questions; four short ones read better narrower). ───────────────────────── */
#pfPinTypeModal {
    width: min(560px, 92vw) !important;
    max-width: min(560px, 92vw) !important;
}
/* Numbered question heads. The shared .gf-brief-q-num / -title spans carry no
   rules of their own anywhere in the sheets, so the number rendered as bare
   text; these give it the chip look, scoped to this modal only. */
#pfPinTypeModal .gf-brief-q { position: relative; }
#pfPinTypeModal .gf-brief-q-head { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
#pfPinTypeModal .gf-brief-q-num {
    flex: none; width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-2); color: var(--ink-2);
    font-size: 11px; font-weight: 700; line-height: 1;
}
#pfPinTypeModal .gf-brief-q-title {
    font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em;
}

/* Q1 — one typed answer; the guidance list narrows underneath as they type. */
.pf-pintype-combo { position: relative; }
.pf-pintype-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
    max-height: 196px; overflow-y: auto; padding: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r, 8px); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.pf-pintype-sug { padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.pf-pintype-sug:hover, .pf-pintype-sug.on { background: var(--hover); }
.pf-pintype-sug-term { font-size: 13px; color: var(--ink); }

/* Q3 — colour. Swatches are <button>s so the brief's width:100% input rule
   cannot stretch them (that was the field spilling out of the box). */
.pf-pintype-swatches { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 3px; }
.pf-pintype-swatch {
    width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 1px solid rgba(0,0,0,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.1s, box-shadow 0.1s;
}
.pf-pintype-swatch:hover { transform: scale(1.08); }
.pf-pintype-swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.pf-pintype-swatch-custom {
    position: relative; overflow: hidden; display: inline-flex;
    background: conic-gradient(#f87171, #fbbf24, #34d399, #60a5fa, #c084fc, #f87171);
}
#pfPinTypeColor {
    position: absolute; inset: -8px; width: 46px; height: 46px;
    padding: 0; border: 0; background: transparent; opacity: 0; cursor: pointer;
}

/* Q4 — badge + live preview of the finished pin. The field sits in a fixed
   holder rather than being width-capped itself: the brief's `.gf-brief-q input
   { width:100% }` then resolves to 100% OF THE HOLDER, so no specificity fight
   and nothing can push the preview out of the box. */
#pfPinTypeModal .gf-brief-body { overflow-x: hidden; }
.pf-pintype-lookrow { display: flex; gap: 12px; align-items: center; }
.pf-pintype-badge-wrap { flex: 0 0 78px; width: 78px; }
.pf-pintype-badge { text-transform: uppercase; text-align: center; letter-spacing: 1px; }
.pf-pintype-preview { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.pf-pintype-preview .pf-tab-dot {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 10px; font-weight: 700;
}
.pf-pintype-preview-name {
    font-size: 13px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-pintype-error { font-size: 12px; color: #ba1a1a; background: rgba(186, 26, 26, 0.07); border: 1px solid rgba(186, 26, 26, 0.25); border-radius: 6px; padding: 8px 11px; margin-top: 14px; }
.pf-pintype-delete { color: #ba1a1a; }

/* Sidebar: ✎ on custom tabs + the "Custom pin" row that creates a new type.
   The row copies the .pf-tab geometry so it reads as part of the same list
   rather than a floating box below it. */
.pf-tab-edit {
    flex: none; font-size: 11px; color: var(--ink-3); padding: 2px 5px; border-radius: 4px;
    opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s; cursor: pointer;
}
.pf-tab:hover .pf-tab-edit { opacity: 1; }
.pf-tab-edit:hover { background: var(--hover); color: var(--ink); }
button.pf-tab-newtype {
    width: 100%; box-sizing: border-box; font-family: inherit; text-align: left;
    background: transparent; border: 0; border-left: 2px solid transparent;
}
/* !important is load-bearing here: guide-x-adapter.css paints .pf-tab-dot
   UNLAYERED, and this whole sheet sits in @layer base — a layer always loses
   to unlayered rules regardless of specificity, so without it the ＋ renders
   as a solid dark pin disc. (Same cascade trap as the badge field above.) */
.pf-tab-newtype-dot {
    background: transparent !important;
    color: var(--ink-3) !important;
    border: 1px dashed var(--ink-3) !important;
    box-shadow: none !important;
    font-size: 13px; font-weight: 400;
}
.pf-tab-newtype:hover .pf-tab-newtype-dot { color: var(--ink) !important; border-color: var(--ink) !important; }

/* ════════════════════════════════════════════════════
   PASS 4 ADDITIONS — reference shapes not previously present
   Lifted from design/unified-ui.html §8.
   ════════════════════════════════════════════════════ */

/* Required-floor selector — header field. The JS already renders a <select>
   with class .pf-meta-input inside .pf-floor-field; these rules give it the
   pill-trigger look from the reference. The .error class (toggled by the
   render fn) marks an unset required field with a flame-tinted ring. */
.pf-floor-field {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}
.pf-floor-field .pf-meta-label .pf-req {
    color: var(--flame);
    margin-left: 2px;
}
.pf-floor-field .pf-meta-input {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 6px 28px 6px 11px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    min-width: 150px;
    transition: border-color .12s, box-shadow .12s;
}
.pf-floor-field .pf-meta-input:hover { border-color: var(--ink-3); }
.pf-floor-field .pf-meta-input.error,
.pf-floor-field .pf-meta-input.error:focus {
    border-color: var(--flame);
    box-shadow: 0 0 0 3px rgba(99,199,106,0.12);
}

/* On-canvas pin glyph — round letter-badge, same vocabulary as the rail
   tab dot. Color variants match the reference: flame default, plus blue,
   green, violet, amber, red. JS sets these via a class. */
.pin {
    position: absolute;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
    background: var(--flame);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 10px rgba(99,199,106,0.38);
    border: 1.75px solid rgba(0,0,0,0.18);
    transform: translate(-50%, -50%);
}
.pin.blue   { background: var(--blue);   box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 10px rgba(91,127,255,0.42); }
.pin.green  { background: var(--green);  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 10px rgba(40,210,130,0.42); }
.pin.violet { background: #8E5BFF;       box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 10px rgba(142,91,255,0.42); }
.pin.amber  { background: #E8A93A;       box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 10px rgba(232,169,58,0.42); }
.pin.red    { background: var(--red);    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 10px rgba(212,77,77,0.42); }
.pin.selected::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--flame);
    pointer-events: none;
}

/* Footer kbd hints — restyled to match the reference's pill kbd chips. */
.pf-kbd-hints kbd {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 6px;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    color: var(--ink);
    margin-right: 5px;
}
.pf-kbd-hints span { display: inline-flex; align-items: center; }
.pf-kbd-hints .pf-kbd-sep { color: var(--ink-3); opacity: 0.7; font-weight: 400; }

/* Sidebar AREAS — inline item list under the expanded tab */
.pf-tab-chevron {
    font-size: 10px;
    color: var(--ink-3);
    margin-left: 4px;
    flex-shrink: 0;
    transition: transform 0.12s ease;
}
.pf-tab-group.expanded .pf-tab-chevron { color: var(--flame); }

.pf-tab-items {
    background: var(--bg-3);
    border-left: 2px solid var(--flame);
    margin: 0 0 4px 0;
    padding: 6px 0 8px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pf-tab-items-empty {
    font-size: 10.5px;
    color: var(--ink-3);
    font-style: italic;
    padding: 4px 16px 4px 44px;
}
.pf-tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 28px;
    cursor: pointer;
    border-radius: 4px;
    margin: 0 8px;
    transition: background 0.1s, color 0.1s;
}
.pf-tab-item:hover {
    background: var(--hover);
}
.pf-tab-item-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
    border: 1px solid rgba(0,0,0,0.3);
}
.pf-tab-item-name {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pf-tab-item.unplaced .pf-tab-item-name {
    color: var(--ink-3);
    font-style: italic;
}
.pf-tab-item-flag {
    font-size: 9px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--hover);
    padding: 1px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}


}