/* GEC Dispatch – partner portal (gectransfers.au/partners). pp- classes only. Phone first; a computer from 900 px (navy
   sidebar + top bar). Colours, 3D buttons and motion as the approved previews (tools/previews/src/GEC-25-partner-portal*.html). */
.pp{--navy:#02066F;--navy2:#0B1283;--deep:#01034C;--blue:#1E90FF;--blue-s:#E8F3FF;--sky:#43A6DC;--orange:#FCB116;--orange2:#F59A2A;--orange-s:#FFF4DC;--amber:#B87800;--blue-t:#0A6AD0;--amber-t:#8F5E00;--orange-t:#A35200;--ink:#141A33;--ink2:#4A5170;--mute:#5F6684;--line:#E6E9F2;--edge:#E4E7F0;--bg:#F3F5FA;--red:#D63B3B;--red-s:#FDECEC;--green:#1E9E5A;--green-s:#E6F6EE;
/* 2.22.2 (GEC-163, M1): --blue-t, --amber-t, --orange-t – the same hues darker for TEXT, ≥ 4.5 : 1 on white and on the page grey (#0A6AD0
   5.3 / 4.8, #8F5E00 5.6 / 5.1, #A35200 5.6 / 5.1); fills, borders, buttons and icons keep --blue, --amber, --orange2 */
  --sh:0 1px 2px rgba(16,24,64,.05),0 10px 30px rgba(16,24,64,.08);--og:linear-gradient(180deg,#FFC844,#FCB116);--wg:linear-gradient(180deg,#fff,#F6F7FB);--ng:linear-gradient(160deg,#2B3BD0,#02066F);--hero:linear-gradient(160deg,#0B1283 0%,#02066F 55%,#01034C 100%);
  --o3d:0 4px 0 #C98A06,0 12px 22px -10px rgba(242,164,10,.6),inset 0 1px 0 rgba(255,255,255,.55);--w3d:0 3px 0 #DDE1EC,0 10px 18px -14px rgba(16,24,64,.3);--n3d:0 3px 0 #01034A,inset 0 1px 0 rgba(255,255,255,.22);--c3d:0 4px 0 #E1E6F2,0 18px 30px -24px rgba(2,6,111,.35);
  min-height:100vh;background:var(--bg);color:var(--ink);font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.pp-body{margin:0;background:#F3F5FA}
html.pp-lock,html.pp-lock body{overflow:hidden}
.pp *,.pp *::before,.pp *::after{box-sizing:border-box}
.pp a{color:inherit;text-decoration:none}
/* The resets and the focus ring weigh no more than a tag (:where): one class, here or in a screen's file, wins over them, so a
   <button class="pp-btn"> looks like the <a> one, a margin on one class applies, and a field's own ring replaces the outline. */
:where(.pp) button{font:inherit;color:inherit;cursor:pointer}
:where(.pp) h1,:where(.pp) h2,:where(.pp) h3,:where(.pp) h4,:where(.pp) h5,:where(.pp) p{margin:0}
.pp .gi{width:18px;height:18px;flex:0 0 auto;display:inline-block;vertical-align:middle}
.pp [hidden]{display:none!important}
:where(.pp) :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pp .pp-sheet:focus-visible,.pp .pp-view:focus-visible{outline:0}
.pp .pp-link{color:var(--blue-t);font-weight:500;font-size:13px}
.pp-logo{display:block;width:auto;max-width:100%}
.pp .pp-kick{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-t)}
.pp-fine{font-size:12px;color:var(--mute)}
@media (min-width:900px){.pp-only-phone{display:none!important}}
@media (max-width:899.98px){.pp-only-desk{display:none!important}}

/* ---------- Motion (as the previews): entrance, light sweep, float, glow; nothing moves with «reduce motion» ---------- */
@keyframes pp-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pp-pop2{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes pp-sweep{0%,62%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(430%) skewX(-18deg)}}
@keyframes pp-float{50%{transform:translateY(-2.5px)}}
@keyframes pp-glow{50%{box-shadow:0 0 0 6px rgba(252,177,22,.18),0 0 26px rgba(252,177,22,.45)}}
@keyframes pp-grow{from{transform:scaleY(0)}to{transform:none}}
@keyframes pp-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes pp-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes pp-fade{from{opacity:0}to{opacity:1}}
@keyframes pp-turn{to{transform:rotate(360deg)}}
.pp-view>*,.pp-anim>*,.pp-trips>*{animation:pp-pop .55s cubic-bezier(.2,.8,.2,1.12) both}
.pp-view>:nth-child(2),.pp-anim>:nth-child(2),.pp-trips>:nth-child(2){animation-delay:.06s}
.pp-view>:nth-child(3),.pp-anim>:nth-child(3),.pp-trips>:nth-child(3){animation-delay:.12s}
.pp-view>:nth-child(4),.pp-anim>:nth-child(4),.pp-trips>:nth-child(4){animation-delay:.18s}
.pp-view>:nth-child(n+5),.pp-anim>:nth-child(n+5),.pp-trips>:nth-child(n+5){animation-delay:.24s}
.pp-glow{animation:pp-glow 2.6s ease-in-out infinite}
.pp-ic3{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--ng);color:#fff;box-shadow:0 3px 0 #01034A,inset 0 1px 0 rgba(255,255,255,.28)}
.pp .pp-ic3 .gi{width:25px;height:25px;animation:pp-float 3s ease-in-out infinite}
/* The promise tiles: raised, popping in one after another, a light sweeping across them in turn. */
.pp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pp-tile{position:relative;overflow:hidden;background:var(--wg);border:1.5px solid var(--edge);border-radius:16px;padding:12px 6px 10px;text-align:center;font-size:11px;font-weight:600;line-height:1.25;box-shadow:0 4px 0 #E1E6F2,0 14px 24px -16px rgba(2,6,111,.4);animation:pp-pop2 .65s cubic-bezier(.2,.8,.2,1.2) both}
.pp-tile .pp-ic3{width:42px;height:42px;border-radius:13px;margin:0 auto 7px}
.pp-tile::after,.pp-btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-160%) skewX(-18deg);animation:pp-sweep 4.5s ease-in-out 1.2s infinite;pointer-events:none}
.pp-tile::after{background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));animation:pp-sweep 5s ease-in-out infinite}
.pp-tile:nth-child(2){animation-delay:.08s}.pp-tile:nth-child(3){animation-delay:.16s}.pp-tile:nth-child(4){animation-delay:.24s}.pp-tile:nth-child(5){animation-delay:.32s}.pp-tile:nth-child(6){animation-delay:.4s}
.pp-tile:nth-child(2)::after{animation-delay:.2s}.pp-tile:nth-child(3)::after{animation-delay:.4s}.pp-tile:nth-child(4)::after{animation-delay:.6s}.pp-tile:nth-child(5)::after{animation-delay:.8s}.pp-tile:nth-child(6)::after{animation-delay:1s}
.pp-tile:nth-child(even) .gi{animation-delay:1.5s}
@media (prefers-reduced-motion:reduce){.pp *,.pp *::before,.pp *::after{animation:none!important;transition:none!important}.pp{--pp-sweep:0}}

/* ---------- 3D buttons ---------- */
.pp-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 20px;border:0;border-radius:15px;font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;transition:transform .08s,box-shadow .08s,filter .15s}
.pp .pp-btn-primary{background:var(--og);color:var(--navy);box-shadow:var(--o3d)}
.pp .pp-btn-secondary{background:var(--wg);color:var(--navy);border:1px solid var(--edge);box-shadow:var(--w3d);font-weight:600}
.pp .pp-btn-navy{background:linear-gradient(180deg,#1A23A0,#02066F);color:#fff;box-shadow:0 3px 0 #01034A,0 8px 16px -8px rgba(2,6,111,.5)}
.pp-btn:hover{filter:brightness(1.03)}
.pp-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.pp-btn[disabled]{opacity:.5;pointer-events:none}
.pp-btn .gi{width:18px;height:18px}
.pp-btn-big{height:56px;border-radius:18px;font-size:16px}
.pp-btn-big .gi{width:20px;height:20px}
.pp-btn-sm{height:42px;padding:0 16px;border-radius:13px;font-size:13px}
.pp-btn-sm .gi{width:16px;height:16px}
.pp .pp-btn-xs{height:32px;padding:0 12px;border-radius:10px;font-size:12px}
/* xs: the 3D edge alone, in each kind's colour (only primary buttons are orange) */
.pp .pp-btn-primary.pp-btn-xs{box-shadow:0 3px 0 #C98A06}
.pp .pp-btn-secondary.pp-btn-xs{box-shadow:0 3px 0 #DDE1EC}
.pp .pp-btn-navy.pp-btn-xs{box-shadow:0 3px 0 #01034A}
.pp-btn-block{display:flex;width:100%}

/* ---------- Cards, panels, chips, rows ---------- */
.pp-card{background:#fff;border-radius:20px;padding:14px 16px;box-shadow:var(--sh)}
.pp-panel{background:#fff;border:1.5px solid var(--edge);border-radius:20px;box-shadow:var(--c3d);overflow:hidden}
.pp-panel-h{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line)}
.pp-panel-h h3{display:flex;align-items:center;gap:8px;min-width:0;font-size:15.5px;color:var(--navy)}
.pp-panel-h>:last-child:not(h3){margin-left:auto}
.pp-pb{padding:14px 18px}
.pp-navy{background:linear-gradient(150deg,#0B1283 0%,#02066F 60%,#01034C 100%);color:#fff;box-shadow:0 4px 0 #01034A,0 18px 30px -18px rgba(2,6,111,.6)}
.pp-h5{margin:0 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600}
.pp-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:16px 4px 8px}
.pp-sec-h h4{font-size:15.5px;color:var(--navy)}
.pp-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;line-height:1.5;border-radius:99px;padding:2px 8px;white-space:nowrap}
.pp-chip-ok{background:#E3F0FF;color:#0B5CC2}
.pp-chip-go{background:var(--orange-s);color:#8A5A00}
.pp-chip-go::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange2);animation:pp-glow 1.6s ease-in-out infinite}
.pp-chip-done{background:#ECEEF5;color:var(--ink2)}
.pp-chip-bad{background:var(--red-s);color:var(--red)}
.pp-chip-wait{background:var(--orange-s);color:#8A5A00} /* PP.waitChip(): a request GEC has not confirmed yet */
.pp-chip-wait .gi{animation:pp-turn 6s linear infinite}
.pp-cw>span{display:inline-block;max-width:100%}
.pp-chip .gi{width:12px;height:12px}
.pp-freq{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px}
.pp-tag{display:inline-block;vertical-align:1px;font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:2px 6px;color:#0B5CC2;background:#E3F0FF}
.pp-tag.o{color:#8A5A00;background:var(--orange-s)}
.pp-row{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 0;border-top:1px solid var(--line);font-size:12.5px}
.pp-row:first-child{border-top:0}
.pp-row>.gi{width:17px;height:17px;color:var(--mute)}
.pp-row>div{flex:1;min-width:0;line-height:1.3;font-weight:600}
.pp-row small{display:block;font-size:11px;font-weight:500;color:var(--mute)}
.pp-row .r{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--mute);white-space:nowrap}
.pp-table{width:100%;border-collapse:collapse;font-size:13px}
.pp-table th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600;padding:9px 12px;background:#FAFBFE;border-bottom:1px solid var(--line);white-space:nowrap}
.pp-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.pp-table tr:last-child td{border-bottom:0}
.pp-table .r{text-align:right}

/* ---------- Form pieces: fields, choices, switches, steppers ---------- */
.pp-field{display:block;margin-top:9px}
.pp-field>span{display:block;margin:0 0 4px 2px;font-size:11px;font-weight:600;color:var(--mute)}
.pp-in{display:flex;align-items:center;gap:9px;min-width:0;min-height:46px;padding:6px 12px;border:1.5px solid #DCE0EC;border-radius:13px;background:#FAFBFE;transition:border-color .15s,box-shadow .15s}
.pp-in:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,144,255,.12);background:#fff}
.pp-in>.gi{width:17px;height:17px;color:var(--mute)}
.pp-in>span{flex:1;min-width:0}
.pp-in small{display:block;font-size:10.5px;line-height:1.2;color:var(--mute)}
.pp-in input,.pp-in select,.pp-in textarea{display:block;width:100%;min-width:0;min-height:0;margin:0;padding:0;border:0;outline:0;background:none;box-shadow:none;font:inherit;font-size:14px;font-weight:500;color:var(--ink)}
.pp-pills{display:flex;flex-wrap:wrap;gap:6px}
.pp-pill{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:1px solid var(--edge);border-radius:12px;background:var(--wg);box-shadow:0 2px 0 #DDE1EC;font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap}
.pp-pill.on{background:linear-gradient(180deg,#1A23A0,#02066F);color:#fff;border-color:transparent;box-shadow:0 3px 0 #01034A}
.pp-pill:active,.pp-kind:active,.pp-pick-i:active,.pp-step button:active{transform:translateY(2px)}
.pp-seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--bg)}
.pp-seg>*{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 6px;border:0;border-radius:11px;background:none;font-size:12.5px;font-weight:600;color:var(--ink2);text-align:center}
.pp-seg>.on{background:var(--wg);color:var(--navy);box-shadow:0 3px 0 #DDE1EC,0 8px 14px -10px rgba(16,24,64,.35)}
.pp-seg small{font-size:10.5px;font-weight:500;color:var(--mute)}
.pp-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pp-kind{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:8px 4px 7px;border:1.5px solid var(--edge);border-radius:14px;background:var(--wg);box-shadow:var(--w3d);font-size:11.5px;font-weight:600;line-height:1.2;color:var(--ink2);text-align:center;transition:transform .08s}
.pp-kind small{font-size:10px;font-weight:500;color:var(--mute)}
.pp-kind>.gi{width:30px;height:30px;padding:6px;border-radius:10px;background:#EEF1F8;color:var(--navy)}
.pp-kind.on{border-color:var(--navy);color:var(--navy);background:linear-gradient(180deg,#fff,#EEF2FF);box-shadow:0 3px 0 var(--navy),0 10px 18px -12px rgba(2,6,111,.45)}
.pp-kind.on>.gi{background:var(--ng);color:#fff}
.pp-kind.on::after{content:"";position:absolute;top:5px;right:5px;width:14px;height:14px;border-radius:50%;background:var(--orange) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302066F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat}
.pp input.pp-tog{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;width:40px;height:24px;margin:0;border:0;border-radius:99px;background:#D9DEEA;cursor:pointer;transition:background .2s}
.pp input.pp-tog::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .2s}
.pp input.pp-tog:checked{background:linear-gradient(180deg,#FFC23D,#F2A40A)}
.pp input.pp-tog:checked::after{left:19px}
.pp input.pp-check{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:22px;height:22px;margin:0;border:2px solid #CBD2E4;border-radius:7px;background:#fff;cursor:pointer}
.pp input.pp-check:checked{border:0;background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat,var(--ng);box-shadow:0 2px 0 #01034A}
.pp-step{display:inline-flex;align-items:center;gap:6px}
.pp-step button{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--edge);border-radius:8px;background:var(--wg);box-shadow:0 2px 0 #DDE1EC;color:var(--navy)}
.pp-step .gi{width:13px;height:13px}
.pp-step b{min-width:16px;text-align:center;font-size:15px;color:var(--navy)}

/* ---------- The shell on a phone: navy header with the logo, the screen, a floating tab bar ---------- */
.pp-side{display:none}
.pp-main{min-width:0}
.pp-top{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 18px 14px;background:var(--hero);color:#fff}
.pp-top::after{content:"";position:absolute;right:-70px;top:-40px;width:230px;height:230px;border-radius:50%;background:radial-gradient(closest-side,rgba(252,177,22,.22),rgba(252,177,22,0));pointer-events:none}
.pp-top-logo,.pp-top-r,.pp-hero{position:relative;z-index:1}
.pp-top-t{display:none}
.pp-top-r{display:flex;align-items:center;gap:10px}
.pp-top .pp-loc{display:none}
.pp-ib{position:relative;flex:0 0 auto;width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(255,255,255,.1);color:#fff;transition:transform .08s}
.pp-ib:active,.pp-me:active{transform:translateY(2px)}
.pp-dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px #0B1283;animation:pp-glow 2.4s ease-in-out infinite}
.pp-me{display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;text-align:left;transition:transform .08s}
.pp-av{flex:0 0 auto;width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#FFD25C,#FCB116);color:var(--navy);font-size:14px;font-weight:700}
.pp-me-t{display:none}
.pp-hero{flex:0 0 100%;padding:2px 2px 8px}
.pp-hero:empty{display:none}
.pp-hello{font-size:13.5px;color:rgba(255,255,255,.72)}
.pp-pname{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:2px;font-size:25px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:#fff}
.pp-pname small{padding:3px 8px;border-radius:99px;background:var(--orange);color:var(--navy);font-size:10.5px;font-weight:700;letter-spacing:.12em;line-height:1.3;text-transform:uppercase}
.pp-loc-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin-top:10px;padding:5px 9px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07));box-shadow:0 2px 0 rgba(0,0,0,.28);color:#fff;font-size:11.5px;font-weight:600}
.pp-loc-chip .gi{width:13px;height:13px}
.pp-loc-chip>span,.pp-loc>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-view{display:block;padding:14px 16px calc(112px + env(safe-area-inset-bottom));outline:0}
.pp-tabs{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;max-width:520px;height:66px;margin:0 auto;padding:0 7px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--edge);border-radius:24px;background:rgba(255,255,255,.98);box-shadow:0 4px 0 #E1E6F2,0 18px 34px -14px rgba(2,6,111,.35)}
.pp .pp-tab{width:62px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:17px;color:var(--mute);font-size:10px;font-weight:600;white-space:nowrap;transition:transform .08s}
.pp .pp-tab .gi{width:21px;height:21px}
.pp .pp-tab.on{background:var(--ng);color:#fff;box-shadow:var(--n3d)}
.pp .pp-tab-new{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:17px;background:var(--og);color:var(--navy);box-shadow:var(--o3d);transition:transform .08s,box-shadow .08s}
.pp .pp-tab-new .gi{width:26px;height:26px}
.pp-tab:active,.pp-tab-new:active{transform:translateY(3px)}
.pp-full .pp-top,.pp-full .pp-tabs{display:none}
.pp-full .pp-view{padding:0}
.pp-load{display:flex;flex-direction:column;gap:12px}
.pp-skel{display:block;border-radius:18px;background:linear-gradient(90deg,#E8EBF3 0%,#F6F7FB 40%,#E8EBF3 80%);background-size:200% 100%;animation:pp-shimmer 1.3s linear infinite}

/* ---------- Toasts and the window (a sheet on a phone) ---------- */
.pp-toasts{position:fixed;left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:80;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.pp-full .pp-toasts{top:calc(12px + env(safe-area-inset-top));bottom:auto}
.pp-toast{display:flex;align-items:center;gap:9px;max-width:440px;padding:11px 16px;border-radius:14px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:500;line-height:1.35;box-shadow:0 4px 0 #01034A,0 18px 30px -12px rgba(2,6,111,.55);pointer-events:auto;animation:pp-pop .35s cubic-bezier(.2,.8,.2,1.12) both;transition:opacity .25s,transform .25s}
.pp-toast .gi{color:var(--orange)}
.pp-toast.bad{background:#fff;color:var(--red);border:1.5px solid #F3C2C2;box-shadow:0 4px 0 #F3C2C2,0 18px 30px -12px rgba(214,59,59,.35)}
.pp-toast.bad .gi{color:var(--red)}
.pp-toast.out{opacity:0;transform:translateY(8px)}
.pp-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;background:rgba(1,3,76,.42);animation:pp-fade .2s ease both}
.pp-sheet{display:flex;flex-direction:column;width:100%;max-width:560px;max-height:88vh;padding-bottom:env(safe-area-inset-bottom);border-radius:24px 24px 0 0;background:#fff;box-shadow:0 -10px 40px rgba(1,3,76,.25);outline:0;animation:pp-up .32s cubic-bezier(.2,.8,.2,1) both}
.pp-sheet-h{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.pp-sheet-h b{flex:1;min-width:0;font-size:17px;color:var(--navy)}
.pp-x{flex:0 0 auto;width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--edge);border-radius:11px;background:var(--wg);box-shadow:0 2px 0 #DDE1EC;color:var(--navy)}
.pp-sheet-b{min-height:0;overflow:auto;padding:4px 18px 20px}
.pp-pick{display:flex;flex-direction:column;gap:8px}
.pp .pp-pick-i{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 14px;border:1.5px solid var(--edge);border-radius:14px;background:var(--wg);box-shadow:0 3px 0 #E4E7F0;color:var(--ink);font-size:14px;font-weight:600;text-align:left;transition:transform .08s}
.pp-pick-i>span{flex:1;min-width:0;line-height:1.3}
.pp-pick-i small{display:block;font-size:12px;font-weight:500;color:var(--mute)}
.pp-pick-i>.gi{color:var(--navy)}
.pp .pp-pick-i.on{border-color:var(--navy);box-shadow:0 3px 0 var(--navy)}
.pp-mecard{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pp-mecard b{display:block;font-size:16px;color:var(--navy)}
.pp-mecard small{display:block;font-size:12.5px;color:var(--mute)}
.pp-mecard .pp-av{width:48px;height:48px;border-radius:15px;font-size:16px}
.pp-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 18px;text-align:center;font-size:13px;line-height:1.5;color:var(--ink2)}
.pp-empty b{font-size:15px;color:var(--navy)}
.pp-empty .pp-ic3{margin-bottom:4px}
.pp-empty .pp-btn{margin-top:6px}
.pp-soon{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:520px;margin:6px auto 0;padding:30px 22px 26px;border:1.5px solid var(--edge);border-radius:24px;background:#fff;box-shadow:var(--c3d);text-align:center}
.pp-soon .pp-ic3{margin-bottom:6px}
.pp-soon h2{font-size:21px;color:var(--navy)}
.pp-soon p{font-size:13.5px;line-height:1.55;color:var(--ink2)}
.pp-soon .pp-btn{margin-top:10px}

/* ---------- Home on a phone (approved screen 7) ---------- */
.pp-earn{padding:15px 16px 0;border-radius:22px;box-shadow:0 14px 34px -18px rgba(2,6,111,.35)}
.pp-earn-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pp-lbl{font-size:12px;font-weight:500;color:var(--mute)}
.pp-big{margin-top:2px;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--navy)}
.pp-sub{margin-top:3px;font-size:12px;color:var(--ink2)}
.pp-bars{flex:0 0 auto;display:flex;align-items:flex-end;gap:5px;height:54px;padding-top:6px}
.pp-bars i{display:block;width:9px;border-radius:5px 5px 3px 3px;background:#DCE6F7;transform-origin:bottom;animation:pp-grow .7s cubic-bezier(.2,.8,.2,1) both}
.pp-bars i.on{background:linear-gradient(180deg,#FFC23D,#F59A2A)}
.pp-bars i.f{background:#EDF1F8}
.pp-bars-14{gap:3px}
.pp-bars-14 i{width:5px}
@media (max-width:379.98px){.pp-bars{gap:4px}.pp-bars i{width:7px}} /* GEC-156: at 360 the twelve weeks (163 px) ran into the card's 16 px edge; narrower, as .pp-bars-14 */
.pp .pp-bal{display:flex;align-items:center;gap:10px;margin:13px -16px 0;padding:11px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.pp-bal b{color:var(--navy)}
.pp-bal>.gi{color:var(--mute)}
.pp-bal>span{flex:1;min-width:0}
.pp-cta{margin-top:14px}
.pp-up-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:16px 4px 8px}
.pp-up-h h3{display:flex;align-items:center;font-size:15.5px;color:var(--navy)}
.pp-up-h h3>.gi{display:none}
.pp .pp-trip{display:grid;grid-template-columns:58px minmax(0,1fr) auto;grid-template-areas:"w n n" "w r p" "w m p";column-gap:12px;row-gap:3px;align-items:center;margin-bottom:10px;padding:12px 14px;border-radius:18px;background:#fff;box-shadow:var(--sh);color:var(--ink);transition:transform .08s}
.pp-trip:active{transform:translateY(2px)}
.pp-when{grid-area:w;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 0;border-radius:13px;background:var(--blue-s);text-align:center}
.pp-when b{font-size:16px;line-height:1.1;color:var(--navy)}
.pp-when small{font-size:10.5px;font-weight:600;color:var(--navy)}
.pp-when span{margin-top:3px;font-size:10px;font-weight:500;line-height:1.2;color:var(--ink2)}
.pp-t-day{grid-area:d;display:none}
.pp-t-top{grid-area:n;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;min-width:0} /* a long chip goes under the name */
.pp-t-name{min-width:0;font-size:14.5px;font-weight:600;line-height:1.3}
.pp-t-name b{font-weight:600}
.pp-t-name small,.pp-t-route small{display:none}
.pp-t-route{grid-area:r;min-width:0;font-size:12.5px;color:var(--ink2)}
.pp-t-route>span,.pp-live-r{display:flex;flex-wrap:wrap;align-items:center;gap:0 5px}
.pp-t-route .gi{width:14px;height:14px;color:var(--blue)}
.pp-t-route i,.pp-live-r i{font-style:normal;color:var(--mute)}
.pp-t-meta{grid-area:m;display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11.5px;color:var(--mute)}
.pp-t-meta>span{display:inline-flex;align-items:center;gap:4px} /* GEC-156: inside it the words flow as text, the vehicle kept whole (.pp-nw) under its guests (360: «Mercedes-Benz V- / Class») */
.pp-t-meta .gi{width:13px;height:13px}
.pp-t-px{grid-area:p;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;white-space:nowrap}
.pp-t-px b{font-size:15px;color:var(--navy)}
.pp-t-px small{font-size:11.5px;font-weight:600;color:var(--amber-t)}
.pp .pp-t-px small.pp-net{font-weight:500;color:var(--mute)} /* «you pay»: our price, on a trip with no guest's price */
.pp-trips>.pp-empty{border-radius:18px;background:#fff;box-shadow:var(--sh)}
.pp-skel-trip{height:86px;margin-bottom:10px}

/* ---------- Home on a computer (approved window 4): figures, upcoming trips table, week by week, the trip on now ---------- */
.pp-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
.pp .pp-kpi{position:relative;display:block;min-width:0;padding:15px 18px;border:1.5px solid var(--edge);border-radius:20px;background:#fff;box-shadow:var(--c3d);color:var(--ink);transition:transform .08s,box-shadow .08s}
.pp-kpi:hover{transform:translateY(-1px)}
.pp .pp-kpi:active{transform:translateY(3px);box-shadow:0 1px 0 #E1E6F2}
.pp-kpi .pp-l{padding-right:46px;font-size:12.5px;font-weight:500;color:var(--mute)}
.pp-kpi .pp-v{display:inline-block;justify-self:start;margin-top:4px;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--navy);white-space:nowrap}
.pp-kpi .pp-s{margin-top:2px;font-size:12.5px;color:var(--ink2)}
.pp-kic{position:absolute;top:14px;right:14px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--ng);color:#fff;box-shadow:0 3px 0 #01034A}
.pp-kic .gi{width:19px;height:19px}
.pp .pp-kpi-navy{border-color:transparent;background:linear-gradient(150deg,#0B1283,#02066F);color:#fff;box-shadow:0 4px 0 #01034A,0 18px 30px -18px rgba(2,6,111,.6)}
.pp-kpi-navy .pp-l{color:rgba(255,255,255,.7)}
.pp-kpi-navy .pp-v{color:#fff}
.pp-kpi-navy .pp-s{color:rgba(255,255,255,.78)} /* GEC-140: «$175.00 payable to you now» readable on the navy (2 → 9 to 1) */
.pp-kpi-navy .pp-kic{background:var(--og);color:var(--navy);box-shadow:0 3px 0 #C98A06}
.pp-kfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.75)}
.pp-kfoot code{font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--orange)}
.pp-chart{display:flex;align-items:flex-end;gap:12px;height:150px;padding:6px 4px 0}
.pp-chart>div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.pp-chart i{display:block;width:100%;max-width:46px;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,#C9D8F5,#AFC5EE);transform-origin:bottom;animation:pp-grow .8s cubic-bezier(.2,.8,.2,1) both}
.pp-chart .on i{background:linear-gradient(180deg,#FFC23D,#F59A2A);box-shadow:0 3px 0 #C98A06}
.pp-chart .now i{border:1.5px dashed #F2A40A;background:repeating-linear-gradient(135deg,#FFE7B0,#FFE7B0 5px,#FFF4DC 5px,#FFF4DC 10px)}
.pp-chart b{font-size:11.5px;color:var(--navy)}
.pp-chart small{font-size:11px;color:var(--mute);white-space:nowrap}
/* A vehicle (PP.vehicle): its photo in the box its drawing has (each place sets one), the whole photo on white */
.pp-veh{display:block;width:120px;height:50px}
img.pp-veh{object-fit:contain;background:#fff;border-radius:9px}
.pp-live .pp-veh{width:100%;max-width:300px;height:auto;aspect-ratio:12/5;margin:0 auto 8px}
.pp-vm{display:block;font-size:11px;font-weight:500;line-height:1.3;color:var(--ink2);overflow-wrap:anywhere} /* PP.similar() */
.pp-vm .pp-md{font-weight:600;color:var(--ink)}
.pp-live-v{margin:-2px 0 10px;text-align:center}
.pp-live-v .pp-vm{font-size:12px;line-height:1.35}
.pp-live-r{font-size:13.5px;font-weight:600;color:var(--navy)}
.pp-live-r .gi{width:16px;height:16px;color:var(--blue)}
.pp-live-w{margin-top:2px;font-size:12.5px;color:var(--ink2)}
.pp-drv{display:flex;align-items:center;gap:11px;margin:12px 0 14px;padding-top:12px;border-top:1px solid var(--line)}
.pp-dp{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(145deg,#1E90FF,#02066F);color:#fff;font-size:17px;font-weight:700}
.pp-drv>div{flex:1;min-width:0}
.pp-drv b{display:block;font-size:14.5px}
.pp-drv small{display:block;font-size:12px;color:var(--mute)}

/* ---------- A computer: navy sidebar, white top bar, the same screens ---------- */
@media (min-width:900px){
  .pp{display:grid;grid-template-columns:262px minmax(0,1fr)}
  .pp-side{position:sticky;top:0;height:100vh;overflow:hidden auto;display:flex;flex-direction:column;padding:16px 18px 20px;background:var(--hero);color:#fff;scrollbar-width:none}
  .pp-side::after{content:"";position:absolute;left:-90px;bottom:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(closest-side,rgba(252,177,22,.16),rgba(252,177,22,0));pointer-events:none}
  .pp-side-p{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.08)}
  .pp-side-p .pp-av{width:38px;height:38px;border-radius:12px;box-shadow:0 2px 0 #C98A06}
  .pp-side-p>div{min-width:0}
  .pp-side-p b{display:block;font-size:14px;line-height:1.25}
  .pp-side-p small{display:block;font-size:11.5px;color:rgba(255,255,255,.6)}
  .pp-side-new{flex:0 0 auto;margin-top:16px;font-size:14.5px}
  .pp-snav{display:flex;flex-direction:column;gap:4px;margin-top:18px}
  .pp .pp-snav a{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:12px;color:rgba(255,255,255,.74);font-size:14px;font-weight:500;white-space:nowrap;transition:background .15s,transform .08s}
  .pp .pp-snav a:hover{background:rgba(255,255,255,.07);color:#fff}
  .pp .pp-snav a.on{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));color:#fff;font-weight:600;box-shadow:0 3px 0 rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.2)}
  .pp-snav a:active{transform:translateY(2px)}
  .pp-snav .gi{width:19px;height:19px}
  .pp-n,.pp-new{margin-left:auto;font-style:normal;border-radius:99px}
  .pp-n{padding:1px 8px;background:var(--orange);color:var(--navy);font-size:11px;font-weight:700}
  .pp-new{padding:1px 6px;border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.7);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .pp .pp-help{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-top:auto;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);font-size:12px}
  .pp-help .gi{width:22px;height:22px;color:var(--orange)}
  .pp-help b{display:block;font-size:13px;color:#fff}
  .pp-tabs{display:none}
  .pp-top,.pp-full .pp-top{position:sticky;top:0;z-index:30;display:flex;flex-wrap:nowrap;height:84px;padding:0 30px;overflow:visible;background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
  .pp-top::after,.pp-top-logo,.pp-hero{display:none}
  .pp-top-t{display:block;min-width:0}
  .pp-top-t h1{overflow:hidden;font-size:23px;letter-spacing:-.01em;color:var(--navy);text-overflow:ellipsis;white-space:nowrap}
  .pp-top-t p{margin-top:1px;overflow:hidden;font-size:13px;color:var(--mute);text-overflow:ellipsis;white-space:nowrap}
  .pp-top-r{margin-left:auto;gap:12px}
  .pp-top .pp-loc{display:inline-flex;align-items:center;gap:7px;max-width:240px;height:42px;padding:0 14px;border:1px solid var(--edge);border-radius:12px;background:var(--wg);box-shadow:0 2px 0 #DDE1EC;color:var(--navy);font-size:13px;font-weight:600}
  .pp-loc .gi{width:16px;height:16px}
  .pp-ib{width:42px;height:42px;border:1px solid var(--edge);border-radius:12px;background:var(--wg);box-shadow:0 2px 0 #DDE1EC;color:var(--navy)}
  .pp-dot{box-shadow:0 0 0 2px #fff}
  .pp-me{padding-left:4px}
  .pp-me-t{display:block;white-space:nowrap}
  .pp-me-t b{display:block;font-size:13.5px;line-height:1.2;color:var(--ink)}
  .pp-me-t small{display:block;font-size:11.5px;color:var(--mute)}
  .pp-view,.pp-full .pp-view{padding:22px 30px 40px}
  .pp-toasts,.pp-full .pp-toasts{top:auto;right:28px;bottom:28px;left:auto;align-items:flex-end}
  .pp-modal{align-items:center;padding:24px}
  .pp-sheet{max-width:480px;max-height:84vh;padding-bottom:0;border-radius:22px;animation-name:pp-pop}
  .pp-sheet.wide{max-width:760px}
  .pp-up{overflow:hidden;border:1.5px solid var(--edge);border-radius:20px;background:#fff;box-shadow:var(--c3d)}
  .pp-up-h{align-items:center;margin:0;padding:13px 18px;border-bottom:1px solid var(--line)}
  .pp-up-h h3{gap:8px}
  .pp-up-h h3>.gi{display:inline-block}
  .pp .pp-trip{grid-template-columns:100px minmax(0,.9fr) minmax(0,1.6fr) 124px 88px;grid-template-areas:"d n r s p";column-gap:12px;margin:0;padding:10px 18px;border-radius:0;border-bottom:1px solid var(--line);box-shadow:none;transition:background .15s}
  .pp .pp-trip:last-child{border-bottom:0}
  .pp-trip:hover{background:#F8F9FD}
  .pp-trip:active{transform:none}
  .pp .pp-trip-h{padding:9px 18px;background:#FAFBFE;color:var(--mute);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
  .pp .pp-trip-h span:not(.pp-t-top){display:block;padding:0;background:none;color:inherit;font:inherit}
  .pp-t-top{display:contents}
  .pp-t-name{grid-area:n}
  .pp-t-top>.pp-chip{grid-area:s;justify-self:start}
  .pp-when,.pp-t-meta{display:none}
  .pp-t-day{display:block;font-size:13px;font-weight:600;line-height:1.3}
  .pp-t-day small,.pp-t-name small,.pp-t-route small{display:block;font-size:11.5px;font-weight:500;color:var(--mute)}
  .pp-t-name{font-size:13px}
  .pp-t-route>span{font-size:13px}
  .pp-t-px small{font-size:13px;font-weight:700}
  .pp .pp-t-px small.pp-net{font-size:11px}
  .pp .pp-chip-wait{white-space:normal;line-height:1.3;border-radius:9px;padding:3px 9px 3px 7px} /* two lines in a narrow column */
  .pp-trips>.pp-empty{border-radius:0;box-shadow:none}
  .pp-skel-trip{height:52px;margin:10px 18px}
  .pp-home-g>div{display:flex;flex-direction:column;gap:18px;min-width:0}
  .pp-home-g>div+div:not(:empty){margin-top:18px}
}
/* GEC-156: the trip on its way beside the upcoming trips from 1360 (1366 as before): at 1280 names and routes broke */
@media (min-width:1360px){
  .pp-kpis{grid-template-columns:repeat(var(--k,4),minmax(0,1fr))}
  .pp-home-g{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
  .pp-home-g.one{grid-template-columns:minmax(0,1fr)}
  .pp-home-g>div+div:not(:empty){margin-top:0}
}
/* GEC-156: under the list on a laptop, «On the way now» lays the car on the left and the trip beside it (no empty white) */
@media (min-width:1000px) and (max-width:1359.98px){
  .pp-live .pp-pb{display:flow-root}
  .pp-live .pp-veh,.pp-live .pp-live-v{float:left;clear:left;width:300px;margin-right:24px}
  .pp .pp-live .pp-btn{width:auto}
}

/* ---------- Home: the dashboard (GEC-70) ---------- */
.pp-per{display:flex;gap:6px;margin-top:12px}
.pp .pp-per button{flex:1;min-width:0;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);font:inherit;font-size:12px;font-weight:600;padding:8px 2px;border-radius:11px;white-space:nowrap}
@media (max-width:379.98px){.pp .pp-per-hero button{font-size:11px;padding:8px 1px}}
.pp .pp-per button.on{background:var(--og);color:var(--navy);border-color:transparent;box-shadow:var(--o3d)}
.pp-dash-top{display:flex;justify-content:flex-end;margin:-6px 0 14px}
.pp-dash-top .pp-per{margin:0;width:auto;background:#fff;border-radius:13px;padding:4px;box-shadow:var(--sh)}
.pp .pp-dash-top .pp-per button{flex:0 0 auto;padding:7px 14px;background:transparent;border:0;color:var(--ink2);box-shadow:none}
.pp .pp-dash-top .pp-per button.on{background:var(--navy);color:#fff}
.pp-dash{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0 0 14px}
.pp-dc-wide{min-width:0;overflow:hidden}
.pp .pp-dc{padding:14px}
.pp-dh{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between;gap:8px;text-wrap:balance} /* GEC-156: a heading on two lines never leaves one word alone (1024: «… WERE / PAID») */
.pp-dh span{letter-spacing:0;text-transform:none;font-weight:500;color:var(--blue-t);white-space:nowrap}
.pp-rows>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.pp-rows>div:first-child{border-top:0;padding-top:0}
.pp-rows span{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-rows b{font-size:13.5px;color:var(--navy)}
.pp-rows i{grid-column:1/3;display:block;height:6px;border-radius:99px;background:var(--bg);position:relative;overflow:hidden}
.pp-rows i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:99px;background:linear-gradient(90deg,#2B3BD0,var(--navy))}
.pp-stack{display:flex;height:14px;border-radius:99px;overflow:hidden;margin:4px 0 10px;background:var(--bg)}
.pp-stack i{display:block;height:100%}
.pp-leg{display:grid;grid-template-columns:minmax(max-content,1fr) 1fr;gap:4px 12px;font-size:12px;color:var(--ink2)} /* GEC-156: the first column never breaks (1280: «Charge my / guest 20»), the second gives way */
.pp-leg span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle;background:var(--d)}
.pp-leg b{color:var(--navy);margin-left:4px}
.pp-money{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pp-money div{background:var(--bg);border-radius:12px;padding:9px 10px}
.pp-money small{display:block;font-size:11px;color:var(--mute)}
.pp-money b{display:block;font-size:15px;color:var(--navy);margin-top:1px}
.pp-money .o b{color:var(--orange-t)}
.pp-chart-w{height:170px;padding-top:0;gap:6px}
.pp-chart-w>div{gap:4px}
.pp-chart-w em{display:none;font-style:normal;font-size:10px;color:var(--orange-t);font-weight:600;line-height:1;min-height:10px}
.pp-chart-w i{max-height:calc(100% - 48px)}
.pp-chart-w small{font-size:10px}
.pp-dempty{margin:0;font-size:12.5px;color:var(--mute)}
.pp-dnote{margin-top:10px;font-size:11.5px} /* 2.22.2 (GEC-163, M3): what this week's bar counts, when it is more than Home's line */
.pp-s-up{color:#0B7A3E;font-weight:600}
.pp-s-due{color:var(--orange-t);font-weight:600}
.pp-kpi-skel{display:block;height:96px;border-radius:20px}
/* The boxes: the label clears the icon, so a long amount never runs under it; the year box only joins the row on a wide
   screen (below that, the «Money this year» card carries its figures); the amounts shrink with the screen. */
.pp-kpi .pp-l{min-height:38px;display:flex;align-items:center;align-self:start}
.pp :where(.pp-kpis)>.pp-kpi{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start} /* GEC-156: label, figure and line share their row's heights, so a row's figures stay level (Home at 360, Statement at 1024) */
.pp .pp-kpi-year{display:none}
@media (max-width:599.98px){.pp-kpi .pp-v{font-size:24px}}
@media (max-width:399.98px){.pp-kpi .pp-v{font-size:22px}}
@media (max-width:1239.98px){
  .pp-chart-w small{visibility:hidden}
  .pp-chart-w>div:nth-child(3n+1)>small,.pp-chart-w>div.now>small{visibility:visible}
  .pp-chart-w>div.now{flex:2.4}
  .pp-chart-w>div.now>i{width:42%}
}
@media (max-width:899.98px){
  .pp-chart-w{height:150px}
  .pp-chart-w small{font-size:9px}
}
@media (min-width:900px){
  .pp-dash{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}
  .pp-dc-wide{grid-column:span 2}
  .pp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-kpi .pp-v{font-size:clamp(20px,1.6vw + 2px,28px)}
  .pp-per-hero{display:none}
}
@media (min-width:1000px){.pp-kpis{grid-template-columns:repeat(var(--k,4),minmax(0,1fr))}}
@media (min-width:900px) and (max-width:1239.98px){
  .pp-dc-money{grid-column:1/-1}
  .pp-dc-money .pp-money{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pp-leg{grid-template-columns:minmax(0,1fr)} /* GEC-156: the payment legend one under another in the narrow card (1024: «Charge my / guest») */
}
@media (min-width:1240px){
  .pp-kpis.pp-kpis-y{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pp .pp-kpi-year{display:grid}
  .pp-dc-money{display:none}
  .pp-chart-w em{display:block}
}

/* ---------- GEC-140: Home as the approved preview GEC-133-partner-home ---------- */
/* 1 · On a phone the trip on its way now and the upcoming ones right under «New booking»; the figures and cards after them. */
@media (max-width:899.98px){
  .pp[data-view="home"] .pp-view{display:flex;flex-direction:column}
  .pp[data-view="home"] .pp-view>.pp-kpis,.pp[data-view="home"] .pp-view>.pp-dash{order:1}
  .pp[data-view="home"] .pp-view>.pp-kpis{margin-top:8px}
}
/* 2.21.0 (GEC-154, 5): the partner's price requests on Home (asked / answered); nothing when there are none. A computer: before the
   figures; a phone: under «New booking» (design review N9), the same 14 px above it as the card on the way below */
#pp-asks:empty{display:none}
.pp .pp-asks{margin-bottom:14px}
@media (max-width:899.98px){.pp .pp-cta+#pp-asks .pp-asks{margin:14px 0 0}}
.pp .pp-asks .pp-row{align-items:flex-start}
.pp .pp-asks .pp-row>div{font-weight:500}
.pp .pp-asks .pp-row>.gi{margin-top:2px}
.pp .pp-asks .pp-chip{flex:0 0 auto;margin-top:1px;white-space:normal;text-align:right}
.pp .pp-livep{margin-top:14px;border:1.5px solid #F6DFA6}
.pp-livep-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pp-livep-h .pp-chip{font-size:11.5px;padding:3px 10px}
.pp .pp-livep .pp-drv{margin:10px 0 8px;padding-top:0;border-top:0}
.pp-livep .pp-live-r{font-size:13px}
/* 2 · «Get started»: three steps instead of zeros; on a computer the three side by side, the next one in navy. */
.pp .pp-gs{padding:16px 16px 6px}
.pp-gs-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pp-gs-h h3{margin-top:3px;font-size:18px;line-height:1.25;color:var(--navy)}
.pp-gs-n{flex:0 0 auto;padding:3px 9px;border-radius:99px;background:var(--blue-s);color:var(--navy);font-size:11.5px;font-weight:700;white-space:nowrap}
.pp-gs-prog{display:flex;gap:5px;margin:12px 0 4px}
.pp-gs-prog i{flex:1;height:5px;border-radius:5px;background:#E3E7F1}
.pp-gs-prog i.on{background:linear-gradient(90deg,#FCB116,#F59A2A)}
.pp-gs-st{display:flex;gap:12px;padding:12px 0}
.pp-gs-st+.pp-gs-st{border-top:1px solid var(--line)}
.pp-gs-stn{flex:0 0 auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#EEF1F8;color:var(--navy);font-size:15px;font-weight:700}
.pp-gs-st.now .pp-gs-stn{background:var(--ng);color:#fff;box-shadow:0 3px 0 #01034A}
.pp-gs-st.done .pp-gs-stn{background:var(--green);color:#fff;box-shadow:0 3px 0 #13703F}
.pp .pp-gs-st.done .pp-gs-stn .gi{width:18px;height:18px;stroke-width:2.6}
.pp-gs-st>div{flex:1;min-width:0}
.pp-gs-st b{display:block;font-size:14.5px;line-height:1.3;color:var(--navy)}
.pp-gs-st.done b{color:#16794A}
.pp-gs-st p{margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.pp .pp-gs-st .pp-btn{margin-top:9px}
.pp-gs-f{margin:10px 2px 0;font-size:12.5px;line-height:1.5;color:var(--mute);text-align:center}
@media (min-width:900px){
  .pp .pp-gs{padding:20px 22px 18px;border:1.5px solid var(--edge);box-shadow:var(--c3d)}
  .pp-gs-h h3{font-size:21px}
  .pp-gs-sts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
  .pp-gs-sts .pp-gs-st{flex-direction:column;gap:10px;padding:16px;border:1.5px solid var(--edge);border-radius:18px;background:#FAFBFE}
  .pp-gs-sts .pp-gs-st.now{border-color:var(--navy);background:linear-gradient(180deg,#fff,#F3F6FF);box-shadow:0 3px 0 var(--navy)}
  .pp-gs-sts .pp-gs-st.done{border-color:#BFE3CD;background:#F4FBF7}
}
/* 4 · The bell: each line with its time, by day; on a computer it opens under the bell. */
.pp .pp-bell{gap:7px}
.pp-bday{margin:4px 4px 0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.pp .pp-bl{align-items:flex-start;min-height:0;padding:11px 12px}
.pp .pp-bl>.gi:first-child{width:34px;height:34px;padding:8px;border-radius:11px;background:#EEF1F8;color:var(--navy)}
.pp .pp-bl.go>.gi:first-child{background:var(--orange-s);color:#8A5A00}
.pp .pp-bl.ok>.gi:first-child{background:var(--green-s);color:var(--green)}
.pp .pp-bl.late>.gi:first-child{background:var(--red-s);color:var(--red)}
.pp-bl>span{padding-top:1px}
.pp-bl small{margin-top:1px;line-height:1.4}
.pp-bl em{flex:0 0 auto;padding-top:2px;font-style:normal;font-size:11.5px;font-weight:600;color:var(--mute);white-space:nowrap}
@media (min-width:900px){
  .pp-modal.pp-pop{display:block;padding:0;background:transparent;animation:none}
  .pp-pop .pp-sheet{position:absolute;width:372px;max-width:calc(100vw - 32px);max-height:calc(100vh - 110px);border:1.5px solid var(--edge);border-radius:20px;box-shadow:0 4px 0 #E1E6F2,0 30px 60px -20px rgba(2,6,111,.45)}
  .pp-pop .pp-sheet::before{content:"";position:absolute;top:-8px;right:var(--ax,24px);width:14px;height:14px;background:#fff;border-left:1.5px solid var(--edge);border-top:1.5px solid var(--edge);transform:rotate(45deg)}
  .pp-pop .pp-sheet-h{padding:14px 16px 8px}
  .pp-pop .pp-x{display:none}
  .pp-pop .pp-sheet-b{padding:2px 12px 12px}
}
/* 5 · A trip's commission: pending → approved → paid (PP.comLine). */
.pp-cs{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;line-height:1.35;color:var(--ink2)}
.pp-cs>b{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:99px;font-size:10.5px;font-weight:700;white-space:nowrap}
.pp .pp-cs>b .gi{width:11px;height:11px;stroke-width:2.6}
.pp-cs>span{min-width:0}
.pp-cs.pend>b,.pp-csl .pend{background:#ECEEF5;color:var(--ink2)}
.pp-cs.appr>b,.pp-csl .appr{background:#E3F0FF;color:#0B5CC2}
.pp-cs.paid>b,.pp-csl .paid{background:var(--green-s);color:#16794A}
.pp-cs.wait>b{background:var(--orange-s);color:#8A5A00}
.pp-csl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 2px 12px;font-size:11.5px;color:var(--ink2)}
.pp-csl b{padding:1px 8px;border-radius:99px;font-size:10.5px;font-weight:700;white-space:nowrap}
.pp .pp-csl .gi{width:13px;height:13px;color:var(--mute)}
@media (max-width:379.98px){.pp-csl{font-size:10.5px;gap:4px}} /* 25 Oct (L3): at 360 the legend wrapped with its chevron dangling */
/* 2.21.0 (GEC-154, 14): Home: the office holds new bookings (one calm line, no amount) */
.pp .pp-hold{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;border-color:#F6DFA6;background:var(--orange-s)} /* design review S2: the portal's one amber (Book's line, the guest link's) */
.pp .pp-hold svg{flex:none;width:20px;height:20px;margin-top:1px;color:#8A5A00}
.pp .pp-hold p{margin:0;font-weight:600;color:#8A5A00;line-height:1.45}
.pp-nw{white-space:nowrap} /* design review S1: the office phone in the hold line (Home, Book, the guest link) never breaks */

/* 2.22.0 (Andres, 28 Oct 2026: «un botoncito así arriba… para que siempre tengan acceso»): «How it works», the partner video (GEC.video in
   gec-core.js plays it), from the top bar on every page; a card on a new partner's Home and beside the agreement before accepting.
   Under 400 px the top bar's button says «Video», so the logo, the bell and the person stay on one line. */
.pp-vid{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px 0 10px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(255,255,255,.1);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;transition:transform .08s}
.pp .pp-vid .gi{width:16px;height:16px;color:var(--orange)}
.pp-vid:active{transform:translateY(2px)}
.pp-vid-l{display:none}
@media (min-width:400px){.pp-vid-s{display:none}.pp-vid-l{display:inline}}
.pp .pp-vcard{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pp-vc-play{flex:none;width:52px;height:52px;padding:0;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ng);color:var(--orange);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:transform .08s} /* 2.22.1: no lip under the circle (driver.css .dv-vc-play says why) */
.pp-vc-play:active{transform:translateY(2px)}
.pp .pp-vc-play .gi{width:22px;height:22px}
.pp-vc-t{flex:1 1 auto;min-width:0}
.pp .pp-vc-t h3{margin-top:2px;font-size:17px;line-height:1.25;color:var(--navy)}
.pp .pp-vc-t p:last-child{margin-top:2px;font-size:13px;line-height:1.4;color:var(--mute)}
.pp .pp-vc-btn{flex:0 0 auto}
.pp .pc-side .pp-vcard{margin-bottom:12px}
.pp .pc-side .pp-vc-btn{display:none!important}
@media (min-width:900px){
  .pp-vid{height:42px;padding:0 14px 0 12px;border:1px solid var(--edge);border-radius:12px;background:var(--wg);box-shadow:0 2px 0 #DDE1EC;color:var(--navy);font-size:13px}
  .pp .pp-vid .gi{color:var(--orange2)}
  .pp .pp-vcard{padding:18px 22px;border:1.5px solid var(--edge);box-shadow:var(--c3d)}
  .pp .pc-side .pp-vcard{padding:14px 16px;margin-bottom:14px}
}
/* 2.22.2 (GEC-163, M7): a touch area at least 44 × 44 px for the small controls (Updates, the person, the period pills, «See all»,
   the statement's arrows), the drawing unchanged */
.pp .pp-ib,.pp .pp-me,.pp .pp-per button,.pp .pp-up-h .pp-link,.pp .pm-arr{position:relative}
.pp .pp-up-h .pp-link{z-index:1} /* «See all» only (review 2: an inline link's area reached «Try again» on the error cards): over the first trip card's top edge */
.pp .pp-ib::after,.pp .pp-me::after,.pp .pp-per button::after,.pp .pp-up-h .pp-link::after,.pp .pm-arr::after{content:'';position:absolute;left:50%;top:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}