/* Date & time poll demo: Gmail mobile compose → add-on → (optional) live dashboard.
   Markup is built by /scripts/dt-demo.js; everything is namespaced .dtd-. */
.dtd { position: relative; width: 100%; margin: 0 auto; text-align: left; }
.dtd-art { position: absolute; top: 0; left: 50%; transform-origin: top center; font-family: "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif; color: #1f1f1f; font-size: 12px; line-height: 1.35; }
.dtd .feather, .dtd svg { stroke: currentColor; vertical-align: -2px; }

/* Phone */
/* A Gmail compose window: device-agnostic (reads as Gmail on any screen). */
.dtd-phone { position: absolute; top: 24px; width: 284px; height: 540px; background: #fff; border-radius: 16px; box-shadow: 0 40px 80px -40px rgba(15,15,16,.5), 0 0 0 1px rgba(15,15,16,.08); transition: transform .9s cubic-bezier(.65,0,.25,1), width .9s cubic-bezier(.65,0,.25,1); }
.dtd-scr { position: relative; width: 100%; height: 100%; background: #fff; border-radius: 16px; overflow: hidden; }
.dtd-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 76px; height: 20px; background: #16161a; border-radius: 12px; z-index: 9; }
.dtd-sbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 4px; font-size: 11px; font-weight: 700; }
.dtd-sbar span { display: inline-flex; gap: 4px; }
.dtd-sbar svg { width: 12px; height: 12px; stroke-width: 2.5; }
.dtd-gm { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-bottom: 1px solid #eef0f4; background: #f6f8fc; white-space: nowrap; overflow: hidden; }
.dtd-gm .mk { display: grid; place-items: center; color: #ea4335; }
.dtd-gm .mk svg { width: 20px; height: 20px; stroke-width: 2.2; }
.dtd-gm .wm { font-size: 17px; color: #5f6368; letter-spacing: -.01em; margin-right: 10px; }
.dtd-gm .srch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 30px; border-radius: 999px; background: #e9eef6; color: #5f6368; padding: 0 12px; font-size: 12px; overflow: hidden; transition: opacity .5s; }
.dtd-gm .srch svg { width: 13px; height: 13px; flex: none; }
.dtd.dashed .dtd-gm .srch { opacity: 0; }
.dtd-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f2f6fc; }
.dtd-bar svg { width: 13px; height: 13px; color: #444; }
.dtd-bar .t { flex: 1; font-weight: 600; font-size: 13px; }
.dtd-tb { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid #f0f0f3; background: #fff; color: #5f6368; }
.dtd-tb svg { width: 15px; height: 15px; }
.dtd-add { position: relative; margin-left: auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #e8f5ed; box-shadow: 0 0 0 0 rgba(47,122,82,.4); animation: dtd-halo 2s infinite; }
@keyframes dtd-halo { 0% { box-shadow: 0 0 0 0 rgba(47,122,82,.45); } 100% { box-shadow: 0 0 0 8px rgba(47,122,82,0); } }
.dtd-add img { width: 19px; height: 19px; }
.dtd-send { position: relative; overflow: hidden; background: #0b57d0; color: #fff; font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 7px 16px; }
.dtd-row { display: flex; gap: 8px; padding: 9px 14px; border-bottom: 1px solid #f0f0f3; min-height: 34px; align-items: center; }
.dtd-row b { color: #8a8a93; font-weight: 500; width: 46px; flex: none; }
.dtd-body { padding: 12px 14px 6px; color: #444; min-height: 30px; }

.dtd-card { max-width: 300px; margin: 4px 12px; background: #fff; border: 1px solid #e8e8ee; border-radius: 12px; padding: 12px; box-shadow: 0 8px 20px -16px rgba(15,15,16,.35); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .45s, transform .55s cubic-bezier(.2,.8,.2,1); }
.dtd-p.inserted .dtd-card { opacity: 1; transform: none; }
.dtd-card .q { font-weight: 800; font-size: 13px; margin-bottom: 8px; letter-spacing: -.01em; }
.dtd-card .o { display: flex; align-items: center; gap: 7px; border: 1px solid #cfe9d9; background: #f3faf6; color: #1f6b45; border-radius: 9px; padding: 8px 10px; margin-top: 6px; font-weight: 700; }
.dtd-card .o svg { width: 13px; height: 13px; }
.dtd-card .foot { margin-top: 8px; font-size: 10.5px; color: #8a8a93; display: flex; align-items: center; gap: 5px; }
.dtd-card .foot svg { width: 11px; height: 11px; }

/* Add-on sheet */
.dtd-scrim { position: absolute; inset: 0; border-radius: 16px; background: rgba(15,15,16,.25); opacity: 0; transition: opacity .4s; z-index: 2; pointer-events: none; }
.dtd-p.sheet .dtd-scrim { opacity: 1; }
.dtd-sheet { position: absolute; left: auto; width: 284px; right: 0; bottom: 0; height: 382px; background: #fff; border-radius: 16px 16px 0 0; padding-top: 14px !important; box-shadow: 0 -20px 40px -20px rgba(15,15,16,.35); padding: 8px 16px 16px; transform: translateY(105%); transition: transform .5s cubic-bezier(.2,.8,.2,1); z-index: 3; }
.dtd-p.sheet .dtd-sheet { transform: none; }
.dtd-grab { width: 36px; height: 4px; border-radius: 4px; background: #ddd; margin: 0 auto 12px; }
.dtd-sh { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; margin-bottom: 10px; }
.dtd-sh img { width: 20px; height: 20px; }
.dtd-sh .ty { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: #1f6b45; background: #d8efe1; padding: 3px 8px; border-radius: 999px; }
.dtd-sh .ty svg { width: 11px; height: 11px; }
.dtd-fl { font-size: 10.5px; font-weight: 700; color: #8a8a93; text-transform: uppercase; letter-spacing: .06em; margin: 8px 0 5px; }
.dtd-inp { position: relative; border: 1.5px solid #e6e6ec; border-radius: 10px; padding: 8px 10px; min-height: 34px; font-weight: 600; font-size: 12.5px; transition: border-color .2s, box-shadow .2s; display: flex; align-items: center; gap: 7px; }
.dtd-inp.focus { border-color: #79b894; box-shadow: 0 0 0 3px rgba(121,184,148,.18); }
.dtd-inp svg { width: 14px; height: 14px; color: #2f7a52; flex: none; }
.dtd-inp + .dtd-inp { margin-top: 6px; }
.dtd-inp.slot { overflow: hidden; max-height: 40px; transition: max-height .35s, opacity .35s, margin .35s, border-color .2s, box-shadow .2s; }
.dtd-inp.slot.hidden { max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; margin-top: 0; }
.dtd-hint { color: #b5b5bd; font-weight: 500; }
.dtd-more { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-weight: 700; font-size: 11.5px; color: #2f7a52; padding: 3px 4px; border-radius: 6px; }
.dtd-more svg { width: 13px; height: 13px; }
.dtd-go { position: relative; margin-top: 12px; height: 40px; border-radius: 12px; background: #2f7a52; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 7px; overflow: hidden; }
.dtd-go svg { width: 15px; height: 15px; }

/* Native-style date & time picker */
.dtd-pick { position: absolute; left: auto; right: 22px; width: 240px; top: 150px; background: #fff; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(15,15,16,.45), 0 0 0 1px rgba(15,15,16,.06); padding: 14px; z-index: 6; opacity: 0; transform: scale(.92) translateY(10px); transition: opacity .25s, transform .3s cubic-bezier(.2,1.2,.4,1); pointer-events: none; }
.dtd-p.pick .dtd-pick { opacity: 1; transform: none; }
.dtd-pick .h { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.dtd-pick .h svg { width: 13px; height: 13px; color: #8a8a93; }
.dtd-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dtd-week b { font-size: 9px; color: #9a9aa3; font-weight: 700; }
.dtd-week > span { position: relative; width: 28px; height: 28px; margin: 0 auto; display: grid; place-items: center; line-height: 1; border-radius: 50%; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.dtd-week > span.on { background: #2f7a52; color: #fff; }
.dtd-time { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 8px 10px; background: #f5f5f8; border-radius: 10px; font-weight: 700; }
.dtd-time .wheel { display: flex; gap: 6px; font-variant-numeric: tabular-nums; }
.dtd-time .wheel span { background: #fff; border-radius: 6px; padding: 3px 7px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.dtd-done { position: relative; margin-top: 10px; text-align: right; font-weight: 800; color: #2f7a52; }
.dtd-done span { position: relative; padding: 4px 8px; border-radius: 6px; }

.dtd-toast { position: absolute; left: 14px; right: auto; width: 256px; bottom: 62px; background: #1f1f23; color: #fff; border-radius: 12px; padding: 10px 12px; display: flex; gap: 8px; align-items: center; font-weight: 600; opacity: 0; transform: translateY(20px); transition: all .4s cubic-bezier(.2,.8,.2,1); z-index: 7; }
.dtd-toast svg { width: 15px; height: 15px; color: #8fe0b0; flex: none; }
.dtd-p.sent .dtd-toast { opacity: 1; transform: none; }

.dtd-typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; background: currentColor; margin-left: 1px; vertical-align: -2px; animation: dtd-blink .8s steps(1) infinite; }
@keyframes dtd-blink { 50% { opacity: 0; } }
.dtd-tap { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(15,15,16,.18); transform: scale(0); opacity: 0; pointer-events: none; z-index: 8; }
.dtd-tapping > .dtd-tap { animation: dtd-tap .55s ease-out; }
@keyframes dtd-tap { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* Live dashboard (hero only) */
.dtd-dash { position: absolute; left: 300px; top: 78px; width: 350px; background: #fff; border-radius: 14px; border: 1px solid #e3e3e8; overflow: hidden; box-shadow: 0 50px 90px -50px rgba(15,15,16,.55); opacity: 0; transform: translateX(40px) scale(.97); transition: opacity .6s, transform .8s cubic-bezier(.2,.8,.2,1); }
.dtd.dashed .dtd-dash { opacity: 1; transform: none; }
.dtd-btop { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: #f3f2f7; border-bottom: 1px solid #e6e5ec; }
.dtd-dots { display: flex; gap: 5px; }
.dtd-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.dtd-dots i:nth-child(2) { background: #febc2e; } .dtd-dots i:nth-child(3) { background: #28c840; }
.dtd-url { flex: 1; display: flex; align-items: center; gap: 6px; height: 22px; background: #fff; border-radius: 999px; padding: 0 10px; color: #5f6368; font-size: 11px; }
.dtd-url svg { width: 10px; height: 10px; }
.dtd-db { padding: 14px 16px 16px; }
.dtd-dh { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dtd-dh .tl { font-weight: 800; font-size: 14px; letter-spacing: -.01em; flex: 1; }
.dtd-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: #2f7a52; font-weight: 800; background: #e8f5ed; padding: 3px 8px; border-radius: 999px; }
.dtd-live i { width: 6px; height: 6px; border-radius: 50%; background: #2fbf71; animation: dtd-pulse 1.6s infinite; }
@keyframes dtd-pulse { 0% { box-shadow: 0 0 0 0 rgba(47,191,113,.6); } 100% { box-shadow: 0 0 0 7px rgba(47,191,113,0); } }
.dtd-meta { display: flex; gap: 6px; align-items: center; color: #8a8a93; font-size: 11px; margin-bottom: 12px; }
.dtd-meta svg { width: 11px; height: 11px; }
.dtd-stat { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.dtd-stat .n { font-size: 32px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; transition: color .3s; }
.dtd-stat .n.bump { animation: dtd-bump .45s ease; }
@keyframes dtd-bump { 40% { transform: scale(1.12); color: #2f7a52; } }
.dtd-stat .n { display: inline-block; }
.dtd-stat small { color: #8a8a93; font-weight: 600; font-size: 11.5px; }
.dtd-res { position: relative; display: flex; justify-content: space-between; align-items: center; border: 1px solid #ececf0; border-radius: 10px; padding: 9px 11px; margin-top: 6px; overflow: hidden; font-weight: 700; transition: border-color .3s; }
.dtd-res .bar { position: absolute; inset: 0 auto 0 0; width: 0; background: #e3f4ea; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.dtd-res > span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; }
.dtd-res svg { width: 12px; height: 12px; color: #2f7a52; }
.dtd-res .c { font-variant-numeric: tabular-nums; color: #5f6368; }
.dtd-res.best { border-color: #79b894; }
.dtd-res .badge { display: none; font-size: 9.5px; font-weight: 800; background: #2f7a52; color: #fff; border-radius: 999px; padding: 2px 7px; letter-spacing: .02em; }
.dtd.final .dtd-res.best .badge { display: inline-block; animation: dtd-pop .35s cubic-bezier(.2,1.4,.4,1); }
.dtd-feed { margin-top: 12px; border-top: 1px solid #f0f0f3; padding-top: 10px; height: 92px; overflow: hidden; }
.dtd-fi { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #4a4a52; margin-bottom: 6px; animation: dtd-slide .4s cubic-bezier(.2,.8,.2,1); }
.dtd-fi .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 10px; flex: none; }
.dtd-fi b { color: #1f1f1f; }
.dtd-fi .tm { margin-left: auto; color: #b0b0b8; font-size: 10.5px; }
@keyframes dtd-slide { from { opacity: 0; transform: translateY(-10px); } }
@keyframes dtd-pop { from { transform: scale(.5); opacity: 0; } }
.dtd-sched { position: relative; margin-top: 4px; height: 38px; border-radius: 11px; background: #0f0f10; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 7px; overflow: hidden; opacity: .25; transition: opacity .4s, background .3s; }
.dtd-sched svg { width: 14px; height: 14px; }
.dtd.final .dtd-sched { opacity: 1; }
.dtd.scheduled .dtd-sched { background: #2f7a52; }

/* Vote alert email (hero only) */
.dtd-alert { position: absolute; left: 318px; top: 6px; width: 318px; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 18px 40px -18px rgba(15,15,16,.45), 0 0 0 1px rgba(15,15,16,.06); opacity: 0; transform: translateY(-10px) scale(.97); transition: opacity .35s, transform .45s cubic-bezier(.2,1.3,.4,1); z-index: 5; }
.dtd-alert.show { opacity: 1; transform: none; }
.dtd-alert.ping .ai { animation: dtd-ring .6s ease; }
.dtd-alert .ai { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #d8efe1; color: #1f6b45; }
.dtd-alert .ai svg { width: 16px; height: 16px; }
.dtd-alert .at { flex: 1; min-width: 0; font-size: 11.5px; color: #4a4a52; line-height: 1.3; }
.dtd-alert .at b { display: block; color: #0f0f10; font-size: 12px; }
.dtd-alert .aw { font-size: 10.5px; color: #9a9aa3; align-self: flex-start; }
@keyframes dtd-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
.dtd.final .dtd-alert { opacity: 0; transform: translateY(-10px); }

@media (prefers-reduced-motion: reduce) {
  .dtd *, .dtd-phone, .dtd-dash { transition: none !important; animation: none !important; }
}