/* Same palettes and forms, distinct roles: full slides for live communication,
   quiet linked receipts for decisions. The update reel keeps item snapping. */
#cards-view { justify-content: center; gap: clamp(8px, 1vw, 16px); }
#cards-view #updates-view { display: flex; min-width: 0; flex: 1 1 720px; max-width: 960px; }
#cards-view #queue-pane { display: flex; flex: 0 0 clamp(180px, 18vw, 240px); overflow-y: auto; padding: 12px 8px 86px; }
#cards-view .reel { overflow-anchor: none; scroll-snap-type: y mandatory; padding-bottom: 86px; }
#cards-view .slide[data-type="post"] { height: 100%; min-height: 100%; scroll-snap-stop: always; }
/* Each card keeps its layered palette. Its colors bloom outside the surface,
   rather than filling a second rectangular slide behind it. */
.slide.decision-slide { display: block; height: auto; min-height: 0; padding: clamp(28px, 4vw, 56px) var(--pad); scroll-snap-stop: normal; background: transparent; }
#cards-view .slide .caption {
  background: radial-gradient(ellipse at 100% 0%, var(--wash), transparent 55%),
    radial-gradient(ellipse at 0% 0%, var(--glow), transparent 45%), var(--card);
  box-shadow: 0 6px 24px #0000000a,
    0 0 38px color-mix(in srgb, var(--wash) 62%, transparent),
    0 0 76px color-mix(in srgb, var(--glow) 48%, transparent);
}
.decision-slide .decision-surface { max-height: none; overflow: visible; width: 100%; margin-inline: auto; justify-content: flex-start; padding: clamp(14px, 2vw, 24px); border: 1px solid var(--line); }
.decision-body { overflow: visible; min-height: 0; }
.decision-image { max-height: 30vh; width: 100%; object-fit: contain; border-radius: 14px; }
.stream-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px; }
.decision-receipt { display: flex; gap: 10px; align-items: center; padding: 12px 22px; border-left: 2px solid var(--line); margin: 0 20px; color: var(--muted); font-size: .85rem; scroll-snap-align: start; scroll-snap-stop: normal; }
.receipt-icon { flex: none; border: 1px solid var(--line); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; }
.receipt-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.receipt-title { font-size: inherit; padding: 0; text-align: left; overflow-wrap: anywhere; }
.receipt-meta { overflow-wrap: anywhere; }
.linked-actions { border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.linked-actions:empty { display: none; }
.linked-action { text-align: left; font-size: .82rem; padding: 6px 0; }
.card-reference { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
#archive-dock { position: fixed; z-index: 5; bottom: max(16px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); padding: 6px; border-radius: 28px 28px 28px 10px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 24px #0002; }
#archive-dock .tab { border-radius: 22px; padding: 12px 18px; }
#decision-view { width: min(1100px, 94vw); height: min(850px, 92dvh); padding: 18px; overflow: auto; }
#decision-view[open] { display: flex; flex-direction: column; gap: 10px; }
#decision-view .card-column { flex: 1; min-height: 0; width: 100%; }
#decision-view #card { width: 100%; max-width: none; }
#reference-view { width: min(700px, 94vw); max-height: 90dvh; overflow: auto; }
#toast { left: auto; right: 16px; width: min(550px, calc(100vw - 190px)); transform: none; }
@media (max-width: 700px) {
  #cards-view { flex-direction: column; gap: 8px; }
  #cards-view #queue-pane { flex: none; max-height: 92px; padding: 4px 12px; }
  #queue-pane > .small { display: none; }
  #queue-list { display: flex; gap: 8px; overflow-x: auto; }
  #queue-list > li { flex: 0 0 200px; }
  #queue-pane .pane-title { font-size: .8rem; margin-bottom: 4px; }
  .decision-slide .decision-surface { width: 100%; }
  #toast { font-size: .8rem; }
}
#archive-dock { background: linear-gradient(120deg, var(--wash), var(--glow)); }
#viewer { max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; padding: 0; border: 0; }
#decision-view #card { flex: 1 1 auto; }
.receipt-meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#cards-view #queue-pane { flex-direction: column; }

/* The right column follows the visible update or decision, as the queue does. */
#cards-view #context-pane { display: block; flex: 0 0 clamp(220px, 20vw, 280px); min-width: 0; overflow-y: auto; padding: 12px 12px 86px; }
main.full { max-width: 1600px; }
.stream-answer { display: flex; gap: 8px; align-items: flex-end; }
.stream-answer textarea { flex: 1; min-width: 0; }
.stream-extra { font-size: .9em; }
.stream-extra summary { cursor: pointer; color: var(--muted); padding: 8px 0; }
.stream-extra textarea { width: 100%; margin-bottom: 8px; }
.stream-clarify { display: flex; flex-direction: column; gap: 8px; }
.stream-clarify button { align-self: flex-end; }
.brand-home .server-name { display: inline; max-width: none; letter-spacing: -.04em; font-size: 1.2em; }
.brand-home { padding-inline: 8px; }
.status-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 8px; border-color: transparent; background: transparent; border-radius: 50%; }
.status-trigger .dot { width: 12px; height: 12px; }
@media (max-width: 1099px) { #cards-view #context-pane { display: none; } }
@media (max-width: 700px) {
  #cards-view #updates-view { width: 100%; max-width: none; flex: 1; }
  .decision-slide { padding: 8px 12px; }
  .stream-actions { padding-top: 8px; }
  .stream-answer { flex-wrap: wrap; }
  .stream-answer textarea { flex-basis: 100%; }
  .stream-answer button { margin-left: auto; }
}

/* Images use the full stream width; captions take only the height they need. */
#cards-view #updates-view { container: stream / inline-size; }
#cards-view .slide[data-type="post"] {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 20px);
  padding: clamp(16px, 2.5vw, 32px) var(--pad);
  background: transparent;
}
#cards-view .slide[data-type="post"] .slide-img {
  height: auto;
  flex: 1 1 0;
  min-height: 0;
  border-radius: var(--form-corners, var(--radius));
}
#cards-view .slide[data-type="post"] .caption {
  flex: none;
  max-height: 40%;
  justify-content: flex-start;
  gap: 10px;
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid var(--line);
  border-top-style: var(--form-divider, solid);
}
.update-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.update-actions .ask-btn { padding-inline: 10px; }
.update-actions button { margin: 0; }
@media (max-width: 700px) {
  #cards-view .slide[data-type="post"] { padding: 12px; }
}

.card-action-bar { display: flex; flex-direction: column; gap: 10px; border-top: 1px var(--form-divider, solid) var(--line); padding-top: 12px; }
.card-action-bar .stream-actions { padding-top: 0; }
.stream-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.stream-tools button { font-size: .85em; padding: 6px 10px; min-height: 40px; }
.snooze-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.card-action-bar > textarea { width: 100%; }
#cards-view .slide[data-type="post"] .slide-img { width: 100%; object-fit: contain; background: transparent; }
#cards-view .slide[data-type="post"] .caption.expanded { max-height: 65%; }

.decision-receipt .receipt-icon { color: var(--accent); background: var(--wash); border-color: var(--accent); }

.snoozed-group { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.queue-group, .snoozed-group { min-width: 0; }
.snooze-return { font-size: .75rem; color: var(--muted); margin-top: 6px; }
@media (max-width: 700px) {
  #cards-view #queue-pane:has(.snoozed-group:not([hidden])) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 126px; }
  .snoozed-group { border-top: 0; border-left: 1px solid var(--line); margin: 0; padding: 0 0 0 10px; }
  #snoozed-list { display: flex; gap: 8px; overflow-x: auto; }
  #snoozed-list > li { flex: 0 0 200px; }
}