/* One custom app on its own page (.ap-, .app-) and the five sample apps: the gauge (.gg-), the crew's day (.cr-), the morning numbers (.mp-),
   the customer portal (.pt-) and approvals (.ok-). Tokens: css/site.css.

   Every app is laid out on a screen 320 wide and scaled to fit, so sizes inside .ap-screen are that phone's own. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/inter-500.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/inter-700.woff2) format('woff2'); }

@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-mono-var.woff2) format('woff2'); }

/* The apps keep their own looks, so their own fonts and figures are set here. */
.ap-screen { --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.ap-screen .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.app-mount [hidden] { display: none !important; }


/* ---------- The page: the slim bar, a few words and one phone ---------- */

html.app, html.app body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--bg); }
html.app body { position: fixed; inset: 0; }
.app-stage {
  position: absolute;
  inset: 56px 0 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  width: 100%;
  max-width: calc(1200px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.app-words { display: grid; gap: 16px; justify-items: start; max-width: 30em; justify-self: end; }
.app-words p { color: var(--ink-2); text-wrap: pretty; }
.app-words .app-try { color: var(--ink); }
.app-try b { font-weight: 650; }
.app-turn { display: none; }
/* A phone on its side has no room for a phone. It says so, and the app is still there, small. */
@media (max-height: 500px) and (orientation: landscape) {
  .app-words { gap: 8px; }
  .app-words .app-try { display: none; }
  .app-turn { display: block; color: var(--ink) !important; font-weight: 600; }
}
.app-mount { position: relative; height: 100%; min-width: 0; display: grid; place-items: center; }

/* On a phone the words beside the app aren't there, so one plain line says what it is. It takes its own room above the app and covers nothing.
   A very short phone needs that room for the app. */
.app-note { display: none; }
@media (max-width: 760px) and (min-height: 600px) {
  .app-note {
    display: block;
    flex: none;
    order: -1;
    padding: 9px 16px;
    background: #08090e;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    line-height: 1.3;
    color: var(--ink);
  }
}

.ap-device {
  position: relative;
  padding: var(--bez, 10px);
  border-radius: var(--dr, 50px);
  background: #15171c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.ap-glass {
  position: relative;
  width: var(--sw, 300px);
  height: var(--sh, 650px);
  border-radius: var(--gr, 40px);
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.ap-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: calc(var(--lh, 693.33) * 1px);
  transform: translateY(var(--up, 0)) scale(var(--s, 1));
  transform-origin: 0 0;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.3;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ap-host { position: absolute; inset: 0; }

.ap-status {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 13px 0 26px;
  color: var(--st, #fff);
  pointer-events: none;
}
.ap-clock { font: 650 16px/1 var(--font-sans); letter-spacing: -.01em; }
.ap-island { position: absolute; left: 50%; top: 11px; width: 84px; height: 25px; margin-left: -42px; border-radius: 14px; background: #000; }
.ap-homebar { position: absolute; z-index: 45; left: 50%; bottom: 7px; width: 112px; height: 4.5px; margin-left: -56px; border-radius: 3px; pointer-events: none; }

/* A notification dropping in from the top of the phone. */
.ap-banner {
  position: absolute;
  z-index: 50;
  left: 9px;
  right: 9px;
  top: 42px;
  opacity: 0;
  transform: translateY(-120%);
  transition: transform .42s var(--ease-out), opacity .3s;
  pointer-events: none;
  font-family: 'Inter', var(--font-sans);
}
.ap-banner.is-on { opacity: 1; transform: none; }
.ap-banner-card {
  display: grid;
  gap: 2px;
  padding: 11px 14px;
  border-radius: 18px;
  background: rgba(250, 250, 252, .97);
  color: #14171c;
}
.ap-banner-card b { font-size: 16.5px; font-weight: 700; line-height: 1.2; }
.ap-banner-card span { font-size: 16px; line-height: 1.25; color: #3c434d; }

/* On a phone the app takes the whole screen under the bar. */
html.ap-full .app-stage { display: block; padding: 0; max-width: none; }
html.ap-full .app-words { display: none; }
html.ap-full .app-mount { display: block; }
html.ap-full .ap-device { padding: 0; border-radius: 0; background: #000; box-shadow: none; }
html.ap-full .ap-glass { border-radius: 0; }
html.ap-full .ap-island, html.ap-full .ap-clock, html.ap-full .ap-homebar { display: none; }
@media (max-width: 760px) {
  .app-stage, html.ap-full .app-stage { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; max-width: none; }
  .app-words { display: none; }
  .app-mount { display: block; flex: 1 1 0; height: auto; min-height: 0; }
}

/* ==================== 1. The tank gauge ==================== */

.gg { position: absolute; inset: 0; overflow: hidden; background: #ffc800; color: #17120a; }
.gg-canvas { position: absolute; left: 0; top: 0; display: block; }

.gg-head { position: absolute; z-index: 6; left: 14px; right: 14px; top: 47px; display: grid; gap: 7px; }
.gg-brand { display: flex; align-items: baseline; justify-content: space-between; }
.gg-brand b { font-size: 29px; font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.gg-brand span { font: 600 15.5px/1 var(--font-mono); }
.gg-tanks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gg-tank {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 7px;
  border: 2.5px solid #17120a;
  border-radius: 13px;
  font-size: 14.5px;
  font-weight: 750;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: #17120a;
  transition: background-color .15s, color .15s;
}
.gg-tank i { position: relative; flex: none; width: 13px; height: 32px; border: 2px solid currentColor; border-radius: 4px; overflow: hidden; }
.gg-tank u { position: absolute; left: 0; right: 0; bottom: 0; background: currentColor; transition: height .3s; }
.gg-tank em { position: absolute; display: none; right: -6px; top: -8px; width: 22px; height: 22px; border-radius: 50%; background: #17120a; color: #ffc800; padding: 4px; box-shadow: 0 0 0 2px #ffc800; }
.gg-tank.is-done em { display: block; }
.gg-tank.is-on { background: #17120a; color: #ffc800; }

.gg-read { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 176px 72px 0 56px; pointer-events: none; z-index: 2; }
.gg-read-above { color: #17120a; }
.gg-read-below { color: #ffc800; }
.gg-num { font-size: 72px; font-weight: 800; line-height: .96; letter-spacing: -.055em; transform: scaleX(.84); transform-origin: 0 50%; white-space: nowrap; }
.gg-num small { font-size: .62em; font-weight: 800; letter-spacing: -.03em; }
.gg-bbl { margin-top: 6px; font-size: 21px; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; }
.gg-delta { margin-top: 1px; font: 600 17.5px/1.2 var(--font-mono); letter-spacing: -.03em; }
.gg-was { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 500 15.5px/1.2 var(--font-mono); letter-spacing: -.03em; }
.gg-was i { display: block; width: 18px; height: 0; border-top: 2px dashed #ff3d00; }
/* A short phone: only the reading and the barrels, so the oil line isn't running through a list of words. */
.is-short .gg-delta, .is-short .gg-was { display: none; }
.is-short .gg-read { padding-top: 166px; }
.is-short .gg-num { font-size: 62px; }
.is-short .gg-bbl { margin-top: 3px; font-size: 20px; }
/* A tiny one: the brand row goes, so the reading sits clear above the oil line. */
.is-tiny .gg-brand { display: none; }
.is-tiny .gg-read { padding-top: 112px; }
.is-tiny .gg-num { font-size: 56px; }


.gg-surface { position: absolute; z-index: 4; left: 0; right: 0; touch-action: none; cursor: ns-resize; outline-offset: -5px; }
.gg-handle {
  position: absolute;
  z-index: 5;
  right: 11px;
  top: 0;
  width: 50px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #fff;
  color: #17120a;
  box-shadow: 0 0 0 2.5px #17120a, 0 8px 20px rgba(0, 0, 0, .4);
  pointer-events: none;
}
.gg-handle svg { width: 26px; height: 26px; }
.gg-coach {
  position: absolute;
  z-index: 5;
  right: 11px;
  top: 0;
  padding: 5px 10px;
  border-radius: 10px;
  background: #fff;
  color: #17120a;
  font-size: 15.5px;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 0 0 2px #17120a;
  pointer-events: none;
  transition: opacity .3s;
}
.gg-coach.is-off { opacity: 0; }

.gg-flag {
  position: absolute;
  z-index: 6;
  left: 56px;
  right: 72px;
  bottom: 186px;
  min-height: 56px;
  padding: 7px 11px;
  border-radius: 13px;
  background: #ff3d00;
  color: #fff;
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -.01em;
  text-align: left;
}
.gg-flag.is-ok { background: #fff; color: #17120a; }

.gg-foot { position: absolute; z-index: 6; left: 14px; right: 14px; bottom: 25px; display: grid; gap: 7px; }
.gg-nudge { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.gg-nudge-btn { height: 56px; border: 2.5px solid #ffc800; border-radius: 15px; color: #ffc800; font: 650 21px/1 var(--font-mono); letter-spacing: -.04em; }
.gg-nudge-btn:active { background: #ffc800; color: #17120a; }
.gg-go { height: 60px; border-radius: 17px; background: #ffc800; color: #17120a; font-size: 23px; font-weight: 800; letter-spacing: -.03em; }
.gg-go:active { transform: scale(.985); }

.gg-ticket {
  position: absolute;
  z-index: 20;
  left: 10px;
  right: 10px;
  top: 60px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 14px 24px;
  background: #fbf8ef;
  color: #141210;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .5);
  transform: translateY(105%);
  transition: transform .58s cubic-bezier(.16, .84, .24, 1);
}
.gg-ticket::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 10px;
  background:
    linear-gradient(135deg, transparent 50%, #fbf8ef 50%) 0 0 / 14px 10px repeat-x,
    linear-gradient(225deg, transparent 50%, #fbf8ef 50%) 0 0 / 14px 10px repeat-x;
}
.gg-ticket.is-open { transform: none; }
.gg-ticket-body { flex: none; font-family: var(--font-mono); }
.gg-tk-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 17.5px; letter-spacing: -.03em; }
.gg-tk-top b { font-weight: 800; }
.gg-tk-top span { font-size: 15px; font-weight: 700; color: #1c56d6; }
.gg-tk-co { margin-top: 2px; font-size: 15px; letter-spacing: -.04em; color: #4b463d; }
.gg-tk-rows { width: 100%; margin-top: 8px; border-collapse: collapse; border-top: 1.5px dashed #141210; font-size: 15px; letter-spacing: -.045em; }
.gg-tk-rows th { padding: 5px 0; text-align: left; font-weight: 600; }
.gg-tk-rows td { padding: 5px 0 5px 7px; text-align: right; white-space: nowrap; }
.gg-tk-rows .is-bad { color: #d23a12; font-weight: 700; }
.gg-tk-total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 7px; border-top: 1.5px dashed #141210; font-size: 15.5px; font-weight: 600; letter-spacing: -.04em; }
.gg-tk-total b { font-size: 22px; font-weight: 800; letter-spacing: -.05em; white-space: nowrap; }
.gg-tk-worth { font-size: 15px; letter-spacing: -.04em; color: #4b463d; }
.gg-sign { position: relative; flex: 1 1 60px; min-height: 66px; overflow: hidden; border-bottom: 2px solid #141210; touch-action: none; cursor: crosshair; }
.gg-sign-canvas { position: absolute; left: 0; top: 0; display: block; }
.gg-sign-hint { position: absolute; left: 0; bottom: 5px; font-size: 16px; font-weight: 500; color: #6d6659; pointer-events: none; }
.gg-sign.is-signed .gg-sign-hint { opacity: 0; }
.gg-ticket-btns { flex: none; display: grid; grid-template-columns: auto 1fr; gap: 7px; }
.gg-tbtn { height: 56px; padding: 0 18px; border-radius: 15px; background: #141210; color: #ffc800; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.gg-tbtn:disabled { background: #d9d4c4; color: #6d6659; cursor: not-allowed; }
.gg-tbtn-ghost { background: none; color: #141210; box-shadow: inset 0 0 0 2.5px #141210; font-weight: 700; }

.gg-sent {
  position: absolute;
  z-index: 22;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 118px 18px 25px;
  background: #17120a;
  color: #ffc800;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s .1s;
}
.gg-sent.is-open { opacity: 1; pointer-events: auto; }
.gg-stamp { display: inline-block; padding: 3px 16px; border: 6px solid #ffc800; border-radius: 12px; font-size: 62px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; transform: rotate(-7deg); }
.gg-sent.is-open .gg-stamp { animation: gg-stamp .36s cubic-bezier(.2, 1.5, .4, 1) .22s both; }
@keyframes gg-stamp { from { opacity: 0; transform: rotate(-7deg) scale(1.9); } to { opacity: 1; transform: rotate(-7deg); } }
.gg-sent-big { margin-top: 26px; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.gg-sent-p { margin-top: 10px; font-size: 19px; font-weight: 500; line-height: 1.28; color: #fff4c8; }
.gg-again { width: 100%; }


/* ==================== 2. The crew's day ==================== */

.cr { position: absolute; inset: 0; overflow: hidden; background: #1a66cc; color: #fff; }
.cr-canvas { position: absolute; left: 0; top: 0; display: block; }
.cr-flash { position: absolute; z-index: 30; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cr-flash.is-on { animation: cr-flash .42s ease-out; }
@keyframes cr-flash { 0% { opacity: .95; } 100% { opacity: 0; } }

.cr-head { position: absolute; z-index: 6; left: 18px; right: 18px; top: 48px; display: flex; align-items: baseline; justify-content: space-between; pointer-events: none; text-shadow: 0 1px 10px rgba(6, 20, 50, .4); }
.cr-who { display: flex; align-items: baseline; gap: 7px; }
.cr-who b { font-size: 18.5px; font-weight: 750; letter-spacing: -.02em; }
.cr-who span { font-size: 16.5px; font-weight: 500; }
.cr-done-count { font-size: 16.5px; font-weight: 600; }
.cr-segs { position: absolute; z-index: 6; left: 18px; right: 18px; top: 77px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; pointer-events: none; }
.cr-segs i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .34); }
.cr-segs i.is-done { background: #fff; }
.cr-segs i.is-now { background: #ffe08a; box-shadow: 0 0 8px rgba(255, 224, 138, .9); }

.cr-pager { position: absolute; z-index: 5; inset: 0; overflow: hidden; touch-action: pan-y; cursor: grab; }
.cr-pager:active { cursor: grabbing; }
.cr-track { display: flex; width: calc(320px * 6); height: 100%; }
.cr-page { position: relative; flex: none; width: 320px; height: 100%; padding: 90px 18px 0; }
.cr-card { text-shadow: 0 1px 5px rgba(6, 20, 50, .3); }
.cr-timerow { display: flex; align-items: flex-start; justify-content: space-between; }
.cr-time { font-size: 60px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.cr-time small { margin-left: 5px; font-size: 19px; font-weight: 700; letter-spacing: 0; }
.cr-title { margin-top: 4px; font-size: 31px; font-weight: 750; line-height: 1.04; letter-spacing: -.03em; }
.cr-title-big { font-size: 42px; margin-top: 8px; }
.cr-kicker { font-size: 17px; font-weight: 600; }
.cr-end { padding-top: 26px; text-shadow: 0 1px 14px rgba(6, 10, 40, .5); }
.cr-place { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 3px; font-size: 19px; font-weight: 550; letter-spacing: -.01em; }
.cr-total { font-weight: 750; }
.cr-note { margin-top: 6px; font-size: 18px; line-height: 1.26; }
.cr-load { margin-top: 3px; font-size: 18px; font-weight: 650; }
.cr-said { margin-top: 7px; padding: 7px 10px; border-radius: 12px; background: rgba(8, 26, 60, .42); font-size: 17px; line-height: 1.2; text-shadow: none; }
.cr-said b { display: block; font-size: 15px; font-weight: 700; color: #ffe08a; }
.cr-said-ok b { color: #9dffd0; }
.cr-said-no b { color: #ffb4a8; }
.cr-partlist { margin-top: 5px; font-size: 16.5px; font-weight: 550; }
.cr-tools { display: flex; gap: 7px; margin-top: 9px; }
.cr-tools button {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 52px;
  border-radius: 16px;
  background: #143a7a;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-shadow: none;
}
.cr-tools svg { width: 19px; height: 19px; flex: none; }
.cr-tools button:active { background: #24528f; }
.cr-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 7px; }
.cr-picker button { height: 54px; border-radius: 14px; background: #fff; color: #0d1c33; font-size: 15.5px; font-weight: 700; line-height: 1.1; text-shadow: none; }
.cr-picker span { display: block; font-weight: 500; font-size: 15px; }
.cr-ask { display: block; width: 100%; min-height: 56px; margin-top: 8px; padding: 8px 12px; border-radius: 14px; background: #ffe08a; color: #2c1d00; font-size: 16.5px; font-weight: 550; line-height: 1.16; text-align: left; text-shadow: none; }
.cr-ask b { font-weight: 800; }
.cr-photos { display: flex; gap: 0; padding: 2px 3px 0 0; }
.cr-photo { width: 44px; height: 54px; margin-left: -14px; padding: 3px 3px 9px; background: #fff; box-shadow: 0 5px 12px rgba(0, 0, 0, .35); transform: rotate(var(--r, 0deg)); }
.cr-photo canvas { display: block; width: 100%; height: 100%; }
.cr-stamp { position: absolute; right: 18px; top: 150px; padding: 1px 12px; border: 4px solid #9dffd0; border-radius: 9px; color: #9dffd0; font-size: 30px; font-weight: 800; letter-spacing: -.01em; transform: rotate(-9deg); text-shadow: none; }
.cr-actions { position: absolute; left: 18px; right: 18px; bottom: 26px; }
.cr-status { margin-bottom: 7px; font-size: 18px; font-weight: 700; text-align: center; letter-spacing: -.01em; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.cr-action { display: block; width: 100%; height: 62px; border-radius: 20px; background: #fff; color: #0d1c33; font-size: 24px; font-weight: 800; letter-spacing: -.03em; box-shadow: 0 12px 26px rgba(0, 10, 30, .34); }
.cr-action:active { transform: scale(.985); }
.cr-action.is-ghost { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }

.cr-nav { position: absolute; z-index: 8; bottom: 92px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(8, 20, 44, .36); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.cr-nav svg { width: 19px; height: 19px; }
.cr-nav:disabled { opacity: .3; }
.cr-nav-prev { left: 14px; }
.cr-nav-next { right: 14px; }
.cr-coach { position: absolute; z-index: 7; left: 50%; bottom: 244px; width: max-content; padding: 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, .92); color: #0d1c33; font-size: 16.5px; font-weight: 650; pointer-events: none; transform: translateX(-50%); transition: opacity .3s; }
.cr-coach.is-off { opacity: 0; }
.ap-screen-crew .cr-coach { bottom: calc(150px + max(0px, var(--lh, 693.33) * 1px - 560px) * .7); }

/* A short phone. The job's words stay above the scene, on a calm band of sky, and the truck has the road to itself. */
.is-short .cr-page { padding-top: 82px; }
.is-short .cr-page::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 290px; background: linear-gradient(180deg, rgba(8, 34, 84, .62) 74%, rgba(8, 34, 84, 0)); pointer-events: none; }
.is-short .cr-card { text-shadow: none; }
.is-short .cr-time { font-size: 48px; }
.is-short .cr-time small { font-size: 17px; }
.is-short .cr-title { margin-top: 2px; font-size: 27px; }
.is-short .cr-place { margin-top: 2px; font-size: 17px; }
.is-short .cr-note { margin-top: 3px; font-size: 16.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-short .cr-load { margin-top: 1px; font-size: 16.5px; }
.is-short .cr-tools { margin-top: 7px; }
.is-short .cr-tools button { height: 42px; border-radius: 13px; font-size: 16px; }
.is-short .cr-stamp { top: 118px; }
.ap-screen-crew.is-short .cr-coach { bottom: 95px; padding: 4px 11px; font-size: 16px; }
.is-tiny .cr-page { padding-top: 86px; }
.is-tiny .cr-page::before { height: 238px; }
.is-tiny .cr-time { font-size: 38px; }
.is-tiny .cr-title { font-size: 23px; margin-top: 0; }
.is-tiny .cr-place { font-size: 16px; margin-top: 0; }
.is-tiny .cr-note, .is-tiny .cr-load { display: none; }
.is-tiny .cr-tools { margin-top: 5px; }
.is-tiny .cr-tools button { height: 40px; }


/* ==================== 3. The morning numbers ==================== */

.mp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: 46px;
  background: #f3eee2;
  color: #16130f;
}
.mp-mast { flex: none; margin: 0 14px; border-top: 3px double #16130f; }
.mp-mast-name { padding: 5px 0 3px; font-family: var(--font-serif); font-style: italic; font-weight: 200; font-size: 50px; line-height: 1; letter-spacing: -.02em; text-align: center; -webkit-text-stroke: .018em currentColor; }
.mp-mast-row { display: flex; justify-content: space-between; padding: 3px 0; border-top: 1px solid #16130f; border-bottom: 1px solid #16130f; font: 500 15px/1.2 var(--font-mono); letter-spacing: -.03em; }
.mp-wrap { position: relative; flex: 1 1 auto; min-height: 0; perspective: 1000px; perspective-origin: 0 50%; overflow: hidden; }
.mp-page { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 11px 14px 0; background: #f3eee2; }
.mp-h { flex: none; font-family: var(--font-serif); font-style: italic; font-weight: 200; font-size: 39px; line-height: 1; letter-spacing: -.022em; -webkit-text-stroke: .016em currentColor; text-wrap: balance; }
.mp-body { flex: none; display: grid; gap: 6px; margin-top: 8px; font: 400 19px/1.3 Georgia, 'Times New Roman', serif; }
.mp-body b { font-weight: 700; }
.mp-hl {
  position: relative;
  display: inline;
  padding: 0 1px;
  background: linear-gradient(transparent 58%, #ffd84a 58%, #ffd84a 94%, transparent 94%);
  font: inherit;
  color: inherit;
  text-decoration: underline dashed 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
  user-select: none;
}
.mp-hl::after { content: ''; position: absolute; inset: -11px -3px; }
.mp-fig { font-family: var(--font-sans); font-weight: 650; font-size: .95em; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
button.mp-hl.mp-fig { font-family: var(--font-sans); font-weight: 650; font-size: .95em; letter-spacing: -.02em; }
.mp-more { padding-left: 9px; border-left: 3px solid #d9391f; font-size: 18px; line-height: 1.26; color: #322c22; animation: mp-in .3s var(--ease-out) both; }
.mp-new { padding: 6px 9px; background: #16130f; color: #f3eee2; font-size: 17.5px; line-height: 1.24; animation: mp-in .4s var(--ease-out) both; }
.mp-sign { font-style: italic; }
.mp-do { justify-self: start; min-height: 54px; padding: 0 16px; border-radius: 4px; background: #d9391f; color: #fff; font: 700 18px/1 var(--font-sans); letter-spacing: -.01em; }
@keyframes mp-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.mp-pic { position: relative; flex: 1 1 60px; min-height: 60px; margin-top: 9px; overflow: hidden; }
.mp-canvas { position: absolute; left: 0; top: 0; display: block; }
.mp-nav { flex: none; display: grid; grid-template-columns: auto 1fr; gap: 7px; padding: 8px 14px 24px; background: #f3eee2; }
.mp-btn { height: 56px; padding: 0 18px; border-radius: 4px; background: #16130f; color: #f3eee2; font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.mp-btn:disabled { opacity: .3; }
.mp-btn-ghost { background: none; color: #16130f; box-shadow: inset 0 0 0 2px #16130f; }
.mp-ghost { z-index: 3; pointer-events: none; transform-origin: 0 50%; backface-visibility: hidden; box-shadow: 8px 0 24px rgba(40, 30, 10, .22); }
.mp-ghost-next { animation: mp-turn .62s cubic-bezier(.45, .05, .55, .95) both; }
.mp-ghost-prev { animation: mp-unturn .42s ease-out both; }
@keyframes mp-turn { to { transform: rotateY(-108deg); } }
@keyframes mp-unturn { to { opacity: 0; transform: translateX(26px); } }


/* ==================== 4. The customer portal ==================== */

.pt { position: absolute; inset: 0; display: flex; flex-direction: column; background: #dce8d4; color: #15202b; font-family: 'Inter', var(--font-sans); }
.pt-map { position: relative; flex: 1 1 auto; min-height: 120px; overflow: hidden; }
.pt-map::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 70px; background: linear-gradient(180deg, rgba(232, 240, 226, .96) 36%, rgba(232, 240, 226, 0)); pointer-events: none; }
.pt-canvas { position: absolute; left: 0; top: 0; display: block; }
.pt-tag, .pt-you {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(30, 50, 40, .28);
}
.pt-tag { background: #15202b; color: #fff; }
.pt-you { background: #ff5b45; color: #fff; }
.pt-sheet {
  position: relative;
  z-index: 3;
  flex: none;
  height: 354px;
  max-height: 66%;
  margin-top: -24px;
  padding: 16px 16px 26px;
  border-radius: 26px 26px 0 0;
  background: #fff;
  box-shadow: 0 -12px 30px rgba(30, 50, 40, .2);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.pt-sheet::-webkit-scrollbar { display: none; }
.pt-sheet-in { display: flex; flex-direction: column; min-height: 100%; }
.pt-headline { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.pt-headline b { color: #ff5b45; font-weight: 700; }
.pt-body { flex: 1 1 auto; }
.pt-sub { margin-top: 4px; font-size: 17px; font-weight: 500; line-height: 1.26; color: #46525f; letter-spacing: -.01em; }
.pt-sub b { color: #15202b; font-weight: 700; }
.pt-gal { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; padding: 3px; border-radius: 30px; background: #f2f4f6; }
.pt-step { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #15202b; box-shadow: 0 2px 6px rgba(20, 30, 40, .14); }
.pt-step svg { width: 20px; height: 20px; }
.pt-gal-mid { text-align: center; line-height: 1.12; }
.pt-gal-mid b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
.pt-gal-mid span { font-size: 15px; font-weight: 500; color: #5a6672; }
.pt-chat { display: grid; gap: 3px; margin-top: 6px; }
.pt-chat:empty { display: none; }
.pt-bub { justify-self: start; max-width: 86%; padding: 5px 11px; border-radius: 15px; background: #eceff3; font-size: 15.5px; font-weight: 500; line-height: 1.18; animation: ap-pop .3s var(--ease-out) both; }
.pt-bub.is-me { justify-self: end; background: #ff5b45; color: #fff; }
.pt-chat-h { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; min-height: 26px; font-size: 15px; font-weight: 600; color: #5a6672; }
.pt-chips { display: flex; gap: 5px; margin-top: 3px; }
.pt-chips button { flex: 1 1 auto; height: 48px; padding: 0 8px; border-radius: 24px; box-shadow: inset 0 0 0 1.5px #cfd5dc; color: #15202b; font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
.pt-chips button:active { background: #f2f4f6; }
.pt-skip { position: relative; font-size: 15px; font-weight: 500; color: #5a6672; text-decoration: underline; text-underline-offset: 2px; }
.pt-skip::after { content: ''; position: absolute; inset: -10px -6px; }
.pt-tank { height: 26px; margin-top: 9px; border-radius: 13px; background: #eceff3; overflow: hidden; box-shadow: inset 0 0 0 1.5px #d6dae0; }
.pt-tank i { display: block; height: 100%; width: 0; border-radius: 13px; background: linear-gradient(90deg, #ff8d6d, #ff5b45); }
.pt-slide { position: relative; display: flex; align-items: center; justify-content: center; height: 64px; margin-top: 12px; border-radius: 32px; background: #15202b; color: #fff; overflow: hidden; }
.pt-slide-label { padding-left: 38px; font-size: 17.5px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
.pt-thumb { position: absolute; left: 4px; top: 4px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #ff5b45; color: #fff; touch-action: none; transition: transform .28s var(--ease-out); cursor: grab; }
.pt-thumb svg { width: 24px; height: 24px; }
.pt-receipt { margin-top: 10px; display: grid; gap: 0; }
.pt-receipt p { display: flex; align-items: center; justify-content: space-between; min-height: 40px; border-top: 1px solid #e8ebef; font-size: 16.5px; font-weight: 500; letter-spacing: -.015em; }
.pt-receipt b { font-weight: 700; }
.pt-receipt svg { display: block; width: 22px; height: 22px; color: #178a52; }
.pt-receipt .is-paid b { color: #178a52; }
.pt-bill { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; padding-top: 7px; border-top: 1px solid #e8ebef; }
.pt-bill b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.pt-bill span { font-size: 15.5px; font-weight: 500; color: #46525f; letter-spacing: -.015em; }
.pt-bill button { flex: none; height: 46px; padding: 0 16px; border-radius: 23px; box-shadow: inset 0 0 0 1.5px #ff5b45; color: #e23f28; font-size: 16px; font-weight: 700; }
.pt-bill.is-nudged button { background: #ff5b45; color: #fff; }
.pt-bill.is-paid svg { width: 26px; height: 26px; color: #178a52; }
/* A tiny phone: the bill would be cut off by the bottom of the screen, so the truck gets the room. */
.is-tiny .pt-bill { display: none; }


/* ==================== 5. Approvals ==================== */

.ok { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(130% 62% at 50% 0%, #0f3b2c 0%, #06190f 62%, #030b08 100%); color: #f3ead0; }
.ok-tint { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .14s; }
.ok-tint-yes { background: radial-gradient(90% 60% at 80% 50%, rgba(46, 220, 140, .55), transparent 80%); }
.ok-tint-no { background: radial-gradient(90% 60% at 20% 50%, rgba(255, 70, 50, .5), transparent 80%); }
.ok-head { position: absolute; z-index: 4; left: 16px; right: 16px; top: 47px; }
.ok-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.ok-title h3 { font-family: var(--font-serif); font-style: italic; font-weight: 200; font-size: 29px; line-height: 1; letter-spacing: -.02em; -webkit-text-stroke: .016em currentColor; }
.ok-undo { flex: none; min-width: 58px; min-height: 44px; border-radius: 22px; box-shadow: inset 0 0 0 1.5px rgba(232, 206, 136, .6); color: #e8ce88; font-size: 15.5px; font-weight: 600; }
.ok-limit { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 3px; font-size: 16.5px; font-weight: 500; }
.ok-limit b { font: 700 18px/1 var(--font-mono); letter-spacing: -.04em; color: #f6df9c; }
.ok-limit-line { display: block; height: 3px; margin-top: 5px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.ok-limit-line u { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #b78833, #f9de9a); transition: width .5s var(--ease-out); }
.ok-limit-line.is-low u { background: #ff6a5c; }

.ok-stack { position: absolute; z-index: 3; left: 24px; right: 24px; top: 144px; height: clamp(250px, calc(var(--lh, 693.33) * 1px - 322px), 382px); perspective: 1100px; }
.ok-note { position: absolute; inset: 0; z-index: calc(10 - var(--d)); transform: translate3d(0, calc(var(--d) * 11px), 0) scale(calc(1 - var(--d) * .05)); transform-origin: 50% 100%; transition: transform .3s var(--ease-out); touch-action: pan-y; cursor: grab; outline-offset: 3px; }
.ok-note.is-drag { transition: none; cursor: grabbing; }
.ok-note.is-flying { transition: transform .34s cubic-bezier(.4, 0, .8, .7); }
.ok-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .52s cubic-bezier(.3, .9, .3, 1); }
.ok-note.is-back .ok-inner { transform: rotateY(180deg); }
.ok-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 22px 21px 20px; border-radius: 13px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 26px 50px -14px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(232, 206, 136, .4); background: #0c2e23; }
.ok-back { transform: rotateY(180deg); }
/* Safari can show the back of the check through the front, mirrored. So the face turned away is hidden outright, half way through the turn. */
.ok-face { transition: visibility 0s .13s; }
.ok-note:not(.is-back) .ok-back, .ok-note.is-back .ok-face:not(.ok-back) { visibility: hidden; }
.ok-engrave { position: absolute; left: 0; top: 0; display: block; }
.ok-face > *:not(.ok-engrave) { position: relative; }
.ok-serial { display: flex; justify-content: space-between; font: 500 15px/1 var(--font-mono); letter-spacing: -.02em; color: #e8ce88; }
.ok-payto { margin-top: 15px; font: 500 15px/1 var(--font-mono); color: #e8ce88; }
.ok-payee { margin-top: 4px; font-family: var(--font-serif); font-style: italic; font-weight: 200; font-size: 30px; line-height: 1.04; letter-spacing: -.01em; color: #fff; -webkit-text-stroke: .014em currentColor; }
.ok-amount {
  margin-top: auto;
  font-size: 60px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.055em;
  background: linear-gradient(170deg, #fff2c6 10%, #e9bd60 52%, #b78833 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ok-what { margin-top: 7px; font-size: 19px; font-weight: 600; line-height: 1.18; letter-spacing: -.015em; color: #fff; }
.ok-from { margin-top: 3px; font-size: 16.5px; font-weight: 500; color: #d5e5da; }
.ok-stamp {
  position: absolute !important;
  left: 50%;
  top: 43%;
  padding: 2px 20px;
  border: 5px solid currentColor;
  border-radius: 14px;
  background: rgba(3, 14, 10, .58);
  font-size: 58px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .01em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-13deg) scale(var(--k, 1));
}
.ok-stamp-yes { color: #79ffb8; }
.ok-stamp-no { color: #ff7a6d; transform: translate(-50%, -50%) rotate(11deg) scale(var(--k, 1)); }
.ok-back-in { display: grid; gap: 3px; align-content: start; overflow: hidden; }
/* A short phone gets a smaller check, so the back gets smaller words and all of them still fit. */
.ok-back .ok-why { font-size: clamp(14.5px, calc((var(--lh, 693.33) * 1px - 322px) * .06), 17px); line-height: 1.22; }
.ok-back-k { margin-top: 7px; font: 500 15px/1.1 var(--font-mono); color: #e8ce88; }
.ok-back-k:first-child { margin-top: 0; }
.ok-why { font-size: 17.5px; font-weight: 500; line-height: 1.24; color: #fff; }

.ok-coach { position: absolute; z-index: 4; left: 0; right: 0; bottom: 96px; text-align: center; font: 500 15.5px/1.1 var(--font-mono); letter-spacing: -.02em; color: #e8ce88; pointer-events: none; transition: opacity .3s; }
.ok-coach.is-off { opacity: 0; }
.ok-foot { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ok-foot.is-off { visibility: hidden; }
.ok-btn { height: 60px; border-radius: 18px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ok-btn-no { box-shadow: inset 0 0 0 2px #ff7a6d; color: #ff9a8f; }
.ok-btn-yes { background: linear-gradient(180deg, #f9de9a, #e9bd60); color: #1a1204; }
.ok-btn:active { transform: scale(.98); }
/* A short phone: the check, the words under it and the buttons all pull together, so nothing sits on anything else. */
.is-short .ok-title h3 { font-size: 23px; }
.is-short .ok-stack { top: 132px; }
.is-short .ok-note { transform: translate3d(0, calc(var(--d) * 8px), 0) scale(calc(1 - var(--d) * .05)); }
.is-short .ok-coach { bottom: 82px; }
.is-short .ok-foot { bottom: 14px; }
/* A tiny one: a smaller check with the small print gone. The buttons say what to do, so the hint goes too. */
.is-tiny .ok-coach { display: none; }
.is-tiny .ok-stack { top: 124px; height: clamp(190px, calc(var(--lh, 693.33) * 1px - 222px), 250px); }
.is-tiny .ok-face { padding: 14px 18px 12px; }
.is-tiny .ok-payto { display: none; }
.is-tiny .ok-payee { margin-top: 10px; font-size: 27px; }
.is-tiny .ok-amount { font-size: 52px; }
.ok-clear { position: absolute; z-index: 3; left: 24px; right: 24px; top: 150px; bottom: 90px; display: flex; flex-direction: column; justify-content: center; gap: 12px; text-align: center; }
.ok-clear-big { font-family: var(--font-serif); font-style: italic; font-weight: 200; font-size: 44px; line-height: 1.02; color: #f6df9c; -webkit-text-stroke: .016em currentColor; }
.ok-clear-p { font-size: 19px; line-height: 1.3; font-weight: 500; }


/* ---------- Reduced motion: everything changes straight away ---------- */

@media (prefers-reduced-motion: reduce) {
  .mp-more, .mp-new, .pt-bub, .gg-sent.is-open .gg-stamp { animation: none; }
  .ap-banner, .gg-ticket, .gg-sent, .gg-tank, .gg-tank u, .ok-note, .ok-inner, .ok-tint, .ok-limit-line u, .pt-thumb, .gg-coach, .cr-coach, .ok-coach, .ok-face { transition: none; }
  .mp-ghost, .cr-flash.is-on { animation: none; display: none; }
}