/* SocialFreedom OS — Premium Design System (SAFE / NON-DESTRUCTIVE)
   Goal: make the UI feel premium WITHOUT breaking your existing light-surface design.
   Strategy:
   - Do NOT override core color tokens (surface/text/edge) from styles.css
   - Only standardize rhythm, typography, callouts, buttons, and overflow safety
*/

/* ---------------------------
   Global safety + rhythm
----------------------------*/
*{ box-sizing: border-box; }
html, body{
  max-width: 100%;
  overflow-x: hidden; /* prevent sideways scroll */
}

/* Keep your existing typography; only refine spacing & readability */
h1,h2,h3{
  letter-spacing: -0.02em;
}

h1{
  margin: 0 0 10px;
  line-height: 1.15;
}

h2{
  margin: 18px 0 10px;
  line-height: 1.22;
}

h3{
  margin: 14px 0 8px;
  line-height: 1.28;
}

/* Let existing theme control colors; only improve wrapping */
p, li, a, code, pre, .card, .panel, .sf-card, .sf-panel, .pill{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Lists look premium with consistent spacing */
ul, ol{ padding-left: 1.15em; }
li{ margin: 6px 0; }

/* ---------------------------
   Cards / panels — ENHANCE, DON'T REPLACE
----------------------------*/
/* Your base .card style lives in member/styles.css.
   Here we only add consistent padding/hover/containment. */
.card, .panel, .sf-card, .sf-panel{
  border-radius: var(--r-lg, 16px);
  min-width: 0;
  max-width: 100%;
}

/* Normalize padding (some pages had mixed paddings) */
.card{ padding: 18px; }
.panel{ padding: 18px; }
.card--tight, .panel--tight{ padding: 14px; }

/* Subtle premium hover (keeps your light surfaces) */
.card:hover{
  transform: translateY(-1px);
  filter: saturate(1.02);
}

/* Ensure headings inside cards don't create weird top gaps */
.card h2, .panel h2{ margin-top: 0; }

/* ---------------------------
   Notes / highlights
----------------------------*/
.note, .sf-note, .callout{
  border-left: 3px solid var(--gold, #c8a96a);
  background: rgba(200,169,106,.06);
  border-radius: var(--r-md, 12px);
  padding: 12px 14px;
}

/* Variants if you use them */
.callout--warn{ background: rgba(255,193,7,.10); border-left-color: rgba(255,193,7,.85); }
.callout--ok{ background: rgba(34,197,94,.10); border-left-color: rgba(34,197,94,.85); }

/* ---------------------------
   Action box (CTA area)
----------------------------*/
.action-box, .sf-action{
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(200,169,106,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  border: 1px solid rgba(200,169,106,.28);
  border-radius: var(--r-lg, 16px);
  padding: 18px;
}

/* ---------------------------
   Buttons — strengthen without changing your palette
----------------------------*/
.btn, .button, button.btn{
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  letter-spacing: .01em;
}

.btn-primary, .btn--primary, .btn.btn-primary{
  background: linear-gradient(135deg, rgba(200,169,106,1), rgba(224,196,143,1));
  color: rgba(0,0,0,.92);
  border: 0;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.btn-primary:hover, .btn--primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.btn-ghost, .btn--ghost, .btn.btn-ghost, .btn.btn--ghost{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
}

/* ---------------------------
   Tables / code blocks
----------------------------*/
table{
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--r-md, 12px);
  overflow: hidden;
}

th, td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

pre, code{
  border-radius: 12px;
}

pre{
  padding: 12px 14px;
  overflow: auto;
  max-width: 100%;
}

/* ---------------------------
   Grid safety (mobile / tablet)
----------------------------*/
/* Some pages use grid helpers like .grid--2/.grid--3. Force no overflow. */
.grid, .grid--2, .grid--3{
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 980px){
  .grid--2, .grid--3{
    grid-template-columns: 1fr !important;
  }
}


/* ---------------------------
   Page hero + layout helpers (SAFE)
----------------------------*/
.page-hero{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 0 8px;
}
.page-hero__text{ min-width: 0; }
.page-hero__meta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.kpi{
  padding: 10px 12px;
  border-radius: var(--r-md, 12px);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  min-width: 120px;
}
.kpi__label{ font-size: 12px; opacity: .7; margin-bottom: 2px; }
.kpi__value{ font-size: 14px; font-weight: 700; }

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* Checklist styling */
.checklist{
  list-style: none;
  padding-left: 0;
}
.checklist li{
  position: relative;
  padding-left: 26px;
  margin: 8px 0;
}
.checklist li:before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  opacity: .8;
  font-weight: 700;
}

/* Keep sections readable */
.section{ margin: 16px 0; }

@media (max-width: 980px){
  .page-hero{ flex-direction: column; }
  .page-hero__meta{ justify-content: flex-start; }
  .kpi{ min-width: 0; }
}


/* ============================
   Layout alias for Level-2 shell
   (Level 2 uses .app / .app__main / .app__content)
   Keep it compatible with the global .app-content rules.
============================ */
.app{ min-height: 100vh; }
.app__main{
  margin-left: var(--sidebar-w);
  min-width: 0;
  flex: 1 1 auto;
}
.app__content{ min-width: 0; }

/* Collapsed sidebar */
body.sidebar-collapsed .app__main{ margin-left: var(--sidebar-w-collapsed); }

/* Mobile: sidebar becomes a drawer, content should not be offset */
@media (max-width: 768px){
  .app__main{ margin-left: 0; }
}


/* ---------------------------
   Level 2 Motivation System
----------------------------*/
.sf-sprintbar{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--panel);} 
.sf-sprintbar__top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sf-chips{display:flex;gap:8px;flex-wrap:wrap}
.sf-chip{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.sf-progress{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:10px}
.sf-progress__fill{height:100%;background:linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.18))}
.sf-sprintbar__pct{font-weight:700}
.sf-sprintbar__hint{margin-top:10px;opacity:.95}

.sf-toast{position:fixed;left:16px;right:16px;bottom:16px;z-index:1200;
  padding:12px 14px;border-radius:14px;background:rgba(15,15,18,.94);border:1px solid var(--line);
  opacity:0;transform:translateY(10px);transition:.2s}
.sf-toast.show{opacity:1;transform:translateY(0)}

@media (max-width: 640px){
  .sf-sprintbar{padding:12px}
}


/* ============================
   Level 2 — Day 1 Premium Split + Choice Cards
   Scope: only when body.sf-level2 is present
============================ */
body.sf-level2 .l2-split{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 28px;
  align-items:start;
}
body.sf-level2 .l2-main{ min-width: 0; }
body.sf-level2 .l2-preview{ position: sticky; top: 86px; min-width: 0; }

@media (max-width: 1100px){
  body.sf-level2 .l2-split{ grid-template-columns: 1fr; }
  body.sf-level2 .l2-preview{ position: relative; top: auto; order: -1; }
}

/* Blocks */
body.sf-level2 .l2-block{
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background: rgba(255,255,255,.03);
}
body.sf-level2 .l2-block__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom: 14px; }
body.sf-level2 .l2-eyebrow{ font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
body.sf-level2 .l2-title{ font-size: 18px; font-weight: 800; }
body.sf-level2 .l2-sub{ max-width: 48ch; }

/* Choice cards */
body.sf-level2 .l2-choice-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
body.sf-level2 .l2-choice{
  display:block;
  cursor:pointer;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.02);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  min-width: 0;
}
body.sf-level2 .l2-choice:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
body.sf-level2 .l2-choice.is-active{
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
body.sf-level2 .l2-choice__radio{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
body.sf-level2 .l2-choice__pill{ display:inline-flex; width: fit-content; margin-bottom: 10px; }
body.sf-level2 .l2-choice__title{ font-weight: 800; font-size: 16px; margin-bottom: 6px; }
body.sf-level2 .l2-choice__desc{ line-height: 1.35; overflow-wrap: break-word; }
body.sf-level2 .l2-choice__cta{
  margin-top: 12px;
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  font-weight: 700;
  font-size: 13px;
}

/* Grid comfort */
body.sf-level2 .l2-grid{ gap: 16px; }
body.sf-level2 .l2-form .input,
body.sf-level2 .l2-form .textarea{
  padding: 14px 14px;
  border-radius: 14px;
}
body.sf-level2 .l2-form .textarea{ min-height: 110px; }

/* Actions */
body.sf-level2 .l2-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
  justify-content:flex-start;
}

/* Preview */
body.sf-level2 .l2-preview__top{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.sf-level2 .l2-preview__kpi{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.02);
}
body.sf-level2 .l2-preview__val{ font-weight: 800; margin-top: 2px; }
body.sf-level2 .l2-preview__big{ font-size: 18px; font-weight: 900; }
body.sf-level2 .l2-preview__rows{ display:flex; flex-direction:column; gap: 10px; }
body.sf-level2 .l2-preview__row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
body.sf-level2 .l2-preview__row span:last-child{ text-align:right; max-width: 55%; overflow-wrap:anywhere; }
body.sf-level2 .l2-preview__list{ margin: 0; padding-left: 18px; }
body.sf-level2 .l2-preview__hint{ opacity: .85; }

@media (max-width: 520px){
  body.sf-level2 .l2-block{ padding: 14px; }
  body.sf-level2 .l2-preview__top{ grid-template-columns: 1fr; }
}