body {
  font-family: 'Consolas', 'Cascadia Mono', 'Courier New', 'SF Mono', monospace;
}
.font-display {
  font-family: 'Consolas', 'Cascadia Mono', 'Courier New', 'SF Mono', monospace;
  font-weight: 600;
}

.subject-item {
  transition: all 0.1s ease;
}
.subject-item:hover {
  background-color: #1e2937;
}
.subject-item.active {
  background-color: #1e2937;
  border-left: 3px solid #3b82f6;
}

.episode-row {
  transition: background-color 0.1s ease;
}
.episode-row:hover {
  background-color: #1e2937;
}

.note-entry {
  transition: all 0.1s ease;
}

/* Custom audio player styles */
.progress-container {
  height: 6px;
  background-color: #334155;
  border-radius: 9999px;
  cursor: pointer;
  position: relative;
}
.progress-bar {
  height: 6px;
  background-color: #10b981;
  border-radius: 9999px;
  transition: width 0.1s linear;
}
.player-btn {
  transition: all 0.1s ease;
}
.player-btn:active {
  transform: scale(0.92);
}
.skip-btn {
  background-color: #1e2937;
  transition: all 0.1s ease;
}
.skip-btn:hover {
  background-color: #334155;
}

/* ===================================================== */
/*  RESPONSIVE LAYOUT (mobile + desktop)                 */
/*  Pure CSS so it works regardless of Tailwind build.   */
/* ===================================================== */

/* Hamburger + backdrop are desktop-hidden by default */
#sidebar-toggle {
  display: none;
}
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(2px);
  z-index: 90;
}

/* Smooth drawer transition is always declared; only engaged on mobile */
#sidebar {
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@media (max-width: 820px) {
  /* ---- Header ---- */
  #app-header.ps-prompt-bar {
    margin: 0.5rem 0 0.75rem;
    padding: 0.4rem 0.65rem 0.4rem 0.9rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }
  #app-header .header-logo {
    min-width: 0;
  } /* allow text to shrink, not overflow */
  #app-header .header-logo > div:last-child {
    min-width: 0;
  }
  #app-header h1 {
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #app-header .header-logo p {
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #app-header .header-actions {
    gap: 0.4rem;
    flex-shrink: 0;
  }
  #app-header .header-actions .btn-label {
    display: none;
  } /* icon-only buttons */
  #export-btn,
  #new-subject-btn {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  /* ---- Hamburger ---- */
  #sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    color: #cbd5e1;
    background: transparent;
    border: 1px solid #334155;
    border-radius: 0.75rem;
  }
  #sidebar-toggle:active {
    background: #1e293b;
  }

  /* ---- Body becomes single column ---- */
  #app-body {
    display: block;
  }

  /* ---- Sidebar -> off-canvas drawer ---- */
  #sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 82%;
    max-width: 310px;
    min-height: 100vh;
    height: 100%;
    background: #020617; /* slate-950 */
    border-right: 1px solid #1e293b;
    z-index: 91;
    transform: translateX(-100%);
    overflow-y: auto;
    padding-top: 1rem;
  }
  body.sidebar-open #sidebar {
    transform: translateX(0);
  }
  body.sidebar-open #sidebar-backdrop {
    display: block;
  }
  body.sidebar-open {
    overflow: hidden;
  } /* lock background scroll */

  /* ---- Main content ---- */
  #main {
    padding: 1.25rem 1rem 6.5rem;
  }

  /* ---- Welcome screen fits viewport ---- */
  #welcome-screen {
    max-width: 100%;
  }

  /* ---- Topic header stacks ---- */
  .topic-head {
    flex-direction: column;
    align-items: stretch !important;
    gap: 1rem;
  }
  .topic-head .topic-title-wrap h2 {
    font-size: 1.6rem;
  }
  .topic-actions {
    width: 100%;
  }
  .topic-actions > button,
  .topic-actions #topic-curator-actions,
  .topic-actions #topic-curator-actions > button {
    flex: 1 1 0;
    width: 100%;
    justify-content: center;
  }

  /* ---- Episodes table -> stacked cards ---- */
  #episodes-table-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  #episodes-table-wrap table,
  #episodes-table-wrap tbody {
    display: block;
    width: 100%;
  }
  #episodes-table-wrap thead {
    display: none;
  }

  #episodes-table-wrap tbody.divide-y > tr + tr {
    border-top: none;
  }

  #episodes-table-wrap tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
    background: #0f172a; /* slate-900 */
    border: 1px solid #334155; /* slate-700 */
    border-radius: 1rem;
    padding: 0.95rem 1rem;
    margin-bottom: 0.75rem;
  }
  #episodes-table-wrap tr.bg-emerald-950\/30 {
    background: rgba(2, 44, 34, 0.45);
    border-color: rgba(16, 185, 129, 0.35);
  }

  /* Each cell becomes a flex child; clear table padding */
  #episodes-table-wrap td {
    display: flex;
    align-items: center;
    padding: 0 !important;
    width: auto;
  }

  #episodes-table-wrap td[data-cell='num'] {
    order: 1;
    font-size: 0.9rem;
  }
  #episodes-table-wrap td[data-cell='play'] {
    order: 2;
    margin-left: auto;
  }
  #episodes-table-wrap td[data-cell='title'] {
    order: 3;
    flex-basis: 100%;
    display: block;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 0.7rem !important;
    margin-bottom: 0.1rem;
  }
  #episodes-table-wrap td[data-cell='completed'] {
    order: 4;
  }
  #episodes-table-wrap td[data-cell='completed']::before {
    content: 'Done';
    font-size: 0.7rem;
    color: #94a3b8;
    margin-right: 0.5rem;
  }
  #episodes-table-wrap td[data-cell='notes'] {
    order: 5;
  }
  #episodes-table-wrap td[data-cell='actions'] {
    order: 6;
    margin-left: auto;
  }

  /* Empty-state row should stay readable as a block */
  #episodes-table-wrap tr.empty-row {
    display: block;
    text-align: center;
  }
  #episodes-table-wrap tr.empty-row td {
    display: block;
    padding: 1.25rem !important;
  }

  /* ---- Modals: tighter padding, single-column episode grid ---- */
  .modal-shell {
    padding: 0.85rem !important;
  }
  #add-episode-modal .episode-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Mini player bar: larger, thumb-friendly controls on mobile ---- */
@media (max-width: 820px) {
  #mini-player-bar #mini-progress-container,
  #mini-player-bar #mini-progress-bar {
    height: 7px;
  }

  #mini-player-bar .mini-controls-row {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    gap: 0.45rem;
  }

  /* Primary action — roughly doubled from 36px */
  #mini-player-bar .mini-btn-play {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.25rem;
  }
  #mini-player-bar .mini-btn-play i {
    font-size: 1.5rem;
  }

  /* Skip + expand scaled up to comfortable tap targets */
  #mini-player-bar .mini-btn-skip {
    width: 2.75rem;
    height: 2.75rem;
  }
  #mini-player-bar .mini-btn-skip i {
    font-size: 1.15rem;
  }

  #mini-player-bar .mini-btn-expand {
    width: 2.6rem;
    height: 2.6rem;
  }
  #mini-player-bar .mini-btn-expand i {
    font-size: 1.35rem;
  }

  #mini-player-bar #mini-ep-title {
    font-size: 0.95rem;
  }
}

/* Small phones */
@media (max-width: 520px) {
  #app-header .header-logo p {
    display: none;
  } /* drop subtitle, keep title clean */
  #app-header h1 {
    font-size: 1.3rem;
  }
  /* No room for the inline volume next to the larger transport buttons;
       volume stays available in the expanded player + device buttons */
  #mini-player-bar .mini-volume {
    display: none;
  }
}
@media (max-width: 380px) {
  #app-header h1 {
    font-size: 1.2rem;
  }
  .topic-head .topic-title-wrap h2 {
    font-size: 1.4rem !important;
  }
}

/* ===========================================================
   PowerShell terminal flourishes
   =========================================================== */
.ps-prompt-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.5rem 2rem 0; /* matches header px-8 on desktop */
  padding: 0.4rem 0.85rem;
  background: #141c2e;
  border: 1px solid #2a3a5e;
  border-radius: 4px;
  font-size: 12.5px;
  color: #778da9;
}

.ps-chip {
  flex-shrink: 0;
  background: #1e3a5f;
  color: #00d4ff;
  padding: 1px 9px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.ps-path {
  min-width: 0;
  color: #f0e68c; /* yellow path, like the reference */
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-cursor {
  flex-shrink: 0;
  display: inline-block;
  width: 8px;
  height: 1.05em;
  background: #00d4ff;
  animation: ps-blink 1.05s step-end infinite;
}

@keyframes ps-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* "# " markdown-style prefix on section labels */
.ps-section::before {
  content: '# ';
  color: #00d4ff;
}

@media (max-width: 820px) {
  .ps-prompt-bar {
    margin: 1rem 1rem 0; /* matches header padding at this breakpoint */
  }
}

/* Header is now the prompt bar: a touch more padding for the action buttons,
   path truncates while the buttons hold their place on the right. */
#app-header.ps-prompt-bar {
  margin: 0.85rem 0 1.1rem;
  padding: 0.5rem 0.7rem 0.5rem 0.9rem;
}
#app-header .header-prompt {
  min-width: 0;
  flex: 1 1 auto;
}
#app-header .header-prompt .ps-path {
  flex: 0 1 auto;
}
#app-header .header-actions {
  flex-shrink: 0;
}

/* ===========================================================
   Rendered Markdown inside notes (.note-md)
   Tailwind's reset strips list styling, so restore it here,
   scoped to notes only.
   =========================================================== */
.note-md p {
  margin: 0;
}
.note-md p + p,
.note-md p + ul,
.note-md p + ol,
.note-md ul + p,
.note-md ol + p {
  margin-top: 0.45rem;
}
.note-md strong {
  font-weight: 700;
  color: #e6ecf4;
}
.note-md em {
  font-style: italic;
}
.note-md code {
  background: #0a0f1e;
  border: 1px solid #2a3a5e;
  border-radius: 3px;
  padding: 0.05em 0.35em;
  font-size: 0.9em;
}
.note-md a {
  color: #00d4ff;
  text-decoration: underline;
}
.note-md a:hover {
  color: #66e0ff;
}
.note-md ul,
.note-md ol {
  margin: 0.25rem 0;
  padding-left: 1.3rem;
}
.note-md ul {
  list-style: disc;
}
.note-md ol {
  list-style: decimal;
}
.note-md li {
  margin: 0.1rem 0;
}
.note-md li::marker {
  color: #778da9;
}

/* Nested lists inside notes */
.note-md li > ul,
.note-md li > ol {
  margin: 0.15rem 0;
}
.note-md ul ul {
  list-style: circle;
}
.note-md ul ul ul {
  list-style: square;
}

/* ===========================================================
   Expanded player: two-column layout on large screens so the
   notes get a tall, readable panel instead of a cramped box.
   (Mobile keeps the single-column bottom-sheet layout.)
   =========================================================== */
@media (min-width: 1024px) {
  #player-expanded {
    right: auto;
    width: min(900px, 94vw);
    max-width: 900px;
    /* override the inline mobile cap so the notes column has room */
    max-height: min(660px, 84vh) !important;
  }
  #exp-body {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 0 1.5rem;
    align-items: stretch;
    overflow: hidden;
    min-height: 0;
  }
  #exp-controls {
    min-width: 0;
  }
  #exp-notes-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  /* On desktop the notes are always shown in their column, so the
     collapse affordance becomes a static header. */
  #exp-notes-section > button {
    cursor: default;
  }
  #exp-notes-section #notes-chevron {
    display: none;
  }
  #exp-notes-content {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  #exp-notes-list {
    max-height: none !important;
    flex: 1 1 auto;
    min-height: 0;
    font-size: 0.8125rem;
  }
}

/* ===========================================================
   Expanded player on small screens: make the bottom sheet much
   taller and let the notes use the room (single scroll, no inner
   110px cap) instead of a cramped box.
   =========================================================== */
@media (max-width: 1023.98px) {
  #player-expanded {
    max-height: 88vh !important; /* override the inline 440px cap */
  }
  #exp-notes-list {
    max-height: none; /* let the sheet body be the single scroller */
  }
}