@import url("../tokens/fonts.css");

/* ==========================================================================
   Moss — calm, organic and grounded
   Reads every colour, radius, spacing and shadow from tokens.css.
   Motion lives here (tokens.json has no motion family). Transform/opacity only.
   ========================================================================== */

:root {
  --ms-settle: cubic-bezier(.22, .61, .36, 1);   /* things coming to rest: cards, toasts, modal */
  --ms-roll:   cubic-bezier(.45, .05, .25, 1);   /* travel: the toggle pebble, segmented thumb */
  --ms-sink:   cubic-bezier(.4, 0, .6, 1);       /* press into sand */
  --ms-grow:   cubic-bezier(.3, .1, .2, 1);      /* vines and channels filling */
  --ms-t-press: 160ms;
  --ms-t-quick: 220ms;
  --ms-t-settle: 320ms;
  --ms-t-roll: 380ms;
  --ms-t-grow: 450ms;
  /* three pebble shapes: neighbours never match */
  --ms-pebble-1: 46% 54% 50% 50% / 56% 50% 50% 44%;
  --ms-pebble-2: 52% 48% 46% 54% / 48% 56% 44% 52%;
  --ms-pebble-3: 50% 50% 54% 46% / 52% 44% 56% 48%;
  --ms-stone-r: 26px 22px 24px 20px / 22px 26px 20px 24px;
  --ms-focus: 0 0 0 3px var(--ground), 0 0 0 5px var(--sprout);
  color-scheme: light;
}
[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- preview / layout helpers ---------- */
.ms-stage { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6); }
.ms-stage--top { align-items: flex-start; }
.ms-col { display: flex; flex-direction: column; gap: var(--space-3); }
.ms-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ms-spacer { flex: 1; }
.ms-overline { font-family: var(--font-body); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ms-display { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 52px; letter-spacing: -.01em; color: var(--ink); }
.ms-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 36px; letter-spacing: -.005em; color: var(--ink); }
.ms-heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 26px; color: var(--ink); }
.ms-body { margin: 0; font-size: 17px; line-height: 26px; }
.ms-small { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.ms-num { font-family: var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.ms-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-icon { width: 1.25em; height: 1.25em; flex: none; display: block; }

/* ---------- Button: a smooth pebble pressed into sand ---------- */
.ms-btn {
  --_bg: var(--stone); --_fg: var(--ink); --_sh: var(--shadow-pebble); --_h: 44px;
  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--_h); padding: 0 calc(var(--_h) * .45); border: 0; margin: 0;
  border-radius: 24px 20px 22px 18px / 20px 24px 18px 22px;
  background: var(--_bg); color: var(--_fg); box-shadow: var(--_sh);
  font: 500 15px/20px var(--font-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform var(--ms-t-settle) var(--ms-settle), box-shadow var(--ms-t-settle) var(--ms-settle), background-color var(--ms-t-quick) var(--ms-settle);
}
.ms-btn[data-pebble="2"] { border-radius: 20px 24px 18px 22px / 24px 18px 22px 20px; }
.ms-btn[data-pebble="3"] { border-radius: 22px 18px 24px 20px / 18px 22px 20px 24px; }
/* the sand halo pushed aside when pressed */
.ms-btn::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sand) 70%, transparent); opacity: 0; transform: scale(.96);
  transition: opacity var(--ms-t-quick) var(--ms-settle), transform var(--ms-t-settle) var(--ms-settle);
}
.ms-btn:hover { transform: translateY(-1px); }
.ms-btn:active, .ms-btn.is-pressed { transform: translateY(1px) scale(.98); box-shadow: var(--shadow-press); transition-duration: var(--ms-t-press); transition-timing-function: var(--ms-sink); }
.ms-btn:active::after, .ms-btn.is-pressed::after { opacity: 1; transform: scale(1); transition-duration: var(--ms-t-press); }
.ms-btn:focus-visible { outline: none; box-shadow: var(--_sh), var(--ms-focus); }
.ms-btn--primary { --_bg: var(--sprout); --_fg: var(--on-sprout); }
.ms-btn--danger { --_bg: var(--clay); --_fg: var(--on-sprout); }
.ms-btn--ghost { --_bg: transparent; --_sh: none; }
.ms-btn--ghost:hover { background: var(--stone-sunk); transform: none; }
.ms-btn--ghost:active { box-shadow: var(--shadow-groove); }
.ms-btn--ghost::after { display: none; }
.ms-btn--sm { --_h: 36px; font-size: 14px; }
.ms-btn--lg { --_h: 52px; font-size: 17px; }
.ms-btn--block { display: flex; width: 100%; }
.ms-btn:disabled, .ms-btn[aria-disabled="true"] { --_bg: var(--stone-sunk); --_fg: var(--ink-soft); --_sh: none; cursor: not-allowed; transform: none; box-shadow: none; }
.ms-btn:disabled::after { display: none; }
.ms-btn--icon { padding: 0; width: var(--_h); }
.ms-btn--icon.ms-btn--round { border-radius: var(--ms-pebble-1); }
.ms-btn--icon.ms-btn--round[data-pebble="2"] { border-radius: var(--ms-pebble-2); }
.ms-btn--icon.ms-btn--round[data-pebble="3"] { border-radius: var(--ms-pebble-3); }
.ms-btn[aria-pressed="true"] { --_bg: var(--sprout-tint); --_fg: var(--ink); }

/* ---------- Toggle: a pebble rolling in a groove ---------- */
.ms-toggle { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: 17px; line-height: 24px; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.ms-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ms-toggle__groove { position: relative; flex: none; width: 54px; height: 30px; border-radius: 16px 14px 15px 14px / 15px 16px 14px 15px; background: var(--stone-sunk); box-shadow: var(--shadow-groove), inset 0 0 0 1px color-mix(in oklab, var(--edge) 45%, transparent); overflow: hidden; }
.ms-toggle__moss { position: absolute; inset: 0; background: var(--sprout); border-radius: inherit; opacity: 0; transform: scaleX(.4); transform-origin: left center; transition: opacity var(--ms-t-roll) var(--ms-roll), transform var(--ms-t-roll) var(--ms-roll); }
.ms-toggle__pebble {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: var(--ms-pebble-1);
  background: radial-gradient(circle at 34% 30%, color-mix(in oklab, var(--stone) 70%, #fff) 0 18%, var(--stone) 46%);
  box-shadow: var(--shadow-pebble);
  transition: transform var(--ms-t-roll) var(--ms-roll);
}
[data-theme="dark"] .ms-toggle__pebble { background: radial-gradient(circle at 34% 30%, color-mix(in oklab, var(--ink-soft) 75%, var(--stone)) 0 18%, color-mix(in oklab, var(--ink-soft) 50%, var(--stone)) 46%); }
.ms-toggle__pebble::after { content: ""; position: absolute; left: 6px; top: 13px; width: 4px; height: 3px; border-radius: 50%; background: var(--edge); opacity: .45; }
.ms-toggle input:checked + .ms-toggle__groove .ms-toggle__moss { opacity: 1; transform: scaleX(1); }
.ms-toggle input:checked + .ms-toggle__groove .ms-toggle__pebble { transform: translateX(24px) rotate(160deg); }
.ms-toggle:active .ms-toggle__pebble { transform: scale(.94); }
.ms-toggle:active input:checked + .ms-toggle__groove .ms-toggle__pebble { transform: translateX(24px) rotate(160deg) scale(.94); }
.ms-toggle input:focus-visible + .ms-toggle__groove { box-shadow: var(--shadow-groove), var(--ms-focus); }
.ms-toggle input:disabled ~ * { opacity: .55; }
.ms-toggle:has(input:disabled) { cursor: not-allowed; }

/* ---------- Checkbox: a tiny leaf sprouts from the tick ---------- */
.ms-check, .ms-radio { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; color: var(--ink); font-size: 17px; line-height: 24px; -webkit-tap-highlight-color: transparent; }
.ms-check input, .ms-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ms-check__box { position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; box-sizing: border-box; border-radius: 8px 7px 9px 6px / 7px 9px 6px 8px; border: 1.5px solid var(--edge); background: var(--stone); box-shadow: var(--shadow-groove); transition: background-color var(--ms-t-quick) var(--ms-settle), border-color var(--ms-t-quick) var(--ms-settle), transform var(--ms-t-press) var(--ms-sink); }
.ms-check__box svg { position: absolute; left: -1.5px; top: -1.5px; width: 22px; height: 22px; overflow: visible; }
.ms-check__tick { fill: none; stroke: var(--on-sprout); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 8px 15px; transform: scale(.2) rotate(-25deg); opacity: 0; transition: transform var(--ms-t-settle) var(--ms-settle), opacity var(--ms-t-quick) linear; }
.ms-check__leaf { fill: var(--on-sprout); transform-origin: 15px 9px; transform: scale(0) rotate(-40deg); opacity: 0; transition: transform var(--ms-t-settle) var(--ms-settle) 120ms, opacity 1ms linear 120ms; }
.ms-check input:checked + .ms-check__box { background: var(--sprout); border-color: var(--sprout); box-shadow: none; }
.ms-check input:checked + .ms-check__box .ms-check__tick { transform: none; opacity: 1; }
.ms-check input:checked + .ms-check__box .ms-check__leaf { transform: none; opacity: 1; }
.ms-check:active .ms-check__box, .ms-radio:active .ms-radio__dot { transform: scale(.9); }
.ms-check input:focus-visible + .ms-check__box, .ms-radio input:focus-visible + .ms-radio__dot { box-shadow: var(--ms-focus); }
.ms-check__text, .ms-radio__text { display: flex; flex-direction: column; }
.ms-check__hint, .ms-radio__hint { font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.ms-check input:checked ~ .ms-check__text.is-strike .ms-check__label { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--edge); }
.ms-check:has(input:disabled), .ms-radio:has(input:disabled) { opacity: .55; cursor: not-allowed; }

/* Radio: a seed settles into a round well */
.ms-radio__dot { position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; box-sizing: border-box; border-radius: var(--ms-pebble-2); border: 1.5px solid var(--edge); background: var(--stone); box-shadow: var(--shadow-groove); transition: border-color var(--ms-t-quick) var(--ms-settle), transform var(--ms-t-press) var(--ms-sink); }
.ms-radio__dot::after { content: ""; position: absolute; inset: 3.5px; border-radius: var(--ms-pebble-3); background: var(--sprout); transform: scale(0) translateY(-6px); opacity: 0; transition: transform var(--ms-t-settle) var(--ms-settle), opacity var(--ms-t-quick) linear; }
.ms-radio input:checked + .ms-radio__dot { border-color: var(--sprout); }
.ms-radio input:checked + .ms-radio__dot::after { transform: none; opacity: 1; }
.ms-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ms-group legend { padding: 0; margin-bottom: var(--space-3); font: 500 15px/20px var(--font-body); color: var(--ink); }

/* ---------- TextField ---------- */
.ms-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ms-field__label { font: 500 15px/20px var(--font-body); letter-spacing: .01em; color: var(--ink); }
.ms-field__wrap { position: relative; display: flex; align-items: center; }
.ms-field__icon { position: absolute; left: 14px; color: var(--ink-soft); pointer-events: none; }
.ms-field__input {
  box-sizing: border-box; width: 100%; min-height: 46px; padding: 11px 16px; margin: 0;
  border: 1.5px solid var(--edge); border-radius: var(--radius-md); background: var(--stone); color: var(--ink);
  box-shadow: var(--shadow-groove); font: 400 17px/22px var(--font-body); outline: none; resize: vertical;
  transition: border-color var(--ms-t-quick) var(--ms-settle), box-shadow var(--ms-t-quick) var(--ms-settle);
}
textarea.ms-field__input { min-height: 112px; line-height: 26px; }
.ms-field--icon .ms-field__input { padding-left: 44px; }
.ms-field__input::placeholder { color: var(--ink-soft); opacity: 1; }
.ms-field__input:hover { border-color: var(--ink-soft); }
.ms-field__input:focus { border-color: var(--sprout); box-shadow: var(--shadow-groove), 0 0 0 4px var(--sprout-tint); }
.ms-field__msg { display: flex; gap: 6px; align-items: flex-start; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.ms-field__msg .ms-icon { width: 18px; height: 18px; margin-top: 2px; }
.ms-field.is-error .ms-field__input { border-color: var(--clay); }
.ms-field.is-error .ms-field__input:focus { box-shadow: var(--shadow-groove), 0 0 0 4px var(--clay-tint); }
.ms-field.is-error .ms-field__msg { color: var(--clay); animation: ms-settle-in var(--ms-t-settle) var(--ms-settle); }
.ms-field__input:disabled { background: var(--stone-sunk); color: var(--ink-soft); cursor: not-allowed; }

/* ---------- SegmentedControl: a pebble thumb slides along the tray ---------- */
.ms-seg { --_n: 3; --_i: 0; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--radius-md); background: var(--stone-sunk); box-shadow: var(--shadow-groove); isolation: isolate; }
.ms-seg__thumb { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--_n)); border-radius: 12px 10px 12px 9px / 10px 12px 9px 12px; background: var(--stone); box-shadow: var(--shadow-pebble); transform: translateX(calc(var(--_i) * 100%)); transition: transform var(--ms-t-roll) var(--ms-roll); }
.ms-seg__opt { position: relative; min-width: 0; height: 36px; padding: 0 var(--space-4); border: 0; background: none; border-radius: 10px; color: var(--ink-soft); font: 500 15px/20px var(--font-body); letter-spacing: .01em; cursor: pointer; white-space: nowrap; transition: color var(--ms-t-quick) var(--ms-settle); }
.ms-seg__opt:hover { color: var(--ink); }
.ms-seg__opt[aria-checked="true"] { color: var(--ink); }
.ms-seg__opt:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sprout); }
.ms-seg--block { display: grid; width: 100%; }

/* ---------- Card: a stone resting on the ground ---------- */
.ms-card { position: relative; box-sizing: border-box; min-width: 0; padding: var(--space-6); border-radius: var(--ms-stone-r); background: var(--stone); color: var(--ink); box-shadow: var(--shadow-rest); }
.ms-card[data-pebble="2"] { border-radius: 22px 26px 20px 24px / 26px 20px 24px 22px; }
.ms-card[data-pebble="3"] { border-radius: 24px 20px 26px 22px / 20px 24px 22px 26px; }
.ms-card--interactive { cursor: pointer; transition: transform var(--ms-t-settle) var(--ms-settle), box-shadow var(--ms-t-settle) var(--ms-settle); }
.ms-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.ms-card--interactive:active { transform: translateY(0); box-shadow: var(--shadow-rest); transition-duration: var(--ms-t-press); }
.ms-card--interactive:focus-visible { outline: none; box-shadow: var(--shadow-rest), var(--ms-focus); }
.ms-card--sunk { background: var(--stone-sunk); box-shadow: var(--shadow-groove); }
.ms-card__head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.ms-card__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-card__foot { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-6); }

/* ---------- Badge & Tag ---------- */
.ms-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; box-sizing: border-box; border-radius: 9px 8px 10px 8px / 8px 10px 8px 9px; background: var(--stone-sunk); color: var(--ink); font: 500 13px/16px var(--font-body); letter-spacing: .02em; white-space: nowrap; }
.ms-badge__dot { width: 7px; height: 7px; border-radius: var(--ms-pebble-1); background: var(--edge); flex: none; }
.ms-badge--sprout { background: var(--sprout-tint); } .ms-badge--sprout .ms-badge__dot { background: var(--sprout); }
.ms-badge--clay { background: var(--clay-tint); } .ms-badge--clay .ms-badge__dot { background: var(--clay); }
.ms-badge--slate .ms-badge__dot { background: var(--slate); }
.ms-badge--sand { background: var(--sand); } .ms-badge--sand .ms-badge__dot { background: var(--ink-soft); }
.ms-badge--solid { background: var(--sprout); color: var(--on-sprout); }
.ms-badge--count { min-width: 22px; height: 22px; padding: 0 6px; justify-content: center; border-radius: var(--ms-pebble-2); background: var(--clay); color: var(--on-sprout); font-size: 12px; }
.ms-tag { padding-right: 4px; transition: opacity var(--ms-t-quick) linear, transform var(--ms-t-settle) var(--ms-settle); }
.ms-tag__x { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--ms-pebble-3); background: none; color: var(--ink-soft); cursor: pointer; }
.ms-tag__x:hover { background: color-mix(in oklab, var(--ink) 10%, transparent); color: var(--ink); }
.ms-tag__x:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sprout); }
.ms-tag__x .ms-icon { width: 14px; height: 14px; }
.ms-tag.is-leaving { opacity: 0; transform: scale(.85) translateY(2px); }

/* ---------- Avatar: a pebble with initials ---------- */
.ms-avatar { --_s: 40px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--_s); height: var(--_s); border-radius: var(--ms-pebble-1); background: var(--sand); color: var(--ink); font: 600 calc(var(--_s) * .38)/1 var(--font-display); box-shadow: var(--shadow-pebble); }
.ms-avatar[data-pebble="2"] { border-radius: var(--ms-pebble-2); } .ms-avatar[data-pebble="3"] { border-radius: var(--ms-pebble-3); }
.ms-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ms-avatar--sprout { background: var(--sprout-tint); } .ms-avatar--clay { background: var(--clay-tint); } .ms-avatar--stone { background: var(--stone); }
.ms-avatar--sm { --_s: 32px; } .ms-avatar--lg { --_s: 56px; }
.ms-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 9px; min-height: 9px; border-radius: var(--ms-pebble-3); background: var(--sprout); box-shadow: 0 0 0 2px var(--ground); }
.ms-avatar__status--away { background: var(--sand); } .ms-avatar__status--busy { background: var(--clay); }
.ms-stack { display: inline-flex; }
.ms-stack .ms-avatar { box-shadow: 0 0 0 2.5px var(--ground); transition: transform var(--ms-t-settle) var(--ms-settle); }
.ms-stack .ms-avatar + .ms-avatar { margin-left: calc(var(--_s) * -.2); }
.ms-stack .ms-avatar:hover { transform: translateY(-3px); z-index: 1; }

/* ---------- Toast ---------- */
.ms-toasts { position: fixed; z-index: 60; left: 50%; bottom: var(--space-6); transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: var(--space-3); width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.ms-toasts--inline { position: static; transform: none; width: 100%; max-width: 400px; }
.ms-toast { pointer-events: auto; box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--stone); color: var(--ink); box-shadow: var(--shadow-lift); animation: ms-rise var(--ms-t-settle) var(--ms-settle) both; }
.ms-toast.is-leaving { animation: ms-sink-out var(--ms-t-quick) var(--ms-sink) both; }
.ms-toast__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--ms-pebble-1); background: var(--sprout-tint); color: var(--ink); }
.ms-toast--clay .ms-toast__icon { background: var(--clay-tint); }
.ms-toast--slate .ms-toast__icon { background: var(--stone-sunk); }
.ms-toast__text { flex: 1; min-width: 0; padding-top: 1px; }
.ms-toast__title { margin: 0; font: 600 17px/24px var(--font-display); }
.ms-toast__body { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.ms-toast .ms-btn--icon { margin: -4px -4px 0 0; }

/* ---------- Modal ---------- */
.ms-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--space-4); }
.ms-modal__scrim { position: absolute; inset: 0; background: color-mix(in oklab, var(--bark) 42%, transparent); animation: ms-fade var(--ms-t-settle) var(--ms-settle) both; }
.ms-modal__panel { position: relative; box-sizing: border-box; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: var(--space-6); border-radius: 30px 26px 28px 24px / 26px 30px 24px 28px; background: var(--stone); color: var(--ink); box-shadow: var(--shadow-lift); animation: ms-rise-lg var(--ms-t-settle) var(--ms-settle) both; }
.ms-modal__head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.ms-modal__head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ms-modal__body { display: flex; flex-direction: column; gap: var(--space-4); }
.ms-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.ms-modal.is-leaving .ms-modal__scrim { animation: ms-fade-out var(--ms-t-quick) linear both; }
.ms-modal.is-leaving .ms-modal__panel { animation: ms-sink-out var(--ms-t-quick) var(--ms-sink) both; }

/* ---------- Progress: a stone channel that a vine grows along ---------- */
.ms-progress { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ms-progress__top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 15px; line-height: 20px; }
.ms-progress__label { font-weight: 500; color: var(--ink); }
.ms-progress__value { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ms-progress__track { position: relative; height: 12px; }
.ms-progress__channel { position: absolute; inset: 0; overflow: hidden; border-radius: 8px 6px 7px 6px / 6px 8px 6px 7px; background: var(--stone-sunk); box-shadow: var(--shadow-groove); }
.ms-progress__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--sprout); transform: translateX(calc(var(--_v, 0) * 1% - 100%)); transition: transform var(--ms-t-grow) var(--ms-grow); }
.ms-progress__vine { position: absolute; inset: 0; pointer-events: none; transform: translateX(calc(var(--_v, 0) * 1% - 100%)); transition: transform var(--ms-t-grow) var(--ms-grow); }
.ms-progress__leaf { position: absolute; right: -7px; top: -9px; width: 16px; height: 16px; color: var(--sprout); transform-origin: 2px 14px; transition: transform var(--ms-t-grow) var(--ms-settle); }
.ms-progress__leaf path { fill: currentColor; stroke: var(--stone); stroke-width: 1.2; }
.ms-progress.is-growing .ms-progress__leaf { animation: ms-leaf-nod var(--ms-t-grow) var(--ms-settle); }
.ms-progress[data-v="0"] .ms-progress__leaf { opacity: 0; }
.ms-progress--clay .ms-progress__fill { background: var(--clay); }
.ms-progress--clay .ms-progress__leaf { display: none; }
.ms-progress--thin .ms-progress__track { height: 8px; }

/* ---------- Widgets ---------- */
.ms-widget { width: 340px; max-width: 100%; }
.ms-widget__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }

/* Mood check-in: five pebbles */
.ms-mood__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); }
.ms-mood__opt { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; padding: 4px 0; border: 0; background: none; color: var(--ink-soft); font: 500 13px/16px var(--font-body); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ms-mood__stone { position: relative; display: block; width: var(--_s, 36px); height: calc(var(--_s, 36px) * .82); border-radius: var(--ms-pebble-1); background: var(--_c, var(--sand)); box-shadow: var(--shadow-pebble); transition: transform var(--ms-t-settle) var(--ms-settle), box-shadow var(--ms-t-settle) var(--ms-settle); }
.ms-mood__opt:nth-child(2n) .ms-mood__stone { border-radius: var(--ms-pebble-2); }
.ms-mood__opt:nth-child(3n) .ms-mood__stone { border-radius: var(--ms-pebble-3); }
.ms-mood__opt:hover .ms-mood__stone { transform: translateY(-3px); }
.ms-mood__opt[aria-checked="true"] { color: var(--ink); }
.ms-mood__opt[aria-checked="true"] .ms-mood__stone { transform: translateY(2px) scale(.96); box-shadow: var(--shadow-press), 0 0 0 4px var(--ground), 0 0 0 6px var(--sprout); }
.ms-mood__sprig { position: absolute; left: 50%; top: -15px; width: 16px; height: 16px; margin-left: -8px; color: var(--sprout); opacity: 0; transform: scale(0); transform-origin: 50% 100%; transition: transform var(--ms-t-settle) var(--ms-settle) 80ms, opacity 1ms linear 80ms; }
.ms-mood__opt[aria-checked="true"] .ms-mood__sprig { opacity: 1; transform: none; }
.ms-mood__opt:focus-visible { outline: none; } .ms-mood__opt:focus-visible .ms-mood__stone { box-shadow: var(--shadow-pebble), var(--ms-focus); }
.ms-mood__note { margin: var(--space-4) 0 0; min-height: 22px; font-size: 15px; line-height: 22px; color: var(--ink-soft); }

/* Focus timer */
.ms-timer__body { display: flex; align-items: center; gap: var(--space-6); }
.ms-timer__ring { position: relative; width: 124px; height: 124px; flex: none; }
.ms-timer__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ms-timer__groove { fill: none; stroke: var(--stone-sunk); stroke-width: 12; }
.ms-timer__arc { fill: none; stroke: var(--sprout); stroke-width: 12; stroke-linecap: round; }
.ms-timer__time { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ms-timer__time b { display: block; font: 500 30px/34px var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.ms-timer__time span { display: block; font-size: 13px; line-height: 16px; color: var(--ink-soft); }
.ms-timer__side { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1; }
.ms-timer__side .ms-seg__opt { padding: 0 var(--space-2); }
.ms-timer .ms-card__foot { margin-top: var(--space-4); }
.ms-timer.is-running .ms-timer__ring { animation: ms-breathe 4s ease-in-out infinite; }

/* Streak stones */
.ms-streak__count { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-4); }
.ms-streak__count b { font: 500 30px/34px var(--font-display); font-variant-numeric: lining-nums; }
.ms-streak__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.ms-streak__day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink-soft); font: 500 13px/16px var(--font-body); }
.ms-streak__stone { position: relative; display: grid; place-items: center; width: 100%; max-width: 38px; aspect-ratio: 1.1; border-radius: var(--ms-pebble-1); background: var(--stone-sunk); box-shadow: var(--shadow-groove); color: var(--on-sprout); transition: background-color var(--ms-t-settle) var(--ms-settle), transform var(--ms-t-settle) var(--ms-settle); }
.ms-streak__day:nth-child(2n) .ms-streak__stone { border-radius: var(--ms-pebble-2); }
.ms-streak__day:nth-child(3n) .ms-streak__stone { border-radius: var(--ms-pebble-3); }
.ms-streak__day.is-done .ms-streak__stone { background: var(--sprout); box-shadow: var(--shadow-pebble); }
.ms-streak__day .ms-streak__stone svg { width: 16px; height: 16px; opacity: 0; transform: scale(.3); transition: transform var(--ms-t-settle) var(--ms-settle), opacity var(--ms-t-quick) linear; }
.ms-streak__day.is-done .ms-streak__stone svg { opacity: 1; transform: none; }
.ms-streak__day.is-today { color: var(--ink); }
.ms-streak__day.is-today:not(.is-done) .ms-streak__stone { background: var(--sprout-tint); box-shadow: inset 0 0 0 1.5px var(--sprout); }
button.ms-streak__day { cursor: pointer; }
button.ms-streak__day:hover .ms-streak__stone { transform: translateY(-2px); }
button.ms-streak__day:active .ms-streak__stone { transform: translateY(1px) scale(.94); }
button.ms-streak__day:focus-visible { outline: none; } button.ms-streak__day:focus-visible .ms-streak__stone { box-shadow: var(--ms-focus); }

/* A barely-there sway for one decorative sprig */
.ms-sprig { display: inline-block; width: 28px; height: 28px; color: var(--sprout); transform-origin: 50% 100%; animation: ms-sway 7s ease-in-out infinite; }
.ms-sprig path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ms-sprig .ms-sprig__leaf { fill: currentColor; stroke: none; }

/* ---------- keyframes ---------- */
@keyframes ms-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ms-rise-lg { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ms-sink-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes ms-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ms-fade-out { to { opacity: 0; } }
@keyframes ms-settle-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ms-leaf-nod { 0% { transform: rotate(0); } 45% { transform: rotate(-18deg); } 100% { transform: rotate(0); } }
@keyframes ms-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes ms-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes ms-settle-stone { 0% { transform: translateY(-6px) scale(.9); } 60% { transform: translateY(1px) scale(1.02); } 100% { transform: none; } }
.ms-is-settling { animation: ms-settle-stone var(--ms-t-roll) var(--ms-settle); }

/* Reduced motion: no movement, every state change kept */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .ms-sprig, .ms-timer.is-running .ms-timer__ring { animation: none !important; }
  .ms-btn:hover, .ms-card--interactive:hover, .ms-mood__opt:hover .ms-mood__stone, button.ms-streak__day:hover .ms-streak__stone, .ms-stack .ms-avatar:hover { transform: none; }
}