/* Chapter 6, Pages that leak. Site tokens only; the kit's frame from /playbook/kit/kit.css. */

/* the still: flows of light round a mock page */
.leak .pb-still text,.pie-board text,.kiln-mock text{font-family:var(--font)}
.leak-flow path{stroke:var(--trail)}
.leak .pb-still .leak-reach{stroke:var(--spark)}
.leak-edge{fill:none;stroke:var(--faint);stroke-width:1.5}
.leak-rule{stroke:var(--rule)}
.leak-small{fill:var(--faint);font-size:16px}
.leak-h1{fill:var(--ink);font-size:30px}
.leak-sub{fill:var(--muted);font-size:19px}
.leak-proof{fill:var(--faint);font-size:16px}
.leak-btn{fill:var(--ink)}
.leak-btn-text{fill:var(--ground);font-size:19px/* on: var(--ink), the .leak-btn rect it sits on */}
.leak-btn2,.leak-box,.leak-fields rect,.leak-meta{fill:none;stroke:var(--faint);stroke-width:1}
.leak-meta{stroke:var(--rule);stroke-dasharray:4 4}
.leak-dot{fill:var(--faint)}
.leak-tie{fill:none;stroke:var(--halo-lamp);stroke-width:1.2;stroke-dasharray:3 6;opacity:.7}
.leak-note{fill:var(--ink);font-size:24px}
.leak-note-sub{fill:var(--muted);font-size:18px}

/* live: the layer has its own height (the mock reflows at every width), so the still steps out of the way */
.js .leak .pb-stage > .pb-still{display:none}
.js .leak .pb-stage > .pb-layer{display:block}
.leak .pb-stage > .pb-layer{position:relative;inset:auto;height:auto;padding:4.5rem clamp(1.75rem,8vw,7rem) 1.5rem}
.leak-layer > canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.mock{position:relative;max-width:31rem;margin:0 auto;background:var(--ground-raised);border:1px solid var(--faint);font-size:1rem;line-height:1.4;color:var(--muted)}
.mock-bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.45rem .9rem;border-bottom:1px solid var(--rule);color:var(--faint);font-size:.8125rem}
.mock-body{padding:1.4rem clamp(1rem,4vw,2rem) 1.6rem;display:flex;flex-direction:column;gap:.9rem}
.mock-h1{color:var(--ink);font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);line-height:1.2;text-align:center}@media (prefers-reduced-motion:no-preference){.mock-h1{transition:filter .6s var(--ease-draw)}}
.mock-sub,.mock-urgent{text-align:center}
.mock-urgent{color:var(--halo-lamp);font-size:.9375rem}
.mock-proof{text-align:center;color:var(--ink)}
.mock-proof-low{color:var(--faint);font-size:.875rem}
.mock-row{display:flex;justify-content:center}
.mock-btn2,.mock-btn{display:inline-block;padding:.5rem 1.1rem;border:1px solid var(--faint);font-size:.9375rem}
.mock-carousel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:4.5rem;border:1px solid var(--faint);color:var(--faint);font-size:.875rem}
.mock-dots{display:flex;gap:.4rem}
.mock-dots i{width:.35rem;height:.35rem;border-radius:50%;background:var(--faint)}
.mock-form{border-top:1px solid var(--rule);padding-top:.9rem;display:flex;flex-direction:column;gap:.6rem}
.mock-form-title{color:var(--ink)}
.mock-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.mock-field{border:1px solid var(--rule);padding:.25rem .5rem;font-size:.8125rem;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-price{font-size:.875rem;color:var(--faint)}
.mock-btn{align-self:center;background:var(--ink);color:var(--ground);border-color:var(--ink);padding:.6rem 1.6rem;box-shadow:0 0 0 rgba(217,178,122,0)}@media (prefers-reduced-motion:no-preference){.mock-btn{transition:box-shadow .5s var(--ease-draw)}}
.mock-btn.is-hit{box-shadow:0 0 0 3px var(--ground),0 0 0 4px var(--halo-lamp)}
.mock.has-second .mock-btn{background:none;color:var(--muted);border-color:var(--faint)}   /* two equal buttons: neither leads */
.mock-gap{position:absolute;width:3px;height:2.4rem;background:var(--halo-lamp)}
.mock-gap[data-side="left"]{left:-2px}
.mock-gap[data-side="right"]{right:-2px}
.mock-meta{max-width:31rem;margin:1rem auto 0;padding:.6rem .9rem;border:1px dashed var(--rule);display:flex;flex-direction:column;gap:.2rem;font-size:.875rem;color:var(--faint)}
.mock-meta-text{color:var(--muted)}
.mock-meta.has-best{border-color:var(--halo-lamp)}
.mock-meta.has-best .mock-meta-text{color:var(--ink)}
.leak-meter{margin:1.75rem auto 0;max-width:31rem;position:relative;z-index:3}
.leak-breakdown{max-width:31rem;margin:.6rem auto 0;color:var(--muted);font-size:var(--t-meta);line-height:1.5;position:relative;z-index:3}
[data-swap].is-swapping{}@media (prefers-reduced-motion:no-preference){[data-swap].is-swapping{animation:leak-swap .7s var(--ease-draw)}}
@keyframes leak-swap{from{opacity:0}to{opacity:1}}
[data-pb-tier="still"] .mock *,[data-pb-tier="still"] [data-swap]{animation:none!important;transition:none!important}

/* the dials */
html:not(.js) .leak-dials,html:not(.js) .pie-cards{display:none}
.leak-dials{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.5rem 3rem;align-items:start;max-width:46rem}
.leak-group{display:flex;flex-direction:column;gap:.35rem}
.leak-group .pb-btn{align-self:flex-start;margin-top:.75rem}
.leak-dial{max-width:18rem;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 1rem}
.leak-dial-name{font-size:var(--t-meta)}
.leak-dial output{color:var(--muted);margin-left:.4rem;font-variant-numeric:lining-nums tabular-nums}
.leak-dial .pb-dial-line{width:100%;grid-column:1 / -1}
.leak-formula{font-variant-numeric:lining-nums tabular-nums;padding-left:1.25rem;border-left:1px solid var(--rule);line-height:1.8}

/* P.I.E. */
.pie .pb-stage{max-width:36rem;margin-inline:auto}
.pie-grid line{stroke:var(--rule);stroke-dasharray:2 6}
.pie-axis{fill:none;stroke:var(--faint)}
.pie-axis-label{fill:var(--muted);font-size:19px}
.pie-corner{fill:var(--halo-lamp);font-size:19px}
.pie-board text{font-size:21px;fill:var(--muted)}
.pie-board .pie-corner{fill:var(--halo-lamp)}
.pie-board .pb-lit{fill:var(--spark)}
.pie-board .pb-dim{fill:var(--ground);stroke:var(--faint);stroke-width:1.5}
.pie-live .pb-point .pb-dot{}@media (prefers-reduced-motion:no-preference){.pie-live .pb-point .pb-dot{transition:fill .4s,filter .4s}}
.pie-live .pb-point.is-top .pb-dot{stroke:var(--halo-lamp);stroke-width:2}
.pie-live .pb-point:not(.is-top) .pb-dot{fill:var(--muted)}
.pie-live .pb-point.is-top text{fill:var(--ink)}
.pie-live .pb-point text{pointer-events:none;user-select:none;-webkit-user-select:none}
.pie-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.5rem 3rem;margin-top:1.5rem;max-width:56rem}
.pie > .pie-side{margin-left:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift))}
.pie-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem 1rem;padding:.6rem 0;border-top:1px solid var(--rule);font-size:var(--t-meta)}
.pie-card .pb-dial-line{grid-column:1 / -1;width:min(100%,14rem)}
.pie-card-imp{color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.pie-rank ol{list-style:decimal;padding-left:1.4rem;margin-top:.5rem}
.pie-rank li{padding:.35rem 0;font-size:var(--t-meta);line-height:1.4;color:var(--muted)}@media (prefers-reduced-motion:no-preference){.pie-rank li{transition:color .4s}}
.pie-rank li:first-child{color:var(--ink)}
.pie-score{color:var(--faint);font-variant-numeric:lining-nums tabular-nums;margin-left:.4rem}

/* what I'd do now */
.leak-check{list-style:decimal;padding-left:1.4rem;margin-top:1.25rem}
.leak-check li{padding:.3rem 0;line-height:1.5}
.kiln{margin-top:2rem;max-width:40rem}
.kiln-mock{display:block;width:100%;height:auto}
.kiln-title{fill:var(--ink);font-size:22px}
.kiln-keys text{fill:var(--muted);font-size:15px}
.kiln-marks .pb-lit{fill:var(--spark)}
.kiln-marks .pb-dim{fill:var(--ground);stroke:var(--faint);stroke-width:1.5}
.kiln figcaption{color:var(--muted);font-size:var(--t-meta);margin-top:.75rem}
.leak-table-wrap{overflow-x:auto;margin-top:1.75rem;max-width:44rem}
.leak-teardown{border-collapse:collapse;font-size:var(--t-meta);line-height:1.45;min-width:34rem}
.leak-teardown caption{text-align:left;color:var(--muted);padding-bottom:.6rem;caption-side:top}
.leak-teardown th,.leak-teardown td{text-align:left;vertical-align:top;padding:.55rem 1rem .55rem 0;border-top:1px solid var(--rule);font-weight:400}
.leak-teardown thead th{color:var(--muted)}
.leak-teardown td:nth-child(2){font-variant-numeric:lining-nums tabular-nums}
.pb-chapter > section .leak-table-wrap,.pb-chapter > section .kiln{max-width:44rem}
.mock [hidden],.leak-layer [hidden]{display:none!important}