/* The legacy-shaped style view and the printable tech pack.
 * Consumes the shell's design tokens (--sv-*, from theme.css, loaded
 * first); style.html and techpack.html add this via head_extra. */

.legacy-crumbs {
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--sv-text-muted);
}

.legacy-crumbs a { color: var(--sv-primary); text-decoration: none; }

.legacy-vintage {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--sv-text-muted);
}

.legacy-warning {
    display: block;
    color: var(--sv-danger-text);
}

.legacy-readonly,
.legacy-editable {
    margin: 0 0 1rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    color: var(--sv-text);
    background: var(--sv-primary-soft);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius);
}

/* The edit panel (products:write only). */
.legacy-edit-error,
.legacy-edit-ok {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    border-radius: var(--sv-radius);
}

.legacy-edit-error {
    color: var(--sv-danger-text);
    background: var(--sv-danger-bg);
    border: 1px solid var(--sv-danger-border);
}

.legacy-edit-ok {
    color: var(--sv-text);
    background: var(--sv-primary-soft);
    border: 1px solid var(--sv-border-strong);
}

.legacy-edit-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.legacy-edit-table tr.has-pending { background: var(--sv-primary-soft); }

.legacy-pending-value { display: block; font-weight: 600; }
.legacy-pending-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--sv-text-muted);
}

.legacy-edit-form { display: flex; align-items: flex-start; gap: 0.5rem; }
.legacy-edit-form input[type="text"],
.legacy-edit-form select,
.legacy-edit-form textarea {
    min-width: 14rem;
    padding: 0.25rem 0.5rem;
    font: inherit;
    color: var(--sv-text);
    background: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius);
}

.legacy-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.legacy-head h2 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.legacy-head-name { font-weight: 400; color: var(--sv-text-muted); }
.legacy-head-side { display: flex; align-items: center; gap: 0.75rem; }
.legacy-head-side a { text-decoration: none; }

.legacy-meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--sv-text-muted);
}

.legacy-stage {
    display: inline-flex;
    flex-direction: column;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 700;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius);
}

.legacy-stage-group {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--sv-text-muted);
}

.legacy-stage.is-unrecognised { border-color: var(--sv-danger-border); }

.legacy-section,
.legacy-record {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-lg);
}

.techpack-page .legacy-record { padding: 0; border: none; }

.legacy-section h3,
.legacy-record h3 { margin: 0 0 0.75rem; font-size: 1rem; }

.legacy-record h4 {
    margin: 1rem 0 0.5rem;
    font-size: 0.875rem;
    color: var(--sv-text-muted);
}

.legacy-subtitle {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--sv-text-muted);
}

.legacy-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.5rem 1.25rem;
    margin: 0 0 0.75rem;
}

.legacy-field dt {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sv-text-muted);
}

.legacy-field dd { margin: 0; font-size: 0.875rem; overflow-wrap: anywhere; }

.legacy-notes { margin: 0; white-space: pre-wrap; font-size: 0.875rem; }

.legacy-more summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--sv-primary);
    margin-bottom: 0.5rem;
}

.legacy-table-wrap { overflow-x: auto; margin-bottom: 0.75rem; }

.legacy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.legacy-table th {
    text-align: left;
    padding: 0.375rem 0.625rem;
    font-weight: 600;
    color: var(--sv-text-muted);
    border-bottom: 1px solid var(--sv-border-strong);
    white-space: nowrap;
}

.legacy-table td {
    padding: 0.375rem 0.625rem;
    border-bottom: 1px solid var(--sv-border);
    vertical-align: top;
}

.legacy-strong { font-weight: 600; }
.legacy-upcs span { display: block; white-space: nowrap; }

.legacy-empty, .legacy-raw-note {
    color: var(--sv-text-muted);
    font-size: 0.875rem;
}

.legacy-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--sv-border);
}

.legacy-tab {
    padding: 0.5rem 0.875rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--sv-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.legacy-tab[aria-selected="true"] {
    color: var(--sv-primary);
    border-bottom-color: var(--sv-primary);
    font-weight: 600;
}

/* ── Tech pack ───────────────────────────────────────────── */

.techpack-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.techpack-head h1 { margin: 0 0 0.25rem; font-size: 1.375rem; }

.techpack-generated {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    color: var(--sv-text-muted);
}

.techpack-page {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-lg);
}

.techpack-page h2 {
    margin: 0 0 0.75rem;
    padding-bottom: 0.375rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--sv-border-strong);
}

.techpack-page h3 { margin: 1rem 0 0.5rem; font-size: 1rem; }

@media print {
    .app-header,
    #error-banner,
    .techpack-toolbar { display: none !important; }

    body { background: var(--sv-surface); }
    .app-main { padding: 0; max-width: none; }

    .techpack-page {
        break-before: page;
        border: none;
        padding: 0;
        margin: 0;
    }

    .techpack-page:first-of-type { break-before: auto; }
    .legacy-table-wrap { overflow: visible; }
    .legacy-table tr { break-inside: avoid; }
}