/* ============================================================
   Tools — catalog, tool page, versions table, upload form, and the
   "Tools used" picker of the project forms (owner: tools agent).
   A tool is a project row (D-017): cards, key badge, status pill and
   forms reuse projects.css (.prj-*); only what is new lives here.
   Only theme variables: both themes come from vars.css / app.css.
   ============================================================ */

/* ── Visibility pill (staff see it on cards and the tool page) ─ */
.tls-vis {
    display:       inline-flex;
    align-items:   center;
    padding:       2px var(--space-2);
    border-radius: var(--radius-full);
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-medium);
    line-height:   1.6;
    white-space:   nowrap;
}
.tls-vis--staff { background-color: var(--color-badge-default-bg); color: var(--color-badge-default-text); }
.tls-vis--users { background-color: var(--color-info-bg);          color: var(--color-info-text); }

/* ── Catalog ──────────────────────────────────────────────── */
.tls-search { margin-bottom: var(--space-5); overflow: visible; }
.tls-search__body {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap:                   var(--space-3) var(--space-4);
    align-items:           end;
    padding:               var(--space-4) var(--space-5);
}
.tls-search .form-group { margin-bottom: 0; }
.tls-search__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* The card is an <article> with its own links (name, download): hover only lifts it. */
.tls-card__name { margin: 0; }
.tls-card__link { color: var(--color-text); }
.tls-card__link:hover { color: var(--color-primary); }
.tls-card__link::after { content: ''; position: absolute; inset: 0; }   /* whole card clickable */
.tls-card__meta { flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.tls-card__ver { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-family-mono); }
.tls-card__ver--none { font-family: inherit; font-style: italic; }
.tls-card__dl { position: relative; z-index: 1; }   /* above the stretched name link */

/* ── Tool page ────────────────────────────────────────────── */
.tls-aside { gap: var(--space-6); }
.tls-current__row {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-4);
    margin-bottom:   var(--space-4);
}
.tls-current__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.tls-current__version {
    font-family: var(--font-family-mono);
    font-size:   var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.tls-current__meta { color: var(--color-text-muted); font-size: var(--font-size-sm); }

.tls-sha {
    display:          flex;
    flex-wrap:        wrap;
    align-items:      center;
    gap:              var(--space-2) var(--space-3);
    padding:          var(--space-3);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-bg-muted);
}
.tls-sha__label { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.tls-sha__value {
    flex:          1 1 240px;
    min-width:     0;
    font-size:     var(--font-size-xs);
    overflow-wrap: anywhere;
    word-break:    break-all;
}

.tls-notes { margin-top: var(--space-4); }
.tls-notes summary { cursor: pointer; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.tls-notes__body {
    margin-top:    var(--space-2);
    white-space:   pre-wrap;
    overflow-wrap: anywhere;
    font-size:     var(--font-size-sm);
    line-height:   1.6;
}
.tls-notes--row { margin-top: var(--space-1); }
.tls-notes--row .tls-notes__body { max-width: 52ch; }

.tls-url {
    display:       block;
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius);
    background-color: var(--color-bg-muted);
    font-size:     var(--font-size-xs);
    overflow-wrap: anywhere;
    word-break:    break-all;
}
.tls-usedby { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--color-text); }
.tls-mono { font-family: var(--font-family-mono); }

/* ── Versions table ───────────────────────────────────────── */
.tls-tablewrap { overflow-x: auto; }
.tls-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.tls-table th {
    padding:        var(--space-2) var(--space-4);
    border-bottom:  1px solid var(--color-border);
    color:          var(--color-text-muted);
    font-size:      var(--font-size-xs);
    font-weight:    var(--font-weight-semibold);
    text-align:     left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space:    nowrap;
}
.tls-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.tls-table tr:last-child td { border-bottom: none; }
.tls-table tr.is-current td { background-color: var(--color-primary-lighter); }
.tls-num { text-align: right; font-variant-numeric: tabular-nums; }
.tls-nowrap { white-space: nowrap; }
.tls-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }
.tls-inline { display: inline; margin: 0; }
.tls-badge-current { margin-left: var(--space-2); background-color: var(--color-success-bg); color: var(--color-success-text); }
/* Archive format next to a version / backup (ZIP, RAR): quiet, mono. */
.tls-format {
    margin-left:    var(--space-2);
    padding:        0 var(--space-1);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius);
    color:          var(--color-text-muted);
    font-family:    var(--font-family-mono);
    font-size:      var(--font-size-xs);
    letter-spacing: 0.04em;
}
.tls-danger { color: var(--color-error-text); }
.tls-danger:hover { background-color: var(--color-error-bg); color: var(--color-error-text); }

/* ── Upload form ──────────────────────────────────────────── */
.tls-upload__row {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap:                   var(--space-4);
}
.tls-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--font-size-sm); }

/* ── Download visibility picker (new / edit tool) ─────────── */
.tls-visopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.tls-visopt { position: relative; display: block; cursor: pointer; }
.tls-visopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tls-visopt__box {
    display:          flex;
    align-items:      flex-start;
    gap:              var(--space-3);
    height:           100%;
    padding:          var(--space-3);
    border:           1px solid var(--color-input-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-input-bg);
    color:            var(--color-text-muted);
    font-size:        var(--font-size-sm);
    transition:       border-color var(--transition), background-color var(--transition);
}
.tls-visopt__text { display: flex; flex-direction: column; gap: 2px; }
.tls-visopt__text strong { color: var(--color-text); }
.tls-visopt:hover .tls-visopt__box { border-color: var(--color-border-strong); }
.tls-visopt input:checked + .tls-visopt__box { border-color: var(--color-primary); background-color: var(--color-primary-lighter); }
.tls-visopt input:focus-visible + .tls-visopt__box { outline: 2px solid var(--app-focus-ring); outline-offset: 2px; }
.tls-form .prj-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── "Tools used" picker in the project forms ─────────────── */
.prj-tools { margin: 0 0 var(--space-5); padding: 0; border: 0; min-width: 0; }
.prj-tools legend { margin-bottom: var(--space-2); padding: 0; }
.prj-tools__list { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.prj-tools__item {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-2) var(--space-3);
    padding:         var(--space-2) var(--space-3);
    border-bottom:   1px solid var(--color-border);
}
.prj-tools__item:last-child { border-bottom: none; }
.prj-tools__check { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; cursor: pointer; }
.prj-tools__name { overflow-wrap: anywhere; font-size: var(--font-size-sm); }
.prj-tools__version { width: auto; max-width: 100%; }
.prj-tools__link { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--color-text); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 599.98px) {
    .tls-search__body, .tls-upload__row, .tls-visopts { grid-template-columns: 1fr; }
    .tls-form .prj-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tls-table th, .tls-table td { padding: var(--space-2) var(--space-3); }
    .prj-tools__version { width: 100%; }
}