/* Työnkulku-sivu (dist/workflow.js, etuliite flw-). Värit Ainion työnäkymien tokeneista (work.css), joten tumma tila toimii.
   Uusi malli 8.10.2026 (https://claude.ai/artifact/Av3aux4W85LbqjZ9SquBb8): Seuraavaksi-kortti, osiot ja avattu kortti.
   Rauhalliset värit: sininen = painettava nappi, keltainen reuna = odottaa sinua, punainen = myöhässä, vihreä = tehty tai
   käynnissä, vaaleansininen ✦ = Ainion oma tieto, muu harmaata. */

/* Seuraavaksi-kortti sivun alussa: yksi asia kerrallaan, miksi se odottaa ja yksi nappi. */
.flw-nc{position:relative;display:grid;gap:6px;margin:0 0 14px;padding:20px 24px 20px 26px;border:1px solid var(--wk-line);border-radius:20px;background:var(--wk-panel);box-shadow:var(--wk-shadow);min-width:0}
.flw-nc::before{content:'';position:absolute;left:-1px;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:var(--wk-amber)}
.flw-nc.late::before{background:var(--wk-red)}
.flw-nc-k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wk-dim)}
.flw-nc-k em{font-style:normal;letter-spacing:0;font-size:11.5px;padding:1px 8px;border-radius:99px;background:var(--wk-chip);color:var(--wk-chip-fg)}
.flw-nc h2{margin:2px 0 0;font:700 24px/1.2 var(--font-heading);color:var(--wk-ink)}
.flw-nc-who{margin:0;font-size:14px;font-weight:600;color:var(--wk-body)}
.flw-nc-why{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--wk-ink)}
.flw-nc.late .flw-nc-why{color:var(--wk-red)}
.flw-nc-ai{display:flex;gap:7px;align-items:flex-start;width:fit-content;max-width:100%;margin:4px 0 0;padding:7px 11px;border-radius:10px;background:var(--wk-ai);color:var(--wk-ai-fg);font-size:13.5px;line-height:1.45}
.flw-nc-ai svg{width:13px;height:13px;flex:none;margin-top:3px}
.flw-nc-b{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.flw-nc-go{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:12px;background:var(--wk-brand);color:#fff;font:inherit;font-size:15px;font-weight:700;padding:12px 20px;cursor:pointer;transition:filter .15s,transform .15s,box-shadow .15s}
.flw-nc-go:hover,.flw-nc-go:focus-visible{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 10px 20px -12px rgba(var(--acc-d-rgb,47,95,168),.95)}
.flw-nc-go svg,.flw-nc-nx svg{width:14px;height:14px}
.flw-nc-nx{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--wk-line-2);border-radius:12px;background:transparent;color:var(--wk-link);font:inherit;font-size:14px;font-weight:700;padding:11px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.flw-nc-nx:hover,.flw-nc-nx:focus-visible{border-color:var(--wk-link);box-shadow:inset 0 0 0 1px var(--hv-ring)}
.flw-nc.ok{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px}
.flw-nc.ok::before{background:var(--wk-green)}
.flw-nc.ok h2{font-size:19px;margin:0}.flw-nc.ok p{margin:2px 0 0;color:var(--wk-mut)}
.flw-nc-ok{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--wk-green-t);color:var(--wk-green)}
.flw-nc-ok svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5}

.flw-list{background:var(--wk-panel);border:1px solid var(--wk-line);border-radius:18px;padding:16px 18px 12px;box-shadow:var(--wk-shadow);min-width:0}
.flw-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.flw-flt{flex:0 1 auto;max-width:100%}
.flw-flt button{flex:0 0 auto;padding:0 10px}
.flw-sales{border:1px solid var(--wk-btn2-line);background:var(--wk-btn2);color:var(--wk-mut);border-radius:10px;height:34px;padding:0 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.flw-sales:hover,.flw-sales:focus-visible{color:var(--wk-ink)}
/* Huippu: rivi Kannattavuuteen odottavista pyynnöistä ja tarjouksista (Ainion oma huomio, vaaleansininen ✦). */
.flw-salesrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--wk-ai);color:var(--wk-ai-fg)}
.flw-salesrow>svg{width:16px;height:16px;flex:none}
.flw-salesrow>div{flex:1 1 280px;min-width:0;display:grid;gap:2px}
.flw-salesrow b{font:700 14.5px/1.3 var(--font-heading)}
.flw-salesrow span{font-size:13px;opacity:.9}
.flw-salesrow .flw-go{background:var(--wk-panel)}

/* Osiot: Odottaa sinua, Työn alla, Odottaa asiakasta ja piilotetut Valmiit. */
.flw-sec{margin-top:8px}
.flw-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 2px 8px;font:700 15px/1.3 var(--font-heading);color:var(--wk-ink);list-style:none}
.flw-sec:first-of-type .flw-h{margin-top:6px}
.flw-h::-webkit-details-marker{display:none}
.flw-h svg{width:16px;height:16px;fill:none;stroke:var(--wk-mut);stroke-width:2;flex:none}
.flw-h em{font-style:normal;font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--wk-chip);color:var(--wk-chip-fg)}
.flw-h span{font:500 12.5px/1.3 var(--font-body,inherit);color:var(--wk-mut)}
.flw-done summary{cursor:pointer;border-radius:10px}
.flw-done summary:focus-visible{outline:2px solid var(--wk-link);outline-offset:2px}
.flw-done .flw-more{margin-left:auto;font-weight:700;color:var(--wk-link)}
.flw-done summary:hover .flw-more{text-decoration:underline}

/* Rivi: värillinen reuna kertoo tilan, ei nimikirjaimia eikä kuvaketta (Taneli 8.10.2026). */
.flw-row{position:relative;margin-bottom:8px;border:1px solid var(--wk-line);border-radius:16px;background:var(--wk-card);min-width:0;transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.flw-row::before{content:'';position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:transparent}
.flw-row.you::before{background:var(--wk-amber)}
.flw-row.late::before{background:var(--wk-red)}
.flw-row.run::before{background:var(--wk-green)}
.flw-row:hover{border-color:var(--wk-line-2);box-shadow:var(--wk-shadow);transform:translateY(-1px)}
.flw-row.on{border-color:var(--wk-line-2);box-shadow:var(--wk-shadow);transform:none}
.flw-row.done{opacity:.75}
.flw-rh{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(150px,1fr) minmax(0,1.3fr) minmax(150px,auto) 18px;gap:16px;align-items:center;padding:12px 14px 12px 18px;cursor:pointer;border-radius:16px}
.flw-rh:focus-visible{outline:2px solid var(--wk-link);outline-offset:2px}
.flw-w{min-width:0;display:grid;gap:3px}
.flw-w b{font-size:14.5px;color:var(--wk-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flw-w span{font-size:12.5px;color:var(--wk-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flw-stg{display:grid;gap:6px;min-width:0}
.flw-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.flw-bar i{height:5px;border-radius:5px;background:var(--wk-line-2)}
.flw-bar i.done{background:var(--wk-green)}
.flw-bar i.now{background:var(--wk-link)}
.flw-bar i.late{background:var(--wk-red)}
.flw-bar i.skip{background:repeating-linear-gradient(90deg,var(--wk-line-2) 0 3px,transparent 3px 6px)}
.flw-sn{font-size:12.5px;font-weight:700;color:var(--wk-ink)}
.flw-sn em{font-style:normal;font-weight:500;color:var(--wk-dim);margin-left:2px}
.flw-sn.late{color:var(--wk-red-ink,#c4302a)}
.flw-ai{min-width:0;display:flex;align-items:flex-start;gap:6px;font-size:12.5px;line-height:1.4;color:var(--wk-ai-fg)}
.flw-ai:not(:empty){background:var(--wk-ai);border-radius:9px;padding:6px 9px;width:fit-content;max-width:100%}
.flw-ai svg,.flw-xa svg,.flw-tl-ai svg{width:13px;height:13px;flex:none;margin-top:2px}
.flw-nx{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.flw-tag{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--wk-chip);color:var(--wk-chip-fg);white-space:nowrap}
.flw-tag.you{background:var(--wk-amber-t);color:var(--wk-amber-ink)}
.flw-tag.late{background:var(--wk-red-t);color:var(--wk-red-ink,#c4302a)}
.flw-tag.run,.flw-tag.ok{background:var(--wk-green-t);color:var(--wk-green-ink)}
.flw-go{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;background:var(--wk-tint);color:var(--wk-link);font:inherit;font-size:13px;font-weight:700;padding:8px 12px;cursor:pointer;text-align:left;white-space:nowrap}
.flw-go svg{width:13px;height:13px;flex-shrink:0}
.flw-go:hover,.flw-go:focus-visible{background:var(--wk-brand);color:#fff}
.flw-cv{display:grid;place-items:center;color:var(--wk-dim)}
.flw-cv svg{width:16px;height:16px;transform:rotate(90deg);transition:transform .15s}
.flw-row.on .flw-cv svg{transform:rotate(-90deg)}

/* Avattu rivi: Nyt-laatikko ja työn vaiheet aikajanana. */
.flw-xp{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;padding:14px;align-items:start;border-top:1px solid var(--wk-line)}
.flw-xp.done{grid-template-columns:minmax(0,1fr)}
.flw-now{position:relative;display:grid;gap:8px;padding:14px 16px 16px;border:1px solid var(--wk-line-2);border-radius:14px;background:var(--wk-inner)}
.flw-now::before{content:'';position:absolute;left:-1px;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--wk-line-2)}
.flw-out.over::before{background:var(--wk-red)}.flw-out.ok::before{background:var(--wk-green)}
.flw-out-b{border:1px solid var(--wk-btn2-line);background:var(--wk-btn2);color:var(--wk-ink);border-radius:10px;padding:9px 14px;min-height:40px;font:inherit;font-size:14px;cursor:pointer}
.flw-out-t{width:100%;border-collapse:collapse;font-size:14px}
.flw-out-t th{font-size:12px;font-weight:700;color:var(--wk-dim);text-align:right;padding:4px 6px;border-bottom:1px solid var(--wk-line-2)}
.flw-out-t td{text-align:right;padding:7px 6px;border-bottom:1px solid var(--wk-line);color:var(--wk-ink)}
.flw-out-t th:first-child,.flw-out-t td:first-child{text-align:left;padding-left:0}
.flw-now.you::before{background:var(--wk-amber)}.flw-now.late::before{background:var(--wk-red)}.flw-now.run::before{background:var(--wk-green)}
.flw-now-k{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wk-dim)}
.flw-now-k .flw-tag{text-transform:none;letter-spacing:0}
.flw-now h4{margin:0;font:700 17px/1.25 var(--font-heading);color:var(--wk-ink)}
.flw-now-why{margin:0;font-size:14px;line-height:1.45;color:var(--wk-body)}
.flw-now ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
/* Keikkakortti (flwCardHtml): keikan omat tiedot Valmistelu- ja Toteutus-vaiheessa. */
.flw-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:13.5px;line-height:1.45}
.flw-card dt{color:var(--wk-dim);font-weight:600}
.flw-card dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;color:var(--wk-ink);min-width:0;overflow-wrap:anywhere}
.flw-card a,.flw-card button{display:inline-flex;align-items:center;padding:0;border:0;background:none;color:var(--wk-link);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;min-height:0}
.flw-card a:hover,.flw-card button:hover{text-decoration:underline}
/* Puuttuva vaiheen tieto (keltainen = odottaa sinua). */
.flw-miss{color:var(--wk-amber-ink);font-weight:700}
@media (max-width:640px){.flw-card{grid-template-columns:minmax(0,1fr);gap:0}.flw-card dd{margin-bottom:6px}.flw-card a,.flw-card button{min-height:40px}}
.flw-now li{font-size:13.5px;line-height:1.45;color:var(--wk-body)}
.flw-now li:first-child{font-weight:700;color:var(--wk-ink)}
.flw-xa{display:flex;gap:7px;align-items:flex-start;margin:0;padding:7px 10px;border-radius:9px;background:var(--wk-ai);color:var(--wk-ai-fg);font-size:13px;line-height:1.45;width:fit-content;max-width:100%}
.flw-now-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.flw-now-b .flw-go{background:var(--wk-brand);color:#fff;padding:10px 16px;transition:filter .15s}
.flw-now-b .flw-go:hover,.flw-now-b .flw-go:focus-visible{filter:brightness(1.1)}
.flw-tl{padding:4px 4px 0;min-width:0}
.flw-tl h6{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wk-dim)}
.flw-tl ol{margin:0;padding:0;list-style:none;display:grid}
.flw-tl-s{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:0 0 10px}
.flw-tl-s::before{content:'';position:absolute;left:8px;top:18px;bottom:0;width:2px;background:var(--wk-line-2)}
.flw-tl-s:last-child::before{display:none}
.flw-tl-s>i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--wk-line-2);background:var(--wk-panel);box-sizing:border-box;margin-top:1px}
.flw-tl-s>i svg{width:10px;height:10px;stroke:#fff;stroke-width:3;fill:none}
.flw-tl-s.done>i{background:var(--wk-green);border-color:var(--wk-green)}
.flw-tl-s.now>i{border-color:var(--wk-link);box-shadow:inset 0 0 0 3px var(--wk-panel);background:var(--wk-link)}
.flw-tl-s.late>i{border-color:var(--wk-red);background:var(--wk-red);box-shadow:inset 0 0 0 3px var(--wk-panel)}
.flw-tl-s.skip>i{border-style:dashed}
.flw-tl-s b{display:block;font-size:13px;color:var(--wk-ink)}
.flw-tl-s span{display:block;font-size:12.5px;line-height:1.4;color:var(--wk-mut);overflow-wrap:anywhere}
.flw-tl-s .flw-tl-ai{display:flex;gap:5px;margin-top:2px;color:var(--wk-ai-fg)}
.flw-tl-s.now b{color:var(--wk-link)}.flw-tl-s.late b{color:var(--wk-red)}
.flw-tl-s.todo b{color:var(--wk-mut)}
.flw-tl-s.todo span{color:var(--wk-dim)}
.flw-tl-more{margin:0 0 0 28px;font-size:12px;color:var(--wk-dim)}

.flw-note{margin:12px 2px 0;font-size:12.5px;color:var(--wk-mut)}
.flw-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:36px 16px}
.flw-empty>span{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--wk-tint);color:var(--wk-link)}
.flw-empty>span svg{width:20px;height:20px}
.flw-empty h3{margin:0;font-family:var(--font-heading);font-size:19px;color:var(--wk-ink)}
.flw-empty p{margin:0;max-width:440px;font-size:13.5px;color:var(--wk-mut)}
.flw-empty.sm{padding:22px 12px}
.flw-empty .flw-go.p{margin-top:6px;padding:11px 18px;font-size:14px;background:var(--wk-brand);color:#fff;transition:filter .15s}
.flw-empty .flw-go.p:hover,.flw-empty .flw-go.p:focus-visible{background:var(--wk-brand);color:#fff;filter:var(--hv-f)}
@media (prefers-reduced-motion:reduce){.flw-row,.flw-nc-go{transition:none}.flw-row:hover,.flw-nc-go:hover{transform:none}}
@media (max-width:960px){
 .flw-rh{grid-template-columns:minmax(0,1fr) auto 18px;grid-template-areas:"w nx cv" "stg stg stg" "ai ai ai";row-gap:10px}
 .flw-w{grid-area:w}.flw-stg{grid-area:stg}.flw-ai{grid-area:ai}.flw-nx{grid-area:nx;align-items:flex-end}.flw-cv{grid-area:cv}
 .flw-ai:empty{display:none}
 .flw-xp{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){.flw-nc{padding:16px 16px 16px 18px;border-radius:18px}.flw-nc h2{font-size:21px}.flw-nc-b{flex-direction:column;align-items:stretch}.flw-nc-go,.flw-nc-nx{justify-content:center}}
@media (max-width:640px){
 .flw-list{padding:12px 10px 10px;border-radius:16px}
 .flw-flt{flex:1 1 100%}
 .flw-flt button{flex:1 1 auto;padding:0 4px;font-size:12px}
 .flw-rh{grid-template-columns:minmax(0,1fr) 18px;grid-template-areas:"w cv" "stg stg" "ai ai" "nx nx";gap:10px;padding:12px 12px 12px 16px}
 .flw-nx{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
 .flw-nx .flw-go{flex:1 1 auto;justify-content:center}
 .flw-xp{padding:10px}
 .flw-now{padding:12px 14px 14px}
 .flw-now-b .flw-go{width:100%;justify-content:center}
}
/* Konepajan viikkokuorma (dist/workflow.js flwWeeks): neutraali tausta, signaali vain palkissa ja reunassa (rauhalliset värit). */
.flw-weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0 0 14px}
.flw-wk{display:grid;gap:3px;align-content:start;padding:10px 12px;border-radius:12px;border:1px solid var(--wk-line);border-left:3px solid var(--wk-line-2);background:var(--wk-panel);font-size:13px;color:var(--wk-body)}
.flw-wk b{color:var(--wk-ink);font-size:13.5px}
.flw-wk i{display:block;height:6px;border-radius:3px;background:var(--wk-line);overflow:hidden;margin-top:3px}
.flw-wk em{display:block;height:100%;background:var(--wk-link)}
.flw-wk small{color:var(--wk-mut);font-variant-numeric:tabular-nums}
.flw-wk.full{border-left-color:var(--wk-amber)}
.flw-wk.full em{background:var(--wk-amber)}
.flw-wk.late{border-left-color:var(--wk-red)}
@media (max-width:560px){.flw-weeks{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Työmaan vaiheet avatussa rivissä (dist/workflow.js flwSiteHtml, rakennusala): sama rauhallinen tyyli kuin vaihelistassa;
   kuva puuttuu valmiista vaiheesta keltaisella reunalla, nappi sinisenä (rauhalliset värit). */
.flw-site{padding:4px 4px 0;min-width:0}
.flw-site h6{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wk-dim)}
.flw-site ol{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.flw-site li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 10px;border:1px solid var(--wk-line);border-left:3px solid var(--wk-line-2);border-radius:10px;background:var(--wk-panel)}
.flw-site li>i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--wk-line-2);box-sizing:border-box}
.flw-site li>i svg{width:10px;height:10px;stroke:#fff;stroke-width:3;fill:none}
.flw-site li.done{border-left-color:var(--wk-green)}
.flw-site li.done>i{background:var(--wk-green);border-color:var(--wk-green)}
.flw-site li.now{border-left-color:var(--wk-link)}
.flw-site li.now>i{border-color:var(--wk-link);background:var(--wk-link);box-shadow:inset 0 0 0 3px var(--wk-panel)}
.flw-site li.miss{border-left-color:var(--wk-amber)}
.flw-site li b{display:block;font-size:13px;color:var(--wk-ink)}
.flw-site li.todo b{color:var(--wk-mut)}
.flw-site li span{display:block;font-size:12.5px;line-height:1.4;color:var(--wk-mut);overflow-wrap:anywhere}
.flw-site li.miss span{color:var(--wk-amber-ink)}
.flw-site-b{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 12px;border:0;border-radius:9px;background:var(--wk-brand);color:#fff;font:600 13px/1 var(--font-body,inherit);cursor:pointer;transition:filter .15s}
.flw-site-b svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none}
.flw-site-b:hover,.flw-site-b:focus-visible{filter:brightness(1.1)}
.flw-site-b:disabled{opacity:.6;cursor:default}
.flw-xpl{display:grid;gap:12px;min-width:0;align-content:start}
@media (max-width:640px){.flw-site li{grid-template-columns:18px minmax(0,1fr);row-gap:6px}.flw-site-b{grid-column:2;justify-self:start;min-height:40px}}