.more-actions{display:none}
.actions-sheet{display:none}

/* The 1fr column carries an implicit min-content floor, so a nowrap instruction
   line pushed the card wider than the viewport. minmax(0,1fr) lets it shrink. */
.segment{grid-template-columns:43px 4px minmax(0,1fr) auto}
.is-editing .segment{grid-template-columns:31px 43px 4px minmax(0,1fr) auto}
.segment-content{min-width:0}
.segment-content>div{min-width:0}
.segment-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.segment-duration{white-space:nowrap}

@media(max-width:760px){
  /* The topbar action row was 287px of non-shrinking buttons on a 375px screen. */
  .topbar{padding:0 16px;gap:10px}
  .crumb{min-width:0;gap:6px}
  .crumb strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top-actions{gap:8px;flex-shrink:0}
  #save-template,#save-program,#sound-test{display:none}
  .run-button{height:34px;padding:0 13px;font-size:12px}
  .run-button span{margin-left:8px;font-size:15px}

  .more-actions{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--border-default,#e2e8f0);border-radius:7px;background:var(--surface-elevated,#fff);color:var(--text-secondary,#5d6480);line-height:0}
  .more-actions svg{display:block;fill:currentColor}
  .more-actions[aria-expanded="true"]{background:var(--interactive-soft,#f5f3ff);border-color:#c4b5fd;color:#6d28d9}
  .actions-sheet{display:grid;position:absolute;z-index:30;top:58px;right:16px;min-width:172px;gap:2px;padding:6px;border:1px solid var(--border-default,#e2e8f0);border-radius:10px;background:var(--surface-elevated,#fff);box-shadow:0 12px 28px #0f172a24}
  .actions-sheet.hidden{display:none!important}
  .actions-sheet button{border:0;background:transparent;border-radius:7px;padding:10px 11px;text-align:left;font-weight:700;color:var(--text-primary,#162042)}
  .actions-sheet button:active{background:var(--surface-subtle,#f1f5f9)}
  .topbar{position:relative}

  /* Heading and its buttons were touching at x=157 with no gap. */
  .timeline-header{flex-wrap:wrap;gap:10px 12px;align-items:center}
  .timeline-header>div:first-child{flex:1 1 auto;min-width:0}
  .timeline-actions{flex-shrink:0}

  /* Reclaim side gutters on small screens. */
  .builder-head{padding-left:16px;padding-right:16px}
  .overview-card,.timeline-header,.timeline{margin-left:16px;margin-right:16px}
  .timeline:before{left:21px}
  .segment{padding-right:12px}
  .segment-sub{max-width:none}
  .is-editing .segment{grid-template-columns:27px 38px 4px minmax(0,1fr) auto}

  .contrast .more-actions{background:#000;color:#fff;border-color:#fff}
  .contrast .more-actions[aria-expanded="true"]{background:#fff;color:#000}
  .contrast .actions-sheet{background:#000;border-color:#fff}
  .contrast .actions-sheet button{color:#fff}
}