/* TDMHDRMOB r2: phone-only, body scoped. New controls have HTML hidden. */
@media (max-width:700px) {
 @supports (display: grid) and selector(:has(*)) {

  body.tdm-hdr-page .tdm-shell {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background: #fff;
  }

  body.tdm-hdr-page .tdm-shell > br {
    display: none;
  }

  /* Flatten wrappers so the date, division line, CSE label and
     main-column children can be placed with grid/order. */
  body.tdm-hdr-page .tdm-hdr,
  body.tdm-hdr-page .tdm-hdr > table,
  body.tdm-hdr-page .tdm-hdr > table > tbody,
  body.tdm-hdr-page .tdm-shell > table.tdm-main,
  body.tdm-hdr-page .tdm-shell > table.tdm-main > tbody,
  body.tdm-hdr-page .tdm-shell > table.tdm-main > tbody > tr,
  body.tdm-hdr-page td.tdm-center,
  body.tdm-hdr-page #main {
    display: contents;
    width: auto !important;
    max-width: 100%;
  }

  body.tdm-hdr-page .tdm-hdr table,
  body.tdm-hdr-page .tdm-hdr tbody,
  body.tdm-hdr-page .tdm-hdr tr,
  body.tdm-hdr-page .tdm-hdr td,
  body.tdm-hdr-page .tdm-shell table,
  body.tdm-hdr-page .tdm-shell td {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Unclaimed flattened leftovers go after the stories, not into the header. */
  body.tdm-hdr-page .tdm-hdr > table > tbody > tr {
    order: 30;
    grid-column: 1 / -1;
  }

  /* ---- Top line: division only. Date/time is hidden on phones
     because Bob asked to remove it (display:none on this element
     only). Desktop still shows the date. ---- */
  body.tdm-hdr-page .tdm-hdr tr:has(#siteheader),
  body.tdm-hdr-page .tdm-hdr tr:has(#siteheader) > td,
  body.tdm-hdr-page #siteheader {
    display: contents;
  }

  body.tdm-hdr-page .tdm-hdr-date {
    display: none;
  }

  body.tdm-hdr-page .tdm-hdr-division {
    order: 1;
    grid-column: 1 / -1;
    grid-row: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 2px 8px;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: normal;
    color: #666;
    background: #f7f7f7;
    text-align: center;
    float: none;
    white-space: normal;
  }

  body.tdm-hdr-page .tdm-hdr-division font {
    display: inline;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: normal;
    color: inherit;
    white-space: normal;
    padding: 0;
    background: none;
  }

  body.tdm-hdr-page .tdm-hdr-division > br,
  body.tdm-hdr-page .tdm-hdr-division > p {
    display: none;
  }

  /* ToyDirectory / TDmonthly links: kept visible below the stories,
     not on the 20px top line (they need 44px taps). */
  body.tdm-hdr-page .tdm-site-links {
    order: 20;
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    padding: 8px 16px;
    box-sizing: border-box;
    font-size: 14px;
    color: #666;
  }

  body.tdm-hdr-page .tdm-site-links a {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
    padding: 0 2px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #555 !important;
    text-decoration: underline;
  }

  /* Slim top bar: logo left, Login + Menu right. */
  body.tdm-hdr-page .tdm-hdr > table:first-of-type > tbody > tr:last-of-type {
    order: 2;
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "logo login menu"
      "panel panel panel";
    align-items: center;
    column-gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 2px 12px;
    box-sizing: border-box;
    background: #fff;
  }

  body.tdm-hdr-page .tdm-hdr > table:first-of-type > tbody > tr:last-of-type > td,
  body.tdm-hdr-page .tdm-account-wrap,
  body.tdm-hdr-page .tdm-account {
    display: contents;
  }

  /* Do not let the AdSense script tag or the 140px spacer occupy a grid cell. */
  body.tdm-hdr-page .tdm-hdr > table:first-of-type script,
  body.tdm-hdr-page .tdm-hdr img[src*="spacer.gif"],
  body.tdm-hdr-page .tdm-account-wrap > div {
    display: none !important;
  }

  body.tdm-hdr-page .tdm-logo-link {
    grid-area: logo;
    display: flex !important;
    align-items: center;
    min-height: 44px !important;
    min-width: 0;
    padding: 0 !important;
    line-height: 0 !important;
    max-width: 100%;
  }

  body.tdm-hdr-page .tdm-logo-link img,
  body.tdm-hdr-page .tdm-hdr img[src*="tdmbytd.gif"] {
    width: auto !important;
    height: 44px !important;
    max-height: 48px !important;
    max-width: min(204px, 52vw) !important;
    object-fit: contain;
    object-position: left center;
    display: block;
    border: 0;
  }

  body.tdm-hdr-page .tdm-login {
    grid-area: login;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px !important;
    min-width: 44px;
    padding: 0 10px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700;
    color: #063b66;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
  }

  /* Override the new control's HTML hidden attribute on phones only. */
  body.tdm-hdr-page .tdm-nav-toggle {
    display: block !important;
    position: absolute;
    left: -100vw;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
  }

  body.tdm-hdr-page .tdm-hdr:has(> .tdm-nav-toggle) .tdm-nav-btn {
    grid-area: menu;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #222;
    background: #f4f4f4;
    border: 1px solid #cccccc;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
  }

  body.tdm-hdr-page .tdm-nav-toggle:focus-visible ~ table .tdm-nav-btn,
  body.tdm-hdr-page .tdm-nav-btn:focus,
  body.tdm-hdr-page .tdm-hdr a:focus {
    outline: 2px solid #264989;
    outline-offset: 2px;
  }

  /* Sign Up + Your Account: closed until the Menu checkbox is checked. */
  body.tdm-hdr-page .tdm-pipe,
  body.tdm-hdr-page .tdm-hdr:has(> .tdm-nav-toggle) .tdm-signup,
  body.tdm-hdr-page .tdm-hdr:has(> .tdm-nav-toggle) .tdm-greeting,
  body.tdm-hdr-page .tdm-hdr:has(> .tdm-nav-toggle) .tdm-account-link {
    display: none !important;
  }

  body.tdm-hdr-page .tdm-nav-toggle:checked ~ table .tdm-greeting,
  body.tdm-hdr-page .tdm-nav-toggle:checked ~ table .tdm-signup,
  body.tdm-hdr-page .tdm-nav-toggle:checked ~ table .tdm-account-link {
    display: flex !important;
    grid-column: 1 / -1;
    align-items: center;
    min-height: 44px !important;
    padding: 0 4px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: #063b66;
    text-decoration: none;
    border-top: 1px solid #eeeeee;
    box-sizing: border-box;
  }

  body.tdm-hdr-page .tdm-nav-toggle:checked ~ table .tdm-nav-btn {
    background: #e8eef6;
    border-color: #264989;
  }

  /* One swipeable row of all five tabs. Visual order matches desktop
     (Magazine Home first) via flex order, so overflow is on the right. */
  body.tdm-hdr-page .tdm-hdr tr:has(#topnavigation) {
    order: 3;
    grid-column: 1 / -1;
    grid-row: 3;
    display: block;
    width: 100%;
    max-width: 100%;
  }

  body.tdm-hdr-page #topnavigation {
    float: none;
    width: 100%;
    max-width: 100%;
    background: #fff;
    line-height: normal;
    font-size: 14px;
    border-bottom: 1px solid #e5e5e5;
  }

  body.tdm-hdr-page #topnavigation ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 8px;
    list-style: none;
    box-sizing: border-box;
  }

  body.tdm-hdr-page #topnavigation li,
  body.tdm-hdr-page #topnavigation #current {
    float: none;
    flex: 0 0 auto;
    background: none;
    margin: 0;
    padding: 0;
  }

  body.tdm-hdr-page #topnavigation li:nth-child(1) { order: 5; } /* Get Listed */
  body.tdm-hdr-page #topnavigation li:nth-child(2) { order: 4; } /* ToyShow */
  body.tdm-hdr-page #topnavigation li:nth-child(3) { order: 3; } /* New Toys */
  body.tdm-hdr-page #topnavigation li:nth-child(4) { order: 2; } /* News */
  body.tdm-hdr-page #topnavigation li:nth-child(5) { order: 1; } /* Magazine Home */

  body.tdm-hdr-page #topnavigation a,
  body.tdm-hdr-page #topnavigation #current a {
    float: none;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px !important;
    min-width: 44px;
    padding: 8px 14px !important;
    box-sizing: border-box;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.2 !important;
    color: #333;
    text-decoration: none;
    background: none;
    white-space: nowrap;
  }

  body.tdm-hdr-page #topnavigation #current a {
    color: #000;
    border-bottom: 2px solid #264989;
    padding-bottom: 6px !important;
  }

  body.tdm-hdr-page #topnavigation a:hover,
  body.tdm-hdr-page #topnavigation a:focus {
    color: #063b66;
  }

  /* Full-width Google CSE field row. Same form, same engine, same action.
     Flatten the branding wrappers so the "Custom Search In…" line can
     leave the header; the field wrap stays in the header. */
  body.tdm-hdr-page .tdm-hdr tr:has(#cse-search-box),
  body.tdm-hdr-page .tdm-hdr tr:has(.cse-branding-right),
  body.tdm-hdr-page .tdm-hdr tr:has(#cse-search-box) > td,
  body.tdm-hdr-page .tdm-hdr .cse-branding-right,
  body.tdm-hdr-page .tdm-hdr .cse-branding-form,
  body.tdm-hdr-page .tdm-hdr #cse-search-box,
  body.tdm-hdr-page .tdm-hdr #cse-search-box > div {
    display: contents;
  }

  body.tdm-hdr-page .tdm-cse-fields {
    order: 4;
    grid-column: 1 / -1;
    grid-row: 4;
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 6px 12px 8px;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
  }

  body.tdm-hdr-page .tdm-hdr #cse-search-box input[name="q"],
  body.tdm-hdr-page .tdm-hdr #cse-search-box input[type="text"],
  body.tdm-hdr-page .tdm-cse-fields input[name="q"] {
    display: inline-block !important;
    vertical-align: middle;
    width: calc(100% - 96px) !important;
    max-width: calc(100% - 96px) !important;
    min-width: 0 !important;
    height: 44px;
    min-height: 44px;
    margin: 0 8px 0 0;
    padding: 0 10px;
    font-size: 16px; /* 16px avoids iOS focus zoom */
    line-height: 1.2;
    border: 1px solid #c5c5c5;
    border-radius: 4px;
    box-sizing: border-box;
  }

  body.tdm-hdr-page .tdm-hdr #cse-search-box input[name="sa"],
  body.tdm-hdr-page .tdm-hdr #cse-search-box input[type="submit"],
  body.tdm-hdr-page .tdm-cse-fields input[name="sa"] {
    display: inline-block !important;
    vertical-align: middle;
    width: auto !important;
    min-height: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: #264989;
    border: 0;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
  }

  /* Leftover "Search" fragment: not a working form (no opening form).
     Kept in the markup so desktop stays identical; on phones it is
     taken out of the flow and takes no space. No clipping. */
  body.tdm-hdr-page .tdm-hdr input[name="Submit1"] {
    position: absolute;
    left: -100vw;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* "Custom Search In…" — reflowed below the main content, still visible. */
  body.tdm-hdr-page .tdm-hdr-cse-label,
  body.tdm-hdr-page .tdm-hdr img[alt="Google"] {
    order: 20;
    grid-column: 1 / -1;
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0;
    padding: 8px 16px 0;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.4;
    color: #666;
    font-weight: normal;
    white-space: normal;
  }

  body.tdm-hdr-page .tdm-hdr-cse-label {
    padding-bottom: 8px;
  }

  body.tdm-hdr-page .tdm-hdr-cse-label font,
  body.tdm-hdr-page .tdm-hdr-cse-label strong {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
  }

  /* Decorative rules under the search, not article content. */
  body.tdm-hdr-page .tdm-hdr hr,
  body.tdm-hdr-page .tdm-hdr p:empty {
    display: none;
  }

  /* Stories stay together below the CSE row; sidebars follow. */
  /* Section-separator <br>s were auto-placing as empty rows above the
     lead story. They are decorative spacing, not content. */
  body.tdm-hdr-page #main > br {
    display: none;
  }

  body.tdm-hdr-page #main > *:not(.tdm-hdr-division) {
    order: 10;
    grid-column: 1 / -1;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }

  body.tdm-hdr-page td.tdm-left {
    order: 11;
    grid-column: 1 / -1;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
  }

  body.tdm-hdr-page td.tdm-right {
    order: 12;
    grid-column: 1 / -1;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
  }

  body.tdm-hdr-page .tdm-shell img[src*="spacer.gif"],
  body.tdm-hdr-page .tdm-hdr style,
  body.tdm-hdr-page .tdm-hdr input[type="hidden"],
  body.tdm-hdr-page .tdm-hdr hr,
  body.tdm-hdr-page .tdm-shell > table.tdm-main > tbody > tr > td:not(.tdm-left):not(.tdm-right):not(.tdm-center) {
    display: none !important;
  }

  /* Missing-checkbox fallback: keep account links available, no inert Menu. */
  body.tdm-hdr-page .tdm-hdr:not(:has(> .tdm-nav-toggle)) .tdm-account-link,
  body.tdm-hdr-page .tdm-hdr:not(:has(> .tdm-nav-toggle)) .tdm-signup,
  body.tdm-hdr-page .tdm-hdr:not(:has(> .tdm-nav-toggle)) .tdm-greeting {
    grid-column: 1 / -1; display: flex !important; align-items: center; min-height: 44px !important;
    font-size: 14px !important; line-height: 1.2 !important; padding: 0 4px !important; box-sizing: border-box;
  }
}
 }