/* Study library shell on the web (B2 + B4 library, owner decisions 2026-10-14):
   tool strip, library header, compact study rows at 600px and under.
   :not(#stl-none) is always true: its ID weight beats the class-stacked !important rules in
   study_web_tools.css and study_pages-*.css that style the same rows. */

/* >>> tool strip: one row above 600px; at 600px and under the workspace gets its own row and
   the tools are icons only, the active one filled. Labels on every tool when they fit. */
@media (max-width: 600px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar:has(> .st-study-toolbar) {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    > .st-panel-workspace-toolbar {
    flex: 0 1 auto !important;
    max-width: 100% !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    > .st-panel-workspace-toolbar::after {
    display: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar:has(> .st-study-toolbar)
    .st-study-tabs-wrap {
    flex: 1 1 100% !important;
    margin: 0 !important;
  }
}

/* The six labelled tools need about 755px; under that only the active one keeps its label. */
@container stwtabs (min-width: 875px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    .st-study-tabs-wrap
    .st-tabs.st-tabs--study
    .st-tab {
    flex: 1 1 auto !important;
    padding-block: 0 !important;
    padding-inline: 10px 12px !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    .st-study-tabs-wrap
    .st-tabs.st-tabs--study
    .st-tab
    .st-tab-label {
    display: inline !important;
  }
}

@media (max-width: 600px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    > .st-panel-workspace-toolbar {
    width: 100% !important;
    flex: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    .st-study-tabs-filter-item:last-child {
    flex: 1 1 auto !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    .st-study-tabs-wrap {
    flex: none !important;
    width: 100% !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    .st-study-tabs-wrap
    .st-tabs.st-tabs--study {
    overflow: visible !important;
    justify-content: space-between !important;
    gap: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    .st-study-tabs-wrap
    .st-tabs.st-tabs--study
    .st-tab,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    .st-study-tabs-wrap
    .st-tabs.st-tabs--study
    .st-tab.st-tab--active {
    flex: 0 0 44px !important;
    width: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 50% !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    .st-study-tabs-wrap
    .st-tabs.st-tabs--study
    .st-tab
    .st-tab-label {
    display: none !important;
  }
}
/* <<< tool strip */

/* >>> library header: the pane keeps its card shell (owner, 2026-10-15, reverting 14 A);
   title and the create button on one row, then search, then the optional hero, then the list. */
html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  > section.card.st-pane.stp-card,
html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  > section.card.st-pane.fcp-pane {
  background: var(--fcp-card) !important;
  border: 0 !important;
  border-radius: 32px !important;
  box-shadow: var(--fcp-card-shadow) !important;
  padding: 24px 40px 40px !important;
}

@media (max-width: 900px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    > section.card.st-pane.stp-card,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    > section.card.st-pane.fcp-pane {
    padding: 22px 24px 28px !important;
    border-radius: 26px !important;
  }
}

@media (max-width: 600px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    > section.card.st-pane.stp-card,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    > section.card.st-pane.fcp-pane {
    padding: 16px 16px 22px !important;
    border-radius: 22px !important;
  }
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header
  .st-fc-hero-subtitle {
  margin: 4px 0 0 !important;
  max-width: 620px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: var(--stw-muted) !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header.st-fc-hero:not(.stw-none) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  height: auto !important;
  min-height: 44px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header.st-fc-hero:not(.stw-none)::before {
  display: none !important;
  content: none !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header
  .st-fc-hero-copy {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Loo tip: title + Add left, bubble + Loo (the header's ::after, study_web_tools.css) right. */
html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header.st-fc-hero:not(.stw-none)::after {
  margin-inline-start: -8px !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header
  > .st-fc-hero-loo-bubble {
  flex: 1 1 0 !important;
  min-width: 160px !important;
  margin-inline-start: auto !important;
  max-width: 250px !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  color: var(--stw-ink) !important;
  background: var(--stw-card) !important;
  border-color: var(--stw-line-strong) !important;
  box-shadow: none !important;
  animation: none !important;
}

@media (max-width: 1000px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    > .st-tab-content-header
    > .st-fc-hero-loo-bubble {
    display: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    > .st-tab-content-header.st-fc-hero:not(.stw-none)::after {
    margin-inline-start: auto !important;
  }
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header
  .st-tab-content-title {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 34px !important;
  letter-spacing: 0 !important;
  color: var(--on-surface) !important;
  margin: 0 !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header
  > .st-create-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header
  > .st-create-actions[hidden] {
  display: none !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header
  > .st-create-actions
  > .st-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(
    --primary-fill,
    linear-gradient(
      135deg,
      var(--cta-gradient-start),
      var(--cta-gradient-mid) 60%,
      var(--cta-gradient-end)
    )
  ) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  justify-content: center !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header
  > .st-create-actions
  > .st-btn[hidden] {
  display: none !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header
  > .st-create-actions
  > .st-btn
  :is(.stw-loo-face, .stw-sparkle, .st-btn--upload-prompt-arrow) {
  display: none !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header
  > .st-create-actions
  > .st-btn
  i {
  color: inherit !important;
  font-size: 15px !important;
  margin: 0 !important;
}

@media (hover: hover) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    > .st-tab-content-header
    > .st-create-actions
    > .st-btn:hover:not(:disabled) {
    background: var(
      --primary-fill-hover,
      var(--cta-gradient-hover, var(--cta-gradient-start))
    ) !important;
  }
}

/* List head row: title and count, actions, search. */
html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > :is(
    .st-qz-toolbar,
    .st-library-toolbar,
    .st-tab-content-controls--documents
  ) {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  min-height: 0 !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-controls--documents
  > .st-doc-controls-stats {
  display: none !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > :is(.st-qz-toolbar, .st-library-toolbar)
  > .st-search-field,
html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-controls--documents
  > .st-doc-controls-main {
  order: 0 !important;
  flex: 0 1 360px !important;
  width: auto !important;
  max-width: 360px !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: center !important;
  margin: 0 !important;
}

/* One 16px gap between header, search, hero and list (the pane's own gap was 14px plus margins). */
html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  > section.card.st-pane.st-pane:is(.stp-card, .st-pane--documents, .fcp-pane) {
  row-gap: 16px !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  > section.card.st-pane.st-pane:is(.stp-card, .st-pane--documents, .fcp-pane)
  > :is(
    .st-tab-content-header,
    .st-qz-toolbar,
    .st-library-toolbar,
    .st-tab-content-controls--documents,
    .stw-resume,
    .st-doc-upload-shell,
    .st-doc-upload-head,
    .fcp-deckrow,
    .fcp-cardsrow
  ):not(.stw-none) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 600px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    > :is(.st-qz-toolbar, .st-library-toolbar)
    > .st-search-field,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    > .st-tab-content-controls--documents
    > .st-doc-controls-main {
    flex: 1 1 auto !important;
    max-width: none !important;
  }
}
/* <<< library header */

/* >>> compact study rows at 600px and under (decision 01 A + 13 A): 44px tile, title 15/600,
   one 13/400 caption, round primary + "...". No Ready chip or type badges; a creating row
   shows "Creating..." with a spinner in the primary slot, a failed row a Failed chip. */
@keyframes stl-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 600px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(.st-qz-list, .st-sum-grid, .st-pod-list, .st-doc-list) {
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(.st-qz-row, .st-sum-row, .st-doc-row):not(.stw-none) {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: 'tile title prim more' 'tile cap prim more' !important;
    align-items: center !important;
    align-content: center !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
    width: auto !important;
    min-height: 64px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: start !important;
    transform: none !important;
    position: relative !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(.st-qz-row, .st-sum-row, .st-doc-row):not(.stw-none)
    + :is(.st-qz-row, .st-sum-row, .st-doc-row):not(.stw-none),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-pod-row
    + .st-pod-row {
    border-top: 1px solid var(--outline-variant) !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(.st-qz-row, .st-sum-row, .st-doc-row):not(.stw-none)::before,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(.st-qz-row, .st-sum-row, .st-doc-row):not(.stw-none)::after {
    display: none !important;
  }

  /* Wrappers step aside so their children sit in the row grid. */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-meta,
      .st-qz-meta-top,
      .st-qz-actions,
      .st-sum-meta,
      .st-sum-actions,
      .st-pod-meta,
      .st-pod-actions,
      .st-doc-meta,
      .st-doc-actions
    ),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-title-row,
      .st-sum-title-row,
      .st-pod-title-row,
      .st-anki-deck-title-row
    ):not([hidden]) {
    display: contents !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(.st-qz-title-row, .st-sum-title-row, .st-pod-title-row)[hidden] {
    display: none !important;
  }

  /* Tile */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-row > .stw-row-tile,
      .st-sum-row > .stw-row-tile,
      .st-doc-row > .st-doc-file-type,
      .st-pod-row-top > .st-pod-title-icon
    ) {
    grid-area: tile !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    font-size: 18px !important;
    box-shadow: none !important;
    position: relative !important;
    inset: auto !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(.stw-row-tile, .st-doc-file-type)
    > i {
    font-size: 18px !important;
    margin: 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-file-type
    :is(img, canvas) {
    width: 44px !important;
    height: 44px !important;
    max-width: none !important;
    object-fit: cover !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-pod-row-top
    > .st-pod-title-icon {
    background: var(--stw-t3-bg) !important;
    color: var(--stw-t3-fg) !important;
  }

  /* Title */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(.st-qz-row, .st-sum-row, .st-doc-row, .st-pod-row):not(.stw-none)
    h3:is(
      [data-quiz-name],
      [data-summary-name],
      [data-podcast-name],
      [data-anki-deck-name]
    ),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-row
    > .st-doc-meta
    > h3 {
    grid-area: title !important;
    align-self: end !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    color: var(--on-surface) !important;
    text-align: start !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
  }

  /* Caption */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-utility-line,
      .st-sum-utility-line,
      .st-pod-subtitle,
      .st-doc-meta-line
    ),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-anki-deck-block
    > .st-doc-meta
    > p {
    grid-area: cap !important;
    align-self: start !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    color: var(--on-surface-variant) !important;
    text-align: start !important;
    justify-content: flex-start !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-utility-line,
      .st-sum-utility-line,
      .st-pod-subtitle,
      .st-doc-meta-line
    )
    :is(span, p) {
    font: inherit !important;
    color: inherit !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(.st-qz-utility-line, .st-sum-utility-line, .st-doc-meta-line)
    i,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-utility-dot,
      .st-sum-utility-dot,
      .st-qz-created-label,
      .st-sum-preview-btn--utility
    ) {
    display: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(.st-qz-created-at, .st-sum-created-at)::before,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line
    > .st-doc-meta-summary:not([hidden])
    ~ .st-doc-meta-date::before {
    content: '\00B7' !important;
    display: inline !important;
    margin: 0 4px !important;
    position: static !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-utility-line,
      .st-sum-utility-line,
      .st-pod-subtitle,
      .st-doc-meta-line
    )
    > :last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Primary (round) and "..." */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-btn--quiz-start,
      .st-sum-preview-btn:not(.st-sum-preview-btn--utility),
      .st-pod-play-btn,
      .st-doc-generate-btn,
      .st-anki-deck-action--study
    ),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      [data-quiz-row-options-trigger],
      [data-summary-row-options-trigger],
      [data-podcast-row-options-trigger],
      .stw-doc-more,
      .st-anki-deck-more-btn
    ) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    position: relative !important;
    inset: auto !important;
    align-self: center !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-btn--quiz-start,
      .st-sum-preview-btn:not(.st-sum-preview-btn--utility),
      .st-pod-play-btn,
      .st-doc-generate-btn,
      .st-anki-deck-action--study
    ) {
    grid-area: prim !important;
    margin-inline-start: 4px !important;
    border: 0 !important;
    background: var(
      --primary-fill,
      linear-gradient(
        135deg,
        var(--cta-gradient-start),
        var(--cta-gradient-mid) 60%,
        var(--cta-gradient-end)
      )
    ) !important;
    color: #ffffff !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      [data-quiz-row-options-trigger],
      [data-summary-row-options-trigger],
      [data-podcast-row-options-trigger],
      .stw-doc-more,
      .st-anki-deck-more-btn
    ) {
    grid-area: more !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-btn--quiz-start,
      .st-sum-preview-btn,
      .st-pod-play-btn,
      .st-doc-generate-btn,
      .st-anki-deck-action--study,
      [data-quiz-row-options-trigger],
      [data-summary-row-options-trigger],
      [data-podcast-row-options-trigger],
      .stw-doc-more,
      .st-anki-deck-more-btn
    )::after {
    content: '' !important;
    position: absolute !important;
    inset: -3px !important;
    display: block !important;
    background: none !important;
    border: 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-btn--quiz-start,
      .st-sum-preview-btn,
      .st-pod-play-btn,
      .st-doc-generate-btn,
      .st-anki-deck-action--study
    )
    > span {
    display: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-btn--quiz-start,
      .st-sum-preview-btn,
      .st-pod-play-btn,
      .st-doc-generate-btn,
      .st-anki-deck-action--study
    )
    > i {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: 14px !important;
  }

  /* Everything else in the desktop row stays out of the phone row. */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-title-icon,
      .st-sum-title-icon,
      .st-qz-edit-icon,
      .st-qz-meta-bottom,
      .st-qz-generation-steps,
      .st-qz-session-info,
      .st-sum-meta-line-desktop,
      .stw-sum-topics,
      .st-sum-generation,
      .st-sum-download-btn,
      .st-pod-retry-btn,
      .st-pod-regenerate-audio-btn,
      .st-pod-transcription-toggle,
      .st-pod-generation,
      .st-anki-deck-action:not(.st-anki-deck-action--study)
    ),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .stw-doc-actions
    > .st-btn--only-icon:not(.stw-doc-more),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line
    > .st-doc-meta-piece[data-document-language] {
    display: none !important;
  }

  /* Status chips: none when ready; a creating row reads "Creating..." as its caption. */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(.st-qz-status-chip, .st-sum-status-chip, .st-pod-status-chip) {
    display: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-row:is(
        .st-qz-row--generating,
        [data-quiz-status='generating'],
        [data-quiz-status='running'],
        [data-quiz-status='pending']
      ),
      .st-sum-row--generating,
      .st-pod-row--generating
    )
    :is(.st-qz-status-chip, .st-sum-status-chip, .st-pod-status-chip),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-row[data-quiz-status='failed'],
      .st-sum-row[data-summary-status='failed'],
      .st-pod-row[data-podcast-status='failed']
    )
    :is(.st-qz-status-chip, .st-sum-status-chip, .st-pod-status-chip) {
    grid-area: cap !important;
    align-self: start !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 13px !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    position: static !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-row:is(
        .st-qz-row--generating,
        [data-quiz-status='generating'],
        [data-quiz-status='running'],
        [data-quiz-status='pending']
      ),
      .st-sum-row--generating,
      .st-pod-row--generating
    )
    :is(.st-qz-status-chip, .st-sum-status-chip, .st-pod-status-chip) {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    font-weight: 400 !important;
    color: var(--on-surface-variant) !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-row:is(
        .st-qz-row--generating,
        [data-quiz-status='generating'],
        [data-quiz-status='running'],
        [data-quiz-status='pending']
      ),
      .st-sum-row--generating,
      .st-pod-row--generating
    )
    :is(.st-qz-status-chip, .st-sum-status-chip, .st-pod-status-chip)
    > span:last-child::after {
    content: '...';
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-row[data-quiz-status='failed'],
      .st-sum-row[data-summary-status='failed'],
      .st-pod-row[data-podcast-status='failed']
    )
    :is(.st-qz-status-chip, .st-sum-status-chip, .st-pod-status-chip) {
    padding: 0 8px !important;
    border-radius: 999px !important;
    border: 0 !important;
    font-weight: 600 !important;
    background: color-mix(in srgb, var(--error) 14%, transparent) !important;
    color: var(--error) !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      :is(
        .st-qz-row:is(
          .st-qz-row--generating,
          [data-quiz-status='generating'],
          [data-quiz-status='running'],
          [data-quiz-status='pending']
        ),
        .st-sum-row--generating,
        .st-pod-row--generating
      ),
      :is(
        .st-qz-row[data-quiz-status='failed'],
        .st-sum-row[data-summary-status='failed'],
        .st-pod-row[data-podcast-status='failed']
      )
    )
    :is(.st-qz-status-chip, .st-sum-status-chip, .st-pod-status-chip)
    :is(span, i) {
    font: inherit !important;
    color: inherit !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      :is(
        .st-qz-row:is(
          .st-qz-row--generating,
          [data-quiz-status='generating'],
          [data-quiz-status='running'],
          [data-quiz-status='pending']
        ),
        .st-sum-row--generating,
        .st-pod-row--generating
      ),
      :is(
        .st-qz-row[data-quiz-status='failed'],
        .st-sum-row[data-summary-status='failed'],
        .st-pod-row[data-podcast-status='failed']
      )
    )
    :is(.st-qz-status-dot, .st-sum-status-dot, .st-pod-status-dot),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      :is(
        .st-qz-row:is(
          .st-qz-row--generating,
          [data-quiz-status='generating'],
          [data-quiz-status='running'],
          [data-quiz-status='pending']
        ),
        .st-sum-row--generating,
        .st-pod-row--generating
      ),
      :is(
        .st-qz-row[data-quiz-status='failed'],
        .st-sum-row[data-summary-status='failed'],
        .st-pod-row[data-podcast-status='failed']
      )
    )
    :is(.st-qz-utility-line, .st-sum-utility-line, .st-pod-subtitle) {
    display: none !important;
  }

  /* Documents: the status word is the caption only while working or failed. */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-row[data-document-status='ready']
    .st-doc-status-line,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-row
    .st-doc-status-loader {
    display: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-row:is(
      [data-document-status='pending'],
      [data-document-status='extracting'],
      [data-document-status='generating_topics']
    )
    .st-doc-meta-line
    > .st-doc-meta-piece:not(.st-doc-status-line) {
    display: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-row:is(
      [data-document-status='pending'],
      [data-document-status='extracting'],
      [data-document-status='generating_topics']
    )
    .st-doc-status-value::after {
    content: '...';
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-row:is(
      [data-document-status='failed'],
      [data-document-status='insufficient_content'],
      [data-document-status='quota_exceeded']
    )
    .st-doc-status-line {
    flex: none !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    background: color-mix(in srgb, var(--error) 14%, transparent) !important;
    color: var(--error) !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-row:is(
      [data-document-status='failed'],
      [data-document-status='insufficient_content'],
      [data-document-status='quota_exceeded']
    )
    .st-doc-status-line
    > span {
    font-weight: 600 !important;
  }

  /* Spinner in the primary slot while the item is being made. */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-row:is(
        .st-qz-row--generating,
        [data-quiz-status='generating'],
        [data-quiz-status='running'],
        [data-quiz-status='pending']
      ),
      .st-sum-row--generating,
      .st-pod-row--generating
    )
    :is(.st-btn--quiz-start, .st-sum-preview-btn, .st-pod-play-btn),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-row:is(
      [data-document-status='pending'],
      [data-document-status='extracting'],
      [data-document-status='generating_topics']
    )
    .st-doc-generate-btn {
    background: transparent !important;
    border: 0 !important;
    color: transparent !important;
    pointer-events: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-row:is(
        .st-qz-row--generating,
        [data-quiz-status='generating'],
        [data-quiz-status='running'],
        [data-quiz-status='pending']
      ),
      .st-sum-row--generating,
      .st-pod-row--generating
    )
    :is(.st-btn--quiz-start, .st-sum-preview-btn, .st-pod-play-btn)
    > *,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-row:is(
      [data-document-status='pending'],
      [data-document-status='extracting'],
      [data-document-status='generating_topics']
    )
    .st-doc-generate-btn
    > * {
    display: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-row:is(
        .st-qz-row--generating,
        [data-quiz-status='generating'],
        [data-quiz-status='running'],
        [data-quiz-status='pending']
      ),
      .st-sum-row--generating,
      .st-pod-row--generating
    )
    :is(.st-btn--quiz-start, .st-sum-preview-btn, .st-pod-play-btn)::before,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-row:is(
      [data-document-status='pending'],
      [data-document-status='extracting'],
      [data-document-status='generating_topics']
    )
    .st-doc-generate-btn::before {
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    border: 2px solid var(--outline-variant) !important;
    border-top-color: var(--primary) !important;
    background: none !important;
    animation: stl-spin 0.8s linear infinite !important;
  }

  /* Podcasts: the player shows only on the row that is playing. */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-pod-row.st-pod-row {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-pod-row
    > .st-pod-row-top {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas: 'tile title prim more' 'tile cap prim more' 'player player player player' !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-pod-row
    .st-pod-meta-details {
    display: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-pod-row:is(
      [data-podcast-playback-state='playing'],
      [data-podcast-playback-state='paused'],
      [data-podcast-playback-state='loading']
    )
    .st-pod-meta-details {
    grid-area: player !important;
    display: block !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-pod-row
    .st-pod-edit-icon,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-pod-row
    .st-pod-title-row
    > .st-qz-edit-icon {
    display: none !important;
  }

  /* Anki deck: the title area opens the deck (the chevron toggle covers tile and text). */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-anki-deck-block
    > .st-anki-deck-cards {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin: 12px 0 0 !important;
    min-width: 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-anki-deck-block
    .st-anki-deck-toggle {
    grid-area: 1 / 1 / 3 / 3 !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 4px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--on-surface-variant) !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-anki-deck-block
    .st-anki-deck-toggle
    i {
    font-size: 13px !important;
    color: inherit !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-anki-deck-block
    > .st-doc-meta
    h3,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-anki-deck-block
    > .st-doc-meta
    > p {
    padding-inline-end: 24px !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-anki-deck-block
    [data-anki-deck-rename-form]:not([hidden]),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(.st-qz-row, .st-sum-row, .st-doc-row):not(.stw-none)
    :is(.st-qz-rename-row, .st-sum-rename-row):not([hidden]) {
    grid-area: 1 / 2 / 3 / 5 !important;
    z-index: 2 !important;
  }
}
/* <<< compact study rows */

@media (max-width: 600px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-sum-utility-meta,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line
    > .st-doc-meta-piece {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex: none !important;
    min-width: 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line
    > .st-doc-meta-summary {
    flex: 0 1 auto !important;
    overflow: hidden !important;
    gap: 4px !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line
    > .st-doc-meta-piece::before,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-status-line::after {
    content: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line
    > .st-doc-status-line::before {
    display: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-pod-row
    .st-pod-row-top
    .st-pod-subtitle
    > .st-pod-subtitle-dot {
    margin: 0 4px !important;
  }

  /* Search row: one row, full width. */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    > :is(
      .st-qz-toolbar,
      .st-library-toolbar,
      .st-tab-content-controls--documents
    ) {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
}

/* >>> Documents upload card at 600px and under (B2-03): tabs as a full-width segmented row
   above, drop zone in one column, nothing past the card edge. */
@media (max-width: 600px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
    overflow: clip !important;
    min-width: 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    > * {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    .st-doc-upload-head {
    min-height: 0 !important;
    padding: 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    .st-doc-upload-tabs
    > .tab-nav {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    box-sizing: border-box !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    .st-doc-upload-tabs
    > .tab-nav
    > li {
    min-width: 0 !important;
    margin: 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    .st-doc-upload-tabs
    > .tab-nav
    .tab-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-content: center !important;
    padding: 0 8px !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    .st-doc-upload-tabs
    .tab-content-area,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    .st-doc-upload-tabs
    .tab-panel {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    #documentsDropzone.dropzone {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    justify-items: center !important;
    row-gap: 8px !important;
    padding: 16px !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    #documentsDropzone.dropzone
    > * {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: center !important;
    align-self: center !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    #documentsDropzone.dropzone
    > .dropzone-type-chips {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    #documentsDropzone.dropzone
    > .dropzone-browse-btn {
    justify-self: stretch !important;
    width: 100% !important;
    justify-content: center !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    .st-doc-url-import-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    .st-doc-url-import-row
    > .st-doc-url-import-input {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    .st-doc-url-import-row
    > .st-doc-url-import-btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    .alert {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
/* <<< Documents upload card */

@media (max-width: 600px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    .st-doc-upload-tabs
    > .tab-nav
    .tab-button
    > i {
    display: none !important;
  }
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  > section.card.st-pane.fcp-pane
  > .fcp-deckrow {
  margin-top: 0 !important;
}

/* B2-08: the deck picker is one control, not a tab strip; no indicator bar or strip line. */
@media (max-width: 600px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .fcp-pane
    .fcp-tab.fcp-tab--picker::after {
    display: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .fcp-pane
    .fcp-deckrow__decks--multi
    .fcp-picker {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
}

/* A long create label ("Try It Once for Free") drops under the title instead of squeezing it. */
html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header.st-fc-hero:not(.stw-none) {
  flex-wrap: wrap !important;
  row-gap: 8px !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane.st-pane
  > .st-tab-content-header
  > .st-create-actions {
  margin-inline-start: 0 !important;
}

/* 44px tap targets at phone width for the controls these screens keep. */
@media (max-width: 600px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    > .st-panel-workspace-toolbar {
    height: auto !important;
    min-height: 44px !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-study-bar
    .st-study-tabs-filter-item
    .st-panel-workspace-select
    .custom-dropdown-trigger {
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .fcp-pane
    .fcp-icon-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-pane
    .st-fc-card-action::after {
    content: '' !important;
    position: absolute !important;
    inset: -7px !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-pane
    :is(
      .stw-anki-topic__btn,
      .st-anki-tag-filter .custom-dropdown-trigger,
      .st-create-actions--flashcards > .st-btn,
      [data-flashcard-study-trigger]
    ) {
    min-height: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 600px) {
  /* Hero: the item name wraps inside the card instead of running past it. */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .stw-resume
    > .stw-resume__lead,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .stw-resume
    .stw-resume__text {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .stw-resume
    .stw-resume__title {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Upload tabs are a compact segment: 13/600, the label stays centred and ends in an ellipsis. */
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane--documents
    .st-doc-upload-shell
    .st-doc-upload-tabs
    > .tab-nav
    .tab-button {
    display: block !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 44px !important;
  }
}

/* Compact row caption: one inline line with a single ellipsis at the end; the date goes first
   when space runs out. Inline pieces cannot shrink into each other the way flex pieces did. */
@media (max-width: 600px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-utility-line,
      .st-sum-utility-line,
      .st-pod-subtitle,
      .st-doc-meta-line
    ),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-anki-deck-block
    > .st-doc-meta
    > p {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    :is(
      .st-qz-question-count,
      .st-qz-question-count > span,
      .st-qz-created-at,
      .st-qz-created-at > span,
      .st-sum-utility-meta,
      .st-sum-topic-count,
      .st-sum-topic-count > span,
      .st-sum-created-at,
      .st-sum-created-at > span,
      .st-pod-subtitle > span:not([hidden])
    ),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line
    > :is(.st-doc-meta-summary, .st-doc-meta-date):not([hidden]),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line
    .st-doc-meta-summary
    > span:not([hidden]),
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line
    .st-doc-status-line
    > .st-doc-status-value {
    display: inline !important;
    position: static !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-row:not([data-document-status='ready'])
    .st-doc-meta-line
    > .st-doc-status-line {
    display: inline !important;
    flex: none !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line
    .st-doc-meta-no-topics {
    display: inline !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: inherit !important;
    font: inherit !important;
  }

  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line
    .st-doc-meta-no-topics::before,
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line
    .st-doc-meta-no-topics::after {
    content: none !important;
  }
}

/* A document with no topics says so instead of its date at phone width. */
@media (max-width: 600px) {
  html
    body:not([data-mobile]):not([data-admin]):not(#stl-none)
    .st-container.st-fs-container
    .st-pane.st-pane
    .st-doc-meta-line:has(.st-doc-meta-no-topics)
    > .st-doc-meta-date {
    display: none !important;
  }
}

/* Field box = input box, magnifier spans it (base_search_field.css): a fixed wrapper height
   (46px on .st-pane) left the 40px input at its top and the 50% icon 3px low. */
html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane
  .st-search-field:not(.st-search-field--mobile) {
  height: auto !important;
  min-height: 0 !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane
  .st-search-field:not(.st-search-field--mobile)
  > .search-field__input {
  display: block !important;
  margin: 0 !important;
}

html
  body:not([data-mobile]):not([data-admin]):not(#stl-none)
  .st-container.st-fs-container
  .st-pane
  .st-search-field:not(.st-search-field--mobile)
  > .search-field__icon {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
}