/* ─────────────────────────────────────────────────────────────────
   Adjacency · Parti Creator — the v10 · Apparat BEACHHEAD.

   The first live v10 surface inside the (still dark-themed) app. To keep
   the paradigm shift contained and leak-proof, the v10 grammar is declared
   on the `.adj-parti` SCOPE — NOT on :root — so none of it touches the rest
   of the app. Tokens + primitive treatments are derived from
   css/arrange-v10-apparat.css (the canonical system); when the whole app
   adopts v10 this island merges into it. Grammar: three peer primitives —
   cut (depression), puck (raised operable), zone (tonal region) — under one
   light source (above-front), color = state only (oxide enamels).
   ───────────────────────────────────────────────────────────────── */

.adj-parti {
  /* Field + ink (scoped — do not promote to :root) */
  --p-field: #fbfaf6;
  --p-field-2: #f3f1ec;
  --p-field-3: #ebe9e2;
  --p-ink: #1c1b18;
  --p-ink-2: #4a4842;
  --p-ink-3: #8a877f;
  --p-rule: rgba(20, 18, 14, 0.16);
  --p-rule-soft: rgba(20, 18, 14, 0.08);
  /* Cut depth — inset shadow only, interior stays field color */
  --p-cut-rim: rgba(0, 0, 0, 0.22);
  --p-cut-rim-light: rgba(255, 255, 255, 0.55);
  /* Oxide enamels — state only */
  --p-cobalt: #3a4f72;   /* informs  → priority   */
  --p-vermilion: #9c4338;/* warns    → required    */
  --p-emerald: #3b6850;  /* confirms → active      */
  --p-amethyst: #5e4670; /* categorizes → zones    */
  --p-gold: #957532;
  --p-cobalt-soft: rgba(58, 79, 114, 0.12);
  --p-vermilion-soft: rgba(156, 67, 56, 0.12);
  --p-amethyst-soft: rgba(94, 70, 112, 0.12);

  background: var(--p-field-2);
  color: var(--p-ink);
  border-radius: 10px;
  padding: 14px;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 220px;
  gap: 14px;
  font-family: "Inter", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  align-items: start;
}

/* Paper — the calm working surface a level above the field */
.adj-parti__paper {
  background: var(--p-field);
  border: 1px solid var(--p-rule-soft);
  border-radius: 8px;
  padding: 12px;
}
.adj-parti__title { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-ink-2); margin: 0 0 10px; }
.adj-parti__hint { font-size: 11px; line-height: 1.5; color: var(--p-ink-3); margin: 8px 0 0; }

/* ── Tool rail: Type-A pucks (operate from a cut address) ── */
.adj-parti__tools { display: flex; flex-direction: column; gap: 6px; }
.adj-parti-puck {
  appearance: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 12px; color: var(--p-ink);
  background: linear-gradient(var(--p-field), var(--p-field-2));
  border: 1px solid var(--p-rule);
  border-radius: 7px; padding: 8px 10px;
  box-shadow: 0 1px 0 var(--p-cut-rim-light) inset, 0 1px 2px rgba(0,0,0,0.12);
  display: flex; align-items: center; gap: 8px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.adj-parti-puck:hover { transform: translateY(-1px); }
.adj-parti-puck:active { transform: translateY(0); box-shadow: 0 1px 1px rgba(0,0,0,0.18) inset; }
.adj-parti-puck.is-active {
  border-color: var(--p-cobalt);
  box-shadow: 0 0 0 2px var(--p-cobalt-soft), 0 1px 0 var(--p-cut-rim-light) inset;
}
.adj-parti-puck__glyph { width: 16px; height: 16px; flex: none; opacity: 0.8; }

/* ── Phase toggle ── */
.adj-parti-phase { display: flex; border: 1px solid var(--p-rule); border-radius: 7px; overflow: hidden; margin-bottom: 10px; }
.adj-parti-phase button { flex: 1; appearance: none; border: 0; border-left: 1px solid var(--p-rule-soft); cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; padding: 7px 4px; background: var(--p-field); color: var(--p-ink-3); }
.adj-parti-phase button:first-child { border-left: 0; }
.adj-parti-phase button.is-on { background: var(--p-ink); color: var(--p-field); }

/* ── Canvas (SVG field) ── */
.adj-parti__stage { position: relative; }
.adj-parti-svg { width: 100%; height: auto; display: block; border-radius: 6px; background: var(--p-field); border: 1px solid var(--p-rule-soft); touch-action: none; }
.adj-parti-svg[data-phase="sketch"] { cursor: crosshair; }
.adj-parti-svg .pf-capture { cursor: crosshair; }
/* Freehand marks — the loose, non-executable remainder */
.adj-parti-svg .pf-stroke { pointer-events: none; }
.adj-parti-svg .pf-stroke--pen { stroke: var(--p-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.adj-parti-svg .pf-stroke--pencil { stroke: var(--p-ink-3); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.adj-parti-svg .pf-stroke--hatch { stroke: var(--p-amethyst); stroke-width: 0.8; stroke-opacity: 0.6; }
.adj-parti-svg .pf-stroke.is-dim { opacity: 0.25; }
.adj-parti-svg .pf-live { pointer-events: none; stroke: var(--p-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.adj-parti-svg .pf-live.pf-stroke--pencil { stroke: var(--p-ink-3); stroke-width: 1.2; }
.adj-parti-svg .pf-live.pf-stroke--hatch { stroke: var(--p-amethyst); stroke-width: 0.8; }
.adj-parti-svg .pf-cell { fill: transparent; cursor: crosshair; }
.adj-parti-svg .pf-cell:hover { fill: var(--p-cobalt-soft); }
.adj-parti-svg .pf-grid { stroke: var(--p-rule-soft); stroke-width: 0.5; }
.adj-parti-svg .pf-plot { fill: none; stroke: var(--p-rule); stroke-width: 1; }
/* Zone — flat tonal region, no depth, no border (v10) */
.adj-parti-svg .pf-zone { fill: var(--p-amethyst-soft); }
.adj-parti-svg .pf-court { fill: var(--p-field-3); }
/* Cut — corridor channel; interior = field, depth via inset rim filter */
.adj-parti-svg .pf-cut { fill: var(--p-field-3); stroke: var(--p-cut-rim); stroke-width: 0.6; filter: url(#pf-inset); }
.adj-parti-svg .pf-cut.is-primary { stroke: var(--p-cut-rim); stroke-width: 1; }
/* Puck — raised token with top highlight / bottom shadow */
.adj-parti-svg .pf-puck { filter: url(#pf-raise); }
.adj-parti-svg .pf-puck-face { fill: var(--p-field); stroke: var(--p-rule); stroke-width: 0.6; }
/* State rings (force = oxide) */
.adj-parti-svg .is-priority { stroke: var(--p-cobalt); }
.adj-parti-svg .is-required { stroke: var(--p-vermilion); }
.adj-parti-svg .pf-label { fill: var(--p-ink-2); font-size: 4px; font-family: inherit; }
.adj-parti-svg .pf-draft { fill: none; stroke: var(--p-cobalt); stroke-width: 1; stroke-dasharray: 2 2; }
.adj-parti-svg .pf-edge-active { stroke: var(--p-emerald); stroke-width: 2; }

/* ── Element list: cuts holding each confirmed projection ── */
.adj-parti__list { display: flex; flex-direction: column; gap: 6px; }
.adj-parti-row {
  background: var(--p-field-2);
  border: 1px solid var(--p-rule-soft);
  border-radius: 6px; padding: 7px 8px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) inset;
}
.adj-parti-row.is-selected { box-shadow: 0 0 0 1.5px var(--p-cobalt) inset; }
.adj-parti-row__name { font-size: 12px; font-weight: 500; }
.adj-parti-row__meta { font-size: 10px; color: var(--p-ink-3); }
.adj-parti-seg { display: inline-flex; border: 1px solid var(--p-rule); border-radius: 5px; overflow: hidden; }
.adj-parti-seg button { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 10px; padding: 3px 6px; background: var(--p-field); color: var(--p-ink-3); }
.adj-parti-seg button.is-on { color: #fff; }
.adj-parti-seg button.is-on[data-force="priority"] { background: var(--p-cobalt); }
.adj-parti-seg button.is-on[data-force="required"] { background: var(--p-vermilion); }
.adj-parti-seg button.is-on[data-force="consider"] { background: var(--p-ink-3); }
.adj-parti-mini { appearance: none; cursor: pointer; font: inherit; font-size: 10px; padding: 3px 6px; border: 1px solid var(--p-rule); border-radius: 5px; background: var(--p-field); color: var(--p-ink-2); }
.adj-parti-mini:hover { border-color: var(--p-cobalt); color: var(--p-cobalt); }
.adj-parti-row__del { appearance: none; border: 0; background: transparent; color: var(--p-ink-3); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.adj-parti-row__del:hover { color: var(--p-vermilion); }
.adj-parti-row select { font: inherit; font-size: 11px; border: 1px solid var(--p-rule); border-radius: 4px; background: var(--p-field); color: var(--p-ink); padding: 2px 4px; max-width: 100%; }

/* Activate — Type-B puck (persistent state, state ring) */
.adj-parti__activate {
  appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  width: 100%; margin-top: 8px; padding: 9px; border-radius: 7px;
  border: 1px solid var(--p-rule); background: var(--p-field); color: var(--p-ink);
  box-shadow: 0 1px 0 var(--p-cut-rim-light) inset, 0 1px 2px rgba(0,0,0,0.12);
}
.adj-parti__activate.is-on { background: var(--p-emerald); color: #fff; border-color: var(--p-emerald); box-shadow: 0 0 0 2px rgba(59,104,80,0.18); }
.adj-parti__empty { font-size: 11px; color: var(--p-ink-3); padding: 8px; text-align: center; }

/* Text → parti composer */
.adj-parti-t2p { background: var(--p-field-2); border: 1px solid var(--p-rule-soft); border-radius: 7px; padding: 10px; margin-bottom: 10px; }
.adj-parti-t2p__prompt { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 12px; border: 1px solid var(--p-rule); border-radius: 6px; padding: 7px; background: var(--p-field); color: var(--p-ink); margin-bottom: 8px; }
.adj-parti-t2p__cfg { margin-top: 8px; font-size: 11px; color: var(--p-ink-2); }
.adj-parti-t2p__cfg summary { cursor: pointer; color: var(--p-ink-3); }
.adj-parti-t2p__cfg label { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 10px; color: var(--p-ink-3); }
.adj-parti-t2p__cfg input { font: inherit; font-size: 11px; border: 1px solid var(--p-rule); border-radius: 5px; padding: 4px 6px; background: var(--p-field); color: var(--p-ink); }

/* Folded-in site pickers (arrival/service/north) — v10-scoped so the dark
   theme's segmented controls read correctly on the light parti field. */
.adj-parti__site { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.adj-parti .adj-site-pick { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; }
.adj-parti .adj-site-pick > span { font-size: 11px; color: var(--p-ink-2); }
.adj-parti .adj-seg { display: inline-flex; border: 1px solid var(--p-rule); border-radius: 6px; overflow: hidden; }
.adj-parti .adj-seg button { appearance: none; border: 0; border-left: 1px solid var(--p-rule-soft); cursor: pointer; font: inherit; font-size: 10px; padding: 4px 7px; background: var(--p-field); color: var(--p-ink-3); }
.adj-parti .adj-seg button:first-child { border-left: 0; }
.adj-parti .adj-seg button.is-active { background: var(--p-cobalt); color: #fff; }

@media (max-width: 880px) { .adj-parti { grid-template-columns: 1fr; } }