/* Roadmap: grouped cells with hairline borders (after paper.design/roadmap), in Intent's own style. */
.rm-group { margin-top: 88px; }
.rm-group header { margin-bottom: 24px; }
.rm-group h2 { font-size: 32px; letter-spacing: -.03em; line-height: 1.1; margin: 0; }

/* White cards on the wash, like the landing page's details section */
.rm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* clip-path, not just overflow: blurred children (backdrop-filter) escape a rounded overflow clip and square the corners */
.rm-grid > * { background: #fff; border-radius: 28px; min-width: 0; overflow: hidden; clip-path: inset(0 round 28px); }
.rm-grid > :last-child:nth-child(odd) { grid-column: span 2; }
.rm-grid.three { grid-template-columns: repeat(3, 1fr); }
.rm-grid.three > :last-child { grid-column: auto; }

.rm-cell { display: flex; flex-direction: column; }
.rm-body { padding: 24px 32px 28px; display: flex; flex-direction: column; flex: 1; }
.rm-cell h3 { font-size: 20px; letter-spacing: -.02em; margin: 0; }
.rm-cell p { margin: 8px 0 0; color: var(--ink-2, #6e6e73); font-size: 16px; line-height: 1.5; }
.rm-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 20px; gap: 12px; }
.rm-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2, #6e6e73); padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .04); }
.rm-status i { width: 7px; height: 7px; border-radius: 50%; background: #aeaeb2; }
.rm-status.next { color: var(--accent, #3899ff); background: rgba(var(--accent-rgb, 56, 153, 255), .1); }
.rm-status.next i { background: var(--accent, #3899ff); }
.rm-status.planned i { background: #a373ff; }
.rm-status.shipped i { background: #34c759; }

.rm-vote { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px 0 11px; border-radius: 999px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink, #1d1d1f); background: #fff; box-shadow: inset 0 0 0 1px var(--line, #e5e5ea); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s, transform .12s ease-out; }
.rm-vote .sf { width: 12px; height: 12px; }
.rm-vote:hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 56, 153, 255), .5); }
.rm-vote:active { transform: scale(.96); }
.rm-vote[aria-pressed="true"] { background: var(--accent, #3899ff); color: #fff; box-shadow: none; }
.rm-vote.pop .sf { animation: rm-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rm-pop { 40% { transform: translateY(-3px) scale(1.25); } }
.rm-vote:focus { outline: none; }
.rm-vote:focus-visible { outline: 2px solid rgba(var(--accent-rgb, 56, 153, 255), .6); outline-offset: 2px; }

/* The pictures */
.rm-art { position: relative; height: 220px; margin: 16px 16px 0; border-radius: 12px; clip-path: inset(0 round 12px); background: linear-gradient(180deg, #f7f7f9, #f0f0f3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; overflow: hidden; font-size: 13px; line-height: 1.3; color: var(--ink, #1d1d1f); letter-spacing: -.01em; }
.rm-art b { font-weight: 600; }
.rm-art .sf { width: 14px; height: 14px; }
.rm-art p { margin: 0 !important; }
.sf.warm { color: #ff732e; }

/* On a desktop: wallpaper, menu bar, and the notch hanging from the top */
.rm-art.on-desk { padding: 0; justify-content: flex-start; background: #1b2235; }
.rm-desk { position: absolute; inset: 0; background: url(wallpaper-small.webp) 50% 30% / cover; display: flex; flex-direction: column; align-items: center; }
.rm-desk::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10, 14, 24, .12), rgba(10, 14, 24, .28)); }
.rm-mb { position: relative; width: 100%; height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: #fff; font-size: 11px; font-weight: 500; background: rgba(40, 60, 100, .2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.rm-mb .l, .rm-mb .r { display: flex; align-items: center; gap: 12px; }
.rm-mb .sf { width: 12px; height: 12px; }
.rm-mb .on { display: inline-flex; padding: 2px 5px; border-radius: 5px; background: rgba(255, 255, 255, .28); }
.rm-isl { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 1; width: 230px; min-height: 26px; padding: 5px 12px; border-radius: 0 0 12px 12px; background: #000; color: #fff; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .6); }
.rm-isl.open { width: 250px; padding: 9px 16px 13px; border-radius: 0 0 24px 24px; }
.rm-isl .row { display: flex; align-items: center; justify-content: space-between; }
.rm-isl .t { font-family: var(--font-rounded, ui-rounded, sans-serif); font-variant-numeric: tabular-nums; font-size: 12px; }
.rm-isl .title { font-size: 14px; font-weight: 600; margin-top: 8px; }
.rm-isl .sub { font-size: 11px; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.rm-isl .bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .16); margin-top: 9px; overflow: hidden; }
.rm-isl .bar i { display: block; height: 100%; background: var(--accent, #3899ff); }
.rm-isl .foot { margin-top: 9px; }
.rm-isl .dim { font-size: 11px; color: rgba(255, 255, 255, .55); }
.rm-isl .end { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .4); font-size: 11px; font-weight: 600; }
.rm-isl .end .sf { width: 10px; height: 10px; }
.rm-cup { color: #ffc738; display: inline-flex; }
.rm-glass, .rm-cc { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: #fff; background: rgba(30, 30, 36, .55); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.rm-glass { padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.rm-glass .sf { width: 11px; height: 11px; }
.rm-cc { bottom: 26px; padding: 12px 18px 12px 12px; border-radius: 12px; text-align: left; }
.rm-cc div { display: grid; }
.rm-cc span:not(.rm-moon) { font-size: 11px; color: rgba(255, 255, 255, .7); }
.rm-moon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: #a373ff; }

/* Cards and native bits on the light panel */
.rm-card { background: #fff; border-radius: 12px; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .06); }
.rm-card.goal { display: flex; align-items: center; gap: 20px; padding: 16px 22px 16px 16px; }
.rm-goal { position: relative; display: grid; place-items: center; }
.rm-goal-t { position: absolute; text-align: center; display: grid; }
.rm-goal-t b { font-size: 16px; font-family: var(--font-rounded, ui-rounded, sans-serif); }
.rm-goal-t span { font-size: 10px; color: var(--ink-2, #6e6e73); }
.rm-goal-side { display: grid; gap: 12px; }
.rm-goal-side .k { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.rm-week { display: flex; gap: 7px; }
.rm-week span { display: grid; justify-items: center; gap: 4px; font-size: 10px; color: var(--ink-3, #86868b); }
.rm-week i { width: 14px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, .07); }
.rm-week .done i { background: var(--accent, #3899ff); }
.rm-week .today i { box-shadow: inset 0 0 0 2px var(--accent, #3899ff); background: none; }
.rm-week .today { color: var(--ink, #1d1d1f); font-weight: 600; }

.rm-menu { width: min(290px, 88%); padding: 5px; border-radius: 10px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .12); }
.rm-menu .hd { font-size: 11px; font-weight: 600; color: var(--ink-3, #86868b); padding: 4px 9px 5px; }
.rm-menu .it { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 6px; }
.rm-menu .it i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rm-menu .it div { display: grid; flex: 1; min-width: 0; }
.rm-menu .it span { font-size: 11px; color: var(--ink-2, #6e6e73); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-menu kbd { font: 11px var(--font, system-ui); color: var(--ink-3, #86868b); }
.rm-menu .it.sel { background: var(--accent, #3899ff); color: #fff; }
.rm-menu .it.sel span, .rm-menu .it.sel kbd { color: rgba(255, 255, 255, .8); }
.rm-menu .it.sel i { box-shadow: 0 0 0 1.5px #fff; }

.rm-sc { width: min(320px, 90%); padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .06); }
.rm-sc .hd { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--ink-2, #6e6e73); }
.rm-sc .hd img { width: 18px; height: 18px; }
.rm-sc p { font-size: 14px !important; line-height: 1.7 !important; color: var(--ink, #1d1d1f) !important; margin-top: 6px !important; }
.rm-sc em { font-style: normal; font-weight: 600; color: var(--accent, #3899ff); background: rgba(var(--accent-rgb, 56, 153, 255), .12); padding: 2px 7px; border-radius: 6px; }
.rm-sc.run { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; color: var(--ink-2, #6e6e73); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .6); }
.rm-sc.run .sf { color: var(--accent, #3899ff); width: 12px; height: 12px; }
.rm-sc code { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink, #1d1d1f); }

.rm-day { position: relative; width: min(320px, 90%); height: 176px; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .06); padding: 0 12px 0 52px; overflow: hidden; }
.rm-day .h { height: 44px; border-top: .5px solid rgba(0, 0, 0, .08); position: relative; }
.rm-day .h:first-child { border-top: 0; }
.rm-day .h span { position: absolute; left: -44px; top: -6px; font-size: 10px; color: var(--ink-3, #86868b); }
.rm-day .h:first-child span { top: 2px; }
/* Like macOS Calendar: a soft tint, a thin rounded bar inset on the left, a darker title, a clock line */
.rm-day .ev { --c: var(--accent, #3899ff); position: absolute; left: 56px; right: 14px; border-radius: 4px; padding: 3px 7px 3px 11px; background: color-mix(in srgb, var(--c) 16%, #fff); display: grid; align-content: start; gap: 1px; overflow: hidden; }
.rm-day .ev::before { content: ""; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--c); }
.rm-day .ev b { font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--c) 72%, #000); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-day .ev span { display: flex; align-items: center; gap: 4px; font-size: 10px; color: color-mix(in srgb, var(--c) 60%, #000); opacity: .8; }
.rm-day .ev span .sf { width: 9px; height: 9px; }
.rm-day .ev.other { --c: #a373ff; }

.rm-card.wrap { width: min(310px, 90%); padding: 14px 16px 12px; }
.rm-card.wrap .top { display: flex; justify-content: space-between; align-items: flex-start; }
.rm-card.wrap .eb { display: block; font-size: 11px; font-weight: 600; color: var(--accent, #3899ff); }
.rm-card.wrap b { font-size: 20px; letter-spacing: -.02em; }
.rm-card.wrap .best { font-size: 11px; color: var(--ink-2, #6e6e73); padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .05); }
.rm-bars { display: flex; align-items: flex-end; gap: 4px; height: 70px; margin-top: 12px; }
.rm-bars i { flex: 1; border-radius: 3px; background: rgba(var(--accent-rgb, 56, 153, 255), .3); }
.rm-bars i.hi { background: var(--accent, #3899ff); }
.rm-months { display: flex; gap: 4px; margin-top: 5px; }
.rm-months span { flex: 1; text-align: center; font-size: 9px; color: var(--ink-3, #86868b); }

.rm-chat { width: min(320px, 90%); display: grid; gap: 8px; }
.rm-chat p { padding: 8px 12px; border-radius: 12px; font-size: 12px !important; line-height: 1.4 !important; color: var(--ink, #1d1d1f) !important; }
.rm-chat .me { justify-self: end; background: var(--accent, #3899ff); color: #fff !important; }
.rm-chat .ans { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); padding-bottom: 10px; max-width: 88%; }
.rm-chat .hrs { display: flex; align-items: flex-end; gap: 3px; height: 30px; padding: 0 12px; }
.rm-chat .hrs i { flex: 1; border-radius: 2px; background: rgba(var(--accent-rgb, 56, 153, 255), .3); }
.rm-chat .hrs i.hi { background: var(--accent, #3899ff); }
.rm-chat .input { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); font-size: 12px; color: var(--ink-3, #86868b); }
.rm-chat .input .sf { color: var(--accent, #3899ff); width: 12px; height: 12px; }

/* Desktop widgets, after Apple's own: solid white, a small label, a big number, a quiet chart */
.rm-widgets { position: relative; display: flex; gap: 14px; margin-top: 46px; }
.rm-wg { border-radius: 20px; background: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); padding: 13px 14px; display: flex; flex-direction: column; }
.rm-wg .lbl { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--accent, #3899ff); }
.rm-wg .lbl .sf { width: 11px; height: 11px; }
.rm-wg .big { font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rm-wg .sub { font-size: 10px; color: var(--ink-2, #6e6e73); }
.rm-wg.sm { width: 132px; height: 132px; }
.rm-wg.sm .prog { height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .07); margin-top: auto; }
.rm-wg.sm .prog i { display: block; height: 100%; border-radius: 3px; background: var(--accent, #3899ff); }
.rm-wg.sm .streak { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; margin-top: 7px; }
.rm-wg.sm .streak .sf { width: 10px; height: 10px; }
.rm-wg.md { width: 246px; height: 132px; }
.rm-wg.md .hd { display: flex; justify-content: space-between; align-items: flex-start; }
.rm-wg.md .big { font-size: 20px; }
.rm-wg.md .chart { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 6px; margin-top: 6px; padding-bottom: 13px; background: repeating-linear-gradient(transparent 0 calc(33.3% - 1px), rgba(0, 0, 0, .07) calc(33.3% - 1px) 33.3%); }
.rm-wg.md .chart i { flex: 1; border-radius: 3px 3px 1px 1px; background: rgba(var(--accent-rgb, 56, 153, 255), .35); position: relative; }
.rm-wg.md .chart i.hi { background: var(--accent, #3899ff); }
.rm-wg.md .chart i::after { content: attr(data-d); position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); font-style: normal; font-size: 8px; color: var(--ink-3, #86868b); }
.rm-card.play { width: min(310px, 90%); display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.rm-card.play .mid { flex: 1; display: grid; min-width: 0; }
.rm-card.play .mid span { font-size: 11px; color: var(--ink-2, #6e6e73); }
.rm-card.play .vol { height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .08); margin-top: 8px; }
.rm-card.play .vol i { display: block; height: 100%; border-radius: 2px; background: var(--ink-3, #86868b); }
.rm-card.play .eq { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.rm-card.play .eq i { width: 3px; height: var(--h); border-radius: 2px; background: var(--accent, #3899ff); animation: rm-eq 1.1s ease-in-out infinite alternate; }
.rm-card.play .eq i:nth-child(2n) { animation-duration: .8s; } .rm-card.play .eq i:nth-child(3n) { animation-duration: 1.4s; }
@keyframes rm-eq { to { height: 25%; } }
.rm-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 0 16px; }
.rm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); font-weight: 600; }
.rm-chip { cursor: pointer; transition: background .2s, color .2s, transform .12s ease-out, box-shadow .2s; }
.rm-chip:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.rm-chip:active { transform: scale(.96); }
.rm-chip[aria-pressed="true"] { background: var(--accent, #3899ff); color: #fff; }
.rm-chip:focus { outline: none; }
.rm-chip:focus-visible { outline: 2px solid rgba(var(--accent-rgb, 56, 153, 255), .6); outline-offset: 2px; }

/* A cell spanning the full width sets its picture beside the words */
@media (min-width: 761px) {
  .rm-grid:not(.three) > .has-art:last-child:nth-child(odd) { flex-direction: row; }
  .rm-grid:not(.three) > .has-art:last-child:nth-child(odd) .rm-art { flex: 0 0 calc(50% - 16px); margin: 16px 0 16px 16px; }
  .rm-grid:not(.three) > .has-art:last-child:nth-child(odd) .rm-body { justify-content: center; padding: 32px 40px; }
  .rm-grid:not(.three) > .has-art:last-child:nth-child(odd) .rm-foot { margin-top: 0; padding-top: 24px; }
}

/* Shipped: compact, no pictures */
.rm-group.shipped .rm-body { padding: 22px 28px; }
.rm-group.shipped h3 { font-size: 17px; }
.rm-group.shipped p { font-size: 15px; }

@media (max-width: 760px) {
  .rm-grid, .rm-grid.three { grid-template-columns: 1fr; }
  .rm-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .rm-body { padding: 24px; }
  .rm-group { margin-top: 72px; }
  .rm-widgets { gap: 10px; }
  .rm-wg.sm { width: 118px; height: 124px; }
  .rm-wg.md { width: 168px; height: 124px; }
  .rm-wg.md .chart { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) { .rm-vote.pop .sf, .rm-card.play .eq i { animation: none; } }