/* =====================================================================
   APPROVAL CENTER - STYLES  (Module #5, the collaboration hub)
   ---------------------------------------------------------------------
   Built on the design system + shared .mc-* / .cw-* / .ds-* components.
   Adds the approval queue, decision panel, and type-adaptive previews.
   Prefix: .ap
   ===================================================================== */

.ap { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 1480px; }
.ap-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* ---- Filters ---- */
.ap-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ap-filter { display: inline-flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--ds-hairline); background: var(--ds-surface-2); cursor: pointer; padding: 8px 14px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; color: var(--ds-text-lo); }
.ap-filter:hover { color: var(--ds-text-hi); border-color: var(--ds-hairline-strong); }
.ap-filter.is-active { color: var(--ds-text-hi); border-color: var(--ds-gold-500); }
.ap-filter__n { font-size: var(--fs-xs); font-weight: 700; color: var(--ds-text-mute); background: var(--ds-overlay); border-radius: var(--r-pill); padding: 1px 7px; }
.ap-filter.is-active .ap-filter__n { color: var(--ds-accent); }

/* ---- List ---- */
.ap-list { display: grid; gap: var(--sp-3); }
.ap-card { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5); background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); border-radius: var(--r-lg); box-shadow: var(--el-1); cursor: pointer; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.ap-card:hover { transform: translateY(-2px); border-color: var(--ds-hairline-strong); box-shadow: var(--el-2); }
.ap-card__top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ap-card__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--ds-text-hi); }
.ap-card__meta { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ds-text-lo); }
.ap-card__meta strong { color: var(--ds-text-hi); }
.ap-card__right { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end; }
.ap-due { font-size: var(--fs-xs); color: var(--ds-text-lo); font-weight: 600; }
.ap-due--over { color: var(--ds-danger-strong); }

/* ---- Detail ---- */
.ap-detailhead { padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); border: 1px solid var(--ds-hairline); background: var(--ds-surface-2); box-shadow: var(--el-1); }
.ap-detailhead__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--ds-text-hi); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ap-detailhead__sub { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ds-text-lo); display: inline-flex; align-items: center; gap: var(--sp-2); }
.ap-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); align-items: start; }
.ap-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }

.ap-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ap-draftnote { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--ds-text-mute); }
.ap-closed { margin: 0; font-size: var(--fs-sm); color: var(--ds-text-lo); }
.ap-fb { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.ap-fb__btns { display: flex; gap: var(--sp-2); }
.ap-meta { display: grid; gap: var(--sp-3); }
.ap-meta > div { display: flex; align-items: baseline; justify-content: space-between; }
.ap-meta span { font-size: var(--fs-sm); color: var(--ds-text-lo); }
.ap-meta strong { font-size: var(--fs-base); color: var(--ds-text-hi); }

.ap-change { margin: 0 0 var(--sp-3); font-size: var(--fs-base); color: var(--ds-text); line-height: var(--lh-normal); }
.ap-change strong { color: var(--ds-text-hi); }
.ap-ai { margin-top: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-overlay); }
.ap-ai__text { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--ds-text-lo); line-height: var(--lh-normal); }

.ap-vlist, .ap-comments, .ap-history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.ap-vlist li { display: flex; gap: var(--sp-3); align-items: baseline; }
.ap-v { font-family: var(--font-display); font-weight: 700; color: var(--ds-accent); flex: none; width: 2.4rem; }
.ap-v__note { display: block; font-size: var(--fs-base); color: var(--ds-text-hi); }
.ap-v__meta { display: block; font-size: var(--fs-xs); color: var(--ds-text-mute); }
.ap-comments li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.ap-comments p { margin: 0; font-size: var(--fs-base); color: var(--ds-text-hi); }
.ap-c__meta { font-size: var(--fs-xs); color: var(--ds-text-mute); }
.ap-history li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.ap-h__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-hairline-strong); margin-top: 6px; flex: none; }
.ap-h__a { display: block; font-size: var(--fs-base); color: var(--ds-text-hi); }
.ap-h__meta { display: block; font-size: var(--fs-xs); color: var(--ds-text-lo); }

/* ---- Type-adaptive preview mocks ---- */
.ap-mock { border-radius: var(--r-md); border: 1px solid var(--ds-hairline); overflow: hidden; }
.ap-mock p { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--ds-text); line-height: var(--lh-normal); }
.ap-mock--email .ap-mock__bar { padding: var(--sp-3) var(--sp-4); background: var(--ds-surface-1); border-bottom: 1px solid var(--ds-hairline); font-size: var(--fs-sm); color: var(--ds-text-lo); }
.ap-mock--email .ap-mock__body { padding: var(--sp-5); background: var(--ds-surface-2); }
.ap-mock--sms { border: none; display: grid; gap: var(--sp-2); }
.ap-bubble { align-self: flex-start; max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--ds-overlay-2); color: var(--ds-text-hi); font-size: var(--fs-sm); }
.ap-mock--page { background: var(--ds-surface-2); }
.ap-mock__chrome { display: flex; gap: 6px; padding: var(--sp-3) var(--sp-4); background: var(--ds-surface-1); border-bottom: 1px solid var(--ds-hairline); }
.ap-mock__chrome span { width: 9px; height: 9px; border-radius: 50%; background: var(--ds-hairline-strong); }
.ap-mock__hero { padding: var(--sp-7) var(--sp-6); text-align: center; }
.ap-mock__hero h3 { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--ds-text-hi); margin: 0 0 var(--sp-2); }
.ap-mock__hero p { text-align: center; }
.ap-mock--doc { padding: var(--sp-6); background: var(--ds-surface-2); }
.ap-mock--doc h4 { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ds-text-hi); margin: 0 0 var(--sp-3); }
.ap-mock--social { padding: var(--sp-5); background: var(--ds-surface-2); }
.ap-mock__author { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ap-mock__author strong { color: var(--ds-text-hi); }
.ap-mock--ai { background: var(--ds-surface-2); }
.ap-mock__aibar { padding: var(--sp-3) var(--sp-4); background: rgba(212,175,55,0.08); border-bottom: 1px solid var(--ds-hairline); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-accent); display: flex; align-items: center; gap: 6px; }
.ap-mock--ai p { padding: 0 var(--sp-5); }
.ap-mock--ai p:first-of-type { padding-top: var(--sp-4); }
.ap-mock--ai p:last-of-type { padding-bottom: var(--sp-4); }

/* ---- New statuses ---- */
.ds-chip.ap-chip--ai { color: var(--ds-accent); background: rgba(212,175,55,0.12); border-color: color-mix(in srgb, var(--ds-gold-500) 30%, transparent); }
.ds-chip.ap-chip--revised { color: var(--ds-positive); background: var(--ds-positive-soft); border-color: color-mix(in srgb, var(--ds-positive) 30%, transparent); }
.ds-chip.ap-chip--revised::before, .ds-chip.ap-chip--ai::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* ---- AI revising ---- */
.ap-airevising { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--ds-gold-500) 24%, transparent); background: rgba(212,175,55,0.06); }
.ap-airevising strong { display: block; color: var(--ds-text-hi); }
.ap-airevising span:last-child { font-size: var(--fs-sm); color: var(--ds-text-lo); }
.ap-spinner { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ds-hairline-strong); border-top-color: var(--ds-gold-500); animation: ap-spin 0.8s linear infinite; }
@keyframes ap-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ap-spinner { animation-duration: 2s; } }

/* ---- Revision summary ---- */
.ap-rs { border-color: color-mix(in srgb, var(--ds-gold-500) 24%, transparent); }
.ap-rs__meta { font-size: var(--fs-xs); color: var(--ds-text-mute); margin-bottom: var(--sp-4); }
.ap-rs__grp { margin-bottom: var(--sp-4); }
.ap-rs__k { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-mute); margin-bottom: var(--sp-2); }
.ap-rs__k--done { color: var(--ds-positive); }
.ap-rs__k--warn { color: var(--ds-danger-strong); }
.ap-rs__grp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ap-rs__grp li { position: relative; padding-left: var(--sp-4); font-size: var(--fs-sm); color: var(--ds-text); line-height: var(--lh-snug); }
.ap-rs__grp li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--ds-hairline-strong); }
.ap-rs__fb { margin: 0; font-size: var(--fs-base); color: var(--ds-text-hi); font-style: italic; }

/* ---- Preference proposal / saved ---- */
.ap-prop { border-color: color-mix(in srgb, var(--ds-gold-500) 30%, transparent); background: radial-gradient(120% 180% at 100% 0%, rgba(212,175,55,0.08), transparent 55%), var(--ds-surface-2); }
.ap-prop__lead { margin: 0 0 var(--sp-4); font-size: var(--fs-base); color: var(--ds-text); line-height: var(--lh-normal); }
.ap-prefchips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-prefchips em { font-style: normal; color: var(--ds-text-mute); }
.ap-prefnote { margin: 0; font-size: var(--fs-sm); color: var(--ds-accent); }

/* ---- Reject choose ---- */
.ap-rchoose { margin-top: var(--sp-4); }
.ap-rchoose__q { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 600; color: var(--ds-text-hi); }

/* ---- Version items (kind color) ---- */
.ap-vitem { display: flex; gap: var(--sp-3); align-items: baseline; }
.ap-vitem .ap-v { color: var(--ds-text-lo); }
.ap-vitem--ai .ap-v { color: var(--ds-accent); }
.ap-vitem--approved .ap-v { color: var(--ds-positive); }
.ap-vitem--rejected .ap-v { color: var(--ds-danger-strong); }

@media (max-width: 1080px) { .ap-grid, .ap-two { grid-template-columns: 1fr; } }