/* Styles only the Plan 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. */

/* ---------------------------------------------------------------- Plan: the two doors */

.t-pdoor { block-size: 132px; padding: 14px; }
.t-pdoor > * { position: relative; z-index: 1; }
.t-pdoor .big { font-size: 40px; margin-block-start: 12px; }
.t-pdoor .un { font-size: 12.5px; margin-block-start: 2px; line-height: 1.25; max-inline-size: 60%; }
.t-pdoor.ph .un { max-inline-size: none; }
.t-pdoor .lbl + .un { margin-block-start: 8px; }
.t-pdoor > .obj { position: absolute; z-index: 0; inset-inline-end: -6px; inset-block-end: -8px; block-size: 76px; inline-size: auto; max-inline-size: 88px; object-fit: contain; }
.t-pdoor > img.bg { position: absolute; z-index: 0; }
.t-pdoor.ph { color: #fff; }
.t-pdoor.ph::after { background: linear-gradient(100deg, rgba(43, 63, 168, 0.96) 0%, rgba(63, 93, 242, 0.84) 45%, rgba(63, 93, 242, 0.15) 100%); }
[dir="rtl"] .t-pdoor.ph::after { background: linear-gradient(260deg, rgba(43, 63, 168, 0.96) 0%, rgba(63, 93, 242, 0.84) 45%, rgba(63, 93, 242, 0.15) 100%); }
.t-pdoor.ask { background: linear-gradient(150deg, #ffe9cc, #f9c7d4); color: #3a1230; }

/* ---------------------------------------------------------------- Plan: a goal */

.g-ring { display: grid; place-items: center; flex: none; inline-size: var(--ring, 92px); block-size: var(--ring, 92px); }
.g-ring > * { grid-area: 1 / 1; }
.g-ring img { inline-size: 64%; block-size: 64%; object-fit: contain; }
.t-goal { padding: 16px; }
.t-goal > .g-ring { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; }
.t-goal .lbl { max-inline-size: calc(100% - 108px); font-size: 14px; }
.t-goal .big { font-size: 38px; margin-block-start: 14px; }
.t-goal .un, .t-fund .un { margin-block-start: 4px; font-weight: 500; }
.g-pace { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-block-start: 12px; min-inline-size: 0; }
.g-pace .ico { inline-size: 16px; block-size: 16px; flex: none; stroke-width: 2.2; }
.g-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 12px; }
.g-foot .g-pace { margin-block-start: 0; }
.g-foot .btn { flex: none; white-space: nowrap; }
.t-goal .kv dt { color: inherit; opacity: 0.75; }
.t-goal .kv > div { padding-block: 7px; font-size: 13.5px; }
.t-goal .kv > div + div { border-block-start-color: color-mix(in srgb, currentColor 16%, transparent); }

/* ---------------------------------------------------------------- Plan: this month's budgets, and a limit */

[data-id="plan-budgets"] .row .main small { overflow: visible; }
[data-id="plan-budgets"] .row .main small .bar { margin-block-start: 7px; }
.l-now { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.l-now > span { display: grid; gap: 2px; padding: 14px 16px; border-radius: 22px; background: var(--surface); min-inline-size: 0; }
.l-now small, .l-state small { font-size: 13px; color: var(--muted); }
.l-now b { font-size: 22px; font-weight: 700; }
.l-state { display: grid; gap: 8px; padding-inline: 4px; }
.l-set .big { font-size: 44px; text-align: center; margin-block: 14px 6px; }
.l-set .spread small { font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- Plan: ideas for a new goal */

.t-obj.t-idea { block-size: 172px; }
.t-obj.t-idea .big { font-size: 16px; margin-block-start: 10px; letter-spacing: -0.02em; white-space: normal; line-height: 1.2; }
.t-obj.t-idea .obj { block-size: 66px; max-inline-size: 78px; }
.t-ask { padding: 16px; min-block-size: 100px; }
.t-ask > .obj { position: absolute; inset-inline-end: 12px; inset-block-start: 10px; block-size: 80px; inline-size: auto; }
.t-ask h3 { display: block; font: 600 19px var(--display); letter-spacing: -0.02em; max-inline-size: calc(100% - 96px); }
.t-ask .note { margin-block-start: 8px; max-inline-size: calc(100% - 96px); }

/* ---------------------------------------------------------------- sheets: an amount, a goal, a new trip */

.p-q { font: 600 15px var(--text); padding-inline: 4px; }
.p-amount > span { font-weight: 600; color: var(--muted); }
.p-amount input { font: 600 22px var(--display); }
.p-goalhead { display: flex; align-items: center; gap: 14px; --ring: 84px; }
.p-goalhead .main { display: grid; gap: 2px; min-inline-size: 0; }
.p-goalhead b { font-size: 26px; font-weight: 700; }
.p-goalhead small { font-size: 13px; color: var(--muted); }
.p-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-line { display: grid; gap: 6px; min-inline-size: 0; }
.p-line > span:first-child { font-size: 13px; font-weight: 600; color: var(--muted); padding-inline: 4px; }
.p-line .field { padding-inline: 14px; }

/* ---------------------------------------------------------------- Trips */

.t-triphero { block-size: 248px; }
.t-triphero .big { font-size: 76px; }
.t-facts { position: absolute !important; inset-inline: 16px 92px; inset-block-end: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.t-facts span { block-size: 28px; padding-inline: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.22); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.t-fund { padding: 16px; }
.t-fund .big { font-size: 40px; margin-block-start: 12px; }
.f-bar { display: block; margin-block-start: 12px; }
.t-quiet { display: flex; align-items: center; gap: 8px; }
.t-quiet .ico { inline-size: 16px; block-size: 16px; flex: none; }
.t-stat.t-cost { min-block-size: 0; }
.t-stat.t-cost .big { font-size: 30px; padding-block-start: 10px; }
.t-fare { padding: 14px; }
.f-head { display: flex; align-items: flex-start; gap: 8px; }
.f-head .glyph { inline-size: 36px; block-size: 36px; border-radius: 12px; flex: none; }
.f-head .glyph .ico { inline-size: 18px; block-size: 18px; }
.f-head .lbl > span { white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.t-fare .big { font-size: 30px; margin-block-start: 14px; }
.t-fare .un { font-size: 12.5px; margin-block-start: 2px; }
.f-gap { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-block-start: 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.f-gap.ok { padding: 5px 9px; border-radius: 12px; background: var(--mint); color: var(--mint-ink); }
.f-gap .ico { inline-size: 14px; block-size: 14px; stroke-width: 2.4; }
.t-days .row { align-items: flex-start; }
.t-days .row > .d-num { font: 700 16px var(--display); background: var(--blue); color: var(--blue-ink); }
.t-days .row .main small { white-space: normal; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.t-unknown h3 { color: var(--muted); }
.u-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.u-lines li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.u-lines .ico { inline-size: 16px; block-size: 16px; flex: none; }
.t-unknown .because { margin-block-start: 10px; }
.p-rail .pick .deal > small { font-size: 12px !important; }
.p-rail .pick .deal .cur { font-size: 12px; }
.p-rail { grid-column: 1 / -1; margin-inline: calc(var(--ana-gutter) * -1); padding-inline: var(--ana-gutter); scroll-padding-inline: var(--ana-gutter); }
.t-photo.t-tripempty { block-size: 300px; }

/* ---------------------------------------------------------------- Life moments */

.t-ahead { padding-block: 10px; }
.ahead { list-style: none; margin: 0; padding: 0; position: relative; }
.ahead::before { content: ""; position: absolute; inset-block: 26px; inset-inline-start: 19px; inline-size: 2px; background: var(--line); }
.a-row { display: flex; align-items: center; gap: 12px; min-block-size: 60px; padding-block: 6px; position: relative; }
.a-dot { inline-size: 40px; block-size: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 4px var(--surface); }
.a-dot .ico { inline-size: 18px; block-size: 18px; }
.a-row .main { flex: 1; min-inline-size: 0; }
.a-row .main b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-row .main small { display: block; font-size: 13px; color: var(--muted); }
.a-row .ringbox b { font-size: 12px; }
.a-row > .ico.chev { inline-size: 18px; block-size: 18px; color: var(--muted); margin-inline-end: 12px; }
.objs { display: flex; flex: none; }
.objs img { inline-size: 44px; block-size: 44px; object-fit: contain; margin-inline-end: -12px; }
.objs img:last-child { margin-inline-end: 0; }
.t-storydoor .sub { white-space: normal; line-height: 1.3; }

/* ---------------------------------------------------------------- Your story */

.t-storytop { padding: 16px; }
.t-storytop .objs { position: absolute; inset-inline-end: 14px; inset-block-start: 14px; }
.t-storytop .objs img { inline-size: 54px; block-size: 54px; margin-inline-end: -14px; }
.t-storytop .big { font-size: 64px; }
.t-storytop .un { margin-block-start: 4px; }
.t-storytop .soft2 { font-weight: 500; opacity: 0.8; }
.t-ev { padding: 14px; min-block-size: 176px; }
.t-ev > .obj { block-size: 84px; inline-size: auto; max-inline-size: 100%; object-fit: contain; align-self: flex-start; margin-block-end: 10px; }
.t-ev.s6 { min-block-size: 112px; padding-inline-end: 128px; justify-content: center; }
.t-ev.s6 > .obj { position: absolute; inset-inline-end: 14px; inset-block: 0; margin-block: auto; block-size: 84px; max-inline-size: 104px; }
.t-ev .lbl { color: var(--muted); font-size: 12.5px; }
.h-title { display: block; font: 600 16px/1.25 var(--display); letter-spacing: -0.01em; margin-block-start: 4px; }
[lang="ar"] .h-title { letter-spacing: 0; line-height: 1.45; }
.h-hero { block-size: 150px; border-radius: 24px; background: var(--surface); display: grid; place-items: center; }
.h-hero img { block-size: 118px; inline-size: auto; object-fit: contain; }
.h-body { font-size: 16px; line-height: 1.5; }