/* SLA Playbook Studio responsive shell — desktop, tablet and phone. */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --app-height:100dvh;
  --mobile-sheet-handle:58px;
}
html{
  min-width:0;
  max-width:100%;
  min-height:100%;
  background:var(--paper,#f7f8f4);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overscroll-behavior:none;
}
body{
  min-width:0;
  max-width:100%;
  min-height:100%;
  overflow-x:hidden;
  padding:0;
}
body,.app,.main,.workarea,.editor,.canvas-wrap,.timeline{max-width:100%}
.app{width:100%;min-height:var(--app-height);align-items:stretch}
.main{width:100%;min-height:var(--app-height)}
button,input,select,textarea{max-width:100%}
button,select,input[type=checkbox],input[type=range]{touch-action:manipulation}
#field{max-width:100%;height:auto}
.mobile-inspector-toggle,.mobile-inspector-handle{display:none}

/* Desktop: keep all three work zones visible and independently scrollable. */
@media (min-width:1200px){
  .library{height:var(--app-height);min-height:0;overflow:hidden}
  .library-list{overscroll-behavior:contain}
  .workarea{min-height:0}
  .inspector{position:sticky;top:0;align-self:flex-start;height:calc(var(--app-height) - 255px);min-height:520px;max-height:var(--app-height);overflow:auto;overscroll-behavior:contain}
  .editor{min-width:620px}
  .web-actions{flex-wrap:nowrap}
  .web-actions #onlineStatus{min-width:190px}
}

/* Tablet landscape and compact desktop. */
@media (min-width:768px) and (max-width:1199px){
  .web-actions{padding:10px 18px;gap:9px}
  .web-identity>img{width:58px;height:58px;flex-basis:58px}
  .web-wordmark strong{font-size:21px}
  .web-actions #onlineStatus{font-size:9px}
  .topbar{height:auto;min-height:88px;padding:15px 18px;align-items:flex-start}
  .header-actions{flex-wrap:wrap;justify-content:flex-end;max-width:52%}
  .header-actions .btn{min-height:40px}
  .modebar{padding-inline:18px}
  .editor{padding:16px 18px 22px}
  .field-view-switch button{min-height:42px}
  .field-context-actions select,.field-context-actions .btn{min-height:42px}
  .transport-controls .icon-button,.timeline-actions .icon-button{min-width:40px;height:40px}
  .play-button{width:42px;height:42px}
  .transport select{height:40px;min-width:68px}
  .frames{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .frame-item{scroll-snap-align:start}
  dialog{max-width:min(620px,94vw)}
}

/* Tablet portrait: prioritize the field, then place editing controls underneath. */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .workarea{flex-direction:column}
  .inspector{
    display:block;
    width:100%;
    flex:0 0 auto;
    max-height:none;
    border-left:0;
    border-top:1px solid var(--line);
    padding:22px 24px calc(24px + var(--safe-bottom));
    overflow:visible;
  }
  .inspector .tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .inspector .tool[data-tool=select]{grid-column:span 4}
  .inspector .row{max-width:760px}
  .canvas-wrap{max-width:880px;margin-inline:auto}
  .timeline{max-width:880px;margin-inline:auto}
}

/* Library becomes a touch-friendly drawer on tablet and phone. */
@media (max-width:950px){
  .app.hide-library .library,
  .app.full-field-large.full-library-open .library{
    display:flex;
    position:fixed;
    inset:0 auto 0 0;
    z-index:80;
    width:min(330px,88vw);
    height:var(--app-height);
    padding-top:calc(20px + var(--safe-top));
    padding-bottom:calc(16px + var(--safe-bottom));
    padding-left:calc(18px + var(--safe-left));
    box-shadow:24px 0 70px #001e3240;
    overflow:hidden;
  }
  .library-backdrop{z-index:79;background:#001e3275;backdrop-filter:blur(2px)}
  .library-close{display:flex;min-height:44px}
  .library .btn,.library-tabs button,.search input{min-height:44px}
}

/* Phone layout. */
@media (max-width:767px){
  body{padding-bottom:calc(var(--mobile-sheet-handle) + var(--safe-bottom))}
  body.mobile-tools-open{overflow:hidden}
  .app{display:block;min-height:var(--app-height)}
  .main{min-height:var(--app-height)}

  .web-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
    min-height:0;
    padding:calc(10px + var(--safe-top)) calc(12px + var(--safe-right)) 10px calc(12px + var(--safe-left));
    border-bottom-width:2px;
  }
  .web-identity{grid-column:1/-1;display:flex;align-items:center;min-width:0;gap:10px;margin:0}
  .web-identity>img{width:50px;height:50px;flex:0 0 50px}
  .web-wordmark{min-width:0;max-width:none}
  .web-wordmark .web-academy{font-size:8px;letter-spacing:.85px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .web-wordmark strong{font-size:20px;line-height:1.05}
  .web-wordmark .web-motto{font-size:10px;margin-top:3px}
  .web-actions #onlineStatus{display:none}
  .web-actions button{width:100%;min-height:42px;margin:0;padding:8px 10px;font-size:10px}
  .athlete-notice{padding:7px 12px;font-size:8px;line-height:1.45;letter-spacing:.055em}

  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    height:auto;
    min-height:0;
    padding:12px calc(12px + var(--safe-right)) 12px calc(12px + var(--safe-left));
    align-items:stretch;
  }
  .title-block{width:100%;min-width:0}
  .breadcrumb{margin-bottom:4px}
  #playTitle{width:100%;font-size:20px;line-height:1.2;min-height:34px}
  .header-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    width:100%;
    max-width:none;
  }
  .header-actions .brand-chip,.header-actions .save-state{display:none!important}
  .header-actions #saveProject{display:inline-flex!important}
  .header-actions .btn{width:100%;min-width:0;min-height:44px;padding:8px 5px;font-size:9px;white-space:normal;line-height:1.2;text-align:center}

  .modebar{
    position:sticky;
    top:0;
    z-index:35;
    height:54px;
    padding:0 calc(8px + var(--safe-right)) 0 calc(8px + var(--safe-left));
    background:#fffefbfa;
    backdrop-filter:blur(12px);
    box-shadow:0 6px 18px #001e320d;
  }
  .segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;flex:1;min-width:0}
  .segments button{justify-content:center;gap:4px;padding:0 5px;font-size:7px;min-width:0}
  .segments button span{font-size:9px;white-space:nowrap}
  .mode-actions{gap:0;flex:0 0 auto}
  .mode-actions .icon-button,.mobile-inspector-toggle{min-width:40px;width:40px;height:44px;font-size:17px}
  .mode-actions #focusBtn,.mode-actions .divider{display:none!important}
  .mobile-inspector-toggle{display:inline-flex;border:0;border-radius:6px;background:transparent;align-items:center;justify-content:center;color:var(--sla-navy,var(--forest));font-weight:800}
  .mobile-inspector-toggle[aria-expanded=true]{background:var(--brand-soft,#eef3e7)}

  .editor{padding:12px calc(10px + var(--safe-right)) 18px calc(10px + var(--safe-left))}
  .app.full-field-large .editor{padding:12px calc(10px + var(--safe-right)) 18px calc(10px + var(--safe-left))}
  .field-contextbar{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-bottom:10px;padding-bottom:10px}
  .field-view-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:3px}
  .field-view-switch button{width:100%;min-width:0;min-height:44px;padding:8px 4px;font-size:9px}
  .field-context-actions{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr);width:100%;gap:7px}
  .field-context-actions label{align-self:center}
  .field-context-actions select,.field-context-actions .btn{width:100%;min-width:0;min-height:42px;font-size:10px;padding:7px}

  .field-toolbar{height:auto;min-height:0;align-items:flex-start;row-gap:8px;margin-bottom:9px}
  .field-toolbar>div{min-width:0}
  .field-toolbar>div:last-child{margin-left:auto;gap:4px}
  .field-toolbar .icon-button{min-width:40px;height:40px}
  .field-toolbar .btn.small{min-height:40px}
  .tiny-label{min-height:40px;padding-inline:4px}
  .tiny-label input{width:18px;height:18px}
  .pill{padding:6px 7px}

  .canvas-wrap{width:100%;border-radius:8px;box-shadow:0 0 0 1px #d8e2d3}
  #field{display:block;width:100%;aspect-ratio:1000/660;touch-action:none}
  .canvas-message{display:none}
  .recording-overlay{top:8px;left:8px;right:8px;justify-content:center;padding:7px;font-size:8px}
  .canvas-bottom{display:flex;flex-wrap:wrap;align-items:flex-start;margin:9px 0 14px;gap:7px}
  .legend{gap:10px;flex-wrap:wrap}
  .turf-legend{margin-left:auto;font-size:8px}
  .turf-legend>span{display:none}

  .timeline{padding-top:12px}
  .transport{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:4px}
  .transport-controls{display:flex;gap:3px;min-width:0}
  .transport-controls .icon-button,.timeline-actions .icon-button{min-width:40px;height:40px}
  .play-button{width:42px;height:42px}
  .transport select{height:40px;min-width:64px;padding:4px;font-size:10px}
  .timecode{display:none}
  .timeline-actions{margin:0;gap:4px}
  .timeline-actions .btn{min-height:40px;padding:7px 9px;font-size:9px}
  .scrubber{height:28px;margin:4px 0 9px;accent-color:var(--forest)}
  .frames{gap:9px;padding:3px 1px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .frame-item{width:132px;flex-basis:132px;scroll-snap-align:start}
  .frame-card{width:100%;flex-basis:auto}
  .frame-delete{min-height:44px}
  .frame-help{font-size:9px}
  .audio-lane{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 10px;min-height:68px;padding:10px}
  .audio-lane-icon{grid-row:1/3}
  .audio-lane>span:last-child{grid-column:2;margin:0;font-size:8px}
  .audio-lane div>span{max-width:none}
  .mini-wave{display:none}
  .statusbar{display:none}

  /* The inspector becomes a collapsible bottom sheet, keeping the field usable. */
  .inspector{
    display:block!important;
    position:fixed!important;
    inset:auto 0 0 0!important;
    z-index:70;
    width:100%!important;
    height:auto!important;
    max-height:min(72dvh,650px)!important;
    min-height:var(--mobile-sheet-handle);
    flex:0 0 auto!important;
    padding:0 calc(16px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(16px + var(--safe-left))!important;
    border:1px solid #d6ded8!important;
    border-bottom:0!important;
    border-radius:18px 18px 0 0;
    background:#fff;
    box-shadow:0 -18px 60px #001e3230;
    overflow:auto!important;
    overscroll-behavior:contain;
    transform:translateY(calc(100% - var(--mobile-sheet-handle) - var(--safe-bottom)));
    transition:transform .22s ease;
    will-change:transform;
  }
  .inspector.mobile-open{transform:translateY(0)}
  .mobile-inspector-handle{
    position:sticky;
    top:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:calc(100% + 32px + var(--safe-left) + var(--safe-right));
    min-height:var(--mobile-sheet-handle);
    margin:0 calc(-16px - var(--safe-right)) 14px calc(-16px - var(--safe-left));
    padding:8px calc(16px + var(--safe-right)) 8px calc(16px + var(--safe-left));
    border:0;
    border-bottom:1px solid #e4e9e4;
    background:#fffefb;
    color:var(--sla-navy,var(--forest));
    text-align:left;
    font-weight:750;
    touch-action:manipulation;
  }
  .mobile-inspector-handle:before{content:"";position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:99px;background:#cfd8d2}
  .mobile-inspector-handle span{padding-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-inspector-handle i{font-style:normal;font-size:18px;transition:transform .2s}
  .inspector.mobile-open .mobile-inspector-handle i{transform:rotate(180deg)}
  .inspector .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inspector .tool[data-tool=select]{grid-column:span 3}
  .tool{min-height:64px;height:auto;padding:9px}
  .inspector input:not([type=checkbox]):not([type=color]):not([type=range]),
  .inspector select,.inspector textarea{font-size:16px;min-height:44px}
  .inspector .row{flex-direction:column;gap:0}
  .inspector .btn{min-height:44px}

  dialog{
    position:fixed;
    inset:auto 0 0 0;
    width:100%;
    max-width:none;
    max-height:92dvh;
    margin:0;
    border-radius:18px 18px 0 0;
    overflow:auto;
    padding-bottom:var(--safe-bottom);
  }
  .modal-head{position:sticky;top:0;z-index:4;padding:20px 18px 14px;background:#fff}
  .modal-head .icon-button{min-width:44px;height:44px}
  #modalBody{padding:18px}
  #modalBody .row{flex-direction:column;gap:0}
  .export-format-grid{grid-template-columns:1fr;gap:8px}
  .format-card{min-height:96px}
  .marking-presets{grid-template-columns:1fr}
  .modal-actions{position:sticky;bottom:0;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px -18px -18px;padding:12px 18px calc(12px + var(--safe-bottom));background:#fff;border-top:1px solid var(--line)}
  .modal-actions .btn{width:100%;min-height:46px;white-space:normal}
  .toast{left:12px;right:12px;bottom:calc(var(--mobile-sheet-handle) + var(--safe-bottom) + 10px);max-width:none;text-align:center}
}

/* Very small phones. */
@media (max-width:430px){
  .athlete-notice{display:none}
  .web-actions{padding-inline:10px}
  .web-identity>img{width:46px;height:46px;flex-basis:46px}
  .web-wordmark strong{font-size:18px}
  .header-actions .btn{font-size:8.5px}
  .segments button{padding-inline:2px}
  .segments button span{font-size:8px}
  .mode-actions .icon-button,.mobile-inspector-toggle{min-width:36px;width:36px}
  .editor,.app.full-field-large .editor{padding-inline:8px}
  .field-context-actions{grid-template-columns:auto minmax(0,1fr)}
  .field-context-actions #midfieldLogoBtn{grid-column:1/-1}
  .transport{grid-template-columns:1fr}
  .timeline-actions{justify-content:flex-end}
  .frame-item{width:124px;flex-basis:124px}
}

/* Phone landscape: trim chrome while preserving all controls. */
@media (max-width:950px) and (max-height:560px) and (orientation:landscape){
  .web-actions{display:flex;flex-wrap:nowrap;padding:6px calc(10px + var(--safe-right)) 6px calc(10px + var(--safe-left))}
  .web-identity{flex:1;grid-column:auto}
  .web-identity>img{width:38px;height:38px;flex-basis:38px}
  .web-wordmark .web-academy,.web-wordmark .web-motto{display:none}
  .web-wordmark strong{font-size:17px}
  .web-actions button{width:auto;min-width:104px;min-height:38px}
  .athlete-notice{display:none}
  .topbar{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-block:8px}
  .header-actions{width:auto;grid-template-columns:repeat(3,minmax(82px,1fr))}
  .breadcrumb{display:none}
  #playTitle{font-size:18px}
  .modebar{height:48px}
  .editor,.app.full-field-large .editor{padding-top:8px}
  .field-contextbar{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .field-context-actions{width:auto;grid-template-columns:auto 110px 130px}
  .canvas-bottom{margin-bottom:9px}
  .inspector{max-height:82dvh!important}
}

@media (pointer:coarse){
  .icon-button{min-width:42px;height:42px}
  .btn{min-height:42px}
  .play-card{padding:12px}
  .library-tabs button{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  .inspector,.mobile-inspector-handle i{transition:none!important}
}