/* ============================================================
   viewmode.css - department-framing strip only.

   The Guided / Visual / Detailed mode system now lives centrally in
   aero.css because every page loads it. This file keeps the per-department
   framing styles used by icp-frame.js.
   ============================================================ */

/* ---- the department framing strip (icp-frame.js mountStrip) --------------- */
.ti-frame-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  background: var(--surface-2);
  min-width: 0;
}
.ti-frame-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--accent-deep);
  flex-shrink: 0;
}
.ti-frame-line {
  font-size: 13px; line-height: 1.45; color: var(--text-dim);
  min-width: 0;
}

/* a per-surface scope line, in any header, reading the department wording */
.ti-scope-line {
  font-size: 13px; line-height: 1.5; color: var(--text-dim);
  margin: 2px 0 0;
}
.ti-scope-line strong { color: var(--text); font-weight: 600; }

/* ---- eased mode + department swaps (honor reduced motion) ----------------- */
@media (prefers-reduced-motion: no-preference) {
  .ti-frame-line,
  .ti-scope-line {
    transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* on small screens the framing strip stacks so nothing overflows at 375px */
@media (max-width: 560px) {
  .ti-frame-strip { flex-direction: column; align-items: flex-start; gap: 4px; }
}