/* The desk screens (partner console, partner.html; fleet Upload For on Permits, trips.html?for=). Shell, tokens and type are the console's own (styles.css, admin/admin.css): true-black flat, elevation by a lightness step, colour on data only. The one hue (--accent, the app's route blue) marks the route: the chain of states on every trip and the line on the map. Buttons and nav stay neutral; the one primary per screen is the console's inverted pill (.btn-primary). Grid: the canvas is .adm (max 1200, 16px side padding). The trip view is 6 columns, one 16px gutter both ways: map 4 + side 2; 6 x c + 5 x 16 = canvas width, so every block lands on the same two edges. */ [hidden]{display:none!important} :root{--pt-gap:16px} /* Workspace: the partner, named at the top of the console's own sidebar. */ .pt-ws{display:flex;align-items:center;gap:10px;margin:6px 8px 10px;padding:10px;border-radius:10px;background:var(--card);min-width:0} .pt-ws-mark{flex:none;width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 18%,var(--card));color:var(--text);font-weight:500;font-size:13px;letter-spacing:.02em} .pt-ws-t{display:flex;flex-direction:column;min-width:0;line-height:1.25} .pt-ws-t b{font-weight:500;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pt-ws-t span{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .btn-invert[disabled]{opacity:.4;cursor:default} .pt-head .btn-invert{min-height:36px} html.nav-collapsed .pt-ws-t{display:none} html.nav-collapsed .pt-ws{justify-content:center;margin:6px 0 10px;padding:0;background:none} /* On a phone the sidebar is the bottom tab bar: the partner is named at the top of the page instead. */ .pt-ws-m{display:none;align-items:center;gap:8px;font-size:13px;color:var(--dim)} .pt-ws-m .pt-ws-mark{width:24px;height:24px;font-size:11px;border-radius:6px} .pt-ws-m b{color:var(--text);font-weight:500} @media (max-width:560px){ .nav .pt-ws{display:none} .pt-ws-m{display:flex} } .pt-lh[style*="none"] + .pt-row{border-top:0} /* Title row. */ .pt-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 16px} .pt-head .t{display:flex;flex-direction:column;gap:4px;flex:1 1 320px;min-width:0} .pt-head h1{margin:0;font-size:24px;line-height:1.25;overflow-wrap:anywhere} .pt-head .sub{margin:0;font-size:14px;color:var(--dim);line-height:1.5} .pt-head .sub b{color:var(--text);font-weight:500} .pt-head .acts{display:flex;flex-wrap:wrap;gap:8px} .pt-head .btn{min-height:36px;padding:0 16px} .pt-crumb{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--dim);text-decoration:none;min-height:28px} .pt-crumb:hover{color:var(--text)} .pt-crumb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* The chain of states: a trip read as the road it is. The one hue. */ .pt-chain{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 0;font-size:12.5px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums} .pt-chain b{font-weight:500;padding:1px 6px;border-radius:5px;background:color-mix(in srgb,var(--accent) 16%,transparent)} .pt-chain i{display:inline-block;width:12px;height:2px;background:var(--accent);opacity:.7} .pt-chain.big{font-size:14px} .pt-chain.big b{padding:3px 9px;border-radius:6px} .pt-chain.big i{width:20px} .pt-chain .none{color:var(--dim);font-weight:400} /* Count cards that filter (one row of peers; the selected one takes the accent edge). */ /* Lists: rows on a card, rules between, a header in grey sentence case. One grid per list. */ .pt-list{border-radius:var(--r);background:var(--card);padding:0 16px} .pt-row,.pt-lh{display:grid;align-items:center;gap:12px;min-height:60px;padding:8px 0} .pt-lh{min-height:38px;font-size:12px;color:var(--dim);padding:0} .pt-row{border-top:1px solid var(--line-soft);color:var(--text);text-decoration:none} .pt-lh + .pt-row{border-top-color:var(--line)} a.pt-row:hover .pt-id b,a.pt-row:focus-visible .pt-id b{text-decoration:underline;text-underline-offset:3px} a.pt-row:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px} .permits .pt-row,.permits .pt-lh{grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) 84px 104px 170px 76px} .pt-id{display:flex;flex-direction:column;gap:5px;min-width:0} .pt-id b{font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pt-c{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pt-c.dim,.pt-dim{color:var(--dim)} .pt-c small{display:block;font-size:12px;color:var(--dim);margin-top:2px} .pt-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .pt-row .adm-pill{justify-self:start;flex:none} .pt-go{width:14px;height:14px;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pt-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px 0;color:var(--dim);font-size:14px;margin:0} .pt-empty b{color:var(--text);font-weight:500} /* Toolbar. */ /* Date-and-time range: our own control, never the browser's picker. */ .pt-when{position:relative} .pt-pop{position:absolute;z-index:40;top:calc(100% + 6px);right:0;width:336px;display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.4)} .pt-pop.up{top:auto;bottom:calc(100% + 6px)} .pt-cal-head{display:flex;align-items:center;justify-content:space-between} .pt-cal-head b{font-weight:500;font-size:14.5px} .pt-nav{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:none;color:var(--dim);cursor:pointer} .pt-nav:hover{background:var(--raised-2);color:var(--text)} .pt-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pt-cal{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px} .pt-cal .dow{text-align:center;font-size:12px;color:var(--dim);padding:4px 0} .pt-cal .day{position:relative;height:40px;border:0;background:none;color:var(--text);font:inherit;font-size:14px;font-variant-numeric:tabular-nums;cursor:pointer;isolation:isolate} .pt-cal .day::before{content:"";position:absolute;inset:3px 0;z-index:-1} .pt-cal .day::after{content:"";position:absolute;inset:3px;border-radius:999px;z-index:-1} .pt-cal .day:hover::after{background:var(--raised-2)} .pt-cal .day.out{color:var(--dim)} .pt-cal .day:disabled{color:color-mix(in srgb,var(--dim) 45%,transparent);cursor:default} .pt-cal .day:disabled:hover::after{background:none} .pt-cal .day.today{font-weight:500;color:var(--accent)} .pt-cal .day.in::before{background:color-mix(in srgb,var(--accent) 16%,transparent)} .pt-cal .day.s::before{left:50%} .pt-cal .day.e::before{right:50%} .pt-cal .day.s.e::before{display:none} .pt-cal .day.s::after,.pt-cal .day.e::after{background:var(--accent)} .pt-cal .day.s,.pt-cal .day.e{color:var(--bg);font-weight:500} .pt-cal .day:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:999px} .pt-times{display:flex;gap:8px} .pt-times label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim)} .pt-times input{width:100%;min-width:0;box-sizing:border-box;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--sunk);color:var(--text);font:inherit;font-size:14px;font-variant-numeric:tabular-nums} .pt-times input:focus{outline:0;border-color:var(--accent)} .pt-pop-foot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line-soft);padding-top:12px} .pt-pop-foot .grow{flex:1} .pt-pop-foot .btn{min-height:36px} .pt-sum{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums} /* The trip: the route leads, the driver and the trip's facts beside it, the permits under both. */ .pt-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--pt-gap)} .pt-span4{grid-column:span 4}.pt-span2{grid-column:span 2}.pt-span6{grid-column:1/-1} .pt-side{display:flex;flex-direction:column;gap:var(--pt-gap);min-width:0} .pt-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r);background:var(--card);min-width:0} .pt-card h2{margin:0;font-size:15px;font-weight:500;line-height:1.3;color:var(--text);font-family:inherit} .pt-card-h{display:flex;align-items:center;justify-content:space-between;gap:8px} .pt-mapcell{display:flex;min-width:0} .pt-mapcell .pt-map{flex:1;height:auto;min-height:440px} .pt-map{position:relative;height:440px;border-radius:var(--r);overflow:hidden;background:var(--sunk)} .pt-map .rv-map{position:absolute;inset:0;height:auto;min-height:0;border-radius:0} .pt-map .st{position:absolute;left:10px;bottom:10px;font-size:12.5px;background:var(--card);color:var(--text);padding:4px 10px;border-radius:7px;font-variant-numeric:tabular-nums} .pt-legs{position:absolute;left:10px;top:10px;right:56px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none} .pt-legs button{pointer-events:auto;min-height:32px;padding:0 10px;border:0;border-radius:8px;background:var(--card);color:var(--dim);font:inherit;font-size:13px;cursor:pointer} .pt-legs button[aria-pressed="true"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)} .pt-kv{display:flex;flex-direction:column} .pt-kv div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:34px;padding:6px 0;border-top:1px solid var(--line-soft);font-size:14px} .pt-kv div:first-child{border-top:0} .pt-kv span{color:var(--dim);flex:none} .pt-kv b{font-weight:400;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .pt-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .pt-tl li{display:grid;grid-template-columns:12px 1fr;gap:10px} .pt-tl li::before{content:"";width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--dim)} .pt-tl li.on::before{background:var(--accent)} .pt-tl li div{display:flex;flex-direction:column;padding-bottom:10px;font-size:14px} .pt-tl li small{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums} /* New trip. */ .pt-form{display:flex;flex-direction:column;gap:16px;max-width:760px} .pt-field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500;color:var(--text)} .pt-field .hint{font-weight:400;font-size:13px;color:var(--dim)} .pt-field input{min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--sunk);color:var(--text);font:inherit;font-size:15px;font-weight:400} .pt-field input:focus{outline:0;border-color:var(--accent)} .pt-field input[readonly]{color:var(--dim)} .pt-pick{position:relative;width:100%} .pt-pick input{display:block;width:100%;box-sizing:border-box} .pt-pick ul{position:static;margin:6px 0 0;padding:4px;list-style:none;max-height:260px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:10px} .pt-pick li{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:40px;padding:0 10px;border-radius:7px;font-size:14px;font-weight:400;cursor:pointer} .pt-pick li small{color:var(--dim);font-size:12px;white-space:nowrap} .pt-pick li.active{background:var(--raised-2)} .pt-acts{display:flex;flex-direction:column-reverse;gap:8px} .pt-acts .btn{min-height:40px;padding:0 18px} .pt-msg{margin:0;color:var(--red);font-size:14px} .pt-msg.ok{color:var(--text)} /* Delivery: where the trip stands against the goal, the driver's RouteAll. */ .pt-tagrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px} .pt-del{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0} .pt-del small{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap} .pt-rowact{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;font-size:13px;color:var(--text)} .pt-rowact svg{width:14px;height:14px;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pt-deliver .adm-copy .txt{font-size:15px;font-weight:500} .pt-deliver > .adm-pill{align-self:flex-start} .pt-prog{display:flex;flex-direction:column;gap:6px} .pt-prog-h{display:flex;justify-content:space-between;font-size:13px;color:var(--dim)} .pt-prog-h b{font-weight:500;color:var(--text);font-variant-numeric:tabular-nums} .pt-bar{height:6px;border-radius:999px;background:var(--raised-2);overflow:hidden} .pt-bar i{display:block;height:100%;border-radius:999px;background:var(--accent)} .pt-send{width:100%;min-height:40px} /* Full width on phones only; label-sized on wider screens (owner, 2026-11-09: no long bars), as the driver screens. */ @media (min-width:561px){.pt-send{width:auto;align-self:flex-start;padding:0 20px}} .pt-link{align-self:flex-start;min-height:32px;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .pt-link:disabled{opacity:.5;cursor:default} .pt-lookup{display:flex;gap:8px;font-size:13.5px;color:var(--dim);line-height:1.45;font-weight:400} .pt-lookup:empty{display:none} .pt-lookup b{color:var(--text);font-weight:500} .pt-lookup::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--dim)} .pt-lookup.ok::before{background:var(--green)} .pt-lookup.new::before{background:var(--amber)} .pt-lookup.bad::before{background:var(--red)} .pt-flash{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);font-size:14px;color:var(--dim)} .pt-flash b{color:var(--text);font-weight:500;font-size:15px} .pt-flash.ok{border-color:color-mix(in srgb,var(--green) 45%,transparent)} /* One permit: the PDF beside its route. */ .pt-confirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:14px 16px;border-radius:var(--r);background:var(--card)} .pt-confirm > div:first-child{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--dim);max-width:640px} .pt-confirm b{color:var(--text);font-weight:500;font-size:15px} .pt-confirm-acts{display:flex;align-items:center;gap:16px} .pt-confirm .btn-invert{min-height:40px;padding:0 20px} .pt-pdf{flex:1;min-height:640px;border-radius:10px;overflow:hidden;background:var(--sunk);display:flex} .pt-pdf iframe{flex:1;width:100%;border:0;background:#fff} .pt-pdf .pt-empty,.pt-pdf .adm-loading-line{padding:20px} @media (max-width:1100px){ .pt-pdf{min-height:520px} } @media (min-width:600px){ .pt-acts{flex-direction:row;justify-content:flex-end} } @media (max-width:1100px){ .permits .pt-row,.permits .pt-lh{grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) 84px 160px 70px} .permits .pt-row > .pt-c:nth-child(4),.permits .pt-lh > :nth-child(4){display:none} .pt-span4,.pt-span2{grid-column:1/-1} .pt-map,.pt-mapcell .pt-map{min-height:360px} } @media (max-width:760px){ .pt-lh{display:none} .pt-list > .pt-row:nth-child(2),.permits > .pt-row:nth-child(2){border-top:0} .pt-row > *{grid-column:1} .pt-row > .adm-pill,.pt-row > .pt-del{grid-column:2;grid-row:1;justify-self:end;align-items:flex-end} .pt-row > .pt-rowact{display:none} .pt-row > .pt-go,.pt-row > .c-when,.pt-row > .c-valid{display:none} .pt-row .pt-num{text-align:left} .pt-map,.pt-mapcell .pt-map{min-height:300px} .pt-head .acts{width:100%} .pt-head .acts .btn{flex:1} } @media (max-width:560px){ .pt-when{flex:1 1 100%} .pt-when.open::before{content:"";position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.5)} .pt-pop,.pt-pop.up{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto} .pt-cal .day{height:44px} } /* Add Permit on Permits, for a fleet owner or admin (fleetUpload.js): one guided flow, a step at a time. The card holds the step; its footer holds the buttons, sized to their labels, the primary last. Colour only on the selection, the progress and the one primary. */ .dk:focus{outline:0} .dk{display:flex;flex-direction:column;gap:20px;width:100%;max-width:720px;padding:20px 16px;border-radius:var(--r);background:var(--card);box-sizing:border-box} .dk h2{margin:0;font-size:20px;font-weight:600;line-height:1.25} .dk h3{margin:0;font-size:16px;font-weight:600} .dk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .dk-head p{margin:4px 0 0;color:var(--dim);font-size:14px} .dk-x{flex:none;width:40px;height:40px;margin:-8px -8px 0 0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:transparent;color:var(--dim);cursor:pointer} .dk-x:hover{background:var(--raised-2);color:var(--text)} .dk-x:focus-visible{outline:2px solid var(--focus);outline-offset:1px} .dk-ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .dk-steps{display:flex;gap:6px;margin:0;padding:0;list-style:none} .dk-steps li{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--dim)} .dk-steps li::before{content:"";display:block;height:3px;border-radius:3px;background:var(--line)} .dk-steps li.done::before,.dk-steps li.on::before{background:var(--accent)} .dk-steps li.on{color:var(--text);font-weight:600} .dk-body{display:flex;flex-direction:column;gap:16px;min-width:0} .dk-dim{color:var(--dim)} .dk-loading{display:flex;align-items:center;gap:10px;margin:0;min-height:44px;color:var(--dim);font-size:14px} .dk-loading .spinner,.dk-state .spinner,.dk-file-s .spinner{width:16px;height:16px;color:var(--accent)} .dk-msg{display:flex;align-items:flex-start;gap:8px;margin:0;color:var(--red);font-size:14px;line-height:1.45} .dk-msg .dk-ic{width:16px;height:16px;margin-top:2px} /* Who and Permits scale (owner, 2026-11-10: "10 drivers means a giant scroll"; "Nov / 9" broke across lines). Both are radio lists of compact rows in one framed list, split by faint rules: a dot on the left, the identity, its line under it. Me (or New trip) sits in its own list on top, the default; the drivers or open trips below scroll inside their own frame past about six rows. Arrows move the choice (native radios), Space picks. No text wraps mid-date: each row's line is one line, cut with an ellipsis on a phone. */ .dk-search{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:10px;background:var(--sunk);border:1px solid var(--line);color:var(--dim)} .dk-search:focus-within{border-color:var(--accent)} .dk-search input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:15px;outline:0} .dk-people{display:flex;flex-direction:column;gap:10px} .dk-group{margin:6px 0 -2px;font-size:13px;color:var(--dim)} .dk-list,.dk-opts{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--nest)} .dk-list.scroll,.dk-opts.scroll{max-height:336px;overflow-y:auto;overscroll-behavior:contain} .dk-list > *,.dk-opts > *{flex:none} /* a scrolling frame scrolls; its rows never squeeze */ .dk-person,.dk-opt{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px 8px 40px;box-sizing:border-box;cursor:pointer;color:inherit;text-decoration:none} .dk-person + .dk-person,.dk-opt + .dk-opt{border-top:1px solid var(--line-soft)} .dk-person::before,.dk-opt::before{content:"";position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:1.5px solid var(--dim);box-sizing:border-box} .dk-person:hover,.dk-opt:hover{background:var(--raised-2)} .dk-person.on,.dk-opt.on{background:color-mix(in srgb,var(--accent) 10%,var(--nest))} .dk-person.on::before,.dk-opt.on::before{border:5px solid var(--accent)} .dk-opt.off{cursor:default;opacity:.5} .dk-opt.off:hover{background:none} .dk-person input,.dk-opt input{position:absolute;opacity:0;pointer-events:none} .dk-person:has(input:focus-visible),.dk-opt:has(input:focus-visible),a.dk-opt:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} a.dk-opt::before{display:none} /* A link row (partner: Add to a trip opens its own add flow) keeps the radio rows' text edge, without a dot. */ a.dk-opt:hover .dk-opt-t{text-decoration:underline;text-underline-offset:3px} .dk-av{flex:none;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 20%,var(--card));color:var(--text);font-size:12px;font-weight:600;letter-spacing:.02em} .dk-av.me{background:var(--raised-2)} .dk-person-t,.dk-opt-b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .dk-person-t b{font-size:14.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dk-person-t small,.dk-opt-s{font-size:13px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums} .dk-person-t small .live{color:var(--green)} .dk-person-t small .nw,.dk-opt-s .nw{white-space:nowrap} @media (max-width:599px){ .dk-person-t small,.dk-opt-s{white-space:normal} } .dk-tick{display:none} .dk-none{margin:4px 0;font-size:14px;color:var(--dim)} .dk-list .dk-none,.dk-opts .dk-none{margin:0;padding:14px} .dk-none b{color:var(--text);font-weight:600} .dk-none a{color:var(--accent)} /* Permits: the trip, the PDFs. */ .dk-field{display:flex;flex-direction:column;gap:8px;min-width:0} .dk-label{font-size:14px;font-weight:600;color:var(--text)} .dk-sub{margin:6px 0 -2px;font-size:13px;color:var(--dim)} .dk-opt > .dk-opt-s{margin-left:auto;text-align:right} /* From 600px a trip is one line: its states on the left, status · permits · date on the right. */ @media (min-width:600px){ .dk-opt-b{flex-direction:row;align-items:center;justify-content:space-between;gap:12px} .dk-opt-b .dk-opt-s{flex:0 1 auto;text-align:right} } .dk-opt-t{font-size:14.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap} .dk-chain{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:3px 0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;vertical-align:middle} .dk-chain b{font-weight:600;padding:1px 7px;border-radius:6px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text)} .dk-chain i{display:inline-block;width:12px;height:2px;background:var(--accent);opacity:.7} .dk-chain > span{font-weight:400;color:var(--dim)} .dk-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:148px;padding:20px 16px;border:1.5px dashed var(--line);border-radius:12px;background:var(--sunk);text-align:center;cursor:pointer;transition:border-color .15s,background .15s} .dk-drop:hover,.dk-drop.over,.dk-drop:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--sunk));outline:0} .dk-drop.off{cursor:default;opacity:.6} .dk-drop-i{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--raised-2);color:var(--text)} .dk-drop-t{font-size:15px;color:var(--dim)} .dk-drop-t b{color:var(--text);font-weight:600} .dk-drop-t u{color:var(--accent);text-underline-offset:3px} .dk-drop-s{font-size:13px;color:var(--dim)} .dk-files{display:flex;flex-direction:column;gap:6px;margin:4px 0 0;padding:0;list-style:none} .dk-file{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 6px 6px 12px;border-radius:12px;background:var(--nest)} .dk-file-i{flex:none;width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--raised-2);color:var(--dim)} .dk-file-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .dk-file-t b{font-size:14px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dk-file-t small{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums} .dk-file-s{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--dim);white-space:nowrap} .dk-file.read .dk-file-s{color:var(--green)} .dk-file.failed .dk-file-s{color:var(--red)} .dk-file-s .dk-ic{width:15px;height:15px} .dk-file-x{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:none;color:var(--dim);cursor:pointer} .dk-file-x:hover{background:var(--raised-2);color:var(--text)} .dk-file-x .dk-ic{width:16px;height:16px} .dk-wait{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:14px 16px;border-radius:12px;background:var(--nest);border:1px solid color-mix(in srgb,var(--amber) 50%,transparent)} .dk-wait-t{display:flex;flex-direction:column;gap:4px;font-size:14px;min-width:0;flex:1 1 300px;line-height:1.45} .dk-wait-t b{font-size:15px;font-weight:600;color:var(--text)} /* Footer: progress on the left, buttons on the right, sized to their labels. */ .dk-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px} .dk .dk-btn{width:auto;flex:0 0 auto;min-height:40px;padding:0 18px;font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center} .dk-state{display:inline-flex;align-items:center;gap:8px;margin-right:auto;color:var(--dim);font-size:13.5px;line-height:1.4} .dk-why{font-size:13px} /* Done. */ .dk-done{flex-direction:row;align-items:flex-start;gap:14px} .dk-done-i{flex:none;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--raised-2);color:var(--text)} .dk-done-i.ok{background:color-mix(in srgb,var(--green) 22%,var(--card));color:var(--green)} .dk-done-i .dk-ic{width:22px;height:22px;stroke-width:2.4} .dk-done-t{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;font-size:14px;color:var(--dim);line-height:1.5} .dk-done-t > b{font-size:18px;font-weight:600;color:var(--text);line-height:1.3} .dk-facts{display:flex;flex-direction:column;margin:10px 0 0} .dk-facts div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;border-top:1px solid var(--line-soft)} .dk-facts dt{color:var(--dim)} .dk-facts dd{margin:0;color:var(--text);text-align:right} .dk-facts .num{font-variant-numeric:tabular-nums} @media (min-width:600px){ .dk{padding:24px 28px} } @media (max-width:560px){ .dk-state{flex-basis:100%} .dk-done{flex-direction:column} } /* Partner desk: one permit's PDF beside the driver's own review of its route (deskKit.js routeCheck). */ .dk-split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px} .dk-panel{min-width:0;display:flex;flex-direction:column;border-radius:var(--r);background:var(--card);overflow:hidden} .dk-pdf{display:flex;flex-direction:column} .dk-pdf .pt-pdf{min-height:560px;border-radius:0} .dk-route{min-height:520px;display:flex;flex-direction:column;padding:12px} .pt-cstate{font-size:13.5px;color:var(--dim)} .pt-cstate:empty{display:none} @media (min-width:1100px){ .dk-split{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)} .dk-pdf .pt-pdf{min-height:760px} } /* In the half-width column the review stacks: the map on top at a fixed height, the route's steps under it. */ .dk-route .rv-grid.rv-step-2,.dk-route .rv-grid.rv-step-3{flex-direction:column;align-items:stretch} .dk-route .rv-step-2 .rv-panel,.dk-route .rv-step-3 .rv-panel{flex:none;max-height:none;overflow:visible;padding:4px 0 0;background:none} .dk-route .rv-step-2 .rv-map,.dk-route .rv-step-3 .rv-map{flex:none;position:relative;top:0;height:420px;min-height:0} @media (max-width:600px){ .dk-pdf .pt-pdf{min-height:420px} .dk-route{padding:8px;min-height:0} .dk-route .rv-step-2 .rv-map,.dk-route .rv-step-3 .rv-map{height:340px} } /* Admin → Permit Review's layout (owner, 2026-11-10): on a wide screen the route's sections, the map, then the PDF, side by side, so each road of the permit is checked against the map and the page together. The page's own header names the permit, so the review's header (Back, step dots) is not repeated. */ .dk-route .rv-head{display:none} .pt-gaps{display:flex;flex-direction:column;gap:8px} @media (min-width:1100px){ .dk-split{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)} .dk-split > .dk-routepanel{order:-1} .dk-route .rv-grid.rv-step-2,.dk-route .rv-grid.rv-step-3{flex-direction:row-reverse;align-items:stretch;height:760px} .dk-route .rv-step-2 .rv-panel,.dk-route .rv-step-3 .rv-panel{flex:0 0 clamp(300px,46%,400px);height:100%;overflow-y:auto;padding:0 4px 0 0} .dk-route .rv-step-2 .rv-map,.dk-route .rv-step-3 .rv-map{flex:1;height:100%} } /* Add Permit's trips when a driver has many (fleetUpload.js tripChoices, partner.js tripPicker): a few cards, then the rest as a compact searchable list behind "Show N more". */ .dk-more{align-self:flex-start;min-height:44px;padding:0 2px;border:0;background:none;color:var(--accent);font:inherit;font-size:14px;font-weight:600;cursor:pointer} .dk-more:hover{text-decoration:underline} .dk-more:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px} .dk-field > .dk-more{margin-top:-2px} .dk-more-list{display:flex;flex-direction:column;gap:8px} /* ── The partner console in the fleet's style (owner, 2026-11-10: "do the same here"). The tables are trips.html's "Your drivers' permits" (.dp, .dpt): a card per list, a search, filter chips (never a