/* Comms (Signals room) on glass. design/design_handoff_bridge_glass.
   The three summary panes use the glass.css primitives as they are; this
   file only adds what Comms content needs (one-line inbox and headline cells
   at desktop widths) and restyles the room detail below the fold: the port
   notice board, the news desk and the receiver log, each one glass pane.
   It also carries the shared pieces whose markup Comms code writes for other
   rooms: the Ops notice docket and the verdict marks (VerdictStamps) used by
   the receiver, the watch handover and the journey panels.
   Replaces the retired steel and paper materials (comms-materials.css). */

/* ── Summary panes ──────────────────────────────────────────────────────── */
/* An inbox title or a Shipping List headline is the news, so it takes up to
   two lines beside the short tick and sector figures; the pane row grows a
   little and the headline above gives way. The whole text is also in the
   receiver log and the news desk below (and in a tooltip). With one column
   of panes, or with enlarged text, every word shows. */
#comms-pane-a .comms-inbox { display: flex; flex-direction: column; min-width: 0; }
#comms-pane-a .comms-inbox-row > .gl-k,
#comms-pane-c .comms-headline {
  min-width: 0; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
#comms-pane-a .comms-inbox-row > .gl-k { flex: 1 1 auto; }
#comms-pane-a .comms-inbox-row > .gl-v { flex: none; white-space: nowrap; }
/* An entry that needs the captain carries a red dot before its tick. */
#comms-pane-a .comms-inbox-row > .gl-v > .gl-dot { margin: 0 8px 2px 0; }
/* Unread entries keep the row's bright tick; a read one steps back to the
   muted ink, as its title already is. */
#comms-pane-a .comms-inbox-row.is-read > .gl-v { color: var(--ink-muted); }
/* The headline column takes the room the few sector and tick figures do not
   need (a sector reads "-1, 1"; the widest, "-100, -100", wraps at its
   comma rather than crowd the tick). */
#comms-pane-c .comms-headlines { --gl-cols: minmax(0, 2.6fr) minmax(0, .7fr) minmax(0, .7fr); }
#comms-pane-c .comms-headlines .gl-table-row > :nth-child(3) { white-space: nowrap; }
@media (max-width: 639px) {
  #comms-pane-a .comms-inbox-row > .gl-k,
  #comms-pane-c .comms-headline { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
  #comms-pane-c .comms-headlines { --gl-cols: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, .8fr); }
}
/* port-notices.js sets data-comms-enlarged when the body text is enlarged:
   every word shows, and the table keeps the primitive's columns so the
   larger "Sector" heading still fits its column. */
html[data-comms-enlarged="true"] :is(#comms-pane-a .comms-inbox-row > .gl-k, #comms-pane-c .comms-headline) {
  display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible;
}
html[data-comms-enlarged="true"] #comms-pane-c .comms-headlines { --gl-cols: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }

/* ── Detail: three glass panes below the fold ───────────────────────────── */
/* At 1200 px and wider the detail keeps the panes' tracks, so its gutters
   continue theirs: a wide column under Inbox and Pane B, a narrow one under
   the Shipping List. What each section holds is real content (a short or a
   full log, no notices or several), so comms.js measures the three
   arrangements below and sets the one that leaves the shortest page (the
   default unless another saves 64 px or more), with the sections in the
   same order in the source:
   - receiver (default): the log wide; the board, then the news desk, narrow
   - stack: the log, then the news desk, wide; the board narrow
   - desk: the news desk wide; the board, then the log, narrow */
#comms-jump-links { display: none; }
#comms-grid {
  display: grid; gap: var(--gap); align-items: start; min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "receiver receiver board" "receiver receiver desk";
}
@media (min-width: 1200px) {
  #comms-grid[data-layout="stack"] { grid-template-areas: "receiver receiver board" "desk desk board"; }
  #comms-grid[data-layout="desk"] { grid-template-areas: "desk desk board" "desk desk receiver"; }
}
#comms-grid > .gl-pane { min-width: 0; margin: 0; }
#journey-bulletins { grid-area: board; }
#comms-desk { grid-area: desk; container: comms-desk / inline-size; }
#comms-activity { grid-area: receiver; }
/* The page's 16 px scroll-padding sets where a section lands. */
:is(#comms-activity, #journey-bulletins, #comms-desk, .port-notice) { scroll-margin-top: 0; }
#comms-detail .gl-head { margin-bottom: 10px; }
/* The phone receiver bezel (a photographed prop MerchantScene mounts here) is
   retired with the other materials; the element stays for its mount call. */
body.glass-bridge #comms-phone-crt { display: none; }
:where(#comms-detail) p { margin: 0; }
.comms-reference, .comms-tick, .comms-dateline {
  font: 400 11px/1.4 var(--font-mono); letter-spacing: 0; color: var(--ink-muted);
}
.comms-tick { white-space: nowrap; }
.comms-section-title {
  margin: 0 0 8px; font: 500 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.comms-quiet, .board-status, #comms-activity-status, .stories-list {
  font: 400 13px/1.45 var(--font-ui); color: var(--ink-muted);
}
/* Disclosure rows (news briefs, features, notice stubs) carry a chevron in
   place of the native marker. */
#comms-detail summary { list-style: none; cursor: pointer; }
#comms-detail summary::-webkit-details-marker { display: none; }
.comms-brief > summary::after, .comms-feature > summary::after, .port-notice > summary::after {
  content: "\25BE"; flex: none; font: 400 11px/1 IPTType3UI, sans-serif; color: var(--accent);
}
:is(.comms-brief, .comms-feature, .port-notice)[open] > summary::after { content: "\25B4"; }
/* Goods art sits on the glass in its own colours. */
.comms-thumb { display: inline-flex; flex: none; vertical-align: middle; }
.comms-thumb .goods-thumb { border: 1px solid var(--line); background: none; box-shadow: none; }
.comms-thumb .goods-thumb::before { background: var(--field); }

/* ── Port notice board ──────────────────────────────────────────────────── */
.board-status { margin: 0 0 10px; }
.board-status + .gl-btn { margin: 0 0 12px; }
.notice-list { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.board-empty { padding: 10px 12px; border: 1px dashed var(--muted-40); }
.board-empty-title { font: 600 16px/1.2 var(--font-head); color: var(--ink); }
.board-empty p:not(.board-empty-title) { margin-top: 2px; font: 400 13px/1.4 var(--font-ui); color: var(--ink-muted); }
.port-notice { position: relative; min-width: 0; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
/* A notice the captain can deliver against here takes the notice tone. */
.port-notice.can-deliver { border-color: var(--accent); background: var(--accent-08); }
.port-notice > summary { display: none; }
.notice-full { padding: 10px 12px 12px; min-width: 0; }
.notice-tag { font: 400 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.notice-identity { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 8px 0 4px; }
.notice-name { flex: 1 1 auto; min-width: 0; }
#comms-detail .notice-name h4 { margin: 0; font: 600 16px/1.2 var(--font-head); color: var(--ink); overflow-wrap: anywhere; }
#comms-detail .notice-name p { margin-top: 2px; font: 400 13px/1.4 var(--font-ui); color: var(--ink-muted); }
.notice-demand {
  flex: none; padding: 3px 6px; border: 1px solid var(--accent-60);
  font: 400 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.notice-facts { display: flex; flex-direction: column; min-width: 0; }
.notice-facts .gl-k { flex: none; white-space: nowrap; overflow-wrap: normal; }
.notice-facts > .bar { margin: 0 0 4px; }
.notice-lamp {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 0;
  font: 400 11px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}
.notice-lamp.lit { color: var(--good); }
.notice-actions { margin-top: 12px; }

/* ── News desk ──────────────────────────────────────────────────────────── */
.comms-nameplate { padding: 0 0 10px; margin: 0 0 12px; border-bottom: 1px solid var(--accent-60); }
#comms-detail .comms-nameplate-title { margin: 0; font: 600 22px/1.1 var(--font-head); color: var(--ink-title); }
.comms-nameplate .comms-reference { margin-top: 4px; }
.comms-wire-slip { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--bad); background: var(--bad-08); font: 400 13px/1.4 var(--font-ui); color: var(--ink); }
.comms-news-lead { display: flow-root; min-width: 0; padding: 0 0 12px; border-bottom: 1px solid var(--line-soft); }
.comms-section-rule {
  display: block; margin: 0 0 4px; font: 500 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.comms-stop-press {
  display: inline-block; margin: 0 0 8px; padding: 3px 6px; border: 1px solid var(--bad);
  font: 400 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bad);
}
.comms-lead-art, .comms-news-lead > .comms-planet-print { float: left; margin: 4px 12px 6px 0; }
.comms-lead-art { display: inline-flex; border: 1px solid var(--line); background: var(--field); }
.comms-planet-print { display: block; object-fit: cover; border: 1px solid var(--line); }
#comms-detail .comms-lead-title { margin: 6px 0 0; font: 600 22px/1.15 var(--font-head); color: var(--ink-title); overflow-wrap: break-word; }
#comms-detail .comms-news-lead > p:not(.comms-dateline), #comms-detail .comms-brief-body > p:not(.comms-dateline) {
  margin-top: 6px; font: 400 13px/1.45 var(--font-ui); color: var(--ink-muted); white-space: pre-line;
}
.comms-notice-link { display: inline-flex; align-items: center; min-height: 24px; margin-top: 6px; font: 400 13px/1.4 var(--font-ui); }
.comms-briefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; min-width: 0; }
/* A narrow desk (under the Shipping List from 1200 to 1439 px) sets its
   briefs in one column. */
@container comms-desk (max-width: 440px) {
  .comms-briefs { grid-template-columns: minmax(0, 1fr); }
}
.comms-brief { min-width: 0; border-bottom: 1px solid var(--line-soft); }
.comms-brief > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px;
  min-height: 44px; padding: 8px 0; box-sizing: border-box;
}
.comms-brief > summary .comms-section-rule { grid-column: 1; grid-row: 1; margin: 0; }
.comms-brief > summary .comms-tick { grid-column: 2; grid-row: 1; justify-self: end; }
#comms-detail .comms-brief h5 { grid-column: 1; grid-row: 2; margin: 0; font: 600 16px/1.2 var(--font-head); color: var(--ink); overflow-wrap: break-word; }
.comms-brief > summary::after { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }
.comms-brief-body { display: flow-root; padding: 0 0 10px; }
.comms-brief-body > .comms-thumb, .comms-brief-body > .comms-planet-print { float: left; margin: 2px 10px 4px 0; }
#comms-classifieds:not(:empty), #comms-stories { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
#comms-classifieds { display: flex; flex-direction: column; gap: 6px; }
#comms-classifieds > .comms-section-title { margin-bottom: 2px; }
#comms-detail .comms-cutting {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 10px;
  min-height: 44px; padding: 6px 10px; box-sizing: border-box;
  border: 1px solid var(--line); background: var(--field); color: var(--ink); text-decoration: none;
}
#comms-detail .comms-cutting:hover { border-color: var(--accent-60); background: var(--accent-08); color: var(--ink); }
.comms-cutting-copy { display: flex; flex-direction: column; min-width: 0; }
.comms-cutting-copy strong { font: 600 16px/1.2 var(--font-head); color: var(--ink); overflow-wrap: anywhere; }
.comms-cutting-copy span { font: 400 13px/1.4 var(--font-ui); color: var(--ink-muted); }
.stories-list { display: flex; flex-direction: column; min-width: 0; }
.comms-feature { min-width: 0; border-bottom: 1px solid var(--line-soft); }
.comms-feature > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 8px 0; box-sizing: border-box; font: 600 16px/1.2 var(--font-head); color: var(--ink);
}
.comms-feature > p { margin: 0 0 8px; font: 400 13px/1.45 var(--font-ui); color: var(--ink-muted); }
.comms-feature-sheet {
  margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); background: var(--field);
  font: 400 13px/1.5 var(--font-ui); color: var(--ink); white-space: pre-wrap; overflow-wrap: break-word;
}
#comms-faxes:not(:empty) { display: flex; flex-direction: column; gap: var(--gap); margin-top: 12px; }
.comms-fax { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); background: var(--field); }
.comms-fax > header { padding: 0 0 6px; border-bottom: 1px dashed var(--line); font: 400 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
#comms-detail .comms-fax h4 { margin: 8px 0 0; font: 600 16px/1.2 var(--font-head); color: var(--ink); overflow-wrap: break-word; }
#comms-detail .comms-fax > p { margin-top: 4px; font: 400 13px/1.45 var(--font-ui); color: var(--ink-muted); white-space: pre-line; }
#comms-detail .comms-fax > p.comms-reference { font: 400 11px/1.4 var(--font-mono); white-space: normal; }
.comms-registry:not(:empty) { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.comms-sealed {
  margin-top: 12px; padding: 8px 10px; border: 1px dashed var(--muted-40);
  font: 400 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}

/* ── Receiver log ───────────────────────────────────────────────────────── */
.comms-log { min-width: 0; }
#comms-tear-line {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px;
  padding: 0 0 8px; border-bottom: 1px solid var(--accent-60);
}
#comms-tear-line[data-link="false"] { border-bottom-color: var(--bad); }
#comms-unread-count { font: 600 16px/1.2 var(--font-head); color: var(--ink); }
#comms-tear-line .comms-reference { letter-spacing: .06em; text-transform: uppercase; }
#comms-activity-status { margin-top: 8px; }
#comms-detail .activity-controls { margin: 10px 0 2px; }
#comms-notifications { display: flex; flex-direction: column; min-width: 0; max-height: none; overflow: visible; }
#comms-notifications > p { padding: 8px 0; font: 400 13px/1.45 var(--font-ui); color: var(--ink-muted); }
.activity-entry { min-width: 0; padding: 8px 0 8px 10px; border-bottom: 1px solid var(--line-soft); }
/* Unread entries carry the selected-tab bar; one that needs the captain
   carries it in red. */
.activity-entry:not(.read) { box-shadow: inset 2px 0 0 var(--accent); }
.activity-entry.needs-you:not(.read) { box-shadow: inset 2px 0 0 var(--bad); }
.activity-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; }
.activity-needs {
  padding: 2px 6px; border: 1px solid var(--bad);
  font: 400 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bad);
}
#comms-detail .activity-entry h4 {
  display: flex; align-items: center; gap: 8px; min-width: 0; margin: 4px 0 0;
  font: 500 13px/1.4 var(--font-ui); color: var(--ink); overflow-wrap: anywhere;
}
#comms-detail .activity-entry > p { margin-top: 2px; font: 400 13px/1.45 var(--font-ui); color: var(--ink-muted); overflow-wrap: break-word; }
#comms-detail .activity-entry > p.comms-money { font: 400 12px/1.4 var(--font-mono); color: var(--ink); }
.comms-money strong { font-weight: 400; color: var(--accent); }
/* merchant.css sizes the Older button for the retired paper feed. */
body.glass-bridge #comms-older { min-height: 0; margin-top: 10px; white-space: nowrap; }

/* ── Verdict marks (VerdictStamps): Comms, the watch handover, journey ─── */
/* The same mono status tag as the journey panels (journey.css): accent, and
   red for goods held back from sale. */
.stamp, .estimate-mark, .recorded-status {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%;
  padding: 3px 6px; border: 1px solid currentColor; border-radius: 0; transform: none;
  font: 400 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.stamp[data-status="held"] { color: var(--bad); }
.stamp small { font: 400 11px/1.4 var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.estimate-mark { border-style: dashed; color: var(--ink-muted); }
.recorded-status { border-color: var(--line); color: var(--ink-muted); }
#comms-notifications :is(.stamp, .estimate-mark, .recorded-status) { margin: 6px 6px 0 0; }
/* At 1200 px and wider (the log in either column) each entry's tick sits
   beside its title, as in Inbox, so the long list runs shorter. The source
   order (tick, then title) is unchanged for assistive technology. */
@media (min-width: 1200px) {
  #comms-activity .activity-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  #comms-activity .activity-entry > * { grid-column: 1 / -1; }
  #comms-detail #comms-activity .activity-entry > h4 { grid-column: 1; grid-row: 1; margin-top: 0; }
  #comms-activity .activity-entry > .activity-heading { grid-column: 2; grid-row: 1; align-self: center; justify-content: flex-end; }
}

/* ── Ops: the docket a live notice pins to a matching cargo row ─────────── */
.notice-docket { grid-column: 1 / -1; min-width: 0; margin: 10px 0 0; }
.dockside-manifest-row:has(.notice-docket) { position: relative; }
.notice-docket-side { position: absolute; z-index: 2; margin: 0; box-sizing: border-box; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Two columns below 1200 px, the narrow one on the left. By default the
   notice board and the receiver share the left and the news desk runs down
   the right; comms.js picks the other two arrangements (as at 1200 px and
   wider) when they leave a shorter page, such as a full page of log. */
@media (min-width: 768px) and (max-width: 1199px) {
  #comms-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    grid-template-areas: "board desk" "receiver desk";
  }
  #comms-grid[data-layout="receiver"] { grid-template-areas: "board receiver" "desk receiver"; }
  #comms-grid[data-layout="stack"] { grid-template-areas: "board receiver" "board desk"; }
}
@media (max-width: 767px), (max-width: 1279px) and (max-height: 500px) and (pointer: coarse) {
  #comms-grid { display: flex; flex-direction: column; }
  #comms-grid > * { width: 100%; box-sizing: border-box; }
  #comms-jump-links { display: flex; gap: 6px; margin: 0 0 var(--gap); }
  #comms-jump-links > .gl-btn { flex: 1 1 0; min-width: 0; min-height: 44px; height: auto; }
  .comms-briefs { grid-template-columns: minmax(0, 1fr); }
  .comms-notice-link { min-height: 44px; }
  /* Phones fold each notice to a stub; opening it shows the whole notice. */
  .port-notice > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 44px; padding: 8px 12px; box-sizing: border-box;
  }
  .port-notice[open] > summary { border-bottom: 1px solid var(--line-soft); }
  .notice-stub-good { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
  .notice-stub-copy { display: flex; flex-direction: column; min-width: 0; }
  .notice-stub-copy strong { font: 600 16px/1.2 var(--font-head); color: var(--ink); overflow-wrap: anywhere; }
  .notice-stub-copy span { font: 400 11px/1.4 var(--font-mono); color: var(--ink-muted); }
  .notice-stub-time { flex: none; display: flex; flex-direction: column; align-items: flex-end; font: 400 11px/1.4 var(--font-mono); color: var(--ink); text-align: right; }
  .notice-stub-time small { font: 400 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
  .comms-lead-art, .comms-news-lead > .comms-planet-print { float: none; display: inline-flex; margin: 6px 0; }
  #comms-detail .activity-controls > .gl-btn { flex: 1 1 auto; }
}
@media (max-width: 640px), (pointer: coarse) {
  body.glass-bridge #comms-older { min-height: 44px; }
  #comms-detail .comms-cutting { min-height: 44px; }
}

/* ── Accessibility modes ────────────────────────────────────────────────── */
@media (forced-colors: active) {
  .port-notice, .board-empty, .comms-cutting, .comms-fax, .comms-feature-sheet, .comms-wire-slip { border-color: CanvasText; background: Canvas; }
  .port-notice.can-deliver { border-width: 2px; }
  /* The unread bar is a shadow, which forced colours drop: draw it as a rule. */
  .activity-entry:not(.read) { border-left: 3px solid CanvasText; }
  .stamp, .estimate-mark, .recorded-status, .notice-demand, .activity-needs, .comms-stop-press { border-color: CanvasText; color: CanvasText; }
  .comms-section-title, .comms-section-rule, .notice-tag, .notice-lamp, .comms-reference, .comms-tick, .comms-dateline { color: CanvasText; }
}