/* ============================================================
   Versions of a product (D-059) — the production build, the fixed links,
   the history table and the upload form. Only theme variables, no
   hardcoded colors. The `pv-` prefix is this area's: no rule is shared
   with the media (`md-`) or the deploy requests (`dpr-`); the small
   helpers of tools.css (`tls-inline`, `tls-actions`, `tls-notes`,
   `tls-format`, `tls-upload`) are reused as the media page reuses them.

   Every text on this page (versions, notes, labels, file names) is PLAIN
   TEXT escaped by the view; the notes keep their line breaks HERE, by
   white-space: pre-wrap — never by markup built out of what was typed.
   ============================================================ */

/* ── The rule, under the header ── */
.pv-rule {
    display:          flex;
    align-items:      flex-start;
    gap:              var(--space-2);
    margin:           0 0 var(--space-4);
    padding:          var(--space-3) var(--space-4);
    border:           1px solid var(--color-warning-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-warning-bg);
    color:            var(--color-warning-text);
    font-size:        var(--font-size-sm);
    font-weight:      var(--font-weight-medium);
}
.pv-rule .icon { flex: 0 0 auto; margin-top: 1px; }

/* ── Channel badges ── */
.pv-channel {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       2px var(--space-2);
    border-radius: var(--radius-full);
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-medium);
    white-space:   nowrap;
    line-height:   1.4;
}
.pv-channel::before {
    content:          '';
    width:            6px;
    height:           6px;
    border-radius:    var(--radius-full);
    background-color: currentColor;
}
.pv-channel--dev        { background-color: var(--color-badge-default-bg); color: var(--color-badge-default-text); }
.pv-channel--test       { background-color: var(--color-warning-bg);       color: var(--color-warning-text); }
.pv-channel--production { background-color: var(--color-success-bg);       color: var(--color-success-text); }

/* ── The production build ── */
.pv-production .prj-card-title { display: inline-flex; align-items: center; gap: var(--space-2); }
.pv-hero {
    display:     flex;
    flex-wrap:   wrap;
    align-items: flex-start;
    gap:         var(--space-4);
}
.pv-hero__main { flex: 1 1 320px; min-width: 0; }
.pv-hero__version {
    margin:        0 0 var(--space-2);
    font-size:     var(--font-size-3xl);
    font-weight:   var(--font-weight-bold);
    line-height:   1.1;
    overflow-wrap: anywhere;
}
.pv-hero__meta, .pv-hero__by, .pv-hero__set {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-3);
    margin:      0 0 var(--space-2);
    color:       var(--color-text-muted);
    font-size:   var(--font-size-sm);
}
.pv-hero__set { color: var(--color-success-text); gap: var(--space-2); }
.pv-hero__actions {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-2);
}
.pv-empty { margin: 0; }

/* A sha256 is 64 characters: the cell shows twelve, the title holds the rest. */
.pv-sha {
    font-family: var(--font-family-mono);
    font-size:   var(--font-size-xs);
    color:       var(--color-text-muted);
    white-space: nowrap;
}

/* The notes, as typed: line breaks kept by CSS, never by markup. */
.pv-notes {
    margin:        var(--space-2) 0 0;
    padding:       var(--space-3);
    border-radius: var(--radius-md);
    background:    var(--color-bg-muted);
    font-size:     var(--font-size-sm);
    white-space:   pre-wrap;
    overflow-wrap: anywhere;
}

/* ── The fixed links ── */
.pv-links__lead { margin: 0 0 var(--space-3); }
.pv-fixed { margin: 0; display: grid; gap: var(--space-3); }
.pv-fixed__row {
    display:   grid;
    gap:       var(--space-1);
    min-width: 0;
}
.pv-fixed__row dt {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}
.pv-fixed__row dd { margin: 0; display: grid; gap: var(--space-1); min-width: 0; }
.pv-fixed__url {
    width:       100%;
    font-family: var(--font-family-mono);
    font-size:   var(--font-size-xs);
}
.pv-fixed__state { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.pv-fixed__row[data-fixed-has="n"] .pv-fixed__url { opacity: .6; }

/* ── Where it lives (the product links) ── */
.pv-stores__list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--space-2);
}

/* ── The history table ── */
.pv-history__head {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     baseline;
    justify-content: space-between;
    gap:             var(--space-2);
}
.pv-history__head .form-hint { margin: 0; }
.pv-table td { vertical-align: top; }
.pv-table__version strong { font-size: var(--font-size-base); }
.pv-table__notes { margin-top: var(--space-1); }
.pv-table__file {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}
.pv-table__original {
    font-size:     var(--font-size-xs);
    color:         var(--color-text-muted);
    overflow-wrap: anywhere;
    max-width:     24ch;
}
.pv-table__size { white-space: nowrap; }
.pv-table__by { display: flex; flex-direction: column; gap: 2px; font-size: var(--font-size-sm); }
.pv-table__by time { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.pv-table__actions { white-space: nowrap; text-align: right; }
.pv-table__actions .tls-actions { justify-content: flex-end; }
.pv-row--production td { background-color: var(--color-success-bg); }
.pv-production-mark {
    display:        inline-flex;
    align-items:    center;
    margin-left:    var(--space-1);
    color:          var(--color-success-text);
    vertical-align: middle;
}

/* ── The upload form ── */
.pv-upload__lead { margin: 0 0 var(--space-3); }
.pv-upload__row { align-items: flex-start; }
.pv-settings-hint { margin: var(--space-3) 0 0; }

@media (max-width: 640px) {
    .pv-hero__version { font-size: var(--font-size-2xl); }
    .pv-table__actions { white-space: normal; }
}