/* =============================================================================
   goals.css  —  Endeavos Online SOW
   Step 1 "Project Goals": floating dialog panel, simulation-type popup,
   note-only tag bubbles, goal tag dialog.
============================================================================= */

/* ── Step 1 panel (sits at legend position, always open in step 1) ──────── */
#step1-panel {
  position: absolute;
  top: 12px; left: 248px;
  width: 408px;
  max-height: calc(100% - 80px);
  overflow-y: auto;
  z-index: 10;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(232,116,30,0.28);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  display: none;
  pointer-events: all;
  font-family: var(--font-label);
}
#step1-panel.show { display: block; }

#step1-panel::-webkit-scrollbar { width: 4px; }
#step1-panel::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 4px; }
#step1-panel::-webkit-scrollbar-thumb { background: rgba(232,116,30,0.4); border-radius: 4px; }

.s1-header {
  padding: 11px 14px 9px;
  border-bottom: 1px solid rgba(232,116,30,0.18);
  font-size: var(--t-label);
  font-weight: var(--w-label);
  color: var(--orange);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.98);
  z-index: 1;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.s1-header:hover { background: rgba(232,116,30,0.05); }

.s1-collapse-btn {
  font-size: var(--t-arrow);
  color: var(--orange);
  transition: transform 0.2s;
  line-height: 1;
}

/* Collapsed state — only the header strip is visible */
#step1-panel.collapsed {
  overflow: hidden;
  max-height: none;
}
#step1-panel.collapsed .s1-body {
  display: none;
}
#step1-panel.collapsed .s1-header {
  border-bottom: none;
  border-radius: 10px;
}
#step1-panel.collapsed .s1-collapse-btn {
  transform: rotate(180deg);
}

.s1-body {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.s1-field-label {
  font-size: var(--t-label);
  font-weight: var(--w-label);
  color: var(--ink);
  margin-bottom: 3px;
  display: block;
}
.s1-req { color: var(--orange); }
.s1-hint { font-weight: var(--w-body); color: var(--ink-soft); font-size: var(--t-arrow); }

/* ── Simulation type rows ────────────────────────────────────────────────── */
.s1-atype {
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 3px;
}
.s1-arow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: var(--t-label);
  font-weight: var(--w-option);
  color: var(--ink);
  transition: background 0.1s;
  user-select: none;
}
.s1-arow:hover { background: rgba(232,116,30,0.07); }
.s1-arow.s1-selected { background: rgba(232,116,30,0.13); }
.s1-arow input[type="radio"] { accent-color: var(--orange); cursor: pointer; flex-shrink: 0; }
.s1-arow label { cursor: pointer; }

.s1-subopts {
  padding: 5px 10px 5px 28px;
  background: #f9f9f9;
  border-top: 1px solid var(--line);
  display: none;
}
.s1-subopts.open { display: block; }

.s1-subchk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-body);
  color: var(--ink-soft);
  padding: 2px 0;
  cursor: pointer;
  user-select: none;
}
.s1-subchk input { accent-color: var(--orange); }

/* ── Objectives summary card ────────────────────────────────────────────────
   Read-only preview in the panel; the whole card is the control that opens the
   editor, by click or by keyboard. Styled like an input (border, pointer,
   focus ring) because that's the affordance users already read as "clickable"
   — there's no placeholder text telling them so. */
/* Padding, radius and font match .s1-filebox exactly, so the three clickable
   boxes in this panel are the same height and read as one family. */
.s1-obj-card {
  border: 1.5px solid var(--line);
  border-radius: 7px;
  background: #fff;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.s1-obj-card:hover,
.s1-obj-card:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(232, 116, 30, 0.15);
}

/* One line, clipped with an ellipsis — the card is now the same height as the
   upload boxes, so there is only room for one. */
.s1-obj-card-preview {
  font-family: var(--font-entered);
  font-size: var(--t-body);
  /* normal, not 1.5 — .s1-filebox doesn't set a line-height, and anything
     taller here makes this card overshoot the upload boxes by a couple of px.
     min-height is the upload boxes' 15px icon, which is what actually sets
     their content height — text alone comes out a pixel shorter. */
  line-height: normal;
  min-height: 15px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
/* Empty — the invitation is styled like every other placeholder in the panel
   (muted + italic) so it reads as a prompt, not as content already entered. */
.s1-obj-card-preview.is-empty {
  color: var(--c-muted);
  font-style: italic;
}

/* ── Objectives modal sections ──────────────────────────────────────────────
   Three stacked sections — Objectives, Parameter Optimization, Deliverables —
   each with a heading carrying an (i). They are three different kinds of thing
   (what must be proven / how the work is run / what is handed over), so each
   gets its own divider rather than running together. */
.s1-obj-section {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.s1-sec-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: var(--w-label);
  color: var(--ink);
  margin-bottom: 7px;
}
.s1-sec-sub {
  font-weight: var(--w-body);
  font-size: var(--t-body);
  color: var(--ink-soft);
}
/* A section heading that IS its own checkbox — one line, one decision. */
.s1-sec-label--chk { cursor: pointer; user-select: none; }

/* Deliverables — one row per artifact, with its own (i) carrying the
   description that used to sit inline. */
.s1-dlv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.s1-dlv-label {
  flex: 1;
  font-size: var(--t-label);
  color: var(--ink);
  cursor: pointer;
}
/* Size/shape/spacing come from the app-wide checkbox standard + .chk gap. */
.s1-dlv-label input { margin: 0; }
/* Kept visible rather than hidden behind hover: everything else here is
   included, so a charge appearing only in the quote would read as a trap. */
.s1-dlv-cost {
  font-size: var(--t-hint);
  font-family: var(--font-hint);
  color: #99500b;
  white-space: nowrap;
}

/* ── Parameter optimization ─────────────────────────────────────────────────
   Lives in the expanded editor only — the panel shows its status, not its
   controls, so there is exactly one place to edit it. */
/* The section heading above now carries the 14px weight; this is the control
   inside it, so it matches the deliverable rows rather than competing with the
   heading. */
.s1-paramopt-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-label);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.s1-paramopt-row input { accent-color: var(--orange); margin: 0; }

.s1-paramopt-list {
  width: 100%;
  margin-top: 7px;
  border: 1.5px solid var(--orange);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-entered) !important;
  font-size: var(--t-body) !important;
  color: var(--ink);
  background: #fff;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}
.s1-paramopt-list::placeholder { color: var(--c-muted); font-style: italic; }
.s1-paramopt-list:focus { box-shadow: 0 0 0 2px rgba(232, 116, 30, 0.12); }


.s1-nest {
  padding-left: 16px;
  display: none;
}
.s1-nest.open { display: block; }

/* ── Section divider ─────────────────────────────────────────────────────── */
.s1-divider {
  height: 1px;
  background: rgba(232,116,30,0.15);
  margin: 2px 0;
}

/* ── CAD section ─────────────────────────────────────────────────────────── */
.s1-cad-radios { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.s1-cad-radio {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-label);
  cursor: pointer;
  padding: 2px 0;
  font-weight: var(--w-option);
}
.s1-cad-radio input { accent-color: var(--orange); }

#s1-no-cad-note {
  font-size: var(--t-body);
  color: var(--ink-soft);
  padding: 7px 10px;
  background: var(--orange-soft);
  border-radius: 6px;
  margin-bottom: 4px;
  line-height: 1.45;
}

/* ── Generic inputs ──────────────────────────────────────────────────────── */
.s1-model-name-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px 0 5px;
  border-bottom: 1px solid var(--line);
}
.s1-model-prefix {
  font-size: var(--t-label);
  font-weight: var(--w-label);
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.s1-model-name-input {
  flex: 1;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  background: transparent !important;
  font-family: var(--font-entered) !important;
  font-size: var(--t-body) !important;
  font-weight: var(--w-body);
  color: var(--ink);
  padding: 0 !important;
  min-width: 0;
}
.s1-model-name-input::placeholder { color: var(--c-muted); font-style: italic; font-weight: var(--w-body); font-size: var(--t-ph); }

.s1-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: var(--font-label);
  font-size: var(--t-body);
  color: var(--ink);
  background: #fff;
  outline: none;
  line-height: 1;
  height: 28px;
  transition: border-color 0.15s;
}
.s1-input:focus { border-color: var(--orange); }

.s1-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: var(--font-entered);
  font-size: var(--t-body);
  color: var(--c-muted);
  font-style: italic;
  background: #fff;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
  min-height: 110px;
  line-height: 1.5;
}
.s1-textarea:focus { border-color: var(--orange); }
/* Muted/italic only while the field still holds the untouched default guide/
   example text — exactly like a native placeholder, which is content-driven,
   not focus-driven. The instant the user actually types/edits real content
   (differs from the known default), it switches to standard text. Toggled
   in goals.js on 'input', compared against the exact default template. */
.s1-textarea.s1-has-content { color: var(--ink); font-style: normal; }

/* ── Objectives label row + expand button ────────────────────────────────── */
.s1-obj-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.s1-obj-expand-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  font-family: var(--font-btn);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.s1-obj-expand-btn:hover { border-color: var(--orange); color: var(--orange); }

/* ── Objectives — expanded editor modal ───────────────────────────────────── */
#s1-obj-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
}
#s1-obj-modal-overlay.show { display: flex; }

#s1-obj-modal {
  width: 736px; /* 15% wider than the original 640px */
  max-width: 92vw;
  max-height: 104vh; /* +5% on top of the prior 99vh (15% + 5%) */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  box-sizing: border-box;
  gap: 12px;
}

/* No title: the three section headings inside already say what this is, and a
   fourth heading repeating them just cost vertical space. The head is now only
   the close button, pushed right, and collapses to its own height. */
.s1-obj-modal-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: -8px;
}
.s1-obj-modal-close {
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.s1-obj-modal-close:hover { background: rgba(0,0,0,0.06); color: var(--ink); }

/* Sits inside the "Objectives" heading row, pushed to the right edge — the
   buttons act on the textarea directly below, so they read as that field's
   controls rather than as a document-wide toolbar. */
.s1-obj-toolbar {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.s1-obj-toolbar-icon-btn {
  width: 26px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.s1-obj-toolbar-icon-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-soft);
}

.s1-obj-modal-textarea {
  width: 100%;
  flex: 1;
  /* Taller again: dropping the modal title and folding the list buttons into
     the Objectives heading returned ~60px, and this is the one field users
     actually write in. */
  min-height: 320px;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-entered);
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-muted);
  font-style: italic;
  background: #fff;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
}
.s1-obj-modal-textarea:focus { border-color: var(--orange); }
.s1-obj-modal-textarea.s1-has-content { color: var(--ink); font-style: normal; }
.s1-obj-modal-textarea::placeholder { color: var(--c-muted); font-style: italic; }

/* The modal is a flex column with its own 12px gap, so the divider needs no
   margin of its own — that would sit it off-centre between the section above
   and the buttons below. */
#s1-obj-modal .dlg-divider { margin: 0; }

.s1-obj-modal-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.s1-filebox {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  /* Neutral at rest, orange on hover — same as the objectives card and the
     units select. Permanently-orange borders made these two boxes shout for
     attention relative to every other control in the panel; the accent now
     means "you're pointing at this", consistently across the step. */
  border: 1.5px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  font-size: var(--t-body);
  color: var(--ink-soft);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.s1-filebox:hover,
.s1-filebox:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(232, 116, 30, 0.15);
  color: var(--ink);
}

.s1-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── Objectives & Deliverables hover guide — same slot AND same dimensions as
   the simulation-type popup (only one is ever shown at a time, hover-triggered
   from a different part of the panel), for visual consistency between the two. ── */
#s1-obj-help-popup {
  position: absolute;
  top: 64px;
  left: 664px;
  width: 600px;
  z-index: 10;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.16);
  overflow: hidden;
  pointer-events: none;
  display: none;
}
#s1-obj-help-popup.show { display: block; }
.s1-obj-help-img {
  width: 100%;
  height: 312px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: linear-gradient(135deg,#2b2f36 0%,#5b626c 100%);
}
.s1-obj-help-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 150px;
}
.s1-obj-help-step-label {
  font-family: var(--font-label);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  letter-spacing: 0.01em;
}
#s1-obj-help-popup .s1-popup-body { line-height: 1.6; }
.s1-obj-help-captions { display: flex; flex-direction: column; gap: 6px; }
.s1-obj-help-captions strong { color: var(--ink); font-weight: 700; }

/* ── Simulation type hover/select popup ──────────────────────────────────── */
#s1-sim-popup {
  position: absolute;
  top: 64px;
  left: 664px;
  width: 600px;
  z-index: 10;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.16);
  overflow: hidden;
  pointer-events: none;
  display: none;
}
#s1-sim-popup.show { display: block; }

.s1-popup-img {
  width: 100%;
  height: 312px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.3s;
}

.s1-popup-badge {
  padding: 4px 14px;
  background: rgba(0,0,0,0.52);
  color: #fff;
  border-radius: 20px;
  font-size: var(--t-body);
  font-weight: var(--w-label);
  letter-spacing: 0.08em;
  font-family: var(--font-label);
}

.s1-popup-txt {
  padding: 13px 15px 15px;
}

.s1-popup-title {
  font-size: 14px;
  font-weight: var(--w-label);
  color: var(--ink);
  margin-bottom: 5px;
  font-family: "Archivo", sans-serif;
}

.s1-popup-body {
  font-size: var(--t-hint);
  color: var(--ink-soft);
  line-height: 1.55;
  font-family: var(--font-label);
}

/* ── Goal (note-only) tag bubble ─────────────────────────────────────────── */
.goal-sprite {
  position: absolute;
  pointer-events: none;
  z-index: 7;
}

.goal-bubble {
  background: #ffffff;
  color: #1a1a1a;
  border: 2px solid #2b2f36;
  font-size: var(--t-label);
  font-weight: var(--w-option);
  padding: 7px 12px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  cursor: grab;
  pointer-events: all;
  user-select: none;
  font-family: var(--ui-font, var(--font-ui));
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  transition: box-shadow .15s;
  width: max-content;
  min-width: var(--bubble-min-w, 250px);
  max-width: var(--bubble-max-w, 440px);
}
/* ── Settings-panel preview toggle: hide the bubble border across every tag
   type (Goals/Outputs/Load Cases share .goal-bubble; Materials use .mat-bubble;
   Joints use .jnt-bubble) — see #set-hide-bubble-border in the Settings panel. */
body.hide-bubble-border .goal-bubble,
body.hide-bubble-border .mat-bubble,
body.hide-bubble-border .jnt-bubble {
  border-color: transparent;
}

/* ── Title-only bubbles ignore the min-width floor ──────────────────────────
   The --bubble-min-w floor exists so bubbles WITH detail text don't shrink to
   an awkward sliver, but a bubble that's just a short title (no note/data/
   upload line) should hug that title tightly instead of leaving dead space.
   :has() lets this stay purely CSS-driven — no JS bubble-builder changes
   needed, and it re-evaluates automatically as note text is added/removed. */
.goal-bubble:not(:has(.goal-bubble-note:not(:empty))),
.mat-bubble:not(:has(.mat-bubble-data, .mat-bubble-nl, .mat-bubble-upload)),
.jnt-bubble:not(:has(.jnt-bubble-note, .jnt-bubble-upload)) {
  min-width: 0;
}

.goal-bubble-title { font-weight: var(--w-label); font-size: var(--t-label); white-space: normal; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; }
/* Class name deliberately ends in "-swatch": snapshots.js finds bubble colour
   squares by that suffix (SNAP_SWATCH_SELECTOR) to carry them into the PDF. */
.goal-bubble-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.3); flex-shrink: 0; }
.goal-bubble-note  { font-weight: var(--w-body); font-size: var(--t-body); opacity: 0.85; white-space: normal; box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere; }
.goal-bubble:hover { box-shadow: 0 3px 14px rgba(43,47,54,.35); }
/* Transparent hover bridge: extends hit area 12px above/left/right so the mouse
   doesn't lose :hover when crossing the gap toward the ✕/✎ buttons at top:-9px */
.goal-bubble::before {
  content: '';
  position: absolute;
  top: -12px; left: -12px; right: -12px;
  height: 12px;
  pointer-events: all;
}
.goal-bubble:active { cursor: grabbing; }

.goal-edit-btn {
  position: absolute;
  top: -9px; right: -9px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--orange);
  color: var(--orange);
  font-size: var(--t-arrow);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.goal-bubble:hover .goal-edit-btn { display: flex; }

.goal-delete-btn {
  position: absolute;
  top: -9px; left: -9px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--danger);
  color: var(--danger);
  font-size: var(--t-body);
  font-weight: var(--w-label);
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  transition: background .12s, color .12s;
}
.goal-delete-btn:hover { background: var(--danger); color: #fff; }
.goal-edit-btn:hover   { background: var(--orange); color: #fff; }
.goal-bubble:hover .goal-delete-btn { display: flex; }

/* ── Goal tag dialog ─────────────────────────────────────────────────────── */
/* Positioned to match the Materials/Joints dialogs (right side, vertically
   centered) instead of the screen center, for consistency across steps. */
#goal-tag-dlg {
  position: absolute;
  top: 50%; right: 230px;
  transform: translateY(-50%);
  z-index: 40;
  background: #fff;
  border: 1.5px solid rgba(232,116,30,0.4);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  width: 310px;
  max-height: calc(100% - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  display: none;
  pointer-events: all;
  font-family: var(--font-label);
}
#goal-tag-dlg.show { display: block; }

.goal-dlg-header {
  padding: 13px 16px 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-label);
  font-weight: var(--w-label);
  /* Dark, not orange: this is a field label ("Part Name — Editable"), and
     TYPOGRAPHY_STANDARD.html reserves orange for panel headers, active states,
     arrows and button backgrounds — labels are rgb(43,47,54). Matches
     .mat-dlg-label, which carries the identical label in the Materials dialog.
     It was orange while this row was the dialog's own header bar holding the
     Title input; it stopped being that when Title was replaced. */
  color: var(--ink);
  letter-spacing: 0.04em;
}

.goal-dlg-header-editable {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  outline: none;
  font-family: var(--font-entered) !important; /* beats forms.css's input[type=text] specificity */
  border-radius: 0;
}
.goal-dlg-header-editable:focus {
  background: rgba(232,116,30,0.05);
  border-bottom-color: var(--orange);
}
.goal-dlg-header-editable::placeholder { color: var(--c-muted); font-weight: var(--w-body); font-size: var(--t-ph); }
.goal-dlg-header-editable:focus::placeholder { color: var(--c-muted); font-weight: var(--w-body); font-size: var(--t-ph); }

.goal-dlg-body { padding: 12px 16px; }

/* ── Part-name rows (one per picked body/face) ───────────────────────────── */
#goal-part-rows { margin-bottom: 10px; }
#goal-part-rows:empty { margin-bottom: 0; }

.goal-part-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
/* Colour square — the part's own viewer colour, so the row is identifiable
   at a glance and matches the swatch drawn on the bubble. */
.goal-part-swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.25);
  flex-shrink: 0;
}
/* Wrapper carries the border so the editable name and the fixed (Body)/(Face)
   label read as ONE field — the kind is context, not something to type over. */
.goal-part-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--line, #d8dce2);
  border-radius: 6px;
  padding: 0 8px;
  background: #fff;
  transition: border-color 0.15s;
}
.goal-part-input {
  flex: 1;
  min-width: 0;
  border: none !important;   /* beats forms.css's input[type=text] */
  outline: none;
  background: transparent;
  padding: 6px 0 !important;
  font-family: var(--font-entered) !important;
  font-size: var(--t-body) !important;
  color: var(--ink);
  width: auto !important;
}
/* Focus must be completely invisible here. forms.css gives every focused text
   input an orange border plus a 3px --orange-soft glow, which on a borderless
   input nested in a bordered wrapper renders as a stray orange panel floating
   over the row. Specificity has to beat input[type=text]:focus, hence the
   descendant form rather than a bare .goal-part-input:focus. */
.goal-part-field .goal-part-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}
/* Locked: this part was already named by another tag. Muted fill signals
   "not yours to edit" while the name itself stays fully readable. */
.goal-part-field.is-locked { background: var(--bg, #f4f5f7); border-color: var(--line, #e3e6ea); }
.goal-part-input.is-locked { color: var(--c-muted); cursor: default; }
.goal-part-kind {
  flex-shrink: 0;
  padding-left: 6px;
  font-family: var(--font-label);
  font-size: var(--t-ph);
  color: var(--c-muted);
  user-select: none;
}

.goal-dlg-body textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: var(--font-entered);
  font-size: var(--t-body);
  color: var(--ink);
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color 0.15s;
  line-height: 1.5;
}
.goal-dlg-body textarea:focus { border-color: var(--orange); }
.goal-dlg-body textarea::placeholder { color: var(--c-muted); font-weight: var(--w-body); font-size: var(--t-ph); }
.goal-dlg-body textarea:focus::placeholder { color: var(--c-muted); font-weight: var(--w-body); font-size: var(--t-ph); }

.goal-dlg-footer {
  padding: 10px 16px 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid var(--line);
}

.goal-dlg-footer button {
  padding: 0 18px;
  height: 32px;
  min-width: 80px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-btn);
  font-size: var(--t-label);
  font-weight: var(--w-option);
  cursor: pointer;
  color: var(--ink);
  transition: background 0.12s;
  box-sizing: border-box;
}
.goal-dlg-footer button:hover { background: #f5f5f5; }
.goal-dlg-footer button.primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.goal-dlg-footer button.primary:hover { background: #c85a10; }