/* Dr. Dot: DLS Doctor's helper character (companion panel, guided tour, animations).
   Colours follow the site tokens; dark mode follows theme.js (html[data-theme]) via html.dd-dark. */
:root{
  --dd-surface:#ffffff; --dd-ink:#0d1620; --dd-muted:#3f4c5b; --dd-line:#c5cdd8; --dd-sunk:#e9edf2;
  --dd-accent:#2736b0; --dd-accent-ink:#ffffff; --dd-accent-soft:#e3e7fb;
  --dd-ok:#17734a; --dd-warn:#8f5f00; --dd-bad:#b0242e; --dd-ok-soft:#e1f3ea; --dd-warn-soft:#fbf0d9; --dd-bad-soft:#fbe4e5;
  --dd-rim:none; --dd-shadow:0 14px 34px rgba(13,22,32,.18);
  --dd-font:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif; --dd-display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
}
html.dd-dark{
  --dd-surface:#171e27; --dd-ink:#e6ebf1; --dd-muted:#a9b6c5; --dd-line:#3a4859; --dd-sunk:#1e2731;
  --dd-accent:#8796ff; --dd-accent-ink:#0f141b; --dd-accent-soft:#232c55;
  --dd-ok:#3fc489; --dd-warn:#e5b04a; --dd-bad:#f06a72; --dd-ok-soft:#14322a; --dd-warn-soft:#3a2e14; --dd-bad-soft:#3d1c20;
  --dd-rim:drop-shadow(0 0 1.3px rgba(230,235,241,.75)); --dd-shadow:0 14px 34px rgba(0,0,0,.55);
}
.dd-svg{display:block;filter:var(--dd-rim);overflow:visible}
.dd-comp[hidden],.dd-show[hidden],.dd-tour[hidden]{display:none!important}

/* ---------- companion panel (top right, dismissible) ---------- */
.dd-comp{position:fixed;top:84px;right:16px;z-index:40;width:250px;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--dd-surface);color:var(--dd-ink);border:2px solid var(--dd-line);border-radius:20px;padding:14px 14px 10px;
  box-shadow:var(--dd-shadow);font-family:var(--dd-font);font-size:14.5px;line-height:1.45;transition:opacity .25s,transform .25s}
.dd-comp.dd-out{opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none}
.dd-bubble{position:relative;align-self:stretch;background:var(--dd-sunk);border-radius:14px;padding:10px 12px;margin-right:14px;min-height:42px}
.dd-bubble::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;margin-left:-8px;background:var(--dd-sunk);transform:rotate(45deg);border-radius:3px}
.dd-bubble a{color:var(--dd-accent);font-weight:600}
.dd-figwrap{line-height:0;margin-top:4px}
.dd-tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--dd-muted);border:1px solid var(--dd-line);border-radius:999px;padding:4px 10px}
.dd-tag i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--dd-muted);background:var(--dd-sunk);flex:none}
.dd-tourlink{background:none;border:0;padding:4px;color:var(--dd-accent);font:600 12.5px var(--dd-font);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.dd-x{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--dd-surface);color:var(--dd-ink);border:2px solid var(--dd-ink);box-shadow:0 4px 10px rgba(0,0,0,.2);padding:0}
.dd-x:hover,.dd-x:focus-visible{background:var(--dd-ink);color:var(--dd-surface)}
.dd-x:focus-visible,.dd-show:focus-visible,.dd-tourlink:focus-visible,.dd-tbtn:focus-visible{outline:3px solid var(--dd-accent);outline-offset:2px}
.dd-x::after{content:"Hide Dr. Dot";position:absolute;right:0;top:-32px;white-space:nowrap;background:var(--dd-ink);color:var(--dd-surface);
  font:600 12px var(--dd-font);padding:4px 9px;border-radius:8px;opacity:0;transform:translateY(4px);transition:.15s;pointer-events:none}
.dd-x:hover::after,.dd-x:focus-visible::after{opacity:1;transform:none}
.dd-show{position:fixed;top:84px;right:16px;z-index:40;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--dd-surface);color:var(--dd-ink);border:1px solid var(--dd-line);border-radius:999px;padding:4px 14px 4px 5px;
  font:600 14px var(--dd-font);box-shadow:var(--dd-shadow)}
.dd-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:45;max-width:calc(100vw - 32px);
  background:var(--dd-ink);color:var(--dd-surface);font:500 14px var(--dd-font);padding:10px 16px;border-radius:12px;box-shadow:var(--dd-shadow)}
@media (max-width:1399px){
  .dd-comp{width:208px;padding:12px 12px 8px;font-size:13.5px}
}
@media (max-width:1499px){
  .dd-comp{top:84px;bottom:auto;right:12px;width:auto;max-width:calc(100vw - 24px);flex-direction:row;align-items:flex-start;padding:8px 10px;gap:8px}
  .dd-comp .dd-bubble{display:none;margin:0;max-width:200px;order:-1}
  .dd-comp.dd-talk .dd-bubble{display:block}
  .dd-bubble::after{left:auto;right:-6px;bottom:auto;top:18px;margin:0}
  .dd-comp .dd-tag,.dd-comp .dd-tourlink{display:none}
  .dd-show{top:84px;bottom:auto;right:12px}
  .dd-x{top:-12px;right:-10px;width:32px;height:32px}
}

/* ---------- guided tour ---------- */
.dd-tour{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(10,15,25,.45);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);font-family:var(--dd-font);color:var(--dd-ink);overflow:auto}
.dd-tbox{width:min(640px,100%);position:relative;margin-top:96px}
.dd-thead{position:absolute;left:-22px;top:-118px;display:flex;align-items:flex-end;gap:2px;right:0;z-index:2;pointer-events:none}
.dd-thead .dd-figwrap{flex:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.dd-tsay{position:relative;margin-bottom:58px;background:var(--dd-surface);border:2px solid var(--dd-ink);border-radius:16px;padding:12px 16px;
  font-size:15.5px;line-height:1.45;box-shadow:var(--dd-shadow);pointer-events:auto}
.dd-tsay::before{content:"";position:absolute;left:-9px;bottom:16px;width:16px;height:16px;background:var(--dd-surface);
  border-left:2px solid var(--dd-ink);border-bottom:2px solid var(--dd-ink);transform:rotate(45deg)}
.dd-tcard{position:relative;background:var(--dd-surface);border-radius:22px;padding:44px 26px 20px;box-shadow:0 30px 70px rgba(5,10,20,.45);border:1px solid var(--dd-line)}
.dd-tclose{position:absolute;right:14px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--dd-sunk);color:var(--dd-muted);font-size:22px;line-height:1;cursor:pointer}
.dd-tclose:hover{color:var(--dd-ink)}
.dd-ttitle{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.dd-ttitle h2{margin:0;font:700 24px/1.15 var(--dd-display);color:var(--dd-ink)}
.dd-ttitle span{font-size:13px;font-weight:600;color:var(--dd-muted)}
.dd-tfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--dd-line)}
.dd-tdots{display:flex;gap:6px;align-items:center}
.dd-tdots i{width:9px;height:9px;border-radius:5px;background:var(--dd-line)}
.dd-tdots i.on{width:26px;background:var(--dd-accent)} .dd-tdots i.done{background:var(--dd-accent);opacity:.55}
.dd-tskip{margin-left:auto;background:none;border:0;color:var(--dd-muted);font:600 14px var(--dd-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 4px}
.dd-tbtn{border-radius:22px;padding:10px 18px;font:700 15px var(--dd-font);cursor:pointer;border:2px solid var(--dd-line);background:transparent;color:var(--dd-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.dd-tbtn.pri{background:var(--dd-accent);border-color:var(--dd-accent);color:var(--dd-accent-ink)}
.dd-tnote{font-size:14px;color:var(--dd-muted);margin-top:12px;display:flex;gap:8px;align-items:center}
.dd-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dd-mini{border:1px solid var(--dd-line);border-radius:14px;padding:12px;background:var(--dd-sunk)}
.dd-mini b{display:block}.dd-mini small{display:block;color:var(--dd-muted);font-size:13px;margin-top:2px}
.dd-num{width:28px;height:28px;border-radius:50%;background:var(--dd-accent-soft);color:var(--dd-accent);font-weight:800;display:grid;place-items:center;margin-bottom:8px}
.dd-drop{position:relative;border:3px dashed var(--dd-accent);border-radius:18px;background:var(--dd-accent-soft);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;text-align:center}
.dd-drop b{font-size:18px}.dd-drop u{color:var(--dd-accent);font-weight:700}
.dd-fmt{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.dd-fmt span{font-size:12px;font-weight:700;padding:3px 8px;border-radius:8px;background:var(--dd-surface);border:1px solid var(--dd-line)}
.dd-file{position:absolute;right:34px;top:-24px;transform:rotate(8deg);background:var(--dd-surface);border:2px solid var(--dd-ink);border-radius:10px;padding:8px 11px;display:flex;gap:8px;align-items:center;font-weight:700;font-size:13px;box-shadow:var(--dd-shadow);animation:dd-fly 2.6s ease-in-out infinite}
@keyframes dd-fly{0%{transform:translate(0,0) rotate(8deg)}55%,100%{transform:translate(-120px,70px) rotate(0);opacity:1}62%,100%{opacity:0}}
.dd-rows{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.dd-row{display:flex;gap:10px;align-items:center;border:1px solid var(--dd-line);border-radius:12px;padding:8px 12px}
.dd-row small{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dd-muted)}
.dd-row b{font-size:14px}
.dd-lt{width:16px;height:16px;border-radius:50%;flex:none;border:2px solid var(--dd-ink)}
.dd-split{display:flex;gap:14px}
.dd-side{width:160px;display:flex;flex-direction:column;gap:8px;flex:none}
.dd-side .dd-mini{font-size:13px}
.dd-pdf{width:150px;height:190px;flex:none;position:relative;background:#fff;color:#0d1620;border:2px solid var(--dd-ink);border-radius:10px;padding:12px;box-shadow:var(--dd-shadow)}
.dd-pdf i{display:block;height:6px;border-radius:3px;background:#dfe5ee}
.dd-pdf em{position:absolute;right:-12px;bottom:12px;background:#b0242e;color:#fff;font:800 11px var(--dd-font);font-style:normal;padding:3px 7px;border-radius:6px}
.dd-fake{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;background:var(--dd-accent);color:var(--dd-accent-ink);font-weight:700;padding:11px 18px;border-radius:22px}
@media (max-width:640px){
  .dd-tbox{margin-top:84px}.dd-thead{left:-6px;top:-96px}.dd-tsay{font-size:14px;margin-bottom:46px}
  .dd-tcard{padding:38px 16px 16px}.dd-grid3{grid-template-columns:1fr}.dd-split{flex-direction:column}.dd-side{width:auto}
  .dd-pdf{display:none}
}

/* ---------- character animation ---------- */
.dd-fig{animation:dd-bob 1.2s ease-in-out infinite alternate}
@keyframes dd-bob{to{transform:translateY(-4px)}}
.dd-hop{animation:dd-hop .7s ease-in-out 3}
@keyframes dd-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.dd-pencil{animation:dd-pen .45s ease-in-out infinite alternate}
@keyframes dd-pen{from{transform:translate(-10px,2px)}to{transform:translate(10px,-2px)}}
.dd-write{animation:dd-write 2.4s linear infinite}
@keyframes dd-write{from{stroke-dasharray:0 400}to{stroke-dasharray:230 400}}
.dd-press{animation:dd-press .35s ease-in-out infinite alternate}
@keyframes dd-press{to{transform:translateX(3px)}}
.dd-ring{transform-box:fill-box;transform-origin:center;animation:dd-ring 1s ease-out infinite}
@keyframes dd-ring{from{transform:scale(.8);opacity:.4}to{transform:scale(1.5);opacity:0}}
.dd-w1{animation:dd-wave 1s infinite}.dd-w2{animation:dd-wave 1s .3s infinite}
@keyframes dd-wave{0%,100%{opacity:.15}40%{opacity:1}}
.dd-draw{animation:dd-draw 2.2s linear infinite}
@keyframes dd-draw{from{stroke-dasharray:0 400}to{stroke-dasharray:200 400}}
.dd-tap1{animation:dd-tap .18s ease-in-out infinite alternate}.dd-tap2{animation:dd-tap .18s .09s ease-in-out infinite alternate}
@keyframes dd-tap{to{transform:translateY(-5px)}}
.dd-sweep{animation:dd-sweep 1.1s ease-in-out infinite alternate}
@keyframes dd-sweep{to{transform:translate(-100px,4px)}}
.dd-blink{animation:dd-blink .9s ease-in-out infinite}
@keyframes dd-blink{0%,100%{opacity:.05}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){
  .dd-svg *,.dd-file{animation:none!important}.dd-comp{transition:none}
}
@media print{.dd-comp,.dd-show,.dd-tour,.dd-toast{display:none!important}}

/* full guided tour (spotlight) */
.dd-ttour{position:fixed;inset:0;z-index:60;pointer-events:none}
.dd-shield{position:fixed;inset:0;pointer-events:auto;background:transparent}
.dd-spot{position:fixed;display:none;border-radius:14px;box-shadow:0 0 0 9999px rgba(10,15,25,.58),0 0 0 3px var(--dd-accent);pointer-events:none;transition:left .25s,top .25s,width .25s,height .25s}
.dd-ttour:not(:has(.dd-spot[style*="display: block"])) .dd-shield{background:rgba(10,15,25,.58)}
.dd-ttip{position:fixed;left:50%;transform:translateX(-50%);width:min(660px,calc(100vw - 24px));display:flex;gap:12px;align-items:flex-start;background:var(--dd-surface);color:var(--dd-ink);border:1px solid var(--dd-line);border-radius:18px;padding:14px 18px;box-shadow:0 24px 60px rgba(5,10,20,.5);pointer-events:auto;font-family:var(--dd-font);z-index:61}
.dd-ttip.bot{bottom:16px}.dd-ttip.top{top:16px}.dd-ttip.mid{top:50%;transform:translate(-50%,-50%)}
.dd-ttip .dd-tfig{flex:none;line-height:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}.dd-tmain{min-width:0;flex:1}
.dd-ttl{font:700 17px var(--dd-display);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.dd-ttl span{font:500 12px var(--dd-font);color:var(--dd-muted)}
.dd-tsay2{font-size:14.5px;line-height:1.5;margin:4px 0 10px}
.dd-tctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.dd-pg{display:flex;gap:4px;margin-right:auto}.dd-pg i{width:7px;height:7px;border-radius:50%;background:var(--dd-line)}.dd-pg i.on{background:var(--dd-accent)}.dd-pg i.done{background:var(--dd-accent);opacity:.45}
.dd-skip{background:none;border:0;color:var(--dd-muted);text-decoration:underline;font:500 13px var(--dd-font);cursor:pointer;padding:6px}
@media (max-width:640px){.dd-ttip{padding:10px 12px}.dd-tsay2{font-size:13.5px}}

body.dd-touring .dd-comp,body.dd-touring .dd-show{display:none!important}
.dd-shot{margin-top:12px;border:1px solid var(--dd-line);border-radius:12px;overflow:hidden;background:#fff;max-height:300px;overflow-y:auto}
.dd-shot img{display:block;width:100%;height:auto}
@media (max-width:760px){.dd-comp{top:auto;bottom:14px;align-items:flex-end}.dd-show{top:auto;bottom:14px}.dd-bubble::after{top:auto;bottom:18px}}
@media (min-width:761px) and (max-width:1499px){.dd-comp{padding:10px;align-items:center}.dd-comp .dd-figwrap{margin:-7px 0 0}}

/* in-page mode (tool page, when the side margin is too narrow): in line under the header, never over anything */
.dd-comp.dd-inline{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:auto;max-width:none;margin:4px 0 14px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px 16px;padding:10px 54px 10px 16px;transform:none;text-align:left}
.dd-comp.dd-inline .dd-figwrap{order:1;margin:0;flex:none}
.dd-comp.dd-inline .dd-bubble{order:2;display:block!important;flex:1 1 220px;margin:0;align-self:center;max-width:none}
.dd-comp.dd-inline .dd-bubble::after{left:-7px;top:50%;bottom:auto;margin:-8px 0 0;right:auto}
.dd-comp.dd-inline .dd-tag{display:none}
.dd-comp.dd-inline .dd-tourlink{order:3;display:inline-block}
.dd-comp.dd-inline .dd-x{top:8px;right:8px;width:32px;height:32px}
.dd-show.dd-inline{position:static;display:flex;margin:4px 0 12px auto;width:max-content}
@media (max-width:560px){.dd-comp.dd-inline{padding:8px 46px 8px 10px;gap:4px 10px}.dd-comp.dd-inline .dd-bubble{flex-basis:140px;font-size:13.5px}}