/* ==========================================================================
   Drag-to-move layer for the index-style hero (loads AFTER styles.css).
   Uses the theme tokens from styles.css, so light/dark just work.
   ========================================================================== */

/* keep the headline above the blueprint bg layers so it receives the drag */
.hero .container, .hero-inner { position: relative; z-index: 3; }

/* the 2nd headline line must not clip the selection frame / handles */
.hh-line.dt-line { overflow: visible; }
/* the drag transform owns this line — kill the headline rise animation/transform.
   (.hh-line>span gives .dt-drag a forwards animation that would beat inline transform) */
.dt-line .hh-codewrap { transform: none !important; animation: none !important; }
.hh-line .dt-drag { animation: none !important; transform: translate(0,0); }

/* ---- draggable element wrapping "before code." ---- */
.dt-drag {
  position: relative;
  z-index: 5;
  display: inline-block;
  transform: translate(0,0);
  touch-action: none;
  pointer-events: auto;
  -webkit-user-select: none; user-select: none;
}
/* the selection padding/offset only exists when the drag is active (touch or mouse) */
html.dt-on .dt-drag {
  padding: 8px 14px;
  margin-left: -14px;          /* pull left so the text aligns with the line above */
}
/* children don't steal the pointer — the whole box is the drag handle */
.dt-drag * { pointer-events: none; }

.dt-tab {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--teal); color: #fff; padding: 3px 10px; border-radius: 4px;
  white-space: nowrap; opacity: 0; transition: opacity .3s ease; z-index: 4;
}
/* the tab is the drag hint on touch (desktop uses the cursor label instead) */
html:not(.dt-has-cursor) .hero.dt-ready .dt-tab {
  opacity: 1;
  animation: dtHintBob 1.8s ease-in-out infinite;
}
.dt-drag.dragging .dt-tab,
html.dt-tmsg-on .dt-tab { opacity: 0 !important; animation: none; }
@keyframes dtHintBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

/* L-shaped corner brackets (selection marks) */
.dt-h { position: absolute; width: 16px; height: 16px; opacity: 0; transition: opacity .3s; }
.hero.dt-ready .dt-h { opacity: 1; }
.dt-h.tl { top: -5px; left: -5px; border-top: 2px solid var(--teal); border-left: 2px solid var(--teal); }
.dt-h.tr { top: -5px; right: -5px; border-top: 2px solid var(--teal); border-right: 2px solid var(--teal); }
.dt-h.bl { bottom: -5px; left: -5px; border-bottom: 2px solid var(--teal); border-left: 2px solid var(--teal); }
.dt-h.br { bottom: -5px; right: -5px; border-bottom: 2px solid var(--teal); border-right: 2px solid var(--teal); }

/* mobile: tighten the box so the brackets don't overflow the screen edge */
@media (max-width: 600px) {
  html.dt-on .dt-drag { padding: 6px 4px; margin-left: -4px; }
  .dt-h { width: 13px; height: 13px; }
  .dt-h.tl { top: -3px; left: -3px; }
  .dt-h.tr { top: -3px; right: -3px; }
  .dt-h.bl { bottom: -3px; left: -3px; }
  .dt-h.br { bottom: -3px; right: -3px; }
}

/* ---- measure line + dx/dy badge ---- */
.dt-measure { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .15s; }
.dt-measure.on { opacity: 1; }
.dt-measure line { stroke: var(--teal); stroke-width: 1.2; stroke-dasharray: 4 4; }
.dt-measure circle { fill: var(--teal); }
.dt-badge {
  position: absolute; z-index: 6; pointer-events: none;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  background: var(--teal); color: #fff; padding: 4px 11px; border-radius: 100px;
  white-space: nowrap; transform: translate(-50%,-50%); opacity: 0; transition: opacity .15s;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.3);
}
.dt-badge.on { opacity: 1; }

/* ---- single Figma cursor (only when a fine pointer is confirmed) ---- */
html.dt-has-cursor, html.dt-has-cursor * { cursor: none !important; }
.dt-cur { display: none; position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none; will-change: transform; opacity: 0; transition: opacity .25s; }
html.dt-has-cursor .dt-cur { display: block; }
.dt-cur.on { opacity: 1; }
.dt-cur-arrow { width: 26px; height: 28px; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.28)); }
.dt-cur-arrow .cf { fill: var(--teal); }
.dt-cur-arrow .cs { fill: none; stroke: #fff; stroke-linejoin: round; }
.dt-cur-tag {
  position: absolute; top: 18px; left: 16px;
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.01em; font-weight: 600;
  background: var(--teal); color: #fff; padding: 3px 10px; border-radius: 5px;
  white-space: nowrap; box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.35);
}
.dt-cur-msg {
  position: absolute; top: 52px; left: 16px;
  font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1.3; color: #fff;
  background: var(--teal); padding: 8px 12px; border-radius: 3px 13px 13px 13px;
  box-shadow: 0 12px 30px rgba(var(--accent-rgb),0.32); white-space: nowrap;
  opacity: 0; transform: translateY(6px) scale(0.96); transform-origin: top left;
  transition: opacity .3s ease, transform .35s cubic-bezier(0.34,1.56,0.64,1);
}
.dt-cur.msg-on .dt-cur-msg { opacity: 1; transform: none; }
.dt-caret { display: inline-block; width: 1.5px; height: 1em; background: #fff; vertical-align: -2px; margin-left: 1px; animation: dtBlink 1s steps(1) infinite; }
@keyframes dtBlink { 50% { opacity: 0; } }

/* touch message bubble (mobile, no cursor) */
.dt-tmsg {
  position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none;
  max-width: min(78vw, 280px);
  font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.3; color: #fff;
  background: var(--teal); padding: 9px 14px; border-radius: 4px 14px 14px 14px;
  box-shadow: 0 12px 30px rgba(var(--accent-rgb),0.32);
  opacity: 0; transform: translateY(8px) scale(0.96); transform-origin: top left;
  transition: opacity .3s ease, transform .35s cubic-bezier(0.34,1.56,0.64,1);
}
.dt-tmsg.on { opacity: 1; transform: none; }
:root[data-theme="dark"] .dt-tmsg { background: var(--teal-bright); color: #04211e; }
:root[data-theme="dark"] .dt-tmsg .dt-caret { background: #04211e; }

/* dark mode: teal is bright, so dark text reads better on the chips/bubbles */
:root[data-theme="dark"] .dt-tab,
:root[data-theme="dark"] .dt-badge,
:root[data-theme="dark"] .dt-cur-tag,
:root[data-theme="dark"] .dt-cur-msg { color: #04211e; }
:root[data-theme="dark"] .dt-caret { background: #04211e; }