/* The Work pages and the self-check. Loaded after /blog/blog.css, which
   supplies the tokens, the bar, the head, the cards and the call, so these
   pages look like the blog and a change there reaches them too. Only what the
   blog does not have lives here. Floors from D-55: no functional text below
   11px, and opacity never dims text already at the floor. */

/* ---------- status, on cards and in the head ---------- */
.meta li.live{color:#7FD1A8;border-color:rgba(127,209,168,.45);background:rgba(127,209,168,.08)}
.meta li.test{color:var(--warn);border-color:rgba(217,164,65,.5);background:var(--warn-soft)}
.meta li.ill{border-style:dashed}

/* ---------- the listing: groups of cards ---------- */
.wgroup{max-width:1180px;margin:0 auto;padding:64px 30px 0}
.wgroup h2{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.15;
  font-size:clamp(24px,2.8vw,34px);margin:0 0 10px;text-wrap:balance}
.wgroup > p{margin:0;color:var(--text-secondary);max-width:64ch}
.wgroup .posts{padding:26px 0 0;max-width:none}
/* a group of two fills the row as two equal cards, never two and a gap */
.wgroup .posts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.wgroup .posts.two{grid-template-columns:1fr}}
.wcall{max-width:1180px;margin:0 auto;padding:0 30px}
@media (max-width:720px){
  .wgroup{padding:48px 20px 0}
  .wgroup .posts{padding:20px 0 0}
  .wcall{padding:0 20px}
}

/* an illustration says so before anything else */
.note{position:relative;margin:0 0 26px;padding:13px 16px 13px 46px;max-width:62ch;
  border:1px dashed var(--line-2);border-radius:10px;color:var(--text-secondary);font-size:15px;line-height:1.55}
.note::before{content:"";position:absolute;left:18px;top:17px;width:11px;height:11px;border:2px solid var(--text-secondary);
  border-radius:2px;transform:rotate(14deg)}
.note b{color:var(--text-primary);font-weight:500}

/* ---------- the flow: equal steps that arrive one after another ----------
   Four to a row, then two, then one. A step that stays with a person is amber,
   the same "to you" colour the home page's machine uses. */
.flow{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  counter-reset:f;--step:.16s}
.flow li{counter-increment:f;position:relative;display:flex;flex-direction:column;gap:6px;min-height:124px;
  padding:14px 14px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel)}
.flow li::before{content:counter(f,decimal-leading-zero);font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.14em;color:var(--accent-hover)}
.flow li::after{content:"";position:absolute;top:50%;right:-14px;width:14px;height:2px;background:var(--accent)}
.flow li:nth-child(4n)::after,.flow li:last-child::after{display:none}
.flow b{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.3;color:var(--text-primary)}
.flow span{font-size:13.5px;line-height:1.5;color:var(--text-secondary)}
.flow li.you{border-color:rgba(217,164,65,.5);background:var(--warn-soft)}
.flow li.you::before{color:var(--warn)}
.legend{margin:12px 0 0;font-size:13px;color:var(--text-secondary)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 6px 0 0;vertical-align:-1px}
.legend i.a{background:var(--accent)}
.legend i.w{background:var(--warn)}
.legend i + span{margin-right:16px}
@media (max-width:900px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow li:nth-child(n)::after{display:block}
  .flow li:nth-child(2n)::after,.flow li:last-child::after{display:none}
}
@media (max-width:520px){
  .flow{grid-template-columns:1fr;gap:12px}
  .flow li{min-height:0}
  .flow li:nth-child(n)::after{display:block;top:auto;bottom:-12px;left:28px;right:auto;width:2px;height:12px}
  .flow li:last-child::after{display:none}
}

/* ---------- stat tiles ---------- */
.stats{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;--step:.12s}
.stats li{display:flex;flex-direction:column;gap:4px;padding:16px 16px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel)}
.stats b{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,34px);line-height:1.1;color:var(--text-primary)}
.stats span{font-size:13.5px;line-height:1.45;color:var(--text-secondary)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- spacing inside a section ---------- */
.sec .after{margin-top:22px}
.sec h3.sub{margin-top:32px}

/* ---------- practices: the blue twin of the blog's amber .breaks ---------- */
.keeps{list-style:none;margin:12px 0 0;padding:0}
.keeps li{position:relative;padding:14px 16px 14px 44px;margin:0 0 10px;border:1px solid rgba(76,139,239,.3);
  border-radius:10px;background:var(--accent-soft)}
.keeps li::before{content:"";position:absolute;left:17px;top:21px;width:11px;height:11px;border-radius:2px;background:var(--accent)}
.keeps li strong{color:var(--text-primary)}

/* ---------- built with ---------- */
.built{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;--step:.05s}
.built li{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.03em;color:var(--text-primary);
  border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;background:var(--panel-2)}

/* ---------- four doors, two by two ---------- */
.doors{margin:24px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;--step:.2s}
.doors > div{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);overflow:hidden}
.doors h3{margin:0;padding:11px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-weight:500;
  font-size:12px;letter-spacing:.14em;color:var(--accent-hover);background:rgba(46,111,212,.08)}
.doors ul{list-style:none;margin:0;padding:6px 16px 10px;flex:1}
.doors li{position:relative;padding:8px 0 8px 22px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--text-secondary)}
.doors li:first-child{border-top:0}
.doors li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:9px;border-radius:2px;background:var(--accent)}
.doors li b{color:var(--text-primary);font-weight:500}
@media (max-width:760px){.doors{grid-template-columns:1fr}}

/* ---------- the stitch: each step and the tool that carried it ---------- */
.stitch{list-style:none;margin:24px 0 0;padding:0;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  background:var(--panel);--step:.1s}
.stitch li{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:center;gap:8px 10px;
  min-height:52px;padding:10px 16px;border-top:1px solid var(--line)}
.stitch li:first-child{border-top:0}
.stitch li.hd{min-height:0;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;color:var(--text-secondary);
  background:rgba(142,156,171,.05)}
.stitch .s{color:var(--text-primary);font-size:15px;line-height:1.4}
.stitch i{display:block;height:2px;background:var(--line-2);position:relative}
.stitch i::after{content:"";position:absolute;right:0;top:-4px;border-left:7px solid var(--line-2);border-top:5px solid transparent;border-bottom:5px solid transparent}
.stitch .t{justify-self:start;font-family:var(--mono);font-weight:500;font-size:12.5px;line-height:1.4;padding:5px 10px;border-radius:8px;
  border:1px solid rgba(76,139,239,.5);background:var(--accent-soft);color:var(--text-primary)}
.stitch .t.glue{border-color:rgba(217,164,65,.5);background:var(--warn-soft)}
@media (max-width:560px){
  .stitch li{grid-template-columns:1fr;gap:6px}
  .stitch li.hd{display:none}
  .stitch i{display:none}
}

/* ---------- the test calls: one square each ---------- */
.tests{margin:24px 0 0;padding:16px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel)}
.tests ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;--step:.06s}
.tests li{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  font-size:13.5px;line-height:1.35;color:var(--text-secondary)}
.tests li::before{content:"";flex:none;width:14px;height:14px;border-radius:3px;background:var(--accent)}
.tests li.no{color:var(--text-primary);border-color:rgba(217,164,65,.45);background:var(--warn-soft)}
.tests li.no::before{background:transparent;border:2px solid var(--warn);transform:rotate(14deg)}
.tests p{margin:14px 2px 0;font-size:13px;color:var(--text-secondary)}
/* the eighteenth tile carries the score, so the grid has no gap */
.tests li.sum{justify-content:center;border-color:rgba(76,139,239,.55);background:var(--accent-soft);color:var(--text-primary);font-weight:500}
.tests li.sum::before{display:none}
.tests li.sum b{font-family:var(--display);font-weight:700;font-size:20px;margin-right:6px}
@media (max-width:420px){.tests li.sum{justify-content:flex-start}}
@media (max-width:760px){.tests ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.tests ol{grid-template-columns:1fr}}

/* ---------- bins: where each kind of message goes ---------- */
.bins{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;--step:.14s}
.bins li{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line-2);border-top:3px solid var(--accent);
  border-radius:12px;background:var(--panel)}
.bins li.you{border-top-color:var(--warn);background:var(--warn-soft)}
.bins b{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.3;color:var(--text-primary)}
.bins span{font-size:14px;line-height:1.5;color:var(--text-secondary)}
@media (max-width:900px){.bins{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.bins{grid-template-columns:1fr}}

/* ---------- the call, with a second way in ---------- */
.call .acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.call .acts a.lk2{font-weight:500;display:inline-flex;align-items:center;min-height:44px}

/* ======================================================================
   The self-check
   ====================================================================== */
.chk{max-width:820px;margin:0 auto;padding:40px 30px 0}
@media (max-width:720px){.chk{padding:28px 20px 0}}
.chk noscript p{padding:16px;border:1px dashed var(--line-2);border-radius:10px;color:var(--text-secondary)}

/* progress: the container's nine squares, one for each scored question */
.prog{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.prog[hidden],.qcard[hidden]{display:none}
.prog .pm{width:34px;flex:none;color:var(--text-primary)}
.prog .pm svg{display:block;width:100%;height:auto}
.prog .pm rect{fill:transparent;stroke:var(--text-secondary);stroke-width:5;transition:fill .3s ease,stroke .3s ease}
.prog .pm rect.on{fill:var(--accent);stroke:var(--accent)}
.prog span{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;color:var(--text-secondary)}
.prog .bar2{flex:1;height:4px;border-radius:4px;background:var(--line-2);overflow:hidden}
.prog .bar2 i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s var(--ease)}

.qcard{border:1px solid var(--line-2);border-radius:16px;background:var(--panel);padding:28px 28px 24px}
@media (max-width:720px){.qcard{padding:22px 18px 18px}}
.qcard legend{padding:0;font-family:var(--display);font-weight:700;font-size:clamp(21px,2.4vw,27px);line-height:1.25;
  color:var(--text-primary);text-wrap:balance;margin:0 0 6px}
.qcard fieldset{border:0;margin:0;padding:0;min-width:0}
.qcard .hint{margin:0 0 18px;color:var(--text-secondary);font-size:15px}
.opts{display:grid;gap:10px;margin:18px 0 0}
.opt{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 16px;border:1px solid var(--line-2);
  border-radius:11px;background:var(--panel-2);cursor:pointer;color:var(--text-primary);font-size:16px;line-height:1.4;
  transition:border-color .2s ease,background .2s ease}
.opt:hover{border-color:var(--accent)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .box{flex:none;width:18px;height:18px;border-radius:4px;border:2px solid var(--text-secondary);transform:rotate(12deg);
  transition:transform .35s var(--paper),background .2s ease,border-color .2s ease}
.opt input:checked + .box{transform:none;background:var(--accent);border-color:var(--accent)}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.opt input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:4px}
.qnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0 0}
.back{font:inherit;font-size:15px;color:var(--text-secondary);background:transparent;border:1px solid var(--line-2);border-radius:7px;
  min-height:44px;padding:0 16px;cursor:pointer}
.back:hover{color:var(--text-primary);border-color:var(--accent)}
.back[hidden]{display:none}
.qnav .btn{border:0;cursor:pointer;font:inherit;font-weight:500;font-size:15px}
.qnav .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* the details step */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 0}
.fields label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-secondary)}
.fields label.wide{grid-column:1 / -1}
.fields input{min-height:48px;font:inherit;font-size:16px;color:var(--text-primary);background:var(--panel-2);
  border:1px solid var(--line-2);border-radius:8px;padding:10px 12px}
.fields input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine{margin:14px 0 0;font-size:13px;color:var(--text-secondary)}
.err{margin:14px 0 0;padding:10px 12px;border:1px solid rgba(217,164,65,.5);border-radius:8px;background:var(--warn-soft);
  color:var(--text-primary);font-size:14.5px}
.err[hidden]{display:none}
@media (max-width:560px){.fields{grid-template-columns:1fr}}

/* the result */
.res{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px 40px;align-items:center;
  border:1px solid var(--line-2);border-radius:16px;background:var(--panel);padding:30px}
.res .rm2{width:240px}
.res .rm2 svg{display:block;width:100%;height:auto;overflow:visible}
.res .rm2 .box{fill:var(--text-primary)}
.res .rm2 .cell{transform-box:fill-box;transform-origin:center;fill:var(--accent);stroke:transparent;stroke-width:3;
  transition:transform 1.1s var(--paper),fill .5s ease .3s,stroke .5s ease .3s;transition-delay:calc(var(--i,0) * .09s)}
.res .rm2 .cell.half{fill:var(--warn-soft);stroke:var(--warn)}
.res .rm2 .cell.loose{fill:transparent;stroke:var(--text-secondary)}
.res .rm2.pre .cell{transform:none;fill:var(--accent);stroke:transparent}
.res .rm2 .cell.half,.res .rm2 .cell.loose{transform:translate(var(--tx),var(--ty)) rotate(var(--r))}
.res .rm2.pre .cell.half,.res .rm2.pre .cell.loose{transform:none}
@media (prefers-reduced-motion:reduce){.res .rm2 .cell{transition:none}}
.res h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,36px);line-height:1.15;margin:0 0 10px;text-wrap:balance}
.res .sum{margin:0;color:var(--text-secondary);font-size:16.5px}
.res .sum b{color:var(--text-primary);font-weight:500}
.res .key{margin:14px 0 0;font-size:13px;color:var(--text-secondary)}
.res .key i{display:inline-block;width:11px;height:11px;border-radius:2px;margin:0 6px 0 0;vertical-align:-1px}
.res .key i.a{background:var(--accent)}
.res .key i.h{background:var(--warn-soft);border:2px solid var(--warn);transform:rotate(12deg)}
.res .key i.l{border:2px solid var(--text-secondary);transform:rotate(12deg)}
.res .key i + span{margin-right:14px}
@media (max-width:720px){
  .res{grid-template-columns:1fr;padding:22px 18px}
  .res .rm2{width:160px}
}
.grid9{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.grid9 li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:2px 10px;align-items:center;
  min-height:64px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel)}
.grid9 i{grid-row:1 / span 2;width:14px;height:14px;border-radius:3px;background:var(--accent)}
.grid9 li.half{border-color:rgba(217,164,65,.45);background:var(--warn-soft)}
.grid9 li.half i{background:transparent;border:2px solid var(--warn);transform:rotate(12deg)}
.grid9 li.loose{border-style:dashed}
.grid9 li.loose i{background:transparent;border:2px solid var(--text-secondary);transform:rotate(-16deg)}
.grid9 b{font-weight:500;font-size:14.5px;line-height:1.3;color:var(--text-primary)}
.grid9 span{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--text-secondary)}
/* three across at every width, so the grid always matches the mark */
@media (max-width:560px){
  .grid9{gap:6px}
  .grid9 li{grid-template-columns:1fr;grid-template-rows:auto;align-content:start;gap:6px;padding:10px}
  .grid9 i{grid-row:auto}
  .grid9 b{font-size:13.5px}
}
.rt{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.2vw,26px);line-height:1.2;margin:40px 0 0}
.tops{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;--step:.18s}
.tops li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:18px 20px;
  border:1px solid var(--line-2);border-left:3px solid var(--warn);border-radius:12px;background:var(--panel)}
.tops li.half{border-left-color:rgba(217,164,65,.55)}
.tops b{display:block;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.3;color:var(--text-primary);margin:0 0 4px}
.tops p{margin:0;color:var(--text-secondary);font-size:15px;line-height:1.55}
.tops a{font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
@media (max-width:640px){.tops li{grid-template-columns:1fr}}
.clear{margin:22px 0 0;padding:18px 20px;border:1px solid rgba(127,209,168,.4);border-radius:12px;background:rgba(127,209,168,.07);color:var(--text-secondary)}
.clear b{color:var(--text-primary);font-weight:500}
.sent{margin:18px 0 0;font-size:14px;color:var(--text-secondary)}