/* The plugins' screen: a phone in a cab, one hand, gloves on. Everything
   that can be tapped is at least 56px tall, text is 18px, one action stands
   out per screen, the thing to do next sits under the thumb. ORTEC colours:
   burgundy for the furniture, coral for the one thing. After the DHL "My
   trip" plugin (middle-mile-planning-2, public/driver/driver.css). */
:root {
	--pl-burgundy: #3f0123; --pl-burgundy-soft: #521a39; --pl-coral: #f05a3b; --pl-coral-dark: #e15134;
	--pl-ink: #1d1d1f; --pl-muted: #6b6b70; --pl-line: #e3e1e4; --pl-bg: #f6f5f6; --pl-card: #ffffff;
	--pl-ok: #1e8e3e; --pl-warn: #b26b00; --pl-bad: #c62828;
	--pl-tap: 56px;
	--pl-soft: #ecebee; --pl-off: #dcdade; --pl-select: #faf4f7;
	--pl-warn-bg: #fff3e0; --pl-bad-bg: #fdecea; --pl-ok-bg: #e8f5e9; --pl-bad-line: #f1c4c4; --pl-ok-line: #b7dfc2;
	--pl-brand-text: var(--pl-burgundy); --pl-brand-fill: var(--pl-burgundy);
	--pl-top-bg: var(--pl-burgundy); --pl-top-ink: #fff; --pl-top-line: rgba(255,255,255,.7);
	color-scheme: light dark;
}
/* Dark mode: the Driver App's web view follows the phone's setting. */
@media (prefers-color-scheme: dark) {
	:root {
		--pl-ink: #f1eef2; --pl-muted: #a9a3ad; --pl-line: #3a353d; --pl-bg: #121014; --pl-card: #1e1b20;
		--pl-soft: #2a262c; --pl-off: #47414a; --pl-select: #3a1f2e;
		--pl-ok: #34a853; --pl-warn: #f2a93b; --pl-bad: #ef5350;
		--pl-warn-bg: #3a2b12; --pl-bad-bg: #3b1918; --pl-ok-bg: #14301d; --pl-bad-line: #6b2a2a; --pl-ok-line: #2b5a38;
		--pl-brand-text: #ee9cc4; --pl-brand-fill: #8c2a5e;
		--pl-coral: #f26a4d; --pl-coral-dark: #e15134;
		--pl-top-bg: #2a0518;
	}
	.pl-btn, .pl-input, .pl-card { box-shadow: none; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { font: 400 18px/1.35 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--pl-ink); background: var(--pl-bg); display: flex; flex-direction: column; min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--pl-brand-text); }

.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--pl-top-bg); color: var(--pl-top-ink); position: sticky; top: 0; z-index: 5; }
.pl-top-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pl-brand { font-weight: 700; letter-spacing: .08em; font-size: 14px; opacity: .85; }
.pl-title { font-weight: 500; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-name { font-size: 14px; opacity: .85; white-space: nowrap; }
.pl-top-action { min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 2px solid var(--pl-top-line); background: transparent; color: inherit; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.pl-top-action:active { background: rgba(255,255,255,.15); }

.pl-banner { margin: 10px 12px 0; padding: 12px 14px; border-radius: 10px; background: var(--pl-warn-bg); color: var(--pl-warn); font-weight: 500; }
.pl-banner.bad { background: var(--pl-bad-bg); color: var(--pl-bad); }
.pl-banner.ok { background: var(--pl-ok-bg); color: var(--pl-ok); }

.pl-main { flex: 1 1 auto; padding: 12px 12px 120px; }
.pl-loading { color: var(--pl-muted); text-align: center; padding: 40px 0; }
.pl-h { font-size: 22px; font-weight: 600; margin: 8px 0 12px; }
.pl-sub { color: var(--pl-muted); margin: 0 0 12px; }
.pl-card { display: block; background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.pl-link { text-decoration: none; color: inherit; }
.pl-link b { display: block; font-size: 20px; }
.pl-link span { display: block; }
.pl-row { display: flex; align-items: center; gap: 12px; }
.pl-grow { flex: 1 1 auto; min-width: 0; }
.pl-muted { color: var(--pl-muted); }
.pl-small { font-size: 15px; }
.pl-section { font-size: 15px; font-weight: 600; color: var(--pl-muted); margin: 14px 4px 8px; text-transform: uppercase; letter-spacing: .04em; }
.pl-list { display: flex; flex-direction: column; gap: 8px; }
.pl-empty { text-align: center; color: var(--pl-muted); padding: 30px 10px; }
.pl-empty b { display: block; color: var(--pl-ink); font-size: 20px; margin-bottom: 6px; }

/* buttons */
.pl-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var(--pl-tap); padding: 12px 18px; border-radius: 14px; border: 2px solid var(--pl-line); background: var(--pl-card); font-size: 19px; font-weight: 600; text-align: center; }
.pl-btn:active { transform: scale(.985); }
.pl-btn.primary { background: var(--pl-coral); border-color: var(--pl-coral); color: #fff; font-size: 21px; min-height: 64px; }
.pl-btn.primary:active { background: var(--pl-coral-dark); }
.pl-btn.quiet { border-color: transparent; background: transparent; color: var(--pl-brand-text); font-weight: 500; }
.pl-btn.danger { color: var(--pl-bad); border-color: var(--pl-bad-line); }
.pl-btn[disabled] { opacity: .5; }
.pl-linkbtn { border: none; background: none; color: var(--pl-brand-text); font-weight: 700; text-decoration: underline; padding: 0 4px; min-height: 40px; }

/* the sticky action bar; inside the Driver App its own tab bar floats over
   the bottom of the page (body.in-host), so the bar sits above it */
:root { --pl-host-bottom: 0px; --pl-host-lift: 0px; }
body.in-host { --pl-host-bottom: 64px; --pl-host-lift: max(0px, calc(var(--pl-host-bottom) - env(safe-area-inset-bottom, 0px))); }
.pl-bar { position: fixed; left: 0; right: 0; bottom: var(--pl-host-lift); padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--pl-bg) 70%, transparent); display: flex; flex-direction: column; gap: 8px; z-index: 6; }
.pl-bar[hidden] { display: none; }
.pl-bar .pl-btn { box-shadow: 0 6px 18px rgba(63,1,35,.18); }
.pl-lift-probe { position: fixed; left: 0; bottom: 0; width: 0; height: var(--pl-host-lift); visibility: hidden; pointer-events: none; }

/* inputs */
.pl-field { margin-bottom: 14px; }
.pl-label { display: block; font-size: 15px; font-weight: 600; color: var(--pl-muted); margin: 0 0 6px 2px; text-transform: uppercase; letter-spacing: .04em; }
.pl-input { width: 100%; min-height: var(--pl-tap); padding: 12px 14px; border: 2px solid var(--pl-line); border-radius: 12px; background: var(--pl-card); font-size: 20px; }
.pl-input:focus { outline: none; border-color: var(--pl-brand-fill); }

/* a sheet of labelled lines */
.pl-sheet { background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 14px; padding: 6px 14px 14px; margin-bottom: 12px; }
.pl-line { display: block; padding: 10px 0 4px; border-bottom: 1px solid var(--pl-line); }
.pl-line:last-child { border-bottom: none; }
.pl-line-label { display: block; font-size: 14px; font-weight: 600; color: var(--pl-coral-dark); margin-bottom: 4px; }
.pl-line-value { display: block; font-size: 19px; padding: 4px 0 6px; }
.pl-kvs { display: flex; flex-direction: column; gap: 6px; }
.pl-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; }
.pl-kv span { color: var(--pl-muted); }
.pl-status { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--pl-muted); }
.pl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pl-muted); }
.pl-dot.ok { background: var(--pl-ok); } .pl-dot.warn { background: var(--pl-warn); } .pl-dot.bad { background: var(--pl-bad); }

/* A wide screen (a tablet on its side, a desktop browser): one phone-wide
   column in the middle. */
@media (min-width: 720px) {
	.pl-main, .pl-bar { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
	.pl-bar { left: 50%; right: auto; transform: translateX(-50%); }
	.pl-top { padding-left: max(16px, calc(50% - 320px + 16px)); padding-right: max(16px, calc(50% - 320px + 16px)); }
}