/* Device layer, loaded last: tablets and phones. Desktop (over 1024px) is unchanged.
   Inline column counts in app.js are overridden here with !important on purpose. */

/* any grid column may shrink below its content's natural width (stops wide tables / long names pushing the page sideways) */
.dashboard-grid>*,.company-grid>*,.ov-main>*,.two-col>*,.right-column>*,.stat-grid>*,.metrics>*,.sector-grid>*,.screener-grid>*,.facts>*{min-width:0}
img,svg,canvas,video{max-width:100%}
.tabrow{scrollbar-width:none;-webkit-overflow-scrolling:touch}.tabrow::-webkit-scrollbar{display:none}
/* button groups never break a label mid-word ("P/ E"); the group wraps onto a new line instead */
.segmented{flex-wrap:wrap;max-width:100%}.segmented button{white-space:nowrap}
.chart-header{flex-wrap:wrap;gap:10px}

/* type scale (tools/fontscale.py): every size is calc(<px> * var(--fz, 1)); the text-size setting sets --fz on <html> */
:root{--fz:1}
html[data-ts="compact"]{--fz:.88}
html[data-ts="large"]{--fz:1.12}
table{font-size:calc(13.5px * var(--fz, 1))}
th{font-size:calc(12.5px * var(--fz, 1))}


/* top bar stays in place while the page scrolls; the search box takes the free width */
header{position:sticky;top:0;z-index:15}
.top-actions{flex:1;justify-content:flex-end;min-width:0}
.searchbar{width:auto;flex:1;max-width:560px;min-width:200px;padding:12px 14px;font-size:calc(14px * var(--fz, 1))}
.watch-feed{top:98px;max-height:calc(100vh - 118px)}
@media(max-width:700px){.searchbar{min-width:0}}

/* account chip in the top bar (avatar + name + plan); on narrow screens only the avatar */
.top-user{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border-radius:9px;text-align:left}
button.top-user:hover{background:var(--soft)}
.top-user .avatar{padding:9px}
.top-user-text strong{display:block;font-size:calc(13px * var(--fz, 1));white-space:nowrap}
.top-user-text small{display:block;color:var(--muted);font-size:calc(12px * var(--fz, 1));margin-top:2px;white-space:nowrap}
@media(max-width:1280px){.top-user-text{display:none}.top-user{padding:0}}

/* ---------- tablet (iPad portrait / small laptops) ---------- */
@media(max-width:1024px){
  .card.metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:16px}
  .card.metrics .metric{padding-left:12px!important;border-right:1px solid var(--line)!important}
  .card.metrics .metric:nth-child(3n){border-right:0!important}
  .card.metrics .metric:nth-child(3n+1){padding-left:0!important}
  .stat-grid[style]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .sector-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-head,.section-head,.query-controls,.actions{flex-wrap:wrap}
}

/* ---------- phone ---------- */
@media(max-width:700px){
  html,body{overflow-x:clip}
  .dashboard-grid,.company-grid,.ov-main,.two-col,.right-column,.pro-grid,.evidence-grid{grid-template-columns:minmax(0,1fr)!important}
  .card.metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:16px!important;row-gap:14px}
  .card.metrics .metric{padding:0 0 0 12px!important;border-right:0!important;border-left:1px solid var(--line)}
  .card.metrics .metric:nth-child(odd){padding-left:0!important;border-left:0}
  .card.metrics .metric-value{font-size:calc(17px * var(--fz, 1));overflow-wrap:anywhere}
  .card.metrics>details{position:static!important;grid-column:1/-1}
  .card.metrics>details>.card{position:fixed!important;left:12px!important;right:12px!important;width:auto!important;top:80px}
  .stat-grid,.stat-grid[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stat strong{font-size:calc(19px * var(--fz, 1));overflow-wrap:anywhere}
  .facts,.facts[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sector-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

  /* company header: name full width, price under it */
  .company-head{flex-direction:column;align-items:stretch!important}
  .company-head>div:last-child{text-align:left!important}
  .company-title h1{overflow-wrap:anywhere}
  .company-tools{gap:8px}
  .company-tools .btn{flex:1 1 auto;justify-content:center}

  /* headings, toolbars and filters wrap instead of overflowing */
  .page-head,.section-head{flex-wrap:wrap}
  .section-head>.actions,.page-head>.actions{flex-wrap:wrap;justify-content:flex-start;flex-direction:row!important;align-items:center!important}
  .filter-bar>input,.filter-bar>select{flex:1 1 140px;min-width:0}
  .tabrow{gap:16px}
  .tab{padding-left:0;padding-right:0}

  /* tables keep their columns and scroll sideways inside their card */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap td,.table-wrap th{min-width:0}
  table{font-size:calc(13px * var(--fz, 1))}

  /* calendar month: day number and event count only; tap a day for its list */
  .cal-grid{gap:3px!important}
  .cal-cell{min-height:50px!important;padding:5px 4px!important}
  .cal-cell .cal-cos{display:none}
  .cal-cell>div:first-child{flex-direction:column;align-items:center;gap:2px;margin:0!important}

  .query-controls{flex-wrap:wrap}.actions{flex-wrap:wrap}
  /* drop-down panels (field / column pickers) open as a full-width sheet instead of off the left edge */
  details>.card[style*="position:absolute"]{position:fixed!important;left:10px!important;right:10px!important;width:auto!important;top:70px!important;max-height:75vh!important;z-index:50!important}
  /* dialogs use the whole width */
  dialog{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;padding:16px!important}

  /* touch targets */
  .btn,.text-btn,.tab{min-height:36px}
  .screen-mini{gap:10px}
}

/* ---------- small phones ---------- */
@media(max-width:380px){
  main{padding:20px 12px}
  .card{padding:15px}
  .card.metrics .metric-value{font-size:calc(15px * var(--fz, 1))}
  .searchbar{width:150px}
}

/* sidebar and top bar keep their original sizes (as before the type scale of 29 Oct 2026); the text-size setting does not change them */
aside .nav-item{font-size:13px}
aside .nav-label{font-size:10px}
aside .nav-count{font-size:10px}
.edition{font-size:8px;letter-spacing:1.45px;margin-left:10px;white-space:nowrap}
.breadcrumb{font-size:12px}
.searchbar{font-size:13px}
.searchbar kbd{font-size:10px}
.demo-dot{font-size:10px}
.top-user .avatar{font-size:11px}
.top-user-text strong{font-size:12px}
.top-user-text small{font-size:10px}

/* ---------- audit #31: tablet market grid + phone search ---------- */
/* a 4-column market grid is cramped next to the 190px sidebar on tablets — drop to 2 columns */
@media(max-width:1024px){.market-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* phone: the search trigger flexes to the free width, never wraps, and drops the keyboard hint rather than shrinking to a square */
@media(max-width:480px){
  .searchbar{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .searchbar kbd{display:none}
}
@media(max-width:380px){.searchbar{width:auto}}

/* audit #07: on phones the company research tabs stick below the header, so Financials / Documents / Business are
   reachable without scrolling back past the metrics. Desktop is unchanged. */
@media(max-width:700px){
  .co-tabs{position:sticky;top:65px;z-index:10;background:var(--bg);margin:0 -16px;padding:4px 16px 0;border-bottom:1px solid var(--line)}
}