/* SoCo Apps Design System v1.2 — My Space (Phase 3 pilot).
   Scoped entirely under .sc2-scope: tokens are custom properties on that
   wrapper (not :root), and every rule is prefixed with it, so nothing here
   can leak into any other page/module still on the pre-v1.2 look. Class
   names carry the sc2- namespace (see design-system/.../PHASE-2-COMPATIBILITY-TEST.md
   for why: v1.2 and the legacy stylesheet both used bare component class
   names like .btn/.card/.modal, which collide on shared pages otherwise).
   font-family is deliberately NOT set here — it inherits body's existing
   var(--sans) so My Space doesn't introduce its own font island. */

.sc2-scope{
  --soco-green-50:#f2f8f5;--soco-green-100:#e4f1ea;--soco-green-200:#c9e3d5;--soco-green-500:#24835a;--soco-green-600:#1f6f4b;--soco-green-700:#195c3f;
  --soco-canvas:#f5f6f4;--soco-surface:#fff;--soco-surface-soft:#f8f9f7;--soco-text-strong:#171a18;--soco-text:#303632;
  --soco-text-muted:#66716c;--soco-text-subtle:#6f7973;--soco-border:#e3e7e4;--soco-border-strong:#d3d9d5;--soco-control:#8b9690;
  --soco-success:#246b4d;--soco-success-soft:#eaf6ef;--soco-warning:#8a5a00;--soco-warning-soft:#fff4d8;
  --soco-danger:#b23a37;--soco-danger-soft:#fdeceb;--soco-info:#356a91;--soco-info-soft:#eaf2f8;
  --soco-radius-xs:8px;--soco-radius-sm:10px;--soco-radius-md:12px;--soco-radius-lg:16px;--soco-radius-card:18px;--soco-radius-xl:20px;
  --soco-shadow:0 2px 8px rgba(20,30,24,.05);--soco-fast:120ms;--soco-default:180ms;
  color:var(--soco-text);
}
.sc2-scope *{box-sizing:border-box}
.sc2-scope svg.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Layout */
.sc2-scope .sc2-span-all{grid-column:1/-1}
.sc2-scope .sc2-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media(min-width:1024px){.sc2-scope .sc2-grid.sc2-grid-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.sc2-scope .sc2-inbox-list{display:grid;gap:12px}
.sc2-scope .sc2-component-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}

/* Reused component vocabulary (card, badge, btn, alert, modal, field, empty,
   skeleton) — same shape as design-system/.../preview/phase-2-foundation.css,
   so a future full-shell migration can drop this file's copies in favor of
   the shared one without a visual diff. */
.sc2-scope .sc2-card{padding:24px;border:1px solid var(--soco-border);border-radius:var(--soco-radius-card);background:var(--soco-surface)}
.sc2-scope .sc2-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.sc2-scope .sc2-card-head h3{margin:0;color:var(--soco-text-strong)}
.sc2-scope .sc2-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;background:#f1f3f2;color:var(--soco-text-muted);font-size:12px;font-weight:600}
.sc2-scope .sc2-badge.sc2-success{background:var(--soco-success-soft);color:var(--soco-success)}
.sc2-scope .sc2-badge.sc2-warning{background:var(--soco-warning-soft);color:var(--soco-warning)}
.sc2-scope .sc2-badge.sc2-danger{background:var(--soco-danger-soft);color:var(--soco-danger)}
.sc2-scope .sc2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:32px;border:1px solid transparent;border-radius:var(--soco-radius-md);padding:0 12px;color:var(--soco-text);background:transparent;font-weight:600;font-size:13px;white-space:nowrap;cursor:pointer;transition:background var(--soco-fast),border-color var(--soco-fast)}
.sc2-scope .sc2-btn:hover{background:var(--soco-surface-soft)}
.sc2-scope .sc2-btn.sc2-primary{background:var(--soco-green-500);color:#fff}
.sc2-scope .sc2-btn.sc2-primary:hover{background:var(--soco-green-600)}
.sc2-scope .sc2-btn.sc2-secondary{background:#fff;border-color:var(--soco-control)}
.sc2-scope .sc2-btn:disabled{opacity:.5;cursor:not-allowed}
.sc2-scope .sc2-alert{padding:12px 14px;border-radius:var(--soco-radius-md);background:var(--soco-info-soft);color:var(--soco-info)}
.sc2-scope .sc2-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(23,26,24,.38)}
.sc2-scope .sc2-modal{width:min(640px,100%);max-height:min(88svh,720px);overflow-y:auto;padding:24px;border-radius:var(--soco-radius-xl);background:#fff;box-shadow:0 24px 72px rgba(20,30,24,.18)}
.sc2-scope .sc2-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.sc2-scope .sc2-modal-head h2{margin:0;font-size:18px}
.sc2-scope .sc2-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border:0;border-radius:var(--soco-radius-md);background:transparent;color:var(--soco-text-muted);cursor:pointer}
.sc2-scope .sc2-icon-btn:hover{background:var(--soco-surface-soft);color:var(--soco-text)}
.sc2-scope .sc2-field{display:grid;gap:6px}
.sc2-scope .sc2-field>span{color:var(--soco-text);font-size:13px;font-weight:600}
.sc2-scope .sc2-caption{color:var(--soco-text-muted);font-size:12px}
.sc2-scope .sc2-empty{text-align:center;padding:32px}
.sc2-scope .sc2-empty svg{width:32px;height:32px;color:var(--soco-text-muted)}
.sc2-scope .sc2-empty h3{margin:10px 0 4px;color:var(--soco-text-strong)}
.sc2-scope .sc2-empty p{margin:0;color:var(--soco-text-muted)}
.sc2-scope .sc2-skeleton{height:14px;border-radius:8px;background:linear-gradient(90deg,var(--soco-surface-soft),var(--soco-border),var(--soco-surface-soft));background-size:200% 100%;animation:sc2-shimmer 1.4s infinite}
.sc2-scope .sc2-skeleton.sc2-short{width:55%}
@keyframes sc2-shimmer{to{background-position:-200% 0}}
.sc2-scope .sc2-hidden{display:none!important}

/* My Space-specific components — nothing in the reused set above already
   fits this content shape (see checkpoint-1 gate: don't duplicate a shared
   component, only add what's genuinely new). */
.sc2-scope .sc2-attention-card{display:flex;gap:12px;padding:14px;border:1px solid var(--soco-border);border-radius:var(--soco-radius-lg);background:var(--soco-surface)}
.sc2-scope .sc2-attention-card.sc2-is-review{border-left:3px solid var(--soco-green-500)}
.sc2-scope .sc2-task-dot{width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--soco-warning);flex:none}
.sc2-scope .sc2-attention-card.sc2-is-review .sc2-task-dot{background:var(--soco-green-500)}
.sc2-scope .sc2-task-main{display:grid;gap:6px;min-width:0}
.sc2-scope .sc2-task-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--soco-text-muted);font-size:12px}
.sc2-scope .sc2-task-meta span{color:var(--soco-text);font-weight:600}
.sc2-scope .sc2-inline-state{color:var(--soco-warning);font-weight:600}
.sc2-scope .sc2-task-main h4{margin:0;color:var(--soco-text-strong);font-size:15px;line-height:1.3}
.sc2-scope .sc2-task-main p{margin:0;color:var(--soco-text-muted);font-size:13px}
.sc2-scope .sc2-task-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.sc2-scope .sc2-event-row{padding:14px;border:1px solid var(--soco-border);border-radius:var(--soco-radius-lg);background:var(--soco-surface)}
.sc2-scope .sc2-event-row-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--soco-text-muted);font-size:12px}
.sc2-scope .sc2-event-row h4{margin:0 0 4px;color:var(--soco-text-strong);font-size:15px}
.sc2-scope .sc2-event-row p{margin:0;color:var(--soco-text-muted);font-size:13px}
.sc2-scope .sc2-marketing-tier{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
.sc2-scope .sc2-marketing-tier.sc2-is-special{background:var(--soco-warning-soft);color:var(--soco-warning)}
.sc2-scope .sc2-marketing-tier.sc2-is-exclusive{background:var(--soco-info-soft);color:var(--soco-info)}
.sc2-scope .sc2-review-poster{width:100%;aspect-ratio:16/9;display:grid;place-items:center;border:1px solid var(--soco-border);border-radius:var(--soco-radius-md);background:var(--soco-surface-soft);color:var(--soco-text-muted);overflow:hidden;margin-bottom:16px;font-size:13px}
.sc2-scope .sc2-review-poster img{width:100%;height:100%;object-fit:cover}
.sc2-scope .sc2-form-section{padding-top:16px;border-top:1px solid var(--soco-border)}
.sc2-scope .sc2-form-section:first-child{padding-top:0;border-top:0}
.sc2-scope .sc2-form-section-title{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;color:var(--soco-text-muted);font-size:12px;font-weight:700}
.sc2-scope .sc2-form-section-title b{color:var(--soco-text-strong);font-size:13px}
.sc2-scope .sc2-info-toggle{border:1px solid var(--soco-border);border-radius:var(--soco-radius-md);overflow:hidden}
.sc2-scope .sc2-info-toggle summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;cursor:pointer;color:var(--soco-text);font-weight:600;list-style:none}
.sc2-scope .sc2-info-toggle summary::-webkit-details-marker{display:none}
.sc2-scope .sc2-info-toggle[open] summary{border-bottom:1px solid var(--soco-border)}
.sc2-scope .sc2-info-toggle-body{padding:10px 12px}
.sc2-scope .sc2-info-toggle+.sc2-info-toggle{margin-top:8px}
.sc2-scope .sc2-info-toggle-chevron{transition:transform .15s;flex:none;color:var(--soco-text-muted)}
.sc2-scope .sc2-info-toggle[open] .sc2-info-toggle-chevron{transform:rotate(180deg)}

@media(max-width:767px){
  .sc2-scope .sc2-task-meta{flex-direction:column;align-items:flex-start;gap:2px}
}