/* Joe mode: the booking page's editor (3.6.0, Plona Agent, Oct 25, 2026; app/pro-page.js, migration 0298). Chandon, Oct 25: "Have that
   first page where the owner sees about the pro driver business be able to be modified by the pro driver in a catered way so they can e.g
   up load pic, etc." Joe is 76: the text starts at 18px (20px on a computer, as the application's), the taps are 48px or taller, and the
   colors are the app's own tokens, so light and dark both read. The live picture is the page's own look (site-v2/css/pro-view.css, under
   .ppv), framed here. */

/* ---------- the task screens (one-step flows pgphoto, pgcover, pgline, pgabout, pghighlights, pgwebsite, pgprice) ---------- */
.stp[data-flow^=pg] .ps-lead{font-size:18px;line-height:1.45;color:var(--ink)}
.stp[data-flow^=pg] .fi>input{font-size:18px}
.stp[data-flow^=pg] .fi>label{font-size:15px;line-height:17px;top:calc(var(--fi-h) / 3 - 12px)}
.stp[data-flow^=pg] .stp-opt span{font-size:18px}
/* the two picture buttons one above the other on a phone (each keeps its words on one line), side by side on a wider screen */
.pg-pick{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0 0 var(--v-field)}
@media (min-width:520px){.pg-pick:has(.btn+.btn){grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg-pick .btn{width:100%;min-height:52px;font-size:18px}
.pg-hint,.pg-count{margin:0 0 var(--v-field);font-size:16px;line-height:1.4;color:var(--sub)}
.pg-offl{margin:0 0 var(--v-field)}
.pg-offl .linkbtn{display:inline-flex;align-items:center;min-height:44px;font-size:17px}
.pg-lab{display:block;margin:0 0 6px;font-weight:600;font-size:16px}
.pg-lab .opt{font-weight:400;color:var(--sub)}
.stp[data-flow^=pg] textarea{display:block;width:100%;min-height:168px;padding:12px;font:18px/1.5 'Instrument Sans',sans-serif;color:var(--ink);background:var(--card);border:1.5px solid var(--field);border-radius:var(--r-sm)}
.stp[data-flow^=pg] textarea[aria-invalid=true]{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
/* the one line under the name: as tall as its rows (all 140 letters show on a phone), never pulled taller (it stays one line) */
.stp[data-flow^=pg] textarea.pg-one{min-height:0;resize:none}
.pg-hlg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pg-hlg .ps-chip span{min-height:52px;padding:6px 10px;font-size:17px;line-height:1.25;text-align:center}
.pg-hlg .ps-chip input:disabled+span{opacity:.5;cursor:default}
.pg-hls{margin:0 0 6px}
/* his own highlight: the box, then "Add it" under it (never squeezed side by side) */
.pg-own{margin:var(--v-field) 0 0}
.pg-own .fi{margin-bottom:8px}
.pg-own .btn{width:100%;min-height:52px;font-size:18px}
.stp[data-flow^=pg] .pr-tog{margin:0 0 var(--v-field)}

/* ---------- the live picture: a frame around the page as owners see it (nothing in it can be tapped) ---------- */
.pg-live{margin:var(--v-group) 0 0}
.pg-livet{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--sub)}
.pg-frame{padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 18px rgba(0,0,0,.06);overflow:hidden;pointer-events:none;user-select:none}
.stp .pg-frame{background:var(--card)}
.stp .pg-frame .ppv .pp-ph{border-color:var(--line)}
.stp .pg-frame .ppv.has-cover .pp-ph{border-color:var(--card)}

/* ---------- #/pro/page: each part, the page beside it on a computer ---------- */
.pg-rows{margin:0 0 16px}
.pg-see{margin:0 0 8px}
.pg-see .btn{width:100%;min-height:54px;font-size:18px}
.pg-wait{margin:0 0 8px}
.pg-ownb{margin:12px 0 0}
.pg-ownb .btn{width:100%;min-height:52px;font-size:18px}
@media (min-width:960px){
  .jm.pg-hub{max-width:1100px}
  .pg-cols{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:32px;align-items:start}
  .pg-hub .pg-live{position:sticky;top:84px;margin:0}
}
@media (min-width:900px){
  .stp[data-flow^=pg] .ps-lead,.stp[data-flow^=pg] .fi>input,.stp[data-flow^=pg] textarea,.stp[data-flow^=pg] .stp-opt span{font-size:20px}
  .stp[data-flow^=pg] .fi>label{font-size:16px;line-height:18px;top:calc(var(--fi-h) / 3 - 13px)}
  .pg-hint,.pg-count{font-size:17px}
}