/* 1.4.0 (S): the Secret item type (view + editor). Shared tokens from app.css. */

/* the view */
.sec-meta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0 0 var(--s3); }
.sec-ask-badge { gap: 4px; }
.sec-ask-badge .ico { width: 13px; height: 13px; }
.sec-kv .k { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.sec-kv .k .badge { font-weight: 600; }
.sec-kv .v .txt.secret { font-size: .95rem; }
.sec-kv.multi { align-items: start; }
.sec-kv.multi .tools { align-self: start; padding-top: var(--s1); }
.sec-pre { margin: var(--s1) 0 0; padding: var(--s2) var(--s3); width: 100%; max-height: 360px; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font: .82rem/1.45 var(--mono); white-space: pre; color: var(--text); }
.sec-pre.masked { color: var(--muted); white-space: pre-wrap; overflow: hidden; }
.sec-actions { margin-top: var(--s2); }
.sec-offer { align-items: flex-start; }
.sec-offer strong { display: block; color: var(--text); margin-bottom: var(--s1); }
.sec-offer p { margin: 0 0 var(--s2); }
.sec-offer .btns { display: flex; gap: var(--s2); }

/* the editor */
.sec-kinds { margin: 0; }
.sec-kind-hint { margin-top: var(--s1); }
.sec-env { margin: 0 0 var(--s4); border: 1px solid var(--border); border-radius: var(--radius-ctl); background: var(--surface); }
.sec-env > summary { display: flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s4); cursor: pointer; list-style: none; font-weight: 600; flex-wrap: wrap; }
.sec-env > summary::-webkit-details-marker { display: none; }
.sec-env[open] > summary .more-chev { transform: rotate(90deg); }
.sec-env-sum { font-weight: 400; margin-left: auto; }
.sec-env-body { padding: 0 var(--s4) var(--s4); }
.sec-env-body .btns { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin: var(--s2) 0; }
.sec-env-in { min-height: 120px; }
.sec-values { display: flex; flex-direction: column; gap: var(--s2); }
.sec-row { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-ctl); background: var(--surface); }
.sec-row-top { display: flex; gap: var(--s2); align-items: center; min-width: 0; }
.sec-row-top > .input { flex: 1 1 auto; min-width: 0; }
.sec-chip-slot { display: contents; }
.sec-row-top .sec-kind { max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.sec-lock { display: inline-flex; align-items: center; gap: var(--s2); flex: none; color: var(--muted); cursor: pointer; }
.sec-row-top .btn.icon[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sec-vbox .input-in { --in-n: 1; }
.sec-area { min-height: 110px; font-size: .85rem; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.sec-mask { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 64px; padding: var(--s2) var(--s3); border: 1px dashed var(--border); border-radius: var(--radius-ctl); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.sec-mask:hover { border-color: var(--accent); }
.sec-add { margin-top: var(--s2); }
.sec-area-tools { display: flex; justify-content: flex-end; margin-top: var(--s1); }
.sec-opts { margin-top: var(--s2); }

/* the "ask again" dialog */
.sec-pin { letter-spacing: .3em; font-size: 1.1rem; max-width: 220px; }
.sec-bio { margin: 0 0 var(--s3); }

@media (max-width: 760px) {
  .sec-row-top { flex-wrap: wrap; }
  .sec-row-top > .input { flex-basis: 100%; }
  .sec-env-sum { margin-left: 0; flex-basis: 100%; padding-bottom: var(--s2); }
}