/* ============================================================
   SIDEBAR / NAVIGATION — LIGHTWEIGHT PRO
============================================================ */

.grp{
  padding:18px 12px 8px;
  font:700 10px/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(28,28,28,.42);
  user-select:none;
}

.side-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.side-nav button{
  display:flex;
  align-items:center;
  gap:10px;

  width:100%;
  min-height:42px;

  padding:7px 9px;

  border:1px solid transparent;
  border-radius:8px;

  background:transparent;
  color:var(--ink-83);

  text-align:left;

  transition:
    background-color .14s var(--ease),
    border-color .14s var(--ease),
    color .14s var(--ease),
    transform .1s ease;

  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.side-nav button:hover{
  background:var(--ink-04);
  border-color:var(--cream-3);
}

.side-nav button.on{
  background:var(--cream-2);
  border-color:var(--cream-3);
  color:var(--ink);
}

.side-nav button:active{
  transform:scale(.992);
}

.side-nav button:focus-visible{
  outline:0;
  border-color:rgba(28,28,28,.25);
  box-shadow:0 0 0 3px rgba(28,28,28,.06);
}


/* ============================================================
   NAV ICON
============================================================ */

.nav-icon{
  display:grid;
  place-items:center;

  flex:0 0 27px;

  width:27px;
  height:27px;

  border-radius:7px;

  background:rgba(28,28,28,.045);
  color:var(--ink-83);

  font:600 11px/1 var(--mono);

  transition:
    background-color .14s var(--ease),
    color .14s var(--ease);
}

.side-nav button:hover .nav-icon{
  background:rgba(28,28,28,.065);
}

.side-nav button.on .nav-icon{
  background:var(--ink);
  color:var(--cream-2);
}


/* ============================================================
   NAV COPY
============================================================ */

.nav-copy{
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  gap:2px;
}

.nav-copy b{
  display:block;

  min-width:0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:12px;
  font-weight:650;
  line-height:1.25;
}

.nav-copy small{
  display:block;

  min-width:0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--muted);

  font-size:10px;
  font-weight:400;
  line-height:1.25;
}


/* ============================================================
   KEYBOARD SHORTCUTS
============================================================ */

.side-nav kbd,
.side-search kbd,
.tool-pill kbd,
.cmd kbd{
  flex:0 0 auto;

  padding:4px 5px;

  border:1px solid var(--cream-3);
  border-bottom-color:rgba(28,28,28,.16);
  border-radius:5px;

  background:var(--cream-2);

  color:rgba(28,28,28,.45);

  font:600 9px/1 var(--mono);

  white-space:nowrap;
}


/* ============================================================
   SIDEBAR SEARCH
============================================================ */

.side-search{
  display:flex;
  align-items:center;
  gap:8px;

  min-height:38px;

  padding:7px 9px;
  margin:2px 2px 7px;

  border:1px solid var(--cream-3);
  border-radius:8px;

  background:var(--cream-2);

  transition:
    border-color .14s var(--ease),
    background-color .14s var(--ease);
}

.side-search:focus-within{
  border-color:rgba(28,28,28,.22);
  background:var(--cream);
}

.side-search input{
  min-width:0;
  width:100%;

  padding:0;

  border:0;
  outline:0;

  background:transparent;

  color:var(--ink);

  font-size:12px;
  line-height:1.4;
}

.side-search input::placeholder{
  color:rgba(28,28,28,.4);
}


/* ============================================================
   ICON BUTTON
============================================================ */

.icon-btn{
  display:grid;
  place-items:center;

  flex:0 0 auto;

  width:36px;
  height:36px;

  padding:0;

  border:1px solid var(--cream-3);
  border-radius:8px;

  background:var(--cream-2);
  color:var(--ink);

  transition:
    background-color .14s var(--ease),
    border-color .14s var(--ease),
    transform .1s ease;
}

.icon-btn:hover{
  background:var(--ink-04);
  border-color:rgba(28,28,28,.12);
}

.icon-btn:active{
  transform:scale(.97);
}


/* ============================================================
   SIDEBAR COLLAPSE
============================================================ */

.side-collapse{
  display:grid;
  place-items:center;

  width:30px;
  height:30px;

  padding:0;

  border:0;
  border-radius:7px;

  background:transparent;

  transition:
    background-color .14s var(--ease),
    transform .1s ease;
}

.side-collapse:hover{
  background:var(--ink-04);
}

.side-collapse:active{
  transform:scale(.96);
}


/* ============================================================
   BREADCRUMB
============================================================ */

.crumb{
  display:flex;
  align-items:center;
  gap:6px;

  min-width:0;

  color:var(--muted);

  font:600 10px/1 var(--mono);
  letter-spacing:.06em;
}

.crumb-sep{
  color:rgba(28,28,28,.25);
}

.t{
  font-size:12px;
  font-weight:650;
}


/* ============================================================
   BUTTON / TOOL PILL
============================================================ */

.tool-pill,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  min-height:36px;

  padding:14px 8px;

  border:1px solid rgba(28,28,28,.34);
  border-radius:var(--pill);

  background:transparent;
  color:var(--ink);

  font-size:11px;
  font-weight:600;
  line-height:1;

  white-space:nowrap;

  transition:
    background-color .14s var(--ease),
    border-color .14s var(--ease),
    opacity .14s var(--ease),
    transform .1s ease;

  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.tool-pill:hover,
.btn:hover{
  background:var(--ink-04);
  border-color:rgba(28,28,28,.45);
}

.btn-p{
  background:var(--ink);
  border-color:var(--ink);

  color:var(--cream-2);
}

.btn-p:hover{
  background:var(--ink);
  border-color:var(--ink);
  opacity:.9;
}

.btn:active,
.tool-pill:active{
  transform:scale(.985);
  opacity:.84;
}

.btn:focus-visible,
.tool-pill:focus-visible,
.icon-btn:focus-visible,
.side-collapse:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(28,28,28,.07);
}


/* ============================================================
   STATUS / CHIP / KEYWORD
============================================================ */

.stat,
.chip,
.kw{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:25px;

  padding:5px 10px;

  border:1px solid var(--cream-3);
  border-radius:var(--pill);

  background:var(--cream-2);
  color:var(--muted);

  font-size:10px;
  font-weight:500;
  line-height:1;

  white-space:nowrap;
}

.stat.ok,
.chip.on,
.kw.on{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--cream-2);
}


/* ============================================================
   EYEBROW
============================================================ */

.eyebrow{
  display:block;

  margin-bottom:9px;

  color:var(--muted);

  font:600 10px/1 var(--mono);
  letter-spacing:.11em;
  text-transform:uppercase;
}


/* ============================================================
   WORKSPACE METRICS
============================================================ */

.workspace-metrics{
  display:flex;
  align-items:stretch;
  gap:8px;
}

.workspace-metrics span{
  min-width:96px;

  padding:11px 13px;

  border:1px solid var(--cream-3);
  border-radius:10px;

  background:rgba(252,251,248,.72);
}

.workspace-metrics b{
  display:block;

  margin-bottom:2px;

  color:var(--ink);

  font-size:19px;
  font-weight:650;
  line-height:1;

  letter-spacing:-.35px;
}

.workspace-metrics small,
.mini-health small{
  display:block;

  color:var(--muted);

  font-size:10px;
  line-height:1.35;
}


/* ============================================================
   MINI HEALTH
============================================================ */

.mini-health{
  display:flex;
  align-items:center;
  gap:8px;

  min-width:0;
}

.mini-health b{
  font-size:10px;
  font-weight:650;
}

.live-dot{
  flex:0 0 auto;

  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--success);
}


/* ============================================================
   TABLET
============================================================ */

@media(max-width:960px){

  .side-nav button{
    min-height:44px;
  }

  .nav-icon{
    width:28px;
    height:28px;
    flex-basis:28px;
  }

  .side-search{
    min-height:40px;
  }

  .workspace-metrics{
    flex-wrap:wrap;
  }

  .workspace-metrics span{
    flex:1 1 96px;
  }
}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width:640px){

  .grp{
    padding:14px 10px 6px;
    font-size:9px;
  }

  .side-nav{
    gap:3px;
  }

  .side-nav button{
    min-height:46px;
    padding:8px 9px;
    border-radius:8px;
  }

  .nav-icon{
    width:29px;
    height:29px;
    flex-basis:29px;
  }

  .nav-copy b{
    font-size:12px;
  }

  .nav-copy small{
    font-size:10px;
  }

  .side-nav kbd{
    display:none;
  }

  .side-search{
    margin-bottom:8px;
  }

  .side-search input{
    font-size:16px;
  }

  .icon-btn{
    width:38px;
    height:38px;
  }

  .tool-pill,
  .btn{
    min-height:38px;
    padding-inline:12px;
  }

  .stat,
  .chip,
  .kw{
    min-height:26px;
    padding:5px 9px;
  }

  .workspace-metrics{
    display:none;
  }
}


/* ============================================================
   SMALL PHONE
============================================================ */

@media(max-width:420px){

  .side-nav button{
    min-height:45px;
  }

  .nav-copy small{
    max-width:180px;
  }

  .tool-pill,
  .btn{
    min-height:40px;
  }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media(prefers-reduced-motion:reduce){

  .side-nav button,
  .nav-icon,
  .side-search,
  .icon-btn,
  .side-collapse,
  .tool-pill,
  .btn{
    transition:none;
  }
}