/* Nexus look: dark and laid out like Leon's Nexus, built from the client's own colours.
   Only applies when <html data-look="nexus">. The --c-* values are the client's fixed brand colours. */
html[data-look=nexus]{
  color-scheme:dark;
  /* Dark surfaces tinted with the client's ink, borders tinted with their accent */
  --x-deep:color-mix(in srgb,var(--c-ink) 32%,#050608);
  --x-bg:color-mix(in srgb,var(--c-ink) 45%,#07090c);
  --x-panel:color-mix(in srgb,var(--c-ink) 66%,#0b0d10);
  --x-raised:color-mix(in srgb,var(--c-ink) 85%,#14171b);
  --x-border:color-mix(in srgb,var(--c-accent) 20%,var(--x-panel));
  --x-border-bright:color-mix(in srgb,var(--c-accent) 48%,var(--x-panel));
  --x-accent:color-mix(in srgb,var(--c-accent) 80%,#fff);
  --x-gold:color-mix(in srgb,var(--c-gold) 75%,#fff);
  /* The shared colour names now mean their dark versions, so every page follows */
  --bg:var(--x-bg);
  --panel:var(--x-panel);
  --soft:var(--x-raised);
  --soft-deep:var(--x-border);
  --ink:color-mix(in srgb,var(--c-bg) 94%,var(--c-accent));
  --muted:color-mix(in srgb,var(--c-bg) 66%,var(--x-panel));
  --accent:var(--c-accent);
  --accent-deep:var(--x-accent);
  --gold:var(--x-gold);
  --good:color-mix(in srgb,var(--c-good) 50%,#9ff0c4);
  --warn:color-mix(in srgb,var(--c-warn) 45%,#ffd38a);
  --bad:color-mix(in srgb,var(--c-bad) 45%,#ffb0a8);
  --on-accent:color-mix(in srgb,var(--c-ink) 60%,#000);
}
html[data-look=nexus] body{
  font-size:14px;
  background-color:var(--x-bg);
  background-image:linear-gradient(color-mix(in srgb,var(--x-border) 35%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--x-border) 35%,transparent) 1px,transparent 1px);
  background-size:48px 48px;background-attachment:fixed;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
html[data-look=nexus] a{color:var(--x-accent)}
html[data-look=nexus] :focus-visible{outline:2px solid var(--x-accent)}

/* Layout: slim sidebar, top bar, page */
@media (min-width:821px){
  html[data-look=nexus] .shell{grid-template-columns:220px 1fr;grid-template-rows:auto 1fr}
  html[data-look=nexus] .side{grid-row:1 / span 2;grid-column:1}
  html[data-look=nexus] .topbar{grid-row:1;grid-column:2}
  html[data-look=nexus] .shell > .main{grid-row:2;grid-column:2;max-width:none;padding:18px 24px 48px}
}
html[data-look=nexus] .side{background:var(--x-deep);border-right:1px solid var(--x-border);padding:0 0 14px;gap:0}
html[data-look=nexus] .side .brand{padding:14px 14px 12px;margin-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--x-border) 60%,transparent)}
html[data-look=nexus] .brand img{width:38px;height:38px;border-radius:8px;box-shadow:0 0 0 1px var(--x-border)}
html[data-look=nexus] .brand b{font:700 15px/1.1 var(--body-font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
html[data-look=nexus] .brand small{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--x-gold)}
html[data-look=nexus] .side .nav{padding:2px 8px}
html[data-look=nexus] .side .nav.stack{gap:2px}
html[data-look=nexus] .side .nav.stack::before{content:"Hub";display:block;padding:6px 10px 4px;font-size:12px;font-weight:600;color:var(--x-gold)}
html[data-look=nexus] .nav a{position:relative;gap:10px;min-height:36px;padding:6px 10px;border-radius:6px;font-size:14px;color:var(--muted)}
html[data-look=nexus] .nav a:hover{background:var(--x-raised);color:var(--ink)}
html[data-look=nexus] .nav a[aria-current=page]{background:color-mix(in srgb,var(--c-accent) 16%,transparent);color:var(--x-accent);box-shadow:inset 3px 0 0 var(--c-accent)}
html[data-look=nexus] .nav svg{width:18px;height:18px}
html[data-look=nexus] .side p.small{padding:0 18px !important;font-size:12px}

html[data-look=nexus] .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:5;height:58px;padding:0 24px;background:color-mix(in srgb,var(--x-deep) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--x-border)}
html[data-look=nexus] .tb-where{flex:1;min-width:0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look=nexus] .tb-where b{color:var(--ink);font-weight:600}
html[data-look=nexus] .tb-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;background:var(--x-panel);border:1px solid var(--x-border);border-radius:8px;color:var(--x-gold);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap}
html[data-look=nexus] a.tb-chip{color:var(--x-accent)}
html[data-look=nexus] a.tb-chip:hover{border-color:var(--x-border-bright);color:var(--ink)}
html[data-look=nexus] .tb-chip .ic svg{width:16px;height:16px}
html[data-look=nexus] .tb-user{color:var(--ink)}
html[data-look=nexus] .admin-bar{color:var(--on-accent)}

/* Page header with a glowing icon tile, like Nexus */
html[data-look=nexus] .top{align-items:center;margin-bottom:16px}
html[data-look=nexus] .ph-icon{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:10px;border:1px solid color-mix(in srgb,var(--c-accent) 55%,transparent);background:color-mix(in srgb,var(--c-accent) 12%,transparent);color:var(--x-accent);box-shadow:0 0 14px color-mix(in srgb,var(--c-accent) 22%,transparent)}
html[data-look=nexus] .ph-icon .ic svg{width:24px;height:24px}
html[data-look=nexus] h1{font-size:clamp(24px,3vw,28px);font-weight:600}
html[data-look=nexus] .top p{font-size:14px}

/* Panels */
html[data-look=nexus] .card,html[data-look=nexus] .tile,html[data-look=nexus] .product{border-radius:8px;box-shadow:none;border:1px solid var(--x-border)}
html[data-look=nexus] .card{padding:16px 20px 20px}
html[data-look=nexus] .card > h2,html[data-look=nexus] .card > h3{font:600 13px/1.3 var(--body-font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
html[data-look=nexus] .card > h2 a,html[data-look=nexus] .card > h3 a{text-transform:none;letter-spacing:0;font-weight:500}
html[data-look=nexus] .card.soft{background:var(--x-raised);border-color:var(--x-border)}
html[data-look=nexus] .card.accent{border-left:3px solid var(--c-accent)}
html[data-look=nexus] .list > li{border-top-color:color-mix(in srgb,var(--x-border) 70%,transparent)}
html[data-look=nexus] .tile span{text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:600}
html[data-look=nexus] .tile b{font-family:var(--body-font);font-weight:600}
html[data-look=nexus] .datebox{border-radius:8px;border:1px solid var(--x-border)}
html[data-look=nexus] .product:hover{border-color:var(--x-border-bright)}
html[data-look=nexus] .thumb,html[data-look=nexus] .mini,html[data-look=nexus] .fthumb{border-radius:6px}

/* Tags */
html[data-look=nexus] .chip{border-radius:5px;padding:2px 8px;background:var(--x-raised);color:var(--ink);border:1px solid var(--x-border)}
html[data-look=nexus] .chip.good{background:color-mix(in srgb,var(--good) 14%,transparent);border-color:color-mix(in srgb,var(--good) 45%,transparent);color:var(--good)}
html[data-look=nexus] .chip.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);border-color:color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad)}
html[data-look=nexus] .chip.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn)}
html[data-look=nexus] .chip.gold{background:color-mix(in srgb,var(--x-gold) 14%,transparent);border-color:color-mix(in srgb,var(--x-gold) 45%,transparent);color:var(--x-gold)}
html[data-look=nexus] .chip.accent{background:color-mix(in srgb,var(--c-accent) 18%,transparent);border-color:color-mix(in srgb,var(--c-accent) 55%,transparent);color:var(--x-accent)}

/* Buttons and forms */
html[data-look=nexus] .btn{border-radius:6px;min-height:38px;padding:7px 14px;background:var(--c-accent);color:var(--on-accent)}
html[data-look=nexus] .btn:hover{background:var(--x-accent);color:var(--on-accent)}
html[data-look=nexus] .btn.ghost{background:transparent;color:var(--ink);border-color:var(--x-border)}
html[data-look=nexus] .btn.ghost:hover{background:var(--x-raised);border-color:var(--x-border-bright)}
html[data-look=nexus] .btn.danger{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
html[data-look=nexus] .btn.small{min-height:32px}
html[data-look=nexus] .icon-btn{border-radius:6px}
html[data-look=nexus] .seg{border-radius:8px;background:var(--x-deep);border:1px solid var(--x-border)}
html[data-look=nexus] .seg button{border-radius:6px;color:var(--muted)}
html[data-look=nexus] .seg button[aria-pressed=true]{background:color-mix(in srgb,var(--c-accent) 18%,transparent);color:var(--x-accent);box-shadow:none}
html[data-look=nexus] input[type=text],html[data-look=nexus] input[type=email],html[data-look=nexus] input[type=password],html[data-look=nexus] input[type=date],html[data-look=nexus] input[type=time],html[data-look=nexus] input[type=number],html[data-look=nexus] select,html[data-look=nexus] textarea{background:var(--x-deep);border-color:var(--x-border);border-radius:8px;color:var(--ink)}
html[data-look=nexus] .error{background:color-mix(in srgb,var(--bad) 12%,transparent);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);color:var(--bad);border-radius:8px}
html[data-look=nexus] .note{border-radius:8px;border:1px solid var(--x-border)}
html[data-look=nexus] .drop.over{background:color-mix(in srgb,var(--c-accent) 10%,transparent)}

/* Dialogs, messages, sign in, toast */
html[data-look=nexus] dialog{border-radius:10px;border:1px solid var(--x-border-bright);background:var(--x-panel);box-shadow:0 30px 80px rgba(0,0,0,.6)}
html[data-look=nexus] dialog::backdrop{background:rgba(0,0,0,.6)}
html[data-look=nexus] .msg{border-radius:8px}
html[data-look=nexus] .msg.client{background:color-mix(in srgb,var(--c-accent) 16%,var(--x-panel))}
html[data-look=nexus] .msg.provider{background:var(--x-raised);border-color:var(--x-border)}
html[data-look=nexus] .auth .card{border-radius:10px;border-color:var(--x-border-bright);box-shadow:0 0 40px color-mix(in srgb,var(--c-accent) 12%,transparent)}
html[data-look=nexus] .auth .logo{border-radius:14px}
html[data-look=nexus] .toast{background:var(--x-raised);color:var(--ink);border:1px solid var(--x-border-bright);border-radius:8px}

/* Phones: dark header and tab bar */
@media (max-width:820px){
  html[data-look=nexus] .mobile-head{background:color-mix(in srgb,var(--x-deep) 94%,transparent);border-bottom-color:var(--x-border)}
  html[data-look=nexus] .mobile-head .brand img{width:34px;height:34px}
  html[data-look=nexus] .tabbar{background:var(--x-deep);border-top-color:var(--x-border)}
  html[data-look=nexus] .tabbar a[aria-current=page]{color:var(--x-accent)}
  html[data-look=nexus] .tabbar a[aria-current=page] svg{stroke:var(--x-accent)}
  html[data-look=nexus] .topbar{display:none}
  html[data-look=nexus] .ph-icon{width:42px;height:42px}
  html[data-look=nexus] .card{padding:14px 16px 16px}
}
@media (max-width:639px){html[data-look=nexus] .ph-icon{display:none}}

/* Second style (Mimi Joi's "Yard Style"): its colours come from client.php; this adds the neon glow from the website */
html[data-style=alt] .alt-toggle{color:var(--x-gold);border-color:var(--x-gold)}
html[data-style=alt] .alt-toggle:hover{box-shadow:0 0 14px color-mix(in srgb,var(--x-gold) 40%,transparent)}
html[data-style=alt] .btn:not(.ghost):not(.danger){background:transparent;color:var(--c-accent);border-color:var(--c-accent);box-shadow:0 0 18px color-mix(in srgb,var(--c-accent) 30%,transparent)}
html[data-style=alt] .btn:not(.ghost):not(.danger):hover{background:color-mix(in srgb,var(--c-accent) 12%,transparent);color:var(--c-accent)}
html[data-style=alt] h1{color:var(--ink)}
html[data-style=alt] .card > h2,html[data-style=alt] .card > h3{color:var(--x-gold)}
html[data-style=alt] .ph-icon{box-shadow:0 0 18px color-mix(in srgb,var(--c-accent) 35%,transparent)}
html[data-style=alt] .side .nav.stack::before{color:var(--c-accent)}
html[data-style=alt] .auth .card{box-shadow:0 0 40px color-mix(in srgb,var(--c-accent) 18%,transparent)}