/* YDO Connect demo: the site (a06-site, round two b3-site). The fictional business's website inside the browser
   chassis (#dc-site) and the YDO Connect launcher over it (#dc-launcher): bubble, pill, notification card, unread badge.
   A believable trades site with NO photographs: layout, type, the business's drawn mark and simple shapes. The
   business's grounds are light (white page, the sun-tint hero band, a pale footer), so the tenant-navy widget, pill
   and bubble are the darkest objects in the browser at every width.
   Colours from tokens.css only (the business: --tenant navy, --sun and its tints; the product's own standard pill blue
   and badge red: --std-pill / --std-badge). The page responds to its CONTAINER (.dc-viewport, container dc-viewport):
   @container rules, and the same rules on .dc-s-narrow / .dc-s-compact / .dc-s-tiny (set by site.js from the root's
   width) where @container is not supported. Hover lives inside (hover:hover); nothing changes size on hover or focus. */

/* =============================== the page =============================== */
/* a wide page keeps a right-hand lane the launcher card's footprint wide (300 of content + its 16/32 padding) on the
   page's 20px edge: the hero's sun stands in it, and the page's words never run under the launcher's card. The site is
   its own stacking context: its sticky header stays above the page's content but never above the launcher or the
   widget, as a real embed sits over a host page (c6 f3). */
.dc-s { --s-gut: 32px; --s-edge: var(--bubble-right, 20px); --s-main: 600px; --s-gap: 40px; --s-lane: calc(var(--card-w, 300px) + 48px); --s-content: calc(var(--s-main) + var(--s-gap) + var(--s-lane));
  isolation: isolate; display: flex; flex-direction: column; min-height: 100%; background: var(--site-canvas); color: var(--navy); font-family: var(--ff); font-size: 15px; line-height: 1.6; }
.dc-s :where(p, h2, h3, ul, table) { margin: 0; }
/* header and footer rows: their left edge is the main column's, their right edge the lane's (the grid below) */
.dc-s-wrap { width: 100%; padding-left: max(var(--s-gut), calc((100% - var(--s-content) - var(--s-gut) - var(--s-edge)) / 2 + var(--s-gut))); padding-right: var(--s-edge); }
.dc-s-g { display: block; flex: none; }
.dc-s-logo { display: block; flex: none; }
.dc-s-logo-sun { fill: var(--sun); }
.dc-s-logo-ink { fill: var(--tenant); }

/* header: the business's mark and name, five links; sticky while the page scrolls; 64 + its rule = 65 tall */
.dc-s-head { position: sticky; top: 0; z-index: 3; background: var(--site-canvas); border-bottom: 1px solid var(--line); }
.dc-s-headin { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.dc-s-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; height: 44px; padding: 0; border: 0; background: transparent; color: var(--navy); font-size: 17px; font-weight: 900; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; }
.dc-s-nav { display: flex; gap: 4px; min-width: 0; }
.dc-s-navlink { position: relative; flex: none; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--body); font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: color var(--t-hover) ease, background-color var(--t-hover) ease; }
/* every link carries its underline; only its colour changes (the current page, and the source an answer just cited) */
.dc-s-navlink::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: transparent; transition: background-color var(--t-state) ease; }
.dc-s-navlink[aria-current="page"] { color: var(--navy); }
.dc-s-navlink[aria-current="page"]::after, .dc-s-navlink.dc-s-src::after { background: var(--sun); }
.dc-s-navlink.dc-s-src { color: var(--navy); }

/* the part of the page that changes (hero, content, footer) fades as one; the header stays */
.dc-s-page { position: relative; display: flex; flex-direction: column; flex: 1; }
/* a page swap is a crossfade: the new page is in place at once and the old one, laid over it where it stood (opaque,
   under the sticky header), fades out, so the page never passes through white (c1-wow 7) */
.dc-s-main.dc-s-leaving { position: absolute; left: 0; right: 0; top: 0; z-index: 2; background: var(--site-canvas); pointer-events: none; transition: opacity var(--t-scene-out) linear; }

/* one grid for the hero and the body: the band runs the full width, the text and the content sit in the main column,
   the lane stays clear on the right */
.dc-s-main { flex: 1; display: grid;
  grid-template-columns: [full-start] minmax(var(--s-gut), 1fr) [main-start] minmax(0, var(--s-main)) [main-end] minmax(var(--s-gap), 1fr) var(--s-lane) var(--s-edge) [full-end];
  grid-template-rows: [hero-start] auto [hero-end body-start] auto [body-end]; }
.dc-s-band { grid-column: full-start / full-end; grid-row: hero-start / hero-end; position: relative; overflow: hidden; background: var(--sun-tint); border-bottom: 1px solid var(--sun-tint-line); }
/* the drawn sunrise (site.js horizon()): the hedge along the band's foot, the sun rising behind it in the lane */
.dc-s-horizon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.dc-s-hz-sun { fill: var(--sun); transform-box: fill-box; transform-origin: 50% 50%; }
.dc-s-hz-back { fill: var(--sun-tint-line); }
.dc-s-hz-front { fill: var(--sun); opacity: .45; }
.dc-s-herotext { grid-column: main-start / main-end; grid-row: hero-start / hero-end; position: relative; z-index: 1; padding: 36px 0 88px; }
.dc-s-kicker { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--sun-ink); font-size: 13px; font-weight: 700; line-height: 20px; }
.dc-s-h1 { max-width: 560px; font-size: 40px; font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); text-wrap: balance; }
.dc-s-lead { max-width: 520px; margin-top: 12px; font-size: 18px; line-height: 1.5; color: var(--body); text-wrap: pretty; }
.dc-s-heroctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; min-height: 44px; margin-top: 24px; }
.dc-s-herocta { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-control); background: var(--sun); color: var(--navy); font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color var(--t-hover) ease; }
.dc-s-herophone { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-size: 16px; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-s-proof { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; padding: 0; list-style: none; }
.dc-s-proof > li { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.dc-s-proof .dc-s-tick { width: 20px; height: 20px; background: var(--sun); color: var(--navy); }
.dc-s-tick { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sun-tint); color: var(--sun-ink); }

/* the page's own content */
.dc-s-body { grid-column: main-start / main-end; grid-row: body-start / body-end; padding: 32px 0 56px; }
.dc-s-col > * + * { margin-top: 12px; }
.dc-s-col > .dc-s-h3 { margin-top: 32px; }
.dc-s-col > .dc-s-h3:first-child { margin-top: 0; }
.dc-s-col > .dc-s-h3 + * { margin-top: 16px; }
.dc-s-p { color: var(--body); }
.dc-s-intro { font-size: 17px; line-height: 1.55; color: var(--navy); }
.dc-s-h3 { font-size: 22px; font-weight: 900; line-height: 1.3; letter-spacing: -0.01em; color: var(--navy); }
.dc-s-list { padding: 0; list-style: none; }
.dc-s-list > li { display: flex; align-items: flex-start; gap: 12px; color: var(--body); }
.dc-s-list > li + li { margin-top: 8px; }
.dc-s-list > li > .dc-s-tick { margin-top: 1px; }
/* four or more ticks: two columns, read down */
.dc-s-list2 { columns: 2; column-gap: 24px; }
.dc-s-list2 > li { break-inside: avoid; margin-bottom: 8px; }
.dc-s-list2 > li + li { margin-top: 0; }
/* Home: the services as cards */
.dc-s-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.dc-s-card { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-small); background: var(--surface); box-shadow: var(--paper-edge); }
.dc-s-cardico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-small); background: var(--sun-tint); color: var(--navy); }
.dc-s-cardt { font-size: 16px; font-weight: 900; line-height: 1.35; color: var(--navy); }
/* Pricing: the rate, the minimum and what is included, as one panel */
.dc-s-panel { padding: 20px 24px; border: 1px solid var(--line); border-left: 4px solid var(--sun); border-radius: var(--r-small); background: var(--surface); }
.dc-s-panel > * + * { margin-top: 12px; }
.dc-s-rate { font-size: 22px; font-weight: 900; line-height: 1.35; letter-spacing: -0.01em; color: var(--navy); }
/* Service areas: the suburbs as chips */
.dc-s-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; padding: 0; list-style: none; }
.dc-s-chip { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--navy); font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-s-chip > .dc-s-g { color: var(--sun-ink); }
/* Contact: the phone and the email as rows */
.dc-s-crow { display: flex; align-items: center; gap: 12px; color: var(--navy); font-size: 16px; font-weight: 700; }
.dc-s-cico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--sun-tint); color: var(--navy); }
.dc-s-table { width: 100%; max-width: 480px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dc-s-table th, .dc-s-table td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dc-s-table th { padding-right: 24px; font-weight: 700; color: var(--navy); }
.dc-s-table td { color: var(--body); }
.dc-s-col > .dc-s-ctarow { margin-top: 28px; }
.dc-s-cta { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: 1px solid var(--navy); border-radius: var(--r-control); background: var(--surface); color: var(--navy); font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color var(--t-hover) ease; }

/* footer: light, as the business's own grounds are; the last row stays clear of the launcher */
.dc-s-foot { background: var(--ground-2); color: var(--navy); border-top: 1px solid var(--line); }
.dc-s-footin { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; grid-template-areas: "id hours pages" "contact hours pages"; gap: 20px 48px; padding-top: 40px; padding-bottom: 32px; font-size: 14px; }
.dc-s-footid { grid-area: id; }
.dc-s-footcontact { grid-area: contact; }
.dc-s-foothrs { grid-area: hours; }
.dc-s-footnav { grid-area: pages; }
.dc-s-footname { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 900; letter-spacing: -0.01em; }
.dc-s-footline { margin-top: 12px; color: var(--body); }
.dc-s-foothd { margin-bottom: 8px; color: var(--navy); font-size: 14px; font-weight: 900; }
.dc-s-footc { display: flex; align-items: center; gap: 8px; color: var(--body); }
.dc-s-footc > span { min-width: 0; overflow-wrap: anywhere; }
.dc-s-footc + .dc-s-footc { margin-top: 4px; }
.dc-s-footc > .dc-s-g { color: var(--meta); }
.dc-s-hours { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dc-s-hours th, .dc-s-hours td { padding: 2px 0; text-align: left; vertical-align: top; }
.dc-s-hours th { padding-right: 16px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.dc-s-hours td { color: var(--body); white-space: nowrap; }
.dc-s-footlinks { padding: 0; list-style: none; }
.dc-s-footlink { height: 28px; padding: 0; border: 0; background: transparent; color: var(--body); font-size: 14px; font-weight: 400; text-align: left; white-space: nowrap; cursor: pointer; transition: color var(--t-hover) ease; }
.dc-s-footbar { padding-top: 16px; padding-bottom: calc(var(--bubble-bottom) + var(--bubble) + 16px); border-top: 1px solid var(--line); color: var(--meta); font-size: 13px; }

@media (hover: hover) {
  .dc-s-navlink:hover { color: var(--navy); background: var(--surface-2); }
  .dc-s-herocta:hover { background: var(--sun-tint-line); }
  .dc-s-cta:hover { background: var(--sun-tint); }
  .dc-s-footlink:hover { color: var(--navy); }
}
@media (pointer: coarse) {
  .dc-s-navlink { height: 44px; }
  .dc-s-footlink { height: 44px; min-width: 44px; }   /* "Home" is 37 px wide (i2) */
  .dc-s-brand { min-width: 44px; }   /* the mark alone (the name hidden below 840) is 32 px wide (i2) */
}

/* the page beside a docked phone or a tablet's pane (600–839): one column, no lane, the sun at the hedge's own size in
   the hedge; the header keeps one 64px row with the mark alone (the name stays for screen readers) */
@container dc-viewport (max-width: 839.98px) {
  .dc-s { --s-gut: 20px; --s-edge: var(--s-gut); }
  .dc-s-main { grid-template-columns: [full-start] var(--s-gut) [main-start] minmax(0, 1fr) [main-end] var(--s-gut) [full-end]; }
  .dc-s-hz-sun { transform: translateY(-10px) scale(.27); }
  .dc-s-body { max-width: 600px; padding-bottom: 40px; }
  .dc-s-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .dc-s-headin { gap: 16px; }
  .dc-s-herotext { padding: 32px 0 84px; }
  .dc-s-h1 { font-size: 34px; }
  .dc-s-footin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "id contact" "hours pages"; gap: 24px 32px; }
}
/* a phone (below 600): the links take their own row and scroll sideways; the name comes back */
@container dc-viewport (max-width: 599.98px) {
  .dc-s-head { position: static; }
  .dc-s-head .dc-s-headin { flex-direction: column; align-items: stretch; gap: 0; height: auto; padding: 0; }
  .dc-s-brand { height: 52px; padding: 0 20px; font-size: 16px; }
  .dc-s-name { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  /* 45 = the 1px rule + the links' 44: the scroller never clips a link's last pixel row (a14 measured 43) */
  .dc-s-nav { height: 45px; padding: 0 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-top: 1px solid var(--line-2); }
  .dc-s-nav::-webkit-scrollbar { display: none; }
  .dc-s-navlink { height: 44px; }
  .dc-s-navlink::after { bottom: 4px; }
  .dc-s-herotext { padding: 28px 0 80px; }
  .dc-s-h1 { font-size: 30px; }
  .dc-s-lead { font-size: 16px; }
  .dc-s-footin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "contact" "hours" "pages"; }
}
/* below 560 the five links do not fit: the row's right edge fades, so a cut link reads as "more this way", and a
   trailing space lets the last one scroll clear of the fade (site.js brings the current one into view: c6 f7) */
@container dc-viewport (max-width: 559.98px) {
  .dc-s-nav { -webkit-mask-image: linear-gradient(to right, var(--navy) calc(100% - 24px), transparent); mask-image: linear-gradient(to right, var(--navy) calc(100% - 24px), transparent); }
  .dc-s-nav::after { content: ''; flex: 0 0 24px; }
}
@container dc-viewport (max-width: 479.98px) {
  .dc-s { --s-gut: 16px; }
  .dc-s-brand { padding: 0 16px; }
  .dc-s-nav { padding: 0 8px; }
  .dc-s-h1 { font-size: 28px; }
  .dc-s-cards { grid-template-columns: minmax(0, 1fr); }
  .dc-s-list2 { columns: 1; }
}
@supports not (container-type: inline-size) {
  .dc-s-narrow { --s-gut: 20px; --s-edge: var(--s-gut); }
  .dc-s-narrow .dc-s-main { grid-template-columns: [full-start] var(--s-gut) [main-start] minmax(0, 1fr) [main-end] var(--s-gut) [full-end]; }
  .dc-s-narrow .dc-s-hz-sun { transform: translateY(-10px) scale(.27); }
  .dc-s-narrow .dc-s-body { max-width: 600px; padding-bottom: 40px; }
  .dc-s-narrow .dc-s-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .dc-s-narrow .dc-s-headin { gap: 16px; }
  .dc-s-narrow .dc-s-herotext { padding: 32px 0 84px; }
  .dc-s-narrow .dc-s-h1 { font-size: 34px; }
  .dc-s-narrow .dc-s-footin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "id contact" "hours pages"; gap: 24px 32px; }
  .dc-s-compact .dc-s-head { position: static; }
  .dc-s-compact .dc-s-head .dc-s-headin { flex-direction: column; align-items: stretch; gap: 0; height: auto; padding: 0; }
  .dc-s-compact .dc-s-brand { height: 52px; padding: 0 20px; font-size: 16px; }
  .dc-s-compact .dc-s-name { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .dc-s-compact .dc-s-nav { height: 45px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line-2); -webkit-mask-image: linear-gradient(to right, var(--navy) calc(100% - 24px), transparent); mask-image: linear-gradient(to right, var(--navy) calc(100% - 24px), transparent); }
  .dc-s-compact .dc-s-nav::after { content: ''; flex: 0 0 24px; }
  .dc-s-compact .dc-s-navlink { height: 44px; }
  .dc-s-compact .dc-s-navlink::after { bottom: 4px; }
  .dc-s-compact .dc-s-herotext { padding: 28px 0 80px; }
  .dc-s-compact .dc-s-h1 { font-size: 30px; }
  .dc-s-compact .dc-s-lead { font-size: 16px; }
  .dc-s-compact .dc-s-footin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "contact" "hours" "pages"; }
  .dc-s-tiny { --s-gut: 16px; }
  .dc-s-tiny .dc-s-brand { padding: 0 16px; }
  .dc-s-tiny .dc-s-nav { padding: 0 8px; }
  .dc-s-tiny .dc-s-h1 { font-size: 28px; }
  .dc-s-tiny .dc-s-cards { grid-template-columns: minmax(0, 1fr); }
  .dc-s-tiny .dc-s-list2 { columns: 1; }
}

/* =============================== the launcher ===============================
   public/widget.js: a column (card · pill · bubble) right 20 / bottom 20, centred, so the pill sits centred over the
   bubble. The demo keeps that pill, and keeps the bubble where the embed draws it while the pill shows (--bubble-inset:
   the wrapper's 20 + what the widest pill overhangs the bubble); the card rises right-aligned on the page's 20px edge.
   All of it stands clear of the site's scrollbar (--dc-sb), as a fixed embed does.
   The bubble never moves (the embed's jumps when a wider card rises or the pill leaves: logged as a product defect).
   Only what it draws takes a press (the column's empty sides never swallow a click on the page). The column's own box
   is the whole viewport above the bubble's line, so a card rising or a pill leaving never moves the box itself (a box
   that grows upward counts as a layout shift). */
.dc-l { position: absolute; top: 0; left: 0; right: calc(var(--bubble-right) + var(--dc-sb)); bottom: var(--bubble-bottom); display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; font-family: var(--ff); pointer-events: none; transition: opacity var(--t-scene-out) linear; }
.dc-l > * { flex-shrink: 0; pointer-events: auto; }
/* the visitor has left the site: the launcher fades with the page and takes no press */
.dc-l[data-gone] { opacity: 0; visibility: hidden; transition: opacity var(--t-scene-out) linear, visibility 0s linear var(--t-scene-out); }

/* the pill ("Need Support?", or "Welcome back!" typed letter by letter): the embed's gradient and accent shadow in the
   tenant's colour, centred over the bubble (its right is the bubble's centre, then half its own width back), 10px above
   it, out of the column's flow: its width never moves anything. Its box is the whole word's from the first letter (an
   invisible copy sizes it), so it stays centred while it types */
.dc-l-pill { position: absolute; right: calc(var(--bubble-inset) - var(--bubble-right) + var(--bubble) / 2); bottom: calc(var(--bubble) + var(--tip-gap)); transform: translateX(50%); display: grid; padding: 8px 12px; border-radius: var(--tip-r); background: var(--tenant); background: linear-gradient(135deg, var(--tenant), color-mix(in srgb, var(--tenant) 87%, transparent)); color: var(--on-navy); font-size: var(--tip-fs); font-weight: 700; line-height: 20px; white-space: nowrap; box-shadow: 0 4px 12px rgba(11,29,58,.3); box-shadow: 0 4px 12px color-mix(in srgb, var(--tenant) 30%, transparent); cursor: pointer; user-select: none; -webkit-user-select: none; }
.dc-l-pill[hidden] { display: none; }
.dc-l-pilltext, .dc-l-pillsize { grid-area: 1 / 1; }
.dc-l-pillsize { visibility: hidden; }

/* the bubble: 60 x 60, the tenant's colour, the chat glyph, --bubble-inset from the right; open = the close glyph turned
   a quarter (the embed's own) */
.dc-l-bubble { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: var(--bubble); height: var(--bubble); margin-right: calc(var(--bubble-inset) - var(--bubble-right)); padding: 0; border: 0; border-radius: 50%; background: var(--tenant); color: var(--on-navy); box-shadow: 0 4px 12px rgba(0,0,0,.15); cursor: pointer; transition: transform 300ms ease; }
.dc-l-bubble.dc-l-open { transform: rotate(90deg); }
.dc-l-bubble.dc-pressed { box-shadow: inset 0 0 0 999px rgba(255,255,255,.14), 0 4px 12px rgba(0,0,0,.15); }
.dc-l-icowrap { display: flex; pointer-events: none; }
.dc-l-ico { display: block; }
.dc-l-badge { position: absolute; top: -2px; right: -2px; min-width: var(--badge); height: var(--badge); padding: 0 4px; border-radius: 9px; background: var(--std-badge); color: var(--surface); font-size: 11px; font-weight: 700; line-height: var(--badge); text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); pointer-events: none; }
.dc-l-badge[hidden] { display: none; }

/* the notification card (the page's card): 300 of content (the embed's inline width; its
   padding sits outside it), white, radius 14, × in the corner, bold heading, one line, the question pills in a COLUMN
   (a long question wraps inside the card), "Not now" */
.dc-l-card { position: relative; box-sizing: content-box; width: var(--card-w); max-width: var(--card-w); max-width: calc(100cqw - 88px); margin-bottom: var(--card-gap); padding: 16px 32px 12px 16px; border-radius: var(--card-r); background: var(--surface); color: var(--navy); text-align: left; box-shadow: 0 8px 28px rgba(0,0,0,.16); cursor: default; }
.dc-l-card.dc-rise.dc-in { transition-duration: var(--t-notif); }
.dc-l-x { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-nested); background: transparent; color: var(--meta); font-size: 18px; font-weight: 400; line-height: 1; cursor: pointer; }
.dc-l-h { font-size: 15px; font-weight: 700; line-height: 20px; margin-bottom: 4px; }
.dc-l-line { margin-bottom: 12px; font-size: 13px; line-height: 19px; color: var(--body); }
.dc-l-qs { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dc-l-q { position: relative; max-width: 100%; min-width: 0; padding: 6px 12px; border: 1px solid var(--std-pill); border-radius: 16px; background: var(--surface); color: var(--std-pill); font-size: 12.5px; line-height: 1.3; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.dc-l-q:focus-visible { background: var(--std-pill); color: var(--std-pill-ink); }
.dc-l-q.dc-pressed { --dc-press-ink: transparent; background: var(--std-pill); color: var(--std-pill-ink); }
.dc-l-notnow { position: relative; padding: 6px 8px; border: 0; background: transparent; color: var(--meta); font-size: 12.5px; line-height: 1.3; cursor: pointer; }
@media (hover: hover) {
  .dc-l-q:hover { background: var(--std-pill); color: var(--std-pill-ink); }
}
/* touch: every card control takes a 44px press without growing */
@media (pointer: coarse) {
  .dc-l-q::before, .dc-l-notnow::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; }
  .dc-l-x::before { content: ''; position: absolute; inset: -8px; }
  /* the pills' 44 px targets never overlap their neighbours' (a14 measured 38 with the 8 px gap) */
  .dc-l-qs { gap: 16px; }
}
/* below 900 the open widget is the whole pane and the embed hides its launcher (the widget carries its own close) */
@media (max-width: 899.98px) {
  .dc-l[data-open] { display: none; }
}