/* ============================================================================
   Wickford Portal — Brand & UI stylesheet (Direction 7a)
   Single source of truth for brand tokens + reusable components.
   Spec: Cowork\Brand\Wickford-Portal-Brand-Spec-7a.md
   ----------------------------------------------------------------------------
   HOW TO USE ON A PAGE:
     <link rel="stylesheet" href="/brand.css">
   Then use the tokens via var(--navy) etc. and the wf-* component classes.
   Yellow is a spice, not a sauce — keyline / one accent word / small highlights
   only, never large fills or page backgrounds.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Public+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* ── core palette ── */
  --navy:#231A4D;          /* header bar, hero start, primary buttons */
  --navy-light:#38296E;    /* hero gradient end */
  --navy-mid:#2C2160;      /* hero gradient middle */
  --navy-deep:#1E1642;     /* sticky top bar (a touch deeper than hero) */
  --navy-soft:#38296E;     /* primary-button hover */
  --yellow:#F2DC26;        /* keyline / accent word / small highlights only */
  --yellow-hi:#F6E44A;     /* highlighter swipe behind accent words on cream */
  --bg:#F4F1E8;            /* page background (cream) */
  --card:#FFFFFF;          /* cards / tiles */
  --ink:#241E4E;           /* headings & body text */
  --muted:#6E6994;         /* secondary text */
  --chip:#EEEBFA;          /* icon-chip background (lavender) */
  --icon:#3D2E85;          /* icon strokes */
  --border:#DFDBC9;        /* hairline rules / subtle borders */
  --border-strong:#CFCAB4; /* stronger hairline on hover */
  /* ── on-navy text ── */
  --header-text:#B7B3D6;   /* tracked labels on navy */
  --header-muted:#9B96C2;
  --hero-body:#C6C2E2;     /* paragraph text on navy */
  /* ── status ── */
  --live-green:#1E7A4E;  --live-bg:#E3F4EA;
  --alert-red:#C25445;
  --yellow-on-cream:#B49F0E; /* contrast-safe yellow-ish text on cream, if ever needed */
  /* ── elevation ── */
  --shadow:0 1px 3px rgba(35,26,77,.08);
  --shadow-lift:0 4px 10px rgba(35,26,77,.10),0 18px 44px rgba(35,26,77,.14);
}

/* ── base type ─────────────────────────────────────────────────────────────
   Sans (Public Sans) for what pages DO; serif (Source Serif 4) for what they SAY. */
.wf-base,body.wf-base{font-family:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
.serif{font-family:'Source Serif 4',Georgia,serif;font-weight:600}

/* ── top bar (solid navy) ── */
.wf-topbar{background:var(--navy-deep);height:62px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.wf-topbar-label{font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--header-text)}

/* ── navy hero band: gradient + 4px yellow keyline + concentric-oval texture ──
   Markup:  <section class="wf-hero"><div class="wf-hero-ovals"></div>
              <div class="wf-hero-inner"> …title / subtitle / search … </div></section> */
.wf-hero{position:relative;overflow:hidden;background:linear-gradient(100deg,var(--navy) 0%,var(--navy-mid) 55%,var(--navy-light) 100%);border-bottom:4px solid var(--yellow)}
.wf-hero-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:40px 24px 44px}
.wf-hero h1,.wf-hero-title{color:#fff;font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:38px;line-height:1.12;letter-spacing:-.4px}
.wf-hero h1 .accent,.accent-on-navy{color:var(--yellow)}
.wf-hero p,.wf-hero-sub{color:var(--hero-body);font-size:15px;margin-top:8px}
/* three concentric ovals, top-right, rotated -10deg, overflowing the edge */
.wf-hero-ovals{position:absolute;top:-120px;right:-140px;width:520px;height:360px;z-index:1;transform:rotate(-10deg);pointer-events:none}
.wf-hero-ovals,.wf-hero-ovals::before,.wf-hero-ovals::after{border-radius:50%}
.wf-hero-ovals{border:26px solid rgba(255,255,255,.045)}
.wf-hero-ovals::before{content:"";position:absolute;inset:40px;border:1.5px solid rgba(255,255,255,.12)}
.wf-hero-ovals::after{content:"";position:absolute;inset:8px;border:1.5px solid rgba(242,220,38,.22)}

/* ── body watermark: ONE giant oval, bottom-left, <=5% opacity ──
   Put on the scrolling body wrapper; keep real content position:relative above it. */
.wf-body{position:relative;background:var(--bg)}
.wf-body::before{content:"";position:absolute;left:-160px;bottom:-120px;width:620px;height:440px;border-radius:50%;transform:rotate(-8deg);border:72px solid rgba(35,26,77,.032);box-shadow:0 0 0 2px rgba(35,26,77,.05) inset;pointer-events:none;z-index:0}
.wf-body>*{position:relative;z-index:1}

/* ── section header: tracked label + hairline rule to the right edge ── */
.wf-section{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#7B76A3;display:flex;align-items:center;gap:12px;margin-bottom:16px}
.wf-section::after{content:"";flex:1;height:1px;background:var(--border)}

/* ── tool tile ── */
.wf-tile{position:relative;display:block;background:var(--card);border-radius:12px;padding:20px;box-shadow:var(--shadow);text-decoration:none;transition:transform .18s,box-shadow .18s}
.wf-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.wf-tile-icon{width:38px;height:38px;border-radius:10px;background:var(--chip);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.wf-tile-icon svg{width:19px;height:19px;stroke:var(--icon);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wf-tile-name{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:18px;color:var(--ink);margin-bottom:6px}
.wf-tile-desc{font-size:13px;color:var(--muted);line-height:1.55}

/* ── status pill ── */
.wf-pill{position:absolute;top:16px;right:16px;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:5px}
.wf-pill::before{content:"";width:6px;height:6px;border-radius:50%}
.wf-pill-live{background:var(--live-bg);color:var(--live-green)}
.wf-pill-live::before{background:var(--live-green)}
.wf-pill-lan{background:#FBF3D2;color:#8A6D00}
.wf-pill-lan::before{background:#DCB200}
.wf-pill-soon{background:#EFECE1;color:#85806F}
.wf-pill-soon::before{background:#B8B2A0}

/* ── buttons ── */
.wf-btn{font-family:'Public Sans',sans-serif;font-size:13px;font-weight:600;border-radius:8px;padding:10px 18px;cursor:pointer;border:none;transition:background .15s,box-shadow .15s,transform .1s}
.wf-btn-primary{background:var(--navy);color:#fff}
.wf-btn-primary:hover{background:var(--navy-soft)}
.wf-btn-secondary{background:#fff;color:var(--ink);border:1px solid #C9C4E2}
.wf-btn-highlight{background:var(--yellow);color:var(--navy);font-weight:700}
.wf-btn-on-navy{background:transparent;color:#eef1fb;border:1px solid rgba(255,255,255,.3)}
.wf-btn-on-navy:hover{background:rgba(255,255,255,.12)}

/* ── stat card ── */
.wf-stat{background:var(--card);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.wf-stat-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#8A8FA9}
.wf-stat-num{font-size:23px;font-weight:800;color:var(--ink);margin-top:4px}
.wf-stat-num.neg{color:var(--alert-red)}

/* ── table ── */
.wf-table-wrap{background:var(--card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.wf-table{width:100%;border-collapse:collapse;font-size:13.5px}
.wf-table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--border)}
.wf-table td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--ink)}
.wf-table tr:last-child td{border-bottom:none}

/* ── search field (white; on navy add the strong shadow) ── */
.wf-search{display:flex;align-items:center;gap:11px;background:#fff;border-radius:10px;padding:0 16px;height:50px}
.wf-search.on-navy{box-shadow:0 8px 24px rgba(0,0,0,.25)}
.wf-search input{flex:1;border:none;outline:none;font-family:inherit;font-size:15px;color:var(--ink);background:transparent}
.wf-search input::placeholder{color:var(--header-muted)}

/* ── highlighter swipe behind an accent word on cream (never yellow text) ── */
.wf-hl{background:linear-gradient(transparent 60%,var(--yellow-hi) 60%,var(--yellow-hi) 95%,transparent 95%);padding:0 .05em}

@media(max-width:560px){
  .wf-topbar{padding:0 14px}
  .wf-hero h1,.wf-hero-title{font-size:26px}
  .wf-hero-inner{padding:26px 16px 30px}
  .wf-hero-ovals{width:320px;height:230px;top:-80px;right:-90px}
}