/* =====================================================================
   Runtime-generated surfaces
   ---------------------------------------------------------------------
   These are the surfaces the signed-in application actually builds at
   runtime (start-break-phase1 / studio-final-polish / permanent-display),
   as opposed to the static pre-boot markup in index.html. Everything here
   was written against measurements taken from the real authenticated app,
   not the static skeleton.

   Touch sizing is scoped to `(max-width:899px), (pointer:coarse)` rather
   than applied everywhere: the desktop live-show surfaces are
   deliberately dense, and inflating every control to 44px there would
   work against that. Touch input gets the 44px floor; a mouse does not.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Bottom status bar -- real horizontal overflow fix
   Measured at 390px: .uss-permanent-obs-actions is a 366px nowrap flex
   row holding three nowrap buttons needing 132+166+99+14 = 411px, so
   #urekaPermanentObsPreview ran to x=423 and was clipped unreachable
   (document.scrollWidth stayed 390). Letting the row wrap and the
   buttons shrink fixes the cause instead of hiding the symptom.
   --------------------------------------------------------------- */
@media(max-width:899px),(pointer:coarse){
  .v103-statusbar{
    height:auto!important;
    min-height:0!important;
    flex-wrap:wrap!important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;
  }

  .uss-permanent-obs-footer{
    flex-wrap:wrap!important;
    width:100%!important;
    min-width:0!important;
  }

  .uss-permanent-obs-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--uss2-space-2)!important;
    width:100%!important;
    min-width:0!important;
  }
  /* The primary action gets its own full-width row; the two secondary
     actions share the row below it. */
  .uss-permanent-obs-actions #urekaActivateBreak{grid-column:1/-1;}

  /* Deliberately three levels deep. Several studio modules inject their
     own <style> blocks at runtime (permanent-display / studio-final-polish),
     and an injected sheet is appended after this linked one, so it wins any
     equal-specificity !important tie. Anything that has to beat those
     injected rules needs genuinely higher specificity, not just !important.
     The injected rule here is `.uss-permanent-obs-actions .btn` (0,2,0). */
  .uss-permanent-obs-footer .uss-permanent-obs-actions .btn{
    min-width:0!important;
    width:100%!important;
    min-height:var(--uss2-tap)!important;
    height:auto!important;
    padding-block:8px!important;
    white-space:normal!important;
    line-height:1.25!important;
  }
}

/* ---------------------------------------------------------------
   2. Touch target floor on the real runtime controls
   Measured under 44px in the signed-in app: all five nav buttons (42),
   the account trigger (49x40), all three status-card actions (30),
   both Home CTAs (42), Run Practice Setup (40), status bar (36).
   --------------------------------------------------------------- */
@media(max-width:899px),(pointer:coarse){
  .nav button,
  .nav button.uss-nav-text-only,
  body.sidebar-collapsed .nav button.uss-nav-text-only{
    min-height:var(--uss2-tap)!important;
  }

  .uss-unified-status-card .btn,
  .uss-start-break-choice .btn,
  .uss-start-break-hero .btn,
  #urekaPracticeLaunch,
  #urekaContinueLiveBreak{
    min-height:var(--uss2-tap)!important;
    height:auto!important;
    padding-block:8px!important;
    white-space:normal!important;
    line-height:1.25!important;
  }

  /* Compound selector for the same reason: an injected sheet sets
     #ussAccountTrigger{height:40px;min-height:40px!important} at equal
     (1,0,0) specificity and later in the cascade. */
  #ussAccountTrigger.uss-account-trigger{
    min-height:var(--uss2-tap)!important;
    min-width:var(--uss2-tap)!important;
    height:auto!important;
    padding-inline:var(--uss2-space-3)!important;
  }
}

/* The account control rendered as a 49x40 dot-and-caret with its label
   set to display:none, leaving no visible text at all. */
#ussAccountTriggerText{
  display:inline-block!important;
  max-width:14ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:middle;
}

/* The topbar wrapped the account control onto a row of its own, costing
   ~60px of vertical space on every screen. Letting the heading shrink
   keeps the account control inline with the title instead. */
@media(max-width:620px){
  .topbar{flex-wrap:nowrap!important;gap:var(--uss2-space-3)!important;}
  .topbar>div:first-child{min-width:0!important;}
  .topbar .h1{
    font-size:1.25rem!important;
    line-height:1.2!important;
    overflow-wrap:anywhere;
  }
  .topbar .toolbar{margin-left:auto!important;flex:0 0 auto!important;}
}

/* ---------------------------------------------------------------
   3. Unified status panel (Display / Automation / OBS)
   Three truthful status cards. On phones they stack, and the action
   moves below the text instead of competing with it for width.
   --------------------------------------------------------------- */
@media(max-width:620px){
  .uss-unified-status-card{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:start!important;
    gap:var(--uss2-space-2) var(--uss2-space-3)!important;
    padding:var(--uss2-space-3)!important;
  }
  .uss-unified-status-card .uss-unified-status-dot{margin-top:6px;}
  /* Action spans the full width on its own row, under the label/detail. */
  .uss-unified-status-card .btn{
    grid-column:1/-1;
    width:100%;
    justify-content:center;
  }
  .uss-unified-status-card strong{font-size:.95rem!important;}
  .uss-unified-status-card small{font-size:.65rem!important;}
  .uss-unified-status-card div>span{font-size:.78rem!important;line-height:1.45!important;}
}

/* ---------------------------------------------------------------
   4. Home / break setup
   --------------------------------------------------------------- */
@media(max-width:620px){
  .uss-start-break-hero{gap:var(--uss2-space-3)!important;}
  .uss-start-break-hero h2{font-size:1.5rem!important;line-height:1.15!important;}
  .uss-start-break-hero .btn{width:100%;}

  /* min-height:190px forced empty space into every choice card on a
     phone; let them size to content instead. */
  .uss-start-break-choice{
    min-height:0!important;
    padding:var(--uss2-space-4)!important;
  }
  .uss-start-break-choice .btn{width:100%;}
  .uss-start-break-choices{gap:var(--uss2-space-3)!important;margin:var(--uss2-space-4) 0!important;}

  .uss-practice-launch{
    display:grid!important;
    gap:var(--uss2-space-3)!important;
  }
  .uss-practice-launch .btn{width:100%;}

  .uss-start-break-steps li{padding:var(--uss2-space-3)!important;}
}

/* ---------------------------------------------------------------
   4b. "LIVE PREVIEW" badge collision
   `.workspace::before` is absolutely positioned at top:16px/right:18px.
   On a phone the workspace heading wraps to two lines and the badge lands
   on top of it -- measured overlapping "Whatnot Connector" at 390px. It
   carries useful information, so it moves into normal flow above the
   heading rather than being hidden.
   --------------------------------------------------------------- */
@media(max-width:620px){
  .workspace::before{
    position:static!important;
    display:inline-flex!important;
    margin:0 0 var(--uss2-space-3)!important;
    top:auto!important;
    right:auto!important;
  }
}

/* ---------------------------------------------------------------
   5. Content clearance for the fixed bottom bar
   The bar is position:fixed, so the scrolling content needs matching
   bottom room or its last control sits underneath it.
   --------------------------------------------------------------- */
@media(max-width:899px),(pointer:coarse){
  .main{
    padding-bottom:calc(var(--uss2-space-8) + var(--uss2-tap) + env(safe-area-inset-bottom))!important;
  }
}

/* ---------------------------------------------------------------
   6. Feature surfaces: Whatnot, Help/OBS, Account and billing
   Measured in the signed-in app at 390px. These surfaces had no
   horizontal overflow but shipped 40px controls, and OBS URLs and
   long account values could not wrap.
   --------------------------------------------------------------- */
@media(max-width:899px),(pointer:coarse){
  .module .btn,
  .module button.btn,
  .uss-account-popover .btn,
  .uss-account-popover button{
    min-height:var(--uss2-tap)!important;
    height:auto!important;
    padding-block:8px!important;
    white-space:normal!important;
    line-height:1.25!important;
  }
}

/* `.stack` is a single-column grid with no explicit track, so the column is
   sized by its widest child's min-content width. Measured at 320px the
   Whatnot side card's track resolved to 273px inside a 186px container and
   pushed 75 elements past the viewport. An explicit minmax(0,1fr) lets the
   track shrink, and the children below are allowed to wrap into it. */
@media(max-width:620px){
  .stack,
  .side-card.stack,
  .module-grid .side-card.stack{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .stack>*,
  .module-grid>*,
  .whatnot-module-grid>*{min-width:0!important;}
  .whatnot-panel,
  .side-card{min-width:0!important;}

  /* app.css only collapses these to one column for
     `.workbench:not(.settings-hidden)`, so with settings hidden the side
     card stayed beside the main panel -- 186px wide at 320px, which is not
     a usable column. Phones get one column unconditionally. */
  .module-grid,
  .whatnot-module-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .module-grid>aside,
  .whatnot-module-grid>aside{width:100%!important;}
}

/* Long values must wrap rather than force a scroll or get clipped: OBS
   URLs, workspace names, account emails, plan labels and error text are
   all unbounded user or backend data. */
.module code,
.module .url,
.module input[readonly],
.uss-account-popover strong,
.uss-account-popover .uss-account-plan-meta,
.uss-permanent-obs-url,
#ussAccountEmail,
.v103-copy-source{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* The account menu is a popover anchored to a control in the topbar. On a
   phone it must stay inside the viewport and scroll internally rather than
   running off the edge or past the bottom of the screen. */
@media(max-width:620px){
  .uss-account-popover{
    position:fixed!important;
    top:auto!important;
    right:var(--uss2-space-3)!important;
    left:var(--uss2-space-3)!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    max-height:min(70dvh,560px)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(var(--uss2-space-3) + env(safe-area-inset-bottom))!important;
  }
}

/* Billing is a blocking overlay: it must fit the viewport and scroll
   internally, including when the on-screen keyboard is open. */
@media(max-width:620px){
  .uss-billing-overlay{padding:0!important;}
  .uss-billing-card{
    width:100%!important;
    max-width:none!important;
    max-height:100dvh!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    border-radius:0!important;
    padding:var(--uss2-space-6) var(--uss2-space-4)!important;
    padding-bottom:calc(var(--uss2-space-6) + env(safe-area-inset-bottom))!important;
  }
}

/* ---------------------------------------------------------------
   7. Icon sizing inside runtime buttons
   --------------------------------------------------------------- */
.btn .uss2-icon{width:16px;height:16px;}

@media(prefers-reduced-motion:reduce){
  .uss-unified-status-dot{animation:none!important;}
}

/* ---------------------------------------------------------------
   8. Guided Setup wizard -- mobile footer and selection
   Observed on a real iPhone: Back, "Save & Finish Later" and Continue
   collided in one row because the long middle label wrapped to three
   lines; the card used `100vh`, so on iOS Safari it was taller than the
   visible area and the sticky footer sat over the Live Board Preview;
   and the previously-touched choice kept a gold focus ring while the
   other showed the blue selected border, so both looked selected.
   --------------------------------------------------------------- */
@media(max-width:700px){
  /* One fixed header, one scrolling body, one non-overlapping footer. */
  .uss-wizard-overlay{
    padding:0!important;
    align-items:stretch!important;
  }
  .uss-wizard-card{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:none!important;
    height:var(--uss-wizard-vh,100dvh)!important;
    max-height:var(--uss-wizard-vh,100dvh)!important;
    overflow:hidden!important;        /* the body scrolls, not the card */
    border-radius:0!important;
    padding:0!important;
  }
  .uss-wizard-header{
    flex:0 0 auto!important;
    padding:calc(var(--uss2-space-4) + env(safe-area-inset-top)) var(--uss2-space-4) var(--uss2-space-3)!important;
  }
  .uss-wizard-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    padding:0 var(--uss2-space-4)!important;
    /* Clearance so the last card scrolls fully clear of the footer. */
    padding-bottom:var(--uss2-space-8)!important;
    scroll-padding-bottom:var(--uss2-space-8);
    overscroll-behavior:contain;
  }

  /* Two stable columns for navigation, with the low-emphasis action on its
     own full-width row. No button can overlap another, and no label has to
     wrap into an unusable shape. */
  .uss-wizard-footer{
    position:static!important;
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--uss2-space-2)!important;
    margin:0!important;
    padding:var(--uss2-space-3) var(--uss2-space-4)!important;
    padding-bottom:calc(var(--uss2-space-3) + env(safe-area-inset-bottom))!important;
    border-top:1px solid var(--uss2-line)!important;
    background:var(--uss2-navy-900)!important;
    box-shadow:none!important;
  }
  .uss-wizard-footer-right{
    display:contents!important;       /* promote Skip and Continue into the grid */
  }
  #ussWizardBack{grid-column:1;grid-row:1;}
  #ussWizardNext{grid-column:2;grid-row:1;}
  #ussWizardSkip{
    grid-column:1/-1;
    grid-row:2;
    background:transparent!important;
    border-color:transparent!important;
    text-decoration:underline;
    text-underline-offset:3px;
    font-weight:650!important;
  }
  .uss-wizard-footer .btn{
    min-height:var(--uss2-tap)!important;
    height:auto!important;
    padding-inline:var(--uss2-space-3)!important;
    white-space:nowrap!important;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* Selection and focus must not look alike. Selection is a persistent
   checked state; focus is a separate, narrower ring shown only for
   keyboard use. */
.uss-wizard-choice[aria-pressed="true"]{
  border-color:var(--uss2-blue-500)!important;
  background:linear-gradient(180deg,rgba(58,140,255,.16),rgba(58,140,255,.05))!important;
}
.uss-wizard-choice[aria-pressed="true"]::after{
  content:"✓ Selected";
  display:block;
  margin-top:var(--uss2-space-2);
  color:var(--uss2-blue-400);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
}
/* Only a keyboard focus draws a ring, and it is visibly narrower and a
   different colour from the selected treatment. */
.uss-wizard-choice:focus{outline:none!important;box-shadow:none!important;}
.uss-wizard-choice:focus-visible{
  outline:2px solid var(--uss2-gold-400)!important;
  outline-offset:2px!important;
}

/* ---------------------------------------------------------------
   9. Board preview on phones
   The preview is a 9:16 OBS canvas. At phone width that is a very tall
   card, and with no break contents it is a nearly full-screen black
   rectangle holding a few small words -- the user scrolls past a large
   empty area to reach the next action. The empty case gets a purposeful
   state instead, and the accurate full canvas stays one tap away via
   Open Preview.
   --------------------------------------------------------------- */
@media(max-width:620px){
  /* Cap the card so a tall canvas cannot dominate the screen. The scale is
     measured from this box by redesign-preview-fit.js, so the board simply
     renders smaller -- it is never cropped or distorted. */
  .uss-live-preview-frame-wrap{
    max-height:46dvh!important;
    aspect-ratio:auto!important;
    height:46dvh!important;
  }

  .uss-live-preview-frame-wrap[data-preview-empty="1"]{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    display:grid!important;
    place-items:center!important;
    padding:var(--uss2-space-6) var(--uss2-space-4)!important;
    border:1px dashed var(--uss2-line-strong)!important;
    background:rgba(255,255,255,.02)!important;
  }
  /* The empty canvas itself is not worth the space it takes. */
  .uss-live-preview-frame-wrap[data-preview-empty="1"] .uss-live-preview-frame{
    display:none!important;
  }
  .uss-live-preview-frame-wrap[data-preview-empty="1"]::after{
    content:"Add chase items to preview your board. The full 1080 × 1920 OBS canvas fills in once items are added.";
    display:block;
    max-width:34ch;
    color:var(--uss2-muted);
    font-size:.86rem;
    line-height:1.5;
    text-align:center;
  }
}

/* ---------------------------------------------------------------
   10. Preview chrome belongs to board surfaces only
   `.workspace::before` renders "LIVE PREVIEW · 1080 × 1920". The
   workspace element is shared by every tool, so the badge also appeared
   on Whatnot Connector and Help & Setup, which have no board preview.
   The body carries the active tool, so the badge is scoped to the two
   board tools.
   --------------------------------------------------------------- */
body[data-uss-surface]:not([data-uss-surface="teams"]):not([data-uss-surface="chase"]) .workspace::before{
  content:none!important;
  display:none!important;
}