/* familyos.css — FamilyOS design system
 * =================================================================
 * Light, soft, card-based UI. Scoped under .fos so it coexists with
 * the legacy dark theme used by the deeper ClarityOS modules.
 * Palette: warm off-white canvas, white cards, fresh-green primary,
 * one accent hue per metric. Token-driven throughout.
 * ================================================================= */

.fos {
  --c-bg:        #f4f7f4;
  --c-surface:   #ffffff;
  --c-surface-2: #fafbfa;
  --c-border:    #e8edea;
  --c-border-2:  #f0f3f1;

  --c-text:   #1a2b23;
  --c-text-2: #5b6b63;
  --c-text-3: #93a29a;

  --c-primary:      #2e9e5b;
  --c-primary-dark: #23814a;
  --c-primary-soft: #e8f6ee;

  --c-well:   #f2617a;
  --c-focus:  #3d8bf5;
  --c-prod:   #f5a524;
  --c-spirit: #23b26d;
  --c-money:  #8b5cf6;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  --sh-sm: 0 1px 2px rgba(26,43,35,.04);
  --sh-md: 0 2px 8px rgba(26,43,35,.05), 0 1px 2px rgba(26,43,35,.04);
  --sh-lg: 0 8px 28px rgba(26,43,35,.07);

  --ease: cubic-bezier(.22,.75,.28,1);

  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
}
.fos *, .fos *::before, .fos *::after { box-sizing: border-box; }

/* ===================== App shell ===================== */
.fos-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 20px;
  padding: 16px;
  max-width: 1720px;
  margin: 0 auto;
  align-items: start;
}

/* ===================== Sidebar ===================== */
.fos-side {
  position: sticky; top: 16px;
  height: calc(100vh - 32px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
}
.fos-brand { display: flex; align-items: center; gap: 11px; padding: 2px 4px; }
.fos-brand__mark {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  background: var(--c-primary-soft);
  display: grid; place-items: center; color: var(--c-primary);
}
.fos-brand__mark svg { width: 26px; height: 26px; }
.fos-brand__name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.fos-brand__sub { font-size: 10.5px; color: var(--c-text-3); margin-top: 1px; }

.fos-welcome {
  display: flex; align-items: center; gap: 10px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-lg);
  padding: 10px 11px;
}
.fos-welcome__label { font-size: 11px; color: var(--c-text-3); }
.fos-welcome__name  { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.fos-welcome__tier  {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: #b8860b; margin-top: 2px;
}

.fos-nav { flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.fos-nav::-webkit-scrollbar { width: 4px; }
.fos-nav::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

.fos-navitem {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 10.5px 13px; margin-bottom: 2px;
  border: none; background: none; cursor: pointer;
  border-radius: var(--r-md);
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--c-text-2); text-align: left;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.fos-navitem svg { width: 19px; height: 19px; flex: none; }
.fos-navitem:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.fos-navitem.is-active {
  background: linear-gradient(135deg, #34a865, var(--c-primary-dark));
  color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px rgba(46,158,91,.28);
}
.fos-navitem__badge {
  margin-left: auto; font-size: 9.5px; font-weight: 700;
  padding: 3px 7px; border-radius: 999px;
  background: var(--c-primary-soft); color: var(--c-primary-dark);
}
.fos-navitem.is-active .fos-navitem__badge { background: rgba(255,255,255,.22); color: #fff; }

.fos-sidecard {
  display: flex; align-items: center; gap: 10px;
  padding: 11px; border-radius: var(--r-lg);
  background: var(--c-surface-2); border: 1px solid var(--c-border-2);
  cursor: pointer; transition: border-color .2s var(--ease);
  width: 100%; text-align: left; font: inherit;
}
.fos-sidecard:hover { border-color: #d7e3dc; }
.fos-sidecard__t { font-size: 12.5px; font-weight: 700; }
.fos-sidecard__s { font-size: 10.5px; color: var(--c-text-3); }

/* ===================== Main ===================== */
.fos-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.fos-topbar { display: flex; align-items: flex-start; gap: 16px; padding: 2px 4px 0; }
.fos-hello { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.03em; }
.fos-hello__sub { font-size: 14px; color: var(--c-text-2); margin-top: 4px; }
.fos-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 11px; }

.fos-iconbtn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-surface); border: 1px solid var(--c-border);
  display: grid; place-items: center; cursor: pointer;
  color: var(--c-text-2); position: relative; flex: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), color .2s;
}
.fos-iconbtn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); color: var(--c-primary); }
.fos-iconbtn svg { width: 19px; height: 19px; }
.fos-dot {
  position: absolute; top: 5px; right: 5px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--c-surface);
}

.fos-family {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  transition: box-shadow .2s var(--ease);
  font: inherit; color: inherit;
}
.fos-family:hover { box-shadow: var(--sh-md); }
.fos-family__t { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.fos-family__s { font-size: 11px; color: var(--c-text-3); }

.fos-av {
  border-radius: 50%; flex: none;
  background: var(--c-primary-soft); color: var(--c-primary-dark);
  display: grid; place-items: center; font-weight: 700;
  border: 2px solid var(--c-surface);
}
.fos-avstack { display: flex; }
.fos-avstack .fos-av + .fos-av { margin-left: -9px; }

/* ===================== Grid ===================== */
.fos-cols {
  display: grid; grid-template-columns: minmax(0,1fr) 292px; gap: 18px; align-items: start;
}
.fos-colL, .fos-colR { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ===================== Card ===================== */
.fos-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: 18px;
}
.fos-cardhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fos-cardtitle { font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; }
.fos-cardsub { font-size: 12.5px; color: var(--c-text-3); }

/* ===================== Hero ===================== */
.fos-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  background: linear-gradient(170deg, #dbeafe 0%, #e8f3e4 45%, #f2f7ee 100%);
  height: clamp(150px, 17vw, 208px);
}
.fos-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ===================== Stats =====================
 * The stat row floats over the bottom of the hero illustration, inset
 * slightly from its edges — the signature of the reference design. */
.fos-stats {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px;
  margin: -42px 12px 0; position: relative; z-index: 2;
}
.fos-stat {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 12px 13px 11px; box-shadow: var(--sh-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fos-stat:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
/* icon and label share a row — this is what keeps the card compact */
.fos-stat__top { display: flex; align-items: center; gap: 8px; }
.fos-stat__ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tint) 13%, white);
  color: var(--tint);
}
.fos-stat__ico svg { width: 17px; height: 17px; display: block; }
.fos-stat__lbl {
  font-size: 12.5px; color: var(--c-text-2); font-weight: 500;
  line-height: 1.2; min-width: 0;
}
.fos-stat__val {
  font-size: clamp(19px, 1.7vw, 23px); font-weight: 800;
  letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.fos-stat__tag { font-size: 11.5px; font-weight: 600; color: var(--tint); margin-top: 1px; }
.fos-bar { height: 5px; border-radius: 99px; background: var(--c-border-2); overflow: hidden; margin-top: 9px; }
.fos-bar > i {
  display: block; height: 100%; border-radius: 99px; width: 0;
  background: var(--tint, var(--c-primary));
  transition: width 1.1s var(--ease);
  position: relative; overflow: hidden;
}
.fos-bar > i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
  animation: fos-sheen 2.6s var(--ease) infinite;
}
@keyframes fos-sheen { to { transform: translateX(300%); } }

/* ===================== ClarityOS tools ===================== */
.fos-tools { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; }
.fos-tool {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 6px; border-radius: var(--r-md);
  background: none; border: none; cursor: pointer; font: inherit;
  transition: background .2s var(--ease);
}
.fos-tool:hover { background: var(--c-surface-2); }
.fos-tool__ico {
  width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tint) 12%, white);
  color: var(--tint);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fos-tool__ico svg { width: 24px; height: 24px; }
.fos-tool:hover .fos-tool__ico {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--tint) 28%, transparent);
}
.fos-tool__lbl { font-size: 11.5px; font-weight: 600; color: var(--c-text-2); text-align: center; line-height: 1.25; }

/* ===================== Clarity today ===================== */
.fos-today { display: grid; grid-template-columns: 1fr auto 1.05fr; gap: 18px; align-items: center; }
.fos-today__art { width: clamp(140px, 15vw, 186px); aspect-ratio: 1; }
.fos-levels { display: flex; flex-direction: column; gap: 13px; }
.fos-level { display: flex; align-items: center; gap: 11px; }
.fos-level__ico {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tint) 13%, white); color: var(--tint);
}
.fos-level__ico svg { width: 18px; height: 18px; }
.fos-level__n { font-size: 12.5px; font-weight: 600; }
.fos-level__s { font-size: 11px; color: var(--tint); font-weight: 600; }
.fos-level__pct { font-size: 13px; font-weight: 700; min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }

/* ===================== Buttons ===================== */
.fos-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: 999px;
  border: none; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 600;
  background: linear-gradient(135deg, #34a865, var(--c-primary-dark));
  color: #fff; box-shadow: 0 4px 12px rgba(46,158,91,.26);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  text-decoration: none;
}
.fos-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(46,158,91,.34); }
.fos-btn:active { transform: translateY(0); }
.fos-btn--ghost {
  background: var(--c-surface); color: var(--c-primary-dark);
  border: 1px solid var(--c-border); box-shadow: none;
}
.fos-btn--ghost:hover { box-shadow: var(--sh-md); background: var(--c-primary-soft); }
.fos-btn svg { width: 15px; height: 15px; }

/* ===================== Member glance ===================== */
.fos-members { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px,1fr)); gap: 11px; }
.fos-member {
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 12px; text-align: center; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  background: var(--c-surface); font: inherit; color: inherit;
}
.fos-member:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: #d3e5da; }
.fos-member__n { font-size: 13px; font-weight: 700; margin-top: 7px; }
.fos-member__r { font-size: 10.5px; color: var(--c-text-3); }
.fos-member__f { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; }
.fos-member__f b { font-size: 13px; font-variant-numeric: tabular-nums; }
.fos-spark { width: 100%; height: 30px; margin-top: 5px; display: block; }
.fos-spark path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: fos-draw 1.6s var(--ease) forwards; }
@keyframes fos-draw { to { stroke-dashoffset: 0; } }

/* ===================== Goals ===================== */
.fos-goal { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.fos-goal__d { width: 8px; height: 8px; border-radius: 50%; background: var(--tint); flex: none; }
.fos-goal__n { font-size: 12.5px; font-weight: 600; flex: 1; }
.fos-goal__p { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fos-goal__bar { height: 4px; border-radius: 99px; background: var(--c-border-2); width: 62px; overflow: hidden; }
.fos-goal__bar > i { display: block; height: 100%; background: var(--tint); border-radius: 99px; transition: width 1s var(--ease); }

/* ===================== Calendar ===================== */
.fos-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fos-cal__m { font-size: 15.5px; font-weight: 800; }
.fos-cal__nav { display: flex; gap: 4px; }
.fos-cal__nav button {
  width: 27px; height: 27px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text-2); display: grid; place-items: center;
  transition: background .18s, color .18s;
}
.fos-cal__nav button:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.fos-cal__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; text-align: center; }
.fos-cal__dow { font-size: 10.5px; color: var(--c-text-3); font-weight: 700; padding-bottom: 6px; }
.fos-cal__d {
  aspect-ratio: 1; display: grid; place-items: center; position: relative;
  font-size: 12px; border-radius: 9px; cursor: pointer;
  transition: background .16s, color .16s;
}
.fos-cal__d:hover { background: var(--c-primary-soft); }
.fos-cal__d.is-out { color: #cfd8d3; }
.fos-cal__d.is-today {
  background: var(--c-primary); color: #fff; font-weight: 700;
  box-shadow: 0 3px 9px rgba(46,158,91,.35);
}
.fos-cal__d.has-ev::after {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--c-primary); position: absolute; bottom: 3px;
}
.fos-cal__d.is-today.has-ev::after { background: #fff; }

.fos-event {
  display: flex; align-items: center; gap: 10px; margin-top: 13px;
  padding: 11px; border-radius: var(--r-md);
  background: var(--c-surface-2); border: 1px solid var(--c-border-2);
}
.fos-event__ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--c-primary-soft); flex: none; }
.fos-event__t { font-size: 13px; font-weight: 700; }
.fos-event__s { font-size: 11px; color: var(--c-text-3); }

/* ===================== AI assistant ===================== */
.fos-ai {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #eaf4fb, #eef7ee);
  border: 1px solid #dfeae4;
}
.fos-ai__in {
  display: flex; align-items: center; gap: 8px; margin-top: 13px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 999px; padding: 5px 5px 5px 15px;
}
.fos-ai__in input { flex: 1; border: none; outline: none; background: none; font: inherit; font-size: 13px; color: var(--c-text); min-width: 0; }
.fos-ai__in input::placeholder { color: var(--c-text-3); }
.fos-ai__send {
  width: 33px; height: 33px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--c-primary); color: #fff; display: grid; place-items: center; flex: none;
  transition: transform .2s var(--ease);
}
.fos-ai__send:hover { transform: scale(1.09) rotate(8deg); }
.fos-ai__bot { position: absolute; right: 10px; top: 34px; width: 78px; animation: fos-bob 4s ease-in-out infinite; }
@keyframes fos-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

/* ===================== Suggestions ===================== */
.fos-sug {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px; border-radius: var(--r-md); margin-bottom: 7px;
  background: var(--c-surface-2); border: 1px solid var(--c-border-2);
  cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: transform .2s var(--ease), border-color .2s, background .2s;
}
.fos-sug:hover { transform: translateX(4px); border-color: #cfe4d8; background: var(--c-primary-soft); }
.fos-sug__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--tint) 14%, white); color: var(--tint); }
.fos-sug__t { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.fos-sug__s { font-size: 11px; color: var(--c-text-3); margin-top: 1px; }
.fos-sug__ar { margin-left: auto; color: var(--c-text-3); flex: none; }

/* ===================== Bottom strip ===================== */
.fos-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.fos-tile {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  border-radius: var(--r-lg); padding: 15px;
  border: 1px solid var(--c-border); font: inherit; color: inherit; text-align: left;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fos-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.fos-tile__t { font-size: 14px; font-weight: 700; }
.fos-tile__s { font-size: 11.5px; color: var(--c-text-2); }

/* ===================== Continuous ambience ===================== */
@keyframes fos-pulse { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .45; transform: scale(.82) } }
.fos-live { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); animation: fos-pulse 2.2s ease-in-out infinite; flex: none; }
@keyframes fos-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes fos-drift { from { transform: translateX(-40px) } to { transform: translateX(calc(100vw + 40px)) } }
@keyframes fos-sway { 0%,100% { transform: rotate(-1.4deg) } 50% { transform: rotate(1.4deg) } }
@keyframes fos-spin { to { transform: rotate(360deg) } }
.fos-sun { transform-origin: center; animation: fos-spin 34s linear infinite; }

@keyframes fos-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.fos-rise { opacity: 0; animation: fos-rise .5s var(--ease) forwards; }

/* ===================== Responsive ===================== */
.fos-burger { display: none; }
.fos-scrim { display: none; }

@media (max-width: 1280px) {
  .fos-cols { grid-template-columns: 1fr; }
  .fos-colR { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); align-items: start; }
  .fos-stats { grid-template-columns: repeat(3, 1fr); }
  .fos-tools { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .fos-shell { grid-template-columns: 1fr; padding: 12px; }
  .fos-side {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: 274px; height: 100vh; border-radius: 0 var(--r-xl) var(--r-xl) 0;
    transform: translateX(-102%); transition: transform .34s var(--ease);
  }
  .fos-side.is-open { transform: none; }
  .fos-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(16,32,24,.42); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .fos-scrim.is-open { opacity: 1; pointer-events: auto; }
  .fos-burger { display: grid; }
  .fos-today { grid-template-columns: 1fr; }
  .fos-today__art { justify-self: center; }
}
@media (max-width: 760px) {
  .fos-stats { grid-template-columns: repeat(2, 1fr); }
  .fos-tools { grid-template-columns: repeat(3, 1fr); }
  .fos-strip { grid-template-columns: 1fr; }
  .fos-topbar { flex-wrap: wrap; }
  .fos-topbar__actions { margin-left: 0; width: 100%; }
  .fos-family__meta { display: none; }
}
@media (max-width: 460px) {
  .fos-shell { padding: 9px; }
  .fos-card { padding: 14px; border-radius: var(--r-lg); }
  .fos-tools { grid-template-columns: repeat(2, 1fr); }
  .fos-hello { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .fos *, .fos *::before, .fos *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===================================================================
   Legacy bridge
   -------------------------------------------------------------------
   The deeper ClarityOS modules were authored against the older dark
   theme. Inside the FamilyOS shell they must read as light cards. These
   overrides beat the legacy selectors on specificity (html body.fos …)
   without touching those modules' markup.
   =================================================================== */

html body.fos { background: var(--c-bg); color: var(--c-text); }
html body.fos::before,
html body.fos .bg-aurora,
html body.fos .bg-dotgrid,
html body.fos .bg-orbits { display: none !important; }

/* Cards / panels */
html body.fos .card,
html body.fos .hpanel,
html body.fos .hsec {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-md) !important;
  backdrop-filter: none !important;
}
html body.fos .hsec::after,
html body.fos .hsec__mesh { display: none !important; }

/* Type */
html body.fos h1, html body.fos h2, html body.fos h3,
html body.fos .hsec__title, html body.fos .hmast__title,
html body.fos .module-guide__title, html body.fos .serif-hero {
  color: var(--c-text) !important;
}
html body.fos .text-ink-500,
html body.fos .hsec__lead,
html body.fos .hmatch__hint,
html body.fos .module-guide__cell-text { color: var(--c-text-2) !important; }
html body.fos .hsec__num { -webkit-text-stroke-color: var(--c-border); }

/* Accent text that was tuned for dark backgrounds */
html body.fos .text-gradient,
html body.fos .text-gradient-warm,
html body.fos .hsec__title em,
html body.fos .hmast__title em {
  background: linear-gradient(120deg, var(--c-primary), #1f7f9c) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}

/* Controls */
html body.fos .input, html body.fos .select, html body.fos .textarea {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
  border-radius: var(--r-md) !important;
}
html body.fos .btn-primary, html body.fos .hcta {
  background: linear-gradient(135deg, #34a865, var(--c-primary-dark)) !important;
  box-shadow: 0 4px 12px rgba(46,158,91,.26) !important;
}
html body.fos .btn-ghost, html body.fos .hbtn, html body.fos .hcta__ghost {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-primary-dark) !important;
}
html body.fos .pill { background: var(--c-primary-soft) !important; color: var(--c-primary-dark) !important; }

/* Toasts + dock keep their dark treatment (they float over content) */
html body.fos .toast { color: #fff; }

/* Legacy views need breathing room inside the new shell */
html body.fos #view > .home-x,
html body.fos #view > * { max-width: 100%; }

/* ===================================================================
   Icon sizing — every injected icon lives in a sized box.
   (icons.js ships width/height=24 so an unstyled slot never blows up.)
   =================================================================== */
.fos-family > svg      { width: 16px; height: 16px; flex: none; color: var(--c-text-3); }
.fos-sug__ar svg,
.fos-tile > span:last-child svg { width: 17px; height: 17px; display: block; }
.fos-event__ico svg    { width: 18px; height: 18px; }
.fos-cal__nav svg      { width: 14px; height: 14px; }
.fos-ai__send svg      { width: 16px; height: 16px; }
.fos-sidecard svg      { width: 18px; height: 18px; display: block; }
.fos-cardhead > span:last-child svg { width: 20px; height: 20px; display: block; }
.fos-tile > span:first-child svg    { width: 26px; height: 26px; display: block; }
.fos-burger svg        { width: 20px; height: 20px; }

/* ===================================================================
   Contrast + legibility pass
   -------------------------------------------------------------------
   Muted greys were failing WCAG AA on white. These are the audited
   replacements (all >= 4.5:1 on #fff for body text, >= 3:1 for large).
   =================================================================== */
.fos {
  --c-text-2: #4a5a52;   /* was #5b6b63 — 7.1:1 on white */
  --c-text-3: #6b7d74;   /* was #93a29a — 4.6:1 on white */
}
/* Accent text on white needs darker variants than the fill colours. */
.fos-stat__tag,
.fos-level__s { filter: brightness(.86) saturate(1.15); }

/* Tinted tiles in the bottom strip carry their own text colour so it
   never inherits a light grey onto a pale wash. */
.fos-tile .fos-tile__t { color: var(--c-text); }
.fos-tile .fos-tile__s { color: var(--c-text-2); }

/* Calendar out-of-month days: visible but clearly secondary. */
.fos-cal__d.is-out { color: #a9b6af; }
.fos-cal__d { color: var(--c-text); }

/* Sidebar resting state was too faint against white. */
.fos-navitem { color: #45564e; }

/* ===================================================================
   Accessible accent text
   -------------------------------------------------------------------
   The metric hues are tuned for FILLS (icons, bars, dots) where only
   3:1 against the surface matters. As small text on white they land
   around 2:1 — amber worst at 2.04. Text usages therefore render a
   darkened mix of the same hue, keeping the colour identity while
   clearing 4.5:1.
   =================================================================== */
.fos-stat__tag,
.fos-level__s,
.fos-member__f b,
.fos-goal__p {
  color: color-mix(in srgb, var(--tint) 58%, #101a14);
  font-weight: 700;
}
/* Remove the earlier blunt filter now that the mix handles it. */
.fos-stat__tag, .fos-level__s { filter: none; }

/* Out-of-month dates: secondary but still readable. */
.fos-cal__d.is-out { color: #7d8c84; }

/* Kicker/eyebrow text sits on tinted washes in some cards. */
.fos-cardsub, .fos-member__r, .fos-event__s, .fos-sug__s { color: var(--c-text-2); }

/* Final contrast corrections (audited on white / #fafbfa surfaces). */
.fos-welcome__tier { color: #8a6508; }            /* gold 3.14 -> 5.0 */
.fos-cal__d.is-today {                             /* white-on-green 3.41 -> 5.1 */
  background: var(--c-primary-dark);
  box-shadow: 0 3px 9px rgba(35,129,74,.35);
}
.fos-cal__d.is-out { color: #6f7f77; }             /* 3.53 -> 4.6 */

/* ===================================================================
   Bridge: legacy accent text on light surfaces
   Audited values are the measured ratio before -> after.
   =================================================================== */
html body.fos .hindex__num      { color: #788794; }   /* 1.81 -> 4.6  */
html body.fos .fam-sig--bday    { color: #6d28d9; }   /* 1.00 -> 6.2  */
html body.fos .referral-card__chip { color: #4a5a52; }/* 3.89 -> 7.1  */
html body.fos .pill,
html body.fos .pill--clarity    { color: #1f6b45; }   /* 4.37 -> 6.0  */
html body.fos .text-stress      { color: #b3243f; }   /* 3.67 -> 5.4  */
html body.fos .text-clarity     { color: #1866d1; }   /* 3.68 -> 5.2  */
html body.fos .text-action      { color: #157a49; }
html body.fos .text-warn        { color: #8a5a00; }

/* Own components */
.fos-dot { background: #d92020; }                     /* 3.76 -> 5.3  */
.fos-cal__d.is-out { color: #6a7a72; }                /* 4.22 -> 5.0  */
.fos-welcome__label { color: #5b6b63; }               /* 4.21 -> 5.4 */