/* ═══════════════════════════════════════════════════════════════════
   The try page (wave 10, the simple design): /try/leader/ and /sk/try/leader/.
   One picture (the line of steps), three answers each with one familiar
   chart, two buttons; a tapped step opens its own charts beside a one-
   question-at-a-time editor (a bottom sheet on a phone). Everything an
   auditor needs is behind "How we counted" and on page 2 of the PDF.
   Text 18 px and more (19 px body on a phone, 20 px on a computer), no
   capitals, no italics, nothing cut short. One colour means one thing:
   teal still in the process, sun a good ending, sand stopped, a hatch
   not known. The charts are js/vedomia-charts.js, the three answers
   js/vedomia-answers.js.
   The same line, the same three cards and the three small answers of a
   process card are drawn in the Workspace inside a .ty-kit box (the
   Report in numbers first screen, the organisation overview): the tokens
   and the few page-wide rules below apply there too, and nowhere else.
   ═══════════════════════════════════════════════════════════════════ */
/* One glyph from Open Sans: the plain zero (Atkinson Hyperlegible Next only has a slashed one, read as a letter). */
@font-face{font-family:'VDM Zero';src:url(/fonts/OpenSans-normal-latin.woff2) format('woff2');unicode-range:U+0030;font-weight:400 700;font-display:swap}

body.ws.ty,.ty-kit,details.ty-counted{
  --y-deep:#082f2d; --y-teal:#12625f; --y-teal-soft:#e6f0ee; --y-teal-mid:#d3e6e1; --y-teal-line:#a9cbc4;
  --y-brass:#86613d; --y-ink:#10211f; --y-muted:#4b5d59; --y-sun:#e89a1a; --y-sun-soft:#fdf1dc; --y-sun-line:#f0cf95;
  --y-bg:#fbf8f2; --y-card:#fffdf9; --y-rule:#e7e0d4; --y-r:22px;
  --y-font:"VDM Zero","Atkinson Hyperlegible Next",system-ui,sans-serif
}
body.ws.ty{margin:0;background:var(--y-bg);color:var(--y-ink);font-family:var(--y-font);font-size:20px;line-height:1.5;-webkit-font-smoothing:antialiased}
.ty-kit{color:var(--y-ink);font-family:var(--y-font);font-size:20px;line-height:1.5;-webkit-font-smoothing:antialiased}
html body .ty-kit :is(h1,h2,h3,h4,p){font-family:var(--y-font)}
/* In the Workspace its journey pages' own resets (.ws .wj :where(h2, p)) come first: the kit's type wins over them. */
html body .ty-kit .ty-q{color:var(--y-teal);font-size:20px;line-height:1.3;letter-spacing:0;margin:0}
html body .ty-kit .ty-card.warm .ty-q{color:var(--y-brass)}
html body .ty-kit .ty-big{margin:16px 0 6px}
html body .ty-kit .ty-big.none{margin:22px 0 14px}
html body .ty-kit .ty-say{margin:0}
html body .ty-kit .ty-hint{margin:26px 0 0}
body.ty [hidden]{display:none!important}
body.ty svg,.ty-kit svg{display:block;overflow:visible}
body.ty .ty-defs{position:absolute}
body.ty .ty-wrap{max-width:1264px;margin:0 auto;padding:0 32px}
body.ty :focus-visible,.ty-kit :focus-visible{outline:3px solid var(--y-sun);outline-offset:3px;border-radius:10px}
.ty-ico{display:inline-flex;flex:none}
body.ty .ty-skip{position:fixed;left:16px;top:-80px;z-index:1000;padding:11px 15px;border-radius:9px;background:#fff;color:var(--y-deep);font-size:18px}
body.ty .ty-skip:focus{top:16px}

/* ── the top: the brand and the other language ── */
.ty-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 0 0}
body.ty .ty-brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:21px;color:var(--y-deep);text-decoration:none}
body.ty .ty-lang{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;color:var(--y-deep);font-weight:700;font-size:18px;text-decoration:none}
body.ty .ty-lang:hover{background:var(--y-teal-soft)}
.try-old{padding:20px;border:1px dashed var(--y-teal-line);border-radius:12px;background:var(--y-card);font-size:18px}

/* ── the title row ── */
.ty-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 0}
.ty-ttl{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
body.ty h1{font-size:40px;line-height:1.15;margin:0;color:var(--y-deep);font-family:var(--y-font);font-weight:700}
.ty-kit .ty-ttl h1{font-size:40px;line-height:1.15;margin:0;color:var(--y-deep);font-weight:700;letter-spacing:0}
.ty-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 16px 5px 12px;border-radius:999px;background:var(--y-sun-soft);color:var(--y-brass);font-weight:700;font-size:18px;border:1.5px solid var(--y-sun-line)}
.ty-acts{display:flex;gap:12px;align-items:center}
:is(body.ty,.ty-kit) .ty-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border-radius:999px;border:0;background:var(--y-teal);color:#fff;font:inherit;font-weight:700;font-size:20px;cursor:pointer;text-decoration:none;white-space:nowrap}
:is(body.ty,.ty-kit) .ty-btn:hover{background:var(--y-deep)}
:is(body.ty,.ty-kit) .ty-btn.ghost{background:var(--y-card);color:var(--y-deep);border:2px solid var(--y-teal-line)}
:is(body.ty,.ty-kit) .ty-btn.ghost:hover{background:var(--y-teal-soft)}
:is(body.ty,.ty-kit) .ty-btn.small{min-height:48px;padding:0 20px;font-size:18px}
:is(body.ty,.ty-kit) .ty-btn[disabled]{opacity:.35;cursor:default}
.ty-hint{display:flex;align-items:center;gap:10px;margin:26px 0 0;font-size:18px;color:var(--y-teal);font-weight:700}
.ty-h-touch{display:none}
@media (hover:none){.ty-h-mouse{display:none}.ty-h-touch{display:inline}}

/* ── the line ── */
.ty-line{margin-top:2px}
.ty-line .st{cursor:pointer;outline:none}
.ty-line .st .hit{fill:transparent}
.ty-line .st .halo{fill:var(--y-teal-soft);opacity:0;transition:opacity .15s}
.ty-line .st:hover .halo,.ty-line .st:focus-visible .halo{opacity:1}
.ty-line .st:focus-visible .hit{stroke:var(--y-sun);stroke-width:3}
.ty-line .st.on .halo{fill:var(--y-sun-soft);stroke:var(--y-sun);stroke-width:3;opacity:1}
.ty-line .st:hover .hit.row{fill:var(--y-teal-soft)}
.ty-line .st.on .hit.row{fill:var(--y-sun-soft)}
@media (prefers-reduced-motion:reduce){.ty-line .st .halo{transition:none}}

/* ── three answers ── */
.ty-answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:22px}
.ty-card{background:var(--y-card);border:2px solid var(--y-rule);border-radius:var(--y-r);padding:24px 28px;display:flex;flex-direction:column;min-width:0}
.ty-card.warm{background:var(--y-sun-soft);border-color:var(--y-sun-line)}
.ty-q{display:flex;align-items:center;gap:10px;margin:0;font-size:20px;font-weight:700;color:var(--y-teal);line-height:1.3;font-family:var(--y-font)}
.ty-card.warm .ty-q{color:var(--y-brass)}
.ty-big{font-size:64px;line-height:1.02;font-weight:700;margin:16px 0 6px;color:var(--y-ink)}
.ty-big small{font-size:34px;font-weight:700}
.ty-big.none{font-size:28px;color:var(--y-muted);font-weight:400;margin:22px 0 14px}
.ty-say{margin:0;font-size:20px;line-height:1.35}
.ty-card .ty-chart{flex:1;display:flex;flex-direction:column;justify-content:center;margin-top:18px;min-height:176px}
.ty-pill{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 16px 6px 12px;border-radius:999px;background:var(--y-teal-soft);color:var(--y-deep);font-weight:700;font-size:18px;align-self:flex-start}
.ty-chart-q{display:none}
.ty-mini{display:none}

/* ── below the first screen: new information only ── */
.ty-sec{margin-top:96px}
.ty-sec>h2{font-size:30px;line-height:1.25;margin:0 0 20px;color:var(--y-deep);display:flex;align-items:center;gap:12px;font-family:var(--y-font);font-weight:700}
.ty-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.ty-box{background:var(--y-card);border:2px solid var(--y-rule);border-radius:var(--y-r);padding:26px 28px;min-width:0}
.ty-box.ty-gap{margin-top:24px}
.ty-box h3{font-size:22px;line-height:1.3;margin:0 0 4px;color:var(--y-ink);font-family:var(--y-font);font-weight:700}
.ty-sub{margin:0 0 16px;font-size:18px;color:var(--y-muted)}
.ty-sub:empty{display:none}
.ty-box .ty-chart{margin-top:14px}
.ty-timec{max-width:760px}
.ty-bigline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:48px;font-weight:700;line-height:1.1;margin:10px 0 4px}
.ty-note{font-size:18px;color:var(--y-muted);margin:14px 0 0}
.ty-muted{color:var(--y-muted)}
.ty-block{display:block}
.ty-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;margin-top:10px}
.ty-tile{display:flex;gap:18px;align-items:center;padding:14px 0;min-width:0}
.ty-tile.flat{padding:0}
.ty-tile svg{flex:none}
.ty-tile p{margin:0;font-size:18px;line-height:1.4;min-width:0}
.ty-nm{display:block;font-size:19px;margin-bottom:2px}
.ty-ok{display:block;font-weight:700;margin-top:4px}
html :is(body.ty,.ty-kit) .ty-add{text-decoration:none;display:inline-flex;align-items:center;gap:8px;margin-top:8px;min-height:44px;padding:4px 14px;border-radius:999px;border:2px dashed var(--y-teal-line);background:transparent;color:var(--y-teal);font:inherit;font-weight:700;font-size:18px;cursor:pointer}
html :is(body.ty,.ty-kit) .ty-add:hover{background:var(--y-teal-soft)}
.ty-warmband{background:var(--y-sun-soft);border:2px solid var(--y-sun-line);border-radius:28px;padding:30px 30px 26px}
.ty-warmband .ty-box{background:#fffaf1;border-color:#f3dfb8}
.ty-honest{font-size:20px;margin:20px 4px 0;color:var(--y-ink)}

/* ── how we counted ── */
details.ty-counted{margin:72px 0 0}
details.ty-counted>summary{list-style:none;display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 26px;border-radius:999px;border:2px solid var(--y-teal-line);background:var(--y-card);color:var(--y-deep);font-weight:700;cursor:pointer}
details.ty-counted>summary::-webkit-details-marker{display:none}
details.ty-counted>summary .ty-chev{transition:transform .15s}
details.ty-counted[open]>summary{background:var(--y-teal-soft)}
details.ty-counted[open]>summary .ty-chev{transform:rotate(180deg)}
.ty-ctable{margin-top:18px;background:var(--y-card);border:2px solid var(--y-rule);border-radius:var(--y-r);padding:12px 30px;max-width:1000px}
.ty-crow{display:grid;grid-template-columns:250px minmax(0,1fr);gap:6px 28px;padding:12px 0;border-bottom:1px solid var(--y-rule);font-size:18px}
.ty-crow:last-child{border-bottom:0}

/* ── About these numbers (inside How we counted): the name, the period, the day and the source the PDF prints ── */
.ty-about{margin-top:18px;background:var(--y-card);border:2px solid var(--y-rule);border-radius:var(--y-r);padding:20px 30px 24px;max-width:1000px}
.ty-about:empty{display:none}
html body .ty-about h3{font-size:22px;line-height:1.3;margin:0 0 12px;color:var(--y-ink);font-family:var(--y-font);font-weight:700}
.ty-agrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 26px}
.ty-agrid label{display:grid;gap:4px;font-size:18px;line-height:1.35;min-width:0}
.ty-al{font-weight:700}
.ty-ain{font:inherit;font-size:19px;min-height:48px;padding:6px 12px;border:2px solid var(--y-teal-line);border-radius:12px;background:#fff;color:var(--y-ink);width:100%;box-sizing:border-box}
.ty-agrid small{font-size:16px;color:var(--y-muted)}
/* Whom the numbers are about (wave 11 review): two plain choices, across the grid. */
.ty-abasis{grid-column:1/-1;border:0;margin:0;padding:0;display:grid;gap:8px;font-size:18px;line-height:1.35;min-width:0}
.ty-abasis legend{padding:0;margin-bottom:6px}
.ty-agrid .ty-aradio{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-weight:400}
.ty-aradio input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--y-teal)}

/* ── Is anyone better off? (wave 11) The look-again points: the third answer's donut and the honesty line under it,
   the warm band's boxes, a step panel's rings, the editor's point above each question. ── */
html :is(body.ty,.ty-kit) .ty-after{margin:14px 0 0;font-size:18px;line-height:1.4;color:var(--y-ink)}
html :is(body.ty,.ty-kit) .ty-afterbox .ty-warnline{margin-top:14px}
html :is(body.ty,.ty-kit) .ty-zero{margin:8px 0 0;font-size:18px;color:var(--y-muted)}
.ty-zero b{color:var(--y-ink);font-size:21px}
html :is(body.ty,.ty-kit) .ty-add.warm{border-color:var(--y-sun-line);color:var(--y-brass);align-self:flex-start}
html :is(body.ty,.ty-kit) .ty-add.warm:hover{background:#fffaf1}
.ty-mbox.warm{background:#fffaf1;border-color:#f3dfb8}
html body .ty-mbox h3.ty-mq3{display:flex;align-items:center;gap:8px;color:var(--y-brass)}
.ty-pbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 28px}
.ty-pb{min-width:0}
html :is(body.ty,.ty-kit) .ty-pbt{margin:0 0 2px;font-size:18px;font-weight:700;line-height:1.35}
.ty-pb .ty-sub{margin:0 0 10px}
.ty-bigline small{font-size:22px;font-weight:700}
.ty-bigline small.ty-muted{font-weight:400}
.ty-bigline.sm{font-size:36px;margin:4px 0 8px}
html :is(body.ty,.ty-kit) .ty-warnline{margin:0;font-size:18px;line-height:1.4;color:var(--y-brass);padding:10px 14px;border:2px dashed var(--y-sun-line);border-radius:14px}
.ty-none{display:flex;align-items:center;gap:16px}
html body .ty-none p{margin:0;font-size:20px}
html :is(body.ty,.ty-kit) .ty-laq{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:18px;line-height:1.35;font-weight:700;color:var(--y-brass)}
html :is(body.ty,.ty-kit) .ty-laq.goal{color:var(--y-teal);font-weight:400;align-items:flex-start}
html :is(body.ty,.ty-kit) .ty-laq.goal b{font-weight:700}
html :is(body.ty,.ty-kit) .ty-hint2{color:var(--y-ink)}
html :is(body.ty,.ty-kit) .ty-up{margin-top:8px}
.ty-srcl{display:grid;gap:4px;margin-top:16px;font-size:18px;line-height:1.35}
.ty-srcl small{font-size:18px;color:var(--y-muted)}
.ty-kit .rn-after{margin-top:48px}
html body .ty-kit .rn-after>h2{margin:0 0 18px;font-size:28px;line-height:1.25;color:var(--y-deep)}
html body .ty-kit .ty-box .ty-sub{margin:0 0 12px;font-size:18px;color:var(--y-muted)}
html body .ty-kit .ty-note{margin:12px 0 0;font-size:18px;color:var(--y-muted)}
html body .ty-kit .ty-honest{margin:20px 4px 0;font-size:20px;color:var(--y-ink)}
html body .ty-kit .ty-bigline{margin:10px 0 4px}
html body .ty-kit .ty-tmore{margin:8px 0 0;font-size:18px;color:var(--y-ink)}
html body .ty-kit .ty-tbody+.ty-tmore{margin-top:14px}

/* ── the end: download, clear, and the calm next step ── */
.ty-pdfw{display:inline-grid;gap:6px;justify-items:start}
.ty-pdfh{font-size:16px;color:var(--y-muted)}
.ty-endacts{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-top:40px}
.ty-confirm{margin-top:18px;padding:18px 22px;border:2px solid var(--y-teal-line);border-radius:var(--y-r);background:var(--y-card);max-width:720px}
.ty-confirm p{margin:0}
body.ty .ty-confirm .ty-endacts{margin-top:14px}
/* ── Download PDF asks one plain question first (wave 13): who is this copy for? Two big answers, the board's first.
   A dialog in the middle of the screen; on a phone a sheet from the bottom. ── */
body.ty .ty-ask{width:min(580px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);margin:auto;padding:28px 28px 22px;border:0;border-radius:var(--y-r);background:var(--y-card);color:var(--y-ink);box-shadow:0 18px 60px rgba(8,47,45,.28);font-family:var(--y-font);font-size:20px;line-height:1.45;box-sizing:border-box;overflow:auto}
body.ty .ty-ask::backdrop{background:rgba(8,47,45,.45)}
body.ty .ty-ask h2{margin:0 0 18px;font-size:30px;line-height:1.2;color:var(--y-deep);font-weight:700;font-family:var(--y-font)}
.ty-askopts{display:grid;gap:12px}
body.ty .ty-askb{display:flex;align-items:center;gap:16px;width:100%;min-height:88px;padding:14px 20px;border-radius:18px;border:2px solid var(--y-teal-line);background:#fff;color:var(--y-deep);font:inherit;text-align:left;cursor:pointer;box-sizing:border-box}
body.ty .ty-askb:hover{background:var(--y-teal-soft)}
body.ty .ty-askb.on{border-color:var(--y-teal);background:var(--y-teal-soft);box-shadow:inset 0 0 0 1px var(--y-teal)}
body.ty .ty-askb .ty-ico{color:var(--y-teal)}
body.ty .ty-askb b{display:block;font-size:22px;line-height:1.25}
body.ty .ty-askb small{display:block;margin-top:3px;font-size:18px;line-height:1.35;color:var(--y-muted);font-weight:400}
body.ty .ty-askh{margin:16px 0 14px;font-size:18px;color:var(--y-muted)}
@media (max-width:760px){
  body.ty .ty-ask{width:100vw;max-width:100vw;margin:auto 0 0;padding:22px 16px calc(18px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0}
  body.ty .ty-ask h2{font-size:26px}
  body.ty .ty-askb{min-height:80px;padding:12px 16px}
}
.ty-more{display:flex;gap:10px 26px;flex-wrap:wrap;margin:18px 0 0}
body.ty .ty-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--y-teal);font:inherit;font-size:18px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
body.ty .ty-link[aria-pressed="true"]{color:var(--y-deep)}
.try-undo{margin-top:18px;border:2px solid var(--y-teal-line);border-radius:14px;background:var(--y-card);padding:12px 16px;display:grid;gap:8px;font-size:18px;line-height:1.4;max-width:720px}
.try-undo p{margin:0}
body.ty .try-undo .ty-btn{justify-self:start}
.try-panel{margin-top:28px}
.ty-cta{margin:56px 0 0;padding:26px 0 0;border-top:2px solid var(--y-rule);display:flex;gap:10px 18px;align-items:center;flex-wrap:wrap;font-size:20px}
body.ty .ty-cta a{color:var(--y-teal);font-weight:700;text-underline-offset:4px}
.ty-foot{margin:64px 0 0;padding:22px 0 40px;border-top:1px solid var(--y-rule);display:flex;gap:8px 22px;flex-wrap:wrap;font-size:18px;color:var(--y-muted)}
body.ty .ty-foot a{color:var(--y-muted)}
.try-msg{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:600;max-width:min(560px,calc(100% - 32px));margin:0;padding:12px 18px;border-radius:12px;background:var(--y-ink);color:#fbf8f2;font-size:18px;font-weight:700;box-shadow:0 10px 30px rgba(16,33,31,.25)}

/* ── a tapped step: its own charts, and the editor beside them ── */
.ty-panel{background:var(--y-card);border:2px solid var(--y-teal-line);border-radius:26px;padding:24px 28px 28px;margin-top:6px}
.ty-phead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.ty-kick{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--y-teal);margin:0}
.ty-phead h2{margin:4px 0 2px;font-size:32px;line-height:1.2;color:var(--y-deep);font-family:var(--y-font);font-weight:700}
.ty-phead p{margin:0;font-size:20px}
.ty-pgrid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:24px;align-items:start}
.ty-mgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.ty-mbox{background:#fff;border:2px solid var(--y-rule);border-radius:18px;padding:18px 20px;min-width:0}
.ty-mbox h3{margin:0 0 12px;font-size:20px;line-height:1.3;font-family:var(--y-font);font-weight:700;color:var(--y-ink)}
.ty-mbox.wide{grid-column:1/-1}
.ty-mbox p{margin:0;font-size:18px}
.ty-stat{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ty-stat b{font-size:44px;line-height:1.1}
body.ty .ty-stat span{font-size:20px}

/* ── changing a number: one plain question at a time ── */
.ty-ed{background:var(--y-teal-soft);border-radius:22px;padding:22px 24px 18px;position:sticky;top:16px}
.ty-edtop{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.ty-edt{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--y-teal);font-size:18px}
body.ty .ty-edx{margin-left:auto;width:44px;height:44px;border-radius:50%;border:2px solid var(--y-teal-line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--y-deep);flex:none}
.ty-dots{display:flex;gap:7px;align-items:center;font-size:18px;color:var(--y-muted)}
.ty-dots i{width:11px;height:11px;border-radius:50%;background:#bcd6d0;display:inline-block}
.ty-dots i.on{background:var(--y-teal)}
.ty-dots span{margin-left:6px}
.ty-eq{display:block;font-size:28px;line-height:1.25;font-weight:700;margin:16px 0;color:var(--y-ink)}
.ty-num{display:flex;align-items:center;gap:14px}
body.ty .ty-num input{width:210px;height:84px;border:3px solid var(--y-teal);border-radius:16px;background:#fff;font:inherit;font-size:46px;font-weight:700;padding:0 20px;color:var(--y-ink)}
body.ty .ty-num input:focus{outline:3px solid var(--y-sun);outline-offset:2px}
.ty-num span{font-size:22px}
body.ty .ty-kpi{width:100%;border:3px solid var(--y-teal);border-radius:16px;background:#fff;font:inherit;font-size:20px;padding:12px 16px;color:var(--y-ink);resize:vertical}
.ty-ehint{margin:12px 0 0;font-size:18px;color:var(--y-muted)}
.ty-err{margin:8px 0 0;font-size:18px;font-weight:700;color:#7a5210}
.ty-err:empty{display:none}
.ty-chips{display:flex;flex-wrap:wrap;gap:10px}
body.ty .ty-chipb{min-height:48px;padding:0 18px;border-radius:999px;border:2px solid var(--y-teal-line);background:#fff;font:inherit;font-size:18px;font-weight:700;color:var(--y-deep);cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-align:left}
body.ty .ty-chipb[aria-pressed="true"]{background:var(--y-teal);border-color:var(--y-teal);color:#fff}
.ty-sum{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:16px;padding:16px 18px;font-size:20px;line-height:1.45}
.ty-sum.ok{border:2px solid var(--y-teal-line)}
.ty-sum.gap{border:2px dashed var(--y-brass)}
.ty-okmark{color:var(--y-teal)}
.ty-more-checks{margin:12px 0 0;padding-left:22px;font-size:18px;line-height:1.4;display:grid;gap:4px}
.ty-eacts{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:12px}
.ty-safe{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:18px;color:var(--y-muted)}
.ty-grab{display:none}
.ty-phone{display:none!important}

@media (max-width:1100px){.ty-pgrid{grid-template-columns:1fr}.ty-ed{position:static}.ty-tiles{grid-template-columns:1fr 1fr}}
@media (max-width:1000px){.ty-answers{grid-template-columns:1fr}.ty-card .ty-chart{min-height:0}}
@media (max-width:760px){
  body.ws.ty,.ty-kit{font-size:19px}
  body.ty .ty-wrap{padding:0 16px}
  .ty-top{padding-top:12px}
  body.ty .ty-brand{font-size:19px}
  body.ty .ty-lang{font-size:18px;padding:0 10px}
  .ty-head{margin-top:8px}
  body.ty h1,.ty-kit .ty-ttl h1{font-size:32px}
  .ty-ttl{gap:12px}
  .ty-chip{font-size:18px;padding:4px 12px 4px 10px}
  .ty-desk{display:none!important}
  .ty-phone{display:grid!important}
  .ty-mini{display:grid;gap:10px;margin-top:16px}
  :is(body.ty,.ty-kit) .ty-mrow{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--y-card);border:2px solid var(--y-rule);border-radius:18px;padding:12px 16px}
  :is(body.ty,.ty-kit) .ty-mrow.warm{background:var(--y-sun-soft);border-color:var(--y-sun-line)}
  .ty-mq{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:var(--y-teal);line-height:1.3}
  :is(body.ty,.ty-kit) .ty-mrow.warm .ty-mq{color:var(--y-brass)}
  .ty-ma{display:flex;align-items:center;gap:12px;margin-top:4px}
  .ty-mb{font-size:38px;font-weight:700;line-height:1.05;white-space:nowrap}
  .ty-mb small{font-size:24px}
  .ty-mb small.ty-muted{font-size:24px;font-weight:400;white-space:normal}
  .ty-ms{font-size:18px;line-height:1.3}
  .ty-pacts{grid-template-columns:1fr auto;gap:10px;margin-top:14px}
  :is(body.ty,.ty-kit) .ty-pacts .ty-btn{min-height:54px;padding:0 18px;font-size:19px}
  .ty-hint{margin-top:22px}
  .ty-line{margin-top:6px}
  .ty-answers{gap:16px;margin-top:40px}
  .ty-card{padding:20px 18px}
  .ty-card .ty-big,.ty-card .ty-say{display:none}
  .ty-card .ty-chart{margin-top:10px}
  .ty-chart-q{display:block;margin:4px 0 0;font-size:19px;font-weight:700;color:var(--y-ink)}
  .ty-sec{margin-top:64px}
  .ty-sec>h2{font-size:25px}
  .ty-grid2,.ty-tiles{grid-template-columns:1fr}
  .ty-box{padding:22px 18px}
  .ty-warmband{padding:18px 14px;border-radius:22px}
  .ty-crow{grid-template-columns:1fr;gap:2px}
  .ty-ctable{padding:6px 18px}
  body.ty .ty-endacts .ty-btn{width:100%}
  .ty-pdfw{display:grid;width:100%}
  .ty-agrid{grid-template-columns:1fr}
  .ty-about{padding:14px 18px 18px}
  .ty-panel{padding:18px 16px 20px;border-radius:22px}
  .ty-phead h2{font-size:26px}
  .ty-mgrid{grid-template-columns:1fr}
  /* the editor becomes a bottom sheet: the tapped step stays in view above it */
  .ty-edcol{position:fixed;left:0;right:0;bottom:0;z-index:40;max-height:60vh;overflow:auto;background:var(--y-teal-soft);border-radius:24px 24px 0 0;box-shadow:0 -10px 34px rgba(8,47,45,.2)}
  .ty-ed{border-radius:0;padding:10px 18px 0}
  .ty-grab{display:block;width:48px;height:5px;border-radius:3px;background:#9fbfb8;margin:0 auto 10px}
  body.ty .ty-edx.ty-phone{display:inline-flex!important}
  .ty-eq{font-size:24px;margin:10px 0 12px}
  body.ty .ty-num input{height:72px;font-size:40px;width:170px}
  body.ty-sheet{padding-bottom:62vh}
  .ty-edcol .ty-eacts{position:sticky;bottom:0;background:var(--y-teal-soft);margin:14px -18px 0;padding:10px 18px 12px;box-shadow:0 -8px 14px -10px rgba(8,47,45,.25)}
  .ty-edcol .ty-safe{margin:4px 0 0;padding-bottom:12px}
  body.ty .ty-chipb{min-height:44px;padding:0 14px}
  .ty-chips{gap:8px}
  .ty-cta{font-size:19px}
}

/* ── Count from your list (kept from wave 9): the list she keeps, read in this browser ── */
.tc-at small,.tc-cols small,.tc-filter small{font-size:14px;color:var(--ws-muted);line-height:1.35}
.te-sh{margin:0;font-size:16px;font-weight:700;color:var(--ink)}
.te-sh small{font-weight:400;color:var(--ws-muted);font-size:14px}
.te-l{font-size:16px;font-weight:700;line-height:1.3;color:var(--ink)}
.te-note{grid-column:1/-1;margin:0;font-size:15px;color:var(--warn);line-height:1.4;background:var(--warn-bg);border-radius:6px;padding:8px 10px}
.te-note .wj-btn{margin-top:6px}
.te-bad{display:flex;gap:8px;align-items:flex-start;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:8px;padding:10px 12px;font-size:15px;line-height:1.45;color:var(--ink)}
.te-bad .ic{flex:none;color:var(--warn);margin-top:2px}
.te-bad ul,.te-all ul{margin:0;padding-left:18px;display:grid;gap:4px}
.tt,.tc{background:var(--paper);border:1.5px solid var(--teal);border-radius:10px;padding:18px 20px 20px;display:grid;gap:14px;box-shadow:var(--shadow)}
.tt-head{display:flex;justify-content:space-between;gap:12px 20px;align-items:flex-start;flex-wrap:wrap}
.tt h2,.tc h2{margin:0;font-family:var(--wj-font);font-size:24px;line-height:1.2;font-weight:700}
.tt-sub{margin:4px 0 0;font-size:15px;color:var(--ink2);line-height:1.45;max-width:52em}
.tt-wrap{overflow-x:auto}
.tc-in{display:grid;gap:10px}
.tc-paste{display:grid;gap:4px}
.tc-paste textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px}
.tc-status{margin:0;font-size:16px;font-weight:700;color:var(--ink2)}
.tc-status.ok{color:var(--ok)}
.tc-status.warn{color:var(--warn)}
.tc-status:empty{display:none}
.tc-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tc-cols label,.tc-at,.tc-m label{display:grid;gap:4px}
.tc-no{font-size:14px;color:var(--ws-rose)}
.tc-basis{border:0;margin:0;padding:0;display:grid;gap:6px}
.tc-r{display:flex;gap:8px;align-items:flex-start;font-size:16px;cursor:pointer}
.tc-r input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--teal)}
.tc-at{max-width:320px}
.tc-filter{display:grid;gap:8px;max-width:640px}
.tc-filter>label{display:grid;gap:4px}
.tc-vals{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.tc-vals legend{margin-bottom:6px}
.tc-plan{margin:0;padding-left:20px;display:grid;gap:4px;font-size:15px;line-height:1.45;color:var(--ink2)}
.tc-ms{display:grid;gap:10px}
/* one status a line: its name, where it stands (wide enough for the longest step name), what it means */
.tc-m{border:1px solid var(--line2);border-radius:8px;padding:10px 12px;display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,2fr) minmax(0,1.1fr);gap:8px 16px;align-items:end;background:var(--mist)}
.tc-m .tc-v{align-self:center}
.tc-m label.tc-r,.tc-m .tc-note{grid-column:2/-1}
.tc-m label.tc-r{display:flex}
.tc-sn{display:none;font-size:14px;color:var(--ink2);line-height:1.35}
.tc-m.open{border-color:var(--warn-line);background:var(--warn-bg)}
.tc-note{margin:0;display:flex;gap:6px;align-items:flex-start;font-size:15px;color:var(--warn);line-height:1.4}
.tc-note .ic{flex:none;margin-top:2px}
.tc-v{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:16px}
.tc-v span{font-size:14px;color:var(--ws-muted)}
.tc-prev{display:grid;gap:10px}
.tc-t{border-collapse:collapse;min-width:640px;font-size:15px}
.tc-t th,.tc-t td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left}
.tc-t thead th{font-size:14px;color:var(--ink2)}
.tc-checks{margin:0;padding-left:20px;color:var(--warn);font-size:15px}
.tc-ok{display:flex;gap:6px;align-items:center;margin:0;color:var(--ok);font-weight:700;font-size:15px}
.tc-act{display:flex;flex-wrap:wrap;gap:10px}
.tc-more{margin:0;font-size:15px;color:var(--ws-muted);line-height:1.45}
@media (max-width:760px){
  .tt,.tc{padding:14px 12px 16px}
  .tc-cols{grid-template-columns:1fr}
  .tc-m{grid-template-columns:1fr}
  .tc-m label.tc-r,.tc-m .tc-note{grid-column:auto}
  .tc-sn{display:block}
}

/* ── the picture to download, laid out off screen at 1600 wide: always the wide grid ── */
.ws .try-png{padding:40px 48px 30px;background:#fff}
.ws .try-png .rn-picsec{margin:26px -48px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ws .try-png .rn-arc{display:grid!important}
.ws .try-png .rn-arcv,.ws .try-png .rn-read-v{display:none!important}
.ws .try-png .rn-read-h{display:block!important;padding:22px 48px 0}
.ws .try-png .rn-key{padding:0 48px 22px}
.ws .try-png .rn-made-w{margin-top:16px}
.try-pr-ex{margin:10px 0 0;display:inline-block;font-size:15px;font-weight:700;border:1.5px dashed var(--warn-line);background:var(--warn-bg);border-radius:6px;padding:4px 10px}

/* ── Download the report (PDF): two A4 pages, drawn from the shared copy ──
   Laid out off screen (so its charts can be measured), shown only when printing. Page 1 is the simple card with
   "Example" and the draft on it; page 2 is How we counted and each step's goal. */
.try-print{position:fixed;left:-99999px;top:0;width:210mm;visibility:hidden;pointer-events:none}
.tp-defs{position:absolute}
.tp-page{--tp-text:14.5px;width:210mm;height:297mm;box-sizing:border-box;background:#fff;padding:8mm 12mm 7mm;position:relative;overflow:hidden;display:flex;flex-direction:column;color:#10211f;font-family:"VDM Zero","Atkinson Hyperlegible Next",system-ui,sans-serif;font-size:16px;line-height:1.4}
.tp-page svg{display:block;overflow:visible}
.tp-line .hit{fill:transparent}
.tp-line .halo{opacity:0}
.tp-ph{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tp-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;color:#082f2d}
.tp-tags{display:flex;gap:8px}
.tp-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 12px 3px 9px;border-radius:999px;font-weight:700;font-size:14px}
.tp-tag.ex{background:#fdf1dc;color:#86613d;border:1.5px solid #f0cf95}
.tp-tag.dr{background:#fff;color:#082f2d;border:1.5px dashed #86613d}
/* The copy for the board and the committee (wave 13): the full mark, "Confidential: prepared for …", beside the title of every page. */
.tp-titler{display:flex;align-items:center;justify-content:space-between;gap:14px}
.tp-titler > :first-child{flex:none}
.tp-conf{display:flex;align-items:center;gap:8px;margin:4px 0 0;padding:4px 10px;border-radius:8px;background:#f6efe4;border:1.5px solid #e6d5bd;color:#86613d;font-weight:700;font-size:14px;line-height:1.3;min-width:0}
/* Its why-they-stopped box: the reasons on the left, the typed hours given to those groups on the right. */
.tp-why2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px}
.tp-wr{border-left:1.5px solid #e7e0d4;padding-left:14px;min-width:0}
.tp-hbig{margin:2px 0 0;font-size:26px;font-weight:700;line-height:1.1;color:#10211f}
.tp-hbig small{font-size:16px}
.tp-wr .tp-sub{margin:2px 0 0;line-height:1.3}
/* The board's copy carries two more things on page 1 (the mark and the hours): its boxes sit a little closer. */
.tp-page.board .tp-b.tp-gap{margin-top:8px}
.tp-conf svg{flex:none}
.tp-page h1{font-family:inherit;font-size:28px;line-height:1.15;margin:4px 0 0;color:#082f2d;font-weight:700}
.tp-by{margin:0;font-size:14px;color:#4b5d59}
.tp-line{margin-top:2px}
.tp-ans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:2px}
.tp-a{border:1.5px solid #e7e0d4;border-radius:14px;padding:10px 14px 8px;display:flex;flex-direction:column;background:#fffdf9;min-width:0}
.tp-a.warm{background:#fdf1dc;border-color:#f0cf95}
.tp-q{display:flex;align-items:center;gap:6px;margin:0;font-size:15px;font-weight:700;color:#12625f}
.tp-a.warm .tp-q{color:#86613d}
.tp-big{font-size:38px;font-weight:700;line-height:1.05;margin:4px 0 2px}
.tp-big small{font-size:22px}
.tp-big .none{font-size:20px;font-weight:400;color:#4b5d59}
.tp-say{margin:0;font-size:15px;line-height:1.3}
.tp-chart{margin-top:6px;flex:1;display:flex;flex-direction:column;justify-content:center}
.tp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:9px}
.tp-b{border:1.5px solid #e7e0d4;border-radius:14px;padding:10px 14px;min-width:0}
.tp-b.tp-gap{margin-top:10px}
.tp-b.warm{background:#fdf1dc;border-color:#f0cf95}
.tp-b h3{font-family:inherit;margin:0 0 2px;font-size:16px;line-height:1.3;font-weight:700;color:#10211f}
.tp-h-sub{font-weight:400;color:#4b5d59;font-size:14px}
.tp-sub{margin:0 0 8px;font-size:14px;color:#4b5d59}
.tp-sub.ink{color:#10211f;margin:4px 0 2px}
.tp-rings{display:grid;gap:6px;text-align:center;margin-top:6px}
.tp-rings div{display:flex;flex-direction:column;align-items:center;font-size:14px;line-height:1.25}
.tp-rings b{display:block;margin-top:4px;font-size:14px}
.tp-after{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px;align-items:start}
.tp-honest{margin:4px 0 0;font-size:15px}
.tp-jobs{margin:2px 0 4px;font-size:22px;font-weight:700;line-height:1.1;color:#10211f}
.tp-jobs small{font-size:14px;font-weight:700}
.tp-jrow{display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 4px}
.tp-jrow>span{flex:none;min-width:74px}
.tp-after .tp-sub,.tp-after .tp-sub.ink{margin:2px 0 0;line-height:1.3}
/* The body shrinks, the footer never leaves the sheet (wave 11 review): what the footer says ("fewer than 5", "not shown") is always printed. */
.tp-body{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.tp-foot{flex:none}
.tp-note{margin:6px 0 0;font-size:14px;line-height:1.3;color:#10211f}
.tp-why .tp-hl{margin:6px 0 0}
.tp-foot{margin-top:auto;padding-top:8px;border-top:1.5px solid #e7e0d4;display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#4b5d59}
.tp-foot b{color:#10211f;white-space:nowrap}
.tp-page h2{font-family:inherit;font-size:26px;margin:10px 0 2px;color:#082f2d;font-weight:700}
.tp-page h2.tp-h2s{font-size:20px;margin-top:8px}
.tp-lead{margin:0 0 6px;font-size:15px;color:#4b5d59}
.tp-crow{display:grid;grid-template-columns:165px minmax(0,1fr);gap:4px 16px;padding:3px 0;border-bottom:1px solid #e7e0d4;font-size:var(--tp-text);line-height:1.3}
.tp-rows .tp-crow:last-child{border-bottom:0}
.tp-goal{display:grid;grid-template-columns:125px minmax(0,1fr) fit-content(136px);gap:4px 14px;padding:3px 0;border-bottom:1px solid #e7e0d4;font-size:var(--tp-text);line-height:1.3}
.tp-goal:last-child{border-bottom:0}
.tp-goal .r{text-align:right;font-weight:700}
.tp-goalrest{margin:6px 0 0;font-size:var(--tp-text);line-height:1.3}
.tp-muted{color:#4b5d59;font-weight:400}
@media print{
 @page{size:A4;margin:0}
  html,body.ws.ty{background:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.ws.ty{padding:0!important}
  body.ty>*:not(#tryPrint){display:none!important}
  body.ty #tryPrint{position:static;left:auto;visibility:visible;width:auto}
  .tp-page{break-after:page;page-break-after:always}
  .tp-page:last-of-type{break-after:auto;page-break-after:auto}
}

/* ── The three small answers of a process card (the Workspace's organisation overview) ──
   One row per question: the question, the answer in big type and its words, and one tiny chart that labels itself. */
.ty-tiny{display:grid;gap:10px;margin:14px 0 4px}
.ty-tr{padding:10px 14px 12px;border:2px solid var(--y-rule);border-radius:16px;background:var(--y-card)}
.ty-tr.warm{background:var(--y-sun-soft);border-color:var(--y-sun-line)}
.ty-tbody{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px}
.ty-tt{flex:1 1 180px;min-width:0}
html body .ty-kit .ty-tq{display:flex;align-items:center;gap:8px;margin:0;font-size:18px;font-weight:700;color:var(--y-teal);line-height:1.3}
html body .ty-kit .ty-tr.warm .ty-tq{color:var(--y-brass)}
html body .ty-kit .ty-tb{margin:4px 0 0;font-size:36px;font-weight:700;line-height:1.1;color:var(--y-ink)}
.ty-tb small{font-size:22px;font-weight:700}
html body .ty-kit .ty-tb.none{font-size:20px;font-weight:400;color:var(--y-muted);margin-top:6px}
html body .ty-kit .ty-ts{margin:2px 0 0;font-size:18px;line-height:1.35}
.ty-tc{flex:0 0 auto;max-width:100%}
.ty-tr.stack .ty-tbody{display:block}
.ty-tr.stack .ty-tc{margin-top:10px}