/* Unit u03 shared styles: the gradient hero card (it doubles as the preview of the share image), swatches,
   milestone rows, disclosure sections and print sheets. Tokens only, so dark mode in tools.css works. */
.tool .u03-hero {
  --c1: #CB8CFF; --c2: #A73CFF; --c3: #5B1796;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 28px 20px 20px; border-radius: 28px; color: #fff; text-align: center;
  background: linear-gradient(165deg, var(--c1) 0%, var(--c2) 45%, var(--c3) 100%);
  box-shadow: 0 16px 40px -12px rgb(91 23 150 / .45);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: --c1 .4s, --c2 .4s, --c3 .4s;
}
.tool .u03-hero::before { content: ''; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(rgb(255 255 255 / .22), transparent 70%); z-index: -1; pointer-events: none; }
.tool .u03-hero[data-theme="dusk"] { --c1: #FF9DC4; --c2: #C04BD6; --c3: #3B1170; }
.tool .u03-hero[data-theme="night"] { --c1: #3B1C66; --c2: #1F0E33; --c3: #0E0518; }
.tool .u03-hero[data-theme="peach"] { --c1: #FFD1A8; --c2: #FF8FA3; --c3: #B23A7A; }
.tool .u03-hero p { color: #fff; }
.tool .u03-eyebrow { font-size: 15px; line-height: 20px; font-weight: 800; opacity: .9; text-wrap: balance; max-width: 100%; overflow-wrap: anywhere; }
.tool .u03-num { font-size: clamp(56px, 19vw, 96px); line-height: 1; font-weight: 950; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 6px 0 2px; overflow-wrap: anywhere; }
.tool .u03-num.is-long { font-size: clamp(40px, 12vw, 72px); }
.tool .u03-unit { font-size: 20px; line-height: 26px; font-weight: 850; }
.tool .u03-sub { font-size: 16px; line-height: 22px; font-weight: 700; opacity: .9; text-wrap: balance; }
.tool .u03-tick { font-size: 15px; line-height: 20px; font-weight: 800; opacity: .8; font-variant-numeric: tabular-nums; }
.tool .u03-pill { margin-top: 12px; padding: 10px 14px; border-radius: 16px; background: rgb(255 255 255 / .18); font-size: 14px; line-height: 20px; font-weight: 800; text-wrap: balance; }
.tool .u03-hero.is-empty .u03-num { opacity: .5; }
.tool .u03-hero.is-new { animation: u03-in .5s var(--ease-out) both; }
@keyframes u03-in { from { transform: scale(.97); opacity: .6; } }

/* Theme swatches */
.tool .u03-swatches { display: flex; gap: 10px; align-items: center; }
.tool .u03-swatches button { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; position: relative; transition: transform .2s var(--ease-out); }
.tool .u03-swatches button::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.tool .u03-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg, #FBF7FF), 0 0 0 5px rgb(var(--ink)); }
.tool .u03-swatches button:active { transform: scale(.92); }
.tool .u03-sw-violet { background: linear-gradient(135deg, #CB8CFF, #5B1796); }
.tool .u03-sw-dusk { background: linear-gradient(135deg, #FF9DC4, #3B1170); }
.tool .u03-sw-night { background: linear-gradient(135deg, #3B1C66, #0E0518); }
.tool .u03-sw-peach { background: linear-gradient(135deg, #FFD1A8, #B23A7A); }
.tool .u03-bar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; }
.tool .u03-bar .tool-chips button { min-height: 36px; padding: 0 12px; }

/* Icon buttons and quiet links */
.tool .u03-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; border: 0; background: rgb(var(--ink) / .06); color: rgb(var(--ink) / .8); cursor: pointer; transition: transform .15s var(--ease-out), background-color .15s ease; }
.tool .u03-icon-btn:active { transform: scale(.94); }
.tool .u03-icon-btn .tool-icon { width: 20px; height: 20px; }
.tool .u03-link { background: none; border: 0; padding: 8px 0; font: inherit; font-size: 15px; font-weight: 800; color: var(--link); cursor: pointer; text-align: left; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.tool .u03-link .tool-icon { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .tool .u03-icon-btn:hover { background: rgb(var(--ink) / .1); } .tool .u03-link:hover { text-decoration: underline; } }

/* Sections inside a tool */
.tool .u03-section { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; background: var(--surface); }
.tool .u03-section h3 { font-size: 18px; line-height: 24px; font-weight: 900; }
.tool .u03-section .tool-note { margin-top: -6px; }
.tool .u03-ms { list-style: none; display: grid; gap: 0; }
.tool .u03-ms li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 0; border-top: 1px solid rgb(var(--ink) / .07); }
.tool .u03-ms li:first-child { border-top: 0; padding-top: 4px; }
.tool .u03-ms b { font-size: 17px; line-height: 22px; font-weight: 900; color: rgb(var(--ink)); }
.tool .u03-ms .u03-when { font-size: 14px; line-height: 20px; font-weight: 700; color: rgb(var(--ink) / .6); }
.tool .u03-ms .u03-idea { grid-column: 1 / -1; font-size: 14px; line-height: 20px; font-weight: 600; color: rgb(var(--ink) / .72); }
.tool .u03-ms .u03-soon { color: var(--link); }
.tool .u03-ms li.is-past b, .tool .u03-ms li.is-past .u03-when { color: rgb(var(--ink) / .45); }
.tool .u03-ms li.is-next b { color: var(--link); }
.tool .u03-ms li > .u03-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool .u03-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 8px; font-size: 12px; line-height: 18px; font-weight: 850; background: rgb(var(--accent) / .14); color: var(--link); vertical-align: 2px; }
.tool .u03-split { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: rgb(var(--ink) / .08); }
.tool .u03-split span { display: block; height: 100%; background: var(--ramp); transition: width .5s var(--ease-out); }
.tool .u03-rows { display: grid; gap: 8px; }
.tool .u03-rowline { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 8px; align-items: end; }
.tool .u03-rowline .tool-field { min-width: 0; }
.tool .u03-zone { display: block; }
.tool input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #D33F6A; }
.tool .u03-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tool details.u03-more { border-radius: 20px; background: var(--surface); }
.tool details.u03-more > summary { list-style: none; cursor: pointer; padding: 14px 16px; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; line-height: 22px; font-weight: 850; color: rgb(var(--ink)); }
.tool details.u03-more > summary::-webkit-details-marker { display: none; }
.tool details.u03-more > summary::after { content: '+'; font-size: 24px; font-weight: 700; color: var(--link); transition: transform .25s var(--ease-out); }
.tool details.u03-more[open] > summary::after { transform: rotate(45deg); }
.tool details.u03-more > .u03-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.tool .u03-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tool .u03-tiles .tool-stat { background: rgb(var(--accent) / .08); }
.tool .u03-tiles .tool-stat b { font-size: 24px; line-height: 30px; }
@media (max-width: 599px) {
  .tool .u03-rowline { grid-template-columns: 1fr 44px; }
  .tool .u03-rowline .tool-field:nth-child(2) { grid-column: 1; }
  .tool .u03-rowline > .u03-icon-btn { grid-row: 1; grid-column: 2; align-self: end; }
}
@media (prefers-reduced-motion: reduce) { .tool .u03-hero.is-new { animation: none; } .tool .u03-split span { transition: none; } }

/* Print one node (kit.dates.printSheet): everything else hides, the sheet prints in black on white. */
@media print {
  html.u03-printing body * { visibility: hidden !important; }
  html.u03-printing .u03-print-target, html.u03-printing .u03-print-target * { visibility: visible !important; }
  html.u03-printing .u03-print-target { position: absolute; left: 0; top: 0; width: 100%; background: #fff !important; color: #000 !important; box-shadow: none !important; }
  html.u03-printing body { background: #fff !important; }
}

/* One-line chip row that scrolls sideways on narrow phones instead of wrapping to three lines */
.tool .tool-chips.u03-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; scroll-padding: 16px; -webkit-overflow-scrolling: touch; }
.tool .tool-chips.u03-scroll::-webkit-scrollbar { display: none; }
.tool .tool-chips.u03-scroll button { flex: 0 0 auto; }
@media (min-width: 600px) { .tool .tool-chips.u03-scroll { margin: 0; padding: 2px 0; flex-wrap: wrap; } }
.tool .u03-share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool .u03-share .btn { width: 100%; display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding-left: 12px; padding-right: 12px; }
.tool .u03-share .btn .tool-icon { width: 20px; height: 20px; flex: 0 0 20px; }

/* Printable sheets built by a tool (hidden on screen, shown only while printing) */
.u03-print-only { display: none; }
@media print {
  html.u03-printing .u03-print-only.u03-print-target { display: block; font-family: system-ui, sans-serif; padding: 24px; }
  .u03-hearts h2 { font-size: 24px; margin: 0 0 6px; }
  .u03-hearts p { font-size: 13px; margin: 0 0 14px; }
  .u03-hgrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px 4px; }
  .u03-hgrid span { display: flex; flex-direction: column; align-items: center; break-inside: avoid; }
  .u03-hgrid svg { width: 40px; height: 40px; }
  .u03-hgrid small { font-size: 8px; color: #333; }
}

/* Compact unit switch under the hero: all options visible, two lines at most on a phone */
.tool .u03-units { gap: 6px; justify-content: center; }
.tool .u03-units button { min-height: 44px; padding: 0 12px; font-size: 13px; }
/* Share sheet opened by the primary Share button */
.tool .u03-sheet { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.tool .u03-sheet.is-new { animation: u03-sheet-in .3s var(--ease-out) both; }
@keyframes u03-sheet-in { from { transform: translateY(-6px); opacity: 0; } }
.tool .u03-caption { padding: 12px 14px; border-radius: 16px; background: rgb(var(--accent) / .08); font-size: 15px; line-height: 22px; font-weight: 650; color: rgb(var(--ink) / .85); }
.tool .u03-check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: rgb(var(--ink) / .8); cursor: pointer; }
.tool .u03-check input { width: 20px; height: 20px; accent-color: rgb(var(--accent)); }
.tool .u03-banner { padding: 12px 16px; border-radius: 16px; background: rgb(var(--accent) / .12); font-size: 15px; line-height: 22px; font-weight: 700; color: rgb(var(--ink)); }
.tool .u03-banner .u03-link { min-height: 0; padding: 0 0 0 4px; display: inline; }
.tool .u03-also .tool-chips button, .tool .u03-also-chips button { min-height: 36px; padding: 0 12px; font-size: 13px; }
.tool .u03-links { justify-content: flex-start; gap: 0 20px; }
.tool .u03-even { grid-template-columns: 1fr 1fr; }
.tool .u03-even .tool-stat span { overflow-wrap: anywhere; }
.tool .u03-cols { display: flex; flex-direction: column; gap: 16px; }
.tool .u03-col { min-width: 0; }
@media (min-width: 700px) {
  .tool .u03-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (prefers-color-scheme: dark) {
  .tool .u03-swatches button { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
  .tool .u03-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px rgb(var(--ink)); }
  .tool .btn-secondary { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .18); }
}
@media (prefers-reduced-motion: reduce) { .tool .u03-sheet.is-new { animation: none; } }

.tool .u03-even .tool-stat.u03-wide { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; text-align: left; }
.tool .u03-even .tool-stat.u03-wide b { flex: 0 0 auto; }
@media (max-width: 599px) { .tool .u03-sheet .u03-share { grid-template-columns: 1fr; } }

.tool .u03-mini { display: block; height: 6px; margin: 8px auto 0; max-width: 120px; border-radius: 3px; background: rgb(var(--ink) / .1); overflow: hidden; }
.tool .u03-mini > span { display: block; height: 100%; background: var(--ramp); border-radius: 3px; }
.tool .u03-tag.u03-reached { background: rgb(var(--ink) / .08); color: rgb(var(--ink) / .55); }
.tool .u03-even .tool-stat span { text-wrap: balance; }
.tool .u03-firsts { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.tool .u03-firsts::-webkit-scrollbar { display: none; }
.tool .u03-first-card { flex: 0 0 auto; min-width: 128px; padding: 12px 14px; border-radius: 20px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.tool .u03-first-card b { font-size: 24px; line-height: 30px; font-weight: 950; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); }
.tool .u03-first-card span { font-size: 13px; line-height: 18px; font-weight: 750; color: rgb(var(--ink) / .7); }
.tool .u03-first-card small { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--link); }
@media (min-width: 600px) { .tool .u03-firsts { margin: 0; padding: 2px 0; flex-wrap: wrap; } }
.tool .u03-units.u03-scroll { justify-content: flex-start; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
@media (min-width: 600px) { .tool .u03-units.u03-scroll { -webkit-mask-image: none; mask-image: none; justify-content: center; } }
@media (min-width: 700px) { .tool .u03-cols > .u03-col:first-child { position: sticky; top: 96px; } }
.tool .u03-sheet .btn { width: 100%; text-align: center; }

/* Countdown: live hours, minutes, seconds as three equal boxes inside the hero */
.tool .u03-clock { display: flex; gap: 8px; margin: 10px 0 2px; }
.tool .u03-clock[hidden] { display: none; }
.tool .u03-box { min-width: 64px; padding: 8px 6px 6px; border-radius: 14px; background: rgb(255 255 255 / .16); display: flex; flex-direction: column; align-items: center; }
.tool .u03-box b { font-size: 28px; line-height: 32px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tool .u03-box small { font-size: 11px; line-height: 14px; font-weight: 800; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.tool .u03-herobar { width: 100%; max-width: 320px; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.tool .u03-herobar-track { display: block; width: 100%; height: 8px; border-radius: 4px; background: rgb(255 255 255 / .22); overflow: hidden; }
.tool .u03-herobar-track > span { display: block; height: 100%; border-radius: 4px; background: #fff; transition: width .5s var(--ease-out); }
.tool .u03-herobar small { font-size: 13px; line-height: 18px; font-weight: 800; opacity: .9; }
.tool .u03-hint { display: block; font-size: 12px; line-height: 16px; font-weight: 700; color: rgb(var(--ink) / .45); margin-top: 2px; }
.tool .u03-sheet-top { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.tool .u03-preview { width: 96px; }
.tool .u03-preview-img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 18px rgb(91 23 150 / .25); }
.tool .u03-unlock .u03-bar h3 { margin-right: auto; }
.tool .u03-unlock .u03-bar { flex-wrap: nowrap; }
.tool .u03-unlock .u03-bar .btn { flex: 1 1 auto; width: auto; }
.tool .u03-links .u03-link { color: rgb(var(--ink) / .7); }
@media (prefers-reduced-motion: reduce) { .tool .u03-herobar-track > span { transition: none; } }

/* Counter: wrap instead of sideways scroll, firsts as a 2-column grid on phones, equal tiles, folded setup line */
.tool .u03-units.u03-scroll { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; justify-content: center; -webkit-mask-image: none; mask-image: none; }
.tool .u03-firsts { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; margin: 0; padding: 0; }
.tool .u03-first-card { min-width: 0; }
.tool .u03-even .tool-stat { min-height: 96px; display: flex; flex-direction: column; justify-content: center; }
.tool .u03-even .tool-stat b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool .u03-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 0; font-size: 15px; line-height: 22px; font-weight: 800; color: rgb(var(--ink) / .75); }
.tool .u03-summary[hidden] { display: none; }
.tool .u03-tag-first_message, .tool .u03-tag-first_call { background: rgb(64 160 255 / .16); color: #1F6FC0; }
.tool .u03-tag-met, .tool .u03-tag-first_date { background: rgb(255 120 160 / .18); color: #B0306A; }
@media (prefers-color-scheme: dark) { .tool .u03-tag-first_message, .tool .u03-tag-first_call { color: #8CC4FF; } .tool .u03-tag-met, .tool .u03-tag-first_date { color: #FF9CC4; } }
.tool .u03-col > .btn { width: 100%; display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
/* Counter: grid items may shrink; long date tiles span the row; the send button keeps its height in a flex column */
.tool .u03-even > .tool-stat { min-width: 0; }
.tool .u03-even .tool-stat.u03-wide { flex-wrap: wrap; }
.tool .u03-link-btn { min-height: 50px; flex: 0 0 auto; }
/* Countdown round 4: live answer in setup, bigger share preview, add-call tile */
.tool .cd-peek { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; padding: 12px 16px; border-radius: 18px; background: rgb(var(--accent) / .1); font-size: 16px; line-height: 22px; font-weight: 800; color: rgb(var(--ink) / .8); }
.tool .cd-peek[hidden] { display: none; }
.tool .cd-peek-num { font-size: 30px; line-height: 32px; font-weight: 950; color: var(--link); font-variant-numeric: tabular-nums; }
.tool .u03-sheet-top { grid-template-columns: 136px 1fr; }
.tool .u03-preview { width: 136px; }
.tool .cd-addtile { border: 0; font: inherit; cursor: pointer; color: inherit; box-shadow: inset 0 0 0 2px rgb(var(--accent) / .3); background: transparent !important; }
.tool .cd-addtile b { display: grid; place-items: center; color: var(--link); }
.tool .cd-addtile .tool-icon { width: 24px; height: 24px; }
.tool .u03-unlock .u03-link[hidden] { display: none; }
.tool .tool-field[hidden], .tool details.u03-more[hidden] { display: none; }
/* Countdown round 5 prep: preset dates, swatch row, fullscreen hero, nowrap headings */
.tool .cd-preset-date { font-weight: 650; opacity: .6; }
.tool .u03-sheet > .u03-swatches { padding: 2px 0; flex-wrap: wrap; }
.tool .u03-unlock h3 { white-space: nowrap; }
.tool .u03-unlock .tool-streak { text-align: right; }
.tool .u03-link[hidden], .tool .u03-section[hidden] { display: none !important; }
.tool .u03-hero:fullscreen { justify-content: center; border-radius: 0; }
.tool .u03-hero:fullscreen .u03-num { font-size: min(34vw, 40vh); }
.tool .u03-hero:fullscreen .u03-box b { font-size: 8vh; line-height: 1.1; }
.tool .u03-hero:fullscreen .u03-box { min-width: 14vh; }