/* Momiko design system, exported from Claude Design: its tokens, then its components' styles. Used only by the phone mockups on the home page. */
/* Written from tokens.json: the design system's stylesheet reads these variables, but it publishes no tokens.css yet. */
:root {
  --font-display: Nunito, "Hiragino Sans", "PingFang SC", "Apple SD Gothic Neo", "Noto Sans CJK", system-ui, sans-serif;
  --font-ui: Rubik, "Hiragino Sans", "PingFang SC", "Apple SD Gothic Neo", "Noto Sans CJK", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-chip: 14px; --radius-card: 24px; --radius-tile: 28px; --radius-sheet: 32px; --radius-pill: 999px;
  --target-min: 44px; --button-height: 56px; --plus-size: 60px; --quick-height: 88px; --tabbar-height: 64px; --minitimer-height: 48px;
  --grain-day: 0.03; --grain-night: 0.015; --illustration-night: 0.7; --disabled: 0.4;
}
:root, [data-theme="day"] {
  --page: #faf6ef; --card: #fefcf9; --sunken: #f3eee5; --hairline: #e6ded4; --text: #3f2d25; --text2: #725f54;
  --sea-fill: #ace1e4; --sea-soft: #daf5f6; --sea-ink: #04686c;
  --shell-fill: #f8c8c8; --shell-soft: #fee8e8; --shell-ink: #884246;
  --cream-fill: #e3d5ad; --cream-soft: #f5eeda; --cream-ink: #6e5803;
  --pear-fill: #d1dcb4; --pear-soft: #ecf2dd; --pear-ink: #54621c;
  --kelp-fill: #bde1c3; --kelp-soft: #e2f4e5; --kelp-ink: #2d693d;
  --sky-fill: #b5dcf6; --sky-soft: #dff2fe; --sky-ink: #16618a;
  --lavender-fill: #d5d0f8; --lavender-soft: #eeecfe; --lavender-ink: #5b508c;
  --mallow-fill: #eec9e4; --mallow-soft: #fbe8f6; --mallow-ink: #7b4570;
  --apricot-fill: #f2ceb3; --apricot-soft: #feeadd; --apricot-ink: #824c1c;
  --primary: #81cdd1; --on-primary: #3f2d25;
  --amber-fill: #fac787; --amber-soft: #ffedd8; --amber-ink: #885703;
  --coral-soft: #fee9e6; --coral-ink: #a43c33;
  --scrim: rgba(63,45,37,0.30); --pebble: #fefcf9; --knob: #fefcf9;
  --imprint-sea: 0 8px 22px rgba(4,104,108,0.12); --imprint-shell: 0 8px 22px rgba(136,66,70,0.12);
  --imprint-cream: 0 8px 22px rgba(110,88,3,0.12); --imprint-pear: 0 8px 22px rgba(84,98,28,0.12);
  --imprint-kelp: 0 8px 22px rgba(45,105,61,0.12); --imprint-sky: 0 8px 22px rgba(22,97,138,0.12);
  --imprint-lavender: 0 8px 22px rgba(91,80,140,0.12); --imprint-mallow: 0 8px 22px rgba(123,69,112,0.12);
  --imprint-apricot: 0 8px 22px rgba(130,76,28,0.12); --imprint-amber: 0 8px 22px rgba(136,87,3,0.12);
  --imprint-sheet: 0 -6px 24px rgba(4,104,108,0.10);
  --focus-ring: 0 0 0 2px #faf6ef, 0 0 0 4px #04686c;
}
[data-theme="night"] {
  --page: #17110e; --card: #211a16; --sunken: #2a231e; --hairline: #352d28; --text: #ded6cc; --text2: #b2a79c;
  --sea-fill: #285c5e; --sea-soft: #172f30; --sea-ink: #8bd7da;
  --shell-fill: #6e4647; --shell-soft: #382424; --shell-ink: #f4b4b5;
  --cream-fill: #5d522e; --cream-soft: #2f2a19; --cream-ink: #d9c68f;
  --pear-fill: #4e5734; --pear-soft: #282c1b; --pear-ink: #c1cf98;
  --kelp-fill: #3c5b42; --kelp-soft: #1f2e22; --kelp-ink: #a5d6ae;
  --sky-fill: #34576d; --sky-soft: #1c2c37; --sky-ink: #99cff3;
  --lavender-fill: #524d6f; --lavender-soft: #2a2838; --lavender-ink: #c6c0f5;
  --mallow-fill: #66475f; --mallow-soft: #342530; --mallow-ink: #e7b5db;
  --apricot-fill: #6a4b33; --apricot-soft: #36261b; --apricot-ink: #edbc97;
  --primary: #4e9397; --on-primary: #17110e;
  --amber-fill: #5e4826; --amber-soft: #332819; --amber-ink: #e6c092;
  --coral-soft: #382422; --coral-ink: #f8a59a;
  --scrim: rgba(10,7,6,0.6); --pebble: #352d28; --knob: #b2a79c;
  --imprint-sea: none; --imprint-shell: none; --imprint-cream: none; --imprint-pear: none; --imprint-kelp: none;
  --imprint-sky: none; --imprint-lavender: none; --imprint-mallow: none; --imprint-apricot: none; --imprint-amber: none;
  --imprint-sheet: none;
  --focus-ring: 0 0 0 2px #17110e, 0 0 0 4px #8bd7da;
}

/* Momiko — «Soft Print» component styles (brief §4.8). Colours, spaces, radii, imprints come from tokens.css. */
/* Paper grain tiles (3 % day, 1.5 % night) */
:root, [data-theme="day"] { --mk-grain: url("/landing/grain-2.png"); }
[data-theme="night"] { --mk-grain: url("/landing/grain-1.png"); }

:root { --mk-corner: superellipse(1.6); }
body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
.mk { font-family: var(--font-ui); color: var(--text); font-variant-numeric: tabular-nums; font-size: 17px; line-height: 24px; }
.mk, .mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
.mk :where(button, input):focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mk-ic { flex: none; display: block; }
[dir="rtl"] .mk-flip { transform: scaleX(-1); }

/* Paper: grain on page and large colour fields only (cards, text, small elements stay clean) */
.mk-paper, .mk-grain { background-image: var(--mk-grain); background-repeat: repeat; background-size: 128px 128px; }
/* Pebble: continuous corners everywhere a radius is set on a shape */
.mk-pb { corner-shape: var(--mk-corner); }

/* Press = “pressing in”: 97 %, imprint shrinks, fill one step darker. No ripple anywhere. */
.mk-press { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease-out, filter .2s ease-out; }
:root, [data-theme="day"] { --mk-press: rgba(63,45,37,0.07); }
[data-theme="night"] { --mk-press: rgba(10,7,6,0.22); }
.mk-press:active, .mk-press.is-pressed { transform: scale(.97); background-image: linear-gradient(var(--mk-press), var(--mk-press)); box-shadow: none !important; }
[data-theme="night"] .mk-press { transition: none; }
@keyframes mk-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mk-rise { animation: mk-rise .28s cubic-bezier(.2,.7,.3,1) both; }
[data-theme="night"] .mk-rise { animation: none; }
@media (prefers-reduced-motion: reduce) { .mk * { transition: none !important; animation: none !important; } }

/* text styles */
.mk-ts { font: 500 17px/22px var(--font-ui); }
.mk-tl { font: 700 28px/34px var(--font-display); }
.mk-tm { font: 700 21px/26px var(--font-display); }
.mk-body { font: 400 17px/24px var(--font-ui); }
.mk-bs { font: 400 15px/20px var(--font-ui); }
.mk-bs2 { font: 400 15px/20px var(--font-ui); color: var(--text2); }
.mk-cap { font: 400 13px/18px var(--font-ui); color: var(--text2); }
.mk-link { color: var(--sea-ink); text-decoration: underline; text-underline-offset: 2px; }
/* Numbers are the hero: figure Nunito 800, unit Rubik 17 in text2 */
.mk-stat { color: var(--text); white-space: nowrap; }
.mk-stat-n { font: 800 32px/38px var(--font-display); }
.mk-stat-u { font: 400 17px/22px var(--font-ui); color: var(--text2); }
.mk-stat-small .mk-stat-n { font-size: 28px; line-height: 34px; }
.mk-stat-suffix { font: 400 17px/22px var(--font-ui); color: var(--text2); }
.mk-hero { font: 800 52px/56px var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }

/* preview scaffolding */
.mk-dn { display: flex; gap: 16px; padding: 16px; align-items: flex-start; flex-wrap: wrap; background: var(--hairline); }
.mk-pane { flex: 1 1 380px; max-width: 425px; background-color: var(--page); border-radius: 24px; corner-shape: var(--mk-corner); padding: 16px; position: relative; overflow: hidden; }
.mk-pane-flush { padding: 40px 0 0; }
.mk-pane-label { font: 500 13px/18px var(--font-ui); color: var(--text2); margin-bottom: 12px; }
.mk-pane-flush .mk-pane-label { position: absolute; top: 12px; inset-inline-start: 16px; }
.mk-stack { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mk-stack-x { display: flex; flex-direction: column; gap: 12px; }
.mk-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mk-note { font: 400 13px/18px var(--font-ui); color: var(--text2); }

/* ---------- Buttons ---------- */
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; min-width: 56px; padding: 0 28px; border-radius: 999px; corner-shape: var(--mk-corner); font: 500 17px/22px var(--font-ui); white-space: nowrap; }
.mk-btn-m { height: 44px; padding: 0 20px; }
.mk-btn-block { display: flex; width: 100%; }
.mk-btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--imprint-sea); }
.mk-btn-secondary { background: var(--sea-soft); color: var(--sea-ink); }
.mk-btn-text { color: var(--sea-ink); height: 44px; padding: 0 12px; }
.mk-btn-danger { background: var(--coral-soft); color: var(--coral-ink); }
.mk-btn:disabled, .mk-sso:disabled { opacity: var(--disabled); cursor: default; box-shadow: none; }
.mk-btn-loading:disabled, .mk-sso-loading:disabled { opacity: 1; }
.mk-dots { display: inline-flex; gap: 6px; }
.mk-dots i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35; animation: mk-dot 1.2s infinite ease-in-out; }
.mk-dots i:nth-child(2) { animation-delay: .2s; } .mk-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes mk-dot { 40% { opacity: 1; } }
[data-theme="night"] .mk-dots i { animation: none; opacity: .7; }

/* Sign in with Apple / Google — platform colours, not ours (Apple allows only black or white). */
.mk-sso { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; height: 56px; border-radius: 999px; corner-shape: var(--mk-corner); font: 500 17px/22px var(--font-ui); }
.mk-sso-apple { background: #000000; color: #ffffff; }
.mk-sso-google { background: #f2f2f2; color: #1f1f1f; }
[data-theme="night"] .mk-sso-apple { background: #ffffff; color: #000000; }
[data-theme="night"] .mk-sso-google { background: #131314; color: #e3e3e3; box-shadow: inset 0 0 0 1px #8e918f; }

/* ---------- Quick log: pebbles in the module fill with their own imprint ---------- */
.mk-qlrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mk-qlrow-grid { grid-template-columns: repeat(2, 1fr); }
.mk-ql { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 88px; padding: 10px 2px; border-radius: 28px; corner-shape: var(--mk-corner); background: var(--m-fill); color: var(--text); text-align: center; box-shadow: var(--m-imprint); }
.mk-ql-l { font: 500 15px/18px var(--font-ui); hyphens: auto; overflow-wrap: normal; max-width: 100%; }
.mk-ql-night { min-height: 101px; }

/* ---------- Now: a stack of pastel bands ---------- */
.mk-now { display: flex; flex-direction: column; gap: 4px; }
.mk-now-r { display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 16px; min-height: 76px; background: var(--m-soft); border-radius: 10px; corner-shape: var(--mk-corner); }
.mk-now-r:first-child { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.mk-now-r:last-child { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.mk-now-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mk-now-l { font: 500 15px/20px var(--font-ui); color: var(--m-ink); }
.mk-now-aside { display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.mk-now-next { font: 800 21px/26px var(--font-display); color: var(--m-ink); }
.mk-now-rec { font: 500 17px/22px var(--font-ui); }
.mk-now-empty { display: flex; flex-direction: column; align-items: center; padding: 20px 16px 16px; gap: 8px; background: var(--sea-soft); border-radius: 24px; corner-shape: var(--mk-corner); }
.mk-now-empty-t { font: 700 21px/26px var(--font-display); }
.mk-now-arrow { color: var(--sea-ink); transform: rotate(90deg); }

/* ---------- Timer card & mini timer ---------- */
.mk-timer { background-color: var(--m-soft); border-radius: 24px; corner-shape: var(--mk-corner); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.mk-timer-top { display: flex; align-items: center; gap: 8px; }
.mk-timer-top .mk-ts { flex: 1; }
.mk-timer-child { font: 500 15px/20px var(--font-ui); background: var(--card); border-radius: 999px; corner-shape: var(--mk-corner); padding: 4px 12px; }
.mk-timer .mk-hero { margin: 4px 0 8px; }
.mk-timer-actions { display: flex; gap: 8px; align-items: center; }
.mk-lr { display: flex; gap: 8px; flex: 1; }
.mk-lr-b { flex: 1; height: 56px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--card); color: var(--text2); font: 800 21px/26px var(--font-display); text-align: center; }
.mk-lr-on { background: var(--m-fill); color: var(--text); box-shadow: var(--m-imprint); }
.mk-stop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 24px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--card); color: var(--text); font: 500 17px/22px var(--font-ui); margin-inline-start: auto; box-shadow: var(--m-imprint); }
.mk-stop .mk-ic { color: var(--m-ink); }
.mk-mini { display: flex; align-items: center; gap: 4px; height: 48px; padding-inline: 16px 4px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--m-fill); color: var(--text); box-shadow: var(--m-imprint); }
.mk-mini-open { display: flex; align-items: center; gap: 8px; flex: 1; height: 48px; }
.mk-mini-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--m-ink); }
.mk-mini-t { font: 800 17px/22px var(--font-display); margin-inline-start: auto; padding-inline-end: 8px; }
.mk-mini-stop { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--card); font: 500 15px/20px var(--font-ui); position: relative; }
.mk-mini-stop::after { content: ""; position: absolute; inset: -4px 0; }
.mk-mini-stop .mk-ic { color: var(--m-ink); }

/* ---------- Feed row (hairline only between list rows) ---------- */
.mk-feed { display: flex; flex-direction: column; }
.mk-feed > .mk-row + .mk-row { box-shadow: 0 -1px 0 var(--hairline); }
.mk-row { display: flex; width: calc(100% + 16px); align-items: center; gap: 12px; min-height: 56px; padding: 6px 8px; margin: 0 -8px; border-radius: 14px; corner-shape: var(--mk-corner); transition: background-color .3s ease-out; }
.mk-feed > .mk-row-new, .mk-feed > .mk-row-new + .mk-row { box-shadow: none; }
.mk-row-new { background: var(--m-soft); }
.mk-row-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--m-fill); display: grid; place-items: center; flex: none; }
.mk-row-dot .mk-ic { width: 20px; height: 20px; }
.mk-row-time { font: 500 17px/22px var(--font-ui); width: 48px; flex: none; }
.mk-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-row-t { font: 400 17px/22px var(--font-ui); }
.mk-row-by { width: 28px; height: 28px; border-radius: 50%; background: var(--sunken); color: var(--text2); font: 500 13px/28px var(--font-ui); text-align: center; flex: none; }

/* ---------- Context card: a soft colour field ---------- */
.mk-ctx { position: relative; background: var(--m-soft); border-radius: 24px; corner-shape: var(--mk-corner); }
.mk-ctx-main { display: flex; width: 100%; align-items: center; gap: 12px; padding: 16px; padding-inline-end: 52px; min-height: 64px; }
.mk-ctx-text { flex: 1; display: flex; flex-direction: column; }
.mk-ctx-go { color: var(--m-ink); }
.mk-ctx-menu { position: absolute; top: 6px; inset-inline-end: 6px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--m-ink); border-radius: 50%; }
.mk-ctx-src { padding: 0 16px 12px 56px; margin-top: -8px; }
.mk-menu { position: absolute; top: 50px; inset-inline-end: 8px; z-index: 2; background: var(--card); border-radius: 20px; corner-shape: var(--mk-corner); box-shadow: var(--imprint-sea); padding: 6px; min-width: 220px; }
[data-theme="night"] .mk-menu { background: var(--sunken); }
.mk-menu button { display: flex; width: 100%; align-items: center; gap: 12px; height: 48px; padding: 0 12px; border-radius: 14px; corner-shape: var(--mk-corner); font: 400 17px/22px var(--font-ui); }
.mk-menu .mk-ic { color: var(--text2); }

/* ---------- Chips: no outline, no check ---------- */
.mk-chip { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--sunken); color: var(--text); font: 400 15px/20px var(--font-ui); white-space: nowrap; }
.mk-chip-on { background: var(--m-soft); color: var(--m-ink); font-weight: 500; }
.mk-chip-count { font-weight: 500; }

/* ---------- Segments: shared sunken track, the selected one is a card pebble that slides ---------- */
.mk-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--sunken); width: 100%; }
.mk-seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--pebble); box-shadow: var(--imprint-sea); transition: transform .25s cubic-bezier(.2,.7,.3,1); }
[dir="rtl"] .mk-seg-thumb { left: auto; right: 4px; }
.mk-seg-i { position: relative; height: 44px; border-radius: 999px; font: 400 15px/20px var(--font-ui); color: var(--text2); text-align: center; white-space: nowrap; padding: 0 8px; }
.mk-seg-on { color: var(--text); font-weight: 500; }

/* ---------- Stepper: big figure, round pebbles either side ---------- */
.mk-step { display: flex; align-items: center; gap: 12px; width: 100%; }
.mk-step-b { width: 56px; height: 56px; border-radius: 50%; corner-shape: var(--mk-corner); background: var(--sea-soft); color: var(--sea-ink); display: grid; place-items: center; flex: none; box-shadow: var(--imprint-sea); }
.mk-step-v { flex: 1; text-align: center; }

/* ---------- Field: sunken fill, no outline; focus = soft Sea ring ---------- */
.mk-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mk-field-l { font: 400 15px/20px var(--font-ui); color: var(--text2); }
.mk-field-box { display: flex; align-items: center; height: 56px; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--sunken); padding: 0 16px; gap: 8px; }
.mk-field-box input { flex: 1; min-width: 0; border: 0; background: none; font: 400 17px/24px var(--font-ui); color: var(--text); outline: none; padding: 0; }
.mk-field-box input::placeholder { color: var(--text2); }
.mk-field-focus .mk-field-box, .mk-field-box:focus-within { box-shadow: var(--focus-ring); }
.mk-field-err .mk-field-box { background: var(--coral-soft); }
.mk-field-h { font: 400 13px/18px var(--font-ui); color: var(--text2); }
.mk-field-e { font: 400 15px/20px var(--font-ui); color: var(--coral-ink); }

/* ---------- Time ---------- */
.mk-time { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.mk-time-row { display: flex; gap: 8px; }
.mk-time-b { flex: 1; height: 64px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--sunken); font: 500 15px/20px var(--font-ui); text-align: center; }
.mk-time-b:disabled { color: var(--text2); opacity: .55; cursor: default; }
.mk-time-now { flex: 1.3; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mk-time-on { background: var(--sea-soft); color: var(--sea-ink); }
.mk-time-v { font: 800 21px/26px var(--font-display); color: var(--text); }
.mk-time-s { font: 400 13px/18px var(--font-ui); }
.mk-time-pick { display: inline-flex; align-items: center; gap: 6px; align-self: center; height: 44px; padding: 0 12px; color: var(--sea-ink); font: 500 15px/20px var(--font-ui); }

/* ---------- Switch (ours): sunken capsule, knob pebble with imprint; on = Sea fill ---------- */
.mk-sw-row { display: flex; align-items: center; gap: 12px; min-height: 52px; width: 100%; }
.mk-sw-l { flex: 1; font: 400 17px/22px var(--font-ui); }
.mk-sw { width: 56px; height: 34px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--sunken); position: relative; flex: none; transition: background-color .2s ease-out; }
.mk-sw i { position: absolute; top: 3px; inset-inline-start: 3px; width: 28px; height: 28px; border-radius: 50%; corner-shape: var(--mk-corner); background: var(--text2); box-shadow: var(--imprint-sea); transition: inset-inline-start .2s cubic-bezier(.2,.7,.3,1); }
.mk-sw-on { background: var(--sea-fill); }
.mk-sw-on i { inset-inline-start: 25px; background: var(--knob); }
.mk-dis { opacity: var(--disabled); }
/* Checkbox: rounded pebble square; checked = module fill with a text-coloured check */
.mk-cb-row { display: flex; align-items: flex-start; gap: 12px; font: 400 15px/20px var(--font-ui); min-height: 44px; }
.mk-cb { width: 26px; height: 26px; margin: -3px 0; border-radius: 9px; corner-shape: var(--mk-corner); background: var(--sunken); flex: none; display: grid; place-items: center; position: relative; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text2); }
.mk-cb::after { content: ""; position: absolute; inset: -9px; }
.mk-cb-on { background: var(--m-fill, var(--sea-fill)); box-shadow: var(--m-imprint, var(--imprint-sea)); }

/* ---------- Avatar, source ---------- */
.mk-av { position: relative; display: inline-grid; place-items: center; border-radius: 50%; background: var(--av-soft); color: var(--av-ink); font-family: var(--font-display); font-weight: 800; flex: none; }
.mk-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mk-av-badge { position: absolute; bottom: -4px; inset-inline-end: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--amber-soft); color: var(--amber-ink); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--page); }
.mk-src { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font: 400 13px/18px var(--font-ui); color: var(--text2); }
.mk-src span { text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }

/* ---------- Sheet: a sheet of paper ---------- */
.mk-sheet { background: var(--card); border-radius: 32px 32px 0 0; corner-shape: var(--mk-corner); box-shadow: var(--imprint-sheet); padding: 8px 16px 16px; display: flex; flex-direction: column; }
.mk-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--text2); opacity: .45; align-self: center; margin-bottom: 16px; }
.mk-sheet-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mk-sheet-c { display: flex; flex-direction: column; gap: 16px; }
.mk-sheet-f { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; align-items: center; }
.mk-scrim { background: var(--scrim); }

/* ---------- Snackbar, notice ---------- */
.mk-snack { display: flex; align-items: center; gap: 4px; min-height: 56px; padding-inline: 12px 4px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); box-shadow: var(--imprint-sea); }
[data-theme="night"] .mk-snack { background: var(--sunken); }
.mk-snack-t { flex: 1; padding-inline-start: 8px; }
.mk-snack-ok { width: 28px; height: 28px; border-radius: 50%; background: var(--kelp-fill); color: var(--kelp-ink); display: grid; place-items: center; flex: none; }
.mk-snack-a { height: 44px; padding: 0 12px; color: var(--sea-ink); font: 500 17px/22px var(--font-ui); }
.mk-snack-amber, [data-theme="night"] .mk-snack-amber { background: var(--amber-soft); box-shadow: var(--imprint-amber); }
.mk-snack-amber .mk-snack-a { color: var(--amber-ink); }
.mk-amber-ic { color: var(--amber-ink); }
.mk-notice { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 16px; padding-inline: 16px 8px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--amber-soft); }
.mk-notice > .mk-ic { color: var(--amber-ink); }
.mk-notice .mk-bs { flex: 1; }
.mk-notice-a { height: 44px; padding: 0 12px; color: var(--amber-ink); font: 500 17px/22px var(--font-ui); }

/* ---------- Empty, placeholders, skeleton ---------- */
.mk-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 24px 16px; }
.mk-illu-slot { display: grid; place-items: center; text-align: center; font: 400 13px/18px var(--font-ui); color: var(--text2); padding: 8px; border-radius: 24px; corner-shape: var(--mk-corner); background: repeating-linear-gradient(135deg, transparent 0 10px, var(--sunken) 10px 12px); box-shadow: inset 0 0 0 1.5px var(--text2); }
.mk-illu-slot b { font-weight: 500; color: var(--text); display: block; }
.mk-illu-neutral { box-shadow: inset 0 0 0 1.5px var(--hairline); }
[data-theme="night"] .mk-illu-img { opacity: var(--illustration-night); }
.mk-empty-t { max-width: 280px; }
.mk-skel { display: flex; flex-direction: column; gap: 12px; }
.mk-sk { display: block; background: var(--sunken); border-radius: 14px; corner-shape: var(--mk-corner); }
.mk-sk-card { height: 240px; border-radius: 24px; }
.mk-sk-q { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mk-sk-tile { height: 88px; border-radius: 28px; }
.mk-sk-row { display: flex; align-items: center; gap: 12px; height: 44px; }
.mk-sk-c { width: 32px; height: 32px; border-radius: 50%; corner-shape: round; }
.mk-sk-l { height: 16px; border-radius: 8px; }

/* ---------- Header (no app bar), screen title ---------- */
.mk-hdr { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; }
.mk-hdr-child { display: flex; align-items: center; gap: 8px; min-height: 44px; flex: 1; min-width: 0; white-space: nowrap; }
.mk-hdr-child .mk-ic { color: var(--text2); }
.mk-wx { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--sky-soft); color: var(--sky-ink); font: 500 15px/20px var(--font-ui); position: relative; }
.mk-wx::after { content: ""; position: absolute; inset: -4px; }
.mk-hdr-me { width: 44px; height: 44px; display: grid; place-items: center; }
.mk-title { font: 700 28px/34px var(--font-display); padding: 8px 16px 12px; margin: 0; }

/* ---------- Tab bar: opaque paper, no line, no pill; + is a raised Sea pebble ---------- */
.mk-tabs { display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: center; height: 64px; background-color: var(--page); padding: 0 8px; }
.mk-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 56px; justify-content: center; color: var(--text2); font: 500 12px/14px var(--font-ui); }
.mk-tab-on { color: var(--sea-ink); }
.mk-plus { justify-self: center; align-self: start; width: 60px; height: 60px; margin-top: -12px; border-radius: 22px; corner-shape: var(--mk-corner); background: var(--primary); color: var(--on-primary); display: grid; place-items: center; box-shadow: var(--imprint-sea); }

/* ---------- Charts ---------- */
.mk-chart { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mk-chart svg { display: block; overflow: visible; }
.mk-grid { stroke: var(--hairline); stroke-width: 1; }
.mk-axis { font: 400 13px var(--font-ui); fill: var(--text2); }
.mk-axis-on { fill: var(--text); color: var(--text); font-weight: 500; }
.mk-axis-x { font: 400 13px/18px var(--font-ui); color: var(--text2); text-align: center; }
.mk-pc { fill: none; stroke: var(--text2); stroke-width: 1; opacity: .55; }
.mk-pc-50 { opacity: .9; }
.mk-pline { fill: none; stroke: var(--apricot-ink); stroke-width: 2; stroke-linejoin: round; }
.mk-pdot { fill: var(--apricot-ink); }
.mk-pdot-sel { fill: var(--apricot-fill); stroke: var(--apricot-ink); stroke-width: 3; }
.mk-tip { background: var(--apricot-soft); border-radius: 20px; corner-shape: var(--mk-corner); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.mk-rh-night { fill: var(--sunken); }
.mk-rh-future { fill: var(--page); opacity: .7; }
.mk-rh-sleep { fill: var(--lavender-fill); stroke: var(--lavender-ink); stroke-width: 1; }
.mk-rh-breast { fill: var(--shell-ink); }
.mk-rh-bottle { fill: var(--page); stroke: var(--shell-ink); stroke-width: 1.75; }
.mk-rh-diaper { stroke: var(--kelp-ink); stroke-width: 2.5; stroke-linecap: round; }
.mk-rh-now { stroke: var(--sea-ink); stroke-width: 2; stroke-dasharray: 3 3; }
.mk-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 13px/18px var(--font-ui); color: var(--text2); padding-top: 8px; }
.mk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mk-legend i { display: inline-block; }
.mk-lg-sleep { width: 10px; height: 16px; border-radius: 4px; background: var(--lavender-fill); box-shadow: inset 0 0 0 1px var(--lavender-ink); }
.mk-lg-breast { width: 8px; height: 8px; border-radius: 50%; background: var(--shell-ink); }
.mk-lg-bottle { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.75px var(--shell-ink); }
.mk-lg-diaper { width: 10px; height: 3px; border-radius: 2px; background: var(--kelp-ink); }
.mk-lg-night { width: 14px; height: 14px; border-radius: 4px; background: var(--sunken); }

/* ---------- Momi widgets: card fields on paper ---------- */
.mk-wg { background: var(--card); border-radius: 24px; corner-shape: var(--mk-corner); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mk-wg-h { display: flex; align-items: center; gap: 8px; }
.mk-wg-c { display: flex; flex-direction: column; gap: 12px; }
.mk-wg-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: -4px; }
.mk-textlink { display: inline-flex; align-items: center; gap: 4px; height: 44px; color: var(--sea-ink); font: 500 15px/20px var(--font-ui); }
.mk-wg-stat, .mk-wx-now { display: flex; align-items: center; gap: 16px; }
.mk-wx-fl { display: flex; flex-direction: column; }
.mk-layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mk-layers li { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.mk-layer-n { font: 500 13px/18px var(--font-ui); color: var(--text2); width: 12px; }
.mk-bars { display: flex; gap: 6px; align-items: flex-end; height: 160px; }
.mk-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: flex-end; height: 100%; }
.mk-bar { width: 100%; max-width: 28px; border-radius: 10px; corner-shape: var(--mk-corner); background: var(--lavender-fill); box-shadow: inset 0 0 0 1px var(--lavender-ink); }
.mk-bar-part { background: repeating-linear-gradient(135deg, var(--lavender-fill) 0 4px, var(--lavender-soft) 4px 8px); }
.mk-bar-v { font-size: 13px; text-align: center; line-height: 16px; }
.mk-kv { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px; min-height: 32px; }
.mk-kv > .mk-ic { color: var(--text2); }
.mk-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-badge { font: 500 13px/18px var(--font-ui); padding: 4px 10px; border-radius: 10px; corner-shape: var(--mk-corner); background: var(--pear-soft); color: var(--pear-ink); }
.mk-badge-amber { background: var(--amber-soft); color: var(--amber-ink); }
.mk-obs { display: flex; gap: 8px; align-items: center; background: var(--pear-soft); border-radius: 14px; corner-shape: var(--mk-corner); padding: 10px 12px; }
.mk-alg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-alg-i { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--sunken); }
.mk-alg-t { display: flex; flex-direction: column; }
.mk-alg-mark { width: 14px; height: 14px; border-radius: 50%; margin-top: 3px; flex: none; box-shadow: inset 0 0 0 2px var(--pear-ink); }
.mk-alg-in, .mk-alg-know { background: var(--pear-soft); }
.mk-alg-in .mk-alg-mark { background: var(--pear-ink); }
.mk-alg-know .mk-alg-mark { background: linear-gradient(90deg, var(--pear-ink) 50%, transparent 50%); }
.mk-alg-no .mk-alg-mark { box-shadow: inset 0 0 0 2px var(--text2); }

[data-theme="night"] .mk * { transition: none !important; animation: none !important; }
[dir="rtl"] .mk-seg { --mk-dir: -1; }

.mk-ctx-ic { width: 28px; height: 28px; display: grid; place-items: center; color: var(--m-ink); }
.mk-tip-plate { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--t-soft); box-shadow: var(--t-imprint); max-width: 300px; }
.mk-tip-ic { color: var(--t-ink); flex: none; }
.mk-srcitem { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; box-shadow: 0 1px 0 var(--hairline); }
.mk-srcitem a { overflow-wrap: anywhere; }
/* Screen scaffolding for mockups (393 × 852): safe areas are left as paper — no fake status bar */
.mk-screen { position: relative; width: 393px; height: 852px; overflow: hidden; background-color: var(--page); display: flex; flex-direction: column; }
.mk-screen-scroll { flex: 1; min-height: 0; overflow: hidden; padding: 0 16px; display: flex; flex-direction: column; gap: 12px; }
.mk-screen-bottom { position: absolute; left: 0; right: 0; bottom: 0; }
.mk-safe-top { height: 54px; flex: none; }
.mk-safe-bottom { height: 34px; background-color: var(--page); background-image: var(--mk-grain); }
.mk-sect { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.mk-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }

.mk-lr-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mk-lr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--m-ink); flex: none; }
.mk-timer-sleeper { margin: -4px 0 8px; }
[data-theme="night"] .mk-illu-img { opacity: var(--illustration-night); }

/* ---------- Entry sheet bits ---------- */
.mk-trow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 14px 0 16px; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--sunken); color: var(--text2); }
.mk-trow-l { flex: 1; font: 400 17px/22px var(--font-ui); color: var(--text); }
.mk-trow-v { font: 800 21px/26px var(--font-display); color: var(--text); }
.mk-sw-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px 4px; }
.mk-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.mk-swatch .mk-cap { text-align: center; hyphens: auto; overflow-wrap: break-word; max-width: 100%; }
.mk-swatch-c { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #faf6ef; }
.mk-swatch-on .mk-swatch-c { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--text); }
.mk-swatch-on .mk-cap { color: var(--text); font-weight: 500; }
.mk-egroup { display: flex; flex-direction: column; gap: 8px; }
.mk-egroup-t { margin: 0; font: 500 15px/20px var(--font-ui); color: var(--text2); }
.mk-egrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mk-etile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 8px 4px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--m-fill); color: var(--text); font: 500 15px/18px var(--font-ui); text-align: center; box-shadow: var(--m-imprint); }
.mk-sheet-sec { font: 500 15px/20px var(--font-ui); color: var(--text2); margin: 0 0 -8px; }
.mk-hint { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--m-soft); }
.mk-hint .mk-ic { color: var(--m-ink); margin-top: 1px; }
.mk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-mini-step { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--sunken); }
.mk-mini-step .mk-step-b { width: 44px; height: 44px; }
.mk-mini-step .mk-step { gap: 4px; }
.mk-mini-step .mk-stat-u { font-size: 15px; }
.mk-mini-step .mk-stat-n { font-size: 28px; line-height: 34px; }

/* ---------- Live Activity, Dynamic Island ---------- */
.mk-la { display: flex; gap: 12px; padding: 12px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); width: 361px; color: var(--text); }
.mk-la-field { width: 56px; border-radius: 16px; corner-shape: var(--mk-corner); background: var(--m-fill); display: grid; place-items: center; flex: none; }
.mk-la-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-la-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mk-la-time { font: 800 40px/46px var(--font-display); font-variant-numeric: tabular-nums; }
.mk-la-actions { display: flex; gap: 8px; margin-top: 6px; }
.mk-la-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 10px; flex: 1 1 auto; white-space: nowrap; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--sunken); font: 500 15px/20px var(--font-ui); color: var(--text); }
.mk-la-b .mk-ic { color: var(--m-ink); }
.mk-la-stop { background: var(--m-fill); }
.mk-la-stop .mk-ic { color: var(--text); }
.mk-island-wrap .mk-la, .mk-la-island { background: #0a0807; border-radius: 44px; padding: 16px 18px; width: 370px; }
.mk-island-wrap .mk-la-b { background: var(--sunken); }
.mk-island { display: flex; align-items: center; justify-content: space-between; width: 250px; height: 37px; padding: 0 12px 0 8px; border-radius: 999px; background: #0a0807; }
.mk-island-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--m-fill); display: grid; place-items: center; }
.mk-island-cam { width: 12px; height: 12px; border-radius: 50%; background: #1c1916; }
.mk-island-t { font: 800 15px/20px var(--font-display); color: var(--m-ink); font-variant-numeric: tabular-nums; }
.mk-island-min { width: 37px; height: 37px; border-radius: 50%; background: #0a0807; display: grid; place-items: center; }

/* ---------- Android notification ---------- */
.mk-an { width: 361px; padding: 14px 16px 10px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--m-soft); color: var(--text); display: flex; flex-direction: column; gap: 6px; }
.mk-an-h { display: flex; align-items: center; gap: 8px; }
.mk-an-app { width: 22px; height: 22px; border-radius: 50%; background: var(--m-fill); color: var(--m-ink); display: grid; place-items: center; }
.mk-an-chrono { margin-inline-start: auto; font: 800 17px/22px var(--font-display); font-variant-numeric: tabular-nums; }
.mk-an-b { display: flex; align-items: center; gap: 10px; }
.mk-an-actions { display: flex; gap: 4px; margin-inline-start: 34px; }
.mk-an-a { height: 44px; padding: 0 12px; color: var(--m-ink); font: 500 15px/20px var(--font-ui); }

/* ---------- Widgets ---------- */
.mk-hw { width: 170px; height: 170px; border-radius: 22px; corner-shape: var(--mk-corner); background-color: var(--page); padding: 12px; display: flex; gap: 10px; color: var(--text); }
.mk-hw-m { width: 364px; }
.mk-hw-info { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-hw-child { font-weight: 500; }
.mk-wband { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 6px 10px; min-height: 0; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--m-soft); }
.mk-wband-l { display: flex; align-items: center; gap: 6px; font: 500 13px/18px var(--font-ui); color: var(--m-ink); }
.mk-hw-v { font: 400 13px/26px var(--font-ui); color: var(--text2); white-space: nowrap; }
.mk-hw-v b { font: 800 22px/26px var(--font-display); color: var(--text); }
.mk-hw-q { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 172px; }
.mk-hw-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 18px; corner-shape: var(--mk-corner); background: var(--m-fill); font: 500 13px/16px var(--font-ui); color: var(--text); box-shadow: var(--m-imprint); }
.mk-lw-c { width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--lw, #faf6ef); background: rgba(250,246,239,0.16); font: 400 11px/13px var(--font-ui); }
.mk-lw-c b { font: 800 20px/22px var(--font-display); }
.mk-lw-r { width: 172px; height: 76px; display: flex; flex-direction: column; justify-content: center; gap: 2px; color: var(--lw, #faf6ef); font: 400 13px/16px var(--font-ui); }
.mk-lw-r div { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.mk-lw-r b { font-weight: 600; }

/* ---------- Push, quick actions ---------- */
.mk-appicon { display: inline-grid; place-items: center; background: var(--sea-fill); color: var(--sea-ink); flex: none; }
.mk-push { display: flex; gap: 10px; align-items: flex-start; width: 361px; padding: 12px 14px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); color: var(--text); }
.mk-push-t { flex: 1; min-width: 0; }
.mk-push-h { display: flex; justify-content: space-between; font: 600 15px/20px var(--font-ui); }
.mk-qa { width: 250px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); overflow: hidden; }
.mk-qa-r { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; color: var(--text); }
.mk-qa-r + .mk-qa-r { box-shadow: 0 -1px 0 var(--hairline); }

/* ---------- Onboarding, invite, paywall ---------- */
.mk-wave { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 100%; }
.mk-wave-art { position: relative; z-index: 1; margin-bottom: -22px; }
.mk-wave-svg { display: block; width: 100%; height: 72px; }
.mk-wave-back { fill: var(--sea-soft); }
.mk-wave-front { fill: var(--sea-fill); opacity: .75; }
[data-theme="night"] .mk-wave-front { opacity: .6; }
.mk-steps { display: flex; gap: 6px; }
.mk-steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--sunken); }
.mk-steps i.on { background: var(--sea-ink); }
.mk-code { display: flex; flex-direction: column; gap: 8px; }
.mk-code-row { display: flex; gap: 6px; align-items: center; }
.mk-code-gap { width: 10px; }
.mk-code-cell { flex: 1; height: 58px; display: grid; place-items: center; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--sunken); font: 800 26px/30px var(--font-display); color: var(--text); }
.mk-code-cur { box-shadow: var(--focus-ring); }
.mk-code-err .mk-code-cell { background: var(--coral-soft); }
.mk-qr { display: block; }
.mk-qr-bg { fill: var(--card); }
.mk-qr-fg { fill: var(--text); }
.mk-plan { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 16px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--sunken); text-align: start; }
.mk-plan-on { background: var(--sea-soft); box-shadow: var(--imprint-sea); }
.mk-plan-dot { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text2); display: grid; place-items: center; flex: none; }
.mk-plan-on .mk-plan-dot { box-shadow: none; background: var(--sea-ink); }
.mk-plan-dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--sea-soft); }
.mk-plan-main { flex: 1; display: flex; flex-direction: column; }
.mk-plan-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mk-plan-price { font: 800 19px/24px var(--font-display); }
.mk-plan-badge { font: 500 13px/18px var(--font-ui); padding: 2px 8px; border-radius: 8px; background: var(--kelp-soft); color: var(--kelp-ink); }
.mk-plan-on .mk-plan-badge { background: var(--card); }
.mk-benefit { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.mk-benefit-ic { width: 28px; display: grid; place-items: center; color: var(--sea-ink); }
.mk-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font: 400 13px/18px var(--font-ui); color: var(--text2); }
.mk-legal a { color: var(--text2); text-decoration: underline; text-underline-offset: 2px; }
/* QR stays dark-on-light at night for scanners: night text as paper, night page as ink */
[data-theme="night"] .mk-qr-bg { fill: var(--text); }
[data-theme="night"] .mk-qr-fg { fill: var(--page); }

/* ---------- Mascot illustrations & app icon (design/mascot) ---------- */
.mk-illu { display: inline-block; flex: none; line-height: 0; }
.mk-illu img { width: 100%; height: auto; display: block; -webkit-user-drag: none; user-select: none; }
.mk-illu-box img { height: 100%; object-fit: contain; }
[data-theme="night"] .mk-illu img { opacity: var(--illustration-night); }
.mk-illu-round { border-radius: 50%; overflow: hidden; background: var(--sea-soft); }
.mk-illu-round img { object-fit: cover; object-position: 50% 30%; }
.mk-appicon { overflow: hidden; corner-shape: var(--mk-corner); }
.mk-appicon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mk-la-meta { display: inline-flex; align-items: center; gap: 8px; }
.mk-an-glyph { width: 16px; height: 16px; display: block; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.mk-ctx-main > .mk-illu { margin: -8px 0 -8px -4px; }

/* ---------- Journal (DY) ---------- */
.mk-daynav { display: flex; align-items: center; gap: 0; min-height: 48px; margin: 0 -4px; }
.mk-daynav-b { display: inline-flex; align-items: center; gap: 0; height: 44px; padding: 0 4px; color: var(--sea-ink); font: 500 13px/18px var(--font-ui); flex: none; }
.mk-daynav-b:disabled { color: var(--text2); opacity: .45; }
.mk-daynav-d { flex: 1; min-width: 0; min-height: 44px; padding: 0 2px; font: 500 17px/22px var(--font-ui); color: var(--text); text-align: center; }
.mk-daynav-range { justify-content: flex-start; margin: 0; font: 500 17px/22px var(--font-ui); }
.mk-daysum { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-sum { flex: 0 1 auto; height: 40px; padding: 0 12px; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--m-soft); color: var(--text); font: 400 15px/20px var(--font-ui); white-space: nowrap; }
.mk-sum b { font: 800 16px/20px var(--font-display); }
.mk-sum-on { background: var(--m-fill); box-shadow: var(--m-imprint); }
[data-theme="night"] .mk-sum-on { box-shadow: inset 0 0 0 2px var(--m-ink); }
.mk-filters { display: flex; gap: 8px; align-items: center; overflow: hidden; margin: 0 -16px; padding: 0 16px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.mk-filters .mk-chip { flex: none; height: 40px; padding: 0 12px; }
.mk-filters-ic { color: var(--text2); flex: none; display: grid; place-items: center; width: 24px; }
.mk-fgroups { display: flex; flex-direction: column; gap: 4px; }
.mk-hour { margin: 6px 0 0; font: 500 13px/18px var(--font-ui); color: var(--text2); }
.mk-obsg { margin: 2px 0 6px 44px; padding: 12px 14px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--m-soft); display: flex; flex-direction: column; gap: 8px; }
.mk-obsg-h { display: flex; gap: 8px; align-items: flex-start; }
.mk-obsg-h .mk-ts { color: var(--m-ink); }
.mk-obsg-r { display: flex; gap: 10px; align-items: center; }
.mk-obsg-t { font: 500 15px/20px var(--font-ui); width: 72px; flex: none; }
.mk-obsg-m { flex: 1; display: flex; flex-direction: column; }
.mk-obsg-f { margin-top: 2px; }
.mk-cal { display: flex; flex-direction: column; gap: 8px; }
.mk-cal-h { display: flex; align-items: center; justify-content: space-between; }
.mk-cal-arrow { width: 44px; height: 44px; display: grid; place-items: center; color: var(--sea-ink); }
.mk-cal-arrow:disabled { color: var(--text2); opacity: .4; }
.mk-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; text-align: center; }
.mk-cal-wd { padding-bottom: 4px; }
.mk-cal-d { height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 16px; corner-shape: var(--mk-corner); }
.mk-cal-n { font: 400 17px/22px var(--font-ui); }
.mk-cal-d:disabled { opacity: .4; }
.mk-cal-today .mk-cal-n { font-weight: 700; }
.mk-cal-on { background: var(--sea-fill); box-shadow: var(--imprint-sea); }
.mk-cal-dots { display: flex; gap: 3px; height: 5px; }
.mk-cal-dots i { width: 5px; height: 5px; border-radius: 50%; }
.mk-jtitle { display: flex; align-items: center; gap: 4px; padding: 0 16px 4px; min-height: 52px; }
.mk-jtitle .mk-title { padding: 0; flex: 1; }

/* ---------- Assistant widgets (more) ---------- */
.mk-bars-s { height: 104px; }
.mk-bar-kelp { background: var(--kelp-fill); box-shadow: inset 0 0 0 1px var(--kelp-ink); }
.mk-bar-kelp.mk-bar-part { background: repeating-linear-gradient(135deg, var(--kelp-fill) 0 4px, var(--kelp-soft) 4px 8px); }
.mk-kinds { display: flex; gap: 16px; font: 400 15px/20px var(--font-ui); color: var(--text2); }
.mk-kinds b { font: 800 17px/20px var(--font-display); color: var(--text); }
.mk-usefirst { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--amber-soft); }
.mk-usefirst > .mk-ic { color: var(--amber-ink); flex: none; }
.mk-usefirst-calm { background: var(--mallow-soft); }
.mk-usefirst-calm > .mk-ic { color: var(--mallow-ink); }
.mk-pips { display: flex; gap: 4px; }
.mk-pips i { flex: 1; height: 8px; border-radius: 4px; background: var(--sunken); }
.mk-pips i.mk-pip-on { background: var(--apricot-fill); box-shadow: inset 0 0 0 1px var(--apricot-ink); }
.mk-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-ticks li { display: flex; gap: 8px; align-items: flex-start; }
.mk-ticks .mk-ic { color: var(--apricot-ink); flex: none; margin-top: 1px; }
.mk-hl-line { fill: none; stroke: var(--mallow-ink); stroke-width: 2; stroke-linejoin: round; }
.mk-hl-pt { fill: var(--mallow-fill); stroke: var(--mallow-ink); stroke-width: 2; }
.mk-hl-med { fill: var(--mallow-soft); stroke: var(--mallow-ink); stroke-width: 1.5; }

/* ---------- Momi chat (AS) ---------- */
.mk-momi-ph { display: inline-grid; place-items: center; color: var(--sea-ink); flex: none; }
.mk-chat-h { display: flex; align-items: center; gap: 10px; padding: 4px 4px 8px 16px; min-height: 52px; }
.mk-chat-ht { flex: 1; margin: 0; }
.mk-iconbtn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--text); flex: none; border-radius: 50%; }
.mk-chat { flex: 1; min-height: 0; overflow: hidden; padding: 4px 16px 0; display: flex; flex-direction: column; gap: 16px; }
.mk-chat-end { justify-content: flex-end; }
.mk-chat > * { flex: none; }
.mk-ub-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mk-ub { max-width: 82%; padding: 10px 14px; background: var(--sea-soft); color: var(--text); border-radius: 20px 20px 6px 20px; corner-shape: var(--mk-corner); font: 400 17px/24px var(--font-ui); }
[dir="rtl"] .mk-ub { border-radius: 20px 20px 20px 6px; }
.mk-ma { display: flex; flex-direction: column; gap: 10px; }
.mk-ma-p { display: flex; gap: 10px; align-items: flex-start; }
.mk-ma-p p { margin: 2px 0 0; flex: 1; }
.mk-ma-gap { width: 28px; flex: none; }
.mk-ma-w { display: flex; flex-direction: column; gap: 10px; }
.mk-ma-med { margin: 0 0 0 38px; }
.mk-ma-src { margin-inline-start: 30px; }
.mk-typing { display: flex; align-items: center; gap: 12px; }
.mk-typing-dots { color: var(--text2); flex: 1; }
.mk-typing-stop { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--sunken); font: 500 15px/20px var(--font-ui); color: var(--text); }
.mk-sugg { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mk-sugg-c { min-height: 44px; padding: 10px 16px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--sea-soft); color: var(--sea-ink); font: 500 15px/20px var(--font-ui); text-align: start; }
.mk-cplate { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; padding-inline: 14px 8px; border-radius: 20px; corner-shape: var(--mk-corner); }
.mk-cplate .mk-bs { flex: 1; }
.mk-cplate-amber { background: var(--amber-soft); }
.mk-cplate-amber > .mk-ic, .mk-cplate-amber .mk-cplate-a { color: var(--amber-ink); }
.mk-cplate-calm { background: var(--sunken); }
.mk-cplate-calm > .mk-ic { color: var(--sea-ink); }
.mk-cplate-a { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; font: 500 15px/20px var(--font-ui); flex: none; }
.mk-cin-wrap { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px 8px; background-color: var(--page); background-image: var(--mk-grain); }
.mk-cin-hint { display: flex; align-items: center; gap: 6px; font: 400 15px/20px var(--font-ui); color: var(--text2); padding: 0 6px; }
.mk-cin { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 4px 4px 16px; padding-inline: 16px 4px; border-radius: 26px; corner-shape: var(--mk-corner); background: var(--sunken); }
.mk-cin > .mk-ic { color: var(--text2); flex: none; }
.mk-cin-t { flex: 1; min-width: 0; font: 400 17px/24px var(--font-ui); color: var(--text); padding: 10px 0; }
.mk-cin-ph { color: var(--text2); }
.mk-cin-b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sea-soft); color: var(--sea-ink); flex: none; }
.mk-cin-send { background: var(--primary); color: var(--on-primary); box-shadow: var(--imprint-sea); }
.mk-cin-live { background: var(--sea-fill); color: var(--text); }
.mk-cin-muted { background: transparent; color: var(--text2); }
.mk-cin-rec { background: var(--sea-soft); box-shadow: var(--focus-ring); }
.mk-cin-off { opacity: .6; }
.mk-cin-off .mk-cin-b { background: transparent; color: var(--text2); }
.mk-cin-wave { flex: none; }
.mk-cin-wave path { fill: none; stroke: var(--sea-ink); stroke-width: 2.25; stroke-linecap: round; }
.mk-caret { display: inline-block; width: 2px; height: 20px; margin-inline-start: 2px; vertical-align: -4px; background: var(--sea-ink); }
.mk-conv { position: relative; display: flex; align-items: stretch; overflow: hidden; }
.mk-conv-main { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 8px 0; text-align: start; color: var(--text2); background-color: var(--page); }
.mk-conv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--text); }
.mk-conv-sw .mk-conv-main { transform: translateX(-96px); }
[dir="rtl"] .mk-conv-sw .mk-conv-main { transform: translateX(96px); }
.mk-conv-del { position: absolute; inset-block: 6px; inset-inline-end: 0; width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--coral-soft); color: var(--coral-ink); font: 500 13px/18px var(--font-ui); flex: none; }
.mk-convs > .mk-conv + .mk-conv { box-shadow: 0 -1px 0 var(--hairline); }

/* ---------- Baby (KD) & modules ---------- */
.mk-prof { display: flex; align-items: center; gap: 16px; padding: 4px 0 8px; }
.mk-prof .mk-av { font: 800 32px/1 var(--font-display) !important; }
.mk-prof-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-sgroup { display: flex; flex-direction: column; gap: 8px; }
.mk-sgroup-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 8px 0 0; font: 500 15px/20px var(--font-ui); color: var(--text2); }
.mk-sgroup-c { display: flex; flex-direction: column; gap: 8px; }
.mk-mcard { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 12px 12px 14px; padding-inline: 14px 12px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); text-align: start; }
.mk-mcard-ic { width: 44px; height: 44px; border-radius: 16px; corner-shape: var(--mk-corner); background: var(--m-soft); display: grid; place-items: center; flex: none; }
.mk-mcard-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-mcard-h { font: 500 15px/20px var(--font-ui); color: var(--m-ink); }
.mk-mcard-v { font: 400 17px/22px var(--font-ui); color: var(--text); }
.mk-mcard-v b { font: 800 19px/22px var(--font-display); }
.mk-mcard-go { color: var(--text2); flex: none; }
.mk-mcard-quiet { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
.mk-mcard-quiet .mk-mcard-ic { background: var(--sunken); }
.mk-pips-s { margin-top: 6px; max-width: 200px; }
.mk-pips-s i { height: 6px; }
.mk-spark { flex: none; }
.mk-drow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; }
.mk-drow + .mk-drow { box-shadow: 0 -1px 0 var(--hairline); }
.mk-drow-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-drow-v { display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.mk-drow-v b { font: 800 19px/22px var(--font-display); }
.mk-drow-vs { white-space: nowrap; }
.mk-drow-amber .mk-drow-vs, .mk-drow-amber .mk-drow-sub { color: var(--amber-ink); font-weight: 500; }
.mk-drow-amber { background: var(--amber-soft); margin: 0 -10px; padding: 6px 10px; border-radius: 16px; corner-shape: var(--mk-corner); box-shadow: none !important; }
.mk-drow-muted .mk-drow-m, .mk-drow-muted .mk-drow-v, .mk-drow-muted .mk-row-dot { opacity: .55; }
.mk-drow-a { height: 44px; padding: 0 12px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--sunken); font: 500 15px/20px var(--font-ui); color: var(--text); flex: none; }
.mk-mitem { display: flex; flex-direction: column; gap: 0; }
.mk-mitem-d { align-self: flex-start; margin-inline-start: 44px; min-height: 28px; font: 400 13px/18px var(--font-ui); color: var(--apricot-ink); }
.mk-food { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 6px 0; text-align: start; color: var(--text2); }
.mk-food + .mk-food { box-shadow: 0 -1px 0 var(--hairline); }
.mk-food-ic { width: 40px; height: 40px; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--m-soft); color: var(--m-ink); display: grid; place-items: center; flex: none; }
.mk-food-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--text); }
.mk-alg-l .mk-alg-i { padding: 12px; min-height: 64px; }
.mk-alg-l .mk-alg-mark { width: 16px; height: 16px; }
.mk-lg-temp { width: 9px; height: 9px; border-radius: 50%; background: var(--mallow-fill); box-shadow: inset 0 0 0 2px var(--mallow-ink); }
.mk-lg-med { width: 16px; height: 9px; border-radius: 5px; background: var(--mallow-soft); box-shadow: inset 0 0 0 1.5px var(--mallow-ink); }
.mk-med { background: var(--card); border-radius: 24px; corner-shape: var(--mk-corner); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.mk-med-h { display: flex; align-items: center; gap: 10px; }
.mk-med-h .mk-ts { flex: 1; }
.mk-med-r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mk-med-f { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--hairline); padding-top: 8px; }
.mk-wxnow { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 14px; padding: 16px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--m-soft); }
.mk-wxnow-ic { color: var(--m-ink); grid-row: span 1; }
.mk-wxnow-m { display: flex; flex-direction: column; }
.mk-wxnow-t { font: 800 40px/44px var(--font-display); }
.mk-wxnow-d { display: flex; flex-direction: column; }
.mk-wxnow-attr { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; font: 500 13px/18px var(--font-ui); color: var(--text2); padding-top: 6px; }
.mk-wxnow-attr a { color: var(--text2); }
.mk-layers-l li { min-height: 48px; gap: 14px; }
.mk-tog { background: var(--m-soft); border-radius: 24px; corner-shape: var(--mk-corner); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.mk-tog-h { display: flex; gap: 8px; align-items: center; }
.mk-tog-r { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-tog-f { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--card); border-radius: 16px; corner-shape: var(--mk-corner); }
.mk-tog-v { font: 800 21px/26px var(--font-display); }
.mk-calm-line { display: flex; gap: 8px; align-items: flex-start; font: 400 15px/20px var(--font-ui); color: var(--text2); padding: 10px 2px; }

/* ---------- Doctor's report: print template ---------- */
.rp { box-sizing: border-box; background: var(--card); color: var(--text); padding: 40px 44px 36px; display: flex; flex-direction: column; font: 400 11px/15px var(--font-ui); position: relative; }
.rp-letter { padding: 36px 48px 32px; }
.rp-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--text); padding-bottom: 6px; }
.rp-logo { font: 800 16px/20px var(--font-display); }
.rp-head-r { font: 400 10px/14px var(--font-ui); color: var(--text2); }
.rp-who { display: flex; align-items: flex-end; gap: 20px; padding: 14px 0 10px; }
.rp-name { font: 800 28px/32px var(--font-display); }
.rp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 18px; font: 400 10.5px/15px var(--font-ui); flex: 1; }
.rp-body { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.rp-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.rp-sum > div { border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.rp-sum-n { font: 800 18px/22px var(--font-display); }
.rp-small { margin: -6px 0 0; font-size: 9.5px; color: var(--text2); }
.rp-sec { display: flex; flex-direction: column; gap: 5px; break-inside: avoid; }
.rp-h { display: flex; align-items: center; gap: 6px; margin: 0; font: 700 13px/16px var(--font-display); }
.rp-note { font: 400 9.5px/12px var(--font-ui); color: var(--text2); margin-inline-start: auto; }
.rp-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rp-t th { text-align: start; font-weight: 500; color: var(--text2); border-bottom: 1px solid var(--text2); padding: 3px 6px 3px 0; font-size: 10px; }
.rp-t td { padding: 3px 6px 3px 0; border-bottom: 0.5px solid var(--hairline); }
.rp-t tfoot td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--text2); }
.rp-t .rp-n { text-align: end; }
.rp-p { margin: 0; font-size: 11px; line-height: 16px; }
.rp-ul { margin: 2px 0 0; padding-inline-start: 16px; font-size: 11px; line-height: 16px; }
.rp-growth { display: grid; grid-template-columns: 1fr 200px; gap: 16px; align-items: start; }
.rp-chart .mk-axis-x { font-size: 9px; }
.rp-foot span:last-child { white-space: nowrap; }
.rp-foot { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--hairline); padding-top: 6px; font: 400 9.5px/13px var(--font-ui); color: var(--text2); }
.rp-scale { overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1px var(--hairline), var(--imprint-sea); flex: none; }
[data-theme="night"] .rp-scale { box-shadow: 0 0 0 1px var(--hairline); }

/* ---------- Settings (ST) ---------- */
.mk-lgroup { display: flex; flex-direction: column; gap: 6px; }
.mk-lgroup-t { margin: 6px 4px 0; font: 500 15px/20px var(--font-ui); color: var(--text2); }
.mk-lgroup-c { background: var(--card); border-radius: 24px; corner-shape: var(--mk-corner); padding: 0 16px; display: flex; flex-direction: column; }
.mk-lgroup-c > .mk-li + .mk-li { box-shadow: 0 -1px 0 var(--hairline); }
.mk-lgroup-f { margin: 0 4px; }
.mk-li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; }
.mk-li-ic { width: 28px; display: grid; place-items: center; color: var(--text2); flex: none; }
.mk-li-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-li-v { flex: none; text-align: end; }
.mk-li-go { color: var(--text2); flex: none; }
.mk-li-check { color: var(--sea-ink); display: grid; place-items: center; flex: none; }
.mk-li-note { font: 400 13px/18px var(--font-ui); color: var(--text2); padding: 2px 8px; border-radius: 8px; background: var(--sunken); flex: none; }
.mk-li-danger .mk-body { color: var(--coral-ink); font-weight: 500; }
.mk-li-danger .mk-li-ic { color: var(--coral-ink); }
.mk-li-dis .mk-body, .mk-li-dis .mk-li-ic { opacity: .45; }
.mk-avs { display: inline-flex; padding-inline-start: 6px; margin-top: 6px; }
.mk-avs .mk-av { margin-inline-start: -6px; box-shadow: 0 0 0 2px var(--card); }
.mk-famcard { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--sea-soft); }
.mk-famcard-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-member-menu { position: absolute; top: 48px; inset-inline-end: 0; z-index: 3; }
.mk-npv { width: 240px; border-radius: 28px; corner-shape: var(--mk-corner); background-color: var(--page); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; color: var(--text); font-family: var(--font-ui); box-shadow: 0 0 0 1px var(--hairline); }
.mk-npv-now { display: flex; flex-direction: column; gap: 3px; }
.mk-npv-band { display: flex; align-items: baseline; gap: 5px; padding: 7px 10px; border-radius: 10px; font-size: 11px; line-height: 14px; }
.mk-npv-band .mk-ic { align-self: center; }
.mk-npv-l { flex: 1; color: var(--text2); }
.mk-npv-band b { font: 800 15px/16px var(--font-display); }
.mk-npv-u { color: var(--text2); }
.mk-npv-a { color: var(--text2); margin-inline-start: 4px; }
.mk-npv-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mk-npv-tiles span { height: 50px; border-radius: 14px; display: grid; place-items: center; }
.mk-npv-rows { display: flex; flex-direction: column; gap: 6px; font-size: 11px; line-height: 14px; padding: 2px 4px; }
.mk-npv-rows div { display: flex; gap: 6px; align-items: center; }
.mk-npv-rows span { color: var(--text2); }
.mk-crop { position: relative; width: 361px; height: 361px; border-radius: 24px; overflow: hidden; background: repeating-linear-gradient(135deg, var(--sunken) 0 14px, var(--card) 14px 28px); display: grid; place-items: center; }
.mk-crop::after { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; box-shadow: 0 0 0 400px rgba(30, 22, 18, .55), inset 0 0 0 2px var(--card); }
.mk-crop span { position: relative; z-index: 0; font: 500 15px/20px var(--font-ui); color: var(--text2); }

/* ---------- Languages (§4.3, §8) ---------- */
/* Arabic: Rubik for headings and numbers too; line height +10 %; never letter-spacing. Japanese (and zh, ko): system fonts. */
[lang|="ar"] { --font-display: Rubik, system-ui, sans-serif; --font-ui: Rubik, system-ui, sans-serif; }
[lang|="ja"] { --font-display: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Noto Sans JP", system-ui, sans-serif; --font-ui: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Noto Sans JP", system-ui, sans-serif; }
[lang|="ja"] .mk-ql-l, [lang|="ja"] .mk-body, [lang|="ja"] .mk-ts { line-break: strict; word-break: normal; }
/* RTL: time axes run right to left (§8) — the growth sparkline is mirrored; numbers, times and real-world icons are not. */
[dir="rtl"] .mk-spark { transform: scaleX(-1); }
[lang|="ar"] .mk-ts { line-height: 24px; }
[lang|="ar"] .mk-tl { line-height: 37px; }
[lang|="ar"] .mk-tm { line-height: 29px; }
[lang|="ar"] .mk-body { line-height: 26px; }
[lang|="ar"] .mk-bs { line-height: 22px; }
[lang|="ar"] .mk-bs2 { line-height: 22px; }
[lang|="ar"] .mk-cap { line-height: 20px; }
[lang|="ar"] .mk-stat-n { line-height: 42px; }
[lang|="ar"] .mk-stat-u { line-height: 24px; }
[lang|="ar"] .mk-stat-suffix { line-height: 24px; }
[lang|="ar"] .mk-hero { line-height: 62px; }
[lang|="ar"] .mk-pane-label { line-height: 20px; }
[lang|="ar"] .mk-note { line-height: 20px; }
[lang|="ar"] .mk-btn { line-height: 24px; }
[lang|="ar"] .mk-sso { line-height: 24px; }
[lang|="ar"] .mk-ql-l { line-height: 20px; }
[lang|="ar"] .mk-now-l { line-height: 22px; }
[lang|="ar"] .mk-now-next { line-height: 29px; }
[lang|="ar"] .mk-now-rec { line-height: 24px; }
[lang|="ar"] .mk-now-empty-t { line-height: 29px; }
[lang|="ar"] .mk-timer-child { line-height: 22px; }
[lang|="ar"] .mk-lr-b { line-height: 29px; }
[lang|="ar"] .mk-stop { line-height: 24px; }
[lang|="ar"] .mk-mini-t { line-height: 24px; }
[lang|="ar"] .mk-mini-stop { line-height: 22px; }
[lang|="ar"] .mk-row-time { line-height: 24px; }
[lang|="ar"] .mk-row-t { line-height: 24px; }
[lang|="ar"] .mk-row-by { line-height: 31px; }
[lang|="ar"] .mk-chip { line-height: 22px; }
[lang|="ar"] .mk-seg-i { line-height: 22px; }
[lang|="ar"] .mk-field-l { line-height: 22px; }
[lang|="ar"] .mk-field-h { line-height: 20px; }
[lang|="ar"] .mk-field-e { line-height: 22px; }
[lang|="ar"] .mk-time-b { line-height: 22px; }
[lang|="ar"] .mk-time-v { line-height: 29px; }
[lang|="ar"] .mk-time-s { line-height: 20px; }
[lang|="ar"] .mk-time-pick { line-height: 22px; }
[lang|="ar"] .mk-sw-l { line-height: 24px; }
[lang|="ar"] .mk-cb-row { line-height: 22px; }
[lang|="ar"] .mk-src { line-height: 20px; }
[lang|="ar"] .mk-snack-a { line-height: 24px; }
[lang|="ar"] .mk-notice-a { line-height: 24px; }
[lang|="ar"] .mk-illu-slot { line-height: 20px; }
[lang|="ar"] .mk-wx { line-height: 22px; }
[lang|="ar"] .mk-title { line-height: 37px; }
[lang|="ar"] .mk-tab { line-height: 15px; }
[lang|="ar"] .mk-axis-x { line-height: 20px; }
[lang|="ar"] .mk-legend { line-height: 20px; }
[lang|="ar"] .mk-textlink { line-height: 22px; }
[lang|="ar"] .mk-layer-n { line-height: 20px; }
[lang|="ar"] .mk-badge { line-height: 20px; }
[lang|="ar"] .mk-trow-l { line-height: 24px; }
[lang|="ar"] .mk-trow-v { line-height: 29px; }
[lang|="ar"] .mk-egroup-t { line-height: 22px; }
[lang|="ar"] .mk-etile { line-height: 20px; }
[lang|="ar"] .mk-sheet-sec { line-height: 22px; }
[lang|="ar"] .mk-la-time { line-height: 51px; }
[lang|="ar"] .mk-la-b { line-height: 22px; }
[lang|="ar"] .mk-island-t { line-height: 22px; }
[lang|="ar"] .mk-an-chrono { line-height: 24px; }
[lang|="ar"] .mk-an-a { line-height: 22px; }
[lang|="ar"] .mk-wband-l { line-height: 20px; }
[lang|="ar"] .mk-hw-v { line-height: 29px; }
[lang|="ar"] .mk-hw-tile { line-height: 18px; }
[lang|="ar"] .mk-lw-c { line-height: 14px; }
[lang|="ar"] .mk-lw-r { line-height: 18px; }
[lang|="ar"] .mk-push-h { line-height: 22px; }
[lang|="ar"] .mk-code-cell { line-height: 33px; }
[lang|="ar"] .mk-plan-price { line-height: 26px; }
[lang|="ar"] .mk-plan-badge { line-height: 20px; }
[lang|="ar"] .mk-legal { line-height: 20px; }
[lang|="ar"] .mk-daynav-b { line-height: 20px; }
[lang|="ar"] .mk-daynav-d { line-height: 24px; }
[lang|="ar"] .mk-daynav-range { line-height: 24px; }
[lang|="ar"] .mk-sum { line-height: 22px; }
[lang|="ar"] .mk-hour { line-height: 20px; }
[lang|="ar"] .mk-obsg-t { line-height: 22px; }
[lang|="ar"] .mk-cal-n { line-height: 24px; }
[lang|="ar"] .mk-kinds { line-height: 22px; }
[lang|="ar"] .mk-ub { line-height: 26px; }
[lang|="ar"] .mk-typing-stop { line-height: 22px; }
[lang|="ar"] .mk-sugg-c { line-height: 22px; }
[lang|="ar"] .mk-cplate-a { line-height: 22px; }
[lang|="ar"] .mk-cin-hint { line-height: 22px; }
[lang|="ar"] .mk-cin-t { line-height: 26px; }
[lang|="ar"] .mk-conv-del { line-height: 20px; }
[lang|="ar"] .mk-sgroup-t { line-height: 22px; }
[lang|="ar"] .mk-mcard-h { line-height: 22px; }
[lang|="ar"] .mk-mcard-v { line-height: 24px; }
[lang|="ar"] .mk-drow-a { line-height: 22px; }
[lang|="ar"] .mk-mitem-d { line-height: 20px; }
[lang|="ar"] .mk-wxnow-t { line-height: 48px; }
[lang|="ar"] .mk-wxnow-attr { line-height: 20px; }
[lang|="ar"] .mk-tog-v { line-height: 29px; }
[lang|="ar"] .mk-calm-line { line-height: 22px; }
[lang|="ar"] .mk-lgroup-t { line-height: 22px; }
[lang|="ar"] .mk-li-note { line-height: 20px; }

/* ---------- Live inputs for prototypes ---------- */
.mk-code-in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; background: transparent; color: transparent; border: 0; padding: 0; font-size: 16px; caret-color: transparent; cursor: text; }
.mk-cin-in { border: 0; outline: 0; background: transparent; color: var(--text); margin: 0; min-width: 0; width: 100%; }
.mk-cin-in::placeholder { color: var(--text2); }
.mk .mk-cin-in:focus-visible { box-shadow: none; }
.mk-cin:focus-within { box-shadow: var(--focus-ring); }
.mk-ma-mark { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: var(--text2); }
/* Numbers that change keep one width in every script, system fonts included (§11). */
.mk-stat-n, .mk-step-v, .mk-mini-t, .mk-time-v, .mk-hero, .mk-row-time, .mk-code-cell { font-variant-numeric: tabular-nums; }
/* The Now slot keeps one height in every state — answers, empty, one timer, two timers — so the quick-log tiles never move (§11). */
.mk { --mk-now-h: 254px; }
[lang|="ar"] .mk, .mk[lang|="ar"] { --mk-now-h: 278px; }
.mk-now, .mk-now-empty, .mk-timer, .mk-timer-pair { min-height: var(--mk-now-h); box-sizing: border-box; }
.mk-now-empty { justify-content: center; }
.mk-timer { justify-content: space-between; }
.mk-timer-pair { display: flex; flex-direction: column; gap: 8px; height: var(--mk-now-h); }
.mk-timer-pair .mk-timer { min-height: 0; flex: 1; }
.mk-timer-compact { padding: 12px 14px; gap: 6px; }
.mk-timer-row { display: flex; align-items: center; gap: 10px; }
.mk-timer-compact .mk-hero { font-size: 34px; line-height: 40px; margin: 0; flex: 1; }
.mk-timer-compact .mk-lr { flex: none; }
.mk-timer-compact .mk-lr-b { width: 48px; height: 48px; flex: none; font-size: 17px; padding: 0; }
.mk-timer-compact .mk-stop { width: 48px; height: 48px; padding: 0; margin: 0; }
.mk-li-dis .mk-body, .mk-li-dis .mk-li-ic { opacity: 1; color: var(--text2); }
/* "just now" in the Now card: the words sit on the number's baseline, in title-m. */
.mk-now-just { font: 700 21px/38px var(--font-display); color: var(--text); }
[lang|="ar"] .mk-now-just { line-height: 42px; }
/* 12-hour clock (US default): the time column widens; digits right-aligned so the colons line up; AM/PM in caption. */
.mk-row-time-12 { width: 72px; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 3px; }
.mk-row-hm { width: 49px; text-align: end; flex: none; }
.mk-row-ap { font: 400 13px/18px var(--font-ui); color: var(--text2); }
.mk-row:has(.mk-row-time-12) { gap: 10px; }

/* ===== Stage 10 — expecting mode (EX) ===== */
/* Fork option (EX-01) */
.mk-choice { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 124px; padding: 14px 16px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); box-shadow: var(--imprint-sea); text-align: start; color: var(--text); }
[data-theme="night"] .mk-choice { background: var(--sunken); }
.mk-choice-ic { width: 96px; height: 84px; display: grid; place-items: center; flex: none; color: var(--sea-ink); }
.mk-choice-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-choice-mark { width: 26px; height: 26px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--text2); display: grid; place-items: center; color: var(--card); }
.mk-choice-on { background: var(--sea-soft); }
[data-theme="night"] .mk-choice-on { background: var(--sea-soft); }
.mk-choice-on .mk-choice-mark { background: var(--sea-ink); box-shadow: none; }

/* Due-date countdown (EX-03): sits in the Now slot, Sea soft with grain */
.mk-due { flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 212px; padding: 18px 16px 14px; border-radius: 24px; corner-shape: var(--mk-corner); background-color: var(--sea-soft); box-sizing: border-box; }
.mk-due-top { display: flex; align-items: flex-start; gap: 8px; }
.mk-due-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-due-l { font: 500 15px/20px var(--font-ui); color: var(--sea-ink); }
.mk-due-n .mk-stat-n { font: 800 52px/58px var(--font-display); font-variant-numeric: tabular-nums; }
.mk-due-n .mk-stat-u { font: 700 21px/26px var(--font-display); color: var(--text); }
.mk-due-month { font: 800 40px/48px var(--font-display); }
.mk-due-q { font: 800 28px/34px var(--font-display); margin: 2px 0 4px; }
.mk-due-illu { flex: none; margin: -6px -4px 0 0; }
.mk-due-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-inline-start: -4px; }
.mk-due-actions .mk-btn-secondary { background: var(--card); box-shadow: var(--imprint-sea); }
[data-theme="night"] .mk-due-actions .mk-btn-secondary { background: var(--sunken); }
.mk-due-actions .mk-btn-text { padding: 0 12px; }
.mk-due-past .mk-due-m { gap: 0; }
.mk-due-date { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 -10px; padding: 0; font: 500 17px/22px var(--font-ui); color: var(--sea-ink); text-align: start; }
.mk-due-g { color: var(--text2); }

/* Wide action tile: module fill, 88 pt (101 at night) */
.mk-atile { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 88px; padding: 12px 14px 12px 18px; padding-inline: 18px 14px; border-radius: 28px; corner-shape: var(--mk-corner); background: var(--m-fill); color: var(--text); box-shadow: var(--m-imprint); text-align: start; box-sizing: border-box; }
.mk-atile .mk-ic:first-child { color: var(--m-ink); flex: none; }
.mk-atile-night { min-height: 101px; }
.mk-atile-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-atile-l { font: 700 19px/24px var(--font-display); }
.mk-atile-night .mk-atile-l { font-size: 21px; line-height: 26px; }
.mk-atile-s { color: var(--text); opacity: 1; }
.mk-atile-go { color: var(--m-ink); flex: none; }

/* Contraction timer (EX-05) */
.mk-cbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 132px; border-radius: 32px; corner-shape: var(--mk-corner); background: var(--m-fill); color: var(--text); box-shadow: var(--m-imprint); box-sizing: border-box; }
.mk-cbtn-night { height: 152px; }
.mk-cbtn-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--m-ink); }
[data-theme="night"] .mk-cbtn-ic { background: var(--m-soft); }
.mk-cbtn-night .mk-cbtn-ic { width: 60px; height: 60px; }
.mk-cbtn-l { font: 700 21px/26px var(--font-display); }
.mk-cbtn-night .mk-cbtn-l { font-size: 24px; line-height: 30px; }
.mk-cbtn-on { background: var(--card); box-shadow: var(--m-imprint); }
[data-theme="night"] .mk-cbtn-on { background: var(--sunken); }
.mk-cbtn-on .mk-cbtn-ic { background: var(--m-fill); color: var(--text); }
.mk-cstats { display: flex; flex-direction: column; gap: 8px; }
.mk-cstats-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mk-cstats-r { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-cstat { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); }
[data-theme="night"] .mk-cstat { background: var(--sunken); }
.mk-cstat .mk-stat-n { font-size: 28px; line-height: 34px; font-variant-numeric: tabular-nums; }
.mk-clist { display: flex; flex-direction: column; }
.mk-clist-r { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; min-height: 40px; border-bottom: 1px solid var(--hairline); font: 400 17px/22px var(--font-ui); font-variant-numeric: tabular-nums; }
.mk-clist-r:last-child { border-bottom: 0; }
.mk-clist-h { min-height: 28px; }
.mk-clist-t { font-weight: 500; }
.mk-clist-v { display: inline-flex; align-items: center; gap: 6px; }
.mk-clist-run { color: var(--m-ink); }
.mk-clist-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--m-ink); }
.mk-calm { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); }
[data-theme="night"] .mk-calm { background: var(--sunken); }
.mk-calm-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sea-soft); color: var(--sea-ink); flex: none; }
.mk-calm-m { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.mk-calm .mk-src { margin-inline-start: -2px; }

/* Checklists (EX-04) */
.mk-clg { display: flex; flex-direction: column; gap: 8px; }
.mk-clg-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mk-clg-c { display: flex; flex-direction: column; background: var(--card); border-radius: 24px; corner-shape: var(--mk-corner); padding: 4px 0; }
[data-theme="night"] .mk-clg-c { background: var(--sunken); }
.mk-cli { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 8px 14px 8px 16px; padding-inline: 16px 14px; text-align: start; color: var(--text); box-sizing: border-box; position: relative; }
.mk-cli + .mk-cli::before { content: ""; position: absolute; top: 0; inset-inline: 56px 0; border-top: 1px solid var(--hairline); }
.mk-cli .mk-cb { margin: 0; }
.mk-cli-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-cli-t { font: 400 17px/22px var(--font-ui); }
.mk-cli-on .mk-cli-t { color: var(--text2); }
.mk-cli-add { color: var(--sea-ink); }
.mk-cli-add .mk-cli-t { font-weight: 500; }
.mk-cli-plus { width: 26px; height: 26px; border-radius: 9px; corner-shape: var(--mk-corner); background: var(--sea-soft); color: var(--sea-ink); display: grid; place-items: center; flex: none; }
.mk-prog { display: block; height: 6px; border-radius: 3px; background: var(--sunken); margin-top: 6px; max-width: 200px; overflow: hidden; }
.mk-prog i { display: block; height: 100%; border-radius: 3px; background: var(--m-ink); }
.mk-clcard .mk-mcard-v b { font-variant-numeric: tabular-nums; }

/* Birth facts (EX-08) */
.mk-bfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-bfact { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--apricot-soft); }
.mk-bfact .mk-cap { color: var(--apricot-ink); }
.mk-bfact .mk-stat-n { font-size: 28px; line-height: 34px; }
.mk-bfact-v { font: 800 21px/34px var(--font-display); }

[lang|="ar"] .mk-due-l, [lang|="ar"] .mk-cli-t { line-height: 22px; }
[lang|="ar"] .mk-atile-l { line-height: 27px; }
[lang|="ar"] .mk-cbtn-l { line-height: 29px; }
[lang|="ar"] .mk-due-n .mk-stat-n { line-height: 64px; }
[lang|="ar"] .mk-clist-r { line-height: 24px; }

/* ===== Stage 11 — every day (AC, SY, WS, WD, CM, NM, TW) ===== */
/* AC: after-walk question */
.mk-qask { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); box-shadow: var(--imprint-sea); }
[data-theme="night"] .mk-qask { background: var(--sunken); }
.mk-qask-h { display: flex; align-items: center; gap: 10px; }
.mk-qask-h .mk-ts { flex: 1; }
.mk-qask-x { width: 44px; height: 44px; margin: -8px -6px -8px 0; display: grid; place-items: center; color: var(--text2); border-radius: 50%; flex: none; }
.mk-qask-o { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mk-qask-b { height: 44px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--m-soft); color: var(--text); font: 500 15px/20px var(--font-ui); padding: 0 6px; }
.mk-qask-on { background: var(--m-fill); box-shadow: var(--m-imprint); }

/* SY: sync — silent when fine */
.mk-ql { position: relative; }
.mk-ql-wait { position: absolute; top: 6px; inset-inline-end: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--amber-soft); color: var(--amber-ink); display: grid; place-items: center; }
.mk-row-wait { width: 28px; height: 28px; border-radius: 50%; background: var(--amber-soft); color: var(--amber-ink); display: grid; place-items: center; flex: none; }
.mk-row-sync { display: inline-flex; align-items: center; gap: 4px; font: 400 13px/18px var(--font-ui); color: var(--amber-ink); }
.mk-sync { display: inline-flex; align-items: center; gap: 6px; font: 400 13px/18px var(--font-ui); color: var(--text2); }
.mk-sync-seen .mk-ic { color: var(--kelp-ink); }
.mk-sync-waiting { color: var(--amber-ink); }
.mk-syncplate { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--amber-soft); color: var(--text); }
.mk-syncplate > .mk-ic { color: var(--amber-ink); flex: none; }
.mk-syncplate .mk-bs { flex: 1; }
.mk-row-kids { display: inline-flex; flex: none; }
.mk-row-kids .mk-av + .mk-av { margin-inline-start: -6px; box-shadow: 0 0 0 2px var(--page); }

/* WS: while you were asleep */
.mk-wsc { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 6px 14px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); }
[data-theme="night"] .mk-wsc { background: var(--sunken); }
.mk-wsc-h { display: flex; align-items: center; gap: 10px; }
.mk-wsc-ht { flex: 1; display: flex; flex-direction: column; }
.mk-wsc-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-wsc-l li { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.mk-wsc-time { font: 500 15px/20px var(--font-ui); font-variant-numeric: tabular-nums; width: 44px; flex: none; }
.mk-wsc-open { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px; color: var(--sea-ink); font: 500 15px/20px var(--font-ui); border-top: 1px solid var(--hairline); margin-top: 2px; }

/* WD: who did what */
.mk-fw { display: flex; flex-direction: column; gap: 12px; }
.mk-fw-h { display: flex; align-items: center; gap: 10px; color: var(--sea-ink); }
.mk-fw-h .mk-tm { color: var(--text); }
.mk-fw-m { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); }
[data-theme="night"] .mk-fw-m { background: var(--sunken); }
.mk-fw-mh { display: flex; align-items: center; gap: 10px; }
.mk-fw-c { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-fw-p { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--m-soft, var(--sunken)); font: 400 15px/20px var(--font-ui); }
.mk-fw-p b { font: 800 16px/20px var(--font-display); }
.mk-fw-note { display: flex; align-items: center; gap: 6px; margin: 0; }

/* CM: offer card */
.mk-offer { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 10px 14px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--m-soft); }
.mk-offer-top { display: flex; gap: 12px; align-items: flex-start; }
.mk-offer-m { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mk-offer .mk-ctx-ic { color: var(--m-ink); }
.mk-offer-a { display: flex; gap: 4px; flex-wrap: wrap; }
.mk-offer-a .mk-btn-secondary { background: var(--card); color: var(--m-ink); box-shadow: var(--imprint-sea); }
[data-theme="night"] .mk-offer-a .mk-btn-secondary { background: var(--sunken); }
.mk-offer-a .mk-btn-text { color: var(--m-ink); }

/* NM: “usually” line in Now, sleep forecast */
.mk-now-r:has(.mk-now-hint) { flex-wrap: wrap; row-gap: 0; }
.mk-now-hint { flex: 1 0 100%; padding-inline-start: 40px; margin-top: -4px; font: 400 13px/18px var(--font-ui); color: var(--text); box-sizing: border-box; }
.mk-sfc { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); }
[data-theme="night"] .mk-sfc { background: var(--sunken); }
.mk-sfc-h { display: flex; align-items: center; gap: 10px; }
.mk-sfc-l { display: flex; flex-direction: column; }
.mk-sfc-r { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.mk-sfc-r:last-child { border-bottom: 0; }
.mk-sfc-l1 { font: 400 17px/22px var(--font-ui); }
.mk-sfc-v { font: 700 17px/22px var(--font-display); font-variant-numeric: tabular-nums; color: var(--m-ink); }
.mk-sfc-sub { grid-column: 1 / -1; }
.mk-sfc-done .mk-sfc-l1, .mk-sfc-done .mk-sfc-v { color: var(--text2); }

/* TW: twins Now and shared timer */
.mk-tnow { gap: 4px; }
.mk-tnow-r { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; min-height: 0; background: var(--m-soft); border-radius: 10px; corner-shape: var(--mk-corner); flex: 1; }
.mk-tnow-r:first-child { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.mk-tnow-r:last-child { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.mk-tnow-h { display: flex; align-items: center; gap: 8px; }
.mk-tnow-h .mk-now-l { flex: 1; }
.mk-tnow-aside { color: var(--text); }
.mk-tnow-c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-inline-start: 30px; }
.mk-tnow-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline-start: 0; }
.mk-tnow-cell { display: flex; flex-direction: column; min-width: 0; }
.mk-tnow-cell .mk-cap { color: var(--m-ink); line-height: 16px; }
.mk-tnow-h .mk-now-l { line-height: 20px; }
.mk-tnow-v { display: flex; align-items: center; gap: 6px; }
.mk-tnow-v .mk-stat-n { font-size: 20px; line-height: 24px; }
.mk-tnow-v .mk-stat-u { font-size: 13px; line-height: 16px; }
.mk-tnow-c3 .mk-tnow-v .mk-stat-n { font-size: 20px; }
.mk-tnow-c3 .mk-tnow-v .mk-stat-u { font-size: 13px; }
.mk-tnow-just { font-size: 17px; line-height: 24px; }
.mk-tnow-side { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--m-fill); color: var(--text); font: 700 12px/20px var(--font-display); text-align: center; flex: none; }
.mk-gtimer { gap: 8px; }
.mk-gtimer-l { display: flex; flex-direction: column; gap: 6px; }
.mk-gtimer-r { display: flex; align-items: center; gap: 10px; min-height: 56px; }
.mk-gtimer-n { font: 500 17px/22px var(--font-ui); width: 64px; flex: none; }
.mk-gtimer-t { flex: 1; font: 800 34px/40px var(--font-display); font-variant-numeric: tabular-nums; }
.mk-gtimer-stop { height: 48px; padding: 0 18px; font-size: 17px; }
.mk-gtimer-end .mk-gtimer-n { color: var(--text2); }
.mk-hdr-kids { display: inline-flex; }
.mk-hdr-kids .mk-av + .mk-av { margin-inline-start: -8px; box-shadow: 0 0 0 2px var(--page); }

[lang|="ar"] .mk-now-hint, [lang|="ar"] .mk-row-sync { line-height: 20px; }
[lang|="ar"] .mk-tnow-v .mk-stat-n { line-height: 31px; }
[lang|="ar"] .mk-gtimer-t { line-height: 44px; }

/* ===== Stage 12 — health and data (VC, YD, CA, AS) ===== */
/* VC: a visit of the vaccination schedule */
.mk-vv { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); }
[data-theme="night"] .mk-vv { background: var(--sunken); }
.mk-vv-h { display: flex; align-items: center; gap: 12px; }
.mk-vv-ht { flex: 1; display: flex; flex-direction: column; }
.mk-vv-mark { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--text2); color: var(--text); }
.mk-vv-done .mk-vv-mark { background: var(--kelp-fill); box-shadow: none; }
.mk-vv-now .mk-vv-mark { box-shadow: inset 0 0 0 1.5px var(--m-ink); }
.mk-vv-l { list-style: none; margin: 0; padding: 0 0 0 38px; padding-inline: 38px 0; display: flex; flex-direction: column; gap: 2px; }
.mk-vv-l li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mk-vv-later { background: transparent; box-shadow: inset 0 0 0 0 transparent; padding-block: 8px; }
[data-theme="night"] .mk-vv-later { background: transparent; }
.mk-vv-later .mk-body, .mk-vv-later .mk-ts { color: var(--text2); }
.mk-vv-now { background: var(--m-soft); }
[data-theme="night"] .mk-vv-now { background: var(--m-soft); }
.mk-vv-a { padding-inline-start: 34px; padding-top: 4px; }
.mk-vv-now .mk-btn-secondary { background: var(--card); color: var(--m-ink); box-shadow: var(--imprint-mallow); }
[data-theme="night"] .mk-vv-now .mk-btn-secondary { background: var(--sunken); }

/* YD: data blocks */
.mk-db { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); }
[data-theme="night"] .mk-db { background: var(--sunken); }
.mk-db-ic { width: 44px; height: 44px; border-radius: 16px; corner-shape: var(--mk-corner); background: var(--m-soft); color: var(--m-ink); display: grid; place-items: center; flex: none; }
.mk-db-m { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-db-l { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 2px; }

/* CA: two ages */
.mk-agep { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); }
[data-theme="night"] .mk-agep { background: var(--sunken); }
.mk-agep-r { display: grid; grid-template-columns: 120px 1fr auto; align-items: baseline; gap: 8px; }
.mk-agep-v { font: 700 19px/24px var(--font-display); font-variant-numeric: tabular-nums; }
.mk-agep-c .mk-cap, .mk-agep-c .mk-agep-v { color: var(--apricot-ink); }
.mk-agep-w { font: 500 13px/18px var(--font-ui); color: var(--text2); }
.mk-agep-n { margin: 2px 0 0; }

/* AS: parsed entries */
.mk-pe { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 8px 14px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); box-shadow: var(--imprint-sea); }
[data-theme="night"] .mk-pe { background: var(--sunken); }
.mk-pe-h { display: flex; align-items: center; gap: 8px; color: var(--sea-ink); }
.mk-pe-h .mk-ts { color: var(--text); }
.mk-pe-saved { box-shadow: none; }
.mk-pe-saved .mk-pe-h { color: var(--kelp-ink); }
.mk-pe-kid { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 16px; corner-shape: var(--mk-corner); background: var(--amber-soft); }
.mk-pe-kids { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-pe-kid .mk-chip { background: var(--card); --m-soft: var(--sea-fill); --m-ink: var(--text); }
[data-theme="night"] .mk-pe-kid .mk-chip { background: var(--sunken); }
.mk-pe-kid .mk-chip-on { background: var(--sea-fill); }
.mk-pe-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mk-pe-r { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 0; border-top: 1px solid var(--hairline); }
.mk-pe-r:first-child { border-top: 0; }
.mk-pe-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-pe-t { font: 400 17px/22px var(--font-ui); }
.mk-pe-time { font: 500 15px/20px var(--font-ui); font-variant-numeric: tabular-nums; }
.mk-pe-x { width: 44px; height: 44px; margin: -4px -8px -4px 0; display: grid; place-items: center; color: var(--text2); flex: none; }
.mk-pe-saved .mk-pe-x { display: none; }
.mk-pe-q { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--amber-soft); color: var(--amber-ink); flex: none; align-self: flex-start; margin-top: 6px; }
.mk-pe-unclear { align-items: flex-start; }
.mk-pe-opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mk-pe-opts .mk-chip { height: 40px; padding: 0 12px; }
.mk-pe-a { display: flex; gap: 4px; align-items: center; }
[lang|="ar"] .mk-pe-t, [lang|="ar"] .mk-agep-v { line-height: 26px; }

/* ===== Stage 13 — Apple Watch (WA) and Siri (D-40) ===== */
.mk-wdev { display: inline-block; width: fit-content; align-self: flex-start; padding: 7px; background: #1d1714; flex: none; }
[data-theme="night"] .mk-wdev { box-shadow: 0 0 0 1px #352d28; }
.mk-ws { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--page); color: var(--text); font-family: var(--font-ui); flex: none; }
.mk-ws-tint { background: var(--m-soft); }
.mk-ws-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 34px; padding: 8px 20px 0 18px; flex: none; }
.mk-ws-time { font: 600 15px/18px var(--font-ui); color: var(--text); font-variant-numeric: tabular-nums; flex: none; }
.mk-ws-title { display: inline-flex; align-items: center; gap: 2px; font: 600 15px/18px var(--font-ui); color: var(--m-ink, var(--sea-ink)); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ws-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 4px 7px 8px; }
.mk-wchild { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 10px; margin-inline-start: -6px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--sunken); font: 600 15px/18px var(--font-ui); color: var(--text); position: relative; }
.mk-wchild::after { content: ""; position: absolute; inset: -9px -4px; }
.mk-wchild:disabled { background: none; padding: 0; margin: 0; cursor: default; }
.mk-wquick { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-wsum { display: flex; align-items: center; gap: 4px; font: 400 14px/18px var(--font-ui); color: var(--text2); padding: 0 6px; white-space: nowrap; overflow: hidden; flex: none; }
.mk-fit { display: inline-flex; align-items: center; gap: inherit; white-space: nowrap; }
.mk-wsum-l { flex: 1; min-width: 0; display: flex; gap: 4px; overflow: hidden; }
.mk-wsum-l > .mk-fit { gap: 4px; }
.mk-wtile-l { display: block; width: 100%; overflow: hidden; }
.mk-wss-l { flex: 1; min-width: 0; display: flex; overflow: hidden; }
.mk-wss-c { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mk-wss-nx { display: inline-flex; align-items: center; gap: 4px; font: 400 13px/16px var(--font-ui); color: var(--text2); }
.mk-wsum-next { margin-inline-start: auto; flex: none; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--m-fill); color: var(--text); font: 800 13px/20px var(--font-display); font-style: normal; text-align: center; }
.mk-ws-aod .mk-wsum-next { background: transparent; box-shadow: inset 0 0 0 1.5px #352d28; color: #8f857b; }
.mk-wsum .mk-ic { margin-inline-end: 1px; }
.mk-wsum b { font: 800 15px/18px var(--font-display); color: var(--text); }
.mk-wgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.mk-wtile { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 10px 10px 9px 11px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--m-fill); color: var(--text); min-width: 0; min-height: 0; }
.mk-wtile-l { font: 500 15px/18px var(--font-ui); max-width: 100%; white-space: nowrap; }
.mk-wtile-r { display: inline-flex; align-items: center; gap: 5px; font: 800 17px/20px var(--font-display); font-variant-numeric: tabular-nums; }
.mk-wtimer { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; }
.mk-wtimer-t { font: 800 44px/48px var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; padding: 0 6px; white-space: nowrap; }
.mk-wtimer-s { font: 400 13px/16px var(--font-ui); color: var(--text2); padding: 0 6px; }
.mk-wtimer-a { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.mk-wlr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mk-wlr-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--card); color: var(--text2); font: 800 19px/24px var(--font-display); }
.mk-wlr-on { background: var(--m-fill); color: var(--text); }
.mk-wstop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--card); color: var(--text); font: 500 17px/22px var(--font-ui); }
.mk-wstop .mk-ic { color: var(--m-ink); }
.mk-wrow { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 7px 10px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); color: var(--text); width: 100%; text-align: start; flex: none; }
.mk-wrow-on { background: var(--m-soft, var(--sea-soft)); }
.mk-wrow-on > .mk-ic:last-child { color: var(--m-ink, var(--sea-ink)); }
.mk-wrow-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-wrow-time { font: 600 13px/16px var(--font-ui); color: var(--text2); font-variant-numeric: tabular-nums; }
.mk-wrow-t { font: 500 15px/19px var(--font-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-wrow-by { width: 20px; height: 20px; border-radius: 50%; background: var(--sunken); color: var(--text2); font: 600 11px/20px var(--font-ui); text-align: center; flex: none; }
.mk-wrow-av { width: 30px; height: 30px; border-radius: 50%; background: var(--sea-soft); color: var(--sea-ink); font: 700 15px/30px var(--font-display); text-align: center; flex: none; }
.mk-wrow .mk-ic[aria-label] { color: var(--text2); }
.mk-whead { font: 600 13px/16px var(--font-ui); color: var(--text2); padding: 4px 6px 0; flex: none; }
.mk-wlist { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.mk-wsaved { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding-top: 2px; }
.mk-wsaved-ok { width: 40px; height: 40px; border-radius: 50%; background: var(--kelp-fill); color: var(--kelp-ink); display: grid; place-items: center; margin-bottom: 4px; flex: none; }
.mk-wsaved-t { font: 700 19px/23px var(--font-display); }
.mk-wsaved-s { font: 400 13px/16px var(--font-ui); color: var(--text2); }
.mk-wsaved-a { margin-top: auto; display: flex; flex-direction: column; gap: 2px; align-self: stretch; }
.mk-wbtn { height: 46px; border-radius: 999px; corner-shape: var(--mk-corner); background: var(--sunken); font: 500 17px/22px var(--font-ui); text-align: center; color: var(--text); }
.mk-wbtn-text { background: none; height: 36px; color: var(--sea-ink); font-size: 15px; }
/* 42 mm: a touch tighter */
.mk-ws-42 .mk-ws-bar { height: 32px; padding: 7px 18px 0 16px; }
.mk-ws-42 .mk-wtimer-t { font-size: 40px; line-height: 44px; }
.mk-ws-42 .mk-wlr-b, .mk-ws-42 .mk-wstop { height: 44px; }
/* 40 mm (SE): the layout check — same structure, smaller type and 40 pt targets */
.mk-ws-40 .mk-ws-bar { height: 28px; padding: 6px 15px 0 14px; }
.mk-ws-40 .mk-ws-time, .mk-ws-40 .mk-ws-title, .mk-ws-40 .mk-wchild { font-size: 14px; }
.mk-ws-40 .mk-wchild { height: 24px; padding: 0 8px; }
.mk-ws-40 .mk-ws-body { padding: 3px 5px 6px; gap: 5px; }
.mk-ws-40 .mk-wquick, .mk-ws-40 .mk-wgrid { gap: 5px; }
.mk-ws-40 .mk-wsum { font-size: 13px; line-height: 16px; padding: 0 4px; }
.mk-ws-40 .mk-wsum b { font-size: 14px; line-height: 16px; }
.mk-ws-40 .mk-wtile { padding: 7px 6px 7px 8px; border-radius: 20px; }
.mk-ws-40 .mk-wtile .mk-ic { width: 24px; height: 24px; }
.mk-ws-40 .mk-wtile-l { font-size: 13px; line-height: 16px; }
.mk-ws-40 .mk-wtile-r { font-size: 15px; }
.mk-ws-40 .mk-wtimer-t { font-size: 34px; line-height: 38px; padding: 0 4px; }
.mk-ws-40 .mk-wtimer-s { padding: 0 4px; }
.mk-ws-40 .mk-wlr-b, .mk-ws-40 .mk-wstop { height: 40px; font-size: 16px; }
.mk-ws-40 .mk-wlr-b { font-size: 17px; }
.mk-ws-40 .mk-wtimer-a, .mk-ws-40 .mk-wlr { gap: 5px; }
.mk-ws-40 .mk-wrow { min-height: 42px; padding: 5px 8px; border-radius: 18px; gap: 7px; }
.mk-ws-40 .mk-wrow-t { font-size: 14px; line-height: 17px; }
.mk-ws-40 .mk-wrow-time { font-size: 12px; line-height: 14px; }
.mk-ws-40 .mk-wsaved-ok { width: 32px; height: 32px; margin-bottom: 2px; }
.mk-ws-40 .mk-wsaved-t { font-size: 17px; line-height: 20px; }
.mk-ws-40 .mk-wbtn { height: 40px; font-size: 15px; }
.mk-ws-40 .mk-wbtn-text { height: 30px; font-size: 14px; }
/* Always On: night palette, darker still, no colour fields; numbers stay, seconds go (the caller passes minutes) */
.mk-ws-aod { background: #0d0907; color: #b2a79c; }
.mk-ws-aod .mk-ws-time, .mk-ws-aod .mk-wtimer-t, .mk-ws-aod .mk-wsum b { color: #b2a79c; }
.mk-ws-aod .mk-wtile, .mk-ws-aod .mk-wlr-b, .mk-ws-aod .mk-wstop, .mk-ws-aod .mk-wchild { background: transparent; box-shadow: inset 0 0 0 1.5px #352d28; color: #8f857b; }
.mk-ws-aod .mk-wlr-on { box-shadow: inset 0 0 0 1.5px var(--m-fill); color: #b2a79c; }
.mk-ws-aod .mk-ic { opacity: .6; }
.mk-ws-aod .mk-wsum, .mk-ws-aod .mk-wtimer-s { color: #8a8076; }
.mk-ws-aod .mk-ws-title { color: #8f857b; }
/* RTL: the time stays on the system side (watchOS mirrors it too), digits are never mirrored */
[dir="rtl"] .mk-ws-bar { padding-inline: 18px 20px; }
[lang|="ar"] .mk-wtile-l, [lang|="ar"] .mk-wsum { line-height: 21px; }
[lang|="ar"] .mk-wlr-b { font: 700 16px/22px var(--font-ui); }
/* Breast sides are physical: left stays on the left in right-to-left languages (phone timer too) */
[dir="rtl"] .mk-wlr, [dir="rtl"] .mk-lr { direction: ltr; }
[dir="rtl"] .mk-wlr-b, [dir="rtl"] .mk-lr-b { direction: rtl; }

/* Complications on a neutral face (not an Apple face). Full colour: module fills; tinted: the face accent, monochrome. */
.mk-wface { position: relative; overflow: hidden; background: #120d0b; color: #ece4d9; font-family: var(--font-ui); }
.mk-wface-t { position: absolute; left: 0; right: 0; top: 86px; text-align: center; font: 300 58px/62px var(--font-display); letter-spacing: -1px; font-variant-numeric: tabular-nums; color: #ece4d9; }
.mk-wface-d { position: absolute; right: 22px; top: 18px; font: 600 13px/16px var(--font-ui); color: #f8c8c8; letter-spacing: .5px; }
.mk-wface-dim { background: #080605; }
.mk-wface-dim .mk-wface-t { color: #8f857b; font-weight: 200; }
.mk-cpc, .mk-cpk, .mk-cpr { --cp-acc: var(--m-fill); }
[data-theme="night"] :is(.mk-cpc, .mk-cpk, .mk-cpr) { --cp-acc: var(--m-ink); }
.mk-cpc { position: relative; width: 50px; height: 50px; border-radius: 50%; background: #2a221e; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: #ece4d9; }
.mk-cpc-v { font: 800 14px/16px var(--font-display); font-variant-numeric: tabular-nums; }
.mk-cpc-b { position: absolute; right: -2px; top: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--cp-acc); color: #3f2d25; font: 800 11px/18px var(--font-display); font-style: normal; text-align: center; }
.mk-cp-run .mk-cpc-v { color: var(--cp-acc); }
.mk-cpk { position: absolute; width: 76px; height: 76px; color: #ece4d9; }
.mk-cpk svg { position: absolute; inset: 0; overflow: visible; }
.mk-cpk-tl { left: 0; top: 0; }
.mk-cpk-tr { right: 0; top: 0; }
.mk-cpk-track { fill: none; stroke: #352d28; stroke-width: 5; stroke-linecap: round; }
.mk-cpk-fill { fill: none; stroke: var(--cp-acc); stroke-width: 5; stroke-linecap: round; }
.mk-cpk-t { font: 700 11px var(--font-ui); fill: #ece4d9; letter-spacing: .2px; }
.mk-cpk-ic { position: absolute; bottom: 14px; }
.mk-cpk-tl .mk-cpk-ic { right: 14px; }
.mk-cpk-tr .mk-cpk-ic { left: 14px; }
.mk-cpr { display: flex; flex-direction: column; gap: 0; color: #ece4d9; min-width: 0; }
.mk-cpr-h { display: inline-flex; align-items: center; gap: 5px; font: 600 13px/16px var(--font-ui); color: var(--cp-acc); white-space: nowrap; }
.mk-cpr-h .mk-mini-dot { background: var(--cp-acc); }
.mk-cpr-v { font: 800 22px/26px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-cpr-s { font: 400 13px/16px var(--font-ui); color: #b2a79c; white-space: nowrap; }
.mk-cp-tint, .mk-cp-tint .mk-cpr-h, .mk-cp-tint .mk-cpr-s { color: #8bd7da; }
.mk-cp-tint .mk-cpc-v, .mk-cp-tint .mk-cpr-v { color: #d6f1f2; }
.mk-cp-tint.mk-cpc { background: #16292a; }
.mk-cp-tint .mk-cpc-b { background: #8bd7da; color: #120d0b; }
.mk-cp-tint .mk-cpk-fill { stroke: #8bd7da; }
.mk-cp-tint .mk-cpk-track { stroke: #1d3536; }
.mk-cp-tint .mk-cpk-t { fill: #8bd7da; }
.mk-cp-tint .mk-cpr-h .mk-mini-dot { background: #8bd7da; }
.mk-wss { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); color: var(--text); }
.mk-wss-c { font: 600 13px/16px var(--font-ui); color: var(--text2); }
.mk-wss-r { display: flex; align-items: center; gap: 7px; }
.mk-wss-v { font: 800 17px/22px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-wss-n { font: 400 13px/16px var(--font-ui); color: var(--text2); white-space: nowrap; }
.mk-wss-r .mk-mini-dot { margin-inline-start: auto; }
.mk-wss-r .mk-wsum-next { height: 22px; line-height: 22px; min-width: 24px; }
.mk-ws-tt { overflow: hidden; min-width: 0; flex: 1; display: flex; }

/* Siri (D-40): one quiet line, never a card with a picture */
.mk-siri { display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 14px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--sunken); }
.mk-siri-ic { color: var(--sea-ink); flex: none; }
.mk-siri-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-siri-p { font: 500 15px/20px var(--font-ui); }
.mk-siri-x { width: 44px; height: 44px; display: grid; place-items: center; color: var(--text2); flex: none; }

/* ===== Stage 14 — entries and health (PL, NT, SM, TE, VS, HL) ===== */
/* PL: Note — one full-width pebble under the sheet title */
.mk-notetile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 14px 8px 12px; border-radius: 22px; corner-shape: var(--mk-corner); background: var(--m-soft); color: var(--text); text-align: start; flex: none; }
.mk-notetile-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-notetile > .mk-ic:last-child { color: var(--m-ink); }
.mk-egrid-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* NT: text area, the folded note, feed rows */
.mk-area .mk-field-box { height: auto; align-items: stretch; padding: 12px 16px; }
.mk-area textarea { flex: 1; min-width: 0; border: 0; background: none; font: 400 17px/24px var(--font-ui); color: var(--text); outline: none; padding: 0; resize: none; }
.mk-area textarea::placeholder { color: var(--text2); }
.mk-area-h { display: flex; justify-content: space-between; gap: 8px; }
.mk-notefold { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 44px; padding: 0 4px; color: var(--sea-ink); font: 500 15px/20px var(--font-ui); }
.mk-row-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mk-row-enote { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row-enote::before { content: "“"; } .mk-row-enote::after { content: "”"; }
[lang|="ru"] .mk-row-enote::before, [lang|="de"] .mk-row-enote::before { content: "„"; }
[lang|="ru"] .mk-row-enote::before { content: "«"; } [lang|="ru"] .mk-row-enote::after { content: "»"; }
[lang|="de"] .mk-row-enote::after { content: "“"; }
[lang|="ja"] .mk-row-enote::before { content: "「"; } [lang|="ja"] .mk-row-enote::after { content: "」"; }
[lang|="ar"] .mk-row-enote::before { content: "«"; } [lang|="ar"] .mk-row-enote::after { content: "»"; }
/* TE: the tooth map — physical, never mirrored */
.mk-tmap { position: relative; margin: 0 auto; flex: none; direction: ltr; }
.mk-tooth { position: absolute; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.mk-tooth i { display: block; border-radius: 9px; corner-shape: var(--mk-corner); background: var(--card); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--apricot-ink) 45%, transparent); transition: background-color .2s ease-out; }
.mk-tooth-on i { background: var(--apricot-fill); box-shadow: inset 0 0 0 1.5px var(--apricot-ink); }
.mk-tooth-sel i { box-shadow: inset 0 0 0 3px var(--apricot-ink), 0 0 0 3px var(--page), 0 0 0 5px var(--sea-ink); }
.mk-tooth-new i { background: var(--apricot-fill); box-shadow: inset 0 0 0 1.5px var(--apricot-ink), 0 0 0 6px var(--apricot-soft); }
.mk-tooth:focus-visible { box-shadow: var(--focus-ring); }
[data-theme="night"] .mk-tooth i { background: var(--sunken); }
[data-theme="night"] .mk-tooth-on i, [data-theme="night"] .mk-tooth-new i { background: var(--apricot-fill); }
.mk-tmap-jaw { position: absolute; left: 0; right: 0; text-align: center; font: 500 13px/16px var(--font-ui); color: var(--text2); pointer-events: none; }
.mk-tmap-side { position: absolute; font: 500 13px/18px var(--font-ui); color: var(--apricot-ink); white-space: nowrap; pointer-events: none; }
.mk-tmap-r { left: 0; } .mk-tmap-l { right: 0; }
.mk-tmap-date { position: absolute; transform: translate(-50%, -50%); font: 500 12px/16px var(--font-ui); color: var(--text2); white-space: nowrap; pointer-events: none; }
.mk-tmap-s .mk-tooth i { border-radius: 8px; }
.mk-tcount { display: flex; align-items: center; gap: 8px; }
.mk-tmapcard { background: var(--card); border-radius: 24px; corner-shape: var(--mk-corner); padding: 14px 8px 10px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
[data-theme="night"] .mk-tmapcard { background: var(--card); }
/* disclosure */
.mk-disc { background: var(--card); border-radius: 20px; corner-shape: var(--mk-corner); }
.mk-disc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 52px; padding: 0 16px; text-align: start; color: var(--text); }
.mk-disc-h .mk-ic { color: var(--text2); }
.mk-disc-c { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.mk-disc-c ol { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 4px; font: 400 15px/20px var(--font-ui); }
/* VS: visits and questions */
.mk-visit { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 12px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); color: var(--text); text-align: start; }
.mk-visit-next { background: var(--m-soft); }
.mk-visit-d { width: 46px; height: 48px; flex: none; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--sunken); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.mk-visit-next .mk-visit-d { background: var(--m-fill); }
.mk-visit-d b { font: 800 19px/22px var(--font-display); }
.mk-visit-d span { font: 500 12px/14px var(--font-ui); color: var(--text2); }
.mk-visit-next .mk-visit-d span { color: var(--text); }
.mk-visit-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-visit-q { display: inline-flex; align-items: center; gap: 3px; font: 500 15px/20px var(--font-ui); color: var(--m-ink); }
.mk-visit-go { color: var(--text2); }
.mk-visit-past .mk-visit-m .mk-ts { font-weight: 400; }
.mk-qi { display: flex; align-items: flex-start; gap: 10px; padding: 10px 6px 10px 14px; min-height: 52px; border-radius: 16px; corner-shape: var(--mk-corner); }
.mk-qi + .mk-qi { box-shadow: 0 -1px 0 var(--hairline); border-radius: 0; }
.mk-qi.mk-row-new { background: var(--m-soft); border-radius: 16px; box-shadow: none; }
.mk-qi-t { flex: 1; min-width: 0; font: 400 17px/22px var(--font-ui); padding-top: 3px; }
.mk-qi-asked .mk-qi-t { color: var(--text2); }
.mk-qi .mk-row-by { margin-top: 4px; }
.mk-qi-cb { width: 44px; height: 44px; margin: -6px 0; display: grid; place-items: center; flex: none; position: relative; color: var(--text); }
.mk-qi-cb::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 9px; corner-shape: var(--mk-corner); background: var(--sunken); box-shadow: inset 0 0 0 1.5px var(--text2); }
.mk-qi-cb-on::before { background: var(--m-fill); box-shadow: none; }
.mk-qi-cb .mk-ic { position: relative; }
.mk-addline { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 4px 0 16px; border-radius: 16px; corner-shape: var(--mk-corner); background: var(--sunken); }
.mk-addline input { flex: 1; min-width: 0; border: 0; background: none; font: 400 17px/24px var(--font-ui); color: var(--text); outline: none; padding: 0; }
.mk-addline input::placeholder { color: var(--text2); }
.mk-addline:focus-within { box-shadow: var(--focus-ring); }
.mk-addline-b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mallow-fill); color: var(--text); flex: none; }
/* HL: section chips that scroll sideways */
.mk-schips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; flex: none; }
.mk-schips::-webkit-scrollbar { display: none; }
.mk-schips .mk-chip { flex: none; }
/* report: new module marks in print */
.rp .rp-h .mk-ic { flex: none; }

/* ===== Stage 15 — the baby’s day (DD, GP) ===== */
/* routine rows: the plan is quiet (dashed), a fact is filled like the feed; no difference, no marks */
.mk-rr { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 4px 6px 2px; text-align: start; color: var(--text); }
.mk-rr + .mk-rr { box-shadow: 0 -1px 0 var(--hairline); }
.mk-rr-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--m-ink); }
.mk-rr-plan .mk-rr-dot { box-shadow: inset 0 0 0 1.5px var(--m-ink); background: var(--card); --mk-dash: 1; border: 1.5px dashed color-mix(in srgb, var(--m-ink) 55%, transparent); box-shadow: none; }
.mk-rr-fact .mk-rr-dot { background: var(--m-soft); }
.mk-rr-time { font: 500 17px/22px var(--font-ui); font-variant-numeric: tabular-nums; width: 52px; flex: none; }
.mk-rr-plan .mk-rr-time, .mk-rr-plan .mk-rr-t { color: var(--text2); }
.mk-rr-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-rr-t { font: 400 17px/22px var(--font-ui); }
.mk-rr-next { font: 500 13px/18px var(--font-ui); color: var(--sea-ink); background: var(--sea-soft); border-radius: 999px; padding: 2px 10px; flex: none; }
.mk-rr .mk-ic[aria-label] { color: var(--text2); }
.mk-rr.mk-row-new { background: var(--m-soft); border-radius: 14px; }
[lang|="ar"] .mk-rr-t { line-height: 24px; }
/* header A: the band */
.mk-rband { position: relative; margin: 0 auto; padding-bottom: 20px; flex: none; direction: ltr; }
.mk-rband-track { position: relative; height: 40px; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--card); overflow: hidden; }
.mk-rband-night { position: absolute; top: 0; bottom: 0; background: var(--sunken); }
.mk-rband-span { position: absolute; top: 9px; height: 22px; border-radius: 8px; }
.mk-rband-pt { position: absolute; top: 15px; width: 10px; height: 10px; border-radius: 50%; }
.mk-rband-plan { border: 1.5px dashed var(--m-ink); background: transparent; box-sizing: border-box; opacity: .7; }
.mk-rband-fact { background: var(--m-fill); box-shadow: inset 0 0 0 1px var(--m-ink); }
.mk-rband-now { position: absolute; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--sea-ink); }
.mk-rband-axis { position: relative; height: 16px; margin-top: 4px; font: 400 12px/16px var(--font-ui); color: var(--text2); }
.mk-rband-axis span { position: absolute; transform: translateX(-50%); }
.mk-rband-axis span:first-child { transform: none; } .mk-rband-axis span:last-child { transform: translateX(-100%); }
.mk-dayhead { background: var(--card); border-radius: 24px; corner-shape: var(--mk-corner); padding: 14px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mk-dayhead .mk-rband-track { background: var(--sunken); }
.mk-dayhead .mk-rband-night { background: color-mix(in srgb, var(--hairline) 70%, var(--sunken)); }
/* GP: fact blocks, the sources table, the parent’s band */
.mk-fb { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); }
.mk-fb-mallow { background: var(--mallow-soft); }
.mk-fb-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 17px/22px var(--font-ui); }
.mk-fb-h .mk-ic { color: var(--m-ink); }
.mk-fb-l { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; }
.mk-stab { display: flex; flex-direction: column; gap: 8px; }
.mk-stab table { border-collapse: collapse; width: 100%; font: 400 15px/20px var(--font-ui); }
.mk-stab th { text-align: start; font: 500 13px/18px var(--font-ui); color: var(--text2); padding: 0 8px 6px 0; }
.mk-stab td { padding: 8px 8px 8px 0; vertical-align: top; border-top: 1px solid var(--hairline); }
.mk-stab td:first-child { width: 42%; font-weight: 500; }
.mk-markband { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 12px; border-radius: 16px; corner-shape: var(--mk-corner); background: var(--m-soft); color: var(--text); text-align: start; }
.mk-markband-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-markband > .mk-ic:last-child { color: var(--text2); }
.mk-rh-mark { fill: var(--apricot-soft); stroke: color-mix(in srgb, var(--apricot-ink) 40%, transparent); stroke-width: 1; }
.mk-lg-mark { width: 14px; height: 14px; border-radius: 4px; background: var(--apricot-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--apricot-ink) 40%, transparent); }
.mk-order { list-style: none; padding: 0 !important; counter-reset: ord; }
.mk-order li { display: flex; justify-content: space-between; gap: 12px; counter-increment: ord; }
.mk-order li > span:first-child::before { content: counter(ord) ". "; color: var(--text2); }
.mk-order-m { color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-rr-x { width: 44px; height: 44px; display: grid; place-items: center; color: var(--text2); flex: none; margin: -6px -4px -6px 0; }

/* ================= Stage 16 — Solids: catalog, meal, try next, First 100, liked & texture, favourites ================= */
.mk-ficon { display: grid; place-items: center; flex: none; background: var(--pear-soft); corner-shape: var(--mk-corner); overflow: hidden; }
.mk-ficon img { width: 80%; height: 80%; object-fit: contain; display: block; -webkit-user-drag: none; user-select: none; }
.mk-ficon-bare { background: none; }
.mk-ficon-bare img { width: 100%; height: 100%; }
.mk-ficon-ph { width: 60%; height: 60%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--pear-ink); opacity: .35; }
[data-theme="night"] .mk-ficon img { opacity: .7; }
.mk-food16 { min-height: 64px; padding: 8px 0; }
.mk-food-n { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mk-food-n .mk-body { overflow-wrap: anywhere; hyphens: auto; }
.mk-food-fav { color: var(--pear-ink); display: inline-flex; flex: none; }
.mk-food-add { width: 36px; height: 36px; border-radius: 12px; corner-shape: var(--mk-corner); background: var(--sunken); color: var(--text); display: grid; place-items: center; flex: none; }
.mk-food-added { background: var(--pear-soft); color: var(--pear-ink); }
.mk-flist { display: flex; flex-direction: column; }
.mk-fhead { position: sticky; top: var(--mk-fhead-top, 52px); z-index: 1; margin: 0 -16px; padding: 10px 16px 6px; background: var(--page); display: flex; align-items: baseline; gap: 8px; font: 500 13px/18px var(--font-ui); letter-spacing: .02em; text-transform: uppercase; color: var(--text2); }
[lang|="ar"] .mk-fhead, [lang|="ja"] .mk-fhead { text-transform: none; letter-spacing: 0; }
.mk-fhead-c { font-weight: 400; }
.mk-catbar { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 6px 16px 8px; background: var(--page); }
.mk-catbar::-webkit-scrollbar { display: none; }
.mk-catbar-i { flex: none; height: 38px; padding: 0 14px; border-radius: 12px; corner-shape: var(--mk-corner); background: var(--sunken); color: var(--text); font: 400 15px/20px var(--font-ui); white-space: nowrap; }
.mk-catbar-on { background: var(--pear-soft); color: var(--pear-ink); font-weight: 500; }
.mk-fchip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 4px 0 8px; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--pear-soft); color: var(--pear-ink); font: 500 15px/20px var(--font-ui); white-space: nowrap; }
.mk-fchip-x { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--pear-ink); }
[data-theme="night"] .mk-fchip img { opacity: .7; }
.mk-liked { display: flex; gap: 8px; }
.mk-liked-i { flex: 1; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--sunken); color: var(--text); font: 400 15px/20px var(--font-ui); }
.mk-liked-on { background: var(--pear-soft); color: var(--pear-ink); font-weight: 500; }
.mk-mealf { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 20px; corner-shape: var(--mk-corner); background: none; box-shadow: inset 0 0 0 1px var(--hairline); }
.mk-mealf-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-mealf-h .mk-ts { flex: 1; min-width: 0; }
.mk-mealf-amt { display: flex; gap: 6px; }
.mk-mealf-amt .mk-chip { flex: 1; justify-content: center; height: 40px; padding: 0 8px; }
.mk-mealf-amt .mk-chip-on { --m-soft: var(--pear-soft); --m-ink: var(--pear-ink); }
.mk-mealf-more { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; color: var(--text2); font: 400 14px/18px var(--font-ui); text-align: start; }
.mk-mealf-x { display: flex; flex-direction: column; gap: 10px; }
.mk-texture .mk-chip { height: 40px; padding: 0 12px; }
.mk-newf { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; corner-shape: var(--mk-corner); background: var(--pear-soft); color: var(--pear-ink); }
.mk-newf-t { display: flex; align-items: flex-start; gap: 8px; color: var(--text); }
.mk-newf-t > svg, .mk-newf-t > span:first-child { color: var(--pear-ink); flex: none; margin-top: 1px; }
.mk-newf .mk-src { color: var(--text2); }
.mk-trycard { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); text-align: start; color: var(--text2); }
.mk-trycard-ic { display: flex; flex: none; }
.mk-trycard-ic .mk-ficon + .mk-ficon { margin-inline-start: -10px; box-shadow: 0 0 0 2px var(--card); }
.mk-trycard-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.mk-tryi { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; }
.mk-tryi + .mk-tryi { box-shadow: 0 -1px 0 var(--hairline); }
.mk-tryi-log { flex: none; height: 36px; padding: 0 14px; border-radius: 12px; corner-shape: var(--mk-corner); background: var(--pear-soft); color: var(--pear-ink); font: 500 15px/20px var(--font-ui); }
.mk-tryi-hide { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text2); margin-inline-end: -8px; }
.mk-f100chip { height: 36px; padding: 0 12px; background: var(--pear-soft); color: var(--pear-ink); font-weight: 500; }
.mk-f100-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.mk-f100-i { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.mk-f100-i .mk-cap { overflow-wrap: anywhere; }
.mk-f100-slot { width: 64px; height: 64px; border-radius: 22px; corner-shape: var(--mk-corner); box-shadow: inset 0 0 0 1.5px var(--hairline); }
.mk-f100-cap { margin: 14px 4px 0; text-align: center; }
.mk-fhero { width: 100%; display: flex; align-items: center; gap: 14px; }
.mk-fhero-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mk-fav { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; corner-shape: var(--mk-corner); color: var(--text2); flex: none; align-self: flex-start; }
.mk-fav-on { color: var(--pear-ink); background: var(--pear-soft); }
.mk-fcard { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); text-align: start; color: var(--text2); }

/* ================= Stage 17 — links between modules (LK) ================= */
.mk-rh-sel { fill: color-mix(in srgb, var(--sea-soft) 70%, transparent); }
.mk-rh-dm { stroke: var(--page); stroke-width: 1.5; }
.mk-rh-wake { fill: var(--page); stroke: var(--lavender-ink); stroke-width: 1.75; stroke-dasharray: 2 1.6; }
.mk-lg-wake { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.75px var(--lavender-ink); }
.mk-lk { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); }
.mk-lk-h { display: flex; align-items: center; gap: 10px; }
.mk-lk-ht { display: flex; flex-direction: column; }
.mk-lk-pic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; }
.mk-lk-pic img { width: 100%; height: 100%; object-fit: contain; }
[data-theme="night"] .mk-lk-pic img { opacity: .7; }
.mk-lk-d { display: flex; flex-direction: column; gap: 6px; }
.mk-lk-day { margin: 2px 0 0; font: 500 13px/18px var(--font-ui); color: var(--text2); }
.mk-lk-r { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.mk-lk-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--m-soft); color: var(--m-ink); }
.mk-lk-t { font: 500 15px/20px var(--font-ui); font-variant-numeric: tabular-nums; width: 64px; flex: none; }
.mk-lk-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-lk-cap { padding-top: 2px; }
.mk-lkf { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--sunken); color: var(--text2); text-align: start; }
.mk-lkf .mk-bs { flex: 1; color: var(--text); }
.mk-dayf { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); }
.mk-dayf-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-dayf-x { width: 36px; height: 36px; display: grid; place-items: center; color: var(--text2); margin: -6px -6px -6px 0; }
.mk-dayf-l { display: flex; flex-direction: column; gap: 6px; }
.mk-dayf-i { display: flex; align-items: center; gap: 10px; }
.mk-dayf-i .mk-lk-ic { width: 26px; height: 26px; }
.mk-gw { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); }
.mk-gw-l { display: flex; flex-direction: column; }
.mk-gw-r { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.mk-gw-r + .mk-gw-r { box-shadow: 0 -1px 0 var(--hairline); }
.mk-gw-ic { width: 24px; flex: none; color: var(--text2); display: grid; place-items: center; }
.mk-gw-k { flex: 1; font: 400 15px/20px var(--font-ui); color: var(--text2); }
.mk-gw-v { font: 500 15px/20px var(--font-ui); color: var(--text); font-variant-numeric: tabular-nums; text-align: end; }
.mk-gw-n { color: var(--text); }
.mk-hd { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 24px; corner-shape: var(--mk-corner); background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); }
.mk-hd-h { display: flex; align-items: center; gap: 10px; }
.mk-hd-l { align-self: flex-start; }
.mk-nt { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 20px; corner-shape: var(--mk-corner); background: var(--card); }
.mk-nt-t { width: 100%; border-collapse: collapse; font: 400 14px/18px var(--font-ui); font-variant-numeric: tabular-nums; }
.mk-nt-t th { font: 500 12px/16px var(--font-ui); color: var(--text2); text-align: start; padding: 0 4px 6px 0; vertical-align: bottom; }
.mk-nt-t td { padding: 7px 4px 7px 0; box-shadow: 0 -1px 0 var(--hairline); }
.mk-nt-t th:not(:first-child), .mk-nt-t td:not(:first-child) { text-align: end; }
.mk-pair { padding: 14px 52px 12px 16px; display: flex; flex-direction: column; gap: 4px; }
[dir="rtl"] .mk-pair { padding: 14px 16px 12px 52px; }
.mk-pair-l { display: flex; flex-direction: column; gap: 8px; }
.mk-pair-i { display: flex; align-items: center; gap: 10px; }
.mk-pair-src { margin-inline-start: 38px; }
.mk-trycard-c { padding: 8px 12px; min-height: 48px; }
.mk-trycard-c .mk-trycard-m { flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mk-fbtn { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; corner-shape: var(--mk-corner); background: var(--sunken); color: var(--text); }
.mk-fbtn-on { background: var(--pear-soft); color: var(--pear-ink); }
.mk-fbtn-n { position: absolute; top: 4px; inset-inline-end: 4px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--pear-ink); color: var(--card); font: 600 11px/18px var(--font-ui); text-align: center; }
.mk-overlay { z-index: 5; }
.mk-jtitle-x .mk-title { flex: none; }
.mk-jtitle-c { flex: 1; display: flex; align-items: center; padding-inline-start: 8px; min-width: 0; }
.mk-food16 .mk-food-n { flex-wrap: wrap; row-gap: 4px; }
.mk-food16 .mk-food-n .mk-badges { display: inline-flex; gap: 4px; }
.mk-food16 .mk-food-n .mk-badge { padding: 1px 8px; font-size: 12px; line-height: 18px; }
.mk-jtitle-c .mk-chip { flex: none; }
.mk-jtitle-c { min-width: auto; }