/* ============================================================================
   Goals Setup Flow — new spreadsheet-upload + Atlas-assisted flow
   Built on Anvil2 tokens. Extends shell.css (rail/topbar) from Owner Workspace.
   ============================================================================ */

.gs-main {
  grid-area: content;
  overflow-y: auto;
  background: var(--a2-color-blue-grey-10, #f6f7f9);
  padding: 40px 24px 80px;
}

.gs-wrap {
  max-width: 880px;
  margin: 0 auto;
}

.gs-screen { display: none; }
.gs-screen.is-active { display: block; animation: gsFadeIn .25s ease; }

@keyframes gsFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Step indicator ---------- */
.gs-steps {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 28px;
  font: 700 11px/1 var(--a2-font-family-base);
  color: var(--a2-color-neutral-400);
  text-transform: uppercase; letter-spacing: .06em;
}
.gs-steps__item { display: flex; align-items: center; gap: 6px; }
.gs-steps__dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--a2-color-neutral-100);
  color: var(--a2-color-neutral-500);
  display: grid; place-items: center;
  font-size: 10px;
}
.gs-steps__item.is-done .gs-steps__dot { background: var(--a2-color-green-500); color: #fff; }
.gs-steps__item.is-active .gs-steps__dot { background: var(--a2-color-blue-600); color: #fff; }
.gs-steps__item.is-active { color: var(--a2-color-neutral-900); }
.gs-steps__sep { width: 24px; height: 1px; background: var(--a2-color-neutral-200); }

/* ---------- Card ---------- */
.gs-card {
  background: #fff;
  border: 1px solid var(--a2-color-neutral-80);
  border-radius: var(--a2-radius-4, 12px);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  padding: 32px;
}
.gs-eyebrow {
  font: 700 11px/1 var(--a2-font-family-base);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--a2-color-blue-600);
  margin: 0 0 8px;
}
.gs-h1 { font: 700 24px/1.25 "Sofia Pro", var(--a2-font-family-base); margin: 0 0 10px; color: var(--a2-color-neutral-900); }
.gs-sub { font: 400 14px/1.6 var(--a2-font-family-base); color: var(--a2-color-neutral-600); margin: 0 0 28px; max-width: 620px; }

/* ---------- Entry fork ---------- */
.gs-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gs-option {
  border: 1.5px solid var(--a2-color-neutral-100);
  border-radius: var(--a2-radius-4, 10px);
  padding: 22px;
  text-align: left;
  cursor: pointer;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.gs-option:hover:not(.is-disabled) { border-color: var(--a2-color-blue-400); box-shadow: 0 4px 14px rgba(2,101,220,.10); transform: translateY(-1px); }
.gs-option__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--a2-color-blue-50); color: var(--a2-color-blue-600);
  display: grid; place-items: center;
}
.gs-option__title { font: 700 15px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.gs-option__desc { font: 400 13px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.gs-option.is-disabled { cursor: not-allowed; background: var(--a2-color-neutral-20); }
.gs-option.is-disabled .gs-option__icon { background: var(--a2-color-neutral-80); color: var(--a2-color-neutral-400); }
.gs-option.is-disabled .gs-option__title,
.gs-option.is-disabled .gs-option__desc { color: var(--a2-color-neutral-400); }
.gs-badge-soon {
  position: absolute; top: 16px; right: 16px;
  font: 700 10px/1 var(--a2-font-family-base);
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--a2-color-neutral-100); color: var(--a2-color-neutral-500);
  padding: 4px 8px; border-radius: 999px;
}

/* ---------- Buttons ---------- */
.gs-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border-radius: 8px; border: 1px solid transparent;
  font: 700 13px/1 var(--a2-font-family-base);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.gs-btn--primary { background: var(--a2-color-blue-600); color: #fff; }
.gs-btn--primary:hover { background: var(--a2-color-blue-700); }
.gs-btn--primary:disabled { background: var(--a2-color-neutral-200); cursor: not-allowed; }
.gs-btn--ghost { background: #fff; color: var(--a2-color-neutral-700); border-color: var(--a2-color-neutral-100); }
.gs-btn--ghost:hover { border-color: var(--a2-color-neutral-300); }
.gs-btn--text { background: transparent; color: var(--a2-color-blue-600); height: auto; padding: 0; }
.gs-actions { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.gs-actions .spacer { flex: 1; }

/* ---------- Info panel (messaging blocks from the doc) ---------- */
.gs-info {
  background: var(--a2-color-blue-10, #fafcff);
  border: 1px solid var(--a2-color-blue-100);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--a2-color-neutral-700);
  line-height: 1.6;
}
.gs-info strong { color: var(--a2-color-neutral-900); }
.gs-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gs-chip {
  font: 600 11.5px/1 var(--a2-font-family-base);
  background: #fff; border: 1px solid var(--a2-color-blue-100);
  color: var(--a2-color-blue-700);
  padding: 6px 10px; border-radius: 999px;
}
.gs-chip.is-sub { border-style: dashed; color: var(--a2-color-neutral-600); border-color: var(--a2-color-neutral-200); }

/* ---------- Dropzone ---------- */
.gs-dropzone {
  border: 2px dashed var(--a2-color-neutral-200);
  border-radius: 12px;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.gs-dropzone:hover, .gs-dropzone.is-drag { border-color: var(--a2-color-blue-400); background: var(--a2-color-blue-10); }
.gs-dropzone__icon {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--a2-color-blue-50); color: var(--a2-color-blue-600);
  display: grid; place-items: center;
}
.gs-dropzone__title { font: 700 14px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); margin-bottom: 4px; }
.gs-dropzone__sub { font: 400 12.5px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.gs-file-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--a2-color-neutral-100); border-radius: 10px;
  padding: 10px 14px; margin-top: 16px; background: #fff;
}
.gs-file-pill .material-icons-round { color: var(--a2-color-green-600); }
.gs-file-pill__name { font: 700 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.gs-file-pill__meta { font: 400 11px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); margin-top: 2px; }
.gs-file-pill__remove { margin-left: 8px; cursor: pointer; color: var(--a2-color-neutral-400); }

/* ---------- Thinking state ---------- */
.gs-thinking { text-align: center; padding: 56px 24px; }
.gs-thinking__orb {
  width: 64px; height: 64px; margin: 0 auto 22px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--a2-color-blue-600), var(--a2-color-blue-300), var(--a2-color-blue-600));
  display: grid; place-items: center;
  animation: gsSpin 1.6s linear infinite;
  position: relative;
}
.gs-thinking__orb::after {
  content: ""; position: absolute; inset: 6px; background: #fff; border-radius: 50%;
}
.gs-thinking__orb svg { position: relative; z-index: 1; width: 26px; height: 26px; }
@keyframes gsSpin { to { transform: rotate(360deg); } }
.gs-thinking__status {
  font: 700 14px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-900);
  min-height: 20px;
}
.gs-thinking__hint { font: 400 12.5px var(--a2-font-family-base); color: var(--a2-color-neutral-500); margin-top: 6px; }
.gs-thinking__skip { margin-top: 26px; }

/* ---------- Chat (Atlas clarifying questions) ---------- */
.gs-chat-shell {
  border: 1px solid var(--a2-color-neutral-80);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.gs-chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--a2-color-neutral-80);
}
.gs-chat-head__ava {
  width: 30px; height: 30px; border-radius: 8px; background: var(--a2-color-blue-600);
  display: grid; place-items: center; color: #fff;
}
.gs-chat-head__title { font: 700 14px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.gs-chat-head__sub { font: 400 12px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.gs-chat-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; max-height: 520px; overflow-y: auto; background: var(--a2-color-blue-grey-10, #f6f7f9); }
.gs-msg { display: flex; gap: 10px; max-width: 100%; animation: gsFadeIn .25s ease; }
.gs-msg__ava {
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  display: grid; place-items: center; color: #fff;
}
.gs-msg--atlas .gs-msg__ava { background: var(--a2-color-blue-600); }
.gs-msg--user { flex-direction: row-reverse; margin-left: auto; }
.gs-msg--user .gs-msg__ava { background: var(--a2-color-neutral-700); }
.gs-msg__bubble {
  background: #fff; border: 1px solid var(--a2-color-neutral-70); border-radius: 10px;
  border-top-left-radius: 2px; padding: 12px 14px; font-size: 13px; line-height: 1.55;
  color: var(--a2-color-neutral-800); max-width: 460px;
}
.gs-msg--user .gs-msg__bubble { border-top-left-radius: 10px; border-top-right-radius: 2px; background: var(--a2-color-blue-600); color: #fff; border-color: var(--a2-color-blue-600); }
.gs-msg__name { font: 700 10.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.gs-msg--user .gs-msg__name { color: rgba(255,255,255,.75); text-align: right; }

.gs-qcard {
  margin-top: 10px; background: var(--a2-color-blue-grey-10, #f6f7f9);
  border: 1px solid var(--a2-color-neutral-80); border-radius: 8px; padding: 12px;
}
.gs-map-row { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12.5px; }
.gs-map-row:last-child { margin-bottom: 0; }
.gs-map-row select, .gs-map-row input, .gs-qcard input[type=text], .gs-qcard input[type=date] {
  width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--a2-color-neutral-100);
  padding: 0 8px; font: 400 12.5px var(--a2-font-family-base); color: var(--a2-color-neutral-900);
}
.gs-map-row .src { background: #fff; border: 1px solid var(--a2-color-neutral-100); border-radius: 6px; padding: 6px 8px; color: var(--a2-color-neutral-600); }
.gs-map-row .arrow { text-align: center; color: var(--a2-color-neutral-300); }
.gs-yn { display: flex; gap: 8px; margin-top: 4px; }
.gs-yn button {
  height: 30px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--a2-color-neutral-100);
  background: #fff; font: 700 12px var(--a2-font-family-base); cursor: pointer; color: var(--a2-color-neutral-700);
}
.gs-yn button.is-selected { background: var(--a2-color-blue-600); border-color: var(--a2-color-blue-600); color: #fff; }
.gs-qcard .gs-confirm-btn {
  margin-top: 10px; height: 30px; padding: 0 14px; border-radius: 6px; border: none;
  background: var(--a2-color-blue-600); color: #fff; font: 700 12px var(--a2-font-family-base); cursor: pointer;
}
.gs-qcard .gs-confirm-btn:disabled { background: var(--a2-color-neutral-200); cursor: not-allowed; }
.gs-qcard.is-answered { opacity: .55; pointer-events: none; }
.gs-def-note { font-size: 11.5px; color: var(--a2-color-neutral-500); margin-top: 6px; font-style: italic; }
.gs-chat-progress {
  padding: 10px 20px; border-top: 1px solid var(--a2-color-neutral-80);
  font: 700 11px var(--a2-font-family-base); color: var(--a2-color-neutral-500);
  display: flex; align-items: center; gap: 10px;
}
.gs-chat-progress__bar { flex: 1; height: 5px; border-radius: 999px; background: var(--a2-color-neutral-80); overflow: hidden; }
.gs-chat-progress__fill { height: 100%; background: var(--a2-color-blue-600); border-radius: 999px; transition: width 250ms ease; width: 0%; }

/* ---------- Review & modify ---------- */
.gs-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--a2-color-neutral-80); margin-bottom: 20px; }
.gs-tab { padding: 10px 4px; margin-right: 22px; font: 700 13px var(--a2-font-family-base); color: var(--a2-color-neutral-500); cursor: pointer; border-bottom: 2px solid transparent; }
.gs-tab.is-active { color: var(--a2-color-blue-600); border-color: var(--a2-color-blue-600); }
.gs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gs-table th { text-align: left; font: 700 11px var(--a2-font-family-base); text-transform: uppercase; letter-spacing: .04em; color: var(--a2-color-neutral-500); padding: 8px 10px; border-bottom: 1px solid var(--a2-color-neutral-80); }
.gs-table td { padding: 9px 10px; border-bottom: 1px solid var(--a2-color-neutral-40); color: var(--a2-color-neutral-800); }
.gs-table td[contenteditable="true"] { cursor: text; border-radius: 5px; }
.gs-table td[contenteditable="true"]:hover { background: var(--a2-color-blue-10); outline: 1px dashed var(--a2-color-blue-200); }
.gs-table td[contenteditable="true"]:focus { background: #fff; outline: 1.5px solid var(--a2-color-blue-400); }
.gs-table tr:hover td { background: var(--a2-color-neutral-10); }
.gs-table td[contenteditable="true"]:hover, .gs-table td[contenteditable="true"]:focus { background: var(--a2-color-blue-10); }
.gs-pace-select { display:flex; gap:8px; margin-bottom:16px; }
.gs-pace-select button { height: 30px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--a2-color-neutral-100); background: #fff; font: 700 12px var(--a2-font-family-base); cursor: pointer; color: var(--a2-color-neutral-700); }
.gs-pace-select button.is-active { background: var(--a2-color-neutral-900); color: #fff; border-color: var(--a2-color-neutral-900); }
.gs-review-note { display: flex; gap: 8px; align-items: flex-start; background: var(--a2-color-yellow-50); border: 1px solid var(--a2-color-yellow-300); border-radius: 8px; padding: 10px 12px; margin-bottom: 18px; font-size: 12.5px; color: var(--a2-color-neutral-700); }
.gs-review-note .material-icons-round { color: var(--a2-color-yellow-600, #a67c00); font-size: 18px; }

/* ---------- Publish success ---------- */
.gs-success { text-align: center; padding: 40px 20px; }
.gs-success__icon { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--a2-color-green-100); color: var(--a2-color-green-600); display: grid; place-items: center; }
.gs-success__icon svg { width: 36px; height: 36px; }

/* ---------- Toast (Option 2 coming soon) ---------- */
.gs-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--a2-color-neutral-900); color: #fff; padding: 12px 18px; border-radius: 10px;
  font: 600 13px var(--a2-font-family-base); box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease;
  display: flex; align-items: center; gap: 10px; z-index: 50;
}
.gs-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ---------- Prototype ribbon ---------- */
.gs-proto-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #1f2733; color: #fff; font: 700 11px var(--a2-font-family-base);
  padding: 6px 16px; text-align: center; letter-spacing: .03em;
}
.gs-proto-ribbon b { color: var(--a2-color-yellow-400); }

/* ---------------------------------------------------------------------
   Live-parse additions
   Elements introduced when the flow started doing real work: what the
   parse found, tap-to-answer question options, and source provenance.
--------------------------------------------------------------------- */

.gs-thinking__found {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  text-align: left;
}

.gs-found-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--a2-color-neutral-700, #4a4a4a);
  background: var(--a2-color-neutral-50, #f7f8f9);
  border: 1px solid var(--a2-color-neutral-200, #e3e5e8);
  border-radius: 8px;
  padding: 9px 12px;
  animation: gsFoundIn .28s ease both;
}

.gs-found-row .material-icons-round,
.gs-found-row svg {
  font-size: 16px;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
  color: var(--a2-color-green-700, #1a7f37);
}

@keyframes gsFoundIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.gs-parse-error {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--a2-color-red-700, #b42318);
  background: var(--a2-color-red-50, #fef3f2);
  border: 1px solid var(--a2-color-red-200, #fecdc9);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
}

/* Tap-to-answer options — deliberately not a wall of text to reply to. */
.gs-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gs-opt {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--a2-color-neutral-800, #2b2b2b);
  background: #fff;
  border: 1px solid var(--a2-color-neutral-300, #d3d6da);
  border-radius: 8px;
  padding: 8px 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  text-align: left;
}

.gs-opt:hover:not(:disabled) {
  border-color: var(--a2-color-blue-600, #0265dc);
  color: var(--a2-color-blue-700, #0054b6);
}

.gs-opt.is-selected {
  background: var(--a2-color-blue-600, #0265dc);
  border-color: var(--a2-color-blue-600, #0265dc);
  color: #fff;
}

.gs-opt:disabled { cursor: default; opacity: .85; }

.gs-opt--other {
  font-weight: 500;
  color: var(--a2-color-neutral-600, #6b6b6b);
  border-style: dashed;
}

.gs-other { margin-top: 8px; }

.gs-other__input {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.gs-other__input input {
  flex: 1;
  font: inherit;
  font-size: 13px;
  padding: 8px 11px;
  border: 1px solid var(--a2-color-neutral-300, #d3d6da);
  border-radius: 8px;
}

.gs-other__input input:focus {
  outline: none;
  border-color: var(--a2-color-blue-600, #0265dc);
  box-shadow: 0 0 0 3px rgba(2, 101, 220, .12);
}

.gs-qcard.is-answered { opacity: .62; }

.gs-src-note {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--a2-color-neutral-600, #6b6b6b);
}

.gs-publish-summary {
  font-size: 13px;
  color: var(--a2-color-neutral-600, #6b6b6b);
  margin: -4px 0 18px;
}

/* ---------------------------------------------------------------------
   Error state for the parsing screen
   A spinning orb next to an error message reads as "still working" — stop
   the animation and recolour so the failure is unambiguous.
--------------------------------------------------------------------- */

.gs-thinking.is-error .gs-thinking__orb {
  animation: none;
  background: var(--a2-color-red-100, #fee4e2);
  border: 2px solid var(--a2-color-red-400, #f97066);
}

.gs-thinking.is-error .gs-thinking__orb svg path {
  fill: var(--a2-color-red-600, #d92d20);
}

.gs-thinking.is-error .gs-thinking__status {
  color: var(--a2-color-red-700, #b42318);
}

/* What the parse did and didn't see — turns a dead end into a diagnosis. */
.gs-diag {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
}

.gs-diag__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font: 400 12.5px/1.45 var(--a2-font-family-base);
  padding: 7px 11px;
  border-radius: 7px;
  border: 1px solid var(--a2-color-neutral-200, #e3e5e8);
  background: var(--a2-color-neutral-50, #f7f8f9);
  color: var(--a2-color-neutral-700, #4a4a4a);
}

.gs-diag__row .material-icons-round,
.gs-diag__row svg {
  font-size: 15px; width: 15px; height: 15px;
  flex: 0 0 15px; margin-top: 1px;
}

.gs-diag__row.is-ok .material-icons-round,
.gs-diag__row.is-ok svg { color: var(--a2-color-green-700, #1a7f37); }

.gs-diag__row.is-miss .material-icons-round,
.gs-diag__row.is-miss svg { color: var(--a2-color-red-600, #d92d20); }

.gs-diag__row.is-miss {
  border-color: var(--a2-color-red-200, #fecdc9);
  background: var(--a2-color-red-50, #fef3f2);
}