/* ===== Day91 tool pages v4: shared kit ===== */
/* hero */
.t-hero{background:var(--t);border-bottom:1.5px solid var(--ink);position:relative;overflow:hidden}
.t-hero .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:32px;align-items:center;padding-block:clamp(36px,5vw,64px) clamp(40px,5vw,72px)}
@media (max-width:860px){.t-hero .wrap{grid-template-columns:minmax(0,1fr)}}
.crumb{font:500 12px var(--mono);letter-spacing:.08em;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.crumb a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid currentColor}
.t-hero h1{font:800 clamp(40px,5.6vw,80px)/.98 var(--display);letter-spacing:-.05em;margin:14px 0 0;text-wrap:balance}
.t-hero h1 em{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.t-hero .lede{margin-top:16px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.fact{background:var(--card);border:1.5px solid var(--ink);border-radius:16px;padding:10px 14px;min-width:0;max-width:300px}
.fact b{display:block;font:600 10.5px var(--mono);letter-spacing:.1em;color:var(--muted)}
.fact span{font-size:14.5px;line-height:1.4;display:block;margin-top:2px}
/* free while we build: quiet label */
.t-hero .wrap{grid-template-columns:minmax(0,1fr)}
.t-hero .copy{max-width:880px}
.crumb{flex-wrap:wrap}
.freepill{display:inline-flex;align-items:center;gap:7px;margin-left:10px;font:500 11.5px var(--mono);letter-spacing:.06em;color:var(--ink-2);background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:999px;padding:3px 10px}
.freepill i{width:6px;height:6px;border-radius:50%;background:var(--leaf);animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
.freeline{margin:0;font-size:13.5px;color:var(--muted)}
.freeline a{color:var(--ink-2)}
/* flags strip */
.flags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0 0;font:500 12px var(--mono);letter-spacing:.06em;color:var(--ink-2);min-height:30px}
.flags:empty{display:none}
.flags .lbl{margin-right:4px}
.mflag{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--ink);border-radius:999px;padding:3px 10px 3px 6px;font:600 12.5px var(--sans);letter-spacing:0;color:var(--ink);transition:transform .15s}
.mflag:hover{transform:translateY(-2px) rotate(-1deg)}
.mflag svg{flex:none}
.mflag.new{animation:popin4 .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes popin4{from{transform:scale(.3);opacity:0}}
/* bench */
.bench-sec{margin-top:clamp(-40px,-3vw,-24px);position:relative;z-index:2}
.bench{background:var(--card);border:1.5px solid var(--ink);border-radius:28px;box-shadow:0 12px 0 var(--ink);padding:clamp(18px,3vw,32px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3vw,40px)}
@media (max-width:960px){.bench{grid-template-columns:minmax(0,1fr)}}
.steps4{display:grid;gap:22px;align-content:start}
.st4{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px}
.st4>.n{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);background:var(--t);display:grid;place-items:center;font:600 13px var(--mono)}
.st4 h2{font:700 20px/1.2 var(--display);letter-spacing:-.02em;margin:4px 0 10px}
.st4 .hint{font-size:13.5px;color:var(--muted);margin:8px 0 0}
.in4{width:100%;min-width:0;height:52px;border:1.5px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink);padding:0 16px;font:500 16px var(--sans);transition:box-shadow .15s}
.in4:focus{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--grape) 25%,transparent)}
textarea.in4{height:auto;min-height:120px;padding:12px 16px;line-height:1.5;resize:vertical}
.lbl4{display:block;font:500 12px var(--mono);letter-spacing:.06em;color:var(--ink-2);margin:0 0 6px}
.sugg{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sugg button{all:unset;cursor:pointer;font:500 13px var(--sans);border:1px solid var(--rule);background:var(--chip);border-radius:999px;padding:4px 12px;transition:background .15s,transform .15s}
.sugg button:hover{background:var(--t);transform:translateY(-1px)}
.sugg .lb{font:500 11px var(--mono);color:var(--muted);align-self:center;letter-spacing:.06em}
/* segmented */
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1.5px solid var(--ink);border-radius:999px;padding:4px;background:var(--paper);max-width:100%}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{position:relative;z-index:1;cursor:pointer;text-align:center;padding:9px 16px;border-radius:999px;font:600 14px var(--sans);white-space:nowrap;transition:color .2s}
.seg label small{display:block;font:400 11.5px var(--sans);color:var(--muted)}
.seg .thumb{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:var(--ink);transition:transform .35s cubic-bezier(.3,1.4,.4,1),width .35s}
.seg input:checked+label{color:var(--paper)}
.seg input:checked+label small{color:color-mix(in srgb,var(--paper) 70%,transparent)}
.seg input:focus-visible+label{outline:2px solid var(--grape);outline-offset:2px}
@media (max-width:520px){.seg{display:grid;width:100%}.seg label{padding:8px 8px;font-size:13px;white-space:normal}}
/* repeatable rows */
.rows4{display:grid;gap:10px}
.row4{display:grid;grid-template-columns:34px minmax(0,1fr) 40px;gap:8px;align-items:center;animation:popin4 .35s cubic-bezier(.2,1.4,.4,1)}
.row4 .av{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--ink);display:grid;place-items:center;font:700 14px var(--display);background:var(--t)}
.row4 .x{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:20px}
.row4 .x:hover{background:var(--chip);color:var(--ink)}
.addrow{all:unset;cursor:pointer;margin-top:10px;font:600 14px var(--sans);color:var(--grape);display:inline-flex;gap:6px;align-items:center}
.addrow[disabled]{opacity:.4;cursor:not-allowed}
/* buttons */
.go4{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.run4{min-height:56px;font-size:17px;padding:0 28px;background:var(--ink);color:var(--paper)}
.run4 i{font-style:normal;transition:transform .2s}.run4:hover i{transform:translateX(4px)}
.run4[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.link4{all:unset;cursor:pointer;font:500 14px var(--sans);color:var(--ink-2);border-bottom:1px solid var(--rule)}
.link4:hover{color:var(--ink);border-color:var(--ink)}
/* preview side */
.side4{background:var(--t);border:1.5px solid var(--ink);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.side4 .lab{font:600 11px var(--mono);letter-spacing:.1em;display:flex;justify-content:space-between;gap:8px}
.mini4{background:var(--card);border:1.5px solid var(--ink);border-radius:16px;padding:14px;display:grid;gap:10px;font-size:14px;overflow:hidden}
.mini4 .ln{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border-bottom:1px solid var(--rule);padding-bottom:8px;opacity:0;transform:translateY(6px);animation:lnin 6s ease infinite}
.mini4 .ln:last-child{border:0;padding:0}
@keyframes lnin{0%,6%{opacity:0;transform:translateY(6px)}14%,88%{opacity:1;transform:none}100%{opacity:0}}
.side4 .say{font-size:13.5px;color:var(--ink-2);margin:0}
/* lab run (progress) */
.labrun{display:none;border:1.5px solid var(--ink);border-radius:20px;background:var(--card);padding:18px 20px;margin-top:28px}
.labrun.on{display:block;animation:popin4 .35s ease}
.labrun .top{display:flex;justify-content:space-between;gap:12px;font:600 12px var(--mono);letter-spacing:.08em}
.labrun .bar{height:8px;border-radius:4px;background:var(--chip);overflow:hidden;margin:12px 0 14px}
.labrun .bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--grape),var(--leaf));transform-origin:left;transform:scaleX(0);transition:transform .5s ease}
.labrun ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.labrun li{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);transition:color .2s}
.labrun li i{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--rule);display:grid;place-items:center}
.labrun li.doing{color:var(--ink)}
.labrun li.doing i{border-color:var(--grape);border-right-color:transparent;animation:spin4 .7s linear infinite}
.labrun li.done{color:var(--ink)}
.labrun li.done i{background:var(--leaf);border-color:var(--leaf)}
.labrun li.done i::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
@keyframes spin4{to{transform:rotate(360deg)}}
/* results */
.out4{margin-top:28px}
.note4{background:var(--amber-soft);color:var(--amber);border-radius:14px;padding:12px 16px;font-size:14.5px;margin-bottom:16px}
.err4{background:color-mix(in srgb,var(--tomato) 14%,var(--card));border:1.5px solid var(--tomato);border-radius:14px;padding:14px 16px;font-size:15px}
.res4{background:var(--card);border:1.5px solid var(--ink);border-radius:28px;overflow:hidden}
.res4-hd{background:var(--t);border-bottom:1.5px solid var(--ink);padding:clamp(18px,3vw,28px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;position:relative}
@media (max-width:700px){.res4-hd{grid-template-columns:minmax(0,1fr)}}
.res4-hd .eb{font:500 12px var(--mono);letter-spacing:.08em;color:var(--ink-2)}
.res4-hd h2{font:800 clamp(28px,3.6vw,44px)/1 var(--display);letter-spacing:-.04em;margin:8px 0 0}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.acts .btn{min-height:42px;font-size:14px;padding:0 16px}
.res4-bd{padding:clamp(16px,3vw,28px);display:grid;gap:28px}
.sec4 h3{font:700 22px/1.15 var(--display);letter-spacing:-.025em;margin:0 0 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sec4 h3 .ct{font:600 11px var(--mono);background:var(--chip);border-radius:999px;padding:3px 9px;letter-spacing:.06em}
.chip{display:inline-flex;align-items:center;font:400 11.5px var(--mono);color:var(--ink-2);background:var(--chip);border-radius:999px;padding:3px 9px;text-decoration:none;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
a.chip:hover{background:var(--green-soft);color:var(--leaf)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tag{font:600 10px var(--mono);letter-spacing:.08em;border-radius:4px;padding:2px 6px;white-space:nowrap;vertical-align:2px;margin-left:6px}
.tag-r{color:var(--leaf);background:var(--green-soft)}.tag-c{color:var(--amber);background:var(--amber-soft)}
.empty{color:var(--muted);font-style:italic;font-size:14px}
.list4{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.list4>li{border:1px solid var(--rule);border-radius:14px;padding:12px 14px;background:var(--paper)}
.tbl4{overflow-x:auto;border:1px solid var(--rule);border-radius:14px}
.tbl4 table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
.tbl4 th{font:600 11px var(--mono);letter-spacing:.06em;color:var(--ink-2);text-align:left;padding:10px 12px;border-bottom:1.5px solid var(--ink);background:var(--paper);white-space:nowrap}
.tbl4 th button{all:unset;cursor:pointer}.tbl4 th button::after{content:" ↕";color:var(--muted)}
.tbl4 td{padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl4 tr.subject td{background:color-mix(in srgb,var(--t) 55%,var(--card))}
.foot4{font-size:13.5px;color:var(--muted);margin:0}
.rv4{animation:rv4 .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes rv4{from{opacity:0;transform:translateY(12px)}}
/* celebration flag */
.cele{display:flex;gap:14px;align-items:center;background:var(--card);border:1.5px solid var(--ink);border-radius:18px;padding:10px 16px 10px 10px;box-shadow:0 6px 0 var(--ink);position:relative;animation:celein .6s cubic-bezier(.2,1.5,.4,1) both;max-width:100%}
@keyframes celein{from{opacity:0;transform:translateY(20px) scale(.9)}}
.cele svg.fl{flex:none;overflow:visible}
.cele .pole{stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;animation:pole .45s .1s ease-out forwards}
@keyframes pole{to{stroke-dashoffset:0}}
.cele .cloth{transform-origin:7px 9px;transform:scaleX(0);animation:unfurl .5s .45s cubic-bezier(.2,1.5,.4,1) forwards,wave 1.6s 1s ease-in-out infinite}
@keyframes unfurl{to{transform:scaleX(1)}}
@keyframes wave{0%,100%{transform:scaleX(1) skewY(0)}50%{transform:scaleX(.93) skewY(4deg)}}
.cele b{display:block;font:800 18px/1.1 var(--display);letter-spacing:-.02em}
.cele span{font:500 12px var(--mono);color:var(--ink-2)}
.cf{position:fixed;z-index:80;width:10px;height:14px;border-radius:3px;pointer-events:none;border:1.5px solid var(--ink)}
/* toast */
.toast4{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:var(--paper);border-radius:999px;padding:12px 20px;font-size:14.5px;z-index:90;transition:all .3s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast4.show{opacity:1;transform:translate(-50%,0)}
/* how it works + feedback */
.how4{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:860px){.how4{grid-template-columns:minmax(0,1fr)}}
.how4 details{background:var(--card);border:1.5px solid var(--ink);border-radius:20px;padding:4px 20px}
.how4 summary{cursor:pointer;list-style:none;font:700 19px var(--display);letter-spacing:-.02em;padding:14px 0;display:flex;justify-content:space-between;gap:12px}
.how4 summary::-webkit-details-marker{display:none}
.how4 summary::after{content:"+";font:400 26px/1 var(--sans);transition:transform .2s}
.how4 details[open] summary::after{transform:rotate(45deg)}
.how4 details p,.how4 details li{font-size:15px;color:var(--ink-2)}
.how4 details ul{padding-left:18px}
.fb4{background:var(--lav);border:1.5px solid var(--ink);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.fb4 h3{font:800 26px/1.05 var(--display);letter-spacing:-.03em;margin:0}
.fb4 p{margin:0;color:var(--ink-2)}
.other4{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.other4{grid-template-columns:minmax(0,1fr)}}
.other4 a{background:var(--t);border:1.5px solid var(--ink);border-radius:18px;padding:14px 16px;text-decoration:none;color:var(--ink);transition:transform .2s}
.other4 a:hover{transform:translateY(-3px) rotate(-.5deg)}
.other4 b{display:block;font:800 19px var(--display);letter-spacing:-.02em}
.other4 span{font-size:13.5px;color:var(--ink-2)}
@media (prefers-reduced-motion: reduce){.freepill i{animation:none}.mini4 .ln{animation:none;opacity:1;transform:none}}
.res4-bd{grid-template-columns:minmax(0,1fr)}
.res4-bd>*{min-width:0}
.how4{align-items:start}