/* 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 that FILL rather than step: one lights per countdown pip — red, amber, amber — and all three turn
   green together on the go tone. Pierce's red, yellow and green are all still here; what changed is that there
   are three pips to land and a three-state sequence left one of them lighting nothing. The lamps are driven from
   the audio clock in games.js, so this file only has to say what each state looks like. */
/* 33%, not 18%: the boards at the line hang in the top quarter of the windscreen, and the lamps were sitting on
   the middle one during the ten seconds the driver is meant to be reading it. This band is under the start gate
   and above the grid card's old place, and it is empty. */
#raceTree{position:fixed;left:50%;top:33%;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 .1s,box-shadow .1s}
#raceTree.lit-1 .l1,#raceTree.lit-2 .l1,#raceTree.lit-3 .l1{background:#ff3b30;box-shadow:0 0 18px 4px rgba(255,59,48,.6)}
#raceTree.lit-2 .l2,#raceTree.lit-3 .l2{background:#ffcc00;box-shadow:0 0 18px 4px rgba(255,204,0,.6)}
#raceTree.lit-3 .l3{background:#ffcc00;box-shadow:0 0 18px 4px rgba(255,204,0,.6)}
#raceTree.lit-go .lamp{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:26px;letter-spacing:.04em;color:var(--ink,#f6f3ec);min-width:2.4em;font-variant-numeric:tabular-nums}
#raceTree.lit-go .treeword{color:#34c759}
@media (max-width:640px){#raceTree{top:31%;gap:10px;padding:10px 14px}#raceTree .lamp{width:26px;height:26px}#raceTree .treeword{font-size:21px}}
/* Landscape phone: 390px of height, and 33% of it lands on the bonnet. The lamps go up into the sky instead. */
@media (max-width:950px) and (max-height:460px){#raceTree{top:20%;gap:8px;padding:8px 12px}#raceTree .lamp{width:22px;height:22px}#raceTree .treeword{font-size:18px}}

/* ---------- the grid card ----------
   The prep time Pierce asked for, with the teaching in it. It sits over the dock, not over the road: the sponsor
   boards at the line are the thing worth looking at while this is up, and they hang above the windscreen line.
   It is gone before the first lamp, so it can never be in the way of steering. */
#raceGrid{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--strip,120px) + 20px);
  width:min(470px,calc(100vw - 48px));max-height:min(56vh,480px);overflow:auto;overscroll-behavior:contain;
  z-index:14;padding:13px 16px 0;border-radius:var(--r,18px);
  background:var(--glass-strong,rgba(9,13,18,.92));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,.55);color:var(--ink,#f6f3ec);text-wrap:pretty}
#raceGrid[hidden]{display:none}
.rghead{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.rgkicker{flex:1;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent,#f0b860)}
/* the mute has to be found without hunting for it, and it remembers itself, so it says which state it is in */
.rgmute{flex:0 0 auto;min-height:34px;padding:6px 12px;font-size:11.5px;font-weight:600;white-space:nowrap;
  border-radius:var(--pill,999px);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;color:var(--ink,#f6f3ec)}
.rgmute[aria-pressed="true"]{color:var(--dim,#8c979f)}
.rgmute:hover{background:rgba(255,255,255,.12);border-color:var(--edge-hi,rgba(255,255,255,.28))}
@media (pointer:coarse){.rgmute{min-height:44px}}
#raceGrid .rgtitle{margin:0;font-family:var(--display,Georgia,serif);font-weight:500;font-size:21px;line-height:1.18;letter-spacing:.01em;text-wrap:balance}
.rgsponsor{margin:5px 0 0;font-size:12px;font-weight:600;color:var(--accent,#f0b860)}
.rgsponsor:empty{display:none}
.rgfacts{list-style:none;display:flex;flex-wrap:wrap;gap:3px 14px;margin:9px 0 0;padding:0;font-size:12px;font-weight:600;color:var(--muted,#b4bec6)}
.rgfacts .rgbest{color:var(--accent,#f0b860)}
.rgbrief{list-style:none;margin:11px 0 0;padding:11px 0 0;border-top:1px solid var(--edge,rgba(255,255,255,.13));
  display:grid;gap:7px;font-size:12.5px;line-height:1.42;color:var(--muted,#b4bec6)}
.rgbrief li{padding-left:15px;position:relative;text-wrap:pretty}
.rgbrief li::before{content:'';position:absolute;left:2px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--accent,#f0b860);opacity:.8}
/* once a race has been started, the briefing folds to the one line a returning driver still forgets */
#raceGrid.short .rgbrief li:not(:first-child){display:none}
#raceGrid.short .rgbrief{gap:0}
.rgactions{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 0}
.rgactions button{flex:1 1 auto;min-width:130px;max-width:none;min-height:46px;font-size:13.5px;font-weight:600;padding:11px 14px;border-radius:var(--pill,999px)}
.rgskip{display:flex;align-items:center;gap:8px;margin:9px 0 0;min-height:34px;font-size:11.5px;color:var(--dim,#8c979f);cursor:pointer}
.rgskip input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent,#f0b860)}
/* the prep clock, as a bar rather than a number: it says "this ends by itself" without asking to be read */
.rgbar{position:sticky;bottom:0;margin:11px -16px 0;height:3px;background:rgba(255,255,255,.08)}
.rgbar i{display:block;height:100%;width:100%;background:var(--accent,#f0b860)}
/* While the car is held on the line, the screen belongs to the boards and the lamps. The road card and the live
   readout both go: the readout would be saying 0:00 and repeating the distance the grid card has already given,
   and it sits in the corner where the left-hand board is. Both come back on the green, which is when the clock
   starts meaning something. */
body.race-grid #driveCard,body.race-grid #errandRun{display:none}
/* And the map gets pointed at, because that is the sentence on the card. A ring is the only honest way to say
   "this one": an arrow would have to know where the map is on six different layouts, and this does not. */
body.race-grid #minimap{outline:2px solid var(--accent,#f0b860);outline-offset:2px;box-shadow:0 0 0 7px rgba(240,184,96,.16),0 10px 30px rgba(0,0,0,.4)}

/* ---------- the checkpoint band ---------- */
/* One word, once, for under two seconds, on its own row so it never pushes the next turn off the readout. */
#errandRun .ercheck{grid-column:1/-1;grid-row:3;margin:0 -12px -12px -17px;padding:6px 12px 6px 17px;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0b1116;
  background:var(--accent,#f0b860);border-radius:0 0 calc(var(--r,18px) - 1px) calc(var(--r,18px) - 1px)}
#errandRun .ercheck:empty{display:none}

/* ---------- the grid card on a phone ---------- */
@media (max-width:700px), (max-width:950px) and (max-height:460px){
  /* The card stops at the top of the minimap rather than on top of it. On a phone the map is 84 px in the
     bottom-left corner above the dock, and the first line of the briefing is a sentence about that map: a card
     that covers it while telling you to look at it is worse than no card. 104px = the map plus its gutters. */
  #raceGrid{left:calc(10px + var(--sal,0px));right:calc(10px + var(--sar,0px));width:auto;transform:none;
    bottom:calc(var(--strip,74px) + 104px);max-height:min(50vh,400px);padding:11px 13px 0}
  #raceGrid .rgtitle{font-size:18px}
  .rgfacts{font-size:11.5px;gap:2px 12px}
  .rgbrief{font-size:12px;gap:6px;margin-top:9px;padding-top:9px}
  .rgactions{margin-top:11px;gap:7px}
  .rgactions button{min-width:120px;font-size:13px}
  .rgbar{margin:9px -13px 0}
  #errandRun .ercheck{margin:0 -10px -11px -14px;padding:5px 10px 5px 14px;font-size:11px}
}
/* Landscape phone: the road is 390px tall and most of it is needed. The briefing goes to one line whatever the
   setting, the buttons stay on the bottom edge of the card, and nothing scrolls out of reach. */
@media (max-width:950px) and (max-height:460px){
  /* Landscape: the map sits beside the card rather than under it, so the card gives back the height and takes
     the right two thirds of the screen instead. */
  #raceGrid{left:auto;right:calc(10px + var(--sar,0px));width:min(430px,62vw);
    bottom:calc(var(--strip,66px) + 8px);max-height:calc(100dvh - 64px - var(--strip,66px));padding-top:9px}
  #raceGrid .rgtitle{font-size:16px}
  #raceGrid .rgbrief li:not(:first-child){display:none}
  #raceGrid .rgbrief{gap:0;margin-top:8px;padding-top:8px}
  /* Both the buttons and the opt-out stay on the bottom edge of the card. A sticky row of buttons with the
     checkbox scrolled off underneath it is worse than no sticky row: the setting simply disappears. */
  .rgfoot{position:sticky;bottom:3px;background:rgba(9,13,18,.96);margin:10px -13px 0;padding:7px 13px 4px;box-shadow:0 -10px 16px rgba(9,13,18,.85)}
  .rgactions{margin-top:0}
  .rgactions button{min-height:42px;font-size:12.5px}
  .rgskip{margin-top:5px;min-height:26px}
}
@media (min-width:2000px){#raceGrid{width:min(540px,calc(100vw - 48px));max-height:min(58vh,620px)}#raceGrid .rgtitle{font-size:24px}.rgbrief{font-size:13.5px}}