/* RoamDrop board, rebuilt from build 136 (PlanScreen.swift / DesignSystem.swift).
   1 CSS px = 1 iOS pt; the screen is 402 x 874 and gets scaled as a whole. */
.rd-app {
  --ink: #11142D; --ink-soft: #2B3048; --muted: #687089; --violet: #7A5AF8;
  --violet-soft: #F1ECFF; --line: #E5E8F0;
  position: relative; width: 402px; height: 874px; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, system-ui, sans-serif;
  color: var(--ink); -webkit-font-smoothing: antialiased; letter-spacing: 0;
  background: linear-gradient(135deg, #F8F9FF 0%, #F4F6FF 50%, #FBFAFF 100%);
  line-height: 1.19; text-align: left;
}
.rd-app * { box-sizing: border-box; }
.rd-app svg { display: block; flex: none; max-width: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Status bar */
.rd-status { position: absolute; left: 0; right: 0; top: 0; height: 62px; }
.rd-status .t { position: absolute; left: 0; width: 146px; top: 20px; text-align: center; font-size: 17px; font-weight: 600; }
.rd-status .r { position: absolute; right: 36px; top: 24px; display: flex; gap: 7px; align-items: center; }

/* Header */
.rd-head { position: absolute; top: 74px; left: 18px; right: 18px; height: 50px; }
.rd-menu { position: absolute; left: 9px; top: 15px; width: 32px; height: 20px; color: var(--ink); }
.rd-title { position: absolute; left: 64px; top: 5px; font-size: 28px; font-weight: 600; line-height: 34px; }
.rd-round { position: absolute; top: 0; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.5); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); }
.rd-round.s1 { right: 50px; } .rd-round.s2 { right: 0; }
.rd-pill { position: absolute; left: 82px; top: 124.5px; height: 29px; padding: 0 10px; border-radius: 15px; background: var(--violet-soft); color: var(--violet); display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; }

/* Section header (Unplanned / Calendar) */
.rd-sec { position: absolute; left: 18px; right: 18px; height: 36px; display: flex; align-items: center; gap: 8px; }
.rd-sec .lbl { font-size: 16px; font-weight: 600; }
.rd-sec .cnt { height: 24px; min-width: 24px; padding: 0 8px; border-radius: 12px; background: #E4DAFF; color: var(--violet); font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.rd-sec .fl { margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); }

/* Filter chips */
.rd-chips-vp { position: absolute; left: 0; right: 0; top: 228px; height: 46px; overflow: hidden; }
.rd-chips { position: absolute; left: 18px; top: 4px; display: flex; gap: 9px; white-space: nowrap; will-change: transform; }
.rd-chip { height: 38px; padding: 0 13px; border-radius: 19px; border: 1px solid var(--line); background: #F6F7FA; color: #596078; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.rd-chip.on { background: #F1EDFF; border-color: #D9CEFF; color: var(--violet); }

/* Empty unplanned box */
.rd-empty { position: absolute; left: 18px; right: 18px; top: 288px; height: 90px; border-radius: 14px; background: rgba(255,255,255,.62); display: flex; align-items: center; gap: 13px; padding: 0 14px; }
.rd-empty > svg.border { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rd-empty .tile { width: 46px; height: 46px; border-radius: 13px; background: #F1EDFF; display: grid; place-items: center; color: var(--violet); flex: none; }
.rd-empty b { display: block; font-size: 15px; font-weight: 600; }
.rd-empty span { display: block; margin-top: 5px; font-size: 13px; color: var(--muted); }

/* Day columns */
.rd-days { position: absolute; top: 514px; left: 18px; display: flex; gap: 18px; will-change: transform; }
.rd-day { width: 218px; height: 700px; padding: 13px; border-radius: 12px; background: rgba(255,255,255,.82); border: 1px solid var(--line); position: relative; flex: none; }
.rd-day h4 { margin: 0; font-size: 18px; font-weight: 600; line-height: 22px; }
.rd-day .wd { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.rd-day .act { position: absolute; right: 13px; top: 13px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #FFF0F4; border: 1px solid #FFD6E1; color: #EF476F; }
.rd-stack { position: absolute; left: 12px; top: 86px; display: flex; flex-direction: column; gap: 12px; }

/* Board card */
.rd-card {
  --c0: #E3F7F4; --c1: #CFF0EB; --acc: #0E9E99; --acc-a: rgba(14,158,153,.28); --acc-d: rgba(14,158,153,.56); --mut: #2E4A48; --sh: rgba(174,230,225,.22);
  width: 192px; min-height: 134px; border-radius: 10px; position: relative; flex: none;
  background: linear-gradient(135deg, var(--c0), var(--c1)); border: 1px solid var(--acc-a);
  box-shadow: 0 5px 20px var(--sh); padding: 15px 12px 14px 34px;
}
.rd-card.place { --c0: #EFF8EF; --c1: #E3F4E1; --acc: #1FA257; --acc-a: rgba(31,162,87,.28); --acc-d: rgba(31,162,87,.56); --mut: #34433A; --sh: rgba(193,231,192,.20); }
.rd-card.transport { --c0: #EEF7FF; --c1: #DFF0FF; --acc: #2D7EF7; --acc-a: rgba(45,126,247,.28); --acc-d: rgba(45,126,247,.56); --mut: #31445E; --sh: rgba(185,223,255,.22); }
.rd-card.food { --c0: #FFEDE6; --c1: #FFDFD2; --acc: #F45D2F; --acc-a: rgba(244,93,47,.28); --acc-d: rgba(244,93,47,.56); --mut: #5A4851; --sh: rgba(245,181,159,.20); }
.rd-card.stay { --c0: #F1ECFF; --c1: #E9E2FF; --acc: #7A5AF8; --acc-a: rgba(122,90,248,.28); --acc-d: rgba(122,90,248,.56); --mut: #38405A; --sh: rgba(216,203,255,.20); }
.rd-card .dots { position: absolute; left: 15px; top: 21px; width: 4px; }
.rd-card .dots i { display: block; width: 4px; height: 4px; border-radius: 2px; background: var(--acc-d); margin-bottom: 4px; }
.rd-card .top { display: flex; align-items: center; height: 29px; color: var(--acc); }
.rd-card .badge { margin-left: auto; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--acc); color: #fff; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
.rd-card .ttl { margin-top: 15px; font-size: 15px; font-weight: 600; line-height: 1.19; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rd-card .ttl.sm { font-size: 12.6px; line-height: 15.4px; margin-top: 12px; }
.rd-card .sub { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--mut); }

/* Floating + */
.rd-fab { position: absolute; left: 308px; top: 742px; width: 74px; height: 74px; border-radius: 50%; background: var(--violet); box-shadow: 0 12px 44px rgba(122,90,248,.30); display: grid; place-items: center; color: #fff; }

/* Unplanned ideas row */
.rd-ideas { position: absolute; left: 18px; top: 303px; display: flex; gap: 14px; }

/* Idea badge: outlined, sparkles (CardStatusBadge "Not yet") */
.rd-card .badge.idea { background: rgba(var(--accv),.08); color: var(--acc); box-shadow: inset 0 0 0 1px rgba(var(--accv),.75); }
.rd-card .risk { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; margin-top: 8px; border-radius: 11px; background: #fff; color: #D08A13; box-shadow: inset 0 0 0 1px rgba(208,138,19,.38); font-size: 11px; font-weight: 600; }
.rd-card.tiny .ttl { font-size: 13.5px; }
.rd-card.tiny .sub { font-size: 12px; }
.rd-card.one .ttl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.rd-card sup { font-size: 9px; vertical-align: 5px; }

/* Multi-day segments (BoardSegmentShape / BoardSegmentDashedEdges) */
.rd-card[class*="seg-s"]:not(.seg-s), .rd-card.seg-tD, .rd-card.seg-tA { border-color: var(--acc-3); box-shadow: 0 5px 18px var(--sh); }
.rd-card.seg-sS { border-radius: 10px 0 0 10px; border-right: 1.4px dashed var(--acc-d); }
.rd-card.seg-sM { border-radius: 0; border-left: 1.4px dashed var(--acc-d); border-right: 1.4px dashed var(--acc-d); }
.rd-card.seg-sE { border-radius: 0 10px 10px 0; border-left: 1.4px dashed var(--acc-d); }
.rd-card.seg-tD { border-radius: 10px 10px 0 0; border-bottom: 1.4px dashed var(--acc-d); }
.rd-card.seg-tA { border-radius: 0 0 10px 10px; border-top: 1.4px dashed var(--acc-d); }
.rd-day .act.clr { background: #F1EDFF; border-color: #D9CEFF; color: #7A5AF8; }
.rd-day { height: 900px; }
.rd-card.buf .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-card.buf.tiny .sub { white-space: normal; }

/* CardThumbnailView (PlanScreen.swift:4514-4550): the picture takes the
   icon's place; the kind glyph survives as a badge in its corner. */
.rd-th { position: relative; flex: none; width: 40px; height: 40px; }
.rd-th .im { position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #fff center / cover no-repeat; }
.rd-th .im::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); }
.rd-th .pg { width: 100%; height: 100%; }
.rd-th .bd { position: absolute; right: -5.6px; bottom: -5.6px; width: 18.4px; height: 18.4px; border-radius: 50%; background: #fff; box-shadow: 0 .5px 3px rgba(0,0,0,.12); display: grid; place-items: center; color: var(--acc); }
.rd-th.s32 { width: 32px; height: 32px; }
.rd-th.s32 .im { border-radius: 8px; }
.rd-th.s32 .bd { right: -4.48px; bottom: -4.48px; width: 14.72px; height: 14.72px; }
.rd-card.th40 .top { height: 40px; }
.rd-card.th40 .ttl { margin-top: 13px; }
.rd-card.th32 .top { height: 32px; }
.rd-card.th32 .ttl { margin-top: 10px; }

/* The "+" menu: dim over everything, a dark floating panel above the +
   (AddFlow.swift:4702-5040, PlanScreen.swift:549-568). */
.rd-fab { z-index: 3; transition: transform .28s cubic-bezier(.3,1.4,.5,1); }
.rd-fab.press { transform: scale(.9); }
.rd-dim { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,.42); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.rd-add { position: absolute; z-index: 5; left: 18px; top: 274px; width: 366px; height: 464px; padding: 16px 0; border-radius: 30px; background: rgba(23,24,28,.88); box-shadow: 0 14px 48px rgba(0,0,0,.24); color: #fff; opacity: 0; transform: scale(.96); transform-origin: 50% 100%; pointer-events: none; transition: opacity .22s ease, transform .34s cubic-bezier(.3,1.25,.5,1); }
.rd-app.menu-open .rd-dim { opacity: 1; }
.rd-app.menu-open .rd-add { opacity: 1; transform: none; }
.rd-add .row { position: relative; height: 72px; padding: 10px 14px 10px 20px; display: flex; align-items: center; gap: 12px; transition: opacity .2s ease; }
.rd-add .row::before { content: ""; position: absolute; inset: 0 8px; border-radius: 18px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); opacity: 0; transition: opacity .2s ease; }
.rd-add .tx { flex: 1; min-width: 0; position: relative; }
.rd-add .tx b { display: block; font-size: 16px; font-weight: 600; line-height: 19px; white-space: nowrap; }
.rd-add .tx span { display: block; margin-top: 3px; font-size: 13px; line-height: 16px; color: rgba(255,255,255,.66); white-space: nowrap; }
.rd-add .rb { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.rd-add.pick .row { opacity: .3; }
.rd-add.pick .row.lit { opacity: 1; }
.rd-add .row.lit::before { opacity: 1; }

/* Card preview sheet at the medium detent (CardDetailViews.swift:56-560). */
.rd-shdim { position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,.19); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.rd-sheet { position: absolute; z-index: 7; left: 8px; right: 8px; top: 415px; bottom: 8px; border-radius: 40px 40px 48px 48px; background: #fff; overflow: hidden; transform: translateY(470px); transition: transform .5s cubic-bezier(.2,.9,.25,1); }
.rd-app.sheet-open .rd-shdim { opacity: 1; }
.rd-app.sheet-open .rd-sheet { transform: none; }
.rd-sheet .grab { position: absolute; left: 175px; top: 4.7px; width: 36px; height: 5px; border-radius: 3px; background: #C5C5C8; }
.rd-sheet .sc { padding: 22px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.rd-sheet .tk { border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #E3F7F4, #CFF0EB); box-shadow: inset 0 0 0 1px rgba(14,158,153,.26); }
.rd-sheet .hd { height: 72px; padding: 14px; display: flex; align-items: center; gap: 12px; }
.rd-sheet .tile { width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,.75); display: grid; place-items: center; color: #0E9E99; flex: none; }
.rd-sheet .nm { flex: 1; min-width: 0; }
.rd-sheet .nm b { display: block; font-size: 16px; font-weight: 600; line-height: 19px; color: #11142D; white-space: nowrap; }
.rd-sheet .nm span { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; line-height: 16px; color: #2E4A48; white-space: nowrap; }
.rd-sheet .chev { color: rgba(14,158,153,.7); margin-left: 6px; }
.rd-sheet .bn { height: 98.5px; margin-top: -2.5px; background: center / cover no-repeat;
  -webkit-mask: radial-gradient(circle 2.5px at 7.5px 2.5px, #000 95%, transparent 100%) 0 0 / 15px 5px repeat-x, linear-gradient(#000, #000) 0 2.5px / 100% calc(100% - 2.5px) no-repeat;
  mask: radial-gradient(circle 2.5px at 7.5px 2.5px, #000 95%, transparent 100%) 0 0 / 15px 5px repeat-x, linear-gradient(#000, #000) 0 2.5px / 100% calc(100% - 2.5px) no-repeat; }
.rd-sheet .qa { display: flex; gap: 8px; }
.rd-sheet .qa > div { flex: 1; height: 62px; border-radius: 13px; background: #F8F9FF; box-shadow: inset 0 0 0 1px #E8EAF2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #7A5AF8; }
.rd-sheet .qa span { font-size: 12px; font-weight: 500; color: #38405A; }
.rd-sheet .fl { padding: 4px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #E8EAF2; }
.rd-sheet .fr { height: 36px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #11142D; }
.rd-sheet .fr + .fr { border-top: .5px solid #EDEFF5; }
.rd-sheet .fi { width: 20px; display: grid; place-items: center; color: #8A90A4; }
.rd-sheet .eb { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 20px 36px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 40%, #fff 75%); }
.rd-sheet .btn { height: 54px; border-radius: 18px; background: #7A5AF8; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; font-weight: 600; }
.rd-card.tap { transform: scale(.97); transition: transform .15s ease; }
.rd-island { position: absolute; z-index: 9; left: 138px; top: 11px; width: 126px; height: 37px; border-radius: 19px; background: #000; }

/* "Paste a plan" at the large detent (AddFlow.swift:2036-2290). */
.rd-ppdim { position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,.19); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.rd-pp { position: absolute; z-index: 7; left: 0; right: 0; top: 62px; bottom: 0; border-radius: 38px 38px 0 0; overflow: hidden; background: linear-gradient(135deg, #F8F9FF 0%, #F4F6FF 50%, #FBFAFF 100%); transform: translateY(820px); transition: transform .5s cubic-bezier(.2,.9,.25,1); }
.rd-app.paste-open .rd-ppdim { opacity: 1; }
.rd-app.paste-open .rd-pp { transform: none; }
.rd-pp .grab { position: absolute; left: 183px; top: 5px; width: 36px; height: 5px; border-radius: 3px; background: #C5C5C8; }
.rd-pp .in { padding: 14px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.rd-pp .hd { display: flex; align-items: flex-start; gap: 8px; }
.rd-pp .hd > div { flex: 1; }
.rd-pp .hd b { display: block; font-size: 27px; font-weight: 600; line-height: 32px; color: #11142D; }
.rd-pp .hd p { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: #687089; }
.rd-pp .x { width: 44px; height: 44px; margin-top: -8px; margin-right: -10px; display: grid; place-items: center; color: #38405A; }
.rd-pp .bt { display: flex; gap: 10px; align-items: center; }
.rd-pp .pb { width: 41px; height: 34px; border-radius: 17px; background: #DCD2FF; color: #F6F3FF; display: grid; place-items: center; transition: transform .2s cubic-bezier(.3,1.4,.5,1); }
.rd-pp .pb.press { transform: scale(.88); }
.rd-pp .af { height: 36px; padding: 0 14px; border-radius: 18px; background: #F1ECFF; color: #7A5AF8; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.rd-pp .box { position: relative; min-height: 284px; padding: 12px 34px 12px 12px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px #E8EAF2; font-size: 15px; line-height: 18px; color: #11142D; }
.rd-pp .ph, .rd-pp .tx { padding: 8px 5px; }
.rd-pp .ph { position: absolute; left: 12px; top: 12px; color: #B4BAC9; transition: opacity .15s ease; }
.rd-pp .tx > div { opacity: 0; transform: translateY(4px); transition: opacity .25s ease calc(var(--i) * 35ms), transform .25s ease calc(var(--i) * 35ms); }
.rd-pp .clr { position: absolute; right: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; opacity: 0; transition: opacity .2s ease; }
.rd-app.paste-filled .rd-pp .ph { opacity: 0; }
.rd-app.paste-filled .rd-pp .tx > div { opacity: 1; transform: none; }
.rd-app.paste-filled .rd-pp .clr { opacity: 1; }
.rd-pp .hint { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: #687089; }
.rd-pp .rb { position: absolute; left: 22px; right: 22px; bottom: 50px; height: 70px; border-radius: 20px; background: #7A5AF8; box-shadow: 0 12px 48px rgba(122,90,248,.22); color: #fff; font-size: 20px; font-weight: 600; opacity: 0; transform: translateY(24px); transition: opacity .3s ease, transform .4s cubic-bezier(.3,1.25,.5,1); }
.rd-pp .rb > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 13px; transition: opacity .2s ease; }
.rd-pp .rb .rd { opacity: 0; }
.rd-app.paste-filled .rd-pp .rb { opacity: 1; transform: none; }
.rd-app.paste-reading .rd-pp .rb .go { opacity: 0; }
.rd-app.paste-reading .rd-pp .rb .rd { opacity: 1; }
.rd-app.paste-filled .rd-pp .rb.press { transform: scale(.97); }
.rd-pp .spin { width: 20px; height: 20px; border-radius: 50%; border: 2.4px solid rgba(255,255,255,.35); border-top-color: #fff; animation: rd-spin .8s linear infinite; }
@keyframes rd-spin { to { transform: rotate(360deg); } }

/* Board scroll, the saved-idea toast and a dragged card. */
.rd-sv { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.3,.8,.3,1); }
.rd-app .rd-status { z-index: 2; }
.rd-topfade { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 70px; background: linear-gradient(#F8F9FF 60%, rgba(248,249,255,0)); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.rd-app.scrolled .rd-topfade { opacity: 1; }
.rd-ideas { transition: transform .7s cubic-bezier(.3,.8,.3,1); }
.rd-card.rd-new { display: none; }
.rd-card.rd-new.in { display: block; animation: rd-pop .35s ease; }
@keyframes rd-pop { from { opacity: 0; transform: scale(.94); } }
.rd-toast { position: absolute; z-index: 8; left: 50%; top: 68px; display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 16px; background: #34B967; color: #fff; font-size: 14px; font-weight: 600; line-height: 17px; white-space: nowrap; box-shadow: 0 8px 36px rgba(0,0,0,.16); transform: translate(-50%, -140px); opacity: 0; transition: transform .42s cubic-bezier(.2,.9,.3,1), opacity .3s ease; }
.rd-toast b { font-weight: 700; text-decoration: underline; }
.rd-app.toast-on .rd-toast { transform: translate(-50%, 0); opacity: 1; }
.rd-ghost { position: absolute; z-index: 5; width: 192px; opacity: 0; pointer-events: none; transition: left .9s cubic-bezier(.4,.1,.3,1), top .9s cubic-bezier(.4,.1,.3,1), transform .25s ease, opacity .25s ease; }
.rd-ghost.on { opacity: 1; }
.rd-ghost .rd-card { border-color: transparent; }
.rd-ghost .rd-card .dots { display: none; }
.rd-ghost.lift { transform: scale(1.05); }
.rd-ghost.lift .rd-card { box-shadow: 0 18px 40px rgba(17,20,45,.18); }
.rd-ghost.drop { transform: scale(.92); opacity: 0; }

/* A PDF dropped in and read (site only), and the card it became. */
.rd-pdfback { position: absolute; inset: 0; z-index: 4; background: rgba(248,249,255,.55); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); opacity: 0; pointer-events: none; }
.rd-pdf { position: absolute; z-index: 5; left: 106px; top: 270px; width: 190px; height: 190px; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.rd-pdf img { width: 100%; height: 100%; display: block; }
.rd-pdf .scan { position: absolute; left: -10px; right: -10px; height: 3px; border-radius: 2px; background: #7A5AF8; box-shadow: 0 0 14px 4px rgba(122,90,248,.45); opacity: 0; }
.rd-card.ring { box-shadow: 0 0 0 2.5px #7A5AF8, 0 10px 28px rgba(122,90,248,.28); animation: rd-ring .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes rd-ring { from { transform: scale(1.06); } }

/* A finger on the glass (site only). */
.rd-touch { position: absolute; z-index: 20; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(17,20,45,.2); box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 2px 10px rgba(17,20,45,.18); opacity: 0; transform: scale(1.35); pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.3,1.4,.5,1); }
.rd-touch.on { opacity: 1; transform: scale(1); }
.rd-touch.on::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); animation: rd-ripple .6s ease-out forwards; }
.rd-touch.glide { transition: opacity .18s ease, transform .22s ease, left .9s cubic-bezier(.4,.1,.3,1), top .9s cubic-bezier(.4,.1,.3,1); }
@keyframes rd-ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

/* The day in view on the site's trip section. */
.rd-day { transition: box-shadow .3s ease, border-color .3s ease; }
.rd-day.focus { border-color: #7A5AF8; box-shadow: 0 0 0 1.5px #7A5AF8, 0 12px 30px rgba(122,90,248,.18); }

/* A made-up AI chat (site only; deliberately not any real product's look). */
.rd-chat { position: absolute; inset: 0; z-index: 9; background: #fff; color: #11142D; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.rd-app.chat-on .rd-chat { opacity: 1; }
.rd-chat .ch-top { position: absolute; left: 16px; right: 16px; top: 62px; height: 48px; display: flex; align-items: center; justify-content: space-between; }
.rd-chat .ch-r { width: 44px; height: 44px; border-radius: 22px; background: #F4F5F9; display: grid; place-items: center; color: #11142D; }
.rd-chat .ch-t { text-align: center; }
.rd-chat .ch-t b { display: block; font-size: 17px; font-weight: 600; }
.rd-chat .ch-t span { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 8px; background: #EEF0F6; font-size: 11px; font-weight: 600; color: #687089; letter-spacing: .2px; }
.rd-chat .ch-body { position: absolute; left: 18px; right: 18px; top: 128px; }
.rd-chat .ch-me { margin-left: 64px; padding: 12px 16px; border-radius: 22px 22px 6px 22px; background: #EFEAFF; font-size: 16px; line-height: 22px; }
.rd-chat .ch-ai { margin-top: 20px; font-size: 15.5px; line-height: 22px; }
.rd-chat .ln { margin: 0 0 9px; opacity: 0; transform: translateY(6px); transition: opacity .3s ease calc(var(--i) * 90ms), transform .3s ease calc(var(--i) * 90ms); }
.rd-app.chat-typed .rd-chat .ln { opacity: 1; transform: none; }
.rd-chat .ln.d b { display: inline-block; min-width: 52px; margin-right: 6px; color: #7A5AF8; font-weight: 600; }
.rd-chat .ch-act { display: flex; align-items: center; gap: 16px; margin-top: 12px; color: #687089; }
.rd-chat .ch-act .cp { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; background: #F4F5F9; font-size: 13px; font-weight: 600; color: #38405A; transition: transform .12s ease; }
.rd-chat .ch-act .cp.press { transform: scale(.94); }
.rd-chat .ch-toast { position: absolute; left: 50%; bottom: -54px; padding: 8px 14px; border-radius: 14px; background: #17181C; color: #fff; font-size: 13px; font-weight: 600; transform: translateX(-50%) translateY(8px); opacity: 0; transition: opacity .2s ease, transform .25s ease; }
.rd-app.chat-copied .rd-chat .ch-toast { opacity: 1; transform: translateX(-50%); }
.rd-chat .ch-in { position: absolute; left: 16px; right: 16px; bottom: 34px; height: 52px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px #E5E8F0, 0 6px 20px rgba(17,20,45,.06); display: flex; align-items: center; gap: 12px; padding: 0 8px 0 18px; font-size: 16px; color: #9AA1B5; }
.rd-chat .ch-in span { flex: 1; }
.rd-chat .ch-in i { width: 36px; height: 36px; border-radius: 18px; background: #11142D; display: grid; place-items: center; }

/* The full card (ItemDetailView, fullScreenCover). */
.rd-cover { position: absolute; inset: 0; z-index: 8; background: linear-gradient(135deg, #F8F9FF, #F4F6FF, #FBFAFF); transform: translateY(100%); transition: transform .5s cubic-bezier(.2,.9,.25,1); }
.rd-app.cover-on .rd-cover { transform: none; }
.tk-top { position: absolute; left: 0; right: 0; top: 62px; height: 70px; padding: 18px 22px 8px; display: flex; align-items: center; gap: 4px; background: linear-gradient(rgba(248,249,255,.96) 60%, rgba(248,249,255,0)); }
.tk-top b { flex: 1; font-size: 16px; font-weight: 600; color: #687089; }
.tk-top .pn { width: 40px; height: 40px; border-radius: 20px; background: #F1EDFF; display: grid; place-items: center; }
.tk-top .x { width: 44px; height: 44px; display: grid; place-items: center; }
.tk-view { position: absolute; left: 0; right: 0; top: 132px; bottom: 34px; overflow: hidden; }
.tk-sc { padding: 12px 22px 120px; display: flex; flex-direction: column; gap: 20px; transition: transform .9s cubic-bezier(.35,.1,.25,1); }
.tk-card { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(14,158,153,.26), 0 7px 14px rgba(174,230,225,.22); }
.tk-hero { padding: 18px; background: linear-gradient(135deg, #E3F7F4, #CFF0EB); }
.tk-hero .ir { display: flex; align-items: flex-start; gap: 13px; height: 35px; color: #0E9E99; }
.tk-hero .ir i { flex: 1; }
.tk-hero .clip { width: 22px; height: 22px; border-radius: 11px; background: rgba(14,158,153,.1); box-shadow: inset 0 0 0 1px rgba(14,158,153,.68); display: grid; place-items: center; }
.tk-hero .bk { height: 22px; padding: 0 8px; border-radius: 11px; background: #0E9E99; color: #fff; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
.tk-hero .ey { margin: 16px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .6px; color: #0E9E99; }
.tk-hero h3 { margin: 8px 0 0; font-size: 24px; font-weight: 600; line-height: 29px; color: #11142D; }
.tk-hero .dt { margin: 8px 0 0; font-size: 15px; color: #2E4A48; }
.tk-bn { height: 178px; margin-top: -3px; background: center / cover no-repeat;
  -webkit-mask: radial-gradient(circle 3px at 10px 3px, #000 95%, transparent 100%) 0 0 / 20px 6px repeat-x, linear-gradient(#000, #000) 0 3px / 100% calc(100% - 3px) no-repeat;
  mask: radial-gradient(circle 3px at 10px 3px, #000 95%, transparent 100%) 0 0 / 20px 6px repeat-x, linear-gradient(#000, #000) 0 3px / 100% calc(100% - 3px) no-repeat; }
.tk-body { padding: 0 18px 10px; }
.tk-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: .5px solid #EDEFF5; }
.tk-row.first { border-top: 0; }
.tk-row .fi { width: 22px; padding-top: 2px; display: grid; justify-items: center; color: #8A90A4; }
.tk-row span { display: block; font-size: 12px; font-weight: 500; line-height: 14px; color: #7C8398; }
.tk-row b { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; line-height: 18px; color: #11142D; }
.tk-sec { padding: 16px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #9AA0B4; }
.tk-att .tk-ah { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tk-att .tk-ah b { font-size: 16px; font-weight: 600; color: #687089; }
.tk-att .tk-ah span { height: 22px; padding: 0 8px; border-radius: 11px; background: #F1EDFF; color: #7A5AF8; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.tk-att .ar { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 8px; border-radius: 14px; background: rgba(255,255,255,.78); box-shadow: inset 0 0 0 1px #E5E8F0; }
.tk-att .ar .th { flex: none; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; background: #fff; }
.tk-att .ar .th svg { width: 100%; height: 100%; }
.tk-att .ar div { flex: 1; }
.tk-att .ar b { display: block; font-size: 14px; font-weight: 600; color: #11142D; }
.tk-att .ar div span { display: block; margin-top: 3px; font-size: 12px; color: #687089; }
.tk-att p { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: #687089; }
.tk-edit { position: absolute; left: 22px; right: 22px; top: 764px; height: 54px; border-radius: 18px; background: #7A5AF8; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; font-weight: 600; }
.rd-app .rd-status { z-index: 10; }

/* iPad landscape, 1180 x 820 (the iPhone board in a wider window). */
.rd-app.rd-ipad { width: 1180px; height: 820px; }
.rd-ipad .rd-status { height: 24px; }
.rd-ipad .rd-status .t { left: 22px; width: auto; top: 4px; font-size: 15px; font-weight: 600; text-align: left; }
.rd-ipad .rd-status .r { right: 22px; top: 6px; }
.rd-ipad .rd-sv { top: -38px; bottom: 38px; }
.rd-ipad .rd-fab { left: 1086px; top: 702px; }
.rd-ipad .rd-topfade { display: none; }

/* Chat: the question goes out, the assistant thinks, then answers. */
.rd-chat .ch-me { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .35s cubic-bezier(.3,1.2,.5,1); }
.rd-app.chat-asked .rd-chat .ch-me { opacity: 1; transform: none; }
.rd-chat .ch-think { display: none; align-items: center; gap: 10px; margin-top: 20px; }
.rd-app.chat-thinking .rd-chat .ch-think { display: flex; }
.rd-app.chat-thinking .rd-chat .ch-ai { display: none; }
.rd-chat .ch-think .dots { display: flex; gap: 4px; }
.rd-chat .ch-think .dots i { width: 7px; height: 7px; border-radius: 50%; background: #9AA1B5; animation: ch-dot 1s ease-in-out infinite; }
.rd-chat .ch-think .dots i:nth-child(2) { animation-delay: .15s; }
.rd-chat .ch-think .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ch-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.rd-chat .ch-think .sh { font-size: 15.5px; color: transparent; background: linear-gradient(90deg, #9AA1B5 0%, #D5D8E3 50%, #9AA1B5 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; animation: ch-shine 1.6s linear infinite; }
@keyframes ch-shine { to { background-position: -200% 0; } }
/* "Copied" shows beside the Copy button, clear of the input bar. */
.rd-chat .ch-toast { left: 172px; bottom: 2px; padding: 7px 12px; transform: translateY(4px); }
.rd-app.chat-copied .rd-chat .ch-toast { transform: none; }

/* The ring around Unplanned on the site's ideas scene. */
.rd-zone { position: absolute; left: 8px; right: 8px; top: 170px; border-radius: 22px; border: 2px solid #7A5AF8; box-shadow: 0 0 0 5px rgba(122,90,248,.14), 0 14px 34px rgba(122,90,248,.16); opacity: 0; transform: scale(.98); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.rd-zone.on { opacity: 1; transform: none; }

/* The control about to be tapped (site only): lit and breathing for a beat
   before the finger arrives, so the eye finds it first. */
.rd-app .rd-hot { outline: 2.5px solid #7A5AF8; outline-offset: 4px; animation: rd-hot .9s ease-in-out infinite alternate; }
.rd-chat .ch-act .cp.rd-hot { background: #EFEAFF; color: #7A5AF8; }
.rd-pp .pb.rd-hot { background: #7A5AF8; }
@keyframes rd-hot { from { outline-offset: 3px; outline-color: rgba(122,90,248,1); } to { outline-offset: 8px; outline-color: rgba(122,90,248,.45); } }