/* ===== Control scale (enforced): nothing tiny, consistent targets ===== */
html{font-size:15px}
body{font-size:15px;line-height:1.5}
.btn,.btn-primary,.btn-soft,button,input[type=submit],a.button,.button{min-height:40px;height:auto;padding:0 18px;font-size:14px;font-weight:600;line-height:1;border-radius:999px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn-primary{min-height:44px;padding:0 22px;font-size:15px}
table .btn,table .btn-soft,table button,.row-actions .btn{min-height:36px;padding:0 14px;font-size:13px}
input[type=text],input[type=search],input[type=number],input[type=url],input:not([type]),select,textarea{min-height:42px;font-size:15px;padding:0 14px;border-radius:12px}
textarea{padding:12px 14px;min-height:120px;line-height:1.5}
label,.label,.field-label{font-size:13px;font-weight:500;color:var(--ink-2)}
.badge,.chip,.pill{font-size:12px;padding:5px 10px;line-height:1.2}
.kpi-label,.table-wrap th,th{font-size:11.5px;letter-spacing:.08em}
.kpi-value{font-size:32px}.kpi-context{font-size:13px}
td{font-size:14px}
.muted,small,.small{font-size:13px}
h2{font-size:17px}h3{font-size:15px}
.subnav a,.sidebar a,.nav a,.nav-item{font-size:14px}
.sidebar .nav-item,.sidebar a.nav-item{min-height:40px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:10px}
.card-title{font-size:16px}
.video-card .title,.video-title{font-size:15px;line-height:1.35}
/* touch devices: 44px targets */
@media(pointer:coarse){.btn,.btn-primary,.btn-soft,button,select,input:not([type=checkbox]):not([type=radio]){min-height:44px}.sidebar .nav-item{min-height:44px}}
/* phone layout: sidebar becomes a drawer, content full width */
@media(max-width:900px){
  .sidebar{position:fixed;left:-260px;top:0;bottom:0;width:248px;transition:left .2s ease;z-index:40;box-shadow:0 12px 40px rgba(13,15,20,.18)}
  .sidebar.open,body.nav-open .sidebar{left:0}
  .content,.main,.page{margin-left:0!important;padding:20px 16px 56px!important;max-width:100%!important}
  .menu-toggle{display:inline-flex!important}
  h1{font-size:30px}h1 em{font-size:34px}
  .kpis,.cols-2,.cols-3,.video-grid,.studio-title-grid{grid-template-columns:1fr!important}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .topline{display:block}.topline .actions,.page-actions{margin-top:14px;flex-wrap:wrap}
}
.menu-toggle{display:none;min-height:44px;min-width:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px}
.side-item{min-height:42px;font-size:14px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:10px}
.side-item svg{width:18px;height:18px}
.sidebar .group-label,.side-group-label{font-size:11px;letter-spacing:.1em}

/* ===== late fixes (this file loads last) ===== */
.button,a.button{background:#fff;color:var(--ink);border:1px solid var(--line);min-height:40px;padding:0 18px;font-size:14px;font-weight:600;border-radius:999px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 1px 2px rgba(13,15,20,.06)}
.button.primary,.button-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.editorial-actions{display:flex;gap:10px;flex-wrap:wrap}
.overview-hero .editorial-actions .button,.hero .button{background:#fff!important;color:var(--ink)!important;position:relative;z-index:2}
/* discover: compact form row */
.discover-run form{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:12px 14px;align-items:end}
.discover-run form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2)}
.discover-run form .check-row,.discover-run form label.check{flex-direction:row;align-items:center;min-height:42px}
.discover-run form .button,.discover-run form button{grid-column:auto;align-self:end}
.discover-run{display:grid;gap:16px}
/* sidebar drawer on phones (overrides final.css icon rail) */
@media(max-width:900px){
  .sidebar{width:248px!important;padding:24px 14px 18px!important;top:0!important;bottom:0!important;right:auto!important;left:-270px!important;transition:left .2s ease}
  body.nav-open .sidebar{left:0!important}
  .sidebar .side-item span,.sidebar .wordmark span,.sidebar .group-label,.sidebar .side-group-label{display:inline!important}
  .content{margin-left:0!important;padding:16px 16px 56px!important;max-width:100%!important}
  .menu-toggle{display:inline-flex!important;position:sticky;top:8px;z-index:30}
  .discover-run form{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  html,body{overflow-x:hidden;max-width:100vw}
  .content{overflow-x:hidden;width:100%}
  .content>*,.panel,.card,.hero,.editorial,.grid{max-width:100%;min-width:0;box-sizing:border-box}
  .grid,.kpis,.cols-2,.cols-3,.video-grid,.studio-title-grid,.discover-run form{grid-template-columns:1fr!important}
  .table-wrap{overflow-x:auto;max-width:100%}
  table{min-width:600px}
  h1{font-size:28px;line-height:1.1;overflow-wrap:anywhere}h1 em{font-size:32px}
  .editorial{display:block}.editorial-actions{margin-top:12px}
  .hero{min-height:0}.hero img,.hero:after{display:none}
  .segmented,.tabs{overflow-x:auto;max-width:100%}
  input,select,textarea{max-width:100%}
}
*,*:before,*:after{box-sizing:border-box}
@media(max-width:900px){
  .content{width:100vw!important;max-width:100vw!important;margin:0!important;padding:12px 14px 56px!important}
  .hero:before,.hero:after,.hero-art,.hero-image,.overview-hero:before,.overview-hero:after{display:none!important;background:none!important}
  .overview-hero,.hero{padding:20px!important}
  .kpi{padding:16px 18px}.kpi-value{font-size:28px}
}
/* phones: a 1fr grid track expands to a wide table's min-content and drags every card wider than the screen */
@media(max-width:900px){
  .content{display:block!important}
  .content>*{width:100%!important;max-width:100%!important}
  .grid,.kpis,.cols-2,.cols-3,.video-grid,.studio-title-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  .table-wrap{display:block!important;overflow-x:auto!important;max-width:100%!important;-webkit-overflow-scrolling:touch}
  .panel,.card{overflow:hidden}
  h1{white-space:normal!important}
}
@media(max-width:900px){
  body{display:block!important;width:100vw;overflow-x:hidden}
  main.content,.content{min-width:0!important;flex:1 1 0!important;contain:inline-size}
  .content .panel,.content .card,.content .table-wrap{min-width:0!important}
  .table-wrap table{min-width:0!important;width:max-content}
}
/* compact rows: score pill never stretches, title takes the space, left-aligned */
.row>.badge,.row .score-pill,.opportunity-row .score-pill{flex:0 0 auto!important;width:auto!important;min-width:52px;justify-content:center}
.row>.clamp-1,.row>.clamp-2,.row .row-title{flex:1 1 auto;min-width:0;text-align:left}
.row{justify-content:flex-start}
.niche-group>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600}
.niche-group>summary::-webkit-details-marker{display:none}
.niche-group>summary:before{content:"";width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.niche-group[open]>summary:before{transform:rotate(45deg)}
.niche-group .count{font-weight:500;color:var(--muted);font-size:13px}
.toc a{white-space:normal;overflow:visible;text-indent:0;margin:0}
/* labs galleries: captions stay short; the detail lives on hover / in the video page */
.gallery p,.gallery .why,.pattern-gallery p,.thumb-caption p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* desktop: content never wider than the viewport minus the sidebar; inner blocks cap at 1240 */
@media(min-width:901px){
  .content{max-width:calc(100vw - 232px)!important;width:auto!important;box-sizing:border-box}
  .content>*{max-width:1240px}
}
/* theme switch and drawer controls meet the 40px floor; 44px on phones like everything else */
.theme-switch button{min-height:40px!important}
.drawer .drawer-close,.drawer button.close,.drawer-close{min-height:40px;min-width:40px}
@media(max-width:900px){
  .theme-switch button{min-height:44px!important}
  .btn,.btn-primary,.btn-soft,.button,a.button,button,select,input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea{min-height:44px!important}
  .drawer .drawer-close,.drawer-close{min-height:44px;min-width:44px}
}
.icon-button,button.icon-button,.row .icon-button{min-height:40px!important;min-width:40px!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:16px}
@media(max-width:900px){.icon-button{min-height:44px!important;min-width:44px!important}}
/* wide screens: centre the 1240px column in the space beside the sidebar instead of pinning it left */
@media(min-width:901px){
  .content{padding-left:max(40px, calc((100vw - 232px - 1240px) / 2))!important;padding-right:max(40px, calc((100vw - 232px - 1240px) / 2))!important}
  .content>*{margin-left:auto;margin-right:auto}
}