/* ============================================
   Me & my Robot — project pages (work/<slug>/)
   The pop canvas (design doc §7, option B): the project's colour runs edge to
   edge in the header band and in the section markers; the body is the same
   grey-white instrument canvas as the home page: hairlines, tick marks, Doto
   labels. Tokens and shared parts (nav, footer, buttons, ruler, todo, motion)
   come from the root stylesheet. Root files are not edited from here.
   ============================================ */
@import url("/style.css");

:root {
  /* Page colour. Set per page with a class on <body>. */
  --pop:      var(--blue);
  --pop-ink:  var(--white);
  --pop-acc:  var(--white);   /* motion lines and squares inside the band */
  --mark:     var(--pop);     /* section markers on the canvas */

  /* Product door tile (the product the project grew into) */
  --door:     var(--blue);
  --door-ink: var(--white);
}
.pop--blue   { --pop: var(--blue);   --pop-ink: var(--white); --pop-acc: var(--white);  --mark: var(--blue); }
.pop--red    { --pop: var(--red);    --pop-ink: var(--ink);   --pop-acc: var(--ink);    --mark: var(--red); }
.pop--yellow { --pop: var(--yellow); --pop-ink: var(--ink);   --pop-acc: var(--ink);    --mark: var(--yellow); }
.pop--green  { --pop: var(--green);  --pop-ink: var(--ink);   --pop-acc: var(--ink);    --mark: var(--green); }
/* Tesmatic: ink on canvas, yellow accents */
.pop--ink    { --pop: var(--ink);    --pop-ink: var(--white); --pop-acc: var(--yellow); --mark: var(--yellow); }

.door--green  { --door: var(--green);  --door-ink: var(--ink); }
.door--blue   { --door: var(--blue);   --door-ink: var(--white); }
.door--yellow { --door: var(--yellow); --door-ink: var(--ink); }
.door--red    { --door: var(--red);    --door-ink: var(--ink); }

/* ---------- Nav: logo, back link, talk-to-us, language ---------- */
.wnav { display: flex; justify-content: flex-start; }
.wnav a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px;
  font-weight: 600; font-size: 0.95rem;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.wnav a:hover { border-bottom-color: var(--ink); }
.wnav .nav-n { font-size: 0.75rem; color: var(--ink-2); }
/* Logo, "← Work", EN/ES and the CTA share one row. The toggle stays at every width;
   the CTA goes under 480px, where the four of them no longer fit in the gutters.
   (The root sheet drops it under 400px; here the back link needs the extra room.) */
@media (max-width: 599px) {
  .nav { gap: 0.5rem 0.75rem; }
  .wnav .nav-n { display: none; }
}
@media (max-width: 479px) {
  .nav-cta { display: none; }
}
@media (max-width: 399px) {
  .nav { gap: 0.5rem; }
  .logo { gap: 0.5rem; }
  .logo-text { font-size: 0.92rem; }
}
@media (min-width: 900px) { .wnav { justify-content: center; } }

/* ============================================
   THE BAND: project colour, edge to edge
   ============================================ */
.pop-head { background: var(--pop); color: var(--pop-ink); }
.pop-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 80px) var(--gutter) clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 3rem;
  align-items: end;
}
.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem;
  font-size: 0.78rem;
}
.crumb a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid currentColor; }
.crumb a:hover { border-bottom-width: 2px; }
.crumb .sq { background: var(--pop-acc); }
.pop-head :focus-visible { outline-color: var(--pop-ink); }
.pop-title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2.6rem, 11vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-top: 1.25rem;
}
.pop-claim {
  margin-top: 1.25rem;
  max-width: 36ch;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.35;
  font-weight: 500;
}
.pop-spec {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}
.pop-spec dt { font-size: 0.75rem; }
.pop-spec dd { margin-top: 0.25rem; font-weight: 500; font-size: 0.98rem; line-height: 1.35; }
.pop-fig { justify-self: end; width: clamp(170px, 42vw, 280px); position: relative; padding-bottom: 1.4rem; }
.pop-fig .fig, .pop-fig .fig .mo { color: var(--pop-ink); }
.pop--ink .pop-fig .fig .mo { color: var(--pop-acc); }
/* Tick ruler in the band's own ink */
.ruler--pop {
  margin-top: 0.75rem;
  height: 12px;
  border-bottom: 1px solid currentColor;
  background:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 50px) left bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 10px) left bottom / 100% 6px no-repeat;
  opacity: 0.9;
}
.pop-fig .pop-spec-fig { position: absolute; right: 0; bottom: 0; font-size: 0.72rem; white-space: nowrap; }

@media (min-width: 760px) {
  .pop-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .pop-spec { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1 / -1; margin-top: 1rem; }
  .pop-fig { width: clamp(220px, 22vw, 300px); margin-bottom: 0.5rem; }
}

/* ============================================
   STEPS: the five blocks of the skeleton, on the canvas
   ============================================ */
.step {
  position: relative;
  padding: clamp(44px, 7vw, 96px) 0;
  border-top: 1px solid var(--hair);
}
/* The section marker: the project colour touching the left edge of the screen */
.step::before {
  content: "";
  position: absolute; left: 0; top: -1px;
  width: 6px; height: clamp(44px, 7vw, 96px);
  background: var(--mark);
}
.step-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 4rem;
  align-items: start;
}
.step-n {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--ink-2);
}
.step-n .mark { display: inline-block; width: 10px; height: 10px; background: var(--mark); }
.step-n b { color: var(--ink); font-weight: 900; font-size: 1rem; }
.step-n::after { content: ""; flex: 1 1 auto; max-width: 96px; height: 1px; background: var(--hair); }
.step-title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.55rem, 1.1rem + 2.2vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-top: 0.75rem;
}
.step-body { font-size: 1.08rem; line-height: 1.55; }
.step-body > * + * { margin-top: 1rem; }
.step-body p { max-width: 62ch; }
.step-body strong { font-weight: 600; }
.step-body a:not(.btn):not(.door-link) { border-bottom: 1px solid var(--ink); font-weight: 500; }
.step-body a:not(.btn):not(.door-link):hover { border-bottom-width: 2px; }

/* Plain list on hairlines: the parts of what we built */
.parts { border-top: 1px solid var(--hair); max-width: 62ch; }
.parts li {
  display: grid; grid-template-columns: 2rem 1fr; gap: 0 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hair);
}
.parts .pn { font-size: 0.78rem; color: var(--ink-2); padding-top: 0.3rem; }
.parts .pt { font-size: 1rem; }
.parts .pt small { display: block; color: var(--ink-2); font-size: 0.92rem; }

@media (min-width: 900px) {
  .step-inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .step-head { position: sticky; top: 84px; }
}

/* ---------- Screenshots ---------- */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.75rem 1.5rem;
  margin-top: 1.75rem;
}
.shot { max-width: 300px; }
.shot--wide { grid-column: 1 / -1; max-width: 100%; }
.shot img {
  width: 100%; height: auto;
  border: 1px solid var(--hair);
  background: var(--canvas-2);
}
/* Phone screenshots (640×1385) on a phone: cap the height and show the top, so two
   shots do not cost 1,500px of scroll before the numbers. Wide shots are unaffected. */
@media (max-width: 639px) {
  .shot:not(.shot--wide) img { max-height: 600px; object-fit: cover; object-position: top; }
}
.shot .ruler { margin-top: 0.75rem; }
.shot figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.shot figcaption .sq { background: var(--mark); width: 8px; height: 8px; }
.shot--placeholder {
  max-width: 100%;
  min-height: 220px;
  display: grid; align-content: center; gap: 0.75rem;
  padding: 1.5rem;
  background: var(--canvas-2);
  border: 1px solid var(--hair);
}
.shot--placeholder p { font-size: 1rem; color: var(--ink-2); max-width: 44ch; }

/* ---------- Facts: the numbers, as gauges ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  margin-top: 0.5rem;
  max-width: 720px;
}
.fact .ruler { margin-bottom: 0.6rem; }
.fact-val { font-family: var(--font-dot); font-weight: 900; font-variant-numeric: tabular-nums; font-size: clamp(2.6rem, 9vw, 4.5rem); line-height: 1; }
.fact-label { font-size: 0.78rem; margin-top: 0.5rem; }
.fact-label .sq { background: var(--mark); }
.fact-note { font-size: 0.75rem; color: var(--ink-2); margin-top: 0.3rem; letter-spacing: 0.04em; }
.fact-note .todo { margin-left: 0; margin-top: 0.3rem; display: inline-block; white-space: normal; }
.facts-source { font-size: 0.75rem; color: var(--ink-2); margin-top: 1.25rem; max-width: 62ch; }

/* The line people repost: one sentence on what changed */
.changed {
  margin-top: 1.5rem;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 6px solid var(--mark);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.35;
  font-weight: 500;
  max-width: 44ch;
}
/* ?nonum=1 renders the page without the unconfirmed numbers (for the PR comparison) */
.no-numbers .facts--unconfirmed, .no-numbers .facts--unconfirmed + .facts-source { display: none; }

/* ---------- Try it ---------- */
.try { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.btn-pop { background: var(--pop); color: var(--pop-ink); }
.btn-pop:hover { background: var(--ink); color: var(--white); }
.pop--ink .btn-pop:hover { background: var(--yellow); color: var(--ink); }
.try-note { font-size: 0.75rem; color: var(--ink-2); max-width: 40ch; line-height: 1.5; }


/* ---------- Project status: pixel-block scenes, same 10-unit grid as the invader.
   Building = crane lowering a block; Delivering = truck with the load; Live = finished, flag up.
   Two frames swapped with steps(); reduced motion holds frame A. ---------- */
.bs { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; flex: none; --bs-acc: var(--red); }
.bs--live { --bs-acc: var(--green); }
.bs-fig { width: 80px; height: 48px; color: var(--ink); }
.bs--live .bs-fig { width: 36px; }
.bs-acc { fill: var(--bs-acc); }
.bs-b { opacity: 0; }
.bs-a { animation: bs-a 1.6s steps(1) infinite; }
.bs-b { animation: bs-b 1.6s steps(1) infinite; }
@keyframes bs-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes bs-b { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
.bs-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; line-height: 1.2; color: var(--ink); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .bs-a { animation: none; opacity: 1; }
  .bs-b { animation: none; opacity: 0; }
}
/* In the coloured band everything takes the band's ink; the steps stay legible. */
.bs--pop { align-items: flex-start; --bs-acc: currentColor; margin-bottom: 0.15rem; }
.bs--pop .bs-fig { width: 60px; height: 36px; color: inherit; }
.bs--pop.bs--live .bs-fig { width: 27px; }
.bs--pop .bs-label { color: inherit; font-size: 0.75rem; }
.bs-detail { display: block; margin-top: 0.3rem; }

/* ---------- The journey with the rep down the middle (KIA Marcos) ---------- */
.spine { margin-top: 1.75rem; }
.spine-head, .spine-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); column-gap: 0.5rem; }
.spine-head { align-items: end; font-size: 0.72rem; color: var(--ink-2); }
.spine-head > span:first-child { text-align: right; }
.spine-hub { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.6rem 0 0.5rem; background: var(--ink); color: var(--white); }
.spine-hub svg { width: 44px; height: 32px; color: var(--mark); }
.spine-hub b { font-weight: 700; font-size: 0.68rem; letter-spacing: 0.04em; text-align: center; line-height: 1.1; }
.spine-rows { list-style: none; margin: 0; padding: 0; }
.spine-row { align-items: stretch; }
.spine-touch { align-self: center; text-align: right; font-weight: 600; line-height: 1.2; padding: 0.85rem 0; }
.spine-node { position: relative; background: var(--ink); }
.spine-node::before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); background: var(--mark); }
.spine-row--next .spine-node::before { background: var(--white); }
.spine-tool { align-self: center; font-size: 0.95rem; line-height: 1.3; padding: 0.85rem 0; }
.spine-st { display: block; margin-top: 0.25rem; font-size: 0.7rem; color: var(--ink-2); }
.spine-row--next .spine-tool > span:first-child { color: var(--ink-2); }
.spine figcaption { margin-top: 0.75rem; font-size: 0.75rem; color: var(--ink-2); }
.spine figcaption .sq { background: var(--mark); width: 8px; height: 8px; }
@media (min-width: 640px) {
  .spine-head, .spine-row { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1.25fr); column-gap: 1rem; }
  .spine-touch { font-size: 1.1rem; }
}

/* ---------- I want one: the product door ---------- */
.door {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 0.5rem;
}
.door-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 240px;
  padding: 1.5rem 1.25rem 1.5rem;
  background: var(--door);
  color: var(--door-ink);
}
.door-tile .product-status { display: flex; align-items: center; font-size: 0.72rem; }
.door-tile .status-sq { background: currentColor; }
.door-name {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 1rem;
}
.door-text { margin-top: 0.75rem; max-width: 34ch; padding-right: 110px; }
.door-link {
  display: inline-block;
  margin-top: auto;
  padding: 1.25rem 0 0.4rem;
  font-weight: 600;
  line-height: 1.3;
  border-bottom: 2px solid currentColor;
}
.door-link::after { content: "\00a0→"; }
.door-link:hover { border-bottom-width: 4px; }
.door-tile .fig { position: absolute; right: 0.75rem; bottom: 1rem; width: 110px; color: var(--door-ink); }
.door-tile .fig .mo { color: var(--door-ink); }
.door--blue :focus-visible { outline-color: var(--white); }
.door-alt { background: var(--canvas-2); color: var(--ink); }
.door-alt .door-text { padding-right: 0; }

@media (min-width: 640px) {
  .door { grid-template-columns: 1fr 1fr; }
  .door-tile { min-height: 280px; padding: 1.75rem 1.5rem; }
}

/* ============================================
   PAGER: previous / next project
   ============================================ */
.pager { border-top: 1px solid var(--hair); background: var(--canvas-2); }
.pager-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.pager a {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.5rem 1rem 1.5rem 0;
  min-height: 44px;
}
.pager a + a { text-align: right; padding: 1.5rem 0 1.5rem 1rem; border-left: 1px solid var(--hair); align-items: flex-end; }
.pager-k { font-size: 0.75rem; color: var(--ink-2); }
.pager-name { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.pager a:first-child .pager-name::before { content: "←\00a0"; }
.pager a + a .pager-name::after { content: "\00a0→"; }
.pager a:hover .pager-name { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================
   PAGE-SPECIFIC: Quotezilla, under construction
   ============================================ */
.crane-wrap { display: grid; justify-items: start; gap: 1rem; margin-top: 0.5rem; }
.crane { width: min(100%, 440px); color: var(--ink); overflow: visible; }
.crane .load { animation: lower 2.4s steps(1, end) infinite; }
@keyframes lower {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(0, 10px); }
  50%  { transform: translate(0, 20px); }
  75%  { transform: translate(-10px, 20px); }
}
.crane .lamp { animation: blink 1s steps(2, end) infinite; }
.crane-label { font-size: 0.75rem; color: var(--ink-2); }
.ea-form { max-width: 560px; }
.ea-form .form-grid { grid-template-columns: 1fr; }
.ea-form .field-consent { margin-top: 0.25rem; }
.ea-form .btn-submit { margin-top: 1.5rem; }
.ea-form .form-success { margin-top: 1.5rem; }
.ea-form .form-error { margin-top: 1.5rem; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .crane .load, .crane .lamp { animation: none; }
}