/* my-week.css: "Your week in weather" (/my-week.html).
   Uses the site's own tokens (--paper, --ink, --line, --credit, --focus) so dark mode follows site.css.
   Motion: transitions and ambient animation switch off with prefers-reduced-motion and with the site's calm mode (.tol-still). */

body{ background:var(--paper); }
main.wk{
  --wk-card:#FFFDF6; --wk-soft:#F8F2E2; --wk-blue:#2B5B8C; --wk-blue-soft:#DCE9F4; --wk-good:var(--credit,#3E6B4C); --wk-bad:var(--debit,#96412B);
  --wk-gap:1rem;
  max-width:1120px; margin:0 auto; padding:1.25rem 16px 4rem; box-sizing:border-box;
  font-family:"Lora", Georgia, serif; color:var(--ink); line-height:1.6; font-size:1.0625rem;
}
.wk *, .wk *::before, .wk *::after{ box-sizing:border-box; }
.wk :focus-visible{ outline:3px solid var(--focus,#2B5B8C); outline-offset:2px; }
.wk h1, .wk h2, .wk h3, .wk h4, .wk h5{ font-family:"Fraunces", "Lora", Georgia, serif; font-weight:600; line-height:1.2; margin:0 0 .5rem; color:var(--ink); }
.wk h1{ font-size:clamp(1.9rem, 5vw, 2.8rem); letter-spacing:-.01em; }
.wk h2{ font-size:clamp(1.4rem, 3.6vw, 1.9rem); padding-top:1.2rem; border-top:3px double var(--ink); }
.wk h3{ font-size:1.15rem; } .wk h4{ font-size:1.05rem; } .wk h5{ font-size:1rem; margin-top:1rem; }
.wk p{ max-width:72ch; margin:.4rem 0 .8rem; }
.wk a{ color:var(--focus,#2B5B8C); }
.wk-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0; }
.wk [hidden]{ display:none !important; }
.wk-fine{ font-size:.95rem; color:var(--ink-soft); }
.wk-code{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.85rem; color:var(--brass-ink,#7A5620); letter-spacing:.04em; margin:0 0 .3rem; }
.wk-intro{ font-size:1.15rem; }
.wk-how{ background:var(--wk-soft); border:1px solid var(--line); border-left:4px solid var(--brass,#A8792F); border-radius:6px; padding:.7rem .9rem; }
.wk-sec{ margin-top:2.6rem; scroll-margin-top:4.5rem; }
.wk-sec-p{ color:var(--ink-soft); }
.wk-empty{ background:var(--wk-soft); border:1px dashed var(--line); border-radius:10px; padding:.9rem 1rem; color:var(--ink-soft); }
.wk-lead2{ font-size:1.1rem; font-family:"Fraunces", Georgia, serif; }
.wk-bul{ padding-left:1.2rem; margin:.3rem 0 .8rem; }
.wk-bul li{ margin:.3rem 0; max-width:72ch; }

/* jump pills */
.wk-jump{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:1rem 0; }
.wk-jump a{ display:inline-flex; align-items:center; min-height:44px; padding:.4rem 1rem; border:1px solid var(--line); border-radius:999px; background:var(--wk-card); text-decoration:none; color:var(--ink); }
.wk-jump a:hover{ border-color:var(--wk-good); }
.wk-hello{ background:var(--wk-blue-soft); border:1px solid #9DBBD6; border-radius:10px; padding:.2rem 1rem; }
.wk-hello a{ font-weight:600; }

/* buttons */
.wk-btn{ font:inherit; font-size:.98rem; display:inline-flex; align-items:center; justify-content:center; text-align:center; min-height:44px; min-width:44px; padding:.5rem 1rem; border:1px solid var(--ink); border-radius:10px; background:var(--wk-card); color:var(--ink); cursor:pointer; text-decoration:none; }
.wk-btn:hover:not(:disabled){ background:var(--paper-deep); }
.wk-btn:disabled{ opacity:.5; cursor:not-allowed; }
.wk-btn-main{ background:var(--ink); color:var(--paper) !important; }
.wk-btn-main:hover:not(:disabled){ background:#40382E; }
.wk-btn-danger{ border-color:var(--wk-bad); color:var(--wk-bad); }
.wk-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 .4rem; }
.wk-confirm{ background:var(--wk-soft); border:1px solid var(--wk-bad); border-radius:10px; padding:.6rem .9rem; margin:.6rem 0; }
.wk-confirm p{ margin:0 0 .5rem; }
.wk-confirm .wk-btn{ margin:.2rem .3rem .2rem 0; }

/* week bar */
.wk-weekbar{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin:1rem 0; padding:.7rem; background:var(--wk-card); border:1px solid var(--line); border-radius:12px; }
.wk-weekbar-mid{ text-align:center; flex:1 1 12rem; display:flex; flex-direction:column; gap:.1rem; align-items:center; }
.wk-weekbar-mid strong{ font-family:"Fraunces", Georgia, serif; font-size:1.15rem; }
.wk-weekbar-mid span{ color:var(--ink-soft); font-size:.95rem; }
.wk-end-l{ display:inline-flex; align-items:center; gap:.5rem; font-size:.95rem; color:var(--ink-soft); }
.wk input[type="date"], .wk select{ font:inherit; font-size:.98rem; min-height:44px; padding:.3rem .5rem; border:1px solid #8F8468; border-radius:8px; background:var(--wk-card); color:var(--ink); }

/* day cards */
.wk-days{ display:grid; grid-template-columns:1fr; gap:var(--wk-gap); }
@media (min-width:900px){ .wk-days{ grid-template-columns:1fr 1fr; } }
.wk-day{ background:var(--wk-card); border:1px solid var(--line); border-radius:14px; padding:.8rem .6rem .6rem; }
@media (min-width:560px){ .wk-day{ padding:.8rem .8rem .6rem; } }
.wk-day-h{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.wk-day-h h3{ margin:0; }
.wk-day-h h3 span{ font-weight:400; color:var(--ink-soft); font-size:1rem; }
.wk-src{ font-size:.85rem; color:var(--wk-blue); background:var(--wk-blue-soft); border-radius:999px; padding:.05rem .6rem; }
.wk-picks{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:3px; margin:.5rem 0 .2rem; }
.wk-pick{ font:inherit; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; min-height:48px; min-width:44px; padding:3px 0 2px; background:transparent; border:2px solid transparent; border-radius:10px; color:var(--ink); cursor:pointer; }
.wk-pick:hover{ background:var(--paper-deep); }
.wk-pick[aria-pressed="true"]{ background:var(--wk-blue-soft); border-color:var(--wk-blue); }
.wk-pick .wk-ico{ width:100%; max-width:40px; height:auto; }
.wk-pick-n{ display:none; font-size:.875rem; line-height:1.15; text-align:center; }
@media (min-width:560px){ .wk-pick{ min-height:84px; padding:6px 0 4px; } .wk-pick-n{ display:block; } .wk-pick .wk-ico{ max-width:46px; } }
.wk-picked{ margin:.2rem 0 .3rem; font-size:.98rem; color:var(--ink-soft); min-height:1.5em; }
.wk-more{ border-top:1px dashed var(--line); margin-top:.3rem; }
.wk-more summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; gap:.5rem; font-weight:600; }
.wk-count{ font-weight:400; color:var(--ink-soft); }
.wk-sliders{ display:grid; grid-template-columns:1fr; gap:.4rem .8rem; }
@media (min-width:560px){ .wk-sliders{ grid-template-columns:1fr 1fr; } }
.wk-sl label, .wk-asl label{ font-size:.98rem; font-weight:600; display:block; }
.wk-sl-row, .wk-asl-row{ display:flex; align-items:center; gap:.5rem; }
.wk input[type="range"]{ flex:1 1 auto; min-width:0; height:44px; accent-color:var(--wk-blue); background:transparent; }
.wk-sl input[data-set="0"]{ opacity:.55; }
.wk output{ min-width:4.2rem; font-size:.95rem; color:var(--ink-soft); text-align:right; }
.wk-x{ font:inherit; font-size:.9rem; min-height:44px; min-width:44px; padding:0 .5rem; background:none; border:0; text-decoration:underline; color:var(--wk-blue); cursor:pointer; }
.wk-ends{ display:flex; justify-content:space-between; font-size:.875rem; color:var(--ink-soft); margin-top:-.4rem; }
.wk-tags{ border:0; padding:0; margin:.6rem 0 0; min-width:0; }
.wk-tags legend{ font-weight:600; padding:0; margin-bottom:.3rem; }
.wk-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.wk-chip{ font:inherit; font-size:.95rem; min-height:44px; min-width:44px; padding:.2rem .9rem; border:1px solid #8F8468; border-radius:999px; background:var(--wk-card); color:var(--ink); cursor:pointer; }
.wk-chip[aria-pressed="true"]{ background:var(--wk-blue); border-color:var(--wk-blue); color:#fff; }
.wk-note-l{ display:block; font-weight:600; margin:.8rem 0 .3rem; }
.wk textarea{ width:100%; font:inherit; font-size:1rem; padding:.5rem .6rem; border:1px solid #8F8468; border-radius:8px; background:var(--wk-card); color:var(--ink); resize:vertical; }

/* weather icons: all layers live in each icon, and the page switches between them */
.wk-ico{ display:block; width:44px; height:44px; overflow:visible; }
.wk-ico g{ transition:opacity .6s ease, transform .7s cubic-bezier(.34,1.3,.5,1); }
.wk-ico .l-cloud path{ transition:fill .6s ease; }
.wk-ico .rays, .wk-ico .l-cloud path, .wk-ico .drop, .wk-ico .l-wind path, .wk-ico .l-fog line, .wk-ico .flick{ transform-box:fill-box; transform-origin:center; }
.wk-ico-gap{ display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:1.4rem; border:2px dashed var(--line); border-radius:50%; }
.wk-live .wk-ico .rays, .wk-pick[aria-pressed="true"] .wk-ico .rays{ animation:wk-spin 26s linear infinite; }
.wk-live .wk-ico .drop, .wk-pick[aria-pressed="true"] .wk-ico .drop{ animation:wk-fall 1.1s linear infinite; }
.wk-live .wk-ico .drop.d2, .wk-pick[aria-pressed="true"] .wk-ico .drop.d2{ animation-delay:-.4s; }
.wk-live .wk-ico .drop.d3, .wk-pick[aria-pressed="true"] .wk-ico .drop.d3{ animation-delay:-.75s; }
.wk-live .wk-ico .l-wind path, .wk-pick[aria-pressed="true"] .wk-ico .l-wind path{ animation:wk-sway 2.6s ease-in-out infinite; }
.wk-live .wk-ico .l-wind .w2, .wk-pick[aria-pressed="true"] .wk-ico .l-wind .w2{ animation-delay:-.9s; }
.wk-live .wk-ico .l-wind .w3, .wk-pick[aria-pressed="true"] .wk-ico .l-wind .w3{ animation-delay:-1.6s; }
.wk-live .wk-ico .l-fog line, .wk-pick[aria-pressed="true"] .wk-ico .l-fog line{ animation:wk-sway 4s ease-in-out infinite; }
.wk-live .wk-ico .l-fog .f2, .wk-pick[aria-pressed="true"] .wk-ico .l-fog .f2{ animation-delay:-2s; }
.wk-live .wk-ico .flick, .wk-pick[aria-pressed="true"] .wk-ico .flick{ animation:wk-flick 3.4s linear infinite; }
.wk-live .wk-ico .l-cloud path, .wk-pick[aria-pressed="true"] .wk-ico .l-cloud path{ animation:wk-drift 6s ease-in-out infinite; }
@keyframes wk-spin{ to{ transform:rotate(360deg); } }
@keyframes wk-fall{ 0%{ transform:translateY(-4px); opacity:0; } 25%{ opacity:1; } 100%{ transform:translateY(6px); opacity:0; } }
@keyframes wk-sway{ 50%{ transform:translateX(3px); } }
@keyframes wk-flick{ 0%,84%,100%{ opacity:1; } 88%{ opacity:.2; } 92%{ opacity:1; } 95%{ opacity:.35; } }
@keyframes wk-drift{ 50%{ transform:translateX(2px); } }

/* the weather report */
.wk-report{ position:relative; overflow:hidden; border-radius:18px; border:1px solid #9DBBD6; background:linear-gradient(180deg, #CFE6F5 0%, #F7EBC8 100%); color:#1F2A37; }
.wk-report[data-mood="mixed"]{ background:linear-gradient(180deg, #CBDAE8 0%, #F2EAD5 100%); }
.wk-report[data-mood="gray"]{ background:linear-gradient(180deg, #BCC7D3 0%, #E8E2D4 100%); }
.wk-report[data-mood="storm"]{ background:linear-gradient(180deg, #98A5B8 0%, #D5CFC4 100%); }
.wk-sky{ position:absolute; inset:0; pointer-events:none; }
.wk-cl{ position:absolute; height:34px; width:110px; border-radius:40px; background:rgba(255,255,255,.65); filter:blur(.5px); animation:wk-cloud 38s linear infinite; }
.wk-cl::before, .wk-cl::after{ content:""; position:absolute; background:inherit; border-radius:50%; }
.wk-cl::before{ width:48px; height:48px; left:18px; top:-22px; } .wk-cl::after{ width:36px; height:36px; left:56px; top:-14px; }
.wk-cl.c1{ top:14%; left:-130px; } .wk-cl.c2{ top:48%; left:-130px; animation-duration:55s; animation-delay:-20s; transform:scale(.8); opacity:.7; } .wk-cl.c3{ top:76%; left:-130px; animation-duration:46s; animation-delay:-33s; transform:scale(.6); opacity:.6; }
@keyframes wk-cloud{ from{ translate:0 0; } to{ translate:calc(100vw + 260px) 0; } }
.wk-sun{ position:absolute; right:18px; top:16px; width:54px; height:54px; border-radius:50%; background:radial-gradient(circle, #FFE9A3 0 45%, rgba(255,225,130,0) 72%); animation:wk-glow 6s ease-in-out infinite; }
.wk-report[data-mood="gray"] .wk-sun, .wk-report[data-mood="storm"] .wk-sun{ opacity:.25; }
@keyframes wk-glow{ 50%{ transform:scale(1.12); } }
.wk-report-in{ position:relative; padding:1rem .8rem 1rem; }
@media (min-width:700px){ .wk-report-in{ padding:1.4rem 1.6rem 1.3rem; } }
.wk-kicker{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.85rem; letter-spacing:.04em; margin:0 0 .3rem; color:#33404F; }
.wk-headline{ font-size:clamp(1.7rem, 5vw, 2.6rem) !important; margin:0 0 .2rem !important; color:#1F2A37 !important; padding-right:60px; }
.wk-lead{ font-size:1.15rem; margin:.2rem 0 1rem; color:#1F2A37; }
.wk-strip, .wk-fc-strip{ list-style:none; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:3px; padding:0; margin:0; }
.wk-strip .wk-col{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:.5rem 0 .4rem; background:rgba(255,255,255,.55); border-radius:12px; opacity:0; animation:wk-rise .6s cubic-bezier(.2,.8,.3,1) forwards; animation-delay:calc(var(--i) * 80ms + 80ms); }
.wk-quiet-in .wk-col{ animation-duration:.01s; animation-delay:0s; }
@keyframes wk-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.wk-wd{ font-weight:700; font-size:.9rem; }
.wk-date{ font-size:.85rem; color:#4B5766; }
.wk-sk{ display:none; font-size:.875rem; line-height:1.15; text-align:center; padding:0 2px; }
@media (min-width:640px){ .wk-sk{ display:block; min-height:2.3em; } }
.wk-strip .wk-ico{ width:100%; max-width:46px; height:auto; }
.wk-strip .wk-ico-gap{ width:34px; height:34px; }
.wk-trend{ position:relative; height:84px; margin:.7rem 0 .4rem; background:rgba(255,255,255,.4); border-radius:12px; }
.wk-trend-in{ position:absolute; inset:10px 0; }
.wk-trend svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wk-line{ stroke:#2B5B8C; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:wk-draw 1.4s .5s ease forwards; }
@keyframes wk-draw{ to{ stroke-dashoffset:0; } }
.wk-quiet-in .wk-line{ animation-duration:.01s; animation-delay:0s; }
.wk-dot{ position:absolute; width:12px; height:12px; margin:0 0 -6px -6px; border-radius:50%; background:#2B5B8C; border:2px solid #fff; opacity:0; animation:wk-pop .4s ease forwards; animation-delay:calc(var(--i) * 90ms + 700ms); }
.wk-trend{ --pad:6px; }
.wk-dot{ transform:translateY(0); }
@keyframes wk-pop{ from{ opacity:0; scale:.2; } to{ opacity:1; scale:1; } }
.wk-trend-t, .wk-trend-b{ position:absolute; left:8px; font-size:.8rem; color:#4B5766; }
.wk-trend-t{ top:2px; } .wk-trend-b{ bottom:2px; }
.wk-counts{ margin:.4rem 0 0 !important; font-size:.98rem; color:#1F2A37; }
.wk-recap-text{ margin:1rem 0; }
.wk-export{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0; }
.wk-card-out figure{ margin:.6rem 0; display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; }
.wk-card-out img{ max-width:100%; height:auto; border:1px solid var(--line); border-radius:10px; }
.wk-card-out figcaption{ display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); }
table.wk-sr{ display:block; }

/* forecast */
.wk-fc-strip{ gap:4px; }
.wk-fcd{ font:inherit; width:100%; display:flex; flex-direction:column; align-items:center; gap:2px; padding:.4rem 0 .3rem; min-height:44px; background:var(--wk-card); border:2px solid var(--line); border-radius:12px; color:var(--ink); cursor:pointer; }
.wk-fcd:hover{ border-color:var(--wk-blue); }
.wk-fcd[aria-pressed="true"]{ border-color:var(--wk-blue); background:var(--wk-blue-soft); }
.wk-fcd .wk-ico{ width:100%; max-width:46px; height:auto; }
.wk-track{ position:relative; display:block; width:28px; height:120px; margin:.3rem 0; background:repeating-linear-gradient(to top, transparent 0 29px, rgba(120,110,90,.18) 29px 30px); border-radius:8px; border:1px solid var(--line); }
.wk-band{ position:absolute; left:3px; right:3px; bottom:30%; height:20%; background:rgba(43,91,140,.28); border-radius:8px; transition:bottom .6s cubic-bezier(.3,1.1,.4,1), height .6s cubic-bezier(.3,1.1,.4,1); }
.wk-pt{ position:absolute; left:50%; margin:0 0 -7px -7px; width:14px; height:14px; bottom:50%; border-radius:50%; background:#2B5B8C; border:2px solid #fff; transition:bottom .6s cubic-bezier(.3,1.1,.4,1); }
.wk-tick{ position:absolute; left:-3px; right:-3px; height:0; border-top:2px dashed #96412B; bottom:50%; transition:bottom .6s cubic-bezier(.3,1.1,.4,1); }
.wk-delta{ font-size:.85rem; color:var(--ink-soft); min-height:1.2em; }
.wk-delta[data-dir="1"]{ color:var(--wk-good); font-weight:600; } .wk-delta[data-dir="-1"]{ color:var(--wk-bad); font-weight:600; }
.wk-legend{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; padding:0; margin:.5rem 0; font-size:.9rem; color:var(--ink-soft); }
.wk-legend i{ display:inline-block; vertical-align:middle; margin-right:.3rem; }
.lg-band{ width:14px; height:14px; background:rgba(43,91,140,.28); border-radius:4px; } .lg-pt{ width:12px; height:12px; background:#2B5B8C; border-radius:50%; } .lg-tick{ width:16px; border-top:2px dashed #96412B; height:0; }
.wk-conf-wrap{ margin:.4rem 0 1rem; }
.wk-conf{ height:10px; background:var(--paper-deep); border-radius:6px; overflow:hidden; max-width:420px; border:1px solid var(--line); }
.wk-conf i{ display:block; height:100%; width:50%; background:var(--wk-good); border-radius:6px; transition:width .6s ease; }
.wk-fc-grid{ display:flex; flex-direction:column; gap:var(--wk-gap); margin-top:.6rem; }
.wk-fc-right{ display:contents; }
.wk-fc-top{ order:1; } .wk-adj-panel{ order:2; } .wk-why-panel{ order:3; }
.wk-panel{ background:var(--wk-card); border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem 1rem; margin-top:var(--wk-gap); min-width:0; }
.wk-fc-grid .wk-panel{ margin-top:0; }
@media (min-width:980px){
  .wk-fc-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:start; }
  .wk-adj-panel{ order:0; }
  .wk-fc-right{ display:block; order:0; position:sticky; top:4.2rem; max-height:calc(100vh - 5rem); overflow:auto; overscroll-behavior:contain; padding:2px; }
  .wk-fc-top{ background:var(--paper); padding-bottom:.4rem; }
  .wk-why-panel{ margin-top:.4rem; }
  .wk-fcd{ padding:.5rem 0 .4rem; }
}
.wk-ph{ margin-bottom:.2rem !important; }
.wk-presets{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem; }
.wk-asls{ display:grid; gap:.3rem; }
.wk-afs{ border:0; border-top:1px dashed var(--line); padding:.6rem 0 .3rem; margin:.4rem 0 0; min-width:0; }
.wk-afs legend{ font-weight:600; padding:0 .3rem 0 0; }
.wk-hint{ margin:.1rem 0 .4rem !important; font-size:.92rem; color:var(--ink-soft); }
.wk-dchips{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.wk-dchip{ font:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:48px; min-width:44px; padding:2px; border:1px solid #8F8468; border-radius:10px; background:var(--wk-card); color:var(--ink); cursor:pointer; line-height:1.15; transition:background .25s, border-color .25s; }
.wk-dchip span{ font-weight:600; font-size:.9rem; } .wk-dchip small{ font-size:.8rem; color:var(--ink-soft); }
.wk-dchip[data-s="1"], .wk-dchip[aria-pressed="true"]{ background:var(--wk-blue-soft); border-color:var(--wk-blue); border-width:2px; }
.wk-dchip[data-s="2"]{ background:var(--wk-blue); border-color:var(--wk-blue); color:#fff; } .wk-dchip[data-s="2"] small{ color:#fff; }
.wk-why h4{ margin-bottom:.2rem; }
.wk-why-t{ width:100%; border-collapse:collapse; margin:.4rem 0 .6rem; }
.wk-why-t th, .wk-why-t td{ padding:.4rem .3rem; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; font-weight:400; }
.wk-why-t th span{ display:block; font-weight:600; font-size:.98rem; } .wk-why-t th small{ display:block; color:var(--ink-soft); font-size:.88rem; line-height:1.3; }
.wk-why-t td.bar{ width:22%; min-width:60px; } .wk-why-t td.bar i{ display:block; height:10px; border-radius:5px; margin-top:.5rem; transition:width .6s ease; }
.wk-why-t td.bar i.pos{ background:var(--wk-good); } .wk-why-t td.bar i.neg{ background:var(--wk-bad); }
.wk-why-t td.v{ text-align:right; font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.95rem; white-space:nowrap; width:3.6rem; }
.wk-why-t tr.chg, .wk-why-t tr.new{ animation:wk-flash 1.6s ease-out; }
@keyframes wk-flash{ from{ background:rgba(247,183,51,.45); } to{ background:transparent; } }
.wk-why-t tr.total th span, .wk-why-t tr.total td{ font-weight:700; }
.wk-det{ border-top:1px dashed var(--line); margin-top:.6rem; }
.wk-det summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; }
.wk-scroll{ overflow-x:auto; max-width:100%; }
.wk-matrix, .wk-math, .wk-cmp-t{ border-collapse:collapse; width:100%; font-size:.92rem; }
.wk-matrix th, .wk-matrix td, .wk-math th, .wk-math td, .wk-cmp-t th, .wk-cmp-t td{ border:1px solid var(--line); padding:.35rem .45rem; text-align:left; vertical-align:top; font-weight:400; }
.wk-matrix th[scope="row"], .wk-math th[scope="row"], .wk-cmp-t th[scope="row"]{ font-weight:600; }
.wk-matrix td{ text-align:right; font-family:"IBM Plex Mono", ui-monospace, monospace; }
.wk-matrix tr.total td, .wk-matrix tr.total th{ font-weight:700; background:var(--wk-soft); }
.wk-help-list{ list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:.6rem; }
.wk-help-list li{ display:flex; gap:.8rem; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:.6rem .8rem; border:1px solid var(--line); border-radius:10px; background:var(--wk-soft); }
.wk-help-list li.top{ border-color:var(--wk-good); border-width:2px; }
.wk-help-list div{ flex:1 1 14rem; } .wk-help-list strong{ display:block; } .wk-help-list span{ display:block; font-size:.95rem; color:var(--ink-soft); }
.wk-pin-row{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* forecast vs what happened */
.wk-vs{ background:var(--wk-card); border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem 1rem; margin:0 0 var(--wk-gap); }
.wk-vs-list{ list-style:none; padding:0; margin:.6rem 0; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.wk-vs-day{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:.4rem 0; border:1px solid var(--line); border-radius:10px; text-align:center; font-size:.8rem; background:var(--wk-soft); min-width:0; }
.wk-vs-day .wk-wd{ font-size:.82rem; }
.wk-vs-day small{ font-size:.75rem; color:var(--ink-soft); }
.wk-vs-f, .wk-vs-a{ display:flex; flex-direction:column; align-items:center; gap:1px; width:100%; }
.wk-vs-f > span:not(.wk-ico), .wk-vs-a > span:not(.wk-ico){ display:none; }
.wk-vs-day .wk-ico{ width:100%; max-width:34px; height:auto; }
.wk-vs-none{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:2px dashed var(--line); border-radius:50%; color:var(--ink-soft); }
.wk-vs-v{ font-size:.75rem; line-height:1.2; color:var(--ink-soft); padding:0 2px; }
.wk-vs-v.ok{ color:var(--wk-good); font-weight:700; } .wk-vs-v.off{ color:var(--wk-bad); font-weight:700; }
@media (min-width:700px){
  .wk-vs-day{ font-size:.9rem; padding:.6rem .2rem; } .wk-vs-day small{ font-size:.85rem; } .wk-vs-v{ font-size:.88rem; }
  .wk-vs-f > span:not(.wk-ico), .wk-vs-a > span:not(.wk-ico){ display:block; font-size:.85rem; line-height:1.15; }
  .wk-vs-day .wk-ico{ max-width:44px; }
}

/* saved weeks, compare */
.wk-saved{ list-style:none; padding:0; margin:0; display:grid; gap:var(--wk-gap); }
@media (min-width:900px){ .wk-saved{ grid-template-columns:1fr 1fr; } }
.wk-saved-item{ background:var(--wk-card); border:1px solid var(--line); border-radius:14px; padding:.8rem .9rem; min-width:0; }
.wk-saved-top h3{ margin:0 0 .1rem; } .wk-saved-s{ margin:.1rem 0 .4rem !important; font-size:.95rem; color:var(--ink-soft); }
.wk-mini{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:2px; margin:.3rem 0 .6rem; }
.wk-ico.sm{ width:100%; max-width:36px; height:auto; margin:0 auto; } .wk-mini .wk-ico-gap{ width:30px; height:30px; font-size:1rem; }
.wk-saved-actions{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.wk-cmp{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:0 .5rem; cursor:pointer; }
.wk-cmp input{ width:24px; height:24px; accent-color:var(--wk-blue); }
.wk-keep{ margin-top:.4rem; border-top:1px dashed var(--line); } .wk-keep summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; }
.wk-cmp-body{ margin-top:1.4rem; }
.wk-cmp-body h3{ margin-bottom:.5rem; }
.wk-cc{ display:flex; align-items:center; gap:.4rem; } .wk-cc .wk-ico, .wk-cc .wk-ico.sm{ width:32px; height:32px; flex:none; margin:0; } .wk-cc span{ font-size:.9rem; }
.wk-cmp-t tr.sub th{ background:var(--wk-soft); font-weight:700; }
.wk-cmp-t{ margin:.6rem 0; }

/* reminder */
.wk-rm{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-end; }
.wk-rm label{ display:flex; flex-direction:column; gap:.2rem; font-size:.95rem; font-weight:600; }

/* toast */
.wk-toast{ position:fixed; left:50%; bottom:1rem; transform:translate(-50%, 140%); max-width:min(92vw, 520px); background:var(--ink); color:var(--paper); padding:.7rem 1rem; border-radius:12px; font-size:.98rem; z-index:50; opacity:0; transition:transform .35s ease, opacity .35s ease; pointer-events:none; }
.wk-toast.is-on{ transform:translate(-50%, 0); opacity:1; }

/* calm mode and reduced motion: still pictures, no ambient movement */
@media (prefers-reduced-motion: reduce){
  .wk *, .wk *::before, .wk *::after{ animation:none !important; transition:none !important; }
  .wk-strip .wk-col, .wk-dot{ opacity:1 !important; }
  .wk-line{ stroke-dasharray:none; stroke-dashoffset:0; }
  .wk-cl{ translate:30% 0; }
}
.wk-still *, .wk-still *::before, .wk-still *::after{ animation:none !important; transition:none !important; }
.wk-still .wk-strip .wk-col, .wk-still .wk-dot{ opacity:1 !important; }
.wk-still .wk-line{ stroke-dasharray:none; stroke-dashoffset:0; }
html.tol-still .wk *, html.tol-still .wk *::before, html.tol-still .wk *::after{ animation:none !important; transition:none !important; }
html.tol-still .wk .wk-strip .wk-col, html.tol-still .wk .wk-dot{ opacity:1 !important; }
html.tol-still .wk .wk-line{ stroke-dasharray:none; stroke-dashoffset:0; }

/* narrow screens: keep the strips tight */
@media (max-width:420px){
  main.wk{ padding-left:14px; padding-right:14px; }
  .wk-track{ width:22px; }
  .wk-pick{ min-width:0; }
  .wk-delta{ font-size:.78rem; }
}

/* print: only the week report */
.wk-print{ display:none; }
@media print{
  body.wk-printing > *:not(main){ display:none !important; }
  body.wk-printing main.wk > *:not(.wk-print){ display:none !important; }
  body.wk-printing .wk-print{ display:block !important; font-family:Georgia, serif; color:#000; }
  body.wk-printing .wk-print table{ width:100%; border-collapse:collapse; }
  body.wk-printing .wk-print th, body.wk-printing .wk-print td{ border:1px solid #999; padding:6px 8px; text-align:left; vertical-align:middle; }
  body.wk-printing .wk-print .wk-ico{ width:34px; height:34px; }
  body.wk-printing .wk-print td.pi{ width:44px; }
  body.wk-printing{ background:#fff; }
}