/* Web build slice 4: the audience tools on the Daylight shell. Ported from design/mockups/web-final/tools.css and the pages' shared mob-tools block.
   Loads after daylight.css. Each tool page adds its own sheet (tools-<name>.css) for what only it uses. */
/* TUNAI tools family: shared styles for tools.html and tool-*.html. Loads after kit.css (and claim.css where the claim pattern is used).
   One loop per tool: input -> result -> share card -> keep (claim) -> weekly hook -> next step. Behaviour: tools.js. */
[hidden]{display:none!important}
.th{background:var(--lav);padding:56px 0 0;border-bottom:1.5px solid var(--rule)}
.th .g{display:grid;grid-template-columns:8fr 4fr;gap:40px;align-items:end;padding-bottom:44px}
.th .aud{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.th .loop{display:flex;gap:0;border-top:1.5px solid var(--rule);background:var(--base);overflow:hidden}
.th .loop span{flex:1;padding:10px 8px;text-align:center;font:600 .62rem var(--f-m);letter-spacing:.07em;text-transform:uppercase;border-right:1.5px solid var(--rule);color:var(--ink2)}
.th .loop span:last-child{border:0}
.tsec{padding:56px 0;border-bottom:1.5px solid var(--rule);background:var(--base)}
.tin{background:var(--canvas);border:2px solid var(--ink);box-shadow:var(--shadow);padding:26px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:20px}.fg .full{grid-column:1/-1}
.hint{font-size:.85rem;color:var(--ink2);margin-top:2px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts .chip[aria-pressed=true]{background:var(--lime);color:#111827}
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px}
.fine{font:500 .68rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.sample{font:500 .68rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-top:14px}
.res{margin-top:44px;scroll-margin-top:90px}
.res h2.h-m{margin-bottom:8px}
/* the shareable card: always dark, so its text colours are fixed */
.sharecard{background:#111827;color:#F3F0E7;border:2px solid #111827;box-shadow:10px 10px 0 var(--cobalt);padding:24px 26px;max-width:640px}
.sharecard .mono{color:#A7AEBC}
.sharecard h3{font-size:2.4rem;margin:8px 0 10px;color:#F3F0E7}
.sharecard h3 mark{background:var(--lime);color:#111827;padding:0 .08em}
.sharecard ol,.sharecard ul{margin:6px 0 0 1.2em;font-size:1rem}
.sharecard .by{display:flex;gap:10px;align-items:center;margin-top:16px;padding-top:12px;border-top:1px dashed #3A4152}
.sharecard .by b{font:900 1.3rem var(--f-d);font-stretch:62%;text-transform:uppercase;color:#F3F0E7}
.sharecard .by .mono{margin-left:auto}
/* ranked rows */
.rk{display:grid;grid-template-columns:56px 1fr 190px;gap:18px;align-items:start;padding:20px 22px;border-bottom:1px solid var(--soft)}
.rk:last-child{border:0}
.rk .n{font:900 3.2rem/.8 var(--f-d);font-stretch:62%;color:var(--cobalt)}
.rk h3{font-size:1.7rem;margin-bottom:6px}
.rk .nums{text-align:right}.rk .nums b{font:800 2rem/1 var(--f-d);font-stretch:62%;display:block}
.rk .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
/* calendar strip */
.cal{border:2px solid var(--ink);background:var(--base);padding:16px 18px}
.cal .mths,.cal .lane{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.cal .mths span{font:600 .62rem var(--f-m);text-align:center;color:var(--ink2);text-transform:uppercase}
.cal .lh{margin:16px 0 6px;font-weight:700;font-size:.95rem}
.cal .lane i{height:22px;background:var(--sand);display:block}
.cal .lane i.ap{background:var(--coral)}.cal .lane i.sel{background:var(--amber)}.cal .lane i.go{background:var(--ink)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font:500 .7rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.legend i{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px}
/* editable drafts */
.draft{background:var(--base);border:2px solid var(--ink);padding:18px 20px}
.draft textarea{min-height:210px;background:var(--canvas);margin-top:8px}
.draft .row2{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;align-items:center}
/* checklist rows */
.chk{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--soft);align-items:start}
.chk:last-child{border:0}
.chk .tk{width:36px;height:36px;display:grid;place-items:center;font:800 1.2rem var(--f-d);border:1.5px solid var(--ink);color:#111827}
.chk .tk.y{background:var(--lime)}.chk .tk.n{background:var(--coral)}.chk .tk.p{background:var(--amber)}
.qa{border:1.5px solid var(--rule);background:var(--base);margin-bottom:12px}
.qa summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:700;display:flex;gap:12px;justify-content:space-between}
.qa summary::-webkit-details-marker{display:none}.qa summary::after{content:"+";color:var(--cobalt);font-size:1.4rem;line-height:1}.qa[open] summary::after{content:"\2212"}
.qa .in{padding:0 20px 18px}
.star{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.star div{border:1.5px solid var(--rule);padding:10px;font-size:.88rem;background:var(--canvas)}
.star b{display:block;font:700 .66rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt);margin-bottom:4px}
/* money table */
.mt td small{display:block;color:var(--ink2);font-size:.8rem}
.mt .bar2{height:10px;background:var(--cobalt);display:block;margin-top:6px;transform-origin:left;animation:grow 1.2s cubic-bezier(.2,.7,.2,1) both}
/* the tail: share bar, keep, weekly hook, next step */
.tail{margin-top:44px;display:grid;gap:26px}
.tail .stepno{font:600 .68rem var(--f-m);letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.sharebar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn.wa{background:#25D366;color:#111827}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.hook{background:var(--base);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:22px 24px}
.hook .c-head{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.hook .c-head b{font:800 1.7rem/1 var(--f-d);font-stretch:62%;text-transform:uppercase;display:block}
.hook .c-head span{color:var(--ink2);font-size:.95rem}
.hook .doors{display:grid;gap:12px}
.hook form{display:flex}.hook form input{border-right:0}.hook form .btn{clip-path:none}
.hook .or{font:600 .66rem var(--f-m);letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.hook .hk-done{background:var(--lime);color:#111827;padding:14px 16px;font-weight:600}
.hook.glow{background:var(--lime);color:#111827}.hook.glow .c-head span,.hook.glow .or,.hook.glow .c-fine{color:#111827}
.nexts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.nx{display:block;background:var(--canvas);border:2px solid var(--ink);padding:16px 18px;text-decoration:none;color:var(--ink)}
.nx:hover{background:var(--lime);color:#111827}.nx b{display:block;font:800 1.4rem/1 var(--f-d);font-stretch:62%;text-transform:uppercase;margin-bottom:6px}.nx span{font-size:.9rem;color:inherit;opacity:.85}
/* the hub */
.seg{display:flex;gap:8px;flex-wrap:wrap}
.segline{font:800 clamp(1.8rem,3vw,2.8rem)/1 var(--f-d);font-stretch:66%;text-transform:uppercase;margin:26px 0 8px;max-width:26em}
.path{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:2px solid var(--ink);background:var(--base);margin:22px 0 0;list-style:none}
.path li{padding:16px 18px;border-right:1.5px solid var(--ink);position:relative}
.path li:last-child{border:0}
.path li .mono{color:var(--ink2);display:block;margin-bottom:6px}
.path li a{font:800 1.3rem/1.05 var(--f-d);font-stretch:66%;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.path li a:hover{color:var(--cobalt)}
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{display:flex;flex-direction:column;gap:12px;background:var(--canvas);border:2px solid var(--ink);padding:22px;text-decoration:none;color:var(--ink);box-shadow:6px 6px 0 var(--ink);transition:transform .15s}
.tcard:hover{transform:translate(-2px,-2px)}
.tcard .ag{width:76px;height:76px}
.tcard h3{font-size:2rem}
.tcard p{color:var(--ink2);font-size:.98rem;flex:1}
.tcard .tags{display:flex;gap:6px;flex-wrap:wrap}
.tcard .go{font:700 .75rem var(--f-m);letter-spacing:.09em;text-transform:uppercase;color:var(--cobalt)}
.tcard.new .go::after{content:" \2192"}
@media(max-width:1000px){
 .th .g,.fg,.tgrid,.nexts,.tg,.path{grid-template-columns:1fr}
 .th .ag.big{display:none}.th .loop{flex-wrap:wrap}.th .loop span{flex:1 1 33%}
 .path li{border-right:0;border-bottom:1.5px solid var(--ink)}.path li:last-child{border:0}
 .rk{grid-template-columns:44px 1fr}.rk .nums{grid-column:2;text-align:left}
 .star{grid-template-columns:1fr 1fr}
 .tin{padding:18px}.sharecard h3{font-size:1.9rem}
 .mt{display:block;overflow-x:auto}
}

/* phone rules shared by every tool page (the mockups' mob-tools block) */
@media(max-width:1000px){
 .tag,.logo .sub,.sample,.fine,.stamp{font-size:.72rem}
 .stepno,.tail .stepno,.hook .or,.c-fine,.c-body+.c-fine,.stepno{font-size:.72rem}
 .claim .c-fine,.hook .c-fine,.c-fine{font-size:.72rem}.c-skip button,.c-skip a{min-height:44px;padding:0 8px;display:inline-flex;align-items:center}.claim{padding:18px 16px;box-shadow:5px 5px 0 var(--ink)}.claim .m{min-height:48px}

 .crumbs a{display:inline-flex;align-items:center;min-height:44px}
 .th,.hero{padding-top:30px}
 .th .g{padding-bottom:28px}
 .th .loop span{font-size:.7rem;padding:12px 6px;letter-spacing:.04em}
 .tabs button,.tabs [role=tab],.btn.sm{min-height:44px}
 .tabs button{padding-left:14px;padding-right:14px}
 .chip,.opts .chip{min-height:44px}
 .tin{padding:18px 16px}
 .actions{gap:12px}.actions .btn,.sharebar .btn,.formrow .btn,.hook .btn{min-height:48px}
 .sharebar .btn{flex:1 1 150px;justify-content:center}
 .sharecard{padding:18px 16px;box-shadow:6px 6px 0 var(--cobalt)}.sharecard h3{font-size:1.8rem}
 .hook{padding:18px 16px;box-shadow:5px 5px 0 var(--ink)}
 .hook form{flex-direction:column;gap:10px}.hook form input{border-right:1.5px solid var(--ink)}.hook form .btn{width:100%;justify-content:center}
 .nx{min-height:48px}
 .rk{padding:16px 14px}
 .cal{padding:12px}.cal .mths span,.legend{font-size:.7rem}
 .res{margin-top:32px}
 .stamp[role=button]{display:inline-flex;align-items:center;min-height:44px}
 textarea{min-height:140px}
 main{padding-bottom:12px}
}
@media(max-width:1000px){.path li a{display:block;padding:10px 0}.tcard{padding:18px}.tcard .go{display:inline-block;padding:10px 0}}
/* daylight.js shrinks the sticky nav at 60px of scroll; with scroll anchoring on, a page that lands near it jitters and a press is never stable */
html{overflow-anchor:none}
/* the claim card and the weekly note, release 2 */
.claim .c-methods.one{grid-template-columns:1fr}
.claim .c-methods.two{grid-template-columns:repeat(2,1fr)}
.claim .c-err{margin:12px 0 0;color:#8a1c1c;font-weight:600;font-size:.92rem}
.claim.back{margin:0 0 26px;max-width:46em}
.claim.done a,.hook .fine a{color:inherit;text-decoration:underline}
.hook form{gap:0}.hook form input{flex:1;min-width:0}
.hook [data-weekly-msg]{margin:0;font-weight:600;font-size:.92rem}.hook [data-weekly-msg][data-bad="1"]{color:#8a1c1c}
.hook form.is-done{display:none}
@media(max-width:700px){.claim .c-methods.two{grid-template-columns:1fr}.claim .m{min-height:44px}}
.hook form{flex-wrap:wrap}.hook form select{flex:1 1 100%;font:500 16px var(--f-d);padding:12px 14px;border:2px solid var(--ink);border-bottom:0;background:var(--canvas);color:var(--ink);min-height:48px;max-width:100%}