/* Styles only the Offers tab's screens need. Everything shared is `ui/kit.css`: reach for a kit piece first.
   Logical properties only; nothing under 12px; a tap target is at least 44px. */

/* ---------------------------------------------------------------- For you: the two doors */

.t-door { padding: 14px; block-size: 118px; display: flex; flex-direction: column; }
.t-door .lbl { max-inline-size: calc(100% - 40px); }
.t-door .big { font-size: 32px; margin-block-start: auto; }
.t-door .un { font-size: 12.5px; margin-block-start: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-door .lbl + .un, .t-door .pics + .un { margin-block-start: auto; }
.t-door .pics { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; display: flex; }
.t-door .pics > * { inline-size: 32px; block-size: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); margin-inline-start: -10px; }
.t-door .pics .glyph .ico { inline-size: 16px; block-size: 16px; }

/* ---------------------------------------------------------------- For you: the kinds, as round pictures */

.o-cats { grid-column: 1 / -1; gap: 4px; margin-inline: calc(var(--ana-gutter) * -1); padding: 6px var(--ana-gutter); scroll-padding-inline: var(--ana-gutter); }
.o-cat { flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; scroll-snap-align: start; }
.o-cat small { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.o-cat .disc.all { background: var(--surface); color: var(--ink); }
.o-cat[aria-pressed="true"] .disc { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 5px var(--ink); }
.o-cat[aria-pressed="true"] small { color: var(--ink); }

/* ---------------------------------------------------------------- an offer in the grid: the rail's card, sized as a tile */

.grid > .pick { flex: none; block-size: 176px; border-radius: 28px; }
.grid > .pick.s2 { block-size: 148px; border-radius: 24px; }
.grid > .pick.s6 { block-size: 150px; }
.grid > .pick.o-hero { block-size: 228px; }
.grid > .pick .deal { font-size: 25px; white-space: normal; overflow: visible; line-height: 1.05; }
.grid > .pick .deal .cur { font-size: 13px; }
.grid > .pick.s2 .deal { font-size: 21px; }
.grid > .pick.s2 .deal .cur { font-size: 12px; }
.grid > .pick.o-hero .deal { font-size: 40px; }
.grid > .pick.o-hero .deal .cur { font-size: 18px; }
.grid > .pick.o-hero .tx { inset-inline: 16px 14px; inset-block-end: 14px; }
.grid > .pick.o-hero .who { font-size: 14px; }
.grid > .pick.o-hero .tag { inset-block-start: 12px; inset-inline-start: 12px; block-size: 28px; border-radius: 14px; line-height: 28px; max-inline-size: calc(100% - 76px); }
.grid > .pick.o-hero .knob { inset-block-start: 12px; inset-inline-end: 12px; inline-size: 40px; block-size: 40px; }
/* The small words of a deal ("off", the currency) stay readable on the small tiles and in the rails. */
.grid > .pick.s2 .deal > small, .o-rail .pick .deal > small { font-size: 12px !important; }
.o-rail .pick .deal .cur { font-size: 12px; }
.o-line { display: block; font-size: 13px; font-weight: 500; opacity: 0.9; margin-block-start: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid > .pick > .glyph.bg, .o-rail .pick > .glyph.bg { position: absolute; inset: 0; }
.grid > .pick > .glyph.bg .ico, .o-rail .pick > .glyph.bg .ico { inline-size: 40px; block-size: 40px; opacity: 0.5; }

.o-live { padding-inline: 4px; margin-block-end: -2px; }
.o-rail { grid-column: 1 / -1; margin-inline: calc(var(--ana-gutter) * -1); padding-inline: var(--ana-gutter); scroll-padding-inline: var(--ana-gutter); }
.o-when { display: inline-flex; align-items: center; gap: 6px; }
/* Four views in one control: the words stay on one line and the icons give way on a narrow phone. */
.o-views button { gap: 4px; padding-inline: 4px; white-space: nowrap; }
.o-live-word { color: var(--good); font-weight: 600; }
[data-id="saved"] .row .main b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
.o-trust .lbl { color: var(--muted); }

/* ---------------------------------------------------------------- Packages */

.t-packhero { padding: 16px; }
.t-packhero .spread { min-block-size: 36px; }
.t-packhero .big { font-size: 64px; margin-block-start: 10px; }
.t-packhero .un { margin-block-start: 6px; font-weight: 500; }
.p-inside { display: flex; align-items: flex-start; gap: 8px; inline-size: 100%; margin-block-start: 16px; }
.p-part { flex: 1 1 0; min-inline-size: 0; max-inline-size: 72px; display: grid; gap: 5px; justify-items: center; }
.p-part .perk { inline-size: 100%; block-size: auto; aspect-ratio: 1; }
.p-part small { font: 700 12px var(--text); white-space: nowrap; }
.p-go { margin-inline-start: auto; align-self: center; inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.6); flex: none; }
.p-go .ico { inline-size: 18px; block-size: 18px; }
.p-year { display: flex; align-items: center; gap: 14px; margin-block-start: 14px; padding: 10px 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.5); }
.p-year .main { flex: none; display: grid; }
.p-year small { font-size: 12px; font-weight: 600; opacity: 0.8; }
.p-year b { font-size: 20px; font-weight: 700; }
.p-year .sparkline { flex: 1; min-inline-size: 0; }
.p-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 8px; min-block-size: 40px; }
.p-bank { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; min-inline-size: 0; }
.p-bank .ico { inline-size: 16px; block-size: 16px; flex: none; }

.t-packmini { padding: 12px; min-block-size: 150px; }
.t-packmini .pics { display: flex; margin-block-end: 10px; }
.t-packmini .pics > * { inline-size: 34px; block-size: 34px; border-radius: 50%; object-fit: cover; background: var(--surface2); box-shadow: 0 0 0 2px var(--surface); margin-inline-end: -10px; }
.t-packmini .pics .glyph .ico { inline-size: 16px; block-size: 16px; }
.t-packmini .lbl > span { white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.t-packmini .big { font-size: 28px; margin-block-start: auto; padding-block-start: 8px; }
.t-packmini .un { font-size: 12px; margin-block-start: 2px; }

.t-visits { padding: 16px; }
.v-pic { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; inline-size: 64px; block-size: 64px; border-radius: 50%; overflow: hidden; background: rgba(58, 38, 0, 0.12); }
.v-pic > * { inline-size: 100%; block-size: 100%; object-fit: cover; }
.t-visits .big { font-size: 48px; margin-block-start: 12px; }
.t-visits .big small { font-size: 0.45em; font-weight: 600; opacity: 0.7; }
.t-visits .un { margin-block-start: 4px; font-weight: 500; }
.v-row { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 14px; }
.v-row i { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent); }
.v-row i.on { background: var(--amber-ink); color: var(--amber); box-shadow: none; }
.v-row .ico { inline-size: 14px; block-size: 14px; stroke-width: 2.6; }

/* ---------------------------------------------------------------- Watchlist */

.t-stat.w-top { min-block-size: 132px; }
.t-stat.w-top .big { font-size: 34px; }
.t-wish.w-focus .big { font-size: 40px; margin-block-start: 12px; }
.w-bar { display: block; margin-block-start: 12px; }
.w-gap { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; margin-block-start: 12px; font-size: 13px; font-weight: 600; }
.w-gap > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; min-inline-size: 0; }
.w-gap .ico { inline-size: 15px; block-size: 15px; stroke-width: 2.4; }
.w-line { grid-column: 1 / -1; margin-block-start: 12px; padding: 12px 12px 8px; border-radius: 18px; background: rgba(46, 14, 4, 0.1); }
.w-line > span { display: flex; justify-content: space-between; gap: 8px; margin-block-start: 4px; }
.w-line small { font-size: 12px; font-weight: 600; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.w-line small:first-child { flex: none; }
.w-ctl { display: grid; gap: 10px; }
.w-ctl .switchrow { min-block-size: 0; padding-block: 0; }
.w-off { display: grid; min-inline-size: 0; }
.w-off b { font-size: 15px; font-weight: 600; }
.w-off small { font-size: 13px; color: var(--muted); }
.t-photo.w-mini .big { font-size: 26px; }
.t-photo.w-mini.s2 { block-size: 150px; }
.t-photo.w-mini.s2 .big { font-size: 20px; }
.t-photo.w-mini .big .cur { font-size: 12px; }
.t-photo.w-mini .tag { max-inline-size: calc(100% - 20px); }
[data-id="watch-ideas"] > .note { padding-inline: 16px; margin-block-start: 12px; }