/* Live app surfaces and motion. Inside .ios-screen one CSS pixel is one iOS
   point on a 402 × 874 screen; the frame scales the whole screen with --k. */

/* ------------------------------------------------------------ Screen frame */
.ios-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; transition: opacity .3s ease; }
/* The picture stays until the live screen and its glow are ready, then the
   screen fades in over it. */
.iphone-display:not(.is-live) > .ios-frame { opacity: 0; }
.iphone-display.is-live > img { visibility: hidden; transition: visibility 0s .3s; }
.ios-screen { position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform: scale(var(--k, 1)); transform-origin: 0 0; overflow: hidden; background: #08090B; color: #F2F4F6; font-family: Onest, system-ui, sans-serif; font-size: 16px; line-height: normal; letter-spacing: 0; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ios-screen p { margin: 0; }
.ios-screen button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ios-glyph { display: inline-block; flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.ios-glyph.is-drawn { background: none; -webkit-mask: none; mask: none; }
.ios-glyph > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora img { position: absolute; max-width: none; display: block; }
.ios-backdrop { position: absolute; inset: 0; opacity: 0; }
.ios-screen.is-glow .ios-backdrop { opacity: 1; }

/* Liquid Glass, approximated: a light fill, a specular rim brighter on the
   top-leading and bottom-trailing edges, and a soft lift. */
.ios-glass { position: relative; isolation: isolate; background: rgb(255 255 255 / 9%); box-shadow: inset 1px 1px 0 rgb(255 255 255 / 22%), inset -1px -1px 0 rgb(255 255 255 / 12%), inset 0 0 0 1px rgb(255 255 255 / 7%), 0 10px 28px rgb(0 0 0 / 10%); }
.ios-screen.is-glow .ios-glass { background: rgb(255 255 255 / 12%); }

/* ------------------------------------------------------------ Status bar */
.ios-status { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 62px; pointer-events: none; }
.ios-time { position: absolute; left: 0; width: 164px; top: 21px; text-align: center; font: 600 17px/22px -apple-system, 'SF Pro Text', system-ui, sans-serif; letter-spacing: -.2px; }
.ios-status-icons { position: absolute; right: 39px; top: 25.5px; display: flex; align-items: center; gap: 7px; fill: currentColor; color: #fff; }
.ios-status-icons svg { display: block; }

/* ------------------------------------------------------------ Today */
.ios-today-content { position: absolute; left: 20px; right: 20px; top: 70px; }
.ios-week { display: flex; gap: 6px; padding: 4px 0; }
.ios-day { position: relative; flex: 1 1 0; min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 16px; color: rgb(255 255 255 / 64%); }
.ios-day-name { font-size: 11px; line-height: 14px; color: rgb(255 255 255 / 46%); }
.ios-day-number { font-size: 18px; line-height: 23px; font-weight: 600; }
.ios-day-dot { width: 4px; height: 4px; border-radius: 50%; background: rgb(255 255 255 / 46%); }
.ios-day-dot.is-empty { background: transparent; }
.ios-day.is-future .ios-day-number, .ios-day.is-future .ios-day-name { opacity: .6; }
.ios-day.is-selected { background: rgb(255 255 255 / 10%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); }
.ios-day.is-selected .ios-day-number { color: #F2F4F6; }
.is-glow .ios-day-name, .is-glow .ios-day-number { color: rgb(255 255 255 / 80%); }
.is-glow .ios-day.is-future .ios-day-name, .is-glow .ios-day.is-future .ios-day-number { color: rgb(255 255 255 / 44%); }
.is-glow .ios-day.is-selected { background: rgb(255 255 255 / 12%); box-shadow: inset 0 0 0 1px rgb(90 40 20 / 30%), inset 0 1px 0 rgb(255 255 255 / 26%); }
.is-glow .ios-day.is-selected .ios-day-number { color: #F2F4F6; }
.is-glow .ios-day-dot:not(.is-empty) { background: rgb(255 255 255 / 56%); }
.ios-today-header { padding-top: 24px; }
.ios-date { display: flex; align-items: center; gap: 6px; height: 16px; color: #FFD400; font-size: 13px; line-height: 16px; font-weight: 600; }
.ios-date .ios-glyph { width: 16px; height: 16px; }
.ios-title-row { display: flex; align-items: flex-end; justify-content: space-between; height: 44px; }
.ios-title { display: flex; align-items: center; gap: 4px; font-size: 34px; line-height: 38px; font-weight: 600; letter-spacing: -1px; margin-bottom: -2px; }
.ios-title-chevron { width: 30px; height: 30px; color: rgb(255 255 255 / 80%); }
.ios-actions { display: flex; gap: 8px; }
.ios-round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.ios-round .ios-glyph { width: 24px; height: 24px; }
button.ios-round[aria-pressed="false"] .ios-glyph { opacity: .64; }
.ios-grid { display: grid; grid-template-columns: repeat(2, 174px); gap: 14px; margin-top: 18px; }

/* HabitTileShell .todayTwo: 170 tall, 24 corners, 12 inset, 44/16 chip,
   42 plus plate, 24 overflow glyph. */
.ios-tile { position: relative; height: 170px; border-radius: 24px; overflow: hidden; cursor: pointer; }
.ios-press-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle 130px at var(--px, 50%) var(--py, 50%), rgb(255 255 255 / 16%), rgb(255 255 255 / 5%) 55%, transparent 100%); }
.ios-tile-flash { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(circle 220px at 88% 88%, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) 50%, transparent 100%); }
.ios-chip { position: absolute; z-index: 1; left: 12px; top: 12px; width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 3.5px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.ios-chip .ios-glyph { width: 24px; height: 24px; }
.ios-tile-more { position: absolute; z-index: 1; right: 12px; top: 12px; color: rgb(255 255 255 / 48%); }
.ios-tile-text { position: absolute; z-index: 1; left: 12px; right: 60px; bottom: 12px; display: flex; flex-direction: column; }
.ios-tile-title { font-size: 14px; line-height: 18px; font-weight: 500; color: rgb(255 255 255 / 64%); white-space: nowrap; }
.ios-tile-count { display: flex; height: 38px; margin-bottom: -4px; font-size: 34px; line-height: 38px; font-weight: 600; letter-spacing: -1px; overflow: hidden; }
.digit { display: inline-block; }
.digit--roll { position: relative; display: inline-grid; }
.digit--roll > span { grid-area: 1 / 1; display: block; }
.ios-plus { position: absolute; z-index: 2; right: 12px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; }
.ios-plus::before { content: ''; position: absolute; inset: 1px; border-radius: 50%; background: rgb(255 255 255 / 12%); transition: background-color .2s ease; }
.ios-plus .ios-glyph { position: relative; width: 21px; height: 21px; color: #F2F4F6; }
.ios-plus:hover::before { background: rgb(255 255 255 / 18%); }
.ios-plus:focus-visible { outline: 2px solid #FFD400; outline-offset: 0; border-radius: 50%; }
.ios-plus { transform-origin: 50% 50%; }

/* The tab bar floats over the scrolled grid; the next row shows through it. */
.ios-tabbar { position: absolute; z-index: 4; left: 21px; width: 360px; top: 791px; height: 62px; border-radius: 31px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 4px; background: rgb(255 255 255 / 16%); }
.ios-screen:not(.is-glow) .ios-tabbar { background: rgb(40 41 46 / 72%); }
.ios-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 54px; justify-content: center; padding-top: 1px; font-size: 10px; line-height: 12px; font-weight: 600; color: #F2F4F6; }
.ios-tab .ios-picture { display: block; width: 23px; height: 23px; }
.ios-tab .ios-picture.is-gear { width: 18px; height: 18px; margin: 2.5px; }
.ios-picture > svg { display: block; width: 100%; height: 100%; }
.ios-tab.is-active::before { content: ''; position: absolute; inset: 0 -2px; z-index: -1; border-radius: 27px; background: rgb(0 0 0 / 22%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%); }
/* The cards under the tab bar read through its glass as soft colour, the way
   the bar's blur shows them. A static filter is drawn once, unlike a live
   backdrop blur under every frame. */
.ios-tile.is-under-bar { pointer-events: none; filter: blur(6px); }

/* ------------------------------------------------------------ Panels
   A slice of an app screen in points, scaled to its holder like .ios-screen. */
.ios-panel { position: relative; width: 100%; overflow: hidden; }
/* Transparent: the page's glass panel shows through (home.css). */
.ios-canvas { position: absolute; left: 0; top: 0; transform: scale(var(--k, 1)); transform-origin: 0 0; overflow: hidden; }
.ios-type { color: #F2F4F6; font-family: Onest, system-ui, sans-serif; font-size: 16px; line-height: normal; letter-spacing: 0; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
:where(.ios-type) :is(p, ul, h3, h4) { margin: 0; padding: 0; list-style: none; }
:where(.ios-type) button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(.ios-type) button:focus-visible { outline: 2px solid #FFD400; outline-offset: 2px; }

/* 01 · HabitsManagementSheet rows: 60 tall, 36 plates, 24 add buttons. The
   habits and the catalog groups always fit the square: at most three
   captions and four rows. */
.cat-canvas { padding: 20px 20px 0; }
.cat-caption { height: 34px; overflow: hidden; display: flex; align-items: flex-end; padding-bottom: 6px; color: rgb(255 255 255 / 64%); font-size: 14px; font-weight: 600; }
.cat-caption--first { height: 24px; }
.cat-card { border: 1px solid rgb(255 255 255 / 8%); border-radius: 20px; background: rgb(255 255 255 / 5%); overflow: hidden; }
.cat-row { position: relative; display: flex; align-items: center; height: 60px; padding: 0 11px; overflow: hidden; }
.cat-row + .cat-row::before { content: ''; position: absolute; top: 0; left: 60px; right: 0; height: 1px; background: rgb(255 255 255 / 8%); }
.cat-row--mine + .cat-row--mine::before { left: 91px; right: 42px; }
.cat-plate { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(255 255 255 / 10%); color: #F2F4F6; transition: background-color .35s ease; }
.cat-plate .ios-glyph { width: 22px; height: 22px; }
.cat-row--mine .cat-plate { background: var(--accent); color: #fff; }
.cat-name { flex: 1; margin-left: 13px; font-size: 16px; font-weight: 500; white-space: nowrap; }
.cat-add { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(255 255 255 / 14%); color: rgb(255 255 255 / 72%); transition: transform .2s ease, background-color .2s ease; }
.cat-add .ios-glyph { width: 14px; height: 14px; }
.cat-add:hover { background: rgb(255 255 255 / 20%); transform: scale(1.08); }
.cat-add::after, .cat-remove::after { content: ''; position: absolute; inset: -10px; }
.cat-add, .cat-remove { position: relative; }
.cat-remove { flex: none; width: 18px; height: 18px; margin: 0 12px 0 1px; border-radius: 50%; background: #FF5A66; }
.cat-remove::before { content: ''; position: absolute; left: 4.5px; right: 4.5px; top: 8px; height: 2px; border-radius: 1px; background: #fff; }
.cat-handle { flex: none; width: 21px; height: 11px; margin-right: 10px; background: linear-gradient(rgb(255 255 255 / 30%) 0 0) 0 0 / 100% 1px no-repeat, linear-gradient(rgb(255 255 255 / 30%) 0 0) 0 5px / 100% 1px no-repeat, linear-gradient(rgb(255 255 255 / 30%) 0 0) 0 10px / 100% 1px no-repeat; }
.cat-handle { position: relative; cursor: grab; touch-action: none; }
.cat-handle::after { content: ''; position: absolute; inset: -16px -10px; }
/* Reordering: the lifted row grows a little and casts a shadow, the
   others step aside on a short ease, the dividers fade while it moves. */
.cat-card.is-sorting { overflow: visible; }
.cat-row--mine { transition: translate .3s cubic-bezier(.2, .8, .2, 1), scale .22s ease, box-shadow .22s ease, background-color .22s ease; border-radius: 14px; }
.cat-row--mine.is-lifted { z-index: 2; overflow: visible; scale: 1.03; transition: scale .22s ease, box-shadow .22s ease, background-color .22s ease; background: #24262A; box-shadow: 0 0 0 1px rgb(255 255 255 / 9%), 0 14px 32px rgb(0 0 0 / 50%); }
.cat-row--mine.is-lifted .cat-handle { cursor: grabbing; }
.cat-card.is-settling .cat-row--mine { transition: none; }
.cat-row--mine::before { transition: opacity .2s ease; }
.cat-card.is-sorting .cat-row--mine::before { opacity: 0; }
.cat-caption:has(+ .cat-card:empty), .cat-card:empty { display: none; }

/* 02 · The Coffee card as Today draws it with the glow off. Until the first
   tap a ring breathes on its plus. */
.ios-tile.coffee-tile { position: absolute; left: 93px; top: 95px; width: 174px; }
/* The ring's pulse is drawn from frames (hint() in ios.mjs). */
.ios-tile.is-hinted .ios-plus::after, .wdg-plus.is-hinted::before { content: ''; position: absolute; inset: 1px; border: 2px solid rgb(255 212 0 / 75%); border-radius: 50%; transform: scale(var(--ring-scale, 1)); opacity: var(--ring-opacity, 1); pointer-events: none; }

/* 03 · The top of HistoryScreen: 36 filter chips 6 apart, the month title
   (20 semibold) with its total, then VycesEntryCard: 46 header (14 semibold,
   13 regular), 40 plates, rows 12/10 inset, 15 medium titles, 13 times and
   the +1 badge (12 semibold, 10 by 5, white at 12%). */
.hist-canvas { padding: 20px 20px 0; }
.hist-chips { display: flex; gap: 6px; overflow: hidden; }
.ios-chip-filter { flex: none; height: 36px; padding: 0 14px; border-radius: 18px; background: rgb(255 255 255 / 12%); color: rgb(242 244 246 / 88%); font-size: 14px; font-weight: 600; line-height: 18px; transition: background-color .25s ease, color .25s ease; }
.ios-chip-filter:hover { background: rgb(255 255 255 / 18%); }
.ios-chip-filter[aria-pressed="true"] { background: #FFD400; color: #08090B; }
.hist-month { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; margin: 24px 2px 0 0; }
.hist-month-title { font-size: 20px; font-weight: 600; line-height: 26px; }
.hist-month-count { color: rgb(255 255 255 / 64%); font-size: 14px; font-weight: 500; line-height: 18px; }
.hist-card { margin: 16px 0 0; border: 1px solid rgb(255 255 255 / 12%); border-radius: 16px; background: rgb(255 255 255 / 5%); overflow: hidden; }
.hist-head { display: flex; align-items: baseline; justify-content: space-between; height: 46px; padding: 14px 12px 0; box-shadow: inset 0 -1px rgb(255 255 255 / 12%); }
.hist-day { font-size: 14px; font-weight: 600; line-height: 18px; }
.hist-count { color: rgb(255 255 255 / 64%); font-size: 13px; line-height: 17px; }
.hist-row { position: relative; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 12px; overflow: hidden; }
.hist-row.is-first { height: 62px; padding-top: 2px; }
.hist-row:not(.is-first)::before { content: ''; position: absolute; top: 0; left: 62px; right: 1px; height: 1px; background: rgb(255 255 255 / 12%); }
.hist-plate { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgb(255 255 255 / 10%); color: #F2F4F6; }
.hist-plate .ios-glyph { width: 20px; height: 20px; }
.hist-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hist-name { font-size: 15px; font-weight: 500; line-height: 19px; }
.hist-time { color: rgb(255 255 255 / 64%); font-size: 13px; line-height: 17px; }
.hist-badge { flex: none; padding: 5px 10px; border-radius: 999px; background: rgb(255 255 255 / 12%); font-size: 12px; font-weight: 600; line-height: 15px; }
/* The list runs on below the fold of the slice and fades out inside the
   panel; the mask is on the slice, so the panel's own edge stays whole. */
.hist-panel { -webkit-mask-image: linear-gradient(#000 66%, transparent 94%); mask-image: linear-gradient(#000 66%, transparent 94%); }
/* With all three groups open the list runs to the panel's edge; it fades
   there, as the sheet's list runs on under the screen's edge. */
.cat-panel { -webkit-mask-image: linear-gradient(#000 90%, transparent 99%); mask-image: linear-gradient(#000 90%, transparent 99%); }

/* ------------------------------------------------------------ Often Together
   RelationshipsScreen: 36 chips, the two-accent hero card (168 tall, 48
   plates, metric 38) and the most connected list (30 plates, 47 rows). */
.ot-canvas { padding: 16px 16px 0; }
.ot-chips { display: flex; gap: 6px; }
.ot-chip { height: 36px; padding: 0 14px; border-radius: 18px; background: rgb(255 255 255 / 10%); color: rgb(255 255 255 / 85%); font-size: 15px; font-weight: 600; transition: background-color .25s ease, color .25s ease; }
.ot-chip:hover { background: rgb(255 255 255 / 14%); }
.ot-chip[aria-pressed="true"] { background: #FFD400; color: #08090B; }
.ot-strong { position: relative; height: 168px; margin-top: 24px; padding: 16px; border-radius: 22px; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%), 0 12px 44px color-mix(in srgb, var(--a) 26%, transparent); color: rgb(0 0 0 / 88%); transition: background .5s ease, box-shadow .5s ease; }
@property --a { syntax: '<color>'; inherits: true; initial-value: #D9A84E; }
@property --b { syntax: '<color>'; inherits: true; initial-value: #D98BBE; }
.ot-strong { transition: --a .6s ease, --b .6s ease; }
.ot-strong-label { text-align: center; color: rgb(0 0 0 / 56%); font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; }
.ot-strong-row { display: grid; grid-template-columns: 96px 1fr 96px; align-items: center; margin-top: 14px; }
.ot-side { display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgb(0 0 0 / 76%); font-size: 15px; }
.ot-plate { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgb(0 0 0 / 10%); color: rgb(0 0 0 / 76%); }
.ot-plate .ios-glyph { width: 26px; height: 26px; }
.ot-percent { text-align: center; font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -1px; color: rgb(0 0 0 / 88%); }
.ot-strong-footer { margin-top: 14px; text-align: center; color: rgb(0 0 0 / 76%); font-size: 15px; }
.ot-hub { margin-top: 20px; padding: 16px 16px 0; border: 1px solid rgb(255 255 255 / 8%); border-bottom: 0; border-radius: 20px 20px 0 0; background: rgb(255 255 255 / 5%); }
.ot-hub-label { color: rgb(255 255 255 / 64%); font-size: 13px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; }
.ot-hub-head { display: flex; align-items: center; gap: 12px; height: 32px; margin-top: 12px; padding-bottom: 12px; box-sizing: content-box; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.ot-hub-name { flex: 1; font-size: 18px; font-weight: 600; }
.ot-hub-count { color: rgb(255 255 255 / 64%); font-size: 15px; }
.ot-hub-note { margin-top: 14px; color: rgb(255 255 255 / 64%); font-size: 15px; }
.ot-list { margin-top: 8px; }
.ot-row { display: flex; align-items: center; gap: 12px; height: 47px; }
.ot-row + .ot-row { box-shadow: inset 0 1px rgb(255 255 255 / 8%); }
.ot-row-plate { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff; }
.ot-row-plate .ios-glyph { width: 18px; height: 18px; }
.ot-row-name { flex: 1; font-size: 16px; }
.ot-row-value { font-size: 18px; font-weight: 600; }
/* The list runs on past the frame and fades into the glass by a mask. */
.ot-panel { -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); }

/* ------------------------------------------------------------ Weekly report
   The total card at (20, 200) on the report screen: 56 copy button, 64 pt
   total, seven 40 pt bars on a 96 pt scale, three 77 pt stat tiles. */
/* The weekly report wash in the app's three weekly aurora tones (front
   #6FB8C7, middle #3E8578, back #224C45), green to the bottom edge. */
.week-canvas { background: radial-gradient(90% 55% at 78% 0%, rgb(111 184 199 / 72%), transparent 72%), radial-gradient(80% 60% at 8% 42%, rgb(62 133 120 / 70%), transparent 74%), linear-gradient(180deg, #3E8578 0%, #2E6A60 48%, #224C45 100%); }
.week-card { position: absolute; left: 0; right: 0; top: 1px; bottom: 1px; border-radius: calc(16px / var(--k, 1)); background: rgb(255 255 255 / 9%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%), inset 0 1px 0 rgb(255 255 255 / 18%); }
.week-label { position: absolute; left: 16px; top: 16px; color: rgb(255 255 255 / 76%); font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; }
.week-total { position: absolute; left: 16px; top: 36px; display: flex; align-items: baseline; gap: 8px; }
.week-value { font-size: 64px; line-height: 70px; font-weight: 600; letter-spacing: -2.5px; }
.week-unit { color: rgb(255 255 255 / 80%); font-size: 17px; }
.week-copy { position: absolute; right: 16px; top: 15px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgb(255 255 255 / 10%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%); }
.week-copy .ios-glyph { width: 30px; height: 30px; }
.week-plot { position: absolute; left: 16px; right: 16px; top: 139px; height: 118px; }
.week-chart { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.week-chart::before { content: ''; position: absolute; left: 0; right: 0; top: 96px; height: 1px; background: rgb(255 255 255 / 16%); }
.week-col { position: relative; height: 96px; display: flex; flex-direction: column; justify-content: flex-end; }
.week-bar { display: block; border-radius: 6px 6px 0 0; background: rgb(255 255 255 / 25%); transform-origin: 50% 100%; transition: background-color .25s ease; }
.week-col.is-peak .week-bar, .week-col[aria-pressed="true"] .week-bar { background: #FFD400; }
/* Unselected bars dim through their colour, not opacity: an opacity
   transition put the whole scaled screen on a layer on iPhone. */
.week-chart.has-selection .week-col:not([aria-pressed="true"]) .week-bar { background: rgb(255 255 255 / 11.25%); }
.week-chart.has-selection .week-col.is-peak:not([aria-pressed="true"]) .week-bar { background: rgb(255 212 0 / 45%); }
.week-day { position: absolute; left: 0; right: 0; top: 104px; text-align: center; color: rgb(255 255 255 / 64%); font-size: 12px; line-height: 14px; }
.week-col.is-peak .week-day, .week-col[aria-pressed="true"] .week-day { color: #F2F4F6; font-weight: 600; }
.week-stats { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.week-stat { display: flex; flex-direction: column; gap: 3px; min-height: 86px; padding: 12px 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 6%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%); }
.week-stat-value { font-size: 17px; line-height: 22px; font-weight: 600; white-space: nowrap; }
.week-stat-label { color: rgb(255 255 255 / 72%); font-size: 13px; line-height: 16px; white-space: pre-line; text-wrap: nowrap; }

/* ------------------------------------------------------------ Your rhythm
   Insights rhythm card: 24 bars, 11 wide on a 91 pt scale, the peak hour in
   yellow and the others brighter as they hold more logs. */
.rhythm-card { position: absolute; left: 0; right: 0; top: 2px; bottom: 1px; border: 1px solid rgb(255 255 255 / 8%); border-radius: calc(16px / var(--k, 1)); background: rgb(255 255 255 / 5%); }
.rhythm-head { position: absolute; left: 15px; right: 15px; top: 14px; display: flex; justify-content: space-between; }
.rhythm-title { font-size: 20px; line-height: 25px; font-weight: 600; }
.rhythm-sub { margin-top: 3px; color: rgb(255 255 255 / 64%); font-size: 14px; line-height: 18px; }
.rhythm-plot { position: absolute; left: 15px; right: 15px; top: 60px; height: 128px; }
.rhythm-bars { position: absolute; left: 0; right: 0; top: 0; height: 105px; display: grid; grid-template-columns: repeat(24, 11px); justify-content: space-between; align-items: end; }
.rhythm-bar { display: flex; align-items: flex-end; height: 100%; cursor: pointer; }
.rhythm-bar > span { display: block; width: 11px; border-radius: 3px 3px 0 0; background: var(--fill, #FFD400); transform-origin: 50% 100%; transition: background-color .25s ease; }
.rhythm-bar.is-peak > span, .rhythm-bar[aria-pressed="true"] > span { background: #FFD400; }
.rhythm-bars.has-selection .rhythm-bar:not([aria-pressed="true"]) > span { background: color-mix(in srgb, var(--fill, #FFD400) 45%, transparent); }
.rhythm-bars.has-selection .rhythm-bar.is-peak:not([aria-pressed="true"]) > span { background: rgb(255 212 0 / 45%); }
.rhythm-axis { position: absolute; left: 0; right: 0; top: 116px; display: flex; justify-content: space-between; color: rgb(255 255 255 / 64%); font-size: 12px; line-height: 14px; }
.rhythm-tip { position: absolute; left: 0; top: 0; z-index: 2; display: grid; gap: 1px; padding: 6px 10px; border: 1px solid #555658; border-radius: 13px; background: #333436; font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgb(0 0 0 / 35%); }
/* Tooltips glide from bar to bar on transform alone, on a layer of their
   own, and fade in when they first appear. */
@starting-style { .rhythm-tip { opacity: 0; } }
.rhythm-tip strong { font-weight: 600; }
.rhythm-tip span { color: rgb(255 255 255 / 64%); }
.rhythm-legend { position: absolute; left: 0; right: 0; top: 198px; text-align: center; color: rgb(255 255 255 / 64%); font-size: 13px; line-height: 16px; }
.rhythm-peak { position: absolute; left: 15px; right: 15px; top: 230px; display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.rhythm-window { font-size: 17px; line-height: 22px; font-weight: 600; }
.rhythm-peak .rhythm-sub { margin-top: 2px; font-size: 13px; line-height: 16px; }
.rhythm-share { margin-top: 4px; padding: 4px 9px; border-radius: 13px; background: rgb(255 212 0 / 12%); color: #FFD400; font-size: 13px; line-height: 17px; font-weight: 600; }
/* Set like the Insights card's summary line: 12/18, 12 below the rule, 13 above the edge. */
.rhythm-based { position: absolute; left: 15px; top: 295px; color: rgb(255 255 255 / 64%); font-size: 12px; line-height: 18px; }

/* ------------------------------------------------------------ Widgets
   VycesWidgets in points: 26 pt corners, the dark tile surface with a lit top
   rim as the Home Screen draws it, 12 pt (medium) and 16 pt (small) insets. */
.wdg { position: relative; width: 100%; border-radius: calc(26px * var(--k, 1)); }
/* The body is laid out at its size on the page (zoom), not drawn in points
   and scaled (transform): on iPhone a scaled body re-rounded its pixels on
   every repaint, so the contents jumped and the rim blinked as counts rolled. */
.wdg-body { position: absolute; left: 0; top: 0; zoom: var(--k, 1); overflow: hidden; border-radius: 26px; background: linear-gradient(172deg, #303135, #222327 62%, #1E1F22); }
/* The rim is the unscaled holder's own shadow, a 1 px ring just outside
   the body: nothing inside the widget can lift it onto a layer of its own,
   which on iPhone cut its top line while something inside moved. */
.wdg { --wdg-ring: 0 -1px 0 rgb(255 255 255 / 30%), 0 1px 0 rgb(255 255 255 / 6%), 0 0 0 1px rgb(255 255 255 / 11%); box-shadow: var(--wdg-ring); }
.sc .wdg { box-shadow: none; }
.wdg-brand { position: absolute; display: block; width: 20px; height: 11px; fill: #FFD400; }
.wdg-brand svg { display: block; }
.wdg :is(.wdg-tile, .wdg-plus):focus-visible { outline: 2px solid #FFD400; outline-offset: 2px; }

/* Today's habits: header row, then four tiles 4 pt apart. */
.wdg--today .wdg-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.wdg-head { position: relative; display: flex; align-items: center; gap: 7px; height: 19px; white-space: nowrap; }
.wdg-head-title { font-size: 15px; font-weight: 600; }
.wdg-head-total { display: inline-flex; color: rgb(255 255 255 / 48%); font-size: 13px; font-weight: 500; white-space: pre; }
.wdg-head-number { display: inline-flex; overflow: hidden; }
.wdg-head .wdg-brand { right: 4px; top: 4px; }
.wdg-tiles { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.wdg-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 8px; border-radius: 14px; background: linear-gradient(to top right, rgb(255 255 255 / 8%), rgb(255 255 255 / 4%)); text-align: left; }
.wdg-chip { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: auto; border-radius: 8px; background: var(--accent); color: #fff; box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 20%, transparent); }
.wdg-chip .ios-glyph { width: 20px; height: 20px; }
.wdg-tile-name { width: 100%; margin-top: 4px; color: rgb(255 255 255 / 53%); font-size: 11px; line-height: 14.3px; font-weight: 500; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wdg-tile-count { display: flex; overflow: hidden; margin: 1px 0 -5.4px; color: rgb(255 255 255 / 97%); font-size: 21px; line-height: 26.8px; font-weight: 600; letter-spacing: -1px; }

/* One habit: the habit's tint from the top leading corner, the 44 pt plate,
   name and count closing the widget, the 42 pt plus 12 pt from the corner. */
.wdg--habit .wdg-body { background: radial-gradient(150px 150px at 16% 12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent), linear-gradient(to bottom right, color-mix(in srgb, var(--accent) 6%, transparent), transparent), linear-gradient(172deg, #303135, #222327 62%, #1E1F22); }
.wdg--habit { --wdg-ring: 0 -1px 0 rgb(255 255 255 / 30%), 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); }
.wdg-habit-chip { position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 16px; background: var(--accent); color: #fff; }
.wdg--habit .wdg-brand { right: 20px; top: 18px; }
.wdg-habit-text { position: absolute; left: 16px; right: 58px; bottom: 16px; display: flex; flex-direction: column; }
.wdg-habit-name { color: rgb(255 255 255 / 64%); font-size: 14px; line-height: 17.9px; font-weight: 500; white-space: nowrap; }
.wdg-habit-count { display: flex; overflow: hidden; margin-bottom: -8.4px; color: #F2F4F6; font-size: 34px; line-height: 43.4px; font-weight: 600; letter-spacing: -1px; }
.wdg-plus { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgb(255 255 255 / 12%); color: #F2F4F6; transition: background-color .2s ease; }
.wdg-plus::after { content: ''; position: absolute; inset: -20px -12px -12px -20px; }
.wdg-plus .ios-glyph { width: 21px; height: 21px; }
.wdg-plus:hover { background: rgb(255 255 255 / 17%); }

/* 7 days by habit, placed where the Home Screen capture draws it. */
.wdg-week-label { position: absolute; left: 16px; top: 12px; color: rgb(255 255 255 / 48%); font-size: 11px; line-height: 14px; font-weight: 500; }
.wdg--week .wdg-brand { right: 20px; top: 14.6px; }
.wdg-week-total { position: absolute; left: 16px; top: 28px; display: flex; align-items: baseline; gap: 6px; height: 32.5px; }
.wdg-week-number { display: flex; overflow: hidden; font-size: 25.5px; line-height: 32.5px; font-weight: 600; letter-spacing: -1px; }
.wdg-week-word { color: rgb(255 255 255 / 64%); font-size: 13px; }
.wdg-week-chart { position: absolute; left: 16px; right: 16px; top: 70.3px; height: 58px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; align-items: end; }
.wdg-week-col { display: flex; flex-direction: column; overflow: hidden; transition: height .48s cubic-bezier(0.22, 0.72, 0.25, 1), border-radius .48s ease; }
.wdg-week-col > span { flex: none; transition: height .48s cubic-bezier(0.22, 0.72, 0.25, 1); }
.wdg-week-axis { position: absolute; left: 16px; right: 16px; top: 137.3px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; color: rgb(255 255 255 / 48%); font-size: 11px; line-height: 14px; text-align: center; }
.wdg.is-still .wdg-week-col, .wdg.is-still .wdg-week-col > span { transition: none; }

/* ------------------------------------------------------------ Custom habit
   AddHabitSheet parts: 174 × 168 preview, 55 pt name field, 32 pt swatches
   with a 40 pt ring, 42 pt icon chips seven to a row. */
.builder-stage { min-width: 0; }
.builder-panel { border-radius: 32px; }
.builder-canvas { display: flex; flex-direction: column; gap: 20px; padding: 18px 20px 22px; }
.builder-canvas.is-wide { flex-direction: row; gap: 36px; padding: 18px 20px 22px; }
.builder-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.builder-sheet-title { text-align: center; font-size: 17px; line-height: 22px; font-weight: 600; }
.builder-preview { display: flex; justify-content: center; margin: 22px 0 24px; }
.builder-tile { width: 174px; height: 168px; flex: none; cursor: default; background: linear-gradient(#2B2D30, #252729); }
/* In one column the preview card is the thing to look at, so it is drawn
   a size up from the sheet's 174 pt. */
.builder-canvas:not(.is-wide) .builder-tile { zoom: 1.2; }
.builder-tile .ios-chip { transition: background-color .35s ease, box-shadow .35s ease; }
.builder-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.builder-title.is-placeholder { color: rgb(255 255 255 / 64%); }
.builder-label { display: block; margin: 0 0 8px; color: rgb(255 255 255 / 64%); font-size: 15px; line-height: 20px; font-weight: 600; }
.builder-col > .builder-label ~ .builder-label { margin-top: 20px; }
.builder-input { width: 100%; height: 55px; padding: 0 12px; border: 1px solid transparent; border-radius: 16px; background: rgb(255 255 255 / 7%); color: #F2F4F6; font: 400 17px Onest, system-ui, sans-serif; outline: none; transition: border-color .2s ease; }
.builder-input::placeholder { color: rgb(255 255 255 / 46%); }
.builder-input:focus { border-color: rgb(255 212 0 / 70%); }
.builder-hint { min-height: 16px; margin-top: 10px; color: rgb(255 255 255 / 64%); font-size: 13px; line-height: 16px; transition: color .2s ease; }
.builder-hint.is-fits { color: #30D158; }
.builder-hint.is-clipped { color: #FF453A; }
.builder-card { border-radius: 16px; background: rgb(255 255 255 / 6%); }
.builder-colors { display: grid; grid-template-columns: repeat(6, 1fr); row-gap: 8px; padding: 11px 12px; }
.builder-swatch { position: relative; justify-self: center; width: 40px; height: 40px; border-radius: 50%; }
.builder-swatch::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--swatch); transition: transform .25s ease; }
.builder-swatch::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--swatch); opacity: 0; transform: scale(.8); transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.builder-swatch[aria-checked="true"]::after { opacity: 1; transform: none; }
.builder-swatch:hover::before { transform: scale(1.08); }
/* HabitIconPicker: each group a 12 semibold title over its grid, 16 apart,
   with a hairline between groups. */
.builder-icons { padding: 18px 14px 20px; }
.builder-group { margin: 0 6px 12px; color: rgb(255 255 255 / 46%); font-size: 12px; line-height: 15px; font-weight: 600; }
.builder-icon-grid + .builder-group { margin-top: 18px; padding-top: 18px; box-shadow: inset 0 1px rgb(255 255 255 / 14%); }
.builder-icon-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 10px; }
.builder-icon { justify-self: center; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff; transition: background-color .2s ease, box-shadow .2s ease; }
.builder-icon .ios-glyph { width: 24px; height: 24px; }
.builder-icon:hover { background: rgb(115 125 137 / 16%); }
.builder-icon[aria-checked="true"] { background: rgb(115 125 137 / 30%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%); }

/* ------------------------------------------------------------ App icon
   AppIconScreen: 146 pt centre icon, neighbours at 75% and 157 pt apart,
   page dots, the Light / Dark / System switch and Set app icon. */
.icon-stage { min-width: 0; width: 100%; max-width: 440px; justify-self: center; }
.icon-fallback { display: flex; gap: 16px; justify-content: center; }
.icon-fallback img { width: 30%; border-radius: 22.4%; }
.icon-panel { border-radius: 32px; }
.icon-track { position: absolute; left: 0; right: 0; top: 20px; height: 146px; touch-action: pan-y; }
/* Side icons sit whole inside the panel, 18 pt from its edges, 22 pt clear of
   the chosen one. */
.icon-item { position: absolute; left: 128px; top: 0; width: 146px; height: 146px; border-radius: 33px; transform: translateX(calc(var(--offset) * 139px)) scale(.6); opacity: .8; transition: transform .55s cubic-bezier(.3, 1.25, .45, 1), opacity .4s ease; -webkit-user-select: none; user-select: none; }
.icon-item.is-center { transform: none; opacity: 1; }
.icon-item img { width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.icon-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%); pointer-events: none; }
.icon-item:focus-visible { outline: 2px solid #FFD400; outline-offset: 4px; }
.icon-name { position: absolute; left: 0; right: 0; top: 192px; text-align: center; font-size: 17px; line-height: 22px; font-weight: 600; }
.icon-dots { position: absolute; left: 0; right: 0; top: 229px; display: flex; justify-content: center; gap: 9px; }
.icon-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / 46%); transition: background-color .3s ease; }
.icon-dots span.is-on { background: #EFF1F3; }
.icon-segments { position: absolute; left: 20px; right: 20px; top: 260px; height: 45px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 23px; background: rgb(255 255 255 / 10%); }
.icon-segment { border-radius: 20px; color: rgb(255 255 255 / 64%); font-size: 15px; font-weight: 500; transition: background-color .3s ease, color .3s ease; }
.icon-segment[aria-checked="true"] { background: rgb(255 255 255 / 22%); color: #F2F4F6; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); }
.icon-note { position: absolute; left: 20px; right: 20px; top: 316px; color: rgb(255 255 255 / 64%); font-size: 13px; line-height: 17px; }
.icon-set { position: absolute; left: 20px; right: 20px; top: 358px; height: 54px; border-radius: 27px; background: #FFD400; color: #08090B; font-size: 17px; font-weight: 600; transition: transform .2s ease, filter .2s ease; }
.icon-set:hover { filter: brightness(1.06); }
.icon-set:active { transform: scale(.97); }
.home-icon { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; color: var(--text); font-size: 13px; font-weight: 500; }
.home-icon img { width: 76px; height: 76px; border-radius: 22.4%; box-shadow: 0 10px 30px rgb(0 0 0 / 40%), inset 0 0 0 1px rgb(255 255 255 / 10%); }

/* ------------------------------------------------------------ Vyces+ strip
   PremiumPreviewRows: every card on its 170 pt canvas, reduced to the row by
   --s. A card that grew (--g) is drawn larger and reduced further, so all of
   them land on one row height and one corner. Only the tracks move. */
.strip { --s: .9; display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(16px * var(--s)); }
.strip-row { height: calc(170px * var(--s)); overflow-x: clip; }
.strip-track { display: flex; gap: calc(16px * var(--s)); width: max-content; height: 100%; animation: strip-run var(--duration) linear infinite; will-change: transform; }
.strip-row--reverse .strip-track { animation-direction: reverse; }
.strip.is-paused .strip-track { animation-play-state: paused; }
.strip.is-still .strip-track { animation: none; will-change: auto; }
@keyframes strip-run { to { transform: translate3d(calc(var(--cycle) * var(--s) * -1px), 0, 0); } }

.sc { position: relative; flex: none; width: calc(var(--w) * var(--s) * 1px); height: 100%; }
.sc-canvas { position: absolute; left: 0; top: 0; width: calc(var(--w) * var(--g, 1) * 1px); height: calc(170px * var(--g, 1)); transform: scale(calc(var(--s) / var(--g, 1))); transform-origin: 0 0; }
.sc-canvas.is-measuring { height: auto; }
.sc-canvas.is-surface { overflow: hidden; border-radius: calc(24px * var(--g, 1)); }
.sc-fill { flex: 1 1 0; min-height: 0; }
.sc-number { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.sc-value { font-size: 38px; line-height: 48.45px; font-weight: 600; }
.sc-unit { font-size: 14px; font-weight: 600; color: rgb(255 255 255 / 46%); }

/* Compact Insights cards: Most logged and Often together. */
.sc--brand .sc-canvas, .sc--compact .sc-canvas { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.sc--compact .sc-canvas, .sc--recorded .sc-canvas, .sc--chart .sc-canvas { background: #101113; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7.8%); }
.sc-heading { font-size: 12px; line-height: 15.3px; font-weight: 600; letter-spacing: .8px; color: rgb(255 255 255 / 46%); }
.sc-metric { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sc-plate { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: #fff; }
.sc-plate .ios-glyph { width: 20px; height: 20px; }
.sc-caption { font-size: 14px; line-height: 17.85px; font-weight: 500; color: rgb(255 255 255 / 64%); }
.sc-pair { display: flex; align-items: center; gap: 12px; }
.sc-link { width: 18px; height: 18px; color: rgb(255 255 255 / 48%); }
.sc-number--percent { gap: 4px; }
.sc-number--percent .sc-unit { font-size: 24px; }
/* VycesHighlightBrand: the yellow card, its ink and plate. */
.sc--brand .sc-canvas { background: linear-gradient(115deg, #FFD84A 6%, #FF9A3C 94%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7.8%); color: #1E1503; }
.sc--brand .sc-heading { color: rgb(58 42 6 / 80%); }
.sc--brand .sc-unit { color: rgb(58 42 6 / 73%); }
.sc--brand .sc-caption { color: #2C2004; }
.sc-plate--brand { background: rgb(42 30 4 / 15%); color: #1E1503; }

/* Recorded dates: five weeks of heat cells. */
.sc--recorded .sc-canvas { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.sc-recorded-head { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.sc-recorded-count { font-size: 20px; line-height: 25.5px; font-weight: 600; }
.sc-recorded-word { font-size: 13px; color: rgb(255 255 255 / 64%); }
.sc-recorded-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.sc-recorded-grid > span { height: 15px; border-radius: 6px; background: rgb(255 255 255 / 7%); }
.sc-recorded-grid > .is-low { background: rgb(255 212 0 / 22%); }
.sc-recorded-grid > .is-mid { background: rgb(255 212 0 / 60%); }
.sc-recorded-grid > .is-high { background: #FFD400; }

/* A habit's breakdown hero, on the habit's own colour. */
.sc--hero .sc-canvas { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--accent); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%), 0 8px 48px color-mix(in srgb, var(--accent) 22%, transparent); color: rgb(0 0 0 / 88%); }
.sc-hero-top { display: flex; justify-content: space-between; gap: 12px; }
.sc-hero-left { display: flex; flex-direction: column; gap: 12px; }
.sc-hero-label, .sc-pair-label { font-size: 12px; line-height: 15.3px; font-weight: 600; letter-spacing: .8px; color: rgb(0 0 0 / 56%); }
.sc-number--hero .sc-value { font-size: 64px; line-height: 81.6px; font-weight: 700; letter-spacing: -1px; }
.sc-number--hero .sc-unit { font-size: 17px; color: rgb(0 0 0 / 56%); }
.sc-hero-plate { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgb(0 0 0 / 10%); color: rgb(0 0 0 / 84%); }
.sc-hero-plate .ios-glyph { width: 28px; height: 28px; }
.sc-hero-foot { font-size: 15px; line-height: 19.1px; font-weight: 600; color: rgb(0 0 0 / 76%); }

/* Your rhythm and By weekday: the picked bar in yellow, the rest flat grey. */
.sc--chart .sc-canvas { display: flex; flex-direction: column; padding: 16px; }
.sc-title { font-size: 20px; line-height: 25.5px; font-weight: 600; white-space: nowrap; }
.sc-plot { position: relative; flex: none; border-bottom: 1px solid rgb(164 173 184 / 22%); }
.sc-plot--rhythm { height: 57px; }
.sc-plot--weekday { height: 84px; }
.sc-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 5px; }
.sc-plot--weekday .sc-bars { gap: 6px; }
.sc-bars > span { flex: 1; border-radius: 6px 6px 0 0; background: rgb(255 255 255 / 22%); }
.sc-bars > .is-empty { background: rgb(164 173 184 / 30%); }
.sc-bars > .is-picked { background: #FFD400; }
.sc-axis { display: flex; margin-top: 8px; font-size: 11px; line-height: 14px; color: rgb(255 255 255 / 64%); white-space: nowrap; }
.sc-axis--hours { justify-content: space-between; }
.sc-axis--days { gap: 6px; }
.sc-axis--days > span { flex: 1; text-align: center; }
.sc-axis--days > .is-picked { color: #F2F4F6; font-size: 12px; font-weight: 500; }
.sc-tip { position: absolute; bottom: calc(100% + 6px); translate: -50% 0; width: max-content; display: grid; gap: 4px; padding: 10px 12px; border-radius: 16px; background: rgb(255 255 255 / 7%); box-shadow: inset 1px 1px 0 rgb(255 255 255 / 20%), inset 0 0 0 1px rgb(255 255 255 / 10%); white-space: nowrap; }
.sc-tip-title { font-size: 14px; line-height: 17.85px; font-weight: 600; }
.sc-tip-row { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 15.3px; color: rgb(255 255 255 / 64%); }
.sc-tip-row i { width: 7px; height: 7px; border-radius: 50%; background: #FFD400; }

/* Strongest relationship: the two habits' colours run into each other. */
.sc--pair .sc-canvas { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: linear-gradient(to bottom right, var(--first), var(--second)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%), 0 8px 40px color-mix(in srgb, var(--first) 16%, transparent); color: rgb(0 0 0 / 88%); text-align: center; }
.sc-pair-head { display: flex; align-items: center; gap: 12px; }
.sc-pair-habit { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.sc-pair-plate { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgb(0 0 0 / 10%); color: rgb(0 0 0 / 84%); }
.sc-pair-plate .ios-glyph { width: 24px; height: 24px; }
.sc-pair-name, .sc-pair-foot { font-size: 13px; line-height: 16.6px; color: rgb(0 0 0 / 76%); }
.sc-pair-share { flex: none; width: 112px; font-size: 38px; line-height: 48.45px; font-weight: 600; }

/* The icons Vyces+ unlocks, with no card behind them. */
.sc--icons .sc-canvas { display: grid; grid-template-columns: repeat(2, 77px); gap: 16px; align-content: start; }
.sc--icons img { width: 77px; height: 77px; border-radius: 17.25px; }
.sc--tile .ios-tile { cursor: default; }

/* Widgets in the strip take the gallery's canvas (WidgetConceptCanvas): the
   elevated base under the tile gradient, or the habit's tint. */
.sc .wdg-body { border-radius: calc(24px / var(--k, 1)); background: linear-gradient(to top left, rgb(23 25 29 / 40%), rgb(8 9 11 / 40%)), #101113; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7.8%); }
.sc .wdg--habit .wdg-body { background: radial-gradient(130px 130px at 16% 12%, color-mix(in srgb, var(--accent) 8%, transparent), transparent), linear-gradient(to bottom right, color-mix(in srgb, var(--accent) 4%, transparent), transparent), #101113; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent); }
.sc--overview .sc-canvas { display: flex; gap: 26px; padding: 16px; background: linear-gradient(to top left, rgb(23 25 29 / 40%), rgb(8 9 11 / 40%)), #101113; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7.8%); }
.sc--overview .wdg-brand { right: 20px; top: 18px; }
.sc-ov-summary { flex: none; width: 118px; display: flex; flex-direction: column; }
.sc-ov-label { font-size: 13px; line-height: 16.6px; color: rgb(255 255 255 / 48%); }
.sc-number--overview { margin-top: 3px; gap: 7px; }
.sc-number--overview .sc-value { letter-spacing: -1px; }
.sc-number--overview .sc-unit { font-weight: 500; color: rgb(255 255 255 / 64%); }
.sc-ov-summary .sc-fill { min-height: 12px; }
.sc-ov-change { display: grid; gap: 1px; }
.sc-ov-delta { font-size: 14px; line-height: 17.85px; font-weight: 500; color: rgb(255 255 255 / 64%); }
.sc-ov-vs { font-size: 11px; line-height: 14px; font-weight: 500; color: rgb(255 255 255 / 48%); }
.sc-ov-chart { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; }
.sc-ov-columns { height: 104px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; }
.sc-ov-columns > span { display: flex; flex-direction: column; overflow: hidden; }
.sc-ov-columns > span > span { flex: none; }
.sc-ov-axis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; font-size: 11px; line-height: 14px; text-align: center; color: rgb(255 255 255 / 48%); }

/* ------------------------------------------------------------ Motion off */
@media (prefers-reduced-motion: reduce) {
  .icon-item, .ios-tile, .wdg-tile, .wdg-plus { transition: none; }
  .strip-track { animation: none; will-change: auto; }
}

/* ------------------------------------------------------------ Often together
   The strip's compact Insights card on the widgets' gray: 12 pt insets, the
   paywall card's 24 pt corners, the caption pinned to the bottom. */
.wdg--pair .wdg-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 24px; }
.wdg--pair { border-radius: calc(24px * var(--k, 1)); }
.wdg--pair .sc-value { display: flex; overflow: hidden; }

/* ------------------------------------------------------------ Tips
   TipKit's popover: a short line on the popover surface with its arrow on
   the control, the tap glyph in the accent. It rises in on the press spring
   and fades out once the control is used. */
.tip { position: absolute; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 11px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 14px; background: #2A2B2F; box-shadow: 0 14px 34px rgb(0 0 0 / 50%), 0 2px 6px rgb(0 0 0 / 30%); color: #F2F4F6; font-family: Onest, system-ui, sans-serif; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(8px) scale(.92); transform-origin: var(--arrow, 50%) 0; transition: opacity .2s ease, transform .2s ease; }
.tip::before { content: ''; position: absolute; left: var(--arrow, 50%); top: -7px; width: 12px; height: 12px; margin-left: -6px; border: inherit; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; background: inherit; transform: rotate(45deg); }
.tip.is-shown { opacity: 1; transform: none; transition: opacity .3s ease, transform var(--press-duration, .45s) var(--press-ease, ease); }
.tip-icon { flex: none; width: 20px; height: 20px; color: #FFD400; }
.home-grid .tip { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .tip, .tip.is-shown { transform: none; transition: opacity .2s ease; } }