/* Driftr v45: frame, navigation, Home, Trip overview, first trip, sign-in, Install, Settings; restyles legacy .modal/.pop/.backdrop/.toast.
   Owner: FE-SHELL. Every class here starts with sh- (plan 3.6); never restyle another prefix or a d- class.
   Tokens only (theme.css); hex only where plan 3.6 allows it. prefers-reduced-motion: opacity only, 120 ms.
   Linked in index.html after theme.css. */

/* ---------- helpers ---------- */
.sh-strong{font-weight:600;}
.sh-ink{color:var(--ink);}
.sh-grow{flex:1;min-width:0;}
.sh-center{text-align:center;}
.sh-mt8{margin-top:8px;} .sh-mt12{margin-top:12px;} .sh-mt16{margin-top:16px;} .sh-mt18{margin-top:18px;}
.sh-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.sh-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.sh-brass-line{color:var(--brass-ink);font-weight:600;}
.sh-brass-text{color:var(--brass-ink);}
.sh-sage-dot{width:8px;height:8px;border-radius:50%;background:var(--sage-ink);flex:none;}
.sh-glaze{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;}
.sh-glaze-lg{width:12px;height:12px;}
.sh-danger{color:var(--alert-ink);}
.sh-dock-safe{padding-bottom:env(safe-area-inset-bottom);}

/* ---------- the frame: one column that never grows past the screen (a wide child scrolls inside) ---------- */
.sh-frame{grid-template-columns:minmax(0,1fr);width:100%;}
.sh-frame>*{min-width:0;}

/* ---------- top bar ---------- */
/* the logo tile is a white pill sized to the full wordmark (the file is only scaled) */
.d-logo-tile.sh-logo{width:auto;height:var(--tap);padding:0 12px;border-radius:22px;text-decoration:none;}
.d-logo-tile.sh-logo img{width:auto;height:26px;object-fit:contain;}
.sh-title-btn{min-height:var(--tap);padding:0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;}
.sh-bell{color:var(--ink);}
.sh-bell-in{position:relative;display:inline-flex;}
.sh-bell-dot{position:absolute;top:-1px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--sage-ink);box-shadow:0 0 0 2px var(--ground);}
.sh-avatar-btn{padding:0;overflow:visible;}
.sh-av{width:40px;height:40px;box-shadow:none;}
/* the travel-profile ring: how much is done, in sage (done), never brass */
.sh-ring{background:conic-gradient(var(--sage) var(--pct), var(--well) 0);}
.sh-ring .sh-av{width:36px;height:36px;box-shadow:0 0 0 2px var(--ground);}

/* ---------- toasts: 12 px above the dock or nav (--sh-bottom from frame()) ---------- */
.sh-toast.undotoast,#toast{
  position:fixed;left:max(var(--gutter), env(safe-area-inset-left));right:max(var(--gutter), env(safe-area-inset-right));
  bottom:calc(max(var(--sh-bottom, 0px), env(safe-area-inset-bottom)) + 12px);
  max-width:390px;margin:0 auto;width:auto;transform:none;}
.sh-toast.undotoast{z-index:210;display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 8px 4px 16px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e2);color:var(--ink);font:400 var(--fs-body-sm)/1.4 var(--font);}
.sh-toast-msg{flex:1;min-width:0;}
.sh-toast .d-btn-quiet{min-height:var(--tap);flex:none;}
#toast{display:flex;align-items:center;min-height:52px;padding:14px 16px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e2);color:var(--ink);font:400 var(--fs-body-sm)/1.4 var(--font);}
#toast.show{transform:none;}
#toast.err{color:var(--alert-ink);}
body:has(.d-sheet) #toast{bottom:auto;top:calc(16px + env(safe-area-inset-top));}

/* ---------- sheets (ui/sheet.js) ---------- */
.d-sheet.sh-full{height:calc(92dvh - env(safe-area-inset-top));}
.sh-sheet-titles{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.sh-choices{display:flex;flex-direction:column;}
.sh-choice{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:8px 0;border:0;background:none;color:var(--ink);text-align:left;text-decoration:none;font:500 var(--fs-body)/1.35 var(--font);cursor:pointer;}
.sh-choice:active{opacity:.7;}
.sh-choice-ic{width:var(--tap);height:var(--tap);border-radius:50%;background:var(--ground);box-shadow:var(--e1);display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--ink);}
.sh-choice-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.sh-choice-sub{font:400 var(--fs-body-sm)/1.4 var(--font);color:var(--ink-2);}
.sh-choice-chev{color:var(--ink-2);flex:none;}
.sh-choice.sh-danger{color:var(--alert-ink);}
.sh-choice-node{padding:6px 0 10px;}
.sh-choice-node .aientry{display:flex;flex-direction:column;gap:6px;}
.sh-foot-stack,.sh-confirm-foot{display:flex;flex-direction:column;gap:4px;}
.sh-danger-btn{color:var(--alert-ink);}

/* ---------- legacy dialogs read as sheets: a 44 px close button in the pinned title row ---------- */
.modal>h4.sh-mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sh-mclose{flex:none;margin:-6px 0;}
.modal{overscroll-behavior:contain;}
.modal .row2{min-width:0;}
.modal .row2>*{min-width:0;}
.modal input[type=date].fld,.modal input[type=time].fld{min-width:0;width:100%;}
.backdrop{z-index:110;}
/* the photo cropper opens from inside sheets (z 120 and up, +2 per layer): keep it above them, under toasts (200) */
.backdrop.cropper-back{z-index:190;}

/* ---------- page head (one heading block per screen) ---------- */
.sh-head{padding-top:12px;}
.sh-head-roomy{padding-top:28px;}
.sh-title{margin-top:4px;overflow-wrap:anywhere;}
.sh-lead{margin-top:6px;}
.sh-tab-title{margin:12px 0 8px;}
.sh-card-slot{margin-top:16px;}

/* ---------- Trip overview (Trip board) ---------- */
.sh-quiet-wrap:empty{display:none;}
.sh-quiet{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);margin-top:4px;padding:0;border:0;background:none;color:var(--ink-2);font:400 var(--fs-body-sm)/1.4 var(--font);text-align:left;cursor:pointer;}
.sh-quiet:active{opacity:.7;}
.sh-draft{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;}
.sh-quiet-btn{flex:none;min-height:var(--tap);}
.sh-crew{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;}
.sh-crew-stack{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);padding:0;border:0;background:none;color:inherit;cursor:pointer;}
.sh-crew-stack>*{pointer-events:none;}
.sh-waiting{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap);padding:0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;}
.sh-route-head{display:flex;align-items:center;justify-content:space-between;min-height:var(--tap);margin-top:8px;}
.sh-route{margin-top:0;}
.d-row.sh-legrow,.d-row.sh-triprow{grid-template-columns:minmax(0,1fr) auto 20px;width:100%;border:0;background:none;text-align:left;font:inherit;}
.sh-legname{display:block;}
.sh-gap{width:100%;min-height:var(--tap);padding:0;border:0;background:none;justify-content:space-between;gap:12px;text-align:left;cursor:pointer;}
.sh-gap:active{opacity:.7;}
.sh-gap-l{display:inline-flex;align-items:center;gap:6px;min-width:0;}
.sh-gap-text{display:inline-flex;min-width:0;}
.sh-gap-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sh-gap-when{flex:none;white-space:nowrap;}
.sh-hopcard{margin:6px 0;}
.sh-card-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.sh-hop-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;}
.sh-hop-text{flex:1 1 150px;min-width:0;}
.sh-hop-book{flex:none;padding:10px 22px;}
.sh-empty-road{margin-top:8px;min-height:160px;}
.sh-empty{padding-top:2px;}
.sh-empty-pebble{top:12px;margin-top:0;}
.sh-slab-wrap{margin-top:16px;}
.sh-slab-l{display:inline-flex;align-items:center;gap:12px;min-width:0;}

/* currency sheet */
.sh-cur-pair{display:grid;grid-template-columns:minmax(0,1fr) var(--tap) minmax(0,1fr);gap:8px;align-items:end;margin-top:12px;}
.sh-cur-pair .d-input{min-width:0;}
.sh-swap{margin-bottom:4px;}
.sh-cur-out{margin-top:20px;text-align:center;min-height:1.2em;}
.sh-cur-out+p{text-align:center;margin-top:4px;}

/* v44 tabs inside the v45 frame (until their owners land): a chip row that peeks, never a bar */
.sh-chiprow{display:flex;gap:10px;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:12px var(--gutter) 14px;scroll-padding-inline:var(--gutter);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);}
.sh-chip{flex:none;}

/* ---------- Home (Home board) ---------- */
.sh-trips{margin-top:28px;}
.sh-focal .sh-card-line{align-items:center;}
.sh-card-faces{display:inline-flex;flex:none;}
.sh-cities{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;}
.sh-cities>*{display:inline-flex;align-items:center;gap:8px;}
.sh-tag{margin-left:8px;vertical-align:middle;font:500 var(--fs-label)/1.4 var(--font);letter-spacing:0;color:var(--ink-2);}
.sh-triprow{color:var(--ink);cursor:pointer;}
.sh-newtrip{margin-top:20px;}
.sh-past-head{margin:32px 0 0;}
.sh-nomatch{padding:8px 0 4px;}
.sh-invrow{padding:8px 0 12px;}
.sh-invrow>.d-pebble{top:16px;margin-top:0;}
.sh-btnrow{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;}
.sh-waitrow{cursor:default;}
.sh-waitrow:active{opacity:1;}
.d-row.sh-waitrow{grid-template-columns:minmax(0,1fr);}
.sh-waitword{display:inline-flex;align-items:center;gap:8px;color:var(--sage-ink);white-space:normal;}
.sh-search{margin-top:16px;}
/* get the app (install.js): one card at the top of Home; the card is the button, the X sits beside it */
.sh-instcard{position:relative;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--e2);color:var(--ink);}
.sh-instcard-go{display:flex;align-items:flex-start;gap:14px;width:100%;min-height:var(--tap);margin:0;padding:16px 52px 16px 16px;border:0;border-radius:inherit;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow 120ms var(--ease);}
.sh-instcard-go:active{box-shadow:var(--in);}
.sh-instcard-go:focus-visible{outline:2px solid var(--brass-ink);outline-offset:2px;}
.sh-instcard-tile{flex:none;width:56px;height:56px;border-radius:14px;overflow:hidden;background:var(--tile);box-shadow:var(--e1);}
.sh-instcard-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.sh-instcard-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.sh-instcard-t{font:600 var(--fs-head)/1.3 var(--font);letter-spacing:-.01em;text-wrap:balance;}
.sh-instcard-act{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--brass-ink);font:600 var(--fs-body-sm)/1.3 var(--font);}
.sh-instcard-x{position:absolute;top:6px;right:6px;color:var(--ink-2);}
/* already installed, opened in the browser: one quiet line under the heading */
.sh-installed{display:flex;align-items:flex-start;gap:8px;margin-top:6px;color:var(--ink-2);}
.sh-installed>.d-ic{margin-top:1px;color:var(--sage-ink);}
.sh-installed>span{flex:1;min-width:0;}

/* first trip (Empty board) */
.sh-first-road{margin-top:32px;padding-bottom:28px;}
.sh-label-title{display:block;margin-top:6px;}
.sh-start .d-input{margin-top:14px;}
.sh-start .d-t-label{margin-top:8px;}
.d-row.sh-step-ahead{grid-template-columns:minmax(0,1fr);cursor:default;}
.d-row.sh-step-ahead:active{opacity:1;}
.sh-step-ahead .d-row-title{color:var(--ink-2);}
.sh-step-ahead:first-of-type{margin-top:12px;}
.sh-quiet-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 20px;margin-top:4px;}

/* ---------- settings and trip settings ---------- */
.sh-group{margin-top:28px;}
.sh-group-head{margin:0 0 4px;}
.sh-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 0;border:0;background:none;color:var(--ink);font:400 var(--fs-body)/1.35 var(--font);text-align:left;text-decoration:none;cursor:pointer;}
.sh-row:active{opacity:.7;}
.sh-row-static{cursor:default;}
.sh-row-static:active{opacity:1;}
.sh-row-label{flex:1;min-width:0;}
.sh-row-value{flex:0 1 auto;max-width:55%;color:var(--ink-2);font:400 var(--fs-body-sm)/1.35 var(--font);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sh-row-chev{color:var(--ink-2);flex:none;}
.sh-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.sh-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
.sh-two .d-input{min-width:0;}
.sh-leg{padding:4px 0 8px;}
.sh-leg+.sh-leg{margin-top:12px;}
.sh-leg-head{display:flex;align-items:center;gap:12px;min-height:52px;}
.sh-thumb{width:40px;height:40px;border-radius:var(--r-sm);background:var(--well);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:none;}
.sh-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.sh-leg-text{flex:1;min-width:0;display:flex;flex-direction:column;}
.sh-day{display:flex;align-items:center;gap:4px;min-height:var(--tap);padding-left:52px;}
.sh-day-text{flex:1;min-width:0;display:flex;flex-direction:column;}
.sh-addday{margin-left:48px;}
.sh-people{margin-top:20px;}
.sh-seg-row{display:flex;flex-direction:column;gap:8px;padding:8px 0;}
.sh-seg-help{margin-top:2px;}
.sh-field-label{font:500 var(--fs-label)/1.4 var(--font);color:var(--ink-2);}
.sh-chips{display:flex;flex-wrap:wrap;gap:12px 10px;padding:4px 0;}
.sh-photo-row{display:flex;align-items:center;gap:16px;padding:8px 0;}
.sh-photo-text{min-width:0;}
.sh-version{text-align:center;margin:28px 0 8px;}
.sh-hint{margin-top:16px;}

/* profile menu */
.sh-me{flex:1;min-width:0;display:flex;align-items:center;gap:12px;}
.sh-me-text{min-width:0;}
.sh-me-text p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sh-me-line{margin-bottom:8px;}
.sh-devnote{padding:12px 0;}

/* ---------- sign-in ---------- */
.sh-auth{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:calc(24px + env(safe-area-inset-top)) var(--gutter) calc(16px + env(safe-area-inset-bottom));background:var(--ground);color:var(--ink);}
.sh-auth-main{flex:1;width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
/* owner 2026-10-03: bigger wordmark; the tile trims only the PNG's blank white margin, the art is untouched */
.sh-wordmark{display:inline-flex;align-items:center;justify-content:center;width:300px;max-width:100%;height:190px;padding:0;overflow:hidden;border-radius:22px;background:var(--tile);box-shadow:var(--e2);}
.sh-wordmark img{display:block;height:186px;width:auto;max-width:none;flex:none;transform:translateY(-4px);}
.sh-tagline{text-align:center;max-width:300px;text-wrap:balance;}
.sh-auth-form{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.sh-auth-form .d-error:empty,.sh-auth-form .d-help:empty{display:none;}
.sh-invite-card{width:100%;text-align:center;padding:16px;}
.sh-auth .sh-version{margin:16px 0 0;}
.sh-installpill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:150;}

/* ---------- install sheet (Install board) ---------- */
.sh-inst-head{flex:1;min-width:0;display:flex;align-items:flex-start;gap:14px;}
.sh-inst-tile{width:56px;height:56px;border-radius:14px;background:var(--tile);box-shadow:var(--e1);display:flex;align-items:center;justify-content:center;flex:none;}
.sh-inst-tile img{width:48px;height:auto;display:block;}
.sh-inst-title{padding-top:2px;min-width:0;}
.sh-steps{list-style:none;margin:20px 0 0;padding-top:0;padding-bottom:0;}
.sh-step{display:grid;grid-template-columns:minmax(0,1fr) var(--tap);align-items:center;gap:16px;min-height:68px;padding:8px 0;}
.sh-step-now{top:50%;margin-top:-10px;}
.sh-step .d-row-main{gap:1px;}
.sh-key{width:var(--tap);height:var(--tap);border-radius:var(--r-sm);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink);}
.sh-key-text{font:600 .9375rem/1 var(--font);}
.sh-inst-already{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:4px;border-top:1px solid var(--line);}
.sh-step-n{color:var(--ink-2);}
.sh-step-n-now{color:var(--brass-ink);font-weight:600;}
/* the big steps on the onboarding's last screen ("Put Driftr on your phone") */
.sh-steps-big{margin-top:8px;}
.sh-steps-big .sh-step{grid-template-columns:minmax(0,1fr) 56px;min-height:84px;padding:10px 0;}
.sh-steps-big .d-row-title{font:600 var(--fs-head)/1.3 var(--font);letter-spacing:-.01em;}
.sh-steps-big .sh-key{width:56px;height:56px;border-radius:var(--r-md);}
.sh-steps-big .sh-key .d-ic{width:28px;height:28px;}
.sh-steps-big .sh-key-text{font-size:1.0625rem;color:var(--brass-ink);}
.sh-inst-hint{margin-top:4px;}
/* the arrow down to Safari's own button, under the screen (center: Share; right: the three dots) */
.sh-point{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding-top:2px;color:var(--brass-ink);pointer-events:none;}
.sh-point-right{align-items:flex-end;padding-right:2px;}
.sh-point-l{font:600 var(--fs-label)/1.3 var(--font);}
.sh-point svg{width:28px;height:36px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:sh-bob 1.6s var(--ease) infinite;}
@keyframes sh-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

@media (prefers-reduced-motion:reduce){
  .sh-choice,.sh-row,.sh-gap,.sh-quiet,.sh-instcard-go{transition:none;}
  .sh-point svg{animation:none;}
}

/* Settings' segmented controls: the 36 px segments get the same invisible 44 px band as chips */
.sh-seg-row .d-seg button{position:relative;}
.sh-seg-row .d-seg button::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--tap);transform:translateY(-50%);}

/* city type-ahead in the Add a city sheet */
.sh-typeahead{margin-top:8px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e2);overflow:hidden;}
.sh-tarow{display:flex;align-items:center;width:100%;min-height:var(--tap);padding:10px 16px;border:0;background:none;color:var(--ink);font:400 var(--fs-body-sm)/1.4 var(--font);text-align:left;cursor:pointer;}
.sh-tarow+.sh-tarow{border-top:1px solid var(--line);}
.sh-tarow:active{background:var(--well);}

/* selects in v45 sheets: the pressed field with the same caret as theme.css's legacy selects */
select.sh-select{-webkit-appearance:none;appearance:none;background-color:var(--well);background-image:var(--select-caret);background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;text-overflow:ellipsis;}

/* ---------- trip photo (tripphoto spec 4.6): the Home card, the row thumbs, the trip header ---------- */
/* a fixed 16:9 (or 40 px) frame before the image arrives, so nothing moves when it loads; the image fades in */
.sh-tphoto{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--well);}
.sh-tphoto img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 120ms var(--ease);}
.sh-tphoto img.is-in{opacity:1;}
/* the focal card's photo bleeds to the card's edges and top corners; a soft ink fade on its lower edge only */
.sh-tphoto-card{margin:-20px -20px 16px;border-radius:var(--r-lg) var(--r-lg) 0 0;}
.sh-tphoto-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(31,29,26,.16));pointer-events:none;}
/* a frame kept empty (the photo being found, or one that failed to load): the plain well, no scrim, nothing moves */
.sh-tphoto-card.is-empty::after{content:none;}
/* the trip header: the photo is content (flat); the camera is the one raised thing on it */
.sh-tphoto-fig{margin:4px 0 14px;}
.sh-tphoto-wrap{display:block;position:relative;}
.sh-tphoto-head{border-radius:var(--r-md);}
.sh-tphoto-cam{position:absolute;right:6px;bottom:6px;width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
.sh-tphoto-cam::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ground);box-shadow:var(--e1);transition:box-shadow 120ms var(--ease);}
.sh-tphoto-cam:active::before{box-shadow:var(--press);}
.sh-tphoto-cam .d-ic{position:relative;}
.sh-tphoto-cam:focus-visible{outline:2px solid var(--brass-ink);outline-offset:2px;}
/* the credit: quiet, one line. "Photo: <author>" links to the file page and gives way (ellipsis) to a long name; the
   license links to its deed and never shrinks. Each link's tap band is 44 px tall (and wide) without moving the text */
.sh-tphoto-credit{display:block;margin:6px 2px 0;font:400 var(--fs-micro)/1.4 var(--font);color:var(--ink-2);}
.sh-tphoto-credit-line{display:flex;align-items:center;max-width:100%;white-space:pre;}
.sh-tphoto-credit-line>*{flex:none;}
.sh-tphoto-credit a{min-width:44px;padding:14px 0;margin:-14px 0;color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px;}
.sh-tphoto-credit .sh-tphoto-src{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;}
.sh-tphoto-credit a:focus-visible{outline:2px solid var(--brass-ink);outline-offset:-12px;border-radius:4px;}
.sh-tphoto-credit.is-empty{visibility:hidden;}
/* no photo yet on the trip header: organizers and managers get one quiet way to add theirs, where the photo goes */
.sh-tphoto-add{display:inline-flex;min-height:var(--tap);gap:8px;padding:10px 4px;margin:0 0 4px -4px;font:500 var(--fs-label)/1.3 var(--font);color:var(--ink-2);}
/* Home rows: a 40 px round thumb, only on a row with a photo (or one being found) */
.sh-tphoto-thumb{width:40px;height:40px;aspect-ratio:auto;border-radius:50%;box-shadow:var(--in-sm);}
html[data-theme="dark"] .sh-tphoto img{filter:brightness(.9);}
html[data-theme="dark"] .sh-tphoto-card::after{background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.3));}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .sh-tphoto img{filter:brightness(.9);}
  html:not([data-theme="light"]) .sh-tphoto-card::after{background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.3));}}
/* the focal card is one button (was an article holding two buttons) */
.sh-focal{display:block;width:100%;margin:0;border:0;font:inherit;text-align:start;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow 120ms var(--ease);}
.sh-focal:active{box-shadow:var(--press);}
.sh-focal:focus-visible{outline:2px solid var(--brass-ink);outline-offset:3px;}
.sh-focal>span{display:block;}
.sh-focal>.sh-card-line,.sh-focal>.sh-cities,.sh-focal>.sh-focal-name{display:flex;}
.sh-focal-name{margin-top:8px;overflow-wrap:anywhere;align-items:center;gap:12px;}
.sh-focal-text{flex:1 1 auto;min-width:0;}
/* the chevron every way into a trip on Home has (rows, "Plan a new trip") */
.sh-focal-caret{flex:none;}
[dir="rtl"] .sh-focal-caret{transform:scaleX(-1);}
/* four classes on purpose: theme.css's .d-row:has(> .d-status):not(:has(.d-row-walk)) would otherwise win */
.d-row.d-on-road.sh-triprow.sh-has-thumb{grid-template-columns:40px minmax(0,1fr) auto 20px;gap:12px;}
/* a trip being opened (home.js openTrip): the card or row stays pressed and its chevron turns into a small brass
   ring until the trip is on screen, so a tap on a slow connection never looks dead */
.sh-focal[aria-busy="true"],.sh-triprow[aria-busy="true"]{box-shadow:var(--press);}
.sh-focal[aria-busy="true"] .sh-focal-caret,.sh-triprow[aria-busy="true"] .d-row-caret{color:transparent;border:2px solid var(--well);border-top-color:var(--brass-ink);border-radius:50%;animation:rot .9s linear infinite;}
@media (prefers-reduced-motion:reduce){.sh-tphoto img,.sh-focal,.sh-tphoto-cam::before{transition:none;}
  .sh-focal[aria-busy="true"] .sh-focal-caret,.sh-triprow[aria-busy="true"] .d-row-caret{animation-duration:2.4s;}}