/* One DOM and one set of controls at every width. Breakpoints follow the shell:
   Navigation: 1100px rail, 780px drawer; forms/summaries: 560px single column.
   Tables follow the workspace container at 1000px, including a wide sidebar.
   Keep the navigation boundaries in app.js too. */
.workspace { container: workspace / inline-size; }
.settings-content { grid-template-columns: minmax(0, 1fr); }
.timezone-form { min-width: 0; }
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --touch-target: 44px;
}
.workspace, .content, .panel, .card, .page-header__copy,
.field, .toolbar__search, .collection-summary__name > div,
.publication-field, .schedule-field { min-width: 0; }
h1, h2, h3, p, dd, td, label, summary, .meta, .alert, .form-result,
.account-check, .account-tag, .tag-chip, .plan-selected { overflow-wrap: anywhere; }
.button { max-width: 100%; white-space: normal; text-align: center; }
.button > svg, .status::before { flex-shrink: 0; }
.status { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
input, select, textarea { min-width: 0; max-width: 100%; }
.check-list ul, ul.check-list { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.listing-title { overflow-wrap: anywhere; }
.health-line, .next-time { white-space: normal; }
.section-header, .panel__header, .account-head, .collection-delete-confirm,
.schedule-card__head { flex-wrap: wrap; }
.sidebar { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.sidebar__nav { overflow: visible; flex: 1 0 auto; }
.sidebar__footer { overflow: visible; flex-shrink: 0; }
.nav-item > span:not(.nav-badge) { width: auto; flex: 1; white-space: nowrap; }
.nav-item.is-active { position: relative; }
.sidebar-close { display: none; }
body.navigation-open { overflow: hidden; }
.rich-editor { overflow-wrap: anywhere; scroll-margin-block: 72px; }
.rich-editor pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.rich-editor:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
/* Spoilers remain legible while editing on touch as well as on hover. */
.rich-editor:focus-within [data-listex-spoiler="true"] { color: var(--surface); }
.tag-chip { max-width: 100%; }
.tag-chip button { flex-shrink: 0; }
.media-card__tools { position: static; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
.media-card__order { display: flex; gap: 6px; margin-right: auto; }
.media-card__position { align-self: center; color: var(--text-secondary); font-size: 12px; }
.media-card__tools .media-icon { background: var(--surface); color: var(--text-secondary); border-color: var(--border-strong); box-shadow: none; backdrop-filter: none; }
.media-card__tools .media-icon--danger { color: var(--danger); }
.media-card__tools .media-icon:hover { background: var(--surface-hover); }
.media-card video { object-fit: contain; }
.media-card img { -webkit-user-drag: none; }
.media-grid > .empty-state { grid-column: 1 / -1; }
.content-editor .tag-editor input.tag-entry { min-width: min(140px, 100%); }
.form-actions, .connection-actions, .description-meta { flex-wrap: wrap; }
.account-check { max-width: 100%; border-radius: var(--radius-lg); flex-wrap: wrap; }
/* Safe readable status text in both appearances; bright green is reserved for dots. */
.safety-note, .form-result.is-success, .result.success { color: var(--success-text); }

@media (max-width: 1100px) {
  .workspace { transition: none; }
}

@media (min-width: 1101px) {
  .app-shell.is-collapsed .nav-item > span:not(.nav-badge), html[data-sidebar="collapsed"] .nav-item > span:not(.nav-badge) { white-space: nowrap; }
}

@media (min-width: 781px) and (max-width: 1100px) {
  .sidebar { width: var(--sidebar-collapsed); }
  .workspace { margin-left: var(--sidebar-collapsed); }
  .sidebar .brand-label { display: none; }
  .sidebar .nav-item > span:not(.nav-badge) { opacity: 0; pointer-events: none; white-space: nowrap; }
  .sidebar .nav-badge { position: absolute; right: 5px; top: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; }
  .app-shell.is-tablet-expanded .sidebar { width: var(--sidebar-width); box-shadow: var(--shadow-menu); }
  .app-shell.is-tablet-expanded .brand-label { display: block; opacity: 1; visibility: visible; }
  .app-shell.is-tablet-expanded .nav-item > span:not(.nav-badge) { opacity: 1; transform: none; pointer-events: auto; white-space: nowrap; }
  .app-shell.is-tablet-expanded .nav-badge { position: static; min-width: 20px; height: 20px; font-size: 11px; }
}

/* Labels are derived from the same table headers, including after language changes
   and partial refreshes. Without JS the native table stays scrollable. */
@container workspace (max-width: 1000px) {
  .responsive-table.table-is-labelled, .responsive-table.table-is-labelled tbody { display: block; }
  .responsive-table.table-is-labelled thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .responsive-table.table-is-labelled tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px; border-bottom: 1px solid var(--border); }
  .responsive-table.table-is-labelled tbody > tr:last-child { border-bottom: 0; }
  .responsive-table.table-is-labelled tbody > tr[hidden] { display: none; }
  .responsive-table.table-is-labelled tbody td { display: block; width: auto; min-width: 0; max-width: none; padding: 0; border: 0; }
  .responsive-table.table-is-labelled td::before { display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 12px; font-weight: 600; content: attr(data-label); }
  .responsive-table.table-is-labelled td:first-child,
  .responsive-table.table-is-labelled td[colspan],
  .listings-table.table-is-labelled td:last-child { grid-column: 1 / -1; }
  .responsive-table.table-is-labelled td:first-child::before,
  .responsive-table.table-is-labelled td[colspan]::before { display: none; }
  .listings-table .listing-cell { min-width: 0; align-items: flex-start; }
  .listings-table .listing-title { max-width: none; }
  .listings-table .row-actions { justify-content: flex-start; }
  .responsive-table--selection.table-is-labelled tbody > tr { grid-template-columns: 44px minmax(0, 1fr); }
  .responsive-table--selection.table-is-labelled tbody td.chat-choice { grid-column: 1; grid-row: 1; min-height: 44px; }
  .responsive-table--selection.table-is-labelled td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .responsive-table--selection.table-is-labelled td:nth-child(n + 3) { grid-column: 2; }
  .responsive-table--selection.table-is-labelled td:nth-child(2)::before { display: none; }
  .history-table.table-is-labelled .definition-list { grid-template-columns: 1fr; gap: 4px; }
  .history-table.table-is-labelled .definition-list dd { margin-bottom: 8px; }
}

@media (max-width: 780px) {
  .content { padding: var(--space-5) var(--space-4) 56px; }
  .workspace, .app-shell.is-collapsed .workspace, html[data-sidebar="collapsed"] .workspace { margin-left: 0; }
  .mobile-bar { display: flex; position: sticky; z-index: 30; top: 0; align-items: center; gap: var(--space-3); min-height: 60px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .mobile-bar .brand__viewport { display: grid; align-items: center; width: 114px; }
  .sidebar, .app-shell.is-collapsed .sidebar, html[data-sidebar="collapsed"] .sidebar { z-index: 60; width: min(300px, calc(100vw - 24px)); visibility: hidden; transform: translateX(-100%); transition: transform .2s ease, visibility .2s; box-shadow: var(--shadow-menu); }
  .app-shell.is-mobile-open .sidebar { visibility: visible; transform: translateX(0); }
  .sidebar .nav-item > span:not(.nav-badge), html[data-sidebar="collapsed"] .sidebar .nav-item > span:not(.nav-badge) { opacity: 1; transform: none; pointer-events: auto; }
  .sidebar .brand-label, html[data-sidebar="collapsed"] .sidebar .brand-label { display: block; opacity: 1; visibility: visible; pointer-events: auto; }
  .sidebar .brand-chevron { display: none; }
  .sidebar .brand-toggle { display: none; }
  .sidebar__head { justify-content: space-between; }
  .sidebar-close { display: inline-grid; }
  .sidebar .nav-badge, html[data-sidebar="collapsed"] .sidebar .nav-badge { position: static; min-width: 20px; height: 20px; font-size: 11px; }
  .app-shell.is-mobile-open .sidebar-scrim { display: block; position: fixed; z-index: 50; inset: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .45); cursor: pointer; }
  .nav-item { min-height: var(--touch-target); }
  .button, .button--small, .icon-button, .row-icon, .media-icon, .format-button,
  .plan-selected .icon-button, .slot-option, .action-icon { min-height: var(--touch-target); }
  .icon-button, .row-icon, .media-icon, .format-button, .action-icon { min-width: var(--touch-target); flex-shrink: 0; }
  .link-editor input, .link-editor .button { min-height: var(--touch-target) !important; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea, .rich-editor { font-size: 16px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { min-height: var(--touch-target); }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex-shrink: 0; }
  .chat-choice { min-height: var(--touch-target); min-width: var(--touch-target); }
  .chat-choice input { margin: 12px; }
  .format-toolbar { flex-wrap: nowrap; overflow-x: auto; padding: 2px; overscroll-behavior-inline: contain; }
  .format-button { flex: 0 0 var(--touch-target); }
  .format-toolbar-row { padding: 8px 14px; }
  .tag-chip button { min-width: var(--touch-target); min-height: var(--touch-target); }
  .emoji-text-column { flex-basis: 100%; }
  .emoji-picker { width: 100%; flex-basis: 100%; height: auto; }
  .emoji-picker input, .emoji-picker select { min-height: var(--touch-target) !important; height: var(--touch-target); padding: 8px !important; font-size: 16px; }
  .emoji-picker-tabs:not(.emoji-picker-packs) { display: flex; overflow-x: auto; }
  .emoji-category { flex: 0 0 var(--touch-target); min-width: var(--touch-target); min-height: var(--touch-target); }
  .emoji-picker-choices { grid-template-columns: repeat(auto-fit, minmax(var(--touch-target), 1fr)); min-height: var(--touch-target); max-height: min(280px, 40dvh); }
  .emoji-choice { min-height: var(--touch-target); }
  .emoji-workspace.is-open .rich-editor { min-height: 180px; }
  #content-edit-unavailable { flex: 1 1 100%; order: 3; min-width: 0; }
  #content-edit-unavailable .button { width: 100%; }
  #content-edit-unavailable::after { display: block; margin-top: 6px; color: var(--text-secondary); font-size: 12px; content: attr(data-touch-hint); }

  .tag-editor .tag-entry { min-height: var(--touch-target) !important; }
  .toolbar > select { min-width: 0; max-width: 100%; }
  .tabs { flex-wrap: wrap; overflow: visible; }
  .tab { display: inline-flex; align-items: center; min-height: var(--touch-target); white-space: normal; overflow-wrap: anywhere; }
  .listings-controls > .toolbar { flex-wrap: wrap; }
  .listings-controls .toolbar__search { flex: 1 1 180px; }
  .account-head > .identity { flex: 1 1 200px; }
  .account-actions > form { flex: 1 1 180px; }
  .account-actions .button { width: 100%; }
  .collection-summary { flex-wrap: wrap; gap: 12px; }
  .collection-summary__actions { margin-left: auto; }
  .collection-delete-confirm { justify-content: flex-start; }
  .collection-delete-confirm > span { flex-basis: 100%; }
}

@media (max-width: 560px) {
  .page-header { margin-bottom: 20px; }
  .listings-controls .toolbar { align-items: flex-end; }
  .toolbar__search > .sr-only { position: static; display: block; width: auto; height: auto; margin: 0 0 6px; overflow: visible; clip: auto; white-space: normal; color: var(--text-secondary); font-size: 13px; }
  .toolbar__search svg { top: auto; bottom: 13px; }
  .content { padding-inline: 12px; }
  .panel__header, .settings-panel, .form-panel, .connection { padding: 16px; }
  .panel__header, .section-header, .plan-editor__head { gap: 12px; }
  .content-editor__head > .button-row, .plan-editor__head > .button-row { width: 100%; }
  .content-editor__head .button, .plan-editor__head .button { flex: 1 1 110px; }
  .responsive-table.table-is-labelled tbody > tr { grid-template-columns: 1fr; padding: 14px; }
  .responsive-table--selection.table-is-labelled tbody > tr { grid-template-columns: 44px minmax(0, 1fr); }
  .publication-grid, .schedule-destination { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .publication-field, .schedule-field { border-left: 0; padding: 0; }
  .plan-editor__targets, .plan-editor__timing { grid-template-columns: minmax(0, 1fr); }
  .timezone-form .field { grid-template-columns: minmax(0, 1fr); }
  .timezone-form .field label { white-space: normal; font-size: 13px; }
  .secret-form { flex-direction: column; }
  .connection-actions > *, .form-actions > * { flex: 1 1 110px; }
  .attention-item { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
  .attention-item .status { width: fit-content; }
  .media-grid { grid-template-columns: minmax(0, 1fr); }
  .content-editor__media { margin-inline: 14px; }
  .tag-entry { flex-basis: 100%; }
  .listing-thumb--empty { height: auto; min-height: 48px; overflow-wrap: anywhere; }
}
@media (pointer: coarse) and (min-width: 781px) {
  .button, .icon-button, .format-button, .media-icon, .slot-option, .nav-item { min-height: var(--touch-target); }
  .icon-button, .format-button, .media-icon { min-width: var(--touch-target); }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; min-height: var(--touch-target); }
}