/* Twin marks on the Organize grid. The chain sits in the card footer, right,
   same 8px inset and 20px size as the page-number badge on the left. The
   "also" tip is parked in a layer above the curve overlay, visually in
   that same card slot, so the string tucks under the chip. Teal stays
   selection. */

.organize-twin {
  position: absolute;
  right: 8px;
  bottom: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s, background-color 0.15s, transform 0.12s;
}
.organize-card[data-twin] .organize-foot {
  padding-right: 32px;
}
.organize-twin.is-new {
  animation: kpRise 0.26s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.organize-twin:hover {
  border-color: var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.organize-twin:active { transform: scale(0.95); }
.organize-twin:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.organize-twin[aria-pressed="true"] {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
}
.organize-card.is-twin-on {
  box-shadow: 0 0 0 2px var(--border-strong), 0 6px 18px rgba(15, 23, 42, 0.1);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s, opacity 0.15s, background-color 0.18s;
}
.organize-card.is-twin-on.selected {
  box-shadow: 0 0 0 2px var(--primary-soft), 0 6px 18px rgba(15, 23, 42, 0.12);
}
.organize-twin-lines {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
.organize-twin-lines path {
  fill: none;
  stroke: var(--text-mute);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.organize-twin-also-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 5;
  overflow: visible;
  pointer-events: none;
}
.organize-twin-also {
  position: absolute;
  z-index: 1;
  pointer-events: auto;
  margin: 0;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-soft);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  animation: kpRise 0.26s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.organize-twin-also:hover {
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: var(--shadow);
}
.organize-twin-also:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.organize-grid.is-tiny .organize-twin { width: 16px; height: 16px; bottom: 2px; right: 4px; }
.organize-grid.is-tiny .organize-card[data-twin] .organize-foot { padding-right: 24px; }

/* Out of the editor flex. A flex sibling of .organize-split-wrap sits in
   the leftover strip under the document rail; Compare then fit-renders
   into a host whose height changes every paint, so the bar grows and
   shrinks forever. Absolute fill gives the stage a stable box. */
.organize-editor { position: relative; }
.organize-twin-stage {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  animation: editorBoxIn 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.organize-twin-stage.closing {
  animation: editorBoxOut 0.2s ease forwards;
  pointer-events: none;
}
.organize-twin-stage-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.organize-twin-stage-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.organize-twin-stage-acts {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.organize-twin-stage-acts [data-twin-view],
.organize-twin-stage-acts [data-twin-hide] {
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s, background-color 0.15s;
}
.organize-twin-stage-acts [data-twin-view][aria-pressed="true"],
.organize-twin-stage-acts [data-twin-hide][aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
}
.organize-twin-stage-acts [data-twin-view]:hover,
.organize-twin-stage-acts [data-twin-hide]:hover {
  border-color: var(--border-strong);
}
.organize-twin-stage-acts [data-twin-view]:focus-visible,
.organize-twin-stage-acts [data-twin-hide]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.organize-twin-stage-pager {
  min-width: 52px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.organize-twin-stage-mix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline: 8px;
  font-size: 12px;
  color: var(--text-soft);
}
/* Side-by-side cannot blend, so the control goes quiet but keeps its width: the
   row is a click target and must not shift under the pointer between views. */
.organize-twin-stage-mix.is-off {
  visibility: hidden;
}
.organize-twin-stage-mix input[type="range"] {
  width: 88px;
  accent-color: var(--primary);
}
.organize-twin-stage-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-soft);
}
.organize-twin-stage-host:focus,
.organize-twin-stage-host:focus-visible { outline: none; }
.organize-twin-stage-host .cmp-visual-body {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 720px) {
  .organize-twin-stage-mix { display: none; }
  .organize-twin-stage-bar { padding: 6px 6px 6px 12px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .organize-twin.is-new, .organize-twin-also { animation: none; }
  .organize-twin:hover { transform: none; }
  .organize-twin-stage, .organize-twin-stage.closing { animation: none; }
}