/* ================================================================
   Composition banner
================================================================ */

#composition-banner {
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: max-height 0.3s ease;
  max-height: 230px;
}
#composition-banner.banner-split {
  max-height: 600px;
  overflow-y: auto;
}

#composition-banner.collapsed {
  max-height: 0;
  border-bottom: none;
}

#composition-inner {
  padding: 6px 18px 6px;
  display: flex;
  justify-content: center;
}

.comp-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}

#comp-text {
  display: flex;
  align-items: baseline;
  gap: 0;
  /* 500 instead of 600  -  see #cell-view comment. */
  font: 500 15px/1.8 var(--mono);
  color: var(--dim);
  min-height: 1.8em;
}

/* Inline (non-split) layout: SAME grid as split mode (left half | button | right
   half) so the left sides sit on the LEFT and the right sides on the RIGHT of the
   box -- NOT one centered run spanning the full width. The only difference from
   split mode is that both halves share ONE row (same vertical level) instead of
   the staggered two-row split. (Hadrian 2026-06-20: the block+centered run was a
   regression from the text-wrap fix.) Wraps at WORD boundaries (word-break:normal),
   never collapses (1fr columns, not flex:1). Explicit user <br> breaks still apply. */
#comp-text:not(.layout-split) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
#comp-text:not(.layout-split) .comp-half-left {
  grid-column: 1;
  text-align: right;
  word-break: normal;
  min-width: 0;
}
#comp-text:not(.layout-split) .comp-half-right {
  grid-column: 3;
  text-align: left;
  word-break: normal;
  min-width: 0;
}
#comp-text:not(.layout-split) .comp-mode-btn {
  grid-column: 2;
  align-self: center;
}
/* Whole-composition placeholder ("[ start writing ]"): a lone direct-child span has no
   grid-column, so it auto-places into column 1 (the left 1fr, text-align:right) and reads
   as off-center. Span all three columns and center it. (Hadrian 2026-06-21) */
#comp-text:not(.layout-split) > .seg-empty {
  grid-column: 1 / -1;
  text-align: center;
}

#comp-text .seg-active,
#comp-text .seg-done.seg-active,
#comp-text .seg-empty.seg-active,
#comp-text .seg-gap.seg-active {
  color: var(--txt);
  background: rgba(53, 116, 196, 0.09);
  border-radius: 3px;
  padding: 0 2px;
}
#comp-text .seg-active.suggest-edge-outer-left  { background: linear-gradient(to left,  rgba(53,116,196,0.04) 30%, rgba(53,116,196,0.12) 100%); }
#comp-text .seg-active.suggest-edge-inner-left  { background: linear-gradient(to right, rgba(53,116,196,0.04) 30%, rgba(53,116,196,0.12) 100%); }
#comp-text .seg-active.suggest-edge-inner-right { background: linear-gradient(to left,  rgba(53,116,196,0.04) 30%, rgba(53,116,196,0.12) 100%); }
#comp-text .seg-active.suggest-edge-outer-right { background: linear-gradient(to right, rgba(53,116,196,0.04) 30%, rgba(53,116,196,0.12) 100%); }

#comp-text .seg-done {
  color: #3a7050;
}

#comp-text .seg-empty {
  color: rgba(120, 115, 108, 0.50);
}

#comp-text .seg-gap {
  color: var(--amber);
  opacity: 0.7;
  white-space: nowrap;
}
#comp-text .seg-gap::before { content: '[\00a0'; opacity: 0.5; }
#comp-text .seg-gap::after  { content: '\00a0]'; opacity: 0.5; }

#comp-text .comp-center {
  color: var(--amber);
  margin: 0 6px;
  font-size: 18px;
  font-weight: 700;
  opacity: 0.85;
}
/* Segment border-left color is now inline (spectrum interpolation from JS) */

/* tiny mode-toggle button replacing the center dot */
.comp-mode-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--amber);
  font-size: 18px;
  font-weight: 700;
  opacity: 0.85;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  border-radius: 3px;
  flex-shrink: 0;
  transition: border-color 0.15s, opacity 0.15s;
  align-self: center;
}
.comp-mode-btn:hover { border-color: var(--line); opacity: 1; }

/* ── Split layout mode ── */
/* Split layout: CSS grid, row heights equalised by JS so the row boundary
   (align-self:end of left / align-self:start of right) lands at the same
   pixel as the button center (align-self:center spanning both rows). */
#comp-text.layout-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr 1fr; /* overridden by JS */
  gap: 0;
  align-items: start;
}
#comp-text.layout-split .comp-half-left {
  grid-column: 1; grid-row: 1;
  text-align: right;
  word-break: normal;
  align-self: end;
  min-width: 0;
}
#comp-text.layout-split .comp-half-right {
  grid-column: 3; grid-row: 2;
  text-align: left;
  word-break: normal;
  align-self: start;
  min-width: 0;
}
#comp-text.layout-split .comp-mode-btn {
  grid-column: 2; grid-row: 1 / 3;
  align-self: center;
}

#comp-text .comp-sep {
  color: rgba(130, 125, 118, 0.45);
  margin: 0 2px;
  font-style: italic;
}

#comp-text .seg-empty-inline {
  color: rgba(140, 135, 128, 0.50);
  font-style: italic;
}

.comp-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 14px 6px;
  gap: 4px;
  /* Owner 2026-09-24: the whole Hide-Composition row (not just its button) stays glued to the bottom
     of the scrolling Top Composition Box at EVERY scroll position, so the box can be wrapped up at any
     moment. Backdrop mirrors the show-composition stub (#comp-toggle-stub) so scrolling text does not
     bleed through it. */
  position: sticky;
  bottom: 0;
  z-index: 5;
  /* Owner 2026-09-25: the glass used to be a hard rectangle (uniform blur + 60% fill) whose top
     edge popped in abruptly. The blur + fill now live on a ::before that extends ~20px upward and
     is masked to fade in top->bottom, so the glass eases into place instead of snapping. The row
     itself is transparent, so the buttons stay perfectly crisp above the fading glass. */
  background: transparent;
}
.comp-toggle-row::before {
  content: '';
  position: absolute;
  inset: -20px 0 -2px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(215, 211, 205, 0) 0%,
    rgba(215, 211, 205, 0.42) 55%,
    rgba(215, 211, 205, 0.66) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 62%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 62%);
}
body.dark-mode .comp-toggle-row::before {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg1) 0%, transparent) 0%,
    color-mix(in srgb, var(--bg1) 42%, transparent) 55%,
    color-mix(in srgb, var(--bg1) 66%, transparent) 100%);
}
.comp-toggle-row-left {
  display: flex;
  align-items: center;
  gap: 2px;
}

.comp-export-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.comp-export-btn:hover {
  color: var(--dim);
  border-color: var(--line);
  background: rgba(255,255,255,0.7);
}

#btn-comp-toggle {
  background: none;
  border: none;
  color: var(--faint);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 12px;
  border-radius: 2px;
  line-height: 1;
  transition: color 0.1s;
  /* X9 (owner 2026-08-03): always reachable at the bottom of the scrolling Composition box, whatever
     the scroll position. Owner 2026-09-24: the sticky pinning now lives on the parent .comp-toggle-row
     (the whole div stays glued), so the button itself is a plain flow child. */
}

/* X9 (owner 2026-08-03): the layout-toggle dot stays at the vertical MIDDLE of the visible
   box while the text scrolls. JS transforms keep its flow slot, so the split-grid alignment math
   (alignSplitBanner) is untouched. */
#comp-text .comp-mode-btn {
  position: relative;
  top: auto;
  z-index: 4;
  will-change: transform;
}

#btn-comp-toggle:hover { color: var(--dim); }

/* When banner is collapsed the toggle lives outside it */
#comp-toggle-stub {
  display: none;
  justify-content: center;
  padding: 4px 0;
  background: rgba(215, 211, 205, 0.60);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

#comp-toggle-stub.visible { display: flex; }


/* #5 (owner 2026-07-18): a segment being JOINED fades out of the composition over ~2s, then is removed
   (a joined palindrome is its own unified entity, no longer part of the split-in-the-middle composition). */
@keyframes compJoinFadeOut { from { opacity: 1; } to { opacity: 0; } }
.comp-seg-fading { animation: compJoinFadeOut 2s ease forwards; }
#comp-text .comp-seg { border-radius: 3px; transition: background 0.4s ease-out, box-shadow 0.4s ease-out; }
#comp-text .comp-seg.comp-seg-hover { background: rgba(53,116,196,0.10); box-shadow: 0 0 0 2px rgba(53,116,196,0.10); transition-duration: 0.05s; }
#comp-text .seg-active.comp-seg-hover { background: rgba(53,116,196,0.16); }
body.dark-mode #comp-text .comp-seg.comp-seg-hover { background: rgba(106,171,232,0.14); box-shadow: 0 0 0 2px rgba(106,171,232,0.12); }

/* Mirror the bottom glass only when text is hidden above (owner 2026-10-06). */
.comp-top-fade { position: sticky; top: 0; height: 0; z-index: 5; pointer-events: none; }
.comp-top-fade::before {
  content: ''; display: block; height: 40px; opacity: 0;
  background: linear-gradient(to top, rgba(215, 211, 205, 0) 0%, rgba(215, 211, 205, 0.42) 55%, rgba(215, 211, 205, 0.66) 100%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 62%);
  mask-image: linear-gradient(to top, transparent 0%, black 62%);
}
#composition-banner.comp-scrolled .comp-top-fade::before { opacity: 1; }
body.dark-mode .comp-top-fade::before {
  background: linear-gradient(to top, color-mix(in srgb, var(--bg1) 0%, transparent) 0%, color-mix(in srgb, var(--bg1) 42%, transparent) 55%, color-mix(in srgb, var(--bg1) 66%, transparent) 100%);
}
#composition-banner { padding-bottom: 0; }
.comp-toggle-row { margin-bottom: 0; isolation: isolate; }