/* 30-elements.css — DATA-DROP element/drop property panels, palette chrome, and
 * the polyline draft bar.  Blueprint aesthetic: deep-blue drawing surface, cyan
 * linework, crisp high-contrast type, BIG touch targets for phone/tablet field use
 * (sometimes in sunlight).  Owned by the elements/drops agent (30-elements.js,
 * 40-drops.js).  Uses var(--…, fallback) so it inherits the shell's tokens when
 * present but stands alone otherwise.
 */

:root {
  --dd-ink:   var(--ink,   #eaf3fc);
  --dd-dim:   var(--steel, #8fa6bd);
  --dd-line:  var(--hair,  #24486a);
  --dd-panel: var(--card,  #0f2438);
  --dd-panel2:var(--card2, #132c44);
  --dd-accent:var(--blueline, #4aa3ff);
  --dd-danger:var(--redline,  #ff5a4d);
  --dd-ok:    var(--stamp,    #2ecc71);
  --dd-r: 10px;
}

/* ---- property panel drawer ------------------------------------------------- */
.dd-panel {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 24px;
  color: var(--dd-ink);
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 15px;
  min-width: 260px;
}

.dd-panel-head { border-bottom: 1px solid var(--dd-line); padding-bottom: 10px; }
.dd-panel-title {
  font-size: 19px; font-weight: 800; letter-spacing: .02em; line-height: 1.1;
  color: var(--dd-ink);
}
.dd-panel-sub, .dd-panel-head .dd-panel-sub {
  margin-top: 3px; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--dd-accent);
}

.dd-subhead {
  margin-top: 4px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--dd-dim);
  border-top: 1px dashed var(--dd-line); padding-top: 12px;
}

/* ---- fields ---------------------------------------------------------------- */
.dd-field { display: flex; flex-direction: column; gap: 6px; }
.dd-field-lbl {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dd-dim);
}
.dd-input {
  width: 100%; min-height: 46px;               /* big touch target */
  font-family: inherit; font-size: 16px;       /* >=16px: no iOS zoom */
  color: var(--dd-ink);
  background: var(--dd-panel2);
  border: 1.5px solid var(--dd-line);
  border-radius: 8px;
  padding: 10px 12px;
  -webkit-appearance: none; appearance: none;
}
.dd-input:focus { outline: none; border-color: var(--dd-accent); box-shadow: 0 0 0 3px rgba(74,163,255,.28); }
.dd-input-sm { min-height: 46px; max-width: 120px; }
.dd-textarea { min-height: 74px; resize: vertical; line-height: 1.4; }
select.dd-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--dd-dim) 50%),
                    linear-gradient(135deg, var(--dd-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 34px;
}

/* ---- status row + chip ----------------------------------------------------- */
.dd-status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dd-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--dd-line); color: var(--dd-dim); background: transparent;
  white-space: nowrap;
}
.dd-status-row .dd-input { flex: 1 1 130px; }

/* ---- link ------------------------------------------------------------------ */
.dd-link {
  display: inline-block; margin-top: -4px;
  color: var(--dd-accent); font-weight: 700; font-size: 14px; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.dd-link:hover { border-bottom-color: var(--dd-accent); }

/* ---- notes ----------------------------------------------------------------- */
.dd-note { font-size: 13px; color: var(--dd-dim); line-height: 1.4; }
.dd-note-ok { color: var(--dd-ok); font-weight: 700; }
.dd-topo-view {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 14px; color: var(--dd-ink);
  background: var(--dd-panel2); border: 1px solid var(--dd-line);
  border-radius: 8px; padding: 10px 12px; letter-spacing: .02em;
}

/* ---- buttons (big field targets) ------------------------------------------ */
.dd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .02em;
  color: var(--dd-ink);
  background: var(--dd-panel2);
  border: 1.5px solid var(--dd-line);
  border-radius: 10px;
  cursor: pointer; user-select: none;
  touch-action: manipulation;
}
.dd-btn:hover { border-color: var(--dd-accent); }
.dd-btn:active { transform: translateY(1px); }
.dd-btn-primary { background: var(--dd-accent); border-color: var(--dd-accent); color: #08131f; }
.dd-btn-primary:hover { filter: brightness(1.06); }
.dd-btn-danger { color: var(--dd-danger); border-color: var(--dd-danger); background: transparent; }
.dd-btn-danger:hover { background: var(--dd-danger); color: #08131f; }
.dd-btn-wide { width: 100%; }

.dd-num-row { display: flex; gap: 8px; align-items: center; }
.dd-num-row .dd-input { flex: 1 1 auto; }

.dd-panel-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.dd-panel-actions .dd-btn { flex: 1 1 120px; }

/* ---- install-state stepper ------------------------------------------------- */
.dd-stepper { display: flex; flex-direction: column; gap: 6px; }
.dd-step {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 50px; padding: 8px 12px;
  font-family: inherit; text-align: left; cursor: pointer;
  color: var(--dd-dim);
  background: var(--dd-panel2);
  border: 1.5px solid var(--dd-line);
  border-left: 5px solid var(--dd-line);
  border-radius: 8px;
  touch-action: manipulation;
}
.dd-step-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 999px;
  font-size: 14px; font-weight: 800;
  background: transparent; color: var(--dd-dim);
  border: 2px solid currentColor;
}
.dd-step-lbl { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.dd-step.done {
  color: var(--sc, var(--dd-ok)); border-left-color: var(--sc, var(--dd-ok));
}
.dd-step.done .dd-step-dot { background: var(--sc, var(--dd-ok)); color: #08131f; border-color: var(--sc, var(--dd-ok)); }
.dd-step.active {
  color: var(--dd-ink);
  border-color: var(--sc, var(--dd-accent));
  border-left-color: var(--sc, var(--dd-accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc, var(--dd-accent)) 32%, transparent);
  background: color-mix(in srgb, var(--sc, var(--dd-accent)) 14%, var(--dd-panel2));
}
.dd-step.active .dd-step-dot { background: var(--sc, var(--dd-accent)); color: #08131f; border-color: var(--sc, var(--dd-accent)); }
.dd-step:hover { filter: brightness(1.08); }

/* ---- polyline draft bar (floating, over the drawing) ----------------------- */
.dd-draftbar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(140%);
  z-index: 900;
  display: none; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--dd-panel);
  border: 1.5px solid var(--dd-accent);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.55);
  max-width: calc(100vw - 24px);
  transition: transform .18s ease;
}
.dd-draftbar.on { display: flex; transform: translateX(-50%) translateY(0); }
.dd-draftbar-label {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dd-dim);
}
.dd-draftbar-count {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 14px; font-weight: 800; color: var(--dd-accent);
  padding: 2px 8px; border: 1px solid var(--dd-line); border-radius: 999px;
}
.dd-draftbar .dd-btn { min-height: 44px; }

@media (max-width: 480px) {
  .dd-draftbar { left: 12px; right: 12px; transform: translateY(140%); bottom: 14px; }
  .dd-draftbar.on { transform: translateY(0); }
  .dd-draftbar-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-draftbar, .dd-btn { transition: none; }
}

/* device type picker (Edit mode) */
.dd-devpick-hint{color:#8aa0b8;font-size:.85rem;margin:0 0 .6rem}
.dd-devpick-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.dd-devpick-btn{display:flex;align-items:center;gap:.5rem;padding:.55rem .6rem;border:1px solid #2b4056;border-radius:8px;background:#12212f;color:#dce8f2;cursor:pointer;font-size:.9rem;text-align:left}
.dd-devpick-btn:hover{border-color:#5fa8ff}
.dd-devpick-btn.is-on{border-color:#5fa8ff;background:#173049;box-shadow:inset 0 0 0 1px #5fa8ff}
.dd-devpick-dot{width:12px;height:12px;border-radius:50%;flex:none}