/* ============================================================
   v190 Arc90 minimal system. One surface language for every screen:
   page title + one line, small section captions, flat cards, list rows
   with hairlines, text chips, one input row, calm buttons. No boxes in
   boxes, no emoji, motion only where it explains something.
   Loaded after premium.css. Spec: docs/design-system-v190.md
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --m-surface: color-mix(in srgb, var(--tx) 3.5%, transparent);
  --m-surface-2: color-mix(in srgb, var(--tx) 6%, transparent);
  --m-radius: 20px;
  --m-radius-sm: 14px;
  --m-gap: 24px;
}
[data-skin="ember"] {
  --m-surface: rgba(175, 195, 255, .035);
  --m-surface-2: rgba(175, 195, 255, .065);
  --m-action: #3d6dff;
}

/* no sideways scroll, ever (clip keeps the sticky header working) */
html, body { overflow-x: clip; }

/* ---------- calmer premium layer (v189 toned down) ---------- */
[data-skin="ember"] body::after { display: none !important; animation: none !important; }
[data-skin="ember"] body::before { animation: none !important; transform: none !important; }
[data-skin="ember"] .tab-plus:not(.open) { animation: none !important; }
[data-skin="ember"] .btn, [data-skin="ember"] .ember-cta, [data-skin="ember"] .ck-submit, [data-skin="ember"] .tk-fab { box-shadow: 0 4px 14px rgba(47, 93, 242, .22); }
.screen.anim .topbar h1 { animation-duration: .45s; }
@keyframes v189Title { from { opacity: 0; transform: translateY(6px); } }

/* ---------- primitives ---------- */
/* section caption, always outside a card */
.m-cap { margin: var(--m-gap) 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.m-cap:first-child { margin-top: 8px; }

/* flat card */
.m-card { padding: 16px; border-radius: var(--m-radius); border: 1px solid var(--line); background: var(--m-surface); }
.m-card + .m-card { margin-top: 10px; }

/* list of rows with hairlines */
.m-list { border-radius: var(--m-radius); border: 1px solid var(--line); background: var(--m-surface); overflow: hidden; }
.m-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; background: transparent;
  color: var(--tx); font: inherit; text-align: left; cursor: pointer; transition: background .15s;
}
.m-list > .m-row + .m-row, .m-list > * + .m-row, .m-list > .m-row + * { border-top: 1px solid var(--line); }
.m-row:active { background: var(--m-surface-2); }
.m-row-ico { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--tx-2); }
.m-row-ico svg { width: 20px; height: 20px; }
.m-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-row-txt b { font-size: 15px; font-weight: 500; color: var(--tx); }
.m-row-txt small { font-size: 12.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row-val { flex: none; font-size: 15px; font-weight: 500; color: var(--tx); font-variant-numeric: tabular-nums; }
.m-row-val em { margin-left: 2px; font-size: 12px; font-style: normal; color: var(--tx-2); }
.m-row-go { flex: none; font-size: 20px; line-height: 1; color: var(--tx-3); }
.m-row .m-tile { width: 32px; height: 32px; border-radius: 10px; }
.m-row .m-tile svg { width: 18px; height: 18px; }

/* big number moment */
.m-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.m-hero strong { font-family: var(--font-display, inherit); font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: -.02em; color: var(--tx); font-variant-numeric: tabular-nums; }
.m-hero strong em { margin-left: 4px; font-size: 16px; font-style: normal; color: var(--tx-3); }
.m-hero small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.m-hero p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tx-2); }

/* text chips */
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-chip {
  min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent;
  color: var(--tx-2); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.m-chip[aria-pressed="true"], .m-chip.on { color: #fff; border-color: transparent; background: var(--blue-grad, var(--accent)); }

/* one input row: field + action */
.m-inline { display: flex; align-items: center; gap: 8px; }
.m-input, #app .m-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 999px !important; border: 1px solid var(--line-2) !important;
  background: var(--m-surface) !important; color: var(--tx) !important; font: inherit; font-size: 15px; color-scheme: dark;
}
.m-btn {
  flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--blue-grad, var(--accent)); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .15s;
}
.m-btn:active { transform: scale(.97); }
.m-btn-ghost { background: var(--m-surface-2); color: var(--tx); border: 1px solid var(--line-2); }
.m-note { margin: 18px 8px 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--tx-3); }

/* ---------- legacy markup, flattened (Ember) ---------- */
[data-skin="ember"] .screen .card { border-radius: var(--m-radius); }
/* boxes inside boxes become plain blocks */
[data-skin="ember"] .card .card, [data-skin="ember"] .card .vital-card, [data-skin="ember"] .card .sleep-stat {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0; padding-right: 0;
}
/* the old pill eyebrow inside cards reads as a quiet caption */
[data-skin="ember"] .card-head .tip-tag, [data-skin="ember"] .card > .tip-tag { padding: 0; border: 0; background: none; box-shadow: none; color: var(--tx-3); font-size: 11px; letter-spacing: .12em; }
[data-skin="ember"] .section-title { margin: var(--m-gap) 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
[data-skin="ember"] .empty-note { font-size: 12px; color: var(--tx-3); }

/* ---------- Phases, lighter: no boxes around the six phases ---------- */
.ph-picks { gap: 4px 6px; }
.ph-pick { min-height: 50px; border-color: transparent; background: transparent; }
.ph-pick.is-picked { border-color: transparent; background: var(--m-surface-2); }
.ph-pick i { border: 0; padding: 0; min-width: 0; height: auto; margin-bottom: 1px; color: var(--tx-3); font-size: 10.5px; background: none !important; box-shadow: none !important; }
.ph-pick.is-past i, .ph-pick.is-now i { color: var(--accent); }
.ph-pick.is-now b { color: var(--tx); }

/* progressive disclosure: a quiet row that opens */
.m-more { border-radius: var(--m-radius); border: 1px solid var(--line); background: var(--m-surface); }
.m-more + .m-more { margin-top: 10px; }
.m-more > summary { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--tx); }
.m-more > summary::-webkit-details-marker { display: none; }
.m-more > summary::after { content: '›'; margin-left: auto; font-size: 20px; color: var(--tx-3); transition: transform .2s; }
.m-more[open] > summary::after { transform: rotate(90deg); }
.m-more > :not(summary) { padding: 0 14px 14px; }

/* visually hidden, still read by screen readers */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* line icons that replaced emoji (v190) */
.i-inl { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.i-inl svg { width: 16px; height: 16px; }
.vsig-top i svg { width: 14px; height: 14px; display: block; }
.locked-cover .lk svg { width: 26px; height: 26px; display: block; color: var(--tx-2); }
.obb-ico svg { width: 20px; height: 20px; }
.ob-health-row > span svg { width: 20px; height: 20px; color: var(--accent); }
.urgent .i-inl { flex: none; color: #ff8a8a; }

/* ---------- v191 auras: slow, meaningful light (never pulsing) ---------- */
@keyframes auraDrift { to { transform: rotate(360deg); } }
@keyframes auraBloom { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes auraRipple { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
/* Today: behind the score, brighter as the day fills */
.aura-today { position: absolute; left: 50%; top: 44px; width: 260px; height: 190px; margin-left: -130px; z-index: 0; pointer-events: none;
  opacity: calc(.3 + var(--frac, 0) * .7); transform: scale(calc(.85 + var(--frac, 0) * .35)); transition: opacity .8s, transform .8s; }
.aura-today i { position: absolute; inset: 0; border-radius: 50%; filter: blur(28px); animation: auraDrift 28s linear infinite; }
.aura-today i:first-child { background: radial-gradient(48% 52% at 35% 58%, rgba(255, 112, 36, .95), transparent 72%); }
.aura-today i:last-child { background: radial-gradient(44% 48% at 68% 40%, rgba(61, 109, 255, .8), transparent 72%); animation-duration: 36s; animation-direction: reverse; }
.aura-today.bloom::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 150, 80, .5), rgba(255, 150, 80, .18) 55%, transparent); filter: blur(26px); animation: auraBloom 1.6s ease-out both; }
.ember-gauge > :not(.aura-today) { position: relative; z-index: 1; }
/* Habit rings: one soft ripple when a rep is kept */
.dg-tile .dg-ring { position: relative; }
.dg-tile.just-done .dg-ring::after, .hr-row.just-done .hr-check::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 138, 61, .5), transparent 66%); filter: blur(5px); animation: auraRipple .9s ease-out both;
}
.hr-row .hr-check { position: relative; }
/* Phases: a quiet aura behind the dial */
.ph-dial::before { content: ''; position: absolute; left: 50%; top: 22%; width: 220px; height: 160px; margin-left: -110px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 40% 60%, rgba(255, 122, 47, .22), transparent 70%), radial-gradient(45% 45% at 65% 40%, rgba(61, 109, 255, .22), transparent 70%);
  filter: blur(26px); animation: auraDrift 40s linear infinite; }
.ph-dial > * { position: relative; }
/* Daily reflection: light behind the words */
.launch-quote-content { position: relative; }
.launch-quote-content::before { content: ''; position: absolute; left: 50%; top: 45%; width: 300px; height: 240px; margin: -120px 0 0 -150px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 50% at 38% 55%, rgba(255, 122, 47, .28), transparent 70%), radial-gradient(42% 46% at 64% 42%, rgba(61, 109, 255, .32), transparent 70%);
  filter: blur(30px); animation: auraDrift 32s linear infinite; }
@media (prefers-reduced-motion: reduce) { .aura-today i, .ph-dial::before, .launch-quote-content::before, .aura-today.bloom::after, .dg-tile.just-done .dg-ring::after, .hr-row.just-done .hr-check::after { animation: none !important; } }
[data-motion="reduced"] :is(.aura-today i, .ph-dial::before, .launch-quote-content::before, .aura-today.bloom::after) { animation: none !important; }

/* Onboarding: browse the whole library per area (v191) */
.ob-browse-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; margin: 10px 0 4px; padding: 0 2px; border: 0; background: none; color: var(--tx-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ob-browse-toggle span { font-size: 18px; color: var(--tx-3); }
.ob-browse { margin: 2px 0 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ob-browse-cats { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.ob-browse-cats::-webkit-scrollbar { display: none; }
.ob-cat { flex: none; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--tx-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ob-cat.on { color: #fff; border-color: transparent; background: color-mix(in srgb, var(--area, var(--accent)) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--area, var(--accent)) 60%, transparent); }
.ob-browse-more { margin-top: 10px; border: 0; background: none; padding: 4px 2px; color: var(--blue-2, var(--accent)); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

/* ---------- Calendar (v200): today's events, the connection card, "Add to Google Calendar" ---------- */
.cal-today { margin: var(--m-gap) 0 0; }
.cal-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cal-cap em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tx-3); }
.cal-card { display: grid; gap: 2px; padding: 6px; border-radius: var(--m-radius); background: var(--m-surface); }
.cal-row { display: flex; align-items: baseline; gap: 14px; padding: 9px 10px; border-radius: 14px; }
.cal-row.now { background: var(--blue-soft, var(--m-surface-2)); }
.cal-time { flex: none; width: 68px; font-size: 13px; font-weight: 600; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.cal-row.now .cal-time { color: var(--blue-2, var(--accent)); }
.cal-txt { min-width: 0; display: grid; gap: 1px; }
.cal-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500; color: var(--tx); }
.cal-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--tx-3); }
.cal-allday { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 6px 4px; }
.cal-allday span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: var(--m-surface-2); font-size: 12px; color: var(--tx-2); }
.cal-more { justify-self: start; margin: 2px 6px 4px; padding: 6px 4px; border: 0; background: none; color: var(--blue-2, var(--accent)); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

.cal-connect { display: grid; gap: 14px; padding: 16px; }
.cal-head { display: flex; align-items: center; gap: 12px; }
.cal-head > span:last-child { display: grid; gap: 2px; min-width: 0; }
.cal-head b { font-size: 15px; font-weight: 600; color: var(--tx); }
.cal-head small { font-size: 12.5px; line-height: 1.4; color: var(--tx-3); }
.cal-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--blue-soft, var(--m-surface-2)); color: var(--blue-2, var(--accent)); }
.cal-ico svg { width: 19px; height: 19px; }
.cal-input .m-input { min-width: 0; flex: 1; font-size: 14px; }
.cal-error { margin: 0; font-size: 12.5px; line-height: 1.45; color: #ff9b8a; }
.cal-how > summary { min-height: 40px; font-size: 13.5px; color: var(--tx-2); }
.cal-how ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--tx-2); }
.cal-how p { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--tx-3); }

.tk-gcal, .cal-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 4px 0 10px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tk-gcal { border: 1px solid var(--line-2); background: transparent; color: var(--tx-2); }
.tk-gcal svg, .cal-add svg { width: 17px; height: 17px; }
.cal-add { margin-top: 12px; }

/* Device matrix 2026-10-19, touch targets: the toast's close button is 30 x 42 (styles.css is pinned). */
.nudge .nx { position: relative; }
.nudge .nx::after { content: ''; position: absolute; inset: -2px -7px; }