/* Content → Playlist (Porchlight 3.0e). One card per session. */
#pl-body { display: flex; flex-direction: column; gap: var(--s-3); }
#pl-body .prefs-note { margin: 0; }
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pl-head h3 { margin: 0; font-size: var(--t-md); font-weight: 600; }
.pl-time { font-size: var(--t-sm); color: var(--muted); display: flex; align-items: center; gap: var(--s-2); }
.pl-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.pl-slot { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-sm); color: var(--muted); }
.pl-time input, .pl-slot select, .pl-slot input[type=time] {
  font: inherit; font-size: var(--t-base); color: var(--ink); background: var(--paper);
  border: 1px solid var(--silver-1); border-radius: 12px; padding: 8px 10px; min-height: 44px; min-width: 0;
}
.pl-time input:focus-visible, .pl-slot select:focus-visible, .pl-slot input[type=time]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pl-time input:disabled, .pl-slot select:disabled, .pl-slot input[type=time]:disabled { color: var(--ink); opacity: 1; background: var(--silver-2); }
.pl-sentence { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.pl-warn { margin: 0; font-size: var(--t-sm); color: var(--rose); }
.pl-warn:empty { display: none; }
/* 1d: the automatic start, under the pickers. */
.pl-auto { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--muted); flex-wrap: wrap; }
.pl-auto input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--pink); }
.pl-auto input[type=time] { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--silver-1); border-radius: 12px; padding: 6px 10px; min-height: 40px; }
/* 3.0n: Sleep's Relax kinds, a drop-down with several choices. */
.pl-multi { border: 1px solid var(--silver-1); border-radius: 12px; padding: 8px 12px; }
.pl-multi summary { cursor: pointer; font-size: var(--t-sm); color: var(--ink); min-height: 28px; display: flex; align-items: center; }
.pl-multi[open] summary { margin-bottom: 6px; }
.pl-auto select { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--silver-1); border-radius: 12px; padding: 6px 10px; min-height: 40px; }
/* 3.0q: the Internet News card's fields and sports with teams. */
.pl-field { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-sm); color: var(--muted); }
.pl-field input, .pl-sport input[type=text] {
  font: inherit; font-size: var(--t-base); color: var(--ink); background: var(--paper);
  border: 1px solid var(--silver-1); border-radius: 12px; padding: 8px 10px; min-height: 44px; min-width: 0;
}
.pl-field input:disabled, .pl-sport input:disabled { opacity: 1; background: var(--silver-2); }
.pl-sport { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); align-items: center; margin-bottom: 6px; }
.pl-sport .pl-auto { flex-wrap: nowrap; }
/* 3.0r: recent briefs on the Internet News card. */
.pl-brief { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid var(--silver-1); font-size: var(--t-sm); }
.pl-brief audio { width: 100%; }
.pl-brief summary { cursor: pointer; color: var(--ink); }
/* 3.0u: Storytime's show ticks, each with its description underneath. */
.pl-show { align-items: flex-start; flex-wrap: nowrap; margin-top: var(--s-2); }
.pl-show strong { color: var(--ink); }
.pl-about { display: block; color: var(--muted); }