/* DataDouble site styles.
   Most layout is written inline in each page so it matches the design canvas.
   This file holds what inline styles can't: responsive grids, hover and focus
   states, and the states of interactive pieces (demo, calculator, FAQ, forms). */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: #F5F6F3; }
body { margin: 0; background: #F5F6F3; }
[hidden] { display: none !important; }
a { color: #0B6E4F; }
a:hover { color: #084F39; }
button, input, select, textarea { font: inherit; }
input::placeholder, textarea::placeholder { color: #7A857F; }
:focus-visible { outline: 2px solid #0B6E4F; outline-offset: 3px; }
::selection { background: #CDE8DA; color: #0E1512; }
section[id] { scroll-margin-top: 88px; }

.dd-skip { position: absolute; left: -9999px; top: 10px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: #0E1512; color: #F5F6F3; font: 600 15px/1.2 "Schibsted Grotesk", system-ui, sans-serif; text-decoration: none; }
.dd-skip:focus { left: 10px; color: #F5F6F3; }

/* Navigation: full links on desktop, a scrolling row on phones */
.dd-desk { display: flex; }
.dd-mob { display: none; }

/* Grids that step down 4 → 2 → 1 and 3 → 2 → 1 */
.dd-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dd-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dd-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dd-t3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dd-fc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Links and buttons */
.dd-nav { text-decoration: none; }
.dd-nav:hover { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1.5px; }
.dd-ul { text-decoration: none; }
.dd-ul:hover { text-decoration: underline; text-underline-offset: 4px; }
.dd-btn { transition: transform .15s ease, box-shadow .15s ease; }
.dd-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(14, 21, 18, .55); }
.dd-btn:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.dd-lift { transition: transform .15s ease, box-shadow .15s ease; }
.dd-lift:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(14, 21, 18, .35); }

/* Hero: live anonymization demo */
:root { --dd-ease: cubic-bezier(.22, .8, .24, 1); }
.dd-tab { color: #5E6B65; box-shadow: inset 0 -2px 0 transparent; transition: color .25s ease; }
.dd-tab[aria-pressed="true"] { color: #0E1512; box-shadow: inset 0 -2px 0 #0E1512; }
.has-ink .dd-tab[aria-pressed="true"] { box-shadow: none; }
.dd-tab-ink { position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px; background: #0E1512; pointer-events: none; transition: transform .45s var(--dd-ease), width .45s var(--dd-ease); }
.dd-seg { background: transparent; color: #5E6B65; }
.dd-seg[aria-pressed="true"] { background: #FFFFFF; color: #0E1512; box-shadow: 0 1px 2px rgba(14, 21, 18, .16); }
.has-thumb .dd-seg { position: relative; z-index: 1; transition: color .3s ease; }
.has-thumb .dd-seg[aria-pressed="true"] { background: transparent; box-shadow: none; }
.dd-seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 8px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(14, 21, 18, .16), 0 6px 14px -8px rgba(14, 21, 18, .3); pointer-events: none; transition: transform .45s var(--dd-ease), width .45s var(--dd-ease); }
.dd-tab-ink.no-anim, .dd-seg-thumb.no-anim { transition: none; }
.dd-pill { transition: background-color .45s ease, color .45s ease; }
.dd-pill.is-found { background: #FCEFC7; color: #7A5300; }
.dd-pill.is-found .dd-pill-dot { background: #C98A00; }
.dd-pill.is-clean { background: #E1F0E8; color: #0B6E4F; }
.dd-pill.is-clean .dd-pill-dot { background: #0B6E4F; }
.dd-pill-dot { transition: background-color .45s ease; }
[data-demo-pill-text], [data-demo-file] { display: inline-block; }
.dd-stage { display: inline-flex; align-items: center; gap: 7px; color: #6B7771; transition: color .35s ease; }
.dd-stage-dot { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid #A9B4AD; background: transparent; transition: background-color .35s ease, border-color .35s ease; }
.dd-stage.is-done { color: #0E1512; }
.dd-stage.is-done .dd-stage-dot { background: #0B6E4F; border-color: #0B6E4F; }
.dd-stage.is-next { color: #0B6E4F; }
.dd-stage.is-next .dd-stage-dot { background: #FFFFFF; border: 2px solid #0B6E4F; animation: dd-pulse 1.6s ease-in-out infinite; }
@keyframes dd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(11, 110, 79, .3); } 50% { box-shadow: 0 0 0 4px rgba(11, 110, 79, 0); } }

/* Static fallback for the demo's identifiers, used before site.js runs */
.dd-pii { border-radius: 4px; }
.dd-pii.is-raw { background: #FBE3A1; color: #0E1512; padding: 2px 3px; box-shadow: inset 0 -1px 0 #E2BE5C; }
.dd-pii.is-rm, .dd-pii.is-gen { padding: 2px 6px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8em; letter-spacing: 0; }
.dd-pii.is-rm { background: #0E1512; color: #F5F6F3; }
.dd-pii.is-gen { background: #E1F0E8; color: #0B6E4F; box-shadow: inset 0 0 0 1px #B6D9C6; }

/* Live identifiers: each box holds the original (a) and its token (b). The
   width morphs between them while one rolls out and the other rolls in;
   --d staggers the boxes so the change sweeps through the record. */
.dd-tok { position: relative; display: inline-block; box-sizing: border-box; margin: 0 1px; padding: 0 4px; line-height: 1.45; vertical-align: baseline; white-space: nowrap; border-radius: 5px; clip-path: inset(0 round 5px); background: #FBE3A1; color: #0E1512; box-shadow: inset 0 -1px 0 #E2BE5C; transition: width .55s var(--dd-ease), background-color .45s ease, color .45s ease, box-shadow .45s ease; transition-delay: var(--d, 0ms); }
.dd-tok-a, .dd-tok-b { display: inline-block; transition: opacity .38s ease, transform .55s var(--dd-ease), filter .38s ease; transition-delay: var(--d, 0ms); }
.dd-tok-b { position: absolute; top: 0; bottom: 0; left: 4px; display: flex; align-items: center; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8em; letter-spacing: 0; opacity: 0; transform: translateY(60%); filter: blur(2px); }
.dd-tok.is-clean .dd-tok-a { opacity: 0; transform: translateY(-60%); filter: blur(2px); }
.dd-tok.is-clean .dd-tok-b { opacity: 1; transform: none; filter: none; }
.dd-tok.is-clean.is-rm { background: #0E1512; color: #F5F6F3; box-shadow: inset 0 -1px 0 #0E1512; }
.dd-tok.is-clean.is-gen { background: #E1F0E8; color: #0B6E4F; box-shadow: inset 0 0 0 1px #B6D9C6; }
.dd-tok.no-anim, .dd-tok.no-anim > span { transition: none; }

/* Calculator */
input[type="range"] { accent-color: #0B6E4F; }
.dd-switch[aria-checked="true"] { border-color: #0B6E4F !important; background: #F1F8F4 !important; }
.dd-switch-track { background: #B9C3BC; }
.dd-switch[aria-checked="true"] .dd-switch-track { background: #0B6E4F; }
.dd-switch-knob { left: 3px; }
.dd-switch[aria-checked="true"] .dd-switch-knob { left: 21px; }

/* FAQ */
details.dd-faq > summary { list-style: none; }
details.dd-faq > summary::-webkit-details-marker { display: none; }
details.dd-faq[open] .dd-faq-icon { transform: rotate(45deg); }

/* Forms */
.dd-chip { background: #FFFFFF; color: #1E2824; }
.dd-chip[aria-pressed="true"] { background: #0E1512; color: #F5F6F3; border-color: #0E1512 !important; }
.is-invalid { border-color: #B42318 !important; box-shadow: 0 0 0 1px #B42318 !important; }

@media (max-width: 1020px) {
  .dd-g4, .dd-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-fc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .dd-desk { display: none; }
  .dd-mob { display: flex; }
  .dd-t3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .dd-g4, .dd-g3, .dd-g2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}