/* ==========================================================================
   THE GENESYS - reserved-area rail
   Design: "Nuova proposta grafica.dc.html" -> Turn 6a, the side menu shown on
   every reserved-area screen.

   ⚠️ EXTRACTED FROM reserved.css, and scoped to `.gns-rail` rather than to a
   screen. The rail markup (template-parts/reserved-nav.php) is now rendered on
   BOTH the forked screens (overview, orders) and the twelve restyled
   sub-pages, where it is injected as the first child of the parent's
   `.main-content-container`.

   This is the card.css lesson again: a stylesheet has to follow its MARKUP,
   not the screen it first appeared on. Leaving these rules scoped to
   `.gns-reserved` would have rendered the rail unstyled everywhere else.

   Layout is deliberately NOT here - the two hosts place the rail differently
   (a grid column in reserved.css, a spanning grid cell in
   reserved-pages.css). This file is the rail's own appearance only.
   ========================================================================== */

.gns-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-right: 1px solid var(--gns-border-faint);
}

/* ------------------------------------------------------------ user block -- */

.gns-rail__me {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 12px;
}
.gns-rail__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gns-border-strong);
  flex: 0 0 42px;
}
.gns-rail__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gns-rail__hello {
  font-size: 14px;
  font-weight: 700;
  color: var(--gns-text);
}
.gns-rail__email {
  margin-top: 2px;
  font-size: 11px;
  color: var(--gns-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- items -- */

.gns-rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gns-rail__item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--gns-secondary-2) !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.gns-rail__item:hover {
  background: var(--gns-cyan-tint);
  color: var(--gns-text) !important;
}
.gns-rail__item.is-active {
  background: var(--gns-cyan-tint-2);
  border-color: var(--gns-border-cyan);
  color: var(--gns-text) !important;
  font-weight: 700;
}

/*
 * The marker. The canvas gives each item its OWN shape - a rounded square for
 * Panoramica and Ordini, a circle for Stampe, and a conic-gradient seal for
 * Certificati - keyed to what the row means. That mapping needs per-page
 * metadata this install does not carry (the rail is built from whatever child
 * pages exist), so one shape is used throughout rather than guessing which row
 * deserves which. Documented as a known deviation.
 */
.gns-rail__dot {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1.5px solid var(--gns-muted);
  border-radius: 4px;
  box-sizing: border-box;
}
.gns-rail__item.is-active .gns-rail__dot {
  border: 0;
  background: var(--gns-gradient);
}


/* ---------------------------------------------------------------- groups -- */
/*
 * The canvas separates its CREATOR STUDIO block with a mono label over a
 * hairline; the same treatment carries ACCOUNT and SUPPORT. These are <li>
 * inside the single rail list (see template-parts/reserved-nav.php on why it
 * is one list), so they are reset out of the list flow and given their own
 * rhythm.
 */
/*
 * ⚠️ Kept deliberately tight. At 14px margin + 14px padding + 28px box these
 * cost 48px EACH - 144px across three groups - which pushed an 11-item rail to
 * 727px against 270px of actual page content and made the whole reserved area
 * feel like it scrolled for the sake of its own navigation. A divider only has
 * to be legible, not spacious.
 */
.gns-rail__group {
  list-style: none;
  margin: 9px 0 3px;
  padding: 9px 12px 0;
  border-top: 1px solid var(--gns-border-faint);
  font: 500 9px var(--gns-font-mono);
  line-height: 1.2;
  letter-spacing: .16em;
  color: var(--gns-muted);
}
/* The first group carries no label, so no divider hangs above the list. */
.gns-rail__list > .gns-rail__group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ============================================================== the strip == */
/*
 * Under 900px the rail loses its column and becomes a strip above the content.
 * Both hosts already turned the list into a flex ROW there (see the media
 * queries in reserved.css and reserved-pages.css); what they could not fix is
 * how the row LOOKED, which is this file's job.
 *
 * Measured on a 440px phone before this: the fifteen items wrapped over six
 * rows, the rail stood 357px tall, and the page's own heading did not start
 * until y=464 - the whole first half-screen was navigation.
 *
 * ⚠️ THE DOT GOES. `.gns-rail__dot` is a 15px rounded square with a 1.5px
 * border. Down the side of a column it reads as a bullet; repeated fifteen
 * times beside wrapped labels it reads as a form of unchecked CHECKBOXES, which
 * is exactly what the reserved area looked like on a phone. A chip strip marks
 * the current item with the chip itself and needs no per-row marker.
 */
@media (max-width: 899px) {
  .gns-rail {
    gap: 0;
    padding: 14px 0 0;
  }

  /* One row that scrolls, rather than six that stack. The scrollbar is hidden
     because the fade at the trailing edge is the affordance. */
  .gns-rail__list {
    gap: 8px;
    min-width: 0;
    padding: 2px 0 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  }
  .gns-rail__list::-webkit-scrollbar { display: none; }

  /* Group labels organise a COLUMN. In a single scrolling row they would sit
     between chips as stray words, so the strip drops them - the grouping
     survives as the order the chips appear in. */
  .gns-rail__group { display: none; }

  .gns-rail__item {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 15px;
    border-color: var(--gns-border);
    border-radius: var(--gns-r-pill);
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .gns-rail__dot { display: none; }

  /* The current chip carries the same cyan the column's active row does, so
     the state does not change meaning when the layout does. */
  .gns-rail__item.is-active {
    background: var(--gns-cyan-tint-2);
    border-color: var(--gns-cyan);
    color: var(--gns-text) !important;
  }

  /* The greeting is a header for the strip now, not a row above a column. */
  .gns-rail__me { padding: 0 0 14px; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .gns-rail__list { scroll-behavior: auto; }
}