/* R3 Signals — server-arbitrated meeting cues.
 *
 * Extracted from styles.css 2026-05-20 (Phase 7 bucket 3 follow-up)
 * to bring styles.css under the 700-LoC hard cap. Cascade order is
 * preserved: loads last among the styles-*.css module split, then
 * styles-share.css / styles-render-mode.css / styles-ask-ori.css
 * follow.
 */

    /* ── R3 Signals — server-arbitrated meeting cues ────────────────── */
    /* Slot lives just below the toolbar (Classic) or at the top of the
       bubble field (Bubble). Empty slot collapses to zero so the layout
       doesn't reserve space when no Signal is active. */
    .signal-slot { display: contents; }
    .signal-slot.empty { display: none; }

    /* Throttle pill — surfaces gate reasons so the user knows the
       system is rate-limiting, not broken. Sits just below the slot. */
    .signal-throttle {
      padding: 4px 12px;
      background: var(--surface);
      border-bottom: 1px solid var(--border-sub);
      color: var(--text-3);
      font-size: 11px;
      letter-spacing: 0.3px;
      flex-shrink: 0;
    }
    .signal-throttle::before {
      content: "↻ ";
      color: var(--text-2);
    }
    .signal-throttle[data-reason="dismiss_streak"] { color: var(--amber); }
    .signal-throttle[data-reason="account_hour_cap"],
    .signal-throttle[data-reason="meeting_hour_cap"] { color: var(--purple); }

    .signal {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 14px; min-height: 36px;
      background: var(--surface-hi);
      border-bottom: 1px solid var(--border);
      color: var(--text);
      font-size: 13px;
      cursor: default;
      position: relative;
      animation: signalIn 280ms ease-out;
      transition: opacity 220ms ease-out;
      overflow: hidden;
      flex-shrink: 0;
    }
    .signal.fading { opacity: 0; }
    .signal.pinned { box-shadow: 0 0 0 2px var(--purple) inset; }

    @keyframes signalIn {
      from { transform: translateY(-8px); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }

    .signal::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    }
    .signal[data-type="risk"]::before          { background: var(--sig-risk); }
    .signal[data-type="recurrence"]::before    { background: var(--sig-recurrence); }
    .signal[data-type="clarify"]::before       { background: var(--sig-clarify); }
    .signal[data-type="meaning_shift"]::before { background: var(--sig-meaning_shift); }
    .signal[data-type="decision"]::before      { background: var(--sig-decision); }
    .signal[data-type="acceptance"]::before    { background: var(--sig-acceptance); }

    .signal .sig-icon {
      width: 18px; height: 18px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; flex-shrink: 0;
    }
    .signal[data-type="risk"]          .sig-icon { background: var(--sig-risk); color: var(--sig-risk-fg); }
    .signal[data-type="recurrence"]    .sig-icon { background: var(--sig-recurrence); color: var(--sig-recurrence-fg); }
    .signal[data-type="clarify"]       .sig-icon { background: var(--sig-clarify); color: var(--sig-clarify-fg); }
    .signal[data-type="meaning_shift"] .sig-icon { background: var(--sig-meaning_shift); color: var(--sig-meaning_shift-fg); }
    .signal[data-type="decision"]      .sig-icon { background: var(--sig-decision); color: var(--sig-decision-fg); }
    .signal[data-type="acceptance"]    .sig-icon { background: var(--sig-acceptance); color: var(--sig-acceptance-fg); }

    /* #80 — type label is a small color-coded badge (tinted pill); the
       description is the primary, dominant element. Per-type tints are
       defined once below for both surfaces (live .sig-label + panel
       .signal-label) and mirror the .signal-icon color map.
       #110 — geometry (radius/pad/weight/case/letter-spacing) now comes
       from the .pill primitive (the live label dual-classes `sig-label
       pill`). Only the slot-density font-size override survives here: the
       pill's 12px would shrink #80's description-dominance margin, so the
       live label stays 9px (mobile 10px below). Per-type COLOR is kept
       (rules at the bottom of this file) — the live label is a taxonomy
       cue, not a flat status badge. */
    .signal .sig-label {
      font-size: 9px; margin-right: 2px;
    }
    .signal .sig-text {
      flex: 1; min-width: 0; font-weight: 500;
      /* #143 — wrap on desktop too (mobile + Focus already do). A Signal is
         only useful read completely; the slot grows (.signal min-height is a
         floor) so the full text shows instead of a single-line ellipsis. */
      white-space: normal; overflow-wrap: anywhere; line-height: 1.4;
    }
    .signal .sig-suppress {
      font-size: 10px; color: var(--text-3);
      background: transparent; border: 1px solid var(--border-sub);
      border-radius: 4px; padding: 2px 7px; cursor: pointer;
      flex-shrink: 0; font-family: inherit;
    }
    .signal .sig-suppress:hover { color: var(--text); border-color: var(--border); }
    .signal .sig-close {
      width: 22px; height: 22px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 16px; line-height: 1; color: var(--text-3);
      background: transparent; border: 1px solid var(--border-sub);
      border-radius: 50%; padding: 0; cursor: pointer;
      flex-shrink: 0; font-family: inherit;
    }
    .signal .sig-close:hover { color: var(--text); border-color: var(--border); }
    .signal .sig-arrow { color: var(--text-3); flex-shrink: 0; font-size: 14px; }

    /* ── Mobile layout (Bubble + Card modes; mode-focus has its own
       layout in styles-focus.css and is unaffected by this media
       query). Pre-rework the row stuffed everything on one horizontal
       line and ellipsis-truncated the text. On a 375px phone the
       text was effectively unreadable. This grid lays the same
       elements out as a 3-row stack: icon+label on top, the full
       text wrapped on its own line below, then suppress/close.
       Arrow + TTL countdown are hidden on mobile to save real
       estate — the close × is the action the user actually needs. */
    @media (max-width: 600px) {
      body:not(.mode-focus) .signal {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas:
          "icon label . close"
          "text text text text"
          "suppress suppress . .";
        gap: 6px 8px;
        align-items: center;
        padding: 10px 14px;
      }
      body:not(.mode-focus) .signal .sig-icon    { grid-area: icon; }
      body:not(.mode-focus) .signal .sig-label   { grid-area: label; font-size: 10px; }
      body:not(.mode-focus) .signal .sig-text {
        grid-area: text;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 13px;
        line-height: 1.35;
      }
      body:not(.mode-focus) .signal .sig-close   { grid-area: close; }
      body:not(.mode-focus) .signal .sig-suppress {
        grid-area: suppress;
        justify-self: start;
      }
      body:not(.mode-focus) .signal .sig-arrow,
      body:not(.mode-focus) .signal .sig-ttl {
        display: none;
      }
    }

    .signal .sig-ttl {
      position: absolute; bottom: 0; left: 0; height: 2px;
      background: linear-gradient(90deg, var(--purple), var(--blue));
      transition: width linear;
    }

    /* #94 — graduation announcement card. Transient "ORi kept X for you"
       notice rendered in the Signal slot (Card + Bubble only; Focus is
       suppressed in graduation-card.js). Reuses the .signal shell for
       layout/animation/mobile-grid; an emerald accent reads it as a
       positive auto-keep rather than a recurrence interrupt. */
    .signal.graduation-card::before       { background: var(--emerald); }
    .signal.graduation-card .sig-icon     { background: var(--emerald); color: #fff; }
    /* #110 — the "Kept" label is a FIXED system-action marker, so it adopts
       the flat `pill status` (grey) variant; the emerald cue still rides the
       ::before bar + the .sig-icon circle above. (No .sig-label color override
       here — that is the whole point of flattening the status family.) */
    .signal.graduation-card .sig-ttl {
      background: linear-gradient(90deg, var(--emerald), var(--blue));
    }

    /* ── #84 Question card in Card + Bubble views ───────────────────
       The .question-card renders in the shared slot in all modes. Focus
       has its own bespoke layout in styles-focus.css; here we give Card +
       Bubble the same row treatment as a live .signal so a Question reads
       with matching visual weight. A purple accent (not a per-type signal
       color) marks it as a Question at a glance. Scoped :not(.mode-focus)
       so none of this chrome leaks into the Focus column. */
    body:not(.mode-focus) .question-card {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 14px; min-height: 36px;
      background: var(--surface-hi);
      border-bottom: 1px solid var(--border);
      color: var(--text);
      font-size: 13px;
      position: relative;
      animation: signalIn 280ms ease-out;
      transition: opacity 220ms ease-out;
      overflow: hidden;
      flex-shrink: 0;
    }
    body:not(.mode-focus) .question-card::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: var(--purple);
    }
    /* #110 — the "Question" marker is a FIXED system-action label: it adopts
       the flat `pill status` (grey) variant. Geometry + grey fill come from the
       pill primitive; the purple cue still rides the card's ::before bar. Only
       the slot-density font-size (9px / mobile 10px) is kept here. */
    body:not(.mode-focus) .question-card .q-label {
      font-size: 9px; margin-right: 2px;
    }
    body:not(.mode-focus) .question-card .q-text {
      flex: 1; min-width: 0; font-weight: 500;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    body:not(.mode-focus) .question-card .q-close {
      width: 22px; height: 22px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 16px; line-height: 1; color: var(--text-3);
      background: transparent; border: 1px solid var(--border-sub);
      border-radius: 50%; padding: 0; cursor: pointer;
      flex-shrink: 0; font-family: inherit;
    }
    body:not(.mode-focus) .question-card .q-close:hover {
      color: var(--text); border-color: var(--border);
    }
    body:not(.mode-focus) .question-card .q-ttl {
      position: absolute; bottom: 0; left: 0; height: 2px;
      background: linear-gradient(90deg, var(--purple), var(--blue));
    }

    @keyframes qTtlShrink {
      from { width: 100%; }
      to   { width: 0%; }
    }

    /* Mobile (Bubble + Card) — mirror the .signal grid stack so a long
       Question wraps instead of ellipsis-truncating on a phone. The
       countdown bar is hidden on mobile, same as .sig-ttl. */
    @media (max-width: 600px) {
      body:not(.mode-focus) .question-card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
          "label . close"
          "text  text text";
        gap: 6px 8px;
        align-items: center;
        padding: 10px 14px;
      }
      body:not(.mode-focus) .question-card .q-label { grid-area: label; font-size: 10px; }
      body:not(.mode-focus) .question-card .q-text {
        grid-area: text;
        white-space: normal; overflow: visible; text-overflow: clip;
        font-size: 13px; line-height: 1.35;
      }
      body:not(.mode-focus) .question-card .q-close { grid-area: close; }
      body:not(.mode-focus) .question-card .q-ttl { display: none; }
    }

    /* R3.5 — Signals tab row */
    .signal-row {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 12px; border-bottom: 1px solid var(--border-sub);
      position: relative;
      font-size: var(--fs-sm);
    }
    .signal-row::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    }
    .signal-row[data-type="risk"]::before          { background: var(--sig-risk); }
    .signal-row[data-type="recurrence"]::before    { background: var(--sig-recurrence); }
    .signal-row[data-type="clarify"]::before       { background: var(--sig-clarify); }
    .signal-row[data-type="meaning_shift"]::before { background: var(--sig-meaning_shift); }
    .signal-row[data-type="decision"]::before      { background: var(--sig-decision); }
    .signal-row[data-type="acceptance"]::before    { background: var(--sig-acceptance); }
    .signal-row .signal-icon {
      width: 20px; height: 20px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
    }
    .signal-row[data-type="risk"]          .signal-icon { background: var(--sig-risk); color: var(--sig-risk-fg); }
    .signal-row[data-type="recurrence"]    .signal-icon { background: var(--sig-recurrence); color: var(--sig-recurrence-fg); }
    .signal-row[data-type="clarify"]       .signal-icon { background: var(--sig-clarify); color: var(--sig-clarify-fg); }
    .signal-row[data-type="meaning_shift"] .signal-icon { background: var(--sig-meaning_shift); color: var(--sig-meaning_shift-fg); }
    .signal-row[data-type="decision"]      .signal-icon { background: var(--sig-decision); color: var(--sig-decision-fg); }
    .signal-row[data-type="acceptance"]    .signal-icon { background: var(--sig-acceptance); color: var(--sig-acceptance-fg); }
    .signal-row .signal-body { flex: 1; min-width: 0; }
    .signal-row .signal-text {
      display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    }
    .signal-row .signal-label {
      font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
      font-weight: 700; padding: 1px 6px; border-radius: 999px;
      flex-shrink: 0;
    }
    .signal-row .signal-text-content {
      flex: 1; min-width: 0; color: var(--text);
      font-size: var(--fs-sm); font-weight: 500;
    }

    /* #80 — shared per-type badge tint for both surfaces. Mirrors the
       .signal-icon / ::before color map so a badge reads as the same
       type cue, just text-shaped. */
    .signal[data-type="risk"]          .sig-label,
    .signal-row[data-type="risk"]          .signal-label { background: var(--sig-risk);          color: var(--sig-risk-fg); }
    .signal[data-type="recurrence"]    .sig-label,
    .signal-row[data-type="recurrence"]    .signal-label { background: var(--sig-recurrence);    color: var(--sig-recurrence-fg); }
    .signal[data-type="clarify"]       .sig-label,
    .signal-row[data-type="clarify"]       .signal-label { background: var(--sig-clarify);       color: var(--sig-clarify-fg); }
    .signal[data-type="meaning_shift"] .sig-label,
    .signal-row[data-type="meaning_shift"] .signal-label { background: var(--sig-meaning_shift);  color: var(--sig-meaning_shift-fg); }
    .signal[data-type="decision"]      .sig-label,
    .signal-row[data-type="decision"]      .signal-label { background: var(--sig-decision);      color: var(--sig-decision-fg); }
    .signal[data-type="acceptance"]    .sig-label,
    .signal-row[data-type="acceptance"]    .signal-label { background: var(--sig-acceptance);    color: var(--sig-acceptance-fg); }
    .signal-row .signal-lifecycle {
      font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
      color: var(--text-3); border: 1px solid var(--border-sub);
      border-radius: 4px; padding: 1px 5px;
    }
    .signal-row .signal-meta {
      font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px;
    }
    .signal-row .signal-keep-btn {
      font-size: var(--fs-xs); padding: 4px 10px;
      background: transparent; border: 1px solid var(--border-sub);
      border-radius: 4px; color: var(--text-2); cursor: pointer;
      flex-shrink: 0; align-self: flex-start;
    }
    .signal-row .signal-keep-btn:hover {
      color: var(--text); border-color: var(--border); background: var(--surface-hi);
    }
    .signal-row .signal-keep-btn.kept {
      color: var(--text-3); border-color: var(--border-sub); cursor: default;
    }

    /* #79 — M.2: on a phone the Signals-tab row mirrors the live
       Incoming slot's mobile grid. The nested .signal-body / .signal-text
       boxes are flattened with display:contents so the icon, badge,
       description, meta, and Keep become direct grid items. Result:
       icon + badge on a header row, the description full-width on its own
       row below, then meta, then Keep — instead of the badge being
       crammed inline with the text.

       Applies in portrait phones (<=600px) AND landscape phones/small
       tablets (<=1024px), where the panels-row layout makes the Signals
       column narrow enough that the base flex row crushes the description
       to one word per line. Wide desktop (>1024px landscape) keeps the
       base flex layout, where the column is roomy. */
    @media (max-width: 600px),
           (orientation: landscape) and (max-width: 1024px) {
      .signal-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
          "icon badge life"
          "desc desc  desc"
          "meta meta  meta"
          "keep keep  keep";
        column-gap: 8px;
        row-gap: 6px;
        align-items: center;
      }
      .signal-row .signal-body,
      .signal-row .signal-text { display: contents; }
      .signal-row .signal-icon         { grid-area: icon; }
      .signal-row .signal-label        { grid-area: badge; justify-self: start; }
      .signal-row .signal-lifecycle    { grid-area: life;  justify-self: end; }
      .signal-row .signal-text-content { grid-area: desc; }
      .signal-row .signal-meta         { grid-area: meta; margin-top: 0; }
      .signal-row .signal-keep-btn     { grid-area: keep; justify-self: start; }
    }