/* Canzuki readiness check. Loaded after canzuki.css and uses its tokens. */

:root{
  --rc-amber:#C07A0A;--rc-amber-on-dark:#E0A33A;--rc-amber-tint:#FBF1DC;--rc-amber-text:#8A5A06;
  --rc-red:#B4453C;--rc-red-on-dark:#E06B5F;--rc-red-tint:#FBF3F2;--rc-red-text:#9E3A32
}
.rc{min-height:420px;scroll-margin-top:96px}
.rc-noscript{border:1px dashed var(--fill);background:var(--paper-2);padding:20px;color:var(--muted)}

/* ---------- layout: text left, foundation right ---------- */
.rc-intro,.rc-q,.rc-res__head{display:grid;gap:clamp(28px,5vw,64px);align-items:start}
@media (min-width:900px){
  .rc-intro,.rc-q{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  .rc-res__head{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end}
}
.rc-intro__text{max-width:58ch}
.rc-intro__text h2{margin-bottom:18px}
.rc-intro__note{margin-top:18px}
.rc-intro > *,.rc-q > *,.rc-res__head > *{min-width:0}

/* ---------- the foundation stack ---------- */
.rc-stack{max-width:340px;margin-inline:auto;padding-top:8px}
.rc-stack--large{max-width:400px}
.rc-slab{
  border:1.5px solid var(--slate);background:var(--slate);border-radius:2px;
  padding:12px 14px 14px;transform-origin:50% 100%;
  transition:transform .6s cubic-bezier(.2,.7,.3,1),border-color .3s,background .3s
}
.rc-slab__label{display:block;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.06em;color:#fff;margin-bottom:10px}
.rc-slab__segs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rc-slab.is-loose{background:#5B6770;border-style:dashed;border-color:#8A97A0}
.rc-slab.tilt-l{transform:rotate(-3deg) translateY(-4px)}
.rc-slab.tilt-r{transform:rotate(3deg) translateY(-4px)}
.rc-slab.tilt-c{transform:translateY(3px)}
.rc-slab.tilt-x{transform:rotate(-2deg) translateY(-2px)}

.rc-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,18px);margin-top:10px}
.rc-pillar{display:flex;flex-direction:column-reverse;gap:5px;padding:0 10%}
/* pillars can hold four or five blocks; every pillar stretches to the tallest,
   so a group with fewer questions never looks weaker than it is */
.rc-pillars:not(.rc-pillars--names){align-items:stretch}
.rc-pillar .rc-block{flex:1 1 auto;height:auto;min-height:clamp(26px,4.2vw,36px)}
.rc-pillars--names{margin-top:10px}
.rc-pillar__name{font-family:var(--display);font-size:.72rem;font-weight:600;color:var(--slate);line-height:1.25;text-align:center}
.rc-ground{height:0;border-top:2px solid var(--muted);margin:0 -6px}

.rc-block{
  display:block;height:clamp(26px,4.2vw,36px);border-radius:2px;
  border:1.5px solid var(--border);background:var(--paper);
  transition:background .3s,border-color .3s,transform .3s
}
.rc-slab .rc-block{height:14px;border-color:#7C8B95;background:transparent}
.rc-block.is-empty{border-style:dashed;border-color:var(--rule)}
.rc-slab .rc-block.is-empty{border-color:#6C7A84}
/* answer colours: green in place (3), amber partly there (2), red a gap (0, 1, or not sure).
   Amber and red are matched to the brand green's contrast on white (about 3.5:1)
   and get brighter equivalents on the slate slab, as the green does. */
.rc-block.is-unsure{border-style:dashed;border-color:var(--rc-red);background:var(--rc-red-tint)}
.rc-block.lvl-0,.rc-block.lvl-1{border-color:var(--rc-red);background:var(--rc-red)}
.rc-block.lvl-2{border-color:var(--rc-amber);background:var(--rc-amber)}
.rc-block.lvl-3{border-color:var(--green);background:var(--green)}
.rc-slab .rc-block.is-unsure{border-color:var(--rc-red-on-dark);background:transparent}
.rc-slab .rc-block.lvl-0,.rc-slab .rc-block.lvl-1{background:var(--rc-red-on-dark);border-color:var(--rc-red-on-dark)}
.rc-slab .rc-block.lvl-2{background:var(--rc-amber-on-dark);border-color:var(--rc-amber-on-dark)}
.rc-slab .rc-block.lvl-3{background:var(--green-bright);border-color:var(--green-bright)}
.rc-block.is-current{outline:2px solid var(--green);outline-offset:2px}
.rc-slab .rc-block.is-current{outline-color:#94E77E}

/* ---------- question ---------- */
.rc-progress{height:3px;background:var(--rule);margin-bottom:26px;border-radius:2px;overflow:hidden}
.rc-progress__bar{display:block;height:100%;background:var(--green);transition:width .35s ease}
.rc-q__sec{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--slate);margin:0 0 4px;display:flex;gap:12px;align-items:baseline}
.rc-q__no{font-weight:700;font-size:.78rem;letter-spacing:.16em;color:var(--green-text)}
.rc-q__count{font-size:.85rem;color:var(--muted);margin:0 0 18px}
.rc-q__prompt{font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.25;max-width:32ch;margin-bottom:26px}
.rc-q__prompt:focus{outline:none}
.rc-q__fig .rc-stack{position:sticky;top:110px}

.rc-options{display:grid;gap:10px;max-width:60ch}
.rc-option{
  display:flex;gap:16px;align-items:center;text-align:left;width:100%;min-height:56px;
  font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);cursor:pointer;
  border:1px solid var(--rule);border-radius:2px;padding:12px 18px;
  transition:border-color .2s,background .2s
}
.rc-option:hover{border-color:var(--green)}
.rc-option__key{
  flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:.78rem;font-weight:700;color:var(--muted);
  border:1px solid var(--rule);border-radius:2px
}
.rc-option.is-chosen{border-color:var(--green);background:var(--tint)}
.rc-option.is-chosen .rc-option__key{background:var(--green-text);border-color:var(--green-text);color:#fff}
@media (hover:none){.rc-option:hover{border-color:var(--rule)}.rc-option.is-chosen{border-color:var(--green)}}

.rc-nav{display:flex;justify-content:space-between;align-items:center;max-width:60ch;margin-top:18px}
.rc-link{
  background:none;border:none;padding:10px 0;min-height:44px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--muted)
}
.rc-link:hover{color:var(--green-text)}
.rc-link.is-chosen{color:var(--green-text);text-decoration:underline}

/* ---------- results ---------- */
.rc-res__title{font-size:clamp(1.8rem,4vw,2.8rem);max-width:18ch;margin-bottom:18px}
.rc-res__title:focus{outline:none}
.rc-res__head .lead{max-width:52ch}
.rc-h{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:6px}
.rc-block-sec{margin-top:clamp(44px,6vw,64px)}
.rc-critical{margin-top:clamp(36px,5vw,52px);max-width:var(--measure)}
.rc-critical p{margin-bottom:.6em}

.rc-rows{border-top:1px solid var(--rule);margin-top:20px}
.rc-row{
  border-bottom:1px solid var(--rule);padding:22px 0;display:grid;gap:6px 32px;
  grid-template-columns:1fr
}
@media (min-width:860px){.rc-row{grid-template-columns:minmax(260px,1fr) minmax(0,2fr);grid-template-areas:"head text" "meter text" "score text"}}
@media (min-width:860px){
  .rc-row__head{grid-area:head}.rc-meter{grid-area:meter}.rc-row__score{grid-area:score}.rc-row__text{grid-area:text}
}
.rc-row__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.rc-row__head h3{font-size:1.05rem;margin:0}
.rc-row__no{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.16em;color:var(--green-text)}
.rc-row__status{
  font-family:var(--display);font-size:.78rem;font-weight:600;padding:2px 9px;border-radius:2px;
  border:1px solid var(--rule);color:var(--muted)
}
.rc-row.is-solid .rc-row__status{border-color:var(--green);color:#376E26;background:var(--tint)}
.rc-row.is-attention .rc-row__status{border-color:var(--rc-amber);color:var(--rc-amber-text);background:var(--rc-amber-tint)}
.rc-row.is-notready .rc-row__status{border-color:var(--rc-red);color:var(--rc-red-text);background:var(--rc-red-tint)}
.rc-meter{position:relative;height:8px;background:var(--panel);border-radius:2px;margin-top:8px;max-width:340px}
.rc-meter__fill{display:block;height:100%;background:var(--rc-red);border-radius:2px}
.rc-row.is-solid .rc-meter__fill{background:var(--green)}
.rc-row.is-attention .rc-meter__fill{background:var(--rc-amber)}
.rc-meter__mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--slate)}
.rc-row__score{margin:0;font-size:.85rem;color:var(--muted)}
.rc-row__text{margin:0;max-width:62ch}

.rc-acts{margin-top:8px}
.rc-acts__more{margin-top:14px}
.rc-acts__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);max-width:var(--measure)}
.rc-acts__list li{border-bottom:1px solid var(--rule);padding:16px 0 16px 34px;position:relative}
.rc-acts__list li::before{content:"";position:absolute;left:0;top:27px;width:18px;height:2px;background:var(--green)}
.rc-acts__sec{display:block;font-family:var(--display);font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:4px}
.rc-acts__list p{margin:0}

.rc-close,.rc-guides{margin-top:clamp(44px,6vw,64px);border-top:1px solid var(--rule);padding-top:clamp(28px,4vw,40px)}
.rc-pair{display:grid;gap:clamp(20px,4vw,48px);margin-top:20px}
@media (min-width:760px){.rc-pair{grid-template-columns:1fr 1fr}}
.rc-pair h3{margin-bottom:8px}
.rc-close__note{margin-top:24px;color:var(--muted);font-size:.95rem}

.rc-talk{margin-top:clamp(44px,6vw,64px);background:var(--slate);color:#E7ECEF;padding:clamp(28px,5vw,52px)}
.rc-talk h2{color:#fff;margin-bottom:18px}
.rc-talk p{max-width:62ch}
.rc-policy{border-top-color:#56636C;margin-top:24px;max-width:62ch}
.rc-policy li{color:#fff;border-bottom-color:#56636C;font-size:1rem}
.rc-policy li::before{background:var(--green-bright)}

.rc-guides{display:grid;gap:clamp(24px,4vw,56px)}
@media (min-width:860px){.rc-guides{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.rc-guides__list{margin:0;padding-left:20px}
.rc-guides__list li{margin-bottom:6px;font-weight:500;color:var(--slate)}
.rc-guides__cta{border-left:1px solid var(--rule);padding-left:clamp(20px,3vw,36px)}
@media (max-width:859px){.rc-guides__cta{border-left:none;padding-left:0}}
.rc-guides__talk{grid-column:1/-1;margin:0}
.rc-guides .notice{grid-column:1/-1;margin:0}
.rc-guides__form{margin-top:0}

.rc-tools{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:clamp(40px,5vw,56px)}
.rc-caveat{max-width:62ch;margin-top:18px}

@media (max-width:899px){
  .rc-q__fig{order:-1}
  .rc-q__fig .rc-stack{position:static;max-width:240px}
  .rc-q__fig .rc-block{height:16px}
  .rc-q__fig .rc-pillar .rc-block{height:auto;min-height:16px}
  .rc-q__fig .rc-pillar__name{font-size:.62rem}
  .rc-intro__fig{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rc-slab{transition:none}
}

/* ---------- print: the results only ---------- */
@media print{
  @page{size:A4;margin:16mm}
  body{font-size:11pt}
  .masthead,.foot,.hero,.skip,.rc-tools,.rc-guides,.rc-talk .btnrow,.rc-page-intro{display:none !important}
  .band{padding:0 !important;border:none !important;background:none !important}
  /* page 1: headline across the top, the foundation large beneath it */
  .rc-res__head{display:block !important}
  .rc-res__title{max-width:none;font-size:26pt}
  .rc-res__head .lead{max-width:none;font-size:12pt}
  .rc-res__fig{margin:10mm 0 4mm}
  .rc-res__fig .rc-stack{max-width:140mm;margin:0 auto}
  .rc-res__fig .rc-slab{padding:5mm 6mm 6mm}
  .rc-res__fig .rc-slab__label{font-size:11pt;margin-bottom:4mm}
  .rc-res__fig .rc-slab__segs{gap:3mm}
  .rc-res__fig .rc-slab .rc-block{height:6mm}
  .rc-res__fig .rc-pillars{gap:8mm;margin-top:3mm}
  .rc-res__fig .rc-pillar{gap:2.5mm}
  .rc-res__fig .rc-pillar .rc-block{min-height:14.5mm}
  .rc-res__fig .rc-pillar__name{font-size:10pt}
  .rc-res__fig .rc-pillars--names{margin-top:3mm}
  .rc-res__fig .rc-legend{font-size:9.5pt;gap:2mm 8mm;margin-top:5mm}
  .rc-res__fig .rc-legend i{width:4mm;height:4mm}
  /* smaller diagram when page 1 also has to hold two or three critical findings */
  .rc-res--crit2 .rc-res__fig .rc-stack{max-width:120mm}
  .rc-res--crit2 .rc-res__fig .rc-pillar .rc-block{min-height:10mm}
  .rc-res--crit3 .rc-res__fig{margin:6mm 0 2mm}
  .rc-res--crit3 .rc-res__fig .rc-stack{max-width:105mm}
  .rc-res--crit3 .rc-res__fig .rc-pillar .rc-block{min-height:7.5mm}
  .rc-res--crit3 .rc-res__fig .rc-slab .rc-block{height:4.5mm}
  /* the route back, at the end of every printout */
  .rc-print-foot{display:block !important;margin-top:10mm;padding-top:4mm;border-top:1px solid var(--rule);
    font-size:10pt;color:var(--slate);break-inside:avoid}
  .rc-print-foot strong{font-family:var(--display)}
  .rc-row{break-inside:avoid;grid-template-columns:1fr 2fr !important;grid-template-areas:"head text" "meter text" "score text"}
  .rc-row__head{grid-area:head}.rc-meter{grid-area:meter}.rc-row__score{grid-area:score}.rc-row__text{grid-area:text}
  .rc-acts__list li{break-inside:avoid}
  /* the two main result sections each start on a fresh page */
  section[aria-labelledby="rc-where"],
  section[aria-labelledby="rc-do"]{break-before:page;page-break-before:always;margin-top:0}
  .rc-h,.rc-acts .subhead{break-after:avoid;page-break-after:avoid}
  .rc-check,.rc-talk,.rc-critical,.callout,.rc-res__head{break-inside:avoid;page-break-inside:avoid}
  .rc-talk{background:none;color:var(--ink);border:1px solid var(--rule)}
  .rc-talk h2,.rc-policy li{color:var(--slate)}
  .rc-block,.rc-slab,.rc-meter__fill,.rc-row__status,.rc-legend i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rc-print-head{display:block !important}
}
.rc-print-head{display:none}

/* legend: colour is never the only signal, but it should be explained */
.rc-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:14px 0 0;padding:0;list-style:none;font-size:.74rem;color:var(--muted)}
.rc-legend li{display:flex;align-items:center;gap:6px}
.rc-legend i{display:inline-block;width:12px;height:12px;border-radius:2px}
.rc-legend .g{background:var(--green)}.rc-legend .a{background:var(--rc-amber)}.rc-legend .r{background:var(--rc-red)}
@media (max-width:899px){.rc-q__fig .rc-legend{display:none}}

/* double check, before the alarm bells */
.rc-check{margin-top:clamp(44px,6vw,64px);border:1px solid var(--rule);border-left:4px solid var(--rc-amber);background:var(--paper);padding:clamp(22px,4vw,36px)}
.rc-check > p{max-width:62ch}
.rc-check__pair{margin-top:6px}
.rc-check__pair p{margin:0}
.rc-check__tools{margin-top:22px}
.rc-check__copied{font-size:.85rem;color:var(--muted);word-break:break-all}
@media print{.rc-check__tools{display:none}}

/* version stamp, so a result or a screenshot can be tied to a question set */
.rc-version{margin:28px 0 0;font-size:.72rem;color:var(--muted);letter-spacing:.02em}
@media print{.rc-version{display:block !important;margin-top:12px}}

/* the start button, in the heading and in "How it works" */
.btn.rc-start{font-size:1.05rem;padding:16px 34px;min-height:54px;letter-spacing:.01em}
@media (max-width:520px){.btn.rc-start{width:100%}}

/* hero diagram: a decision on three pillars, one falling short */
.rc-sv-pillar{fill:var(--tint);stroke:var(--green);stroke-width:2}
.rc-sv-gap{fill:none;stroke:var(--border);stroke-width:1.5;stroke-dasharray:5 5}
.rc-sv-ground{stroke:var(--muted);stroke-width:2;fill:none}
.rc-sv-tick{stroke:var(--green);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rc-sv-dim{opacity:.7}

.rc-print-foot{display:none}

/* ---------- phones: the foundation and the whole question on one screen ----------
   The diagram shrinks to a strip above the question, so a visitor sees their
   block land while reading the next question, with no scrolling or waiting. */
@media (max-width:899px){
  .rc{scroll-margin-top:62px}
  .rc-q{gap:14px}
  .rc-q__fig .rc-stack{max-width:250px;padding-top:0}
  .rc-q__fig .rc-slab{padding:6px 8px 7px}
  .rc-q__fig .rc-slab__label{font-size:.6rem;margin-bottom:4px}
  .rc-q__fig .rc-slab__segs{gap:4px}
  .rc-q__fig .rc-slab .rc-block{height:6px}
  .rc-q__fig .rc-pillars{margin-top:4px;gap:10px}
  .rc-q__fig .rc-pillar{gap:3px}
  .rc-q__fig .rc-pillar .rc-block{height:auto;min-height:9px}
  .rc-q__fig .rc-pillars--names{margin-top:4px}
  .rc-q__fig .rc-pillar__name{font-size:.58rem;line-height:1.15}
  .rc-progress{margin-bottom:14px}
  .rc-q__count{margin-bottom:10px}
  .rc-q__prompt{font-size:1.18rem;margin-bottom:16px}
  .rc-options{gap:8px}
  .rc-option{min-height:48px;padding:9px 14px;font-size:.95rem}
  .rc-nav{margin-top:8px}
}
/* the block just laid gives a small pop, so the "build" is noticed */
@keyframes rc-pop{0%{transform:scale(.6);opacity:.4}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.rc-block.is-new{animation:rc-pop .45s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.rc-block.is-new{animation:none}}
/* short phones (iPhone SE and similar): a little tighter still */
@media (max-width:899px) and (max-height:780px){
  .rc-q{gap:10px}
  .rc-q__fig .rc-stack{max-width:220px}
  .rc-q__fig .rc-slab__label{display:none}
  .rc-q__fig .rc-pillar .rc-block{min-height:7px}
  .rc-q__fig .rc-pillar__name{font-size:.55rem}
  .rc-progress{margin-bottom:10px}
  .rc-q__sec{font-size:.85rem}
  .rc-q__count{margin-bottom:6px;font-size:.8rem}
  .rc-q__prompt{font-size:1.08rem;margin-bottom:12px}
  .rc-option{min-height:44px;padding:7px 12px;font-size:.92rem;gap:12px}
  .rc-option__key{width:22px;height:22px}
  .rc-nav{margin-top:2px}
}