/* /legacy/guides in the approved design (OPS-1133). v3-legacy-guides.js renders the steps and
   the phone screens with its own class names, so this file gives those names the mockup's
   look. Load after v3-design.css and v3-legacy.css; the !important rules below answer
   !important rules in v3-legacy.css and inline styles the script sets. */

/* Page furniture */
body[data-route="legacy-guides"] .site .legend .s-r{background:#fff0e4;box-shadow:inset 0 0 0 3px #f06a1f}
body[data-route="legacy-guides"] .site .guide-steps .kick{margin:0}
body[data-route="legacy-guides"] .site .v-fine{margin:44px 0 0;max-width:900px;font-size:18px}
body[data-route="legacy-guides"] .site #vidTitle{font-size:clamp(38px,4.8vw,72px)}
body[data-route="legacy-guides"] .site #dlTitle{margin-bottom:12px}
body[data-route="legacy-guides"] .site .dl-lead{margin-bottom:36px}
body[data-route="legacy-guides"] .site .fine{margin:0;max-width:1000px}

/* Step buttons, drawn by the script without a class */
body[data-route="legacy-guides"] .site #steps button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;min-height:112px;padding:14px;border-radius:18px;border:2px solid #4d1c33;background:transparent;color:#4d1c33;font:inherit;font-size:17px;font-weight:700;line-height:1.2;text-align:left;overflow-wrap:break-word;cursor:pointer}
body[data-route="legacy-guides"] .site #steps button b{font-family:'Bricolage Grotesque',Inter,sans-serif;font-size:34px;font-weight:800;letter-spacing:-0.035em;line-height:.98}
body[data-route="legacy-guides"] .site #steps button:hover{background:#ead9c8}
body[data-route="legacy-guides"] .site #steps button[aria-current="step"],body[data-route="legacy-guides"] .site #steps button[aria-current="step"]:hover{background:#4d1c33;color:#f6efe6}
body[data-route="legacy-guides"] .site #steps button:focus-visible,body[data-route="legacy-guides"] .site #back:focus-visible,body[data-route="legacy-guides"] .site #next:focus-visible,body[data-route="legacy-guides"] .site #guide-step-title:focus-visible{outline:3px solid #b32a14;outline-offset:3px}

/* Viewer text and controls */
body[data-route="legacy-guides"] .site #tip[hidden]{display:none}
body[data-route="legacy-guides"] .site .prog i{box-sizing:border-box;border:1px solid #8a7f72;background:transparent}
body[data-route="legacy-guides"] .site .prog i.done{border-color:#4d1c33;background:#4d1c33}
body[data-route="legacy-guides"] .site .navbtns .btn{max-width:100%;text-align:center}
body[data-route="legacy-guides"] .site #back:disabled,body[data-route="legacy-guides"] .site #back:disabled:hover{color:#59636b;cursor:not-allowed;transform:none}
body[data-route="legacy-guides"] .site #next:disabled,body[data-route="legacy-guides"] .site #next:disabled:hover{background:#d9cdbd;color:#3f4b54;cursor:not-allowed;transform:none}

/* Phone frame: the drawing sits directly on .ph-frame, so the old inner screen steps aside */
body[data-route="legacy-guides"] .site .v-phone .ph-frame{margin-top:0}
body[data-route="legacy-guides"] .site .legacy-screen{height:auto;overflow:visible;border-radius:0;background:transparent;color:#10181f;font-size:17px;line-height:1.3;overflow-wrap:break-word}
body[data-route="legacy-guides"] .site .legacy-screen .notch{width:110px;height:22px;margin:0 auto 12px;border-radius:999px;background:#220a16}
body[data-route="legacy-guides"] .site .legacy-screen .sbar{flex-direction:column;align-items:center;gap:2px;padding:0 0 12px;font-size:18px;font-weight:800;text-align:center}
body[data-route="legacy-guides"] .site .legacy-screen .sbar small{align-self:flex-start;font-size:16px;font-weight:600;color:#0b5cad}
body[data-route="legacy-guides"] .site .legacy-screen .sbody{gap:14px;padding:0;overflow:visible}

/* Phone rows */
body[data-route="legacy-guides"] .site .legacy-screen .grp{border-radius:16px;background:#ffffff}
body[data-route="legacy-guides"] .site .legacy-screen .r{gap:10px;min-height:54px;padding:10px 14px;border-top:1px solid #e6e1d9;border-radius:14px;color:#10181f;font-size:17px;line-height:1.25}
body[data-route="legacy-guides"] .site .legacy-screen .r>span:not(.ic):not(.chev):not(.av),body[data-route="legacy-guides"] .site .legacy-screen .r.me>div{flex:1 1 auto;min-width:0}
body[data-route="legacy-guides"] .site .legacy-screen .r .ic{flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:#b9c2c9}
body[data-route="legacy-guides"] .site .legacy-screen .r .chev{order:2;margin-left:0;color:#59636b;font-size:22px;line-height:1}
body[data-route="legacy-guides"] .site .legacy-screen .r.me{padding:12px 14px}
body[data-route="legacy-guides"] .site .legacy-screen .r.me .av{flex:0 0 46px;width:46px;height:46px;background:#7a2a4a}
body[data-route="legacy-guides"] .site .legacy-screen .r.me small{color:#3f4b54;font-size:15px;font-weight:500}

/* The tap marker: the old pulsing dot becomes the mockup's orange "Here" tag */
body[data-route="legacy-guides"] .site .legacy-screen .hot{outline:0;background:#fff0e4!important;box-shadow:inset 0 0 0 3px #f06a1f;color:#10181f!important;font-weight:700}
body[data-route="legacy-guides"] .site .legacy-screen .hot::after{content:'Here';position:static;order:1;flex:0 0 auto;width:auto;height:auto;margin:0;padding:3px 10px;border-radius:999px;background:#ff8a3d;box-shadow:none;color:#10181f;font-size:14px;font-weight:800;line-height:1.3;animation:none}
body[data-route="legacy-guides"] .site .legacy-screen .url.hot,body[data-route="legacy-guides"] .site .legacy-screen .field.hot{display:flex;align-items:center;justify-content:space-between;gap:10px}
body[data-route="legacy-guides"] .site .legacy-screen .box.hot::after{display:inline-block;margin-left:8px}

/* Phone buttons, fields and chips. These are drawings, so they never act like controls. */
body[data-route="legacy-guides"] .site .legacy-screen .btn,body[data-route="legacy-guides"] .site .legacy-screen .btn:hover{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:8px 16px;border-radius:14px;background:#1f5fc4;color:#ffffff;font-size:17px;font-weight:800;text-align:center;cursor:default;transform:none;transition:none}
body[data-route="legacy-guides"] .site .legacy-screen .btn.alt,body[data-route="legacy-guides"] .site .legacy-screen .btn.alt:hover{border:1px solid #c9c2b8;background:#ffffff;color:#1f5fc4}
body[data-route="legacy-guides"] .site .legacy-screen .note{padding:0;color:#3f4b54;font-size:17px!important;line-height:1.35}
body[data-route="legacy-guides"] .site .legacy-screen .url,body[data-route="legacy-guides"] .site .legacy-screen .field{display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 14px;border:1px solid #c9c2b8;border-radius:12px;background:#ffffff;color:#3f4b54;font-size:17px;font-weight:500}
body[data-route="legacy-guides"] .site .legacy-screen .chips{gap:8px}
body[data-route="legacy-guides"] .site .legacy-screen .chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px;border:1px solid #c9c2b8;border-radius:999px;background:#ffffff;color:#10181f;font-size:16px;font-weight:700}
body[data-route="legacy-guides"] .site .legacy-screen .chip.on{border-color:#4d1c33;background:#4d1c33;color:#f6efe6}

/* Phone paper, messages and flow */
body[data-route="legacy-guides"] .site .legacy-screen .paper{gap:0;padding:14px 16px;border-radius:14px;background:#ffffff;color:#10181f;font-size:17px;line-height:1.3}
body[data-route="legacy-guides"] .site .legacy-screen .paper[style*="DCE8FF"]{border-radius:18px 18px 18px 6px;background:#e4efe9!important;line-height:1.4}
body[data-route="legacy-guides"] .site .legacy-screen .paper .ln{flex-wrap:wrap;gap:2px 12px;padding:9px 0;border-top:1px solid #e6e1d9;border-bottom:0}
body[data-route="legacy-guides"] .site .legacy-screen .paper .ln:first-child{border-top:0}
body[data-route="legacy-guides"] .site .legacy-screen .paper .ln span{color:#3f4b54}
body[data-route="legacy-guides"] .site .legacy-screen .ok{display:block;padding:7px 0;color:#0d5b50;font-weight:800}
body[data-route="legacy-guides"] .site .legacy-screen .flow{gap:8px}
body[data-route="legacy-guides"] .site .legacy-screen .flow .box{padding:14px;border:0;border-radius:14px;background:#ffffff;color:#10181f;font-size:17px;line-height:1.35}
body[data-route="legacy-guides"] .site .legacy-screen .flow .arrow{color:#10181f;font-size:22px;font-weight:800;line-height:1.2}

/* Video */
body[data-route="legacy-guides"] .site .vid-player{min-width:0}
body[data-route="legacy-guides"] .site #stepVideo{display:block;width:100%;aspect-ratio:16/9;border-radius:28px;background:#000000}

/* Before the script has run, or without JavaScript, the empty phone, dead buttons and empty
   player stay out of the way, leaving the loading line and the noscript message. */
body[data-route="legacy-guides"] .site .guide-steps:has(#steps:empty){display:none}
body[data-route="legacy-guides"] .site .viewer:has(#screen:empty){grid-template-columns:minmax(0,1fr);grid-template-areas:"text";margin-top:0}
body[data-route="legacy-guides"] .site .viewer:has(#screen:empty) .v-phone,body[data-route="legacy-guides"] .site .viewer:has(#screen:empty) .v-nav{display:none}
body[data-route="legacy-guides"] .site section:has(#videoCaption:empty){display:none}

@media (max-width:980px){
body[data-route="legacy-guides"] .site #steps button{min-height:88px}
body[data-route="legacy-guides"] .site #steps button:last-child{grid-column:1/-1}
}
@media (max-width:640px){
body[data-route="legacy-guides"] .site .ph-frame{min-height:560px;padding:12px 10px 18px;border-width:9px;border-radius:38px}
body[data-route="legacy-guides"] .site .navbtns .btn{padding:8px 22px}
}
@media (prefers-reduced-motion:reduce){
body[data-route="legacy-guides"] .site .btn,body[data-route="legacy-guides"] .site .btn:hover{transform:none;transition:none}
}