/* ============================================================
   NAV — the sidebar menu. Figma 74:10208
   ------------------------------------------------------------
       <nav class="ice-nav" data-panel>
         <a class="ice-nav-item" data-active>
           <i data-icon="house"></i>
           <span class="ice-nav-item__label">Digest</span>
           <span class="ice-nav-item__dot"></span>
         </a>
         <a class="ice-nav-item">
           <i data-icon="target"></i>
           <span class="ice-nav-item__label">Radar</span>
           <span class="ice-badge" data-hue="fire">2</span>
         </a>
         <div class="ice-nav-divider"></div>
         <a class="ice-nav-item" data-muted>…</a>
       </nav>

   Hover and active share one fill — the secondary-1 elevation.
   Active adds its inner shadow, an ink semibold label and the dot;
   hover only recolours the row to the link blue.
   ============================================================ */

.ice-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The 300px card the menu sits in. Elevation 3, 6px of padding, so
   the active row's rounded fill never touches the card's edge. */
.ice-nav[data-panel] {
  inline-size: var(--w-300);
  padding: var(--space-6);
  border-radius: var(--radius-16);
  border: var(--border-w) solid;
  border-color: var(--elev-primary-3-border-lit) var(--elev-primary-3-border-lit)
                var(--elev-primary-3-border)     var(--elev-primary-3-border);
  background-image: var(--elev-primary-3-image);
  box-shadow: var(--elev-primary-3-shadow);
  backdrop-filter: blur(var(--elev-primary-3-blur));
  -webkit-backdrop-filter: blur(var(--elev-primary-3-blur));
}

.ice-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-16);

  padding-inline: var(--space-16);
  padding-block:  var(--space-12);
  border-radius: var(--radius-9);

  color: var(--fg-medium);
  font-size: var(--type-h6-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-h6-leading);
  letter-spacing: var(--type-h6-track);
  cursor: pointer;

  transition: background-image var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

/* The icon reads one step quieter than the label at rest, comes up
   to full on hover, and goes solid on the active row. Figma
   74:10565. */
.ice-nav-item > .ice-icon {
  inline-size: var(--icon-l);
  block-size:  var(--icon-l);
  flex-shrink: 0;
  opacity: .5;
  transition: opacity var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.ice-nav-item:hover > .ice-icon { opacity: 1; }

.ice-nav-item__label {
  flex: 1 0 0;
  min-inline-size: 0;
  opacity: .7;
}

/* Hover — the secondary-1 fill, and the row turns link blue. */
.ice-nav-item:hover {
  color: var(--fg-link);
  background-image: var(--elev-secondary-1-image);
}
.ice-nav-item:hover .ice-nav-item__label { opacity: 1; }

/* Active — same fill, pressed into the card by the inner shadow. */
.ice-nav-item[data-active] {
  cursor: default;          /* you are already here — nothing to click */
  color: var(--fg-high);
  font-weight: var(--weight-semibold);
  background-image: var(--elev-secondary-1-image);
  box-shadow: var(--elev-secondary-1-shadow);
  backdrop-filter: blur(var(--elev-secondary-1-blur));
  -webkit-backdrop-filter: blur(var(--elev-secondary-1-blur));
}
.ice-nav-item[data-active] .ice-nav-item__label { opacity: 1; }
.ice-nav-item[data-active] > .ice-icon { color: var(--vivid-blue-800); opacity: 1; }

/* The 8px bead marking the active row. */
.ice-nav-item__dot {
  inline-size: 8px;
  block-size:  8px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-image: radial-gradient(100% 100% at 100% 0%,
    var(--vivid-blue-400), var(--vivid-blue-700));
}

/* Muted — the settings row at the foot of the menu. The whole row is
   dimmed and its icon drops a step, so it reads as an outrigger
   rather than a destination. */
.ice-nav-item[data-muted] { opacity: .7; }
.ice-nav-item[data-muted] > .ice-icon {
  inline-size: var(--icon-m);
  block-size:  var(--icon-m);
  margin-inline: 2px;   /* stays on the 24px column of the rows above */
  opacity: .7;
}
.ice-nav-item[data-muted] .ice-nav-item__label { flex: 0 0 auto; opacity: 1; }

.ice-nav-divider {
  block-size: 2px;
  border-radius: var(--radius-full);
  background-color: var(--accent);
  opacity: .3;
  margin-block: var(--space-12);
  margin-inline: var(--space-20);
}