/* ================= DID YOU KNOW — THE BANNER, THE CAROUSEL, THE CLOSE FLOW =================
   Reads every colour/spacing/radius/height from alt-tokens.css, no literal values. Host
   (`.a-dyk-host`) and panel (`.a-dyk-panel`) are TWO elements like `.a-band`/`.a-context`.
   `.a-dyk-host` keeps padding while `hidden` — CSS/base.css's `[hidden]` wins regardless
   (sys_design-system.md, "hidden is a property, and it wins"). */

/* ---------- the host: a wrapper, exactly like .a-band / .a-context ---------- */

/* Same declaration, same tokens, as its two siblings in `.a-page` — `.a-band` (alt-shell.css)
   and `.a-context` (alt-tasks.css) are both `padding:var(--a-3) var(--a-4) 0`; the vertical gap
   between rows is `.a-page`'s own `gap`, not a padding kept in step by hand. */
.alt-app .a-dyk-host{ flex:0 0 auto; padding:var(--a-3) var(--a-4) 0; }
/* The one breakpoint those two siblings narrow at (alt-responsive.css, alt-tasks.css) — matched
   here on the same property so the three stay aligned below 1024px too. */
@media (max-width:820px){
  .alt-app .a-dyk-host{ padding-left:var(--a-3); padding-right:var(--a-3); }
}

/* ---------- the card ---------- */

.alt-app .a-dyk-panel{
  display:flex;
  flex-direction:column;
  gap:var(--a-4);
  width:100%;
  box-sizing:border-box;
  padding:var(--a-4);
  background:var(--a-panel);
  border:1px solid var(--a-blue);
  border-radius:var(--a-r-lg);
}

/* Inside `.a-modal`, the dialog chrome IS the box — `.a-dyk-manual-slot` already gave the
   manual dialog this same split, so `.in-modal` only sheds the card's own border/background
   here to avoid drawing a card inside a card. */
.alt-app .a-dyk-panel.in-modal{
  border:0;
  background:transparent;
  height:100%;
  overflow:auto;
  scrollbar-gutter:stable;
}

/* ---------- head row: eyebrow, position, Previous/Next, then (pushed right) i / close ---------- */

.alt-app .a-dyk-head{
  display:flex;
  align-items:center;
  gap:var(--a-3);
  flex-wrap:wrap;
}

.alt-app .a-dyk-eyebrow{
  font:700 12px/1 var(--a-display);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--a-text);
  flex:0 0 auto;
}

.alt-app .a-dyk-pos{
  font-size:12px;
  color:var(--a-dim);
  flex:0 0 auto;
}

/* Circular, matching the approved render — `.a-btn.icon` already gives the 32px hit target and
   focus ring; this only rounds it and shows the ring before hover, since a lone control on a
   full-width band needs to be findable without hovering. */
.alt-app .a-dyk-navbtn{
  border-radius:var(--a-r-pill);
  background:transparent;
  border-color:var(--a-line-strong);
}
.alt-app .a-dyk-navbtn:hover{
  background:var(--a-raised);
  border-color:var(--a-blue);
}
.alt-app .a-dyk-navbtn > svg{ width:16px; height:16px; }

.alt-app .a-dyk-head-spacer{ flex:1 1 auto; }

.alt-app .a-dyk-info,
.alt-app .a-dyk-close{ flex:0 0 auto; }

/* ---------- body: title, description, benefit cues ---------- */

.alt-app .a-dyk-body{
  display:flex;
  flex-direction:column;
  gap:var(--a-2);
}

.alt-app .a-dyk-title{
  font:700 20px/1.3 var(--a-display);
  color:var(--a-text);
  margin:0;
}

.alt-app .a-dyk-desc{
  font-size:13px;
  line-height:1.55;
  color:var(--a-dim);
  margin:0;
  max-width:70ch;
}

/* The cues row sits below the description in source order (never absolute), so it can only
   wrap, never overlap. Each entry is a check mark plus its own caption — `tip.benefits` ships
   plain sentences, and abbreviating would violate the design spec's "Content truth" section. */
.alt-app .a-dyk-cues{
  display:flex;
  flex-wrap:wrap;
  gap:var(--a-3) var(--a-5);
  margin-top:var(--a-2);
}

.alt-app .a-dyk-cue{
  display:flex;
  align-items:center;
  gap:8px;
  max-width:220px;
}

.alt-app .a-dyk-cue-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  flex:0 0 auto;
  border-radius:var(--a-r-pill);
  background:var(--a-blue-soft);
  color:var(--a-blue);
}
.alt-app .a-dyk-cue-ico svg{ width:12px; height:12px; }

.alt-app .a-dyk-cue-cap{
  font-size:12px;
  line-height:1.35;
  color:var(--a-text);
}

/* ---------- foot: CTA(s) + the anchor's primary button, then the progress dots ---------- */

.alt-app .a-dyk-foot{
  display:flex;
  flex-direction:column;
  gap:var(--a-3);
}

.alt-app .a-dyk-foot-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--a-2);
}

.alt-app .a-dyk-ctas{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--a-2);
}

/* The anchor's own primary action, pushed to the far side of the row — `margin-left:auto`
   rather than a second flex container, so it collapses to the next line on its own when the
   row is too narrow for both, instead of the CTA(s) beside it being squeezed. */
.alt-app .a-dyk-mobile-cta{ margin-left:auto; }
.alt-app .a-dyk-mobile-cta-ico{ display:inline-flex; width:15px; height:15px; flex:0 0 auto; }
.alt-app .a-dyk-mobile-cta-ico svg{ width:15px; height:15px; }

.alt-app .a-dyk-dots{
  display:flex;
  align-items:center;
  gap:8px;
}

.alt-app .a-dyk-dot{
  width:6px;
  height:6px;
  border-radius:var(--a-r-pill);
  background:var(--a-line-strong);
  transition:width var(--a-quick) var(--a-ease), height var(--a-quick) var(--a-ease),
             background var(--a-quick) var(--a-ease);
}

/* Never colour alone — the current dot is also larger and carries a ring, so the distinction
   survives for a reader who can't tell accent blue from the line colour. */
.alt-app .a-dyk-dot.cur{
  width:9px;
  height:9px;
  background:var(--a-blue);
  box-shadow:0 0 0 2px var(--a-blue-soft);
}

/* The ellipsis placeholder a condensed dot row draws for what the window left out
   (dykDotPlan(), JS/features/did-you-know.js) — text, never a dot, so it's not miscounted. */
.alt-app .a-dyk-dot-gap{
  font-size:11px;
  line-height:1;
  color:var(--a-faint);
  letter-spacing:1px;
}

/* ---------- responsive: collapse the wide composition before it breaks ---------- */

/* Cues first — each wraps on its own (`.a-dyk-cue`'s max-width plus `.a-dyk-cues`' wrap), so a
   narrow card just gets more rows; only the gap tightens. */
@media (max-width:900px){
  .alt-app .a-dyk-cues{ gap:var(--a-2) var(--a-4); }
}

@media (max-width:640px){
  .alt-app .a-dyk-cue{ max-width:none; }
  .alt-app .a-dyk-cue-cap{ font-size:11px; }
  /* The footer's two halves stack rather than wrap mid-row, so "Open Mobile View" never ends
     up squeezed onto the same line as a Quick Start button at a width neither can share. */
  .alt-app .a-dyk-foot-actions{ flex-direction:column; align-items:stretch; }
  .alt-app .a-dyk-mobile-cta{ margin-left:0; }
}

/* ---------- the manual dialog's own frame ---------- */

/* Sized to what a tip actually needs, not the Suite's 920×760 settings-dialog default — a
   fitted variant on its own class, the same pattern `.a-modal.a-okr-flow` uses. */
.alt-app .a-modal.a-dyk-manual-modal{
  width:min(640px, 92vw);
  height:auto;
  max-height:min(640px, 88vh);
}
.alt-app .a-dyk-manual-slot{ display:flex; flex-direction:column; min-height:0; height:100%; }

/* ---------- "Hide Did You Know?" ---------- */

.alt-app .a-modal.a-dyk-hide-modal{
  width:min(460px, 92vw);
  height:auto;
  max-height:88vh;
  padding:var(--a-5);
  gap:var(--a-4);
  overflow:auto;
}

.alt-app .a-dyk-hide-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--a-3);
}
.alt-app .a-dyk-hide-head h3{ font:700 18px/1.3 var(--a-display); color:var(--a-text); margin:0; }

.alt-app .a-dyk-hide-group{
  display:flex;
  flex-direction:column;
  gap:var(--a-3);
  border:0;
  padding:0;
  margin:0;
}

/* Same card-with-a-radio idiom the storage/retention pane uses (`.sx-choice`,
   alt-storage-retention.css), restated under this feature's own class names — a radio clickable
   anywhere in its row, with the whole row carrying the focus ring, not just the circle. */
.alt-app .a-dyk-choice{
  display:flex;
  align-items:flex-start;
  gap:var(--a-3);
  padding:var(--a-3);
  border:1px solid var(--a-line);
  border-radius:var(--a-r);
  background:var(--a-raised);
  cursor:pointer;
}
.alt-app .a-dyk-choice:hover{ border-color:var(--a-line-strong); }
.alt-app .a-dyk-choice:has(input:checked){ border-color:var(--a-blue); }
.alt-app .a-dyk-choice:focus-within{
  border-color:var(--a-blue);
  outline:2px solid var(--a-ring);
  outline-offset:2px;
}
.alt-app .a-dyk-choice > input[type="radio"]{
  flex:0 0 auto;
  margin:3px 0 0;
  accent-color:var(--a-blue);
}
.alt-app .a-dyk-choice-body{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.alt-app .a-dyk-choice-t{ font-size:14px; font-weight:700; color:var(--a-text); }
.alt-app .a-dyk-choice-d{ font-size:12px; line-height:1.5; color:var(--a-dim); }

.alt-app .a-dyk-hide-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--a-2);
}

/* ---------- "You're all set!" ---------- */

.alt-app .a-modal.a-dyk-confirm-modal{
  width:min(420px, 92vw);
  height:auto;
  max-height:88vh;
  padding:var(--a-6) var(--a-5);
  align-items:center;
  text-align:center;
  gap:var(--a-3);
  overflow:auto;
}

.alt-app .a-dyk-confirm-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:var(--a-r-pill);
  background:var(--a-green-soft);
  color:var(--a-green);
}
.alt-app .a-dyk-confirm-badge svg{ width:28px; height:28px; }

.alt-app .a-dyk-confirm-title{
  font:700 20px/1.3 var(--a-display);
  color:var(--a-text);
  margin:0;
}

.alt-app .a-dyk-confirm-body{
  font-size:13px;
  line-height:1.55;
  color:var(--a-dim);
  margin:0;
  max-width:38ch;
}

.alt-app .a-dyk-confirm-actions{ width:100%; }
.alt-app .a-dyk-confirm-actions .a-btn{ width:100%; }