/* ============================================================
   The Development tab of a product (D-061) — the sub-section bar, the
   overview cards, the backups, the timeline, the external links, the
   public page switch, and the public download page /get/KEY/PKEY/.
   Only theme variables, no hardcoded colors. The `dev-` prefix is this
   area's (the public page uses `pub-dl-`); the requests (`dpr-`) and the
   versions (`pv-`) keep their own stylesheets, since their partials moved
   here unchanged. The small helpers of tools.css (`tls-inline`,
   `tls-actions`, `tls-notes`, `tls-format`) are reused.

   Every text on these pages (versions, labels, summaries, addresses) is
   PLAIN TEXT escaped by the view; multi-line text keeps its line breaks
   HERE, by white-space: pre-wrap — never by markup built out of it.
   ============================================================ */

/* ── The header: « Development · Versions » ── */
.dev-head__sep     { color: var(--color-text-muted); font-weight: var(--font-weight-normal); margin: 0 var(--space-1); }
.dev-head__section { color: var(--color-primary); }

/* ── The sub-section bar, under the product tabs ── */
.dev-subtabs {
    margin:          calc(-1 * var(--space-2)) 0 var(--space-5);
    overflow-x:      auto;
    scrollbar-width: none;
}
.dev-subtabs::-webkit-scrollbar { display: none; }
.dev-subtabs__list {
    display:       flex;
    gap:           var(--space-1);
    padding:       var(--space-1);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-full);
    background:    var(--color-bg-muted);
    width:         max-content;
    max-width:     100%;
}
.dev-subtabs__link {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    color:         var(--color-text-muted);
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-medium);
    white-space:   nowrap;
    transition:    color var(--transition), background-color var(--transition);
}
.dev-subtabs__link .icon { font-size: 18px; }
.dev-subtabs__link:hover { color: var(--color-text); background-color: var(--color-bg-card); }
.dev-subtabs__link.is-active {
    color:            var(--color-text-on-primary);
    background-color: var(--color-primary);
    box-shadow:       var(--shadow-sm);
}
.dev-subtabs__link.is-active .icon { color: inherit; }
.dev-subtabs__link:focus-visible { outline-offset: 2px; }

/* ── Intro lines and the « people only » mark ── */
.dev-intro {
    display:          flex;
    flex-wrap:        wrap;
    align-items:      center;
    gap:              var(--space-2);
    margin:           0 0 var(--space-4);
    padding:          var(--space-3) var(--space-4);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-bg-muted);
    color:            var(--color-text-muted);
    font-size:        var(--font-size-sm);
}
.dev-intro > .icon:first-child { color: var(--color-primary); flex: 0 0 auto; }
.dev-people-only {
    display:          inline-flex;
    align-items:      center;
    gap:              var(--space-1);
    margin-left:      auto;
    padding:          2px var(--space-2);
    border:           1px solid var(--color-warning-border);
    border-radius:    var(--radius-full);
    background-color: var(--color-warning-bg);
    color:            var(--color-warning-text);
    font-size:        var(--font-size-xs);
    font-weight:      var(--font-weight-semibold);
    white-space:      nowrap;
}
.dev-note { margin: var(--space-3) 0 0; }
.dev-ai-hint {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-2);
    margin:      var(--space-4) 0 0;
    overflow-wrap: anywhere;
}

/* ── Badges shared by the sub-sections ── */
.dev-badge {
    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;
}
.dev-badge--ok, .dev-badge--on, .dev-badge--link-active, .dev-badge--stable
    { background-color: var(--color-success-bg); color: var(--color-success-text); }
.dev-badge--failed, .dev-badge--link-revoked
    { background-color: var(--color-error-bg); color: var(--color-error-text); }
.dev-badge--off, .dev-badge--link-used, .dev-badge--link-exhausted, .dev-badge--link-expired
    { background-color: var(--color-badge-default-bg); color: var(--color-badge-default-text); }
.dev-platform {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-1);
    color:       var(--color-text-muted);
    font-size:   var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}
.dev-code {
    font-family:   var(--font-family-mono);
    font-size:     var(--font-size-xs);
    overflow-wrap: anywhere;
}
.dev-pre {
    margin:        0;
    padding:       var(--space-3);
    border-radius: var(--radius-md);
    background:    var(--color-bg-muted);
    font-size:     var(--font-size-xs);
    line-height:   1.6;
    white-space:   pre-wrap;
    overflow-wrap: anywhere;
}

/* ── Copy rows: a readonly address and its button ── */
.dev-copy {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-2);
    min-width:   0;
}
.dev-copy__input {
    flex:        1 1 260px;
    min-width:   0;
    font-family: var(--font-family-mono);
    font-size:   var(--font-size-xs);
}
.dev-copy__btn { flex: 0 0 auto; }
.dev-copy__btn.is-done   { color: var(--color-success-text); }
.dev-copy__btn.is-failed { color: var(--color-error-text); }

/* ── The overview grid ── */
.dev-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:                   var(--space-4);
    margin-bottom:         var(--space-4);
}
.dev-card { margin: 0; min-width: 0; }
.dev-card--production { border-color: var(--color-success-border); }
.dev-card--attention  { border-color: var(--color-warning-border); }
.dev-card__head {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     baseline;
    justify-content: space-between;
    gap:             var(--space-2);
}
.dev-card__head .prj-card-title { display: inline-flex; align-items: center; gap: var(--space-2); }
.dev-card__more { font-size: var(--font-size-sm); white-space: nowrap; }
.dev-card__actions {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-2);
    margin-top:  var(--space-3);
}
.dev-big {
    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;
}
.dev-strong {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   center;
    gap:           var(--space-2);
    margin:        0 0 var(--space-2);
    font-weight:   var(--font-weight-semibold);
    overflow-wrap: anywhere;
}
.dev-meta {
    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);
    overflow-wrap: anywhere;
}
.dev-meta > span { display: inline-flex; align-items: center; gap: var(--space-1); }
.dev-meta--ok { color: var(--color-success-text); }
/* An icon + one sentence (« Approved by … — valid until … »): the sentence wraps
   BESIDE the icon. With the row's flex-wrap a long sentence dropped as a whole
   under the icon, leaving the icon alone on an empty line (29/09/26). */
.dev-meta--ok, .dev-meta--line { flex-wrap: nowrap; align-items: flex-start; }
.dev-meta--ok > .icon, .dev-meta--line > .icon { flex: none; margin-top: 0.15em; }
.dev-empty { margin: 0; }
.dev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.dev-list__item {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-2);
    min-width:   0;
    font-size:   var(--font-size-sm);
}
.dev-list__main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ── Backups ── */
.dev-backups { list-style: none; margin: 0; padding: 0; }
.dev-backup {
    padding:    var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
}
.dev-backup__main {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-2);
    margin:      0 0 var(--space-2);
}
.dev-backup__kind  { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.dev-backup__label { overflow-wrap: anywhere; }
.dev-backup__error {
    margin:        var(--space-2) 0;
    padding:       var(--space-3);
    border:        1px solid var(--color-error-border);
    border-radius: var(--radius-md);
    background:    var(--color-error-bg);
    color:         var(--color-error-text);
    font-size:     var(--font-size-sm);
    white-space:   pre-wrap;
    overflow-wrap: anywhere;
}
.dev-backup__pieces { margin-top: var(--space-2); }
.dev-pieces td { font-size: var(--font-size-sm); }

/* ── The timeline ── */
.dev-filter {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-1);
    margin:    0 0 var(--space-4);
}
.dev-filter__link {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       var(--space-1) var(--space-3);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-full);
    color:         var(--color-text-muted);
    font-size:     var(--font-size-sm);
    white-space:   nowrap;
}
.dev-filter__link:hover     { color: var(--color-text); border-color: var(--color-border-strong); }
.dev-filter__link.is-active { color: var(--color-primary-dark); border-color: var(--color-primary); background-color: var(--color-primary-lighter); }
.dev-timeline { list-style: none; margin: 0; padding: var(--space-2) var(--space-5) var(--space-4); }
.dev-event {
    position:    relative;
    display:     flex;
    gap:         var(--space-3);
    padding:     var(--space-3) 0 var(--space-3) var(--space-2);
}
.dev-event + .dev-event { border-top: 1px solid var(--color-border); }
.dev-event__icon {
    flex:             0 0 auto;
    display:          grid;
    place-items:      center;
    width:            32px;
    height:           32px;
    border-radius:    var(--radius-full);
    background-color: var(--color-bg-muted);
    color:            var(--color-text-muted);
    font-size:        18px;
}
.dev-event--requests   .dev-event__icon { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
.dev-event--production .dev-event__icon { background-color: var(--color-success-bg); color: var(--color-success-text); }
.dev-event--versions   .dev-event__icon { background-color: var(--color-primary-lighter); color: var(--color-primary-dark); }
.dev-event--links      .dev-event__icon,
.dev-event--public     .dev-event__icon { background-color: var(--color-primary-lighter); color: var(--color-primary-dark); }
.dev-event__body { min-width: 0; flex: 1 1 auto; }
.dev-event__head {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     baseline;
    justify-content: space-between;
    gap:             var(--space-2);
    margin:          0 0 2px;
}
.dev-event__type { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.dev-event__time { color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; }
.dev-event__summary { margin: 0 0 2px; font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.dev-event__who {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-1);
    margin:      0;
    color:       var(--color-text-muted);
    font-size:   var(--font-size-xs);
}

/* ── External links ── */
.dev-links { list-style: none; margin: 0; padding: 0; }
.dev-link {
    padding:    var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
}
.dev-link[data-link-state="active"] { background-color: color-mix(in srgb, var(--color-success-bg) 35%, transparent); }
.dev-link__main {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-2);
    margin:      0 0 var(--space-2);
}
.dev-link__mode   { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); }
.dev-link__target { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
.dev-link__label  { font-size: var(--font-size-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.dev-link__dead   { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.dev-link__actions { margin-top: var(--space-2); }
.dev-link .dev-copy { margin-bottom: var(--space-2); }

.dev-form__row {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:                   var(--space-4);
}
.form-label { display: block; margin-bottom: var(--space-2); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
.dev-radios { display: grid; gap: var(--space-2); }
.dev-radio {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-2);
    padding:       var(--space-2) var(--space-3);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor:        pointer;
}
.dev-radio:has(input:checked) { border-color: var(--color-primary); background-color: var(--color-primary-lighter); }
.dev-radio input { margin-top: 3px; }
.dev-radio__text { display: grid; gap: 2px; font-size: var(--font-size-sm); }
.dev-radio__text .form-hint { margin: 0; }

/* ── The public page switch ── */
.dev-public--on { border-color: var(--color-success-border); }
.dev-public__form { margin-top: var(--space-4); }
.dev-preview__name { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.dev-preview__stores { margin-top: var(--space-3); }
.dev-preview__store { cursor: default; }

/* ── The public download page: /get/KEY/PKEY/ ── */
.pub-dl { max-width: 880px; margin: 0 auto; }
.pub-dl__head {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-4);
    margin:      0 0 var(--space-6);
}
.pub-dl__icon {
    flex:             0 0 auto;
    display:          grid;
    place-items:      center;
    width:            56px;
    height:           56px;
    border-radius:    var(--radius-lg);
    background-color: var(--prj-color, var(--color-primary));
    color:            var(--color-text-on-primary);
}
.pub-dl__icon .icon { font-size: 30px; }
.pub-dl__title { margin: 0 0 var(--space-2); font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pub-dl__desc  { margin: 0; color: var(--color-text-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.pub-dl__card {
    margin:        0 0 var(--space-4);
    padding:       var(--space-5);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:    var(--color-bg-card);
}
.pub-dl__card--stable { border-color: var(--color-success-border); }
.pub-dl__row  { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.pub-dl__main { flex: 1 1 320px; min-width: 0; }
.pub-dl__cta  { flex: 0 0 auto; }
.pub-dl__kicker { margin: 0 0 var(--space-2); }
.pub-dl__h2   { margin: 0 0 var(--space-2); font-size: var(--font-size-2xl); overflow-wrap: anywhere; }
.pub-dl__text { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.pub-dl__facts {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:                   var(--space-2) var(--space-4);
    margin:                0;
    font-size:             var(--font-size-sm);
}
.pub-dl__facts dt { color: var(--color-text-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.pub-dl__facts dd { margin: 0; }
.pub-dl__facts--sm { font-size: var(--font-size-xs); }
.pub-dl__sha { grid-column: 1 / -1; }
.pub-dl__sha code { font-family: var(--font-family-mono); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.pub-dl__devices {
    list-style:            none;
    margin:                0;
    padding:               0;
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   var(--space-3);
}
.pub-dl__device {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    padding:        var(--space-4);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-md);
    background:     var(--color-bg);
}
.pub-dl__device-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pub-dl__device-icon { font-size: 22px; color: var(--color-primary); }
.pub-dl__device-name { font-weight: var(--font-weight-semibold); }
.pub-dl__device-version { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
.pub-dl__device .btn { margin-top: auto; justify-content: center; }
.pub-dl__foot { margin: var(--space-6) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); text-align: center; }

@media (max-width: 640px) {
    .dev-big { font-size: var(--font-size-2xl); }
    .dev-people-only { margin-left: 0; }
    .pub-dl__head { flex-direction: column; }
    .pub-dl__cta .btn { width: 100%; justify-content: center; }
}