/* ───────────────────────────────────────────────────────────────────────────
   admin-demo-links.css — Admin → Demo links (demo profiles PR C, design §4.2/§7.2).
   Tokens only (css/penna-tokens.css), so light and dark both work. Loaded after
   main.css and dashboard.css, which own .btn, .card, the form fields, .sr-only and
   the .data-table the links sit in; this file only lays the page out. Nothing
   here restyles a shared class.
   ─────────────────────────────────────────────────────────────────────────── */

.dl-page { max-width: 1080px; margin: 0 auto; padding: var(--space-8) var(--space-5) 90px; }
/* The hidden attribute has to win over every display rule below. */
.dl-page [hidden] { display: none !important; }
.dl-page:focus { outline: none; }

.dl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-1); }
.dl-head h1 { font-size: 1.5rem; }
.dl-back { font-size: .86rem; color: var(--gold-text); text-decoration: none; }
.dl-back:hover { text-decoration: underline; }
.dl-sub { max-width: 70ch; margin: 0 0 var(--space-6); font-size: .9rem; line-height: 1.5; color: var(--muted); }

.dl-state { padding: var(--space-6) var(--space-1); font-size: .9rem; text-align: center; color: var(--muted); }
.dl-state.is-error { color: var(--danger); }
.dl-state .btn { margin-top: var(--space-3); }

.dl-card { margin: 0 0 var(--space-4); }
.dl-card h2 { margin: 0 0 var(--space-3); font-size: 1.05rem; }
.dl-card:focus,
.dl-card h2:focus { outline: none; }
.dl-subhead { margin: var(--space-5) 0 var(--space-1); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dl-faint { color: var(--muted); }

/* ── Status line ─────────────────────────────────────────────────────────── */
.dl-status { margin: 0 0 var(--space-4); }
.dl-status__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); font-size: .9rem; }
.dl-status__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--success); }
.dl-status.is-off .dl-status__dot { background: var(--warning); }
.dl-status__live { color: var(--muted); }
.dl-status__note { margin: var(--space-1) 0 0; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }

/* ── Make a link ─────────────────────────────────────────────────────────── */
.dl-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.dl-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dl-field--wide { grid-column: 1 / -1; }
.dl-field [aria-invalid="true"] { border-color: var(--danger); }
.dl-hint { margin: 2px 0 0; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.dl-error { grid-column: 1 / -1; padding: var(--space-2) var(--space-3); border: 1px solid var(--danger-br); border-radius: var(--radius); background: var(--danger-bg); color: var(--danger); font-size: .86rem; line-height: 1.4; }
.dl-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── The new link, shown once ────────────────────────────────────────────── */
.dl-new { border-color: var(--success-br); background: var(--success-bg); }
.dl-warn { margin: 0 0 var(--space-3); padding-left: var(--space-3); border-left: 3px solid var(--warning); font-size: .9rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.dl-url-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.dl-url-host { flex: 1 1 320px; min-width: 0; }
.dl-url { font-family: var(--mono); font-size: .85rem; }
.dl-note { margin: var(--space-2) 0 0; font-size: .84rem; color: var(--ink-2); }
.dl-note:empty { margin: 0; }
.dl-new .dl-actions { margin-top: var(--space-3); }

/* ── The links table (shared .data-table, see css/dashboard.css) ─────────── */
.dl-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.dl-list-head h2 { margin: 0; }
/* The wrapper scrolls the wide table sideways. It must also be the containing block of the
   .sr-only "Actions" heading: an absolutely positioned child of a scroll box is only clipped
   by it when the box is positioned, otherwise it sits outside the table and widens the page. */
.dl-page .data-table-wrap { position: relative; }
table.data-table.dl-table { min-width: 780px; }
table.data-table.dl-table th,
table.data-table.dl-table td { padding: var(--space-3); }
.dl-row { cursor: pointer; }
.dl-row.is-selected td { background: var(--accent-light); }
.dl-open { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-align: left; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.dl-open:hover { text-decoration: underline; }
.dl-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-sm); }
.dl-open.is-empty { font-weight: 400; font-style: italic; color: var(--muted); }
.dl-code { margin-top: 2px; font-family: var(--mono); font-size: .76rem; color: var(--muted); }

.dl-badge { display: inline-block; padding: 2px 8px; border: 1px solid transparent; border-radius: 999px; font-family: var(--mono); font-size: .65rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.dl-badge--open,
.dl-badge--live { background: var(--success-bg); border-color: var(--success-br); color: var(--success); }
.dl-badge--used,
.dl-badge--ended { background: var(--warning-bg); border-color: var(--warning-br); color: var(--warning); }
.dl-badge--expired,
.dl-badge--erased { background: var(--paper-lo); border-color: var(--rule); color: var(--muted); }
.dl-badge--revoked { background: var(--danger-bg); border-color: var(--danger-br); color: var(--danger); }

/* ── One link's demos ────────────────────────────────────────────────────── */
.dl-detail-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.dl-detail-head h2 { margin: 0; overflow-wrap: anywhere; }
.dl-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dl-demo { margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.dl-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); font-size: .88rem; }
.dl-facts dt { padding-top: 2px; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dl-facts dd { min-width: 0; overflow-wrap: anywhere; }
.dl-chips { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.dl-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--paper-lo); font-size: .8rem; color: var(--ink-2); }
.dl-chip b { margin-left: var(--space-1); color: var(--ink); }

/* ── The revoke dialog's extras (the dialog itself: css/confirm-dialog.css) ─ */
.dl-confirm-hint { margin: 0 0 var(--space-3); font-size: .82rem; line-height: 1.4; color: var(--muted); }

/* ── Phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .dl-page { padding: var(--space-5) var(--space-4) 90px; }
  .dl-form { grid-template-columns: minmax(0, 1fr); }
  .dl-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dl-facts dd { margin-bottom: var(--space-2); }
}