/* Focus viewport chrome — single-Signal, large-target layout
 * (Child B of #14, was 'mode-whisper' pre-v0.9.0; renamed to
 * disambiguate from the Whisper TTS feature which keeps its name).
 *
 * Focus mode strips the UI to a single Signal at a time, optimized
 * for the "phone in pocket / earbuds in" use case. Hides the renderer
 * surfaces (#card-stream, #bubble-field) and the bottom panel; shows
 * the Signal slot prominently and the whisper-rail (.whisper-rail
 * class kept since it's the TTS rail, gated visible by body.mode-focus).
 *
 * Companion to styles-render-mode.css which carries the visibility
 * rules. This file carries the mode-focus-specific chrome — large
 * fonts, centered layout, generous spacing.
 */

/* Container layout — centered, generous padding */
body.mode-focus .content-area {
  align-items: center;
  justify-content: center;
}

body.mode-focus .panels {
  flex: 0 0 auto;
  width: 100%;
  max-width: 640px;
  padding: 24px 16px;
}

/* The Signal slot — promote to the visual centerpiece.
   Override the base .signal-slot { display: contents } from
   styles-signals.css so the slot gets its own box that we can
   constrain to the panels' max-width. Without this, the .signal
   would lay out as a direct child of .content-area (full viewport
   width) regardless of any max-width we set on the panels container. */
body.mode-focus .signal-slot {
  /* Switched from block to flex-column so we can use gap between
     stacked cards (Signal + Question + multiple Signals). Block
     siblings have no inter-card spacing by default. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
  /* Constrain height so multiple stacked cards don't overflow off
     the bottom of the viewport. ~180px accounts for the top rail +
     bottom panel chrome on the smallest phones; on roomy screens
     the slot just never reaches the cap and the rule is inert. */
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

body.mode-focus .signal-slot.empty {
  display: block;  /* Override the styles-signals.css `.empty { display: none }` */
}

body.mode-focus .signal-slot.empty::before {
  content: "Listening for Signals…";
  display: block;
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-lg);
  padding: 32px 0;
}

/* Each individual Signal renders larger in whisper mode. Override
   flex-shrink:0 from the base so width:100% on the parent actually
   constrains, and let text wrap inside. */
body.mode-focus .signal {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  /* clamp(min, ideal, max). Aggressive floor (10px) so cards stack
     compactly on small phones without burning vertical space on
     padding. */
  padding: clamp(10px, 3vw, 24px);
  font-size: var(--fs-lg);
  border-radius: var(--radius-lg);
  border-width: 2px;
  white-space: normal;
  word-break: break-word;
}

body.mode-focus .signal .sig-label {
  /* Shrink with viewport so the label doesn't dominate the card
     on a narrow phone. Floor 10px keeps it legible at the smallest
     viewport. */
  font-size: clamp(10px, 2.6vw, var(--fs-md));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.mode-focus .signal .sig-text {
  /* clamp(min, ideal, max): never smaller than 13px so labels stay
     legible; never larger than --fs-lg (18px) on roomy screens;
     scales with viewport in between so long Signals fit small phones
     without clipping or pushing the close X off-screen. */
  font-size: clamp(13px, 3.6vw, var(--fs-lg));
  line-height: 1.4;
  margin-top: 8px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Hide TTL countdown + suppress button + arrow in whisper mode —
   too cluttered for the in-pocket use case. The close X (.sig-close)
   STAYS visible so users can manually dismiss a Signal that's
   sticking around (TTL auto-clear in this mode is unreliable because
   the Signal fills most of the screen and the cursor usually hovers it,
   which triggers the existing hover-to-pin behavior). */
body.mode-focus .signal .sig-ttl,
body.mode-focus .signal .sig-suppress,
body.mode-focus .signal .sig-arrow {
  display: none;
}

/* Promote the close X to a large, finger-friendly target in mode-focus. */
body.mode-focus .signal .sig-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
}
body.mode-focus .signal .sig-close:hover {
  background: var(--surface);
  color: var(--text);
}

/* Whisper rail (Commit 6 will populate) — placeholder layout */
.whisper-rail {
  display: none;  /* hidden by default; mode-focus shows it */
  flex-direction: row;
  gap: 12px;
  width: 100%;
  max-width: 640px;
  padding: 16px;
  margin-top: 24px;
}

body.mode-focus .whisper-rail {
  display: flex;
}

.whisper-rail-btn {
  flex: 1;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--surface-hi);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.whisper-rail-btn:hover { background: var(--surface); }
.whisper-rail-btn:active { transform: scale(0.97); }

.whisper-rail-btn.keep   { background: rgba(76, 175, 80, 0.12); color: var(--green); border-color: rgba(76, 175, 80, 0.3); }
.whisper-rail-btn.repeat { background: rgba(var(--accent-rgb), 0.12); color: var(--purple); border-color: rgba(var(--accent-rgb), 0.3); }
.whisper-rail-btn.mute   { background: rgba(255, 183, 77, 0.12); color: var(--amber); border-color: rgba(255, 183, 77, 0.3); }

/* ── #68 Question card in the Focus slot ────────────────────────────
   Renders alongside .signal in body.mode-focus .signal-slot. Same
   layout footprint as a .signal so the slot's max-width and padding
   work for both. Uses a distinct accent color (the same as the
   .whisper-rail-btn.repeat purple) so users can read the slot type at
   a glance without reading the QUESTION label. */
body.mode-focus .question-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  /* Responsive padding — same aggressive floor as .signal. */
  padding: clamp(10px, 3vw, 24px);
  font-size: var(--fs-lg);
  border-radius: var(--radius-lg);
  border: 2px solid rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text);
  position: relative;
}

body.mode-focus .question-card .q-label {
  /* Responsive label — same approach as .sig-label. */
  font-size: clamp(10px, 2.6vw, var(--fs-md));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--purple);
  font-weight: 600;
}

body.mode-focus .question-card .q-text {
  /* Same responsive-shrink as .sig-text — Questions tend to be
     longer than Signals so this matters more here. */
  font-size: clamp(13px, 3.6vw, var(--fs-lg));
  line-height: 1.4;
  margin-top: 8px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

body.mode-focus .question-card .q-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
}
body.mode-focus .question-card .q-close:hover {
  background: var(--surface);
  color: var(--text);
}

/* #84 — the .q-ttl countdown bar is a Card/Bubble affordance (styled in
   styles-signals.css). Hide it in Focus, the same way Focus hides the
   Signal .sig-ttl — the Focus card is large and the bar reads as noise. */
body.mode-focus .question-card .q-ttl {
  display: none;
}