/* The AI readiness self-assessment (/tools/ai-readiness-self-assessment/), built from the site's tokens and v2 classes.
   The PDF sheet is Cowork's design (static/tools/six-foundations-pdf.html), loaded and filled when someone clicks Download PDF. */
.v2 :is(h2, h3, p, li) { text-wrap: wrap; }

/* Tool grid: statements left, result panel right (sticky on wide screens) */
.tool { display: grid; gap: clamp(32px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
  .tool { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .tool__panel { position: sticky; top: calc(var(--head-h) + 24px + env(safe-area-inset-top, 0px)); align-self: start; }
}
.tool__qs { display: grid; gap: 20px; min-width: 0; }
.tool__note { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 18px; background: var(--surface-white); border: 1px solid var(--border-default); border-radius: var(--radius-md); font: 400 15px/1.5 var(--font-body); color: var(--text-secondary); }
.tool__note p { flex: 1 1 260px; margin: 0; }
.tool__note strong { color: var(--ink); font-weight: 600; }
.v2-btn--plain { background: var(--surface-white); color: var(--ink); }
.v2-btn--plain:hover { background: var(--surface-raised); }

.fnd { padding: clamp(20px, 3vw, 28px); background: var(--surface-white); border: 1px solid var(--border-default); border-radius: var(--radius-md); display: grid; gap: 16px; }
.fnd__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fnd__num { display: block; margin-bottom: 6px; font: 500 13px/1 var(--font-mono); color: var(--pfmr-navy-500); }
.fnd__title { margin: 0; font: 700 22px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.fnd__score { font: 500 15px/1 var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.fnd__desc { margin: -6px 0 0; font: 400 15px/1.5 var(--font-body); color: var(--text-secondary); }
.q { display: grid; gap: 10px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.qtext { margin: 0; font: 500 16px/1.5 var(--font-body); color: var(--ink); }
.scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 440px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: flex; align-items: center; justify-content: center; min-height: 44px; border: var(--edge); border-radius: var(--radius-sm); background: var(--surface-white); font: 500 15px/1 var(--font-mono); color: var(--ink); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.opt input:hover + span { background: var(--surface-raised); }
.opt input:checked + span { background: var(--ink); color: var(--pfmr-cream-500); box-shadow: 3px 3px 0 var(--hard-card); }
.opt input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.ends { display: flex; justify-content: space-between; max-width: 440px; margin-top: -2px; font: 400 13px/1.3 var(--font-body); color: var(--text-muted); }

/* Result panel: the offer card's construction (edge, mint hard shadow, header strip, raised bar) */
.panel { background: var(--surface-white); border: var(--edge); border-radius: var(--radius-md); box-shadow: var(--hard-lg) var(--hard-lg) 0 var(--hard-card); overflow: hidden; }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding: 20px clamp(20px, 3vw, 28px); border-bottom: 1px solid var(--border-default); }
.panel__title { margin: 0; font: 700 22px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.panel__overall { display: flex; align-items: baseline; gap: 8px; }
.panel__big { font: 700 40px/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.panel__of { font: 400 15px/1.2 var(--font-body); color: var(--text-muted); }
.panel__body { padding: 20px clamp(20px, 3vw, 28px) 24px; display: grid; gap: 20px; }
.panel__count { margin: 0; font: 400 14px/1.4 var(--font-body); color: var(--text-muted); }
.radar { width: 100%; max-width: 400px; margin: 0 auto; }
.radar svg { display: block; width: 100%; height: auto; overflow: visible; }
.r-grid { fill: none; stroke: var(--border-default); stroke-width: 1; }
.r-axis { stroke: var(--border-default); stroke-width: 1; }
.r-shape { fill: color-mix(in oklch, var(--pfmr-mint-500) 34%, transparent); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.r-dot { fill: var(--pfmr-mint-500); stroke: var(--ink); stroke-width: 1.5; }
.r-label { font: 500 12.5px var(--font-body); fill: var(--text-secondary); }
.r-label.low { font-weight: 700; fill: var(--ink); }
.r-num { font-family: var(--font-mono); font-weight: 500; }
.r-tick { font: 400 10.5px var(--font-mono); fill: var(--text-muted); }
.rank { display: grid; gap: 10px; }
.rank__label { margin: 0 0 2px; font: 600 14px/1.2 var(--font-body); color: var(--ink); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 4px 10px; align-items: center; }
.row__name { min-width: 0; font: 400 14px/1.35 var(--font-body); color: var(--ink); }
.row__score { font: 500 14px/1 var(--font-mono); text-align: right; color: var(--ink); }
.row__track { grid-column: 1 / -1; height: 10px; border-radius: var(--radius-xs); background: var(--surface-raised); border: 1px solid var(--border-subtle); overflow: hidden; }
.row__fill { height: 100%; background: var(--pfmr-navy-300); transition: width var(--dur-slow) var(--ease-out); }
.row.is-point .row__name { font-weight: 600; }
.row.is-point .row__fill { background: var(--pfmr-mint-500); box-shadow: inset 0 0 0 1.5px var(--ink); }
.row .v2-tag { margin-left: 8px; padding: 2px 7px; font-size: 12px; vertical-align: 1px; }
.panel__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 20px clamp(20px, 3vw, 28px); background: var(--surface-raised); border-top: 1px solid var(--border-default); }
.panel__msg { flex: 1 1 100%; margin: 0; min-height: 1.4em; font: 400 14px/1.4 var(--font-body); color: var(--text-secondary); }
#copybox { width: 100%; min-height: 150px; font: 13px/1.5 var(--font-mono); color: var(--ink); background: var(--surface-white); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 10px; }

/* Result detail on the white band: cards turn cream */
.res__lede { margin: calc(-1 * clamp(12px, 2vw, 20px)) 0 clamp(24px, 3vw, 36px); font: 400 clamp(17px, 1.5vw, 19px)/1.6 var(--font-body); color: var(--text-secondary); }
.res__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.res__card { padding: clamp(20px, 3vw, 28px); background: var(--surface-page); border: 1px solid var(--border-default); border-radius: var(--radius-md); display: grid; gap: 12px; align-content: start; }
.res__card h3 { margin: 0; font: 700 20px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.res__card p, .res__card li { margin: 0; font: 400 15px/1.55 var(--font-body); color: var(--text-secondary); }
.res__card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.res__card li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.res__card li b { display: block; font-weight: 500; color: var(--ink); }
.res__sc { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: var(--edge); border-radius: var(--radius-xs); background: var(--surface-white); font: 500 13px/1 var(--font-mono); color: var(--ink); }
.res__small { margin: 24px 0 0; font: 400 14px/1.5 var(--font-body); color: var(--text-muted); }

/* The PDF sheet sits off screen until html2canvas draws it */
.sf-offscreen { position: absolute; left: -12000px; top: 0; }
/* html2canvas draws a fractional border at about 1px (and draws inset shadows at a fixed weight), so the sheet's 1.33px rules
   and 1.5px edges are set at 2px, which it draws within half a pixel of Chrome's 1.5px. */
.sf .sf-sec { border-top-width: 2px; }
.sf .sf-bar.is-lowest .sf-bar__fill { border-width: 2px; }
.sf .sf-key { border-width: 2px; }