/* Courier King — brand layer.
   Tailwind does the work; this is the small set of things it cannot express:
   the palette, the numeral treatment, and the crown mark.

   Direction: a working tool, not a lifestyle app. Near-black, high contrast,
   one gold accent. The price is the hero on every surface it appears on —
   $25.99 is the entire proposition, so it is set large, in a tabular face,
   and never crowded. */

:root {
  --ck-bg: #0b0c0e;
  --ck-surface: #141619;
  --ck-surface-2: #1c1f24;
  --ck-line: #282c33;
  --ck-text: #f4f5f7;
  --ck-muted: #9aa1ad;
  --ck-gold: #e8b33d;
  --ck-gold-dim: #8a6a22;
  --ck-green: #4ade80;
  --ck-red: #f87171;
}

html, body {
  background: var(--ck-bg);
  color: var(--ck-text);

  /* Both of these exist for the native WebView, not the browser.
   *
   * WKWebView resizes text on its own unless told not to, which widens
   * content and pushed the driver board's document to 470 points on a
   * 440-point screen — the payout, right-aligned, was clipped to "$20.0".
   * Chrome at the same width showed a clean 440 with nothing overflowing,
   * so this was only visible by reading element bounds inside the real app.
   *
   * overflow-x is the belt to that braces: a phone should never scroll
   * sideways, and if some future card does overflow it should be clipped
   * at the container rather than dragging the whole document wider and
   * cutting off whatever sits on the right. BUILD_LIST finding #30. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Money and distances are compared down a column constantly — in the board, the
   quote list, the statement. Tabular figures keep them aligned. */
.ck-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

.ck-display {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  font-weight: 650;
}

.ck-head { letter-spacing: -0.035em; font-weight: 640; }

.ck-card {
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: 14px;
}

.ck-card-2 { background: var(--ck-surface-2); border: 1px solid var(--ck-line); border-radius: 12px; }

.ck-gold { color: var(--ck-gold); }
.ck-muted { color: var(--ck-muted); }

.ck-btn {
  background: var(--ck-gold);
  color: #17130a;
  font-weight: 620;
  border-radius: 11px;
  padding: 0.78rem 1.1rem;
  transition: filter .14s ease, transform .14s ease;
}
.ck-btn:hover { filter: brightness(1.07); }
.ck-btn:active { transform: translateY(1px); }
.ck-btn:disabled { opacity: .45; filter: none; transform: none; cursor: not-allowed; }

.ck-btn-ghost {
  border: 1px solid var(--ck-line);
  color: var(--ck-text);
  border-radius: 11px;
  padding: 0.78rem 1.1rem;
  font-weight: 560;
  background: transparent;
  transition: background .14s ease;
}
.ck-btn-ghost:hover { background: var(--ck-surface-2); }

.ck-input {
  /* iOS WKWebView applies its own control styling and paints inputs WHITE,
     ignoring the background below, unless appearance is reset first. This is
     invisible in a desktop browser and obvious the moment the app runs on a
     phone — which is exactly why the native build is worth doing. */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 11px;
  background: #0f1114;
  border: 1px solid var(--ck-line);
  border-radius: 11px;
  padding: 0.72rem 0.85rem;
  color: var(--ck-text);
  width: 100%;
}
.ck-input:focus { outline: none; border-color: var(--ck-gold-dim); box-shadow: 0 0 0 3px rgba(232,179,61,.13); }
.ck-input::placeholder { color: #626a76; }

label.ck-label { display: block; font-size: .8rem; color: var(--ck-muted); margin-bottom: .35rem; }

.ck-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid var(--ck-line); color: var(--ck-muted);
}
/* Job card header: title on the left, the driver's payout on the right.
 *
 * Written as explicit CSS rather than utility classes because the failure it
 * prevents is invisible in a desktop browser. The title is a flex item, so its
 * min-width defaults to `auto` — it refuses to shrink below its own text — and
 * the row grows past the viewport. On an iPhone 17 Pro Max the payout rendered
 * at x=384..449 on a 440-point screen: "$20.00" clipped to "$20.0" and
 * "you keep" to "you kee". Chrome at the same CSS width showed no overflow at
 * all, so only measuring the element bounds inside the real app found it.
 *
 * The payout is the single most important number on a driver's screen, and it
 * was the part being cut off. BUILD_LIST finding #30. */
/* The market map. A fixed-extent basemap with absolutely-positioned markers —
 * see static/lib/map.ts for why it is not a tile-streaming map. The aspect
 * ratio matches the composed image (768x1024) so markers land where the
 * projection puts them at any width. */
.ck-map {
  position: relative;
  width: 100%;
  aspect-ratio: 768 / 1024;
  max-height: 420px;
  overflow: hidden;
  border-radius: .75rem;
  border: 1px solid var(--ck-line);
  background: var(--ck-surface);
}
.ck-map-base { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ck-map-pin {
  position: absolute;
  width: .6rem; height: .6rem;
  margin: -.3rem 0 0 -.3rem;          /* centre the dot on its coordinate */
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.55);
}
/* Jobs are drawn LARGER and underneath; drivers smaller and on top. A driver
 * sitting on a job — which is the normal case at a pickup, and constant in test
 * data — then reads as a green dot inside a gold ring rather than the job
 * vanishing under the driver. Equal-sized pins hid every job on the board. */
.ck-map-pin-job {
  background: var(--ck-gold);
  width: .68rem; height: .68rem;
  margin: -.34rem 0 0 -.34rem;
  z-index: 1;
}
.ck-map-pin-driver {
  background: var(--ck-green, #4ade80);
  width: .42rem; height: .42rem;
  margin: -.21rem 0 0 -.21rem;
  z-index: 2;
}
.ck-map-pin-me {
  background: var(--ck-text);
  width: .75rem; height: .75rem;
  margin: -.375rem 0 0 -.375rem;
  z-index: 3;
}
.ck-map-credit {
  position: absolute; right: .35rem; bottom: .25rem;
  font-size: .6rem; color: var(--ck-muted);
  background: rgba(11,12,14,.65); padding: 0 .3rem; border-radius: .25rem;
}

/* The board's two-column layout, and the rule that makes it safe on a phone.
 *
 * `min-width: 0` is the whole point. A grid item defaults to `min-width: auto`,
 * which means it REFUSES to shrink below its content's min-content width — so
 * the board column grew to fit its widest card (445px inside a 392px content
 * box), pushed the body's scrollWidth to 469 on a 440-point screen, and the
 * driver's payout was clipped off the right edge.
 *
 * The markup relied on `minmax(0, 1fr)` for this, but that only applies at the
 * `lg:` breakpoint; on a phone the grid is single-column and the item still
 * could not shrink. It did not reproduce in Chrome because WebKit lays the
 * same text out a little wider, so min-content crossed the threshold only in
 * the real app — which is why this needed metrics read from inside the WebView
 * rather than from a desktop browser. BUILD_LIST finding #30.
 */
.ck-boardgrid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
.ck-boardgrid > * {
  min-width: 0;
}
@media (min-width: 1024px) {
  .ck-boardgrid { grid-template-columns: minmax(0, 1fr) 320px; }
  .ck-boardgrid-consumer { grid-template-columns: minmax(0, 1fr) 380px; }
  .ck-boardgrid-ops { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* Any grid on these pages, not just the two-column ones: the same
 * `min-width: auto` default applies to every grid item, so a long address or
 * a wide pill in any of them could reproduce finding #30 on a narrower phone. */
.ck-grid > * { min-width: 0; }

/* Page shell. Replaces `mx-auto max-w-6xl px-6` in the markup.
 *
 * Written as real CSS because the utility version behaved differently in the
 * native WebView than in a browser: the driver board's document measured 470
 * points on a 440-point screen, content ran to x=449, and the payout — the
 * number a driver actually opens the app for — was clipped to "$20.0". Chrome
 * at the same width laid the identical markup out correctly at 440, so no
 * browser-based check could see it. `max-width: min(...)` clamps to the
 * viewport on a phone and to the reading width on a desktop, and
 * `box-sizing` keeps the horizontal padding inside that clamp instead of
 * adding to it. BUILD_LIST finding #30. */
.ck-page {
  width: 100%;
  max-width: min(72rem, 100%);
  margin-inline: auto;
  padding-inline: 1.5rem;
  box-sizing: border-box;
}

/* The job card's outer row: photo, then the text column that must shrink.
 * Explicit CSS because these are the layout-critical parts of a card that is
 * assembled in JavaScript — and in WKWebView the utility classes did not take
 * effect, so the text column kept its intrinsic width, the document grew to
 * 470 points on a 440-point screen, and the payout was clipped. Chrome applied
 * the very same classes correctly, which is why this was invisible in a
 * browser and obvious the moment element bounds were read inside the app. */
.ck-jobrow {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.ck-jobphoto {
  flex: 0 0 5rem;
  width: 5rem;
  height: 5rem;
  border-radius: .75rem;
  object-fit: cover;
}
.ck-jobbody {
  flex: 1 1 auto;
  min-width: 0;          /* without this the column refuses to shrink */
}

.ck-jobhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.ck-jobhead-title {
  min-width: 0;          /* the whole point: allow the title to shrink */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ck-jobhead-pay {
  flex: 0 0 auto;
  text-align: right;
}

/* Rows of pills built from JS. Explicit for the same reason. */
.ck-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.ck-pill-live { color: var(--ck-green); border-color: #1e4a30; background: #0e2417; }
.ck-pill-warn { color: var(--ck-gold); border-color: #4a3a12; background: #241c0b; }
.ck-pill-bad  { color: var(--ck-red);  border-color: #4a1e1e; background: #240e0e; }

/* The crown on the C. Drawn rather than an image so it stays sharp and
   recolours with the accent. */
.ck-mark { display: inline-flex; align-items: center; gap: .55rem; }
.ck-mark svg { width: 34px; height: 34px; }

.ck-rule { height: 1px; background: var(--ck-line); border: 0; }

/* The one place a gradient earns its keep: the price hero on the landing page. */
.ck-hero-price {
  background: linear-gradient(180deg, #ffffff 0%, #d8c28a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ck-row { border-bottom: 1px solid var(--ck-line); }
.ck-row:last-child { border-bottom: 0; }

.ck-link { color: var(--ck-gold); text-decoration: none; }
.ck-link:hover { text-decoration: underline; }

/* Respect a reduced-motion preference — this app is used one-handed in a van. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Checkboxes.
   `accent-color` is IGNORED by iOS WKWebView — even with !important — so a
   checkbox rendered system blue on a black screen in the native app while
   looking correct in every desktop browser. Found by running the binary.
   The only reliable cross-platform answer is to draw the control ourselves:
   hide the native input, render a box, and show a tick when :checked. */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  margin: 0;
  border: 1.5px solid var(--ck-line);
  border-radius: 5px;
  background: #0f1114;
  cursor: pointer;
  position: relative;
  transition: background .12s ease, border-color .12s ease;
}

input[type="checkbox"]:checked {
  background: var(--ck-gold);
  border-color: var(--ck-gold);
}

/* The tick. Drawn with a rotated border so it needs no font or image. */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.33rem;
  top: 0.13rem;
  width: 0.3rem;
  height: 0.6rem;
  border: solid #17130a;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 179, 61, .28);
}

/* The small "Set" confirmation under a resolved address. */
.ck-set::before { content: "\2713  "; color: var(--ck-green); }

/* Same class of problem across every native control: iOS restyles these too. */
select.ck-input,
textarea.ck-input,
input[type="date"].ck-input,
input[type="number"].ck-input,
input[type="tel"].ck-input,
input[type="email"].ck-input,
input[type="password"].ck-input {
  -webkit-appearance: none;
  appearance: none;
  background: #0f1114;
  color: var(--ck-text);
}

/* iOS zooms the page when a focused input is under 16px. On the driver app that
   is disorienting mid-job, so the control font never drops below the threshold. */
input, select, textarea { font-size: 16px; }

/* Buttons lose their radius and gain a system gradient in WKWebView. */
button, .ck-btn, .ck-btn-ghost { -webkit-appearance: none; appearance: none; }

/* Driver quote form (F08 C8.2). The amount is the decision, so it leads and is
   wide enough for a real number; the reason is optional context. Wraps on a
   phone rather than squeezing three controls onto one line. */
.ck-quoterow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ck-quoterow > input[name="reason"] { flex: 1 1 14rem; min-width: 0; }
.ck-quoteamt { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
.ck-quoteamt > span { color: var(--ck-muted); font-weight: 600; }
.ck-quoteamt > input { width: 5.5rem; }
.ck-quoterow input {
  background: var(--ck-surface-2); border: 1px solid var(--ck-line);
  border-radius: 10px; padding: .55rem .7rem; color: var(--ck-text); font-size: .95rem;
}
.ck-quoterow input:focus-visible { outline: 2px solid var(--ck-gold); outline-offset: 1px; }

/* A document row in the approval queue (C13.3). The link, its state and the two
   decisions sit on one line and wrap on a narrow console. */
.ck-docrow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ck-docrow > .ck-muted { flex: 1 1 auto; min-width: 0; }