/* ================= MK-GANTT (round 3, 2026-10-09) =================
   One real-world object = one base (DESIGN-PRINCIPLES §13): the project plan. Base = the Shopify #gantt (interactive: draw-in, "this week" line,
   scrub, tap a phase, Replay). Loaded after site.css on the pages that use it; behaviour in js/mk-gantt.js (auto-initialises every .mk-gantt).
   Markup:  .mk-gantt[style="--cols:N"] > .wbar? + .mk-g-head(.label + .mk-g-cols>i×N) + .mk-g-rows(.mk-g-row(span + b[--s,--e]) …, i.mk-g-now) + .mk-g-foot
   Options: --cols (columns, default 8) · .static (no scrub, replay, now-line or foot; bars shown at once; labels may carry a <small>) · .plain (no phase dots)
            · data-phone="hide" (the page shows something else on phones) · data-unit="Week" (foot counter) · --lw (label column) · --mk-g-line (grid-line step, default 100%/cols)
   Row: span = phase name (+ <small>), b = bar from column --s to --e, b.soft = dashed (ongoing), b.dia = report markers (<i> per column), data-d = sentence in the foot.
   Phase dot colour = --sc on the row (default grey). Rules replace site.css .gantt / .g-* and the .sh-g page block (left in place until the design lead removes them). */
.mk-gantt{--cols:8;--lw:11rem;border:1px solid var(--line);background:var(--plane);margin-block:clamp(1.5rem,4vh,2.5rem);display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:var(--r-lg)}
.mk-gantt .wbar{border-bottom:1px solid var(--line)}
.mk-g-head{display:grid;grid-template-columns:var(--lw) 1fr;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.mk-g-cols{display:grid;grid-template-columns:repeat(var(--cols),1fr);font:500 .6875rem var(--body);color:var(--muted)}
.mk-g-cols i{font-style:normal;border-left:1px solid var(--line);padding-left:.375rem;transition:color var(--fast)}
.mk-g-cols i.on{color:var(--accent)}
.mk-g-rows{flex:none;display:flex;flex-direction:column;min-height:0;position:relative;cursor:ew-resize}
.mk-g-rows::before{content:"";position:absolute;top:0;bottom:0;left:calc(1rem + var(--lw));right:1rem;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:var(--mk-g-line,calc(100% / var(--cols))) 100%;pointer-events:none}
.mk-g-row{flex:none;height:2.25rem;min-height:1.5rem;display:grid;grid-template-columns:var(--lw) 1fr;align-items:center;padding:0 1rem;position:relative;cursor:default;transition:background var(--fast),opacity var(--fast)}
.mk-g-row>span{grid-column:1;grid-row:1;font:500 .8125rem var(--body);color:var(--muted);cursor:pointer;transition:color var(--fast)}
.mk-g-row>span::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:1px;background:var(--sc,var(--line-strong));margin-right:.5rem;vertical-align:.05em}
.mk-g-row>span:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.mk-g-row>span small{display:block;color:var(--muted);font-weight:400;font-size:.75rem;padding-left:1rem}
.mk-g-row>b{display:block;grid-column:2;grid-row:1;position:relative;height:clamp(.5rem,1.4vh,.875rem);margin-left:calc(var(--s) * 100% / var(--cols));width:calc((var(--e) - var(--s)) * 100% / var(--cols));
  overflow:hidden;background:color-mix(in srgb,var(--accent-2) 55%,transparent);transform-origin:left;transform:scaleX(0);transition:transform 700ms var(--ease) calc(var(--i,0) * 90ms)}
.mk-g-row>b::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}
.mk-g-row>b.soft{border:1px dashed var(--accent)}
.mk-g-row>b.soft::after{background:color-mix(in srgb,var(--accent) 35%,transparent)}
@media (prefers-reduced-motion:no-preference){.mk-gantt:not(.in) .mk-g-row>b{transform:scaleX(.15)}}
.mk-gantt.in .mk-g-row>b{transform:scaleX(1)}
.mk-gantt.live .mk-g-row{opacity:.38}
.mk-gantt.live .mk-g-row.on,.mk-g-row.pin{opacity:1;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.mk-g-row.on>span,.mk-g-row.pin>span{color:var(--accent)}
.mk-g-row.on>b,.mk-g-row.pin>b{outline:1px solid var(--accent);outline-offset:2px}
.mk-g-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* "this week" line */
.mk-g-now{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);left:calc(1rem + var(--lw) + (100% - 2rem - var(--lw)) * var(--t,0) / var(--cols));opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
.mk-g-now::before{content:"This week";position:absolute;top:-1.375rem;left:50%;translate:-50% 0;font:600 .625rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);white-space:nowrap}
.mk-gantt.run .mk-g-now{opacity:1}
.mk-gantt.end .mk-g-now::before{left:auto;right:6px;translate:none}
/* foot: week counter, the sentence for the phase under the line, hint, replay */
.mk-g-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.625rem 1rem;border-top:1px solid var(--line);font:500 .6875rem var(--body);color:var(--muted)}
.mk-g-say{margin:0;flex:1;color:var(--text);font:400 .875rem var(--body)}
.mk-g-say b{font:600 .6875rem var(--body);color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-right:.5rem}
.mk-g-hint{font:500 .6875rem var(--body);color:var(--muted)}
.mk-g-replay{font:600 .6875rem var(--body);text-transform:uppercase;letter-spacing:.08em;background:none;border:1px solid var(--line-strong);color:var(--text);padding:.375rem .625rem;cursor:pointer;border-radius:var(--r-sm)}
.mk-g-replay:hover{background:var(--text);color:var(--ink)}

/* STATIC: the plan as a picture (SEO months, Social fortnights). No scrub, no foot; bars shown at once; labels carry a one-line description */
.mk-gantt.static{--lw:14rem}
.mk-gantt.static .mk-g-rows{cursor:default}
.mk-gantt.static .mk-g-row{height:auto;min-height:3.25rem;padding-block:.375rem}
.mk-gantt.static .mk-g-row>span{cursor:default}
.mk-gantt.static .mk-g-row>span:hover{color:var(--muted);text-decoration:none}
.mk-gantt.static .mk-g-row>b{transform:none;transition:none;background:color-mix(in srgb,var(--accent) 70%,var(--plane-2))}
.mk-gantt.static .mk-g-row>b::after{display:none}
.mk-gantt.static .mk-g-row>b.hl{background:var(--accent)}
.mk-gantt.static .mk-g-row>b.dia{display:flex;justify-content:space-around;align-items:center;background:none;overflow:visible;height:auto}
.mk-gantt.static .mk-g-row>b.dia i{width:.5rem;height:.5rem;rotate:45deg;background:var(--ok)}
.mk-gantt.plain .mk-g-row>span::before{display:none}.mk-gantt.plain .mk-g-row>span small{padding-left:0}
.mk-gantt.static .mk-g-head .label{white-space:nowrap}

@media (max-width:1000px){
 .mk-gantt{--lw:8rem}.mk-gantt.static{--lw:12rem}
}
@media (max-width:760px){
 .mk-gantt[data-phone="hide"]{display:none}
 /* data-phone="stack" (2026-10-12): the interactive plan kept on phones. Each phase = its name, then its bar under it across the full week grid;
    rows ≥44px and a tap anywhere on a row picks it; a sideways drag over the bars scrubs the weeks (vertical swipes still scroll the page);
    the foot puts the phase sentence first, then the week counter and Replay (the desktop hint goes) */
 .mk-gantt[data-phone="stack"]{--lw:0px;--mk-g-line:calc(100% / var(--cols))!important} /* grid lines = the week columns above them */
 .mk-gantt[data-phone="stack"] .mk-g-now::before{display:none} /* "This week" would sit on the week numbers: the number lights up and the foot counts the week */
 .mk-gantt[data-phone="stack"] .mk-g-head{grid-template-columns:1fr;row-gap:.625rem;padding:.75rem 1rem .5rem}
 .mk-gantt[data-phone="stack"] .mk-g-cols{font-size:12px}
 .mk-gantt[data-phone="stack"] .mk-g-rows{touch-action:pan-y}
 .mk-gantt[data-phone="stack"] .mk-g-row{height:auto;min-height:44px;grid-template-columns:1fr;row-gap:.375rem;align-content:center;padding-block:.4375rem;cursor:pointer}
 .mk-gantt[data-phone="stack"] .mk-g-row>span{grid-row:1;font-size:13px;line-height:1.2}
 .mk-gantt[data-phone="stack"] .mk-g-row>b{grid-column:1;grid-row:2;height:.5rem;border-radius:1px}
 .mk-gantt[data-phone="stack"] .mk-g-foot{flex-wrap:wrap;row-gap:.5rem;padding:.75rem 1rem}
 .mk-gantt[data-phone="stack"] .mk-g-say{order:-1;flex-basis:100%;font-size:15px;line-height:1.45;min-height:4.35em}
 .mk-gantt[data-phone="stack"] .mk-g-say b{display:block;font-size:12px;margin:0 0 .25rem}
 .mk-gantt[data-phone="stack"] .mk-g-hint{display:none}
 .mk-gantt[data-phone="stack"] .mk-g-wk{font-size:12px}
 .mk-gantt[data-phone="stack"] .mk-g-replay{font-size:12px;min-height:44px;padding-inline:.875rem}
 .mk-gantt.static{overflow-x:auto}.mk-gantt.static .mk-g-head,.mk-gantt.static .mk-g-rows{min-width:40rem}
 /* static + data-phone="stack" (2026-10-12, SEO six months, Social 90 days): the plan as a picture at phone width, no sideways scroll.
    Same stack as above (name over its bar on the column grid); nothing to tap, so rows are compact and the one-line descriptions go */
 .mk-gantt.static[data-phone="stack"]{overflow-x:visible}
 .mk-gantt.static[data-phone="stack"] :is(.mk-g-head,.mk-g-rows){min-width:0}
 .mk-gantt.static[data-phone="stack"] .mk-g-rows{padding-block:.25rem}
 .mk-gantt.static[data-phone="stack"] .mk-g-row{min-height:0;cursor:default;padding-block:.5rem}
 .mk-gantt.static[data-phone="stack"] .mk-g-row>span{font-size:14px;color:var(--text)}
 .mk-gantt.static[data-phone="stack"] .mk-g-row>span small{display:none}
 .mk-gantt.static[data-phone="stack"] .mk-g-row>b.dia{height:.5rem}
 .mk-gantt.static[data-phone="stack"] .mk-g-cols i{padding-left:.3125rem;white-space:nowrap}
}