/* Mobile text choices use pills below the artwork; icons live inside the canvas.
   Desktop choices form a text list in the copy column. */
.case-view-controls { display:flex; gap:4px; width:100%; box-sizing:border-box; margin:20px 0 0; padding:3px; border:1px solid #ffffff24; border-radius:999px; background:#111; }
.case-view-controls button { appearance:none; position:relative; display:flex; align-items:center; justify-content:center; flex:1; min-width:0; min-height:44px; padding:10px 14px; border:0; border-radius:999px; background:transparent; color:#a5a5a5; font:500 16px/1.3 var(--main-font); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background-color .18s ease,color .18s ease; }
.case-view-controls button:hover { color:#fff; background:#ffffff0d; }
.case-view-controls button:is([aria-pressed=true],[aria-selected=true]) { color:#111; background:#fff; }
.case-view-controls button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.case-view-label { white-space:nowrap; }
.case-view-dot,.case-view-icon { display:none; }
html[data-theme=light] .case-view-controls { background:#e9e9e7; border-color:#11111124; }
html[data-theme=light] .case-view-controls button { color:#595959; }
html[data-theme=light] .case-view-controls button:hover { color:#111; background:#ffffff70; }
html[data-theme=light] .case-view-controls button:is([aria-pressed=true],[aria-selected=true]) { background:#fff; color:#111; box-shadow:0 1px 4px #00000012; }
html[data-theme=light] .case-view-controls button:focus-visible { outline-color:#111; }
html .case-view-controls.case-view-controls--icons { flex-shrink:0; width:320px; max-width:82%; margin:0; padding:4px; gap:0; border-radius:18px; border:1px solid rgba(35,63,84,.18); background:rgba(30,49,66,.09); }
html .case-view-controls.case-view-controls--icons button { height:44px; padding:0; border-radius:13px; color:#344b5c; }
.case-view-controls--icons .case-view-label { display:none; }
.case-view-controls--icons .case-view-icon { display:block; width:26px; height:26px; background:currentColor; -webkit-mask:var(--device-icon) center / contain no-repeat; mask:var(--device-icon) center / contain no-repeat; }
html .case-view-controls.case-view-controls--icons button:hover { background:transparent; color:#172a3a; }
html .case-view-controls.case-view-controls--icons button[aria-pressed=true] { background:rgba(240,246,249,.94); color:#172a3a; box-shadow:0 2px 7px rgba(30,49,66,.14),inset 0 1px 0 rgba(255,255,255,.24); }
@media(max-width:767px) { .case-view-controls { margin-top:16px; } .case-view-controls button { font-size:14px; padding:9px 8px; } .case-view-controls--icons button { padding:0; } }
@media(min-width:992px) {
  html .case-editorial-copy .case-view-controls {
    display:grid; width:100%; max-width:none; margin:30px 0 0; padding:0; gap:0;
    border:0; border-radius:0; background:transparent;
  }
  html .case-wireframes .case-editorial-copy .case-view-controls,
  html .responsive-player .case-editorial-copy .case-view-controls { margin-top:0; }
  html .case-editorial-copy .case-view-controls button {
    display:flex; justify-content:flex-start; width:100%; height:auto; min-height:0; padding:16px 0;
    border:0; border-top:1px solid rgba(128,128,128,.2); border-radius:0;
    background:transparent; color:var(--portfolio-copy); box-shadow:none;
    font:500 24px/1.6 var(--main-font); text-align:left;
  }
  html .case-editorial-copy .case-view-controls button:last-child { border-bottom:1px solid rgba(128,128,128,.2); }
  html .case-editorial-copy .case-view-controls button:is(:hover,[aria-pressed=true],[aria-selected=true]) {
    color:var(--heading); background:transparent; box-shadow:none;
  }
  .case-editorial-copy .case-view-controls .case-view-label { display:block; white-space:normal; transition:transform .2s ease; }
  .case-editorial-copy .case-view-controls .case-view-icon { display:none; }
  .case-editorial-copy .case-view-controls .case-view-dot {
    display:block; position:absolute; left:0; top:calc(50% - 3px); width:6px; height:6px;
    border-radius:50%; background:#ff9500; opacity:0;
  }
  .case-editorial-copy .case-view-controls button:is([aria-pressed=true],[aria-selected=true]) .case-view-label { transform:translateX(16px); }
  .case-editorial-copy .case-view-controls button:is([aria-pressed=true],[aria-selected=true]) .case-view-dot { opacity:1; }
}
@media(prefers-reduced-motion:reduce) { .case-view-controls button { transition:none; } }