/* ============================================================
   DppPassportView — enterprise card layout
   Palette: --primary-dark (#003399)  --primary-light (#7AB8FF)  white
   ============================================================ */

.passport {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    --passport-blue-soft: rgba(0, 51, 153, 0.035);
    --passport-blue-row: rgba(0, 51, 153, 0.025);
    --passport-blue-row-hover: rgba(0, 51, 153, 0.055);
    --passport-blue-line: rgba(0, 51, 153, 0.18);
    --passport-header-bg: linear-gradient(90deg, rgba(0, 51, 153, 0.085), rgba(122, 184, 255, 0.12));
}

/* ---------- Parse error ---------- */

.passport-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background-color: var(--error-soft);
    border: 1px solid rgba(180, 35, 24, 0.2);
    border-radius: var(--radius-sm);
    color: var(--error);
    font-size: var(--fs-14);
}

.passport-error .icon { color: var(--error); }

/* ---------- Product identity header ---------- */

.passport-identity {
    background-color: var(--primary-dark);
    border-radius: var(--radius-sm);
    padding: var(--space-6) var(--space-7);
}

.identity-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.identity-brand {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.identity-brand .identity-logo {
    flex-shrink: 0;
}

.identity-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.identity-progress {
    font-size: var(--fs-12);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    padding: 0 8px;
}

.identity-review-btn {
    background: rgba(255, 193, 7, 0.18);
    border-color: rgba(255, 193, 7, 0.45);
}

.identity-mode-btn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--primary-white);
    font-size: var(--fs-12);
    font-weight: 700;
    cursor: pointer;
}

.identity-mode-btn.is-user-mode {
    background: rgba(122, 184, 255, 0.22);
}

@media (max-width: 640px) {
    .identity-header-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .identity-brand {
        width: 100%;
    }

    .identity-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    .identity-explain-btn,
    .identity-mode-btn {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }

    .identity-progress {
        width: 100%;
        text-align: center;
        padding: 4px 0;
    }
}

.identity-explain-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--primary-white);
    font-size: var(--fs-13);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.05s;
}

.identity-explain-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.48);
}

.identity-explain-btn:active {
    transform: translateY(1px);
}

.identity-explain-btn .icon {
    color: var(--primary-light);
}

.identity-eyebrow {
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--primary-light);
}

.identity-integrity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--fs-11);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
}

.identity-integrity-badge.is-verified {
    border-color: rgba(122, 184, 255, 0.32);
    background: rgba(122, 184, 255, 0.12);
}

.identity-integrity-badge.is-unverified {
    border-color: rgba(255, 193, 7, 0.36);
    background: rgba(255, 193, 7, 0.12);
}

.identity-integrity-badge .icon {
    color: var(--primary-light);
}

.identity-integrity-divider {
    color: rgba(255, 255, 255, 0.38);
    font-weight: 600;
}

.identity-integrity-hash {
    font-family: var(--font-mono);
    font-size: 10px;
    opacity: 0.72;
}

/* ---------- Provider attribution ---------- */

.passport-attribution {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-color);
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--text-secondary);
}

.identity-name {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-28);
    font-weight: 700;
    color: var(--primary-white);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
}

.identity-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.identity-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: var(--fs-12);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.identity-chip-accent {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

.identity-chip-muted {
    background-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.identity-chip-action {
    cursor: pointer;
    transition: background 0.12s, transform 0.05s;
}

.identity-chip-action:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

.identity-chip-action:active {
    transform: translateY(1px);
}

.identity-chip-confidence {
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.9);
    text-transform: none;
    letter-spacing: normal;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.identity-chip-reliability-label {
    font-size: var(--fs-11, 0.6875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.identity-chip-reliability-band {
    font-weight: 800;
}

.identity-chip-reliability-score {
    font-weight: 600;
    opacity: 0.9;
}

@media (max-width: 640px) {
    .identity-chip-reliability-score {
        display: none;
    }
}

/* ---------- Confidence coloring ---------- */

.conf-high {
    color: var(--success);
}

.conf-mid {
    color: #9A7B00; /* accessible amber on light bg */
}

.conf-low {
    color: var(--error);
}

.conf-review {
    color: #5B4B8A;
}

/* Keep the chip readable on dark header */
.identity-chip.conf-high { background-color: rgba(46, 160, 67, 0.22); }
.identity-chip.conf-mid { background-color: rgba(255, 193, 7, 0.20); }
.identity-chip.conf-low { background-color: rgba(180, 35, 24, 0.22); }
.identity-chip.conf-review { background-color: rgba(91, 75, 138, 0.18); }

.p-field dd.conf-high { color: var(--success); }
.p-field dd.conf-mid { color: #9A7B00; }
.p-field dd.conf-low { color: var(--error); }
.p-field dd.conf-review { color: #5B4B8A; }

.p-badge.conf-high { color: var(--success); border-color: rgba(46, 160, 67, 0.25); }
.p-badge.conf-mid { color: #9A7B00; border-color: rgba(154, 123, 0, 0.25); }
.p-badge.conf-low { color: var(--error); border-color: rgba(180, 35, 24, 0.25); }
.p-badge.conf-review { color: #5B4B8A; border-color: rgba(91, 75, 138, 0.25); }

.conf-user-edited {
  color: #2F4858;
  background-color: rgba(47, 72, 88, 0.08);
}

.identity-chip.conf-user-edited { background-color: rgba(47, 72, 88, 0.12); }

.p-field dd.conf-user-edited,
.p-field td.conf-user-edited { color: #2F4858; }

.p-badge.conf-user-edited { color: #2F4858; border-color: rgba(47, 72, 88, 0.22); }

.p-table td.conf-high { color: var(--success); }
.p-table td.conf-mid { color: #9A7B00; }
.p-table td.conf-low { color: var(--error); }

.p-table td.conf-high,
.p-table td.conf-mid,
.p-table td.conf-low {
    font-weight: 600;
}

/* ---------- Section grid ---------- */

.passport-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

/* ---------- Section cards ---------- */

.p-card {
    background:
        linear-gradient(180deg, var(--passport-blue-soft), rgba(255, 255, 255, 0) 120px),
        var(--surface-0);
    border: 1px solid var(--passport-blue-line);
    border-left: 4px solid var(--primary-dark);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-1);
}

.p-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--passport-header-bg);
    border-bottom: 1px solid var(--passport-blue-line);
    font-size: var(--fs-12);
    font-weight: 700;
    color: var(--primary-darker);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    flex-shrink: 0;
}

.p-card-header .icon {
    color: var(--primary-dark);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45));
}

.p-card-wide {
    grid-column: 1 / -1;
}

.p-inline-list {
    margin: 0 0 var(--space-3);
    padding: 0 var(--space-4) var(--space-2);
    list-style: disc;
    padding-left: var(--space-6);
    font-size: var(--fs-13);
    color: var(--ink-1);
}

.p-fields-tight {
    padding-bottom: var(--space-2);
}

.p-prose {
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    font-size: var(--fs-13);
    line-height: var(--lh-relaxed);
    color: var(--ink-1);
}

/* ---------- Field rows ---------- */

.p-fields {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.p-field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--surface-2);
    font-size: var(--fs-13);
    transition: background-color var(--duration-fast) var(--ease-standard);
}

.p-field:nth-child(even) {
    background-color: var(--passport-blue-row);
}

.p-field:hover {
    background-color: var(--passport-blue-row-hover);
}

.p-field:last-child { border-bottom: none; }

.p-field dt {
    color: var(--ink-2);
    font-weight: 600;
    flex-shrink: 0;
}

.p-field dd {
    margin: 0;
    color: var(--ink-1);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}

.p-field.is-field-focused {
    background: rgba(0, 51, 153, 0.09);
    outline: 1px solid rgba(0, 51, 153, 0.28);
    outline-offset: -1px;
}

.passport-editor .p-field dd.conf-editor-stable {
    color: var(--ink-1);
}

.passport-editor .p-field dd.conf-empty {
    color: var(--ink-3);
    font-style: italic;
}

.passport-user .p-field dd.conf-high,
.passport-user .p-field dd.conf-mid,
.passport-user .p-field dd.conf-low,
.passport-user .p-field dd.conf-review {
    /* user view: neutral values only; no confidence coloring */
    color: var(--ink-1);
}

.passport-fields-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--space-3) 0 0;
}

.passport-fields-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-0);
    color: var(--primary-dark);
    font-size: var(--fs-13);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.passport-fields-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.passport-fields-btn .icon {
    color: var(--primary-dark);
}

.passport-fields-count {
    font-size: var(--fs-12);
    font-weight: 500;
    color: var(--ink-3);
}

.p-source-readonly-label {
    margin: 0;
    padding: var(--space-2) var(--space-4) 0;
    font-size: var(--fs-11, 0.6875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-3);
}

/* ---------- Disassembly instructions overlay ---------- */

.p-disassembly-entry dd {
    align-items: flex-end;
    text-align: right;
}

.p-disassembly-entry-btn {
    align-self: flex-end;
}

.p-disassembly-entry-preview {
    max-width: 34rem;
    color: var(--ink-3);
    font-size: var(--fs-12);
    font-weight: 500;
    line-height: var(--lh-relaxed);
}

.disassembly-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: rgba(0, 0, 0, 0.38);
    overflow: hidden;
}

.disassembly-overlay {
    width: min(960px, 96vw);
    max-height: min(860px, 92vh);
    background: var(--surface-0);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.disassembly-overlay-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-1);
    flex-shrink: 0;
}

.disassembly-overlay-eyebrow {
    font-size: var(--fs-11, 0.6875rem);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-3);
}

.disassembly-overlay-title {
    margin: var(--space-1) 0 0;
    color: var(--ink-1);
    font-size: var(--fs-20);
    font-weight: 800;
    line-height: var(--lh-tight);
}

.disassembly-overlay-intro {
    margin: var(--space-2) 0 0;
    max-width: 68ch;
    color: var(--ink-2);
    font-size: var(--fs-13);
    line-height: var(--lh-relaxed);
}

.disassembly-overlay-close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surface-0);
    color: var(--ink-1);
    font-size: var(--fs-20);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.disassembly-overlay-close:hover {
    background: var(--surface-2);
}

.disassembly-overlay-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
    background: var(--surface-1);
}

.disassembly-guide {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-0);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.disassembly-guide.is-field-focused {
    outline: 2px solid rgba(0, 51, 153, 0.22);
    outline-offset: 2px;
}

.disassembly-guide-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-1);
    color: var(--ink-3);
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.disassembly-guide-content {
    padding: var(--space-5);
    color: var(--ink-1);
    font-size: var(--fs-14);
    line-height: 1.7;
}

.disassembly-guide-content .p-editable,
.disassembly-guide-content .p-editable-value {
    display: block;
    width: 100%;
}

.disassembly-guide-content .p-editable-value {
    white-space: pre-wrap;
}

.disassembly-guide-content .p-editable-editor,
.disassembly-guide-content .p-editable-input,
.disassembly-guide-content .p-editable-textarea {
    width: 100%;
    max-width: none;
}

.disassembly-guide-content .p-editable-textarea {
    min-height: 18rem;
    padding: var(--space-3);
    line-height: 1.6;
}

.disassembly-editor-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--ink-2);
    font-size: var(--fs-13);
    font-weight: 700;
}

.disassembly-readonly-label {
    margin-bottom: var(--space-2);
    color: var(--ink-2);
    font-size: var(--fs-13);
    font-weight: 700;
}

.disassembly-readonly-content {
    min-height: 12rem;
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--surface-0);
    color: var(--ink-1);
    white-space: pre-wrap;
    word-break: break-word;
}

.disassembly-editor-textarea {
    min-height: 22rem;
    resize: vertical;
    border-color: var(--border-color);
    box-shadow: none;
}

.disassembly-editor-textarea:focus {
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.10);
}

.disassembly-editor-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
    color: var(--ink-3);
    font-size: var(--fs-12);
    line-height: var(--lh-relaxed);
}

.disassembly-overlay-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-color);
    background: var(--surface-0);
    flex-shrink: 0;
}

.disassembly-overlay-save-state {
    color: var(--ink-3);
    font-size: var(--fs-12);
    font-weight: 600;
}

.disassembly-overlay-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.disassembly-save-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    background: var(--surface-1);
}

.p-table-actions {
    white-space: nowrap;
}

.passport-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: var(--fs-13);
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    max-width: min(90vw, 420px);
}

.passport-toast.is-success {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid rgba(46, 160, 67, 0.3);
}

.passport-toast.is-error {
    background: var(--error-soft);
    color: var(--error);
    border: 1px solid rgba(180, 35, 24, 0.3);
}

/* ---------- Empty state inside card ---------- */

.p-empty {
    margin: var(--space-4);
    color: var(--ink-3);
    font-size: var(--fs-13);
    font-style: italic;
}

/* ---------- Badge groups (compliance) ---------- */

.p-badge-group {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--surface-2);
    background: rgba(0, 51, 153, 0.018);
}

.p-badge-group:last-child { border-bottom: none; }

.p-badge-label {
    display: block;
    font-size: var(--fs-12);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--primary-darker);
    margin-bottom: var(--space-2);
}

.p-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.p-badge {
    display: inline-block;
    padding: 3px 8px;
    background-color: var(--accent-soft);
    border: 1px solid var(--passport-blue-line);
    border-radius: 3px;
    font-size: var(--fs-12);
    color: var(--primary-dark);
    font-weight: 600;
}

/* ---------- Materials table ---------- */

.p-materials {
    background:
        linear-gradient(180deg, var(--passport-blue-soft), rgba(255, 255, 255, 0) 140px),
        var(--surface-0);
    border: 1px solid var(--passport-blue-line);
    border-left: 4px solid var(--primary-dark);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.p-materials-header {
    border-bottom: 1px solid var(--passport-blue-line);
}

.p-material-rows {
    border-top: 1px solid var(--passport-blue-line);
}

.p-material-rows-intro {
    padding: var(--space-3) var(--space-4) 0;
}

.p-material-rows-intro-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.p-material-rows-intro-head .p-badge-label {
    margin-bottom: 0;
}

.p-material-rows-intro-head .p-material-rows-toolbar {
    margin-top: 0;
}

.p-field-help {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-12);
    line-height: var(--lh-relaxed);
    color: var(--ink-2);
    font-style: normal;
}

.p-material-rows-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.p-material-rows-body .p-material-rows-intro {
    padding: 0 0 var(--space-2);
    margin-bottom: var(--space-1);
}

.p-materials-field {
    width: 100%;
}

.p-materials-table {
    margin-bottom: var(--space-2);
}

.p-material-rows-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.p-material-rows-toolbar-bottom {
    margin-top: var(--space-3);
}

.p-list-editor-actions-top {
    margin-top: 0;
    margin-bottom: var(--space-3);
}

.p-list-editor-actions-bottom {
    margin-top: var(--space-3);
}

.p-list-editor-actions-inline {
    margin-top: 0;
}

.p-material-rows-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-12);
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--ink-2);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
}

.p-material-rows-btn:hover {
    background: rgba(0, 51, 153, 0.06);
    border-color: rgba(0, 51, 153, 0.25);
}

.p-material-rows-btn-primary {
    border-color: var(--primary-dark);
    background: var(--accent-soft);
    color: var(--primary-dark);
    font-weight: 600;
}

.p-empty-materials {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.p-empty-materials .p-empty {
    margin: 0;
    padding: 0;
}

.p-material-rows-confidence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--passport-blue-line);
}

.p-material-rows-confidence-label {
    font-size: var(--fs-12);
    font-weight: 700;
    color: var(--primary-darker);
}

.p-list-editor-materials {
    width: 100%;
    min-width: 0;
}

.p-list-editor-materials-head,
.p-list-editor-row-materials {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 0.7fr 0.6fr 0.6fr 0.7fr 1fr 28px;
    gap: var(--space-2);
    align-items: center;
    width: 100%;
}

.p-list-editor-materials-head {
    font-size: var(--fs-11, 0.6875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--primary-darker);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--passport-blue-line);
}

/* ---------- Component cards (nested materials) ---------- */

.p-components-field {
    width: 100%;
}

.p-component-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.p-component-card {
    border: 1px solid var(--passport-blue-line);
    border-left: 3px solid rgba(0, 51, 153, 0.45);
    border-radius: var(--radius-sm);
    background: white;
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.p-component-card-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--passport-header-bg);
    border-bottom: 1px solid var(--passport-blue-line);
}

.p-component-card-title-row {
    width: 100%;
}

.p-component-card-meta {
    width: 100%;
    padding-top: var(--space-1);
    border-top: 1px solid rgba(0, 51, 153, 0.12);
}

.p-component-card-meta .p-table-cell-inner {
    gap: 0;
}

.p-component-card-meta .fconfex {
    border-top: none;
    padding-top: 0;
}

.p-component-card-title {
    font-weight: 700;
    font-size: var(--fs-14);
    color: var(--primary-darker);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.p-component-mat-count {
    font-size: var(--fs-11);
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--primary-white);
    border: 1px solid var(--passport-blue-line);
    border-radius: 999px;
    padding: 2px 8px;
}

.p-component-card-notes {
    padding: var(--space-2) var(--space-4) var(--space-3);
    font-size: var(--fs-13);
    color: var(--ink-2);
}

.p-table-cell-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.p-component-card td {
    vertical-align: top;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.p-component-card td .fconfex,
.p-component-card-header .fconfex,
.p-component-card-notes .fconfex {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 51, 153, 0.10);
}

.p-component-supply-table {
    margin: 0;
    border-bottom: 1px solid var(--passport-blue-line);
}

.p-component-supply-table th {
    font-size: var(--fs-11);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary-darker);
}

.p-component-supply-editor-label {
    margin-top: var(--space-2);
    font-size: var(--fs-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary-darker);
}

.p-component-supply-head,
.p-list-editor-row-component-supply {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.6fr);
    gap: var(--space-2);
    align-items: center;
    width: 100%;
}

.p-list-editor-row-component-supply {
    margin-bottom: var(--space-2);
}

.p-component-materials-section {
    border-top: 1px solid var(--passport-blue-line);
}

.p-component-materials-label {
    margin: var(--space-3) var(--space-4) var(--space-2);
}

.p-component-materials-table {
    margin: 0;
}

.p-component-empty-materials {
    padding: var(--space-3) var(--space-4);
    margin: 0;
    font-size: var(--fs-13);
}

.p-count-muted {
    opacity: 0.75;
    font-weight: 500;
}

.p-list-editor-components {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.p-component-editor-block {
    border: 1px solid var(--passport-blue-line);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    background: var(--accent-soft);
}

.p-component-editor-header {
    display: grid;
    grid-template-columns: 1fr 28px;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}

.p-component-notes-input {
    margin-bottom: var(--space-2);
}

.p-component-materials-head,
.p-list-editor-row-component-materials {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 0.75fr)
        minmax(0, 0.65fr)
        minmax(0, 0.65fr)
        minmax(4.5rem, auto)
        minmax(0, 1fr)
        28px;
    gap: var(--space-2);
    align-items: center;
    width: 100%;
}

.p-component-supply-head,
.p-component-materials-head {
    font-size: var(--fs-11, 0.6875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--primary-darker);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--passport-blue-line);
}

.p-component-add-material {
    margin-top: var(--space-2);
}

.p-list-editor-row-materials .p-list-editor-input-narrow {
    min-width: 0;
}

.p-list-editor-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-12);
    color: var(--ink-2);
    white-space: nowrap;
}

.p-list-editor-cancel {
    font-size: var(--fs-12);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    font-family: inherit;
}

.p-list-editor-cancel:hover {
    color: var(--ink-1);
    background: rgba(0, 0, 0, 0.04);
}

.p-count {
    margin-left: auto;
    background-color: rgba(0, 51, 153, 0.10);
    color: var(--primary-dark);
    font-size: var(--fs-12);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    text-transform: none;
    letter-spacing: 0;
    border: 1px solid rgba(0, 51, 153, 0.14);
}

.p-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-13);
    background-color: var(--surface-0);
}

.p-table th {
    padding: var(--space-2) var(--space-4);
    text-align: left;
    font-size: var(--fs-12);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--primary-darker);
    background: var(--passport-header-bg);
    border-bottom: 1px solid var(--passport-blue-line);
}

.p-table td {
    padding: var(--space-2) var(--space-4);
    color: var(--ink-1);
    border-bottom: 1px solid var(--surface-2);
}

.p-table tbody tr:nth-child(even) td {
    background-color: var(--passport-blue-row);
}

.p-table tbody tr:hover td {
    background-color: var(--passport-blue-row-hover);
}

.p-table tr:last-child td { border-bottom: none; }

.p-num {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
}

/* ---------- Recyclable boolean ---------- */

.p-bool {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: var(--fs-12);
    font-weight: 600;
    border: 1px solid transparent;
}

.p-bool-yes {
    background-color: var(--success-soft);
    color: var(--success);
    border-color: rgba(31, 122, 58, 0.18);
}

.p-bool-no {
    background-color: var(--error-soft);
    color: var(--error);
    border-color: rgba(180, 35, 24, 0.18);
}

.p-muted {
    color: var(--ink-3);
    font-style: italic;
}

/* ---------- Editable field (click-to-edit) ---------- */

.p-editable {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

/* Clickable value — subtle cursor hint, no visible buttons */
.p-editable-value {
    cursor: text;
    border-radius: 3px;
    padding: 1px 3px;
    margin: -1px -3px;
    transition: background 0.1s;
}

.p-editable-value:hover {
    background: rgba(0, 51, 153, 0.06);
}

.p-editable.is-edit-mode .p-editable-value {
    border: 1px dashed transparent;
}

.passport-editor .p-editable.is-edit-mode .p-editable-value:hover {
    border-color: rgba(0, 51, 153, 0.25);
}

.p-editable-hint {
    display: inline-flex;
    margin-left: 4px;
    opacity: 0;
    color: var(--ink-3);
    vertical-align: middle;
    transition: opacity 0.12s;
}

.p-editable.is-edit-mode .p-editable-value:hover .p-editable-hint {
    opacity: 1;
}

/* Overridden value gets a dashed blue underline */
.is-overridden .p-editable-value {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: rgba(0, 51, 153, 0.40);
    text-underline-offset: 3px;
}

/* Active edit state */
.p-editable-editor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.p-editable-input {
    min-width: 90px;
    max-width: 280px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--primary-dark);
    background: white;
    font-size: var(--fs-13);
    font-family: inherit;
    color: var(--ink-1);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.10);
}

.p-editable-textarea {
    min-width: 200px;
    max-width: min(100%, 420px);
    resize: vertical;
    font-family: inherit;
    line-height: var(--lh-relaxed);
}

/* ---------- Structured list editors ---------- */

.p-editable-list {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    max-width: 100%;
}

.p-editable-value-block {
    display: block;
    width: 100%;
}

.p-list-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: min(100%, 320px);
}

.p-list-editor-wide {
    min-width: min(100%, 420px);
}

.p-list-editor-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.p-list-editor-row.p-list-editor-row-component-supply,
.p-list-editor-row.p-list-editor-row-component-materials {
    display: grid;
    min-width: 0;
}

.p-list-editor-row-component-materials .p-list-editor-input,
.p-list-editor-row-component-supply .p-list-editor-input {
    min-width: 0;
    width: 100%;
    max-width: none;
}

.p-list-editor-row-component-materials .p-list-editor-checkbox {
    justify-self: start;
}

.p-list-editor-row-structured .p-list-editor-input {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

.p-list-editor-input {
    flex: 1 1 auto;
    max-width: none;
}

.p-list-editor-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
}

.p-list-editor-remove:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ink-1);
}

.p-list-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.p-list-editor-add,
.p-list-editor-done {
    font-size: var(--fs-12);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--line-2);
    background: white;
    color: var(--ink-2);
    cursor: pointer;
    font-family: inherit;
}

.p-list-editor-done {
    border-color: var(--primary-dark);
    color: var(--primary-dark);
    font-weight: 600;
}

.p-list-editor-add:hover,
.p-list-editor-done:hover {
    background: rgba(0, 51, 153, 0.06);
}

.p-fields-inline {
    width: 100%;
}

/* ---------- Responsive ---------- */

@media (max-width: 680px) {
    .passport-grid {
        grid-template-columns: 1fr;
    }

    .passport-identity {
        padding: var(--space-5);
    }

    .identity-name {
        font-size: var(--fs-20);
    }

    .identity-chips {
        gap: var(--space-1);
    }

    .p-field {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
        border-left: 2px solid rgba(0, 51, 153, 0.12);
    }

    .p-field dd {
        text-align: left;
        width: 100%;
        min-width: 0;
    }

    .p-disassembly-entry dd {
        align-items: flex-start;
        text-align: left;
    }

    .p-disassembly-entry-btn {
        align-self: flex-start;
    }

    .p-editable {
        width: 100%;
        min-width: 0;
    }

    .p-editable-value,
    .p-editable-input {
        max-width: 100%;
    }

    .p-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- Mobile-only (≤640px); desktop/tablet match main above 640px ---------- */

@media (max-width: 640px) {
    .passport-fields-toolbar {
        justify-content: stretch;
    }

    .passport-fields-btn {
        width: 100%;
        justify-content: center;
    }

    .p-fields-tight .p-field dt {
        width: 100%;
    }

    .p-fields-tight .p-field dd {
        align-items: flex-start;
        line-height: var(--lh-relaxed);
        word-break: break-word;
    }

    .p-badge-group {
        padding: var(--space-3) var(--space-4);
    }

    .p-badges {
        width: 100%;
        gap: var(--space-2);
    }

    /* Materials: card layout instead of horizontal scroll */
    .p-materials .p-table {
        overflow-x: visible;
    }

    .p-materials .p-table thead {
        display: none;
    }

    .p-materials .p-table tbody {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4) var(--space-4);
    }

    .p-materials .p-table tbody tr {
        display: block;
        border: 1px solid var(--passport-blue-line);
        border-left: 3px solid rgba(0, 51, 153, 0.35);
        border-radius: var(--radius-sm);
        background: var(--surface-0);
        padding: var(--space-2) 0;
        box-shadow: var(--shadow-1);
    }

    .p-materials .p-table tbody tr:last-child {
        border-bottom: 1px solid var(--passport-blue-line);
    }

    .p-materials .p-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-4);
        border-bottom: 1px solid var(--surface-2);
        text-align: right;
    }

    .p-materials .p-table td .p-table-cell-inner {
        flex: 1;
        min-width: 0;
        align-items: flex-end;
        text-align: right;
    }

    .p-materials .p-table td .p-table-cell-inner .fconfex {
        align-self: stretch;
        justify-content: flex-start;
        text-align: left;
    }

    .p-materials .p-table td:last-child {
        border-bottom: none;
    }

    .p-materials .p-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: var(--fs-12);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        color: var(--primary-darker);
        text-align: left;
        max-width: 42%;
    }

    .p-materials .p-table td.p-table-actions {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .p-materials .p-table td.p-table-actions::before {
        max-width: none;
    }

    .p-materials .p-table td.p-table-actions .fconfex {
        width: 100%;
    }

    .p-list-editor-materials-head {
        display: none;
    }

    .p-list-editor-row-materials {
        grid-template-columns: 1fr;
        padding: var(--space-2);
        border: 1px solid var(--passport-blue-line);
        border-left: 3px solid rgba(0, 51, 153, 0.35);
        border-radius: var(--radius-sm);
        background: linear-gradient(180deg, var(--passport-blue-soft), rgba(255, 255, 255, 0) 80px), var(--surface-0);
    }

    .p-list-editor-row-materials .p-list-editor-input::placeholder {
        color: var(--ink-3);
    }

    .p-material-rows-confidence {
        flex-direction: column;
        align-items: flex-start;
    }

    .disassembly-overlay-backdrop {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }

    .disassembly-overlay {
        width: 100%;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .disassembly-overlay-header {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: var(--space-4);
    }

    .disassembly-overlay-body {
        padding: var(--space-4);
    }

    .disassembly-guide-content {
        padding: var(--space-4);
    }

    .disassembly-overlay-footer {
        align-items: stretch;
        flex-direction: column;
        padding: var(--space-4);
    }

    .disassembly-overlay-actions {
        justify-content: stretch;
    }

    .disassembly-overlay-actions .p-material-rows-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .disassembly-editor-textarea {
        min-height: 18rem;
    }
}