/* Phone layouts share the desktop content, state and URLs. */
/* Keep identity and project navigation outside the content scroll area. */
@media screen{
  body{height:100vh;height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}
  .project-nav{margin:0 auto}
  .project-scroll{min-height:0;overflow-y:auto;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:16px}
}
@media screen and (max-height:520px) and (min-width:601px){
  .header-inner{height:58px;min-height:58px}
  .project-nav{padding-block:8px}
  .project-nav button{flex-direction:row;justify-content:center;min-height:48px;padding:10px;gap:8px}
  .project-nav button>svg{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){.project-scroll{scroll-behavior:auto}}
.chart-touch-control{display:none}
.skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}

@media (min-width:601px) and (max-width:1000px){
  .sector-explorer-grid{grid-template-columns:1fr}
  .sector-company{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}
  .sector-company>p{grid-column:1}
  .sector-company .sector-chart{grid-column:2;grid-row:1/6;align-self:center;margin:0}
  .sector-company>a{grid-column:1/-1}
}
@media (max-width:1000px){.sector-company{order:-1}}

@media (max-width:600px){
  .header-inner{gap:12px}
  .header-contact{flex-wrap:wrap;column-gap:16px;row-gap:0}
  .header-contact a{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
  .languages button[data-lang]{min-height:44px;font-size:12px}
  .project-nav{gap:6px}
  .project-nav button{font-size:12px;line-height:1.45;padding-inline:5px}
  .market-nav{justify-content:flex-start;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}
  .market-nav button{flex-shrink:0;min-height:44px;padding:10px 12px;font-size:13px;white-space:nowrap}
  .market-header p,.workspace-title p{font-size:14px;line-height:1.6}
  .market-status{font-size:12px}
  .index-card{padding:15px 10px}
  .index-card>div:first-child{font-size:12px;line-height:1.4}
  .index-card .index-price{font-size:18px}
  .index-card .return{font-size:12px}
  .range-control button{min-width:44px;min-height:44px;font-size:12px;padding-inline:10px}
  .market-shell .primary-button,.market-shell .soft-button,.market-shell .icon-button{min-height:44px;min-width:44px;font-size:14px}
  .market-shell input:not([type=checkbox]):not([type=range]),.market-shell select,.market-shell textarea{min-height:44px;font-size:16px}
  .compare-label{min-height:44px;display:inline-flex;align-items:center;gap:8px;font-size:12px}
  .compare-label input,.review-row input{width:20px;height:20px;flex-shrink:0}
  .chart-summary>span,.chart-summary p,.chart-legend{font-size:12px}
  .chart-legend{flex-wrap:wrap;gap:10px;line-height:1.5}
  .chart-hint{display:none}
  .chart-touch-control{display:flex;flex-direction:column;gap:2px;margin-top:12px;font-size:12px;color:#54647a}
  .chart-touch-control input{width:100%;min-height:44px;margin:0;accent-color:#0068d1;cursor:ew-resize}
  .chart-wrap .chart-tooltip{position:static;inset:auto!important;width:auto;max-width:none;min-width:0;transform:none;margin-top:4px;padding:14px;background:#f2f6fb;box-shadow:none;font-size:12px;border:0;border-radius:8px;pointer-events:auto}
  .chart-tooltip b{font-size:13px}
  .chart-tooltip span{gap:7px;line-height:1.6}
  .chart-tooltip strong{margin-left:auto;white-space:nowrap}
  .heatmap-header p,.heatmap-intro,.heatmap-selection,.heatmap-detail{font-size:12px}
  .market-source-note,.market-data-state,.market-footer,.market-method{font-size:12px;line-height:1.65}
  .market-footer a,.market-method summary,.blue-link{min-height:44px;display:inline-flex;align-items:center}

  /* Keep every watchlist metric readable without sideways scrolling. */
  .watch-table-wrap{overflow:visible}
  .watch-table{display:block;min-width:0;width:100%;white-space:normal}
  .watch-table thead,.sector-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .watch-table tbody{display:block}
  .watch-table tbody tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 16px;padding:20px 0}
  .watch-table td{padding:0;border:0;text-align:left;font-size:16px;min-width:0}
  .watch-table td:first-child{grid-column:1/-1;padding-right:48px}
  .watch-table td:last-child{position:absolute;right:0;top:20px}
  .watch-table td[data-label]::before{content:attr(data-label);display:block;color:#607087;font-size:12px;font-weight:400;margin-bottom:6px}
  .watch-table .table-index{min-height:44px;font-size:16px}
  .watch-table .table-index small{font-size:12px;margin-top:5px}
  .watch-table .signal{font-size:12px;white-space:normal}
  .watch-toolbar{align-items:stretch}
  .search-field{font-size:14px}
  .rule-card p{font-size:14px;line-height:1.65}
  .rule-card form{flex-wrap:wrap;gap:16px}
  .rule-card form label{font-size:14px}
  .context-selection label,.ai-context,.ai-disclaimer,.review-row label{font-size:13px;line-height:1.6}
  .prompt-list button{min-height:44px;font-size:13px}
  .ai-result p,.ai-result li{font-size:14px;line-height:1.7}

  .sector-heading p{font-size:14px;max-width:none}
  .sector-session>span{font-size:12px}
  .sector-toolbar{flex-wrap:wrap;align-items:flex-end}
  .sector-toolbar label{font-size:12px;flex:1;min-width:125px}
  .sector-toolbar select{max-width:100%}
  .sector-period-control button{min-width:44px;min-height:44px;font-size:13px}
  .sector-kpis span,.sector-kpis small{font-size:12px}
  .sector-kpis strong{font-size:23px}
  .sector-panel h3{font-size:18px}
  .sector-panel header{flex-wrap:wrap;gap:8px}
  .sector-panel header>span,.sector-panel header>button{font-size:12px;max-width:none;text-align:left}
  .sector-panel header>button{min-height:44px}
  .sector-composition-key button{min-height:44px;font-size:13px}
  .sector-composition-key b{font-size:13px}
  .sector-leaders{gap:4px}
  .sector-leaders button{min-height:44px;font-size:13px}
  .sector-leaders button>b{font-size:13px;width:70px}
  .sector-sort{font-size:13px;flex-wrap:wrap}
  .sector-explorer h3{font-size:20px}
  .sector-company>span,.sector-company>p{font-size:13px}
  .sector-company>a{font-size:13px;min-height:44px;display:flex;align-items:center}
  .sector-table-scroll{max-height:460px;overscroll-behavior-y:contain}
  .sector-table{display:block;font-size:13px;white-space:normal}
  .sector-table tbody{display:block}
  .sector-table tbody tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 7px;padding:12px 9px 17px}
  .sector-table tbody th{grid-column:1/-1;padding:0}
  .sector-table tbody button{min-width:0;min-height:44px;padding:0;gap:5px}
  .sector-table tbody button>b{font-size:16px}
  .sector-table tbody button>span{max-width:none;font-size:12px;white-space:normal}
  .sector-table td{padding:0;font-size:12px;text-align:left;white-space:nowrap}
  .sector-table td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:#b8cbd2;margin-bottom:6px}
  .sector-table-count,.sector-method{font-size:12px}
  .sector-method summary{min-height:44px}

  .process-teaser{gap:2px 7px}
  .process-teaser button,.indie-intro .process-teaser button{min-height:44px;font-size:13px}
  .process-stages{gap:2px}
  .process-stages>button{padding-inline:5px}
  .process-stages strong{font-size:12px;min-height:48px;overflow-wrap:normal}
  .process-stages small{font-size:10px}
  .stage-number{font-size:11px}
  .process-next,.process-action,.prototype-actions a{min-height:44px;font-size:14px}
  .build-process>header>p,.process-copy>.prototype-instructions,.process-panel figcaption{font-size:13px}
  .evolution-navigation button{min-width:44px;min-height:44px}
  .evolution-version,.evolution-versions button,.evolution-features button{min-height:44px}
  .close-viewer{min-width:44px;min-height:44px}
  .image-viewer{max-height:100dvh}
  .image-viewer img{max-height:calc(100dvh - 125px)}
  .site-footer{font-size:13px}
  .site-footer a{min-height:44px;display:inline-flex;align-items:center;overflow-wrap:anywhere}
}

@media (max-width:360px){
  .header-contact{column-gap:10px}
  .header-contact a{font-size:11px}
  .project-nav button{font-size:11px}
  .index-card{padding-inline:8px}
  .index-card>div:first-child{font-size:11px}
  .index-card .index-price{font-size:16px}
  .sector-kpis>div{padding:14px 10px}
  .sector-kpis strong{font-size:21px}
  .sector-toolbar label{flex-basis:100%}
  .sector-period-control{margin-left:0}
  .sector-table tbody tr{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

@media (hover:none) and (pointer:coarse){
  a,button,input,select,textarea{touch-action:manipulation}
  .price-chart{touch-action:pan-y pinch-zoom}
}