/* PK2 AI Advisors · the week grid
   The site's one signature graphic. A working week's tasks in mono, ruled by
   hairlines. The recoverable ones strike through and pick up a gold marker; a
   tally lands at the bottom.

   One component, three forms:
     .week-grid.week-grid-hero      full list, tally, animates once on view
     .week-grid.week-grid-divider   two struck lines, no tally, no animation
     .grid-card                     the grid's rule weight and mono label,
                                    for tool and case study cards

   Never the Fog Line. No tick combs, no dissolving bands, no glow, no shadow,
   no gradient. A rule, a strike, and a mono marker. That is the whole kit.

   Every colour and system size resolves through tokens.css. No literal colour
   value appears in this file.

   The markup contract lives at the top of js/week-grid.js.
*/

/* ----------------------------------------------------------------- shell -- */

.week-grid {
  margin: 0;
  border-top: var(--hair) solid var(--hairline);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-mono);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--text);
}
.ground-ink .week-grid { border-top-color: var(--hairline-inv); color: var(--text-inv); }

.week-grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--hair) solid var(--hairline);
}
.ground-ink .week-grid-head { border-bottom-color: var(--hairline-inv); }

.week-grid-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------ row -- */

.week-task {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--hair) solid var(--hairline);
}
.ground-ink .week-task { border-bottom-color: var(--hairline-inv); }

.week-task-name {
  position: relative;
  display: inline;
  color: var(--text-muted);
}
.ground-ink .week-task-name { color: var(--muted-inv); }

/* A found task is the one thing on the row with full ink. */
.week-task.is-found .week-task-name { color: var(--ink); }
.ground-ink .week-task.is-found .week-task-name { color: var(--text-inv); }

/* The strike is a drawn rule, not a text decoration, so it can be animated
   from the left. It sits in ink rather than gold because it carries meaning
   and gold at full strength does not clear the non-text contrast floor on
   cream. The gold does its job in the marker beside it. */
.week-task.is-found .week-task-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--strike);
  background: var(--ink);
  transform: scaleX(1);
  transform-origin: left center;
  pointer-events: none;
}
.ground-ink .week-task.is-found .week-task-name::after { background: var(--text-inv); }

/* The marker. Mono, gold, and the only gold on the row. */
.week-task-marker {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--gold-text);
  white-space: nowrap;
  opacity: 1;
}
.ground-ink .week-task-marker { color: var(--gold); }

/* ---------------------------------------------------------------- tally -- */

.week-grid-tally {
  margin: 0;
  padding: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--size-h4);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: 1;
}
.ground-ink .week-grid-tally { color: var(--text-inv); }

.week-grid-count {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--gold-text);
}
.ground-ink .week-grid-count { color: var(--gold); }

/* ------------------------------------------------------------ hero form -- */

/* The full list. Only this form animates, and only once. */
.week-grid-hero { max-width: var(--measure); }
.week-grid-hero .week-task:last-child { border-bottom-color: transparent; }

/* Armed state. Set by the inline html.js flag in the page head, so a document
   served without script renders the final state from the first frame and never
   waits on a file that may not arrive. Everything below is the animation only;
   nothing here hides content. */
html.js .week-grid-hero .week-task.is-found .week-task-name::after {
  transform: scaleX(0);
  transition: transform var(--dur-draw) var(--ease);
}
html.js .week-grid-hero .week-task-marker {
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease);
}
html.js .week-grid-hero .week-grid-tally {
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease);
}

html.js .week-grid-hero .week-task.is-struck .week-task-name::after { transform: scaleX(1); }
html.js .week-grid-hero .week-task.is-struck .week-task-marker { opacity: 1; }
html.js .week-grid-hero.is-tallied .week-grid-tally { opacity: 1; }

/* Reduced motion: the whole thing renders resolved, and the counter never
   runs. js/week-grid.js checks the same query and skips the sequence. */
@media (prefers-reduced-motion: reduce) {
  html.js .week-grid-hero .week-task.is-found .week-task-name::after {
    transform: scaleX(1);
    transition: none;
  }
  html.js .week-grid-hero .week-task-marker,
  html.js .week-grid-hero .week-grid-tally {
    opacity: 1;
    transition: none;
  }
}

/* --------------------------------------------------------- divider form -- */

/* A two-line fragment used to break a page. Static, struck on arrival, no
   tally and no animation at any time. */
.week-grid-divider {
  max-width: var(--measure);
  border-top: var(--hair) solid var(--hairline);
  border-bottom: var(--hair) solid var(--hairline);
}
.ground-ink .week-grid-divider {
  border-top-color: var(--hairline-inv);
  border-bottom-color: var(--hairline-inv);
}
.week-grid-divider .week-task:last-child { border-bottom: 0; }

/* ----------------------------------------------------------- card frame -- */

/* Tool cards and case study cards borrow the grid's rule weight and its mono
   label. No fill, no radius, no shadow: a card here is four hairlines. */
.grid-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-card);
  background: transparent;
  transition: border-color var(--dur-ui) ease;
}
.grid-card:hover { border-color: var(--ink); }
.ground-ink .grid-card { border-color: var(--hairline-inv); }
.ground-ink .grid-card:hover { border-color: var(--text-inv); }

.grid-card-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-text);
}
.ground-ink .grid-card-label { color: var(--gold); }

.grid-card-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--size-h3);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.ground-ink .grid-card-title { color: var(--text-inv); }

.grid-card-body {
  font-size: var(--size-small);
  line-height: 1.6;
  color: var(--text-muted);
}
.ground-ink .grid-card-body { color: var(--muted-inv); }

/* The card's own foot rule, so a card reads as part of the same ruled family
   as the grid above it. */
.grid-card-foot {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--hairline);
}
.ground-ink .grid-card-foot { border-top-color: var(--hairline-inv); }

/* ---------------------------------------------------------- narrow ----- */

/* Down to 360px the marker drops under the task rather than squeezing it. */
@media (max-width: 640px) {
  .week-task {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
  }
  .week-task-marker { flex: 1 0 100%; }
  .grid-card { padding: var(--space-3); }
}