/* ═══════════════════════════════════════════════════════════════════════
   CHECKBOX — faithful web adapters for real product surfaces
   Implements the "Contrato de fidelidad visual" of
   docs/marketing/REDESIGN-AUDIT-2026-08-07.md.

   Category 1 of the contract: anything shown here must reuse the real
   component's structure, tokens and states. Every number below is lifted
   from the shipped app, not eyeballed:

     PunchedCheckbox  mobile/components/ui/PunchedCheckbox.tsx
     Today task card  mobile/app/(app)/(tabs)/today.tsx  (styles.taskCard …)
     Radius / HoleShadow / Elevation  mobile/constants/spacing.ts

   Loaded by both hosts (static landings and app/(marketing)/*) so there is
   ONE adapter layer rather than a copy per page. Page-specific styling
   stays in landing.css / coach.css / marketing-pages.css and wins by
   ordering and specificity.
   ═══════════════════════════════════════════════════════════════════════ */

.mk-page, body {
  --pr-surface:   var(--surface,   var(--mk-surface,   #0d0f12));
  --pr-surface-2: var(--surface-2, var(--mk-surface-2, #14171b));
  --pr-line:      var(--line,      var(--mk-line,      rgba(255,255,255,.07)));
  --pr-text:      var(--text,      var(--mk-text,      #F3F5F8));
  --pr-text-2:    var(--text-2,    var(--mk-text-2,    #9AA0A9));
  --pr-text-3:    var(--text-3,    var(--mk-text-3,    #5A606A));
  --pr-cy:        var(--cy,        var(--mk-cy,        #E6FC60));
  --pr-hole:      var(--hole, #000000);
  --pr-ease:      var(--ease, cubic-bezier(.22,.61,.36,1));

  /* HoleShadow.dark — the one recessed surface in the system. */
  --pr-hole-sh:   var(--hole-sh,
                    inset 0 0 0 1px rgba(255,255,255,.05),
                    inset 0 2px 4px rgba(0,0,0,.85),
                    inset 0 -1px 1px rgba(255,255,255,.045));
  /* Elevation.card — 0 6px 20px rgba(0,0,0,.30) */
  --pr-card-sh:   var(--card-sh, 0 6px 20px rgba(0,0,0,.30));
}

/* ═══ Surface ════════════════════════════════════════════════════════
   Fill, a 1px hairline, a low shadow. Never a tinted fill, never an accent
   border, never a black/sunken container. */

.cbx-surface {
  background: var(--pr-surface);
  border: 1px solid var(--pr-line);
  border-radius: 22px;                 /* Radius.card */
  box-shadow: var(--pr-card-sh);
}
.cbx-surface--hero  { border-radius: 26px; }   /* Radius.hero  */
.cbx-surface--sheet { border-radius: 28px; }   /* Radius.sheet */
.cbx-surface--row   { border-radius: 18px; }   /* Radius.button — list rows */

/* ═══ PunchedCheckbox ════════════════════════════════════════════════
   26 × 26, radius 8, a dark recessed well with an inset shadow. On check
   ONLY the tick strokes in — no fill flip, no border change. Tick path
   M5 12.5 10 17.5 19 7, 3px, round caps, dash length 26. */

.cbx-check {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 8px;   /* Radius.well */
  padding: 0; border: none; cursor: pointer;
  background: var(--pr-hole);
  box-shadow: var(--pr-hole-sh);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: transform .34s var(--pr-ease);
}
.cbx-check:active { transform: scale(.9); }
.cbx-check--sm { width: 22px; height: 22px; border-radius: 7px; }
.cbx-check--lg { width: 30px; height: 30px; border-radius: 9px; }
/* A checkbox drawn on a surface the reader cannot press is a lie. Render
   this variant when the row is illustrative, and give it no button role. */
.cbx-check--static { cursor: default; }

.cbx-check .ck {
  fill: none; stroke: var(--pr-cy);
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  transition: stroke-dashoffset .34s var(--pr-ease) .02s;
}
.cbx-check.on .ck,
.cbx-check[aria-checked="true"] .ck { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .cbx-check, .cbx-check .ck { transition: none; }
}

/* ═══ Today task card ════════════════════════════════════════════════
   min-height 92, Radius.card 22, padding 17 vertical / 18 horizontal,
   title 16.5 semibold, time 12.5 semibold with the real clock icon, and
   the real hierarchy: plan and assignee as meta rows, evidence and
   validation as 26px chips bottom-right. */

.task-card {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  min-height: 92px;
  padding: 17px 18px;
  border-radius: 22px;
  background: var(--pr-surface);
  border: 1px solid var(--pr-line);
  box-shadow: var(--pr-card-sh);
  transition: opacity .3s var(--pr-ease);
}
.task-card .cbx-check { margin-top: 1px; }      /* cbWrap paddingTop: 1 */
.task-card.done { opacity: .56; }

.task-body { flex: 1 1 auto; min-width: 0; }

.task-top { display: flex; align-items: flex-start; gap: 12px; }
.task-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; line-height: 21px;
  color: var(--pr-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
}
.task-card.done .task-title { text-decoration: line-through; text-decoration-color: var(--pr-text-3); }
/* Multi-line titles are a real state — the app wraps when the row owns the
   full width (week view). Never truncate mid-word to force one line. */
.task-title--wrap { white-space: normal; overflow: visible; text-overflow: clip; }

.task-time {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; margin-top: 1px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .008em;
  color: var(--pr-text-2); white-space: nowrap;
}
.task-time svg { opacity: .65; }

/* Meta: stacked rows, 5px apart, 11 below the title. ORDER IS ASSIGNEE FIRST,
   THEN PLAN — today.tsx:558-568 renders the `user` row before the `layers` row.
   Any surface that draws plan above assignee is wrong. */
.task-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 11px; }
.task-meta-row { display: flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; }
.task-meta-text {
  font-size: 11.5px; font-weight: 500; letter-spacing: .008em; color: var(--pr-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.task-meta-row svg { flex: 0 0 auto; }
/* EVERY meta glyph is the accent, not just the plan: today.tsx:560 draws the
   assignee `user` icon with colors.cy and :565 the `layers` icon with colors.cy.
   The text beside them stays text-3 — the glyph alone carries the colour. */
.task-meta-row svg { color: var(--pr-cy); }
/* Evidence rows needing attention are the one exception (today.tsx:574). */
.task-meta-row--warn svg { color: var(--pr-warning, #F5A524); }
.task-plan { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; font-size: 11.5px; font-weight: 500; letter-spacing: .008em; color: var(--pr-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Validation / evidence chips sit bottom-right, 26px, radius 8, hairline —
   the same neutral chip the app draws. Reserve room so a long title never
   collides with them. */
.task-vals {
  position: absolute; right: 18px; bottom: 13px;
  display: flex; align-items: center; gap: 7px;
}
.task-val {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pr-surface-2); border: 1px solid var(--pr-line);
  color: var(--pr-text-2);
}
/* A satisfied validation warms to the accent glyph — the completed state the
   app animates in. Never a tinted fill behind it. */
.task-val--done { color: var(--pr-cy); }
.task-card:has(.task-vals) .task-meta { padding-right: 76px; }

/* Legacy inline arrangement kept working for surfaces not yet rebuilt. */
.task-reqs { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.task-req {
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pr-surface-2); border: 1px solid var(--pr-line);
}

/* ═══ Section label ══════════════════════════════════════════════════ */

.cbx-seclabel { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--pr-text-3); }