/* Durgi on DurgiPedia pages (durgi-page.js). The site's own tokens (site.css) with fallbacks; light and dark follow it.
   The button: docs/design/durgipedia_v2.md §12 (56 px circle, 16 px from the edges, --surface + --e-2, the Durgi mark,
   no accent, a tooltip on desktop, below sheets and dialogs, hidden while one is open). Brand cyan for Durgi's own
   controls; what the tour points at (the highlight) and its «Siguiente» / «Listo» use the app's magenta accent (owner). One highlight at a time, one short pulse, nothing
   moves with reduced motion. Tap targets ≥ 44 px. */
.dgp-root, .dgp-pins { --dgp-c: var(--cyan-ink, #087F8E); --dgp-wash: var(--cyan-wash, #E1F6F9); --dgp-ink: var(--ink, #0D1A1F); --dgp-muted: var(--muted, #4F6066);
  --dgp-surface: var(--surface, #fff); --dgp-line: var(--line, #D6E2E5); --dgp-shadow: var(--shadow, 0 1px 2px rgba(13,26,31,.06), 0 12px 32px rgba(13,26,31,.10));
  font: 16px/1.5 var(--f-body, system-ui, sans-serif); color: var(--dgp-ink); }
@media (prefers-color-scheme: dark) { .dgp-root, .dgp-pins { --dgp-c: var(--cyan-ink, #5DDDEC); --dgp-wash: var(--cyan-wash, #0E2A30); --dgp-ink: var(--ink, #E6F0F2);
  --dgp-muted: var(--muted, #9DB0B5); --dgp-surface: var(--surface, #101D21); --dgp-line: var(--line, #1F3036); } }
.dgp-root button, .dgp-pins button { font: inherit; color: inherit; cursor: pointer; }
.dgp-root [hidden], .dgp-pins[hidden] { display: none !important; }

/* the floating button (§12) */
.dgp-fab { position: fixed; z-index: 20; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border-radius: 50%;
  border: 1px solid var(--dgp-line); background: var(--dgp-surface); color: var(--dgp-c) !important; box-shadow: var(--e-2, var(--dgp-shadow)); }
.dgp-fab:hover { background: var(--dgp-wash); }
/* out of the way while the reader scrolls down (durgi-page.js); 44 px on small phones so it covers less of a line */
.dgp-fab { transition: transform .25s ease, opacity .2s ease; }
.dgp-fab.dgp-away { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
.dgp-fab.dgp-away:focus, .dgp-fab.dgp-away:focus-visible { transform: none; opacity: 1; pointer-events: auto; }   /* the keyboard always finds it */
@media (max-width: 599px) { .dgp-fab { width: 44px; height: 44px; } .dgp-fab svg { width: 20px; height: 20px; } }
@media (prefers-reduced-motion: reduce) { .dgp-fab { transition: none; } }
html.toc-lock .dgp-fab, html:has(dialog[open]) .dgp-fab, html.dw-on .dgp-fab { display: none; }   /* (dw-on: the shared drawer is open; Durgi is in it) */
/* the page embedded in the notes app's split view (?embed=notes, pedia-v2 PR 3): no Durgi there */
html.embed .dgp-root, html.embed .dgp-pins { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  .dgp-fab[data-tip]:hover::after, .dgp-fab[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: var(--dgp-ink); color: var(--dgp-surface); font: 600 .85rem/1.2 var(--f-body, system-ui); pointer-events: none; }
}
.dgp-fab:focus-visible, .dgp-root button:focus-visible, .dgp-root a:focus-visible, .dgp-ask input:focus-visible { outline: 3px solid var(--dgp-c); outline-offset: 2px; }
.dgp-fab svg { flex: none; }

/* the panel: explain, or ask about the page */
.dgp-panel { position: fixed; z-index: 21; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 32px));
  background: var(--dgp-surface); border: 1px solid var(--dgp-line); border-radius: 18px; box-shadow: var(--e-2, var(--dgp-shadow)); padding: 12px 14px 12px; }
.dgp-phead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dgp-phead b { color: var(--dgp-c); font-size: 1.05rem; }
.dgp-x { min-width: 44px; min-height: 44px; border: 0; background: none; border-radius: 12px; color: var(--dgp-muted) !important; font-size: 1.05rem; }
.dgp-x:hover { background: var(--dgp-wash); }
.dgp-go { display: block; width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: var(--dgp-c); color: var(--dgp-surface) !important; font-weight: 700 !important; }
.dgp-go:disabled, .dgp-send:disabled { opacity: .55; cursor: progress; }
.dgp-ask { display: flex; gap: 8px; margin-top: 10px; }
.dgp-ask input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid var(--dgp-line); border-radius: 999px; background: transparent; color: var(--dgp-ink); font: inherit; }
.dgp-send { min-width: 46px; min-height: 46px; border: 1px solid var(--dgp-line); border-radius: 999px; background: none; color: var(--dgp-c) !important; font-weight: 700 !important; }
.dgp-msg { margin: 10px 2px 0; color: var(--dgp-ink); font-size: .95rem; }
.dgp-busy .dgp-msg::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dgp-dots 1.2s steps(4, end) infinite; }
@keyframes dgp-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.dgp-hint { margin: 8px 2px 0; color: var(--dgp-muted); font-size: .8rem; }

/* the highlight: the quoted words in a 14 % wash that follows each line (marks in the text, box-decoration-break);
   a ring only when the keyboard is in use; one short fade */
/* the owner (2026-11-05): what Durgi points at stands out in the app's magenta accent, not the page's own teal */
mark.dgp-mark { background: color-mix(in srgb, var(--accent, #C21A84) 22%, transparent); box-shadow: inset 0 -2px 0 var(--accent, #C21A84); color: inherit; border-radius: 4px; padding: 0 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: dgp-wash .45s ease-out both; }
@keyframes dgp-wash { from { background-color: transparent; } }
@media (prefers-color-scheme: dark) { mark.dgp-mark { background: color-mix(in srgb, var(--accent, #F58AC8) 32%, transparent); } }   /* (the dark accent is light: a stronger wash reads the same) */
html[data-dgp-kbd] mark.dgp-mark { outline: 2px solid var(--accent, #C21A84); outline-offset: 1px; }
/* pinned words: a dotted underline in --cyan-ink and a small pin after them */
mark.dgp-pinmark { background: none; color: inherit; text-decoration: underline dotted var(--cyan-ink, #087F8E) 2px; text-underline-offset: 4px; }
mark.dgp-pinend::after { content: ""; display: inline-block; width: .78em; height: .78em; margin-left: 3px; vertical-align: -.06em; background: var(--cyan-ink, #087F8E);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4.5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4.5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E") center / contain no-repeat; }
mark.dgp-flash { animation: dgp-flash 1.2s ease-out; }
@keyframes dgp-flash { 0%, 40% { background-color: color-mix(in srgb, var(--cyan-ink, #087F8E) 22%, transparent); } }

/* the card: docked at the bottom below 1024 px; at ≥ 1024 in the column over the page's right rail (v2 .p-rail, which
   hides its own content while Durgi runs and gets it back on close), or at the right edge (v1, no rail) */
.dgp-card { position: static; background: var(--dgp-surface); border: 1px solid var(--dgp-line); border-left: 4px solid var(--dgp-c);
  border-radius: 16px; box-shadow: var(--e-2, var(--dgp-shadow)); padding: 12px 14px 8px; animation: dgp-up .25s ease-out both; }
.dgp-card.dgp-dock { position: fixed; z-index: 21; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom)); max-height: 46vh; overflow: auto; }
.dgp-col { position: fixed; z-index: 21; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 12px; align-content: start; max-height: calc(100vh - 92px); overflow: auto; overscroll-behavior: contain; }
.dgp-col > * { justify-self: stretch; min-width: 0; }   /* (the page may set justify-items: its cards would shrink to fit) */
.dgp-col.dgp-side { right: calc(16px + env(safe-area-inset-right)); top: 76px; width: 360px; }
html.dgp-railmode .p-rail > :not(.dgp-pins) { visibility: hidden; }
@keyframes dgp-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dgp-chead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--dgp-c); font-size: .9rem; }
.dgp-n { color: var(--dgp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dgp-text { margin: 6px 0 4px; min-height: 3em; font-size: 1rem; cursor: default; }
/* «Guardar en mis notas»: a quiet text link under the explanation (the card's main action stays «Siguiente») */
.dgp-root .dgp-save { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--dgp-c); font-weight: 700; font-size: .9rem; text-decoration: none; }
.dgp-root .dgp-save:hover { text-decoration: underline; text-underline-offset: 3px; }
.dgp-nav { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
/* docked, the card scrolls when it holds offers: the buttons (and Stop) stay in view at its bottom */
.dgp-dock .dgp-nav { position: sticky; bottom: -8px; margin: 4px -14px -8px; padding: 6px 14px 8px; background: var(--dgp-surface); border-top: 1px solid var(--dgp-line); }
.dgp-prev, .dgp-pin { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--dgp-line); border-radius: 999px; background: none; }
.dgp-root .dgp-pin { color: var(--ink-2, var(--dgp-muted)) !important; }
.dgp-root .dgp-pin[aria-pressed="true"] { color: var(--dgp-c) !important; border-color: var(--dgp-c); background: var(--dgp-wash); }
.dgp-prev:disabled { opacity: .35; cursor: default; }
.dgp-next { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent, #C21A84); color: var(--on-accent, #fff) !important; font-weight: 700 !important; }
.dgp-next:hover { background: var(--accent-hover, #A8156F); }
/* one accent per screen (system.md §3.1): while the tour runs, the page's own accent CTA («Agregar a mis tarjetas»)
   takes its secondary look, and gets it back when the tour ends */
html.dg-tour .btn-accent, html.dg-tour .stage-hero .btn-accent { background: var(--surface, #fff); color: var(--ink, #0D1A1F); border: 1px solid var(--line, #D6E2E5); }
html.dg-tour .btn-accent:hover { background: var(--surface, #fff); }
.dgp-nav .dgp-x { margin-left: auto; }
.dgp-offers { display: grid; gap: 6px; margin: 8px 0 4px; }
.dgp-more { color: var(--dgp-muted); font-size: .85rem; }
.dgp-root .dgp-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--dgp-line); border-radius: 12px; text-decoration: none; color: var(--dgp-ink); }
.dgp-offer:hover { border-color: var(--dgp-c); background: var(--dgp-wash); }
.dgp-offer b { color: var(--dgp-c); } .dgp-offer b::after { content: " →"; }
.dgp-offer small { display: block; color: var(--dgp-muted); font-size: .85rem; line-height: 1.35; }

/* «Fijadas (n)»: in the rail on desktop (under the card while Durgi runs), in the panel on phones */
.dgp-pins { display: grid; gap: 8px; }
.dgp-panel .dgp-pins { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dgp-line); max-height: 40vh; overflow: auto; }
.dgp-pins.dgp-pins-rail { margin-bottom: 16px; }
.dgp-pins-h { color: var(--dgp-muted); font-size: .85rem; font-weight: 700; }
.dgp-pin-it { background: var(--dgp-surface); border: 1px solid var(--dgp-line); border-radius: 12px; padding: 8px 6px 4px 12px; }
.dgp-pin-it p { margin: 2px 6px 2px 0; font-size: .92rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dgp-pin-row { display: flex; align-items: center; justify-content: space-between; }
.dgp-goto { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--dgp-c) !important; font-weight: 700 !important; font-size: .9rem; }
.dgp-goto::after { content: " ↓"; }

@media (prefers-reduced-motion: reduce) { mark.dgp-mark, mark.dgp-flash, .dgp-card { animation: none; } .dgp-busy .dgp-msg::after { animation: none; content: "…"; } }
@media print { .dgp-root, .dgp-pins { display: none; } mark.dgp-mark, mark.dgp-pinmark { background: none; text-decoration: none; } mark.dgp-pinend::after { display: none; } }

/* inside the shared drawer (drawer.js, system.md §3.21): Durgi's home, its card and «Fijadas» are the drawer's content */
.dgp-dw { display: grid; gap: 14px; padding: 4px 2px 12px; }
.dgp-dw .dgp-home { display: grid; gap: 4px; }
.dgp-dw .dgp-card { position: static; box-shadow: none; border: 0; border-left: 4px solid var(--dgp-c); border-radius: 0 12px 12px 0; padding: 4px 4px 4px 14px; background: none; animation: none; }
.dgp-dw .dgp-text { font-size: 1.02rem; }
.dgp-dw .dgp-pins { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--dgp-line); }