/* ══ TOKENS ═══════════════════════════════════════════════════════
   Portal/assets/portal.css lines 1-95, verbatim (as PartnersCenter does).

   Lines 1-60 of the marketing site's assets/site.css, verbatim, plus
   the four tokens the portal needs on top: the semantic ramp, the
   rail width and the two chart inks. Same accent, same six surfaces,
   same 6px cards, same uppercase mono labels.

   The semantic colours are the application's deliberately cooled
   #30a06a / #e8a87c / #c24a56, not the stock Tailwind tones the demo
   shipped. They are stated per theme for the same reason the accent
   is: #e8a87c is a 1.9:1 contrast on white and unreadable as text, so
   light gets the same hues taken down in value. The raw app value is
   the dark one, where it was designed to sit.                       */
:root{
  color-scheme: light dark;
  --accent:     #2563eb;
  --accent-dim: #1d4ed8;
  --accent-hi:  #2563eb;

  /* LIGHT */
  --bg:        #ffffff;
  --surface:   #f7f8fa;
  --surface-2: #f0f2f5;
  --border:    #e2e5ea;
  --text:      #0d0f12;
  --muted:     #64748b;
  --faint:     #8a94a3;
  --chip-bg:   #eff5ff;
  --chip-bd:   #c7dbfe;
  --chip-tx:   #1d4ed8;
  --grid-line: #edeff3;
  --nav-bg:    rgba(255,255,255,.84);
  --shadow:    0 1px 2px rgba(13,15,18,.05), 0 12px 30px rgba(13,15,18,.07);
  --hover:     rgba(13,15,18,.025);

  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --logo-sh:#0d0f18; --logo-sh1:.10; --logo-sh2:.14;
  --logo-warm:#a06c44; --logo-mid:#1c38a8; --logo-cool:#685aa0;
  --logo-b1:#2563eb;   --logo-b2:#685aa0; --logo-core:#1c38a8; --logo-glow:#4c68b0;
  --nav-h:64px;
  --maxw:1120px;

  /* portal additions — light */
  --rail-w:244px;
  --ok:#227a51;   --ok-bg:#eaf6f0;   --ok-bd:#bfe3d1;
  --warn:#9c6127; --warn-bg:#fdf3e9; --warn-bd:#f0d8bd;
  --bad:#a5333f;  --bad-bg:#fdeced;  --bad-bd:#f2c8cc;
  --plot:#2563eb; --plot-2:#a06c44;

  /* the sign-in backdrop — the website hero's board, verbatim: the same
     trace tile (Website/assets/site.css --tile) lit by the same royal
     pool, and the same two-stop glow. The colours are the site's, which
     are the application's ICoreVisualIdentity royal. */
  --tile:url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22 viewBox=%220 0 240 240%22><g fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.5%22 stroke-linecap=%22round%22><path d=%22M0 30H62a8 8 0 0 1 8 8v24a8 8 0 0 0 8 8h74a8 8 0 0 0 8-8V38a8 8 0 0 1 8-8h72%22/><path d=%22M0 110h32a8 8 0 0 1 8 8v24a8 8 0 0 0 8 8h44a8 8 0 0 0 8-8v-24a8 8 0 0 1 8-8h132%22/><path d=%22M0 190h122a8 8 0 0 0 8-8v-24a8 8 0 0 1 8-8h54a8 8 0 0 1 8 8v24a8 8 0 0 0 8 8h32%22/><path d=%22M50 0v82a8 8 0 0 0 8 8h24a8 8 0 0 1 8 8v94a8 8 0 0 1-8 8H58a8 8 0 0 0-8 8v32%22/><path d=%22M150 0v32a8 8 0 0 1-8 8h-16a8 8 0 0 0-8 8v64a8 8 0 0 0 8 8h16a8 8 0 0 1 8 8v112%22/><path d=%22M210 0v240%22/><path d=%22M90 130h60%22/><rect x=%22186%22 y=%2223%22 width=%2222%22 height=%2214%22 rx=%223%22/><rect x=%2279%22 y=%22155%22 width=%2222%22 height=%2216%22 rx=%223%22/><rect x=%2260%22 y=%22183%22 width=%2222%22 height=%2214%22 rx=%223%22/></g><g fill=%22%23fff%22><circle cx=%2290%22 cy=%22130%22 r=%222.4%22/><circle cx=%22150%22 cy=%22130%22 r=%222.4%22/><circle cx=%22168%22 cy=%2230%22 r=%222.4%22/><circle cx=%22108%22 cy=%22110%22 r=%222.4%22/><circle cx=%22208%22 cy=%22190%22 r=%222.4%22/><circle cx=%2290%22 cy=%2298%22 r=%222.4%22/><circle cx=%2250%22 cy=%22208%22 r=%222.4%22/><circle cx=%22210%22 cy=%22120%22 r=%222.4%22/></g></svg>");
  --trace-hero:rgba(40,80,208,.26);
  --hero-glow:rgba(40,80,208,.13); --hero-glow-2:rgba(28,56,168,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent:#3b82f6; --accent-dim:#1d4ed8; --accent-hi:#60a5fa;
    --bg:#0d0f12; --surface:#13161b; --surface-2:#0f1218; --border:#1e2229;
    --text:#e2e8f0; --muted:#64748b; --faint:#7c8798;
    --chip-bg:#0f1525; --chip-bd:#1a3050; --chip-tx:#60a5fa;
    --grid-line:#161a20; --nav-bg:rgba(13,15,18,.85);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 44px rgba(0,0,0,.4);
    --hover:rgba(255,255,255,.02);
    --logo-sh:#000000; --logo-sh1:.24; --logo-sh2:.30;
    --logo-warm:#e8a87c; --logo-mid:#eaf1ff; --logo-cool:#a898e8;
    --logo-b1:#3b82f6;   --logo-b2:#a898e8; --logo-core:#e8ecff; --logo-glow:#6888e8;
    --ok:#30a06a;   --ok-bg:#0e1b16;   --ok-bd:#1c3a2c;
    --warn:#e8a87c; --warn-bg:#1d1611; --warn-bd:#3d2f22;
    --bad:#c24a56;  --bad-bg:#1d1215;  --bad-bd:#3d2229;
    --plot:#3b82f6; --plot-2:#e8a87c;
    --trace-hero:rgba(104,136,232,.32);
    --hero-glow:rgba(40,80,208,.13); --hero-glow-2:rgba(104,136,232,.07);
  }
}
:root[data-theme="dark"]{
  --accent:#3b82f6; --accent-dim:#1d4ed8; --accent-hi:#60a5fa;
  --bg:#0d0f12; --surface:#13161b; --surface-2:#0f1218; --border:#1e2229;
  --text:#e2e8f0; --muted:#64748b; --faint:#7c8798;
  --chip-bg:#0f1525; --chip-bd:#1a3050; --chip-tx:#60a5fa;
  --grid-line:#161a20; --nav-bg:rgba(13,15,18,.85);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 44px rgba(0,0,0,.4);
  --hover:rgba(255,255,255,.02);
  --logo-sh:#000000; --logo-sh1:.24; --logo-sh2:.30;
  --logo-warm:#e8a87c; --logo-mid:#eaf1ff; --logo-cool:#a898e8;
  --logo-b1:#3b82f6;   --logo-b2:#a898e8; --logo-core:#e8ecff; --logo-glow:#6888e8;
  --ok:#30a06a;   --ok-bg:#0e1b16;   --ok-bd:#1c3a2c;
  --warn:#e8a87c; --warn-bg:#1d1611; --warn-bd:#3d2f22;
  --bad:#c24a56;  --bad-bg:#1d1215;  --bad-bd:#3d2229;
  --plot:#3b82f6; --plot-2:#e8a87c;
  --trace-hero:rgba(104,136,232,.32);
  --hero-glow:rgba(40,80,208,.13); --hero-glow-2:rgba(104,136,232,.07);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 15px/1.6 var(--sans);min-height:100vh;
     display:flex;flex-direction:column}
a{color:var(--accent-hi);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
main.wrap{flex:1;padding-top:36px;padding-bottom:64px}
.boot{color:var(--muted);font-family:var(--mono);font-size:13px}

/* ── top bar ── */
.top{position:sticky;top:0;z-index:5;height:var(--nav-h);background:var(--nav-bg);
     backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
     border-bottom:1px solid var(--border)}
.top-in{max-width:var(--maxw);margin:0 auto;height:100%;padding:0 24px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text)}
.brand:hover{text-decoration:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand .name{font-weight:600;font-size:15px}
.brand .sub2{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.top-links{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14px}
.top-links a{color:var(--muted)}
.top-links a:hover{color:var(--text);text-decoration:none}
.theme{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
       background:transparent;color:var(--muted);cursor:pointer}
.theme:hover{color:var(--text);background:var(--hover)}

.dev-strip{background:var(--warn-bg);color:var(--warn);border-bottom:1px solid var(--warn-bd);
           font-size:13.5px;padding:9px 24px;text-align:center}
.dev-strip a{color:inherit;text-decoration:underline;margin-left:6px}

/* ── the catalogue page ── */
.lede h1{font-size:30px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.lede p{color:var(--muted);max-width:640px;margin-top:10px}
.lede .how{font-family:var(--mono);font-size:12.5px;color:var(--text);background:var(--surface);
           border:1px solid var(--border);border-radius:6px;padding:2px 7px;white-space:nowrap}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:28px 0 18px}
.search{flex:1 1 260px;max-width:380px;height:38px;border:1px solid var(--border);border-radius:8px;
        background:var(--surface);color:var(--text);padding:0 12px;font:inherit;font-size:14px}
.search:focus{outline:2px solid var(--chip-bd);outline-offset:0;border-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:transparent;
      color:var(--muted);font-size:13px;cursor:pointer}
.chip:hover{color:var(--text);background:var(--hover)}
.chip[aria-pressed="true"]{background:var(--chip-bg);border-color:var(--chip-bd);color:var(--chip-tx)}
.status{font-family:var(--mono);font-size:12px;color:var(--faint);margin-bottom:14px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{display:flex;gap:14px;padding:16px;border:1px solid var(--border);border-radius:var(--r,12px);
      background:var(--surface);color:var(--text);box-shadow:var(--shadow);transition:border-color .12s, transform .12s}
.card:hover{text-decoration:none;border-color:var(--chip-bd);transform:translateY(-1px)}
.art{flex:0 0 52px;width:52px;height:52px;border-radius:10px;background:var(--surface-2);
     border:1px solid var(--border);display:grid;place-items:center;overflow:hidden}
.art img{width:100%;height:100%;object-fit:contain}
.art .mono{font-weight:600;font-size:18px;color:var(--accent-hi)}
.card-body{min-width:0}
.card h3{font-size:15.5px;font-weight:600;line-height:1.3}
.card p{color:var(--muted);font-size:13.5px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;
        -webkit-box-orient:vertical;overflow:hidden}
.meta{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:8px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
       padding:2px 7px;border-radius:5px;border:1px solid var(--border);color:var(--muted)}
.badge.free{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok)}
.badge.paid{background:var(--chip-bg);border-color:var(--chip-bd);color:var(--chip-tx)}
.badge.tool{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}

.empty{border:1px dashed var(--border);border-radius:12px;padding:40px 24px;text-align:center;color:var(--muted)}
.empty h2{font-size:17px;color:var(--text);font-weight:600;margin-bottom:6px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:48px}
.step{border-top:1px solid var(--border);padding-top:14px}
.step .n{font-family:var(--mono);font-size:11.5px;color:var(--accent-hi);letter-spacing:.08em}
.step h4{font-size:14.5px;font-weight:600;margin:4px 0}
.step p{color:var(--muted);font-size:13.5px}

/* ── a toolbox's page ── */
.back{display:inline-block;font-size:13.5px;color:var(--muted);margin-bottom:20px}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
@media (max-width:820px){.detail{grid-template-columns:1fr}}
.head{display:flex;gap:18px;align-items:center}
.head .art{flex-basis:76px;width:76px;height:76px;border-radius:14px}
.head h1{font-size:26px;font-weight:600;line-height:1.2}
.head .by{color:var(--muted);font-size:14px;margin-top:2px}
.summary{font-size:16.5px;margin-top:22px}
.desc{color:var(--muted);margin-top:14px;white-space:pre-line}
.section{margin-top:30px}
.section h2{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
            color:var(--faint);margin-bottom:10px}
.notes{white-space:pre-line;color:var(--text);font-size:14px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px}
.facts dt{color:var(--faint);font-family:var(--mono);font-size:12px;padding-top:2px}
.panel{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:18px;box-shadow:var(--shadow);
       position:sticky;top:calc(var(--nav-h) + 20px)}
.panel .price{font-size:20px;font-weight:600}
.panel p{color:var(--muted);font-size:13.5px;margin-top:8px}
.panel .how{font-family:var(--mono);font-size:12.5px;color:var(--text)}
.btn{display:flex;justify-content:center;align-items:center;height:40px;border-radius:8px;margin-top:14px;
     background:var(--accent);color:#fff;font-weight:500;font-size:14px;border:0}
.btn:hover{background:var(--accent-dim);text-decoration:none}
.disclose{margin-top:14px;padding:12px;border-radius:8px;background:var(--warn-bg);border:1px solid var(--warn-bd);
          color:var(--text);font-size:13px}
.disclose b{color:var(--warn)}

/* ── foot ── */
.foot{border-top:1px solid var(--border);font-size:12.5px;color:var(--faint)}
.foot-in{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:18px;padding-bottom:22px}
.foot-links{display:flex;gap:16px}
.foot-links a{color:var(--faint)}