/* «الوارد» (board B10) — component rules only, on the «مِحْوَر» tokens and classes of lifeos.css (W0).
   No token, font or shell rule is redefined here. RTL via logical properties. */
.w4a-page { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.w4a-page :is(.ci-page-message, .ci-drafts-host, .ci-editor-host, .ci-staged-host, .ci-recorder-host):empty { display: none; }
.w4a-page .ci-editor-host { display: flex; flex-direction: column; gap: 16px; }

/* capture panel */
.ci-capture .textarea.big { min-block-size: 140px; }
.ci-capture-actions { min-width: 0; }
.ci-staged-area { min-width: 0; }
.ci-staged-area:not(:has(> :not(:empty))) { display: none; }
.ci-capture-more > summary, .ci-fold > summary, .ci-filters > summary { display: flex; align-items: center; gap: 6px; min-block-size: 40px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer; list-style: none; }
.ci-capture-more > summary::-webkit-details-marker, .ci-fold > summary::-webkit-details-marker, .ci-filters > summary::-webkit-details-marker { display: none; }
.ci-capture-more > summary::before, .ci-fold > summary::before, .ci-filters > summary::before { content: ""; inline-size: 7px; block-size: 7px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur) var(--ease); margin-inline-end: 4px; }
:is(.ci-capture-more, .ci-fold, .ci-filters)[open] > summary::before { transform: rotate(45deg); }
.ci-title-preview { padding: 8px 12px; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); }
.ci-record-hint { display: flex; align-items: center; gap: 6px; }
.ci-recorder .state { white-space: normal; }
.ci-staged.is-failed { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.ci-file-name { overflow-wrap: anywhere; }

/* save feedback */
.ci-save-feedback { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ci-save-feedback:not(:has(> :nth-child(2))) { gap: 0; }
.ci-save-status { white-space: normal; }
.ci-field-error { color: var(--danger-ink); }
.ci-field-error:empty { display: none; }
.lo[data-theme="dark"] .ci-field-error { color: var(--danger); }
.ci-notice .btn-row { margin-block-start: 2px; }

/* unsorted list rows (B10) */
.ci-inbox-row { align-items: flex-start; flex-wrap: wrap; gap: 12px 16px; padding: 16px 4px; }
.ci-row-icon { color: var(--ink-3); margin-block-start: 4px; flex: none; }
.ci-row-main { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.ci-row-main > .m { margin: 0; }
.ci-row-title { font-size: 16px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.ci-row-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; min-width: 0; }
.ci-voice { display: flex; flex-direction: column; gap: 4px; }
.ci-transcript { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; color: var(--ink); }
.ci-audio { display: block; max-inline-size: 100%; block-size: 36px; }
.ci-filters { border-block-end: 1px solid var(--line); padding-block-end: 8px; }
.ci-filter-row { display: flex; flex-wrap: wrap; gap: 12px; padding-block: 8px 4px; }
.ci-filter-row .field { flex: 1 1 200px; }
.ci-recent-title { font-size: 14.5px; overflow-wrap: anywhere; }
.ci-foot-grid { align-items: start; }

/* detail: original, capture context, decisions */
.ci-detail { display: flex; flex-direction: column; gap: 24px; }
.ci-detail-split { grid-template-columns: minmax(0, 1fr) 380px; }
.ci-original { border-color: var(--line-2); }
.ci-original-body { margin: 0; padding-inline-start: 14px; border-inline-start: 3px solid var(--line-2); font-size: 16px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); max-inline-size: 72ch; }
.ci-url { overflow-wrap: anywhere; word-break: break-all; }
.ci-file-row .t { font-size: 14.5px; overflow-wrap: anywhere; }
.ci-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ci-choice-grid > .btn { justify-content: flex-start; min-block-size: 48px; white-space: normal; text-align: start; line-height: 1.35; }
.ci-reason { color: var(--ink-2); }
.ci-wrapper-actions { justify-content: flex-start; }

/* explicit forms */
.ci-form .field + .field { margin-block-start: 2px; }
.ci-form-footer { border-block-start: 1px solid var(--line); padding-block-start: 14px; }
.ci-check-row { display: flex; align-items: center; gap: 10px; min-block-size: 44px; cursor: pointer; font-size: 14px; }
.ci-check-row input { inline-size: 20px; block-size: 20px; flex: none; accent-color: var(--accent); }
.ci-compare-row { display: grid; gap: 4px; padding-block: 8px; border-block-end: 1px solid var(--line); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ci-compare-row:last-child { border-block-end: 0; }
.ci-compare-row strong { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }

@media (max-width: 1023px) {
  .ci-detail-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ci-row-actions { align-items: stretch; inline-size: 100%; }
  .ci-row-actions .btn-row { justify-content: flex-start; }
  .ci-choice-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Phone widths (360–390): 44px touch targets and 16px fields (no zoom on focus). */
@media (max-width: 600px) {
  .w4a-page { gap: 20px; }
  .w4a-page :is(.btn, .btn-sm, .seg button, .chip-btn, summary) { min-block-size: 44px; }
  .w4a-page .btn-icon.btn-sm { inline-size: 44px; }
  .w4a-page :is(.input, .select, .textarea) { font-size: 16px; min-block-size: 44px; }
  .ci-inbox-row { padding-block: 14px; }
  .ci-original-body { font-size: 15.5px; }
}