/* =========================================================
   shell.css

   The portal's frame in the PrinterVision look: the rail on a faded Signal, light
   rather than Night, so the frame belongs to the same family as the pages
   instead of sitting beside them as a dark block. The rail's markup, handlers,
   collapse and drawer behaviour are concept.css and bridge.css; this sheet only
   repaints it, and loads after both so it wins every tie.

   The hierarchy is carried by Signal: a quiet tint as the ground, ink for the
   items, and Signal for the current page (its text, its icon and the bar on the
   rail's edge). In dark mode the same mixes run over the dark surface and the
   brighter night Signal, so the rail stays a tinted panel there too.
   ========================================================= */

/* ---------- Ground ---------- */
html[data-ui="next"] .rail,
html[data-ui="next"][data-brand="on"] .rail{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--signal) 20%, var(--surface-raised)) 0%,
      color-mix(in srgb, var(--signal) 13%, var(--surface-raised)) 100%);
  border-right:1px solid color-mix(in srgb, var(--signal) 30%, transparent);
  color:var(--ink);
}

/* ---------- Brand ---------- */
html[data-ui="next"] .rail .brand{ color:var(--ink); }

/* ---------- Group labels ---------- */
html[data-ui="next"] .rail .nav-group{ color:color-mix(in srgb, var(--signal) 80%, var(--ink)); }
html[data-ui="next"] .rail.collapsed .nav-group{ background:color-mix(in srgb, var(--signal) 18%, transparent); }

/* ---------- Items ---------- */
html[data-ui="next"] .rail a.item,
html[data-ui="next"] .rail button.item{ color:color-mix(in srgb, var(--ink) 82%, transparent); }
html[data-ui="next"] .rail .item > svg{ color:color-mix(in srgb, var(--signal) 85%, var(--ink)); }
html[data-ui="next"] .rail .item:hover{ background:color-mix(in srgb, var(--signal) 16%, transparent); color:var(--ink); }
html[data-ui="next"] .rail .item:hover > svg{ color:var(--signal); }

/* The current page: a Signal tint, Signal text and icon, and a Signal bar on the
   rail's edge. The bar sits in the item's own left padding gap, so it needs the
   item to be the positioning context. */
html[data-ui="next"] .rail a.item,
html[data-ui="next"] .rail button.item{ position:relative; }
html[data-ui="next"] .rail a.item.active,
html[data-ui="next"] .rail .item.active{
  background:color-mix(in srgb, var(--signal) 28%, var(--surface-raised));
  color:color-mix(in srgb, var(--signal) 70%, var(--ink));
  font-weight:600;
}
html[data-ui="next"] .rail a.item.active > svg,
html[data-ui="next"] .rail .item.active > svg{ color:var(--signal); }
html[data-ui="next"] .rail a.item.active .label{
  /* bridge.css paints the label with the old gradient through background-clip:text. */
  background:none;
  color:color-mix(in srgb, var(--signal) 70%, var(--ink));
  -webkit-text-fill-color:currentColor;
}
html[data-ui="next"] .rail a.item.active::before{
  content:"";
  position:absolute; left:-10px; top:8px; bottom:8px;
  width:3px; border-radius:0 3px 3px 0;
  background:var(--signal);
}
/* A sub-page is a quieter current page: no bar of its own, the parent keeps it. */
html[data-ui="next"] .rail .submenu a.item.active::before{ display:none; }
html[data-ui="next"] .rail .submenu a.item.active{
  background:color-mix(in srgb, var(--signal) 18%, transparent);
}

/* ---------- Submenus ---------- */
html[data-ui="next"] .rail .submenu > .submenu-in{ border-left-color:color-mix(in srgb, var(--signal) 35%, transparent); }
html[data-ui="next"] .rail .chev{ color:color-mix(in srgb, var(--signal) 60%, var(--ink-muted)); }
html[data-ui="next"] .rail .chev:hover{ background:color-mix(in srgb, var(--signal) 10%, transparent); color:var(--signal); }

/* Collapsed: the hover flyout is a raised panel with a Signal edge. */
html[data-ui="next"] .rail.collapsed .nav-item > .submenu{
  background:var(--surface-raised);
  border-color:color-mix(in srgb, var(--signal) 20%, transparent);
}

/* ---------- Counts ---------- */
html[data-ui="next"] .rail .item .count{ background:var(--crit); color:var(--surface-raised); }
html[data-ui="next"] .rail.collapsed .item .count{ color:transparent; box-shadow:0 0 0 2px color-mix(in srgb, var(--signal) 8%, var(--surface-raised)); }

/* ---------- Foot ---------- */
html[data-ui="next"] .rail footer.rail-foot,
html[data-ui="next"] .rail footer.rail-foot small{ color:var(--ink-muted); }

/* ---------- The label mark at the rail's foot, as a watermark in the tint ---------- */
html[data-ui="next"] .rail .pv-bgmark-v1{ fill:color-mix(in srgb, var(--signal) 9%, transparent); }
html[data-ui="next"] .rail .pv-bgmark-v2{ fill:color-mix(in srgb, var(--amber) 22%, transparent); }

/* ---------- Focus ---------- */
html[data-ui="next"] .rail :focus-visible{ outline-color:var(--signal); }