/* goonlab — the mobile layer. Linked with media="(max-width: 899px)", so
   nothing here ever reaches a desktop viewport: the desktop sheet stays as
   it is by construction. Rules apply to phones AND small tablets; the
   phone-only refinements sit under the 600px queries at the end, the
   tablet-only ones under the 600px+ query before them. */

:root {
  --pad: 1rem;
  --tabbar-h: 58px;
  --tabbar-space: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

html { -webkit-text-size-adjust: 100%; }

.shell { width: calc(100% - 2 * var(--pad)); }
main.shell { padding-block: 1.1rem 2.5rem; }

a, button, .btn, .tab, .nav-link, .tag-chip, .folder-chip, .chip, .fav-btn, select, summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

h1 { font-size: 1.45rem; }
.page-head { margin-bottom: 1.1rem; }
.page-head h1 { font-size: 1.45rem; }
.page-sub strong { white-space: nowrap; }
.section-title { margin: 1.6rem 0 0.7rem; }
.panel { padding: 1rem; }
.notice, .message { font-size: 0.9rem; padding: 0.65rem 0.8rem; }

/* anything smaller than 16px makes iOS zoom the page on focus */
input, select, textarea { font-size: 16px; }
input[type="file"] { min-height: 44px; }
input[type="file"]::file-selector-button { min-height: 40px; padding: 0.55rem 0.9rem; margin-right: 0.6rem; }

/* tap-sized buttons: the height comes from padding + line-height, so a
   button whose label mixes text and a <span> still wraps as one sentence */
.btn { padding: 0.7rem 1.1rem; line-height: 1.5; }
.btn-sm { padding: 0.6rem 0.9rem; line-height: 1.5; }
.pagination { gap: 0.6rem; flex-wrap: wrap; }

/* ---- header: wordmark, balance, search toggle, menu toggle ---- */

/* No blur on the bar here: backdrop-filter turns the header into the
   containing block of every fixed descendant, which pinned the drawer and
   its backdrop inside a 60px strip and let the closed drawer widen the
   page to 742px (the phone then zoomed out to fit). A solid bar instead. */
.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ground); }
.nav { flex-wrap: nowrap; gap: 0.5rem; padding-block: 0.5rem; position: relative; min-height: 56px; }
.wordmark { font-size: 1.3rem; }

.nav-tools { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; }
.nav-chip-m { display: inline-flex; align-items: center; min-height: 36px; font-size: 0.78rem; padding: 0.2rem 0.7rem; margin-right: 0.3rem; }
.nav-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 10px; background: none; color: var(--text);
}
.nav-tool svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-tool:active { background: var(--tint); }

/* the search field drops down under the bar when its toggle is tapped */
.nav-search {
  display: none;
  position: absolute; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); top: calc(100% + 1px);
  z-index: 40; max-width: none;
  padding: 0.6rem var(--pad) 0.8rem;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
body.search-open .nav-search { display: flex; }
.nav-search input { min-height: 44px; }
.nav-search button { min-width: 50px; min-height: 44px; font-size: 1.5rem; color: var(--text); }
/* the field and its button light up as one control */
.nav-search:focus-within input, .nav-search:focus-within button { border-color: var(--accent); }

/* ---- the menu: the desktop link row becomes a right-hand drawer ---- */

.nav-backdrop { display: none; position: fixed; inset: 0; z-index: 65; background: rgba(8, 4, 14, 0.62); }
body.menu-open .nav-backdrop { display: block; }
body.menu-open { overflow: hidden; }
/* the drawer and its backdrop live inside the header's stacking context:
   while the menu is open the header outranks the tab bar, so the drawer
   is never cut off by it and the backdrop dims it too */
body.menu-open .site-header { z-index: 80; }

.nav-links {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(21rem, 86vw);
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0 0 max(1rem, env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.5);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
body.menu-open .nav-links { transform: none; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .nav-links { transition: none; } }

.menu-head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0.4rem 0.5rem 0.4rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.menu-title { font-weight: 800; letter-spacing: -0.02em; }

.nav-links .nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  min-height: 52px; padding: 0.6rem 1.25rem;
  font-size: 1.02rem; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.nav-links .nav-link:hover { text-decoration: none; }
.nav-links .nav-link.is-active { color: var(--accent); }
.nav-links .nav-accent { color: var(--accent); }
.nav-links .nav-dim { font-size: 1.02rem; }
.nav-links .inline-form { display: block; }
.nav-links .as-button { width: 100%; text-align: left; }
.nav-links .btn { margin: 1rem 1.25rem 0; }
.nav-balance .chip { font-size: 0.92rem; }
.menu-only { display: inline; color: var(--muted); font-size: 0.9rem; }

/* ---- bottom tab bar ---- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: stretch;
  background: rgba(15, 10, 20, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  min-height: var(--tabbar-h); padding: 0.3rem 0 0.25rem;
  color: var(--muted); font: inherit; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em;
  background: none; border: 0; text-decoration: none; cursor: pointer;
}
.tab:hover { text-decoration: none; }
.tab svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.is-active { color: var(--accent); }
/* the longest label in the bar ("Generations") stays on its own single
   line, and shrinks a touch on the narrowest phones rather than wrapping */
.tab span { white-space: nowrap; }
@media (max-width: 380px) { .tab { font-size: 0.62rem; } }
.tab-studio svg {
  width: 30px; height: 30px; padding: 4px; margin-top: -3px;
  border-radius: 9px; background: var(--grad); color: var(--accent-ink); stroke-width: 2.4;
}

.site-footer { padding-bottom: calc(1.5rem + var(--tabbar-space)); }
.footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; }
.footer-links { flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.2rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 0.25rem; }

/* ---- homepage ---- */

.home-cta { padding: 1.5rem 1.6rem; margin-bottom: 1rem; }
.home-cta h1 { font-size: 1.5rem; }
.home-section { margin-bottom: 1.6rem; }
.home-section-head { gap: 0.5rem; align-items: center; }

/* chip rows scroll sideways in one line instead of stacking six deep */
.tag-row {
  flex-wrap: nowrap; overflow-x: auto;
  margin-inline: calc(-1 * var(--pad)); padding: 0.15rem var(--pad) 0.45rem;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.tag-row::-webkit-scrollbar { display: none; }
.tag-chip { flex: none; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; scroll-snap-align: start; }

.video-strip {
  grid-auto-columns: calc((100% - 1.6rem) / 3); gap: 0.8rem;
  margin-inline: calc(-1 * var(--pad)); padding: 0.1rem var(--pad) 0.6rem;
  scroll-padding-inline: var(--pad); scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.video-strip::-webkit-scrollbar { display: none; }

/* ---- browse toolbar, grids, cards ---- */

.browse-toolbar { flex-direction: column; align-items: stretch; gap: 0.6rem; margin-bottom: 0.9rem; }
.toolbar-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.toolbar-item { display: grid; grid-template-columns: 3.6rem 1fr; align-items: center; gap: 0.45rem; font-size: 0.8rem; }
.toolbar-item select { width: 100%; min-width: 0; min-height: 40px; padding: 0.3rem 0.5rem; }
.toolbar-form .toolbar-search { grid-column: 1 / -1; width: 100%; min-height: 44px; }
.toolbar-form > .btn { grid-column: 1 / -1; }
.active-filters { gap: 0.4rem; }
.chip-filter { display: inline-flex; align-items: center; min-height: 38px; padding: 0.2rem 0.35rem 0.2rem 0.85rem; }
.chip-filter a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; margin-left: 0.1rem; }
.result-count { margin-bottom: 0.6rem; }

.video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.video-body { padding: 0.55rem 0.65rem 0.65rem; gap: 0.3rem; }
.video-title { font-size: 0.88rem; line-height: 1.3; }
.video-meta { font-size: 0.74rem; }
.video-foot { gap: 0.3rem 0.5rem; }
.fav-btn { min-height: 38px; padding-inline: 0.85rem; white-space: nowrap; }
/* the manage row (state, publish, folder, remove) always gets a line of its own */
.video-manage { gap: 0.4rem; flex: 1 1 100%; flex-wrap: wrap; } /* wrap: the state pill takes its own row (below) */
.video-manage .inline-form { display: flex; min-width: 0; }
.video-manage .btn-sm { min-height: 40px; min-width: 44px; padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.video-manage select { width: 100%; min-width: 0; max-width: 8rem; min-height: 40px; }
.page-library .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- watch ---- */

.watch { gap: 0.9rem; }
.player {
  border-radius: 0; box-shadow: none; max-height: 62vh;
  margin-inline: calc(-1 * var(--pad)); width: calc(100% + 2 * var(--pad)); max-width: none;
}
.watch-title { font-size: 1.12rem; line-height: 1.3; }
.watch-row { flex-direction: column; align-items: stretch; gap: 0.7rem; margin-bottom: 0.6rem; }
.watch-meta { font-size: 0.84rem; }
.watch-actions { flex-wrap: wrap; gap: 0.5rem; }
.watch-actions .btn, .watch-actions .fav-btn { min-height: 40px; white-space: nowrap; }
.report-form { max-width: none; }
.comment-form .btn { width: 100%; }
.comment-head { min-height: 40px; }
.comment-del { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0; margin-right: -0.4rem; font-size: 1rem; }
.comment-report { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.3rem; margin-right: -0.4rem; font-size: 0.85rem; }

/* ---- forms: studio, revisions, edits ---- */

.stack-form { gap: 0.9rem; }
.ref-fieldset { padding: 0.8rem 0.8rem 0.9rem; }
.adv-options { padding: 0.6rem 0.8rem; }
.toggle-row { padding: 0.7rem 0.8rem; }
/* the cost badge is a pill next to its label, not a stretched bar */
.toggle-row .pill { display: inline-block; width: auto; }
.upload-actions .btn { flex: 1 1 auto; }
.estimate-panel { padding: 0.9rem; }
.estimate-row { font-size: 0.86rem; gap: 0.6rem; }
.estimate-value { font-size: 1.1rem; }
.char-suggestions { width: 100%; }
.music-order li { font-size: 0.82rem; }

/* the submit row rides along at the bottom of the screen while the form is
   on screen, just above the tab bar, so a long form never hides its button */
.stack-form > .form-foot {
  position: sticky; bottom: var(--tabbar-space); z-index: 5;
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center;
  margin: 0 -1rem -1rem; padding: 0.7rem 1rem;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}
.stack-form > .form-foot .btn-lg { width: 100%; }
.stack-form > .form-foot .form-cost { grid-column: 1 / -1; font-size: 0.85rem; }

/* ---- jobs ---- */

.job-list { gap: 0.6rem; }
.job-card { flex-direction: column; align-items: stretch; gap: 0.7rem; padding: 0.85rem 0.9rem; }
.job-prompt { font-size: 0.93rem; line-height: 1.4; }
/* the meta line flows as text (the desktop flex row splits a quoted title
   around its link); the status dot rides inline */
.job-meta { display: block; font-size: 0.76rem; line-height: 1.5; }
.job-meta .status-dot { display: inline-block; vertical-align: middle; margin-right: 0.3rem; }
.job-actions { display: flex; gap: 0.5rem; }
.job-actions > * { flex: 1 1 0; display: flex; min-width: 0; }
.job-actions .btn { width: 100%; }
.job-actions .pill { align-self: center; justify-content: center; }

.job-detail-head { flex-direction: column; align-items: stretch; gap: 0.8rem; }
.job-detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.job-detail-actions > * { flex: 1 1 auto; display: flex; }
.job-detail-actions .btn { width: 100%; }
.job-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.job-stat { min-width: 0; padding: 0.7rem 0.85rem; }
.job-stat-value { font-size: 1.05rem; overflow-wrap: anywhere; }
.timeline-row { grid-template-columns: 4.2rem 1fr; gap: 0.3rem 0.6rem; padding: 0.5rem 0.9rem; font-size: 0.86rem; }
.timeline-detail { grid-column: 1 / -1; }
.timeline-cost { display: none; }
.order-grid { grid-template-columns: 1fr; gap: 0.3rem; }
.order-grid > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem; align-items: baseline; }
.order-grid .job-stat-label { margin-right: 0; }

/* ---- library ---- */

.folder-bar {
  flex-wrap: nowrap; overflow-x: auto; align-items: center; gap: 0.4rem;
  margin-inline: calc(-1 * var(--pad)); padding: 0.1rem var(--pad) 0.5rem;
  scrollbar-width: none;
}
.folder-bar::-webkit-scrollbar { display: none; }
.folder-chip { flex: none; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
.folder-new { flex: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.folder-new input[type="text"] { min-height: 40px; width: 9rem; }
.folder-manage { flex-wrap: wrap; }
.folder-manage .inline-form { display: flex; gap: 0.4rem; flex: 1 1 auto; }
.folder-manage input[type="text"] { flex: 1; min-width: 0; min-height: 40px; }

/* ---- creator pages, analytics ---- */

.creator-head { flex-direction: column; align-items: stretch; gap: 0.8rem; padding: 1rem; }
.creator-id { gap: 0.8rem; }
.creator-avatar { width: 56px; height: 56px; }
.creator-name { font-size: 1.2rem; }
.creator-actions { flex-wrap: wrap; }
.creator-actions .btn, .creator-actions form { flex: 1 1 auto; }
.creator-actions form .btn { width: 100%; }
.chart-panel { padding: 0.8rem 0.9rem; }
.chart { height: 110px; }

/* ---- pricing, auth, tables, moderation, modals, legal ---- */

.pack { padding: 1.3rem 1.1rem; }
.pack-tokens { font-size: 1.7rem; }
.auth-wrap { margin-top: 0.8rem; gap: 1.1rem; }
/* the glow behind the sign-in column stays inside the column: at 8rem past
   each side it widened the page and let it scroll sideways */
.auth-wrap::before { inset: -6rem 0 auto; }
.auth-panel { padding: 1.4rem 1.1rem; gap: 1rem; }
.auth-brand { font-size: 1.7rem; }
.profile-line { font-size: 0.92rem; }
.contact-email a { display: inline-flex; align-items: center; min-height: 44px; }

.table-wrap { margin-inline: calc(-1 * var(--pad)); border-radius: 0; border-left: 0; border-right: 0; }
th, td { padding: 0.5rem 0.7rem; font-size: 0.84rem; }
/* free-text cells wrap on screen; dates, numbers and ids stay on one line */
.table-wrap td { white-space: normal; overflow-wrap: anywhere; }
.table-wrap td.mono, .table-wrap th { white-space: nowrap; }

.mod-search, .mod-table input[type="text"] {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); padding: 0.5rem 0.8rem; min-height: 44px;
}
.mod-search { min-width: 0; width: 100%; }
.mod-table input[type="text"] { min-height: 40px; max-width: 9rem; min-width: 0; }
.mod-table th, .mod-table td { white-space: normal; }
.mod-table .inline-form { flex-wrap: wrap; }
.panel .inline-form[role="search"] { display: flex; gap: 0.4rem; }

/* on a phone a tall box starts at the top and the page behind stays put;
   the panel keeps clear of the bottom tab bar */
.modal-backdrop { display: block; overflow-y: auto; padding: 0.75rem 0 0; }
.modal-panel { padding: 1.1rem 1rem; margin: 0 0.75rem; }
/* a spacer AFTER the panel, inside the scroller: a last child's bottom
   margin is not always part of what can be scrolled to, a block is */
.modal-backdrop:not([hidden])::after { content: ""; display: block; height: calc(var(--tabbar-space) + 2rem); }
/* one card and a peek of the next on the owner's own strip: two cards a
   row left no room for the Publish button and the ✕ */
.page-generations .video-strip { grid-auto-columns: min(86%, 340px); }
.modal-panel .form-foot { flex-wrap: wrap; }
.modal-panel .form-foot .btn { flex: 1 1 auto; }
.prose h1 { font-size: 1.4rem; }
.hero { padding-block: 2.2rem 1.6rem; }

/* touch screens have no hover: the desktop lift/scale effects stay off */
@media (hover: none) {
  .video-card:hover { box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25); border-color: var(--line); }
  .video-card:hover .video-thumb img, .video-card:hover .thumb-fallback { transform: none; }
  .fav-btn:hover { transform: none; color: var(--muted); border-color: var(--line); }
  .fav-btn.is-fav:hover { color: var(--danger); border-color: var(--danger); }
  .step:hover, .feature:hover { box-shadow: none; border-color: var(--line); }
}

/* ---- small tablets (600-899px) ---- */

@media (min-width: 600px) {
  .toolbar-form { grid-template-columns: repeat(auto-fit, minmax(12rem, 16rem)); justify-content: start; }
}

/* ---- phones ---- */

@media (max-width: 599px) {
  .home-cta { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.3rem 1.2rem; }
  .home-cta h1 { font-size: 1.35rem; }
  .home-cta p { font-size: 0.92rem; }
  .home-cta .btn { width: 100%; }
  .home-section-head h2 { font-size: 1rem; }
  .video-strip { grid-auto-columns: min(74%, 300px); gap: 0.7rem; }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  /* the manage controls (state, publish, folder, remove) need a full-width card */
  .page-library .video-grid { grid-template-columns: 1fr; }
  /* the state pill takes its own row on a phone card, so the buttons and the
     folder picker beside it are not squeezed ("Unsorted" was clipped to "Ur") */
  .video-manage .pill { flex: 1 1 100%; }
  .steps, .features { grid-template-columns: 1fr; }
  .pack-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  /* the owner's controls under the player: a tidy two-column block */
  .watch-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .watch-actions > form, .watch-actions > .report-box { display: flex; min-width: 0; }
  .watch-actions > .report-box { flex-direction: column; }
  .watch-actions > .report-box[open] { grid-column: 1 / -1; }
  .watch-actions .btn, .watch-actions .fav-btn { width: 100%; text-align: center; }

  /* moderation tables: one card per row instead of a sideways scroll */
  .mod-table, .mod-table tbody, .mod-table tr, .mod-table td { display: block; width: auto; }
  .mod-table thead { display: none; }
  .mod-table tr { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
  .mod-table td { border: 0; padding: 0.2rem 0; }
  .mod-table .inline-form { margin: 0.3rem 0.5rem 0.2rem 0; }

  /* the economics table: the money columns land on screen */
  .eco-table { font-size: 0.72rem; }
  .eco-table th, .eco-table td { padding: 6px 5px; }
  .eco-table td:first-child a { display: inline-block; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
}