/* Bundles page and share page (ADR 0014). Builds on app.css tokens. */
.brand, a.btn { color: inherit; text-decoration: none; }
.bundles-main { grid-template-columns: minmax(0, 1fr); max-width: 1120px; }
.loading { text-align: center; margin: 48px 16px; }
.note.first { margin: -4px 0 12px; }
.gate { max-width: 420px; width: calc(100% - 32px); margin: 40px auto; }
.gate-form { display: grid; gap: 10px; margin-top: 12px; }
.gate-form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.gate-form .btn { justify-self: start; }
.bundles-main input:not([type=checkbox]):not([type=radio]), .bundles-main select, .bundles-main textarea,
.b-dlg input:not([type=checkbox]):not([type=radio]), .b-dlg select, .b-dlg textarea, .gate-form input {
  font: inherit; color: var(--text); background: var(--surface); width: 100%;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-height: 38px;
}
:is(.bundles-main, .b-dlg) :is(input, select, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.b-dlg textarea, .tx-edit { resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* Storage and progress bars */
.usage { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.usage-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--raised); overflow: hidden; max-width: 260px; }
.usage-bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .4s cubic-bezier(.16, 1, .3, 1); }
.usage-text { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .usage-bar span { transition: none; } }

/* The list */
.b-list { list-style: none; margin: 0; padding: 0; }
.b-list li + li { border-top: 1px solid var(--line); }
.b-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 8px; margin: 0 -8px;
  color: inherit; text-decoration: none; border-radius: 12px; min-width: 0;
}
.b-row:hover { background: var(--raised); }
.b-row:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.b-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.b-row-t { font-weight: 650; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-row-s { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.b-row-end { display: flex; align-items: center; gap: 10px; flex: none; }
.b-row-keep { color: var(--muted); font-size: 12px; white-space: nowrap; }
.chev-ic { color: var(--muted); display: inline-flex; }
@media (max-width: 640px) {
  .b-row { flex-wrap: wrap; }
  .b-row-end { width: 100%; justify-content: flex-start; }
  .chev-ic { display: none; }
}

/* One bundle */
.bundle-view { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.back {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; padding: 4px 6px; margin: -4px -6px; border-radius: 8px;
}
.back:hover { color: var(--text); }
.back:focus-visible { outline: 3px solid var(--accent); }
.b-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.b-title-row h2 { font-size: 22px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.b-title-row h2:focus { outline: none; }
.b-desc { margin: 8px 0 0; max-width: 70ch; white-space: pre-line; }
.b-facts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 16px 0 0; }
.b-facts > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.b-facts dt { font-size: 12px; color: var(--muted); }
.b-facts dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.b-progress { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.b-progress .usage-bar { max-width: 320px; }
.b-error { margin-top: 12px; font-size: 14px; }
#player { display: block; width: 100%; margin-top: 18px; }
#player[hidden] { display: none; }
.b-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.b-actions .count { margin-left: 2px; }

.b-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.b-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 860px) {
  /* One column: the links first (the user just pressed Public links),
     then the chapters and the transcript, and the net log last. */
  .b-grid { display: flex; flex-direction: column; align-items: stretch; }
  .b-col { display: contents; }
  .b-grid .share-card { order: -1; }
}

/* Chapters */
.chapters { list-style: none; margin: 0; padding: 0; }
.chap {
  appearance: none; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  width: 100%; padding: 8px; border-radius: 10px; min-height: 40px;
}
.chap:hover { background: var(--raised); }
.chap:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.chap[aria-current] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.chap[aria-current] .chap-at { color: var(--accent-ink); font-weight: 700; }
.chap-at, .chap-len { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.chap-who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chap-with { font-weight: 400; color: var(--muted); }

/* Transcript */
.tx-label { margin: 0; text-align: right; }
.tx-lines { list-style: none; margin: 0; padding: 0; }
.tx-lines li {
  display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: 4px 12px; align-items: start;
  padding: 10px 8px; border-radius: 10px;
}
.tx-lines li + li { border-top: 1px solid var(--line); }
.tx-lines li.now { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tx-at {
  appearance: none; border: 0; background: none; color: var(--muted); font-size: 13px; cursor: pointer;
  padding: 2px 4px; margin: -2px -4px; border-radius: 6px; text-align: left; font-variant-numeric: tabular-nums;
}
.tx-at:hover { color: var(--accent-ink); }
.tx-at:focus-visible { outline: 3px solid var(--accent); }
.tx-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tx-who { font-size: 13px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.tx-fixed { font-size: 11px; font-weight: 700; color: var(--ok); text-transform: uppercase; letter-spacing: .04em; cursor: help; }
.tx-text { margin: 0; max-width: 70ch; overflow-wrap: anywhere; }
.tx-text.low { text-decoration: underline dotted var(--warn); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.tx-text.none { color: var(--muted); font-style: italic; }
.tx-fix { align-self: center; }
.fix-acts { display: flex; gap: 8px; justify-content: flex-end; }
.tx-lines li.fixing { grid-template-columns: 4.5em minmax(0, 1fr); }
@media (max-width: 480px) {
  .tx-lines li { grid-template-columns: minmax(0, 1fr) auto; }
  .tx-lines li .tx-at { grid-column: 1; }
  .tx-lines li .tx-body { grid-column: 1 / -1; grid-row: 2; }
  .tx-lines li .tx-fix { grid-column: 2; grid-row: 1; }
  .tx-lines li.fixing { grid-template-columns: minmax(0, 1fr); }
}

/* Net log */
.net-wrap { overflow-x: auto; }
.net { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.net th, .net td { text-align: left; padding: 7px 6px; border-top: 1px solid var(--line); white-space: nowrap; }
.net thead th { border-top: 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.net tbody th { font-weight: 650; }
.net .num { text-align: right; }
.net-fn { font-weight: 400; color: var(--muted); }

/* Public links */
.share-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.link-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; }
.link-form > label:first-child { display: grid; gap: 4px; font-size: 13px; color: var(--muted); flex: 1 1 120px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 38px; cursor: pointer; }
.check input { width: 18px; height: 18px; }
.links { list-style: none; margin: 12px 0 0; padding: 0; }
.link-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.link-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.link-main b { font-size: 14px; font-weight: 600; }
.link-main small { color: var(--muted); font-size: 12px; }
.new-link {
  margin: 0 0 14px; padding: 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}
.new-link .set-label { display: block; margin-bottom: 6px; }
.new-link .note { margin-top: 6px; color: var(--text); }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; font-size: 13px !important; }

/* Dialogs */
dialog.b-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 22px 24px; }
.b-dlg form { display: flex; flex-direction: column; gap: 12px; }
.b-dlg h2 { font-size: 18px; margin: 0 0 4px; }
.fld { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.fld > :is(input, select, textarea) { color: var(--text); }
.seg { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.seg legend { width: 100%; margin-bottom: 6px; padding: 0; font-size: 13px; color: var(--muted); font-weight: 400; }
.seg label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; padding: 0 14px 0 10px; min-height: 36px;
}
.seg label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
#mode-from { display: grid; gap: 12px; }
#mode-from[hidden] { display: none; }
.tick-list {
  list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 12px;
}
.tick-list label {
  display: grid; grid-template-columns: auto 5.5em minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; min-height: 36px;
}
.tick-list label:hover { background: var(--raised); }
.tick-list label:has(input:checked) { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.tick-when, .tick-len { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tick-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-sum { margin: 0; font-size: 13px; color: var(--muted); min-height: 1.4em; font-variant-numeric: tabular-nums; }
.sel-sum.ok { color: var(--text); }
.sel-sum.bad { color: var(--busy); }
@media (max-width: 480px) {
  dialog.b-dlg { padding: 18px 16px; }
  .tick-list label { grid-template-columns: auto 4.5em minmax(0, 1fr); }
  .tick-len { display: none; }
}

/* The share page */
.share-main { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.share-top .station { font-weight: 600; }
.share-gone { max-width: 520px; margin: 48px auto; text-align: center; }
.share-gone h2 { font-size: 20px; margin-bottom: 8px; }
.share-foot { text-align: center; color: var(--muted); font-size: 12px; margin: 8px 16px 32px; }
@media (max-width: 760px) { .share-main { padding: 12px; } }