/* Shared phone and tablet layouts. Desktop trading density stays separate. */
@media (max-width:1180px) {
  :root { --row-height:44px; }
  body { -webkit-text-size-adjust:100%; }
  :is(main,section,article,form,fieldset,nav,header,footer) { min-width:0; }
  :is(button,.button,input,select,textarea) { max-width:100%; }
  :is(input,select,textarea) { font-size:16px; }
  :is(button,.button,summary) { min-height:44px; }
  :is(button,.button) { white-space:normal; line-height:1.35; }
  :is(p,li,label,small) { overflow-wrap:break-word; }
  :is(.actions,.dialog-actions,.media-actions,.header-actions) { flex-wrap:wrap; gap:10px; }
  dialog:not(#roomTour) { width:min(720px,calc(100% - 24px)); max-height:calc(100dvh - 24px); }
  dialog .dialog-content { padding:24px; font-size:14px; }
  dialog :is(p,label,small) { font-size:14px; line-height:1.6; }
  dialog :is(input,select,textarea) { min-width:0; }
  dialog :is(.actions,.dialog-actions) > * { flex:1 1 140px; }
  .site-header { padding-inline:16px; }
  .site-header .site-brand { font-size:18px; min-width:0; }
  .site-header .site-editions a { min-height:44px; }
  .site-header nav { max-height:calc(100dvh - 160px); }
  .site-document .instructor-main { width:calc(100% - 32px); }
  .site-document .panel { padding:22px; }
  .instructor-main form { max-width:100%; }
  .instructor-main .actions > * { flex:1 1 180px; text-align:center; }
  .instructor-main code { display:block; overflow-wrap:anywhere; }
  #entry { align-content:start; }
  body #entry > .panel { padding:22px; }
  #entry :is(p,label,small) { font-size:14px; line-height:1.6; }
  #entry .actions > * { flex:1 1 160px; }
  /* Classroom panels use the same tabs on tablets and phones. */
  #room { overflow-y:auto; gap:12px; }
  #room > :not(.room-grid) { flex-shrink:0; }
  #room .room-bar { display:flex; flex-direction:column; align-items:stretch; padding:14px; gap:12px; }
  #room .room-overview { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  #room :is(.room-identity,.room-actions) { display:flex; flex-wrap:wrap; gap:10px; }
  #room .room-actions > button { flex:1 1 auto; font-size:13px; min-height:44px; padding:10px; }
  #room #hostControls { gap:10px; }
  #room #hostControls > :is(button,a) { min-height:44px; font-size:13px; padding:10px; flex:1 1 140px; }
  #room .account-summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  #room .account-summary > div { padding:12px; }
  #room .account-summary span { font-size:12px; }
  #room .account-summary strong { font-size:18px; overflow-wrap:anywhere; }
  #room .account-summary > div:nth-child(n) { display:grid; }
  #room .tabs { display:flex; flex-wrap:wrap; gap:8px; }
  #room .tabs button { flex:1 1 100px; padding:10px; font-size:13px; min-height:44px; }
  #room > .room-grid { display:block; flex:1 0 460px; min-height:460px; }
  #room .room-grid > [data-panel] { display:none; height:100%; overflow-y:auto; padding:18px; gap:12px; }
  #room .room-grid[data-view=market] > [data-panel=market],
  #room .room-grid[data-view=chart] > [data-panel=chart],
  #room .room-grid[data-view=trade] > [data-panel=trade],
  #room .room-grid[data-view=holdings] > [data-panel=holdings],
  #room .room-grid[data-view=news] > [data-panel=news],
  #room .room-grid[data-view=leaderboard] > [data-panel=leaderboard] { display:flex; flex-direction:column; }
  #room .room-grid :is(h2,#ticketTitle) { font-size:18px; }
  #room .room-grid :is(small,.muted,#tradeForm small,#position,#balance,#tradeStatus) { font-size:13px; line-height:1.5; }
  #room .room-grid #chart { min-height:220px; }
  #room .room-grid .stock-row { min-height:60px; padding:12px; font-size:15px; }
  #room .room-grid :is(.position-row,.leader-row) { flex-wrap:wrap; gap:10px; padding:12px 0; font-size:14px; }
  #room .portfolio-actions button { min-height:44px; }
  #room .room-chart figcaption { font-size:12px; flex-wrap:wrap; }
  #room[data-role=trader] .ticket > :is(.dashboard-eyebrow,#ticketTitle,#balance) { display:block; }
  #room[data-role=trader] #tradeForm { gap:12px; }
  #room #tradeForm button { min-height:44px; font-size:14px; }
  #room .market-wire #headline { margin-right:0; padding-right:0; font-size:15px; }
  #room .market-wire .reporter-portrait { position:static; align-self:flex-end; }
  /* Solo: page scroll plus local panel scroll, never shrink-to-fit controls. */
  body:has(.app-shell) { overflow-y:auto; height:auto; min-height:100dvh; }
  .app-shell { height:auto; min-height:100dvh; overflow:visible; display:flex; flex-direction:column; gap:12px; padding:16px; }
  .app-shell > * { flex-shrink:0; }
  .app-shell .topbar { flex-wrap:wrap; gap:12px; }
  .app-shell .header-actions { display:flex; width:100%; gap:8px; }
  .app-shell .header-actions .button { min-height:44px; font-size:13px; padding:10px; flex:1 1 auto; }
  .app-shell :is(.control-label,.tutorial-label) { display:inline; }
  .app-shell .run-bar { min-height:64px; flex-wrap:wrap; padding:12px; gap:8px; }
  .app-shell .summary-strip { flex-shrink:0; }
  .app-shell .stat-box { padding:12px; }
  .app-shell .stat-box .label { font-size:11px; }
  .app-shell .stat-box strong { font-size:19px; }
  .app-shell .sub-value { font-size:11px; }
  .app-shell .event-banner { display:flex; flex-wrap:wrap; min-height:48px; padding:12px; font-size:13px; }
  .app-shell .event-banner > span:last-child { font-size:12px; }
  .app-shell .view-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .app-shell .view-tabs button { min-height:44px; font-size:13px; }
  .app-shell .layout { display:block; flex:1; min-height:480px; }
  .app-shell .layout > [data-panel] { display:none; height:clamp(480px,70dvh,800px); width:100%; max-width:none; padding:18px; overflow-y:auto; }
  .app-shell .layout[data-view=market] > [data-panel=market],
  .app-shell .layout[data-view=trade] > [data-panel=trade],
  .app-shell .layout[data-view=holdings] > [data-panel=holdings],
  .app-shell .layout[data-view=news] > [data-panel=news] { display:flex; flex-direction:column; gap:12px; }
  .app-shell .layout > [data-panel] > * { flex-shrink:0; }
  .app-shell .chart-figure { min-height:220px; flex:1 0 220px; }
  .app-shell .chart-figure svg { min-height:190px; }
  .app-shell :is(.field label,.quantity-heading label,.quantity-heading .muted,.profile,.feedback,.order-hint,.position-summary,.chart-figure figcaption) { font-size:13px; line-height:1.5; }
  .app-shell :is(.profile,.news-intro) { display:block; }
  .app-shell .stock-select { height:auto; min-height:48px; }
  .app-shell .stock-select :is(strong,small) { font-size:13px; }
  .app-shell :is(.market-table,.holdings-panel table) { font-size:13px; }
  .app-shell .holdings-panel th { font-size:11px; }
  .app-shell #orderForm { gap:12px; }
  .app-shell :is(.presets button,.trade-actions .button,.pager button,#quantity,#openOrdersButton) { min-height:44px; height:auto; font-size:13px; }
  .app-shell .news-list { overflow-y:auto; min-height:180px; }
  .app-shell .news-list :is(p,.news-meta) { font-size:14px; }
  .app-shell .news-list h3 { font-size:18px; }
}
@media(max-width:600px) {
  dialog .dialog-content { padding:20px; }
  .site-header-inner { gap:10px; }
  .site-header .site-brand { font-size:16px; gap:6px; }
  .site-document .panel { padding:18px; }
  .site-document .instructor-main { width:calc(100% - 24px); }
  .app-shell { padding:10px; }
  .app-shell .summary-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .app-shell .market-toolbar { grid-template-columns:1fr; }
  .app-shell #orderForm { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .app-shell .presets { display:flex; flex-wrap:wrap; gap:8px; }
  .app-shell .presets button { flex:1 1 40%; }
  #room .account-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #room .tabs button { flex-basis:28%; }
  #room .room-grid > [data-panel] { padding:14px; }
  #room .quick-shares button { flex:1 1 40%; min-height:44px; font-size:13px; }
  .settings-mode-grid { grid-template-columns:1fr; }
  .class-media-dialog iframe { max-width:100%; }
  .login-fields,.pagination { flex-wrap:wrap; }
  .login-fields > * { flex:1 1 100%; }
  .health-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow-wrap:anywhere; }
}
@media(max-width:900px) {
  .hero { grid-template-columns:1fr; gap:28px; padding-block:32px; }
  .paths,.casual .paths { grid-template-columns:1fr; }
  .market-preview { transform:none; }
}

@media(max-width:1180px){html:has(.app-shell){height:auto;overflow-y:auto}.realistic-dashboard .app-shell .view-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}.app-shell .layout[data-view=research] > [data-panel=research]{display:flex;flex-direction:column;gap:12px}.app-shell .table-wrap{min-height:180px;overflow:auto}}
@media(max-width:1180px) {
  .app-shell .header-actions .button { width:auto; height:auto; }
  .app-shell #advancedOrders { grid-column:1 / -1; }
  .app-shell .order-type-buttons button { background:var(--panel-soft); color:var(--text); border:1px solid var(--line); border-radius:6px; font-size:14px; min-height:44px; }
  .app-shell .order-type-buttons button[aria-pressed=true] { background:var(--green); color:#10251d; }
}
@media(max-width:600px) {
  .app-shell #orderForm { grid-template-columns:minmax(0,1fr); }
  body:not(.realistic-dashboard) .app-shell #orderForm > * { grid-column:1; grid-row:auto; }
  .app-shell #orderForm .advanced-order-controls { grid-template-columns:minmax(0,1fr); }
  body:not(.realistic-dashboard) .app-shell #orderForm :is(#triggerLabel,#triggerPrice) { grid-column:1; grid-row:auto; }
  .app-shell .trade-preview { width:100%; }
  .app-shell .order-total { align-items:flex-start; }
}
@media(max-width:1180px) {
  .app-shell .header-actions .button { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  .app-shell .tutorial-short-label { display:none; }
  #room .room-grid > [data-panel] { border-radius:10px; }
  #room .tabs, .app-shell .view-tabs { position:sticky; top:0; z-index:5; background:var(--bg); padding-block:6px; }
  #room .account-summary > div { align-content:start; gap:4px; }
}
@media(min-width:700px) and (max-width:1180px) {
  #room .account-summary { grid-template-columns:repeat(5,minmax(0,1fr)); }
  #room #monitorSummary { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(min-width:360px) and (max-width:600px) {
  #room .account-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #room .account-summary > div { padding:10px; }
  #room .account-summary strong { font-size:16px; }
}