/* Revision stack on the document Revisions tab (B#9). Modern look only.
   Matches the approved motion prototype (ui-modern-refresh/motion-3d.html) and the B#9 brief:
   - At rest: sheets stacked, current on top, older sheets peeking behind.
   - Hover the stack: the deck tilts (rotateX 56deg, rotateZ -24deg) and the sheets fan out
     downward in an even staircase, current at the top. The strip along the bottom of every
     sheet shows its code, status, comments and open markups.
   - Point at one sheet: it lifts a little within the fan and its full details show in the
     read-out under the stack. Click opens it. */

html[data-look="modern"] .cyn-rs {
  --rs-h: 104px;
  --rs-peek: 7px;
  --rs-step: 28px;
  --rs-line: color-mix(in srgb, var(--cyn-line, #BBC5D3) 70%, transparent);
  --rs-sheet: var(--cyn-panel, #fff);
  --rs-ink: var(--cyn-ink, #18263a);
  --rs-ink-2: var(--cyn-ink-2, #4a5a6e);
  --rs-ink-3: var(--cyn-ink-3, #7a889a);
  --rs-accent: var(--cyn-cta, #3D5A80);
  --rs-thread: var(--m-thread, #D4A24C);
  padding: 0.55rem 0.65rem 0.45rem;
  border-bottom: 1px solid var(--rs-line);
}
html[data-look="modern"] .cyn-rs-stage {
  position: relative;
  height: calc(var(--rs-h) + (min(var(--rs-n), 4) - 1) * var(--rs-peek) + 6px);
  perspective: 900px;
  transition: height var(--m-slow, 340ms) var(--m-ease, ease);
}
html[data-look="modern"] .cyn-rs-deck {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
html[data-look="modern"] .cyn-rs-sheet {
  position: absolute;
  left: 6%;
  right: 6%;
  top: calc((min(var(--rs-n), 4) - 1) * var(--rs-peek));
  height: var(--rs-h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: var(--rs-ink);
  background: var(--rs-sheet);
  border: 1px solid var(--rs-line);
  border-left: 3px solid var(--rs-tone, var(--rs-line));
  border-radius: 8px;
  box-shadow: 0 6px 14px -8px rgba(16, 30, 52, 0.4);
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.15), opacity 0.3s, box-shadow 0.3s;
}
html[data-look="modern"] .cyn-rs-body { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px 0; flex: 1 1 auto; min-height: 0; }
html[data-look="modern"] .cyn-rs-sheet template { display: none; }

/* at rest: older sheets peek above the current one */
html[data-look="modern"] .cyn-rs-sheet[data-i="1"] { transform: translateY(calc(-1 * var(--rs-peek))) scale(0.975); opacity: 0.9; }
html[data-look="modern"] .cyn-rs-sheet[data-i="2"] { transform: translateY(calc(-2 * var(--rs-peek))) scale(0.95); opacity: 0.75; }
html[data-look="modern"] .cyn-rs-sheet[data-i="3"] { transform: translateY(calc(-3 * var(--rs-peek))) scale(0.925); opacity: 0.6; }
html[data-look="modern"] .cyn-rs-sheet[data-i="0"] { box-shadow: 0 12px 22px -12px rgba(16, 30, 52, 0.55); }
html[data-look="modern"] .cyn-rs-sheet:not([data-i="0"]) > span { visibility: hidden; }

/* fanned: pointer anywhere on the stack or its read-out, keyboard focus, or tapped open */
html[data-look="modern"] .cyn-rs:not(.is-single):is(:hover, :focus-within) .cyn-rs-stage,
html[data-look="modern"] .cyn-rs.is-open .cyn-rs-stage { height: calc(84px + min(var(--rs-n), 4) * 26px); }
html[data-look="modern"] .cyn-rs:not(.is-single):is(:hover, :focus-within) .cyn-rs-deck,
html[data-look="modern"] .cyn-rs.is-open .cyn-rs-deck {
  transform: translateY(calc(min(var(--rs-n), 4) * 12px - 12px)) rotateX(56deg) rotateZ(-24deg) scale(0.82);
}
html[data-look="modern"] .cyn-rs:not(.is-single):is(:hover, :focus-within) .cyn-rs-sheet,
html[data-look="modern"] .cyn-rs.is-open .cyn-rs-sheet { top: 0; opacity: 1; }
html[data-look="modern"] .cyn-rs:not(.is-single):is(:hover, :focus-within) .cyn-rs-sheet > span,
html[data-look="modern"] .cyn-rs.is-open .cyn-rs-sheet > span { visibility: visible; }
html[data-look="modern"] .cyn-rs:not(.is-single):is(:hover, :focus-within) .cyn-rs-sheet[data-i="3"],
html[data-look="modern"] .cyn-rs.is-open .cyn-rs-sheet[data-i="3"] { --rs-z: 0px; }
html[data-look="modern"] .cyn-rs:not(.is-single):is(:hover, :focus-within) .cyn-rs-sheet[data-i="2"],
html[data-look="modern"] .cyn-rs.is-open .cyn-rs-sheet[data-i="2"] { --rs-z: calc((min(var(--rs-n), 4) - 3) * var(--rs-step)); }
html[data-look="modern"] .cyn-rs:not(.is-single):is(:hover, :focus-within) .cyn-rs-sheet[data-i="1"],
html[data-look="modern"] .cyn-rs.is-open .cyn-rs-sheet[data-i="1"] { --rs-z: calc((min(var(--rs-n), 4) - 2) * var(--rs-step)); }
html[data-look="modern"] .cyn-rs:not(.is-single):is(:hover, :focus-within) .cyn-rs-sheet[data-i="0"],
html[data-look="modern"] .cyn-rs.is-open .cyn-rs-sheet[data-i="0"] { --rs-z: calc((min(var(--rs-n), 4) - 1) * var(--rs-step)); }
html[data-look="modern"] .cyn-rs:not(.is-single):is(:hover, :focus-within) .cyn-rs-sheet,
html[data-look="modern"] .cyn-rs.is-open .cyn-rs-sheet { transform: translateZ(var(--rs-z, 0px)); }
html[data-look="modern"] .cyn-rs:not(.is-single):is(:hover, :focus-within) .cyn-rs-sheet.is-current,
html[data-look="modern"] .cyn-rs.is-open .cyn-rs-sheet.is-current { box-shadow: 0 0 0 2px var(--rs-accent), 0 18px 30px -12px rgba(16, 30, 52, 0.5); }
/* the sheet under the pointer lifts a little within the fan */
html[data-look="modern"] .cyn-rs:not(.is-single) .cyn-rs-sheet:is(:hover, :focus-visible, .is-lift) {
  transform: translateZ(calc(var(--rs-z, 0px) + 9px)) !important;
  box-shadow: 0 0 0 2px var(--rs-accent), 0 22px 34px -12px rgba(16, 30, 52, 0.55) !important;
  outline: none;
}
html[data-look="modern"] .cyn-rs-sheet.is-viewing { box-shadow: 0 0 0 2px var(--rs-thread), 0 12px 22px -12px rgba(16, 30, 52, 0.55); }

/* in the fan only the bottom strip of an older sheet is readable: keep it clean */
html[data-look="modern"] .cyn-rs:not(.is-single):is(:hover, :focus-within) .cyn-rs-sheet:not(.is-current) .cyn-rs-body,
html[data-look="modern"] .cyn-rs.is-open .cyn-rs-sheet:not(.is-current) .cyn-rs-body { visibility: hidden; }

/* strip along the bottom of each sheet */
html[data-look="modern"] .cyn-rs-edge {
  display: flex; gap: 8px; align-items: center; flex: none;
  padding: 3px 10px 4px; border-top: 1px solid var(--rs-line);
  font-size: 10.5px; color: var(--rs-ink-2); white-space: nowrap; overflow: hidden;
  background: color-mix(in srgb, var(--rs-tone, var(--rs-line)) 7%, var(--rs-sheet));
}
html[data-look="modern"] .cyn-rs-edge b { font: 700 11px/1.2 ui-monospace, Menlo, monospace; color: var(--rs-ink); }
html[data-look="modern"] .cyn-rs-edge span:first-of-type { color: var(--rs-tone, var(--rs-ink-2)); font-weight: 600; }

/* read-out under the fan: full details of the sheet under the pointer (current by default) */
html[data-look="modern"] .cyn-rs-detail {
  display: none; flex-direction: column; gap: 3px; margin-top: 2px;
  padding: 7px 10px; border: 1px solid var(--rs-line); border-left: 3px solid var(--rs-tone, var(--rs-line));
  border-radius: 8px; background: var(--rs-sheet);
}
html[data-look="modern"] .cyn-rs:not(.is-single):is(:hover, :focus-within) .cyn-rs-detail,
html[data-look="modern"] .cyn-rs.is-open .cyn-rs-detail { display: flex; }

/* content rows (front sheet and read-out) */
html[data-look="modern"] :is(.cyn-rs-body, .cyn-rs-detail) > span { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
html[data-look="modern"] .cyn-rs-code { font: 600 13px/1.2 ui-monospace, Menlo, monospace; color: var(--rs-ink); }
html[data-look="modern"] .cyn-rs-status { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--rs-tone, var(--rs-ink-2)); }
html[data-look="modern"] .cyn-rs-badge { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; }
html[data-look="modern"] .cyn-rs-badge.is-current { background: var(--rs-accent); color: #fff; }
html[data-look="modern"] .cyn-rs-badge.is-viewing { background: color-mix(in srgb, var(--rs-thread) 22%, transparent); color: var(--rs-ink); }
html[data-look="modern"] .cyn-rs-wf { font-size: 11px; color: var(--rs-ink-2); overflow: hidden; text-overflow: ellipsis; }
html[data-look="modern"] .cyn-rs-wf.is-none { color: var(--rs-ink-3); }
html[data-look="modern"] .cyn-rs-r3 { gap: 10px !important; }
html[data-look="modern"] .cyn-rs-count { font-size: 11px; color: var(--rs-ink-2); font-variant-numeric: tabular-nums; }
html[data-look="modern"] .cyn-rs-count.is-open { color: #B45309; font-weight: 600; }
html[data-look="modern"] .cyn-rs-who { font-size: 10.5px; color: var(--rs-ink-3); flex: none; }
html[data-look="modern"] .cyn-rs-note { font-size: 10.5px; color: var(--rs-ink-2); overflow: hidden; text-overflow: ellipsis; }
html[data-look="modern"] .cyn-rs-note::before { content: '·'; margin-right: 6px; color: var(--rs-ink-3); }
html[data-look="modern"] .cyn-rs-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 10.5px; color: var(--rs-ink-3); }
html[data-look="modern"] .cyn-rs-more { font-weight: 600; color: var(--rs-ink-2); }

/* status tones (left edge, bottom strip, status text) */
html[data-look="modern"] .tone-ok     { --rs-tone: #0F7A55; }
html[data-look="modern"] .tone-review { --rs-tone: #B45309; }
html[data-look="modern"] .tone-bad    { --rs-tone: #B42318; }
html[data-look="modern"] .tone-draft  { --rs-tone: #5A6B80; }
html[data-look="modern"] .tone-old    { --rs-tone: #94A3B8; }
html[data-look="modern"][data-theme="dark"] .tone-ok     { --rs-tone: #6FD3A8; }
html[data-look="modern"][data-theme="dark"] .tone-review { --rs-tone: #F2C26D; }
html[data-look="modern"][data-theme="dark"] .tone-bad    { --rs-tone: #F3A397; }
html[data-look="modern"][data-theme="dark"] .tone-draft  { --rs-tone: #AEBBCB; }
html[data-look="modern"][data-theme="dark"] .tone-old    { --rs-tone: #7E8DA0; }
html[data-look="modern"][data-theme="dark"] .cyn-rs-count.is-open { color: #F2C26D; }

@media (prefers-reduced-motion: reduce) {
  html[data-look="modern"] .cyn-rs-stage,
  html[data-look="modern"] .cyn-rs-deck,
  html[data-look="modern"] .cyn-rs-sheet { transition: none; }
}