/*
 * Fabrix shared design system (ADR-007 cap #6 theming). ONE compiled stylesheet, authored
 * against runtime CSS custom properties. Tenants set only tier-1 tokens (5 colors); the design
 * system derives the rest. A3 injects the resolved tenant's tier-1 values + F4 contrast tokens
 * into :root, overriding the platform defaults below. NO per-tenant stylesheet, NO per-tenant
 * build artifact (CIC-6). §3 derivation formulas ported VERBATIM from the cap #6 mockups.
 *
 * SCOPE (cap #6 A2): custom-property VOCABULARY + a minimal foundation only. NO component
 * classes — the pages/components that consume tier-3 tints are out of cap #6 (A3 chrome uses
 * the 3a subset).
 */

:root {
  /* ── TIER 1 — tenant tokens (5 colors). These are CIC-5 platform DEFAULTS (neutral —
        NEVER a specific tenant's). A3 injects the resolved tenant's values, overriding these. ── */
  --brand-primary:    #334155;
  --brand-secondary:  #475569;
  --brand-accent:     #2563eb;
  --brand-background: #f8fafc;
  --brand-text:       #0f172a;

  /* on-primary / on-secondary (F4): WCAG-contrast text on brand surfaces. Defaults here;
     A3 overrides with ThemePresenter's luminance-computed values. */
  --brand-on-primary:   #ffffff;
  --brand-on-secondary: #ffffff;

  /* ── TIER 2 — design-system DERIVED (tenant never sets). §3.2 formulas VERBATIM. ── */
  --brand-surface:   #ffffff;                                                /* platform default surface */
  --brand-ink:       var(--brand-text);                                      /* = text */
  --brand-ink-dim:   color-mix(in srgb, var(--brand-text) 64%, var(--brand-background));
  --brand-ink-faint: color-mix(in srgb, var(--brand-text) 42%, var(--brand-background));
  --brand-line:      color-mix(in srgb, var(--brand-text) 12%, var(--brand-background));
  --brand-logo-bg:   #ffffff;                                                /* F3 — platform white, NOT a tenant token */

  /* ── F2 — founding-gold platform-default semantic. NEVER tenant-routed (§6-F2). ── */
  --status-founding:        #b8860b;
  --status-founding-bg:     color-mix(in srgb, var(--status-founding) 7%, transparent);
  --status-founding-border: color-mix(in srgb, var(--status-founding) 35%, transparent);

  /* ── TIER 3 — component-tint VOCABULARY (§3.3 formulas VERBATIM). Declarations only —
        the components/pages that consume them are OUT of cap #6 (A3 chrome uses the 3a subset). ── */
  /* (3a) consumed by the A3 dashboard chrome */
  --brand-tint-stat:        color-mix(in srgb, var(--brand-secondary) 11%, transparent);  /* stat-icon chip */
  --brand-tier-premier-bg:  color-mix(in srgb, var(--brand-secondary) 7%, transparent);   /* premier pill (F1-corrected) */
  /* (3b) vocabulary for FUTURE pages (feed / membership / directory — NOT built in cap #6) */
  --brand-pill-primary:     color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --brand-pill-secondary:   color-mix(in srgb, var(--brand-secondary) 12%, transparent);
  --brand-pill-accent:      color-mix(in srgb, var(--brand-accent) 14%, transparent);
  --brand-tag-primary-bg:   color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --brand-tag-primary-bd:   color-mix(in srgb, var(--brand-primary) 20%, transparent);
  --brand-tag-secondary-bg: color-mix(in srgb, var(--brand-secondary) 8%, transparent);
  --brand-tag-secondary-bd: color-mix(in srgb, var(--brand-secondary) 22%, transparent);
  --brand-plan-cap-basic:   linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary) 86%, #fff), var(--brand-secondary));
  --brand-plan-cap-premier: linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 60%, #000));
}

/* ── minimal design-system foundation so the default theme renders cleanly (CIC-5) ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--brand-background);
  color: var(--brand-ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ───────────────────────────────────────────────────────────────────────────
   DASHBOARD CHROME COMPONENTS (cap #6 A3 / S3). Ported from the dashboard mockup
   (fabrix_tenant_demo.html), INNER tenant community only. The demo sales frame,
   fake browser bar and explainer caption are NOT ported (handover §7 — dropped
   at go-live).

   NOTE: this header deliberately avoids the literal token/value strings the S3
   grep gate scans for (the old t-prefix, white hex/rgba, demo-frame class names),
   so the verification is never polluted by documentation. See the build log for
   the full mapping.

   Renames: every mockup t-prefixed token becomes the matching A2 brand-prefixed
   token (formulas identical). Consumes the A2 "3a" tier-3 tokens (brand tint-stat,
   brand tier-premier-bg) and the F2 status tokens (status-founding family). Does
   NOT consume the "3b" future-page tokens (pill / tag / plan-cap families; their
   pages — feed/membership/directory — are not built).

   R4 (F4 contrast): every on-brand surface uses the on-primary / on-secondary
   tokens; translucent values use color-mix against an on-color. NO hardcoded
   white literals.
   R7 (lockup): the nav brand slot fits a HORIZONTAL lockup image (height-bounded,
   width:auto, object-fit:contain) on the F3 white chip — not a fixed square.

   All selectors are class-scoped (no bare element / star selectors) so this
   shared bundle does not restyle the login / password pages.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── top nav (sits on --brand-primary; R4 contrast throughout) ── */
.tnav{display:flex;align-items:center;gap:64px;padding:0 96px;height:60px;
  background:var(--brand-primary);color:var(--brand-on-primary)}
.tbrand{display:flex;align-items:center;flex-shrink:0}
/* R7 — horizontal lockup slot on the F3 white chip (logo legible on any nav color) */
.tlogo{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:6px 14px;
  background:var(--brand-logo-bg);border-radius:10px;overflow:hidden;flex-shrink:0}
.tlogo img{display:block;height:100%;width:auto;max-height:34px;object-fit:contain}
/* ADR-010 logo_treatment "bare": no chip — logo sits directly on the nav (--brand-primary), for
   white/transparent logos. Transparent bg, no padding/radius; max-height still caps via .tlogo img. */
.tlogo--bare{background:transparent;padding:0;border-radius:0}
.tnav-links{display:flex;gap:3px}
.tnav-links a{padding:8px 13px;border-radius:8px;font-size:14px;font-weight:500;
  color:color-mix(in srgb, var(--brand-on-primary) 72%, transparent)}
.tnav-links a:hover{background:color-mix(in srgb, var(--brand-on-primary) 8%, transparent)}
.tnav-links a.on{color:var(--brand-on-primary);
  background:color-mix(in srgb, var(--brand-on-primary) 13%, transparent)}
.tnav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.tsearch{border-radius:9px;padding:8px 13px;font-size:13px;width:210px;
  background:color-mix(in srgb, var(--brand-on-primary) 13%, transparent);
  color:color-mix(in srgb, var(--brand-on-primary) 70%, transparent)}
.tav{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:600;font-size:13px;flex-shrink:0;
  background:var(--brand-secondary);color:var(--brand-on-secondary);
  border:2px solid color-mix(in srgb, var(--brand-on-primary) 25%, transparent)}

/* ── content layout ── */
.twrap{max-width:1180px;margin:0 auto;padding:26px 24px 40px;
  display:grid;grid-template-columns:1fr 300px;gap:24px}

/* ── hero / welcome ── */
.hero{background:var(--brand-surface);border:1px solid var(--brand-line);
  border-radius:18px;padding:32px 36px;position:relative;overflow:hidden;margin-bottom:20px}
.h-eye{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-secondary);margin-bottom:9px}
.hero h1{font-size:33px;font-weight:800;letter-spacing:-.02em;color:var(--brand-ink);
  line-height:1.1;margin:0 0 10px;max-width:760px}
.hero h1 em{font-style:normal;color:var(--brand-secondary)}
.hero p{color:var(--brand-ink-dim);font-size:15.5px;line-height:1.6;max-width:680px;margin:0 0 22px}
.faces{display:flex;align-items:center;margin-bottom:22px}
.face{width:44px;height:44px;border-radius:50%;border:2.5px solid var(--brand-surface);
  margin-right:-11px;display:flex;align-items:center;justify-content:center;font-weight:600;
  font-size:14px;background:var(--brand-secondary);color:var(--brand-on-secondary)}
.face:nth-child(even){background:var(--brand-primary);color:var(--brand-on-primary)}
.face-more{margin-left:16px;font-size:13px;color:var(--brand-ink-faint);font-weight:600}
.acts{display:flex;gap:11px;flex-wrap:wrap}
.btn{padding:11px 20px;border-radius:10px;font-weight:600;font-size:14px;border:none;
  cursor:pointer;font-family:inherit}
.btn-p{background:var(--brand-secondary);color:var(--brand-on-secondary)}
.btn-g{background:transparent;color:var(--brand-ink);border:1px solid var(--brand-line)}

/* ── stat ribbon (consumes 3a --brand-tint-stat) ── */
.ribbon{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:24px}
.stat{background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:13px;
  padding:16px 18px;display:flex;align-items:center;gap:14px}
.stat .ic{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;background:var(--brand-tint-stat);color:var(--brand-secondary)}
.stat .ic svg{width:21px;height:21px}
.stat .n{font-size:22px;font-weight:800;color:var(--brand-primary);letter-spacing:-.02em;line-height:1.1}
.stat .l{font-size:12px;color:var(--brand-ink-faint);margin-top:2px;font-weight:500}
.glance-h{display:flex;align-items:center;gap:12px}
.glance-note{font-size:11.5px;color:var(--brand-ink-faint);font-weight:500;
  background:var(--brand-background);border:1px dashed var(--brand-line);border-radius:999px;padding:3px 11px}

/* ── section headers + filter chips ── */
.sec-h{display:flex;align-items:center;margin:4px 0 14px}
.sec-h h2{font-size:16px;font-weight:700;color:var(--brand-ink);margin:0}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.chip{font-size:12.5px;font-weight:500;color:var(--brand-ink-dim);background:var(--brand-surface);
  border:1px solid var(--brand-line);border-radius:999px;padding:6px 14px}
.chip.on{color:var(--brand-on-secondary);border-color:transparent;background:var(--brand-secondary)}

/* ── member cards (consumes 3a --brand-tier-premier-bg + F2 --status-founding*) ── */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.mcard{background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:15px;
  padding:18px;transition:.16s}
.mcard:hover{box-shadow:0 12px 26px rgba(20,40,70,.1);transform:translateY(-2px)}
.mtop{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mpic{width:50px;height:50px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-weight:600;font-size:16px;background:var(--brand-secondary);color:var(--brand-on-secondary)}
.mcard:nth-child(even) .mpic{background:var(--brand-primary);color:var(--brand-on-primary)}
.mname{font-weight:600;font-size:15px;color:var(--brand-ink)}
.mrole{font-size:12px;color:var(--brand-ink-faint);margin-top:1px}
.mbio{font-size:12.5px;color:var(--brand-ink-dim);line-height:1.5;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mfoot{display:flex;align-items:center;gap:7px}
.mtier{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;border:1px solid var(--brand-line);color:var(--brand-ink-dim)}
.mtier.f{color:var(--status-founding);border-color:var(--status-founding-border);background:var(--status-founding-bg)}
.mtier.p{color:var(--brand-secondary);border-color:var(--brand-secondary);background:var(--brand-tier-premier-bg)}
.mview{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--brand-secondary)}

/* ── organization cards ── */
.ogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ocard{background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:15px;
  padding:18px;transition:.16s}
.ocard:hover{box-shadow:0 12px 26px rgba(20,40,70,.1);transform:translateY(-2px)}
.otop{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.opic{width:50px;height:50px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:15px;background:var(--brand-secondary);color:var(--brand-on-secondary)}
.oname{font-weight:600;font-size:15px;color:var(--brand-ink)}
.ocat{font-size:12px;color:var(--brand-ink-faint);margin-top:1px}
.otag{font-size:12.5px;color:var(--brand-ink-dim);line-height:1.5;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ofoot{display:flex;align-items:center;gap:7px}
.oloc{font-size:11.5px;color:var(--brand-ink-faint)}
.oview{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--brand-secondary)}

/* ── right rail ── */
.trail{display:flex;flex-direction:column;gap:16px}
.card{background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:15px;padding:18px}
.ch{font-size:13px;font-weight:700;color:var(--brand-ink);margin-bottom:13px}
.frow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--brand-line)}
.frow:last-child{border:0;padding-bottom:0}
.fp{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-weight:600;font-size:12px;background:var(--brand-secondary);color:var(--brand-on-secondary)}
.fn{font-size:13px;font-weight:600;color:var(--brand-ink)}
.fm{font-size:11px;color:var(--brand-ink-faint)}
.upd{padding:10px 0;border-bottom:1px solid var(--brand-line)}
.upd:last-child{border:0;padding-bottom:0}
.ut{font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-secondary)}
.uh{font-size:12.5px;font-weight:500;color:var(--brand-ink);margin-top:4px;line-height:1.35}
.um{font-size:11px;color:var(--brand-ink-faint);margin-top:3px}
.msg{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--brand-line)}
.msg:last-child{border:0;padding-bottom:0}
.msg-pic{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-weight:600;font-size:12px;background:var(--brand-secondary);color:var(--brand-on-secondary)}
.msg-body{flex:1;min-width:0}
.msg-top{display:flex;align-items:baseline;gap:7px}
.msg-n{font-size:13px;font-weight:600;color:var(--brand-ink)}
.msg-t{font-size:10.5px;color:var(--brand-ink-faint);margin-left:auto;flex-shrink:0}
.msg-p{font-size:12px;color:var(--brand-ink-dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-unread{width:7px;height:7px;border-radius:50%;background:var(--brand-secondary);flex-shrink:0;margin-top:13px}
.msg-seeall{font-size:12px;font-weight:600;color:var(--brand-secondary);margin-top:12px;display:inline-block}

/* ── responsive (tenant-content breakpoints only; demo-frame breakpoints dropped) ── */
@media (max-width:980px){.twrap{grid-template-columns:1fr}.trail{display:none}}
@media (max-width:640px){
  .tnav{gap:10px;padding:0 14px;height:54px}.tnav-links{display:none}.tsearch{display:none}
  .twrap{padding:18px 14px 30px}
  .hero{padding:22px 18px}.hero h1{font-size:23px;max-width:none}.hero p{max-width:none}
  .ribbon{grid-template-columns:repeat(2,1fr)}
  .mgrid{grid-template-columns:1fr}.ogrid{grid-template-columns:1fr}
  .card{padding:16px}
}