/** Shopify CDN: Minification failed Line 354:0 Unexpected "@media" Line 365:0 Expected identifier but found "." **/ /* ============================================================ SePRO PondWise Planner — stylesheet ------------------------------------------------------------ Every rule is scoped under .pw-root so the same stylesheet can be dropped into a Shopify theme without touching the theme's own styles, and so the theme cannot reach in and restyle the planner. The design tokens live on .pw-root rather than :root for the same reason. Overlays (.pw-modal, #pw-runtime-error) are appended to and carry the pw-root class themselves, so their rules compound onto the scope class instead of descending from it. ============================================================ */ .pw-root{ --green-900:#12321f; --green-700:#1b5233; --green-600:#246b3f; --green-500:#2f8a51; --green-100:#e5efe6; --green-050:#f3f8f2; --water:#2a7fb8; --water-100:#dceaf4; --zone:#e8730a; --zone-100:#fdecd9; --ink:#16211a; --ink-2:#4a5850; --ink-3:#78867d; --line:#dfe5df; --line-2:#eef2ee; --bg:#f7f8f3; --card:#fff; --danger:#b3261e; --danger-bg:#fdecea; --warn:#8a5b00; --warn-bg:#fdf5e2; --ok:#1b5233; --ok-bg:#e8f3ea; --r:14px; --r-sm:10px; --sh:0 1px 2px rgba(18,50,31,.06), 0 8px 24px rgba(18,50,31,.07); --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } .pw-root *,.pw-root *::before,.pw-root *::after{box-sizing:border-box} /* ---------- host reset ------------------------------------------------- A theme styles bare elements (h3{color:red}, p{margin:2em}, a{...}) and inheritance always loses to a direct element rule, so the planner's own headings and text would pick up the theme's. These neutralise what a host can reach; every rule below this block is more specific and still wins. -------------------------------------------------------------------- */ .pw-root h1,.pw-root h2,.pw-root h3,.pw-root h4,.pw-root h5,.pw-root h6{ margin:0;padding:0;color:inherit;font-family:inherit;font-size:inherit; font-weight:650;line-height:1.2;letter-spacing:normal;text-transform:none; text-align:inherit;border:0;background:none; } .pw-root p,.pw-root span,.pw-root div,.pw-root li,.pw-root dt,.pw-root dd, .pw-root label,.pw-root strong,.pw-root b,.pw-root small,.pw-root i,.pw-root em{ color:inherit;font-family:inherit;letter-spacing:normal;text-transform:none; } .pw-root p{margin:0} .pw-root ul,.pw-root ol{margin:0;padding-left:18px;list-style-position:outside} .pw-root dl,.pw-root dd,.pw-root dt{margin:0} .pw-root a{color:var(--green-600);text-decoration:none;font-family:inherit} .pw-root a:hover{text-decoration:underline} .pw-root button,.pw-root input,.pw-root select,.pw-root textarea{ font-family:inherit;letter-spacing:normal;text-transform:none; } .pw-root button{margin:0;box-shadow:none;text-shadow:none;line-height:normal;width:auto;min-width:0} .pw-root table{border-collapse:collapse;border-spacing:0;width:auto;margin:0;font-size:inherit} .pw-root th,.pw-root td{padding:0;border:0;background:none;text-align:left;vertical-align:baseline} .pw-root img{max-width:100%;border:0} .pw-root code{font-family:var(--mono);font-size:.94em;background:none;padding:0;color:inherit} .pw-root details,.pw-root summary{margin:0;padding:0;background:none;border:0} .pw-root summary::marker{color:var(--green-600)} .pw-root hr{display:none} .pw-root sup{font-size:.7em;line-height:0;vertical-align:super} .pw-root i.pw-sw{font-style:normal} .pw-root{ font-family:var(--font); color:var(--ink); background:var(--bg); font-size:15px; line-height:1.45; -webkit-text-size-adjust:100%; } .pw-root h1,.pw-root h2,.pw-root h3,.pw-root h4{margin:0;line-height:1.2;font-weight:650} .pw-root a{color:var(--green-600)} .pw-root button{font-family:inherit;font-size:inherit} .pw-root .pw-hidden{display:none !important} .pw-root .pw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .pw-root /* ---------- app chrome ---------- */ .pw-topbar{ position:sticky; top:0; z-index:40; background:var(--green-900); color:#fff; display:flex; align-items:center; gap:14px; padding:9px 16px; flex-wrap:wrap; } .pw-root .pw-brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.2px} .pw-root .pw-brand svg{flex:0 0 auto} .pw-root .pw-brand small{display:block;font-weight:400;font-size:11px;opacity:.7;letter-spacing:.3px} .pw-root .pw-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap} .pw-root .pw-nav button{ background:transparent;border:1px solid rgba(255,255,255,.22);color:#fff; padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap; } .pw-root .pw-nav button[aria-current="page"]{background:#fff;color:var(--green-900);border-color:#fff;font-weight:650} .pw-root .pw-whoami{display:flex;align-items:center;gap:7px;font-size:12.5px;white-space:nowrap} .pw-root .pw-whoami>span{opacity:.7} @media (max-width:1180px){.pw-root .pw-whoami>span{display:none}} .pw-root .pw-whoami select{ background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25); border-radius:999px;padding:5px 9px;font-size:12.5px; } .pw-root .pw-whoami select option{color:#16211a} .pw-root /* ---------- safety banner ---------- */ .pw-labelbar{ background:#fff3d6;border-bottom:1px solid #e6cf95;color:#5b4300; padding:8px 16px;font-size:12.5px;display:flex;gap:9px;align-items:flex-start; } .pw-root .pw-labelbar b{color:#3d2d00} .pw-root .pw-labelbar button{ margin-left:auto;flex:0 0 auto;background:#5b4300;color:#fff;border:0; border-radius:999px;padding:4px 11px;cursor:pointer;font-size:12px; } .pw-root /* ---------- layout ---------- */ .pw-wrap{max-width:1560px;margin:0 auto;padding:16px} .pw-root .pw-planner{display:grid;grid-template-columns:250px minmax(0,1fr) 372px;gap:16px;align-items:start} .pw-root .pw-planner>*{min-width:0} @media (max-width:1300px){.pw-root .pw-planner{grid-template-columns:220px minmax(0,1fr)} .pw-root .pw-planner .pw-rail-right{grid-column:1/-1}} @media (max-width:900px){.pw-root .pw-planner{grid-template-columns:1fr}} .pw-root .pw-card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px} .pw-root .pw-card+.pw-card{margin-top:14px} .pw-root .pw-card>h3{font-size:15.5px;margin-bottom:4px;display:flex;align-items:center;gap:8px} .pw-root .pw-card>h3 .pw-num{ flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--green-100); color:var(--green-700);font-size:11.5px;display:grid;place-items:center;font-weight:700; } .pw-root .pw-card .pw-sub{color:var(--ink-3);font-size:12.5px;margin:2px 0 12px} .pw-root /* ---------- stepper ---------- */ .pw-stepper{position:sticky;top:96px} .pw-root .pw-stepper ol{list-style:none;margin:0;padding:0} .pw-root .pw-stepper li{margin:0} .pw-root .pw-stepper button{ width:100%;display:flex;gap:9px;align-items:flex-start;text-align:left; background:none;border:0;padding:7px 8px;border-radius:var(--r-sm);cursor:pointer; color:var(--ink-2);font-size:13px;line-height:1.3; } .pw-root .pw-stepper button:hover{background:var(--green-050)} .pw-root .pw-stepper button[aria-current="step"]{background:var(--green-100);color:var(--green-900);font-weight:650} .pw-root .pw-stepper .pw-dot{ flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line); display:grid;place-items:center;font-size:10.5px;color:var(--ink-3);background:#fff;margin-top:1px; } .pw-root .pw-stepper .pw-done .pw-dot{background:var(--green-600);border-color:var(--green-600);color:#fff} .pw-root .pw-stepper button[aria-current="step"] .pw-dot{border-color:var(--green-600);color:var(--green-700)} .pw-root /* ---------- form controls ---------- */ label.pw-fl{display:block;font-size:12.5px;font-weight:650;margin-bottom:5px;color:var(--ink)} .pw-root input[type=text],.pw-root input[type=number],.pw-root input[type=search],.pw-root select,.pw-root textarea{ width:100%;min-height:40px;border:1px solid var(--line);border-radius:var(--r-sm); padding:8px 11px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink); } .pw-root textarea{min-height:72px;resize:vertical} .pw-root input:focus,.pw-root select:focus,.pw-root textarea:focus{outline:2px solid var(--green-500);outline-offset:-1px;border-color:var(--green-500)} .pw-root input[aria-invalid=true]{border-color:var(--danger);background:#fffafa} .pw-root .pw-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .pw-root .pw-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media (max-width:560px){.pw-root .pw-row,.pw-root .pw-row3{grid-template-columns:1fr}} .pw-root .pw-field+.pw-field,.pw-root .pw-row+.pw-field,.pw-root .pw-field+.pw-row,.pw-root .pw-row+.pw-row{margin-top:11px} .pw-root .pw-hint{font-size:12px;color:var(--ink-3);margin:5px 0 0} .pw-root .pw-btn{ background:var(--green-600);color:#fff;border:0;border-radius:999px; padding:9px 16px;font-weight:650;cursor:pointer;min-height:40px; } .pw-root .pw-btn:hover{background:var(--green-700)} .pw-root .pw-btn:disabled{opacity:.45;cursor:not-allowed} .pw-root .pw-btn.pw-sec{background:var(--green-100);color:var(--green-900)} .pw-root .pw-btn.pw-sec:hover{background:#d8e6da} .pw-root .pw-btn.pw-ghost{background:transparent;color:var(--green-700);border:1px solid var(--line)} .pw-root .pw-btn.pw-ghost:hover{background:var(--green-050)} .pw-root .pw-btn.pw-sm{padding:5px 11px;min-height:32px;font-size:13px} .pw-root .pw-btn.pw-danger{background:var(--danger-bg);color:var(--danger)} .pw-root .pw-btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .pw-root /* ---------- segmented ---------- */ .pw-seg{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff} .pw-root .pw-seg button{flex:1;border:0;background:none;padding:8px 6px;cursor:pointer;font-size:12.5px;color:var(--ink-2);white-space:nowrap} .pw-root .pw-seg button[aria-pressed=true]{background:var(--green-600);color:#fff;font-weight:650} .pw-root /* ---------- map ---------- */ .pw-mapwrap{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);background:#dde3dd} .pw-root .pw-map{width:100%;height:min(60vh,560px);min-height:340px} @media (max-width:900px){.pw-root .pw-map{height:min(52vh,420px);min-height:300px}} .pw-root .pw-maptools{ position:absolute;left:10px;top:10px;z-index:5;display:flex;flex-direction:column;gap:6px; max-width:calc(100% - 20px); } .pw-root .pw-maptools .pw-grp{display:flex;gap:6px;flex-wrap:wrap} .pw-root .pw-mbtn{ background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.1);border-radius:999px; padding:6px 12px;font-size:12.5px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.16); color:var(--ink);white-space:nowrap; } .pw-root .pw-mbtn[aria-pressed=true]{background:var(--green-600);color:#fff;border-color:var(--green-600);font-weight:650} .pw-root .pw-mstatus{ position:absolute;left:10px;right:10px;bottom:10px;z-index:5; background:rgba(18,33,26,.86);color:#fff;border-radius:var(--r-sm); padding:8px 12px;font-size:12.5px;line-height:1.35; } .pw-root .pw-mlegend{ position:absolute;right:10px;top:10px;z-index:5;background:rgba(255,255,255,.96); border-radius:var(--r-sm);padding:8px 10px;font-size:11.5px;box-shadow:0 1px 4px rgba(0,0,0,.16); } .pw-root .pw-mlegend div{display:flex;align-items:center;gap:6px} .pw-root .pw-mlegend div+div{margin-top:4px} .pw-root .pw-sw{width:14px;height:10px;border-radius:2px;flex:0 0 auto} .pw-root .pw-searchrow{display:flex;gap:8px} .pw-root .pw-searchrow input{border-radius:999px} @media (max-width:560px){.pw-root .pw-searchrow{flex-direction:column}} .pw-root /* ---------- metrics ---------- */ .pw-metrics{display:grid;gap:7px} .pw-root .pw-metric{ display:flex;align-items:baseline;justify-content:space-between;gap:10px; background:var(--green-050);border-radius:var(--r-sm);padding:9px 11px; } .pw-root .pw-metric .pw-k{font-size:12.5px;color:var(--ink-2)} .pw-root .pw-metric .pw-v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right} .pw-root .pw-metric .pw-v small{font-weight:500;color:var(--ink-3);font-size:11.5px} .pw-root .pw-metric.pw-zone{background:var(--zone-100)} .pw-root .pw-metric.pw-big .pw-v{font-size:20px} .pw-root .pw-metric.pw-mute{background:var(--line-2)} .pw-root .pw-metric.pw-mute .pw-v{color:var(--ink-3);font-weight:600;font-size:14px} .pw-root /* ---------- tooltips / glossary ---------- */ .pw-tip{border-bottom:1px dotted var(--ink-3);cursor:help;position:relative} .pw-root .pw-tip sup{font-size:9px;color:var(--green-600);font-weight:700;margin-left:1px} .pw-root .pw-tip:hover::after,.pw-root .pw-tip:focus::after{ content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);z-index:60; width:min(290px,74vw);background:var(--green-900);color:#fff;padding:9px 11px; border-radius:8px;font-size:12px;font-weight:400;line-height:1.4; box-shadow:0 6px 20px rgba(0,0,0,.24);white-space:normal; } .pw-root /* ---------- notices ---------- */ .pw-note{border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;line-height:1.4;margin-top:10px} .pw-root .pw-note.pw-err{background:var(--danger-bg);color:#7d1a15;border:1px solid #f0c4c0} .pw-root .pw-note.pw-warn{background:var(--warn-bg);color:#6b4700;border:1px solid #ecd9a4} .pw-root .pw-note.pw-ok{background:var(--ok-bg);color:var(--ok);border:1px solid #c6dfca} .pw-root .pw-note.pw-info{background:var(--water-100);color:#0f4a6d;border:1px solid #bcd9ea} .pw-root .pw-note b{display:block;margin-bottom:2px} .pw-root .pw-note ul{margin:5px 0 0;padding-left:17px} .pw-root .pw-note li+li{margin-top:3px} .pw-root .pw-notes-stack .pw-note:first-child{margin-top:0} .pw-root /* ---------- product picker ---------- */ .pw-plist{display:grid;gap:9px;max-height:none} .pw-root .pw-pcard{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px;cursor:pointer;background:#fff} .pw-root .pw-pcard:hover{border-color:var(--green-500);background:var(--green-050)} .pw-root .pw-pcard[aria-pressed=true]{border-color:var(--green-600);background:var(--green-050);box-shadow:inset 0 0 0 1px var(--green-600)} .pw-root .pw-pcard h4{font-size:14px;display:flex;justify-content:space-between;gap:8px;align-items:flex-start} .pw-root .pw-pcard .pw-cat{font-size:11.5px;color:var(--ink-3);margin-top:2px} .pw-root .pw-pcard .pw-chips{margin-top:7px} .pw-root .pw-chip{ display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:999px; background:var(--green-100);color:var(--green-700);margin:0 4px 4px 0;font-weight:600; } .pw-root .pw-chip.pw-grey{background:var(--line-2);color:var(--ink-2)} .pw-root .pw-chip.pw-zone{background:var(--zone-100);color:#8a4300} .pw-root .pw-chip.pw-blue{background:var(--water-100);color:#0f4a6d} .pw-root .pw-chip.pw-red{background:var(--danger-bg);color:var(--danger)} .pw-root /* ---------- calculation display ---------- */ .pw-calcbox{background:var(--green-050);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;margin-top:11px} .pw-root .pw-calcline{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--ink-2);word-break:break-word} .pw-root .pw-calcline b{color:var(--ink);font-size:13px} .pw-root .pw-calcline .pw-op{color:var(--ink-3);padding:0 3px} .pw-root .pw-result{ display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap; margin-top:11px;padding-top:11px;border-top:1px solid var(--line); } .pw-root .pw-result .pw-lab{font-size:12.5px;color:var(--ink-2)} .pw-root .pw-result .pw-amt{font-size:26px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--green-900)} .pw-root .pw-result .pw-amt small{font-size:14px;font-weight:600;color:var(--ink-2)} .pw-root table.pw-t{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px} .pw-root table.pw-t th,.pw-root table.pw-t td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line-2)} .pw-root table.pw-t th{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3);font-weight:650} .pw-root table.pw-t td.pw-n{text-align:right;font-variant-numeric:tabular-nums} .pw-root table.pw-t tr:last-child td{border-bottom:0} .pw-root table.pw-t tbody tr:hover{background:var(--green-050)} .pw-root details.pw-disc{margin-top:10px;border-top:1px solid var(--line-2);padding-top:9px} .pw-root details.pw-disc summary{cursor:pointer;font-size:12.5px;font-weight:650;color:var(--green-700)} .pw-root details.pw-disc .pw-body{font-size:12.5px;color:var(--ink-2);margin-top:8px;line-height:1.5} .pw-root details.pw-disc .pw-body ul{padding-left:17px;margin:5px 0} .pw-root details.pw-disc .pw-body dt{font-weight:650;color:var(--ink);margin-top:7px;font-size:12px} .pw-root details.pw-disc .pw-body dd{margin:1px 0 0;padding-left:0} .pw-root /* ---------- range ---------- */ .pw-rangewrap{margin-top:11px} .pw-root .pw-rangewrap .pw-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px} .pw-root .pw-rangewrap .pw-top b{font-variant-numeric:tabular-nums} .pw-root input[type=range]{width:100%;accent-color:var(--green-600);min-height:28px} .pw-root .pw-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3)} .pw-root /* ---------- saved ponds / dashboard ---------- */ .pw-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px} .pw-root .pw-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px} .pw-root .pw-kpi{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:14px} .pw-root .pw-kpi .pw-k{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3);font-weight:650} .pw-root .pw-kpi .pw-v{font-size:27px;font-weight:750;margin-top:3px;font-variant-numeric:tabular-nums;color:var(--green-900)} .pw-root .pw-kpi .pw-d{font-size:12px;color:var(--ink-3);margin-top:1px} .pw-root .pw-filters{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end} .pw-root .pw-filters .pw-field{min-width:150px;flex:1 1 150px;margin:0} .pw-root .pw-bar{height:9px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-top:5px} .pw-root .pw-bar i{display:block;height:100%;background:var(--green-500);border-radius:99px} .pw-root .pw-thumb{width:100%;height:120px;object-fit:cover;border-radius:var(--r-sm);background:var(--line-2);display:block} .pw-root .pw-pondmeta{font-size:12px;color:var(--ink-3);margin-top:3px} .pw-root .pw-empty{text-align:center;color:var(--ink-3);padding:34px 16px;font-size:13.5px} .pw-root /* ---------- modal ---------- */ .pw-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(18,33,26,.5)} .pw-root.pw-modal .pw-box{background:#fff;border-radius:var(--r);max-width:720px;width:100%;max-height:86vh;overflow:auto;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.3)} .pw-root.pw-modal h2{font-size:19px;margin-bottom:10px} .pw-root.pw-modal .pw-x{float:right;background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink-3);line-height:1} .pw-root /* ---------- report ---------- */ .pw-report{max-width:900px;margin:0 auto;background:#fff;box-shadow:var(--sh);border-radius:var(--r);padding:30px} .pw-root .pw-report h1{font-size:23px} .pw-root .pw-report .pw-rmeta{color:var(--ink-3);font-size:12.5px;margin-top:4px} .pw-root .pw-report section{margin-top:22px} .pw-root .pw-report section>h2{font-size:14px;text-transform:uppercase;letter-spacing:.6px;color:var(--green-700); border-bottom:2px solid var(--green-100);padding-bottom:5px;margin-bottom:10px} .pw-root .pw-report .pw-kv{display:grid;grid-template-columns:1fr 1fr;gap:0 22px} @media (max-width:640px){.pw-root .pw-report .pw-kv{grid-template-columns:1fr}} .pw-root .pw-report .pw-kv div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--line-2);font-size:13.5px} .pw-root .pw-report .pw-kv span:first-child{color:var(--ink-2)} .pw-root .pw-report .pw-kv span:last-child{font-weight:650;text-align:right;font-variant-numeric:tabular-nums} .pw-root .pw-report .pw-staticmap{width:100%;max-height:440px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line);display:block} .pw-root .pw-report .pw-headline{background:var(--green-050);border:1px solid var(--green-100);border-radius:var(--r-sm);padding:14px;margin-top:12px} .pw-root .pw-report .pw-headline .pw-amt{font-size:29px;font-weight:750;color:var(--green-900)} .pw-root .pw-report .pw-fine{font-size:11.5px;color:var(--ink-2);line-height:1.5} .pw-root .pw-report .pw-fine li{margin-bottom:4px} .pw-root .pw-report .pw-disclaim{border:2px solid var(--warn);background:var(--warn-bg);border-radius:var(--r-sm);padding:13px;font-size:12.5px;color:#5b4300;line-height:1.5} @media print{ .pw-root{background:#fff} .pw-root .pw-topbar,.pw-root .pw-labelbar,.pw-root .pw-nav,.pw-root .pw-noprint,.pw-root .pw-stepper{display:none !important} .pw-root .pw-wrap{padding:0;max-width:none} .pw-root .pw-report{box-shadow:none;border-radius:0;padding:0;max-width:none} .pw-root .pw-report section{break-inside:avoid} .pw-root a{color:inherit;text-decoration:none} } .pw-root /* ---------- phone layout ---------------------------------------------- Placed last so these overrides win the cascade. Standing at the pond on a phone,.pw-root the map matters more than the step list,.pw-root so the stepper collapses to one scrolling row of chips and the map moves to the top. -------------------------------------------------------------------- */ @media (max-width:900px){ .pw-planner>.pw-stepper{order:1;position:static;padding:11px 12px;overflow:hidden} .pw-root .pw-planner>.pw-rail-mid{order:2} .pw-root .pw-planner>.pw-rail-right{order:3} .pw-root .pw-stepper>h3,.pw-root .pw-stepper>.pw-sub{display:none} .pw-root .pw-stepper ol{display:flex;gap:6px;overflow-x:auto;padding:0 0 5px;-webkit-overflow-scrolling:touch} .pw-root .pw-stepper li{flex:0 0 auto} .pw-root .pw-stepper button{width:auto;white-space:nowrap;border:1px solid var(--line);padding:6px 11px;align-items:center} .pw-root .pw-stepper .pw-btnrow{margin-top:9px} .pw-root .pw-labelbar{font-size:12px} .pw-root .pw-result .pw-amt{font-size:23px} .pw-root } @media (max-width:620px){ /* the legend would sit on top of the drawing tools on a narrow screen; the treatment-zone card explains the colours instead */ .pw-mlegend{display:none} .pw-root .pw-maptools{flex-direction:row;overflow-x:auto;padding-right:4px} .pw-root .pw-maptools .pw-grp{flex-wrap:nowrap} }