/* /features/seo-to-do-list/ only: the leaking pipe (hero), the work-order clipboard, the height
   board and the tear-off day pad. Prefix td-. Sample data. */

/* hero: one pipe, five taps, a gauge each, the tray of to-dos */
.td-pipe{border-radius:10px;background:var(--sk-deep);border:1px solid var(--sk-line-2);overflow:hidden}
.td-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .8rem;border-bottom:1px solid var(--sk-line);font:500 .66rem var(--sk-mono);color:var(--sk-text-3)}
.td-btn{padding:.2rem .55rem;border:1px solid var(--sk-line-2);border-radius:6px;background:var(--sk-ink-2);color:var(--sk-text-2);font:600 .62rem var(--sk-mono);cursor:pointer}
.td-rig{position:relative;padding:1.1rem .8rem .6rem}
.td-main{position:absolute;left:.8rem;right:.8rem;top:1.1rem;height:.7rem;border-radius:.35rem;background:linear-gradient(#5b6f82,#35485a);box-shadow:inset 0 1px 0 #8aa0b3}
.td-taps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}
.td-tap{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.td-valve{width:.8rem;height:1.1rem;margin-top:.55rem;border-radius:0 0 3px 3px;background:#5b6f82}
.td-drip{position:relative;display:block;width:.4rem;height:1.6rem}
.td-drip i{position:absolute;left:0;top:0;width:.4rem;height:.55rem;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#4db3ff;opacity:0}
.td-tap.on .td-drip i{animation:td-fall 1.1s ease-in infinite}
.td-tap.on .td-drip i:nth-child(2){animation-delay:.37s}.td-tap.on .td-drip i:nth-child(3){animation-delay:.74s}
@keyframes td-fall{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(1.4rem);opacity:0}}
.td-gauge{position:relative;display:block;width:2.1rem;height:5.2rem;border:2px solid #4a6073;border-top:0;border-radius:0 0 6px 6px;background:#0d151c;overflow:hidden}
.td-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(#4db3ff,#2477c2);transition:height 1.2s ease}
.td-tap.on .td-fill{height:var(--lv)}
.js .td-pipe:not([data-step]) .td-fill{height:var(--lv)}
.td-line{position:absolute;left:-2px;right:-2px;bottom:45%;height:0;border-top:2px dashed #eb6834}
.td-tap b{display:block;margin-top:.45rem;font:700 .64rem var(--sk-sans);color:#e6edf3}
.td-tap small{display:block;margin-top:.1rem;font:500 .54rem/1.35 var(--sk-mono);color:#8fa1b2}
.td-under .td-fill{background:linear-gradient(#7d8d9c,#4a5a69)}
.td-tray{display:grid;gap:.35rem;margin:.4rem .8rem .9rem;padding:0;list-style:none}
.td-tray li{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border-radius:7px;background:#17232e;border:1px solid #33475a;border-left:3px solid #eb6834;transition:opacity .4s,transform .4s}
.td-tray li span:last-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .55rem;min-width:0}
.td-tray b{font:700 .74rem var(--sk-sans);color:#fff}
.td-tray em{font:600 .58rem var(--sk-mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:#f2c55c}
.td-no{flex:none;display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;background:#eb6834;color:#fff;font:700 .66rem var(--sk-mono)}
.td-tray .td-nocard{border-left-color:#5d6e7e;border-style:dashed;background:none}
.td-tray .td-nocard .td-no{background:#33475a}
.td-tray .td-nocard b{color:#9fb0bf;font-weight:600}.td-tray .td-nocard em{color:#7d8d9c}
.js .td-pipe[data-step] .td-tray li:not(.on){opacity:0;transform:translateX(.6rem)}
@media (max-width:560px){.td-gauge{width:1.7rem;height:4.4rem}.td-tap small{font-size:.5rem}}

/* 01: the work-order clipboard */
.td-kinds{flex-wrap:wrap}
.td-wo{position:relative;padding:1.6rem 1rem 1rem;border-radius:12px;background:#b98a52;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.td-clip{position:absolute;left:50%;top:-.7rem;width:6rem;height:1.6rem;margin-left:-3rem;border-radius:6px 6px 3px 3px;background:linear-gradient(#c8d1d9,#7f8c97);box-shadow:0 2px 0 #59646e}
.td-sheet{padding:1rem 1.1rem;border-radius:4px;background:#fbf8f1;color:#1d2a35;box-shadow:0 1px 0 #d9d2c3}
.td-sheet p{margin:0 0 .6rem;font-size:.86rem;line-height:1.5}
.td-wo-top{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;padding-bottom:.55rem;border-bottom:1px solid #e3dccd}
.td-wo-top b{font:700 1rem var(--sk-sans)}
.td-wo-top em{margin-left:auto;padding:.1rem .45rem;border-radius:999px;background:#fde5d6;color:#a8400f;font:700 .62rem var(--sk-mono);font-style:normal;text-transform:uppercase;letter-spacing:.05em}
.td-wo-n{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#c84a16;color:#fff;font:700 .72rem var(--sk-mono)}
.td-wo-chk{color:#4b5b68;font-style:italic}
.td-wo-acts{display:flex;flex-wrap:wrap;gap:.3rem}
.td-wo-acts span{padding:.2rem .5rem;border:1px solid #cfc6b4;border-radius:5px;font:600 .66rem var(--sk-sans);color:#3b4a56;background:#fff}
.td-wo-foot{margin:0!important;font-size:.72rem!important;color:#6a7884}
.td-wo-foot code{font-size:.7rem;background:#efe9dc;padding:.05rem .3rem;border-radius:3px}
.td-wo.flash .td-sheet{animation:td-swap .45s ease}
@keyframes td-swap{0%{transform:translateY(.4rem) rotate(-.6deg);opacity:.3}100%{transform:none;opacity:1}}

/* 02: the height board ("you must be this tall") */
.td-ht{padding:1rem;border-radius:10px;background:var(--sk-deep);border:1px solid var(--sk-line-2)}
.td-ht-board{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;height:15rem;padding:0 .2rem 3.4rem;background:repeating-linear-gradient(to top,transparent 0 calc(10% - 1px),#22323f calc(10% - 1px) 10%) 0 0/100% calc(100% - 3.4rem) no-repeat}
.td-ht-mark{position:absolute;left:0;right:0;bottom:calc(3.4rem + (100% - 3.4rem) * .5);border-top:2px dashed #eb6834;z-index:1}
.td-ht-mark em{position:absolute;left:0;top:-1.1rem;padding:0 .3rem;background:var(--sk-deep);font:600 .58rem var(--sk-mono);font-style:normal;color:#ff8a5c}
.td-ht-col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
.td-ht-bar{display:block;width:70%;height:var(--h,10%);border-radius:5px 5px 0 0;background:linear-gradient(#5c6f80,#3b4c5b);transition:height .7s ease,background .4s}
.td-ht-col.ok .td-ht-bar{background:linear-gradient(#ff9a6a,#c84a16)}
.td-ht-col.no .td-ht-bar{background:repeating-linear-gradient(45deg,#5c6f80 0 6px,#3b4c5b 6px 12px)}
.td-ht-col b{position:absolute;bottom:-1.6rem;font:700 .66rem var(--sk-sans);color:#e6edf3;white-space:nowrap}
.td-ht-col small{position:absolute;bottom:-2.9rem;font:500 .52rem/1.2 var(--sk-mono);color:#8fa1b2;text-align:center}
.td-ht-v{position:absolute;bottom:calc(var(--h,10%) + .25rem);font:700 .8rem var(--sk-mono);font-style:normal;color:#fff;transition:bottom .7s ease}
.td-ht-say{margin:1rem 0 0;font-size:.86rem;line-height:1.5;color:#cfd8e2}
.td-lim{margin:1.2rem 0 0;padding:0;list-style:none;display:grid;gap:.4rem}
.td-lim li{position:relative;padding-left:2.6rem;line-height:1.45;color:var(--sk-text-2);font-size:.92rem}
.td-lim b{position:absolute;left:0;top:0;min-width:2.1rem;font:700 .9rem var(--sk-mono);color:var(--sk-ai)}
.td-lim li b+b,.td-lim li b:not(:first-child){position:static;min-width:0}
@media (max-width:560px){.td-ht-col small{display:none}.td-ht-board{padding-bottom:2rem;background-size:100% calc(100% - 2rem)}.td-ht-mark{bottom:calc(2rem + (100% - 2rem) * .5)}}

/* 03: the tear-off day pad */
.td-pad{position:relative;max-width:22rem;margin:0 auto;padding-top:1.1rem}
.td-pad-rings{position:absolute;left:10%;right:10%;top:0;height:1.6rem;background:radial-gradient(circle at 50% 70%,#6b7680 0 .28rem,transparent .3rem) 0 0/12.5% 100% repeat-x;z-index:2}
.td-pad-torn{position:absolute;left:0;right:0;top:1.1rem;height:1rem}
.td-pad-torn span{position:absolute;left:4%;right:4%;top:0;height:.9rem;border-radius:2px;background:#ede5d3;opacity:0;transition:opacity .3s}
.td-pad-torn span:nth-child(2){top:.3rem;left:3%;right:3%}.td-pad-torn span:nth-child(3){top:.6rem;left:2%;right:2%}
.td-pad-sheet{position:relative;padding:1.4rem 1.2rem 1.2rem;border-radius:4px;background:#fffdf7;box-shadow:0 2px 0 #e4dcc8,0 4px 0 #d7cdb5,0 12px 24px rgba(40,30,10,.18);text-align:center;color:#1d2a35}
.td-pad-sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:.5rem;background:radial-gradient(circle at 50% 0,transparent .22rem,#fffdf7 .25rem) 0 0/.7rem .5rem repeat-x}
.td-pad-day{margin:0;font:800 4.4rem/1 var(--sk-disp,var(--sk-sans));color:#c84a16}
.td-pad-mon{margin:.2rem 0 .8rem;font:600 .7rem var(--sk-mono);letter-spacing:.08em;text-transform:uppercase;color:#6a7884}
.td-pad-title{margin:0 0 .6rem;font:700 .95rem var(--sk-sans)}
.td-pad-v{display:inline-block;margin:0 0 .5rem;padding:.15rem .6rem;border-radius:999px;font:700 .7rem var(--sk-mono);text-transform:uppercase;letter-spacing:.05em;background:#e6e1d6;color:#4b5b68}
.td-pad-v.v-fixed{background:#d5f2e4;color:#0f7a52}.td-pad-v.v-not_yet{background:#fde5d6;color:#a8400f}
.td-pad-words{margin:0;font-size:.9rem;line-height:1.5}
.td-pad[data-state="d1"] .td-pad-torn span:nth-child(1),.td-pad[data-state="d2"] .td-pad-torn span:nth-child(-n+2),.td-pad[data-state="d3"] .td-pad-torn span{opacity:1}
.td-pad.flash .td-pad-sheet{animation:td-tear .5s ease}
@keyframes td-tear{0%{transform:translateY(-.5rem) rotate(1.5deg);opacity:.2}100%{transform:none;opacity:1}}
/* six steps in three columns: each row starts flush, with a rule above the second row */
@media (min-width:981px){.td-steps>:nth-child(3n+1){padding-left:0;border-left:0}.td-steps>:nth-child(n+4){border-top:1px solid var(--sk-line);margin-top:1.75rem}}