/* ============================================================
   WAEW OS — portal design system
   Ethereal glass: OLED ground, mesh light, vantablack glass cards
   sitting in machined trays. Every surface is a nested enclosure.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root{
  /* ground */
  --void:#050505;
  --tray:rgba(255,255,255,.035);
  --core:#0b0b0d;
  --core-hi:rgba(255,255,255,.055);

  /* hairlines — never a 1px solid grey */
  --edge:rgba(255,255,255,.08);
  --edge-soft:rgba(255,255,255,.045);
  --edge-lit:rgba(255,255,255,.16);

  /* ink */
  --ink:#f4f4f5;
  --ink-2:rgba(244,244,245,.62);
  --ink-3:rgba(244,244,245,.38);
  --ink-4:rgba(244,244,245,.22);

  /* one accent, spent carefully */
  --lum:#8ef0c4;
  --lum-dim:rgba(142,240,196,.14);
  --lum-line:rgba(142,240,196,.32);

  /* semantic, separate from the accent */
  --warn:#f5c26b;
  --warn-dim:rgba(245,194,107,.13);
  --crit:#ff8f8f;
  --crit-dim:rgba(255,143,143,.12);

  --r-shell:2rem;
  --r-core:calc(2rem - .375rem);
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:'Geist','Plus Jakarta Sans',system-ui,sans-serif;
  font-size:15px;
  line-height:1.55;
  font-feature-settings:'ss01','cv05';
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* mesh light — fixed, never inside a scroller */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(48rem 32rem at 12% -8%, rgba(142,240,196,.10), transparent 62%),
    radial-gradient(40rem 30rem at 96% 6%, rgba(126,124,255,.09), transparent 60%),
    radial-gradient(56rem 40rem at 62% 108%, rgba(142,240,196,.05), transparent 66%);
}
/* film grain — fixed pseudo-element only */
body::after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- type */
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.028em;text-wrap:balance}
h1{font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.03}
h2{font-size:clamp(1.4rem,3vw,1.85rem);line-height:1.12}
h3{font-size:1.02rem;letter-spacing:-.014em;font-weight:500}
p{margin:0}
.mono{font-family:'Geist Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.3rem .7rem;border-radius:999px;
  background:var(--tray);border:1px solid var(--edge-soft);
  font-size:10px;text-transform:uppercase;letter-spacing:.2em;font-weight:500;color:var(--ink-3);
}
.eyebrow .dot{width:4px;height:4px;border-radius:50%;background:var(--lum);box-shadow:0 0 8px var(--lum)}

/* ---------------------------------------------------- double-bezel */
.shell{
  background:var(--tray);
  border:1px solid var(--edge-soft);
  border-radius:var(--r-shell);
  padding:.375rem;
}
.core{
  background:var(--core);
  border:1px solid var(--edge);
  border-radius:var(--r-core);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.055);
  padding:1.5rem;
  height:100%;
}
.core.tight{padding:1.1rem 1.25rem}

/* ---------------------------------------------------------- shell */
.frame{position:relative;z-index:2;min-height:100dvh;display:flex;flex-direction:column}

.rail{
  position:fixed;top:1.5rem;left:50%;transform:translateX(-50%);z-index:60;
  width:max-content;max-width:calc(100vw - 2rem);
  background:rgba(10,10,12,.72);backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid var(--edge);border-radius:999px;
  padding:.35rem;display:flex;align-items:center;gap:.2rem;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.9);
}
.rail .brand{
  display:flex;align-items:center;gap:.5rem;padding:.4rem .85rem .4rem .7rem;
  font-weight:600;letter-spacing:-.03em;font-size:.9rem;white-space:nowrap;
}
.rail .brand em{font-style:normal;color:var(--ink-3);font-weight:400}
.rail nav{display:flex;gap:.1rem}
.tab{
  appearance:none;border:0;background:transparent;color:var(--ink-3);
  font:inherit;font-size:.83rem;font-weight:450;
  padding:.5rem .85rem;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:color .5s var(--ease), background .5s var(--ease);
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:rgba(255,255,255,.07);color:var(--ink)}
.tab .pip{
  display:inline-block;margin-left:.4rem;min-width:1.05rem;padding:0 .28rem;
  border-radius:999px;background:var(--crit-dim);color:var(--crit);
  font-size:10px;font-weight:600;line-height:1.05rem;text-align:center;
}
.rail .who{
  display:flex;align-items:center;gap:.5rem;padding:.28rem .3rem .28rem .8rem;
  border-left:1px solid var(--edge-soft);margin-left:.35rem;
}
.avatar{
  width:1.85rem;height:1.85rem;border-radius:999px;flex:0 0 auto;
  background:linear-gradient(145deg,rgba(142,240,196,.22),rgba(126,124,255,.16));
  border:1px solid var(--edge-lit);
  display:grid;place-items:center;font-size:.66rem;font-weight:600;letter-spacing:.02em;
}

/* burger — morphs to an X */
.burger{display:none;width:2.1rem;height:2.1rem;border:0;background:transparent;cursor:pointer;position:relative}
.burger i{
  position:absolute;left:.45rem;width:1.2rem;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .6s var(--ease), opacity .35s var(--ease);
}
.burger i:nth-child(1){top:.78rem}
.burger i:nth-child(2){top:1.22rem}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(.22rem) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-.22rem) rotate(-45deg)}

.sheet{
  position:fixed;inset:0;z-index:55;display:none;
  background:rgba(5,5,5,.86);backdrop-filter:blur(34px);-webkit-backdrop-filter:blur(34px);
  padding:7rem 1.5rem 2rem;
}
.sheet.on{display:block}
.sheet .tab{
  display:block;width:100%;text-align:left;font-size:1.5rem;font-weight:500;
  letter-spacing:-.03em;padding:.7rem 0;color:var(--ink-2);
  opacity:0;transform:translateY(3rem);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), color .4s var(--ease);
}
.sheet.on .tab{opacity:1;transform:translateY(0)}
.sheet.on .tab:nth-child(1){transition-delay:.06s}
.sheet.on .tab:nth-child(2){transition-delay:.11s}
.sheet.on .tab:nth-child(3){transition-delay:.16s}
.sheet.on .tab:nth-child(4){transition-delay:.21s}
.sheet.on .tab:nth-child(5){transition-delay:.26s}
.sheet.on .tab:nth-child(6){transition-delay:.31s}
.sheet.on .tab:nth-child(7){transition-delay:.36s}

/* ----------------------------------------------------------- page */
main{flex:1;width:100%;max-width:78rem;margin:0 auto;padding:8.5rem 1.5rem 7rem}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2.5rem}
.head .sub{color:var(--ink-3);font-size:.9rem;margin-top:.6rem}

/* ----------------------------------------------------- bento grid */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:.85rem}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}

/* -------------------------------------------------------- metrics */
.metric{display:flex;flex-direction:column;gap:.15rem;justify-content:center;min-height:6.6rem}
.metric .k{font-size:10px;text-transform:uppercase;letter-spacing:.19em;color:var(--ink-3);font-weight:500}
.metric .v{font-size:2.15rem;font-weight:500;letter-spacing:-.045em;line-height:1.05}
.metric .n{font-size:.78rem;color:var(--ink-4)}
.metric.good .v{color:var(--lum)}
.metric.warn .v{color:var(--warn)}
.metric.crit .v{color:var(--crit)}

/* ---------------------------------------------------------- lists */
.rows{display:flex;flex-direction:column;gap:.3rem;margin-top:1rem}
.row{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:.75rem .9rem;border-radius:1rem;
  background:rgba(255,255,255,.018);border:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.row:hover{background:rgba(255,255,255,.045);border-color:var(--edge-soft)}
.row .t{font-size:.9rem;font-weight:450;letter-spacing:-.012em}
.row .s{font-size:.76rem;color:var(--ink-3);margin-top:.12rem}
.row .r{text-align:right;white-space:nowrap}
button.row{appearance:none;font:inherit;color:inherit;cursor:pointer;text-align:left;width:100%}
button.row:active{transform:scale(.993)}

.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.22rem .58rem;border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  background:var(--tray);border:1px solid var(--edge-soft);color:var(--ink-2);
}
.chip.good{background:var(--lum-dim);border-color:var(--lum-line);color:var(--lum)}
.chip.warn{background:var(--warn-dim);border-color:rgba(245,194,107,.3);color:var(--warn)}
.chip.crit{background:var(--crit-dim);border-color:rgba(255,143,143,.28);color:var(--crit)}

/* --------------------------------------------------------- button */
.btn{
  appearance:none;cursor:pointer;font:inherit;font-size:.85rem;font-weight:500;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.62rem .62rem .62rem 1.15rem;border-radius:999px;
  background:rgba(255,255,255,.055);border:1px solid var(--edge);color:var(--ink);
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .35s var(--ease);
}
.btn .cap{
  width:1.85rem;height:1.85rem;border-radius:999px;flex:0 0 auto;
  background:rgba(255,255,255,.08);display:grid;place-items:center;
  transition:transform .55s var(--ease), background .5s var(--ease);
}
.btn:hover{background:rgba(255,255,255,.09);border-color:var(--edge-lit)}
.btn:hover .cap{transform:translate(3px,-1px) scale(1.06);background:rgba(255,255,255,.14)}
.btn:active{transform:scale(.978)}
.btn.primary{background:var(--lum);border-color:transparent;color:#04150d}
.btn.primary .cap{background:rgba(4,21,13,.14)}
.btn.primary:hover{background:#a4f5d2}
.btn.plain{padding:.55rem 1rem;background:transparent}
.btn.plain:hover{background:rgba(255,255,255,.05)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------- inputs */
.field{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--edge);
  border-radius:1rem;padding:.8rem 1rem;color:var(--ink);font:inherit;font-size:.88rem;
  transition:border-color .5s var(--ease), background .5s var(--ease);
}
.field:focus{outline:none;border-color:var(--lum-line);background:rgba(255,255,255,.05)}
.field::placeholder{color:var(--ink-4)}
textarea.field{resize:vertical;min-height:5.5rem;line-height:1.5}
label.lab{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.17em;color:var(--ink-3);margin-bottom:.5rem;font-weight:500}

/* read-only marker for talent */
.locked{position:relative}
.locked::after{
  content:'View only';position:absolute;top:.55rem;right:.75rem;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);
}

/* --------------------------------------------------------- toggle */
.tog{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--edge-soft)}
.tog:last-child{border-bottom:0}
.tog .m{font-size:.87rem}
.tog .d{font-size:.75rem;color:var(--ink-3);margin-top:.1rem;max-width:34ch}
.sw{
  appearance:none;width:2.6rem;height:1.5rem;border-radius:999px;flex:0 0 auto;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid var(--edge);position:relative;
  transition:background .5s var(--ease), border-color .5s var(--ease);
}
.sw::after{
  content:'';position:absolute;top:2px;left:2px;width:1.1rem;height:1.1rem;border-radius:999px;
  background:var(--ink-2);transition:transform .5s var(--ease), background .5s var(--ease);
}
.sw:checked{background:var(--lum-dim);border-color:var(--lum-line)}
.sw:checked::after{transform:translateX(1.08rem);background:var(--lum)}
.sw[disabled]{opacity:.35;cursor:not-allowed}

/* --------------------------------------------------------- upload */
.drop{
  border:1px dashed var(--edge-lit);border-radius:1.25rem;padding:1.6rem;text-align:center;
  background:rgba(255,255,255,.018);cursor:pointer;
  transition:border-color .5s var(--ease), background .5s var(--ease);
}
.drop:hover,.drop.over{border-color:var(--lum-line);background:var(--lum-dim)}
.drop .h{font-size:.88rem}
.drop .p{font-size:.75rem;color:var(--ink-3);margin-top:.25rem}

/* ---------------------------------------------------------- misc */
.empty{padding:2.5rem 1rem;text-align:center;color:var(--ink-3);font-size:.86rem}
.divide{height:1px;background:var(--edge-soft);margin:1.4rem 0}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translate(-50%,2rem);z-index:80;
  background:rgba(12,12,14,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--edge-lit);border-radius:999px;padding:.7rem 1.3rem;font-size:.83rem;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* --------------------------------------------------- scroll reveal */
.rise{opacity:0;transform:translateY(2.2rem);filter:blur(6px)}
.rise.in{opacity:1;transform:none;filter:none;
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none;filter:none}
}

:focus-visible{outline:2px solid var(--lum-line);outline-offset:3px;border-radius:.5rem}

/* ----------------------------------------------------- responsive */
@media (max-width:900px){
  .c3,.c4,.c5,.c6,.c7,.c8{grid-column:span 6}
}
@media (max-width:768px){
  main{padding:6.5rem 1rem 5rem;max-width:100%}
  .bento{grid-template-columns:1fr;gap:.7rem}
  .c3,.c4,.c5,.c6,.c7,.c8,.c12{grid-column:span 1}
  .rail{left:1rem;right:1rem;transform:none;width:auto;max-width:none;justify-content:space-between}
  .rail nav{display:none}
  .rail .who{border-left:0;margin-left:0;padding-left:.3rem}
  .burger{display:block}
  .core{padding:1.15rem}
  .metric{min-height:5rem}
  .metric .v{font-size:1.75rem}
}