/* moijn Design System — component classes (re-*). GENERATED by tools/build-starter.mjs from design/ — do not edit. */

/* ---------- Base ---------- */
.mo{font:400 14px/20px var(--font-sans);color:var(--ink);background:var(--bg-canvas);font-feature-settings:"tnum";-webkit-font-smoothing:antialiased}
.mo *{box-sizing:border-box}
.mo-caps{text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mo :focus-visible{outline:var(--border-width-focused) solid var(--focus);outline-offset:2px}

/* ---------- Logo (official SVG only; negative variant on dark) ---------- */
.mo-logo{display:inline-flex;align-items:center;line-height:0}
.mo-logo img{height:24px;width:auto;display:block}
.mo-logo--lg img{height:40px}
.mo-logo__neg{display:none!important}
[data-theme="dark"] .mo-logo__pos{display:none!important}
[data-theme="dark"] .mo-logo__neg{display:block!important}

/* ---------- Spinner ---------- */
.mo-spinner{display:inline-block;width:16px;height:16px;border:var(--border-width-focused) solid currentColor;border-right-color:transparent;border-radius:var(--radius-pill);animation:mo-spin .8s linear infinite;flex:none}
.mo-spinner--sm{width:12px;height:12px}
.mo-spinner--lg{width:24px;height:24px}
@keyframes mo-spin{to{transform:rotate(360deg)}}

/* ---------- Button ---------- */
.mo-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-075);height:var(--control-height);min-width:var(--tap-min);padding:0 var(--space-200);font:500 14px/20px var(--font-sans);border-radius:var(--radius-pill);border:var(--border-width) solid transparent;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.mo-btn--compact{height:var(--control-height-compact);padding:0 var(--space-150)}
.mo-btn--caps{font:500 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase}
.mo-btn--primary{background:var(--ink);color:var(--on-ink)}
.mo-btn--primary:hover,.mo-btn--primary:active{background:var(--ink-strong)}
.mo-btn--signal{background:var(--brand);color:var(--on-brand)}
.mo-btn--signal:hover{border-color:var(--on-brand)}
.mo-btn--signal:active{border-color:var(--on-brand);background:var(--brand);color:var(--ink-strong)}
.mo-btn--default{border-color:var(--line)}
.mo-btn--default:hover,.mo-btn--subtle:hover{background:var(--bg-neutral-hovered)}
.mo-btn--default:active,.mo-btn--subtle:active{background:var(--bg-neutral-pressed)}
.mo-btn--danger{background:var(--bg-danger-bold);color:var(--on-ink)}
.mo-btn--danger:hover,.mo-btn--danger:active{background:var(--bg-danger-bold-hovered)}
.mo-btn:disabled,.mo-btn[aria-disabled="true"]{background:var(--bg-disabled);color:var(--text-disabled);border-color:transparent;cursor:not-allowed}
.mo-btn[aria-busy="true"]{cursor:progress}
.mo-btn[aria-busy="true"]>:not(.mo-spinner){visibility:hidden}
.mo-btn[aria-busy="true"]>.mo-spinner{position:absolute;inset:0;margin:auto}

/* ---------- MetaTags ---------- */
.mo-meta{font:500 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.mo-meta span+span::before{content:" · "}

/* ---------- NavBar ---------- */
.mo-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--space-300);padding:var(--space-250) var(--space-gutter)}
.mo-nav ul{display:flex;flex-wrap:wrap;gap:var(--space-gutter);list-style:none;margin:0;padding:0}
.mo-nav a:not(.mo-logo):not(.mo-btn){display:inline-flex;align-items:center;min-height:var(--tap-min);font:500 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.mo-nav a:not(.mo-logo):not(.mo-btn):hover{color:var(--ink-strong)}
.mo-nav a[aria-current]{color:var(--brand-text)}
@media (max-width:720px){.mo-nav{padding:var(--space-200) var(--space-gutter)}.mo-nav ul{gap:var(--space-200)}}

/* ---------- Hero ---------- */
.mo-hero{padding:var(--space-400) var(--space-gutter)}
.mo-hero h1{margin:0;font:300 96px/.9 var(--font-display);letter-spacing:-.045em;text-transform:uppercase}
.mo-hero p{margin:var(--space-400) 0 0}
.mo-hero .mo-lead{max-width:560px;font:400 16px/24px var(--font-sans);color:var(--ink-muted)}
@media (max-width:720px){.mo-hero h1{font-size:64px;line-height:.92;letter-spacing:-.035em}}

/* ---------- Section title ---------- */
.mo-display{margin:0;font:300 64px/.92 var(--font-display);letter-spacing:-.035em;text-transform:uppercase}
.mo-heading-xl{margin:0;font:300 40px/1 var(--font-display);letter-spacing:-.02em}

/* ---------- CaseStudyCard ---------- */
.mo-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-section) var(--space-gutter)}
@media (max-width:720px){.mo-grid{grid-template-columns:1fr;row-gap:var(--space-1000)}}
.mo-card{display:flex;flex-direction:column;align-items:flex-start}
.mo-card__meta{padding-top:var(--space-250)}
.mo-card h3{margin:var(--space-250) 0 var(--space-300);font:300 40px/1 var(--font-display);letter-spacing:-.02em;text-transform:uppercase}
.mo-card__img{aspect-ratio:4/3;border-radius:var(--radius-card);background:var(--clay);display:block;width:100%;margin-top:var(--space-300);object-fit:cover}
.mo-card__img--b{background:var(--ink)}

/* ---------- BrandListRow ---------- */
.mo-row{display:flex;justify-content:space-between;align-items:center;min-height:56px;border-bottom:var(--border-width) solid var(--line);gap:var(--space-150);padding:var(--space-100) 0}
.mo-row__name{font:400 14px/20px var(--font-sans);text-transform:uppercase;letter-spacing:.04em}
.mo-row__right{display:flex;align-items:center;gap:var(--space-250)}
.mo-row .mo-meta{color:var(--ink-muted)}
@media (max-width:720px){.mo-row .mo-meta{display:none}}

/* ---------- Layout & proportion ---------- */
.mo-panel{background:var(--bg-sheet);border-radius:var(--radius-card);padding:var(--space-300)}
.mo-kpi__label{margin:0;font:500 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.mo-kpi__value{margin:var(--space-100) 0 0;font:500 28px/32px var(--font-sans);letter-spacing:-.01em;font-feature-settings:"tnum"}
.mo-measure{max-width:var(--measure)}
.mo-page{width:100%;max-width:var(--content-max);margin:0 auto;display:grid;gap:var(--space-400)}
.mo-page__header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-200)}
.mo-page__title{margin:0;font:600 24px/28px var(--font-sans);letter-spacing:-.01em}
.mo-page__lead{margin:var(--space-050) 0 0;max-width:var(--measure);color:var(--ink-muted)}
.mo-w-xs{width:100%;max-width:var(--field-width-xs)}
.mo-w-sm{width:100%;max-width:var(--field-width-sm)}
.mo-w-md{width:100%;max-width:var(--field-width-md)}
.mo-w-lg{width:100%;max-width:var(--field-width-lg)}
.mo-w-full{width:100%;max-width:none}

/* ---------- TextField ---------- */
.mo-field{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-050);min-width:0}
.mo-field>.mo-input,.mo-field>.mo-select,.mo-field>.mo-input-group{width:100%}
.mo-label{font:500 14px/20px var(--font-sans);color:var(--ink)}
.mo-label__req{color:var(--text-danger);margin-left:var(--space-025)}
.mo-label__opt{font-weight:400;color:var(--ink-muted);margin-left:var(--space-050)}
.mo-input{height:var(--control-height);width:100%;font:400 14px/20px var(--font-sans);color:var(--ink);background:var(--bg-input);border:var(--border-width) solid var(--border-input);border-radius:var(--radius-input);padding:0 var(--space-150)}
.mo-input--compact{height:var(--control-height-compact);padding:0 var(--space-100)}
textarea.mo-input{height:auto;min-height:calc(var(--space-1000) * 1.5);padding:var(--space-100) var(--space-150);resize:vertical;line-height:20px}
.mo-input:hover{border-color:var(--ink)}
.mo-input[aria-invalid="true"]{border-color:var(--border-danger)}
.mo-input::placeholder{color:var(--ink-muted)}
.mo-input:disabled{background:var(--bg-disabled);color:var(--text-disabled);border-color:transparent;cursor:not-allowed}
.mo-input[readonly]{background:transparent;border-color:var(--line-soft)}
.mo-input[type="number"],.mo-input--num{font-feature-settings:"tnum";text-align:right}
.mo-input-group{position:relative;display:flex;align-items:center}
.mo-input-group>.mo-icon{position:absolute;left:var(--space-150);color:var(--ink-muted);pointer-events:none}
.mo-input-group>.mo-input{padding-left:calc(var(--space-150) + 20px + var(--space-100))}
.mo-input-group>.mo-input--compact{padding-left:calc(var(--space-100) + 20px + var(--space-100))}
.mo-input-group--compact>.mo-icon{left:var(--space-100)}
.mo-field__help{font:400 12px/16px var(--font-sans);color:var(--ink-muted);max-width:var(--measure)}
.mo-field__error{display:flex;align-items:flex-start;gap:var(--space-050);font:400 12px/16px var(--font-sans);color:var(--text-danger)}
.mo-field__error .mo-icon{color:var(--border-danger)}

/* ---------- Select (native) ---------- */
.mo-select{position:relative;display:inline-flex;width:100%}
.mo-select select{appearance:none;-webkit-appearance:none;padding-right:calc(var(--space-150) + 16px + var(--space-100));cursor:pointer}
.mo-select::after{content:"";position:absolute;right:var(--space-150);top:50%;width:16px;height:16px;margin-top:-8px;background:var(--ink-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.mo-select:has(select:disabled)::after{background:var(--text-disabled)}

/* ---------- Checkbox & Radio ---------- */
.mo-choice{display:inline-flex;align-items:flex-start;gap:var(--space-100);min-height:var(--tap-min);padding:var(--space-025) 0;font:400 14px/20px var(--font-sans);color:var(--ink);cursor:pointer}
.mo-choice__text{display:flex;flex-direction:column}
.mo-choice__help{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.mo-checkbox,.mo-radio{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:2px 0 0;display:grid;place-content:center;background:var(--bg-input);border:var(--border-width) solid var(--border-input);cursor:pointer}
.mo-checkbox{border-radius:var(--radius-small)}
.mo-radio{border-radius:var(--radius-pill)}
.mo-checkbox:hover,.mo-radio:hover{border-color:var(--ink)}
.mo-checkbox:checked,.mo-checkbox:indeterminate{background:var(--border-selected);border-color:var(--border-selected)}
.mo-checkbox::before{content:"";width:12px;height:12px;background:var(--on-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center/contain no-repeat;visibility:hidden}
.mo-checkbox:indeterminate::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z'/%3E%3C/svg%3E")}
.mo-checkbox:checked::before,.mo-checkbox:indeterminate::before{visibility:visible}
.mo-radio:checked{border-color:var(--border-selected);border-width:var(--border-width-focused)}
.mo-radio::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--border-selected);visibility:hidden}
.mo-radio:checked::before{visibility:visible}
.mo-checkbox[aria-invalid="true"],.mo-radio[aria-invalid="true"]{border-color:var(--border-danger)}
.mo-checkbox:disabled,.mo-radio:disabled{background:var(--bg-disabled);border-color:var(--bg-disabled);cursor:not-allowed}
.mo-checkbox:disabled::before{background:var(--text-disabled)}
.mo-choice:has(:disabled){color:var(--text-disabled);cursor:not-allowed}
.mo-fieldset{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:var(--space-050)}
.mo-fieldset>legend{padding:0;margin-bottom:var(--space-050);font:500 14px/20px var(--font-sans);color:var(--ink)}
.mo-fieldset--inline .mo-fieldset__options{flex-direction:row;flex-wrap:wrap;gap:var(--space-100) var(--space-300)}
.mo-fieldset__options{display:flex;flex-direction:column;gap:var(--space-025)}

/* ---------- Toggle ---------- */
.mo-toggle{display:inline-flex;align-items:center;gap:var(--space-100);min-height:var(--tap-min);padding:0;border:0;background:transparent;font:400 14px/20px var(--font-sans);color:var(--ink);cursor:pointer;text-align:left}
.mo-toggle__track{position:relative;flex:none;width:40px;height:24px;border-radius:var(--radius-pill);background:var(--border-input);transition:background-color var(--duration-fast) var(--ease-out)}
.mo-toggle__track::after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:var(--radius-pill);background:var(--on-ink);transition:transform var(--duration-base) var(--ease-in-out)}
.mo-toggle[aria-checked="true"] .mo-toggle__track{background:var(--border-selected)}
.mo-toggle[aria-checked="true"] .mo-toggle__track::after{transform:translateX(16px)}
.mo-toggle:hover .mo-toggle__track{background:var(--ink-muted)}
.mo-toggle[aria-checked="true"]:hover .mo-toggle__track{background:var(--brand-text)}
.mo-toggle:disabled{color:var(--text-disabled);cursor:not-allowed}
.mo-toggle:disabled .mo-toggle__track{background:var(--bg-disabled)}
.mo-toggle:disabled .mo-toggle__track::after{background:var(--text-disabled)}

/* ---------- Form layout ---------- */
.mo-form{display:flex;flex-direction:column;gap:var(--space-300);width:100%;max-width:var(--form-max)}
.mo-form__section{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:var(--space-200);min-width:0}
.mo-form__section+.mo-form__section{margin-top:var(--space-200)}
.mo-form__title{margin:0 0 var(--space-200);padding:0;font:600 16px/20px var(--font-sans);color:var(--ink)}
.mo-form__desc{margin:calc(var(--space-150) * -1) 0 0;font:400 14px/20px var(--font-sans);color:var(--ink-muted);max-width:var(--measure)}
.mo-form__row{display:flex;flex-wrap:wrap;gap:var(--space-200)}
.mo-form__row>.mo-field{flex:1 1 var(--field-width-sm)}
.mo-form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-100);padding-top:var(--space-100)}
.mo-form__note{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}

/* ---------- Footer ---------- */
.mo-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-300);flex-wrap:wrap;padding:var(--space-300) var(--space-gutter);border-top:var(--border-width) solid var(--line);font:400 12px/16px var(--font-sans);color:var(--ink-muted)}

/* ---------- Icon (Phosphor, 256 grid, currentColor) ---------- */
.mo-icon{width:20px;height:20px;flex:none;fill:currentColor;vertical-align:-0.2em}
.mo-icon--16{width:16px;height:16px}
.mo-icon--24{width:24px;height:24px}

/* ---------- App shell: Sidebar, TopBar, CommandPalette ---------- */
.mo-app{display:flex;height:100%;min-height:100vh;background:var(--bg-canvas);color:var(--ink)}
.mo-sidebar{flex:none;width:var(--sidebar-width);display:flex;flex-direction:column;gap:var(--space-300);padding:var(--space-150);background:var(--bg-sheet);overflow:hidden}
.mo-sidebar[data-collapsed="true"]{display:none}
.mo-sidebar__head{display:flex;align-items:center;gap:var(--space-150);min-height:var(--control-height);padding:0 var(--space-100)}
.mo-sidebar__head .mo-logo img{height:20px}
.mo-sidebar__app{font:600 14px/20px var(--font-sans);color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-sidebar__scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-300);scrollbar-width:none}
.mo-sidebar__scroll::-webkit-scrollbar{display:none}
.mo-sidebar__group{display:flex;flex-direction:column;gap:var(--space-025);margin:0;padding:0;list-style:none}
.mo-sidebar__heading{font:500 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);padding:0 var(--space-100);margin:0 0 var(--space-050)}
.mo-sidebar__sub{display:flex;flex-direction:column;gap:var(--space-025);margin:var(--space-025) 0 0;padding:0 0 0 var(--space-400);list-style:none}
.mo-sidebar__sub[hidden]{display:none}
.mo-sidebar__foot{display:flex;flex-direction:column;gap:var(--space-025);margin:0;padding:var(--space-150) 0 0;list-style:none;border-top:var(--border-width) solid var(--line-soft)}

.mo-navitem{display:flex;align-items:center;gap:var(--space-100);width:100%;min-height:var(--control-height-compact);padding:0 var(--space-100);border:0;border-radius:var(--radius-input);background:transparent;font:400 14px/20px var(--font-sans);color:var(--ink-muted);text-align:left;text-decoration:none;cursor:pointer}
.mo-navitem:hover{background:var(--bg-neutral-hovered);color:var(--ink)}
.mo-navitem:active{background:var(--bg-neutral-pressed)}
.mo-navitem[aria-current="page"]{background:var(--bg-selected);color:var(--text-selected);font-weight:500}
.mo-navitem__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-navitem__chevron{transition:transform var(--duration-base) var(--ease-in-out)}
.mo-navitem[aria-expanded="true"] .mo-navitem__chevron{transform:rotate(90deg)}
.mo-navitem .mo-kbd{visibility:hidden}
.mo-navitem:hover .mo-kbd,.mo-navitem:focus-visible .mo-kbd{visibility:visible}

.mo-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--space-075);border-radius:var(--radius-pill);background:var(--bg-neutral-pressed);color:var(--ink);font:500 12px/16px var(--font-sans);font-feature-settings:"tnum"}
.mo-kbd{display:inline-flex;align-items:center;height:20px;padding:0 var(--space-050);border:var(--border-width) solid var(--line-soft);border-radius:var(--radius-small);font:400 12px/16px var(--font-mono);color:var(--ink-muted)}

.mo-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:var(--radius-pill);background:var(--ink);color:var(--on-ink);font:600 12px/16px var(--font-sans);text-transform:uppercase}
.mo-avatar--sm{width:24px;height:24px}

.mo-switcher{position:relative}
.mo-switcher__btn{display:flex;align-items:center;gap:var(--space-100);width:100%;padding:var(--space-100);border:0;border-radius:var(--radius-input);background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.mo-switcher__btn:hover{background:var(--bg-neutral-hovered)}
.mo-switcher__text{flex:1;min-width:0;display:flex;flex-direction:column}
.mo-switcher__name{font:600 14px/20px var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-switcher__sub{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}

.mo-menu{position:absolute;left:0;right:0;top:calc(100% + var(--space-050));z-index:30;display:flex;flex-direction:column;gap:var(--space-025);margin:0;padding:var(--space-050);list-style:none;background:var(--surface-overlay);border-radius:var(--radius-card);box-shadow:var(--shadow-overlay)}
.mo-menu__item{display:flex;align-items:center;gap:var(--space-100);width:100%;min-height:var(--control-height-compact);padding:0 var(--space-100);border:0;border-radius:var(--radius-input);background:transparent;font:400 14px/20px var(--font-sans);color:var(--ink);text-align:left;cursor:pointer}
.mo-menu__item:hover{background:var(--bg-neutral-hovered)}
.mo-menu__item[aria-checked="true"]{color:var(--text-selected);font-weight:500}
.mo-menu__sep{height:var(--border-width);margin:var(--space-050) var(--space-100);background:var(--line-soft)}

.mo-main{flex:1;min-width:0;display:flex;flex-direction:column}
.mo-topbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-200);height:var(--topbar-height);padding:0 var(--space-300)}
.mo-topbar__left,.mo-topbar__right{display:flex;align-items:center;gap:var(--space-150);min-width:0}
.mo-breadcrumb{display:flex;align-items:center;gap:var(--space-100);min-width:0;margin:0;padding:0;list-style:none;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.mo-breadcrumb li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-breadcrumb li+li::before{content:"/";margin-right:var(--space-100);color:var(--ink-muted)}
.mo-breadcrumb [aria-current]{color:var(--ink);font-weight:500}
.mo-iconbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--control-height-compact);height:var(--control-height-compact);border:0;border-radius:var(--radius-input);background:transparent;color:var(--ink-muted);cursor:pointer}
.mo-iconbtn:hover{background:var(--bg-neutral-hovered);color:var(--ink)}
.mo-iconbtn:active{background:var(--bg-neutral-pressed)}
.mo-searchtrigger{display:inline-flex;align-items:center;gap:var(--space-100);min-width:240px;height:var(--control-height-compact);padding:0 var(--space-100) 0 var(--space-150);border:var(--border-width) solid var(--border-input);border-radius:var(--radius-input);background:var(--bg-input);font:400 14px/20px var(--font-sans);color:var(--ink-muted);cursor:pointer}
.mo-searchtrigger span{flex:1;text-align:left}
.mo-searchtrigger:hover{border-color:var(--ink)}
.mo-content{flex:1;min-height:0;overflow:auto;padding:var(--space-300)}

.mo-blanket{position:fixed;inset:0;z-index:50;display:flex;justify-content:center;align-items:flex-start;padding:calc(var(--space-1000) * 2) var(--space-200) var(--space-200);background:var(--blanket)}
.mo-palette{width:100%;max-width:calc(var(--space-1000) * 7);overflow:hidden;background:var(--surface-overlay);border-radius:var(--radius-overlay);box-shadow:var(--shadow-overlay)}
.mo-palette__bar{display:flex;align-items:center;gap:var(--space-150);min-height:var(--space-600);padding:0 var(--space-150) 0 var(--space-200);border-bottom:var(--border-width) solid var(--line-soft)}
.mo-palette__bar .mo-icon{color:var(--ink-muted)}
.mo-palette__input{flex:1;min-width:0;height:var(--space-600);border:0;background:transparent;font:400 16px/24px var(--font-sans);color:var(--ink)}
.mo-palette__input:focus-visible{outline:none}
.mo-palette__bar:focus-within{outline:var(--border-width-focused) solid var(--focus);outline-offset:calc(var(--border-width-focused) * -1)}
.mo-palette__input::placeholder{color:var(--ink-muted)}
.mo-palette__empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-100);padding:var(--space-500) var(--space-200);font:400 14px/20px var(--font-sans);color:var(--ink-muted)}

@media (max-width:720px){
  .mo-sidebar{position:fixed;inset:0 auto 0 0;z-index:45;box-shadow:var(--shadow-overlay)}
  .mo-searchtrigger{min-width:0}
  .mo-searchtrigger span,.mo-searchtrigger .mo-kbd{display:none}
  .mo-content{padding:var(--space-200)}
}

/* ---------- Table ---------- */
.mo-table-wrap{width:100%;overflow-x:auto;background:var(--bg-sheet);border-radius:var(--radius-card)}
.mo-table{width:100%;border-collapse:collapse;font:400 14px/20px var(--font-sans);font-feature-settings:"tnum";color:var(--ink)}
.mo-table caption{text-align:left;padding:var(--space-200) var(--space-200) var(--space-100);font:600 16px/20px var(--font-sans)}
.mo-table th{text-align:left;vertical-align:bottom;padding:var(--space-100) var(--space-200);font:600 12px/16px var(--font-sans);color:var(--ink-muted);border-bottom:var(--border-width) solid var(--line);white-space:nowrap}
.mo-table td{padding:var(--space-100) var(--space-200);height:var(--control-height);border-bottom:var(--border-width) solid var(--line-soft);vertical-align:middle}
.mo-table--compact td{height:var(--control-height-compact);padding-top:var(--space-050);padding-bottom:var(--space-050)}
.mo-table tbody tr:hover td{background:var(--bg-neutral-hovered)}
.mo-table tbody tr[aria-selected="true"] td{background:var(--bg-selected)}
.mo-table .mo-num{text-align:right}
.mo-table .mo-col-check{width:calc(16px + var(--space-200) * 2);padding-right:0}
.mo-table .mo-col-check .mo-choice{min-height:0;padding:0}
.mo-table td.mo-table__muted{color:var(--ink-muted)}
.mo-sort{display:inline-flex;align-items:center;gap:var(--space-050);margin:calc(var(--space-050) * -1) calc(var(--space-100) * -1);padding:var(--space-050) var(--space-100);border:0;border-radius:var(--radius-input);background:transparent;font:inherit;color:inherit;cursor:pointer}
.mo-sort:hover{background:var(--bg-neutral-hovered);color:var(--ink)}
th[aria-sort="ascending"] .mo-sort,th[aria-sort="descending"] .mo-sort{color:var(--ink)}
.mo-table__empty td{height:auto;padding:0;border-bottom:0}
.mo-table__empty td:hover{background:transparent}
.mo-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-150);padding:var(--space-150) var(--space-200);font:400 14px/20px var(--font-sans);color:var(--ink-muted);font-feature-settings:"tnum"}
.mo-pagination__pages{display:flex;align-items:center;gap:var(--space-025);margin:0;padding:0;list-style:none}
.mo-page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--control-height-compact);height:var(--control-height-compact);padding:0 var(--space-100);border:0;border-radius:var(--radius-input);background:transparent;font:400 14px/20px var(--font-sans);color:var(--ink);cursor:pointer;font-feature-settings:"tnum"}
.mo-page-btn:hover{background:var(--bg-neutral-hovered)}
.mo-page-btn[aria-current="page"]{background:var(--bg-selected);color:var(--text-selected);font-weight:500}
.mo-page-btn:disabled{color:var(--text-disabled);background:transparent;cursor:not-allowed}

/* ---------- Section message & Banner ---------- */
.mo-message{display:flex;gap:var(--space-150);padding:var(--space-200);border-radius:var(--radius-card);background:var(--bg-info);color:var(--ink)}
.mo-message>.mo-icon{margin-top:0;color:var(--border-info)}
.mo-message__body{display:flex;flex-direction:column;gap:var(--space-050);min-width:0;max-width:var(--measure)}
.mo-message__title{margin:0;font:600 14px/20px var(--font-sans)}
.mo-message__text{margin:0;font:400 14px/20px var(--font-sans)}
.mo-message__text ul{margin:var(--space-050) 0 0;padding-left:var(--space-250)}
.mo-message__actions{display:flex;flex-wrap:wrap;gap:var(--space-200);margin-top:var(--space-050)}
.mo-message a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.mo-message--success{background:var(--bg-success)}.mo-message--success>.mo-icon{color:var(--border-success)}
.mo-message--warning{background:var(--bg-warning)}.mo-message--warning>.mo-icon{color:var(--border-warning)}
.mo-message--danger{background:var(--bg-danger)}.mo-message--danger>.mo-icon{color:var(--border-danger)}
.mo-message:focus-visible{outline:var(--border-width-focused) solid var(--focus);outline-offset:2px}
.mo-banner{display:flex;align-items:center;justify-content:center;gap:var(--space-100);min-height:var(--control-height);padding:var(--space-100) var(--space-300);font:500 14px/20px var(--font-sans);background:var(--bg-info-bold);color:var(--on-ink);text-align:center}
.mo-banner a{color:inherit;text-decoration:underline}
.mo-banner--warning{background:var(--bg-warning-bold);color:var(--on-warning-bold)}
.mo-banner--danger{background:var(--bg-danger-bold);color:var(--on-ink)}

/* ---------- Lozenge ---------- */
.mo-lozenge{display:inline-flex;align-items:center;gap:var(--space-050);height:20px;max-width:100%;padding:0 var(--space-075);border-radius:var(--radius-pill);background:var(--bg-neutral-pressed);color:var(--ink);font:500 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.mo-lozenge .mo-icon{width:12px;height:12px}
.mo-lozenge--success{background:var(--bg-success);color:var(--text-success)}
.mo-lozenge--warning{background:var(--bg-warning);color:var(--text-warning)}
.mo-lozenge--danger{background:var(--bg-danger);color:var(--text-danger)}
.mo-lozenge--info{background:var(--bg-info);color:var(--text-info)}
.mo-lozenge--selected{background:var(--bg-selected);color:var(--text-selected)}
.mo-lozenge--bold.mo-lozenge--success{background:var(--bg-success-bold);color:var(--on-ink)}
.mo-lozenge--bold.mo-lozenge--danger{background:var(--bg-danger-bold);color:var(--on-ink)}
.mo-lozenge--bold.mo-lozenge--info{background:var(--bg-info-bold);color:var(--on-ink)}
.mo-lozenge--bold.mo-lozenge--warning{background:var(--bg-warning-bold);color:var(--on-warning-bold)}
.mo-lozenge--bold:not(.mo-lozenge--success):not(.mo-lozenge--danger):not(.mo-lozenge--info):not(.mo-lozenge--warning){background:var(--ink);color:var(--on-ink)}

/* ---------- Toast ---------- */
.mo-toast-region{position:fixed;right:var(--space-300);bottom:var(--space-300);z-index:60;display:flex;flex-direction:column;gap:var(--space-100);width:calc(100% - var(--space-300) * 2);max-width:var(--toast-width);pointer-events:none}
.mo-toast{display:flex;gap:var(--space-150);padding:var(--space-200);background:var(--surface-overlay);color:var(--ink);border-radius:var(--radius-card);box-shadow:var(--shadow-overlay);pointer-events:auto}
.mo-toast>.mo-icon{color:var(--border-success)}
.mo-toast--danger>.mo-icon{color:var(--border-danger)}
.mo-toast--warning>.mo-icon{color:var(--border-warning)}
.mo-toast--info>.mo-icon{color:var(--border-info)}
.mo-toast__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-025)}
.mo-toast__title{margin:0;font:600 14px/20px var(--font-sans)}
.mo-toast__text{margin:0;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.mo-toast__actions{display:flex;gap:var(--space-200);margin-top:var(--space-050)}
.mo-toast .mo-iconbtn{margin:calc(var(--space-050) * -1) calc(var(--space-100) * -1) 0 0}
@media (max-width:720px){.mo-toast-region{right:var(--space-200);bottom:var(--space-200);width:calc(100% - var(--space-200) * 2)}}

/* ---------- Empty state ---------- */
.mo-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-150);margin:0 auto;padding:var(--space-800) var(--space-300);text-align:center;max-width:var(--measure)}
.mo-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--space-800);height:var(--space-800);border-radius:var(--radius-pill);background:var(--bg-neutral-hovered);color:var(--ink-muted)}
.mo-empty__title{margin:0;font:600 20px/24px var(--font-sans);color:var(--ink)}
.mo-empty__text{margin:0;font:400 14px/20px var(--font-sans);color:var(--ink-muted);max-width:calc(var(--measure) * .66)}
.mo-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-100);margin-top:var(--space-100)}
.mo-empty--compact{padding:var(--space-500) var(--space-200)}

/* ---------- Spinner (block) ---------- */
.mo-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-150);padding:var(--space-500);color:var(--ink-muted);font:400 14px/20px var(--font-sans)}

/* ---------- Modal ---------- */
.mo-blanket--center{align-items:center;padding:var(--space-300)}
.mo-modal{display:flex;flex-direction:column;width:100%;max-width:var(--modal-md);max-height:calc(100vh - var(--space-600) * 2);background:var(--surface-overlay);color:var(--ink);border-radius:var(--radius-overlay);box-shadow:var(--shadow-overlay)}
.mo-modal--sm{max-width:var(--modal-sm)}
.mo-modal--lg{max-width:var(--modal-lg)}
.mo-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-200);padding:var(--space-300) var(--space-300) var(--space-200)}
.mo-modal__title{margin:0;display:flex;align-items:center;gap:var(--space-100);font:600 20px/24px var(--font-sans)}
.mo-modal__title .mo-icon{color:var(--border-danger)}
.mo-modal__body{flex:1;min-height:0;overflow-y:auto;padding:0 var(--space-300);font:400 14px/20px var(--font-sans)}
.mo-modal__body>p{margin:0 0 var(--space-150);max-width:var(--measure)}
.mo-modal__footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-100);padding:var(--space-300)}
@media (max-width:720px){.mo-blanket--center{align-items:flex-end;padding:0}.mo-modal{max-width:none;max-height:90vh;border-radius:var(--radius-overlay) var(--radius-overlay) 0 0}}

/* ---------- Tooltip ---------- */
.mo-tooltip-host{position:relative;display:inline-flex}
.mo-tooltip{position:absolute;z-index:70;bottom:calc(100% + var(--space-100));left:50%;transform:translateX(-50%);width:max-content;max-width:var(--tooltip-max);padding:var(--space-050) var(--space-100);background:var(--bg-inverse);color:var(--text-inverse);border-radius:var(--radius-input);box-shadow:var(--shadow-overlay);font:400 12px/16px var(--font-sans);text-align:center;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--duration-fast) var(--ease-out) 300ms,visibility 0s linear 300ms}
.mo-tooltip--bottom{bottom:auto;top:calc(100% + var(--space-100))}
.mo-tooltip-host:hover>.mo-tooltip,.mo-tooltip-host:focus-within>.mo-tooltip,.mo-tooltip[data-open="true"]{visibility:visible;opacity:1}
.mo-tooltip-host:focus-within>.mo-tooltip{transition-delay:0s}
.mo-tooltip .mo-kbd{height:16px;margin-left:var(--space-050);border-color:currentColor;color:inherit}

/* ---------- Dropdown menu ---------- */
.mo-dropdown{position:relative;display:inline-flex}
.mo-dropdown>.mo-menu{left:auto;right:auto;min-width:max(var(--field-width-sm),100%);width:max-content;max-width:var(--field-width-md)}
.mo-dropdown--end>.mo-menu{right:0}
.mo-menu__item .mo-icon{color:var(--ink-muted)}
.mo-menu__item--danger{color:var(--text-danger)}.mo-menu__item--danger .mo-icon{color:var(--border-danger)}
.mo-menu__item:disabled{color:var(--text-disabled);cursor:not-allowed;background:transparent}
.mo-menu__item .mo-kbd{margin-left:auto}
.mo-menu__heading{padding:var(--space-100) var(--space-100) var(--space-050);font:500 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.mo-menu__item:focus-visible{outline-offset:-2px}


/* ---------- Item list (accordion cards, one per thing the person owns; --c = its item colour) ---------- */
.mo-items{display:flex;flex-direction:column;gap:var(--space-100)}
.mo-items__head{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1.6fr) auto 32px;gap:var(--space-200);align-items:center;padding:0 var(--space-150) 0 var(--space-200);font:500 12px/16px var(--font-sans);color:var(--ink-muted)}
.mo-items__title{grid-column:1/span 2;margin:0;font:600 14px/20px var(--font-sans);color:var(--ink)}
.mo-items__count{grid-column:4/span 2;justify-self:end;font:400 12px/16px var(--font-sans)}
.mo-item{--c:var(--item-1);background:var(--bg-sheet);border-radius:var(--radius-card);transition:background-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
.mo-item--open{background:color-mix(in srgb,var(--c) 9%,var(--bg-sheet));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 55%,transparent)}
[data-theme="dark"] .mo-item--open{background:color-mix(in srgb,var(--c) 16%,var(--bg-sheet))}
.mo-item__row{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1.6fr) auto 32px;gap:var(--space-200);align-items:center;min-height:64px;padding:var(--space-150) var(--space-150) var(--space-150) var(--space-200);cursor:pointer;border:0;background:transparent;width:100%;text-align:left;font:inherit;color:inherit;border-radius:var(--radius-card)}
.mo-item__icon{width:40px;height:40px;border-radius:10px;background:var(--c);display:grid;place-items:center;color:#fff}
.mo-item__name{display:flex;align-items:center;gap:var(--space-100);min-width:0;font:600 14px/20px var(--font-sans);color:var(--ink)}
.mo-item__name>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-item__meta{display:flex;align-items:center;gap:var(--space-075);min-width:0;overflow:hidden;white-space:nowrap;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.mo-item__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-075)}
.mo-item__chevron{display:grid;place-items:center;color:var(--ink-muted);transition:transform var(--duration-base) var(--ease-out)}
.mo-item--open .mo-item__chevron{transform:rotate(180deg)}
.mo-item__detail{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-200) var(--space-400);padding:var(--space-200) var(--space-200) var(--space-300) 72px;border-top:var(--border-width) solid color-mix(in srgb,var(--c) 22%,var(--line-soft))}
.mo-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--stone)}
.mo-dot--on{background:var(--border-success)}
.mo-dot--warning{background:var(--border-warning)}
.mo-dot--danger{background:var(--border-danger)}
@media (max-width:720px){.mo-item__row,.mo-items__head{grid-template-columns:40px minmax(0,1fr) auto 32px}.mo-item__row>.mo-meters,.mo-items__head>:nth-child(3){display:none}.mo-item__detail{grid-template-columns:1fr;padding-left:var(--space-200)}}

/* ---------- Meter (usage against a limit: neutral < 80 %, warning >= 80 %, danger at 100 %) ---------- */
.mo-meters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-300);max-width:520px}
.mo-meters--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-250);max-width:640px}
.mo-meters--stale{opacity:.55}
.mo-meter{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l v" "b b" "n n";gap:var(--space-050) var(--space-100);align-items:baseline;min-width:0}
.mo-meter__label{grid-area:l;font:500 12px/16px var(--font-sans);color:var(--ink)}
.mo-meter__value{grid-area:v;font:500 12px/16px var(--font-mono);color:var(--ink)}
.mo-meter__bar{grid-area:b;height:6px;border-radius:var(--radius-pill);background:var(--line-soft);overflow:hidden}
.mo-meter__bar>i{display:block;height:100%;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--c,var(--ink)) 80%,transparent);transition:width var(--duration-base) var(--ease-out)}
.mo-meter__note{grid-area:n;min-height:16px;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.mo-meter--warning .mo-meter__bar>i{background:var(--border-warning)}.mo-meter--warning .mo-meter__value{color:var(--text-warning)}
.mo-meter--danger .mo-meter__bar>i{background:var(--border-danger)}.mo-meter--danger .mo-meter__value{color:var(--text-danger)}
.mo-meter--lg .mo-meter__bar{height:8px}
@media (max-width:720px){.mo-meters,.mo-meters--3{grid-template-columns:1fr;gap:var(--space-150)}}

/* ---------- Segmented control (2–4 exclusive options, applies at once) ---------- */
.mo-segmented{display:inline-flex;gap:2px;padding:2px;border-radius:var(--radius-input);background:var(--bg-muted)}
.mo-segmented__opt{display:inline-flex;align-items:center;gap:var(--space-075);height:28px;padding:0 var(--space-150);border:0;border-radius:4px;background:transparent;font:500 12px/16px var(--font-sans);color:var(--ink-muted);cursor:pointer}
.mo-segmented__opt:hover{color:var(--ink)}
.mo-segmented__opt[aria-checked="true"]{background:var(--bg-sheet);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mo-segmented__opt .mo-icon{width:14px;height:14px}
.mo-segmented__opt:focus-visible{outline-offset:0}

/* ---------- Colour picker (item colour: 9 presets + hex) ---------- */
.mo-swatches{display:flex;flex-wrap:wrap;gap:var(--space-075);align-items:center}
.mo-swatch{width:24px;height:24px;border:0;padding:0;border-radius:6px;background:var(--c);cursor:pointer}
.mo-swatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--bg-sheet),0 0 0 4px var(--ink)}
.mo-hex{display:inline-flex;align-items:center;gap:var(--space-100);height:var(--control-height-compact);padding:0 var(--space-150);border-radius:var(--radius-input);border:var(--border-width) solid var(--border-input);background:var(--bg-input);margin-top:var(--space-100)}
.mo-hex i{width:12px;height:12px;border-radius:3px;background:var(--c);display:block}
.mo-hex input{width:72px;border:0;background:transparent;outline:none;font:500 13px/16px var(--font-mono);color:var(--ink);text-transform:uppercase}
.mo-hex:focus-within{border-color:var(--border-selected);box-shadow:0 0 0 1px var(--border-selected)}

/* ---------- Settings list (label + help left, control right) ---------- */
.mo-settings{display:flex;flex-direction:column;gap:var(--space-300);width:100%;max-width:var(--form-max)}
.mo-settings__section h3{margin:0 0 var(--space-050);font:600 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.mo-setting{display:flex;align-items:center;justify-content:space-between;gap:var(--space-200);padding:var(--space-150) 0;border-bottom:var(--border-width) solid var(--line-soft)}
.mo-settings__section .mo-setting:last-of-type{border-bottom:0}
.mo-setting__label{font:500 14px/20px var(--font-sans);color:var(--ink)}
.mo-setting__help{margin-top:2px;max-width:380px;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.mo-setting__value{font:400 14px/20px var(--font-sans);color:var(--ink-muted);white-space:nowrap}
.mo-settings__actions{display:flex;flex-wrap:wrap;gap:var(--space-100);padding-top:var(--space-100)}

/* ---------- Choice cards (two ways to start) ---------- */
.mo-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-150)}
.mo-choice{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-075);padding:var(--space-250);border:var(--border-width) solid transparent;border-radius:var(--radius-overlay);background:var(--bg-sheet);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.mo-choice:hover,.mo-choice:focus-visible{border-color:var(--ink);transform:translateY(-1px)}
.mo-choice__art{align-self:stretch;display:flex;align-items:center;gap:var(--space-100);height:64px;margin-bottom:var(--space-100);padding:0 var(--space-150);border-radius:var(--radius-card);background:var(--bg-canvas)}
.mo-choice__title{font:600 16px/20px var(--font-sans);color:var(--ink)}
.mo-choice__text{margin:0;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.mo-choice ul{margin:var(--space-050) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-050)}
.mo-choice li{display:flex;gap:var(--space-075);font:400 12px/16px var(--font-sans);color:var(--ink)}
.mo-choice li .mo-icon{color:var(--border-success);flex:none}
@media (max-width:720px){.mo-choices{grid-template-columns:1fr}}

/* ---------- Tour (first-run spotlight, max 5 steps) ---------- */
.mo-tour{position:fixed;inset:0;z-index:80}
.mo-tour__hole{position:fixed;border-radius:var(--radius-overlay);box-shadow:0 0 0 9999px rgba(0,0,0,.45),0 0 0 2px #fff inset;pointer-events:none;transition:all var(--duration-slow) var(--ease-out)}
.mo-tour__pop{position:fixed;width:300px;padding:var(--space-200) var(--space-200) var(--space-150);border-radius:var(--radius-overlay);background:var(--surface-overlay);box-shadow:var(--shadow-overlay);transition:top var(--duration-slow) var(--ease-out),left var(--duration-slow) var(--ease-out)}
.mo-tour__pop--static{position:relative}
.mo-tour__step{font:500 12px/16px var(--font-sans);color:var(--ink-muted)}
.mo-tour__title{margin:var(--space-050) 0;font:600 16px/20px var(--font-sans);color:var(--ink)}
.mo-tour__text{margin:0 0 var(--space-150);font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.mo-tour__foot{display:flex;align-items:center;gap:var(--space-075)}
.mo-tour__dots{display:flex;gap:var(--space-050);margin-right:auto}
.mo-tour__dots i{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--line-soft)}
.mo-tour__dots i[aria-current="step"]{background:var(--ink)}

/* ---------- Async flow inside a modal (ask → working → done | error) ---------- */
.mo-modal__state{display:grid;place-items:center;width:40px;height:40px;margin-bottom:var(--space-150);border-radius:var(--radius-pill);background:var(--bg-muted);color:var(--ink-muted)}
.mo-modal__state--success{background:var(--bg-success);color:var(--border-success)}
.mo-modal__state--danger{background:var(--bg-danger);color:var(--border-danger)}

/* ---------- Menu bar popover (macOS status item) ---------- */
.mo-mbpop{width:360px;display:flex;flex-direction:column;gap:var(--space-150);padding:var(--space-150);border-radius:var(--radius-overlay);background:var(--surface-overlay);box-shadow:var(--shadow-overlay)}
.mo-mbpop__head{display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-050)}
.mo-mbpop__status{display:inline-flex;align-items:center;gap:var(--space-075);font:500 12px/16px var(--font-sans);color:var(--ink-muted)}
.mo-mbpop__item{display:flex;flex-direction:column;gap:var(--space-100);padding:var(--space-150);border-radius:var(--radius-card);background:var(--bg-sheet)}
.mo-mbpop__top{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--space-150);align-items:center}
.mo-mbpop__foot{display:flex;justify-content:space-between;padding-top:var(--space-075);border-top:var(--border-width) solid var(--line-soft)}

/* ---------- Motion (tokens: --duration-*, --ease-*) ---------- */
/* Feedback: colour, border and background changes on every interactive element */
.mo-btn,.mo-iconbtn,.mo-navitem,.mo-segmented__opt,.mo-swatch,.mo-item__row,.mo-menu__item,.mo-page-btn,.mo-sort,.mo-switcher__btn,.mo-searchtrigger,.mo-input,.mo-checkbox,.mo-radio,.mo-nav a{transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.mo-btn:active:not(:disabled){transform:scale(.98)}
.mo-btn{transition-property:background-color,border-color,color,box-shadow,transform}
.mo-table tbody td{transition:background-color var(--duration-fast) var(--ease-out)}

/* Enter: elements arrive from where they come from */
@keyframes mo-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mo-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mo-dialog{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
.mo-menu{animation:mo-pop var(--duration-base) var(--ease-out);transform-origin:top left}
.mo-toast{animation:mo-rise var(--duration-slow) var(--ease-out)}
.mo-blanket{animation:mo-fade var(--duration-base) var(--ease-out)}
.mo-modal,.mo-palette{animation:mo-dialog var(--duration-slow) var(--ease-out)}
@media (max-width:720px){.mo-modal{animation-name:mo-rise}.mo-sidebar{animation:mo-rise var(--duration-slow) var(--ease-out)}}

/* Reduced motion: no movement, only short fades */
@media (prefers-reduced-motion:reduce){
  .mo *,.mo *::before,.mo *::after{transition-duration:var(--duration-instant)!important;animation-name:mo-fade!important;animation-duration:var(--duration-fast)!important}
  .mo-spinner{animation-name:mo-spin!important;animation-duration:2.4s!important}
  .mo-btn:active:not(:disabled){transform:none}
}

/* Logo also follows the OS theme and shadcn's .dark class outside the design-system viewer. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) .mo-logo__pos { display: none !important; }
  :root:not([data-theme="light"]):not(.light) .mo-logo__neg { display: block !important; }
}
:root.dark .mo-logo__pos { display: none !important; }
:root.dark .mo-logo__neg { display: block !important; }