/* Tables: the live table page, the table form, and published stories. Components come from global.css. */

/* Published stories and sagas read in one generous column. */
.story-page { --page-width: 720px; }

/* Table form: the chosen world's details, and the inline sentence that places a continued story in time. */
.setting-details-content { display: flex; gap: var(--s4); }
.setting-details-copy { flex: 1; min-width: 0; }
.setting-details-prompt { white-space: pre-wrap; }
.setting-details-media { order: 2; flex: 0 0 11rem; }
.setting-details-image { height: 100%; min-height: 12rem; border-radius: var(--radius); background: center / cover no-repeat; animation: setting-image-pan 20s ease-in-out infinite alternate; }
@keyframes setting-image-pan { from { background-position: right center; } to { background-position: left center; } }

.continuation-sentence { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) .35em; line-height: 1.8; }
.continuation-sentence .continuation-sentence-select { display: inline-block; width: auto; min-height: 0; padding: 0; font: 600 1rem/inherit var(--font-read); appearance: none; background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0; cursor: pointer; }
.continuation-sentence .continuation-sentence-select:hover { border-bottom-color: var(--ink); }

/* Labs table details: the scene a link points at. */
.card.is-highlighted { box-shadow: 0 0 0 2px var(--accent), var(--shadow-card); }

/* The live table keeps tabs and objectives pinned while the story scrolls. */
.table-page { --table-tabs-h: 46px; padding-top: var(--s5); }
/* The reading column is already a good measure, so story text fills it. */
.table-page .prose, .story-page .prose { max-width: none; }
/* The table keeps its own sticky tabs, so the site nav scrolls away and the footer stays out of the way. */
body.tables-show .site-nav { position: static; }
body.tables-show .site-shell-footer { display: none; }

.table-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.table-header h1 { font-size: 1.6rem; }

.table-tabs { position: sticky; top: 0; z-index: 20; height: var(--table-tabs-h); flex-wrap: nowrap; background: var(--paper-dots), var(--paper); }
.table-tabs > span { display: flex; }
.table-tabs .tab:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.table-pane { padding-top: var(--s5); }

.table-objectives { position: sticky; top: var(--table-tabs-h); z-index: 10; margin-bottom: var(--s6); background: var(--paper-dots), var(--paper); border-bottom: 1px solid var(--rule); }
.table-objectives summary { min-height: 44px; }
.table-objectives .is-done summary { color: var(--ink-soft); }

.table-start-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); align-self: stretch; }
.table-start-choices .button { white-space: normal; text-align: center; line-height: 1.2; }

/* The scene-writing status keeps its long, never-finishing crawl in place of the plain sweep. */
.generation-progress { flex: 1; min-width: 60px; height: 2px; overflow: hidden; background: var(--rule); opacity: .8; }
.generation-progress-bar { display: block; width: 0; height: 100%; background: var(--accent); }

.table-history { list-style: none; margin: 0; padding: 0; }
.table-history .prose + .prose { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px dashed var(--dash); }
.table-history-chapter:not(:first-child) { margin-top: var(--s6); }

.table-stat-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }

.quick-start-panel { position: fixed; z-index: 40; left: var(--s4); right: var(--s4); bottom: var(--s4); max-width: 480px; margin: 0 auto; box-shadow: var(--shadow-float); animation: quick-start-rise .4s cubic-bezier(.32, .72, 0, 1); }
/* The tape label sits above the edge, so only the body scrolls. */
.quick-start-panel > .stack { max-height: 50vh; overflow-y: auto; }
@keyframes quick-start-rise { from { transform: translateY(24px); opacity: 0; } }

@media (max-width: 640px) {
  .table-page { --gutter: var(--s3); padding-bottom: 0; }
  .table-pane { padding-bottom: var(--s6); }
  .table-pane:has(> .table-dock:last-child) { padding-bottom: 0; }
  .table-pane:has(> .table-dock) { min-height: calc(100dvh - var(--table-tabs-h)); }
  .table-dock { margin-top: auto; }
  .table-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .table-tabs > * { min-width: 0; }
  .table-tabs > span > .tab { width: 100%; }
  .table-tabs .tab { justify-content: center; gap: var(--s1); padding-inline: var(--s1); }
  .table-submit-shortcut { display: none; }
  .setting-details-content { flex-direction: column; }
  .setting-details-media { order: 0; flex-basis: auto; }
  .setting-details-image { height: 5.5rem; min-height: 5.5rem; }

  /* The move box and the status that replaces it stay docked under the thumb. */
  .table-dock { position: sticky; bottom: 0; z-index: 10; }
  .input-submission-container.table-dock { margin-inline: calc(-1 * var(--s3)); padding: var(--s2) var(--s3); background: var(--paper-dots), var(--paper); border-top: 1px solid var(--rule); }
  .generating.table-dock { background: var(--paper-dots), var(--paper); }
  .table-dock .composer-box textarea.input { min-height: calc(1.6rem * 3.5); }
}

@media (prefers-reduced-motion: reduce) {
  .setting-details-image, .quick-start-panel { animation: none; }
}

@media (max-width: 360px) {
  .table-tabs .tab .ph { display: none; }
}