/* Phone and small-tablet screens only: the shared header loads this with media="screen and (max-width: 800px)". Desktop screens and print never read it. */
/* Phone block order: pages carry data-po="N", data-po-box, data-po-cols, data-po-flat and data-po-stack attributes and
   unstyled <div data-po="N"> wrappers (index.html, us/us.html, page/toronto.html and the board, list, earnings and
   forex pages). They are read only by the rules in this file; do not remove or renumber them. */

/* Fit the page: the 1024 px layout tables take the screen width and their columns stack. */
table[width="1024"], table[width="1024"] > tbody > tr > td {display:block; width:auto}
/* Main content first: the cells of all rows become one column, the 300 px left rail goes after the main column and a
   right-hand column (fifth cell of a rail row, or a column spanning rows, e.g. the quote page ads) goes last. */
table[width="1024"] > tbody {display:flex; flex-direction:column}
table[width="1024"] > tbody > tr {display:contents}
table[width="1024"] > tbody > tr > td[width="300"]:first-child {order:1}
table[width="1024"] > tbody > tr > td[width="300"]:first-child ~ td:nth-child(5):last-child,
table[width="1024"] > tbody > tr > td[rowspan]:last-child {order:2}
/* Pixel-width content tables inside the stacked columns: a vw cap, because a percentage does not limit a table in a
   table cell; 40 px leaves room for the page margins of the deepest layouts (marijuana, blockchain). */
table[width]:not([width$="%"]):not([width="1024"]) {max-width:calc(100vw - 40px)}
/* The 350 px ad box beside the market-list link grid: an ad wider than the screen (e.g. a 400x300 unit) scrolls inside
   the box instead of widening the page. */
table[width="350"][align="right"] {float:none; display:block; max-width:calc(100vw - 20px); overflow-x:auto}

/* Fixed-size AdSense units wider than the screen scroll inside their own box (an ad, not a table). A vw cap, not 100%,
   because a percentage does not stop a wide child from widening the table cells around it. */
ins.adsbygoogle {max-width:calc(100vw - 40px); overflow-x:auto}

img {max-width:100%; box-sizing:border-box}
/* Keep proportions of real pictures only; spacer and rule gifs (spacer.gif, reddot.gif, ...) keep their set height. */
img[width]:not([width$="%"]):not([src*="spacer"]):not([src*="dot.gif"]):not([height="1"]):not([height="2"]):not([height="3"]):not([height="4"]) {height:auto}
iframe, embed, object, video {max-width:100%}
#nav p {box-sizing:border-box}
input[size] {max-width:60vw}

/* Header: with the page at screen width, the logo, Search and Menu are on the first screen. Their boxes grow to 44 px
   for touch while the icon and the word Menu stay where they are drawn today. #h raises the selector over the second
   copy of dstylebasic.css that some pages load after this file. */
#h #hd .wt-m {top:0; height:44px; line-height:38px; padding:0 6px; right:calc(.5em - 6px)}
#h #hd .wt-s {top:0; width:44px; height:44px; right:calc(4em - 10px); background-position:50% 4px}

/* Tap targets of about 44 px for links that stand on their own line: headline and link lists, report titles,
   exchange tabs and the footer menu. Spacing only. */
#news td a, #tselinks td a, .div-general > a {display:inline-block; padding-top:12px; padding-bottom:12px}
#nav #p-menu a {display:inline-block; padding-top:7px; padding-bottom:7px}
center > a:only-child:not(:has(img)) {display:inline-block; padding-top:12px; padding-bottom:12px}

/* Phone block order approved 2026-10-05 (.claude/MOBILE-ORDER-DECISIONS-2026-10-05.md), home page and mpgtoronto.
   The page wraps or marks each block (with the ads next to it) as data-po="N"; containers marked data-po-cols or
   data-po-flat are flattened so every block becomes an item of one flex column (the layout table body, or the element
   marked data-po-box) and takes its place by number. Rows marked data-po move on their own and keep their cell look. */
table[data-po-cols] > tbody > tr > td, table[data-po-flat], table[data-po-flat] > tbody, center[data-po-flat], div[data-po-flat],
table[data-po-flat] > tbody > tr:not([data-po]), table[data-po-flat] > tbody > tr:not([data-po]) > td:not([data-po]) {display:contents}
tr[data-po] {display:table; width:100%}
/* Pages whose blocks sit in several layout tables (market lists) or in one column (toronto.html): the marked container
   is the flex column instead. */
[data-po-box], table[width="1024"] > tbody > tr > td[data-po-box] {display:flex; flex-direction:column}
/* Home page: the <center> around the date line and the layout table is the flex column, so the date/time stamp of
   the market index table (outside the layout table, wrapped data-po="3") sits directly above that table. */
[data-po-box] > table[data-po-cols], [data-po-box] > table[data-po-cols] > tbody {display:contents}
/* A floated content table that becomes a flex item (marketnewhightsx's Daily Market Diaries, 670 px) scrolls inside
   itself, since the flattened column around it no longer does. */
[data-po-box] table[data-po][align] {display:block; max-width:calc(100vw - 20px); overflow-x:auto}
[data-po="1"] {order:1} [data-po="2"] {order:2} [data-po="3"] {order:3} [data-po="4"] {order:4} [data-po="5"] {order:5}
[data-po="6"] {order:6} [data-po="7"] {order:7} [data-po="8"] {order:8} [data-po="9"] {order:9}
[data-po="10"] {order:10} [data-po="11"] {order:11} [data-po="12"] {order:12} [data-po="13"] {order:13}
[data-po="14"] {order:14} [data-po="15"] {order:15} [data-po="16"] {order:16} [data-po="17"] {order:17}
[data-po="18"] {order:18}

/* Quote pages (symbolsearch, symbolsearch1, ussymbolsearch, ussymbolsearch1, incomesearch): the company profile takes
   the screen width (its cells carry 80/529 px widths) and long addresses, emails and links wrap; "People also search
   for" stacks above its ad. */
#symbolsearch td[width] {width:auto}
#symbolsearch td + td, #symbolsearch td:only-child {overflow-wrap:anywhere}
#symbolsearchrelated td {display:block; width:auto; text-align:left}
/* An ad block inside the profile table (the 400x300 video slot sits in a full-width row) must not widen the table and
   push the label/value rows past the screen: it scrolls inside its own centred box. */
#symbolsearch td > center {display:block; max-width:calc(100vw - 50px); overflow-x:auto}
/* The profile table adds about 23 px of cell spacing around a full-width row, so its frames (Dianomi 580 px) get a
   tighter cap than the site-wide one. */
#symbolsearch iframe[width]:not([width$="%"]) {max-width:calc(100vw - 50px)}
/* TradingView chart and financials widgets: their embed code fixes 580 px (the chart wrapper and the financials
   container get it as an inline style); on phones they take the column width, and the widget iframes follow. */
div[id^="tradingview_"][id$="-wrapper"], .tradingview-widget-container {width:auto !important; max-width:100%}

/* Sponsor profile pages (feature/*.htm with <body data-sponsor>): their own 400-720 px tables, right-floated picture
   boxes and fixed cells follow the screen width; pictures sit above the text instead of beside it. */
body[data-sponsor] table[width]:not([width$="%"]) {width:100%; box-sizing:border-box}
body[data-sponsor] td[width]:not([width$="%"]) {width:auto}
body[data-sponsor] table[align] {float:none; margin:0 auto}

/* Earnings calendar pages (page/earnings_ca.htm and the earnings_ca*.cgi variants): the two 462 px ad cells at the
   foot ("People also interested in" and the 300x250 box) stack instead of sitting side by side. */
td[width="462"], td[width="462"] + td {display:block; width:auto; text-align:left}

/* IPO centre (ipo/index.htm): the 430 px search boxes leave room for their Go button, so the intro text and the IPO
   Financing table fit the column; the A-Z browse letters get 44 px taps. */
.selectipo, .formipo {max-width:calc(100vw - 100px)}
a[href*="ipoalphabet1.cgi"] {display:inline-block; padding:12px 4px}

/* Data tables (.genTable: market lists, most volatile, 52-week highs, earnings calendar) fit the screen instead of
   scrolling: the table runs to the screen edges (over the 10 px page margins), 14 px type, 1 px side padding; names
   and headers wrap at spaces (names anywhere), figures (right-aligned or nowrap cells) stay on one line. 14 px is what
   lets six columns of the NYSE/NASDAQ lists (volumes like 120,563K) fit a 360 px phone. */
.genTable {margin:0 -10px}
.genTable table {width:100%; font-size:14px}
.genTable th, .genTable td {font-size:14px; padding:6px 1px; white-space:normal; overflow-wrap:anywhere}
.genTable th, .genTable th nobr {overflow-wrap:normal; white-space:normal}
.genTable td[nowrap][style*="right"], .genTable td[align="right"] {white-space:nowrap; overflow-wrap:normal}
.genTable a:link, .genTable a:visited {font-size:14px; padding:12px 0}
/* Daily Market Diaries (the bordered table in the 670 px box on page/marketnewhightsx.htm and the 47 us/marketnew*
   pages): full width at 14 px; its cells carry inline sizes and paddings. Volumes such as 7,515,142,000 cannot wrap,
   so 360 px phones get 13 px type and 1 px padding. Only that table's own cells are touched. */
table[width="670"][align="left"] {float:none; margin:0 -10px; width:calc(100% + 20px); max-width:none}
[data-po-box] table[data-po][width="670"] {display:table; overflow:visible; max-width:none}
table[width="670"][align="left"] table[border="1"] {width:100%}
table[width="670"][align="left"] table[border="1"] > tbody > tr > td {font-size:14px !important; padding:4px 2px !important}
@media (max-width: 374px) {
  table[width="670"][align="left"] table[border="1"] > tbody > tr > td {font-size:13px !important; padding:4px 1px !important}
}
}

/* Marijuana and blockchain hubs: the 680-1000 px TradingView widgets and content tables are held to the screen by the
   rules above; on marijuana.htm the link list and the "Top Story" box (table marked data-po-stack) stack instead of
   squeezing the story into a one-word column; on us/earnings.htm the two top ad boxes stack the same way. */
table[data-po-stack] > tbody > tr > td {display:block; width:auto}

/* Third-party widget frames with a fixed pixel width (Investing.com calendar 650, FX rates 555, forex charts 650):
   capped at the screen like the content tables; the forex pages' 50 px left inset around them is dropped. */
iframe[width]:not([width$="%"]) {max-width:calc(100vw - 40px)}
td[style*="padding-left:50px"] {padding-left:0 !important}
/* forex/exchange_rate.htm: the Investing.com credit line under the rates widget sits in a 540 px wide div. */
div[style*="width:540px"] {width:auto !important}