/* MindFold OS Design System 0.5.0: components.css. Needs tokens.css first. */
/* Pinned copy for IP OS: MindFold OS 0.5.0, commit fd2b864 (DrDriftwood/mindfold-os-design-system). Only change: the Google Fonts @import is removed; fonts load from fonts.css (the copied fonts/ folder). */

/* MindFold OS components. Uses tokens.css (--mf-*). No literal colours. */
.mf{font:400 var(--mf-text-emphasis)/var(--mf-leading-emphasis) var(--mf-font-sans);color:var(--mf-ink);background:var(--mf-surface-0)}
.mf *{box-sizing:border-box}
.mf :focus-visible{outline:var(--mf-focus-width-web) solid var(--mf-focus);outline-offset:var(--mf-focus-gap)}
.mf-label{font:500 var(--mf-text-caption)/var(--mf-leading-caption) var(--mf-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mf-ink-muted)}
.mf-muted{color:var(--mf-ink-muted)}
.mf-row-gap{display:flex;flex-wrap:wrap;gap:var(--mf-form-label);align-items:center}
/* pills */
.mf-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--mf-pill-tall);padding:0 var(--mf-space-20);border:0;border-radius:var(--mf-radius-pill);background:var(--mf-surface-2);color:var(--mf-ink);font:400 var(--mf-text-emphasis)/var(--mf-leading-emphasis) var(--mf-font-sans);cursor:pointer}
.mf-pill.is-primary{background:var(--mf-action);color:var(--mf-on-action);font-weight:600}
.mf-pill.is-small{min-height:var(--mf-pill-short);padding:0 var(--mf-space-10);font:500 var(--mf-text-caption)/var(--mf-leading-caption) var(--mf-font-sans)}
.mf-on-soft .mf-pill.is-small{background:var(--mf-surface-0)}
.mf-pill:disabled{opacity:.45;cursor:default}
.mf-pill .mf-key{font:400 var(--mf-text-caption)/1 var(--mf-font-mono);opacity:.7}
/* chips */
.mf-chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--mf-pill-short);padding:0 12px;border:1px solid transparent;border-radius:var(--mf-radius-pill);background:var(--mf-surface-2);color:var(--mf-ink);font:400 var(--mf-text-body)/var(--mf-leading-body) var(--mf-font-sans);cursor:pointer}
.mf-chip[data-state="chosen"]{background:var(--mf-action);color:var(--mf-on-action);font-weight:500}
.mf-chip[data-state="chosen"]::before{content:"";width:9px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-1px)}
.mf-chip[data-state="suggested"]{background:var(--mf-surface-0);box-shadow:inset 0 0 0 var(--mf-suggest-ring) var(--mf-ink)}
.mf-chip[data-state="suggested"] .mf-tag{font:500 var(--mf-text-caption)/1 var(--mf-font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mf-ink-muted)}
.mf-chip[data-state="detail"]{background:transparent;border:1px dashed var(--mf-ink-muted)}
.mf-chip[data-state="crossed"]{text-decoration:line-through;color:var(--mf-ink-muted)}
/* toast */
.mf-toast-strip{min-height:52px;display:flex;align-items:center;justify-content:center;padding-block:var(--mf-space-10)}
.mf-toast{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--mf-radius-pill);background:var(--mf-action);color:var(--mf-on-action);font:400 var(--mf-text-body)/var(--mf-leading-body) var(--mf-font-sans)}
.mf-toast button{background:none;border:0;color:inherit;font:600 var(--mf-text-body)/1 var(--mf-font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.mf-toast .mf-sep{opacity:.6}
/* sheet and dialog */
.mf-sheet{width:100%;max-width:520px;background:var(--mf-surface-0);border-radius:var(--mf-radius-panel-lg);box-shadow:inset 0 0 0 1px var(--mf-line);padding:var(--mf-space-20) 24px 24px;display:flex;flex-direction:column;gap:var(--mf-space-20)}
.mf-sheet h3{margin:0;font:600 var(--mf-text-display)/var(--mf-leading-display) var(--mf-font-sans)}
.mf-sheet .mf-note{margin:0;color:var(--mf-ink-muted)}
.mf-opts{display:flex;flex-direction:column}
.mf-opt{display:flex;align-items:center;gap:var(--mf-space-10);padding:14px 0;border-top:1px solid var(--mf-line);background:none;border-left:0;border-right:0;border-bottom:0;color:var(--mf-ink);text-align:left;font:inherit;width:100%;cursor:pointer}
.mf-opt:last-child{border-bottom:1px solid var(--mf-line)}
.mf-opt span.mf-sub{display:block;font-size:var(--mf-text-body);color:var(--mf-ink-muted)}
.mf-btnrow{display:flex;gap:var(--mf-form-label);justify-content:flex-end;flex-wrap:wrap}
/* rows */
.mf-rows{display:flex;flex-direction:column;padding-block:var(--mf-list-inset)}
.mf-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--mf-space-20);padding:12px 0;border-top:1px solid var(--mf-line);align-items:baseline}
.mf-row .mf-title{font:400 var(--mf-text-emphasis)/var(--mf-leading-emphasis) var(--mf-font-sans);overflow-wrap:anywhere}
.mf-row .mf-detail{grid-column:1;font-size:var(--mf-text-body);line-height:var(--mf-leading-body);color:var(--mf-ink-muted)}
.mf-row .mf-code{font:400 var(--mf-text-caption)/1 var(--mf-font-mono);color:var(--mf-ink-muted);margin-left:6px}
.mf-row.is-current{background:var(--mf-surface-1);box-shadow:inset 0 0 0 var(--mf-focus-width-web) var(--mf-focus);border-radius:var(--mf-radius-field);padding-inline:10px;border-top-color:transparent}
.mf-row.is-done .mf-title{text-decoration:line-through;color:var(--mf-ink-muted)}
.mf-due{display:inline-flex;align-items:center;gap:6px;font:400 var(--mf-text-caption)/1 var(--mf-font-mono);color:var(--mf-ink-muted);white-space:nowrap}
.mf-dot{width:6px;height:6px;border-radius:50%;background:var(--mf-needs-decision);display:inline-block}
.mf-word{font:500 var(--mf-text-caption)/1 var(--mf-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mf-ink-muted)}
.mf-word.is-need{color:var(--mf-needs-decision)}
/* coverage key */
.mf-covkey{display:flex;flex-wrap:wrap;gap:6px var(--mf-space-20);font-size:var(--mf-text-body);line-height:var(--mf-leading-body);color:var(--mf-ink-muted)}
.mf-covkey span{display:inline-flex;align-items:center;gap:8px}
.mf-covkey i{width:12px;height:12px;border-radius:3px;display:inline-block}
.mf-sq-miss{background:var(--mf-needs-decision)} .mf-sq-sug{box-shadow:inset 0 0 0 1.5px var(--mf-needs-decision)} .mf-sq-has{background:var(--mf-ink)} .mf-sq-amb{border-radius:50%!important;width:8px!important;height:8px!important;background:var(--mf-ink)}
/* progress */
.mf-progress{display:flex;align-items:center;gap:var(--mf-space-10)}
.mf-progress svg{flex:none}
.mf-progress .mf-ring-track{stroke:var(--mf-line)} .mf-progress .mf-ring-fill{stroke:var(--mf-ink)}
.mf-progress b{display:block;font:600 var(--mf-text-emphasis)/var(--mf-leading-emphasis) var(--mf-font-sans)}
.mf-progress span{font-size:var(--mf-text-body);line-height:var(--mf-leading-body);color:var(--mf-ink-muted)}
/* form fields */
.mf-form{display:flex;flex-direction:column;gap:var(--mf-space-20);max-width:420px}
.mf-field{display:flex;flex-direction:column}
.mf-field .mf-label{margin-bottom:var(--mf-form-label);display:flex;gap:8px;align-items:baseline}
.mf-input{width:100%;border:1px solid var(--mf-line);border-radius:var(--mf-radius-field);background:var(--mf-surface-0);color:var(--mf-ink);padding:8px 10px;font:400 var(--mf-text-input-web)/22px var(--mf-font-sans)}
.mf-input:focus-visible{outline:var(--mf-focus-width-web) solid var(--mf-focus);outline-offset:0}
.mf-hint{margin-top:var(--mf-form-hint);font-size:var(--mf-text-caption);line-height:var(--mf-leading-caption);color:var(--mf-ink-muted)}
.mf-feedback{margin-top:var(--mf-form-hint);font-size:var(--mf-text-caption);line-height:var(--mf-leading-caption);color:var(--mf-ink)}
.mf-check{display:inline-flex;gap:var(--mf-form-label);align-items:center;cursor:pointer;font-size:var(--mf-text-emphasis)}
.mf-check input{width:var(--mf-check-web);height:var(--mf-check-web);accent-color:var(--mf-action);margin:0}
.mf-switch{display:inline-flex;align-items:center;gap:var(--mf-form-label);cursor:pointer;border:0;background:none;color:var(--mf-ink);font:inherit;padding:0}
.mf-switch i{width:30px;height:18px;border-radius:999px;background:var(--mf-line);position:relative;display:inline-block}
.mf-switch i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--mf-surface-0)}
.mf-switch[aria-checked="true"] i{background:var(--mf-action)} .mf-switch[aria-checked="true"] i::after{left:14px}
/* search pill */
.mf-search{display:flex;align-items:center;gap:8px;background:var(--mf-surface-1);border-radius:var(--mf-radius-pill);padding:9px 16px;max-width:520px}
.mf-search input{border:0;background:transparent;outline:none;width:100%;min-width:0;color:var(--mf-ink);font:400 var(--mf-text-input-web)/22px var(--mf-font-sans)}
.mf-search:focus-within{box-shadow:0 0 0 var(--mf-focus-width-web) var(--mf-focus)}
.mf-search svg{flex:none;opacity:.6}
/* overlay scroller */
.mf-scrollbox{position:relative;max-width:420px}
.mf-scroll{max-height:220px;overflow:auto;padding-block:var(--mf-list-inset);scrollbar-width:thin;scrollbar-color:var(--mf-ink-muted) transparent;padding-right:var(--mf-scroller-clear)}
.mf-scroll::-webkit-scrollbar{width:var(--mf-scroller)} .mf-scroll::-webkit-scrollbar-track{background:transparent} .mf-scroll::-webkit-scrollbar-thumb{background:var(--mf-ink-muted);border-radius:3px}
.mf-fade{position:absolute;left:0;right:var(--mf-scroller-clear);bottom:0;height:var(--mf-list-fade);background:linear-gradient(to bottom, transparent, var(--mf-surface-0));pointer-events:none}
.mf-capture{color:var(--mf-ink-muted)}
/* empty state */
.mf-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--mf-form-label);padding:var(--mf-space-40) var(--mf-space-20)}
.mf-empty h4{margin:0;font:600 var(--mf-text-heading)/var(--mf-leading-heading) var(--mf-font-sans)}
.mf-empty p{margin:0;font-size:var(--mf-text-body);line-height:var(--mf-leading-body);color:var(--mf-ink-muted);max-width:40ch}
.mf-empty .mf-row-gap{margin-top:var(--mf-space-10);justify-content:center}
/* tabs */
.mf-tabs{display:flex;flex-wrap:wrap;gap:var(--mf-space-10) var(--mf-space-20)}
.mf-tab{position:relative;background:none;border:0;padding:4px 0;color:var(--mf-ink-muted);font:500 var(--mf-text-emphasis)/var(--mf-leading-emphasis) var(--mf-font-sans);cursor:pointer}
.mf-tab[aria-selected="true"]{color:var(--mf-ink)}
.mf-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:var(--mf-underline-tab);border-radius:1px;background:var(--mf-ink)}
.mf-tab .mf-tn{margin-left:5px;font:400 var(--mf-text-caption)/1 var(--mf-font-mono);color:var(--mf-ink-muted)}
/* choice tabs: a few separate ways to do one job; each card is its own action (0.5.0) */
.mf-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--mf-space-10)}
.mf-choice{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:center;text-align:left;min-height:72px;padding:14px 16px;border:0;border-radius:var(--mf-radius-panel);background:var(--mf-surface-1);box-shadow:inset 0 0 0 1px var(--mf-line);color:var(--mf-ink-muted);cursor:pointer;font:inherit}
.mf-choice:hover{color:var(--mf-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mf-ink) 30%,transparent)}
.mf-choice-icon{grid-row:1 / span 2;display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:var(--mf-radius-tile);background:var(--mf-surface-0)}
.mf-choice-title{font:600 var(--mf-text-emphasis)/var(--mf-leading-emphasis) var(--mf-font-sans);color:var(--mf-ink)}
.mf-choice-desc{font:400 var(--mf-text-caption)/var(--mf-leading-caption) var(--mf-font-sans)}
.mf-choice[aria-selected="true"]{background:var(--mf-surface-0);color:var(--mf-ink);box-shadow:inset 0 0 0 2px var(--mf-ink)}
.mf-choice[aria-selected="true"] .mf-choice-icon{background:var(--mf-action);color:var(--mf-on-action)}
.mf-choice:focus:not(:focus-visible){outline:none}
.mf-choice-panel{margin-top:var(--mf-space-10);padding:var(--mf-space-20);border-radius:var(--mf-radius-panel-lg);background:var(--mf-surface-0);box-shadow:inset 0 0 0 1px var(--mf-line)}
/* stat */
.mf-stats{display:flex;flex-wrap:wrap;gap:var(--mf-space-20) var(--mf-space-60)}
.mf-stat b{display:block;font:600 var(--mf-text-display)/var(--mf-leading-display) var(--mf-font-sans);font-variant-numeric:tabular-nums}
.mf-stat span{font-size:var(--mf-text-body);line-height:var(--mf-leading-body);color:var(--mf-ink-muted)}
.mf-stat.is-need b{color:var(--mf-needs-decision)}
/* theme pair wrapper used by previews and the gallery */
.mf-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.mf-pair > section{padding:var(--mf-space-20);background:var(--mf-surface-0);color:var(--mf-ink);min-width:0;display:flex;flex-direction:column;gap:var(--mf-space-20)}
.mf-pair .mf-theme-name{font:500 var(--mf-text-caption)/1 var(--mf-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mf-ink-muted)}
@media (max-width:640px){.mf-pair{grid-template-columns:minmax(0,1fr)}}

/* ===== feel: picked in the MindFold Feel Lab (docs/feel.md) ===== */
:root{--mf-spring:linear(0.0000 0.0%, 0.0293 3.1%, 0.0989 6.2%, 0.1885 9.4%, 0.2851 12.5%, 0.3806 15.6%, 0.4702 18.8%, 0.5517 21.9%, 0.6238 25.0%, 0.6867 28.1%, 0.7406 31.2%, 0.7864 34.4%, 0.8249 37.5%, 0.8570 40.6%, 0.8837 43.8%, 0.9056 46.9%, 0.9237 50.0%, 0.9385 53.1%, 0.9505 56.2%, 0.9602 59.4%, 0.9681 62.5%, 0.9745 65.6%, 0.9796 68.8%, 0.9837 71.9%, 0.9871 75.0%, 0.9897 78.1%, 0.9918 81.2%, 0.9935 84.4%, 0.9949 87.5%, 0.9959 90.6%, 0.9968 93.8%, 0.9974 96.9%, 1.0000 100.0%);--mf-spring-ms:740ms;--mf-spring-press:linear(0.0000 0.0%, 0.0300 3.1%, 0.1012 6.2%, 0.1924 9.4%, 0.2903 12.5%, 0.3868 15.6%, 0.4772 18.8%, 0.5589 21.9%, 0.6311 25.0%, 0.6937 28.1%, 0.7472 31.2%, 0.7925 34.4%, 0.8305 37.5%, 0.8621 40.6%, 0.8882 43.8%, 0.9096 46.9%, 0.9271 50.0%, 0.9414 53.1%, 0.9530 56.2%, 0.9624 59.4%, 0.9700 62.5%, 0.9761 65.6%, 0.9809 68.8%, 0.9849 71.9%, 0.9880 75.0%, 0.9905 78.1%, 0.9925 81.2%, 0.9940 84.4%, 0.9953 87.5%, 0.9963 90.6%, 0.9971 93.8%, 0.9977 96.9%, 1.0000 100.0%);--mf-spring-press-ms:300ms;--mf-press-scale:0.97;--mf-press-ink:8%;--mf-hover-ink:4%}
.mf-pill,.mf-chip,.mf-tab,.mf-row,.mf-toast button,.mf-opt{transition:transform var(--mf-spring-press-ms) var(--mf-spring-press),box-shadow 120ms ease-out,background-color 120ms ease-out}
.mf-pill:hover:not(:disabled),.mf-chip:hover{box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--mf-ink) var(--mf-hover-ink),transparent)}
.mf-pill.is-primary:hover:not(:disabled){box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--mf-on-action) 6%,transparent)}
.mf-row:hover,.mf-opt:hover{background-color:var(--mf-surface-1)}
.mf-pill:active:not(:disabled),.mf-chip:active,.mf-tab:active,.mf-toast button:active,.mf-opt:active{transform:scale(var(--mf-press-scale));transition:transform 60ms ease-out,box-shadow 0ms}
.mf-pill:active:not(:disabled):not(.is-primary),.mf-chip:active,.mf-row:active,.mf-opt:active{box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--mf-ink) var(--mf-press-ink),transparent)}
.mf-pill.is-primary:active:not(:disabled){box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--mf-on-action) 13%,transparent)}
@media (prefers-reduced-motion: reduce){.mf-pill,.mf-chip,.mf-tab,.mf-row,.mf-toast button,.mf-opt{transition:none}.mf-pill:active:not(:disabled),.mf-chip:active,.mf-tab:active,.mf-toast button:active,.mf-opt:active{transform:none}}

/* status: [data-status] sets the family; chip, stat, dot and bar read it */
[data-status="attention"]{--mf-st:var(--mf-status-attention);--mf-st-fill:var(--mf-status-attention-fill);--mf-st-dot:var(--mf-status-attention-dot);--mf-st-ink:var(--mf-status-attention-ink)}
[data-status="blocked"]{--mf-st:var(--mf-status-blocked);--mf-st-fill:var(--mf-status-blocked-fill);--mf-st-dot:var(--mf-status-blocked-dot);--mf-st-ink:var(--mf-status-blocked-ink)}
[data-status="waiting"]{--mf-st:var(--mf-status-waiting);--mf-st-fill:var(--mf-status-waiting-fill);--mf-st-dot:var(--mf-status-waiting-dot);--mf-st-ink:var(--mf-status-waiting-ink)}
[data-status="working"]{--mf-st:var(--mf-status-working);--mf-st-fill:var(--mf-status-working-fill);--mf-st-dot:var(--mf-status-working-dot);--mf-st-ink:var(--mf-status-working-ink)}
[data-status="ready"]{--mf-st:var(--mf-status-ready);--mf-st-fill:var(--mf-status-ready-fill);--mf-st-dot:var(--mf-status-ready-dot);--mf-st-ink:var(--mf-status-ready-ink)}
[data-status="active"]{--mf-st:var(--mf-status-active);--mf-st-fill:var(--mf-status-active-fill);--mf-st-dot:var(--mf-status-active-dot);--mf-st-ink:var(--mf-status-active-ink)}
[data-status="answered"]{--mf-st:var(--mf-status-answered);--mf-st-fill:var(--mf-status-answered-fill);--mf-st-dot:var(--mf-status-answered-dot);--mf-st-ink:var(--mf-status-answered-ink)}
[data-status="won"]{--mf-st:var(--mf-status-won);--mf-st-fill:var(--mf-status-won-fill);--mf-st-dot:var(--mf-status-won-dot);--mf-st-ink:var(--mf-status-won-ink)}
[data-status="priority"]{--mf-st:var(--mf-status-priority);--mf-st-fill:var(--mf-status-priority-fill);--mf-st-dot:var(--mf-status-priority-dot);--mf-st-ink:var(--mf-status-priority-ink)}
[data-status="neutral"]{--mf-st:var(--mf-status-neutral);--mf-st-fill:var(--mf-status-neutral-fill);--mf-st-dot:var(--mf-status-neutral-dot);--mf-st-ink:var(--mf-status-neutral-ink)}
.mf-status{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:var(--mf-radius-pill);background:var(--mf-st-fill,var(--mf-status-neutral-fill));color:var(--mf-st,var(--mf-status-neutral));font:500 var(--mf-text-body)/var(--mf-leading-body) var(--mf-font-sans);white-space:nowrap;width:max-content;max-width:100%}
.mf-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mf-st-dot,var(--mf-status-neutral-dot));flex:none}
.mf-stat[data-status] b{color:var(--mf-st-ink)}
.mf-stat[data-status] span{display:inline-flex;align-items:center;gap:6px}
.mf-stat[data-status] span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mf-st-dot);flex:none}
.mf-dot[data-status]{background:var(--mf-st-dot)}
.mf-bar{display:block;height:12px;border-radius:var(--mf-radius-pill);background:var(--mf-surface-1);overflow:hidden}
.mf-bar > i{display:block;height:100%;border-radius:var(--mf-radius-pill);background:var(--mf-st-dot,var(--mf-ink))}

/* ---- screens: app shell (web, the IP OS layout) ---- */
.mf-screen{background:var(--mf-surface-0);color:var(--mf-ink);font:400 var(--mf-text-emphasis)/var(--mf-leading-emphasis) var(--mf-font-sans)}
.mf-shell{padding:0 var(--mf-space-20) var(--mf-space-40)}
.mf-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px) minmax(0,1fr);align-items:center;gap:16px;padding-block:14px}
.mf-top-l,.mf-top-r{display:flex;align-items:center;gap:var(--mf-space-20);min-width:0}
.mf-top-r{justify-content:flex-end;gap:12px}
.mf-wordmark{font:600 var(--mf-text-body)/1 var(--mf-font-sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.mf-proj{display:inline-flex;align-items:center;gap:8px;min-height:var(--mf-pill-tall);padding:0 14px;border:0;border-radius:var(--mf-radius-pill);background:var(--mf-surface-2);color:var(--mf-ink);font:500 var(--mf-text-emphasis)/var(--mf-leading-emphasis) var(--mf-font-sans);cursor:pointer;white-space:nowrap}
.mf-proj svg{opacity:.6}
.mf-status{font-size:var(--mf-text-body);line-height:var(--mf-leading-body);color:var(--mf-ink-muted);white-space:nowrap}
.mf-mods{display:flex;flex-wrap:wrap;gap:6px var(--mf-space-20);padding-bottom:10px;border-bottom:1px solid var(--mf-line)}
.mf-mods .mf-tab{text-decoration:none;display:inline-flex;align-items:baseline}
.mf-mods .mf-tab[aria-current="page"]{color:var(--mf-ink)}
.mf-mods .mf-tab[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:var(--mf-underline-tab);border-radius:1px;background:var(--mf-ink)}
.mf-nx{margin-left:6px;font:500 var(--mf-text-caption)/var(--mf-leading-caption) var(--mf-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mf-ink-muted)}
.mf-lede{padding:var(--mf-space-40) 0 var(--mf-space-30)}
.mf-lede h1{margin:0;font:600 var(--mf-text-display)/var(--mf-leading-display) var(--mf-font-sans)}
.mf-lede p{margin:6px 0 0;color:var(--mf-ink-muted);max-width:70ch}
.mf-sec{padding-bottom:var(--mf-space-40)}
.mf-sec > h2{margin:0 0 var(--mf-space-20);display:flex;gap:10px;align-items:baseline;font:500 var(--mf-text-caption)/var(--mf-leading-caption) var(--mf-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mf-ink-muted)}
.mf-sec > h2 .mf-tn{letter-spacing:0}
.mf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--mf-space-30) var(--mf-space-20);align-items:start}
.mf-tile{margin:0;min-width:0}
.mf-ph{display:block;aspect-ratio:4/5;border-radius:var(--mf-radius-tile);background:var(--mf-surface-1);box-shadow:var(--mf-elevation-1);overflow:hidden}
.mf-ph svg{display:block;width:100%;height:100%}
.mf-ph .mf-ph-a{fill:var(--mf-surface-0)} .mf-ph .mf-ph-b{fill:var(--mf-line)}
.mf-tile.is-picked .mf-ph{box-shadow:0 0 0 3px var(--mf-ink),var(--mf-elevation-1)}
.mf-tile figcaption{margin-top:var(--mf-space-10);font-size:var(--mf-text-body);line-height:var(--mf-leading-body)}
.mf-tile figcaption .mf-code{display:block;font:400 var(--mf-text-caption)/var(--mf-leading-caption) var(--mf-font-mono);color:var(--mf-ink-muted);margin-top:2px}
.mf-rowsi{display:flex;flex-direction:column}
.mf-rowi{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px var(--mf-space-20);padding:var(--mf-space-20) 0;border-top:1px solid var(--mf-line)}
.mf-rowi:last-child{border-bottom:1px solid var(--mf-line)}
.mf-rowi h3{margin:0;font:600 var(--mf-text-heading)/var(--mf-leading-heading) var(--mf-font-sans)}
.mf-rowi p{margin:6px 0 0}
.mf-rowi .mf-acts{display:flex;flex-wrap:wrap;gap:var(--mf-form-label);margin-top:var(--mf-space-20)}
/* ---- screens: Mac window, split panels, segmented tabs, sprint list ---- */
.mf-window{border-radius:var(--mf-radius-panel);overflow:hidden;box-shadow:inset 0 0 0 1px var(--mf-line);background:var(--mf-surface-0);color:var(--mf-ink);font:400 var(--mf-text-body)/var(--mf-leading-body) var(--mf-font-sans)}
.mf-split{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);min-height:500px}
.mf-side{background:var(--mf-surface-1);padding:var(--mf-space-30);display:flex;flex-direction:column;gap:6px;min-width:0}
.mf-side h2{margin:0;font:500 var(--mf-text-display)/var(--mf-leading-display) var(--mf-font-sans)}
.mf-mono{font:400 var(--mf-text-caption)/var(--mf-leading-caption) var(--mf-font-mono);color:var(--mf-ink-muted)}
.mf-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--mf-space-10);align-items:flex-start}
.mf-stepper{display:inline-flex;align-items:center;gap:14px;min-height:var(--mf-pill-tall);padding:0 14px;border-radius:var(--mf-radius-pill);background:var(--mf-surface-0);font:400 var(--mf-text-emphasis)/1 var(--mf-font-mono)}
.mf-stepper button{border:0;background:none;color:var(--mf-ink);padding:0;cursor:pointer;font:inherit;line-height:1}
.mf-stepper button:disabled{color:var(--mf-ink-muted);cursor:default}
.mf-work{display:flex;flex-direction:column;min-width:0}
.mf-work-body{padding:var(--mf-space-30);display:flex;flex-direction:column;gap:var(--mf-space-20)}
.mf-work-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--mf-space-20)}
.mf-work-head h3{margin:0;font:600 var(--mf-text-heading)/var(--mf-leading-heading) var(--mf-font-sans)}
.mf-group{display:flex;flex-direction:column;gap:var(--mf-form-label)}
.mf-group > .mf-label .mf-k{margin-left:6px;letter-spacing:0;font-weight:400}
.mf-foot{margin-top:auto;border-top:1px solid var(--mf-line);padding:14px var(--mf-space-30);display:flex;justify-content:space-between;align-items:center;gap:var(--mf-space-20);flex-wrap:wrap}
.mf-foot .mf-will{color:var(--mf-ink-muted)}
.mf-foot .mf-will b{color:var(--mf-ink);font-weight:500}
.mf-foot .mf-will .is-need{color:var(--mf-needs-decision)}
.mf-seg{display:flex;background:var(--mf-surface-2);border-radius:var(--mf-radius-field);padding:2px;gap:2px}
.mf-seg button{flex:1;border:0;background:none;color:var(--mf-ink);padding:4px 10px;border-radius:var(--mf-radius-tile);font:400 var(--mf-text-body)/var(--mf-leading-body) var(--mf-font-sans);cursor:pointer;white-space:nowrap}
.mf-seg button[aria-selected="true"]{background:var(--mf-surface-3);font-weight:500;box-shadow:inset 0 0 0 1px var(--mf-line)}
.mf-mac{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(200px,1fr);min-height:480px}
.mf-mac-main{padding:var(--mf-space-20);display:flex;flex-direction:column;gap:var(--mf-space-10);min-width:0;border-right:1px solid var(--mf-line)}
.mf-mac-aside{padding:var(--mf-space-20);display:flex;flex-direction:column;gap:var(--mf-space-10)}
.mf-mac-aside h3{margin:0;font:600 var(--mf-text-heading)/var(--mf-leading-heading) var(--mf-font-sans)}
.mf-srows{display:flex;flex-direction:column;padding-block:var(--mf-list-inset)}
.mf-srow{display:grid;grid-template-columns:var(--mf-check-mac) minmax(0,1fr) auto auto auto;gap:12px;align-items:center;padding:7px var(--mf-list-inset);border-top:1px solid var(--mf-line)}
.mf-srow:first-child{border-top-color:transparent}
.mf-srow input{width:var(--mf-check-mac);height:var(--mf-check-mac);margin:0;accent-color:var(--mf-action)}
.mf-srow .mf-t{min-width:0;font-size:var(--mf-text-emphasis);line-height:var(--mf-leading-emphasis);overflow-wrap:anywhere}
.mf-srow .mf-t .mf-code{font:400 var(--mf-text-caption)/1 var(--mf-font-mono);color:var(--mf-ink-muted);margin-left:8px}
.mf-srow .mf-meta{color:var(--mf-ink-muted);white-space:nowrap}
.mf-srow.is-current{background:var(--mf-surface-1);border-radius:var(--mf-radius-field);box-shadow:inset 0 0 0 var(--mf-focus-width-mac) var(--mf-focus);border-top-color:transparent}
.mf-srow.is-current + .mf-srow{border-top-color:transparent}
.mf-size{display:inline-flex;gap:4px}
.mf-size button{width:var(--mf-pill-short);height:var(--mf-pill-short);border:0;border-radius:var(--mf-radius-tile);background:var(--mf-surface-2);color:var(--mf-ink);font:500 var(--mf-text-caption)/1 var(--mf-font-mono);cursor:pointer}
.mf-size button[aria-pressed="true"]{background:var(--mf-action);color:var(--mf-on-action)}
.mf-mac-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--mf-space-20);padding-top:var(--mf-space-10);margin-top:auto}
.mf-screens-stack{display:flex;flex-direction:column;gap:0}
.mf-screens-stack > .mf-screen-wrap{padding:var(--mf-space-20);background:var(--mf-surface-0);display:flex;flex-direction:column;gap:var(--mf-space-10)}
.mf-screens-stack > .mf-screen-wrap > .mf-theme-name{font:500 var(--mf-text-caption)/1 var(--mf-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mf-ink-muted)}
@media (max-width:720px){.mf-top{grid-template-columns:minmax(0,1fr) auto}.mf-top .mf-search{grid-column:1/-1;order:3}.mf-status{display:none}.mf-split,.mf-mac{grid-template-columns:minmax(0,1fr)}.mf-mac-main{border-right:0}}