/* Shared interaction fixes and a phone-first layout. Desktop styles remain in styles.css. */
.ui-icon{display:inline-block;width:19px;height:19px;vertical-align:middle;flex-shrink:0;pointer-events:none}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0}
.slot>span:first-child,.picker-option>span{min-width:0;overflow-wrap:anywhere}
.slot .plus{display:inline-flex;flex-shrink:0}
.mobile-only,.mobile-question-nav,.mobile-admin-switcher,.mobile-comparison{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.record-filter-form{margin:22px 0}
.record-search{display:flex;gap:10px}
.record-search input{flex:1;min-width:0;background:var(--white);border:1px solid #cbd1c5;padding:10px 12px;font:inherit;min-height:44px}
.record-search>button{display:none}
.record-filter-options{padding:0;border:0;margin:12px 0}
.record-filter-options select{min-width:0}
.record-conferences{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.record-conferences h4,.record-group h4{margin:10px 0;font-size:13px;color:var(--green)}
.ranking-list,.name-list{margin:8px 0;padding-left:25px}
.ranking-list li,.name-list li{padding:5px 0;overflow-wrap:anywhere}
.ranking-list li::marker{color:var(--muted);font-variant-numeric:tabular-nums}
.comparison-note{margin-top:12px}
.public-records details>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:44px}
.public-records details>summary::before{content:'▸';color:var(--green)}
.public-records details[open]>summary::before{content:'▾'}
.public-records .badge.fixture{padding:2px 6px;font-size:10px;letter-spacing:.2px}
.public-records .public-record-results>.button{margin-top:18px}
.public-record-search{max-width:460px}
#main:focus{outline:none}
#main:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.modal-open{overflow:hidden}
.picker-option small{flex-shrink:0}
.outcome-row input,.outcome-row select{font-size:16px}
.outcome-row select{overflow:hidden;text-overflow:ellipsis}
@media(max-width:680px){
  body{font-size:16px;line-height:1.5}
  .wrap{padding-left:16px;padding-right:16px}
  .header{min-height:94px;padding-top:10px;gap:12px}
  .brand{font-size:12px;letter-spacing:.3px;gap:9px}
  .brand img{width:28px;height:28px}
  .brand .brand-sub{display:none}
  .identity{margin:0}
  .identity .avatar{width:30px;height:30px}
  .nav{left:16px;right:16px;display:grid;grid-template-columns:1.25fr 1fr 1.25fr .65fr;gap:6px;height:44px}
  .nav a{font-size:12px;white-space:nowrap;justify-content:center;min-width:0}
  .prototype-bar .wrap{padding-top:0;padding-bottom:0;align-items:center}
  .prototype-bar strong{font-size:10px;letter-spacing:.6px}
  .prototype-bar summary{display:flex;align-items:center;min-height:44px;font-size:12px;gap:6px}
  .prototype-bar summary::before{content:'▸'}
  .prototype-bar details[open]>summary::before{content:'▾'}
  .demo-panel{position:fixed;top:138px;left:16px;right:16px;bottom:auto;width:auto;max-width:none;max-height:calc(100dvh - 154px);overflow:auto;overscroll-behavior:contain;padding:18px;font-size:15px}
  .demo-panel .small{font-size:13px}
  .demo-panel .button{min-height:44px;font-size:14px}
  .main{padding-top:18px;padding-bottom:30px}
  .breadcrumb{display:none}
  .section-meta{flex-wrap:wrap;gap:6px;margin-bottom:12px}
  .section-meta .eyebrow{font-size:11px;letter-spacing:1px}
  .small,small{font-size:13px}
  .eyebrow{font-size:11px;letter-spacing:1.1px}
  .badge{font-size:11px;white-space:normal;letter-spacing:.5px}
  .button,.button.small,.text-link{font-size:14px;min-height:44px}
  .text-link{display:inline-flex;align-items:center}
  .hero{gap:18px;padding:0 0 22px}
  .hero h1{font-size:36px;letter-spacing:-1px;margin:8px 0 12px}
  .hero p{font-size:15px;line-height:1.55}
  .hero-aside{padding:14px}
  .hero-aside .button{font-size:14px}
  .hero-aside .small{font-size:13px}
  .hero-aside .big{font-size:30px}
  .section-heading{align-items:start;flex-wrap:wrap;gap:8px;margin:22px 0 15px}
  .section-heading h2{font-size:25px}
  .section-heading .small{font-size:13px}
  .question-row{padding:18px 0}
  .question-row h3{font-size:22px}
  .question-row p{font-size:14px}
  .question-row .eyebrow{font-size:11px}
  .completion{font-size:13px}
  .note-grid{gap:18px;margin-top:24px}
  .note-grid h3{font-size:14px}
  .note-grid p{font-size:14px}
  .workspace{display:block}
  .workspace>.sidebar{display:none}
  .mobile-question-nav{display:block;margin:0 0 16px}
  .mobile-progress{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin-bottom:6px}
  .mobile-progress span:first-child{min-width:0;overflow-wrap:anywhere}
  .mobile-progress span:last-child{flex-shrink:0;color:var(--green)}
  .question-switcher{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:4px;align-items:center;border:1px solid var(--line);background:var(--white)}
  .question-switcher .icon-button{font-size:27px}
  .question-switcher [aria-disabled=true]{opacity:.3;pointer-events:none}
  .question-switcher label{min-width:0}
  .question-switcher select{font:inherit;font-size:16px;min-height:44px;width:100%;min-width:0;background:var(--white);border:0;text-overflow:ellipsis;padding:6px 2px}
  .workspace .editor-header>.eyebrow{display:none}
  .editor-header h1{font-size:29px;letter-spacing:-.6px;margin:8px 0 10px;overflow-wrap:anywhere}
  .editor-header p{font-size:15px;line-height:1.5}
  .editor-status{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:13px;margin-bottom:12px;padding:12px 0}
  .saved{font-size:12px}
  .tabs{gap:8px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:14px}
  .tabs button{font-size:14px;min-height:48px;line-height:1.35;padding:8px 4px;white-space:normal}
  .standings-grid{gap:14px}
  .slot-row{grid-template-columns:26px minmax(0,1fr) auto;gap:5px;min-height:56px}
  .slot-index{font-size:20px}
  .slot{font-size:16px;min-height:48px;padding:10px 2px;gap:8px}
  .slot-controls{gap:2px}
  .icon-button{width:44px;height:44px}
  .slot-row .slot-controls .move-btn{display:inline-flex}
  .team-pool{padding:14px;margin:0}
  .team-pool h3{font-size:12px}
  .team-pool p{font-size:13px}
  .team-chip{font-size:14px;min-height:44px;padding:9px}
  .pick-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .pick-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:4px 8px;min-height:0;padding:12px 14px;min-width:0}
  .pick-card:last-child:nth-child(odd){grid-column:auto}
  .pick-card .pick-number{grid-column:1;grid-row:1;margin:0;font-size:11px;letter-spacing:.7px}
  .pick-card>.slot{grid-column:1;grid-row:2;font-size:20px;min-height:44px;line-height:1.25;min-width:0;padding:0}
  .pick-card>.slot.empty{font-size:16px}
  .pick-card>.slot-controls{grid-column:2;grid-row:1/3;align-self:center;margin:0}
  .pick-card .slot span:first-child{overflow-wrap:anywhere}
  .pick-card .slot .plus{margin-left:4px}
  .selection-card{min-height:80px;padding:14px}
  .selection-card strong{font-size:22px;overflow-wrap:anywhere}
  .group{margin-top:18px}
  .group-heading{margin-bottom:10px}
  .group-heading h2{font-size:23px}
  .editor-bottom{gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:18px}
  .editor-bottom .button{font-size:14px;padding:10px 12px}
  .notice{font-size:14px;line-height:1.5;padding:12px;margin:14px 0}
  .stats-row{display:flex;flex-wrap:wrap;gap:8px 10px;border:0;margin:16px 0}
  .stat,.stat:first-child{display:inline-flex;align-items:center;gap:7px;border:0;padding:0}
  .stat:first-child{flex-basis:100%}
  .stat strong{display:inline;font-size:16px;line-height:1.2;overflow-wrap:anywhere}
  .stat:first-child strong{font-size:25px}
  .stat small{font-size:13px}
  .stat:not(:first-child){padding:7px 10px;background:var(--light);border:1px solid var(--line)}
  .stat:not(:first-child) small{display:none}
  .desktop-comparison{display:none}
  .mobile-comparison{display:grid;gap:10px}
  .comparison-card{border:1px solid var(--line);background:var(--white);padding:13px 14px;min-width:0}
  .comparison-card.your-pick{border-left:3px solid var(--green);background:var(--light)}
  .comparison-card h3{font-size:16px;line-height:1.35;overflow-wrap:anywhere}
  .comparison-card dl{display:flex;flex-wrap:wrap;gap:10px 18px;margin:10px 0 0}
  .comparison-card dl>div{min-width:58px;flex:1}
  .comparison-card dt{font-size:12px;color:var(--muted)}
  .comparison-card dd{font-size:16px;margin:3px 0 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
  .comparison-note{font-size:13px}
  .bar-row{grid-template-columns:minmax(0,1fr) 60px 45px;gap:8px;font-size:15px}
  .bar-name{overflow-wrap:anywhere}
  .bar-row .bar-name small{font-size:12px}
  .bar-row .percent{font-size:21px}
  .details-section{padding-top:14px;margin-top:20px}
  .details-section summary{font-size:15px;min-height:44px;padding:10px 0;overflow-wrap:anywhere}
  .details-section p,.record-payload,.result-detail{font-size:15px;line-height:1.5}
  .record-conferences{grid-template-columns:1fr;gap:12px}
  .record-conferences h4,.record-group h4{font-size:15px}
  .ranking-list,.name-list{padding-left:25px;margin:6px 0}
  .ranking-list li,.name-list li{font-size:15px;padding:7px 0;border-bottom:1px solid var(--line)}
  .public-records details{padding:7px 0}
  .public-records details summary{font-size:15px;min-height:48px;gap:8px}
  .public-records .badge.fixture{font-size:11px;letter-spacing:0;padding:2px 5px}
  .page-predictions>.section-meta{display:none}
  .page-predictions>.editor-header p{display:none}
  .page-predictions>.editor-header h1{margin:0 0 16px}
  .record-filter-form{margin:0 0 16px}
  .record-search{gap:8px}
  .record-search input{font-size:16px;padding:10px;min-height:46px}
  .record-search>button{display:inline-flex;padding:10px 12px;flex-shrink:0}
  .record-filter-options{display:none;margin:12px 0 0;padding:14px;background:var(--white);border:1px solid var(--line)}
  .record-filter-options.is-open{display:flex;gap:10px}
  .record-filter-options select{flex-basis:100%;width:100%;font-size:16px;min-height:46px}
  .record-filter-options>.button{width:100%}
  .archive-explainer{display:none}
  .record-card{padding:16px;gap:10px}
  .record-card h3{font-size:24px;margin:8px 0}
  .record-card .eyebrow{font-size:11px;letter-spacing:.7px}
  .record-card .small,.record-card .record-result{font-size:14px}
  .record-card .record-foot{flex-wrap:wrap;gap:8px;font-size:12px}
  .record-card .record-foot .text-link{min-height:44px;font-size:14px}
  .mobile-only{display:inline}
  .desktop-only{display:none}
  .page-admin>.section-meta{display:none}
  .page-admin>.split-heading{align-items:center;gap:12px;margin-bottom:16px}
  .page-admin>.split-heading .editor-header h1{margin:0;font-size:27px}
  .page-admin>.split-heading .editor-header p{display:none}
  .page-admin>.split-heading>.button{min-height:44px;font-size:14px;padding:9px 12px}
  .mobile-admin-switcher{display:block;margin:12px 0 20px}
  .mobile-admin-switcher .field{margin:10px 0}
  .mobile-admin-switcher>.button{margin:5px 7px 0 0}
  .admin-list,.question-directory{display:none}
  .admin-layout{margin-top:0}
  .panel{padding:16px;min-width:0}
  .panel h2{font-size:25px;overflow-wrap:anywhere}
  .panel .small{font-size:14px}
  .panel .section-meta{align-items:start;gap:8px;flex-wrap:wrap}
  .panel .actions{gap:10px}
  .panel .actions>.button{flex:1;white-space:normal}
  .field{font-size:14px;line-height:1.4}
  .field small{font-size:13px}
  .field input,.field select,.field textarea,.search-input,.filters input{font-size:16px;min-height:46px;max-width:100%}
  .field input[type=checkbox]{min-height:24px;width:24px}
  .inline-fields{grid-template-columns:1fr;gap:0}
  .candidate-list{max-height:300px}
  .candidate-list label{font-size:15px;min-height:44px;padding:9px 0}
  .candidate-list input{width:24px;height:24px}
  .outcome-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:8px;border-bottom:1px solid var(--line);padding:12px 0;margin:0}
  .outcome-row select{grid-column:1/-1;font-size:16px;min-height:46px;padding:10px}
  .outcome-row input{font-size:16px;min-height:46px;width:100%;padding:10px}
  .outcome-row.standing{grid-template-columns:28px minmax(0,1fr)}
  .outcome-row.standing select{grid-column:2}
  .outcome-row.set-result{grid-template-columns:24px minmax(0,1fr) 44px}
  .outcome-row.set-result select{grid-column:2}
  .outcome-row.team-result{grid-template-columns:minmax(0,1fr) 62px 62px}
  .outcome-row.team-result span{font-size:14px;overflow-wrap:anywhere}
  .outcome-row-header{display:none}
  .outcome-row.team-result.outcome-row-header{display:grid;font-size:12px;padding-bottom:6px}
  .outcome-row small{font-size:13px}
  .lifecycle{gap:4px}
  .lifecycle span{font-size:11px;padding:7px}
  .pill-tabs{gap:6px;margin:0 0 16px}
  .pill-tabs a{font-size:13px;padding:10px;min-height:44px}
  dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  #confirm-dialog{position:fixed;top:calc(var(--dialog-top,0px) + 12px);left:0;right:0;bottom:auto;margin:0 auto;max-height:calc(var(--dialog-height,100dvh) - 24px);overflow:auto;overscroll-behavior:contain}
  .dialog-header{padding:16px;gap:10px}
  .dialog-header h2{font-size:25px;line-height:1.2;overflow-wrap:anywhere}
  .dialog-header p{font-size:14px}
  .dialog-body{padding:0 16px 16px;font-size:15px}
  .dialog-body .actions{flex-wrap:wrap}
  #picker{position:fixed;inset:auto;margin:0;left:0;top:var(--picker-top,0px);width:100%;max-width:none;height:var(--picker-height,100dvh);max-height:none;border:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);overflow:hidden}
  #picker[open]{display:flex;flex-direction:column}
  #picker .dialog-header{flex-shrink:0;align-items:center;padding:10px 16px 6px}
  #picker .dialog-header .eyebrow{font-size:11px}
  #picker .dialog-header h2{font-size:23px;margin-top:3px}
  #picker .dialog-header p{display:none}
  #picker .dialog-search{padding:6px 16px 8px;flex-shrink:0}
  #picker .search-input{font-size:16px;min-height:46px}
  #picker .search-input:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
  #candidate-count{font-size:12px;margin:5px 0 0!important;line-height:1.25}
  #picker .picker-results{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 16px 12px;scroll-padding-bottom:12px}
  .picker-option{font-size:16px;min-height:56px;padding:12px 0;gap:3px;flex-direction:column;align-items:flex-start;justify-content:center}
  .picker-option small{font-size:12px;text-align:left;white-space:normal;line-height:1.3}
  #toast{font-size:14px;bottom:calc(12px + env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:460px;padding:13px 16px}
  .footer .wrap{font-size:12px;padding-top:18px;padding-bottom:18px}
}