/* ════════════════════════════════════════════════════════════════
   Unified topbar + pill + ceremony sub-bar
   Single source of truth. Every page imports this.
   See Plans/nav-unification.md for grammar.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Display type scale */
  --display-xl: clamp(4rem, 8vw, 6.5rem);
  --display-lg: clamp(3.5rem, 8vw, 5.5rem);
  --display-md: clamp(2.5rem, 5vw, 3.5rem);
  --display-sm: 1.5rem;

  /* Button tokens */
  --btn-radius: 6px;
  --btn-py: 0.95rem;
  --btn-px: 1.4rem;
}

/* ─────────── UTILITIES ─────────── */

.link-reset { text-decoration: none; color: inherit; }

/* ─────────── ACCESSIBILITY ─────────── */

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 2px;
}
.nav-brand:focus-visible,
.phasenav-item:focus-visible {
  outline-offset: 3px;
}

/* ─────────── BUTTONS (shared system) ─────────── */

.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--btn-radius); border: 1px solid transparent;
  font-family: var(--ui); font-weight: 600; font-size: 0.95rem;
  text-decoration: none; transition: all 0.15s; cursor: pointer;
  letter-spacing: 0.02em;
}
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--rule); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: transparent; }
.btn-ghost:hover { color: var(--ink); background: var(--paper-shade); }
.btn-block { display: flex; width: 100%; text-align: center; }

/* ─────────── SIGN IDENTITY STRIP ─────────── */

.sign-identity {
  background: var(--paper-shade);
  border-bottom: 1px solid var(--rule);
  padding: 0.4rem 1.75rem;
  text-align: center;
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.sign-identity strong {
  color: var(--ink); font-weight: 600; margin: 0 0.4rem;
}
.sign-identity a {
  color: var(--draft); text-decoration: none; margin-left: 0.25rem;
}
.sign-identity a:hover { color: var(--ink); }

/* ─────────── FEED LEGEND ─────────── */

.feed-legend {
  display: flex; gap: 1.25rem; margin-bottom: 0.75rem;
  font-family: var(--ui); font-size: 0.68rem; color: var(--draft);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.feed-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.feed-legend .dot { width: 7px; height: 7px; border-radius: 50%; }
.feed-legend .kind-signed { background: var(--yellow); }
.feed-legend .kind-edited { background: var(--ink); }
.feed-legend .kind-maturity { background: var(--seal); }

/* ─────────── MAIN TOPBAR ─────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ink);
  color: var(--paper);
  padding: 0.65rem 1.75rem;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 1.25rem;
  align-items: center;
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* Brand — clickable home link */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  transition: opacity 0.15s;
}
.nav-brand:hover { opacity: 0.85; }
.nav-brand .dot {
  width: 7px; height: 7px; background: var(--yellow); border-radius: 50%;
}

/* Page label (muted — tells you where you are) */
.nav-label {
  color: rgba(250, 247, 241, 0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

/* State pill area (center) */
.nav-state {
  justify-self: center;
  display: inline-flex;
  align-items: center;
}

/* Session (right) */
.nav-session {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  justify-self: end;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.nav-session .me {
  color: var(--yellow);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.nav-session a {
  color: rgba(250, 247, 241, 0.7);
  text-decoration: none;
}
.nav-session a:hover { color: var(--paper); }
.nav-session .btn-login {
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(250, 247, 241, 0.35);
  border-radius: 4px;
  color: var(--paper);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.62rem;
}
.nav-session .btn-login:hover {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.nav-session .divider {
  width: 1px; height: 14px; background: rgba(250, 247, 241, 0.2);
}

/* ─────────── PILL — tiny (topbar) ─────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.85rem;
  border-radius: 100px;
  font-family: var(--ui);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* State variants — identical palette across all sizes */
.pill.live         { background: var(--yellow); color: var(--ink); }
.pill.live .dot    { background: var(--ink); animation: pill-pulse 1.4s infinite; }

.pill.published    { background: var(--ink); color: var(--paper); border: 1px solid rgba(250,247,241,0.2); }
.pill.published .dot { background: var(--yellow); }

.pill.draft        { background: var(--paper-shade); color: var(--ink-soft); }
.pill.draft .dot   { background: var(--draft); }

.pill.alert        { background: var(--red); color: var(--paper); }
.pill.alert .dot   { background: var(--paper); }

.pill.empty        { background: var(--paper); color: var(--draft); border: 1px dashed var(--rule); }
.pill.empty .dot   { background: var(--draft); }

@keyframes pill-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Topbar-specific pill overrides — live state is hidden in the topbar
   because the full-width strip below takes over the messaging. */
.nav-state .pill.live { display: none; }

/* ─────────── PILL — normal (cover) ─────────── */

.pill-normal {
  padding: 0.5rem 1.15rem;
  font-size: 0.72rem;
}
.pill-normal .dot { width: 8px; height: 8px; }

/* ─────────── PHASE NAV — persistent under topbar ─────────────────
   The four ceremony phases: Briefing · Documento · Firmas · Agreement.
   Always visible to facilitators. Non-facilitators see Firmas +
   Agreement only. Current phase is ink + bold, others are muted
   graphite links. Replaces the older yellow pill-strip that
   broadcast "Ceremonia en vivo" — the ceremony is a sync meeting,
   not an async announcement, so status broadcasting was noise. */
.phasenav {
  padding: 0.75rem 1.75rem;
  text-align: center;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Not sticky. The .nav above stays pinned on scroll; phasenav scrolls
     away with content so it can't overlap page-specific sub-bars like
     .sign-identity (which sits right below it in the document flow). */
}
.phasenav-item {
  color: var(--ink-soft);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.15s;
}
.phasenav-item:hover {
  opacity: 1;
}
.phasenav-item.current {
  color: var(--ink);
  opacity: 1;
}
.phasenav-sep {
  margin: 0 0.75rem;
  color: var(--draft);
}

/* ─────────── PRIMARY NAV — team-scoped destinations (below topbar) ──
   Renders when team_id is present in the render context. Sits between
   the .nav brand row and the .phasenav ceremony sub-bar.
   Role-filtered: Setup + Agente only render for facilitators.       */
.primary-nav {
  padding: 0.55rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-shade);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.primary-nav-item {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  transition: color 0.12s;
  position: relative;
}
.primary-nav-item:hover {
  color: var(--ink);
}
.primary-nav-item.active {
  color: var(--ink);
  font-weight: 700;
}
.primary-nav-item.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0.55rem;
  right: 0.55rem;
  height: 2px;
  background: var(--yellow);
  border-radius: 1px;
}

/* Separator between member items and fac-only items */
.primary-nav-sep {
  width: 1px;
  height: 14px;
  background: var(--rule);
  margin: 0 0.4rem;
  flex-shrink: 0;
}

/* ─────────── DRIFT BADGE ────────────────────────────────────────
   Small chip shown when an item's next_review_date has passed.
   Renders in _slot.html next to the slot-meta pill, and can also
   be used inline in the home dashboard stats line. */
.drift-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  background: rgba(201, 51, 43, 0.1);
  color: var(--red);
  font-family: var(--ui);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-left: 0.5rem;
  white-space: nowrap;
}
.drift-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}
.stat-drift {
  color: var(--red);
}
.stat-drift .n {
  color: var(--red) !important;
}

/* ─────────── DRIFT OBSERVATIONS — facilitator notes on drifted items */
.drift-observations {
  margin: 1.25rem 0 0.5rem;
  padding: 0.9rem 1.1rem;
  background: rgba(201, 51, 43, 0.04);
  border-left: 2px solid rgba(201, 51, 43, 0.35);
  border-radius: 0 6px 6px 0;
}
.drift-observations-header {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}
.drift-observations-label {
  font-family: var(--ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.drift-observations-hint {
  font-family: var(--body);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-mid);
}
.drift-observations-list {
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
}
.drift-observation {
  padding: 0.55rem 0;
  border-bottom: 1px dotted var(--rule-soft);
}
.drift-observation:last-child { border-bottom: none; }
.drift-observation-body {
  font-family: var(--body);
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.45;
}
.drift-observation-meta {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--draft);
  margin-top: 0.2rem;
}
.drift-observation-meta .author { color: var(--ink-mid); }
.drift-observation-meta .sep { color: var(--rule); }
.drift-observation-delete {
  background: none; border: none; padding: 0;
  color: var(--draft); font-family: var(--mono); font-size: 0.7rem;
  cursor: pointer; text-decoration: underline;
}
.drift-observation-delete:hover { color: var(--red); }
.drift-observation-form {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}
.drift-observation-input {
  flex: 1;
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  resize: vertical;
}
.drift-observation-input:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 1px;
  border-color: var(--ink);
}
.drift-observation-submit {
  align-self: stretch;
  padding: 0 1rem;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 4px;
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.drift-observation-submit:hover {
  background: var(--red);
}

/* ════════════════════════════════════════════════════════════════
   SECTION CRUD (rename / move / delete / add)
   Editorial facilitator affordances — always visible in edit mode.
   The rename input uses the same Fraunces italic display type as the
   label so the transition feels like the text becomes writable, not
   like an admin input appeared.
   ════════════════════════════════════════════════════════════════ */

/* When controls are present, expand the heading grid to fit them. */
.slot-heading:has(.slot-controls) {
  grid-template-columns: 1fr auto auto;
}

/* Rename trigger — clickable title with a small pencil hint so the
   affordance is discoverable without shouting. */
.slot-name.editable {
  cursor: text;
  transition: text-shadow 0.15s, color 0.15s;
}
.slot-name.editable:hover {
  text-shadow: 0 1px 0 var(--rule);
}
.slot-name.editable:focus-visible {
  outline: none;
  text-shadow: 0 1px 0 var(--yellow-deep);
}
.slot-name-edit-hint {
  display: inline-block;
  margin-left: 0.45rem;
  font-family: var(--ui);
  font-style: normal;
  font-size: 0.78rem;
  color: var(--draft);
  vertical-align: 0.1em;
  opacity: 0.6;
  transition: opacity 0.12s, color 0.12s;
}
.slot-name.editable:hover .slot-name-edit-hint {
  opacity: 1;
  color: var(--yellow-deep);
}

/* Inline rename form — the input inherits the section's italic display
   type so renaming feels like authoring, not like a form field. */
.slot-renaming .slot-heading {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--yellow);
}
.slot-rename-form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
}
.slot-name-input {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: "opsz" 60, "SOFT" 25;
  line-height: 1.1;
  background: #FFFDF0;
  border: none;
  border-bottom: 1px dashed var(--yellow-deep);
  padding: 0.1rem 0.2rem;
  width: 100%;
}
.slot-name-input:focus {
  outline: none;
  border-bottom-color: var(--ink);
  background: #FFF9D6;
}

/* Save / cancel hairline buttons for rename + add */
.btn-slot-save,
.btn-slot-cancel {
  width: 26px; height: 26px;
  border: none; border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.btn-slot-save {
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
}
.btn-slot-save:hover { background: var(--ink); color: var(--yellow); }
.btn-slot-cancel {
  background: transparent;
  color: var(--draft);
  border: 1px solid var(--rule);
}
.btn-slot-cancel:hover { color: var(--ink); border-color: var(--ink); }

/* Delete control — mirrors the drag handle on the right margin. Same
   grammar: bare glyph, gray by default, hover-reveal, red on button
   hover. The heading keeps its clean 1fr-auto grid (label + pill). */
.slot-delete {
  position: absolute;
  right: -1.9rem;
  top: 0.25rem;
  width: 22px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--rule);
  font-family: var(--ui);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
  transition: color 0.12s, background 0.12s, opacity 0.18s;
}
.slot:hover .slot-delete,
.slot-delete:focus-visible {
  opacity: 1;
  color: var(--ink-mid);
}
.slot-delete:hover {
  color: var(--red);
  background: rgba(201, 51, 43, 0.08);
}
.slot-delete:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* Narrow viewport: the right margin disappears, so make the delete
   inline with the heading — still subtle. */
@media (max-width: 1200px) {
  .slot-delete {
    position: static;
    opacity: 1;
    margin-left: 0.4rem;
    height: 24px;
    width: 24px;
  }
}

/* Empty-statement placeholder — shown on a fresh non-list section before
   the team writes its first content. Click the text itself to edit. */
.statement.empty-statement {
  color: var(--draft);
  font-size: 0.95rem;
  padding: 0.5rem 0;
}
.statement.empty-statement em {
  color: var(--draft);
}

/* ─────────── Click-to-edit statement ─────────── */

.statement.editable {
  cursor: text;
  border-radius: 2px;
  padding: 0.1rem 0.3rem;
  margin: -0.1rem -0.3rem;
  transition: background 0.12s, box-shadow 0.12s;
}
.statement.editable:hover {
  background: #FFFDF0;
  box-shadow: inset 0 -1px 0 var(--yellow-deep);
}
.statement.editable:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  background: #FFFDF0;
}

/* ─────────── Save-state indicator + edit hint ─────────── */

.slot-meta .save-state,
.edit-meta .save-state {
  font-family: var(--ui);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.save-state.saved {
  color: var(--seal);
  animation: save-fade 2.5s ease-out forwards;
}
.save-state.saved::before {
  content: "✓ ";
  color: var(--yellow-deep);
  font-weight: 700;
}
@keyframes save-fade {
  0%, 60%  { opacity: 1; }
  100%     { opacity: 0; }
}
/* Inside an active edit textarea's meta strip we keep the indicator
   sticky (no fade) because the user is still in edit mode. */
.slot.editing .save-state.saved,
li.editing .save-state.saved { animation: none; opacity: 1; }
.edit-meta {
  font-family: var(--ui);
  font-size: 0.6rem;
  color: var(--ink-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.edit-hint {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.55rem;
  font-family: var(--ui);
  font-size: 0.68rem;
  color: var(--draft);
  letter-spacing: 0.05em;
}
.edit-hint kbd {
  font-family: var(--ui);
  font-size: 0.62rem;
  padding: 0.1rem 0.35rem;
  background: var(--paper-shade);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink-soft);
  font-weight: 600;
}
.edit-hint-sep { color: var(--rule); }

/* ─────────── Drag handles (sections + list entries) ─────────── */

.slot {
  position: relative;
}
.slot-drag-handle {
  position: absolute;
  left: -1.9rem;
  top: 0.25rem;
  width: 22px; height: 32px;
  background: transparent;
  border: none;
  color: var(--rule);
  font-family: var(--ui);
  font-size: 0.85rem;
  line-height: 1;
  cursor: grab;
  letter-spacing: -0.1em;
  border-radius: 3px;
  transition: color 0.12s, background 0.12s, transform 0.12s, opacity 0.18s;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
}
.slot:hover .slot-drag-handle,
.slot-drag-handle:focus-visible {
  opacity: 1;
  color: var(--ink-mid);
}
.slot-drag-handle:hover {
  color: var(--ink);
  background: var(--paper-shade);
}
.slot-drag-handle:active { cursor: grabbing; }
.slot-drag-handle:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* Sortable states (section drag only post-unify) */
.slot--ghost {
  opacity: 0.45;
  background: var(--paper-shade);
  outline: 1px dashed var(--yellow-deep);
}
.slot--chosen { cursor: grabbing; }
.slot--dragging {
  box-shadow: 0 12px 28px rgba(17,17,17,0.12);
  background: var(--paper);
}

/* Under 1200px the left margin is tight, so bring the handle inline. */
@media (max-width: 1200px) {
  .slot-drag-handle {
    position: static;
    opacity: 1;
    display: inline-block;
    margin-bottom: 0.3rem;
  }
}

/* ─────────── Undo toast stack ─────────── */

#toast-stack {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 100;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.6rem;
  max-width: 360px;
  pointer-events: none;
}
.toast-slide {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(17,17,17,0.2);
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  animation: toast-in 0.2s ease-out;
}
.toast-slide strong {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--paper);
}
.toast-slide .toast-msg {
  line-height: 1.45;
}
.toast-slide .toast-undo {
  background: var(--yellow);
  color: var(--ink);
  border: none;
  padding: 0.45rem 0.95rem;
  border-radius: 3px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s;
}
.toast-slide .toast-undo:hover { transform: translateY(-1px); }
.toast-slide .toast-dismiss {
  background: transparent;
  color: rgba(250,247,241,0.55);
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  line-height: 1;
  border-radius: 3px;
}
.toast-slide .toast-dismiss:hover {
  color: var(--paper);
  background: rgba(250,247,241,0.08);
}
.toast-slide--out {
  animation: toast-out 0.45s ease-in forwards;
}
@keyframes toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateY(0);   opacity: 1; }
  to   { transform: translateY(8px); opacity: 0; }
}

/* ─────────── "+ Nueva sección" (dashed add affordance) ─────────── */

.section-add {
  margin: 1rem 0 2.5rem;
}
.section-add-btn {
  background: none;
  border: 1px dashed var(--rule);
  border-radius: 4px;
  padding: 0.85rem 1.2rem;
  font-family: var(--ui);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-mid);
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: all 0.15s;
}
.section-add-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: #FFFDF0;
}
.section-add-form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: #FFFDF0;
  border: 1px solid var(--yellow);
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.12);
}
.section-add-form[hidden] { display: none; }
.section-add-input {
  font-family: var(--display);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--yellow-deep);
  padding: 0.15rem 0.25rem;
  font-variation-settings: "opsz" 48, "SOFT" 20;
}
.section-add-input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.section-add-actions {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

/* ─────────── PROPUESTAS / COMPROMISOS ─────────── */

.propuestas-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px dotted var(--rule);
}
.propuestas-header {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1rem;
}
.propuestas-label {
  font-family: var(--ui); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft);
}
.propuestas-count {
  font-family: var(--mono); font-size: 0.7rem; color: var(--draft);
  background: var(--paper-shade); padding: 0.15rem 0.45rem; border-radius: 3px;
}

/* Table layout — Propuesta | Responsable | Plazo | Notas | (actions) */
.propuestas-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--body);
  font-size: 0.92rem;
  table-layout: fixed;
}
.propuestas-table .col-propuesta { width: 32%; }
.propuestas-table .col-resp      { width: 14%; }
.propuestas-table .col-plazo     { width: 14%; }
.propuestas-table .col-notas     { width: 32%; }
.propuestas-table .col-actions   { width: 8%; }

.propuestas-table thead th {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.88rem;
  background: rgba(0, 0, 0, 0.02);
}

.propuestas-table tbody td {
  padding: 0;
  border-bottom: 1px solid var(--rule-faint, var(--rule));
  vertical-align: top;
  height: 72px;
}

/* Propuesta cell — container that clips overflow so long content shrinks. */
.propuesta-cell .editor-mount,
.propuesta-cell .cell-view {
  display: block;
  padding: 0.55rem 0.7rem;
  height: 100%;
  min-height: 72px;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 1.35;
}
.propuesta-cell .cell-view {
  color: var(--ink);
}
.propuesta-cell.cell-resp .editor-mount,
.propuesta-cell.cell-plazo .editor-mount,
.propuesta-cell.cell-resp .cell-view,
.propuesta-cell.cell-plazo .cell-view {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-mid);
}

/* Auto-shrink text that overflows the fixed-height cell. JS sets --fit. */
.propuesta-cell .ProseMirror,
.propuesta-cell .cell-view {
  font-size: calc(1em * var(--fit, 1));
}

/* Empty state row */
.propuesta-empty-row td {
  height: auto;
  padding: 1.25rem 0.7rem;
  text-align: center;
  color: var(--draft);
  font-style: italic;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

/* Action cell */
.propuesta-cell.cell-actions {
  text-align: right;
  vertical-align: middle;
  padding: 0 0.4rem;
}
.propuesta-delete {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--rule);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.2rem 0.35rem;
  opacity: 0.35;
  transition: color 0.12s, opacity 0.12s;
  border-radius: 3px;
}
.propuesta-row:hover .propuesta-delete { opacity: 0.9; }
.propuesta-delete:hover { color: var(--red); background: rgba(201, 51, 43, 0.08); opacity: 1; }

/* Add-row button */
.propuestas-add-row { margin-top: 0.6rem; }
.propuestas-add-btn {
  background: none;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 0.55rem 1rem;
  font-family: var(--ui);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
}
.propuestas-add-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-shade);
}

/* Compromisos table (agreement view) */
.compromisos-table {
  width: 100%; border-collapse: collapse; margin-top: 1rem;
  font-family: var(--body); font-size: 0.9rem;
}
.compromisos-table th {
  font-family: var(--ui); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
  text-align: left; padding: 0.6rem 0.85rem; border-bottom: 2px solid var(--ink);
}
.compromisos-table td {
  padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--rule-soft);
  vertical-align: top; line-height: 1.55;
}
.compromisos-table tr:last-child td { border-bottom: none; }
.compromisos-table .col-objetivo { color: var(--ink-soft); font-size: 0.85rem; }
.compromisos-table .col-responsable {
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft);
  white-space: nowrap;
}
.compromisos-table .col-responsable.pending { color: var(--red); font-style: italic; }

/* ─────────── SIGN DUAL-COMMITMENT COPY ─────────── */

.sign-commitment-copy {
  font-family: var(--body); font-size: 0.92rem; line-height: 1.55;
  color: var(--ink-soft); margin-bottom: 1rem; padding: 0.75rem 1rem;
  background: var(--paper-shade); border-radius: 4px;
}
.sign-commitment-copy p { margin-bottom: 0.4rem; }
.sign-commitment-copy ul { margin: 0.3rem 0 0.5rem 1.25rem; }
.sign-commitment-copy li { margin-bottom: 0.2rem; }
.sign-paulg-note {
  font-family: var(--ui); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--seal); margin-top: 0.5rem;
  font-style: italic;
}

/* ─────────── RESPONSIVE ─────────── */

@media (max-width: 700px) {
  .nav {
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
  }
  .nav-label { display: none; }
  .nav-state { display: none; }
}

/* ─────────── Rich-text (TipTap) inline content ───────────
   Editor stores HTML as paragraphs, lists, tables. Strip default
   margins so nested blocks sit flush inside .statement / .body /
   .drift-text wrappers. Typography inherits from the outer block. */

.statement > p:first-child,
.drift-text > p:first-child,
.drift-editor > .ProseMirror > p:first-child,
.deliberation-editor > .ProseMirror > p:first-child,
.editor-mount > .ProseMirror > p:first-child { margin-top: 0; }

.statement > p:last-child,
.drift-text > p:last-child,
.drift-editor > .ProseMirror > p:last-child,
.deliberation-editor > .ProseMirror > p:last-child,
.editor-mount > .ProseMirror > p:last-child { margin-bottom: 0; }

/* Lists inside any rich-text surface */
.statement ul, .statement ol,
.drift-text ul, .drift-text ol,
.editor-mount ul, .editor-mount ol {
  margin: 0.5em 0;
  padding-left: 1.4em;
}
.statement li, .drift-text li, .editor-mount li {
  margin: 0.18em 0;
}
.statement ul li::marker,
.editor-mount ul li::marker { color: var(--yellow-deep, #c9a11f); }

/* Tables inside rich-text */
.statement table, .editor-mount table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.6em 0;
  font-family: var(--body, 'Source Serif 4', Georgia, serif);
}
.statement th, .editor-mount th {
  font-family: var(--display, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-weight: 500;
  text-align: left;
  padding: 0.3em 0.5em;
  border: 1px solid var(--rule, #d9d3c6);
  background: rgba(0, 0, 0, 0.018);
  min-width: 3em;
}
.statement td, .editor-mount td {
  padding: 0.3em 0.5em;
  border: 1px solid var(--rule, #d9d3c6);
  vertical-align: top;
  min-width: 3em;
}

/* Drift editor = single-line appearance mirroring the old input */
.drift-editor {
  background: var(--paper, #fbf6ec);
  border: 1px solid var(--rule, #d9d3c6);
  border-radius: 3px;
  padding: 0.45rem 0.7rem;
  font-family: var(--display, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.4;
}
.drift-editor:focus-within {
  border-color: var(--yellow-deep, #c9a11f);
  background: #fdfaf1;
}

/* Deliberation editor — slightly recessed box, matches old textarea */
.deliberation-editor {
  background: rgba(0, 0, 0, 0.018);
  border: 1px solid var(--rule-faint, #eae4d6);
  border-radius: 3px;
  padding: 0.45rem 0.7rem;
  font-family: var(--body, 'Source Serif 4', Georgia, serif);
  font-size: 0.95rem;
  line-height: 1.5;
  min-height: 2.6em;
}
.deliberation-editor:focus-within { background: #fbf6ec; }

/* Edit mount (full statement edit) — matches the old textarea look */
.edit-form .editor-mount {
  background: #fefcf2;
  border: 1px solid var(--yellow-deep, #c9a11f);
  border-radius: 3px;
  padding: 0.7rem 0.9rem;
  font-family: var(--body, 'Source Serif 4', Georgia, serif);
  font-size: 1.05rem;
  line-height: 1.5;
  min-height: 5em;
}

/* ─── Circumplex (briefing diagnostic) ────────────────────────────
   Styles for the inline-SVG 4-quadrant Axialent methodology diagram
   (polar-area chart) rendered by app/templates/_circumplex.html.
   See that file for design notes.

   The SVG is self-sizing via viewBox; .circumplex just caps max-width
   and centers it on the page. Arc opacity animates on hover to
   signal clickability (each arc is an <a xlink:href> anchor).
   ─────────────────────────────────────────────────────────────── */

.circumplex {
  max-width: 720px;
  margin: 2rem auto;
}

.circumplex svg {
  width: 100%;
  height: auto;
  display: block;
}

.circumplex-arc {
  transition: opacity 0.2s;
  opacity: 0.7;
}

.circumplex-arc:hover {
  opacity: 1;
  cursor: pointer;
}

.circumplex-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.circumplex-score {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-style: italic;
  fill: #FAF7F1;                         /* paper, contrasts on colored arc */
  paint-order: stroke fill;
  stroke: rgba(0,0,0,0.25);
  stroke-width: 0.5px;
  font-weight: 500;
}

.circumplex-ring-label {
  font-family: 'Fraunces', serif;
  font-size: 10px;
  font-style: italic;
  fill: var(--ink);
  opacity: 0.38;
}

/* ─────────── Quadrant meta inline edit (kicker + subtitle) ──────────
   The `.kicker` and `.section-subtitle` have an `.quadrant-meta-editable`
   modifier when facilitators view the page. Hover hints that the copy
   is clickable without adding chrome in the idle state. */
.quadrant-meta-editable {
  cursor: text;
  transition: background 0.12s, outline-color 0.12s;
  border-radius: 3px;
  padding: 0.05rem 0.25rem;
  margin-left: -0.25rem;
  outline: 1px dashed transparent;
}
.quadrant-meta-editable:hover {
  background: #FFFDF0;
  outline-color: var(--yellow-deep);
}

/* Inline edit form — lays out the input + save/cancel in a single row.
   Kicker uses a one-line input; subtitle uses a multi-line textarea. */
.quadrant-meta-edit-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: start;
  margin: 0.15rem 0;
}

.quadrant-meta-edit-form .kicker-input,
.quadrant-meta-edit-form .subtitle-input {
  background: #FFFDF0;
  border: none;
  border-bottom: 1px dashed var(--yellow-deep);
  padding: 0.15rem 0.3rem;
  color: var(--ink);
  width: 100%;
  resize: vertical;
}

.quadrant-meta-edit-form .kicker-input {
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quadrant-meta-edit-form .subtitle-input {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
}

.quadrant-meta-edit-form .kicker-input:focus,
.quadrant-meta-edit-form .subtitle-input:focus {
  outline: none;
  border-bottom-color: var(--ink);
  background: #FFF9D6;
}

.quadrant-meta-edit-actions {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.section-header-editing {
  padding-bottom: 0.4rem;
}