/* ── Jeff Sample · Primer Candidacy Canvas ───────────────────
   Built on the Primer grid: square cells sharing 1px black
   hairlines, accents as solid blocks, photography square
   cornered, serif Title Case ending in a full stop, no icons,
   no shadows, no gradients, no rounded corners. */

body{ background:var(--surface-muted); overflow-x:clip; }

/* ── Intro ─────────────────────────────────────────────────
   The loud register of the identity: the accent colour is the
   GROUND and the modular grid is drawn over it in white, the
   way the newkid posters do it. The grid opens up as it
   extends to the right, and a diagonal cuts across. */
.intro{
  position:fixed; inset:0; z-index:100; overflow:hidden;
  background:var(--primer-blue);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 620ms var(--ease-standard), transform 620ms var(--ease-standard);
}
.intro.is-closing{ opacity:0; transform:scale(1.03); pointer-events:none; }
body.canvas-open{ overflow:auto; }
body.canvas-open .intro{ display:none; }

/* Columns widen left to right: the grid "opening up". */
.intro-grid{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:44px 44px 44px 52px 64px 80px 100px 124px 152px 1fr;
  grid-auto-rows:1fr;
}
.intro-cell{
  border-right:1px solid rgba(255,255,255,0.45);
  border-bottom:1px solid rgba(255,255,255,0.45);
  transition:background-color 900ms var(--ease-standard),
             opacity 900ms var(--ease-standard);
}
/* A handful of cells picked out in other accents, as on the posters.
   Cells are swapped in and out over time so the grid keeps building
   itself, which is the building blocks idea in motion. */
.intro-cell.on{
  opacity:0;
  animation:cellIn 520ms var(--ease-out) forwards;
}
.intro-cell.off{ opacity:0; }
@keyframes cellIn{ from{ opacity:0; } to{ opacity:1; } }

.intro-sub{ color:var(--primer-white); }

.intro-diag{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}
.intro-diag line{ stroke:rgba(255,255,255,0.5); stroke-width:1; }

.intro-mid{
  position:relative; z-index:2;
  max-width:640px; padding:var(--space-6);
  text-align:center; color:var(--primer-white);
}
.intro-mid > *{ opacity:0; animation:riseIn 700ms var(--ease-out) forwards; }
.intro-mark{ height:34px; display:block; margin:0 auto var(--space-6); animation-delay:120ms; }
.intro-eyebrow{ color:rgba(255,255,255,0.85); animation-delay:220ms; }
.intro-title{
  margin-top:var(--space-3); color:var(--primer-white);
  font-size:clamp(46px, 7vw, 92px); line-height:1;
  animation-delay:300ms;
}
.intro-sub{
  margin:var(--space-5) auto 0; max-width:38ch;
  font-size:var(--text-lead-size); line-height:var(--text-lead-lh);
  color:rgba(255,255,255,0.9);
  animation-delay:400ms;
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.intro-cta{
  margin-top:var(--space-7); animation-delay:520ms;
  font-family:var(--font-text); font-size:16px; font-weight:var(--weight-text-strong);
  color:var(--primer-black); background:var(--primer-white);
  border:none; border-radius:var(--radius-pill);
  padding:14px 30px; cursor:pointer;
  transition:background var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard);
}
.intro-cta:hover{ background:var(--primer-black); color:var(--primer-white); }
.intro-cta:active{ transform:scale(0.98); }

/* The headline fact on this screen. A darker translucent panel sunk into
   the blue field, rounded, so the number reads as a live figure rather
   than as a brand colour block. */
.intro-stat{
  display:inline-block; margin-top:var(--space-6);
  padding:var(--space-4) var(--space-8) var(--space-5);
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:20px;
  animation-delay:460ms;
}
.is-label{ color:rgba(255,255,255,0.8); }
.is-value{
  margin-top:var(--space-2); color:var(--primer-white);
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:clamp(58px, 8vw, 96px); line-height:0.94;
  letter-spacing:-0.02em;
}

/* ── Status pill: the one rounded shape the brand allows ── */
.t-status{
  display:inline-block; margin-top:var(--space-4);
  font-size:12px; line-height:1; letter-spacing:0.04em;
  padding:7px 13px; border-radius:var(--radius-pill);
  white-space:nowrap;
}
.pill-added{ background:var(--primer-black); color:var(--primer-white); }
.pill-progress{
  background:transparent; color:var(--text-secondary);
  box-shadow:inset 0 0 0 1px var(--primer-line-soft);
}
.tile[class*="fill-"] .pill-progress{
  color:var(--primer-black); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3);
}

/* Blocks stagger in behind the fading intro. */
.sheet{ opacity:0; }
body.canvas-open .sheet{ opacity:1; }
body.revealing .tile,
body.revealing .opener,
body.revealing .grp-head{
  opacity:0; animation:riseIn 560ms var(--ease-out) forwards;
}

@media (prefers-reduced-motion: reduce){
  .intro, .intro-mid > *, .intro-cell.on,
  body.revealing .tile,
  body.revealing .opener, body.revealing .grp-head{
    animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;
  }
}

/* The canvas sheet: one white page centred on cream. */
.sheet{
  max-width:var(--page-max); margin:0 auto;
  background:var(--surface-page);
  min-height:100vh;
}
/* Accent fills. Accents are blocks, never grounds for long text,
   and they always keep black type. */
.fill-blue{ background:var(--primer-blue); }
.fill-yellow{ background:var(--primer-yellow); }
.fill-orange{ background:var(--primer-orange); }
.fill-green{ background:var(--primer-green); }

/* ── Wordmark bar ── */
.bar{
  display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
}
.bar-mark{ height:20px; display:block; }
.bar-crumb{ color:var(--text-secondary); }
.bar-back{ font-size:var(--text-small-size); font-weight:var(--weight-text-strong); }
.bar-back::before{ content:"\2190"; margin-right:8px; }

/* ── Opener: what this is and why it exists ── */
.opener{ padding:var(--space-6) var(--space-5) var(--space-7); max-width:74ch; }
.op-lede{
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:clamp(24px, 2.4vw, 32px); line-height:1.22;
  letter-spacing:var(--tracking-display);
}
.op-note{
  margin-top:var(--space-4); max-width:62ch;
  font-size:var(--text-body-size); line-height:26px;
  color:var(--text-secondary);
}

/* ── Grouped sections ── */
.grp{ padding:var(--space-7) var(--space-5); }
.grp-head{
  padding-bottom:var(--space-2); margin-bottom:var(--space-5);
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-5);
  flex-wrap:wrap;
}
.grp-head h2{ font-size:24px; line-height:30px; }
.grp-note{ font-size:var(--text-small-size); color:var(--text-secondary); }

/* ── Building block mark: the brand's grid, not an icon ── */
.mark{
  display:grid; grid-template-columns:repeat(3, 13px); grid-auto-rows:13px;
  border-top:1px solid var(--border-soft); border-left:1px solid var(--border-soft);
  width:max-content;
}
.mark-c{
  display:block;
  border-right:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
}
.mark-c.on{ background:var(--primer-black); }
.tile[class*="fill-"] .mark{ border-color:rgba(0,0,0,0.22); }
.tile[class*="fill-"] .mark-c{ border-color:rgba(0,0,0,0.22); }

/* ── Bucket tiles ──────────────────────────────────────────
   Separate cards with gaps between them, tall and mostly
   empty, copy anchored at the bottom with the number at the
   top. One accent and one photograph per row is the rhythm;
   everything else stays white. */
.tiles{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--space-4);
}

.tile{
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:158px; padding:var(--space-4);
  border:var(--rule);
  color:var(--text-primary); text-decoration:none;
  transition:background var(--duration-fast) var(--ease-standard);
}
.tile:hover{ background:var(--surface-muted); }
.tile[class*="fill-"]:hover{ filter:brightness(0.95); }

.t-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.t-num{ color:var(--text-secondary); }
.tile[class*="fill-"] .t-num{ color:var(--primer-black); }

.t-foot{ display:block; padding-top:var(--space-4); }
.t-name{
  display:block;
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:21px; line-height:26px; letter-spacing:var(--tracking-display);
}
.t-desc{
  display:block; margin-top:var(--space-3);
  font-size:14px; line-height:20px; color:var(--text-secondary);
}
.tile[class*="fill-"] .t-desc{ color:var(--primer-black); }
.t-count{
  display:block; margin-top:var(--space-3);
  color:var(--primer-grey-300);
}
.tile[class*="fill-"] .t-count{ color:var(--primer-black); }

@media (max-width:1000px){ .tiles{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:620px){
  .tiles{ grid-template-columns:1fr; }
  .tile{ min-height:0; }
  .t-foot{ padding-top:var(--space-4); }
}

/* ── Bucket page ── */
.page-head{
  padding:var(--space-5) var(--space-5) var(--space-6);
  border-bottom:var(--rule);
}
.page-head[class*="fill-"] .ph-num,
.page-head[class*="fill-"] .ph-desc{ color:var(--primer-black); }
.ph-num{ color:var(--text-secondary); }
.ph-name{
  margin-top:var(--space-3);
  font-size:var(--display-sub-size); line-height:var(--display-sub-lh);
}
.ph-desc{
  margin-top:var(--space-3); max-width:60ch;
  font-size:var(--text-lead-size); line-height:var(--text-lead-lh);
  color:var(--text-secondary);
}

.mods{ padding:0 var(--space-5); }
.mrow{
  display:grid; grid-template-columns:132px 1fr;
  gap:var(--space-5);
  padding:var(--space-7) 0 var(--space-6);
  border-bottom:1px solid var(--border-soft);
}
.mrow:last-child{ border-bottom:none; }
.m-side{ display:flex; flex-direction:column; gap:var(--space-2); position:sticky; top:var(--space-5); align-self:start; }
.m-num{ color:var(--text-primary); }
.m-tag{ color:var(--text-secondary); }
.m-title{
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:clamp(30px, 3vw, 40px); line-height:1.12; letter-spacing:var(--tracking-display);
  max-width:20ch;
}
@media (max-width:760px){
  .mrow{ grid-template-columns:1fr; gap:var(--space-2); }
  .m-side{ flex-direction:row; gap:var(--space-4); }
}

/* ── Pager ── */
.pager{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:var(--rule);
}
.pg{
  padding:var(--space-5); text-decoration:none; color:var(--text-primary);
  border-right:var(--rule);
  transition:background var(--duration-fast) var(--ease-standard);
}
.pg:last-child{ border-right:none; }
.pg:hover{ background:var(--surface-muted); }
.pg-next{ text-align:right; }
.pg-dir{ display:block; color:var(--text-secondary); }
.pg-name{
  display:block; margin-top:var(--space-2);
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:19px; line-height:24px; letter-spacing:var(--tracking-display);
}

/* ── Footer ── */
.foot{
  border-top:1px solid var(--border-soft);
  padding:var(--space-6) var(--space-5);
}
.foot-note{
  font-size:var(--text-small-size); line-height:var(--text-small-lh);
  color:var(--text-secondary);
}

/* ── Why this is in the job description ── */
.why{
  padding:var(--space-5) var(--space-5) var(--space-6);
  background:var(--surface-muted);
}
.why-label{ color:var(--text-secondary); }
.why-body{
  margin-top:var(--space-3); max-width:70ch;
  font-size:var(--text-body-size); line-height:26px;
}

/* ── Empty state: nothing validated yet ── */
.empty-state{ padding:var(--space-9) 0; max-width:52ch; }
.es-title{
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:28px; line-height:34px; letter-spacing:var(--tracking-display);
}
.es-note{
  margin-top:var(--space-3);
  font-size:var(--text-body-size); line-height:26px; color:var(--text-secondary);
}

/* ── Conversations ── */
.convs{ padding:var(--space-7) var(--space-5) var(--space-8); }
.conv{
  display:grid; grid-template-columns:56px 1fr; gap:var(--space-5);
  align-items:start;
  padding:var(--space-5) 0;
}
.conv + .conv{ border-top:1px solid var(--border-soft); }
.conv-av{
  width:56px; height:56px; display:block;
  border-radius:50%; object-fit:cover;
  background:var(--surface-muted);
  box-shadow:0 2px 8px rgba(0,0,0,0.18);
}
.conv-who{
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:21px; line-height:26px; letter-spacing:var(--tracking-display);
}
.conv-meta{ margin-top:var(--space-2); color:var(--text-secondary); }
.conv-note{
  margin-top:var(--space-3); max-width:66ch;
  font-size:var(--text-body-size); line-height:26px;
}

/* ── Module tabs: one at a time, so a long bucket stays readable ── */
.mtabs{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:var(--space-5) 0 var(--space-4);
  border-bottom:1px solid var(--border-soft);
}
.mtab{
  display:inline-flex; align-items:baseline;
  padding:7px 14px; cursor:pointer;
  background:transparent; border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);
  font-family:var(--font-text); font-size:13px; white-space:nowrap;
  color:var(--text-secondary);
  transition:background var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard);
}
.mtab:hover{ border-color:var(--primer-black); color:var(--text-primary); }
.mtab.is-on{
  background:var(--primer-black); border-color:var(--primer-black);
  color:var(--primer-white);
}
.mtab-num{ font-size:11px; letter-spacing:var(--tracking-label); opacity:0.7; }
.mtab-name{ font-weight:var(--weight-text-strong); }
.mrow.is-hidden{ display:none; }
.mrow[data-panel]{ border-bottom:none; padding-top:var(--space-6); }