/* ── Reset & Base ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Global utility: hide any element carrying class="hidden". JS across the
 * SPA toggles this class to show/hide; without a global rule, elements in
 * panes that don't carry their own scoped `.hidden` declaration stay
 * visible (the previous behavior left the Calibration Templates +
 * Profiles panes broken: PREVIEW-MODE banner, "select at least one
 * option" warning, and the prof-warnings empty bar all leaked). */
.hidden { display: none !important; }

:root {
    --bg: #0f1117;
    --surface: #1a1d27;
    --surface-alt: #232734;
    --surface-hi: #2c3142;
    --border: #2e3345;
    --border-hi: #3d4358;
    --text: #e1e4ed;
    --text-muted: #8b90a0;
    --text-dim: #6a6e7c;
    --accent: #6c8cff;
    --accent-hover: #8da6ff;
    --success: #4caf82;
    --warning: #e5a54b;
    --danger: #e05555;
}

html { font-size: 15px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Top Bar ───────────────────────────────────── */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.logo {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.status {
    font-size: 0.8rem;
    color: var(--success);
}

/* ── Tab Bar ───────────────────────────────────── */
.tab-bar {
    display: flex;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab {
    padding: 0.7rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab-bar-spacer { margin-left: auto; }

.disconnect-btn {
    padding: 0.4rem 0.9rem;
    margin: 0.3rem 0.5rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.disconnect-btn:hover {
    color: #ff4d4d;
    border-color: #ff4d4d;
    background: rgba(255, 77, 77, 0.1);
}

/* ── Shutdown Modal ───────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.modal-dialog {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem 2rem;
    max-width: 380px;
    text-align: center;
}
.modal-dialog h3 {
    margin: 0 0 0.5rem;
    color: var(--text);
}
.modal-dialog p {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}
.modal-btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}
.modal-btn-cancel {
    background: var(--border);
    color: var(--text);
}
.modal-btn-cancel:hover { opacity: 0.8; }
.modal-btn-danger {
    background: #e53935;
    color: #fff;
}
.modal-btn-danger:hover { background: #c62828; }

/* ── Content Area ──────────────────────────────── */
.content {
    flex: 1;
    padding: 1.5rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}
/* Tools tab breaks out of the .content centering + padding so its
   sidebar reaches the left window edge. Wave 6e-D feedback.
   data-active-tab is set by app.js switchTab(). */
.content[data-active-tab="tools"] {
    max-width: none;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.tab-panel h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.placeholder {
    color: var(--text-muted);
    font-style: italic;
    padding: 2rem;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 8px;
}

/* ── Cards / Sections ──────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* ── Forms ──────────────────────────────────────── */
label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
}

/* ── Color Picker ─────────────────────────────── */
input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 36px;
    height: 36px;
    padding: 2px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}
input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 3px;
}

/* ── Buttons ───────────────────────────────────── */
.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-primary {
    background: var(--accent);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--border); }
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Sync Buttons Grid ─────────────────────────── */
.sync-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}
.sync-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sync-card .name {
    font-weight: 600;
    font-size: 0.9rem;
}
.sync-card .last-sync {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.sync-card .btn { align-self: flex-start; }

/* ── Sync Log Table ────────────────────────────── */
.log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.log-table th,
.log-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.log-table th {
    color: var(--text-muted);
    font-weight: 500;
}
.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}
.badge-success { background: rgba(76,175,130,0.15); color: var(--success); }
.badge-error   { background: rgba(224,85,85,0.15);  color: var(--danger); }
.badge-accent  { background: rgba(108,140,255,0.15); color: var(--accent); }
.badge-warning { background: rgba(229,165,75,0.15); color: var(--warning); }
.badge-source-etsy { background: rgba(235,140,60,0.15); color: #eb8c3c; }
.badge-source-woo  { background: rgba(150,100,220,0.15); color: #9664dc; }

/* ── Orders Toolbar ───────────────────────────── */
.orders-toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.orders-toolbar select {
    width: auto;
    min-width: 140px;
    margin-bottom: 0;
}
.orders-toolbar input[type="text"] {
    flex: 1;
    min-width: 180px;
    margin-bottom: 0;
}

/* ── Orders Inline Detail Row ────────────────── */
.orders-detail-row > td {
    padding: 0 !important;
    border: none !important;
    background: var(--surface);
}
.orders-detail-row .orders-detail-panel {
    animation: detailSlideDown 0.2s ease-out;
}
@keyframes detailSlideDown {
    from { opacity: 0; max-height: 0; overflow: hidden; }
    to   { opacity: 1; max-height: 600px; overflow: visible; }
}

/* ── Orders Detail Panel ──────────────────────── */
.orders-detail-panel {
    padding: 1rem 1.25rem;
    animation: slideIn 0.2s ease-out;
}
.orders-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.orders-detail-header h3 {
    margin-bottom: 0;
}
.orders-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.orders-detail-section h4 {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.orders-detail-section p {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ── Finance / P&L ────────────────────────────── */
.summary-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
.summary-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
}
.summary-card .amount {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
}
.summary-card .label {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.period-selector {
    display: flex;
    gap: 0.4rem;
}
.period-selector .btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.finance-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.expense-form label {
    margin-top: 0.25rem;
}

.badge-source-paypal { background: rgba(0, 112, 186, 0.15); color: #3d9be9; }
.badge-source-square { background: rgba(60, 180, 140, 0.15); color: #3cb48c; }

/* ── Import Review Table ──────────────────────── */
.import-review-table td,
.import-review-table th {
    padding: 0.4rem 0.5rem;
    font-size: 0.82rem;
    white-space: nowrap;
}
.import-review-table td:nth-child(3) {
    white-space: normal;
    max-width: 250px;
}
.import-review-table .import-check {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}
.import-review-table select,
.import-review-table input[type="text"] {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
}
.import-review-table tr[data-discarded="true"] {
    opacity: 0.5;
}

/* ── Import Rules ─────────────────────────────── */
.rule-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.rule-row input[type="text"],
.rule-row select {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
}

@media (max-width: 800px) {
    .summary-row { flex-direction: column; }
    .finance-columns { grid-template-columns: 1fr; }
}

/* ── Analytics ────────────────────────────────── */
.analytics-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.analytics-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.analytics-order-result-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 800px) {
    .analytics-columns { grid-template-columns: 1fr; }
    .analytics-charts-row { grid-template-columns: 1fr; }
    .analytics-order-result-grid { grid-template-columns: 1fr; }
}

/* ── Toast Notifications ───────────────────────── */
.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1000;
}
.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    animation: slideIn 0.2s ease-out;
}
.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Event Notification Banner ────────────────── */
.notification-banner {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: wrap;
}
.notification-banner::-webkit-scrollbar { display: none; }
.notif-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.notif-danger {
    background: rgba(224,85,85,0.15);
    color: var(--danger);
}
.notif-warning {
    background: rgba(229,165,75,0.15);
    color: var(--warning);
}
.notif-info {
    background: rgba(108,140,255,0.15);
    color: var(--accent);
}

/* ── Calendar Grid ────────────────────────────── */
.cal-header-row, .cal-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}
.cal-week-row {
    margin-bottom: 1px;
}
.cal-day-header {
    text-align: center;
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cal-span-bar {
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.2;
    padding: 1px 6px;
    height: 18px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
    pointer-events: auto;
}
.cal-span-bar:hover {
    filter: brightness(1.15);
}
.cal-day-cell {
    background: var(--surface-alt);
    min-height: 70px;
    padding: 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s;
    overflow: hidden;
}
.cal-day-empty {
    opacity: 0.4;
    cursor: default;
}

/* ── Events Panel ─────────────────────────────── */
#cal-main-area {
    display: flex;
    gap: 1rem;
}
#cal-body-wrapper {
    flex: 1;
    min-width: 0;
}
#cal-events-panel {
    width: 33%;
    min-width: 300px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.events-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.event-prop-row, .event-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.event-prop-row input,
.event-prop-row select,
.event-check-row input[type="text"],
.event-check-row input[type="number"] {
    margin-bottom: 0;
}
.event-check-row label {
    margin-bottom: 0;
    flex: 1;
    cursor: pointer;
}
.event-offset-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: rgba(108,140,255,0.15);
    color: var(--accent);
    white-space: nowrap;
}
.event-delete-x {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.25rem;
    line-height: 1;
}
.event-delete-x:hover { color: var(--danger); }

/* ── Template Manager ────────────────────────── */
.template-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--surface-alt);
}
.template-list-item:hover {
    border-color: var(--accent);
}
.template-count-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: rgba(108,140,255,0.15);
    color: var(--accent);
    white-space: nowrap;
}

/* ── Production: Jobs ─────────────────────────── */
.jobs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.jobs-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.jobs-header-actions label {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.jobs-header-actions select {
    padding: 0.35rem 0.5rem;
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.85rem;
}
.jobs-view-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.jobs-view-btn {
    border-radius: 0;
    border: none;
    background: var(--surface-alt);
    color: var(--text-muted);
}
.jobs-view-btn.active {
    background: var(--accent);
    color: #0f1117;
}
.jobs-view {
    margin-top: 1rem;
}
.jobs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.jobs-table th, .jobs-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.jobs-table th {
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.jobs-table tr:hover { background: var(--surface-alt); }
.jobs-table select {
    padding: 0.25rem 0.4rem;
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
}
.jobs-table .files-link {
    color: var(--accent);
    text-decoration: none;
}
.jobs-table .files-link:hover { text-decoration: underline; }

.kanban {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    align-items: flex-start;
}
.kanban-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.kanban-col-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
    display: flex;
    justify-content: space-between;
}
.kanban-col-header .count {
    background: rgba(108,140,255,0.15);
    color: var(--accent);
    padding: 0 0.4rem;
    border-radius: 3px;
}
.kanban-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.8rem;
    cursor: grab;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card .job-id {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.75rem;
}
.kanban-card .job-sets {
    margin-top: 0.25rem;
    word-break: break-all;
}
.kanban-card .job-meta {
    color: var(--text-muted);
    font-size: 0.7rem;
    margin-top: 0.25rem;
}
.kanban-card.sortable-ghost { opacity: 0.4; }

/* ── Job detail panel (slide-in, Wave 5c-D1) ─────────────── */
.detail-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    animation: detailFade 0.15s ease-out;
}
@keyframes detailFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.detail-panel {
    width: min(420px, 90vw);
    background: var(--surface);
    border-left: 1px solid var(--border);
    height: 100vh;
    display: flex;
    flex-direction: column;
    animation: detailSlideIn 0.2s ease-out;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
}
@keyframes detailSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
.detail-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
}
.detail-panel-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.detail-panel-close {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.detail-panel-close:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

/* ── Orders → Production cross-app link (Wave 6b) ────────── */
.orders-production-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: inherit;
}
.orders-production-link:hover .badge {
    filter: brightness(1.15);
}
.detail-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    font-size: 0.85rem;
}
.detail-section {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.detail-section:last-child {
    border-bottom: none;
}
.detail-section h3 {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}
.detail-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.75rem;
}
.detail-fields dt {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.detail-fields dd {
    color: var(--text);
    word-break: break-word;
}
.detail-files-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.detail-files-list li {
    padding: 0.3rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.8rem;
}
.detail-files-list li:last-child { border-bottom: none; }
.detail-files-list a {
    color: var(--accent);
    text-decoration: none;
    word-break: break-all;
}
.detail-files-list a:hover { text-decoration: underline; }
.detail-files-list .file-size {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: 0.4rem;
}
.detail-events-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.detail-events-list li {
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.detail-events-list li:last-child { border-bottom: none; }
.detail-event-transition {
    color: var(--text);
}
.detail-event-from { color: var(--text-muted); }
.detail-event-arrow { color: var(--text-muted); padding: 0 0.3rem; }
.detail-event-time {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.detail-notes-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.detail-notes {
    width: 100%;
    min-height: 100px;
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.6rem;
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
    margin-bottom: 0;
}
.detail-notes:focus {
    outline: none;
    border-color: var(--accent);
}
.detail-notes-status {
    font-size: 0.7rem;
    color: var(--text-muted);
    min-height: 1em;
}
.detail-notes-status.saved { color: var(--success); }
.detail-notes-status.err { color: var(--danger); }

.jobs-table tr.row-clickable { cursor: pointer; }
.jobs-table tr.row-clickable:hover { background: var(--surface-alt); }
.kanban-card.card-clickable { cursor: pointer; }
.kanban-card.card-clickable:hover { border-color: var(--accent); }

/* ── Production: Set Picker (Wave 6e-B unified pick-stack) ──────────────
   Ported from _merge_plan/mockups/set_picker_unified_v2.html + the View-mode
   block from set_picker_unified.html (v1, lines 280-308 + 599-668). All
   selectors are scoped under `#panel-set-picker` so generic class names
   (.workspace, .budget, .divider, .slot, .pill, .pill-group, etc.) don't
   leak to other tabs.
                                                                            */
#panel-set-picker.active {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Top control panel: family|mode|jig|fit|profile|fill_mode|grid|budget */
#panel-set-picker .top-controls {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.55rem 0.85rem;
    display: flex; gap: 0.85rem; align-items: center; flex-wrap: wrap;
    row-gap: 0.55rem;
}
#panel-set-picker .top-controls label {
    display: flex; flex-direction: column; gap: 0.1rem;
    font-size: 0.66rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
#panel-set-picker .top-controls label select {
    background: var(--surface-alt); border: 1px solid var(--border);
    color: var(--text); padding: 0.28rem 0.5rem;
    border-radius: 4px; font-size: 0.78rem;
    font-weight: 400; text-transform: none; letter-spacing: 0;
}
#panel-set-picker .top-controls label.checkbox-label {
    flex-direction: row !important; align-items: center;
    gap: 0.35rem !important;
    color: var(--text) !important;
    text-transform: none !important; letter-spacing: 0 !important;
    font-size: 0.78rem !important; font-weight: 400 !important;
}
#panel-set-picker .top-controls .pill-group {
    display: flex; gap: 0.2rem;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.15rem;
}
#panel-set-picker .top-controls .pill {
    padding: 0.3rem 0.7rem; background: transparent;
    border: none; border-radius: 3px;
    color: var(--text-muted); font-size: 0.82rem;
    cursor: pointer; font-weight: 500;
}
#panel-set-picker .top-controls .pill:hover { color: var(--text); }
#panel-set-picker .top-controls .pill.active {
    background: var(--accent); color: white; font-weight: 600;
}
#panel-set-picker .top-controls .divider {
    width: 1px; height: 22px; background: var(--border);
}
#panel-set-picker .top-controls .label {
    font-size: 0.65rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-dim);
    font-weight: 600;
}
/* D22: jig-instance picker has a derived caption under the select. */
#panel-set-picker .top-controls label.instance-label {
    position: relative;
}
#panel-set-picker .derived-caption {
    position: absolute; top: 100%; left: 0;
    margin-top: 1px; font-size: 0.66rem;
    color: var(--text-dim); white-space: nowrap;
    font-weight: 400; text-transform: none; letter-spacing: 0;
}
#panel-set-picker .derived-caption strong {
    color: var(--text-muted); font-family: monospace; font-weight: 600;
}

/* Main two-column layout: 240px inventory + flex workspace */
#panel-set-picker .picker-layout {
    display: grid; grid-template-columns: 240px 1fr;
    gap: 0.75rem; flex: 1; min-height: 0;
}

/* Inventory rail */
#panel-set-picker .inventory {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.5rem;
    display: flex; flex-direction: column; gap: 0.4rem;
    overflow-y: auto; min-height: 0;
}
#panel-set-picker .inv-header {
    font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}
#panel-set-picker .inv-view-toggle {
    display: flex; gap: 0; border: 1px solid var(--border);
    border-radius: 4px; overflow: hidden;
}
#panel-set-picker .inv-view-btn {
    flex: 1; padding: 0.25rem 0.4rem; background: var(--surface-alt);
    border: none; color: var(--text-muted);
    font-size: 0.7rem; cursor: pointer;
}
#panel-set-picker .inv-view-btn.active { background: var(--accent); color: var(--bg); }
#panel-set-picker .inv-search {
    width: 100%; padding: 0.3rem 0.5rem;
    background: var(--surface-alt); border: 1px solid var(--border);
    color: var(--text); border-radius: 4px; font-size: 0.72rem;
}
#panel-set-picker .inv-list { display: flex; flex-direction: column; gap: 0.12rem; }
/* SP-10 Phase 4 Slice 4a: .inv-item becomes a block container with a
   header row + optional expanded content. The existing flex row
   semantics move down to .inv-item-header so the descendant child
   selectors (.name / .badge / .count / chips) keep working unchanged.
   Top-level draggable still emits the legacy payload from the outer
   .inv-item; nested tiles inside .inv-item-content carry their own
   draggable attribute (HTML5 picks the innermost draggable). */
#panel-set-picker .inv-item {
    display: block;
    background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: 4px;
    font-size: 0.76rem;
}
#panel-set-picker .inv-item-header {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    cursor: grab;
}
#panel-set-picker .inv-item-header:active { cursor: grabbing; }
#panel-set-picker .inv-item:hover { border-color: var(--accent); }
#panel-set-picker .inv-item.selected { border-color: var(--accent); background: var(--surface-hi); }
#panel-set-picker .inv-item.expanded {
    background: var(--surface-hi);
    border-color: var(--accent);
}
#panel-set-picker .inv-item-content {
    padding: 0.35rem 0.5rem 0.5rem;
    border-top: 1px solid var(--border);
}
/* Inline tile grid uses 4 cols like the legacy drill panel. */
#panel-set-picker .inv-item-content .inv-tiles-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
}
#panel-set-picker .inv-item-content .placeholder {
    font-size: 0.65rem; color: var(--text-dim);
    text-align: center; padding: 0.4rem 0;
    margin: 0;
}
#panel-set-picker .inv-item-content .inv-tiles-extras-header {
    font-size: 0.6rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-top: 0.4rem; padding-top: 0.3rem;
    border-top: 1px dashed var(--border);
}
#panel-set-picker .inv-item-content .extras-count {
    color: var(--warning); font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* SP-10 Phase 4 Slice 4b: nested board cards inside an expanded set.
   Slightly smaller padding + own gap between siblings so the
   second-level cards read as distinct from the parent set card
   without competing visually. Tile grid inside a nested-expanded
   card uses the same inv-tiles-grid styles via descendant cascade. */
#panel-set-picker .inv-item.nested {
    margin-bottom: 0.2rem;
    background: var(--surface-alt);
}
#panel-set-picker .inv-item.nested:last-child { margin-bottom: 0; }
#panel-set-picker .inv-item.nested .inv-item-header {
    padding: 0.3rem 0.45rem;
    font-size: 0.72rem;
}
#panel-set-picker .inv-item.nested.expanded {
    background: var(--surface-hi);
}
/* #47 P4.4 (option-ii): category color dot on MJ board cards — mirrors the
   grid region tint (set inline by JS from MJ_CATEGORIES.color) so a card ties
   visually to its region. Non-MJ boards / sets render no dot. */
#panel-set-picker .inv-item .inv-cat-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
    margin-right: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
#panel-set-picker .inv-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-set-picker .inv-item .badge {
    font-size: 0.55rem; padding: 1px 4px; border-radius: 8px;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
#panel-set-picker .inv-item .badge.set { background: var(--text-dim); color: white; }
#panel-set-picker .inv-item .badge.board { background: var(--accent); color: white; }
#panel-set-picker .inv-item .badge.solo { background: var(--warning); color: var(--bg); margin-left: 0.2rem; }
#panel-set-picker .inv-item .count {
    font-size: 0.62rem; color: var(--text-dim);
    font-variant-numeric: tabular-nums; min-width: 1.1rem; text-align: right;
}
/* SP-12: subtle "+N" chip on versa-tile boards carrying images beyond
   the conventional 8 primary tiles. Informational only — sits to the
   right of the standard count and uses a muted warning tint so it's
   distinguishable from .badge without competing for attention. */
#panel-set-picker .inv-item .extras-chip {
    font-size: 0.55rem; padding: 1px 4px; border-radius: 8px;
    background: rgba(229, 165, 75, 0.18); color: var(--warning);
    font-weight: 700; font-variant-numeric: tabular-nums;
    margin-left: 0.15rem;
}
/* SP-13: warning chip on boards whose image filenames don't all match
   the `<N>_<label>.png` convention. Stronger danger tint than the
   extras-chip (it's a real signal that ordering may be wrong), but
   still small enough to not crowd the card. */
#panel-set-picker .inv-item .naming-chip {
    font-size: 0.6rem; padding: 1px 5px; border-radius: 8px;
    background: rgba(224, 85, 85, 0.18); color: var(--danger);
    font-weight: 800; line-height: 1;
    margin-left: 0.15rem; cursor: help;
}
/* S2 (SP-22) audit cleanup: removed the drill-in CSS group
   (.inv-tiles-section, .inv-tiles-title[ .filter-tag], .inv-cat-header
   + its 7 region-color variants). These styled the mahjong per-category
   drill-in panel deleted in S2 — the pass-preview is now the single
   drop-zone. (The ⋮⋮ cat-header grips + their .cat-header-drag rule were
   retired in #47 P4.4c.) The board-expand tile list
   reuses .inv-tiles-grid / .inv-tiles-extras-header (kept below). */
#panel-set-picker .inv-tiles-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
}
/* SP-12: header that introduces the "extras" tile group when a versa-
   tile board carries more than 8 images. Dashed top border keeps the
   visual division clear without competing with the surrounding solid
   borders of the inventory section. */
#panel-set-picker .inv-tiles-extras-header {
    font-size: 0.6rem; color: var(--text-muted);
    margin: 0.4rem 0 0.2rem; padding-top: 0.3rem;
    border-top: 1px dashed var(--border);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
#panel-set-picker .inv-tiles-extras-header .extras-count {
    color: var(--warning); font-weight: 700;
    font-variant-numeric: tabular-nums;
}
#panel-set-picker .inv-tile {
    aspect-ratio: 1; border-radius: 3px; cursor: grab;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 700; color: rgba(0,0,0,0.78);
    border: 1.5px solid transparent;
    overflow: hidden;
}
/* Constrain the drilled-tile preview to the .inv-tile cell. Without
   this, a high-resolution source image (e.g., 800x1100 PNG) blows the
   parent grid track out to its natural width, producing a 200x1000+
   "red bar" inventory column. Latent bug since 6e-B — never surfaced
   while test data was tiny thumbnails. */
#panel-set-picker .inv-tile img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
#panel-set-picker .inv-tile:hover { border-color: var(--accent); transform: scale(1.05); }

/* Workspace */
#panel-set-picker .workspace {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.75rem;
    display: flex; flex-direction: column; gap: 0.7rem;
    min-height: 0; overflow-y: auto;
}
#panel-set-picker .ws-section h3 {
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
    margin: 0 0 0.4rem;
    display: flex; align-items: center; gap: 0.5rem;
}
#panel-set-picker .ws-section h3 .clear-all-btn {
    margin-left: auto; background: transparent;
    border: 1px solid var(--border); color: var(--text-dim);
    padding: 2px 8px; border-radius: 3px;
    font-size: 0.62rem; cursor: pointer; font-weight: 500;
    letter-spacing: 0;
}
#panel-set-picker .ws-section h3 .clear-all-btn:hover {
    color: var(--danger); border-color: var(--danger);
}

/* Pick stack */
#panel-set-picker .pick-stack {
    display: flex; flex-direction: column; gap: 3px;
    min-height: 40px;
}
#panel-set-picker .pick-row {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--surface-alt); border: 1px solid var(--border);
    padding: 0.4rem 0.6rem; border-radius: 4px;
    font-size: 0.8rem;
}
#panel-set-picker .pick-row .order {
    color: var(--text-dim); font-size: 0.72rem;
    font-variant-numeric: tabular-nums; min-width: 1.2rem;
}
#panel-set-picker .pick-row .swatch {
    width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
}
#panel-set-picker .pick-row .type-tag {
    font-size: 0.6rem; font-weight: 700; padding: 1px 6px;
    border-radius: 8px; text-transform: uppercase; letter-spacing: 0.04em;
}
#panel-set-picker .pick-row .type-tag.set { background: var(--text-dim); color: white; }
#panel-set-picker .pick-row .type-tag.board { background: var(--accent); color: white; }
#panel-set-picker .pick-row .type-tag.override { background: var(--warning); color: var(--bg); }
#panel-set-picker .pick-row .label { flex: 1; color: var(--text); }
#panel-set-picker .pick-row .meta { color: var(--text-muted); font-size: 0.72rem; }
#panel-set-picker .pick-row button {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); width: 22px; height: 22px;
    border-radius: 3px; cursor: pointer; font-size: 0.72rem;
    display: flex; align-items: center; justify-content: center;
}
#panel-set-picker .pick-row button:hover { color: var(--text); border-color: var(--border-hi); }
#panel-set-picker .pick-row button.remove:hover { color: var(--danger); border-color: var(--danger); }

/* Mahjong category tabs */
#panel-set-picker .cat-tabs {
    display: flex; gap: 0.2rem;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.25rem;
    overflow-x: auto;
}
#panel-set-picker .cat-tab {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.7rem; background: transparent;
    border: 1px solid transparent; border-radius: 3px;
    color: var(--text-muted); font-size: 0.78rem;
    cursor: pointer; white-space: nowrap; font-weight: 500;
}
#panel-set-picker .cat-tab:hover { color: var(--text); background: var(--surface); }
#panel-set-picker .cat-tab.active {
    color: var(--text); background: var(--surface);
    border-color: var(--accent);
}
#panel-set-picker .cat-tab .cat-badge {
    font-size: 0.62rem; padding: 1px 5px; border-radius: 8px;
    background: var(--surface-hi); color: var(--text-muted);
    font-weight: 700; font-variant-numeric: tabular-nums;
}
#panel-set-picker .cat-tab.active .cat-badge { background: var(--accent); color: white; }
#panel-set-picker .cat-tab.complete .cat-badge { background: var(--success); color: white; }

/* S2 (SP-22) audit cleanup: removed the per-category editing-grid CSS
   (.cat-header[ .cat-title/.solo-toggle], .cat-info, .cat-slots[+
   data-layout variants], .cat-slot[+ .filled/.slot-label/.clear-slot-btn],
   .cat-title). These styled renderCategorySlots' drill-in editing grid,
   deleted in S2 — drops now land on the pass-preview. The cat-TAB chrome
   (.cat-tab/.cat-tab-wrap) is a separate, live concern (the ⋮⋮
   .cat-header-drag grip was retired in #47 P4.4c).
   Earlier P8d audit had already pruned the sibling Solo/.cat-slot.locked
   rules from this group. */

/* Mahjong 3-pass preview */
#panel-set-picker .pass-previews {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem; max-width: 100%;
}

/* ── SP-22 (S5): display-prefs gear + popover + mahjong A/C/B layouts ── */
/* CSS-level --sp-cell default so the grid templates always resolve to a
   fixed track width (the var(--sp-cell,1fr) fallback + width:max-content
   would otherwise collapse if JS never set it). applyDisplayPrefs overrides
   this inline on #panel-set-picker from localStorage / the slider per the
   active family. 65px matches DISPLAY_PREFS_DEFAULTS.cellSizeVT in
   set_picker.js (mahjong's 50px default is applied by JS on init). */
#panel-set-picker { --sp-cell: 65px; }
/* The gear lives in the top-controls toolbar; the popover anchors to it. */
#panel-set-picker #sp-top-controls { position: relative; }
#panel-set-picker .sp-gear {
    width: 30px; height: 30px; border-radius: 6px; margin-left: auto;
    border: 1px solid var(--border-hi); background: var(--surface-alt);
    color: var(--text-muted); cursor: pointer; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center; flex: none;
}
#panel-set-picker .sp-gear:hover,
#panel-set-picker .sp-gear.on { color: var(--text); border-color: var(--accent); }
#panel-set-picker .sp-display-panel {
    position: absolute; top: calc(100% + 4px); right: 0.6rem; width: 300px;
    background: var(--surface-hi); border: 1px solid var(--border-hi);
    border-radius: 8px; padding: 0.9rem; z-index: 30;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
#panel-set-picker .sp-display-panel h3 { margin: 0 0 0.15rem; font-size: 0.82rem; }
#panel-set-picker .sp-display-sub { font-size: 0.66rem; color: var(--text-dim); margin-bottom: 0.8rem; }
#panel-set-picker .sp-display-row { margin-bottom: 0.9rem; }
#panel-set-picker .sp-display-lab {
    font-size: 0.72rem; color: var(--text); margin-bottom: 0.35rem;
    display: flex; justify-content: space-between; align-items: baseline;
}
#panel-set-picker .sp-display-lab .hint { color: var(--text-dim); font-size: 0.64rem; font-weight: 400; }
#panel-set-picker .sp-display-lab .v { color: var(--accent); font-variant-numeric: tabular-nums; }
#panel-set-picker .sp-display-row input[type="range"] { width: 100%; accent-color: var(--accent); }
#panel-set-picker .sp-vseg { display: flex; gap: 0.3rem; }
#panel-set-picker .sp-vseg button {
    flex: 1; background: var(--surface-alt); border: 1px solid var(--border-hi);
    color: var(--text-muted); border-radius: 5px; padding: 0.4rem 0.2rem;
    cursor: pointer; font-size: 0.66rem; line-height: 1.2; text-align: center;
}
#panel-set-picker .sp-vseg button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#panel-set-picker .sp-vseg button b { display: block; font-size: 0.74rem; }
#panel-set-picker .sp-vseg button:disabled { opacity: 0.4; cursor: not-allowed; }
#panel-set-picker .sp-display-foot {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--border); padding-top: 0.6rem;
}
#panel-set-picker .sp-display-foot .note { font-size: 0.62rem; color: var(--text-dim); }
#panel-set-picker .sp-display-reset {
    background: none; border: none; color: var(--accent);
    font-size: 0.66rem; cursor: pointer; padding: 0;
}
/* Layout A — passes 1 & 2 side-by-side; pass 3 collapses to a jokers
   strip full-width below (hide the 64 non-canonical cells, 8-col grid). */
#panel-set-picker .pass-previews.mj-layout-A {
    display: grid; grid-template-columns: max-content max-content;
    gap: 0.7rem; align-items: start;
}
#panel-set-picker .pass-previews.mj-layout-A .pass-card:nth-child(3) { grid-column: 1 / -1; }
#panel-set-picker .pass-previews.mj-layout-A .pass-card:nth-child(3) .mini-grid {
    /* !important overrides the painter's inline repeat(9,…) so the strip is
       exactly 8 columns (the 8 jokers, no trailing empty column). */
    grid-template-columns: repeat(8, var(--sp-cell, 1fr)) !important;
}
#panel-set-picker .pass-previews.mj-layout-A .pass-card:nth-child(3) .mini-cell:not(.region-7-jokers) { display: none; }
#panel-set-picker .pass-previews.mj-layout-A .pass-card:nth-child(3) .mj-watermark { display: none; }
/* Layout B — each pass full, vertically stacked. */
#panel-set-picker .pass-previews.mj-layout-B {
    display: flex; flex-direction: column; gap: 0.7rem; align-items: start;
}
/* Layout C — one focused pass (full, drop-enabled) + the other two as
   display-only thumbnails (click-to-focus; no drop — guarded in the
   dispatcher). The painter emits .mj-focus + .mj-thumbs(.thumb…). */
#panel-set-picker .pass-previews.mj-layout-C {
    display: grid; grid-template-columns: max-content max-content;
    gap: 1rem; align-items: start;
}
#panel-set-picker .pass-previews.mj-layout-C .mj-thumbs {
    display: flex; flex-direction: column; gap: 0.6rem; align-items: start;
}
#panel-set-picker .pass-previews.mj-layout-C .thumb {
    cursor: pointer; opacity: 0.7; transition: opacity 0.15s ease;
}
#panel-set-picker .pass-previews.mj-layout-C .thumb:hover { opacity: 1; }
/* Fixed 13px thumbnail cells (overrides the painter's inline --sp-cell). */
#panel-set-picker .pass-previews.mj-layout-C .thumb .mini-grid {
    grid-template-columns: repeat(9, 13px) !important;
}
#panel-set-picker .pass-previews.mj-layout-C .thumb .mj-watermark { display: none; }
#panel-set-picker .pass-previews.mj-layout-C .thumb h4 { font-size: 0.6rem; }
#panel-set-picker .pass-previews.mj-layout-C .thumb h4 .sub { display: none; }
#panel-set-picker .pass-card {
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.4rem 0.5rem;
}
#panel-set-picker .pass-card h4 {
    font-size: 0.7rem; font-weight: 600; margin: 0 0 0.3rem;
    display: flex; align-items: baseline; gap: 0.4rem;
}
#panel-set-picker .pass-card h4 .sub {
    font-size: 0.6rem; color: var(--text-dim); font-weight: 400;
}
#panel-set-picker .mini-grid {
    /* S4 (SP-22): cell width is driven by the shared --sp-cell var so one
       display-prefs slider (S5) scales VT + MJ together. JS stamps the same
       repeat(N, var(--sp-cell,1fr)) inline. width:max-content shrinks the
       grid to its actual columns so the %-positioned region watermarks +
       tints stay aligned with the cells at any cell size (S5a fix). */
    display: grid; grid-template-columns: repeat(9, var(--sp-cell, 1fr)); gap: 1px;
    width: max-content;
}
#panel-set-picker .mini-cell {
    aspect-ratio: 1; background: var(--bg);
    border-radius: 1px; min-height: 10px;
    position: relative;
}
#panel-set-picker .mini-cell.filled { opacity: 1; }
/* SP-23 / S1: filled mahjong mini-cells render the tile image as a
   cover-fit background (parity with versa-tile .slot.has-thumb), with
   provenance shown as an inset border so the thumbnail stays fully
   visible. inset box-shadow (not a real border) avoids layout shift on
   these tiny cells. */
#panel-set-picker .mini-cell.has-thumb { background-size: cover; background-position: center; }
#panel-set-picker .mini-cell.set      { box-shadow: inset 0 0 0 2px var(--text-dim); }
#panel-set-picker .mini-cell.board    { box-shadow: inset 0 0 0 2px var(--accent); }
#panel-set-picker .mini-cell.override { box-shadow: inset 0 0 0 2px var(--warning); }
#panel-set-picker .mini-cell.active-cat {
    outline: 1.5px solid var(--accent);
    outline-offset: -1.5px;
}

/* SP-10 Phase 4 Slice 2: mahjong category region tints + watermarks
   on the pass-preview mini-grids. Same background-image gradient
   trick as versa-tile: tints lose to filled cells' inline
   `background: <color>;` shorthand (resets bg-image) so only empty
   canonical cells show the tint. Per mockup section 3. */
#panel-set-picker .mini-cell.region-1-cracks {
    background-image: linear-gradient(rgba(204, 80, 80, 0.18), rgba(204, 80, 80, 0.18));
}
#panel-set-picker .mini-cell.region-2-dots {
    background-image: linear-gradient(rgba(108, 140, 255, 0.18), rgba(108, 140, 255, 0.18));
}
#panel-set-picker .mini-cell.region-3-bams {
    background-image: linear-gradient(rgba(76, 175, 130, 0.18), rgba(76, 175, 130, 0.18));
}
#panel-set-picker .mini-cell.region-4-winds {
    background-image: linear-gradient(rgba(229, 165, 75, 0.18), rgba(229, 165, 75, 0.18));
}
#panel-set-picker .mini-cell.region-5-dragons {
    background-image: linear-gradient(rgba(180, 100, 200, 0.18), rgba(180, 100, 200, 0.18));
}
#panel-set-picker .mini-cell.region-6-flowers {
    background-image: linear-gradient(rgba(232, 120, 180, 0.18), rgba(232, 120, 180, 0.18));
}
#panel-set-picker .mini-cell.region-7-jokers {
    background-image: linear-gradient(rgba(230, 130, 70, 0.18), rgba(230, 130, 70, 0.18));
}

/* Watermark labels — absolute over each .mini-grid (made
   position:relative below). Opacity set inline by JS for
   fade-as-cells-fill. Per-category positioning matches the
   canonical layout (see mahjongRegionSlotForCell + backend
   _build_canonical_cells). */
#panel-set-picker .mini-grid { position: relative; }
#panel-set-picker .mj-watermark {
    position: absolute;
    color: rgb(255, 255, 255);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease-out;
}
/* Pass 1: cracks top half, dots bottom half. Pass 2: bams top, winds/
   dragons/flowers split across bottom (cols 4/3/2). Pass 3: jokers
   top-left 2-col block. */
#panel-set-picker .mj-watermark.wm-cracks-top,
#panel-set-picker .mj-watermark.wm-bams-top {
    top: 0; left: 0; width: 100%; height: 50%;
    font-size: 0.85rem;
}
#panel-set-picker .mj-watermark.wm-dots-bottom {
    top: 50%; left: 0; width: 100%; height: 50%;
    font-size: 0.85rem;
}
#panel-set-picker .mj-watermark.wm-winds-bl {
    top: 50%; left: 0; width: 44.44%; height: 50%;
    font-size: 0.6rem;
}
#panel-set-picker .mj-watermark.wm-dragons-bm {
    top: 50%; left: 44.44%; width: 33.33%; height: 50%;
    font-size: 0.55rem;
    letter-spacing: 0.04em;
}
#panel-set-picker .mj-watermark.wm-flowers-br {
    top: 50%; right: 0; width: 22.22%; height: 50%;
    font-size: 0.5rem;
    letter-spacing: 0.04em;
}
#panel-set-picker .mj-watermark.wm-jokers-tl {
    top: 0; left: 0; width: 22.22%; height: 50%;
    font-size: 0.55rem;
}

/* Versa-tile WYSIWYG 9x8 — SP-10 P7c: per-grid card stack.
   .sp-vt-grids-stack hosts N .sp-vt-card children, each with its own
   header (Grid N · Pass N + per-grid Standard/Compacted toggle +
   Commit-compact button + ✕ Remove), grid surface, and summary line.
   Pre-7c the workspace had a single global grid + a global toolbar;
   multi-grid sets (3+ boards) needed each grid's affordances to live
   per-card so the operator can flip layouts / compact / remove
   independently. */
#panel-set-picker .sp-vt-grids-stack {
    display: flex; flex-direction: column; gap: 0.6rem;
}
#panel-set-picker .sp-vt-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem;
    display: flex; flex-direction: column; gap: 0.45rem;
}
#panel-set-picker .sp-vt-card-header {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
#panel-set-picker .sp-vt-card-header .title {
    font-size: 0.85rem; font-weight: 600; color: var(--text);
    letter-spacing: 0.02em;
}
#panel-set-picker .sp-vt-card-header .layout-label {
    margin-left: auto;
    font-size: 0.62rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-dim); font-weight: 600;
}
#panel-set-picker .sp-vt-card-header .commit-compact-btn {
    /* Same chrome as the action toolbar's sp-action-btn (now global-
       only). Visible only when this card's layoutMode === compacted. */
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.3rem 0.6rem;
    font-size: 0.74rem;
    color: var(--text);
    cursor: pointer;
}
#panel-set-picker .sp-vt-card-header .commit-compact-btn:disabled {
    opacity: 0.45; cursor: not-allowed;
}
#panel-set-picker .sp-vt-card-header .remove-grid-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    font-size: 0.82rem;
    color: var(--text-dim);
    cursor: pointer;
    line-height: 1;
}
#panel-set-picker .sp-vt-card-header .remove-grid-btn:hover {
    color: var(--warning);
    border-color: var(--warning);
}
#panel-set-picker .sp-vt-card-grid {
    /* Watermarks render as absolute siblings of the grid cells. */
    position: relative;
}
#panel-set-picker .sp-vt-card-summary {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.45rem 0.6rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}
/* P7e UX-audit fix: inline note inside per-grid cards in Compacted
   view, telling the operator the grid surface shown is NOT the
   compacted preview (preview engine is single-grid in this phase;
   commit-compact applies the layout per grid). Mirrors the
   #sp-mj-compact-note pattern for mahjong's global toggle. */
#panel-set-picker .sp-vt-card-compact-note {
    background: var(--surface-alt);
    border: 1px solid var(--accent);
    border-left-width: 3px;
    border-radius: 4px;
    padding: 0.5rem 0.7rem;
    font-size: 0.74rem;
    color: var(--text-muted);
}
#panel-set-picker .sp-vt-card-compact-note strong { color: var(--text); }
#panel-set-picker .sp-vt-add-grid-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.3rem;
}
#panel-set-picker .wysiwyg-wrap {
    display: grid; grid-template-columns: 1fr auto; gap: 0.75rem;
    align-items: start;
}
#panel-set-picker .wysiwyg-controls {
    display: flex; flex-direction: column; gap: 0.4rem;
    min-width: 180px;
}
#panel-set-picker .preview-toggle {
    display: flex; gap: 0; border: 1px solid var(--border);
    border-radius: 4px; overflow: hidden;
}
#panel-set-picker .preview-toggle button {
    flex: 1; padding: 0.35rem 0.6rem; background: var(--surface-alt);
    border: none; color: var(--text-muted);
    font-size: 0.76rem; cursor: pointer;
}
#panel-set-picker .preview-toggle button.active { background: var(--accent); color: var(--bg); font-weight: 600; }
#panel-set-picker .provenance-legend {
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.5rem 0.7rem;
    font-size: 0.7rem; color: var(--text-muted);
    display: flex; flex-direction: column; gap: 0.3rem;
}
#panel-set-picker .provenance-legend .leg-row {
    display: flex; align-items: center; gap: 0.4rem;
}
#panel-set-picker .provenance-legend .leg-swatch {
    width: 12px; height: 12px; border-radius: 2px; border: 2px solid;
}
#panel-set-picker .provenance-legend .leg-swatch.set { border-color: var(--text-dim); background: transparent; }
#panel-set-picker .provenance-legend .leg-swatch.board { border-color: var(--accent); background: transparent; }
#panel-set-picker .provenance-legend .leg-swatch.override { border-color: var(--warning); background: transparent; }
#panel-set-picker .provenance-legend .leg-swatch.empty { border-color: var(--border); background: transparent; }

#panel-set-picker .grid-9x8 {
    /* S4 (SP-22): --sp-cell shared cell-size var (see .mini-grid).
       width:max-content shrinks the grid to its columns so the versa-tile
       BOARD 1 / BOARD 2 / EXTRAS watermarks (positioned by % of this
       container) stay aligned with the cells at any --sp-cell (S5a fix —
       a fixed-width grid left-aligned in a full-width card otherwise left
       the %-watermarks drifting right). */
    display: grid; grid-template-columns: repeat(9, var(--sp-cell, 1fr)); gap: 4px;
    width: max-content;
}
#panel-set-picker .slot {
    aspect-ratio: 1; background: var(--surface-alt);
    border: 2px solid transparent; border-radius: 4px;
    position: relative; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; color: var(--text-dim);
}
#panel-set-picker .slot.empty { border: 2px dashed var(--border); }
#panel-set-picker .slot.set { border-color: var(--text-dim); background: rgba(139,144,160,0.15); color: rgba(255,255,255,0.7); }
#panel-set-picker .slot.board { border-color: var(--accent); background: rgba(108,140,255,0.18); color: white; }
#panel-set-picker .slot.override { border-color: var(--warning); background: rgba(229,165,75,0.2); color: white; border-width: 3px; }
/* Filled-cell thumbnail (Bug 3 / option 2): tile image as background,
   cover-fit to keep the provenance border visible at the edge. */
#panel-set-picker .slot.has-thumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* × clear button on filled override cells in the versa-tile grid.
   Mirrors mahjong's .cat-slot .clear-slot-btn pattern; sits in the
   top-right corner, semi-transparent until hover. */
#panel-set-picker .slot .clear-slot-btn {
    position: absolute; top: 2px; right: 2px;
    display: flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    background: rgba(0, 0, 0, 0.55); color: white;
    border: none; border-radius: 50%;
    font-size: 0.72rem; line-height: 1; cursor: pointer; padding: 0;
    opacity: 0.7; transition: opacity 0.1s, background 0.1s;
}
#panel-set-picker .slot:hover .clear-slot-btn {
    opacity: 1;
}
#panel-set-picker .slot .clear-slot-btn:hover {
    background: var(--danger, #d44);
}
/* Locked cells in versa-tile auto_fill mode (rows 2-4 + 6-8): same
   crosshatch + dim treatment as mahjong locked cat-slots. The 4x slot
   model can only address rows 1 and 5; intervening rows auto-replicate
   from the slot's first cell engine-side. */
#panel-set-picker .slot.locked {
    opacity: 0.4;
    cursor: not-allowed;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 4px,
            rgba(255, 255, 255, 0.04) 4px,
            rgba(255, 255, 255, 0.04) 5px
        );
}
#panel-set-picker .slot.has-thumb.locked {
    opacity: 0.55;
}
/* Track-1 audit cleanup: the legacy .slot[data-slot-key].drag-over highlight
   was removed — S3 retired the data-slot-key stamp + the .drag-over class.
   The dispatcher now uses .drag-over-blue / .drag-over-amber (below). */
/* Make drop-target cells visually invite a drop (cursor hint). S3
   (SP-22): re-keyed from the retired [data-slot-key] stamp to
   [data-cell-idx] (carried by every versa cell, incl. spawned grids);
   exclusion updated from the dead .locked class to the live
   .has-user-lock so locked cells don't advertise a drop. */
#panel-set-picker .slot[data-cell-idx]:not(.has-user-lock) { cursor: copy; }
#panel-set-picker .slot .clear-slot-btn {
    display: none; position: absolute;
    top: 2px; right: 2px;
    background: rgba(0,0,0,0.5); color: white;
    border: none; border-radius: 50%;
    width: 14px; height: 14px;
    font-size: 0.65rem; line-height: 1;
    cursor: pointer; padding: 0;
    align-items: center; justify-content: center;
}
#panel-set-picker .slot:not(.empty):hover .clear-slot-btn { display: flex; }

/* SP-10 Phase 4: versa-tile region tints + watermark labels.
   Per mockup §1: board_1 (rows 0-3, cols 0-7) slate-teal,
   board_2 (rows 4-7, cols 0-7) purple, extras (col 8) muted gold.
   Tints render via background-image gradient — filled cells'
   inline thumbnail `background-image: url(...)` automatically
   replaces the gradient, so tints only show under empty cells.
   Custom family + non-9x8 instances skip these classes (JS gate). */
#panel-set-picker .slot.region-board-1 {
    background-image: linear-gradient(rgba(95, 158, 160, 0.15), rgba(95, 158, 160, 0.15));
}
#panel-set-picker .slot.region-board-2 {
    background-image: linear-gradient(rgba(155, 100, 175, 0.15), rgba(155, 100, 175, 0.15));
}
#panel-set-picker .slot.region-extras {
    background-image: linear-gradient(rgba(170, 150, 100, 0.15), rgba(170, 150, 100, 0.15));
}
/* Locked auto_fill rows: the existing .slot.locked rule applies
   opacity 0.4 + a diagonal stripe background-image. Without
   this override the region tint loses cascade (single-layer
   gradient overwritten by stripes) and the 0.4 opacity wash
   makes any underlying tint nearly invisible. Boost alpha to
   ~0.35 so post-opacity (0.35 × 0.4 ≈ 0.14) matches the
   ~0.15 alpha on drop-target rows, keeping the band readable.
   Stack stripes on top of tint via multi-layer background. */
#panel-set-picker .slot.locked.region-board-1 {
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent 0, transparent 4px,
            rgba(255, 255, 255, 0.04) 4px, rgba(255, 255, 255, 0.04) 5px
        ),
        linear-gradient(rgba(95, 158, 160, 0.35), rgba(95, 158, 160, 0.35));
}
#panel-set-picker .slot.locked.region-board-2 {
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent 0, transparent 4px,
            rgba(255, 255, 255, 0.04) 4px, rgba(255, 255, 255, 0.04) 5px
        ),
        linear-gradient(rgba(155, 100, 175, 0.35), rgba(155, 100, 175, 0.35));
}
#panel-set-picker .slot.locked.region-extras {
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent 0, transparent 4px,
            rgba(255, 255, 255, 0.04) 4px, rgba(255, 255, 255, 0.04) 5px
        ),
        linear-gradient(rgba(170, 150, 100, 0.35), rgba(170, 150, 100, 0.35));
}

/* Watermark labels (absolute over the grid). Opacity is set
   inline by paintVersaTileGrid based on per-region fill ratio:
   0.15 empty → 0.05 fully filled (mockup spec).
   SP-10 P7c: position:relative moved to .sp-vt-card-grid (the per-
   card 9×8 surface) so watermarks anchor to each card individually. */
#panel-set-picker .vt-watermark {
    position: absolute;
    color: rgb(255, 255, 255);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease-out;
}
#panel-set-picker .vt-watermark.wm-board-1 {
    top: 0; left: 0; width: 88.9%; height: 50%;
    font-size: 1.3rem;
}
#panel-set-picker .vt-watermark.wm-board-2 {
    top: 50%; left: 0; width: 88.9%; height: 50%;
    font-size: 1.3rem;
}
#panel-set-picker .vt-watermark.wm-extras {
    top: 0; right: 0; width: 11.1%; height: 100%;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* SP-10 Phase 2: direct-paint action toolbar (versa-tile only this
   phase; lifts to workspace-wide in Phase 4+). Sits above the print
   bed preview; carries Undo / Redo buttons + a stack indicator. */
#panel-set-picker .sp-action-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 0.6rem;
    font-size: 0.72rem;
}
#panel-set-picker .sp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.25rem 0.6rem;
    color: var(--text);
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1.2;
}
#panel-set-picker .sp-action-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}
#panel-set-picker .sp-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* P5 Slice 5c: select mode toggle highlight. */
#panel-set-picker .sp-action-btn.active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
#panel-set-picker .sp-action-btn.active:hover:not(:disabled) {
    color: var(--bg);
    filter: brightness(1.1);
}
#panel-set-picker .sp-kbd-inline {
    background: var(--bg, var(--surface-alt));
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0 4px;
    font-family: monospace;
    font-size: 0.6rem;
    color: var(--text-dim);
}
#panel-set-picker .sp-stack-indicator {
    margin-left: auto;
    font-size: 0.66rem;
    color: var(--text-dim);
    font-style: italic;
}
/* SP-10 Phase 2: per-cell lock indicator (state.locks). Phase 5 wires
   the UI for setting/clearing; this phase just renders the visual when
   the data is set. Distinct from .slot.locked which marks structurally
   undroppable cells in auto_fill mode (rows 2-4 / 6-8). */
#panel-set-picker .slot.has-user-lock {
    box-shadow: inset 0 0 0 1.5px rgba(229, 165, 75, 0.65);
}
#panel-set-picker .slot.has-user-lock::after {
    /* P5.5e audit fix: badge moved to top-right for cross-family
       consistency with the mahjong mini-cell dot (also top-right).
       Top-left would also collide with future Phase 6 cell-position
       indicators. */
    content: "L";
    position: absolute;
    top: 1px;
    right: 4px;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--warning);
    line-height: 1;
    pointer-events: none;
}

/* SP-10 Phase 5 Slice 5a: same lock indicator on mahjong mini-cells.
   Smaller cell, smaller badge — no letter (mini-cells are tiny), just
   a thin warning outline that reads as "operator-protected". */
#panel-set-picker .mini-cell.has-user-lock {
    box-shadow: inset 0 0 0 1.5px rgba(229, 165, 75, 0.75);
    position: relative;
}
#panel-set-picker .mini-cell.has-user-lock::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--warning);
    pointer-events: none;
}

/* SP-10 Phase 5 Slice 5b: right-click context menu for cell
   lock/unlock. Lives at document.body level so its absolute
   positioning is computed against the viewport. */
#sp-cell-context-menu {
    position: fixed;
    z-index: 1000;
    background: var(--surface-hi, #2c3142);
    border: 1px solid var(--border-hi, #3d4358);
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    padding: 0.25rem 0;
    min-width: 130px;
    font-size: 0.78rem;
    color: var(--text, #e1e4ed);
    user-select: none;
}
#sp-cell-context-menu.hidden { display: none; }
#sp-cell-context-menu .menu-item {
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#sp-cell-context-menu .menu-item:hover {
    background: rgba(108, 140, 255, 0.15);
    color: var(--accent);
}
#sp-cell-context-menu .menu-item.lock-action::before { content: "🔒"; font-size: 0.85em; }
#sp-cell-context-menu .menu-item.unlock-action::before { content: "🔓"; font-size: 0.85em; }
/* P5 Slice 5c: bulk-select tool — selection visual + select-mode
   cursor. Selected cells (any family) get a teal outline distinct
   from the amber lock outline and the blue/amber drag highlights.
   Select-mode active changes the cursor and dims the empty-cell
   borders so the operator sees they're in a different gesture
   mode. */
#panel-set-picker .slot.is-selected,
#panel-set-picker .mini-cell.is-selected {
    box-shadow: inset 0 0 0 2px rgba(76, 175, 178, 0.85);
    z-index: 2;
}
/* SP-10 P7c: select-mode applies to the stack wrapper so every
   per-card grid surface inherits the crosshair cursor. The
   onGridMouseDown handler picks the SPECIFIC card the drag started
   on via target.el.closest('.sp-vt-card-grid'). */
#sp-vt-grids-stack.select-mode-active,
#sp-pass-previews.select-mode-active .mini-grid {
    cursor: crosshair;
}
#sp-vt-grids-stack.select-mode-active .slot,
#sp-pass-previews.select-mode-active .mini-cell {
    cursor: crosshair;
}
/* Rectangle drag overlay — rendered as a child of the grid container. */
.sp-select-rect {
    position: absolute;
    background: rgba(76, 175, 178, 0.18);
    border: 1px solid rgba(76, 175, 178, 0.7);
    pointer-events: none;
    z-index: 5;
}

#sp-cell-context-menu .menu-meta {
    padding: 0.2rem 0.7rem;
    font-size: 0.62rem;
    color: var(--text-dim, #6a6e7c);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border, #2e3345);
    margin-bottom: 0.2rem;
}

/* D22: Per-pass jig assignment row (mahjong only). */
#panel-set-picker .pass-jig-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    margin-top: 0.8rem;
    font-size: 0.8rem;
}
#panel-set-picker .pass-jig-row .pjr-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.7rem; margin-bottom: 0.5rem;
}
#panel-set-picker .pass-jig-row .pjr-header strong {
    font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted);
    font-weight: 700;
}
#panel-set-picker .pass-jig-row .pjr-checkbox {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; color: var(--text);
}
#panel-set-picker .pass-jig-row .pjr-hint {
    color: var(--text-dim); font-style: italic; font-size: 0.7rem;
}
#panel-set-picker .pass-jig-row .pjr-passes {
    display: flex; flex-direction: column; gap: 0.45rem;
}
#panel-set-picker .pass-jig-row .pjr-passes.hidden { display: none; }
#panel-set-picker .pass-jig-row .pjr-collapsed-note {
    color: var(--text-muted); font-size: 0.78rem;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.4rem 0.7rem;
}
#panel-set-picker .pass-jig-row .pjr-collapsed-note strong {
    color: var(--text); font-family: monospace;
    font-size: 0.78rem; padding: 0 0.2rem;
}
#panel-set-picker .pass-jig-row .pjr-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) 1.3fr 1.6fr auto;
    gap: 0.5rem 0.7rem; align-items: center;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.4rem 0.7rem;
}
#panel-set-picker .pass-jig-row .pjr-label {
    font-size: 0.78rem; color: var(--text); font-weight: 500;
}
#panel-set-picker .pass-jig-row .pjr-label .pjr-sublabel {
    font-size: 0.66rem; color: var(--text-muted);
    font-weight: 400; font-style: italic; display: block;
}
#panel-set-picker .pass-jig-row .pjr-row label {
    display: flex; flex-direction: column; gap: 0.15rem;
    font-size: 0.66rem; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.05em;
}
#panel-set-picker .pass-jig-row .pjr-row select {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); padding: 0.25rem 0.4rem;
    border-radius: 3px; font-size: 0.76rem;
    font-family: monospace;
}
#panel-set-picker .pass-jig-row .pjr-stale-chip {
    font-size: 0.62rem; padding: 1px 6px;
    background: rgba(229, 165, 75, 0.15);
    color: var(--warning); border: 1px solid var(--warning);
    border-radius: 8px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
#panel-set-picker .pass-jig-row .pjr-stale-chip:hover {
    background: var(--warning); color: var(--bg);
}
#panel-set-picker .pass-jig-row.hidden { display: none; }

/* P3.2 (B3): read-only active-overlay chip — surfaces the per-operator active
   dimension overlay (effective = baseline + Δ) wherever a jig's geometry is in
   play in the Set Picker (top-bar caption + per-pass jig rows). Switching lives
   on the Dimension Profiles pane, so this is purely informational. */
.sp-overlay-chip {
    display: inline-block; font-size: 0.62rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: 10px; white-space: nowrap;
    vertical-align: middle; margin-left: 0.35rem;
}
.sp-overlay-chip.active {
    color: var(--accent); background: rgba(108, 140, 255, 0.16);
    border: 1px solid rgba(108, 140, 255, 0.4);
}
.sp-overlay-chip.baseline {
    color: var(--text-dim); background: rgba(160, 160, 160, 0.12);
    border: 1px solid rgba(160, 160, 160, 0.3); font-weight: 600;
}
.sp-overlay-chip.loading {
    color: var(--text-dim); background: transparent; border: 1px solid transparent;
}

/* Budget indicator (top bar, right-aligned) */
#panel-set-picker .budget {
    margin-left: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.3rem 0.65rem;
    font-size: 0.74rem; display: flex; align-items: center; gap: 0.45rem;
}
#panel-set-picker .budget .num { font-weight: 600; font-variant-numeric: tabular-nums; }
#panel-set-picker .budget.ok { color: var(--success); border-color: var(--success); }
#panel-set-picker .budget.over { color: var(--danger); border-color: var(--danger); }
#panel-set-picker .budget .tag {
    font-size: 0.6rem; padding: 1px 6px; border-radius: 8px;
    text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em;
}
#panel-set-picker .budget.ok .tag { background: var(--success); color: white; }
#panel-set-picker .budget.over .tag { background: var(--danger); color: white; }

/* Submit row */
#panel-set-picker .submits {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    align-items: center; flex-wrap: wrap;
}
#panel-set-picker .submits .note {
    color: var(--text-dim); font-size: 0.72rem;
    margin-right: auto; font-style: italic;
}
#panel-set-picker .btn {
    padding: 0.5rem 1rem; border: 1px solid var(--border);
    background: var(--surface-alt); color: var(--text);
    border-radius: 4px; font-size: 0.84rem; cursor: pointer; font-weight: 500;
}
#panel-set-picker .btn:hover:not(:disabled) { background: var(--surface-hi); }
#panel-set-picker .btn:disabled { opacity: 0.45; cursor: not-allowed; }
#panel-set-picker .btn.primary {
    background: var(--accent); border-color: var(--accent); color: white;
}
#panel-set-picker .btn.secondary { background: var(--surface-hi); border-color: var(--border-hi); }

/* Save-as-set inline panel */
#panel-set-picker .save-panel {
    background: var(--surface-alt); border: 1px solid var(--accent);
    border-left-width: 3px; border-radius: 4px;
    padding: 0.7rem 0.9rem; margin-top: 0.3rem;
}
#panel-set-picker .save-panel h4 {
    font-size: 0.78rem; margin: 0 0 0.4rem;
    color: var(--text); font-weight: 600;
}
#panel-set-picker .save-panel .row {
    display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
}
#panel-set-picker .save-panel input[type=text] {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); padding: 0.35rem 0.6rem;
    border-radius: 4px; font-size: 0.82rem; min-width: 240px;
}
#panel-set-picker .save-panel .hint {
    font-size: 0.7rem; color: var(--text-dim); margin-top: 0.3rem;
    font-style: italic;
}

/* #47 P4.5b: reference-vs-snapshot controls inside the Save panel. */
#panel-set-picker .sp-save-snap {
    margin-top: 0.5rem; padding-top: 0.45rem;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 0.4rem;
}
#panel-set-picker .sp-snap-modes {
    display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem;
}
#panel-set-picker .sp-snap-modes-label {
    color: var(--text-dim); text-transform: uppercase;
    letter-spacing: 0.04em; font-size: 0.6rem; margin-right: 0.15rem;
}
#panel-set-picker .sp-snap-mode-btn {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-muted); border-radius: 4px; cursor: pointer;
    padding: 0.12rem 0.5rem; font-size: 0.68rem;
}
#panel-set-picker .sp-snap-mode-btn.active {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
#panel-set-picker .sp-snap-global-row,
#panel-set-picker .sp-snap-board-row {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; color: var(--text-muted); cursor: pointer;
}
#panel-set-picker .sp-snap-perboard-list {
    display: flex; flex-direction: column; gap: 0.25rem;
    max-height: 9rem; overflow-y: auto;
}
#panel-set-picker .sp-snap-board-row .sp-snap-board-name {
    flex: 1; color: var(--text); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
#panel-set-picker .sp-snap-board-row .sp-snap-board-hint {
    font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* View mode (lifted from set_picker_unified.html v1 lines 280-308) */
#panel-set-picker .view-pane {
    display: flex; flex-direction: column; gap: 0.6rem;
}
#panel-set-picker .view-header {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid var(--border); padding-bottom: 0.5rem;
}
#panel-set-picker .view-header h2 {
    font-size: 1rem; font-weight: 600; margin: 0;
}
#panel-set-picker .view-header .meta { color: var(--text-muted); font-size: 0.78rem; }
#panel-set-picker .view-header .actions { display: flex; gap: 0.5rem; }
#panel-set-picker .view-image-grid {
    display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px;
}
#panel-set-picker .view-image-grid figure {
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.4rem; text-align: center;
    margin: 0;
    overflow: visible;   /* allow hover-zoomed img to escape the cell */
    position: relative;
}
/* Constrain figure imgs the same way .inv-tile imgs were fixed —
   without max-width the 800x1100 natural source blows out the
   9-column grid track. Hover scales the img up 2.5x and lifts it on
   z-index so the operator can inspect a tile without leaving View. */
#panel-set-picker .view-image-grid figure img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    cursor: zoom-in;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    transform-origin: center center;
}
#panel-set-picker .view-image-grid figure:hover {
    z-index: 10;
}
#panel-set-picker .view-image-grid figure:hover img {
    transform: scale(2.5);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
    position: relative;
    z-index: 11;
}
/* Edge-aware zoom origin: the grid is repeat(9, 1fr) so columns 1 and 9
   sit against the workspace edges. Anchor the zoom to the inside of the
   cell on those columns so the zoomed image grows toward the center
   instead of clipping against the pane edge. Rules below cascade in
   declaration order — broader edge rules first, corner overrides last. */
#panel-set-picker .view-image-grid figure:nth-child(9n+1) img {
    transform-origin: left center;
}
#panel-set-picker .view-image-grid figure:nth-child(9n) img {
    transform-origin: right center;
}
#panel-set-picker .view-image-grid figure:nth-child(-n+9) img {
    transform-origin: center top;
}
#panel-set-picker .view-image-grid figure:nth-last-child(-n+9) img {
    transform-origin: center bottom;
}
/* Corner overrides — declared AFTER the row/column rules so they win. */
#panel-set-picker .view-image-grid figure:nth-child(9n+1):nth-child(-n+9) img {
    transform-origin: left top;
}
#panel-set-picker .view-image-grid figure:nth-child(9n):nth-child(-n+9) img {
    transform-origin: right top;
}
#panel-set-picker .view-image-grid figure:nth-child(9n+1):nth-last-child(-n+9) img {
    transform-origin: left bottom;
}
#panel-set-picker .view-image-grid figure:nth-last-child(-n+9):nth-child(9n) img {
    transform-origin: right bottom;
}
#panel-set-picker .view-image-grid .placeholder {
    aspect-ratio: 1; background: var(--bg); border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 0.65rem;
}
#panel-set-picker .view-image-grid figcaption {
    font-size: 0.62rem; color: var(--text-muted); margin-top: 0.2rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#panel-set-picker .hidden { display: none !important; }

/* ── Set Picker result chip (showResult/showResultFiles/showResultJob) ───
   Build-audit-C: these classes have always been emitted by JS (since
   SP-04's success→ok rename in fd5a3a3) but the matching CSS was never
   shipped. Result chips rendered unstyled — operators just saw a plain
   text block with no provenance indication of success vs error. */
#panel-set-picker .sp-result-ok,
#panel-set-picker .sp-result-error {
    border-radius: 4px;
    padding: 0.55rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    border: 1px solid;
    border-left-width: 3px;
}
#panel-set-picker .sp-result-ok {
    background: rgba(76, 175, 130, 0.08);
    border-color: var(--success);
    color: var(--text);
}
#panel-set-picker .sp-result-error {
    background: rgba(224, 85, 85, 0.08);
    border-color: var(--danger);
    color: var(--text);
}
#panel-set-picker .sp-result-ok strong {
    display: block;
    color: var(--success);
    margin-bottom: 0.3rem;
}
#panel-set-picker .sp-result-error strong {
    color: var(--danger);
}
#panel-set-picker .sp-result-files,
#panel-set-picker .sp-result-passes {
    margin: 0.3rem 0;
    padding-left: 1.2rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}
/* SP-11: output-dir line + Open-folder button in test-render results */
#panel-set-picker .sp-result-dir {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.3rem 0 0.4rem;
    font-size: 0.78rem;
    color: var(--text-dim);
    flex-wrap: wrap;
}
#panel-set-picker .sp-result-dir-label { color: var(--text-dim); }
#panel-set-picker .sp-result-dir-path {
    color: var(--text);
    background: var(--surface-hi);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
}
#panel-set-picker .sp-open-folder-btn {
    background: var(--surface-hi);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
}
#panel-set-picker .sp-open-folder-btn:hover { background: var(--border); }
#panel-set-picker .sp-open-folder-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#panel-set-picker .sp-result-files li,
#panel-set-picker .sp-result-passes li {
    margin: 0.1rem 0;
}
#panel-set-picker .sp-result-files a {
    color: var(--accent);
    text-decoration: none;
}
#panel-set-picker .sp-result-files a:hover { text-decoration: underline; }

/* ── Tools tab — collapsible icon sidebar (Wave 6e) ─────────────── */
.tools-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    padding: 1rem 1.25rem 1rem 0;
    transition: grid-template-columns 0.2s ease;
}
.tools-layout.collapsed {
    grid-template-columns: 48px 1fr;
}

.tools-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.3rem;
    overflow-y: auto;
    overflow-x: hidden;
    align-self: start;
    display: flex;
    flex-direction: column;
}
.tools-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.3rem;
    cursor: pointer;
    user-select: none;
}
.tools-sidebar-header:hover { background: var(--surface-alt); }
.tools-sidebar-header:hover .tools-toggle-btn {
    color: var(--text);
    border-color: var(--border-hi);
}
.tools-sidebar-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.15s;
}
.tools-layout.collapsed .tools-sidebar-title { opacity: 0; }

.tools-toggle-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}
.tools-toggle-btn:hover {
    color: var(--text);
    border-color: var(--border-hi);
}

.tools-group-header {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    padding: 0.6rem 0.55rem 0.2rem;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.15s, height 0.15s;
}
.tools-layout.collapsed .tools-group-header {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border);
    margin-top: 0.4rem;
}

.tool-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.55rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    font-family: inherit;
}
.tool-item:hover {
    color: var(--text);
    background: var(--surface-alt);
}
.tool-item.active {
    color: var(--text);
    background: var(--surface-alt);
    border-color: var(--accent);
}
.tool-item .tool-icon {
    font-size: 1rem;
    width: 22px;
    flex-shrink: 0;
    text-align: center;
    color: var(--text-dim);
}
.tool-item.active .tool-icon { color: var(--accent); }
.tool-item .tool-text {
    transition: opacity 0.15s;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tools-layout.collapsed .tool-item .tool-text { opacity: 0; }
.tools-layout.collapsed .tool-item {
    padding: 0.45rem 0;
    justify-content: center;
}
.tools-layout.collapsed .tool-item .tool-icon {
    width: 100%;
    font-size: 1.05rem;
}

.tools-layout.collapsed .tool-item:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface-hi);
    color: var(--text);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    white-space: nowrap;
    border: 1px solid var(--border-hi);
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tool-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.25rem;
    overflow-y: auto;
}
.tool-content h2 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.tool-subtitle {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.tool-content p.tool-help {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 1rem;
}
.tool-pane { display: none; }
.tool-pane.active { display: block; }

.tool-stub-banner {
    background: var(--surface-alt);
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-dim);
    font-style: italic;
    font-size: 0.85rem;
}

/* ── Calibration workflow strip (CAL-08 + PROF-01) ──────────────
   Breadcrumb + 6-step strip cloned into both cal-templates and
   cal-profiles by calibration.js mountWorkflowStrip. Unscoped
   selectors since the cal- prefix already isolates these. */
.cal-breadcrumb {
    font-size: 0.72rem; color: var(--text-dim);
    display: flex; gap: 0.4rem; align-items: center;
    margin-bottom: 0.6rem;
}
.cal-breadcrumb .sep { color: var(--text-dim); }
.cal-breadcrumb .current { color: var(--text); font-weight: 500; }

.cal-workflow-row {
    display: flex; gap: 0.7rem; align-items: stretch;
    margin-bottom: 0.8rem;
}
.cal-workflow-step {
    flex: 1; background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.6rem 0.75rem;
    display: flex; flex-direction: column; gap: 0.25rem;
    min-height: 78px;
}
.cal-workflow-step.active {
    border-color: var(--accent); background: var(--surface-hi);
}
.cal-workflow-step .num {
    font-size: 0.62rem; color: var(--text-muted); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.cal-workflow-step.active .num { color: var(--accent); }
.cal-workflow-step .what { font-size: 0.85rem; font-weight: 600; }
.cal-workflow-step .who {
    font-size: 0.68rem; color: var(--text-muted); font-style: italic;
    margin-top: auto;
}
.cal-workflow-step .loop-hint {
    font-size: 0.62rem; color: var(--warning);
    margin-top: 0.15rem; font-style: italic;
}
.cal-workflow-arrow {
    display: flex; align-items: center; color: var(--text-dim);
    font-size: 1.1rem;
}

/* ── Tools → Calibration Templates pane (Wave 6e-C) ─────────────
   All selectors scoped under `[data-pane="cal-templates"]` so the
   generic class names (.variant-card, .preview-pane, etc.) don't
   leak to other tools panes. Profiles pane uses the cal- prefix
   on its own selectors in chunk 3. */

.tool-pane[data-pane="cal-templates"] .cal-tm-banner {
    background: var(--surface-alt); border: 1px solid var(--warning);
    border-left-width: 3px; border-radius: 4px;
    padding: 0.5rem 0.8rem; margin-bottom: 0.75rem;
    font-size: 0.78rem; color: var(--text); display: flex; gap: 0.6rem;
    align-items: center; flex-wrap: wrap;
}
.tool-pane[data-pane="cal-templates"] .cal-tm-banner .tm-label {
    background: var(--warning); color: var(--bg);
    padding: 1px 6px; border-radius: 8px;
    font-weight: 700; font-size: 0.6rem; text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tool-pane[data-pane="cal-templates"] .cal-bulk-status {
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.4rem 0.7rem; margin-bottom: 0.6rem;
    display: flex; gap: 0.85rem; align-items: center; flex-wrap: wrap;
    font-size: 0.78rem;
}
.tool-pane[data-pane="cal-templates"] .cal-bulk-status .stat {
    color: var(--text-muted);
}
/* CAL-14 C: calibrated counter blue so it matches the new pill's
   "calibrated = blue" visual language. */
.tool-pane[data-pane="cal-templates"] .cal-bulk-status .stat.calib strong { color: var(--accent); }
.tool-pane[data-pane="cal-templates"] .cal-bulk-status .stat.dim { color: var(--text-dim); }
.tool-pane[data-pane="cal-templates"] .cal-bulk-actions {
    margin-left: auto; display: flex; gap: 0.4rem;
}
.tool-pane[data-pane="cal-templates"] .btn-ghost {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); padding: 0.25rem 0.6rem;
    border-radius: 3px; font-size: 0.72rem; cursor: pointer;
}
.tool-pane[data-pane="cal-templates"] .btn-ghost:hover {
    color: var(--text); border-color: var(--border-hi);
}

/* Variant card grid */
.tool-pane[data-pane="cal-templates"] .cal-variant-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.7rem; margin-bottom: 0.85rem;
}
.tool-pane[data-pane="cal-templates"] .cal-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 5px; padding: 0.6rem 0.7rem;
    display: flex; flex-direction: column; gap: 0.4rem;
    cursor: pointer; transition: border-color 0.1s;
}
.tool-pane[data-pane="cal-templates"] .cal-card:hover { border-color: var(--border-hi); }
/* CAL-14 F: focused card carries an outer ring + inset edge so the
   "this is the live-preview source" card stands out from neighbors,
   not just from its calibrated peers. Outer ring 3px outside the
   border (one tick more pronounced than the 2px first pass);
   inset stays at 1px. */
.tool-pane[data-pane="cal-templates"] .cal-card.focused {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent), 0 0 0 1px var(--accent) inset;
}
/* CAL-14 B: cards whose picker is non-baseline get the accent border
   to mirror the inline CALIBRATED pill. .focused wins by source order
   when both apply (focus is more specific operator intent). */
.tool-pane[data-pane="cal-templates"] .cal-card.calibrated { border-color: var(--accent); }
.tool-pane[data-pane="cal-templates"] .cal-card .calibrated-tag {
    display: inline-block; font-size: 0.58rem; padding: 1px 5px;
    background: var(--accent); color: white; border-radius: 8px;
    margin-left: 0.3rem; text-transform: uppercase; font-weight: 700;
    letter-spacing: 0.04em; vertical-align: middle;
}
.tool-pane[data-pane="cal-templates"] .cal-card-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 0.5rem;
}
.tool-pane[data-pane="cal-templates"] .cal-card .name {
    font-weight: 600; font-size: 0.85rem; color: var(--text);
}
.tool-pane[data-pane="cal-templates"] .cal-card .vmeta {
    font-size: 0.7rem; color: var(--text-muted); margin-top: 1px;
    display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;
}
.tool-pane[data-pane="cal-templates"] .cal-card .instance-chip {
    background: var(--surface-hi); color: var(--text-muted);
    padding: 0 5px; border-radius: 8px;
    font-size: 0.62rem; font-weight: 600;
}
/* CAL-14 F: eye emoji at a larger size for unambiguous "viewer" cue.
   Emoji glyph carries its own color, so the accent var no longer
   applies — kept on the rule for legacy non-emoji fallback only. */
.tool-pane[data-pane="cal-templates"] .cal-card .focus-badge {
    color: var(--accent); font-size: 1rem; vertical-align: middle;
}
.tool-pane[data-pane="cal-templates"] .cal-card .actions {
    display: flex; gap: 0.4rem;
}
.tool-pane[data-pane="cal-templates"] .cal-card .actions a {
    color: var(--accent); font-size: 0.72rem; text-decoration: none;
}
.tool-pane[data-pane="cal-templates"] .cal-card .actions a:hover { text-decoration: underline; }
.tool-pane[data-pane="cal-templates"] .cal-card .picker-row {
    display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.5rem;
    align-items: center; font-size: 0.72rem; color: var(--text-muted);
}
/* CAL-14 D2: labels sit visually low because the font's glyph mass
   centers below its line box (typical descender padding). Flex/grid
   alignment centers the BOX correctly; the visible nudge corrects
   the optical center. 2px is empirically the right amount at this
   font size to align the label's cap midline with the select's
   internal-text midline. */
.tool-pane[data-pane="cal-templates"] .cal-card .picker-row > span {
    display: flex; align-items: center; line-height: 1;
    transform: translateY(-3px);
}
.tool-pane[data-pane="cal-templates"] .cal-card select {
    background: var(--surface-alt); border: 1px solid var(--border);
    color: var(--text); padding: 0.2rem 0.4rem; border-radius: 3px;
    font-size: 0.74rem; width: 100%;
}
/* DIM-01 Phase 5c: read-only geometry-source chip per card. */
.tool-pane[data-pane="cal-templates"] .cal-card .cal-geo-row {
    margin-top: 0.45rem;
}
.tool-pane[data-pane="cal-templates"] .cal-card .cal-geo-chip {
    display: inline-block;
    font-size: 0.62rem; color: var(--text-dim);
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 8px; padding: 0.1rem 0.5rem;
    font-variant-numeric: tabular-nums;
}
.tool-pane[data-pane="cal-templates"] .cal-card .cal-geo-chip.overlaid {
    color: var(--accent); border-color: rgba(108, 140, 255, 0.4);
    background: rgba(108, 140, 255, 0.1);
}

/* Options bar */
.tool-pane[data-pane="cal-templates"] .cal-options-bar {
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.5rem 0.7rem; margin-bottom: 0.55rem;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    font-size: 0.8rem;
}
.tool-pane[data-pane="cal-templates"] .cal-opt {
    display: flex; align-items: center; gap: 0.35rem;
    color: var(--text);
}
.tool-pane[data-pane="cal-templates"] .cal-divider {
    color: var(--border-hi); padding: 0 0.2rem; user-select: none;
}
.tool-pane[data-pane="cal-templates"] .cal-options-bar input[type="color"] {
    width: 30px; height: 22px; padding: 0; cursor: pointer;
    border: 1px solid var(--border); border-radius: 3px; background: transparent;
}
/* Strip browser-default asymmetric margins on checkboxes (typically
 * 3px top, 3px bottom, 3px right, 4px left) — they shift the visible
 * square upward relative to the adjacent label text even inside a
 * flex container with align-items: center. */
.tool-pane[data-pane="cal-templates"] .cal-options-bar input[type="checkbox"] {
    margin: 0;
}
.tool-pane[data-pane="cal-templates"] .cal-swatches {
    display: inline-flex; gap: 2px;
}
.tool-pane[data-pane="cal-templates"] .cal-swatch {
    width: 16px; height: 16px; border: 1px solid var(--border);
    border-radius: 2px; cursor: pointer; padding: 0;
}
.tool-pane[data-pane="cal-templates"] .cal-swatch:hover { border-color: var(--text); }
.tool-pane[data-pane="cal-templates"] .cal-swatch.active {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}
.tool-pane[data-pane="cal-templates"] .cal-tm-wrap {
    display: flex; align-items: center; gap: 0.45rem;
}
.tool-pane[data-pane="cal-templates"] .cal-tm-wrap label {
    display: flex; align-items: center; gap: 0.35rem;
}
.tool-pane[data-pane="cal-templates"] .cal-tm-inputs {
    display: inline-flex; align-items: center; gap: 0.3rem;
    color: var(--text-dim); font-size: 0.74rem;
}
.tool-pane[data-pane="cal-templates"] .cal-tm-inputs input[type="number"] {
    /* Explicit height + zero vertical padding + line-height:1 + margin:0
     * gives the input a fully-defined box that align-items:center can
     * place predictably. Without all four, browser-default input layout
     * quirks (intrinsic line-height ~1.2, asymmetric UA margins, spinner
     * internal padding on type=number) push the visible box above the
     * sibling text baseline. 22px matches the color picker height in this
     * options bar for visual consistency. */
    width: 48px; height: 22px; margin: 0;
    padding: 0 0.3rem; line-height: 1; font-size: 0.74rem;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); border-radius: 3px;
}
.tool-pane[data-pane="cal-templates"] .cal-image-area-hint {
    background: var(--surface-hi); color: var(--text-muted);
    padding: 1px 6px; border-radius: 8px;
    font-size: 0.62rem; font-weight: 600;
    cursor: help;
}

.tool-pane[data-pane="cal-templates"] .cal-warning {
    background: var(--surface-alt); border: 1px solid var(--danger);
    border-left-width: 3px; border-radius: 4px;
    padding: 0.5rem 0.8rem; margin-bottom: 0.55rem;
    font-size: 0.78rem; color: var(--danger);
}

/* Preview row */
.tool-pane[data-pane="cal-templates"] .cal-preview-block {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.75rem;
}
.tool-pane[data-pane="cal-templates"] .cal-preview-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.5rem; gap: 0.5rem; flex-wrap: wrap;
}
.tool-pane[data-pane="cal-templates"] .cal-preview-header .hdr {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
}
.tool-pane[data-pane="cal-templates"] .cal-preview-header .hint {
    font-size: 0.68rem; color: var(--text-dim); font-style: italic;
}
.tool-pane[data-pane="cal-templates"] .cal-preview-row {
    display: grid; grid-template-columns: 1fr 420px; gap: 0.7rem;
    /* `start` so the close-up pane sizes to its content rather than
     * stretching to match the (often very tall) grid pane. The cell
     * itself is grown via the inline width: 100% on its SVG. */
    align-items: start;
}
.tool-pane[data-pane="cal-templates"] .cal-preview-pane {
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.6rem; min-height: 220px;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.tool-pane[data-pane="cal-templates"] .cal-preview-pane-label {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted);
}
.tool-pane[data-pane="cal-templates"] .cal-focused-name {
    text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600;
}
.tool-pane[data-pane="cal-templates"] .cal-svg-wrap {
    flex: 1; display: flex; align-items: center; justify-content: center;
    overflow: auto;
}
.tool-pane[data-pane="cal-templates"] .cal-svg-wrap svg {
    max-width: 100%; max-height: 100%; height: auto; width: auto;
}
.tool-pane[data-pane="cal-templates"] .cal-closeup-meta {
    font-size: 0.7rem; color: var(--text-muted);
    border-top: 1px solid var(--border); padding-top: 0.4rem;
    /* CAL-03 follow-up: lay out the label/value pairs in two columns
     * (label auto-sized, value fills the rest) so values align in their
     * own column instead of running together with the labels. */
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.8rem;
    row-gap: 0.15rem;
}
.tool-pane[data-pane="cal-templates"] .cal-closeup-meta .meta-value {
    color: var(--text); font-weight: 600;
}

/* ── Tools → Calibration Profiles pane (Wave 6e-C / 3-5) ──────── */

.tool-pane[data-pane="cal-profiles"] .prof-list-section {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 5px; padding: 0.6rem 0.7rem; margin-bottom: 0.7rem;
}
.tool-pane[data-pane="cal-profiles"] .prof-list-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.5rem;
}
.tool-pane[data-pane="cal-profiles"] .prof-list-header .hdr {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
}
.tool-pane[data-pane="cal-profiles"] .prof-list {
    display: flex; flex-direction: column; gap: 4px;
}
.tool-pane[data-pane="cal-profiles"] .prof-row {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
}
.tool-pane[data-pane="cal-profiles"] .prof-row.retired { opacity: 0.55; }
.tool-pane[data-pane="cal-profiles"] .prof-row .name {
    flex: 1; color: var(--text); font-weight: 500;
}
.tool-pane[data-pane="cal-profiles"] .prof-row .chip {
    background: var(--surface-hi); color: var(--text-muted);
    padding: 1px 6px; border-radius: 8px;
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tool-pane[data-pane="cal-profiles"] .prof-row .chip.test {
    background: var(--warning); color: var(--bg);
}
.tool-pane[data-pane="cal-profiles"] .prof-row .chip.variant {
    background: var(--text-dim); color: white;
}
.tool-pane[data-pane="cal-profiles"] .prof-row .chip.instance {
    background: var(--accent); color: white;
}
.tool-pane[data-pane="cal-profiles"] .prof-row .actions {
    display: flex; gap: 0.3rem;
}
.tool-pane[data-pane="cal-profiles"] .prof-row .actions button {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); padding: 0.15rem 0.5rem;
    border-radius: 3px; cursor: pointer; font-size: 0.7rem;
}
.tool-pane[data-pane="cal-profiles"] .prof-row .actions button:hover {
    color: var(--text); border-color: var(--border-hi);
}
.tool-pane[data-pane="cal-profiles"] .prof-row .actions button.danger:hover {
    color: var(--danger); border-color: var(--danger);
}
/* PROF-09: "★ DEFAULT" pill — replaces PROF-06's bare ☆/★ button.
   Self-labels (operator doesn't need to hover to know the control).
   Dimmed grey when not default, warning-tinted when default. Click
   toggle wiring unchanged from PROF-06. */
.tool-pane[data-pane="cal-profiles"] .prof-row .actions button.star-default-btn {
    font-size: 0.55rem; padding: 1px 6px; line-height: 1.4;
    font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    border-radius: 8px;
    color: var(--text-dim); border-color: var(--border); background: transparent;
}
.tool-pane[data-pane="cal-profiles"] .prof-row .actions button.star-default-btn:hover {
    color: var(--warning); border-color: var(--warning);
}
.tool-pane[data-pane="cal-profiles"] .prof-row .actions button.star-default-btn.is-default {
    color: var(--warning); border-color: var(--warning);
    background: rgba(229, 165, 75, 0.15);
}
.tool-pane[data-pane="cal-profiles"] .prof-row .actions button.star-default-btn:disabled {
    cursor: not-allowed; opacity: 0.5;
}
.tool-pane[data-pane="cal-profiles"] .prof-warnings {
    background: var(--surface-alt); border: 1px solid var(--warning);
    border-left-width: 3px; border-radius: 4px;
    padding: 0.4rem 0.6rem; margin-top: 0.5rem;
    font-size: 0.72rem; color: var(--text-muted);
}

/* Editor */
.tool-pane[data-pane="cal-profiles"] .prof-editor {
    /* Preview column was 320px; bumped to 480px so the operator can
     * actually read the offset annotations overlaid on the SVG. The
     * form fields on the left compress fine — the offset-cell minmax
     * shrinks (see .prof-offset-grid below) to absorb the loss. */
    display: grid; grid-template-columns: 1fr 480px; gap: 0.85rem;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 5px; padding: 0.75rem;
}
.tool-pane[data-pane="cal-profiles"] .prof-editor-form {
    display: flex; flex-direction: column; gap: 0.55rem;
}
/* PROF-08: editor header — title is "Editing: <name>" (content, not
   section label) so it gets the readable size + normal case the
   mockup uses. Meta line below carries fork lineage + dirty flag. */
.tool-pane[data-pane="cal-profiles"] .prof-editor-header {
    display: flex; flex-direction: column; gap: 0.1rem;
    margin-bottom: 0.4rem;
}
.tool-pane[data-pane="cal-profiles"] .prof-editor-header .hdr {
    font-size: 0.95rem; font-weight: 600; color: var(--text);
    letter-spacing: normal; text-transform: none;
}
.tool-pane[data-pane="cal-profiles"] .prof-editor-header .hdr-status {
    font-size: 0.7rem; color: var(--text-dim); font-style: italic;
    min-height: 0.9rem; /* reserves space so layout doesn't jump when
                          status appears/disappears */
}
.tool-pane[data-pane="cal-profiles"] .prof-editor-header .hdr-status .dirty-flag {
    color: var(--warning); font-style: normal; font-weight: 600;
}
/* PROF-08: hint text under a form field that explains a constraint
   the operator can't infer from the placeholder alone (e.g. the
   strict-slug name rule). Sits inside the <label> so it inherits
   the field-row layout. */
.tool-pane[data-pane="cal-profiles"] .field-hint {
    display: block; margin-top: 0.2rem;
    font-size: 0.65rem; color: var(--text-dim);
}
.tool-pane[data-pane="cal-profiles"] .field-hint code {
    background: var(--surface-hi); color: var(--text-muted);
    padding: 0 4px; border-radius: 3px;
    font-size: 0.9em;
}
.tool-pane[data-pane="cal-profiles"] .prof-field-row {
    display: flex; gap: 0.7rem; align-items: flex-end;
}
.tool-pane[data-pane="cal-profiles"] .prof-field-row label {
    flex: 1; display: flex; flex-direction: column; gap: 0.2rem;
    font-size: 0.7rem; color: var(--text-muted);
}
.tool-pane[data-pane="cal-profiles"] .prof-field-row .req { color: var(--danger); }
.tool-pane[data-pane="cal-profiles"] .prof-field-row input[type="text"],
.tool-pane[data-pane="cal-profiles"] .prof-field-row textarea,
.tool-pane[data-pane="cal-profiles"] .prof-field-row select {
    background: var(--surface-alt); border: 1px solid var(--border);
    color: var(--text); padding: 0.3rem 0.5rem; border-radius: 3px;
    font-size: 0.82rem; font-family: inherit;
}
/* Offset grids */
.tool-pane[data-pane="cal-profiles"] .prof-offset-block {
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.5rem 0.6rem;
}
.tool-pane[data-pane="cal-profiles"] .prof-offset-header {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 0.45rem;
}
.tool-pane[data-pane="cal-profiles"] .prof-offset-sub {
    text-transform: none; letter-spacing: 0;
    color: var(--text-dim); font-weight: 400; margin-left: 0.4rem;
}
.tool-pane[data-pane="cal-profiles"] .prof-offset-grid {
    display: grid;
    /* Min cell width shrunk 72 -> 58px (~20%) so all 10 CD inputs pack
     * into the form column after the preview pane grew, while still
     * leaving room for the native number-input spinner buttons plus a
     * 4-character value like "-0.07" without clipping. */
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 0.35rem;
}
.tool-pane[data-pane="cal-profiles"] .prof-offset-cell {
    display: flex; flex-direction: column; gap: 0.15rem;
    font-size: 0.65rem; color: var(--text-dim);
}
.tool-pane[data-pane="cal-profiles"] .prof-offset-cell input {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); padding: 0.25rem 0.4rem; border-radius: 3px;
    font-size: 0.78rem; font-variant-numeric: tabular-nums;
    text-align: right;
}
.tool-pane[data-pane="cal-profiles"] .prof-offset-cell.modified input {
    border-color: var(--warning); background: rgba(229,165,75,0.08);
    color: var(--warning);
}

.tool-pane[data-pane="cal-profiles"] .prof-actions {
    display: flex; gap: 0.5rem; margin-top: 0.4rem; align-items: center;
}
.tool-pane[data-pane="cal-profiles"] .btn {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); padding: 0.35rem 0.8rem;
    border-radius: 3px; cursor: pointer; font-size: 0.78rem;
}
.tool-pane[data-pane="cal-profiles"] .btn:hover:not(:disabled) {
    background: var(--surface-hi);
}
.tool-pane[data-pane="cal-profiles"] .btn:disabled {
    opacity: 0.5; cursor: not-allowed;
}
.tool-pane[data-pane="cal-profiles"] .btn.primary {
    background: var(--accent); border-color: var(--accent);
    color: var(--bg); font-weight: 600;
}
.tool-pane[data-pane="cal-profiles"] .btn.primary:hover:not(:disabled) {
    background: var(--accent); filter: brightness(1.1);
}
.tool-pane[data-pane="cal-profiles"] .btn.danger:hover {
    color: var(--danger); border-color: var(--danger);
}
.tool-pane[data-pane="cal-profiles"] .prof-action-status {
    font-size: 0.72rem; color: var(--text-dim);
    font-style: italic; margin-left: 0.4rem;
}
.tool-pane[data-pane="cal-profiles"] .prof-action-status.ok { color: var(--success); font-style: normal; }
.tool-pane[data-pane="cal-profiles"] .prof-action-status.err { color: var(--danger); font-style: normal; }

/* Live preview pane */
.tool-pane[data-pane="cal-profiles"] .prof-editor-preview {
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.5rem 0.6rem;
    display: flex; flex-direction: column; gap: 0.4rem;
    min-height: 280px;
}
.tool-pane[data-pane="cal-profiles"] .cal-preview-pane-label {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted);
}
.tool-pane[data-pane="cal-profiles"] .cal-svg-wrap {
    flex: 1; display: flex; align-items: center; justify-content: center;
    overflow: auto;
}
.tool-pane[data-pane="cal-profiles"] .cal-svg-wrap svg {
    max-width: 100%; max-height: 100%; height: auto; width: auto;
}
.tool-pane[data-pane="cal-profiles"] .cal-closeup-meta {
    font-size: 0.7rem; color: var(--text-muted);
    border-top: 1px solid var(--border); padding-top: 0.4rem;
}

/* ──────────────────────────────────────────────────────────────
   PDF Extract pane — Wave 6e-D
   ────────────────────────────────────────────────────────────── */
/* PDF-01 Phase 2: every rule below is :is()-scoped to BOTH the PDF
   Extract pane and the standalone Assignment Tool pane, because the
   Assignment Tool mounts the same shared AssignmentCore gallery +
   workspace (assignment_core.js) and so renders the identical .canva-*
   markup. :is(A, B) keeps both args at equal specificity (no change vs
   the original single-pane selector) and stays DRY — a future edit to a
   PDF-extract rule tracks into the Assignment Tool automatically. The
   net-new 3-pane layout + inventory tree rules live in their own block
   below (search "Assignment Tool pane — PDF-01 Phase 2"). */

:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-upload-form {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.9rem 1rem;
    margin: 0.8rem 0;
}
/* Explicit 4-col × 2-row grid: labels on row 1, controls on row 2.
   Use `align-items: stretch` so every control fills its 2rem row cell
   exactly — `align-items: end` made the flex-based custom file input
   sit 3.75px higher than the other controls due to baseline quirks. */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-form-row {
    display: grid;
    grid-template-columns: 280px 180px 170px auto;
    grid-template-rows: auto 2rem;
    gap: 0.3rem 0.8rem;
    align-items: stretch;
    justify-content: start;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-label {
    font-size: 0.78rem; color: var(--text-muted);
    align-self: end;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-form-row > input,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-form-row > select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0 0.55rem;
    border-radius: 4px;
    font-size: 0.82rem;
    height: 2rem;
    line-height: 1.2;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    display: block;
    font-family: inherit;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-form-row > select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%238b90a0' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    padding-right: 1.5rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-form-row > input:focus,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-form-row > select:focus {
    outline: none; border-color: var(--accent);
}
/* Custom file input — native <input type="file"> ignores `height` in
   Firefox, so we wrap it in a label trigger + filename display and
   keep the actual input hidden. Same 2rem height as the text/select
   controls, so the row aligns cleanly. */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-file-input {
    display: flex;
    align-items: stretch;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    height: 2rem;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 0.82rem;
    cursor: pointer;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-file-input:hover { border-color: var(--border-hi); }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-file-input .file-pick {
    background: var(--border);
    color: var(--text);
    padding: 0 0.7rem;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--border-hi);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-file-input .file-name {
    flex: 1;
    padding: 0 0.55rem;
    display: flex;
    align-items: center;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-file-input.has-file .file-name {
    color: var(--text);
}
/* Visually-hide the native file input but keep it in the keyboard tab
   order — `hidden` removes it from the focus chain entirely, which
   makes the picker unreachable without a mouse. */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    pointer-events: none;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-file-input:has(.canva-file-input-hidden:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-form-row > .btn-primary {
    height: 2rem;
    box-sizing: border-box;
    padding: 0 0.9rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .btn-primary[disabled] {
    opacity: 0.5; cursor: not-allowed;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .btn-ghost {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); padding: 0.4rem 0.8rem;
    border-radius: 4px; font-size: 0.8rem; cursor: pointer;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .btn-ghost:hover {
    color: var(--text); border-color: var(--border-hi);
}

/* Status line */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-status {
    min-height: 1.2rem; padding: 0.5rem 0.2rem;
    font-size: 0.82rem; color: var(--text-muted);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-status.busy::before {
    content: "⏳ "; display: inline-block; margin-right: 0.3rem;
    animation: pdf-extract-status-spin 1.6s linear infinite;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-status.ok { color: var(--success); }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-status.warn { color: var(--warning); }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-status.error { color: var(--danger); }

@keyframes pdf-extract-status-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Result panel */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-result {
    margin-top: 0.6rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-result-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin-bottom: 0.6rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-result-header h3 {
    margin: 0; font-size: 0.95rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-result-meta {
    font-weight: normal; font-size: 0.78rem; color: var(--text-muted);
    margin-left: 0.6rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-result-actions {
    display: flex; gap: 0.5rem;
}

/* Thumbnail grid (mirrors the audit.html visual language) */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-thumb {
    background: repeating-conic-gradient(#1a1d28 0% 25%, #14171f 0% 50%) 50% / 14px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem;
    text-align: center;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-thumb .thumb-img {
    display: flex; align-items: center; justify-content: center;
    height: 100px;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-thumb .thumb-img img {
    max-width: 100%; max-height: 100%; display: block;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-thumb .thumb-meta {
    font-size: 0.7rem; color: var(--text-muted);
    margin-top: 0.3rem; line-height: 1.3;
    overflow-wrap: anywhere;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-thumb .thumb-meta .dim {
    color: var(--text-dim);
}

/* ── Assignment Mode (chunk 4/5) ──────────────────────────────── */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-assign {
    margin-top: 0.6rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-assign-header {
    display: flex; align-items: center; gap: 0.8rem;
    flex-wrap: wrap; margin-bottom: 0.6rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-assign-header > :last-child {
    margin-left: auto;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-pill-group {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-pill {
    background: transparent; border: none;
    padding: 0.35rem 0.7rem;
    color: var(--text-muted); font-size: 0.78rem;
    cursor: pointer; font-family: inherit;
    border-right: 1px solid var(--border);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-pill:last-child { border-right: none; }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-pill:hover { color: var(--text); }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-pill.active {
    background: var(--surface-alt);
    color: var(--accent);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-overwrite-label {
    font-size: 0.78rem; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 0.3rem;
    cursor: pointer;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-overwrite-label input { margin: 0; }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-workspace-heading .dim,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-set-card .comp-item .dim {
    color: var(--text-dim); font-weight: normal;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-assign-status {
    min-height: 1.2rem; padding: 0.3rem 0.2rem 0.5rem;
    font-size: 0.82rem; color: var(--text-muted);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-assign-status.ok { color: var(--success); }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-assign-status.warn { color: var(--warning); }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-assign-status.error { color: var(--danger); }

:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-assign-body {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1rem;
    align-items: start;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-assign-gallery {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.7rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-gallery-toolbar {
    display: flex; align-items: center; gap: 0.5rem;
    padding-bottom: 0.5rem; margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-gallery-toolbar .sel-count {
    font-size: 0.8rem; color: var(--text-muted);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-gallery-toolbar .sep {
    flex: 1;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.5rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-tile {
    position: relative;
    background: repeating-conic-gradient(#1a1d28 0% 25%, #14171f 0% 50%) 50% / 12px 12px;
    border: 2px solid var(--border);
    border-radius: 4px;
    padding: 0.3rem;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-tile:hover {
    border-color: var(--border-hi);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-tile.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-tile .tile-img {
    display: flex; align-items: center; justify-content: center;
    height: 80px;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-tile .tile-img img {
    max-width: 100%; max-height: 100%; display: block;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-tile .tile-name {
    font-size: 0.65rem; color: var(--text-dim);
    margin-top: 0.25rem; overflow-wrap: anywhere;
    line-height: 1.2;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-tile .tile-badge {
    position: absolute; top: 4px; right: 4px;
    background: var(--surface-alt);
    color: var(--text);
    font-size: 0.62rem;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
    font-weight: 600;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-tile .tile-badge.kind-board {
    background: rgba(108, 140, 255, 0.18);
    color: var(--accent);
    border-color: var(--accent);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-tile .tile-badge.kind-loose {
    background: rgba(106, 110, 124, 0.18);
    color: var(--text-dim);
    border-color: var(--text-dim);
}
/* Where-used badge (#7c-2b-3) — committed status, top-LEFT (the kind-board
   session badge sits top-right, so the two never overlap). */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-tile .tile-where {
    position: absolute; top: 4px; left: 4px;
    font-size: 0.58rem; font-weight: 700;
    padding: 1px 5px; border-radius: 3px;
    max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-tile .tile-where.free {
    background: rgba(60, 180, 140, 0.18); color: var(--ok, #3cb48c);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-tile .tile-where.used {
    background: rgba(108, 140, 255, 0.18); color: var(--accent-hover, #8da6ff);
}

/* Curated-admission (Gate 1) — Review & Admit screen (#6b) */
.tool-pane[data-pane="assign-tool"] .at-admit-title {
    font-weight: 600; color: var(--text); margin-right: auto;
}
.tool-pane[data-pane="assign-tool"] .at-admit-counts {
    font-size: 0.72rem; color: var(--text-muted); white-space: nowrap;
}
.tool-pane[data-pane="assign-tool"] .at-admit-toolbar {
    display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0.6rem;
}
.tool-pane[data-pane="assign-tool"] .at-admit-hint {
    font-size: 0.7rem; color: var(--text-dim); margin-left: 0.3rem;
}
/* Unselected tiles are dimmed — they won't be admitted. The checkbox + flags
   show selection / dup / already-pooled; the tile itself reuses .canva-tile. */
.tool-pane[data-pane="assign-tool"] .at-admit-grid .canva-tile:not(.selected) {
    opacity: 0.5;
}
.tool-pane[data-pane="assign-tool"] .at-admit-check {
    position: absolute; top: 4px; left: 4px;
    width: 18px; height: 18px; border-radius: 4px;
    border: 1.5px solid var(--border-hi); background: var(--bg);
    color: #fff; font-size: 0.72rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.tool-pane[data-pane="assign-tool"] .canva-tile.selected .at-admit-check {
    background: var(--accent); border-color: var(--accent);
}
.tool-pane[data-pane="assign-tool"] .tile-badge.flag-pool {
    background: rgba(108, 140, 255, 0.18); color: var(--accent); border-color: var(--accent);
}
.tool-pane[data-pane="assign-tool"] .tile-badge.flag-dup {
    background: rgba(229, 165, 75, 0.16); color: var(--warning); border-color: var(--warning);
    top: auto; right: auto; bottom: 4px; left: 4px;
}

/* Workspace — right column */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-assign-workspace {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.7rem;
    min-height: 200px;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-workspace-heading {
    margin: 0 0 0.5rem 0; font-size: 0.85rem; color: var(--text);
    display: flex; align-items: center; justify-content: space-between;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-card {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    background: var(--bg);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-card.active {
    border-color: var(--accent);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-card .board-head {
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.4rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-card .board-name {
    font-weight: 600; font-size: 0.82rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-card .board-count {
    font-size: 0.72rem; color: var(--text-dim);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-card .board-actions {
    margin-left: auto; display: flex; gap: 0.3rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-card .icon-btn {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); font-size: 0.7rem;
    padding: 0.15rem 0.4rem; border-radius: 3px;
    cursor: pointer; font-family: inherit;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-card .icon-btn:hover {
    color: var(--text); border-color: var(--border-hi);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-card .icon-btn.danger:hover {
    color: var(--danger); border-color: var(--danger);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tiles {
    display: flex; flex-direction: column; gap: 0.3rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.4rem;
    row-gap: 0.25rem;
    align-items: center;
    padding: 0.3rem;
    background: var(--surface);
    border-radius: 3px;
    font-size: 0.72rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile img {
    grid-row: 1 / span 2;
    width: 44px; height: 44px; object-fit: contain;
    background: repeating-conic-gradient(#1a1d28 0% 25%, #14171f 0% 50%) 50% / 8px 8px;
    border-radius: 2px;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile .tile-src {
    color: var(--text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile .tile-controls {
    grid-column: 2;
    grid-row: 2;
    display: flex; gap: 0.3rem; min-width: 0;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile .tile-controls > * { min-width: 0; }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile > .icon-btn {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile select,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile input[type="text"] {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.72rem;
    padding: 0 0.3rem;
    height: 1.5rem;
    border-radius: 3px;
    font-family: inherit;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%238b90a0' d='M0 0l4 5 4-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.35rem center;
    padding-right: 1.1rem;
    min-width: 84px;
}
/* ── CE-01 per-board header + three-slot tile inputs + drag handle ── */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-settings {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    margin: -0.4rem -0.5rem 0.4rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-dim);
    flex-wrap: wrap;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-settings.mahjong-hint {
    font-style: italic;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-toggle,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-ext {
    display: inline-flex; align-items: center; gap: 0.35rem;
    cursor: pointer;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-ext select {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.72rem;
    padding: 0.15rem 0.3rem;
    height: 1.5rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-hint {
    font-style: italic;
    font-size: 0.7rem;
    margin-left: auto;
    color: var(--text-muted);
}
/* Drag handle: 4-column grid only on rows that have a handle (versa-tile/custom).
   Mahjong rows keep the original 3-column grid. */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile:has(.tile-drag-handle) {
    grid-template-columns: 14px 44px 1fr auto;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile:has(.tile-drag-handle) > img {
    grid-column: 2;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile:has(.tile-drag-handle) > .tile-src {
    grid-column: 3;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile:has(.tile-drag-handle) > .icon-btn {
    grid-column: 4;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile:has(.tile-drag-handle) > .tile-controls {
    /* CE-01 audit fix #15: was `2 / span 3` which collided with the
       image (col 2, spans rows 1-2) on the left and the ✕ icon-btn
       (col 4, spans rows 1-2) on the right — the prefix slot overlaid
       the thumbnail and the ✕ glyph leaked through behind the .png
       label. Just col 3 (the 1fr column) is the right home — same
       structural position as the original 3-col layout's tile-controls. */
    grid-column: 3;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile .tile-drag-handle {
    grid-column: 1;
    grid-row: 1 / span 2;
    cursor: grab;
    color: var(--text-dim);
    align-self: center;
    user-select: none;
    font-size: 0.85rem;
    letter-spacing: -2px;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile .tile-drag-handle:active { cursor: grabbing; }
/* Three-slot composer */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile .fn-prefix {
    width: 52px; flex: 0 0 auto;
    text-align: center;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile .fn-name {
    flex: 1 1 auto;
    min-width: 0;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-board-tile .fn-ext {
    color: var(--text-dim);
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    align-self: center;
    flex: 0 0 auto;
    user-select: none;
}
/* SortableJS in-flight feedback. Audit fix #14: dropped hardcoded
   accent rgba in favour of opacity-only — matches jobs.js:849 ghost
   convention and follows the accent color via the underlying tile's
   styles if the theme changes. */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .sortable-ghost {
    opacity: 0.4;
}

/* ── Mahjong board card: category header + numbered slots (#7c-2b-MJ) ──
   The slot rows are their OWN flex rows (NOT .canva-board-tile), so the
   versa-tile two-row grid rules above don't apply to them. */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-cat-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: rgba(108,140,255,.10);
    border: 1px solid var(--accent);
    color: var(--accent-hover, #8da6ff);
    font-size: 0.7rem; font-weight: 600;
    padding: 0.1rem 1rem 0.1rem 0.45rem;
    border-radius: 5px;
    font-family: inherit;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%238da6ff' d='M0 0l4 5 4-5z'/></svg>");
    background-repeat: no-repeat; background-position: right 0.35rem center;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-comp {
    font-size: 0.66rem; color: var(--text-dim);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-comp.complete { color: var(--ok, #3cb48c); }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-missing { color: var(--warning, #e5a54b); }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-slots {
    display: flex; flex-direction: column; gap: 0.3rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-slot,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-unplaced-tile {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: 4px;
    font-size: 0.72rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-slot.empty {
    background: transparent; border-style: dashed; color: var(--text-dim);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-slot.drop {
    border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); border-style: solid;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-slot.dragging,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-unplaced-tile.dragging { opacity: 0.4; }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-sn {
    flex: 0 0 30px; text-align: center; font-weight: 700;
    background: var(--surface-hi, #2c3142); border-radius: 4px;
    padding: 0.2rem 0; color: var(--text); font-size: 0.7rem;
    /* Preserve the [N]->image gap the drag handle used to occupy, now that
       the handle moved to the far-left gutter (#7c-2b-3b). */
    margin-right: 0.85rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-slot.empty .mj-sn {
    background: var(--surface-alt, #232734); color: var(--text-dim);
}
/* Left gutter: the drag handle (filled rows) + an inert spacer (empty rows),
   same width so the [N] chips line up across the slot list. */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-slot .tile-drag-handle,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-slot .mj-gutter,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-unplaced-tile .tile-drag-handle {
    flex: 0 0 12px; text-align: center;
    cursor: grab; color: var(--text-dim); user-select: none;
    font-size: 0.85rem; letter-spacing: -2px;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-slot .mj-gutter { cursor: default; }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-slot .tile-drag-handle:active,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-unplaced-tile .tile-drag-handle:active { cursor: grabbing; }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-slot img,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-unplaced-tile img {
    width: 34px; height: 34px; object-fit: contain; border-radius: 3px; flex: 0 0 34px;
    background: repeating-conic-gradient(#1a1d28 0% 25%, #14171f 0% 50%) 50% / 8px 8px;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-slot .tile-src,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-unplaced-tile .tile-src {
    flex: 1 1 auto; min-width: 0; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-empty-lbl {
    flex: 1 1 auto; font-style: italic; font-size: 0.68rem; color: var(--text-dim);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-unplaced {
    border: 1px dashed var(--warning, #e5a54b); border-radius: 5px;
    padding: 0.4rem; margin-bottom: 0.5rem;
    display: flex; flex-direction: column; gap: 0.3rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .mj-unplaced-head {
    font-size: 0.66rem; color: var(--warning, #e5a54b);
}

/* ── ＋ Add existing board picker (#7c-2c) ── */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-addex-panel {
    border: 1px solid var(--border-hi, #3d4358);
    border-radius: 6px; background: var(--surface-hi, #2c3142);
    margin-top: 0.3rem; overflow: hidden;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-addex-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.4rem 0.5rem; font-size: 0.7rem; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-addex-list {
    max-height: 220px; overflow-y: auto; padding: 0.3rem;
    display: flex; flex-direction: column; gap: 0.2rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-addex-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.45rem; border-radius: 4px;
    font-size: 0.74rem; color: var(--text-muted); cursor: pointer;
    border: 1px solid transparent;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-addex-row:hover,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-addex-row:focus {
    background: var(--surface-alt, #232734); color: var(--text);
    border-color: var(--border-hi, #3d4358); outline: none;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-addex-row .addex-name {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-addex-row .addex-ct {
    flex: 0 0 auto; color: var(--text-dim); font-size: 0.66rem;
}

:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-add-board-btn,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-add-set-btn {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    width: 100%;
    margin-top: 0.3rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-add-board-btn:hover,
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-add-set-btn:hover {
    color: var(--text); border-color: var(--border-hi);
}

/* ── MJ Theme bar (#7c-2h) — standalone Boards workspace only ── */
.tool-pane[data-pane="assign-tool"] .canva-theme-bar {
    border: 1px solid var(--accent);
    background: rgba(108, 140, 255, 0.08);
    border-radius: 6px;
    padding: 0.5rem 0.55rem;
    margin-bottom: 0.55rem;
}
.tool-pane[data-pane="assign-tool"] .canva-theme-row {
    display: flex; gap: 0.4rem; align-items: center;
}
.tool-pane[data-pane="assign-tool"] .canva-theme-input {
    flex: 1 1 auto; min-width: 0;
    background: var(--surface-hi, #2c3142);
    border: 1px solid var(--border);
    border-radius: 5px; color: var(--text);
    padding: 0.35rem 0.5rem; font-family: inherit; font-size: 0.78rem;
}
.tool-pane[data-pane="assign-tool"] .canva-theme-input:focus {
    outline: none; border-color: var(--accent);
}
.tool-pane[data-pane="assign-tool"] .canva-theme-apply {
    flex: 0 0 auto;
    background: var(--accent); border: 1px solid var(--accent);
    color: #0c1118; font-weight: 600;
    border-radius: 5px; padding: 0.35rem 0.6rem;
    cursor: pointer; font-family: inherit; font-size: 0.76rem; white-space: nowrap;
}
.tool-pane[data-pane="assign-tool"] .canva-theme-apply:hover {
    background: var(--accent-hover); border-color: var(--accent-hover);
}
.tool-pane[data-pane="assign-tool"] .canva-theme-meta {
    margin-top: 0.4rem; font-size: 0.72rem; color: var(--text-muted);
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.tool-pane[data-pane="assign-tool"] .canva-theme-save {
    flex: 0 0 auto;
    background: rgba(76, 175, 130, 0.14);
    border: 1px solid var(--success);
    color: var(--success); font-weight: 600;
    border-radius: 5px; padding: 0.3rem 0.6rem;
    cursor: pointer; font-family: inherit; font-size: 0.74rem; white-space: nowrap;
}
.tool-pane[data-pane="assign-tool"] .canva-theme-save:hover:not(:disabled) {
    background: rgba(76, 175, 130, 0.24);
}
.tool-pane[data-pane="assign-tool"] .canva-theme-save:disabled {
    opacity: 0.45; cursor: not-allowed;
}
.tool-pane[data-pane="assign-tool"] .canva-theme-ready { font-weight: 700; }
.tool-pane[data-pane="assign-tool"] .canva-theme-ready.ready { color: var(--success); }
.tool-pane[data-pane="assign-tool"] .canva-theme-ready.partial { color: var(--warning); }

/* ── Assignment Tool help walkthrough (#7d) ── */
.tool-pane[data-pane="assign-tool"] h2 .at-help-btn {
    margin-left: 0.5rem; padding: 0;
    width: 1.4rem; height: 1.4rem; line-height: 1.3rem;
    border-radius: 50%;
    border: 1px solid var(--accent);
    background: rgba(108, 140, 255, 0.12);
    color: var(--accent);
    font: 700 0.85rem/1.3rem inherit;
    cursor: pointer; vertical-align: middle; text-align: center;
}
.tool-pane[data-pane="assign-tool"] h2 .at-help-btn:hover {
    background: var(--accent); color: #0c1118;
}
/* `.modal-overlay` forces display:flex, so the [hidden] attribute needs an
   id/class+attr override to actually hide the help popup (same pattern as the
   Sets pills fix). */
.at-help-overlay { z-index: 1000; }
.at-help-overlay[hidden] { display: none; }
.at-help-dialog {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: min(680px, 92vw);
    max-height: 86vh;
    display: flex; flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    text-align: left;
}
.at-help-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
}
.at-help-head h3 { margin: 0; color: var(--text); font-size: 1rem; }
.at-help-close {
    background: transparent; border: none; color: var(--text-muted);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    padding: 0.2rem 0.45rem; border-radius: 4px;
}
.at-help-close:hover { color: var(--text); background: var(--border); }
.at-help-body { padding: 1rem 1.1rem; overflow-y: auto; }
.at-help-zones { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.at-help-zone {
    flex: 1; display: flex; flex-direction: column; gap: 0.15rem;
    text-align: center; padding: 0.55rem 0.4rem;
    border: 1px solid var(--border); border-radius: 7px;
    background: var(--surface-alt, #232734);
}
.at-help-zone .z-n { color: var(--accent); font-weight: 700; }
.at-help-zone b { color: var(--text); font-size: 0.82rem; }
.at-help-zone .z-d { color: var(--text-muted); font-size: 0.68rem; }
.at-help-sec { margin: 0 0 0.9rem; }
.at-help-sec:last-child { margin-bottom: 0; }
.at-help-sec h4 {
    margin: 0 0 0.25rem; color: var(--text); font-size: 0.84rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.at-help-sec p { margin: 0; color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; }
.at-help-sec code {
    background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
    padding: 0 3px; font-size: 0.74rem;
}
.at-help-tag {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 0 0.4rem;
}

/* Set editor card */
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-set-card {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    background: var(--bg);
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-set-card label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0.4rem 0 0.15rem 0;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-set-card input[type="text"],
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-set-card textarea {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 100%; box-sizing: border-box;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.3rem 0.4rem;
    font-size: 0.78rem;
    font-family: inherit;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-set-card textarea { resize: vertical; min-height: 2.5rem; }
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-set-card .comp-list {
    display: flex; flex-direction: column; gap: 0.15rem;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-set-card .comp-item {
    font-size: 0.78rem; color: var(--text-muted);
    display: flex; align-items: center; gap: 0.4rem;
    cursor: pointer;
}
:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-set-card .comp-item input { margin: 0; }

:is(.tool-pane[data-pane="pdf-extract"], .tool-pane[data-pane="assign-tool"]) .canva-empty {
    color: var(--text-dim); font-size: 0.78rem;
    font-style: italic; padding: 1rem 0.5rem; text-align: center;
}

/* ──────────────────────────────────────────────────────────────
   Assignment Tool pane — PDF-01 Phase 2
   Standalone inventory browser. The gallery + workspace styling is
   inherited from the PDF Extract block above (the :is() extension
   scopes every .canva-* rule to this pane too). The rules below add
   ONLY the net-new surface: the 3-pane layout + the inventory tree.
   ────────────────────────────────────────────────────────────── */
.tool-pane[data-pane="assign-tool"] .assign-tool-status {
    min-height: 1.2rem; padding: 0.4rem 0.2rem;
    font-size: 0.82rem; color: var(--text-muted);
}
.tool-pane[data-pane="assign-tool"] .assign-tool-status.ok { color: var(--success); }
.tool-pane[data-pane="assign-tool"] .assign-tool-status.warn { color: var(--warning); }
.tool-pane[data-pane="assign-tool"] .assign-tool-status.error { color: var(--danger); }
.tool-pane[data-pane="assign-tool"] .assign-tool-status.busy::before {
    content: "⏳ "; display: inline-block; margin-right: 0.3rem;
}

/* 3-pane: tree rail | main. The main column's gallery|workspace split
   is handled by the reused .canva-assign-body grid. */
.tool-pane[data-pane="assign-tool"] .assign-tool-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1rem;
    align-items: start;
}
/* min-width:0 lets the 1fr main column shrink instead of being blown out
   by its wide grid descendant (.canva-assign-body), which would otherwise
   push the tree rail off-screen. */
.tool-pane[data-pane="assign-tool"] .assign-main { min-width: 0; }

/* Upload dropzone (Phase 3) — sits atop the tree rail. */
.tool-pane[data-pane="assign-tool"] .assign-upload {
    margin-bottom: 0.6rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.tool-pane[data-pane="assign-tool"] .assign-upload-name {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 4px; padding: 0.35rem 0.5rem; font-size: 0.78rem;
    font-family: inherit; width: 100%; box-sizing: border-box;
}
.tool-pane[data-pane="assign-tool"] .assign-upload-name:focus {
    outline: none; border-color: var(--accent);
}
/* Left-rail search (#7c-2b-5) */
.tool-pane[data-pane="assign-tool"] .assign-tree-search {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 4px; padding: 0.35rem 0.5rem; font-size: 0.78rem;
    font-family: inherit; width: 100%; box-sizing: border-box;
    margin-bottom: 0.5rem;
}
.tool-pane[data-pane="assign-tool"] .assign-tree-search:focus {
    outline: none; border-color: var(--accent);
}
/* + New set affordance in the Boards & sets group header (#7c-2d-2) */
.tool-pane[data-pane="assign-tool"] .assign-newset-btn {
    margin-left: auto; font-size: 0.62rem; font-weight: 600;
    border: 1px solid var(--accent); border-radius: 5px; padding: 1px 6px;
    color: var(--accent); background: rgba(108,140,255,0.10); cursor: pointer;
}
.tool-pane[data-pane="assign-tool"] .assign-newset-btn:hover { background: rgba(108,140,255,0.20); }

/* ── Sets mode (#7c-2d-2): board palette + set workspace ── */
/* The family pills are a .canva-pill-group (display:flex), which overrides the
   UA [hidden]{display:none}; the id+attr selector restores hide-on-[hidden]
   so the pills only show while building a NEW set. */
.tool-pane[data-pane="assign-tool"] #at-sets-family-pills[hidden] { display: none; }
.tool-pane[data-pane="assign-tool"] #at-sets-view-pills[hidden] { display: none; }
.tool-pane[data-pane="assign-tool"] .at-sets-pal-head {
    font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.5rem;
}
.tool-pane[data-pane="assign-tool"] .at-sets-palcat {
    font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase;
    letter-spacing: 0.05em; margin: 0.55rem 0 0.25rem;
}
/* Sets palette category filter pills (#4) */
.tool-pane[data-pane="assign-tool"] .at-sets-palpills {
    display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.45rem;
}
.tool-pane[data-pane="assign-tool"] .at-sets-palpill {
    background: var(--surface-hi, #2c3142); border: 1px solid var(--border);
    color: var(--text-muted); border-radius: 10px;
    padding: 0.12rem 0.5rem; font-size: 0.66rem; cursor: pointer; font-family: inherit;
}
.tool-pane[data-pane="assign-tool"] .at-sets-palpill:hover { color: var(--text); border-color: var(--border-hi); }
.tool-pane[data-pane="assign-tool"] .at-sets-palpill.active {
    background: var(--accent); border-color: var(--accent); color: #0c1118; font-weight: 600;
}
/* #1 (minimal): the standalone Boards workspace is Board-only — Sets have their
   own #at-sets pane and Loose is retired. Hide the dest-type pills (AssignmentCore
   defaults to destType="board") + the → Loose action. The PDF pane is unaffected
   (its pills/buttons use different ids). */
.tool-pane[data-pane="assign-tool"] #at-dest-pills,
.tool-pane[data-pane="assign-tool"] #at-assign-to-loose { display: none; }
.tool-pane[data-pane="assign-tool"] .at-sets-bchip {
    display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.45rem;
    border: 1px solid var(--border); border-radius: 6px; margin-bottom: 0.3rem;
    background: var(--surface);
}
.tool-pane[data-pane="assign-tool"] .at-sets-dh {
    color: var(--text-dim); font-size: 0.8rem; letter-spacing: -2px; cursor: grab;
}
.tool-pane[data-pane="assign-tool"] .at-sets-bmeta { flex: 1; min-width: 0; }
.tool-pane[data-pane="assign-tool"] .at-sets-bn {
    display: block; font-size: 0.78rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-pane[data-pane="assign-tool"] .at-sets-bc { display: block; font-size: 0.62rem; color: var(--text-dim); }
.tool-pane[data-pane="assign-tool"] .at-sets-bc.miss { color: var(--warning); }
.tool-pane[data-pane="assign-tool"] .at-sets-bd {
    flex: 0 0 auto; font-size: 0.56rem; font-weight: 700; padding: 1px 5px; border-radius: 3px;
}
.tool-pane[data-pane="assign-tool"] .at-sets-bd.free { background: rgba(60,180,140,0.18); color: var(--ok); }
.tool-pane[data-pane="assign-tool"] .at-sets-bd.inset { background: rgba(108,140,255,0.20); color: var(--accent-hover); }
/* drag state (#7c-2d-3) */
.tool-pane[data-pane="assign-tool"] .at-sets-bchip[draggable="true"] { cursor: grab; }
.tool-pane[data-pane="assign-tool"] .at-sets-bchip.dragging { opacity: 0.45; }
.tool-pane[data-pane="assign-tool"] .at-sets-bchip.inset-cur { border-color: var(--accent); background: rgba(108,140,255,0.06); }
.tool-pane[data-pane="assign-tool"] .at-sets-slot.drop { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: rgba(108,140,255,0.08); }
/* remove-from-slot ✕ — the global .icon-btn rules are ancestor-scoped to board
   cards / tree, so scope an icon-button style for the set slots (#7c-2d-3). */
.tool-pane[data-pane="assign-tool"] .at-sets-slot .icon-btn {
    flex: 0 0 auto; background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); font-size: 0.7rem; line-height: 1;
    padding: 0.12rem 0.35rem; border-radius: 4px; cursor: pointer; font-family: inherit;
}
.tool-pane[data-pane="assign-tool"] .at-sets-slot .icon-btn:hover { color: var(--text); border-color: var(--border-hi); }
.tool-pane[data-pane="assign-tool"] .at-sets-slot .icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); }
/* freeform list view (#7c-2d-4) */
.tool-pane[data-pane="assign-tool"] .at-sets-listrow .tile-drag-handle { flex: 0 0 auto; cursor: grab; }
.tool-pane[data-pane="assign-tool"] .at-sets-listdrop {
    margin-top: 0.4rem; text-align: center; font-size: 0.7rem; color: var(--text-muted);
    border: 1px dashed var(--border-hi); border-radius: 6px; padding: 0.55rem;
}
.tool-pane[data-pane="assign-tool"] .at-sets-listdrop.drop {
    border-color: var(--accent); color: var(--accent-hover); background: rgba(108,140,255,0.08);
}

.tool-pane[data-pane="assign-tool"] .at-sets-card {
    background: var(--surface-alt); border: 1px solid var(--accent);
    border-radius: 8px; padding: 0.6rem;
}
.tool-pane[data-pane="assign-tool"] .at-sets-shead {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; font-size: 0.82rem;
}
.tool-pane[data-pane="assign-tool"] .at-sets-sn { font-weight: 600; }
.tool-pane[data-pane="assign-tool"] .at-sets-sc { font-size: 0.68rem; color: var(--text-dim); margin-left: auto; }
.tool-pane[data-pane="assign-tool"] .at-sets-slot {
    display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem;
    border: 1px solid var(--border); border-radius: 6px; margin-bottom: 0.3rem; background: var(--surface);
}
.tool-pane[data-pane="assign-tool"] .at-sets-slot.empty {
    background: transparent; border-style: dashed; color: var(--text-dim);
}
.tool-pane[data-pane="assign-tool"] .at-sets-sl {
    flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 5px; background: var(--surface-hi); padding: 2px 0; font-weight: 700;
}
.tool-pane[data-pane="assign-tool"] .at-sets-slot.empty .at-sets-sl { background: var(--surface-alt); }
.tool-pane[data-pane="assign-tool"] .at-sets-sl .n { font-size: 0.66rem; color: var(--text); }
.tool-pane[data-pane="assign-tool"] .at-sets-sl .c { font-size: 0.5rem; color: var(--text-dim); }
.tool-pane[data-pane="assign-tool"] .at-sets-smeta { flex: 1; min-width: 0; }
.tool-pane[data-pane="assign-tool"] .at-sets-sbn {
    display: block; font-size: 0.74rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-pane[data-pane="assign-tool"] .at-sets-ssub { display: block; font-size: 0.6rem; color: var(--text-dim); }
.tool-pane[data-pane="assign-tool"] .at-sets-ssub.miss { color: var(--warning); }
.tool-pane[data-pane="assign-tool"] .at-sets-el { flex: 1; font-size: 0.62rem; font-style: italic; }
.tool-pane[data-pane="assign-tool"] .assign-dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    padding: 0.8rem 0.5rem; text-align: center;
    border: 1px dashed var(--border); border-radius: 6px;
    background: var(--surface); color: var(--text-dim);
    font-size: 0.72rem; cursor: pointer; user-select: none;
}
.tool-pane[data-pane="assign-tool"] .assign-dropzone:hover {
    border-color: var(--border-hi); color: var(--text-muted);
}
.tool-pane[data-pane="assign-tool"] .assign-dropzone.dragover {
    border-color: var(--accent); color: var(--accent);
    background: var(--surface-alt);
}
.tool-pane[data-pane="assign-tool"] .assign-dropzone .dz-icon {
    font-size: 1.1rem; line-height: 1;
}
.tool-pane[data-pane="assign-tool"] .assign-upload-status {
    min-height: 1rem; font-size: 0.72rem; color: var(--text-muted);
    overflow-wrap: anywhere;
}
.tool-pane[data-pane="assign-tool"] .assign-upload-status.ok { color: var(--success); }
.tool-pane[data-pane="assign-tool"] .assign-upload-status.warn { color: var(--warning); }
.tool-pane[data-pane="assign-tool"] .assign-upload-status.error { color: var(--danger); }
.tool-pane[data-pane="assign-tool"] .assign-upload-status.busy::before {
    content: "⏳ "; display: inline-block; margin-right: 0.2rem;
}

/* Inventory tree rail (left column) */
.tool-pane[data-pane="assign-tool"] .assign-tree-rail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem;
    align-self: stretch;
    max-height: 72vh;
    overflow-y: auto;
}
.tool-pane[data-pane="assign-tool"] .assign-tree-group { margin-bottom: 0.7rem; }
.tool-pane[data-pane="assign-tool"] .assign-tree-group-header {
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-dim); font-weight: 600;
    padding: 0.3rem 0.2rem; border-bottom: 1px solid var(--border);
    margin-bottom: 0.3rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.tool-pane[data-pane="assign-tool"] .assign-tree-group-count {
    color: var(--text-dim); font-weight: normal; margin-left: auto;
}
.tool-pane[data-pane="assign-tool"] .assign-tree-fam {
    font-size: 0.66rem; color: var(--text-dim);
    padding: 0.25rem 0.2rem 0.1rem; letter-spacing: 0.02em;
}
.tool-pane[data-pane="assign-tool"] .assign-tree-node {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.4rem; border-radius: 4px;
    font-size: 0.8rem; color: var(--text-muted);
    cursor: pointer; user-select: none;
}
.tool-pane[data-pane="assign-tool"] .assign-tree-node:hover {
    background: var(--surface-alt); color: var(--text);
}
.tool-pane[data-pane="assign-tool"] .assign-tree-node.focused {
    background: var(--surface-alt); color: var(--accent);
    box-shadow: inset 2px 0 0 var(--accent);
}
.tool-pane[data-pane="assign-tool"] .assign-tree-node .node-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-pane[data-pane="assign-tool"] .assign-tree-node .node-count {
    font-size: 0.7rem; color: var(--text-dim);
}
.tool-pane[data-pane="assign-tool"] .assign-tree-node .node-extras {
    font-size: 0.58rem; color: var(--accent);
    border: 1px solid var(--accent); border-radius: 3px;
    padding: 0 4px; line-height: 1.4;
}
/* Type tag (e.g. "set") — muted, distinct from the accent "extras" chip so
   a named set isn't mistaken for an over-8-image capacity warning. */
.tool-pane[data-pane="assign-tool"] .assign-tree-node .node-kind {
    font-size: 0.58rem; color: var(--text-dim);
    border: 1px solid var(--border); border-radius: 3px;
    padding: 0 4px; line-height: 1.4;
}
.tool-pane[data-pane="assign-tool"] .assign-tree-node .node-actions {
    display: none; gap: 0.2rem;
}
.tool-pane[data-pane="assign-tool"] .assign-tree-node:hover .node-actions {
    display: inline-flex;
}
.tool-pane[data-pane="assign-tool"] .assign-tree-node .node-actions .icon-btn {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); font-size: 0.65rem;
    padding: 0 0.25rem; border-radius: 3px; cursor: pointer;
    font-family: inherit;
}
.tool-pane[data-pane="assign-tool"] .assign-tree-node .node-actions .icon-btn:hover {
    color: var(--text); border-color: var(--border-hi);
}
.tool-pane[data-pane="assign-tool"] .assign-tree-empty,
.tool-pane[data-pane="assign-tool"] .assign-tree-loading {
    color: var(--text-dim); font-size: 0.75rem; font-style: italic;
    padding: 0.5rem 0.3rem;
}

/* Main-column guidance state (shown until a node is focused) */
.tool-pane[data-pane="assign-tool"] .assign-main-empty {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
}
.tool-pane[data-pane="assign-tool"] .assign-main-empty strong {
    display: block; color: var(--text-muted); margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

/* ──────────────────────────────────────────────────────────────
   BG Tuner pane — Wave 6e-E
   ────────────────────────────────────────────────────────────── */
.tool-pane[data-pane="bg-tuner"] .bg-tuner-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.9rem 1rem;
    margin: 0.8rem 0;
    max-width: 560px;
}
.tool-pane[data-pane="bg-tuner"] .bg-tuner-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.25rem 0;
    font-size: 0.85rem;
}
.tool-pane[data-pane="bg-tuner"] .bg-tuner-label {
    color: var(--text-muted); width: 60px;
}
.tool-pane[data-pane="bg-tuner"] .bg-tuner-status {
    color: var(--text-dim); font-weight: 600;
    padding: 1px 8px; border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
}
.tool-pane[data-pane="bg-tuner"] .bg-tuner-status.running {
    color: var(--success); border-color: var(--success);
}
.tool-pane[data-pane="bg-tuner"] .bg-tuner-pid { color: var(--text-dim); }
.tool-pane[data-pane="bg-tuner"] .bg-tuner-url { color: var(--accent); text-decoration: none; }
.tool-pane[data-pane="bg-tuner"] .bg-tuner-url:hover { text-decoration: underline; }
.tool-pane[data-pane="bg-tuner"] .bg-tuner-url-placeholder { color: var(--text-dim); }
.tool-pane[data-pane="bg-tuner"] .bg-tuner-actions {
    display: flex; gap: 0.5rem; margin-top: 0.6rem;
}
.tool-pane[data-pane="bg-tuner"] .btn-primary[disabled],
.tool-pane[data-pane="bg-tuner"] .btn-ghost[disabled] {
    opacity: 0.5; cursor: not-allowed;
}
.tool-pane[data-pane="bg-tuner"] .btn-ghost {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); padding: 0.4rem 0.8rem;
    border-radius: 4px; font-size: 0.8rem; cursor: pointer;
    font-family: inherit;
}
.tool-pane[data-pane="bg-tuner"] .btn-ghost:hover {
    color: var(--text); border-color: var(--border-hi);
}
.tool-pane[data-pane="bg-tuner"] .bg-tuner-error {
    min-height: 1.2rem; padding-top: 0.4rem;
    font-size: 0.8rem; color: var(--text-muted);
}
.tool-pane[data-pane="bg-tuner"] .bg-tuner-error.error { color: var(--danger); }

/* ──────────────────────────────────────────────────────────────
   BG Batch pane — Wave 6e-E
   ────────────────────────────────────────────────────────────── */
.tool-pane[data-pane="bg-batch"] .bg-batch-form {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.9rem 1rem;
    margin: 0.8rem 0;
}
.tool-pane[data-pane="bg-batch"] .bg-batch-row {
    display: flex; gap: 0.8rem; align-items: end; flex-wrap: wrap;
}
.tool-pane[data-pane="bg-batch"] .bg-batch-field {
    display: flex; flex-direction: column; gap: 0.3rem;
    font-size: 0.78rem; color: var(--text-muted);
}
.tool-pane[data-pane="bg-batch"] .bg-batch-field input,
.tool-pane[data-pane="bg-batch"] .bg-batch-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0 0.55rem;
    border-radius: 4px;
    font-size: 0.82rem;
    height: 2rem;
    line-height: 1.2;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    display: block;
    font-family: inherit;
    min-width: 180px;
}
.tool-pane[data-pane="bg-batch"] .bg-batch-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%238b90a0' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    padding-right: 1.5rem;
    min-width: 220px;
}
.tool-pane[data-pane="bg-batch"] .bg-batch-field input[type="text"] {
    min-width: 96px; max-width: 120px;
}
.tool-pane[data-pane="bg-batch"] .bg-batch-row .btn-primary {
    height: 2rem; box-sizing: border-box; padding: 0 0.9rem;
}
.tool-pane[data-pane="bg-batch"] .bg-batch-row .btn-primary[disabled] {
    opacity: 0.5; cursor: not-allowed;
}
.tool-pane[data-pane="bg-batch"] .btn-ghost {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); padding: 0.35rem 0.7rem;
    border-radius: 4px; font-size: 0.78rem; cursor: pointer;
    font-family: inherit;
}
.tool-pane[data-pane="bg-batch"] .btn-ghost:hover {
    color: var(--text); border-color: var(--border-hi);
}

.tool-pane[data-pane="bg-batch"] .bg-batch-status {
    min-height: 1.2rem; padding: 0.5rem 0.2rem 0;
    font-size: 0.82rem; color: var(--text-muted);
}
.tool-pane[data-pane="bg-batch"] .bg-batch-status.busy::before {
    content: "⏳ "; display: inline-block; margin-right: 0.3rem;
    animation: pdf-extract-status-spin 1.6s linear infinite;
}
.tool-pane[data-pane="bg-batch"] .bg-batch-status.ok { color: var(--success); }
.tool-pane[data-pane="bg-batch"] .bg-batch-status.warn { color: var(--warning); }
.tool-pane[data-pane="bg-batch"] .bg-batch-status.error { color: var(--danger); }

.tool-pane[data-pane="bg-batch"] .bg-batch-result {
    margin-top: 0.6rem;
}
.tool-pane[data-pane="bg-batch"] .bg-batch-result-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin-bottom: 0.5rem;
}
.tool-pane[data-pane="bg-batch"] .bg-batch-result-header h3 {
    margin: 0; font-size: 0.95rem;
}
.tool-pane[data-pane="bg-batch"] .bg-batch-result-meta {
    font-weight: normal; font-size: 0.78rem; color: var(--text-muted);
    margin-left: 0.6rem;
}

.tool-pane[data-pane="bg-batch"] .bg-file-list {
    display: flex; flex-direction: column; gap: 0.25rem;
    max-height: 60vh; overflow-y: auto;
}
.tool-pane[data-pane="bg-batch"] .bg-file-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    column-gap: 0.6rem;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.78rem;
}
.tool-pane[data-pane="bg-batch"] .bg-file-row.status-running {
    border-color: var(--accent);
}
.tool-pane[data-pane="bg-batch"] .bg-file-row.status-failed {
    border-color: var(--danger);
}
.tool-pane[data-pane="bg-batch"] .bg-file-row.status-done {
    opacity: 0.8;
}
.tool-pane[data-pane="bg-batch"] .bg-file-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
    color: var(--text-dim);
    text-align: center;
}
.tool-pane[data-pane="bg-batch"] .bg-file-badge.running {
    color: var(--accent); border-color: var(--accent);
}
.tool-pane[data-pane="bg-batch"] .bg-file-badge.done {
    color: var(--success); border-color: var(--success);
}
.tool-pane[data-pane="bg-batch"] .bg-file-badge.failed {
    color: var(--danger); border-color: var(--danger);
}
.tool-pane[data-pane="bg-batch"] .bg-file-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-pane[data-pane="bg-batch"] .bg-file-err {
    color: var(--danger); font-size: 0.7rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 360px;
}
.tool-pane[data-pane="bg-batch"] .bg-empty {
    color: var(--text-dim); font-size: 0.78rem;
    font-style: italic; padding: 1rem 0.5rem; text-align: center;
}

/* ──────────────────────────────────────────────────────────────
   CAD Viewer pane — Wave 6e-F chunk 3
   ────────────────────────────────────────────────────────────── */
.tool-pane[data-pane="cad-viewer"] .cad-viewer-status-strip {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.9rem; margin: 0.8rem 0;
    background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 0.82rem;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-status-label {
    color: var(--text-muted);
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-status-pill {
    padding: 1px 8px; border-radius: 3px;
    border: 1px solid var(--border);
    color: var(--text-dim); font-weight: 600;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-status-pill.running {
    color: var(--success); border-color: var(--success);
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-meta {
    color: var(--text-muted);
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-url {
    color: var(--accent); text-decoration: none;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-url:hover {
    text-decoration: underline;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-spacer { flex: 1; }
.tool-pane[data-pane="cad-viewer"] .cad-viewer-error {
    color: var(--danger); font-size: 0.8rem;
    min-height: 1.1rem; margin: 0.3rem 0 0.5rem 0;
}
.tool-pane[data-pane="cad-viewer"] .cad-section-heading {
    margin-top: 1.4rem; font-size: 1rem; font-weight: 600;
    color: var(--text);
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-variants {
    display: grid; gap: 0.7rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin: 0.6rem 0 1rem 0;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 0.7rem 0.85rem;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-card-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 0.25rem;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-card-name {
    font-weight: 600; color: var(--text);
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-card-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem; color: var(--text-muted);
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-card-meta {
    font-size: 0.75rem; color: var(--text-dim);
    margin-bottom: 0.5rem;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-card-tag {
    background: var(--surface-alt);
    padding: 0 6px; border-radius: 3px;
    font-size: 0.7rem; color: var(--text-muted);
    margin-left: 4px;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-card-actions {
    display: flex; gap: 0.4rem;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-loading,
.tool-pane[data-pane="cad-viewer"] .cad-viewer-empty {
    color: var(--text-dim); font-style: italic; padding: 0.5rem 0;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-recent {
    list-style: none; padding: 0; margin: 0.4rem 0;
    font-size: 0.82rem;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-recent li {
    padding: 0.2rem 0;
    border-bottom: 1px dashed var(--border);
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-recent-time {
    color: var(--text-dim); font-size: 0.75rem; margin-left: 0.6rem;
}
.tool-pane[data-pane="cad-viewer"] .cad-viewer-recent-empty {
    color: var(--text-dim); font-style: italic;
    border-bottom: none !important;
}

/* ──────────────────────────────────────────────────────────────
   CAD Jig Instances pane — Wave 6e-F chunk 3
   ────────────────────────────────────────────────────────────── */
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-toolbar {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.5rem 0; margin: 0.8rem 0 0.5rem 0;
    font-size: 0.85rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-filter {
    color: var(--text-muted); cursor: pointer;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-spacer { flex: 1; }
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-status {
    color: var(--text-muted); font-style: italic;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-error {
    color: var(--danger); font-size: 0.8rem; min-height: 1.1rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-form {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 0.9rem 1rem; margin: 0.6rem 0;
    max-width: 640px;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-form h3 {
    margin: 0 0 0.6rem 0; font-size: 0.95rem; font-weight: 600;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-form-grid {
    display: grid; gap: 0.5rem 0.8rem;
    grid-template-columns: 100px 1fr;
    align-items: center;
    font-size: 0.85rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-form-grid label {
    color: var(--text-muted);
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-form-grid input[type="text"],
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-form-grid input[type="number"],
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-form-grid select,
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-form-grid textarea {
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.35rem 0.5rem; color: var(--text);
    font-family: inherit; font-size: 0.85rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-form-grid textarea {
    resize: vertical; min-height: 3rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-preview {
    background: var(--surface);
    border: 1px dashed var(--border); border-radius: 4px;
    padding: 0.6rem 0.8rem; margin-top: 0.8rem;
    font-size: 0.8rem; color: var(--text-muted);
    line-height: 1.6;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-preview code {
    color: var(--text);
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-preview-note {
    color: var(--text-dim); font-size: 0.72rem; font-style: italic;
    margin-top: 0.3rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-form-actions {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    margin-top: 0.8rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-list {
    margin-top: 1rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-group {
    margin-bottom: 1.2rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-group-heading {
    font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.25rem; margin-bottom: 0.4rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-instances {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 0.5rem;
    /* 360px floor (was 280) so the action row fits a download + both exports +
       retire on one line; the rarer 5-chip case (STL *and* STEP downloaded) still
       wraps gracefully via the actions-row flex-wrap. */
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-instance {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 0.6rem 0.8rem;
    font-size: 0.82rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-instance.retired {
    opacity: 0.55;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-instance-header {
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.25rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600; color: var(--text);
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-tag {
    padding: 1px 6px; border-radius: 3px;
    font-size: 0.7rem;
    background: var(--surface-alt); color: var(--text-muted);
    border: 1px solid var(--border);
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-tag.test {
    color: var(--accent); border-color: var(--accent);
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-tag.retired {
    color: var(--text-dim);
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-instance-meta {
    font-size: 0.75rem; color: var(--text-dim);
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-instance-notes {
    margin-top: 0.3rem; color: var(--text-muted);
    font-style: italic; font-size: 0.78rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-instance-actions {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-empty,
.tool-pane[data-pane="cad-jig-instances"] .cad-jig-loading {
    color: var(--text-dim); font-style: italic; padding: 0.6rem 0;
}

/* ──────────────────────────────────────────────────────────────
   CAD Tile Specs pane — Wave 6e-F chunk 5
   ────────────────────────────────────────────────────────────── */
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1rem;
    margin-top: 0.6rem;
    min-height: 400px;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-sidebar {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 0.6rem 0.5rem;
    max-height: 80vh; overflow-y: auto;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-sidebar-header {
    font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted);
    padding: 0.2rem 0.5rem 0.5rem 0.5rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-family-group {
    margin-bottom: 0.7rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-family-heading {
    font-size: 0.78rem; font-weight: 600; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-family-group ul {
    list-style: none; padding: 0; margin: 0;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-list-item {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: 4px; cursor: pointer;
    font-size: 0.82rem;
    transition: background-color 0.1s ease;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-list-item:hover {
    background: var(--surface-alt);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-list-item.active {
    background: var(--surface-alt);
    box-shadow: inset 3px 0 0 var(--accent);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-list-item code {
    flex: 1; color: var(--text);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-code-chip {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem; color: var(--text-muted);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-tag {
    font-size: 0.65rem; padding: 0 5px; border-radius: 3px;
    background: var(--surface-alt); color: var(--text-muted);
    border: 1px solid var(--border);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-tag.derived {
    color: var(--accent); border-color: var(--accent);
}

.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-form {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 1rem 1.1rem;
    max-height: 80vh; overflow-y: auto;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-form-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.6rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-title {
    display: flex; align-items: baseline; gap: 0.6rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-title code {
    font-size: 1.1rem; font-weight: 600; color: var(--text);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-family-badge {
    font-size: 0.7rem; color: var(--text-dim);
    padding: 1px 6px; border-radius: 3px;
    background: var(--surface-alt); border: 1px solid var(--border);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-mode-toggle {
    display: inline-flex; border: 1px solid var(--border);
    border-radius: 4px; overflow: hidden;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-mode-toggle.small {
    margin-left: auto;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-mode-btn,
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-walls-mode-btn {
    background: transparent; color: var(--text-muted);
    border: none; padding: 0.3rem 0.7rem;
    font-size: 0.78rem; cursor: pointer;
    border-right: 1px solid var(--border);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-mode-btn:last-child,
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-walls-mode-btn:last-child {
    border-right: none;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-mode-btn.active,
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-walls-mode-btn.active {
    background: var(--surface-alt); color: var(--text); font-weight: 600;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-banner {
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.5rem 0.7rem; margin: 0.5rem 0;
    font-size: 0.8rem; color: var(--text-muted);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-banner.edit {
    border-color: var(--warning); color: var(--warning);
}

/* ── Overlay awareness banner (DIM-01 Phase 4c) ── */
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-overlay-banner {
    background: linear-gradient(0deg, rgba(108,140,255,0.06), rgba(108,140,255,0.06)), var(--surface);
    border: 1px solid rgba(108,140,255,0.4); border-radius: 6px;
    padding: 0.55rem 0.8rem; margin: 0.5rem 0;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-overlay-line {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-overlay-chip {
    font-size: 0.65rem; font-weight: 700; color: var(--accent);
    background: rgba(108,140,255,0.16); border: 1px solid rgba(108,140,255,0.4);
    border-radius: 10px; padding: 0.05rem 0.5rem; letter-spacing: 0.04em;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-overlay-muted {
    font-size: 0.78rem; color: var(--text-muted);
}
.tool-pane[data-pane="cad-tilespecs"] #ts-overlay-instance {
    padding: 0.25rem 0.45rem; font-size: 0.8rem;
    background: var(--surface-alt); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-overlay-summary {
    font-size: 0.82rem; color: var(--text); font-variant-numeric: tabular-nums;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-overlay-summary b { color: var(--warning); }
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-overlay-summary.base b { color: var(--text-muted); }
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-overlay-spacer { flex: 1; min-width: 0.5rem; }
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-overlay-toggle {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.76rem; color: var(--text-muted); cursor: pointer;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-overlay-manage {
    background: transparent; border: none; color: var(--accent);
    font-size: 0.8rem; cursor: pointer; font-family: inherit; padding: 0;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-overlay-manage:hover { text-decoration: underline; }
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-overlay-note {
    font-size: 0.7rem; color: var(--text-dim); margin-top: 0.3rem;
}
/* Inline "→ effective" overlay annotations on baseline fields. */
.tool-pane[data-pane="cad-tilespecs"] .ts-eff-ann {
    font-size: 0.72rem; color: var(--accent); margin-left: 0.4rem;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tool-pane[data-pane="cad-tilespecs"] .ts-eff-pchip {
    font-size: 0.58rem; color: var(--text-dim);
    border: 1px solid var(--border-hi); border-radius: 6px;
    padding: 0 0.25rem; margin-left: 0.2rem;
}

.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-status {
    color: var(--text-muted); font-size: 0.8rem;
    min-height: 1rem; padding: 0.2rem 0;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-error {
    color: var(--danger); font-size: 0.8rem;
    min-height: 1.1rem; padding: 0.2rem 0;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-section {
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.7rem 0.9rem; margin: 0.7rem 0;
    background: var(--surface);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-section legend {
    color: var(--text-muted); font-size: 0.82rem;
    font-weight: 600; padding: 0 0.4rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-subhead {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.82rem; font-weight: 600;
    color: var(--text-muted);
    margin: 0.6rem 0 0.4rem 0;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-hint {
    font-size: 0.72rem; color: var(--text-dim); font-weight: 400;
    font-style: italic;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-spacer { flex: 1; }
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-grid {
    display: grid; gap: 0.4rem 0.7rem;
    grid-template-columns: 1fr 1fr 1fr;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-grid.cols-2 {
    grid-template-columns: 1fr 1fr;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-grid.cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-grid label {
    display: flex; flex-direction: column; gap: 0.2rem;
    font-size: 0.78rem; color: var(--text-muted);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-grid input {
    background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: 3px;
    padding: 0.3rem 0.5rem; color: var(--text);
    font-family: inherit; font-size: 0.85rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-grid input:disabled {
    color: var(--text-dim); cursor: default;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-derived-footer {
    margin-top: 0.7rem; padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
    font-size: 0.82rem;
}
.tool-pane[data-pane="cad-tilespecs"] .derived-label {
    font-size: 0.72rem; color: var(--text-dim);
    font-style: italic; margin-bottom: 0.3rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-derived-row {
    display: flex; gap: 0.6rem; padding: 0.15rem 0;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-derived-row span {
    color: var(--text-muted); min-width: 110px;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-derived-row code {
    color: var(--text); font-weight: 600;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-matrix {
    width: 100%; border-collapse: collapse;
    font-size: 0.82rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-matrix th {
    text-align: left; font-weight: 600; padding: 0.3rem 0.5rem;
    color: var(--text-muted); font-size: 0.75rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-matrix td {
    padding: 0.25rem 0.4rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-matrix input {
    width: 100%; box-sizing: border-box;
    background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: 3px;
    padding: 0.3rem 0.4rem; color: var(--text);
    font-size: 0.85rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-matrix input:disabled {
    color: var(--text-dim);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-matrix .cad-tilespecs-noop {
    color: var(--text-dim); font-style: italic; text-align: center;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-matrix code {
    color: var(--text); font-weight: 600;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-corner-row {
    display: grid; grid-template-columns: 200px 110px 1fr;
    align-items: center; gap: 0.6rem;
    margin-top: 0.6rem; padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
    font-size: 0.82rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-corner-row label {
    color: var(--text-muted);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-corner-row input {
    background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: 3px;
    padding: 0.3rem 0.5rem; color: var(--text);
    font-size: 0.85rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-corner-hint {
    font-size: 0.78rem; color: var(--text-dim); font-style: italic;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-corner-hint.overridden {
    color: var(--warning); font-style: normal; font-weight: 600;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-usedby {
    list-style: none; padding: 0; margin: 0;
    font-size: 0.82rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-usedby-row {
    display: flex; gap: 0.6rem; padding: 0.3rem 0;
    border-bottom: 1px dashed var(--border);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-usedby-row:last-child {
    border-bottom: none;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-usedby-meta {
    color: var(--text-dim); font-size: 0.75rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-usedby-empty,
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-usedby-loading,
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-empty,
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-loading {
    color: var(--text-dim); font-style: italic; padding: 0.4rem 0;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-actions {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    margin-top: 1rem; padding-top: 0.8rem;
    border-top: 1px solid var(--border);
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-sidebar-actions {
    padding: 0.5rem 0.4rem 0.2rem 0.4rem;
    border-top: 1px solid var(--border); margin-top: 0.4rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-override-hint {
    font-size: 0.7rem; color: var(--text-dim); font-style: italic;
    margin-top: 0.15rem;
}
.tool-pane[data-pane="cad-tilespecs"] .cad-tilespecs-override-hint.overridden {
    color: var(--warning); font-style: normal; font-weight: 600;
}
.tool-pane[data-pane="cad-tilespecs"] label.overridden input {
    border-color: var(--warning) !important;
    box-shadow: inset 2px 0 0 var(--warning);
}
.tool-pane[data-pane="cad-tilespecs"] .ts-revert-btn {
    background: transparent; border: 1px solid var(--border);
    color: var(--warning); padding: 0 6px; margin-left: 0.4rem;
    border-radius: 3px; font-size: 0.7rem; cursor: pointer;
}
.tool-pane[data-pane="cad-tilespecs"] .ts-revert-btn:hover {
    background: var(--surface-alt);
}
.tool-pane[data-pane="cad-tilespecs"] .ts-revert-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
}

/* Cascade modal — shared with future Tile Specs / cascade-aware writes */
.cad-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.cad-modal-backdrop[hidden] { display: none; }
.cad-modal {
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 1.2rem 1.4rem; max-width: 640px; width: 90%;
    max-height: 80vh; overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.cad-modal h3 {
    margin: 0 0 0.6rem 0; font-size: 1.05rem;
    color: var(--warning);
}
.cad-modal-help {
    font-size: 0.85rem; color: var(--text-muted);
    line-height: 1.5; margin: 0.3rem 0;
}
.cad-modal-help-faded {
    color: var(--text-dim); font-size: 0.78rem;
    margin-top: 0.8rem;
}
.cad-cascade-diff {
    background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.6rem 0.8rem; margin: 0.6rem 0;
    font-size: 0.82rem;
}
.cad-cascade-row {
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: 0.6rem; padding: 0.25rem 0;
    border-bottom: 1px dashed var(--border);
}
.cad-cascade-row:last-child { border-bottom: none; }
.cad-cascade-via {
    color: var(--text-dim); font-size: 0.75rem;
}
.cad-cascade-fields {
    color: var(--text-muted); font-size: 0.78rem;
    text-align: right;
}
.cad-modal-actions {
    display: flex; gap: 0.6rem; justify-content: flex-end;
    margin-top: 0.9rem;
}
.btn-warning {
    background: var(--warning); color: #000;
    border: 1px solid var(--warning); border-radius: 4px;
    padding: 0.4rem 0.9rem; font-weight: 600;
    cursor: pointer; font-size: 0.85rem;
}
.btn-warning:hover { filter: brightness(0.92); }
.btn-warning:disabled { opacity: 0.5; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════
   Image Proof pane — Wave 6e-G (chunk 3/5).
   All selectors scoped under .tool-pane[data-pane="proof"] so no
   accidental leakage into other panes.
   ════════════════════════════════════════════════════════════════════ */

.tool-pane[data-pane="proof"] .hidden { display: none !important; }

/* Variant picker row */
.tool-pane[data-pane="proof"] .proof-variant-row {
    display: flex; align-items: center; gap: 0.7rem;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px; padding: 0.5rem 0.85rem;
    font-size: 0.82rem; margin-bottom: 0.6rem; flex-wrap: wrap;
}
.tool-pane[data-pane="proof"] .proof-variant-row label {
    display: flex; align-items: center; gap: 0.4rem;
    color: var(--text-muted); font-size: 0.78rem;
}
.tool-pane[data-pane="proof"] .proof-variant-row select {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); padding: 0.3rem 0.5rem;
    border-radius: 3px; font-size: 0.82rem; font-family: monospace;
}
.tool-pane[data-pane="proof"] .proof-vr-derived {
    font-size: 0.72rem; color: var(--text-muted); font-style: italic;
}
.tool-pane[data-pane="proof"] .proof-vr-derived strong {
    color: var(--text); font-family: monospace; font-style: normal;
}
.tool-pane[data-pane="proof"] .proof-vr-hint {
    margin-left: auto; font-size: 0.66rem;
    color: var(--text-dim); font-style: italic;
}

/* Watermark row */
.tool-pane[data-pane="proof"] .proof-watermark-row {
    display: flex; align-items: center; gap: 0.7rem;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px; padding: 0.5rem 0.85rem;
    font-size: 0.82rem; margin-bottom: 0.6rem; flex-wrap: wrap;
}
.tool-pane[data-pane="proof"] .proof-watermark-row.proof-wm-disabled {
    border-left-color: var(--text-dim); opacity: 0.75;
}
.tool-pane[data-pane="proof"] .proof-wm-checkbox {
    display: flex; align-items: center; gap: 0.4rem;
    color: var(--text); font-size: 0.82rem; cursor: pointer;
}
.tool-pane[data-pane="proof"] .proof-wm-meta {
    font-size: 0.72rem; color: var(--text-muted); font-style: italic;
}
.tool-pane[data-pane="proof"] .proof-wm-meta code {
    background: var(--surface); padding: 1px 5px; border-radius: 3px;
    font-size: 0.68rem; font-style: normal; color: var(--text);
}
.tool-pane[data-pane="proof"] .proof-wm-hint {
    margin-left: auto; font-size: 0.66rem;
    color: var(--text-dim); font-style: italic;
}
.tool-pane[data-pane="proof"] .proof-help-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--border-hi);
    color: var(--text-muted); font-size: 0.62rem;
    font-weight: 700; cursor: help; position: relative;
    user-select: none;
}
.tool-pane[data-pane="proof"] .proof-help-icon:hover,
.tool-pane[data-pane="proof"] .proof-help-icon:focus {
    color: var(--accent); border-color: var(--accent); outline: none;
}
.tool-pane[data-pane="proof"] .proof-help-tooltip {
    display: none; position: absolute; bottom: calc(100% + 6px);
    left: 50%; transform: translateX(-50%);
    background: var(--surface-hi); color: var(--text);
    border: 1px solid var(--border-hi); border-radius: 4px;
    padding: 0.45rem 0.7rem; font-size: 0.7rem; font-weight: 400;
    white-space: nowrap; z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); text-align: left;
}
.tool-pane[data-pane="proof"] .proof-help-icon:hover .proof-help-tooltip,
.tool-pane[data-pane="proof"] .proof-help-icon:focus .proof-help-tooltip {
    display: block;
}
.tool-pane[data-pane="proof"] .proof-help-tooltip code {
    background: var(--bg); padding: 1px 5px; border-radius: 3px;
    font-size: 0.66rem; color: var(--accent);
}

/* Template tabs */
.tool-pane[data-pane="proof"] .proof-template-tabs {
    display: flex; gap: 0.25rem;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.3rem;
}
.tool-pane[data-pane="proof"] .proof-template-tab {
    display: flex; flex-direction: column; gap: 0.15rem;
    flex: 1; padding: 0.55rem 0.85rem;
    background: transparent; border: 1px solid transparent;
    border-radius: 4px; cursor: pointer; text-align: left;
}
.tool-pane[data-pane="proof"] .proof-template-tab:hover {
    background: var(--surface);
}
.tool-pane[data-pane="proof"] .proof-template-tab.active {
    background: var(--surface); border-color: var(--accent);
}
.tool-pane[data-pane="proof"] .proof-t-name {
    font-size: 0.86rem; font-weight: 600; color: var(--text-muted);
}
.tool-pane[data-pane="proof"] .proof-template-tab.active .proof-t-name {
    color: var(--text);
}
.tool-pane[data-pane="proof"] .proof-t-desc {
    font-size: 0.7rem; color: var(--text-dim);
}

/* Config row (per-template) */
.tool-pane[data-pane="proof"] .proof-config-row {
    display: flex; gap: 0.8rem; align-items: end; flex-wrap: wrap;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.7rem 0.85rem;
}
.tool-pane[data-pane="proof"] .proof-config-row label {
    display: flex; flex-direction: column; gap: 0.2rem;
    font-size: 0.72rem; color: var(--text-muted);
}
.tool-pane[data-pane="proof"] .proof-config-row input[type="text"],
.tool-pane[data-pane="proof"] .proof-config-row input[type="number"],
.tool-pane[data-pane="proof"] .proof-config-row select {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); padding: 0.32rem 0.55rem;
    border-radius: 4px; font-size: 0.82rem;
    /* Cancel the global `input, select { margin-bottom: 0.75rem }` rule
       (styles.css line 217). That margin pushes the input ~11px above
       its parent label's bottom, breaking the row's `align-items: end`
       (label bottom would sit 11px below input bottom — Pick buttons
       then look 11px below input bottoms). */
    margin-bottom: 0;
    /* Same reason as the inputs in this row — the global rule sets
       width: 100% on inputs/selects which would stretch them to fill
       their label's column. We want intrinsic-width content. */
    width: auto;
}
/* Same fix for the global `label { margin-bottom: 0.25rem }` so labels
   align tightly to their content. */
.tool-pane[data-pane="proof"] .proof-config-row label {
    margin-bottom: 0;
}
.tool-pane[data-pane="proof"] .proof-config-row input[type="text"] {
    min-width: 200px;
}
.tool-pane[data-pane="proof"] .proof-config-row input[type="number"] {
    width: 70px;
}
.tool-pane[data-pane="proof"] .proof-checkbox-row {
    flex-direction: row !important; align-items: center;
    gap: 0.35rem !important; color: var(--text) !important;
    font-size: 0.78rem !important;
    /* Match the input/select rendered height so when the parent row
       bottom-aligns flex items, the checkbox's visual center coincides
       with the input's visual center (instead of sitting ~7px lower). */
    height: 28px;
}
.tool-pane[data-pane="proof"] .proof-pick-btn {
    background: var(--surface); border: 1px solid var(--accent);
    color: var(--accent); padding: 0.4rem 0.8rem;
    border-radius: 4px; font-size: 0.78rem;
    cursor: pointer; font-weight: 500;
    display: inline-flex; align-items: center; gap: 0.35rem;
    white-space: nowrap;
}

/* Vertical separator between Player 1 + Player 2 control groups in the
   player-card config row. align-self: stretch makes it span the row's
   full vertical content area regardless of label vs button heights.
   2px wide + extended height (negative margin pulls it past the row's
   own padding) for a clean, unmistakable boundary between P1 and P2. */
.tool-pane[data-pane="proof"] .proof-pc-divider {
    width: 2px; background: var(--accent);
    opacity: 0.55;
    align-self: stretch;
    margin: -0.4rem 0.7rem;   /* extend slightly above + below the row's padding */
    flex-shrink: 0;
    border-radius: 1px;
}
.tool-pane[data-pane="proof"] .proof-pick-btn:hover {
    background: var(--surface-hi);
}
.tool-pane[data-pane="proof"] .proof-pick-count {
    font-size: 0.65rem; background: var(--accent); color: white;
    padding: 1px 6px; border-radius: 8px;
    font-variant-numeric: tabular-nums; font-weight: 700;
}

/* Image picker (inline expanding panel) */
.tool-pane[data-pane="proof"] .proof-image-picker {
    background: var(--surface-alt); border: 1px solid var(--accent);
    border-radius: 6px; overflow: hidden;
    display: flex; flex-direction: column;
}
.tool-pane[data-pane="proof"] .proof-ip-header {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--surface-hi); padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border); gap: 0.5rem;
}
.tool-pane[data-pane="proof"] .proof-ip-header h3 {
    font-size: 0.85rem; font-weight: 600; margin: 0;
    color: var(--text); flex: 1;
}
.tool-pane[data-pane="proof"] .proof-ip-tally {
    color: var(--text-muted); font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.tool-pane[data-pane="proof"] .proof-ip-tally.ok {
    color: var(--success); font-weight: 600;
}
.tool-pane[data-pane="proof"] .proof-ip-close {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); width: 24px; height: 24px;
    border-radius: 4px; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; line-height: 1;
}
.tool-pane[data-pane="proof"] .proof-ip-close:hover {
    color: var(--text); border-color: var(--border-hi);
}
.tool-pane[data-pane="proof"] .proof-ip-mix-banner {
    background: rgba(108, 140, 255, 0.1);
    border-bottom: 1px solid var(--border);
    padding: 0.4rem 0.85rem; font-size: 0.74rem;
    color: var(--text-muted);
    display: flex; align-items: center; gap: 0.4rem;
}
.tool-pane[data-pane="proof"] .proof-ip-mix-banner strong {
    color: var(--text);
}

.tool-pane[data-pane="proof"] .proof-ip-body {
    display: grid; grid-template-columns: 220px 1fr 260px;
    gap: 0; min-height: 340px;
}
.tool-pane[data-pane="proof"] .proof-ip-sources {
    background: var(--surface); border-right: 1px solid var(--border);
    padding: 0.5rem; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.tool-pane[data-pane="proof"] .proof-ip-search {
    width: 100%; background: var(--surface-alt);
    border: 1px solid var(--border); color: var(--text);
    padding: 0.3rem 0.5rem; border-radius: 4px;
    font-size: 0.74rem; margin-bottom: 0.3rem;
}
.tool-pane[data-pane="proof"] .proof-ip-source-list {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.tool-pane[data-pane="proof"] .proof-ip-source-group {
    font-size: 0.6rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-dim);
    padding: 0.4rem 0.5rem 0.15rem; font-weight: 600;
}
.tool-pane[data-pane="proof"] .proof-ip-source {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem; background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: 3px;
    font-size: 0.76rem; cursor: pointer; color: var(--text-muted);
}
.tool-pane[data-pane="proof"] .proof-ip-source-label {
    flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.tool-pane[data-pane="proof"] .proof-ip-source-add {
    flex-shrink: 0; width: 20px; height: 20px; padding: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); border-radius: 4px; cursor: pointer;
    font-size: 0.9rem; font-weight: 700;
}
.tool-pane[data-pane="proof"] .proof-ip-source-add:hover {
    color: var(--accent); border-color: var(--accent);
    background: var(--surface-hi);
}
.tool-pane[data-pane="proof"] .proof-ip-source-add.added {
    color: var(--success); border-color: var(--success); cursor: default;
}
.tool-pane[data-pane="proof"] .proof-ip-source:hover {
    color: var(--text); border-color: var(--border-hi);
}
.tool-pane[data-pane="proof"] .proof-ip-source.active {
    color: var(--text); border-color: var(--accent);
    background: var(--surface-hi);
}
.tool-pane[data-pane="proof"] .proof-ip-source-count {
    font-size: 0.65rem; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.tool-pane[data-pane="proof"] .proof-ip-source-selected {
    font-size: 0.6rem; padding: 1px 5px; border-radius: 8px;
    background: var(--success); color: white;
    font-variant-numeric: tabular-nums; font-weight: 700;
    margin-right: 0.25rem;
}

.tool-pane[data-pane="proof"] .proof-ip-gallery {
    background: var(--surface); padding: 0.6rem; overflow-y: auto;
}
.tool-pane[data-pane="proof"] .proof-ip-gallery-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.74rem; color: var(--text-muted); flex-wrap: wrap;
    gap: 0.4rem;
}
.tool-pane[data-pane="proof"] .proof-ip-gallery-header strong {
    color: var(--success);
}
.tool-pane[data-pane="proof"] .proof-ip-bulk-actions {
    display: flex; gap: 0.4rem;
}
.tool-pane[data-pane="proof"] .proof-ip-bulk {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); padding: 2px 8px;
    border-radius: 3px; font-size: 0.7rem; cursor: pointer;
}
.tool-pane[data-pane="proof"] .proof-ip-bulk:hover {
    color: var(--accent); border-color: var(--accent);
}
.tool-pane[data-pane="proof"] .proof-ip-tile-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem;
}
.tool-pane[data-pane="proof"] .proof-ip-tile {
    aspect-ratio: 1; border-radius: 4px;
    border: 2px solid transparent; position: relative;
    cursor: pointer; user-select: none;
    background: var(--surface-alt); overflow: hidden;
}
.tool-pane[data-pane="proof"] .proof-ip-tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.tool-pane[data-pane="proof"] .proof-ip-tile:hover {
    border-color: var(--accent);
}
.tool-pane[data-pane="proof"] .proof-ip-tile.selected {
    border-color: var(--success);
    box-shadow: 0 0 0 1px var(--success);
}
.tool-pane[data-pane="proof"] .proof-ip-tile.selected::after {
    content: "✓"; position: absolute; top: 2px; right: 4px;
    color: var(--success); font-size: 0.85rem; font-weight: 900;
    background: white; border-radius: 50%;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.tool-pane[data-pane="proof"] .proof-ip-tile-name {
    position: absolute; bottom: 2px; left: 2px; right: 2px;
    background: rgba(0,0,0,0.6); color: white;
    font-size: 0.62rem; padding: 1px 4px; border-radius: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-pane[data-pane="proof"] .proof-ip-empty {
    color: var(--text-dim); font-style: italic;
    padding: 1rem 0.5rem; text-align: center; font-size: 0.72rem;
    grid-column: 1 / -1;
}

.tool-pane[data-pane="proof"] .proof-ip-selected-list {
    background: var(--surface); border-left: 1px solid var(--border);
    padding: 0.6rem; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.3rem;
}
.tool-pane[data-pane="proof"] .proof-ip-selected-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.4rem;
}
.tool-pane[data-pane="proof"] .proof-ip-selected-list h4 {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted);
    margin: 0;
}
.tool-pane[data-pane="proof"] .proof-ip-clear-all {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); font-size: 0.64rem; line-height: 1;
    padding: 0.2rem 0.5rem; border-radius: 4px; cursor: pointer;
    white-space: nowrap; flex-shrink: 0;
}
.tool-pane[data-pane="proof"] .proof-ip-clear-all:hover {
    color: var(--danger); border-color: var(--danger);
}
.tool-pane[data-pane="proof"] .proof-ip-selected-row {
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.45rem; background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: 3px;
    font-size: 0.72rem;
}
.tool-pane[data-pane="proof"] .proof-ip-sel-handle {
    cursor: grab; color: var(--text-dim); font-size: 0.95rem;
    line-height: 1; user-select: none; flex-shrink: 0;
}
.tool-pane[data-pane="proof"] .proof-ip-sel-handle:active { cursor: grabbing; }
.tool-pane[data-pane="proof"] .proof-ip-selected-row.sortable-ghost {
    opacity: 0.4;
}
.tool-pane[data-pane="proof"] .proof-ip-sel-num {
    color: var(--text-dim); font-size: 0.7rem;
    font-variant-numeric: tabular-nums; min-width: 1.4rem;
}
.tool-pane[data-pane="proof"] .proof-ip-sel-name {
    flex: 1; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-pane[data-pane="proof"] .proof-ip-sel-remove {
    background: transparent; border: none; color: var(--text-dim);
    cursor: pointer; padding: 0 4px; font-size: 0.9rem;
}
.tool-pane[data-pane="proof"] .proof-ip-sel-remove:hover {
    color: var(--danger);
}
.tool-pane[data-pane="proof"] .proof-mj-cat-select,
.tool-pane[data-pane="proof"] .proof-mj-suf-select {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); border-radius: 3px;
    font-size: 0.66rem; padding: 1px 3px;
}
.tool-pane[data-pane="proof"] .proof-mj-suf-select { width: 56px; }
.tool-pane[data-pane="proof"] .proof-ip-selected-empty {
    color: var(--text-dim); font-style: italic;
    padding: 1rem 0.5rem; text-align: center; font-size: 0.72rem;
}
.tool-pane[data-pane="proof"] .proof-ip-selected-status {
    padding: 0.4rem 0.5rem;
    border-radius: 3px; margin-top: 0.3rem;
    font-size: 0.7rem; border: 1px solid;
}
.tool-pane[data-pane="proof"] .proof-ip-selected-status.ok {
    background: rgba(40, 167, 69, 0.08);
    border-color: var(--success); color: var(--success);
}
.tool-pane[data-pane="proof"] .proof-ip-selected-status.warn {
    background: rgba(255, 200, 87, 0.08);
    border-color: var(--warning); color: var(--warning);
}

.tool-pane[data-pane="proof"] .proof-ip-footer {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--surface-hi); padding: 0.6rem 0.85rem;
    border-top: 1px solid var(--border); gap: 0.5rem;
}
.tool-pane[data-pane="proof"] .proof-ip-hint {
    font-size: 0.72rem; color: var(--text-dim); font-style: italic;
}
.tool-pane[data-pane="proof"] .proof-ip-buttons {
    display: flex; gap: 0.4rem;
}

/* Preview area */
.tool-pane[data-pane="proof"] .proof-preview-wrap {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; padding: 1rem; overflow-x: auto;
    position: relative;
}
.tool-pane[data-pane="proof"] .proof-preview-watermark {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 5;
    opacity: 0; transition: opacity 0.15s;
}
.tool-pane[data-pane="proof"] .proof-preview-wrap.proof-wm-on .proof-preview-watermark {
    opacity: 1;
}
.tool-pane[data-pane="proof"] .proof-preview-canvas {
    background: white; border-radius: 4px;
    padding: 1.5rem; min-height: 280px;
    margin: 0 auto; max-width: 900px;
    color: #1a1a1a;
    position: relative; z-index: 1;
}
.tool-pane[data-pane="proof"] .proof-preview-title {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    color: #6db1d3; font-size: 1.8rem; font-weight: 900;
    text-align: center; letter-spacing: 0.08em;
    margin: 0 0 0.9rem;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.06);
}
.tool-pane[data-pane="proof"] .proof-preview-empty {
    color: rgba(0,0,0,0.5); font-style: italic;
    text-align: center; padding: 2rem;
}

/* Mahjong preview */
.tool-pane[data-pane="proof"] .proof-mj-card {
    display: flex; flex-direction: column; gap: 5px;
}
.tool-pane[data-pane="proof"] .proof-mj-row {
    display: flex; align-items: center; gap: 5px;
}
.tool-pane[data-pane="proof"] .proof-mj-tiles {
    display: grid; grid-template-columns: repeat(9, 1fr);
    gap: 4px; flex: 1;
}
.tool-pane[data-pane="proof"] .proof-mj-cell {
    aspect-ratio: 3/4; background: white;
    border: 1.5px solid #888; border-radius: 4px;
    position: relative; overflow: hidden;
}
.tool-pane[data-pane="proof"] .proof-mj-cell.proof-cell-empty {
    border-color: transparent; background: transparent;
}
.tool-pane[data-pane="proof"] .proof-mj-x4 {
    font-size: 0.85rem; font-weight: 600; color: #555;
    min-width: 36px; text-align: left; padding-left: 6px;
}

/* Player card preview */
.tool-pane[data-pane="proof"] .proof-pc-card {
    display: flex; flex-direction: column; gap: 1.5rem; padding: 0.5rem 0;
}
.tool-pane[data-pane="proof"] .proof-pc-player {
    display: flex; flex-direction: column; gap: 0.8rem; align-items: center;
}
.tool-pane[data-pane="proof"] .proof-pc-header {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 2rem; font-weight: 900;
    color: #1a1a1a; letter-spacing: 0.04em;
}
.tool-pane[data-pane="proof"] .proof-pc-row {
    display: grid; grid-template-columns: repeat(8, 1fr);
    gap: 0.5rem; width: 90%; max-width: 720px;
}
.tool-pane[data-pane="proof"] .proof-pc-cell {
    aspect-ratio: 1; background: var(--surface-alt);
    border-radius: 6px; position: relative; overflow: hidden;
}

/* Numbered grid preview */
.tool-pane[data-pane="proof"] .proof-ng-grid {
    display: grid; gap: 0; border: 2px solid #555;
}
.tool-pane[data-pane="proof"] .proof-ng-cell {
    aspect-ratio: 1; background: white;
    border: 1px solid #888; position: relative; overflow: hidden;
}

/* Gradient placeholders for unpicked cells (numbered, mahjong, player) */
.tool-pane[data-pane="proof"] .proof-ng-cell:not(.picked),
.tool-pane[data-pane="proof"] .proof-mj-cell:not(.picked):not(.proof-cell-empty),
.tool-pane[data-pane="proof"] .proof-pc-cell:not(.picked) {
    background-image:
        linear-gradient(135deg,
            rgba(255,255,255,0.85),
            rgba(220,220,230,0.85)),
        linear-gradient(45deg, #94a3b8 25%, #cbd5e1 50%, #e2e8f0 75%);
}
.tool-pane[data-pane="proof"] [data-seed="0"] { --thumb-c1:#fda4af; --thumb-c2:#f9a8d4; --thumb-c3:#fbcfe8; }
.tool-pane[data-pane="proof"] [data-seed="1"] { --thumb-c1:#c4b5fd; --thumb-c2:#a78bfa; --thumb-c3:#ddd6fe; }
.tool-pane[data-pane="proof"] [data-seed="2"] { --thumb-c1:#6ee7b7; --thumb-c2:#34d399; --thumb-c3:#a7f3d0; }
.tool-pane[data-pane="proof"] [data-seed="3"] { --thumb-c1:#93c5fd; --thumb-c2:#60a5fa; --thumb-c3:#bfdbfe; }
.tool-pane[data-pane="proof"] [data-seed="4"] { --thumb-c1:#fcd34d; --thumb-c2:#fbbf24; --thumb-c3:#fde68a; }
.tool-pane[data-pane="proof"] [data-seed="5"] { --thumb-c1:#f87171; --thumb-c2:#ef4444; --thumb-c3:#fecaca; }
.tool-pane[data-pane="proof"] [data-seed="6"] { --thumb-c1:#a78bfa; --thumb-c2:#8b5cf6; --thumb-c3:#ddd6fe; }
.tool-pane[data-pane="proof"] [data-seed="7"] { --thumb-c1:#5eead4; --thumb-c2:#2dd4bf; --thumb-c3:#99f6e4; }
/* Numbered Grid only: per-cell colored seed gradients (the "choose
   from a palette" UX). Mahjong + Player Card cells stay on the
   neutral gradient base above — those preview real tile artwork
   where colorful placeholders would be visually noisy + wouldn't
   match the actual print output's white-tile aesthetic. */
.tool-pane[data-pane="proof"] .proof-ng-cell[data-seed]:not(.picked) {
    background-image:
        linear-gradient(135deg,
            rgba(255,255,255,0.85),
            rgba(220,220,230,0.85)),
        linear-gradient(45deg,
            var(--thumb-c1) 25%,
            var(--thumb-c2) 50%,
            var(--thumb-c3) 75%);
}

/* Real <img> in picked cell */
.tool-pane[data-pane="proof"] .proof-ng-cell.picked img,
.tool-pane[data-pane="proof"] .proof-mj-cell.picked img,
.tool-pane[data-pane="proof"] .proof-pc-cell.picked img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

.tool-pane[data-pane="proof"] .proof-cell-num {
    position: absolute; top: 3px; left: 5px;
    font-size: 0.72rem; font-weight: 700; color: #1a1a1a;
    background: rgba(255,255,255,0.92); padding: 1px 5px;
    border-radius: 3px; z-index: 2;
}
/* Glyph-style label for mahjong row 4 (winds / dragons / flowers), the
   optional dedicated flowers row (flowers_count > 2), and the jokers row
   (joker stars). Top-left badge to match the row-1-3 numbered
   placeholders, so the placeholder labels feel consistent across every
   row (5 normally, 6 when flowers spill into their own row). */
.tool-pane[data-pane="proof"] .proof-cell-glyph {
    position: absolute; top: 3px; left: 5px;
    font-size: 0.72rem; font-weight: 700; color: #1a1a1a;
    background: rgba(255,255,255,0.92); padding: 1px 5px;
    border-radius: 3px; z-index: 2;
}

/* Output row */
.tool-pane[data-pane="proof"] .proof-output-row {
    display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.7rem 0.85rem;
}
.tool-pane[data-pane="proof"] .proof-output-row label {
    display: flex; flex-direction: column; gap: 0.2rem;
    font-size: 0.72rem; color: var(--text-muted);
}
.tool-pane[data-pane="proof"] .proof-output-row input[type="text"] {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); padding: 0.32rem 0.55rem;
    border-radius: 4px; font-size: 0.82rem; min-width: 280px;
}
.tool-pane[data-pane="proof"] .proof-generate-status {
    font-size: 0.75rem; padding: 0.3rem 0.6rem;
}
.tool-pane[data-pane="proof"] .proof-status-error  { color: var(--danger); }
.tool-pane[data-pane="proof"] .proof-status-success { color: var(--success); }
.tool-pane[data-pane="proof"] .proof-status-info   { color: var(--text-muted); }

/* Customer selections */
.tool-pane[data-pane="proof"] .proof-customer-selections {
    background: var(--surface-alt); border: 1px solid var(--accent);
    border-left-width: 3px; border-radius: 4px;
    padding: 0.8rem 0.95rem;
}
.tool-pane[data-pane="proof"] .proof-customer-selections.proof-cs-pending {
    border-left-color: var(--text-dim);
    opacity: 0.75;
}
.tool-pane[data-pane="proof"] .proof-cs-action:disabled,
.tool-pane[data-pane="proof"] .proof-customer-selections input:disabled {
    cursor: not-allowed; opacity: 0.55;
}
.tool-pane[data-pane="proof"] .proof-customer-selections h3 {
    font-size: 0.78rem; font-weight: 600; margin: 0 0 0.3rem;
    color: var(--text);
    display: flex; align-items: center; gap: 0.5rem;
}
.tool-pane[data-pane="proof"] .proof-cs-badge {
    font-size: 0.6rem; padding: 1px 6px; border-radius: 8px;
    background: var(--accent); color: white;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
}
.tool-pane[data-pane="proof"] .proof-cs-help {
    font-size: 0.75rem; color: var(--text-muted); margin: 0 0 0.65rem;
}
.tool-pane[data-pane="proof"] .proof-cs-input-row {
    display: flex; gap: 0.7rem; align-items: end; flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.tool-pane[data-pane="proof"] .proof-cs-input-row label {
    display: flex; flex-direction: column; gap: 0.2rem;
    font-size: 0.7rem; color: var(--text-muted);
    flex: 1; min-width: 280px;
}
.tool-pane[data-pane="proof"] .proof-cs-input-row input[type="text"] {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); padding: 0.4rem 0.6rem;
    border-radius: 4px; font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.tool-pane[data-pane="proof"] .proof-cs-resolved {
    font-size: 0.78rem; color: var(--success); font-weight: 500;
    white-space: nowrap; padding: 0.4rem 0.5rem;
}
.tool-pane[data-pane="proof"] .proof-cs-resolved.error { color: var(--danger); }
.tool-pane[data-pane="proof"] .proof-cs-actions {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.tool-pane[data-pane="proof"] .proof-cs-action {
    flex: 1; min-width: 180px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.7rem 0.85rem;
    text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.tool-pane[data-pane="proof"] .proof-cs-action:hover {
    background: var(--surface-hi); border-color: var(--accent);
}
.tool-pane[data-pane="proof"] .proof-cs-action.primary {
    border-color: var(--accent);
}
.tool-pane[data-pane="proof"] .proof-cs-action.primary:hover {
    background: rgba(108, 140, 255, 0.1);
}
.tool-pane[data-pane="proof"] .proof-ca-letter {
    font-size: 0.6rem; padding: 1px 6px; border-radius: 8px;
    background: var(--accent); color: white;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
    align-self: flex-start;
}
.tool-pane[data-pane="proof"] .proof-cs-action.primary .proof-ca-letter {
    background: var(--success);
}
.tool-pane[data-pane="proof"] .proof-ca-name {
    font-size: 0.82rem; font-weight: 600; color: var(--text);
}
.tool-pane[data-pane="proof"] .proof-ca-desc {
    font-size: 0.7rem; color: var(--text-muted); line-height: 1.4;
}
.tool-pane[data-pane="proof"] .proof-ca-desc code {
    font-size: 0.66rem; background: var(--surface-alt);
    padding: 1px 4px; border-radius: 2px;
}

/* Recent proofs */
.tool-pane[data-pane="proof"] .proof-recent-proofs {
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.7rem 0.85rem;
}
.tool-pane[data-pane="proof"] .proof-recent-proofs h3 {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
    margin: 0 0 0.5rem;
}
.tool-pane[data-pane="proof"] .proof-recent-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.35rem 0.55rem; background: var(--surface);
    border-radius: 3px; font-size: 0.78rem; margin-bottom: 0.2rem;
}
.tool-pane[data-pane="proof"] .proof-recent-name {
    color: var(--text); font-weight: 500;
}
.tool-pane[data-pane="proof"] .proof-recent-meta {
    color: var(--text-dim); font-size: 0.7rem;
}
.tool-pane[data-pane="proof"] .proof-recent-empty {
    color: var(--text-dim); font-size: 0.78rem;
    font-style: italic; padding: 0.5rem; margin: 0;
}
.tool-pane[data-pane="proof"] .proof-recent-actions {
    display: flex; gap: 0.3rem;
}

/* ─────────────────────────────────────────────────────────────────
   App Settings pane (Wave 6e-H).
   All selectors scoped under .tool-pane[data-pane="app-settings"]
   so we don't bleed into adjacent tool panes (the global input +
   label rules apply by default; we override here as needed).
   ───────────────────────────────────────────────────────────────── */

.tool-pane[data-pane="app-settings"] [hidden] { display: none !important; }

.tool-pane[data-pane="app-settings"] .settings-storage-info {
    background: rgba(108, 140, 255, 0.06);
    border: 1px solid var(--accent);
    border-left-width: 3px;
    border-radius: 4px;
    padding: 0.55rem 0.85rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.tool-pane[data-pane="app-settings"] .settings-storage-info code {
    background: var(--surface);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.74rem;
    color: var(--text);
}
.tool-pane[data-pane="app-settings"] .settings-storage-info em {
    font-style: normal;
    background: var(--surface-hi);
    color: var(--text);
    padding: 0 5px;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
}

.tool-pane[data-pane="app-settings"] .settings-loading {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
    padding: 1rem 0;
}

.tool-pane[data-pane="app-settings"] .settings-error {
    background: rgba(255, 80, 80, 0.08);
    border: 1px solid #ff5050;
    border-left-width: 3px;
    color: var(--text);
    font-size: 0.8rem;
    padding: 0.55rem 0.85rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}
.tool-pane[data-pane="app-settings"] .settings-error.success {
    background: rgba(80, 200, 120, 0.08);
    border-color: #4caf50;
}

.tool-pane[data-pane="app-settings"] .settings-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    /* Make settings-body its OWN scroll container so the sticky save-bar
       inside can pin to the visible top edge. The outer .tool-content
       has overflow:auto but never actually scrolls (the document body
       scrolls instead), which breaks position:sticky for descendants.
       The min() floor at 200px keeps the scroll area visible on tiny
       viewports where the calc() would otherwise collapse to zero. */
    max-height: max(200px, calc(100vh - 240px));
    overflow-y: auto;
    padding-right: 0.4rem;   /* avoid scrollbar covering tags */
}

.tool-pane[data-pane="app-settings"] .settings-section {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.9rem 1rem;
}
.tool-pane[data-pane="app-settings"] .settings-section h3 {
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tool-pane[data-pane="app-settings"] .settings-section h3 .h3-hint {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-style: italic;
}
.tool-pane[data-pane="app-settings"] .settings-section .settings-help {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin: 0 0 0.6rem;
}
.tool-pane[data-pane="app-settings"] .settings-section .settings-help code {
    background: var(--surface);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.7rem;
}

/* CAL-15: "?" help button + click-toggle popover + live scale readout. */
.tool-pane[data-pane="app-settings"] .settings-help-btn {
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}
.tool-pane[data-pane="app-settings"] .settings-help-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.tool-pane[data-pane="app-settings"] .settings-help-popover[hidden] { display: none; }
.tool-pane[data-pane="app-settings"] .settings-help-popover {
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    margin: 0 0 0.7rem;
    max-width: 640px;
}
.tool-pane[data-pane="app-settings"] .settings-help-popover ol {
    margin: 0.3rem 0 0.3rem 1.1rem;
    padding: 0;
}
.tool-pane[data-pane="app-settings"] .settings-help-popover code {
    background: var(--surface-hi);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.7rem;
}
.tool-pane[data-pane="app-settings"] .settings-readout {
    font-family: var(--font-mono, monospace);
    color: var(--accent);
    font-weight: 600;
}

/* Future-stub sections: dimmer, no rows. The "future" pill sits on the
   same row as the h3, right-aligned (mirrors the mockup). */
.tool-pane[data-pane="app-settings"] .settings-section.settings-future {
    opacity: 0.55;
}
.tool-pane[data-pane="app-settings"] .settings-section.settings-future h3::after {
    content: "future";
    font-size: 0.58rem;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--surface-hi);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    margin-left: auto;
}

/* Setting rows — 3-column grid: label / input / tag+reset. The reset
   button collapses into the tag area to keep the grid stable when
   absent. */
.tool-pane[data-pane="app-settings"] .setting-row {
    display: grid;
    grid-template-columns: 220px 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border);
}
.tool-pane[data-pane="app-settings"] .setting-row:last-child {
    border-bottom: none;
}

.tool-pane[data-pane="app-settings"] .setting-row .setting-label {
    font-size: 0.84rem;
    color: var(--text);
    font-weight: 500;
    /* Defeat the global `label { margin-bottom: 0.25rem }` rule —
       setting-label is a span here but the descendant may otherwise
       inherit spacing from list layouts. */
    margin: 0;
}
.tool-pane[data-pane="app-settings"] .setting-row .setting-desc {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 2px;
}

.tool-pane[data-pane="app-settings"] .setting-row input[type="text"],
.tool-pane[data-pane="app-settings"] .setting-row input[type="number"],
.tool-pane[data-pane="app-settings"] .setting-row select {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.4rem 0.55rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    width: 100%;
    /* Defeat the global `input { margin-bottom: 0.75rem }` so rows align. */
    margin: 0;
}
.tool-pane[data-pane="app-settings"] .setting-row input:focus,
.tool-pane[data-pane="app-settings"] .setting-row select:focus {
    border-color: var(--accent);
    outline: none;
}
.tool-pane[data-pane="app-settings"] .setting-row input[readonly] {
    opacity: 0.65;
    cursor: default;
    background: var(--surface-alt);
}
.tool-pane[data-pane="app-settings"] .setting-row input:disabled,
.tool-pane[data-pane="app-settings"] .setting-row select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--surface-alt);
}

.tool-pane[data-pane="app-settings"] .setting-row .default-tag {
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 8px;
    background: var(--surface-hi);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    white-space: nowrap;
}
.tool-pane[data-pane="app-settings"] .setting-row .default-tag.modified {
    background: #c8a04d;       /* amber, not the destructive red */
    color: #1a1a1a;
}
.tool-pane[data-pane="app-settings"] .setting-row .default-tag.env-tag {
    background: var(--accent);
    color: white;
    cursor: help;
}

.tool-pane[data-pane="app-settings"] .setting-row .reset-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.7rem;
    /* Defeat the global button margin. */
    margin: 0;
}
.tool-pane[data-pane="app-settings"] .setting-row .reset-btn:hover {
    color: var(--text);
    border-color: var(--border-hi);
}
.tool-pane[data-pane="app-settings"] .setting-row .reset-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Sticky save bar — pinned to the TOP of the pane so it stays
   visible across the long form. The bar sits BEFORE the storage-info
   banner in DOM order; `top: 0` makes it ride the viewport edge as
   the operator scrolls the rest of the pane content past it. */
.tool-pane[data-pane="app-settings"] .settings-save-bar {
    position: sticky;
    top: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-left-color: var(--accent);
    border-radius: 4px;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.tool-pane[data-pane="app-settings"] .settings-save-bar .save-hint {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-right: auto;
    font-style: italic;
}
.tool-pane[data-pane="app-settings"] .settings-save-bar.dirty .save-hint {
    color: #c8a04d;
    font-style: normal;
    font-weight: 500;
}
.tool-pane[data-pane="app-settings"] .settings-btn {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 4px;
    font-size: 0.82rem;
    cursor: pointer;
    font-weight: 500;
    margin: 0;
}
.tool-pane[data-pane="app-settings"] .settings-btn:hover:not(:disabled) {
    background: var(--surface-hi);
}
.tool-pane[data-pane="app-settings"] .settings-btn.settings-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}
.tool-pane[data-pane="app-settings"] .settings-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Render Audit pane (TOOL-01) ────────────────────────────────── */
.tool-pane[data-pane="render-audit"] .ra-controls {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto auto auto auto auto;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 1rem 0 0.75rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.tool-pane[data-pane="render-audit"] .ra-label {
    color: var(--text-dim);
    font-size: 0.85rem;
    white-space: nowrap;
}
.tool-pane[data-pane="render-audit"] .ra-input,
.tool-pane[data-pane="render-audit"] .ra-select {
    background: var(--surface-hi);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-family: inherit;
    font-size: 0.9rem;
}
.tool-pane[data-pane="render-audit"] .ra-input-narrow { width: 5rem; }
.tool-pane[data-pane="render-audit"] .ra-btn {
    background: var(--surface-hi);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
}
.tool-pane[data-pane="render-audit"] .ra-btn:hover { background: var(--border); }
.tool-pane[data-pane="render-audit"] .ra-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}
.tool-pane[data-pane="render-audit"] .ra-btn-primary:hover { filter: brightness(1.1); }
.tool-pane[data-pane="render-audit"] .ra-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tool-pane[data-pane="render-audit"] .ra-checkbox {
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--text-dim); font-size: 0.85rem;
    white-space: nowrap; cursor: pointer;
}
.tool-pane[data-pane="render-audit"] .ra-status {
    margin: 0.5rem 0;
    color: var(--text-dim);
    font-size: 0.9rem;
    min-height: 1.2em;
}
.tool-pane[data-pane="render-audit"] .ra-status.busy { color: var(--accent); }
.tool-pane[data-pane="render-audit"] .ra-status.warn { color: var(--warning); }
.tool-pane[data-pane="render-audit"] .ra-status.error { color: var(--danger); }
.tool-pane[data-pane="render-audit"] .ra-summary {
    margin: 0.5rem 0;
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-dim);
}
.tool-pane[data-pane="render-audit"] .ra-summary strong { color: var(--text); margin: 0 0.15rem; }
.tool-pane[data-pane="render-audit"] .ra-dim { color: var(--text-dim); margin-left: 0.5rem; }
.tool-pane[data-pane="render-audit"] .ra-results-wrap { overflow-x: auto; }
.tool-pane[data-pane="render-audit"] .ra-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.tool-pane[data-pane="render-audit"] .ra-table th,
.tool-pane[data-pane="render-audit"] .ra-table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
.tool-pane[data-pane="render-audit"] .ra-table th {
    color: var(--text-dim);
    font-weight: 500;
    background: var(--surface);
    position: sticky; top: 0; z-index: 1;
}
.tool-pane[data-pane="render-audit"] .ra-path {
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
    color: var(--text-dim);
    white-space: normal;
    word-break: break-all;
}
.tool-pane[data-pane="render-audit"] .ra-alpha {
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
}
.tool-pane[data-pane="render-audit"] .ra-row-mismatch { background: rgba(255, 80, 80, 0.07); }
.tool-pane[data-pane="render-audit"] .ra-row-error    { background: rgba(255, 80, 80, 0.12); }
.tool-pane[data-pane="render-audit"] .ra-empty {
    text-align: center;
    color: var(--text-dim);
    padding: 1.5rem;
    font-style: italic;
}
.tool-pane[data-pane="render-audit"] .ra-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--surface-hi);
    color: var(--text);
}
.tool-pane[data-pane="render-audit"] .ra-pill-ok       { background: var(--success); color: white; }
.tool-pane[data-pane="render-audit"] .ra-pill-mismatch { background: var(--danger);  color: white; }
.tool-pane[data-pane="render-audit"] .ra-pill-nomm     { background: var(--warning); color: black; }
.tool-pane[data-pane="render-audit"] .ra-pill-error    { background: var(--danger);  color: white; }
.tool-pane[data-pane="render-audit"] .ra-pill-suspect  { background: var(--warning); color: black; border: 1px solid var(--danger); }
.tool-pane[data-pane="render-audit"] .ra-row-suspect   { background: rgba(229, 165, 75, 0.10); }

/* ──────────────────────────────────────────────────────────
   SP-10 P3 slice 3: drag highlight + overlay styles.

   Applied via applyDragHighlights / showDragHint in
   set_picker.js. Mode classes:
     drag-over-blue  — single cell / row / default action
     drag-over-amber — Shift band / column replicate (override action)
   (The .drag-dimmed class + the cat-header region snap it served were
    retired in #47 P4.4c — no rule or JS applies .drag-dimmed any longer.)

   Colors composite over both empty cells AND cells with
   existing background-image thumbnails, per the mockup —
   operator sees through to the underlying content while
   getting the drag signal.

   Highlights use !important so the mode color wins over each
   surface's base border (versa-tile .slot's transparent border;
   mahjong .mini-cell has none). The legacy .slot[data-slot-key].
   drag-over rule this once overrode is gone (S2/S3 retired the
   legacy drop handlers), so the !important is now permanent, not
   transitional.
   ────────────────────────────────────────────────────────── */
.drag-over-blue {
    background-color: rgba(108, 140, 255, 0.45) !important;
    /* Use the border shorthand so width is explicit. Versa-tile
       .slot already declares `border: 2px solid transparent`, so a
       color+style override alone would work there — but mahjong
       .mini-cell has no base border declaration, and an override
       of just border-style:solid activates the browser's initial
       border-width:medium (~3px), producing inconsistent 3px on
       mahjong vs 2px on versa-tile. Setting width explicitly here
       keeps both surfaces consistent (post-slice-3 audit catch). */
    border: 2px solid var(--accent) !important;
}
.drag-over-amber {
    background-color: rgba(229, 165, 75, 0.40) !important;
    border: 2px solid var(--warning) !important;
}

#sp-drag-hint {
    position: fixed;
    z-index: 9999;
    background: var(--surface-hi);
    color: var(--text);
    padding: 4px 8px;
    border-left: 3px solid var(--accent);
    font-size: 0.7rem;
    font-family: monospace;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(108, 140, 255, 0.4);
    display: none;
    white-space: nowrap;
}
#sp-drag-hint.amber {
    border-left-color: var(--warning);
    box-shadow: 0 4px 12px rgba(229, 165, 75, 0.4);
}
#sp-drag-hint .kbd {
    display: inline-block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 4px;
    margin: 0 2px;
    font-size: 0.6rem;
}

/* ──────────────────────────────────────────────────────────
   SP-10 P3 slice 6 audit fixes:
     - cursor ghost element (small floating label following cursor
       during drag, distinct from hint bubble per mockup section 2)
     (.drag-dimmed region dimming was retired in #47 P4.4c.)
   ────────────────────────────────────────────────────────── */
#sp-cursor-ghost {
    position: fixed;
    z-index: 9999;
    background: var(--surface-hi);
    color: var(--text);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.55rem;
    font-family: monospace;
    pointer-events: none;
    transform: translate(-50%, -130%);
    box-shadow: 0 4px 12px rgba(108, 140, 255, 0.4);
    display: none;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
#sp-cursor-ghost::before {
    /* Downward arrow per mockup section 2. */
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--accent);
}
#sp-cursor-ghost.amber {
    border-color: var(--warning);
    box-shadow: 0 4px 12px rgba(229, 165, 75, 0.4);
}
#sp-cursor-ghost.amber::before {
    border-top-color: var(--warning);
}

/* ──────────────────────────────────────────────────────────
   SP-10 P3 slice 5: toast for rejected drops + confirm
   dialog for Ctrl-override paths + category-header drag
   source handle next to mahjong category tabs.
   ────────────────────────────────────────────────────────── */
#sp-drag-toast {
    /* Slice 6 audit: position above the active grid panel so the
       toast is contextually tied to the drop target per mockup
       section 4. The JS attaches the toast to the active grid
       container (sp-ws-versa for versa-tile / sp-ws-mahjong for
       mahjong) via appendChild and uses position:absolute relative
       to that container's positioning context. Fallback to fixed
       viewport-bottom when no container available. */
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 20;
    background: rgba(224, 85, 85, 0.95);
    color: white;
    padding: 8px 14px;
    border: 1px solid var(--danger);
    border-radius: 4px;
    font-size: 0.78rem;
    display: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
#sp-drag-toast strong {
    display: block;
    font-weight: 600;
}
#sp-drag-toast .sp-toast-hint {
    display: block;
    font-size: 0.7rem;
    opacity: 0.9;
    margin-top: 3px;
    font-weight: normal;
}
#sp-drag-toast .sp-toast-hint .kbd {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    padding: 0 4px;
    margin: 0 2px;
    font-size: 0.65rem;
    font-family: monospace;
}

#sp-drag-confirm {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}
#sp-drag-confirm .sp-drag-confirm-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px 20px;
    max-width: 420px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
#sp-drag-confirm .sp-drag-confirm-msg {
    color: var(--text);
    font-size: 0.85rem;
    margin-bottom: 14px;
    line-height: 1.4;
}
#sp-drag-confirm .sp-drag-confirm-msg code {
    background: var(--surface-hi);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--accent);
}
#sp-drag-confirm .sp-drag-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
#sp-drag-confirm button {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface-hi);
    color: var(--text);
    cursor: pointer;
    font-size: 0.8rem;
}
#sp-drag-confirm .sp-drag-confirm-ok {
    background: var(--warning);
    border-color: var(--warning);
    color: black;
}
#sp-drag-confirm .sp-drag-confirm-ok:hover {
    filter: brightness(1.1);
}
#sp-drag-confirm .sp-drag-confirm-cancel:hover {
    background: var(--surface);
}

/* #47 P4.4: inline-flex wrapper around each category pill. (The cat-header
   drag grip that previously lived in this wrap was retired — the row is now
   selection + Boards-view filter, not a drag source.) */
.cat-tab-wrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ── DIM-01 · Dimension Profiles pane (Tools ▸ Dimension Profiles) ───── */
.dim-ctxbar { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.6rem 0.8rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.9rem; font-size: 0.84rem; }
.dim-ctxbar .muted { color: var(--text-muted); }
.dim-ctxbar select { padding: 0.3rem 0.5rem; }
.dim-localchip { margin-left: auto; font-size: 0.66rem; color: var(--text-dim); border: 1px dashed var(--border-hi); border-radius: 8px; padding: 0.1rem 0.4rem; }

.dim-list-section { margin-bottom: 0.5rem; }
.dim-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.dim-list-header .hdr { font-weight: 600; }
.dim-list-header .muted { color: var(--text-dim); font-weight: 400; font-size: 0.78rem; }

.dim-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 7px; margin-bottom: 0.5rem; }
.dim-row.isactive { border-color: var(--success); background: rgba(76, 175, 130, 0.07); }
.dim-row.baseline { border-style: dashed; }
.dim-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-hi); flex-shrink: 0; cursor: pointer; position: relative; }
.dim-row.isactive .dim-radio { border-color: var(--success); }
.dim-row.isactive .dim-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--success); }
.dim-nm { flex: 1; min-width: 0; }
.dim-nm b { font-size: 0.88rem; color: var(--text); }
.dim-nm small { display: block; color: var(--text-dim); font-size: 0.74rem; margin-top: 0.1rem; word-break: break-word; }
.dim-active-badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.12rem 0.45rem; border-radius: 10px; color: var(--success); background: rgba(76, 175, 130, 0.16); border: 1px solid rgba(76, 175, 130, 0.4); }
.dim-rowacts { display: flex; gap: 0.3rem; flex-wrap: wrap; }

/* Scoped button styling — the app's global colour modifiers are .btn-primary
   (hyphenated); the space-separated .btn.primary / .btn.danger only resolve
   inside a pane-scoped block, mirroring the cal-profiles pane. */
.tool-pane[data-pane="dim-profiles"] .btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 0.35rem 0.8rem; border-radius: 3px; cursor: pointer; font-size: 0.78rem; }
.tool-pane[data-pane="dim-profiles"] .btn:hover:not(:disabled) { background: var(--surface-hi); }
.tool-pane[data-pane="dim-profiles"] .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tool-pane[data-pane="dim-profiles"] .btn.sm { padding: 0.2rem 0.5rem; font-size: 0.76rem; }
.tool-pane[data-pane="dim-profiles"] .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.tool-pane[data-pane="dim-profiles"] .btn.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.1); }
.tool-pane[data-pane="dim-profiles"] .btn.danger:hover { color: var(--danger); border-color: var(--danger); }

.dim-warnings { margin-top: 0.5rem; padding: 0.5rem 0.7rem; border: 1px solid var(--warning); border-radius: 6px; background: rgba(229, 165, 75, 0.08); font-size: 0.78rem; color: var(--text-muted); }
.dim-warnings div { margin-top: 0.2rem; }

.dim-editor { margin-top: 1rem; padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--border-hi); border-radius: 8px; }
.dim-editor-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.dim-editor-header .hdr { font-weight: 600; font-size: 0.95rem; }
.dim-editor-header .hdr-status { color: var(--warning); font-size: 0.78rem; }
.dim-field-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.dim-field-row > label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--text-muted); flex: 1; min-width: 180px; }
.dim-field-row input, .dim-field-row textarea, .dim-field-row select { padding: 0.35rem 0.5rem; }
.dim-field-row .req { color: var(--warning); }
.dim-field-row .field-hint { color: var(--text-dim); font-size: 0.7rem; }

.dim-grp-head { display: flex; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0.4rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.dim-grp-head .tag { padding: 0.08rem 0.45rem; border-radius: 10px; font-size: 0.64rem; }
.dim-grp-render_layout .tag { color: var(--warning); background: rgba(229, 165, 75, 0.16); border: 1px solid rgba(229, 165, 75, 0.4); }
/* jig-depth tier: a mid-tone orange between --warning and --success; no theme
   var exists for that hue, so the hex is intentional. */
.dim-grp-jig_depth .tag { color: #eb8c3c; background: rgba(235, 140, 60, 0.16); border: 1px solid rgba(235, 140, 60, 0.45); }
.dim-grp-image_side .tag { color: var(--success); background: rgba(76, 175, 130, 0.16); border: 1px solid rgba(76, 175, 130, 0.4); }
.dim-grp-head .lead { color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.72rem; }

.dim-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; }

/* 3e — field table (baseline|Δ|effective), derived geometry, fingerprint badges */
.dim-sub { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); font-weight: 700; margin: 0.9rem 0 0.4rem; }
.dim-sub .muted { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); }

.dim-ftable { width: 100%; border-collapse: collapse; margin-bottom: 0.3rem; table-layout: fixed; }
/* Fixed column widths so all three tier tables align column-for-column (each is
   a separate <table>, so without this they auto-size independently). Column 1
   (Field) absorbs the remaining width. */
.dim-ftable th:nth-child(2), .dim-ftable td:nth-child(2),
.dim-ftable th:nth-child(4), .dim-ftable td:nth-child(4) { width: 92px; }
.dim-ftable th:nth-child(3), .dim-ftable td:nth-child(3) { width: 116px; }
.dim-ftable th:nth-child(5), .dim-ftable td:nth-child(5) { width: 38px; }
.dim-ftable th { text-align: left; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); font-weight: 600; padding: 0.15rem 0.5rem; }
.dim-ftable th.num, .dim-ftable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dim-ftable td { padding: 0.2rem 0.5rem; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text); }
.dim-ftable .fname code { display: block; color: var(--text-dim); font-size: 0.68rem; }
.dim-ftable .base { color: var(--text-dim); }
.dim-ftable .eff { color: var(--text-muted); }
.dim-ftable .eff.over { color: var(--accent); font-weight: 600; }
.dim-ftable input { width: 80px; text-align: right; padding: 0.22rem 0.4rem; font-variant-numeric: tabular-nums; }
.dim-reset { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.95rem; padding: 0 0.2rem; }
.dim-reset:hover { color: var(--text); }

.dim-derived-wrap { margin-top: 0.9rem; }
.dim-derived { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.dim-dbox { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.55rem; }
.dim-dbox .dk { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.dim-dbox .dv { font-size: 0.98rem; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 0.12rem; }
.dim-dbox.cell .dv { color: var(--warning); }
.dim-dbox.img .dv { color: var(--success); }

.dim-downstream { margin-top: 0.9rem; padding: 0.7rem 0.8rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 7px; }
.dim-downstream .dim-sub { margin-top: 0; }
.dim-eff-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; }
.dim-eff-row + .dim-eff-row { border-top: 1px solid var(--border); }
.dim-eff-row .en { flex: 1; min-width: 0; }
.dim-eff-row .en b { font-size: 0.85rem; color: var(--text); }
.dim-eff-row .en small { display: block; color: var(--text-dim); font-size: 0.72rem; }
.dim-badge { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.dim-badge.ok { color: var(--success); }
.dim-badge.warn { color: var(--warning); }
.dim-hint { font-size: 0.74rem; color: var(--text-dim); line-height: 1.5; margin-top: 0.5rem; }
.dim-hint b.warn { color: var(--warning); }
.dim-hint b.ok { color: var(--success); }

/* List-level action feedback (Preview STL sent / errors). */
.dim-list-status { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; min-height: 1em; }
.dim-list-status.error { color: var(--danger); }
.dim-list-status.ok { color: var(--success); }

/* Promote modal (6c) — reuses the shared .cad-modal shell. */
.dim-promote-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 0.8rem; align-items: center; margin: 0.7rem 0; font-size: 0.84rem; }
.dim-promote-grid .k { color: var(--text-muted); font-size: 0.78rem; }
.dim-promote-grid .k .req { color: var(--warning); }
.dim-promote-grid .v { color: var(--text); }
.dim-promote-grid .v input { padding: 0.3rem 0.5rem; }
.dim-promote-grid #dim-promote-code { width: 80px; text-transform: uppercase; }
.dim-promote-grid .v small { margin-left: 0.4rem; }
.dim-promote-grid small.ok { color: var(--success); }
.dim-promote-grid small.bad { color: var(--danger); }
.dim-promote-check { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.82rem; color: var(--text-muted); margin: 0.5rem 0; }
.dim-promote-check input { margin-top: 0.15rem; }
.dim-promote-spec { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 0.75rem; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin: 0.5rem 0; }
.dim-promote-spec.warn { border-color: var(--warning); color: var(--warning); }
.dim-promote-spec code { color: var(--accent); }
.dim-promote-after { display: flex; align-items: center; gap: 0.9rem; font-size: 0.82rem; color: var(--text-muted); margin: 0.5rem 0; }
.dim-promote-after label { display: flex; align-items: center; gap: 0.3rem; }
.dim-promote-status { font-size: 0.8rem; color: var(--danger); min-height: 1em; margin-top: 0.3rem; }

@media (max-width: 700px) { .dim-derived { grid-template-columns: repeat(2, 1fr); } }

/* ── Auth (Phase 2, P2.5): login overlay · user chip · read-only hint ──────── */
/* Pre-auth gate: keep the app shell hidden until /api/auth/me resolves so the main UI
   doesn't flash before the sign-in overlay. auth.js adds .tbc-auth-pending to <html> in
   <head> (before first paint) and removes it in onAuthed(); the login overlay is excluded
   so it still shows when unauthenticated. */
html.tbc-auth-pending body > *:not(#tbc-login-overlay) { visibility: hidden; }

.tbc-login-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 12, 16, 0.86); backdrop-filter: blur(3px);
}
.tbc-login-card {
    width: 320px; max-width: calc(100vw - 2rem);
    display: flex; flex-direction: column; gap: 0.7rem;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 1.6rem 1.5rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.tbc-login-title { margin: 0; font-size: 1.15rem; }
.tbc-login-sub { margin: 0 0 0.4rem; font-size: 0.82rem; color: var(--text-muted); }
.tbc-login-card input {
    padding: 0.6rem 0.7rem; font-size: 0.9rem;
    background: var(--surface-alt); color: inherit;
    border: 1px solid var(--border); border-radius: 6px;
}
.tbc-login-card input:focus { outline: none; border-color: var(--accent); }
.tbc-login-card button {
    margin-top: 0.3rem; padding: 0.6rem; font-size: 0.9rem; font-weight: 600;
    background: var(--accent); color: var(--bg); border: none; border-radius: 6px; cursor: pointer;
}
.tbc-login-card button:disabled { opacity: 0.6; cursor: default; }
.tbc-login-err { min-height: 1em; font-size: 0.78rem; color: var(--danger); }

.tbc-user-chip {
    display: flex; align-items: center; gap: 0.5rem; margin-left: 0.9rem;
    font-size: 0.78rem; color: var(--text-muted);
}
.tbc-user-chip .tbc-user-role {
    text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.62rem; font-weight: 700;
    padding: 0.1rem 0.4rem; border-radius: 999px;
    background: var(--surface-alt); border: 1px solid var(--border);
}
.tbc-user-chip #tbc-logout-btn {
    background: none; border: 1px solid var(--border); color: inherit;
    padding: 0.2rem 0.55rem; border-radius: 5px; font-size: 0.72rem; cursor: pointer;
}
.tbc-user-chip #tbc-logout-btn:hover { border-color: var(--accent); color: var(--text); }

/* read-only feature panel — visual hint only (the server is the boundary) */
.tab-panel.tbc-readonly::before {
    content: "Read-only — your role can view but not change this.";
    display: block; margin-bottom: 0.8rem; padding: 0.4rem 0.7rem;
    font-size: 0.76rem; color: var(--text-muted);
    background: var(--surface-alt);
    border: 1px solid var(--border); border-left: 3px solid var(--accent);
    border-radius: 4px;
}

/* ── Admin Users & Roles screen (Phase 2, P2.6) ───────────────────────────── */
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .admin-cols { grid-template-columns: 1fr; } }
.admin-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 1rem 1.1rem;
}
.admin-card h3 { margin: 0 0 0.7rem; font-size: 0.95rem; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.admin-table th {
    text-align: left; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-dim); font-weight: 600; padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--border);
}
.admin-table td { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--border); color: var(--text); }
.admin-table select, .admin-table input { font-size: 0.8rem; }
.admin-del-btn {
    background: none; border: 1px solid var(--border); color: var(--text-muted);
    border-radius: 4px; cursor: pointer; padding: 0.1rem 0.4rem;
}
.admin-del-btn:hover { color: var(--danger); border-color: var(--danger); }
.admin-add-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; align-items: center; }
.admin-add-row input, .admin-add-row select { padding: 0.35rem 0.5rem; font-size: 0.82rem; }
.admin-add-row button, .admin-matrix-foot button, .admin-role-bar button {
    padding: 0.35rem 0.7rem; font-size: 0.82rem; cursor: pointer;
    background: var(--accent); color: var(--bg); border: none; border-radius: 5px; font-weight: 600;
}
.admin-add-row button:disabled, .admin-matrix-foot button:disabled, .admin-role-bar button:disabled { opacity: 0.5; cursor: default; }
.admin-role-bar { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.8rem; }
.admin-role-bar label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-muted); }
.admin-role-bar #admin-role-delete { background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border); }
.admin-role-bar #admin-role-delete:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.admin-matrix-app {
    font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
    color: var(--text-dim); margin: 0.7rem 0 0.3rem; border-bottom: 1px solid var(--border); padding-bottom: 0.2rem;
}
.admin-matrix-row { display: grid; grid-template-columns: 10.5rem 1fr; align-items: center; gap: 0.6rem; padding: 0.25rem 0; }
.admin-matrix-row .amr-name { font-size: 0.82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-matrix-row select { width: 100%; min-width: 0; padding: 0.25rem 0.4rem; font-size: 0.78rem; }
.admin-matrix-foot { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.9rem; }
.admin-matrix-foot #admin-save-status { font-size: 0.78rem; color: var(--text-muted); }
.admin-hint, .admin-locked { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.3rem; }
.admin-locked { color: var(--text-dim); font-style: italic; }
.admin-status { margin-top: 0.9rem; font-size: 0.82rem; color: var(--success); min-height: 1em; }
.admin-status.error { color: var(--danger); }