/* submit-v2.css — styles unique to the new editor flow.
 * Loads after style.css, so we can override or extend cleanly. */

.beta-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: #fff7d6;
  color: #8a6c00;
  border: 1px solid rgba(212, 160, 23, 0.4);
  vertical-align: middle;
}

.phase-banner {
  margin-bottom: 18px;
  padding: 12px 14px;
  background: #f0f6ff;
  border-left: 3px solid #1e3d78;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: #2a3a55;
}

.phase-banner kbd {
  display: inline-block;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 11px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom-width: 2px;
  border-radius: 3px;
}

.editor-mount {
  min-height: 280px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  line-height: 1.6;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.editor-mount:focus-within {
  border-color: #1e3d78;
  box-shadow: 0 0 0 3px rgba(30, 61, 120, 0.12);
}

/* ProseMirror writes into a child .ProseMirror element. Strip its default
 * outline (we put the focus ring on the wrapper) and tighten typography. */
.editor-mount .ProseMirror {
  outline: none;
  min-height: 250px;
}

.editor-mount .ProseMirror p {
  margin: 0 0 0.6em 0;
}

.editor-mount .ProseMirror p:last-child {
  margin-bottom: 0;
}

.editor-mount .ProseMirror ul,
.editor-mount .ProseMirror ol {
  padding-left: 1.6em;
  margin: 0.2em 0 0.6em 0;
}

.editor-mount .ProseMirror li {
  margin: 0.1em 0;
}

.editor-mount .ProseMirror li > p {
  margin: 0;
}

.editor-mount .ProseMirror h1,
.editor-mount .ProseMirror h2,
.editor-mount .ProseMirror h3 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  margin: 0.6em 0 0.3em 0;
  line-height: 1.25;
}

/* Top-level h1 acts as a section divider for the ghost scaffold. Style it
 * smaller and softer than a true page-title h1 so it reads as a label,
 * not a shouted heading. */
.editor-mount .ProseMirror h1 {
  font-size: 1.05em;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6a7080;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 4px;
  margin-top: 1.2em;
}
.editor-mount .ProseMirror h1:first-child { margin-top: 0; }

.editor-mount .ProseMirror h2 { font-size: 1.25em; }
.editor-mount .ProseMirror h3 { font-size: 1.1em; }

/* Ghost scaffold — faded, non-selectable hint text rendered inside empty
 * paragraphs under each section heading. ProseMirror inserts this as a
 * widget decoration, so it lives outside the document and disappears
 * automatically as soon as the paragraph gains real content. */
.ghost-scaffold-prompt {
  display: inline;
  color: rgba(40, 50, 70, 0.38);
  font-style: italic;
  pointer-events: none;
  user-select: none;
  /* Ensure the widget doesn't push the cursor off its baseline */
  white-space: pre-wrap;
}

/* ─── Tag pills ──────────────────────────────────────────────────────────────
 * Inline marks rendered as colored pill backgrounds. The colors are chosen
 * to match (loosely) the existing dashboard palette: green for wins, blue
 * for updates, orange for blockers, purple for networking. */
.tag-mark {
  display: inline;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 3px;
  border: 1px solid;
  font-weight: 500;
  font-size: 0.95em;
  /* Avoid the pill being broken across lines mid-word */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.tag-mark[data-tag-kind='win'] {
  background: rgba(38, 178, 95, 0.12);
  color: #1e7e44;
  border-color: rgba(38, 178, 95, 0.32);
}
.tag-mark[data-tag-kind='update'] {
  background: rgba(30, 130, 220, 0.12);
  color: #155a9c;
  border-color: rgba(30, 130, 220, 0.32);
}
.tag-mark[data-tag-kind='blocker'] {
  background: rgba(220, 100, 30, 0.12);
  color: #b04400;
  border-color: rgba(220, 100, 30, 0.32);
}
.tag-mark[data-tag-kind='network'] {
  background: rgba(155, 80, 220, 0.12);
  color: #6420a8;
  border-color: rgba(155, 80, 220, 0.32);
}

/* ─── Slash menu ─────────────────────────────────────────────────────────────
 * Suggestion-driven popup. Anchored absolute below the `/` trigger.
 * Mouse and keyboard navigation share the same selection state. */
.slash-menu {
  z-index: 100;
  min-width: 260px;
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  font-size: 14px;
}
.slash-menu__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #1a1f2c;
}
.slash-menu__item:hover {
  background: #f0f4fb;
}
.slash-menu__item.is-selected {
  background: #1e3d78;
  color: #fff;
}
.slash-menu__label {
  font-weight: 500;
  font-size: 14px;
}
.slash-menu__hint {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
}
.slash-menu__item.is-selected .slash-menu__hint {
  color: rgba(255, 255, 255, 0.78);
}
.slash-menu__empty {
  padding: 10px;
  font-size: 13px;
  color: #6a7080;
  font-style: italic;
}

/* ─── Bubble menu (selection toolbar) ────────────────────────────────────────
 * Floating row of tag buttons that appears above the user's selection. Light
 * styling matches the slash menu — feels like a peer of the editor, not a
 * heavy interruption. Active states pick up the matching tag color. */
.bubble-menu {
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  font-size: 13px;
  white-space: nowrap;
}

.bubble-menu__btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #1a1f2c;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.08s ease;
}
.bubble-menu__btn:hover {
  background: #f0f4fb;
}

/* Active state per kind: tinted background + matching foreground.
 * Mirrors the inline tag-mark colors so the relationship reads at a glance. */
.bubble-menu__btn.is-active[data-kind='win'] {
  background: rgba(38, 178, 95, 0.16);
  color: #1e7e44;
}
.bubble-menu__btn.is-active[data-kind='update'] {
  background: rgba(30, 130, 220, 0.16);
  color: #155a9c;
}
.bubble-menu__btn.is-active[data-kind='blocker'] {
  background: rgba(220, 100, 30, 0.16);
  color: #b04400;
}
.bubble-menu__btn.is-active[data-kind='network'] {
  background: rgba(155, 80, 220, 0.16);
  color: #6420a8;
}

.bubble-menu__sep {
  width: 1px;
  height: 18px;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 3px;
}

.bubble-menu__btn--untag {
  color: #6a7080;
  font-weight: 500;
}
.bubble-menu__btn--untag:hover {
  background: rgba(176, 60, 60, 0.1);
  color: #b04040;
}
.bubble-menu__btn--untag.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ─── Hover tag tooltip ──────────────────────────────────────────────────────
 * Custom mini-pill that appears above any hovered tag-mark, styled to match
 * the kind's palette. Replaces the native browser title tooltip (which we
 * removed) with something that matches the rest of the editor's design. */
.tag-tooltip {
  position: absolute;
  z-index: 95;
  padding: 2px 9px;
  border-radius: 4px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* Don't trigger transitions during repositioning */
  transition: none;
}
/* Each background is the OPAQUE equivalent of rgba(<kind>, 0.18) over
 * white — same pastel feel as the inline pills, but solid so the tooltip
 * doesn't bleed underlying text through when it floats over the editor. */
.tag-tooltip[data-kind='win'] {
  background: #d8f1e2;
  color: #1e7e44;
  border-color: rgba(38, 178, 95, 0.5);
}
.tag-tooltip[data-kind='update'] {
  background: #d7e9f9;
  color: #155a9c;
  border-color: rgba(30, 130, 220, 0.5);
}
.tag-tooltip[data-kind='blocker'] {
  background: #f9e3d7;
  color: #b04400;
  border-color: rgba(220, 100, 30, 0.5);
}
.tag-tooltip[data-kind='network'] {
  background: #ede0f9;
  color: #6420a8;
  border-color: rgba(155, 80, 220, 0.5);
}

/* ─── Rollup panel ───────────────────────────────────────────────────────────
 * Four cards in a 2×2 grid (1 column on narrow screens) showing the live
 * extracted content per tag kind. Each card has a colored left edge that
 * matches the tag's palette and intensifies when the section has items. */
.rollup-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 4px;
}
@media (max-width: 720px) {
  .rollup-panel {
    grid-template-columns: 1fr;
  }
}

.rollup-section {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 3px solid;
  border-radius: 6px;
  transition: border-left-color 0.15s ease, background-color 0.15s ease;
}
.rollup-section[data-kind='win']     { border-left-color: rgba(38, 178, 95, 0.3); }
.rollup-section[data-kind='update']  { border-left-color: rgba(30, 130, 220, 0.3); }
.rollup-section[data-kind='blocker'] { border-left-color: rgba(220, 100, 30, 0.3); }
.rollup-section[data-kind='network'] { border-left-color: rgba(155, 80, 220, 0.3); }

/* When there's content, intensify the accent. */
.rollup-section.has-items[data-kind='win']     { border-left-color: #1e7e44; background: #fafdfb; }
.rollup-section.has-items[data-kind='update']  { border-left-color: #155a9c; background: #fafcff; }
.rollup-section.has-items[data-kind='blocker'] { border-left-color: #b04400; background: #fffcfa; }
.rollup-section.has-items[data-kind='network'] { border-left-color: #6420a8; background: #fdfaff; }

.rollup-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.rollup-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1a1f2c;
}

.rollup-count {
  font-size: 12px;
  font-weight: 500;
  color: #6a7080;
  font-variant-numeric: tabular-nums;
}

.rollup-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: #1a1f2c;
}
.rollup-list li {
  margin-bottom: 4px;
  /* Wrap long runs cleanly */
  overflow-wrap: anywhere;
}
.rollup-list li:last-child {
  margin-bottom: 0;
}

.rollup-empty {
  margin: 2px 0 0;
  font-size: 13px;
  font-style: italic;
  color: rgba(40, 50, 70, 0.42);
}

/* ─── Submit error / success ─────────────────────────────────────────────── */
.submit-error {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fff3f0;
  border: 1px solid rgba(200, 60, 30, 0.3);
  border-radius: 6px;
  color: #8a2010;
  font-size: 13px;
  line-height: 1.45;
}

.success-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 60px auto;
  padding: 40px 32px;
  max-width: 480px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(38, 178, 95, 0.16);
  color: #1e7e44;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}

.success-screen h2 {
  margin: 0;
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  font-weight: 400;
  color: #1a1f2c;
}

.success-screen p {
  margin: 0;
  color: #4a5066;
  font-size: 15px;
}

.success-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* ─── Help button (header) ───────────────────────────────────────────────── */
.btn-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  color: #6a7080;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 8px;
}
.btn-help:hover {
  background: #f0f4fb;
  color: #1e3d78;
  border-color: rgba(30, 61, 120, 0.4);
}

/* ─── Tour ────────────────────────────────────────────────────────────────
 * Spotlight + callout. The spotlight uses a giant outset box-shadow trick to
 * darken everything outside its bounds, no matter the viewport size. */
.tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: transparent; /* shadow on the spotlight provides the dim */
  cursor: default;
}

.tour-spotlight {
  position: absolute;
  z-index: 201;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 22, 40, 0.55),
              0 0 0 2px rgba(255, 255, 255, 0.85);
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.tour-callout {
  position: absolute;
  z-index: 202;
  width: 340px;
  padding: 18px 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  transition: top 0.2s ease, left 0.2s ease;
}

.tour-callout__title {
  margin: 0 0 6px;
  font-family: 'DM Serif Display', serif;
  font-size: 19px;
  font-weight: 400;
  color: #1a1f2c;
}

.tour-callout__body {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #4a5066;
}

.tour-callout__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tour-callout__progress {
  font-size: 12px;
  color: #6a7080;
  font-variant-numeric: tabular-nums;
}

.tour-callout__buttons {
  display: flex;
  gap: 6px;
}

.tour-btn {
  padding: 6px 14px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #1a1f2c;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tour-btn:hover {
  background: #f0f4fb;
}
.tour-btn--primary {
  background: #1e3d78;
  color: #fff;
  border-color: #1e3d78;
}
.tour-btn--primary:hover {
  background: #25478a;
}
.tour-btn--ghost {
  border: 0;
  color: #6a7080;
}
.tour-btn--ghost:hover {
  background: rgba(106, 112, 128, 0.1);
}

.editor-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #6a7080;
}

.inspect-output {
  margin-top: 18px;
  padding: 14px 16px;
  background: #f7f8fb;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  font-size: 13px;
}

.inspect-output summary {
  cursor: pointer;
  font-weight: 500;
  color: #1e3d78;
}

.inspect-output h4 {
  margin: 14px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6a7080;
}

.inspect-output pre {
  margin: 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}