/* Phase 42 design layer (docs/PHASE42_MESSAGING_DOCUMENTS_COHORT_PROMPT.md): the file viewer, converted Office
   previews, the naming reminder, document review lanes and the messaging composer. No inline styles. */

/* ---------------------------------------------------------------- naming reminder */
.p42-naming { display: grid; gap: 3px; margin: 4px 0 10px; padding: 11px 14px; border: 1px solid rgba(240, 180, 41, .55); border-left: 4px solid #f0b429; border-radius: 12px; color: var(--rf-text, var(--ink)); background: var(--rf-gold-soft, #fff5d6); font-size: 13px; line-height: 1.45; }
.p42-naming strong { font-size: 13px; }
.p42-naming code { padding: 1px 5px; border-radius: 5px; background: rgba(5, 43, 71, .08); font-size: 12px; overflow-wrap: anywhere; }
:root[data-theme="dark"] .p42-naming code { background: rgba(255, 255, 255, .1); }
.p42-naming.compact { padding: 8px 12px; font-size: 12px; }
.p42-naming-hint { display: block; margin-top: 5px; color: var(--rf-amber, #946200); font-size: 12px; font-weight: 600; }
.p42-naming-hint::before { content: "⚠ "; }
.p42-title-flag { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; color: #946200; background: #fff3d3; font-size: 11px; font-weight: 800; }
:root[data-theme="dark"] .p42-title-flag { color: #f0c65a; background: rgba(240, 180, 41, .14); }
.p42-naming-flag { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; color: #946200; background: #fff3d3; font-size: 13px; font-weight: 600; }

/* ---------------------------------------------------------------- viewer */
.p42-viewer { display: grid; gap: 12px; }
.p42-viewer-title { margin: 2px 0; overflow-wrap: anywhere; }
.p42-viewer-body { display: grid; place-items: center; min-height: 320px; max-height: 70vh; overflow: auto; border: 1px solid var(--rf-hairline); border-radius: 16px; background: var(--rf-surface-2); }
.p42-frame { width: 100%; height: 68vh; border: 0; border-radius: 14px; background: #fff; }
.p42-image { display: block; max-width: 100%; max-height: 66vh; margin: auto; border-radius: 10px; object-fit: contain; }
.p42-media { width: 100%; max-height: 66vh; border-radius: 12px; background: #000; }
.p42-audio { width: min(520px, 92%); margin: 40px auto; }
.p42-text { width: 100%; max-height: 66vh; margin: 0; padding: 18px; overflow: auto; color: var(--rf-text); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.p42-empty { display: grid; justify-items: center; gap: 8px; max-width: 420px; padding: 32px; color: var(--rf-text-2); text-align: center; }
.p42-empty span { font-size: 34px; }
.p42-viewer-actions { flex-wrap: wrap; }
.p42-viewer-actions .approve { color: var(--rf-green); border-color: var(--rf-green); }
.p42-viewer-actions .reject { color: var(--rf-red); border-color: var(--rf-red); }

/* converted Office documents read like paper */
.p42-doc { align-self: start; width: 100%; max-width: 860px; margin: 0 auto; padding: 32px clamp(18px, 4vw, 48px); color: #17222c; background: #fff; box-shadow: 0 6px 26px rgba(10, 25, 40, .1); font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.p42-doc h1, .p42-doc h2, .p42-doc h3, .p42-doc h4 { color: #052b47; font-family: system-ui, sans-serif; line-height: 1.25; }
.p42-doc img { max-width: 100%; height: auto; }
.p42-doc table { width: 100%; margin: 12px 0; border-collapse: collapse; font-family: system-ui, sans-serif; font-size: 13px; }
.p42-doc th, .p42-doc td { padding: 6px 9px; border: 1px solid #d9d6ce; text-align: left; vertical-align: top; }
.p42-doc th { color: #052b47; background: #f5f1e8; }
.p42-doc-sheet { max-width: none; padding: 18px; font-family: system-ui, sans-serif; }
.pv-sheet { margin-bottom: 24px; overflow-x: auto; }
.pv-sheet h4 { margin: 0 0 8px; }
.pv-note { color: #66737d; font-size: 12px; font-style: italic; }
.p42-doc-slides { display: grid; gap: 14px; max-width: 760px; padding: 18px; background: transparent; box-shadow: none; }
.pv-slide { position: relative; padding: 26px 28px; border: 1px solid #d9d6ce; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(10, 25, 40, .08); aspect-ratio: 16 / 9; overflow: auto; }
.pv-slide h4 { margin: 8px 0 10px; font-size: 20px; }
.pv-slide p { margin: 4px 0; font-family: system-ui, sans-serif; font-size: 14px; }
.pv-slide-no { position: absolute; top: 10px; right: 14px; color: #8a6208; font-family: system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* ---------------------------------------------------------------- document review lanes */
.p42-lanes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.p42-lane { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line, var(--rf-hairline)); border-radius: 999px; color: var(--ink, var(--rf-text)); background: var(--paper, var(--rf-surface)); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.p42-lane b { min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--cream, var(--rf-surface-2)); font-size: 12px; text-align: center; }
.p42-lane.active { border-color: #052b47; color: #fff; background: #052b47; }
.p42-lane.active b { color: #052b47; background: #f0b429; }
.p42-lane-pending b { color: #946200; background: #fff3d3; }
.p42-lane-rejected b { color: #c81f2c; background: #fdebed; }
.p42-doc-section { margin-bottom: 26px; padding: 18px; border: 1px solid var(--line, var(--rf-hairline)); border-radius: 22px; background: var(--paper, var(--rf-surface)); }
.p42-doc-section-pending { border-color: rgba(240, 180, 41, .7); background: linear-gradient(180deg, rgba(240, 180, 41, .1), transparent 140px), var(--paper, var(--rf-surface)); }
.p42-doc-section-returned { opacity: .92; border-style: dashed; }
.p42-doc-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.p42-doc-section-head h3 { margin: 0; color: var(--navy-icon, #052b47); font-size: 18px; }
.p42-doc-section-pending .p42-doc-section-head h3::before { content: "⏳ "; }
.p42-doc-section-approved .p42-doc-section-head h3::before { content: "✓ "; color: #0f7a50; }
.p42-doc-section-returned .p42-doc-section-head h3::before { content: "↩ "; color: #c81f2c; }
.p42-doc-section-head span { color: var(--muted, var(--rf-text-3)); font-size: 13px; font-weight: 700; }
.p42-doc-section-head p { flex-basis: 100%; margin: 0; color: var(--muted, var(--rf-text-2)); font-size: 13px; }
.p42-danger-zone { margin-top: 14px; padding: 10px 14px; border: 1px dashed var(--rf-red); border-radius: 12px; }
.p42-danger-zone summary { color: var(--rf-red); font-weight: 700; cursor: pointer; }

/* ---------------------------------------------------------------- messaging */
.p42-composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding-top: 12px; border-top: 1px solid var(--rf-hairline); }
.p42-composer textarea { min-height: 52px; resize: vertical; }
.p42-compose { display: grid; gap: 10px; }
.p42-people { display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.p42-person-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--rf-hairline); border-radius: 12px; color: inherit; background: var(--rf-surface); text-align: left; cursor: pointer; }
.p42-person-option strong { display: block; font-size: 14px; }
.p42-person-option small { display: block; color: var(--rf-text-3); font-size: 11px; }
.p42-person-option.active { border-color: #f0b429; background: var(--rf-gold-soft); }
.p42-chosen { margin: 0; padding: 8px 12px; border-radius: 10px; color: #052b47; background: var(--rf-gold-soft); font-weight: 700; }
:root[data-theme="dark"] .p42-chosen { color: var(--rf-gold-ink); }

@media (max-width: 639px) {
  .p42-viewer-body { min-height: 240px; max-height: 62vh; }
  .p42-frame { height: 60vh; }
  .p42-doc { padding: 18px; font-size: 14px; }
  .p42-composer { grid-template-columns: 1fr; }
  .p42-lanes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .p42-lane { flex: none; }
  .p42-doc-section { padding: 12px; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .p42-lane { transition: none; }
}