/* ===== Demo app additions. Built only from tokens; same glass, same curves as the prototype. ===== */
.window { min-height: 620px; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.grow { flex: 1; }
button { font-family: var(--font-sans); }
/* ===== Loading screen (index.html) =====
   The brand tile with a flickering flame pops in, the name rises letter by letter, the bar fills,
   then the whole screen lifts away to reveal the app. */
.splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center;
          background: var(--surface-100); transition: opacity .55s ease, transform .7s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .7s; }
.splash.is-done { opacity: 0; transform: scale(1.04); visibility: hidden; pointer-events: none; }
/* While Chrome prepares the page in the background, the animation waits at its first frame */
.splash.is-paused, .splash.is-paused * { animation-play-state: paused !important; }
.splash-mark { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 22px; background: var(--brand);
               box-shadow: 0 6px 0 var(--brand-edge), 0 18px 40px rgba(38, 56, 154, 0.28);
               animation: splashPop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.splash-mark .streak-ico { width: 54px; height: 54px; }
@keyframes splashPop { from { opacity: 0; transform: scale(.5) translateY(14px); } to { opacity: 1; transform: none; } }
.splash-name { display: flex; margin: 22px 0 0; font: 900 30px/36px var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.splash-name span { display: inline-block; animation: splashRise .55s cubic-bezier(.32, .72, 0, 1) both; }
.splash-name span:nth-child(1) { animation-delay: .25s; } .splash-name span:nth-child(2) { animation-delay: .29s; }
.splash-name span:nth-child(3) { animation-delay: .33s; } .splash-name span:nth-child(4) { animation-delay: .37s; }
.splash-name span:nth-child(5) { animation-delay: .41s; } .splash-name span:nth-child(6) { animation-delay: .45s; }
.splash-name span:nth-child(7) { animation-delay: .49s; }
@keyframes splashRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.splash-tag { margin: 4px 0 0; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); animation: splashRise .55s cubic-bezier(.32, .72, 0, 1) .6s both; }
/* The bar eases most of the way while loading, and fills the rest as the screen leaves */
.splash-bar { width: 140px; height: 4px; margin-top: 22px; border-radius: 999px; background: var(--tile); overflow: hidden;
              animation: splashRise .5s ease .7s both; }
.splash-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--purple));
                transform-origin: left; transform: scaleX(0); animation: splashFill 1.1s cubic-bezier(.3, .6, .3, 1) .75s forwards; }
@keyframes splashFill { to { transform: scaleX(.82); } }
.splash.is-done .splash-bar i { transform: scaleX(1); animation: none; transition: transform .25s ease; }
@media (prefers-reduced-motion: reduce) { .splash, .splash * { animation: none !important; transition: opacity .2s linear !important; } .splash.is-done { transform: none; } }

/* Scrollbars: slim rounded thumbs on a clear track, no arrow buttons, so they never square off a rounded card's corner.
   Hidden until you scroll: js/shell.js marks whatever is scrolling with .is-scrolling for a moment.
   Hovering the thumb also shows it, so it can still be grabbed. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: transparent padding-box; }
.is-scrolling::-webkit-scrollbar-thumb { background-color: rgba(28, 26, 34, 0.2); }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: rgba(28, 26, 34, 0.32); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .is-scrolling { scrollbar-color: rgba(28, 26, 34, 0.22) transparent; }
}
/* App-like selection: clicking buttons, labels and chips never highlights their text.
   Text stays selectable where you write it (fields, Free Note) and in notifications, so it can still be copied. */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable], [contenteditable] *, .fn-editor, .ph-note-text { -webkit-user-select: text; user-select: text; }

/* Views: one per nav section, crossfade with a small rise */
.view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(8px);
        transition: opacity .18s ease, transform .3s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .18s; }
.view.is-active { opacity: 1; visibility: visible; transform: none;
        transition: opacity .28s ease, transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s linear 0s; }
.page { position: absolute; left: 104px; right: 76px; top: var(--space-3); bottom: var(--space-6);
        display: flex; flex-direction: column; gap: 20px; min-height: 0; }
/* The closed tile also slips to the side strip. Coming from the 42px tile, the strip moves up to the inset
   and stretches down on the same settle curve, and the glass holder fades back in under it. */
.rail.is-mini { transition: left .42s cubic-bezier(.32, .72, 0, 1), width .42s cubic-bezier(.32, .72, 0, 1),
                            top .42s cubic-bezier(.32, .72, 0, 1), height .42s cubic-bezier(.32, .72, 0, 1),
                            padding .42s cubic-bezier(.32, .72, 0, 1), border-radius .42s cubic-bezier(.32, .72, 0, 1),
                            background .2s ease, border-color .2s ease, box-shadow .3s ease; }

/* Rail minimized to the 16px strip (4px in, so its edge is at 20px): content moves left to keep a 16px gap.
   Same duration and curve as the rail's own slide so both move together. Open and closed rail keep 104px. */
.home, .page, .widgets { transition: left .42s cubic-bezier(.32, .72, 0, 1); }
.window.rail-mini .home, .window.rail-mini .page, .window.rail-mini .widgets { left: calc(20px + var(--space-4)); }
.panel { flex: 1; min-height: 0; padding: 22px 24px; display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-title { margin: 0; font: 600 20px/28px var(--font-sans); letter-spacing: -0.01em; }
.panel-sub { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
/* Title with its details underneath (Focus Timer: today's sessions sit under the name) */
.panel-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Dashboard filter: pill in the header, popover anchored under it and kept inside the dashboard card */
.dash-head { align-items: center; }
.dash-tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dash-tools .dash-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 12px; flex: none; border: 0; border-radius: 999px;
        background: var(--glass-chip); color: var(--ink); font: 500 12px/16px var(--font-sans); cursor: pointer;
        transition: background .15s ease, color .15s ease, transform .15s ease; }
.pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
            transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
.pill:hover { background: rgba(28, 26, 34, 0.1); }
.pill:active { transform: scale(.96); }
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill[aria-expanded="true"] svg { transform: rotate(180deg); }
.pill.is-active { background: var(--rank-pill-bg); color: var(--rank-pill-ink); }
.filter-pop { position: absolute; z-index: 3; top: 64px; right: 16px; width: 340px; max-width: calc(100% - 32px); max-height: calc(100% - 80px);
              box-sizing: border-box; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px;
              border-radius: var(--radius-md); background: var(--surface-000); border: 1px solid var(--line); box-shadow: var(--shadow-glass);
              transform-origin: top right; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97);
              transition: opacity .15s ease, transform .2s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .2s; }
.filter-pop.is-open { opacity: 1; visibility: visible; transform: none;
              transition: opacity .2s ease, transform .4s cubic-bezier(.32, .72, 0, 1), visibility 0s linear 0s; }
.filter-body { display: flex; flex-direction: column; gap: 10px; }
.filter-note { margin: 0; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.filter-pop .sheet-foot { margin-top: 0; }
.filter-pop .btn:disabled { opacity: .5; cursor: default; }

/* Dashboard footer chips */
.dash-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--glass-chip);
        font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.chip b { color: var(--ink); font-weight: 600; }
.chip .ico { width: 14px; height: 14px; }
.bar.zero i { height: 3px !important; opacity: .25; }
.bar.future i { opacity: .3; }

/* Pinned widgets row under the home grid. Each widget is one compact 76px line: a value plus at most one action. */
.widgets { position: absolute; left: 104px; right: 76px; top: calc(var(--space-3) + min(72%, 600px) + 20px); bottom: var(--space-6);
           display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 76px; align-content: start; gap: 20px; min-height: 0; }
.widgets-empty { grid-column: 1 / -1; align-self: start; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); padding: 4px 6px; }
.w-slot { position: relative; min-width: 0; }
.widget { height: 100%; box-sizing: border-box; padding: 0 16px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
          overflow: hidden; animation: rise .45s cubic-bezier(.32, .72, 0, 1) both; }
.widget .check { width: 20px; height: 20px; }
.widget .check .ico { width: 12px; height: 12px; }
.w-text { flex: 1; min-width: 0; font: 500 14px/20px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-muted { color: var(--ink-muted); }
.w-big { font: 700 28px/34px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-icon { color: var(--accent); display: grid; }
.w-icon .gicon { width: 24px; height: 24px; }
/* Remove badge sits just outside the card's top-right corner, so it never covers what's inside */
.w-x { position: absolute; top: -8px; right: -8px; z-index: 1; width: 22px; height: 22px; padding: 0; display: grid; place-items: center;
       border: 1px solid var(--glass-edge); border-radius: 50%; background: var(--surface-000); color: var(--ink-muted); box-shadow: var(--shadow-chip);
       cursor: pointer; opacity: 0; transform: scale(.8); transition: opacity .15s ease, transform .2s cubic-bezier(.32, .72, 0, 1), color .15s ease; }
.w-x .ico { width: 12px; height: 12px; stroke-width: 2.2; }
.w-slot:hover .w-x, .w-x:focus-visible { opacity: 1; transform: none; }
.w-x:hover { color: var(--close-red); }
.w-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }


/* Buttons and inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 12px;
       background: var(--glass-chip); color: var(--ink); font: 500 13px/16px var(--font-sans); cursor: pointer; white-space: nowrap;
       transition: background .15s ease, transform .15s ease, filter .15s ease; }
.btn .ico { width: 16px; height: 16px; }
.btn:hover { background: rgba(28, 26, 34, 0.1); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); color: var(--surface-000); box-shadow: var(--shadow-chip); }
.btn.primary:hover { filter: brightness(.92); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--glass-chip); }
.btn.danger { color: var(--close-red); }
.btn.big { height: 44px; min-width: 132px; border-radius: var(--radius-md); font-size: 14px; }
.icon-btn { width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px;
            background: transparent; color: var(--ink-muted); cursor: pointer; transition: background .15s ease, color .15s ease, opacity .15s ease; }
.icon-btn:hover { background: var(--glass-chip); color: var(--ink); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-btn .ico { width: 16px; height: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
/* Label with a small action beside it (habit reminders: + adds another time) */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px 0; }
.field-head .icon-btn { width: 28px; height: 28px; }
.icon-btn:disabled { opacity: .35; cursor: default; background: none; }
.rem-list { display: flex; flex-direction: column; gap: 8px; }
.rem-row { display: flex; align-items: center; gap: 6px; animation: rise .25s cubic-bezier(.32, .72, 0, 1) both; }
.rem-row .input { flex: 1; min-width: 0; }
.rem-list.is-single .rem-del { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row.three { grid-template-columns: repeat(3, 1fr); }
.input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line);
         background: var(--glass-fill-hover); font: 400 14px/20px var(--font-sans); color: var(--ink); outline: none;
         transition: border-color .15s ease, box-shadow .15s ease; }
textarea.input { height: auto; padding: 10px 12px; resize: vertical; min-height: 64px; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--rank-pill-bg); }
.input::placeholder { color: var(--ink-muted); opacity: .7; }
/* Time fields open Habitat's own wheel picker (js/timepicker.js) instead of the browser's dropdown */
.input[type="time"] { cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a96' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l2.5 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.input[type="time"]::-webkit-calendar-picker-indicator { display: none; }

.tp { position: fixed; z-index: 40; width: 184px; padding: 8px; box-sizing: border-box; border-radius: 16px; background: var(--surface-000);
      border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(18, 18, 28, 0.18); opacity: 0; transform: translateY(-4px) scale(.98);
      transform-origin: top left; transition: opacity .18s ease, transform .22s cubic-bezier(.32, .72, 0, 1); }
.tp.is-open { opacity: 1; transform: none; }
.tp-cols { position: relative; display: flex; align-items: center; justify-content: center; height: 180px; }
.tp-band { position: absolute; left: 0; right: 0; top: 72px; height: 36px; border-radius: 10px; background: var(--rank-pill-bg); pointer-events: none; }
.tp-col { position: relative; flex: 1; height: 100%; overflow: hidden; touch-action: none; user-select: none; cursor: grab; outline: none; border-radius: 10px;
          -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.tp-col:active { cursor: grabbing; }
.tp-col:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); -webkit-mask-image: none; mask-image: none; }
.tp-track { will-change: transform; }
.tp-item { display: block; height: 36px; font: 500 17px/36px var(--font-sans); font-variant-numeric: tabular-nums; text-align: center; color: var(--ink-muted); }
.tp-item.is-sel { font-weight: 700; color: var(--accent); }
.tp-colon { position: relative; flex: none; width: 10px; text-align: center; font: 700 17px/36px var(--font-sans); color: var(--accent); }
.tp-foot { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; }
.tp-btn { flex: 1; height: 32px; border: 0; border-radius: 9px; background: var(--glass-chip); color: var(--ink); font: 600 13px/16px var(--font-sans); cursor: pointer; }
.tp-btn.is-primary { background: var(--accent); color: var(--surface-000); }
.tp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .tp { transition: none; } }

/* Date fields open Habitat's own calendar (js/datepicker.js), built from the same card as the time picker */
.input[type="date"] { cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a96' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='3'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.input[type="date"]::-webkit-calendar-picker-indicator { display: none; }

.dp { position: fixed; z-index: 40; width: 284px; padding: 14px 16px 16px; box-sizing: border-box; border-radius: 16px; background: var(--surface-000);
      border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(18, 18, 28, 0.18); opacity: 0; transform: translateY(-4px) scale(.98);
      transform-origin: top left; transition: opacity .18s ease, transform .22s cubic-bezier(.32, .72, 0, 1); }
.dp.is-open { opacity: 1; transform: none; }
.dp.is-above { transform-origin: bottom left; transform: translateY(4px) scale(.98); }
.dp.is-above.is-open { transform: none; }
.dp-head { display: flex; align-items: center; gap: 2px; margin: 0 -4px 10px; }
/* Month and year: plain text that turns into a pill on hover, and stays one while its wheel is open */
.dp-pill { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 8px 0 10px; border: 0; border-radius: 999px; background: transparent;
           color: var(--ink); font: 700 15px/20px var(--font-sans); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.dp-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s ease, transform .2s ease; }
.dp-pill:hover { background: var(--glass-chip); }
.dp-pill:hover svg, .dp-pill:focus-visible svg { opacity: .6; }
.dp-pill[aria-expanded="true"] { background: var(--rank-pill-bg); color: var(--accent); }
.dp-pill[aria-expanded="true"] svg { opacity: 1; transform: rotate(180deg); }
.dp-pill:focus-visible, .dp-nav:focus-visible, .dp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dp-nav { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink-muted); cursor: pointer; }
.dp-nav:hover { background: var(--glass-chip); color: var(--ink); }
.dp-nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dp-week { margin-bottom: 2px; }
/* Months slide sideways inside this frame when you change month */
.dp-pages { position: relative; overflow: hidden; margin: 0 -16px; padding: 0 16px; }
.dp-grid-old { position: absolute; top: 0; left: 16px; right: 16px; pointer-events: none; }
.dp-pill span { display: inline-block; }
.dp-week span { height: 24px; font: 600 11px/24px var(--font-sans); text-align: center; color: var(--ink-muted); }
.dp-day { height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: 500 13px/32px var(--font-sans);
          font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .12s ease; }
.dp-day:hover { background: var(--glass-chip); }
.dp-day.is-out { color: var(--ink-muted); opacity: .5; }
.dp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); font-weight: 700; }
.dp-day.is-sel { background: var(--accent); color: var(--surface-000); font-weight: 700; box-shadow: none; opacity: 1; }
/* The wheel that drops from the month or year pill */
.dp-wheel { position: absolute; z-index: 1; height: 180px; padding: 0 6px; border-radius: 18px; background: var(--surface-000); border: 1px solid var(--line);
            box-shadow: 0 14px 32px rgba(18, 18, 28, 0.16); display: flex; opacity: 0; transform: translateY(-4px) scale(.97); transform-origin: top center;
            transition: opacity .16s ease, transform .2s cubic-bezier(.32, .72, 0, 1); }
.dp-wheel.is-open { opacity: 1; transform: none; }
/* Short windows: tighter rows so the whole month still fits */
.dp.is-compact .dp-head { margin-bottom: 2px; }
.dp.is-compact .dp-week span { height: 20px; line-height: 20px; }
.dp.is-compact .dp-day { height: 26px; line-height: 26px; border-radius: 8px; }
.dp-wheel-month { width: 136px; }
.dp-wheel-year { width: 96px; }
.dp-wheel .tp-band { left: 6px; right: 6px; }
@media (prefers-reduced-motion: reduce) { .dp, .dp-wheel, .dp-pill svg { transition: none; } }

/* Lists (tasks, habits) */
.quick { display: flex; align-items: center; gap: 10px; margin-top: 16px; height: 44px; padding: 0 12px; border-radius: var(--radius-md);
         background: var(--glass-chip); transition: background .15s ease, box-shadow .15s ease; }
.quick:focus-within { background: var(--surface-000); box-shadow: 0 0 0 2px var(--accent); }
.quick-icon { color: var(--ink-muted); display: grid; }
.quick-input { flex: 1; border: 0; background: transparent; outline: none; font: 400 14px/20px var(--font-sans); color: var(--ink); }
.quick-input::placeholder { color: var(--ink-muted); }
.list { list-style: none; margin: 12px -10px 0; padding: 0 10px 6px; overflow-y: auto; flex: 1; min-height: 0; }
.group-label { font: 600 12px/16px var(--font-sans); color: var(--ink-muted); margin: 14px 12px 4px; }
.group-label.overdue { color: var(--close-red); }
.list > li.group-label:first-child { margin-top: 4px; }
.row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 2px 8px 2px 12px; border-radius: var(--radius-md);
       transition: background .15s ease; animation: rise .4s cubic-bezier(.32, .72, 0, 1) both; }
.row:hover { background: var(--glass-chip); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border: 0; background: none;
            text-align: left; cursor: pointer; color: inherit; border-radius: 8px; }
.row-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row-title { font: 500 14px/20px var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { display: flex; align-items: center; gap: 12px; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); min-height: 16px; }
.meta { display: inline-flex; align-items: center; gap: 5px; }
.meta .ico { width: 13px; height: 13px; }
.meta.overdue { color: var(--close-red); }
.prio { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.prio.med { opacity: .55; }
.prio.low { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.row-del { opacity: 0; }
.row:hover .row-del, .row-del:focus-visible { opacity: 1; }
.row-del:hover { color: var(--close-red); }
.task.is-done .row-title { color: var(--ink-muted); text-decoration: line-through; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; text-align: center; list-style: none;
         font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }

/* Round check */
.check { position: relative; width: 22px; height: 22px; flex: none; padding: 0; border-radius: 50%; border: 1.8px solid var(--ink-muted);
         background: transparent; cursor: pointer; display: grid; place-items: center;
         transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.check:hover { border-color: var(--accent); }
.check:active { transform: scale(.86); }
.check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check .ico { width: 13px; height: 13px; stroke: var(--surface-000); stroke-width: 2.6; transform: scale(0); transition: transform .4s cubic-bezier(.2, 1.12, .32, 1); }
.check.is-done { background: var(--accent); border-color: var(--accent); }
.check.is-done .ico { transform: none; }

/* Habit rows */
.hdays { display: flex; gap: 6px; }
.hday { width: 34px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; border: 0; border-radius: 10px;
        background: transparent; cursor: pointer; color: var(--ink-muted); font: 500 11px/14px var(--font-sans); }
.hday:disabled { cursor: default; }
.hday:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hday-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--tile);
            box-shadow: inset 0 0 0 1px var(--tile-edge); transition: background .2s ease, transform .15s ease; }
.hday:not(:disabled):hover .hday-dot { background: var(--tile-hover); }
.hday:not(:disabled):active .hday-dot { transform: scale(.88); }
.hday-dot .ico { width: 14px; height: 14px; stroke: var(--surface-000); stroke-width: 2.6; transform: scale(0); transition: transform .4s cubic-bezier(.2, 1.12, .32, 1); }
.hday.is-done .hday-dot, .hday.is-done:not(:disabled):hover .hday-dot { background: var(--accent); box-shadow: none; }
.hday.is-done .hday-dot .ico { transform: none; }
.hday.is-off .hday-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.hday.is-today { color: var(--ink); font-weight: 600; }
.hday.is-today .hday-dot { box-shadow: inset 0 0 0 1px var(--tile-edge), 0 0 0 2px var(--surface-000), 0 0 0 3.5px var(--accent); }
.hday.is-today.is-done .hday-dot { box-shadow: 0 0 0 2px var(--surface-000), 0 0 0 3.5px var(--accent); }
.streak { width: 104px; display: flex; align-items: center; gap: 6px; justify-content: flex-end; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.streak b { font: 800 16px/20px var(--font-display); color: var(--ink); }
.streak .gicon { width: 18px; height: 18px; }

/* Focus timer */
.focus-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
/* Each mode tints the ring: focus is blue into purple, breaks lean purple */
.ring { position: relative; width: min(290px, 40vh); height: min(290px, 40vh); --ring-a: var(--accent); --ring-b: var(--purple); }
.ring[data-mode="short"] { --ring-a: var(--purple); --ring-b: var(--purple-soft); }
.ring[data-mode="long"] { --ring-a: var(--purple-soft); --ring-b: var(--accent); }
.ring svg { position: relative; display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.rg-a { stop-color: var(--ring-a); transition: stop-color .6s ease; }
.rg-b { stop-color: var(--ring-b); transition: stop-color .6s ease; }
.ring .track { fill: none; stroke: var(--tile); stroke-width: 12; }
.ring .value { fill: none; stroke: url(#ringGrad); stroke-width: 12; stroke-linecap: round; }
.ring .value-glow { fill: none; stroke: url(#ringGrad); stroke-width: 12; stroke-linecap: round; filter: url(#ringGlow); opacity: 0; transition: opacity .6s ease; }
.ring.is-running .value-glow { opacity: .14; }   /* a faint lift while running only, in keeping with the flat cards */
.ring .tick { stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; opacity: .18; transition: opacity .25s linear; }
.ring .tick.is-major { stroke-width: 2.6; opacity: .38; }
.ring.is-running .tick { stroke: var(--ring-b); transition: none; }
/* The head: a white knob on the end of the arc, with a glow that pulses while running */
.ring-head { transition: opacity .3s ease; }
.rh-dot { fill: var(--surface-000); stroke: var(--ring-b); stroke-width: 4; transition: stroke .6s ease; }
.rh-glow { fill: var(--ring-b); opacity: .3; transform-box: fill-box; transform-origin: center; transition: fill .6s ease; }
.ring.is-running .rh-glow { animation: ringHead 1.6s ease-in-out infinite; }
@keyframes ringHead { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.8); opacity: .06; } }
/* The halo breathes: slowly when idle, about one breath every 4s while you focus (a calm breathing pace) */
.ring-halo { position: absolute; inset: -6%; border-radius: 50%; pointer-events: none;
             background: radial-gradient(circle, transparent 50%, color-mix(in srgb, var(--ring-b) 12%, transparent) 58%, transparent 66%);
             animation: ringBreathe 8s ease-in-out infinite; }
.ring.is-running .ring-halo { animation-duration: 4s; }
.ring.is-paused .ring-halo { animation-play-state: paused; }
@keyframes ringBreathe { 0%, 100% { transform: scale(.97); opacity: .25; } 50% { transform: scale(1.03); opacity: .7; } }
.ring-spark { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; background: var(--accent); }
.ring-spark.s1 { background: var(--purple); width: 6px; height: 6px; }
.ring-spark.s2 { background: var(--purple-soft); width: 10px; height: 10px; }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
/* Digits roll like a flip clock (each digit sits in its own clipped slot) */
.ring-time { display: flex; justify-content: center; font: 700 52px/56px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rt-slot { position: relative; display: inline-block; height: 56px; overflow: hidden;
           -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.rt-slot > span { display: block; }
.rt-slot > .rt-out { position: absolute; left: 0; top: 0; }
.ring.is-paused .ring-time, .ring.is-paused .ring-cap { animation: ringBlink 1.8s ease-in-out infinite; }
@keyframes ringBlink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.ring-cap { font: 500 13px/16px var(--font-sans); color: var(--ink-muted); margin-top: 4px; }
/* Mode switch: one white highlight that slides between the modes */
.seg.has-thumb { position: relative; }
.seg.has-thumb button { position: relative; z-index: 1; transition: color .25s ease; }
.seg.has-thumb button[aria-pressed="true"] { background: none; box-shadow: none; }
.seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: 8px; background: var(--surface-000); box-shadow: var(--shadow-chip);
             transition: transform .4s cubic-bezier(.32, .72, 0, 1), width .4s cubic-bezier(.32, .72, 0, 1); }
/* Opening the Focus screen: its parts rise in one after another */
.view[data-view="focus"].is-active .focus-wrap > * { animation: rise .5s cubic-bezier(.32, .72, 0, 1) both; }
.view[data-view="focus"].is-active .focus-wrap > :nth-child(2) { animation-delay: .06s; }
.view[data-view="focus"].is-active .focus-wrap > :nth-child(3) { animation-delay: .12s; }
.view[data-view="focus"].is-active .focus-wrap > :nth-child(4) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .ring-halo, .rh-glow, .ring-time, .ring-cap, .view[data-view="focus"] .focus-wrap > * { animation: none !important; }
  .seg-thumb, .rg-a, .rg-b { transition: none; }
}
.focus-controls { display: flex; gap: 10px; align-items: center; }
/* Timer lengths, edited right on the Focus screen */
.timer-lengths { display: flex; gap: 8px; padding: 8px; border-radius: var(--radius-md); background: var(--glass-chip); }
.tl { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px; }
.tl-in { display: flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.tl .input { width: 64px; height: 34px; padding: 0 8px; text-align: center; font-variant-numeric: tabular-nums; }

/* Stats */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; flex: none; }
.kpi { padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; animation: rise .45s cubic-bezier(.32, .72, 0, 1) both; }
.kpi-label { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.kpi-num { font: 700 28px/34px var(--font-sans); letter-spacing: -0.02em; }
.kpi-sub { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 20px; }
.heat-wrap { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.heat-row { display: flex; gap: 8px; }
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); grid-auto-columns: 14px; gap: 4px; }
.heat-labels { display: grid; grid-template-rows: repeat(7, 14px); gap: 4px; font: 500 10px/14px var(--font-sans); color: var(--ink-muted); }
.cell { border-radius: 4px; background: var(--tile); }
.cell.l1 { background: color-mix(in srgb, var(--accent) 30%, var(--tile)); }
.cell.l2 { background: color-mix(in srgb, var(--accent) 55%, var(--tile)); }
.cell.l3 { background: color-mix(in srgb, var(--accent) 78%, var(--tile)); }
.cell.l4 { background: var(--accent); }
.cell.future { background: transparent; }
.heat-legend { display: flex; align-items: center; gap: 4px; font: 500 11px/14px var(--font-sans); color: var(--ink-muted); }
.heat-legend .cell { width: 12px; height: 12px; }
.focus-chart-title { margin: 22px 0 10px; }
.bars.small { flex: 1; min-height: 60px; max-height: 140px; gap: 6px; }
.bars.small + .days { gap: 6px; }
.bars.small + .days span { font-size: 10px; }
.rates .rate { display: flex; flex-direction: column; gap: 6px; padding: 10px 2px; border-bottom: 1px solid var(--line); animation: rise .4s cubic-bezier(.32, .72, 0, 1) both; }
.rates .rate:last-child { border-bottom: 0; }
.rate-top { display: flex; justify-content: space-between; gap: 8px; font: 500 13px/18px var(--font-sans); }
.rate-top span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rate-top b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rate-track { height: 8px; border-radius: 4px; background: var(--tile); overflow: hidden; }
.rate-track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transform-origin: left; animation: grow .9s cubic-bezier(.32, .72, 0, 1) both; }

/* ===== Game layer (design-pack: Ranks, GameStats, CoverArt, ChunkyButton) =====
   Dark blue, purple and black, the Nunito face and a little bounce. Colour lives in icons and badges, never in text. */
.badge { display: block; flex: none; }
.gicon { display: block; flex: none; width: 20px; height: 20px; }
.game-hero { margin: 0; color: var(--ink); }

/* Chunky button: the one main action on a screen, sits on a 4px ledge and sinks when pressed */
.chunky { font: 800 15px/20px var(--font-display); letter-spacing: .01em; border: 0; border-radius: var(--radius-md); padding: 12px 22px; cursor: pointer;
          background: var(--brand); color: var(--surface-000); box-shadow: var(--shadow-ledge); min-width: 132px;
          transform: translateY(0); transition: transform .08s ease, box-shadow .08s ease, filter .15s ease; }
.chunky:hover { filter: brightness(1.1); }
.chunky:active { transform: translateY(4px); box-shadow: 0 0 0 var(--brand-edge); }
.chunky:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Streak chip on the dashboard header */
.streak-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; flex: none; border-radius: 999px;
               background: var(--streak-bg); font: 800 15px/18px var(--font-display); color: var(--ink); white-space: nowrap; }
.streak-chip .gicon { width: 20px; height: 20px; }
.streak-chip span { font: 600 12px/16px var(--font-sans); color: var(--ink-muted); }
.streak-chip.lost { background: var(--tile); color: var(--ink-muted); }
.stat-ico { display: grid; }
.streak-ico { overflow: visible; }

/* ===== Streak flames (js/streaks.js) =====
   Live flames flicker from their base; sparks twinkle, the 30-day star bobs and its halo pulses; a lost flame smokes. */
.sf-live .sf-flame, .sf-live .sf-core, .sf-live .sf-side { transform-box: view-box; transform-origin: 12px 19.5px; }
.sf-live .sf-flame { animation: sfFlicker 2.6s ease-in-out infinite; }
.sf-live .sf-core { animation: sfCore 1.4s ease-in-out infinite; }
.sf-live .sf-side { animation: sfFlicker 2s ease-in-out infinite reverse; }
@keyframes sfFlicker { 0%, 100% { transform: none; } 25% { transform: scale(1.03, .97); } 50% { transform: scale(.98, 1.04) skewX(-1.5deg); } 75% { transform: scale(1.01, .99) skewX(1deg); } }
@keyframes sfCore { 0%, 100% { transform: none; } 50% { transform: scale(.9, 1.08); } }
.sf-live .sf-spark, .sf-live .sf-star, .sf-live .sf-halo, .sf-live .sf-smoke { transform-box: fill-box; transform-origin: center; }
.sf-live .sf-spark { animation: sfTwinkle 2.2s ease-in-out infinite; }
@keyframes sfTwinkle { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(.45) rotate(45deg); opacity: .45; } }
.sf-live .sf-star { animation: sfStar 3s ease-in-out infinite; }
@keyframes sfStar { 0%, 100% { transform: none; } 50% { transform: translateY(-.6px) rotate(14deg) scale(1.08); } }
.sf-live .sf-halo { animation: sfHalo 2.6s ease-in-out infinite; }
@keyframes sfHalo { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(1.1); opacity: .45; } }
.sf-live .sf-smoke { animation: sfSmoke 2.8s ease-in infinite; }
@keyframes sfSmoke { 0% { transform: none; opacity: .9; } 100% { transform: translate(1.4px, -3px) scale(1.7); opacity: 0; } }
.sf-live .sf-ember { animation: sfEmber 2.4s ease-in-out infinite; }
@keyframes sfEmber { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }

/* ===== Streak moment: everything blurs and the flame changes into its new form ===== */
.streak-moment { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px;
                 background: rgba(240, 240, 244, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); opacity: 0;
                 transition: opacity .4s ease, background-color .6s ease, backdrop-filter .7s ease, -webkit-backdrop-filter .7s ease; }
.streak-moment.is-open { opacity: 1; background: rgba(240, 240, 244, .55); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
.streak-moment.is-closing { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
.sm-stage { position: relative; width: 240px; height: 240px; display: grid; place-items: center; }
.sm-flame { position: absolute; width: 132px; height: 132px; display: grid; place-items: center; }
.sm-flame .streak-ico { width: 100%; height: 100%; }
/* Light behind the flame: a soft glow, and slow-turning rays once the new flame arrives */
.sm-glow { position: absolute; inset: 10%; border-radius: 50%; opacity: 0;
           background: radial-gradient(circle, color-mix(in srgb, var(--sm-c) 34%, transparent), color-mix(in srgb, var(--sm-c) 10%, transparent) 50%, transparent 70%); }
.sm-rays { position: absolute; inset: -20%; border-radius: 50%; opacity: 0; transition: opacity .8s ease;
           background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--sm-c) 22%, transparent) 0deg 7deg, transparent 7deg 24deg);
           -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%); mask-image: radial-gradient(circle, #000 18%, transparent 62%); }
/* Beat 1: the old flame appears */
.sm-old { opacity: 0; transform: scale(.6) translateY(10px); transition: opacity .45s ease, transform .6s cubic-bezier(.32, .72, 0, 1); }
.is-in .sm-old { opacity: 1; transform: none; }
.is-in .sm-glow { opacity: .55; transition: opacity .6s ease; }
/* Beat 2 (milestone): it gathers itself, shaking and brightening */
.is-charge .sm-old { animation: smCharge .65s ease-in forwards; }
@keyframes smCharge { 0% { transform: none; filter: none; } 25% { transform: scale(1.04) rotate(-4deg); } 50% { transform: scale(1.07) rotate(4deg); }
                      75% { transform: scale(1.11) rotate(-3deg); } 100% { transform: scale(1.18); filter: brightness(1.7) saturate(.5); } }
/* Beat 3 (milestone): it bursts into the new flame */
.sm-new { opacity: 0; transform: scale(.3); }
.is-swap .sm-old { animation: smOldOut .35s ease-in forwards; }
@keyframes smOldOut { from { transform: scale(1.18); opacity: 1; filter: brightness(1.7); } to { transform: scale(.4); opacity: 0; filter: blur(4px) brightness(2.2); } }
.is-swap .sm-new { animation: smNewIn .75s cubic-bezier(.34, 1.56, .64, 1) forwards; }
@keyframes smNewIn { 0% { opacity: 0; transform: scale(.3); } 55% { opacity: 1; transform: scale(1.14); } 100% { opacity: 1; transform: none; } }
.is-swap .sm-glow { animation: smGlow 1.4s ease-out forwards; }
@keyframes smGlow { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.15); } 100% { opacity: .7; transform: none; } }
.is-swap .sm-rays { opacity: 1; animation: smSpin 16s linear infinite; }
@keyframes smSpin { to { transform: rotate(360deg); } }
.sm-spark { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; background: var(--sm-c); }
.sm-spark.s1 { background: var(--purple); width: 6px; height: 6px; }
.sm-spark.s2 { background: var(--purple-soft); width: 11px; height: 11px; }
.sm-spark.is-ash { background: #b4b7c3; width: 5px; height: 5px; }
/* Lost streak, beat 2: the flame falters and drains to grey */
.is-falter .sm-old { animation: smFalter .85s linear forwards; }
@keyframes smFalter { 0% { opacity: 1; filter: none; } 15% { opacity: .5; } 25% { opacity: 1; } 40% { opacity: .3; } 50% { opacity: .9; filter: grayscale(.6); }
                      65% { opacity: .25; } 75% { opacity: .8; } 100% { opacity: .9; filter: grayscale(1) brightness(.85); transform: scale(.94); } }
/* Lost streak, beat 3: it sinks away and the cracked flame splits open, with a jolt */
.is-lost.is-swap .sm-old { animation: smSink .45s ease-in forwards; }
@keyframes smSink { from { opacity: .9; transform: scale(.94); filter: grayscale(1) brightness(.85); } to { opacity: 0; transform: translateY(16px) scale(.8); filter: grayscale(1) brightness(.85); } }
.is-lost.is-swap .sm-new { animation: smLostIn .3s ease-out forwards; }
@keyframes smLostIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.is-lost.is-swap .sm-stage { animation: smJolt .45s ease-out .05s; }
@keyframes smJolt { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.sm-new .sf-half { transform-box: view-box; transform-origin: 12px 19px; }
.is-lost.is-swap .sm-new .sf-half-l { animation: smSplitL .8s cubic-bezier(.32, .72, 0, 1) both; }
.is-lost.is-swap .sm-new .sf-half-r { animation: smSplitR .8s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes smSplitL { 0% { transform: translate(.6px, -.4px) rotate(5deg); } 55% { transform: translate(-.5px, .2px) rotate(-4deg); } 100% { transform: none; } }
@keyframes smSplitR { 0% { transform: translate(-.6px, -.4px) rotate(-5deg); } 55% { transform: translate(.5px, .2px) rotate(4deg); } 100% { transform: none; } }
.is-lost .sm-glow { background: radial-gradient(circle, rgba(138, 141, 156, .22), transparent 65%); }
/* Beat 4: the words rise in */
.sm-text { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 380px; opacity: 0; transform: translateY(12px);
           transition: opacity .45s ease, transform .6s cubic-bezier(.32, .72, 0, 1); }
.is-text .sm-text { opacity: 1; transform: none; }
.sm-eyebrow { margin: 0; font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sm-c); }
.sm-title { margin: 6px 0 0; font: 900 34px/40px var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
/* What the milestone is on: "Overall streak", "Habit – Gym", "Habits – Gym, Read" */
.sm-on { margin: 10px 0 0; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--sm-c) 12%, transparent);
         font: 700 13px/18px var(--font-sans); color: var(--ink); max-width: 100%; overflow-wrap: anywhere; }
.sm-sub { margin: 8px 0 18px; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.is-lost .sm-eyebrow { color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) {
  .sf-live *, .streak-moment, .streak-moment * { animation: none !important; transition: none !important; }
  .is-swap .sm-old { opacity: 0; } .is-swap .sm-new { opacity: 1; transform: none; }
}
.is-bump { animation: bump .5s cubic-bezier(.2, 1.12, .32, 1); }
@keyframes bump { 0% { transform: none; } 35% { transform: scale(1.12); } 100% { transform: none; } }
.meter-num { font: 900 38px/42px var(--font-display); letter-spacing: -0.01em; }

/* Profile card: cover design, Edit cover pill, rank pill, stats row */
.cover-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.cover-edit { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px;
              border: 0; border-radius: 999px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
              font: 600 11px/16px var(--font-sans); color: var(--ink); cursor: pointer; }
.cover-edit:hover { background: var(--surface-000); }
.cover-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cover-edit svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu .stats, .menu .cover-edit { opacity: 0; transition: opacity .12s ease; }
.acct.is-open .menu .stats, .acct.is-open .menu .cover-edit { opacity: 1; transition: opacity .3s ease .16s; }

button.rank { border: 0; cursor: default; }
.rank { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 3px 11px 3px 4px; border-radius: 999px;
        background: var(--rank-pill-bg); color: var(--rank-pill-ink); font: 800 13px/18px var(--font-display); }
.rank svg.badge { width: 22px; height: 24px; stroke: none; fill: none; }
.rank small { font: 700 12px/16px var(--font-display); opacity: .8; }
/* The pill's tint follows the rank family: grey, blue (default) or purple; Legend is black */
.rank[data-family="grey"] { background: #ececf0; color: #3a3a42; }
.rank[data-family="purple"] { background: var(--streak-bg); color: #4a2590; }
.rank[data-family="legend"] { background: #e4e4ea; color: var(--night); }
.rank-go { display: none; }
.rank.is-none { background: var(--glass-chip); color: var(--ink-muted); cursor: pointer; padding-right: 6px; transition: background .15s ease, color .15s ease, transform .15s ease; }
.rank.is-none svg.badge { stroke: currentColor; }
.rank.is-none .rank-go { display: block; width: 14px; height: 14px; margin-left: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rank.is-none:hover { background: var(--rank-pill-bg); color: var(--rank-pill-ink); }
.rank.is-none:active { transform: scale(.96); }
.rank:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.stat { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; row-gap: 2px; padding: 8px 9px; text-align: left;
        border: 0; border-radius: 12px; background: var(--stat-bg); box-shadow: inset 0 0 0 1px var(--tile-edge); min-width: 0; font-family: var(--font-sans); }
.stat > div { display: contents; }
.stat svg { width: 18px; height: 18px; }
.stat b { font: 800 15px/18px var(--font-display); color: var(--ink); white-space: nowrap; }
.stat span { grid-column: 1 / -1; font: 500 11px/14px var(--font-sans); color: var(--ink-muted); white-space: nowrap; }
.stat-link { cursor: pointer; transition: background .15s ease; }
.stat-link:hover { background: var(--surface-000); }
.stat-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Edit cover picker */
.cover-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cover-opt { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer; text-align: left; }
.cover-opt img { display: block; width: 100%; height: 64px; object-fit: cover; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--tile-edge); }
.cover-opt span { font: 800 13px/16px var(--font-display); color: var(--ink); padding: 0 2px; }
.cover-opt:hover { background: var(--glass-chip); }
.cover-opt[aria-pressed="true"] { background: var(--rank-pill-bg); box-shadow: inset 0 0 0 2px var(--accent); }
.cover-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Rank page */
.rank-intro { align-items: center; justify-content: center; text-align: center; gap: 14px; overflow-y: auto; }
.rank-lead { margin: 0; max-width: 460px; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.rank-row { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 820px; }
.rank-row.in-panel { margin: 16px 0 0; max-width: none; }
.rank-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 6px; border-radius: 16px;
             background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--glass-edge); animation: rise .45s cubic-bezier(.32, .72, 0, 1) both; }
.rank-card b { display: block; margin-top: 6px; font: 800 14px/18px var(--font-display); }
.rank-card .cap { margin-top: 2px; font: 500 11px/14px var(--font-sans); color: var(--ink-muted); }
.rank-card .badge { width: 56px; height: 61px; }
.rank-row.in-panel .rank-card:not(.is-past):not(.is-current) { opacity: .6; }
.rank-card.is-current { background: var(--surface-000); box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-chip); }
.rank-you { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px;
            background: var(--accent); color: var(--surface-000); font: 800 11px/16px var(--font-display); }
.rank-hero { flex: none; flex-direction: row; align-items: center; gap: 32px; }
.rank-hero-main { display: flex; align-items: center; gap: 16px; }
.rank-hero-main p { margin: 0; }
.rank-name { font: 900 28px/32px var(--font-display); }
.rank-progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rank-progress .rate-top b { font-family: var(--font-display); font-weight: 800; }
.rank-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 20px; }
.rank-grid .panel { overflow-y: auto; }
.rank-note { margin-top: 14px; }
.rank-earn { flex: none; }
.rank-earn .rate-top span { display: inline-flex; align-items: center; gap: 8px; }
.rank-earn .rate-top .ico { width: 16px; height: 16px; color: var(--ink-muted); }
.rank-earn .rate-top b { font-family: var(--font-display); font-weight: 800; }

/* Leaderboard (coming soon) */
.soon { padding: 2px 9px; border-radius: 999px; background: var(--streak-bg); color: #4a2590; font: 800 12px/18px var(--font-display); }
.lb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 12px; overflow-y: auto; }
.lb-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lb-trophy { width: 64px; height: 64px; }
.lb-rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.lb-rules b { font: 800 13px/18px var(--font-display); color: var(--ink); }
.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-row { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: var(--radius-md); background: var(--stat-bg); box-shadow: inset 0 0 0 1px var(--tile-edge); }
.lb-pos { width: 18px; font: 800 14px/18px var(--font-display); color: var(--ink-muted); text-align: center; }
.lb-av { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tile); }
.lb-bar { height: 10px; border-radius: 5px; background: var(--tile); }
.lb-row.is-ghost { opacity: .7; }
.lb-row.is-ghost .lb-xp { margin-left: auto; width: 44px; height: 10px; border-radius: 5px; background: var(--tile); }
.lb-row.is-you { background: var(--surface-000); box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-chip); margin-top: 6px; }
.lb-row.is-you .lb-av { background: transparent; }
.lb-name { font: 800 14px/18px var(--font-display); }
.lb-name small { font: 700 12px/16px var(--font-display); color: var(--ink-muted); margin-left: 4px; }
.lb-row.is-you .lb-xp { margin-left: auto; display: flex; align-items: center; gap: 4px; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); white-space: nowrap; }
.lb-xp .gicon { width: 16px; height: 16px; }
.lb-xp b { font: 800 14px/18px var(--font-display); color: var(--ink); }

/* XP pop-up, centred at the top of the window; drops down from above */
.rank-pop { position: absolute; left: 0; right: 0; top: var(--space-4); margin: 0 auto; z-index: 6; width: 300px; box-sizing: border-box; padding: 12px 14px 12px 12px;
            display: flex; align-items: center; gap: 12px; border-radius: var(--radius-lg);
            background: var(--glass-fill-hover); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(170%); backdrop-filter: blur(var(--blur-glass)) saturate(170%);
            border: 1px solid var(--glass-edge); box-shadow: var(--shadow-glass); pointer-events: none;
            opacity: 0; visibility: hidden; transform: translateY(-16px) scale(.96); transform-origin: top center;
            transition: opacity .2s ease, transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .35s; }
.rank-pop.is-open { opacity: 1; visibility: visible; transform: none;
            transition: opacity .25s ease, transform .55s cubic-bezier(.2, 1.12, .32, 1), visibility 0s linear 0s; }
.rp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-top { position: relative; display: flex; align-items: center; gap: 8px; }
.rp-rank { font: 800 15px/18px var(--font-display); white-space: nowrap; }
.rp-rank small { font: 700 12px/16px var(--font-display); color: var(--ink-muted); }
.rp-up { display: none; padding: 1px 7px; border-radius: 999px; background: var(--purple); color: var(--surface-000); font: 800 11px/16px var(--font-display); white-space: nowrap; }
.rank-pop.is-up .rp-up { display: inline-block; animation: rpUp .5s cubic-bezier(.2, 1.12, .32, 1); }
.rank-pop.is-up .badge { animation: rpBadge .6s cubic-bezier(.2, 1.12, .32, 1); }
.rp-plus { margin-left: auto; font: 900 15px/18px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; }
.rp-plus.is-pop { animation: rpPlus 1.1s cubic-bezier(.32, .72, 0, 1) forwards; }
.rank-pop .rate-track i { animation: none; transition: width .7s cubic-bezier(.32, .72, 0, 1); }
.rp-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rp-pts { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.rp-pts .gicon { width: 15px; height: 15px; }
.rp-pts b { font: 800 13px/16px var(--font-display); color: var(--ink); }
.rp-next { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes rpPlus { 0% { opacity: 0; transform: translateY(8px) scale(.7); } 25% { opacity: 1; transform: translateY(-2px) scale(1.15); } 45% { transform: none; } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rp-plus.is-pop { opacity: 1; } .is-bump, .rank-card { animation: none !important; } .chunky { transition: none !important; } }
@keyframes rpUp { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes rpBadge { 0% { transform: none; } 40% { transform: scale(1.15) rotate(-6deg); } 100% { transform: none; } }

/* Settings */
.settings { flex: 1; min-height: 0; overflow-y: auto; margin: 8px -10px 0; padding: 0 10px;
            display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 40px; align-content: start; }
.set-group { display: flex; flex-direction: column; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.set-group h3 { margin: 0; font: 600 15px/20px var(--font-sans); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.set-label { font: 500 14px/20px var(--font-sans); }
.set-hint { margin: 2px 0 0; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.set-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.switch { position: relative; width: 42px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 999px; background: var(--tile-hover); cursor: pointer;
          transition: background .2s ease; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-000);
                 box-shadow: var(--shadow-chip); transition: transform .35s cubic-bezier(.32, .72, 0, 1); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Profile card open: everything except the card blurs and fades back (rail included, it sits under z-index 4).
   Fades in with the card's open timing and out a little quicker, like the card's close. */
.acct-scrim { position: absolute; inset: 0; z-index: 4; background: rgba(235, 235, 238, 0.45);
              -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
              opacity: 0; visibility: hidden; pointer-events: none;
              transition: opacity .3s ease, visibility 0s linear .3s; }
.acct-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; cursor: default;
                      transition: opacity .4s ease, visibility 0s linear 0s; }

/* Sheets: add / edit dialogs, same glass, rise in on the settle curve */
.scrim { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(235, 235, 238, 0.55);
         opacity: 0; transition: opacity .2s ease; }
.scrim[hidden] { display: none; }
.scrim.is-open { opacity: 1; }
.scrim:not(.is-open) { pointer-events: none; }
.sheet { width: 460px; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); overflow: auto; padding: 20px; background: var(--glass-fill-hover);
         transform: translateY(12px) scale(.97); transition: transform .5s cubic-bezier(.32, .72, 0, 1); }
.scrim.is-open .sheet { transform: none; }
.form { display: flex; flex-direction: column; gap: 14px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin: -4px -6px 2px 0; }
.sheet-title { margin: 0; font: 600 18px/24px var(--font-sans); letter-spacing: -0.01em; }
.sheet-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.seg.full { display: flex; }
.seg.full button { flex: 1; }
.day-chips { display: flex; gap: 6px; }
.day-chip { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--glass-chip); color: var(--ink-muted); cursor: pointer;
            font: 600 13px/16px var(--font-sans); transition: background .15s ease, color .15s ease, transform .15s ease; }
.day-chip:active { transform: scale(.92); }
.day-chip[aria-pressed="true"] { background: var(--accent); color: var(--surface-000); }
.day-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.presets .btn { height: 28px; padding: 0 10px; font-size: 12px; }
.wpick { display: flex; flex-direction: column; gap: 4px; }
.wpick-row { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: var(--radius-md); }
.wpick-row:hover { background: var(--glass-chip); }
.add-icon .ico { width: 20px; height: 20px; color: var(--ink); }
.wpick-text { flex: 1; min-width: 0; }

/* Toasts */
.toasts { position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 460px; padding: 10px 10px 10px 14px; border-radius: var(--radius-md);
         background: var(--glass-fill-hover); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(170%); backdrop-filter: blur(var(--blur-glass)) saturate(170%);
         border: 1px solid var(--glass-edge); box-shadow: var(--shadow-glass); font: 500 13px/18px var(--font-sans); color: var(--ink);
         animation: toastIn .45s cubic-bezier(.32, .72, 0, 1); transition: opacity .2s ease, transform .3s cubic-bezier(.32, .72, 0, 1); }
.toast.is-out { opacity: 0; transform: translateY(8px) scale(.97); }
.toast > .ico { width: 18px; height: 18px; color: var(--accent); }
.toast-text { display: flex; flex-direction: column; padding-right: 4px; }
.toast-text small { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.toast .btn { height: 30px; padding: 0 10px; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(44px) scale(.45); } 60% { opacity: 1; } to { opacity: 1; transform: none; } } /* comes up out of the phone */
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rank-pop, .rank-pop *, .filter-pop, .pill svg, .acct-scrim, .home, .page, .widgets, .view, .row, .widget, .kpi, .toast, .sheet, .scrim, .check, .check .ico, .hday-dot .ico, .switch, .switch::after, .rate-track i, .ring .value, .rates .rate { transition: none !important; animation: none !important; }
}

/* ===== Phone =====
   Dock: a button-sized phone half-hidden at the bottom centre. Hovering near it (the dock area) lifts it fully;
   a notification lifts it a little and buzzes it, and the toast rises out of it. Pressing it flies the full phone out. */
.toast { transform-origin: bottom center; }
.phone-dock { position: fixed; left: 50%; bottom: 0; z-index: 25; width: 120px; height: 38px; transform: translateX(-50%);
              display: flex; justify-content: center; align-items: flex-end; }
.phone-btn { position: relative; width: 30px; height: 50px; flex: none; padding: 3px; border: 0; border-radius: 7px; cursor: pointer;
             background: var(--night); box-shadow: 0 6px 16px rgba(18, 18, 28, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
             transform: translateY(32px); transition: transform .42s cubic-bezier(.32, .72, 0, 1), opacity .2s ease; }
.phone-mini-screen { position: relative; display: block; width: 100%; height: 100%; border-radius: 4px; background: #a8dcff; } /* light sky blue screen, the owner's pick for a phone screen */
.phone-mini-screen::before { content: ""; position: absolute; top: 3px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--night); }
.phone-dock.is-up .phone-btn { transform: translateY(8px); }
.phone-dock:hover .phone-btn, .phone-btn:focus-visible { transform: translateY(-8px); }
.phone-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.phone-btn:active { transform: translateY(-6px) scale(.94); }
.phone-dock.is-ringing .phone-btn { animation: buzz .7s linear; }
.phone-dock.is-out .phone-btn { opacity: 0; transform: translateY(60px); pointer-events: none; }
/* Uses the separate rotate property so the buzz stacks on top of the lift */
@keyframes buzz { 0%, 100% { rotate: 0deg; } 8% { rotate: -10deg; } 16% { rotate: 10deg; } 24% { rotate: -9deg; } 32% { rotate: 9deg; }
                  40% { rotate: -7deg; } 48% { rotate: 7deg; } 56% { rotate: -4deg; } 64% { rotate: 4deg; } 72% { rotate: 0deg; } }

/* Full phone: a plain Android-style handset (punch-hole camera, side keys, three-button nav bar).
   A fixed size, so notifications (long titles, unbroken words) can never stretch it. */
.phone { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 15; width: 205px; height: 420px; max-height: calc(100vh - 2 * var(--space-6));
         box-sizing: border-box; padding: 8px; border-radius: 24px; background: var(--night); transform-origin: center;
         box-shadow: 0 24px 60px rgba(18, 18, 28, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 0 0 3px #22222e; }
.phone[hidden] { display: none; }
.phone-key { position: absolute; right: -3px; width: 3px; border-radius: 0 2px 2px 0; background: #2a2a38; }
.phone-key-power { top: 26%; height: 9%; }
.phone-key-volume { top: 12%; height: 11%; }
.phone-screen { position: relative; height: 100%; border-radius: 17px; background: var(--surface-000); overflow: hidden; display: flex; flex-direction: column; }
.phone-camera { position: absolute; top: 9px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--night);
                box-shadow: 0 0 0 2px #2a2a38; }
.phone-content { flex: 1; min-height: 0; }
/* iPhone-style home indicator at the bottom of the screen; clicking it closes the phone */
.phone-home { flex: none; position: relative; align-self: center; width: 110px; height: 22px; margin-bottom: 2px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.phone-home::after { content: ""; position: absolute; left: 14px; right: 14px; top: 9px; height: 5px; border-radius: 999px; background: var(--ink); opacity: .35; transition: opacity .15s ease; }
.phone-home:hover::after { opacity: .7; }
.phone-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

@media (prefers-reduced-motion: reduce) { .phone-btn { transition: none !important; } .phone-dock.is-ringing .phone-btn { animation: none !important; } }

/* ===== Phone screens: home screen with the Notifications app, and the app itself ===== */
.phone-dock.has-unread .phone-btn::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
                                           background: var(--close-red); box-shadow: 0 0 0 2px var(--surface-100); }
.phone-content { display: flex; flex-direction: column; background: #dff1ff; } /* pale sky wallpaper, matching the dock phone's screen */
.ph-status { flex: none; display: flex; justify-content: space-between; align-items: center; height: 28px; padding: 0 16px; font: 600 11px/14px var(--font-sans); color: var(--ink); }
.ph-icons { display: flex; align-items: center; gap: 4px; }
.ph-signal { width: 12px; height: 8px; background: linear-gradient(to right, var(--ink) 0 2px, transparent 2px 3.3px, var(--ink) 3.3px 5.3px, transparent 5.3px 6.6px, var(--ink) 6.6px 8.6px, transparent 8.6px 9.9px, var(--ink) 9.9px);
             clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.ph-battery { position: relative; width: 16px; height: 8px; border: 1.5px solid var(--ink); border-radius: 3px; box-sizing: border-box; }
.ph-battery::after { content: ""; position: absolute; inset: 1px 4px 1px 1px; border-radius: 1px; background: var(--ink); }
.ph-home { flex: 1; padding: 14px 14px 0; }
.ph-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
.ph-app { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.ph-app:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.app-icon { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--brand); color: var(--surface-000);
            box-shadow: 0 2px 6px rgba(38, 56, 154, 0.3); transition: transform .15s ease; }
.ph-app:hover .app-icon { transform: scale(1.06); }
.ph-app:active .app-icon { transform: scale(.94); }
.app-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-badge { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
             background: var(--close-red); color: var(--surface-000); font: 700 11px/18px var(--font-sans); text-align: center; box-shadow: 0 0 0 2px #dff1ff; }
.app-badge[hidden] { display: none; }
.app-name { font: 500 10px/12px var(--font-sans); color: var(--ink); }
.ph-app-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface-000); }
.ph-bar { flex: none; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 4px; padding: 2px 8px 8px; border-bottom: 1px solid var(--line); }
.ph-bar h3 { margin: 0; font: 600 14px/18px var(--font-sans); text-align: center; }
.ph-back { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.ph-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ph-back:hover { background: var(--glass-chip); }
.ph-clear { padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font: 600 12px/16px var(--font-sans); cursor: pointer; }
.ph-clear:hover { background: var(--rank-pill-bg); }
.ph-back:focus-visible, .ph-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ph-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 8px; }
.ph-group { margin: 10px 4px 6px; font: 600 11px/14px var(--font-sans); color: var(--ink-muted); }
.ph-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ph-note { display: flex; gap: 8px; padding: 8px; border-radius: 12px; background: var(--stat-bg); box-shadow: inset 0 0 0 1px var(--tile-edge); animation: rise .35s cubic-bezier(.32, .72, 0, 1) both; }
.ph-note.is-new { background: var(--rank-pill-bg); }
.ph-note-icon { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--brand); color: var(--surface-000); }
.ph-note-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ph-note-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ph-note-top { display: flex; align-items: baseline; gap: 6px; }
.ph-note-top b { flex: 1; min-width: 0; font: 600 12px/16px var(--font-sans); color: var(--ink); }
.ph-note-top time { flex: none; font: 500 10px/14px var(--font-sans); color: var(--ink-muted); }
.ph-note p { margin: 1px 0 0; font: 400 11px/15px var(--font-sans); color: var(--ink-muted); }
.ph-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 0 16px; }
.ph-empty p { margin: 6px 0 0; font: 600 13px/18px var(--font-sans); color: var(--ink); }
.ph-empty small { font: 400 11px/15px var(--font-sans); color: var(--ink-muted); }
.phone.on-home .phone-screen { background: #dff1ff; }
.phone:not(.on-home) .phone-content { background: var(--surface-000); }
@media (prefers-reduced-motion: reduce) { .ph-note, .app-icon { animation: none !important; transition: none !important; } }

/* ===== Free Note (Home) =====
   Work layer: glass card, Inter, quiet. Blocks format as you type; "/" opens the block menu. */
.fn { position: relative; grid-row: 1 / span 3; padding: 22px 24px 0; display: flex; flex-direction: column; min-height: 0; }

/* Expand: a quiet button in Free Note's bottom-right corner */
.fn-expand { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px;
             background: transparent; color: var(--ink-muted); cursor: pointer; opacity: .55; transition: opacity .15s ease, background-color .15s ease, color .15s ease, transform .15s ease; }
.fn:hover .fn-expand, .fn-expand:focus-visible { opacity: 1; }
.fn-expand:hover { background: var(--glass-chip); color: var(--ink); }
.fn-expand:active { transform: scale(.9); }
.fn-expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fn-expand .ico { width: 16px; height: 16px; }
.fn-ico-shrink, .fn-wide .fn-ico-grow { display: none; }
.fn-wide .fn-ico-shrink { display: block; }
/* Wide layout: Home grows to the bottom (same gap as other pages), Free Note takes the full width,
   and the Add cards and widgets fade and slide out of the way */
.home { transition: left .42s cubic-bezier(.32, .72, 0, 1), height .5s cubic-bezier(.32, .72, 0, 1), grid-template-columns .5s cubic-bezier(.32, .72, 0, 1), column-gap .5s cubic-bezier(.32, .72, 0, 1); }
.home > .add { min-width: 0; overflow: hidden; transition: transform .18s cubic-bezier(.32, .72, 0, 1), background .18s ease, opacity .3s ease; }
.window.fn-wide .home { height: calc(100% - var(--space-3) - var(--space-6)); grid-template-columns: minmax(0, 1fr) 0px; column-gap: 0px; }
.window.fn-wide .home > .add { opacity: 0; transform: translateX(24px); pointer-events: none; }
.widgets { transition: left .42s cubic-bezier(.32, .72, 0, 1), opacity .3s ease, transform .4s cubic-bezier(.32, .72, 0, 1); }
.window.fn-wide .widgets { opacity: 0; transform: translateY(24px); pointer-events: none; }
/* While expanded, the Add shortcuts live under the avatar as compact tiles that slide in one after another */
/* The column runs from under the avatar down to Free Note's bottom edge, split evenly between the three */
.fn-quick { position: absolute; right: calc(var(--space-3) + 4px); top: calc(var(--space-3) + 44px + 18px); bottom: var(--space-6); z-index: 4;
            display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.fn-quick-btn { position: relative; flex: 1; min-height: 56px; width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
                padding: 0; border: 1px solid var(--glass-edge); border-radius: 14px; cursor: pointer;
                background: var(--glass-fill); color: var(--ink); box-shadow: var(--shadow-chip);
                opacity: 0; transform: translateX(18px) scale(.9); transition: opacity .25s ease, transform .4s cubic-bezier(.32, .72, 0, 1), background-color .15s ease; }
.fn-quick-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The name stays hidden until you hover (or tab to) a button: the icon nudges up and the name fades in under it */
.fn-quick-btn svg { transition: transform .25s cubic-bezier(.32, .72, 0, 1); }
.fn-quick-name { position: absolute; left: 0; right: 0; top: calc(50% + 8px); text-align: center; font: 600 10px/12px var(--font-sans); color: var(--ink);
                 opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .25s cubic-bezier(.32, .72, 0, 1); pointer-events: none; }
.fn-quick-btn:hover svg, .fn-quick-btn:focus-visible svg { transform: translateY(-7px); }
.fn-quick-btn:hover .fn-quick-name, .fn-quick-btn:focus-visible .fn-quick-name { opacity: 1; transform: none; }
.fn-quick-plus { position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%;
                 background: var(--accent); color: var(--surface-000); font: 700 12px/1 var(--font-sans); box-shadow: 0 0 0 2px var(--surface-100); }
.window.fn-wide .fn-quick { pointer-events: auto; }
.window.fn-wide .fn-quick-btn { opacity: 1; transform: none; }
.window.fn-wide .fn-quick-btn:nth-child(1) { transition-delay: .12s; }
.window.fn-wide .fn-quick-btn:nth-child(2) { transition-delay: .18s; }
.window.fn-wide .fn-quick-btn:nth-child(3) { transition-delay: .24s; }
.window.fn-wide .fn-quick-btn:hover { background: var(--glass-fill-hover); transform: translateY(-2px); transition-delay: 0s; }
.window.fn-wide .fn-quick-btn:active { transform: scale(.94); transition-delay: 0s; }
.fn-quick-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .home, .home > .add, .widgets, .fn-quick-btn { transition: none !important; } }
.fn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* ===== Help tips (js/helptips.js): a "?" next to a feature's name opens a card with a mini demo ===== */
.help-dot { flex: none; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--line); border-radius: 50%;
            background: transparent; color: var(--ink-muted); font: 700 11px/1 var(--font-sans); cursor: pointer;
            transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.help-dot:hover, .help-dot[aria-expanded="true"] { background: var(--rank-pill-bg); border-color: transparent; color: var(--accent); }
.help-dot:active { transform: scale(.9); }
.help-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-pop { position: fixed; z-index: 45; width: 320px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 10px; border-radius: 18px;
            background: var(--surface-000); border: 1px solid var(--line); box-shadow: 0 20px 44px rgba(18, 18, 28, 0.18);
            opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: var(--arrow-x, 24px) top;
            transition: opacity .18s ease, transform .25s cubic-bezier(.32, .72, 0, 1); }
.help-pop.is-above { transform-origin: var(--arrow-x, 24px) bottom; transform: translateY(6px) scale(.98); }
.help-pop.is-open { opacity: 1; transform: none; }
/* A little pointer up to the "?" */
.help-pop::before { content: ""; position: absolute; top: -6px; left: var(--arrow-x, 24px); width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg);
                    background: var(--surface-000); border-left: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 3px 0 0 0; }
.help-pop.is-above::before { top: auto; bottom: -6px; transform: rotate(225deg); }
.help-pop.is-side { transform-origin: center; transform: scale(.98); }
.help-pop.is-side.is-open { transform: none; }
.help-pop.is-side::before { content: none; }
.hp-demo { position: relative; height: 150px; border-radius: 12px; background: var(--surface-100); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.hp-stage { position: absolute; inset: 0; }
.hp-body { padding: 12px 6px 4px; }
.hp-title { margin: 0; font: 700 14px/20px var(--font-sans); color: var(--ink); }
.hp-desc { margin: 4px 0 10px; font: 400 12.5px/18px var(--font-sans); color: var(--ink-muted); }
.hp-steps { margin: 0; padding: 0; list-style: none; counter-reset: hp; display: flex; flex-direction: column; gap: 6px; }
.hp-steps li { counter-increment: hp; display: flex; align-items: flex-start; gap: 8px; font: 500 12.5px/18px var(--font-sans); color: var(--ink-muted); transition: color .25s ease; }
.hp-steps li::before { content: counter(hp); flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
                       background: var(--glass-chip); color: var(--ink-muted); font: 700 10px/1 var(--font-sans); transition: background-color .25s ease, color .25s ease; }
.hp-steps li > span { flex: 1; min-width: 0; }
.hp-steps li.is-active { color: var(--ink); }
.hp-steps li.is-active::before { background: var(--accent); color: var(--surface-000); }
.hp-steps li.is-past::before { background: var(--rank-pill-bg); color: var(--accent); }
.hp-steps kbd { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 5px; background: var(--glass-chip); box-shadow: inset 0 -1px 0 var(--line);
                font: 700 11px/18px var(--font-sans); color: var(--ink); text-align: center; }
/* The mini Free Note acting out the steps */
.hd-fn { position: absolute; inset: 0; padding: 18px 18px 0; transition: opacity .4s ease; }
.hd-fn.is-fade { opacity: 0; }
.hd-line { display: flex; align-items: center; gap: 7px; min-height: 22px; font: 400 13px/22px var(--font-sans); color: var(--ink); white-space: pre; }
.hd-l1.is-h { font: 700 17px/26px var(--font-sans); letter-spacing: -0.01em; }
.hd-l2 { margin-top: 6px; opacity: 0; transition: opacity .2s ease; }
.hd-l2.is-on { opacity: 1; }
.hd-box { display: none; flex: none; width: 15px; height: 15px; place-items: center; border: 1.6px solid var(--ink-muted); border-radius: 4px; box-sizing: border-box;
          transition: background-color .2s ease, border-color .2s ease; }
.hd-box svg { width: 10px; height: 10px; fill: none; stroke: var(--surface-000); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: scale(0); transition: transform .35s cubic-bezier(.2, 1.12, .32, 1); }
.hd-l2.is-check .hd-box { display: grid; animation: hdPop .3s cubic-bezier(.34, 1.56, .64, 1); }
.hd-l2.is-done .hd-box { background: var(--accent); border-color: var(--accent); }
.hd-l2.is-done .hd-box svg { transform: none; }
.hd-l2.is-done .hd-text { color: var(--ink-muted); text-decoration: line-through; transition: color .3s ease; }
.hd-btn { margin-left: auto; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--glass-chip); color: var(--ink-muted); font: 600 10.5px/20px var(--font-sans);
          opacity: 0; transform: scale(.9); transition: opacity .2s ease, transform .2s ease, background-color .2s ease, color .2s ease; }
.hd-btn.is-show { opacity: 1; transform: none; background: var(--rank-pill-bg); color: var(--rank-pill-ink); }
.hd-btn.is-press { transform: scale(.88); }
.hd-btn.is-linked { background: var(--rank-pill-bg); color: var(--rank-pill-ink); animation: hdPop .35s cubic-bezier(.34, 1.56, .64, 1); }
.hd-caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: -6px; background: var(--accent); animation: hdBlink 1s steps(1) infinite; }
@keyframes hdBlink { 50% { opacity: 0; } }
@keyframes hdPop { from { transform: scale(.5); } to { transform: none; } }
.hd-menu { position: absolute; left: 30px; top: 74px; width: 150px; padding: 5px; border-radius: 10px; background: var(--surface-000); border: 1px solid var(--line);
           box-shadow: 0 10px 24px rgba(18, 18, 28, 0.14); opacity: 0; transform: translateY(-4px) scale(.97); transform-origin: top left;
           transition: opacity .16s ease, transform .2s cubic-bezier(.32, .72, 0, 1); }
.hd-menu.is-open { opacity: 1; transform: none; }
.hd-menu p { margin: 0 0 2px; padding: 0 6px; font: 600 9.5px/16px var(--font-sans); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.hd-menu span { display: block; padding: 3px 6px; border-radius: 7px; font: 500 11.5px/18px var(--font-sans); color: var(--ink); transition: background-color .15s ease; }
.hd-menu span.is-active { background: var(--glass-chip); }
.hd-toast { position: absolute; left: 50%; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--night);
            color: #fff; font: 600 11px/16px var(--font-sans); white-space: nowrap; opacity: 0; transform: translate(-50%, 10px);
            transition: opacity .2s ease, transform .3s cubic-bezier(.32, .72, 0, 1); }
.hd-toast svg { width: 12px; height: 12px; fill: none; stroke: #a8dcff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hd-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
/* The "?" sits in the top-right corner of the account card's day streak tile */
.stat { position: relative; }
.stat-help { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; font-size: 9.5px; border-width: 1.2px; }
/* The streak demo: a big flame with the count, and all six flames in a row underneath */
.hs { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 20px; transition: opacity .35s ease; }
.hs.is-fade { opacity: 0; }
.hs-main { display: flex; align-items: center; gap: 14px; }
.hs-flame { flex: none; width: 64px; height: 64px; display: grid; place-items: center; }
.hs-flame .streak-ico { width: 64px; height: 64px; }
.hs-flame.is-pop { animation: hsPop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hsPop { 0% { transform: scale(.55); opacity: .2; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }
.hs-info { display: flex; flex-direction: column; min-width: 0; }
.hs-num { font: 900 28px/30px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.hs-unit { font: 600 11px/14px var(--font-sans); color: var(--ink-muted); }
.hs-cap { margin-top: 5px; align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--streak-bg); color: var(--ink); font: 600 10.5px/16px var(--font-sans); white-space: nowrap; }
.hs.is-lost .hs-cap { background: var(--tile); color: var(--ink-muted); }
.hs-row { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 10px; background: var(--surface-000); box-shadow: inset 0 0 0 1px var(--line); }
.hs-mini { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; opacity: .35; filter: saturate(.6);
           transition: opacity .25s ease, filter .25s ease, background-color .25s ease, transform .25s ease; }
.hs-mini .streak-ico { width: 20px; height: 20px; }
.hs-mini.is-on { opacity: 1; filter: none; background: var(--streak-bg); transform: scale(1.12); }
/* The Focus Timer demo: a mini ring on the left, the session dots and break chips on the right */
.hf { position: absolute; inset: 0; display: flex; align-items: center; gap: 18px; padding: 0 22px; transition: opacity .35s ease; --hf-c: var(--accent); }
.hf[data-mode="short"], .hf[data-mode="long"] { --hf-c: var(--purple); }
.hf.is-fade { opacity: 0; }
.hf-ring { position: relative; flex: none; width: 112px; height: 112px; }
.hf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hf-track { fill: none; stroke: var(--tile); stroke-width: 7; }
.hf-value { fill: none; stroke: var(--hf-c); stroke-width: 7; stroke-linecap: round; transition: stroke .3s ease; }
.hf.is-ring .hf-ring { animation: hfRing .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hfRing { 0% { transform: none; } 40% { transform: scale(1.08) rotate(-3deg); } 70% { transform: scale(1.03) rotate(2deg); } 100% { transform: none; } }
.hf-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.hf-time { font: 700 21px/24px var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hf-mode { font: 600 10px/14px var(--font-sans); color: var(--hf-c); transition: color .3s ease; }
.hf-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hf-head { margin: 0; font: 600 9.5px/14px var(--font-sans); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.hf-dots { display: flex; gap: 8px; }
.hf-dots i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--tile); transition: background-color .25s ease, box-shadow .25s ease; }
.hf-dots i.is-done { background: var(--accent); box-shadow: none; animation: hdPop .35s cubic-bezier(.34, 1.56, .64, 1); }
.hf-next { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.hf-chip { padding: 2px 8px; border-radius: 999px; background: var(--surface-000); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-muted);
           font: 600 10.5px/16px var(--font-sans); white-space: nowrap; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.hf-chip.is-on { background: var(--rank-pill-bg); color: var(--accent); box-shadow: none; }
/* The Dashboard demo: range and filter on top, ring and this week's bars, then the chips */
.hdb { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; transition: opacity .35s ease; }
.hdb.is-fade { opacity: 0; }
.hdb-top { display: flex; justify-content: space-between; align-items: center; }
.hdb-range { font: 600 11px/16px var(--font-sans); color: var(--ink-muted); }
.hdb-filter { padding: 1px 8px; border-radius: 999px; background: var(--surface-000); box-shadow: inset 0 0 0 1px var(--line); font: 600 10.5px/16px var(--font-sans); color: var(--ink);
              transition: transform .15s ease, background-color .15s ease; }
.hdb-filter.is-press { transform: scale(.9); background: var(--rank-pill-bg); color: var(--accent); }
.hdb-body { flex: 1; min-height: 0; display: flex; align-items: center; gap: 16px; }
.hdb-ring { position: relative; flex: none; width: 70px; height: 70px; }
.hdb-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hdb-track { fill: none; stroke: var(--tile); stroke-width: 8; }
.hdb-value { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.hdb-pct { position: absolute; inset: 0; display: grid; place-items: center; font: 900 16px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.hdb-bars { flex: 1; height: 62px; display: flex; align-items: flex-end; gap: 6px; }
.hdb-bars i { flex: 1; height: 6%; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--accent) 35%, var(--tile)); transition: height .4s cubic-bezier(.32, .72, 0, 1); }
.hdb-bars i:last-child { background: var(--accent); }
.hdb.is-month .hdb-bars i { background: color-mix(in srgb, var(--purple) 45%, var(--tile)); }
.hdb-chips { display: flex; gap: 5px; }
.hdb-chip { padding: 1px 7px; border-radius: 999px; background: var(--surface-000); box-shadow: inset 0 0 0 1px var(--line); font: 600 9.5px/16px var(--font-sans); color: var(--ink-muted); white-space: nowrap; }
.hdb-chip.is-bump { animation: bump .45s cubic-bezier(.2, 1.12, .32, 1); color: var(--ink); }
/* The Habit consistency demo: a mini heatmap with its legend and a tooltip */
.hc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: opacity .35s ease; }
.hc.is-fade { opacity: 0; }
.hc-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); grid-auto-columns: 11px; gap: 3px; }
.hc-grid .cell { border-radius: 3px; transition: background-color .25s ease, opacity .3s ease, box-shadow .2s ease, transform .2s ease; }
.hc-grid .cell.is-focus { box-shadow: 0 0 0 2px var(--surface-000), 0 0 0 3.5px var(--purple); transform: scale(1.15); }
.hc.is-gaps .hc-grid .cell:not([class*=" l"]) { box-shadow: 0 0 0 1.5px var(--purple); }
.hc.is-gaps .hc-grid .cell[class*=" l"] { opacity: .35; }
.hc-legend { display: flex; align-items: center; gap: 3px; font: 500 10px/14px var(--font-sans); color: var(--ink-muted); }
.hc-legend .cell { width: 10px; height: 10px; border-radius: 3px; }
.hc-tip { position: absolute; padding: 3px 8px; border-radius: 7px; background: var(--night); color: #fff; font: 600 10px/14px var(--font-sans); white-space: nowrap; pointer-events: none;
          opacity: 0; transform: translate(-50%, calc(-100% - 4px)); transition: opacity .15s ease; }
.hc-tip.is-show { opacity: 1; transform: translate(-50%, calc(-100% - 8px)); }
/* The Rank demo: badge, name, division and XP bar, with XP pops, and the seven-rank ladder underneath */
.hr { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 18px; transition: opacity .35s ease; }
.hr.is-fade { opacity: 0; }
.hr-main { position: relative; display: flex; align-items: center; gap: 12px; }
.hr-badge { flex: none; display: grid; place-items: center; width: 56px; height: 60px; }
.hr-badge.is-pop { animation: hsPop .55s cubic-bezier(.34, 1.56, .64, 1); }
.hr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hr-name { font: 900 17px/20px var(--font-display); color: var(--ink); }
.hr-div { font: 600 11px/15px var(--font-sans); color: var(--ink-muted); }
.hr.is-up .hr-div { color: var(--accent); animation: bump .5s cubic-bezier(.2, 1.12, .32, 1); }
.hr-track { margin-top: 6px; height: 7px; border-radius: 999px; background: var(--tile); overflow: hidden; }
.hr-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--purple)); transition: width .35s cubic-bezier(.32, .72, 0, 1); }
.hr-pops { position: absolute; right: 0; top: -6px; width: 80px; height: 30px; pointer-events: none; }
.hr-pop { position: absolute; right: 0; top: 0; padding: 1px 7px; border-radius: 999px; background: var(--rank-pill-bg); color: var(--accent); font: 800 10px/15px var(--font-display);
          white-space: nowrap; animation: hrPop 1.1s ease-out forwards; }
@keyframes hrPop { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 20% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.hr-ladder { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 10px; background: var(--surface-000); box-shadow: inset 0 0 0 1px var(--line); }
.hr-step { display: grid; place-items: center; opacity: .3; filter: saturate(.5); transition: opacity .3s ease, filter .3s ease, transform .3s ease; }
.hr-step.is-past { opacity: .65; filter: none; }
.hr-step.is-on { opacity: 1; filter: none; transform: scale(1.25); }
/* The Leaderboard demo: a mini league table with move-up and move-down zones */
.hl { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 16px; transition: opacity .35s ease; }
.hl.is-fade { opacity: 0; }
.hl-head { display: flex; justify-content: space-between; font: 700 10px/14px var(--font-sans); color: var(--ink); }
.hl-week { font-weight: 500; color: var(--ink-muted); }
.hl-table { position: relative; }
.hl-zone { position: absolute; left: -4px; right: -4px; border-radius: 6px; opacity: 0; transition: opacity .35s ease; }
.hl-up { top: 0; background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.hl-down { bottom: 0; background: color-mix(in srgb, var(--close-red) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--close-red) 30%, transparent); }
.hl.show-up .hl-up, .hl.show-down .hl-down { opacity: 1; }
.hl-row { position: absolute; left: 0; right: 0; height: 14px; display: flex; align-items: center; gap: 5px; font: 500 9.5px/14px var(--font-sans); color: var(--ink-muted);
          transition: top .5s cubic-bezier(.32, .72, 0, 1); }
.hl-pos { width: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.hl-av { width: 12px; height: 12px; display: grid; place-items: center; border-radius: 50%; background: var(--tile); font: 700 7px/1 var(--font-sans); color: var(--ink-muted); overflow: hidden; }
.hl-name { width: 32px; }
.hl-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--tile); overflow: hidden; }
.hl-bar i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--accent) 40%, var(--tile)); transition: width .5s cubic-bezier(.32, .72, 0, 1); }
.hl-xp { width: 24px; text-align: right; font: 700 9.5px/14px var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.hl-row.is-you { color: var(--ink); font-weight: 700; z-index: 1; }
.hl-row.is-you .hl-av { background: none; }
.hl-row.is-you .hl-bar i { background: linear-gradient(90deg, var(--accent), var(--purple)); }
.hl-row.is-promoted { animation: bump .5s cubic-bezier(.2, 1.12, .32, 1); }
.hl-banner { position: absolute; left: 50%; bottom: 8px; padding: 4px 10px; border-radius: 999px; background: var(--night); color: #fff; font: 700 10px/14px var(--font-sans); white-space: nowrap;
             opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .3s cubic-bezier(.32, .72, 0, 1); }
.hl-banner.is-show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .help-pop, .help-pop * { transition: none !important; animation: none !important; } }
.fn-pick span { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-pick[aria-expanded="true"] svg { transform: rotate(180deg); }
.fn-new { width: 30px; height: 30px; }
.fn-history { display: flex; gap: 2px; }
.fn-hist { width: 30px; height: 30px; }
.fn-hist:disabled { opacity: .35; cursor: default; background: none; color: inherit; }
.fn-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; margin: 10px -24px 0; padding: 6px 24px 28px; }
.fn-title { font: 700 24px/30px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); outline: none; word-break: break-word; }
.fn-title:empty::before { content: attr(data-placeholder); color: var(--ink-muted); opacity: .5; }
.fn-meta { margin: 2px 0 14px; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.fn-editor { min-height: 120px; padding-bottom: 40px; cursor: text; }
.fn-block { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 1px 0; }
.fn-text { flex: 1; min-width: 0; min-height: 24px; outline: none; font: 400 15px/24px var(--font-sans); color: var(--ink); white-space: pre-wrap; word-break: break-word; cursor: text; }
.fn-text:empty::before { content: attr(data-placeholder); color: var(--ink-muted); opacity: .5; pointer-events: none; }
/* Plain text lines only hint "/" while the caret is on them (or when the note is empty) */
.fn-p .fn-text:empty:not(:focus)::before { content: none; }
.fn-editor > .fn-p:only-child .fn-text:empty::before { content: attr(data-placeholder); }
.fn-h1 { margin-top: 12px; } .fn-h1 .fn-text { font: 700 21px/30px var(--font-sans); letter-spacing: -0.01em; }
.fn-h2 { margin-top: 8px; } .fn-h2 .fn-text { font: 600 16px/26px var(--font-sans); }
.fn-editor > .fn-block:first-child { margin-top: 0; }
.fn-bullet { padding-left: 22px; }
.fn-bullet::before { content: ""; position: absolute; left: 8px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.fn-quote { margin: 2px 0; padding-left: 14px; box-shadow: inset 3px 0 0 var(--tile-hover); }
.fn-quote .fn-text { color: var(--ink-muted); }
.fn-divider { padding: 11px 0; }
.fn-divider hr { flex: 1; margin: 0; border: 0; height: 1px; background: var(--line); }
.fn-box { flex: none; width: 18px; height: 18px; margin-top: 3px; padding: 0; display: grid; place-items: center; border: 1.8px solid var(--ink-muted); border-radius: 5px;
          background: transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .12s ease; }
.fn-box svg { width: 12px; height: 12px; fill: none; stroke: var(--surface-000); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; transform: scale(0); transition: transform .35s cubic-bezier(.2, 1.12, .32, 1); }
.fn-box:hover { border-color: var(--accent); }
.fn-box:active { transform: scale(.88); }
.fn-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fn-check.is-done .fn-box { background: var(--accent); border-color: var(--accent); }
.fn-check.is-done .fn-box svg { transform: none; }
.fn-check.is-done .fn-text { color: var(--ink-muted); text-decoration: line-through; }
.fn-totask, .fn-link { flex: none; height: 22px; margin-top: 1px; padding: 0 8px; border: 0; border-radius: 999px; font: 600 11px/22px var(--font-sans); cursor: pointer; white-space: nowrap; }
.fn-totask { background: var(--glass-chip); color: var(--ink-muted); opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; }
.fn-check:hover .fn-totask, .fn-check:focus-within .fn-totask, .fn-totask:focus-visible { opacity: 1; }
.fn-totask:hover { background: var(--rank-pill-bg); color: var(--rank-pill-ink); }
.fn-link { background: var(--rank-pill-bg); color: var(--rank-pill-ink); }
.fn-link:hover { filter: brightness(.96); }
.fn-totask:focus-visible, .fn-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Slash menu */
.fn-slash { position: absolute; z-index: 5; width: 250px; max-height: 280px; overflow-y: auto; box-sizing: border-box; padding: 6px;
            border-radius: var(--radius-md); background: var(--surface-000); border: 1px solid var(--line); box-shadow: var(--shadow-glass); animation: rise .25s cubic-bezier(.32, .72, 0, 1); }
.fn-slash[hidden] { display: none; }
.fn-slash-head { margin: 4px 8px 6px; font: 600 11px/14px var(--font-sans); color: var(--ink-muted); }
.fn-slash-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; }
.fn-slash-item.is-active, .fn-slash-item:hover { background: var(--glass-chip); }
.fn-slash-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-edge);
                font: 700 12px/1 var(--font-sans); color: var(--ink); }
.fn-slash-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fn-slash-txt { display: flex; flex-direction: column; min-width: 0; }
.fn-slash-txt b { font: 600 13px/17px var(--font-sans); color: var(--ink); }
.fn-slash-txt small { font: 400 11px/15px var(--font-sans); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Notes list popover (same pattern as the dashboard filter) */
.fn-pop { position: absolute; z-index: 6; top: 62px; right: 16px; width: 300px; max-width: calc(100% - 32px); max-height: calc(100% - 78px);
          box-sizing: border-box; padding: 10px; display: flex; flex-direction: column; gap: 8px;
          border-radius: var(--radius-md); background: var(--surface-000); border: 1px solid var(--line); box-shadow: var(--shadow-glass);
          transform-origin: top right; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97);
          transition: opacity .15s ease, transform .2s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .2s; }
.fn-pop.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .4s cubic-bezier(.32, .72, 0, 1), visibility 0s linear 0s; }
.fn-search { height: 34px; flex: none; }
.fn-rows { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; flex: 1; }
.fn-rows li { display: flex; align-items: center; border-radius: 10px; }
.fn-rows li:hover { background: var(--glass-chip); }
.fn-row { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 7px 8px; border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: 10px; }
.fn-row-t { font: 500 13px/18px var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-row-d { font: 400 11px/15px var(--font-sans); color: var(--ink-muted); }
.fn-row.is-current .fn-row-t { font-weight: 700; color: var(--accent); }
.fn-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fn-del { width: 28px; height: 28px; margin-right: 4px; opacity: 0; }
.fn-rows li:hover .fn-del, .fn-del:focus-visible { opacity: 1; }
.fn-del:hover { color: var(--close-red); }
.fn-none { padding: 10px 8px; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.fn-pop-new { flex: none; }

/* Stats page now holds the Dashboard on top and scrolls */
.page.is-scroll { overflow-y: auto; overflow-x: hidden; margin: 0 -12px; padding: 2px 12px 8px; }
.dash.in-stats { grid-row: auto; flex: none; height: 340px; }
.page.is-scroll .kpis, .page.is-scroll .stats-grid { flex: none; }
.page.is-scroll .stats-grid { height: 470px; }

@media (prefers-reduced-motion: reduce) { .fn-slash, .fn-pop, .fn-box, .fn-box svg { animation: none !important; transition: none !important; } }