/* PaneFrame: the two text boxes are one flat card split by a seam (a hairline), side by side from 768px and
   stacked below. Each pane keeps its label row, its box and its count; the boxes have no border of their own.
   Switch sides sits on the seam (.seam-btn): the one control that belongs to both panes. */
.panes { --seam-size: var(--control-height); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.pane { display: flex; flex-direction: column; min-width: 0; }
.pane ~ .pane { border-top: 1px solid var(--hairline); }
.panes .pane-head { margin: 0; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border-bottom: 1px solid var(--hairline); }
.panes textarea { background: transparent; border: 0; }
.panes textarea:focus-visible { outline-offset: -2px; box-shadow: none; }
.pane-stats { margin: auto 0 0; padding: var(--space-1) var(--space-3); font-size: var(--text-caption-sm); line-height: var(--leading-caption-sm); color: var(--ink-muted); border-top: 1px solid var(--hairline); }
/* The count row is always the pane's last row (so the two line up across the seam); a paste note sits above it. */
.pane-stats { order: 1; }
.panes .pane-note:not(:empty) { margin: 0; padding: var(--space-1) var(--space-3); border-top: 1px solid var(--hairline); }
/* The seam button: round, on the card surface, centred on the seam. Stacked, it straddles the horizontal seam at the
   right, where the count above it and the label below it leave room. */
.seam-btn { position: relative; z-index: 1; justify-self: end; width: var(--seam-size); min-height: var(--seam-size); margin: calc(var(--seam-size) / -2) var(--space-1); padding: 0; background: var(--surface-1); border-radius: var(--radius-pill); }
.seam-btn svg { display: block; flex: none; rotate: 90deg; }
.seam-btn ~ .pane .pane-head { padding-right: calc(var(--seam-size) + var(--space-2)); }
.pane:first-child .pane-stats { padding-right: calc(var(--seam-size) + var(--space-2)); }
@media (hover: hover) and (pointer: fine) { .panes { --seam-size: 36px; } }
@media (min-width: 768px) {
  .panes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pane ~ .pane { border-top: 0; border-left: 1px solid var(--hairline); }
  /* On the vertical seam, level with the label rows, which leave room for it on both sides. */
  .seam-btn { position: absolute; top: var(--space-1); left: calc(50% - var(--seam-size) / 2); margin: 0; }
  .seam-btn svg { rotate: none; }
  .pane:first-child .pane-head { padding-right: calc(var(--seam-size) / 2 + var(--space-2)); }
  .seam-btn ~ .pane .pane-head { padding-right: var(--space-1); padding-left: calc(var(--seam-size) / 2 + var(--space-3)); }
  .pane:first-child .pane-stats { padding-right: var(--space-3); }
}