/* Landing fixes (UX audit M9, M10, M11, m7, m8, m9), 2026-11-13.
   Linked only from / and /start-xray/. Colors and fonts come from chrome.css.
   Contrast rule: light text on dark, dark text on light, never green on black. */

/* ---------- M11 + m8: phone header is one row (logo and Menu) ---------- */
@media (max-width:700px){
  html body #wr7-header#wr7-header{display:flex;flex-direction:column}
  /* Market Watch moves into the open menu so the closed header stays one row */
  html body #wr7-header#wr7-header .wr7-market{display:none!important;order:2}
  html body #wr7-header#wr7-header.wr7-menu-open .wr7-market{display:flex!important}
  html body #wr7-header#wr7-header .wr7-row{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px!important;width:calc(100% - 28px)!important;margin:0 auto!important;padding:8px 0!important;min-height:0!important}
  html body #wr7-header#wr7-header .wr7-brand{display:flex!important;flex:0 1 auto!important;width:auto!important;margin:0!important;padding:0!important}
  html body #wr7-header#wr7-header .wr7-logo-box{width:auto!important;padding:6px 14px 5px!important}
  html body #wr7-header#wr7-header .wr7-logo-name{font-size:22px!important}
  html body #wr7-header#wr7-header .wr7-logo-place{font-size:14px!important;letter-spacing:.3em;margin-top:4px!important}
  html body #wr7-header#wr7-header .wr7-tagline{display:none!important}
  html body #wr7-header#wr7-header #wr7-menu-toggle{flex-direction:row!important;gap:9px!important;min-height:48px!important;min-width:0!important;margin:0!important;padding:8px 14px!important;font-size:14px!important;line-height:1!important}
  html body #wr7-header#wr7-header #wr7-menu-toggle span{font-size:14px!important;line-height:1!important}
  html body #wr7-header#wr7-header #wr7-nav{flex-basis:100%}
}

/* ---------- M11: home hero on a phone ---------- */
html body.ops-home .xray-hero p.lf-plain{color:var(--ops-white);font:700 20px/1.4 Arial,sans-serif;margin:0 0 14px;max-width:30em}
html body.ops-home .xray-hero h1{margin-bottom:16px}
/* The fixed Start bar stays hidden until the hero button has scrolled away */
html body.ops-home:not(.lf-past-hero) .mobile-sticky{display:none!important}
@media (max-width:900px){
  html body.ops-home .xray-hero{padding-top:24px!important}
  html body.ops-home .xray-hero p.lf-plain{font-size:18px}
  html body .review-banner{padding:8px 16px!important;font-size:14px!important;line-height:1.45!important}
}

/* ---------- M9: opening block on /start-xray/ ---------- */
html body .lf-open{margin:28px 0 32px;padding:36px 40px 30px;background:var(--ops-forest);color:var(--ops-white);border:2px solid var(--ops-gold)}
html body .lf-open .xray-eyebrow{margin:0;color:var(--ops-gold)!important;font-size:15px!important}
html body .lf-open h1{margin:10px 0 14px!important;color:var(--ops-white)!important}
html body .lf-open p{color:var(--ops-white);font:19px/1.5 Arial,sans-serif;margin:0 0 8px;max-width:38em}
html body .lf-open p.lf-open-time{font-weight:700;color:var(--ops-gold)}
html body .lf-open-actions{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0 6px}
html body .lf-open-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 26px;margin:0;font-size:17px;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;box-shadow:none}
html body .lf-open-actions .lf-btn-start{background:var(--ops-gold);color:var(--ops-ink);border:2px solid var(--ops-gold)}
html body .lf-open-actions .lf-btn-start:hover{background:var(--ops-gold-hi);border-color:var(--ops-gold-hi);color:var(--ops-ink)}
html body .lf-open-actions .lf-btn-meet{background:transparent;color:var(--ops-white);border:2px solid var(--ops-white)}
html body .lf-open-actions .lf-btn-meet:hover{background:var(--ops-white);color:var(--ops-ink)}
html body .lf-open-actions .btn:focus-visible,html body .lf-open-pick a:focus-visible{outline:4px solid var(--ops-white);outline-offset:4px}
html body .lf-open p.lf-open-pick{font-size:17px;margin:8px 0 0}
html body .lf-open-pick a{display:inline-block;padding:12px 0;color:var(--ops-gold-hi);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* The old page heading is now a second-level heading; it keeps its look */
html body .planning-levels h2.lf-levels-title{font-size:clamp(28px,3.5vw,44px)!important;line-height:1.1!important;color:#133e1c;margin:12px 0 20px;max-width:780px}
@media (max-width:700px){
  html body .lf-open{margin:16px 0 24px;padding:20px 18px 14px}
  html body .lf-open p{font-size:17px}
  html body .lf-open-actions{flex-direction:column;gap:10px;margin-top:14px}
  html body .lf-open-actions .btn{width:100%}
}

/* ---------- M10: doors ---------- */
html body .lf-self{font-size:18px}

/* ---------- m7: small links become 44px tap targets ---------- */
/* Padding on an inline link grows the tap area without moving the text around it */
html body .review-banner a,html body .lf-self a,html body.ops-home .ops-sample-more a,html body .ops-meet .meet-small a{padding:14px 0}
@media (min-width:701px){html body .xf-link{padding:10px 0}}

/* ---------- m9: meeting form marks the field that needs fixing ---------- */
html body .ops-meet [aria-invalid="true"]{outline:3px solid #b00020;outline-offset:2px;border-color:#b00020!important}
html body .ops-meet label:has([aria-invalid="true"]){color:#8a0018}
html body .ops-meet .meet-check input{width:22px;height:22px;flex:none;margin:1px 0 0}