/* Ship messages on glass. The Messages row sits at the foot of the
   instruments pane: label left, "No slips this watch" right, or the count
   button with the newest slip's message under it. The button opens the
   received slips, each a notice card with a Dismiss button. An open Ops
   docket shows the same slips in flow. */
.shell-feedback[hidden] { display: none !important; }
.shell-feedback { position: relative; box-sizing: border-box; min-width: 0; margin: 0; color: var(--ink); overflow-anchor: none; }
.gl-instruments > .shell-feedback { display: flex; flex-direction: column; gap: 10px; flex: none; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.shell-tape-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1px 10px; min-width: 0; }
.gl-messages-label {
  flex: none; margin: 0; font: 500 11px/1 var(--font-ui); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-muted);
}
/* With no slip the value shares the label's line and baseline, right-aligned,
   as in the reference ("No slips this watch" wraps there too). */
.gl-messages-value {
  flex: 1 1 0; display: block; min-width: 0; font: 400 12px/1.2 var(--font-mono); color: var(--ink); text-align: right;
  overflow-wrap: break-word;
}
/* With slips, the count button that opens them ends the label's line, and the
   newest slip's message runs across the whole row under both: two lines at
   most (the whole slip is in the list). */
.gl-messages-toggle { flex: none; margin-left: auto; }
.shell-feedback[data-empty="false"] .gl-messages-value {
  flex: 1 0 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.shell-feedback[data-open="true"] .gl-messages-toggle { background: var(--accent-10); border-color: var(--accent); }

/* The slips: a glass popover over the main column, or in the docket's flow. */
.shell-tape-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; min-height: 0; overflow-anchor: none; }
.shell-tape-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gl-instruments .shell-feedback:not([data-open="true"]) .shell-tape-list { display: none; }
.gl-instruments .shell-feedback .shell-tape-list {
  position: absolute; left: -13px; bottom: calc(100% + 9px); z-index: 6;
  box-sizing: border-box; width: min(360px, calc(100vw - 48px)); max-height: min(60vh, 440px);
  overflow: auto; overscroll-behavior: contain; padding: 10px;
  /* Over the panes with no scrim of its own, the slip list is the glass tone
     made opaque: a blur would do nothing here (the instruments pane, itself
     blurred glass, is the list's backdrop root), so text behind it would
     ghost through. */
  background: rgb(8 12 9);
  border: 1px solid var(--line); box-shadow: var(--hairline-top), 0 12px 32px #000a;
}
.shell-tape-slip.gl-notice {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 12px;
  min-width: 0; margin: 0;
}
.shell-slip-copy { min-width: 0; }
.shell-slip-copy > :is(p, h3) { overflow-wrap: break-word; }
.shell-slip-good { float: left; width: 32px; height: 32px; object-fit: contain; margin: 0 8px 4px 0; }
.shell-slip-dismiss { align-self: start; }
/* Dismiss is a small (28 px) button: the notice-button rule in glass.css
   would make it 38 px with a 10 px top margin. */
.shell-tape-slip.gl-notice .shell-slip-dismiss.gl-btn--sm { height: 28px; min-height: 28px; margin-top: 0; white-space: nowrap; }
@media (max-width: 640px), (pointer: coarse) {
  .shell-tape-slip.gl-notice .shell-slip-dismiss.gl-btn--sm { height: 44px; min-height: 44px; }
}
.shell-feedback :is(h2, h3, p, button) { word-break: normal; }
/* The receiver keeps its own type and focus ring wherever it sits: the Ops
   docket's sheet styles every h2, p and button inside it (ops-props.css). */
.shell-feedback .gl-messages-head > .gl-messages-label {
  margin: 0; font: 500 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted);
}
.shell-feedback .shell-tape-slip .gl-notice-tag {
  margin: 0; font: 400 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tone);
}
.shell-feedback .shell-tape-slip .gl-notice-title {
  margin: 4px 0 0; font: 600 16px/1.2 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--ink);
}
.shell-feedback .shell-tape-slip .gl-notice-body {
  margin: 2px 0 0; font: 400 13px/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink-muted);
}
.shell-feedback .shell-tape-head .gl-btn:focus-visible, .shell-feedback .shell-tape-slip .gl-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none;
}
@media (forced-colors: active) {
  .shell-feedback .shell-tape-head .gl-btn:focus-visible, .shell-feedback .shell-tape-slip .gl-btn:focus-visible { outline-color: Highlight; }
  /* Open reads as the ghost hover, which forced colours draw in Highlight. */
  .shell-feedback[data-open="true"] .gl-messages-toggle,
  .shell-feedback[data-open="true"] .gl-messages-toggle:hover { background: Highlight; color: HighlightText; border-color: Highlight; }
}

/* Inside an open Ops docket the receiver prints in the sheet's flow. */
.dockside-sheet > .shell-feedback { width: 100%; margin: 0 0 10px; flex: none; padding: 10px 12px; border: 1px solid var(--line); background: var(--glass); }
.dockside-sheet > .shell-feedback .gl-messages-toggle { display: none; }
.dockside-sheet > .shell-feedback .shell-tape-list { margin-top: 10px; max-height: min(30vh, 260px); overflow: auto; overscroll-behavior: contain; }
.dockside-sheet > .shell-feedback[data-empty="true"] .shell-tape-list { display: none; }

/* The Tasks drawer is styled in glass-overlays.css. */

/* Below 900px the instruments are a grid and Messages is one of its cells.
   The cell reads label over value, like the gauges' captions, so the value
   has the cell's full width; the count button sits at the right of the label
   (or under it when the cell is too narrow). The open list never prints into
   the cell (that stretched the whole grid): it hangs from the foot of the
   instruments pane at its right edge, over the headline, and opening it
   moves nothing. */
@media (max-width: 899px) {
  body.glass-bridge .gl-instruments { position: relative; }
  .gl-instruments > .shell-feedback { position: static; }
  .gl-instruments .shell-tape-head { align-items: center; justify-content: space-between; gap: 4px 6px; }
  .gl-instruments .shell-feedback .gl-messages-value { flex: 1 0 100%; text-align: left; }
  .gl-instruments .shell-feedback .shell-tape-list {
    top: calc(100% + 1px + var(--gap, 8px)); right: -1px; bottom: auto; left: auto;
    width: min(420px, calc(100% + 2px)); max-height: min(60vh, 440px);
  }
}
/* A narrow list puts Dismiss under the slip, not beside it. */
@media (max-width: 419px) {
  .shell-tape-slip.gl-notice { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .shell-slip-dismiss { justify-self: start; }
}
@media (max-width: 760px), (max-width: 1279px) and (max-height: 500px) and (pointer: coarse) {
  .dockside-scrim[data-reviewed="true"] .dockside-sheet:has(> .shell-feedback) { overflow-y: auto; }
  .dockside-sheet:has(> .shell-feedback) #dockside-confirmation { min-height: min(160px, 30dvh); }
}
@media (prefers-reduced-motion: reduce) { .shell-feedback *, .tut-panel * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active), (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .gl-instruments .shell-feedback .shell-tape-list, .dockside-sheet > .shell-feedback { background: Canvas !important; color: CanvasText !important; backdrop-filter: none !important; box-shadow: none !important; border: 1px solid CanvasText !important; }
  .shell-slip-good { display: none !important; }
  .shell-tape-list:focus-visible { outline-color: Highlight !important; }
}