/* ============================================================
   THE EDITOR — shared components
   Canonical look for primitives reused across surfaces. Linked
   BEFORE each view's inline <style>, so any view-specific rule
   still overrides — adopting this file changes nothing today and
   becomes the migration target as each surface is rebuilt.
   All values reference theme.css tokens; no hard-coded colour.
   ============================================================ */

/* ---- app chrome ---- */
header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:12px 20px;
  display:flex; align-items:center; gap:14px;
  position:sticky; top:0; z-index:10;
}
header b, header .logo{ color:var(--pri); }
header .logo{ font-weight:800; font-size:18px; cursor:pointer; }
header .sp{ flex:1; }

.wrap{ max-width:none; margin:20px 0; padding:0 var(--sp-6); }

/* ---- buttons ---- */
.btn{
  background:var(--pri); color:#fff;
  border:none; border-radius:var(--r-sm);
  padding:9px 14px; font:inherit; font-size:14px;
  cursor:pointer;
}
.btn.alt{ background:var(--pri-soft); color:var(--pri); }
.btn.alt.on{ background:var(--pri); color:#fff; }
.btn:disabled{ opacity:.5; cursor:default; }

/* ---- surfaces ---- */
.card,
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:16px;
}
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.pcard{ cursor:pointer; transition:.15s; }
.pcard:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.pcard .type,
.pcard .cat{ font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.04em; }

/* ---- form controls ---- */
label{ font-size:13px; color:var(--mut); display:block; margin:10px 0 4px; }
input, select, textarea{
  font:inherit; padding:9px 10px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  width:100%;
}
textarea{ resize:vertical; }

/* ---- bits ---- */
.muted{ color:var(--mut); }
.err{ color:var(--danger); font-size:13px; }
.ok{ color:var(--ok); }
.pill{ font-size:12px; background:var(--pri-soft); color:var(--pri); padding:3px 9px; border-radius:20px; }
.badge{ background:var(--pri); color:#fff; border-radius:20px; font-size:11px; padding:1px 7px; margin-left:4px; }
.sep{ width:1px; height:22px; background:var(--line); }