/* Outrider — phone mockups of the app itself.
   Loaded by the four product pages.

   The screens are LIGHT on purpose. Sitting on a dark page they read as a real
   device someone is holding up, rather than as more page. Everything inside
   carries the app's own palette — deep navy chrome, one working blue, and
   colour used to answer the question rather than decorate it (green means
   there's water, amber means you'd better get there early).

   Class names are prefixed so they can't collide with the per-page styles
   already living in each file. */

/* ---------- coming-soon badge ---------- */
.soon { display:inline-flex; align-items:center; gap:9px; margin:0 0 20px;
  font-family:ui-monospace,Consolas,monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#8A5A2B; padding:7px 14px; border-radius:99px;
  border:1px solid rgba(239,195,145,.34); background:rgba(138,90,43,.10); }
.soon i { width:6px; height:6px; border-radius:99px; background:#EFC391;
  font-style:normal; flex:none; }

/* ---------- layout ---------- */
.shots { display:flex; flex-wrap:wrap; gap:30px; align-items:flex-start;
  margin-top:34px; }
.shot { margin:0; flex:1 1 250px; max-width:296px; }
.shot figcaption { margin-top:16px; font-size:13.5px; line-height:1.52;
  color:var(--ink-3); }
.shot figcaption b { display:block; color:var(--ink); font-weight:660; font-size:14px;
  margin-bottom:3px; letter-spacing:-.012em; }

/* ---------- the phone ---------- */
.ph { border-radius:32px; padding:7px; background:#241F19;
  box-shadow:0 0 0 1px rgba(255,255,255,.17), 0 2px 0 rgba(255,255,255,.05) inset, 0 36px 84px rgba(0,0,0,.72), 0 8px 22px rgba(0,0,0,.5); }
.ph-scr { border-radius:25px; overflow:hidden; background:#FAF8F4; color:#17150F;
  display:flex; flex-direction:column; }

.ph-stat { display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px 6px; background:#17150F;
  font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:.06em;
  color:rgba(255,255,255,.72); }

/* app header */
.ph-hd { padding:4px 16px 15px; background:#17150F; color:#fff;
  border-bottom:1px solid #2C281F; }
.ph-hd .k { font-family:ui-monospace,Consolas,monospace; font-size:8px;
  letter-spacing:.24em; color:#EFC391; }
.ph-hd b { display:block; font-size:17px; font-weight:720; letter-spacing:-.03em;
  margin-top:6px; line-height:1.14; }
.ph-hd .k2 { display:block; font-size:11px; color:rgba(255,255,255,.78); margin-top:4px; }

/* filter chips */
.ph-chips { display:flex; gap:5px; padding:12px 13px 3px; }
.ph-chips span { font-size:9.5px; font-weight:620; padding:5px 9px; border-radius:99px;
  white-space:nowrap; color:#5F584E; background:#fff; border:1px solid #E7E2D8; }
.ph-chips span.on { background:#17150F; border-color:#17150F; color:#fff;
  font-weight:700; }

/* a card in a list */
.ph-card { margin:9px 13px 0; border-radius:13px; overflow:hidden; background:#fff;
  border:1px solid #E7E2D8; box-shadow:0 1px 2px rgba(20,41,63,.05); }
.ph-card img { width:100%; height:76px; object-fit:cover; display:block; }
.ph-card .cin { padding:10px 11px 12px; }
.ph-card b { display:block; font-size:13.5px; font-weight:690; letter-spacing:-.018em;
  color:#17150F; }
.ph-card .tmeta { display:block; margin-top:3px; font-size:10px; letter-spacing:.02em;
  font-family:ui-monospace,Consolas,monospace; color:#6F6A5E; }

.ph-hero { width:100%; height:98px; object-fit:cover; display:block; }

/* status pills — colour carries the answer, not just the word */
.ph-pills { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.ph-pills i { font-style:normal; font-size:9px; font-weight:660; padding:3px 7px;
  border-radius:99px; background:#F1EDE5; color:#5F584E; }
.ph-pills i.g { background:#E5F0E8; color:#376E48; }
.ph-pills i.w { background:#F8EDD7; color:#875D13; }
.ph-pills i.n { background:#F5E3DD; color:#A04338; }

/* fact rows */
.ph-rows { padding:2px 15px 10px; }
.ph-rows.pad { padding-top:12px; }
.prow { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid #2C281F; font-size:11.5px; }
.prow:last-child { border-bottom:none; }
.prow .k { color:#6F6A5E; flex:none; }
.prow .v { font-weight:660; text-align:right; color:#17150F; }
.prow .v.g { color:#376E48; }
.prow .v.w { color:#875D13; }
.prow .v em { display:block; font-style:normal; font-weight:400; color:#6F6A5E;
  font-size:10px; margin-top:2px; }

/* a directory row */
.ph-row { display:flex; gap:10px; align-items:flex-start; padding:11px 15px;
  border-bottom:1px solid #2C281F; }
.ph-row:last-of-type { border-bottom:none; }
.ph-row .av { width:30px; height:30px; border-radius:9px; flex:none; display:grid;
  place-items:center; font-family:ui-monospace,Consolas,monospace; font-size:9px;
  font-weight:700; background:#F1EDE5; color:#8A5A2B; }
.ph-row .av.warm { background:#F8EDD7; color:#875D13; }
.ph-row .rt { flex:1; min-width:0; }
.ph-row .rt b { display:block; font-size:12.5px; font-weight:680; letter-spacing:-.014em; }
.ph-row .rt span { display:block; font-size:10.5px; color:#6F6A5E; margin-top:2px; }

/* inline note / prompt */
.ph-note { margin:11px 13px 0; border-radius:11px; padding:11px 12px;
  background:#F1EDE5; border:1px solid #E5DED2; }
.ph-note b { display:block; font-size:11.5px; font-weight:690; margin-bottom:3px;
  color:#17150F; }
.ph-note span { font-size:10.5px; color:#5F584E; line-height:1.45; }

.ph-btn { margin:12px 13px 4px; text-align:center; font-size:12px; font-weight:700;
  padding:11px 0; border-radius:10px; background:#17150F; color:#fff; }
.ph-btn.quiet { background:transparent; color:#4A4239; border:1px solid #E0D9CD; }

/* free / price flag */
.ph-flag { display:inline-block; font-family:ui-monospace,Consolas,monospace;
  font-size:8.5px; letter-spacing:.12em; padding:3px 7px; border-radius:5px;
  background:#E5F0E8; color:#376E48; font-weight:700; }
.ph-flag.paid { background:#F1EDE5; color:#5F584E; }

/* bottom tab bar — no icons on purpose; the words are the labels */
.ph-tabs { display:flex; margin-top:auto; padding:10px 0 13px; background:#fff;
  border-top:1px solid #E7E2D8; }
.ph-tabs span { flex:1; text-align:center; font-size:8.5px; font-weight:650;
  letter-spacing:.03em; color:#6F6A5E; position:relative; padding-top:7px; }
.ph-tabs span.on { color:#8A5A2B; }
.ph-tabs span.on::before { content:""; position:absolute; top:0; left:50%;
  transform:translateX(-50%); width:5px; height:5px; border-radius:99px;
  background:#8A5A2B; }

/* ---------- per-horse tabs ----------
   Papers are per horse, so the wallet is too. The photo is how you pick —
   nobody thinks of their horse by name in a list, they recognise the face. */
.ph-horses { display:flex; gap:10px; padding:13px 14px 5px; align-items:flex-start;
  border-bottom:1px solid #2C281F; }
.ph-horses .hz { width:54px; flex:none; text-align:center; }
.ph-horses .hz img { width:46px; height:46px; border-radius:99px; object-fit:cover;
  display:block; margin:0 auto 6px; border:2px solid transparent; }
.ph-horses .hz b { display:block; font-size:9.5px; font-weight:650; color:#6F6A5E; }
.ph-horses .hz.on img { border-color:#8A5A2B; }
.ph-horses .hz.on b { color:#17150F; }
.ph-horses .hz.warn img { border-color:#D3A24A; }
.ph-horses .hz .add { width:46px; height:46px; border-radius:99px; margin:0 auto 6px;
  border:1.5px dashed #D8D1C5; color:#6F6A5E; display:grid; place-items:center;
  font-size:19px; font-weight:300; line-height:1; }

/* ---------- a map inside the phone ---------- */
.ph-map { position:relative; height:212px; overflow:hidden;
  background:
    radial-gradient(90% 60% at 18% 12%, #ABA894 0%, transparent 55%),
    radial-gradient(80% 55% at 78% 42%, #BAAE8E 0%, transparent 60%),
    radial-gradient(95% 70% at 55% 96%, #9C9B85 0%, transparent 62%),
    linear-gradient(165deg, #C8C4B1, #B3B09C 55%, #9E9C87); }
.ph-map svg { position:absolute; inset:0; width:100%; height:100%; }
.ph-pin { position:absolute; width:17px; height:17px; border-radius:99px;
  transform:translate(-50%,-50%); border:2px solid #fff; display:grid;
  place-items:center; font-size:8px; font-weight:800; color:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.32); }
.ph-pin.stay  { background:#7A5326; }
.ph-pin.ride  { background:#376E48; }
.ph-pin.line  { background:#875D13; }
.ph-pin.start { background:#17150F; }
.ph-lbl { position:absolute; transform:translate(-50%,-50%);
  font-family:ui-monospace,Consolas,monospace; font-size:7.5px; letter-spacing:.06em;
  color:#2A2621; background:rgba(255,255,255,.86); padding:2px 5px; border-radius:4px;
  white-space:nowrap; }
.ph-key { position:absolute; left:9px; bottom:9px; display:flex; flex-wrap:wrap; gap:4px; }
.ph-key span { font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
  letter-spacing:.05em; background:rgba(255,255,255,.9); color:#33302B;
  padding:3px 6px; border-radius:99px; }
.ph-key i { font-style:normal; font-weight:800; }

/* ---------- itinerary legs ---------- */
.ph-leg { display:flex; gap:9px; padding:10px 14px; border-bottom:1px solid #2C281F; }
.ph-leg:last-of-type { border-bottom:none; }
.ph-leg .day { font-family:ui-monospace,Consolas,monospace; font-size:8.5px;
  letter-spacing:.06em; color:#6F6A5E; width:26px; flex:none; padding-top:3px; }
.ph-leg .what { flex:1; min-width:0; }
.ph-leg .what b { display:block; font-size:12px; font-weight:680; letter-spacing:-.014em; }
.ph-leg .what span { display:block; font-size:10px; color:#6F6A5E; margin-top:2px;
  line-height:1.4; }
.ph-tag { font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
  letter-spacing:.09em; font-weight:700; padding:3px 6px; border-radius:99px;
  white-space:nowrap; align-self:flex-start; margin-top:3px; }
.ph-tag.stay { background:#F1EDE5; color:#8A5A2B; }
.ph-tag.ride { background:#E5F0E8; color:#376E48; }
.ph-tag.warn { background:#F8EDD7; color:#875D13; }
.ph-tag.line { background:#F1EDE5; color:#5F584E; }

/* keeps a screen from collapsing when it has less in it than its neighbour */
.ph-fill { flex:1; min-height:12px; }

@media (max-width:560px) {
  .shots { gap:24px; }
  .shot { max-width:none; }
}