/* ══ ICore Partners Center — styles ═══════════════════════════════
   The tokens (to the end of the first :root[data-theme="dark"] block)
   are Portal/assets/portal.css lines 1-95 verbatim, so the partner site
   and the customer portal are one family. Everything after is this
   site's own, written for its few screens.                         */
/* ══ TOKENS ═══════════════════════════════════════════════════════
   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}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--accent-hi);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
svg{display:block}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;line-height:1.2}
input,select,textarea,button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
#route:focus,#route:focus-visible{outline:none}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ── boot ── */
#boot{min-height:100vh;display:grid;place-items:center;align-content:center;gap:1.1rem;padding:2rem;text-align:center}
#boot-msg{font-family:var(--mono);font-size:.76rem;color:var(--faint);max-width:46ch;line-height:1.7}
#boot-msg.bad{color:var(--bad);font-family:var(--sans);font-size:.9rem}
#boot svg{animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ── buttons & fields ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.85rem;font-weight:500;
  letter-spacing:.03em;padding:.62rem 1.2rem;border-radius:4px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s}
.btn:hover{border-color:var(--faint)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dim);border-color:var(--accent-dim)}
.btn-ghost{background:transparent}
.btn-sm{padding:.38rem .8rem;font-size:.8rem}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.link-btn{background:none;border:0;color:var(--accent-hi);cursor:pointer;padding:0;font-size:inherit}
.link-btn:hover{text-decoration:underline;text-underline-offset:2px}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.field label{font-size:.8rem;font-weight:500;color:var(--muted)}
input[type=email],input[type=password],input[type=text],select{width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:4px;padding:.62rem .75rem;font-size:.92rem;transition:border-color .2s}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--chip-bg)}
.form-msg{display:none;margin-top:1rem;padding:.7rem .85rem;border-radius:4px;font-size:.86rem;line-height:1.55}
.form-msg.show{display:block}
.form-msg.err{background:var(--bad-bg);border:1px solid var(--bad-bd);color:var(--bad)}
.form-msg.ok{background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok)}
.form-msg.info{background:var(--chip-bg);border:1px solid var(--chip-bd);color:var(--chip-tx)}

/* ── brand & theme ── */
.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-txt .name{font-weight:600;font-size:.95rem;letter-spacing:-.01em}
.brand-txt .sub2{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:4px;border:1px solid var(--border);
  background:var(--bg);color:var(--muted);cursor:pointer}
.icon-btn:hover{color:var(--text);border-color:var(--faint)}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .moon{display:none}
}

/* ── sign-in ──
   Its own layout, not the customer portal's split screen: one centred
   card, an accent rule along its top, and nothing that describes what
   is behind it. It stands on the identity's trace board
   (Visual Identity/Foundations/README.md, "Background: the trace board"),
   with Website/assets/site.css's numbers: near layer 380px, far layer
   173px offset 29,61, and the brighter pool behind the card's title.
   Change those there first, or not at all. */
.gate{min-height:100vh;display:flex;flex-direction:column;position:relative;isolation:isolate;background:var(--bg);overflow:hidden}
.gate::before,.gate::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:var(--tile);mask-image:var(--tile);-webkit-mask-repeat:repeat;mask-repeat:repeat}
.gate::before{background:var(--trace-2);-webkit-mask-size:380px 380px;mask-size:380px 380px}
.gate::after{background:var(--trace-3);-webkit-mask-size:173px 173px;mask-size:173px 173px;
  -webkit-mask-position:29px 61px;mask-position:29px 61px}
.gate-theme{position:absolute;top:16px;right:16px;z-index:1}  /* .gate-main is positioned and later in the DOM: without this it sits over the switch and takes its clicks */
.gate-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 16px 24px;position:relative}
/* the pool: the same tile lit brighter, centred on the card's title */
.gate-main::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,160vw);height:760px;
  transform:translate(-50%,-56%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 40%,var(--trace-hero),transparent 72%);
  -webkit-mask-image:var(--tile);mask-image:var(--tile);-webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-size:300px 300px;mask-size:300px 300px}
/* Translucent like the site's cards, so the traces read through it. */
.gate-card{width:100%;max-width:380px;background:var(--glass);border:1px solid var(--border);border-top:3px solid var(--accent);
  border-radius:8px;box-shadow:var(--shadow);padding:30px 28px 26px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.gate-brand{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:22px;margin-bottom:22px;
  border-bottom:1px solid var(--border)}
.gate-brand .lockup{font-size:1.05rem}
.gate-card h1{font-size:1.15rem;margin-bottom:1.1rem}
.gate-alt{margin-top:1.1rem;font-size:.83rem;text-align:center}
.gate-note{margin-top:18px;font-size:.82rem;color:var(--muted);text-align:center}
@media(max-width:420px){.gate-card{padding:24px 18px 20px}}

/* the name, as one line: "ICore" set heavier than "Partner Center" */
.lockup{font-size:.98rem;letter-spacing:-.01em;color:var(--text);white-space:nowrap}
.lockup b{font-weight:600}
.site-foot{padding:18px 16px 22px;text-align:center;font-size:.76rem;letter-spacing:.04em;color:var(--faint)}

/* ── app shell ── */
.topbar{position:sticky;top:0;z-index:10;background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border)}
.topbar .in{max-width:var(--maxw);margin:0 auto;padding:0 16px;height:var(--nav-h);display:flex;align-items:center;gap:16px}
.topbar nav{display:flex;gap:2px;margin-left:12px}
.topbar nav a{padding:.45rem .8rem;border-radius:4px;font-size:.88rem;color:var(--muted)}
.topbar nav a:hover{color:var(--text);text-decoration:none;background:var(--hover)}
.topbar nav a[aria-current=page]{color:var(--text);background:var(--surface-2)}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.who{font-size:.82rem;color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){
  .topbar .in{flex-wrap:wrap;height:auto;padding:10px 16px;gap:8px}
  .topbar nav{order:3;width:100%;margin:0;overflow-x:auto}
  .who{display:none}
}
#app:not([hidden]){min-height:100vh;display:flex;flex-direction:column}
#route{max-width:var(--maxw);width:100%;margin:0 auto;padding:32px 16px 48px;flex:1}
.page-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.page-head h1{font-size:1.6rem}
.page-head .sub{color:var(--muted);font-size:.92rem;margin-top:.35rem;max-width:62ch}

/* ── cards, tiles ── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:14px 16px}
.tile .v{font-size:1.55rem;font-weight:500;letter-spacing:-.02em;margin-top:.2rem}
.tile .d{font-size:.8rem;color:var(--muted);margin-top:.1rem}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:6px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.panel-head h2{font-size:1rem}
.panel-body{padding:18px}
.section{margin-top:22px}
.empty{padding:28px 18px;text-align:center;color:var(--muted);font-size:.9rem}
.note{font-size:.86rem;color:var(--muted);line-height:1.6}

/* ── chips ── */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:500;padding:.2rem .55rem;border-radius:10px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--muted);white-space:nowrap}
.chip.accent{background:var(--chip-bg);border-color:var(--chip-bd);color:var(--chip-tx)}
.chip.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok)}
.chip.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.chip.bad{background:var(--bad-bg);border-color:var(--bad-bd);color:var(--bad)}

/* ── registrations list ── */
.co{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:16px 18px;border-bottom:1px solid var(--border)}
.co:last-child{border-bottom:0}
.co .names{display:flex;flex-direction:column;gap:2px}
.co .nm{font-weight:500}
.co .nm .k{font-family:var(--mono);font-size:.68rem;color:var(--faint);margin-left:8px;letter-spacing:.04em;text-transform:uppercase}
.co .meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:.82rem;color:var(--muted)}
.co .meta .warn{color:var(--warn)}
.co .add{grid-column:1/-1}
.co form.addname{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.co form.addname input{flex:1 1 220px;width:auto}
.co form.addname select{width:auto}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.seg button{border:0;background:var(--bg);color:var(--muted);padding:.4rem .85rem;font-size:.8rem;cursor:pointer;border-right:1px solid var(--border)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--chip-bg);color:var(--chip-tx)}
@media(max-width:560px){.co{grid-template-columns:1fr}.co .meta{text-align:left;align-items:flex-start}}

/* ── register form ── */
.name-rows{display:flex;flex-direction:column;gap:10px}
.name-row{display:grid;grid-template-columns:1fr 150px 34px;gap:8px;align-items:start}
.name-row .state{grid-column:1/-1;font-size:.8rem;margin-top:-4px}
.name-row .state.ok{color:var(--ok)} .name-row .state.bad{color:var(--bad)} .name-row .state.warn{color:var(--warn)}
.name-row .rm{width:34px;height:40px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--muted);cursor:pointer}
.name-row .rm:hover{color:var(--bad);border-color:var(--bad-bd)}
@media(max-width:560px){
  .name-row{grid-template-columns:1fr 34px}
  .name-row input{grid-column:1;grid-row:1}
  .name-row .rm{grid-column:2;grid-row:1}
  .name-row select{grid-column:1/-1;grid-row:2}
  .name-row .state{grid-row:3}
}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px 20px}
.facts .v{margin-top:.15rem;word-break:break-word}
.two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.rules{list-style:none;display:flex;flex-direction:column;gap:.7rem;font-size:.88rem;color:var(--muted)}
.rules b{color:var(--text);font-weight:500}

/* ── toast ── */
#toasts{position:fixed;right:16px;bottom:16px;left:16px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:50;pointer-events:none}
.toast{background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--ok);box-shadow:var(--shadow);border-radius:6px;
  padding:10px 14px;max-width:420px;font-size:.86rem;pointer-events:auto}
.toast.err{border-left-color:var(--bad)}

/* A pinned theme pins the native controls too (selects, scrollbars); with only
   `light dark` on :root they follow the device's mode instead. */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* The trace board's inks and the card glass, per theme: Website/assets/site.css
   values verbatim (portal.css, whose tokens head this file, has no board). */
:root{--trace-2:rgba(40,80,208,.030);--trace-3:rgba(28,56,168,.022);--trace-hero:rgba(40,80,208,.26);
  --glass:rgba(255,255,255,.93)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--trace-2:rgba(104,136,232,.038);--trace-3:rgba(170,188,248,.026);
    --trace-hero:rgba(104,136,232,.32);--glass:rgba(19,22,27,.92)}
}
:root[data-theme="dark"]{--trace-2:rgba(104,136,232,.038);--trace-3:rgba(170,188,248,.026);
  --trace-hero:rgba(104,136,232,.32);--glass:rgba(19,22,27,.92)}