/* Uses the existing PIXIE palette, type and panel shell. */
.tools-page .hero-copy { max-width: none; padding: 18px 20px 12px; }
.tools-page .hero-copy p { max-width: 70ch; }
.tools-page [hidden] { display: none !important; }
.tools-content { padding: 20px; overflow-y: auto; min-height: 0; }
.tools-content h3 { font-family: var(--font-sans); font-size: 19px; line-height: 1.3; }
.tools-task-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 20px; }
.tools-card { border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); padding: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.tools-card p { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--clr-dim); }
.tools-content button, .tools-content a { font: inherit; color: var(--clr-text); border: 1px solid var(--clr-border); background: var(--clr-panel); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 44px; cursor: pointer; text-align: left; text-decoration: none; }
.tools-content button:hover, .tools-content a:hover { background: var(--clr-hover); border-color: var(--clr-secondary); }
.tools-content button[aria-pressed="true"] { border-color: var(--clr-secondary); background: var(--clr-hover); }
.tools-task-grid .tools-card > button, .tools-task-grid .tools-card > a { margin-top: auto; }
.tools-settings-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.tools-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tools-card .tools-hint { font-size: 14px; }
.tools-status { width: 100%; }
.tools-status > div { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--clr-border); padding: 9px 0; font-size: 12px; }
.tools-status dd { text-align: right; }
.tools-advanced { margin-top: 18px; border: 1px solid var(--clr-border); padding: 14px; border-radius: var(--radius-md); }
.tools-advanced summary { min-height: 44px; cursor: pointer; display: list-item; align-content: center; }
.tools-advanced p { color: var(--clr-dim); margin: 8px 0 16px; }
#panel-router > .story-router { overflow-y: auto; min-height: 0; margin: 0; padding: 20px; }
.tools-page.a11y-large-text .tools-card p { font-size: 18px; }
.tools-page.a11y-large-text .tools-status > div { font-size: 15px; }
@media (max-width: 1100px) { .tools-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  .tools-task-grid, .tools-settings-grid { grid-template-columns: 1fr; }
  .tools-content { padding: 12px; }
  .tools-status > div { flex-direction: column; gap: 4px; }
  .tools-status dd { text-align: left; }
}

/* A settings page, with natural page scrolling and no clipped file controls. */
.tools-page .os, .tools-page .workspace, .tools-page .desktop { height: auto; min-height: 0; overflow: visible; }
.tools-page .os { min-height: 100dvh; }
.tools-page .workspace { display: block; }
.tools-page .dock, .tools-page .session, .tools-page .status-static, .tools-page .desktop-grid, .tools-page .eyebrow, .tools-page .meters, .tools-page .taskbar { display: none !important; }
.tools-page .topbar { background: var(--clr-base); }
.tools-page .hero-copy { width: 100%; max-width: 900px; margin: 0 auto; padding: 18px 20px; }
.tools-page .panels { display: block; overflow: visible; flex: none; width: calc(100% - 32px); max-width: 860px; margin: 0 auto 32px; }
.tools-page .panel { position: relative; inset: auto; height: auto; overflow: visible; box-shadow: none; }
.tools-page .panel-head { min-height: 52px; }
.tools-page .close-panel { width: auto; height: auto; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; }
.tools-page .tools-content { overflow: visible; display: grid; gap: 18px; }
.tools-page .tools-card { background: transparent; border: 0; border-bottom: 1px solid var(--clr-border); border-radius: 0; padding: 0 0 18px; }
.tools-page .tools-advanced { margin: 0; padding: 0; border: 0; }
.tools-page .decks { flex: none; display: grid; grid-template-columns: 1fr 1fr; height: auto; overflow: visible; }
.tools-page .deck { min-height: 0; padding: 20px; align-items: flex-start; border: 0; }
.tools-page .deck strong { text-align: left; overflow-wrap: anywhere; }
.tools-page .mixer { grid-column: 1 / -1; order: 3; width: auto; display: flex; justify-content: space-around; padding: 20px; }
.tools-page .mixer > div { flex: 1; max-width: 200px; }
.tools-page .platter { display: none; }
.tools-page .transport { flex-wrap: wrap; }
.tools-page .transport [data-action="play"], .tools-page .transport [data-action="cue"] { display: none; }
.tools-page .stream-controller { margin: 12px 20px 20px; padding: 14px; background: transparent; border-color: var(--clr-border); }
.tools-page .stream-controller summary { min-height: 44px; cursor: pointer; align-content: center; }
.tools-page .stream-head { margin-top: 16px; }
.tools-page button:disabled { opacity: .45; cursor: default; }
.tools-page .narrative-shell { max-height: none; }
@media (max-width: 650px) {
  .tools-page .decks { grid-template-columns: 1fr; }
  .tools-page .mixer { flex-direction: column; gap: 16px; }
  .tools-page .mixer > div { max-width: none; }
}
.tools-page .mixer { flex-direction: row; }
.tools-page .deck.deck-active { box-shadow: none; background: transparent; }
.tools-page .transport { display: none; }
@media (max-width: 650px) { .tools-page .mixer { flex-direction: column; } }