/* Studio chrome: less above the work.
 * The status cards become three slim pills (click for detail), the account banner becomes one line that can be
 * dismissed for a day, and on a desktop the repeated board headings go. A phone gets a one-row top bar and a
 * one-row action bar (see the end of this file).
 * The elements and ids stay in the page: the scripts that fill them keep working. */
@media(min-width:0px){
  /* ---- status pills ---- */
  body.uss-authenticated #urekaUnifiedStatus{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px!important;padding:10px 20px 2px!important;border:0!important;background:none!important}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card{flex:0 0 auto;position:relative;display:inline-flex!important;align-items:center;gap:8px!important;min-height:34px;padding:0 14px 0 12px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:999px!important;background:rgba(255,255,255,.05)!important;cursor:pointer}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card:hover{background:rgba(255,255,255,.1)!important}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card:focus-visible{outline:2px solid #7fb6ff;outline-offset:2px}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card[aria-expanded="true"]{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.28)!important}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card>div{display:flex!important;align-items:baseline;gap:7px!important}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card small{font-size:11px!important;letter-spacing:.06em!important;color:#a7b1bf!important}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card strong{font-size:13px!important;color:#f4f6f8!important;white-space:nowrap}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card>div>span,
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card>.btn{display:none!important}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card .uss-unified-status-dot{margin:0!important}

  .uss-chrome-pop{position:fixed;z-index:10040;display:grid;gap:8px;width:min(300px,calc(100vw - 24px));padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:#171a20;box-shadow:0 18px 48px rgba(0,0,0,.55);color:#f4f6f8}
  .uss-chrome-pop[hidden]{display:none!important}
  .uss-chrome-pop strong{font-size:14px}
  .uss-chrome-pop p{margin:0;color:#b4bdca;font-size:13px;line-height:1.45}
  .uss-chrome-pop .uss-chrome-pop-action{justify-self:start;min-height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
  .uss-chrome-pop .uss-chrome-pop-action:hover{background:rgba(255,255,255,.16)}
  .uss-chrome-pop .uss-chrome-pop-action:disabled{opacity:.5;cursor:default}

  /* ---- account banner: one line ---- */
  body.uss-authenticated #ussAccountSetupBanner{margin:6px 20px 0!important;padding:6px 8px 6px 12px!important;min-height:0;border-radius:12px!important;gap:12px!important}
  body.uss-authenticated #ussAccountSetupBanner .uss-account-setup-copy{align-items:center;gap:10px!important}
  body.uss-authenticated #ussAccountSetupBanner .uss-account-setup-icon{width:22px!important;height:22px!important;border-radius:7px!important;font-size:13px}
  body.uss-authenticated #ussAccountSetupBanner strong{font-size:13px}
  body.uss-authenticated #ussAccountSetupBanner #ussAccountSetupText{display:none!important}
  body.uss-authenticated #ussAccountSetupBanner .btn{min-height:32px!important;height:32px!important;padding:0 14px!important;font-size:13px!important}
  body.uss-authenticated #ussAccountSetupBanner.is-dismissed{display:none!important}
  #ussAccountSetupBanner .uss-chrome-dismiss{width:30px;height:30px;margin-left:4px;border:0;border-radius:8px;background:transparent;color:#d6dce6;font-size:20px;line-height:1;cursor:pointer}
  #ussAccountSetupBanner .uss-chrome-dismiss:hover{background:rgba(255,255,255,.12)}
  #ussAccountSetupBanner{align-items:center}
  #ussAccountSetupBanner .uss-chrome-actions{display:flex;align-items:center;gap:2px}

}
@media(min-width:900px){
  /* ---- headings: the top bar already says which board this is ---- */
  .workspace:has(#mod-teams.active) .workspace-head,
  .workspace:has(#mod-chase.active) .workspace-head{display:none!important}
  .workbench{padding-top:6px}

  /* The "LIVE PREVIEW 1080 x 1920" badge: the preview header already says it. */
  body[data-uss-surface="teams"] .workspace::before,
  body[data-uss-surface="chase"] .workspace::before{display:none!important}

  /* ---- Team Board card ---- */
  #mod-teams.uss-tb-board .uss-primary-setup-card>div:first-child .kicker{display:none}
  #mod-teams.uss-tb-board .uss-primary-setup-card>div:first-child .help{margin:0;color:#b4bdca;font-size:13px}
  #mod-teams.uss-tb-board .league-controls{padding:0!important;border:0!important;background:none!important}
  #mod-teams.uss-tb-board .uss-primary-setup-card .uss-primary-section-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #mod-teams.uss-tb-board .uss-primary-setup-card,
  #mod-teams.uss-tb-board .uss-primary-board-preview{border-radius:16px!important}
}


/* ===== Phone ===== */
@media(max-width:899px){
  /* less padding around the boards: the card gets the width */
  /* clip, not hidden: a hidden body is its own scroll container and nothing inside it can stay pinned while the page scrolls */
  body.uss-authenticated{overflow:clip!important}
  body.uss-authenticated section.main{padding-left:8px!important;padding-right:8px!important}
  /* clip, not hidden: hidden makes the panel a scroll container and the pinned mode switch stops pinning */
  body.uss-authenticated .workspace.panel{padding:6px!important;border-radius:14px!important;overflow:clip!important}
  body.uss-authenticated .workspace-head{display:none!important}
  body.uss-authenticated #mod-teams.uss-tb-board,body.uss-authenticated #mod-chase.uss-tb-board{padding:0!important}
  body.uss-authenticated #mod-teams.uss-tb-board .module-grid,body.uss-authenticated #mod-chase.uss-tb-board .module-grid{gap:10px!important}
  body[data-uss-surface="teams"] .workspace::before,body[data-uss-surface="chase"] .workspace::before{display:none!important}

  /* top bar: one row (menu, board name, Edit Design, account) */
  body.uss-authenticated header.topbar{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important;min-height:56px;padding:6px 8px 6px 64px!important}
  body.uss-authenticated header.topbar #toolKicker{display:none!important}
  body.uss-authenticated header.topbar>div:first-child{flex:1 1 auto;min-width:0}
  body.uss-authenticated header.topbar #toolTitle[data-short]{font-size:0!important;line-height:1!important}
  body.uss-authenticated header.topbar #toolTitle[data-short]::after{content:attr(data-short);font-size:18px;font-weight:800;line-height:1.2}
  body.uss-authenticated header.topbar .toolbar{flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:none!important;display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:flex-end;gap:6px!important;margin:0!important;padding:0!important}
  body.uss-authenticated header.topbar #toolTitle{white-space:nowrap}
  /* redesign-runtime.css top-aligns the stacked cards at this width with !important; the pills are one line, so center them */
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card{align-items:center!important}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card>div{align-items:center!important}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card .uss-unified-status-dot{margin:0!important}
  body.uss-authenticated header.topbar .board-design-control-stack .btn{min-height:44px!important;padding:0 12px!important;font-size:13px!important;white-space:nowrap}
  body.uss-authenticated #ussAccountTriggerText{display:none!important}
  body.uss-authenticated #ussAccountTrigger{min-width:44px;min-height:44px;padding:0 12px!important;justify-content:center}

  /* status: three small pills, label and dot only; tap for the detail */
  body.uss-authenticated #urekaUnifiedStatus{flex-wrap:nowrap;gap:6px!important;padding:6px 8px 2px!important;overflow:visible}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card{min-height:44px;padding:0 10px!important;gap:6px!important;flex:1 1 auto;min-width:0;justify-content:center}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card strong{display:none!important}
  body.uss-authenticated #urekaUnifiedStatus .uss-unified-status-card small{font-size:11px!important;letter-spacing:.02em!important;white-space:nowrap}

  /* account banner: one line */
  body.uss-authenticated #ussAccountSetupBanner{margin:6px 8px 0!important;flex-direction:row!important;align-items:center!important;gap:8px!important}
  body.uss-authenticated #ussAccountSetupBanner .uss-account-setup-copy{flex:1 1 auto;min-width:0}
  body.uss-authenticated #ussAccountSetupBanner strong{font-size:12px}
  body.uss-authenticated #ussAccountSetupBanner .btn{width:auto!important;min-height:40px!important;height:40px!important;padding:0 10px!important;font-size:12px!important;white-space:nowrap}
  body.uss-authenticated #ussAccountSetupBanner .uss-chrome-dismiss{width:40px;height:40px}

  /* bottom bar: Activate Break, and a ... for the rest */
  body.uss-authenticated #urekaPermanentObsFooter .uss-permanent-obs-identity{display:none!important}
  body.uss-authenticated #urekaPermanentObsFooter,
  body.uss-authenticated #urekaPermanentObsFooter .uss-permanent-obs-actions{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:8px!important;width:100%!important}
  body.uss-authenticated #urekaPermanentObsFooter .uss-permanent-obs-actions>#urekaActivateBreak{flex:1 1 auto!important;width:auto!important;min-height:48px!important;font-size:15px!important}
  body.uss-authenticated #urekaPermanentObsFooter .uss-permanent-obs-actions>#urekaEndBreakAction,
  body.uss-authenticated #urekaPermanentObsFooter .uss-permanent-obs-actions>#urekaPermanentObsCopy,
  body.uss-authenticated #urekaPermanentObsFooter .uss-permanent-obs-actions>#urekaPermanentObsPreview{display:none!important}
  body.uss-authenticated #ussChromeMore{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 48px;min-width:48px;min-height:48px;padding:0;font-size:20px;line-height:1}
  .uss-chrome-more-pop{position:fixed;z-index:10040;right:10px;display:grid;gap:4px;min-width:220px;padding:8px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:#171a20;box-shadow:0 18px 48px rgba(0,0,0,.55)}
  .uss-chrome-more-pop[hidden]{display:none!important}
  .uss-chrome-more-pop button{min-height:48px;padding:0 14px;border:0;border-radius:10px;background:none;color:#fff;font:inherit;font-size:15px;text-align:left;cursor:pointer}
  .uss-chrome-more-pop button:hover{background:rgba(255,255,255,.1)}
  .uss-chrome-more-pop button:disabled{opacity:.45;cursor:default}
}
@media(min-width:900px){#ussChromeMore{display:none!important}}