/* Joe mode, stage D part 1: the pro's own screens (3.6.0, Plona Agent, Oct 24, 2026; JOE-MODE-V1-SPEC item 10: "phone first and larger on a
   computer, big text, one thing per screen, no fluff"; app/pro.js). Chandon, Oct 24: "looks good for now, can we start the joe mode build".
   Joe is 76: the text on Joe mode's pages and its application starts at 18px (the app's floor is 16px), the taps are 48px or taller, and the
   colors are the app's own tokens (app.css :root, with its dark mode), so light and dark both read. */

/* ---------- the application (P.step.flow 'proapp'): one size up from the other step flows ---------- */
.stp[data-flow=proapp] .ps-lead{font-size:18px;line-height:1.45}
.stp[data-flow=proapp] .stp-opt span{font-size:18px}
.stp[data-flow=proapp] .ps-priv{font-size:15px}
.stp[data-flow=proapp] .fi>input{font-size:18px}
.stp[data-flow=proapp] .ps-chip span{font-size:17px}
/* review fix, Oct 25: the website box is a field like the others (app.css styles the text, email and phone boxes; a web address box is styled
   here only, so the team's own link boxes stay exactly as they are) */
.stp[data-flow=proapp] .fi>input[type=url]{width:100%;font:18px 'Instrument Sans',sans-serif;color:var(--ink);background:var(--card);border:1.5px solid var(--field);border-radius:var(--r-sm)}
/* Joe is 76 (review fix, Oct 25): the field names and the small second lines one size up at every size (the app's are 13 and 14px) */
.stp[data-flow=proapp] .fi>label,.jm-form .fi>label{font-size:15px;line-height:17px;top:calc(var(--fi-h) / 3 - 12px)}
.pr-pcn{margin:-4px 0 var(--v-field);font-size:16px;line-height:1.4;color:var(--sub)}
/* the narrowest phones (360px): the prices page's two boxes a row keep their whole names ("Flight home (if any)") at 14px, and the page
   still fits the screen (the 3.5.8 rule: one thing per screen, no page scroll) */
@media (max-width:380px){.stp[data-flow=proapp] .ps-dates .fi>label{font-size:14px}}

/* a dollar amount: "$" in front of the field's own input */
.fi.pr-dol>input{padding-left:28px}
.fi.pr-dol>.pr-cur{position:absolute;left:13px;top:calc(var(--fi-h) / 2 - 4px);line-height:24px;font-size:18px;font-weight:600;color:var(--ink);pointer-events:none;z-index:1}

/* the prices page: the gas line and the deck's example with his numbers */
.pr-gas{display:flex;gap:10px;align-items:flex-start;margin:0 0 var(--v-field);font-size:16px;line-height:1.4;color:var(--sub)}
.pr-gas svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--ot);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pr-gas b{color:var(--ink)}
.pr-ex{display:flex;flex-direction:column;gap:2px;margin:0 0 var(--v-field);padding:12px 16px;border-radius:var(--r-lg);background:var(--tint);border:1px solid var(--tint-line);font-size:17px;line-height:1.4}
.pr-ex b{font-size:16px;color:var(--ot)}
.pr-ex .pr-exp{font:600 22px/1.25 'Clash Grotesk','Instrument Sans',sans-serif;margin-top:2px}
.pr-sum{margin-bottom:var(--v-group)}

/* a yes or no switch row (a checkbox with role switch) */
.pr-togs{display:grid;gap:6px;margin:0 0 var(--v-field)}
.pr-tog{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:6px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card);cursor:pointer}
.pr-tog .pr-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pr-tog .pr-tt b{font-size:17px;line-height:1.3}
.pr-tog .pr-tt small{font-size:15px;line-height:1.25;color:var(--sub)}
.pr-tog input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.pr-tog .pr-sw{flex:none;position:relative;width:52px;height:30px;border-radius:15px;background:var(--wait);border:1.5px solid var(--field);transition:background .15s}
.pr-tog .pr-sw:after{content:'';position:absolute;left:3px;top:3px;width:21px;height:21px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.pr-tog input:checked~.pr-sw{background:var(--ob);border-color:var(--ob)}
.pr-tog input:checked~.pr-sw:after{transform:translateX(22px)}
.pr-tog input:focus-visible~.pr-sw{outline:2px solid var(--ink);outline-offset:2px}
.pr-tog.off{cursor:default;background:var(--bg)}
.pr-tog.off input{cursor:default}
.pr-tog.off .pr-tt b{color:var(--sub)}
.pr-togn{margin:-2px 0 0 2px;font-size:15px;color:var(--sub)}
@media (prefers-reduced-motion:reduce){.pr-tog .pr-sw,.pr-tog .pr-sw:after{transition:none}}

/* his own questions */
.pr-h2{font:600 20px/1.25 'Clash Grotesk','Instrument Sans',sans-serif;margin:var(--v-field) 0 8px}
.pr-qs{font-size:15px;line-height:1.4;color:var(--sub);margin:0 0 var(--v-field)}
.pr-q{display:flex;gap:8px;align-items:flex-start}
.pr-q .pr-qi{flex:1;min-width:0}
.pr-q .pr-qx{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:var(--fi-h);border-radius:var(--r-md);border:1.5px solid var(--field);background:var(--card);color:var(--ink);cursor:pointer}
.pr-q .pr-qx svg{width:22px;height:22px}
.pr-qa{margin-left:0}
.pr-qadd{display:inline-flex;align-items:center;gap:8px;min-height:48px}
.pr-qadd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* where you drive: the states as chips, four a row on a phone */
.pr-states{border:0;margin:0 0 var(--v-field);padding:0;min-width:0}
.pr-sgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
@media (min-width:560px){.pr-sgrid{grid-template-columns:repeat(9,minmax(0,1fr))}}
.pr-sgrid .ps-chip span{min-height:48px;padding:0 2px;font-size:16px}
.pr-sgrid .ps-chip span svg{display:none}
.pr-stline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0 0 var(--v-field);padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.pr-stline p{margin:0;font-size:17px;font-weight:600}
.pr-stline .linkbtn{min-height:44px;font-size:16px}
.stp-pick+.pr-states,.stp-pick+.err+.pr-states,.stp-pick+.err+.pr-stline{margin-top:var(--v-field)}
#pr-pets{margin-top:var(--v-group)}

/* the open dates: a month, seven days a row, each day a 44px button or more */
.pr-mh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.pr-mt{font:600 22px/1.2 'Clash Grotesk','Instrument Sans',sans-serif;margin:0;text-align:center;flex:1}
.pr-mb{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--field);background:var(--card);color:var(--ink);cursor:pointer}
.pr-mb svg{width:22px;height:22px}
.pr-mb:disabled{opacity:.35;cursor:default}
.pr-cal{margin:0 0 8px}
.pr-wk,.pr-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.pr-wk span{text-align:center;font-size:14px;font-weight:600;color:var(--sub);padding:2px 0 4px}
.pr-d{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--wait)}
.pr-d.pr-pad{background:none}
.pr-d.past{opacity:.4}
.pr-d.on{background:var(--card);box-shadow:inset 0 0 0 2px var(--ob)}
button.pr-d{border:0;cursor:pointer;font-family:inherit;padding:0}
button.pr-d:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
button.pr-d.on{background:var(--ob);color:#fff;box-shadow:none}
.pr-mall{margin-bottom:4px}
.pr-count{font-size:16px;font-weight:600;margin:0 0 var(--v-field)}
@media (min-width:700px){.pr-d{min-height:52px;font-size:18px}}

/* his link, with Copy and Share */
.pr-link{display:flex;flex-direction:column;gap:8px;margin:0 0 var(--v-field)}
.pr-lkt{margin:0;padding:12px 14px;border:1.5px solid var(--field);border-radius:var(--r-md);background:var(--bg);color:var(--ink);font-size:18px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.pr-lkb{display:flex;gap:8px}
.pr-lkb .btn{flex:1;min-height:48px;font-size:17px}
.pr-wait{margin:-4px 0 var(--v-field);font-size:16px;line-height:1.4;color:var(--sub)}   /* before Plona approves the business: no Share yet */

/* ---------- Joe mode's tabs: Overview, Calendar, Business summary (app/pro.js) ---------- */
.jm{max-width:640px;margin:0 auto;padding:16px 16px 40px;font-size:18px;line-height:1.45}
.jm h1{font:600 32px/1.15 'Clash Grotesk','Instrument Sans',sans-serif;margin:8px 0 4px;letter-spacing:-.01em}
.jm .phead h1{font-size:30px}
.jm-biz{margin:0 0 20px;color:var(--sub);font-size:18px}
.jm-lead{font-size:18px;line-height:1.45;margin:0 0 16px}
.jm-acts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.jm-acts .btn{min-height:52px;font-size:18px}
.jm-card{margin:0 0 24px;padding:18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card)}
.jm-card h2{font:600 22px/1.25 'Clash Grotesk','Instrument Sans',sans-serif;margin:0 0 6px}
.jm-card p{margin:0 0 12px;font-size:17px;color:var(--sub)}
.jm-card .btn{min-height:52px;font-size:18px;width:100%}
.jm-card.jm-todo{border-color:var(--tint-line);background:var(--tint)}
.jm-card.jm-ok{border-color:var(--good-d)}
.jm-card .pr-lkt{color:var(--ink);margin:0}
.jm-sec{margin:0 0 24px}
.jm-sec h2{font:600 22px/1.25 'Clash Grotesk','Instrument Sans',sans-serif;margin:0 0 8px}
.jm-empty{margin:0;padding:16px;border-radius:var(--r-md);background:var(--bg);border:1px dashed var(--line);font-size:17px;color:var(--sub)}
.jm .row{margin-top:16px}
.jm .row .btn{min-height:52px;font-size:18px}
/* the calendar's legend (spec item 10: booked blue, requests dashed orange, days off gray) */
.jm-leg{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0 0 14px;padding:0;font-size:16px}
.jm-leg li{display:flex;align-items:center;gap:8px}
.jm-sw{display:inline-block;width:22px;height:22px;border-radius:6px}
.jm-sw.bk{background:#2D5F9A}
.jm-sw.rq{background:var(--tint);border:2.5px dashed var(--ob)}
.jm-sw.off{background:var(--wait);border:1px solid var(--line)}
.jm-cal .pr-mt{text-align:left;margin:0 0 8px}
.jm-cal .jm-empty{margin-top:12px}
/* Business summary's inner tabs */
.jm-itabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.jm-itab{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:24px;border:1.5px solid var(--field);color:var(--ink);text-decoration:none;font-size:17px;font-weight:600}
.jm-itab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.jm-itab:focus-visible{outline:2px solid var(--ob);outline-offset:2px}
@media (min-width:700px){.jm{padding-top:24px}.jm h1{font-size:36px}}
/* larger on a computer (JOE-MODE-V1-SPEC item 10; review fix, Oct 25): Joe mode's pages and its application a size up at 900px and wider */
@media (min-width:900px){
  .jm{font-size:20px}
  .jm-lead,.jm-card p,.jm-biz{font-size:20px}
  .jm-card h2,.jm-sec h2{font-size:24px}
  .stp[data-flow=proapp] .ps-lead,.stp[data-flow=proapp] .stp-opt span,.stp[data-flow=proapp] .fi>input{font-size:20px}
  .stp[data-flow=proapp] .fi>label,.jm-form .fi>label{font-size:16px;line-height:18px;top:calc(var(--fi-h) / 3 - 13px)}
  .stp[data-flow=proapp] .ps-priv,.pr-pcn,.pr-wait,.pr-gas{font-size:17px}
  .pr-tog .pr-tt b{font-size:19px}
  .pr-tog .pr-tt small,.pr-togn{font-size:16px}
  .pr-ex{font-size:19px}
  .pr-lkt{font-size:20px}
}

/* More: "Switch to Joe mode" in driver mode's own colors (Joe mode is driver mode's pro variant) */
.mo-sw.to-pro{background:var(--ink);color:var(--bg)}
.mo-sw.to-pro:focus-visible{outline-color:var(--orange)}
.mo-sw.to-pro .mo-swb{background:var(--ob);color:#fff}