/* ---------- Layout wrappers ---------- */
.lp-wrap{ max-width:980px; margin-inline:auto; }
.lp-narrow{ max-width:720px; margin-inline:auto; }
.lp-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.lp-stack{ display:grid; gap:12px; }
.lp-stack-lg{ display:grid; gap:18px; }

/* ---------- Cards (used by /paths listing) ---------- */
.lp-path-card{
  display:block; text-decoration:none; border:1px solid var(--surface-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 85%, transparent), var(--surface));
  border-radius:16px; padding:16px; box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.lp-path-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.18); border-color: color-mix(in srgb, var(--accent) 40%, var(--surface-border)); }
.lp-path-card h3{ margin:0 0 6px; }
.lp-path-card .lp-card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }

/* ---------- Forms ---------- */
.lp-form{ display:grid; gap:16px; }
@media (min-width:900px){
  .lp-form--grid{ grid-template-columns: 1fr 1fr; gap:18px 16px; }
  .lp-form--grid .lp-actions{ grid-column: 1 / -1; }
}

.lp-field{ display:grid; gap:6px; }
.lp-label{
  font-weight:600; color: var(--text);
  display:flex; align-items:center; gap:8px;
}
.lp-hint{ font-size:.92rem; color: var(--muted); }
.lp-error{ font-size:.92rem; color: var(--danger); }

/* Inputs baseline */
.lp-input, .lp-textarea, .lp-select{
  width:100%; border:1px solid var(--surface-border); background: var(--panel);
  color: var(--text); border-radius:12px; padding:10px 12px; line-height:1.35;
  outline: none; box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.lp-textarea{ min-height:110px; resize: vertical; }
.lp-select{ appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--muted) 50%),
  linear-gradient(135deg, var(--muted) 50%, transparent 50%),
  radial-gradient(farthest-side, var(--muted) 98%, transparent 100%);
  background-position:
  calc(100% - 18px) calc(50% - 3px),
  calc(100% - 12px) calc(50% - 3px),
  calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px, 32px 32px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* Input states */
.lp-input::placeholder, .lp-textarea::placeholder{ color: color-mix(in srgb, var(--muted) 80%, transparent); }
.lp-input:focus-visible, .lp-textarea:focus-visible, .lp-select:focus-visible{
  border-color: color-mix(in srgb, var(--accent) 60%, var(--surface-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
.lp-input.is-invalid, .lp-textarea.is-invalid, .lp-select.is-invalid{
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 24%, transparent);
}
.lp-input.is-valid, .lp-textarea.is-valid, .lp-select.is-valid{
  border-color: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 24%, transparent);
}
.lp-input[disabled], .lp-textarea[disabled], .lp-select[disabled]{ opacity:.6; cursor:not-allowed; }

/* Inputs with icons */
.lp-input-wrap{ position:relative; }
.lp-input-icon{
  position:absolute; inset-inline-start:10px; inset-block-start:50%;
  transform: translateY(-50%); pointer-events:none; color: var(--muted);
}
.lp-input--icon{ padding-inline-start:36px; }

/* Checkbox (for “Active”) */
.lp-checkbox{
  width:18px; height:18px; border-radius:6px; appearance:none;
  border:1px solid var(--surface-border); background: var(--panel); display:inline-grid; place-items:center;
  transition: all .12s ease;
}
.lp-checkbox:checked{
  border-color: var(--success); background: var(--success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent);
}
.lp-checkbox:checked::after{
  content: "✓"; font-weight:700; font-size:.9rem; color:#000; line-height:1;
}

/* Actions row */
.lp-actions{ display:flex; gap:10px; justify-content:flex-end; }

/* ---------- Buttons (scoped) ---------- */
.lp-btn{
  --_bg: color-mix(in srgb, var(--accent) 14%, var(--panel));
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--surface-border);
  background: var(--_bg); color: var(--text); text-decoration:none; cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  box-shadow: var(--shadow);
}
.lp-btn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 50%, var(--surface-border)); }
.lp-btn:focus-visible{ outline:none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.lp-btn:active{ transform: translateY(0); }
.lp-btn-sm{ padding:6px 10px; border-radius:10px; font-size:.95rem; }
.lp-btn-ghost{ background: transparent; }
.lp-btn-danger{ --_bg: color-mix(in srgb, var(--danger) 14%, var(--panel)); }
.lp-btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* ---------- Admin table (/admin/paths) ---------- */
.lp-table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border:1px solid var(--surface-border); border-radius:14px; background: var(--surface);
}
.lp-table thead th{
  text-align:left; font-weight:700; padding:12px; background: color-mix(in srgb, var(--panel) 72%, transparent);
  border-bottom:1px solid var(--surface-border);
}
.lp-table tbody td{ padding:12px; border-bottom:1px solid var(--surface-border); vertical-align:middle; }
.lp-table tbody tr:hover{ background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lp-table .lp-code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; background: var(--panel); border:1px solid var(--surface-border); border-radius:8px; padding:2px 6px; }

/* Responsive table: stack on small screens */
@media (max-width: 720px){
  .lp-table, .lp-table thead, .lp-table tbody, .lp-table th, .lp-table td, .lp-table tr{ display:block; }
  .lp-table thead{ display:none; }
  .lp-table tbody tr{ border-bottom:1px solid var(--surface-border); padding:10px; }
  .lp-table tbody td{ border:none; padding:6px 0; }
  .lp-table tbody td[data-label]::before{
    content: attr(data-label) " - "; font-weight:600; color: var(--muted);
  }
}

/* ---------- Path Detail checklist (scoped wrapper) ---------- */
.lp-checklist .checklist{ gap:12px; }
.lp-checklist .check{
  border-radius:14px; padding:12px; border:1px solid var(--surface-border);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--panel) 60%, transparent));
}
.lp-checklist .check.is-done{
  opacity:1; border-color: color-mix(in srgb, var(--success) 55%, var(--surface-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--success) 18%, var(--surface)), var(--surface));
}
.lp-checklist .check-toggle{
  width:30px; height:30px; border-radius:10px;
}

/* ---------- Tiny badges ---------- */
.lp-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border:1px solid var(--surface-border); border-radius:999px;
  background: var(--panel); color: var(--muted); font-size:.9rem;
}

/* ---------- Page titles ---------- */
.lp-title{
  font-weight:800; letter-spacing:.2px; margin:0;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--text)));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}

/* ---------- Galaxy container refinement (optional) ---------- */
.lp-galaxy{
  border-radius:16px; border:1px dashed color-mix(in srgb, var(--accent) 40%, var(--surface-border));
}


.lp-bridge input[type="text"],
.lp-bridge input[type="url"],
.lp-bridge textarea,
.lp-bridge select {
appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--muted) 50%),
  linear-gradient(135deg, var(--muted) 50%, transparent 50%),
  radial-gradient(farthest-side, var(--muted) 98%, transparent 100%);
  background-position:
  calc(100% - 18px) calc(50% - 3px),
  calc(100% - 12px) calc(50% - 3px),
  calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px, 32px 32px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.lp-bridge .actions a, .lp-bridge .actions button { 
  --_bg: color-mix(in srgb, var(--accent) 14%, var(--panel));
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--surface-border);
  background: var(--_bg); color: var(--text); text-decoration:none; cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  box-shadow: var(--shadow);
}


/* ===== Skill Tree (modules) ===== */
.st-tree-wrap{
  background: var(--input-bg);
  border:1px solid var(--surface-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 8px;
  margin: 16px 0 24px;
  overflow: hidden;
}

.st-link{
  fill:none;
  stroke: color-mix(in srgb, var(--accent) 40%, transparent);
  stroke-width: 2px;
}

.st-node-base{
  fill: var(--panel);
  stroke-width: 2px;
}

.st-node-progress{
  fill: none;
  stroke-width: 6px;
  stroke-linecap: round;
  opacity: .9;
}

.st-node-title{
  fill: var(--muted);
  font-size: 12px;
}

.st-node-pct{
  fill: var(--text);
  font-weight: 700;
  font-size: 12px;
}


.st-node--locked .st-node-base { opacity:.35; }
.st-node--locked .st-node-pct  { opacity:.35; }
.st-node--locked .st-node-title{ opacity:.6; }
.st-node--locked .st-node-progress{ opacity:.2; }

.st-tree-wrap {
  width: 100%;
  height: 72vh;          /* 👈 nice and big */
  min-height: 560px;     /* safety on short viewports */
  max-height: 1200px;    /* optional cap */
  border-radius: 12px;
  overflow: hidden;
}

/* SVG fills the box */
.st-tree-wrap svg {
  width: 100%;
  height: 100%;
  display: block;        /* remove inline gap */
}

/* (Optional) widen the content area a bit on large screens */
@media (min-width: 1280px) {
  .container.wide { max-width: 1400px; } /* or 1600px if you like */
}











.pa-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* base compact button tweaked for toolbars */
.pa-btn {
  border-radius: 10px;
  padding: .35rem .65rem;
  line-height: 1;
  white-space: nowrap;
}

/* square icon buttons (↑ / ↓) */
.pa-icon {
  width: 34px;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

/* subtle danger look while keeping theme */
.pa-danger {
  background: rgba(255, 90, 90, .10);
  border-color: rgba(255, 120, 120, .35);
}
.pa-danger:hover {
  background: rgba(255, 90, 90, .18);
  border-color: rgba(255, 160, 160, .55);
}

/* Details dropdown styled like a small menu */
.pa-dd { position: relative; }
.pa-dd > summary { list-style: none; cursor: pointer; }
.pa-dd[open] { z-index: 10; }

.pa-dd-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 280px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(20, 24, 34, .98);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 10px 30px rgba(0,0,0,.45),
    0 0 0 1px rgba(120,150,255,.18) inset;
}

/* inputs inside the dropdown keep the nice admin look */
.pa-dd-menu input[type="text"],
.pa-dd-menu input[type="number"],
.pa-dd-menu textarea {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px 10px;
  color: #fff;
}
.pa-dd-menu input:focus,
.pa-dd-menu textarea:focus {
  outline: none;
  border-color: rgba(150,180,255,.45);
  box-shadow: 0 0 0 2px rgba(120,150,255,.20);
  background: rgba(255,255,255,.06);
}


.form-inline { display:flex; align-items:end; gap:10px; flex-wrap:wrap; }
.control { display:flex; flex-direction:column; gap:6px; min-width:220px; }
.control-label { font-size:.78rem; color:var(--muted,#9aa4b2); }
.pa-danger { background: rgba(255,90,90,.10); border-color: rgba(255,120,120,.35); }
.pa-danger:hover { background: rgba(255,90,90,.18); border-color: rgba(255,160,160,.55); }