/* ------------------------------------------------------------------------
   Joy's check page.

   This is the product showing up inside the marketing page, so it is set in
   Joy's own design system and not in the poster's. Warm paper, cards with
   borders and no shadows, Source Serif 4 for headings and Hanken Grotesk for
   everything else, green as the only signal colour and never red.

   Every token is scoped to .sheet, because the page around it has two rooms
   and this one has one. The design system says the check page sets its own
   colours so it reads the same in a host's light or dark mode; here the host
   is the marketing page, and the rule is the same.

   Downloading as HTML inlines this file, so it has to stand alone.
   ------------------------------------------------------------------------ */

@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-latin.woff2") format("woff2");
  font-weight:200 900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-latin.woff2") format("woff2");
  font-weight:400 600;font-display:swap}

/* Joy opens over the website rather than beside it. Not a new tab: nothing
   here is stored, so there is no address to go to, and a check that takes a
   minute would have to hold an empty tab open past the popup blocker to get
   one. Taking the screen is honest about what this is, works on a phone, and
   keeps the thread, and the HTML download is the thing you actually keep. */
.j-wrap{position:fixed;inset:0;z-index:60;overflow-y:auto;overflow-x:hidden;
  background:#FAF8F4;-webkit-overflow-scrolling:touch}
.j-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:16px;
  padding:12px clamp(16px,3vw,28px);background:rgba(250,248,244,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid #E6E2D8}
.j-bar img{height:19px;width:auto;display:block}
.j-bar .j-only{display:flex;gap:6px;align-items:center;font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:12px;color:#6C685F;margin-right:auto}
.j-bar .j-only svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.j-barbtn{height:32px;padding:0 12px;border-radius:8px;border:1px solid #8F897D;
  background:#fff;color:#1A1A17;font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:13px;font-weight:500;display:inline-flex;gap:7px;align-items:center;cursor:pointer}
.j-barbtn:hover{background:#F0EDE5}
.j-barbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
/* The same switch as the one in the site's header: drawn at the same
   hairline, the same size, no box around it. */
.j-snd{background:none;border:0;padding:5px 6px;cursor:pointer;color:#6C685F;
  line-height:0;transition:color .2s cubic-bezier(.16,1,.3,1)}
.j-snd:hover,.j-snd[aria-pressed="true"]{color:#1A1A17}
.j-snd svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.j-wrap .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:620px){ .j-bar{gap:10px} .j-bar .j-only{font-size:11.5px} }

.sheet{
  --surface:#FAF8F4; --surface-raised:#FFFFFF; --surface-sunk:#F4F1EA; --surface-muted:#F0EDE5;
  --ink:#1A1A17; --ink-strong:#141414; --ink-secondary:#55524A; --ink-muted:#6C685F;
  --on-ink:#FFFFFF; --line:#E6E2D8; --line-strong:#DAD5C9;
  --grow-ink:#1E5B40; --grow-soft:#E3EEE7;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --r-md:8px; --r-lg:10px; --r-xl:12px; --r-pill:999px;
  --col:1040px;

  color-scheme:light;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  font-weight:400;
  padding:clamp(30px,5vh,64px) clamp(20px,3.4vw,44px) clamp(60px,9vh,110px);
  text-align:left;
}
/* The sheet rises as it takes the screen. One move, once. */
@media (prefers-reduced-motion:no-preference){
  .j-wrap{animation:jrise .5s cubic-bezier(.16,1,.3,1)}
  @keyframes jrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
.sheet *{box-sizing:border-box}
.j-sheet-in{max-width:var(--col);margin:0 auto}
.sheet h1,.sheet h2,.sheet h3,.sheet h4{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance}
.sheet p,.sheet ul,.sheet ol{margin:0}
.sheet button{font:inherit;cursor:pointer;color:inherit}
.sheet a{color:var(--ink);font-weight:500;text-underline-offset:3px}
.sheet .j-icon{width:16px;height:16px;flex:none;display:block;fill:none;stroke:currentColor;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* What the run could not do goes above everything else, never folded and
   never in the count. A quiet degraded run is a failed run. */
.sheet .j-degraded{background:var(--surface-sunk);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:14px 16px;margin-bottom:26px;display:grid;gap:7px}
.sheet .j-degraded p{font-size:13px;line-height:1.5;color:var(--ink-secondary);
  display:flex;gap:9px;align-items:flex-start}
.sheet .j-degraded .j-icon{margin-top:2px;color:var(--ink-muted)}
/* Green is the colour of a met standard, and this is the opposite of one.
   It takes the page's own ink instead, and the weight of a solid left edge. */
.sheet .j-stopline{background:var(--surface-muted);border:1px solid var(--line-strong);
  border-left:3px solid var(--ink);border-radius:var(--r-lg);
  padding:14px 16px;margin-bottom:26px;font-size:14px;line-height:1.5;color:var(--ink)}
.sheet .j-stopline b{font-weight:600}

.sheet .j-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  flex-wrap:wrap;margin-bottom:32px}
.sheet h1,.sheet .j-h1{font-size:clamp(25px,3vw,34px);line-height:1.15;letter-spacing:-.005em;margin-bottom:8px}
.sheet .j-src{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  font-size:13px;color:var(--ink-muted);margin:-2px 0 10px}
.sheet .j-lede{font-size:16px;color:var(--ink-secondary);max-width:60ch}
.sheet .j-lede b{font-weight:500;color:var(--ink)}
.sheet .j-assumed{margin-top:7px;font-size:13px;line-height:1.5;color:var(--ink-muted)}
.sheet .j-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--surface-muted);color:var(--ink-secondary)}
/* Green is the only signal colour, and only for a met standard. */
.sheet .j-pill.j-met{background:var(--grow-soft);color:var(--grow-ink)}

.sheet .j-result{margin-bottom:26px}
.sheet .j-result h2{font-size:clamp(21px,2.6vw,30px);line-height:1.2;letter-spacing:-.005em}
.sheet .j-result p{margin-top:8px;font-size:16px;color:var(--ink-secondary)}

/* The two answers. Safe to send, and meets the standard, each yes or not
   yet. Version 1.1 retired the four stop scale and Good and Beyond with it:
   Joy can know whether work meets a standard, and cannot know what great
   looks like for a person. So there is nothing here above met. */
.sheet .j-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  margin-bottom:26px}
.sheet .j-more[open] summary{border-bottom:1px solid var(--line)}
.sheet .j-ans{background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px 20px;display:flex;gap:12px;align-items:flex-start}
.sheet .j-ans .j-icon{width:18px;height:18px;margin-top:1px;color:var(--ink-muted)}
.sheet .j-ans.j-met{border-color:#C9DCD0}
.sheet .j-ans.j-met .j-icon{color:var(--grow-ink)}
.sheet .j-ans b{display:block;font-size:12px;font-weight:500;color:var(--ink-muted);
  margin-bottom:3px}
.sheet .j-ans strong{font-family:var(--serif);font-size:19px;line-height:1.25;
  font-weight:500;color:var(--ink)}
.sheet .j-ans.j-met strong{color:var(--grow-ink)}
.sheet .j-ans small{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-muted);
  margin-top:4px}

.sheet .j-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:26px}
.sheet .j-opt{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;display:grid;gap:6px;align-content:start;min-width:0}
.sheet .j-opt .j-k{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--ink-muted)}
.sheet .j-opt .j-k .j-icon{color:var(--ink)}
.sheet .j-opt.j-good .j-k .j-icon{color:var(--grow-ink)}
.sheet .j-opt p{font-family:var(--serif);font-size:19px;line-height:1.3;font-weight:500;color:var(--ink)}
.sheet .j-opt small{display:block;font-family:var(--sans);font-size:12px;color:var(--ink-muted);
  font-weight:400;margin-top:4px}

.sheet .j-board{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;
  align-items:start}
.sheet .j-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden}
.sheet .j-cardhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.sheet .j-cardhead h3{font-size:19px;line-height:1.25}
.sheet .j-cardhead span{font-size:12px;color:var(--ink-muted)}
/* The level a group of items would unlock, so the maker can see how much
   effort each level asks and choose where to stop. */
/* What's missing comes whole, so a long list folds after three rather than
   being cut. The fold is a disclosure, never a different list. */
.sheet .j-more{border-top:1px solid var(--line)}
.sheet .j-more summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:12px;padding:12px 20px;background:var(--surface-sunk);
  font-size:14px;font-weight:500;color:var(--ink-secondary)}
.sheet .j-more summary::-webkit-details-marker{display:none}
.sheet .j-more summary:hover{color:var(--ink)}
.sheet .j-more summary .j-icon{transition:transform .15s}
.sheet .j-more[open] summary .j-icon{transform:rotate(180deg)}
.sheet .j-h1{font-family:var(--serif);font-weight:500}
.sheet .j-gate{display:inline-flex;align-items:center;height:19px;padding:0 7px;
  border-radius:var(--r-pill);background:var(--surface-muted);font-size:11px;
  font-weight:500;color:var(--ink-secondary);margin-right:8px;vertical-align:1px}

.sheet .j-row{padding:16px 20px;border-top:1px solid var(--line)}
.sheet .j-card .j-row:first-child{border-top:0}
.sheet .j-row .j-meta{font-size:12px;color:var(--ink-muted);margin-bottom:4px;
  overflow-wrap:anywhere}
.sheet .j-row h4{font-size:15px;line-height:1.35;font-weight:500;margin:0 0 3px;
  display:flex;gap:7px;align-items:flex-start}
.sheet .j-row h4 .j-icon{color:var(--ink);margin-top:2px}
.sheet .j-card.j-str .j-row h4 .j-icon{color:var(--grow-ink)}
.sheet .j-row p{font-size:14px;line-height:1.55;color:var(--ink-secondary)}
/* Joy's suggestion is a line the maker could take as written, so it is set
   as the thing itself. */
.sheet .j-sug{margin-top:10px;padding:10px 12px;background:var(--surface-sunk);
  border-radius:var(--r-md);font-family:var(--serif);font-size:15px;line-height:1.4;
  color:var(--ink)}
.sheet .j-copy{margin-top:9px;border:0;background:none;padding:0;font-size:13px;
  color:var(--ink-muted);text-decoration:underline;text-underline-offset:3px}
.sheet .j-copy:hover{color:var(--ink)}
.sheet .j-copy.j-done{color:var(--grow-ink);text-decoration:none}
.sheet .j-empty{padding:18px 20px;font-size:14px;color:var(--ink-muted)}

.sheet .j-note{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  background:var(--surface-sunk);border-radius:var(--r-xl);padding:20px;margin-top:26px}
.sheet .j-note b{display:block;font-weight:500;font-size:13px;margin-bottom:3px;color:var(--ink)}
.sheet .j-note p{font-size:13px;line-height:1.45;color:var(--ink-secondary)}
.sheet .j-note ul{list-style:none;padding:0;margin:5px 0 0}
.sheet .j-note li{font-size:13px;line-height:1.45;color:var(--ink-secondary)}
.sheet .j-note li+li{margin-top:6px}

.sheet .j-end{display:flex;justify-content:flex-end;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:26px}
.sheet .j-end p{font-size:13px;color:var(--ink-muted);margin-right:auto;flex:1 1 240px}
.sheet .j-end .j-priv{display:flex;gap:7px;align-items:center}
.sheet .j-btn{height:40px;border-radius:var(--r-md);padding:0 16px;font-size:14px;font-weight:500;
  border:1px solid #8F897D;background:var(--surface-raised);display:inline-flex;
  gap:8px;align-items:center;white-space:nowrap;color:var(--ink)}
.sheet .j-btn:hover{background:var(--surface-muted)}
.sheet .j-btn.j-primary{background:var(--ink-strong);color:var(--on-ink);border-color:var(--ink-strong)}
.sheet .j-btn.j-primary:hover{background:#000}
.sheet .j-btn.j-done{color:var(--grow-ink)}
.sheet :focus-visible{outline:2px solid var(--ink-strong);outline-offset:2px}
/* The bar is a sibling of the sheet, not a child, so it was falling through
   to the host page's rule and drawing a near white ring on near white. */
.j-wrap :focus-visible{outline:2px solid #141414;outline-offset:2px}

.sheet .j-foot{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-secondary)}
.sheet .j-foot img{height:20px;width:auto;display:block}
.sheet .j-stamp{margin-top:14px;text-align:center;font-size:12px;color:var(--ink-muted)}

.j-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--ink-strong);color:var(--on-ink);padding:9px 16px;border-radius:var(--r-pill);
  font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.j-toast.j-show{opacity:1}

@media (max-width:860px){
  .sheet .j-board,.sheet .j-note{grid-template-columns:1fr}
}
@media (max-width:520px){
  .sheet .j-pair{grid-template-columns:1fr}
  .sheet .j-answers{grid-template-columns:1fr}
}
/* The PDF is written by the page now, not by the browser's print, because
   a printed page carries the browser's own header and footer and a visitor
   cannot be asked to go and untick that. Nothing here needs print rules. */