/* kit.css: the design system every screen is drawn from.
 *
 * ONE RULE ABOVE THE REST: a tile is read at a glance. One picture or one colour, one big number,
 * a few words. What explains a tile sits behind a tap ("Why?"), never on it.
 *
 * The grid is six columns with 12 px between tiles; a tile spans 6, 3 or 2. Spacing is on a 4 px
 * grid, the gutter is 20 px, a tap target is at least 44 px, and nothing is set under 12 px.
 * Colours are the theme's (`phone-shell.css`): a tone means the same thing on every screen.
 * Logical properties only, so the whole app mirrors under `dir="rtl"`.
 */

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; }
h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ico { inline-size: 22px; block-size: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .ico.flip { transform: scaleX(-1); }

/* A number is set in the display face, with its currency small beside it. */
.num { font-family: var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; white-space: nowrap; }
.num > bdi { unicode-bidi: isolate; }
.cur { font-family: var(--text); font-weight: 600; font-size: max(0.42em, 11px); letter-spacing: 0.03em; opacity: 0.75; margin-inline: 0 0.28em; vertical-align: 0.22em; }
/* Beside text-sized digits the currency is nearly their size and sits on their baseline. */
.row .cur, .kv .cur, .chip .cur, .ev .cur, .note .cur, .un .cur, .sub .cur, .who .cur, .lbl .cur, p .cur { font-size: 0.82em; vertical-align: 0; }
[dir="rtl"] .cur { margin-inline: 0.28em 0; }
.priv { transition: filter 0.2s; }
:root[data-private] .priv { filter: blur(9px); user-select: none; }

/* An icon on a colour, standing in for a picture where no real thing can be photographed. */
.glyph { display: grid; place-items: center; background: var(--surface2); color: var(--ink); }
.tone-mint { background: var(--mint); color: var(--mint-ink); }
.tone-amber { background: var(--amber); color: var(--amber-ink); }
.tone-blue { background: var(--blue); color: var(--blue-ink); }
.tone-coral { background: var(--coral); color: var(--coral-ink); }
.tone-lav { background: var(--lav); color: var(--lav-ink); }
.tone-inv { background: var(--inv); color: var(--inv-ink); }
.tone-green { background: var(--green); color: #fff; }
.tone-indigo { background: var(--indigo); color: #fff; }
.tone-sand { background: var(--sand); color: var(--amber-ink); }
.tone-sky { background: var(--sky); color: var(--sky-ink); }
.tone-surface { background: var(--surface); color: var(--ink); }
.tone-quiet { background: var(--surface2); color: var(--ink); }

/* ---------------------------------------------------------------- shell chrome */

.ana-phone-shell[data-chrome="sheet"] > .ana-tabbar,
.ana-phone-shell[data-chrome="none"] > .ana-tabbar,
.ana-phone-shell[data-chrome="none"] > .ana-header { display: none; }
.ana-phone-shell[data-chrome="none"] > .ana-phone-shell__content { padding-block-start: calc(12px + var(--ana-safe-top)); }
.ana-phone-shell[data-chrome="sheet"] > .ana-phone-shell__content { padding-block-end: 0; display: flex; flex-direction: column; }

/* The content region takes focus on a navigation so a screen reader starts at the new screen; it is not a control. */
.ana-phone-shell__content:focus, .ana-phone-shell__content:focus-visible { outline: none; }
.ana-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.ana-layer > * { pointer-events: auto; }

.avatar { inline-size: 46px; block-size: 46px; border-radius: 16px; background: var(--inv); color: var(--inv-ink); display: grid; place-items: center; font: 600 15px var(--display); flex: none; overflow: hidden; }
.greet { min-inline-size: 0; line-height: 1.2; }
.greet small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.greet b { display: block; font: 600 21px var(--display); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse { block-size: 44px; display: inline-flex; align-items: center; flex: none; }
.pulse > span { block-size: 34px; padding-inline: 10px 12px; border-radius: 17px; background: var(--mint); color: var(--mint-ink); font: 700 13px var(--text); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pulse > span::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.pulse.tight > span { background: var(--amber); color: var(--amber-ink); }
.pulse.off > span { background: var(--surface2); color: var(--muted); }
.roundb { inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; position: relative; flex: none; color: var(--ink); }
.roundb.plain { background: none; }
.roundb em { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; min-inline-size: 18px; block-size: 18px; padding-inline: 5px; border-radius: 9px; background: var(--coral); color: var(--coral-ink); font: 700 11px/18px var(--text); font-style: normal; text-align: center; }
.roundb .avatar { inline-size: 36px; block-size: 36px; border-radius: 13px; font-size: 13px; }

/* ---------------------------------------------------------------- chapters: a life as a row of pictures */

.chaps { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--ana-gutter) * -1); padding: 2px var(--ana-gutter) 16px; }
.chaps::-webkit-scrollbar, .hscroll::-webkit-scrollbar { display: none; }
.chap { flex: 0 0 72px; display: flex; flex-direction: column; align-items: center; text-align: center; min-inline-size: 0; }
.chap .ring { inline-size: 66px; block-size: 66px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--blue) calc(var(--p, 0) * 1%), var(--line) 0); position: relative; margin-block-end: 5px; }
.chap .ring > span { display: grid; place-items: center; inline-size: 100%; block-size: 100%; border-radius: 50%; border: 2.5px solid var(--bg); overflow: hidden; background: var(--surface2); }
.chap .ring img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.chap .ring img.obj { object-fit: contain; padding: 6px; }
.chap .dot { position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: 15px; block-size: 15px; border-radius: 50%; background: var(--coral); border: 2.5px solid var(--bg); }
.chap b { font-size: 12.5px; font-weight: 600; line-height: 1.2; max-inline-size: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.chap small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.chap.add .ring { background: none; border: 2px dashed var(--muted); padding: 0; }
.chap.add .ring > span { border: 0; background: none; color: var(--muted); }
.chap.pending .ring { background: var(--coral); animation: chap-pulse 1.8s ease-in-out infinite; }
@keyframes chap-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--coral) 28%, transparent); } }

/* ---------------------------------------------------------------- the grid and the tile */

.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.zone { grid-column: 1 / -1; font: 700 12px/1 var(--text); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 12px 4px -2px; display: flex; justify-content: space-between; gap: 12px; }
[lang="ar"] .zone { letter-spacing: 0; font-size: 13px; }
.zone:first-child { margin-block-start: 0; }
.zone a, .zone button { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 13px; display: inline-flex; align-items: center; gap: 2px; min-block-size: 44px; margin-block: -16px; }
.zone .ico { inline-size: 14px; block-size: 14px; }
/* No colour here: a tone class above sets it, and a later rule of equal weight would undo it. */
.t { border-radius: 28px; position: relative; overflow: hidden; min-inline-size: 0; }
/* A tile is a block; one that is a button or a link is laid out from its top, because a button
   centres its content by default. Both rules weigh nothing, so any tile kind may set its own. */
:where(.t) { display: block; }
:where(button.t, a.t) { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.s6 { grid-column: span 6; }
.s3 { grid-column: span 3; }
.s2 { grid-column: span 2; }
.s4 { grid-column: span 4; }
.surf { background: var(--surface); }
.t.flash { outline: 3px solid var(--violet); outline-offset: 3px; }
.t h3 { font: 600 14px var(--text); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.t h3 em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.t h3 em .ico { inline-size: 14px; block-size: 14px; }
.lbl { font: 600 13px var(--text); display: flex; align-items: center; gap: 6px; min-inline-size: 0; }
.lbl .ico { inline-size: 16px; block-size: 16px; }
.lbl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.big { font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; display: block; white-space: nowrap; }
/* Arabic letters join: any tracking pulls a word apart, so none is applied anywhere in Arabic. */
[lang="ar"] * { letter-spacing: 0 !important; }
.un, .sub { font-size: 13px; font-weight: 600; display: block; }
.un.soft, .sub.soft { font-weight: 500; color: var(--muted); }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knob { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: #151515; z-index: 2; }
.knob::before { content: ""; position: absolute; inset: -4px; }
.knob .ico { inline-size: 18px; block-size: 18px; stroke-width: 2.2; }
.knob.on { background: var(--mint); color: var(--mint-ink); }

/* A photograph as the tile: the words sit on a shade at its foot. */
.ph { background: var(--surface2); color: #fff; }
img.bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 44%, rgba(0, 0, 0, 0) 70%); pointer-events: none; }
.ph > .tx, .ph > .tag, .ph > .at, .ph > .lg, .ph > .knob { z-index: 1; }
/* A picture tile that both opens something and carries a control: the cover takes the tap, the knob sits over it. */
.ph > .cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ph > .cover + .knob, .ph > .knob.over { z-index: 2; }
.ph > .glyph.bg { display: grid; }
.ph > .glyph.bg .ico { inline-size: 44px; block-size: 44px; opacity: 0.5; }
.tx { position: absolute; inset-inline: 12px 10px; inset-block-end: 11px; }
.deal { display: block; font: 700 25px/1 var(--display); letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal .cur { font-size: 0.5em; font-weight: 700; opacity: 1; vertical-align: 0; }
.who { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; margin-block-start: 4px; opacity: 0.95; white-space: nowrap; overflow: hidden; }
.who > span { overflow: hidden; text-overflow: ellipsis; }
.who i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--mint); flex: none; }
.tag { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; block-size: 24px; padding-inline: 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); color: #151515; font: 700 12px/24px var(--text); display: inline-flex; align-items: center; gap: 4px; max-inline-size: calc(100% - 60px); white-space: nowrap; overflow: hidden; }
.tag .ico { inline-size: 14px; block-size: 14px; stroke-width: 2.2; }
.tag.hot { background: var(--coral); color: var(--coral-ink); }
.tag.mint { background: var(--mint); color: var(--mint-ink); }

/* generic photo, object and stat tiles */
.t-photo { block-size: 176px; }
.t-photo.s6 { block-size: 150px; }
.t-photo.tall { block-size: 204px; }
.t-photo.short { block-size: 124px; }
.t-photo .big { font-size: 34px; }
.t-photo .sub { margin-block-start: 4px; opacity: 0.95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-obj { block-size: 150px; padding: 12px; }
.t-obj.s3 { block-size: 176px; padding: 14px; }
.t-obj .big { font-size: 36px; margin-block-start: 10px; position: relative; z-index: 1; }
.t-obj .un, .t-obj .lbl { position: relative; z-index: 1; }
.t-obj .lbl { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.t-obj .lbl > span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.t-obj.s6 { block-size: 124px; }
.t-obj.s6 .obj { block-size: 108px; max-inline-size: 130px; inset-block-end: 4px; inset-inline-end: 8px; }
.t-obj .un { font-size: 12px; }
.t-obj .obj { position: absolute; inset-inline-end: -8px; inset-block-end: -8px; block-size: 82px; inline-size: auto; max-inline-size: 96px; object-fit: contain; }
.t-obj.s3 .obj { block-size: 104px; max-inline-size: 120px; }
.t-stat { padding: 16px; min-block-size: 172px; display: flex; flex-direction: column; }
.t-stat.s6 { min-block-size: 0; }
.t-stat .big { font-size: 44px; margin-block-start: auto; padding-block-start: 14px; }
.t-stat.s6 .big { font-size: 48px; margin-block-start: 10px; padding-block-start: 0; }
.t-stat .un { margin-block-start: 6px; font-weight: 500; line-height: 1.3; }
.t-stat .chev { position: absolute; inset-block-start: 14px; inset-inline-end: 12px; inline-size: 18px; block-size: 18px; opacity: 0.55; }
.t-card { padding: 16px; }
.t-card > h3 + * { margin-block-start: 12px; }

/* heads-up: the only thing allowed above "now" */
.t-heads { display: flex; flex-direction: row; align-items: center; gap: 10px; padding-block: 8px; padding-inline: 10px 8px; border-radius: 24px; min-block-size: 60px; }
.t-heads .chipi { inline-size: 40px; block-size: 40px; border-radius: 14px; background: color-mix(in srgb, currentColor 14%, transparent); display: grid; place-items: center; flex: none; }
.t-heads .main { flex: 1; min-inline-size: 0; line-height: 1.25; }
.t-heads .main b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-heads .main small { display: flex; gap: 4px; align-items: center; font-size: 12.5px; opacity: 0.78; white-space: nowrap; overflow: hidden; }
.t-heads .main small .ico { inline-size: 14px; block-size: 14px; }
.t-heads .amt { font-size: 18px; font-weight: 600; white-space: nowrap; }
.t-heads .amt .cur { font-size: 0.62em; vertical-align: 0; }
.t-heads .go { block-size: 44px; padding-inline: 16px; border-radius: 22px; background: var(--inv-ink); color: var(--inv); font-weight: 700; font-size: 14px; flex: none; display: inline-flex; align-items: center; }
.t-heads.tone-amber .go { background: var(--amber-ink); color: var(--amber); }

/* now: the sky says what time it is talking about */
.t-now { padding: 12px 16px; }
.t-now[data-sky="EARLY"], .t-now[data-sky="MORNING"] { background: linear-gradient(165deg, #ffe9c2 0%, #ffd18c 60%, #fbb870 100%); color: #3a2600; }
.t-now[data-sky="MIDDAY"], .t-now[data-sky="AFTERNOON"] { background: linear-gradient(165deg, #d8f0ff 0%, #b4defb 60%, #93cbf5 100%); color: #0e2a40; }
.t-now[data-sky="EVENING"] { background: linear-gradient(165deg, #ffd3ae 0%, #f6a9b8 55%, #c8a5ea 100%); color: #3a1230; }
.t-now[data-sky="LATE"] { background: linear-gradient(165deg, #34387a 0%, #1e2052 60%, #14153a 100%); color: #f1f0ff; }
.arc { display: block; inline-size: 100%; block-size: 62px; overflow: visible; }
[dir="rtl"] .arc { transform: scaleX(-1); }
.t-now h2 { margin-block: -12px 10px; font: 600 30px/1.05 var(--display); letter-spacing: -0.035em; position: relative; }
[lang="ar"] .t-now h2 { letter-spacing: 0; line-height: 1.25; }
.hscroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.picks { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
.pick { flex: 0 0 128px; block-size: 164px; border-radius: 22px; scroll-snap-align: start; position: relative; overflow: hidden; background: #cfcac0; color: #fff; }
.pick::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.28) 46%, rgba(0, 0, 0, 0) 70%); pointer-events: none; }
.pick .tx, .pick .knob, .pick .tag { z-index: 1; }
.pick .tx { inset-inline: 10px 8px; }
.pick .deal { font-size: 21px; }
.pick .knob { inset-block-start: 8px; inset-inline-end: 8px; inline-size: 34px; block-size: 34px; }
.pick > a { position: absolute; inset: 0; z-index: 1; }
.pick .tag { inset-block-start: 8px; inset-inline-start: 8px; max-inline-size: calc(100% - 54px); }
.pick.wide { flex-basis: 148px; }
.t-now .foot { display: flex; justify-content: space-between; align-items: center; margin-block-start: 6px; min-block-size: 40px; gap: 8px; }
.fits { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; min-inline-size: 0; }
.fits > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fits i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: #17a56f; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); flex: none; }
.whyb { block-size: 44px; padding-inline: 10px 4px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; flex: none; }
.whyb .ico { inline-size: 16px; block-size: 16px; transition: transform 0.2s; }
.whyb[aria-expanded="true"] .ico { transform: rotate(180deg); }
.because { margin-block-start: 2px; padding: 11px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.55); font-size: 13.5px; line-height: 1.45; }
.because[hidden] { display: none; }
.t-now[data-sky="LATE"] .because { background: rgba(255, 255, 255, 0.12); }
.surf .because, .t-card .because { background: var(--surface2); }
.fast { display: flex; align-items: center; gap: 12px; padding-block: 4px 2px; }
.fast svg.ringsvg { inline-size: 58px; block-size: 58px; flex: none; }
.fast .left { font: 700 44px/1 var(--display); letter-spacing: -0.04em; }
.fast .l2 { font-size: 13px; font-weight: 600; line-height: 1.3; }
.fast .l2 b { display: block; font: 700 15px var(--display); }

/* later today: one picture per part of the day */
.t-beat { block-size: 124px; }
.t-beat.s6 { block-size: 104px; }
.t-beat .deal { font-size: 21px; }
.at { position: absolute; inset-block-start: 9px; inset-inline-start: 10px; block-size: 24px; padding-inline: 7px 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); color: #151515; font: 700 12px/24px var(--text); display: inline-flex; align-items: center; gap: 4px; }
.at .ico { inline-size: 14px; block-size: 14px; stroke-width: 2.2; }

/* places: round pictures with a badge */
.t-reg { padding-block: 14px 12px; }
.t-reg h3 { padding-inline: 16px; }
.regs { gap: 12px; padding: 12px 16px 0; }
.reg { flex: 0 0 60px; display: flex; flex-direction: column; align-items: center; min-inline-size: 0; }
.disc { inline-size: 60px; block-size: 60px; border-radius: 50%; background: var(--surface2); display: grid; place-items: center; overflow: hidden; }
.disc img, .disc .glyph { inline-size: 100%; block-size: 100%; object-fit: cover; }
.badge .ico { inline-size: 12px; block-size: 12px; vertical-align: -2px; stroke-width: 2.4; }
.badge { margin-block-start: -11px; position: relative; background: var(--inv); color: var(--inv-ink); font: 700 12px/20px var(--text); padding-inline: 7px; border-radius: 10px; white-space: nowrap; box-shadow: 0 0 0 2.5px var(--surface); }
.reg small { font-size: 12px; color: var(--muted); margin-block-start: 4px; white-space: nowrap; max-inline-size: 68px; overflow: hidden; text-overflow: ellipsis; }

/* this week */
.t-week { padding: 14px 12px 12px; }
.t-week h3 { padding-inline: 4px; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-block-start: 10px; }
.day { block-size: 64px; border-radius: 16px; background: var(--surface2); display: grid; place-items: center; align-content: center; gap: 1px; text-align: center; }
.day small { font-size: 12px; font-weight: 600; color: var(--muted); }
.day b { font: 600 17px/1.1 var(--display); }
.day .dots { display: flex; gap: 3px; block-size: 6px; margin-block-start: 3px; }
.day .dots i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--muted); }
.k-perk { background: var(--violet) !important; }
.k-plan { background: var(--blue) !important; }
.k-admin { background: var(--ink) !important; }
.k-life { background: var(--coral) !important; }
.day.we { background: color-mix(in srgb, var(--amber) 26%, var(--surface2)); }
.day.on, .day[aria-pressed="true"], .day.we[aria-pressed="true"] { background: var(--inv); color: var(--inv-ink); }
.day[aria-pressed="true"] small { color: inherit; opacity: 0.75; }
.day[aria-pressed="true"] .k-admin { background: var(--inv-ink) !important; }
.evs { display: flex; gap: 6px; flex-wrap: wrap; margin-block-start: 10px; min-block-size: 36px; }
.ev { block-size: 36px; padding-inline: 6px 12px; border-radius: 18px; background: var(--surface2); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; max-inline-size: 100%; }
.ev > span { overflow: hidden; text-overflow: ellipsis; }
.ev > i { inline-size: 24px; block-size: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.ev > i .ico { inline-size: 14px; block-size: 14px; stroke-width: 2.2; }
.ev > i.k-admin { color: var(--bg); }
.ev.none { background: none; color: var(--muted); padding-inline-start: 4px; font-weight: 500; }

/* wishlist */
.t-wish { background: var(--coral); color: var(--coral-ink); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 0 12px; }
.t-wish .lbl em { font-style: normal; margin-inline-start: 4px; block-size: 22px; padding-inline: 5px 8px; border-radius: 11px; background: var(--coral-ink); color: var(--coral); display: inline-flex; align-items: center; gap: 3px; font-size: 12px; white-space: nowrap; }
.t-wish .lbl em .ico { inline-size: 12px; block-size: 12px; stroke-width: 2.6; }
.t-wish .big { font-size: 44px; margin-block-start: 14px; }
.t-wish .to { font-size: 13px; font-weight: 600; margin-block-start: 4px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-wish .prod { inline-size: 112px; block-size: 112px; border-radius: 24px; overflow: hidden; position: relative; background: rgba(46, 14, 4, 0.14); align-self: start; display: block; }
.t-wish .prod img, .t-wish .prod .glyph { inline-size: 100%; block-size: 100%; object-fit: cover; }
.t-wish .prod .knob { inset-block-start: 6px; inset-inline-end: 6px; inline-size: 32px; block-size: 32px; }
.minis { grid-column: 1 / -1; display: flex; gap: 8px; margin-block-start: 14px; }
.mini { flex: 1; min-inline-size: 0; block-size: 48px; border-radius: 16px; background: rgba(46, 14, 4, 0.1); display: flex; align-items: center; gap: 8px; padding-inline: 6px 10px; }
.mini img, .mini .glyph { inline-size: 36px; block-size: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.mini b { font: 700 15px var(--display); }
.mini small { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }

/* progress */
.bar { display: block; block-size: 8px; border-radius: 4px; background: color-mix(in srgb, currentColor 16%, transparent); overflow: hidden; }
.bar > i { display: block; block-size: 100%; border-radius: 4px; background: currentColor; inline-size: calc(var(--p, 0) * 1%); min-inline-size: 4px; }
.bar.good > i { background: var(--good); }
.bar.warn > i { background: var(--amber); }
.bar.bad > i { background: var(--coral); }
.ringbox { position: relative; display: inline-grid; place-items: center; flex: none; }
.ringbox svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.ringbox b { font: 700 14px var(--display); position: relative; }
.sparkline { display: block; inline-size: 100%; overflow: visible; }

/* package */
.t-pack { background: var(--lav); color: var(--lav-ink); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.t-pack .big { font-size: 44px; margin-block-start: 10px; }
.t-pack .un { margin-block-start: 4px; font-weight: 500; }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.perk { inline-size: 64px; block-size: 64px; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, 0.58); display: grid; place-items: center; }
.perk img, .perk .glyph { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* a trip: the place, the countdown, how ready it is */
.t-trip { block-size: 204px; padding: 16px; background: var(--blue); color: #fff; }
.t-trip.ph::after { background: linear-gradient(100deg, rgba(43, 63, 168, 0.97) 0%, rgba(63, 93, 242, 0.88) 40%, rgba(63, 93, 242, 0.18) 100%); }
[dir="rtl"] .t-trip.ph::after { background: linear-gradient(260deg, rgba(43, 63, 168, 0.97) 0%, rgba(63, 93, 242, 0.88) 40%, rgba(63, 93, 242, 0.18) 100%); }
.t-trip > * { position: relative; z-index: 1; }
.t-trip > img.bg { position: absolute; z-index: 0; }
.t-trip .obj { position: absolute; inset-inline-end: -6px; inset-block-start: 4px; inline-size: 176px; z-index: 0; }
.t-trip .big { font-size: 64px; margin-block-start: 12px; }
.t-trip .un { font-size: 15px; margin-block-start: 2px; }
.steps { position: absolute !important; inset-inline-start: 16px; inset-block-end: 14px; display: flex; gap: 6px; }
.steps i { inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; }
.steps .ico { inline-size: 15px; block-size: 15px; stroke-width: 2.2; }
.steps .done { background: #fff; color: var(--blue); }
.steps .watch { box-shadow: inset 0 0 0 2px #fff; }
.steps .todo { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.7); }
.t-trip .ringbox { position: absolute !important; inset-inline-end: 14px; inset-block-end: 12px; inline-size: 58px; block-size: 58px; }

/* a life moment is a question, never a verdict */
.t-moment { background: linear-gradient(150deg, #ffe9cc, #f9c7d4); color: #3a1230; padding: 16px; min-block-size: 236px; display: flex; flex-direction: column; }
.t-moment .obj { position: absolute; inset-inline-end: 6px; inset-block-start: 6px; block-size: 128px; inline-size: auto; }
.lockline { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; position: relative; }
.lockline .ico { inline-size: 14px; block-size: 14px; stroke-width: 2.2; }
.t-moment h2 { margin-block: 12px 14px; font: 600 27px/1.1 var(--display); letter-spacing: -0.035em; max-inline-size: 58%; position: relative; }
[lang="ar"] .t-moment h2 { letter-spacing: 0; line-height: 1.3; font-size: 24px; }
.t-moment .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-block-start: auto; position: relative; }
.t-moment .btns button { block-size: 50px; border-radius: 25px; font-weight: 700; font-size: 15px; text-align: center; }
.t-moment .yes { background: #3a1230; color: #fff; }
.t-moment .no { box-shadow: inset 0 0 0 2px rgba(58, 18, 48, 0.4); background: rgba(255, 255, 255, 0.35); }
.t-moment .whyb { align-self: flex-start; margin-block: 4px -6px; margin-inline-start: -10px; position: relative; }
.t-moment.answered { min-block-size: 132px; }
.t-moment.answered .obj { block-size: 112px; inset-block-start: 10px; inset-inline-end: 10px; }
.t-moment.answered h2 { max-inline-size: 62%; margin-block-end: 0; }
.t-ack { display: flex; align-items: center; gap: 10px; padding-inline: 14px 8px; min-block-size: 60px; border-radius: 24px; font-size: 14px; }
.t-ack > span { flex: 1; }
.t-ack button { block-size: 44px; padding-inline: 14px; font-weight: 700; font-size: 13px; color: var(--muted); }

/* start something, your story, the end */
.t-start { border: 2px dashed var(--line); padding: 14px; }
.t-start h3 { color: var(--muted); }
.opts { margin-block-start: 12px; margin-inline: -14px; padding-inline: 14px; }
.opt { flex: 0 0 60px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.opt > span { inline-size: 60px; block-size: 60px; border-radius: 50%; background: var(--surface2); display: grid; place-items: center; overflow: hidden; }
.opt img { inline-size: 46px; block-size: 46px; object-fit: contain; }
.opt small { font-size: 12px; font-weight: 600; white-space: nowrap; }
.t-story { padding: 16px; display: flex; flex-direction: row; align-items: center; gap: 14px; }
.stack { display: flex; flex: none; }
.stack img, .stack .glyph { inline-size: 44px; block-size: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2.5px var(--surface); margin-inline-end: -14px; }
.stack > :last-child { margin-inline-end: 0; }
.t-story .main { flex: 1; min-inline-size: 0; }
.t-story .big { font-size: 26px; overflow: hidden; text-overflow: ellipsis; }
.t-story .sub { color: var(--muted); font-weight: 500; margin-block-start: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playb { inline-size: 50px; block-size: 50px; border-radius: 50%; background: var(--inv); color: var(--inv-ink); display: grid; place-items: center; flex: none; }
.playb .ico { inline-size: 20px; block-size: 20px; }
.end { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; padding-block-start: 10px; font-size: 13px; color: var(--muted); text-align: center; }
.end .ico { inline-size: 18px; block-size: 18px; }

/* ---------------------------------------------------------------- generic pieces */

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--ana-gutter) * -1); padding-inline: var(--ana-gutter); }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip { min-block-size: 36px; padding-inline: 12px; border-radius: 18px; background: var(--surface); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
.chip .ico { inline-size: 16px; block-size: 16px; }
.chip img, .chip .glyph { inline-size: 24px; block-size: 24px; border-radius: 50%; object-fit: cover; margin-inline-start: -6px; }
.chip.on, .chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--inv); color: var(--inv-ink); }
.chip.soft { background: color-mix(in srgb, currentColor 11%, transparent); }
.chip.mint { background: var(--mint); color: var(--mint-ink); }
.chip.amber { background: var(--amber); color: var(--amber-ink); }
.chip.coral { background: var(--coral); color: var(--coral-ink); }
.chip.lav { background: var(--lav); color: var(--lav-ink); }
button.chip, a.chip { min-block-size: 44px; border-radius: 22px; padding-inline: 14px; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 26px; background: var(--surface2); }
.seg button { min-block-size: 44px; border-radius: 22px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); padding-inline: 8px; white-space: nowrap; overflow: hidden; }
.seg button .ico { inline-size: 16px; block-size: 16px; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

.btn { min-block-size: 50px; padding-inline: 22px; border-radius: 25px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; background: var(--inv); color: var(--inv-ink); }
.btn .ico { inline-size: 18px; block-size: 18px; stroke-width: 2.2; }
.btn.wide { inline-size: 100%; }
.btn.small { min-block-size: 44px; padding-inline: 16px; font-size: 14px; border-radius: 22px; }
.btn.soft { background: var(--surface2); color: var(--ink); }
.btn.ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn.onc { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.btn.danger { background: var(--coral); color: var(--coral-ink); }
.btn.mint { background: var(--mint); color: var(--mint-ink); }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btns > .btn { flex: 1 1 0; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { border-block-start: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 12px; min-block-size: 64px; padding-block: 8px; inline-size: 100%; text-align: start; }
/* The glyph's colour is its tone class's; only a photograph gets the neutral ground while it loads. */
.row > img, .row > .glyph { inline-size: 44px; block-size: 44px; border-radius: 15px; object-fit: cover; flex: none; }
.row > img { background: var(--surface2); }
.row > .glyph .ico { inline-size: 20px; block-size: 20px; }
.row.round > img, .row.round > .glyph { border-radius: 50%; }
.row .main { flex: 1; min-inline-size: 0; }
.row .main b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .main small { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .end2 { flex: none; text-align: end; }
.row .end2 b { display: block; font: 600 15px var(--display); font-variant-numeric: tabular-nums; }
.row .end2 small { display: block; font-size: 12px; color: var(--muted); }
.row .end2 .in { color: var(--good); }
.row > .ico.chev { inline-size: 18px; block-size: 18px; color: var(--muted); }
.t-list { padding-block: 4px; padding-inline: 16px; }
.t-list > h3 { padding-block: 12px 4px; }

.kv { display: grid; gap: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 10px; font-size: 14px; }
.kv > div + div { border-block-start: 1px solid var(--line); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; text-align: end; }
dl.kv { margin: 0; }

.note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.note.pad { padding-inline: 4px; }
.h2 { font: 600 18px var(--display); letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-block: 8px 2px; grid-column: 1 / -1; }
.h2 a, .h2 button { font: 600 13px var(--text); color: var(--muted); letter-spacing: 0; }
.stackv { display: grid; gap: 12px; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.center { display: grid; place-items: center; text-align: center; }

/* the states that are easy to get wrong: each says what it is */
.state { grid-column: 1 / -1; border-radius: 28px; padding: 24px 20px; background: var(--surface); display: grid; justify-items: center; gap: 8px; text-align: center; }
.state .glyph { inline-size: 56px; block-size: 56px; border-radius: 20px; }
.state b { font: 600 17px var(--display); letter-spacing: -0.01em; }
.state p { font-size: 14px; line-height: 1.5; color: var(--muted); max-inline-size: 30ch; }
.state .btn { margin-block-start: 8px; }
.state.inline { padding: 14px 16px; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: start; align-items: center; gap: 2px 12px; border-radius: 22px; }
.state.inline .glyph { grid-row: span 2; inline-size: 40px; block-size: 40px; border-radius: 14px; }
.state.inline b { font: 600 14px var(--text); }
.state.inline p { font-size: 13px; max-inline-size: none; }
.state.inline .btn { grid-column: 1 / -1; justify-self: start; margin-block-start: 10px; }
.skel { border-radius: 28px; background: linear-gradient(100deg, var(--surface2) 30%, var(--surface) 50%, var(--surface2) 70%) 0 0 / 300% 100%; animation: skel 1.4s linear infinite; }
@keyframes skel { to { background-position: -150% 0; } }

/* form pieces */
.switch { inline-size: 52px; block-size: 32px; border-radius: 16px; background: var(--surface2); position: relative; flex: none; transition: background 0.2s; box-shadow: inset 0 0 0 1.5px var(--line); }
/* The switch is drawn 32px tall; its target is 44px. */
.switch::before { content: ""; position: absolute; inset: -6px 0; }
.switch::after { content: ""; position: absolute; inset-block-start: 4px; inset-inline-start: 4px; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: inset-inline-start 0.2s; }
.switch[aria-checked="true"] { background: var(--good); box-shadow: none; }
.switch[aria-checked="true"]::after { inset-inline-start: 24px; background: #fff; }
.switch[disabled] { opacity: 0.5; }
.switchrow { display: flex; align-items: center; gap: 12px; min-block-size: 60px; padding-block: 8px; }
.switchrow .main { flex: 1; min-inline-size: 0; }
.switchrow .main b { display: block; font-size: 15px; font-weight: 600; }
.switchrow .main small { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }
input[type="range"] { inline-size: 100%; block-size: 44px; margin: 0; accent-color: var(--ink); }
.field { display: flex; align-items: center; gap: 8px; min-block-size: 50px; padding-inline: 16px; border-radius: 25px; background: var(--surface); }
.field input { flex: 1; min-inline-size: 0; block-size: 48px; border: 0; background: none; color: inherit; font: inherit; outline: none; }
.field input::placeholder { color: var(--muted); }
.field .ico { color: var(--muted); inline-size: 20px; block-size: 20px; }

/* ---------------------------------------------------------------- sheets and toasts */

.sheet-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 0.22s; }
.sheet { position: absolute; inset-inline: 0; inset-block-end: 0; max-block-size: 88%; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); border-start-start-radius: 32px; border-start-end-radius: 32px; transform: translateY(102%); transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); padding-block-end: var(--ana-safe-bottom); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25); }
.sheet.tall { block-size: 88%; }
.sheet-open .sheet { transform: none; }
.sheet-open .sheet-scrim { opacity: 1; }
.sheet-grab { flex: none; display: grid; place-items: center; block-size: 28px; cursor: grab; touch-action: none; }
.sheet-grab::before { content: ""; inline-size: 44px; block-size: 5px; border-radius: 3px; background: var(--line); }
.sheet-head { flex: none; display: flex; align-items: center; gap: 8px; padding-inline: 20px 10px; min-block-size: 48px; }
.sheet-head h2 { flex: 1; min-inline-size: 0; font: 600 20px var(--display); letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: 8px 20px 20px; scrollbar-width: none; display: grid; gap: 12px; align-content: start; }
.sheet-body::-webkit-scrollbar { display: none; }
.sheet-foot { flex: none; padding: 10px 20px 14px; display: flex; gap: 8px; }
.sheet-foot .btn { flex: 1; }
.sheet-hero { border-radius: 24px; overflow: hidden; position: relative; block-size: 170px; background: var(--surface2); }
.sheet-hero img, .sheet-hero .glyph { inline-size: 100%; block-size: 100%; object-fit: cover; }

.toast { position: absolute; inset-inline: 16px; inset-block-end: calc(100px + var(--ana-safe-bottom)); display: flex; justify-content: center; pointer-events: none; }
.toast > div { pointer-events: auto; background: #0b0b0c; color: #fff; font-size: 14px; font-weight: 500; padding-block: 6px; padding-inline: 18px 6px; min-block-size: 48px; border-radius: 24px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); max-inline-size: 100%; opacity: 0; transform: translateY(12px); transition: 0.22s; }
.toast.on > div { opacity: 1; transform: none; }
.toast span { padding-block: 6px; padding-inline-end: 12px; }
.toast button { block-size: 36px; padding-inline: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.16); font-weight: 700; font-size: 13px; flex: none; }
.ana-phone-shell[data-chrome="sheet"] .toast, .ana-phone-shell[data-chrome="none"] .toast { inset-block-end: calc(24px + var(--ana-safe-bottom)); }

/* ---------------------------------------------------------------- the sign-in form, in the app's own dress */

.ana-session-chip { display: none !important; }
.ana-session-overlay { background: var(--scrim) !important; align-items: flex-end !important; }
.ana-session-card { inline-size: min(390px, 100vw) !important; border-radius: 32px 32px 0 0 !important; background: var(--bg) !important; color: var(--ink) !important; font: 400 15px/1.5 var(--text) !important; padding: 24px 20px calc(24px + var(--ana-safe-bottom)) !important; }
.ana-session-title { font: 600 22px var(--display) !important; letter-spacing: -0.02em; }
.ana-session-note, .ana-session-label { color: var(--muted) !important; }
.ana-session-input { border: 0 !important; border-radius: 25px !important; min-block-size: 50px; padding-inline: 18px !important; background: var(--surface) !important; color: var(--ink) !important; }
.ana-session-submit { min-block-size: 50px; border-radius: 25px !important; background: var(--inv) !important; color: var(--inv-ink) !important; font-weight: 700 !important; padding-inline: 22px !important; }
.ana-session-cancel { min-block-size: 50px; border-radius: 25px !important; background: var(--surface2) !important; color: var(--ink) !important; border: 0 !important; font-weight: 700 !important; padding-inline: 22px !important; }
.ana-session-actions > * { flex: 1; }
.ana-session-key { background: var(--surface2) !important; color: var(--ink) !important; }
@media (min-width: 768px) {
  .ana-session-overlay { align-items: center !important; }
  .ana-session-card { border-radius: 32px !important; }
}