/* ============================================================================
   OPT DIGITAL - UNIVERSAL UI STYLESHEET (opt-ui.css)
   ----------------------------------------------------------------------------
   Source of truth for every OPT surface: dashboards, internal tools, reports,
   client pages. Extracted from onboard.optdigital.io (opt-onboarding:
   offer-sheet.html, ob-2.html, campaign-dashboard.html).

   Rules:  page background is --bg (#fbfbf9), never pure white.
           white cards, 22px radius, 1px --line border, long soft shadow.
           pill buttons (999px) that fill yellow when active.
           inputs 14px radius with a yellow focus ring.
           checkboxes are a 21px rounded box that turns green with a tick.
           labels are 11.5px uppercase letter-spaced in --ink-mute.
           serif display (Bethany Elingston) for headlines and big numbers.
           icons are inline SVG line icons, stroke currentColor. No emojis.
   Load order: opt-fonts.css (Bethany) then this file. Inter Tight from Google.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,500;1,400&display=swap");

:root{
  --opt-yellow:#f4e14a;
  --opt-yellow-deep:#f5c518;
  --opt-yellow-soft:rgba(244,225,74,.12);
  --opt-yellow-ring:rgba(244,225,74,.28);
  --ink:#15161a;
  --ink-soft:#3b3d44;
  --ink-mute:#8a8d96;
  --paper:#ffffff;
  --bg:#fbfbf9;
  --line:#e9e6da;
  --line-strong:#e7e1cc;
  --line-hover:#dccf93;
  --good:#16a34a;
  --warn:#b8860b;
  --bad:#e0561e;
  --info:#2563eb;
  --font-display:"Bethany Elingston","Cormorant Garamond",Georgia,serif;
  --font-body:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius-card:22px;
  --radius-tile:18px;
  --radius-input:14px;
  --radius-pill:999px;
  --shadow-card:0 36px 80px -46px rgba(20,22,30,.34);
  --shadow-tile:0 20px 44px -34px rgba(20,22,30,.3);
  --shadow-input:0 1px 2px rgba(20,22,30,.04);
}

/* ---- base ---------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{width:min(1560px,96vw);margin:0 auto;padding:44px 0 90px}
.wrap.narrow{width:min(1040px,94vw)}

/* ---- typography ---------------------------------------------------------- */
h1{font-family:var(--font-display);font-size:clamp(38px,5vw,58px);line-height:1.04;font-weight:500;margin:0 0 12px;letter-spacing:-.005em;text-wrap:balance}
h1 .em{font-style:italic;font-weight:400}
h2{font-size:22px;font-weight:800;letter-spacing:-.015em;margin:0 0 10px}
h3{font-size:16px;font-weight:700;margin:0 0 6px}
.kicker,.label{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.kicker{margin-bottom:12px}
.lede{color:var(--ink-soft);max-width:74ch;font-size:16px;margin:0}
.muted{color:var(--ink-mute)}
.soft{color:var(--ink-soft)}
.mono{font-family:var(--font-mono);font-size:13px}
.num{font-family:var(--font-display);font-variant-numeric:tabular-nums}
.serif{font-family:var(--font-display)}

/* ---- top bar ------------------------------------------------------------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:2px solid var(--ink);margin-bottom:34px}
.brand{font-weight:800;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.brand .mark{background:var(--opt-yellow);padding:1px 7px;border-radius:6px}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap}
.topbar nav a{padding:8px 14px;border-radius:var(--radius-pill);font-weight:600;font-size:14px;color:var(--ink-soft)}
.topbar nav a:hover{background:#f1efe3;color:var(--ink)}
.topbar nav a.on{background:var(--opt-yellow);color:#1a1700}

/* ---- cards --------------------------------------------------------------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:26px 30px;margin-bottom:22px}
.card .cardtitle{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 18px}
.card .cardtitle .cnt{color:var(--ink-soft);font-weight:600;letter-spacing:.03em}
.card.flush{padding:0;overflow:hidden}
.card.yellow{background:var(--opt-yellow);border-color:var(--opt-yellow)}
.card.outline{border:1.5px solid var(--ink);box-shadow:none}

/* ---- KPI tiles ----------------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin-bottom:26px}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-tile);padding:20px 22px;box-shadow:var(--shadow-tile)}
.kpi.hi{border-color:var(--opt-yellow);background:rgba(244,225,74,.10);box-shadow:0 20px 44px -30px rgba(244,197,24,.55)}
.kpi .k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:9px}
.kpi .v{font-family:var(--font-display);font-size:38px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}
.kpi .n{font-size:12.5px;color:var(--ink-mute);margin-top:7px;font-weight:500}

/* ---- tiles (icon + title + one line) ------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.tile{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-tile);padding:18px 18px 18px 16px;box-shadow:var(--shadow-tile);transition:border-color .15s,transform .15s,box-shadow .15s;color:var(--ink);cursor:pointer;position:relative}
.tile:hover{border-color:var(--line-hover);transform:translateY(-1px);box-shadow:0 26px 50px -34px rgba(20,22,30,.4)}
.tile:focus-visible{outline:none;border-color:var(--opt-yellow);box-shadow:0 0 0 4px var(--opt-yellow-ring)}
.tile .ico{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(244,225,74,.55);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.tile .ico svg{width:21px;height:21px}
.tile .t{font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.25;margin:2px 0 4px}
.tile .s{font-size:13.5px;color:var(--ink-soft);line-height:1.4}
.tile .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.tile.dim{opacity:.62}

/* ---- buttons / pills ----------------------------------------------------- */
button,.btn{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:11px 18px;cursor:pointer;box-shadow:var(--shadow-input);transition:border-color .15s,background .15s,box-shadow .15s,transform .12s;display:inline-flex;align-items:center;gap:8px;line-height:1.2}
button:hover,.btn:hover{border-color:var(--line-hover);background:#fdfcf6}
button:active,.btn:active{transform:translateY(1px)}
button:focus-visible,.btn:focus-visible{outline:none;border-color:var(--opt-yellow);box-shadow:0 0 0 4px var(--opt-yellow-ring)}
button.on,.btn.on,.btn.primary{background:var(--opt-yellow);border-color:var(--opt-yellow);color:#1a1700;box-shadow:0 8px 20px -10px rgba(244,197,24,.9)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.sm,button.sm{padding:7px 13px;font-size:13px}
.btn svg,button svg{width:16px;height:16px}
.pills{display:flex;gap:9px;flex-wrap:wrap}
.pill{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:var(--radius-pill);border:1px solid var(--line);background:#fff;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;line-height:1.3}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-mute)}
.pill.live .dot{background:var(--good)}
.pill.warn .dot{background:var(--warn)}
.pill.bad .dot{background:var(--bad)}
.pill.info .dot{background:var(--info)}
.pill.yellow{background:var(--opt-yellow);border-color:var(--opt-yellow);color:#1a1700}
.tagmark{display:inline-block;background:var(--opt-yellow);border-radius:6px;padding:0 6px;font-weight:700;font-size:12px}

/* ---- forms --------------------------------------------------------------- */
.controls{display:flex;flex-wrap:wrap;gap:22px 28px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.input,select,input[type=text],input[type=search],input[type=number],input[type=date],input[type=email],input[type=url],textarea{font-family:var(--font-body);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius-input);padding:13px 15px;outline:none;box-shadow:var(--shadow-input);transition:border-color .18s,box-shadow .18s;width:100%}
select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8d96' stroke-width='2.4' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 13px center;background-size:15px;min-width:210px}
.input:hover,select:hover,input:hover,textarea:hover{border-color:#d8cfac}
.input:focus,select:focus,input:focus,textarea:focus{border-color:var(--opt-yellow);box-shadow:0 0 0 4px var(--opt-yellow-ring);outline:none}
.input::placeholder,input::placeholder,textarea::placeholder{color:#b7b3a6}
.input.err,input.err{border-color:var(--bad);box-shadow:0 0 0 4px rgba(224,86,30,.15)}
textarea{min-height:96px;resize:vertical;line-height:1.55}
.search{position:relative}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-mute);pointer-events:none}
.search input{padding-left:40px}

/* choice chip with custom checkbox */
.choice{position:relative;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink);cursor:pointer;padding:11px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-input);background:#fff;box-shadow:var(--shadow-input);transition:border-color .15s,background .15s,box-shadow .15s}
.choice:hover{border-color:var(--line-hover);background:#fdfcf6}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .box{flex:0 0 auto;width:21px;height:21px;border-radius:7px;border:1.5px solid #d6cdaf;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.choice .box svg{width:12px;height:12px;opacity:0;transform:scale(.4);transition:opacity .15s,transform .15s;stroke:#fff;stroke-width:3}
.choice.sel{border-color:var(--opt-yellow);background:var(--opt-yellow-soft);box-shadow:0 0 0 3px rgba(244,225,74,.16)}
.choice.sel .box{background:var(--good);border-color:var(--good)}
.choice.sel .box svg{opacity:1;transform:none}

/* ---- tables -------------------------------------------------------------- */
.tablecard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:22px}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);background:#fcfbf6;white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fdfcf6}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}

/* ---- lists --------------------------------------------------------------- */
ul.ticks{margin:0;padding:0;list-style:none}
ul.ticks li{padding:6px 0 6px 26px;position:relative;font-weight:500}
ul.ticks li::before{content:"";position:absolute;left:0;top:9px;width:17px;height:17px;background:var(--opt-yellow);border-radius:50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315161a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");background-size:10px;background-position:center;background-repeat:no-repeat}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 22px;margin:0}
dl.facts dt{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);padding-top:3px}
dl.facts dd{margin:0;color:var(--ink);font-weight:500;word-break:break-word}

/* ---- callout ------------------------------------------------------------- */
.callout{border:1px solid var(--line);border-left:4px solid var(--opt-yellow);border-radius:14px;background:#fffdf0;padding:14px 18px;font-size:14px;color:var(--ink-soft)}
.callout b{color:var(--ink)}
details.acc{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:#fafaf7}
details.acc summary{cursor:pointer;padding:10px 14px;font-weight:700;font-size:13.5px;list-style:none;display:flex;align-items:center;gap:8px}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::before{content:"+";display:flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--opt-yellow);border-radius:50%;font-weight:800;font-size:13px;flex:none}
details.acc[open] summary::before{content:"-"}
details.acc .body{padding:0 14px 12px;color:var(--ink-soft);font-size:13.5px}

/* ---- section heads ------------------------------------------------------- */
.groupname{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.groupname .cnt{color:var(--ink-soft);font-weight:600;letter-spacing:.03em}
.section{margin-bottom:34px}
.divider{border:0;border-top:1px solid var(--line);margin:28px 0}
.foot{margin-top:30px;color:var(--ink-mute);font-size:12.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}

/* ---- importance grade ---------------------------------------------------- */
.grade{position:absolute;right:12px;top:12px;font-family:var(--font-display);font-size:17px;line-height:1;padding:6px 8px 4px;border-radius:9px;color:var(--ink);font-variant-numeric:tabular-nums;min-width:34px;text-align:center}
.sysc .grade,.row .grade{position:static}
.bigg{font-family:var(--font-display);font-size:54px;line-height:1;padding:10px 16px 6px;border-radius:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.gbar{height:8px;border-radius:999px;background:#f1efe3;margin-top:16px;overflow:hidden}
.gbar i{display:block;height:100%}

/* ---- helpers ------------------------------------------------------------- */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.ic{width:18px;height:18px;vertical-align:-3px}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
kbd{font-family:var(--font-mono);font-size:11.5px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;padding:1px 6px;background:#fff;color:var(--ink-soft)}

@media(max-width:800px){
  .wrap{padding:26px 0 60px;width:min(1560px,92vw)}
  .topbar{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:24px}
  .card{padding:18px 18px}
  h1{font-size:34px}
  .tiles{grid-template-columns:1fr}
  dl.facts{grid-template-columns:1fr;gap:2px 0}
  dl.facts dd{margin-bottom:10px}
}
@media print{
  body{background:#fff}
  .card,.kpi,.tile{box-shadow:none}
  .topbar nav,.controls{display:none}
}