/* Drive Winthrop — errands and runs.
   Three surfaces: one dock button, one sheet (the list and the result share it), and a slim readout that
   runs while the clock does. Everything sits clear of the road ahead and clear of the driving controls,
   and everything can be put away. Loaded after experience.css, so it borrows that sheet's tokens. */

/* ---------- the one new button in the driving strip ---------- */
/* A paper bag: an errand, not a race. The dock rules supply the size; this supplies the icon. */
#errandsBtn{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12H6.2Z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/g%3E%3C/svg%3E")}
#errandsBtn[aria-expanded="true"]{background:rgba(240,184,96,.18);color:var(--accent-hi,#f7cb84)}

/* ---------- the sheet: the errand list, and the result card ---------- */
.errandsheet{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--strip,120px) + 20px);
  width:min(430px,calc(100vw - 48px));max-height:min(52vh,440px);overflow:auto;overscroll-behavior:contain;
  z-index:12;padding:14px 16px 16px;border-radius:var(--r,18px);
  background:var(--glass-strong,rgba(9,13,18,.9));border:1px solid var(--edge,rgba(255,255,255,.13));
  backdrop-filter:var(--blur,blur(20px) saturate(1.3));-webkit-backdrop-filter:var(--blur,blur(20px) saturate(1.3));
  box-shadow:0 16px 46px rgba(0,0,0,.5);color:var(--ink,#f6f3ec);text-wrap:pretty}
.errandsheet[hidden]{display:none}
/* the result earns more room than the menu does: it has a picture and the thing you came to share */
#errandResult{max-height:min(64vh,560px)}

.errandhead{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.errandhead h2{flex:1;margin:0;font-family:var(--display,Georgia,serif);font-weight:500;font-size:19px;line-height:1.2;letter-spacing:.01em;text-wrap:balance}
.errandclose{flex:0 0 auto;width:44px;height:44px;min-height:44px;padding:0;border-radius:var(--pill,999px);
  font-size:20px;line-height:1;background:transparent;border:1px solid transparent;color:var(--muted,#b4bec6);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.errandclose:hover{background:var(--glass-lite,rgba(255,255,255,.06));color:var(--ink,#f6f3ec)}

.errandnote{margin:0 0 12px;font-size:12.5px;line-height:1.45;color:var(--muted,#b4bec6)}

.errandlist{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.errandlist li{margin:0}
.errandempty{font-size:13px;color:var(--muted,#b4bec6);padding:6px 2px}

.errandpick{display:block;width:100%;max-width:none;min-height:60px;text-align:left;white-space:normal;
  padding:11px 14px;border-radius:var(--r-sm,12px);background:var(--glass-lite,rgba(255,255,255,.06));
  border:1px solid var(--edge,rgba(255,255,255,.13));box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  font-weight:600;font-size:14px;line-height:1.25;color:var(--ink,#f6f3ec)}
.errandpick:hover{background:rgba(255,255,255,.11);border-color:var(--edge-hi,rgba(255,255,255,.28))}
.errandpick .ername{display:block;text-wrap:pretty}
.errandpick .ermeta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;font-weight:500;font-size:11.5px;color:var(--muted,#b4bec6)}
.errandpick .erbest{display:block;margin-top:3px;font-weight:600;font-size:11.5px;color:var(--accent,#f0b860)}
.errandpick:disabled{opacity:.45}

/* ---------- the result ---------- */
/* a glimpse of the place, not a poster: the result of the run has to stay above the fold */
.errandphoto{margin:0 0 11px;border-radius:var(--r-sm,12px);overflow:hidden;background:rgba(255,255,255,.05);width:100%;height:146px}
.errandphoto img{display:block;width:100%;height:100%;object-fit:cover}

.errandscore{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:0 0 10px}
.errandscore .ertime{font-family:var(--display,Georgia,serif);font-weight:500;font-size:42px;line-height:1;letter-spacing:-.02em;color:var(--accent,#f0b860);font-variant-numeric:tabular-nums}
.errandscore .erstars{font-size:16px;letter-spacing:.12em;color:var(--accent,#f0b860)}
.errandscore .erverdict{flex:1 0 100%;font-size:12.5px;color:var(--muted,#b4bec6)}

.erdetail{list-style:none;margin:0 0 13px;padding:0;display:grid;gap:4px;font-size:12.5px;line-height:1.45;color:var(--muted,#b4bec6)}
.erdetail li{padding-left:13px;position:relative;text-wrap:pretty}
.erdetail li::before{content:'';position:absolute;left:2px;top:8px;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55}

.erpicks{display:flex;flex-wrap:wrap;gap:8px}
.erpicks button{flex:1 1 auto;min-width:130px;max-width:none;min-height:44px;font-size:13px;padding:10px 14px;border-radius:var(--pill,999px)}
.ershared{margin:9px 0 0;min-height:1em;font-size:12px;color:var(--accent,#f0b860);word-break:break-word}
.ershared:empty{display:none}

/* ---------- the quiet line about real ordering ---------- */
.errandsoon{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--edge,rgba(255,255,255,.13))}
.errandsoon p{margin:0;font-size:12px;line-height:1.45;color:var(--dim,#8c979f);text-wrap:pretty}
.errandnotify{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-size:12px;font-weight:600;
  color:var(--accent,#f0b860);text-decoration:none;border-bottom:1px solid rgba(240,184,96,.4)}
.errandnotify:hover{color:var(--accent-hi,#f7cb84);border-bottom-color:currentColor}

/* ---------- the live readout ---------- */
/* Pierce, 2026-09-10: "the score and timing is so tight". Four things sat shoulder to shoulder on one line
   at the same size, so nothing was first. A grid instead of a wrap: the clock is an anchor on the left, big
   and in the display face, the way the result card already sets it; where you are going sits above how far
   is left, so the eye reads the name then the number; Give up is a quiet end cap; and the next corner — the
   only line you read while the car is moving — gets a band of its own under a full-bleed rule. */
#errandRun{position:fixed;top:calc(158px + var(--sat,0px));left:calc(var(--gutter,24px) + var(--sal,0px));
  z-index:11;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:16px;
  /* a rounded card, not a lozenge: a second row of type cannot live inside a 999px end cap */
  border-radius:var(--r,18px);padding:11px 12px 12px 17px;background:var(--glass-strong,rgba(9,13,18,.9));
  border:1px solid var(--edge,rgba(255,255,255,.13));backdrop-filter:var(--blur,blur(20px) saturate(1.3));
  -webkit-backdrop-filter:var(--blur,blur(20px) saturate(1.3));box-shadow:0 10px 30px rgba(0,0,0,.4);
  max-width:min(470px,calc(100vw - 2*var(--gutter,24px)));color:var(--ink,#f6f3ec)}
#errandRun[hidden]{display:none}
#errandRun .ertime{grid-column:1;grid-row:1;font-family:var(--display,Georgia,serif);font-weight:500;font-size:30px;
  line-height:1;letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:var(--accent,#f0b860)}
#errandRun .erline{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;max-width:100%}
#errandRun .erwhere{max-width:100%;font-size:13.5px;font-weight:600;line-height:1.15;color:var(--ink,#f6f3ec);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#errandRun .erto{font-size:12px;font-weight:600;line-height:1.1;letter-spacing:.015em;color:var(--muted,#b4bec6);white-space:nowrap}
#errandRun.close .erto{color:var(--go,#3aa862)}
#errandRun .ergiveup{grid-column:3;grid-row:1;min-height:36px;min-width:0;padding:9px 14px;font-size:11.5px;font-weight:600;
  border-radius:var(--pill,999px);background:transparent;border:1px solid var(--edge,rgba(255,255,255,.13));
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--dim,#8c979f);white-space:nowrap}
#errandRun .ergiveup:hover{background:rgba(255,255,255,.1);border-color:var(--edge-hi,rgba(255,255,255,.28));color:var(--ink,#f6f3ec)}
@media (pointer:coarse){#errandRun .ergiveup{min-height:44px}}
/* the instruction band: the readout's full width, its own rule, and never truncated into nonsense */
#errandRun .erturn{grid-column:1/-1;grid-row:2;margin:11px -12px 0 -17px;padding:10px 12px 0 17px;
  border-top:1px solid var(--edge,rgba(255,255,255,.13));font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.01em;
  color:var(--accent,#f0b860);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#errandRun .erturn:empty{display:none}

/* The road card and the errand sheet want the same slot above the dock on a phone; the sheet is the one
   the driver just asked for, so it wins for as long as it is open. */
body.errands-open #driveCard{display:none}

/* ---------- phones and landscape phones: the sheet spans the dock, the readout sits under the road name ---------- */
@media (max-width:700px), (max-width:950px) and (max-height:460px){
  .errandsheet{left:calc(10px + var(--sal,0px));right:calc(10px + var(--sar,0px));width:auto;transform:none;
    bottom:calc(var(--strip,74px) + 10px);max-height:min(50vh,420px);padding:12px 13px 14px}
  #errandResult{max-height:min(64vh,520px)}
  .errandhead h2{font-size:17px}
  .errandnote{font-size:12px;margin-bottom:10px}
  .errandpick{min-height:58px;font-size:13.5px;padding:10px 12px}
  .errandscore .ertime{font-size:36px}
  .errandphoto{height:124px;margin-bottom:9px}
  .erdetail{margin-bottom:11px}
  .errandsoon{margin-top:11px;padding-top:9px}
  /* Under the road name AND under the speedometer, which is what buys back the width: the speedometer owns
     the top-right corner down to 122px, so from 130px the readout can have the whole screen instead of the
     258px it used to be squeezed into. */
  #errandRun{top:calc(130px + var(--sat,0px));left:calc(12px + var(--sal,0px));right:calc(12px + var(--sar,0px));
    max-width:none;column-gap:13px;padding:10px 10px 11px 14px}
  #errandRun .ertime{font-size:26px}
  #errandRun .erwhere{font-size:13px}
  #errandRun .erto{font-size:11.5px}
  #errandRun .erturn{font-size:12.5px;margin:10px -10px 0 -14px;padding:9px 10px 0 14px}
  #errandRun .ergiveup{padding:9px 12px;font-size:11px}
}

/* Landscape phone: barely 390px of height, most of it road. The picture goes, the sheet takes what is left,
   and the two buttons stay pinned to the bottom of it so the thing you came to press is never scrolled away. */
@media (max-width:950px) and (max-height:460px){
  /* the readout keeps the ranking and gives back the padding; Give up keeps its 44px, it is still a thumb */
  #errandRun{top:calc(100px + var(--sat,0px));left:calc(12px + var(--sal,0px));right:auto;max-width:min(64vw,400px);
    column-gap:12px;padding:8px 9px 9px 13px}
  #errandRun .ertime{font-size:23px}
  #errandRun .erline{gap:3px}
  #errandRun .erturn{margin:8px -9px 0 -13px;padding:7px 9px 0 13px;font-size:12px}
  #errandRun .ergiveup{padding:7px 11px}
  .errandsheet,#errandResult{max-height:calc(100dvh - 74px - var(--strip,66px))}
  .errandphoto{display:none}
  .errandhead{margin-bottom:6px}
  .errandscore{margin-bottom:7px}
  .errandscore .ertime{font-size:30px}
  .erdetail{margin-bottom:9px;gap:3px}
  .erpicks{position:sticky;bottom:-14px;z-index:1;margin:0 -13px -14px;padding:8px 13px 14px;
    background:rgba(9,13,18,.94);box-shadow:0 -10px 16px rgba(9,13,18,.85)}
  .errandsoon{margin-top:10px;padding-top:8px}
}

@media (min-width:2000px){
  .errandsheet{width:min(520px,calc(100vw - 48px));max-height:min(56vh,620px)}
  .errandpick{font-size:15px}
  #errandRun{top:calc(190px + var(--sat,0px))}
}

/* the start step: a way back, and the three flags */
.erback{display:inline-block;min-height:32px;padding:4px 2px;border:0;background:none;color:var(--accent,#f0b860);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.erback:hover{color:var(--accent-hi,#f7cb84)}
.errandpick .ernote{color:var(--muted,#b4bec6);font-weight:500}
.errule{margin:8px 2px 2px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim,#8c979f)}

/* the start tree: three lamps, red then amber then green, and the clock waits for the green */
#raceTree{position:fixed;left:50%;top:18%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:12px 18px;border-radius:999px;background:rgba(6,11,16,.82);border:1px solid var(--edge,rgba(255,255,255,.13));backdrop-filter:blur(10px);z-index:60;pointer-events:none}
#raceTree[hidden]{display:none}
#raceTree .lamp{width:34px;height:34px;border-radius:50%;background:#2a2f34;box-shadow:inset 0 2px 6px rgba(0,0,0,.6);transition:background .12s,box-shadow .12s}
#raceTree.lit-red .lamp.red{background:#ff3b30;box-shadow:0 0 18px 4px rgba(255,59,48,.65)}
#raceTree.lit-amber .lamp.red{background:#7a1e18}
#raceTree.lit-amber .lamp.amber{background:#ffcc00;box-shadow:0 0 18px 4px rgba(255,204,0,.65)}
#raceTree.lit-green .lamp.red,#raceTree.lit-green .lamp.amber{background:#2a2f34}
#raceTree.lit-green .lamp.green{background:#34c759;box-shadow:0 0 22px 6px rgba(52,199,89,.7)}
#raceTree .treeword{margin-left:6px;font-family:var(--display,Georgia,serif);font-weight:500;font-size:22px;letter-spacing:.04em;color:var(--ink,#f6f3ec);min-width:3.2em}
#raceTree.lit-green .treeword{color:#34c759}
@media (max-width:640px){#raceTree{top:14%;gap:10px;padding:10px 14px}#raceTree .lamp{width:26px;height:26px}#raceTree .treeword{font-size:18px}}