/**
 * TIDY MENUS — TIDY_STANDARD_v1 §6.
 *
 * "Navigation is icon boxes with nested sub-menus, not a column of text links."
 * Two surfaces, one vocabulary: the CRM sidebar (menu--crm.html.twig) and the
 * topbar tool tabs (includes/erpal-topbar.html.twig).
 *
 * RULES THIS FILE IS BOUND BY:
 *  - Every colour is a token from css/erpal-tokens.css, so Night is correct
 *    without a second stylesheet and a tenant skin re-points the whole chrome by
 *    re-declaring tokens (§2.3 — a bare literal is the 08-03 Night bug reshipped).
 *  - The label never goes away above 390px (§6.3). Sizes shrink; text does not
 *    disappear. "Sales Orders" and "Purchase Orders" are not distinguishable by
 *    glyph, and an icon-only rail is a memory test.
 *  - Every interactive target clears 32px (§8.6).
 *
 * Loaded after css/app.css and css/erpal-topbar.css, and deliberately scoped one
 * level deeper (.erpal-tooltabs .erpal-tooltab) than the flat text-link rules it
 * supersedes there, so the older declarations are overridden rather than deleted
 * out of a file the mail app and other shells still share.
 */

/* ============================ shared ============================ */

.erpal-tidymenu__icon {
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

/* ====================== SIDEBAR (menu--crm) ====================== */

.erpal-tidymenu {
  list-style: none;
  margin: 0;
  padding: 6px 10px 10px;
}

/* ---- group: a disclosure whose children nest underneath (§6.4) ---- */
.erpal-tidymenu__group {
  margin-bottom: 2px;
}
.erpal-tidymenu__disclosure > summary.erpal-tidymenu__grouphead {
  align-items: center;
  border-radius: 7px;
  color: var(--erpal-sidebar-ink-dim);
  cursor: pointer;
  display: flex;
  font-size: .68rem;
  font-weight: 700;
  gap: 8px;
  letter-spacing: .8px;
  list-style: none;
  min-height: 32px;
  padding: 6px 8px;
  text-transform: uppercase;
  user-select: none;
}
/* Two markers on one summary is a bug users read as a broken control. */
.erpal-tidymenu__grouphead::-webkit-details-marker {
  display: none;
}
.erpal-tidymenu__grouphead:hover {
  background: var(--erpal-hover-soft);
  color: var(--erpal-sidebar-ink);
}
.erpal-tidymenu__grouphead:focus-visible {
  outline: 2px solid var(--erpal-accent);
  outline-offset: 1px;
}
.erpal-tidymenu__grouptext {
  flex: 1 1 auto;
  min-width: 0;
}
.erpal-tidymenu__caret {
  color: var(--erpal-sidebar-ink-dim);
  flex: 0 0 auto;
  font-size: .7rem;
  transform: rotate(-90deg);
  transition: transform .15s ease;
}
.erpal-tidymenu__disclosure[open] > .erpal-tidymenu__grouphead .erpal-tidymenu__caret {
  transform: rotate(0);
}

/* §6.5 — the ACTIVE TRAIL IS VISIBLE AT BOTH LEVELS. The leaf is marked below;
   this marks the group that contains it, so a user three pages into Publishing
   can still see which tool they are in. */
.erpal-tidymenu__group.is-active-trail > .erpal-tidymenu__disclosure > .erpal-tidymenu__grouphead {
  color: var(--erpal-sidebar-active-ink);
}
.erpal-tidymenu__group.is-active-trail > .erpal-tidymenu__disclosure > .erpal-tidymenu__grouphead .erpal-tidymenu__icon {
  color: var(--erpal-sidebar-active-ink);
}

/* ---- the boxes themselves (§6.1: glyph above label, in one box) ---- */
.erpal-tidymenu__boxes {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  list-style: none;
  margin: 2px 0 8px;
  padding: 0 0 0 2px;
}
.erpal-tidymenu__box {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--erpal-sidebar-ink);
  display: flex;
  flex-direction: column;
  gap: 5px;
  hyphens: auto;
  justify-content: center;
  /* §8.6 — comfortably past the 32px touch minimum. */
  min-height: 58px;
  overflow-wrap: anywhere;
  padding: 8px 4px;
  text-align: center;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.erpal-tidymenu__label {
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.2;
}
.erpal-tidymenu__box:hover {
  background: var(--erpal-hover-soft);
  border-color: var(--erpal-border);
  color: var(--erpal-ink);
}
.erpal-tidymenu__box:focus-visible {
  outline: 2px solid var(--erpal-accent);
  outline-offset: 1px;
}
.erpal-tidymenu__box.is-active {
  background: var(--erpal-sidebar-active-bg);
  border-color: var(--erpal-sidebar-active-ink);
  color: var(--erpal-sidebar-active-ink);
  font-weight: 600;
}

/* A top-level link with no children (e.g. Knowledge) is the same object laid
   out along the row — one vocabulary, not a second kind of button. */
.erpal-tidymenu__solo {
  margin: 2px 0;
}
.erpal-tidymenu__box--wide {
  flex-direction: row;
  gap: 9px;
  justify-content: flex-start;
  min-height: 38px;
  padding: 8px 10px;
  text-align: left;
}
.erpal-tidymenu__box--wide .erpal-tidymenu__label {
  font-size: .78rem;
}

/* ==================== TOPBAR TOOL TABS (§6.1) ==================== */

.erpal-tooltabs {
  align-items: center;
  gap: 3px;
  padding: 4px 0;
}

.erpal-tooltab-wrap {
  align-items: stretch;
  border: 1px solid transparent;
  border-radius: 9px;
  display: inline-flex;
  flex: 0 0 auto;
  position: relative;
  transition: background .12s, border-color .12s;
}
.erpal-tooltab-wrap:hover {
  background: var(--erpal-hover-soft);
  border-color: var(--erpal-border);
}
.erpal-tooltab-wrap.is-active {
  background: var(--erpal-accent-soft);
  border-color: var(--erpal-accent);
}

/* Supersede the flat text-link tab in css/erpal-topbar.css: the underline-style
   bottom border is what made it a text link, so it is reset explicitly rather
   than merely overpainted. */
.erpal-tooltabs .erpal-tooltab {
  align-items: center;
  border-bottom: 0;
  border-top: 0;
  border-radius: 8px;
  color: var(--erpal-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  /* 32px+ target height inside a 56px bar. */
  min-height: 44px;
  padding: 4px 10px;
  text-decoration: none;
}
.erpal-tooltab__icon {
  height: 17px;
  width: 17px;
}
.erpal-tooltab__label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 1;
  white-space: nowrap;
}
.erpal-tooltabs .erpal-tooltab:hover {
  background: transparent;
  color: var(--erpal-text);
}
.erpal-tooltabs .erpal-tooltab.is-active {
  /* ACCENT-COLOURED TEXT ON THE SOFT TINT -> --erpal-accent-on-soft, which is
     the token that exists for exactly this. The bare accent measured 3.93:1 on
     --erpal-accent-soft in Day on every hub page (2026-09-03, d-2026-09-02-055
     re-audit); on-soft measures 5.81 Day and 6.13 Night. Same correction the
     sidebar's active tile already took in 1.4.9. */
  color: var(--erpal-accent-on-soft);
}
.erpal-tooltabs .erpal-tooltab:focus-visible {
  outline: 2px solid var(--erpal-accent);
  outline-offset: -2px;
}

/* ---- the caret that discloses the tab's sub-menu (§6.4) ---- */
.erpal-tooltab__more {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0 8px 8px 0;
  color: var(--erpal-muted);
  cursor: pointer;
  display: flex;
  font-size: .62rem;
  justify-content: center;
  /* Narrow but full-height: the strip is ≥44px tall, so the target clears §8.6
     without stealing width from the label. */
  padding: 0 6px 0 2px;
}
.erpal-tooltab__more:hover,
.erpal-tooltab__more[aria-expanded="true"] {
  color: var(--erpal-accent);
}
.erpal-tooltab__more:focus-visible {
  outline: 2px solid var(--erpal-accent);
  outline-offset: -2px;
}
/* Positioned against the viewport, not the tab, because .erpal-topbar and
   .erpal-tooltabs are scroll containers and would clip it out of sight — see
   the measurement note in js/erpal-topbar.js. js sets top/left on open; these
   are the pre-measurement defaults. */
.erpal-tooltab__menu {
  left: 0;
  position: fixed;
  right: auto;
  top: var(--erpal-topbar-h, 56px);
}
.erpal-dropdown__item--icon {
  align-items: center;
  display: flex;
  gap: 9px;
}
.erpal-dropdown__item--icon.is-active {
  background: var(--erpal-accent-soft);
  color: var(--erpal-accent);
}

/* ============================ narrow ============================
   §6.7 — every target stays reachable. Between 1100px and 768px the tab labels
   are what has to give first, and they give by SHRINKING, not by vanishing:
   below 768px css/erpal-topbar.css hides the tool tabs entirely and the
   off-canvas sidebar (which carries the same destinations as full icon boxes)
   is the single navigation surface. Verified by rendering at 390px, not by
   reading this file. */
@media (max-width: 1100px) {
  .erpal-tooltabs .erpal-tooltab {
    padding: 4px 7px;
  }
  .erpal-tooltab__label {
    font-size: .62rem;
  }
}

@media (max-width: 800px) {
  /* The sidebar slides in over the content, so its boxes get the full width
     back and can breathe rather than squeezing to three columns. */
  .erpal-tidymenu__boxes {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}

/* ==================== SECTION COLOUR-CODING (2026-09-01) ====================
   Troy: "color-code the main tidy-menu tiles on the left sidebar so they are
   easier to tell apart."

   THE RULE THIS OBEYS FIRST: meaning is never colour-alone. The tint lands on
   the ICON and on a 3px left accent bar. The LABEL is untouched — it keeps
   --erpal-sidebar-ink at full text contrast, and the icon keeps its own shape.
   Turn every tint to grey and the rail still reads exactly as it did; colour is
   a sorting aid laid on top of a design that already worked without it. That is
   the same discipline the fleet board's status chips follow (dot + word +
   colour, never colour alone).

   ONE HUE PER SECTION, A SMALL LADDER WITHIN IT. Sections are what the eye
   sorts by, so the family carries the signal: menu--crm.html.twig stamps
   `data-nav-section` on the group and this file maps that slug to one of the
   --erpal-nav-hue-* tokens. Inside a section the tiles step through a 4-value
   hue ladder so neighbours differ without leaving the family — fifteen distinct
   colours in one group would be the noise Troy explicitly asked to avoid, and a
   flat single tint per section makes the tiles harder to tell apart than the
   icons already do.

   NOT A SINGLE COLOUR VALUE LIVES IN THIS FILE. Every tint is
   hsl(<section hue + ladder step> <shared S> <shared L>) with all three parts
   coming from css/erpal-tokens.css, which is what makes Night correct with a
   two-line override instead of a parallel stylesheet — and what let the whole
   palette be measured as a family rather than tile by tile.

   AN UNKNOWN SECTION IS NOT A BUG. A box may rename its groups or ship one this
   palette has never heard of; it falls through to --erpal-nav-hue-default and
   renders a correct, consistent, quiet tile. */

.erpal-tidymenu__group,
.erpal-tidymenu__solo {
  --erpal-nav-hue: var(--erpal-nav-hue-default);
  --erpal-nav-l: var(--erpal-nav-tint-l);
}
[data-nav-section="crm"]         { --erpal-nav-hue: var(--erpal-nav-hue-crm); }
[data-nav-section="sales"]       { --erpal-nav-hue: var(--erpal-nav-hue-sales);
                                   --erpal-nav-l: var(--erpal-nav-l-sales); }
[data-nav-section="catalog"]     { --erpal-nav-hue: var(--erpal-nav-hue-catalog);
                                   --erpal-nav-l: var(--erpal-nav-l-catalog); }
[data-nav-section="events"]      { --erpal-nav-hue: var(--erpal-nav-hue-events); }
[data-nav-section="publishing"]  { --erpal-nav-hue: var(--erpal-nav-hue-publishing); }
[data-nav-section="recruiting"]  { --erpal-nav-hue: var(--erpal-nav-hue-recruiting);
                                   --erpal-nav-l: var(--erpal-nav-l-recruiting); }
[data-nav-section="operations"]  { --erpal-nav-hue: var(--erpal-nav-hue-operations); }
[data-nav-section="reports"]     { --erpal-nav-hue: var(--erpal-nav-hue-reports); }
[data-nav-section="knowledge"]   { --erpal-nav-hue: var(--erpal-nav-hue-knowledge);
                                   --erpal-nav-l: var(--erpal-nav-l-knowledge); }
[data-nav-section="settings"]    { --erpal-nav-hue: var(--erpal-nav-hue-settings); }

/* The ladder. Four steps, repeating: neighbours always differ, and a tile only
   shares a tint with one four places away — far enough apart that the pair
   never sits in the same glance. 11deg keeps every step inside its family. */
.erpal-tidymenu__boxes > li:nth-child(4n+1) { --erpal-nav-step: 0deg; }
.erpal-tidymenu__boxes > li:nth-child(4n+2) { --erpal-nav-step: 11deg; }
.erpal-tidymenu__boxes > li:nth-child(4n+3) { --erpal-nav-step: 22deg; }
.erpal-tidymenu__boxes > li:nth-child(4n+4) { --erpal-nav-step: -11deg; }

.erpal-tidymenu__box,
.erpal-tidymenu__grouphead {
  --erpal-nav-tint: hsl(calc(var(--erpal-nav-hue) + var(--erpal-nav-step, 0deg))
                        var(--erpal-nav-tint-s) var(--erpal-nav-l));
}

/* The tile: tinted glyph + a slim accent bar down its leading edge. The bar is
   an inset box-shadow rather than a border, so it costs no layout — the box's
   1px transparent border, its 92px grid track and its 58px min-height are all
   exactly what they were. */
.erpal-tidymenu__box .erpal-tidymenu__icon {
  color: var(--erpal-nav-tint);
}
.erpal-tidymenu__box {
  box-shadow: inset 3px 0 0 var(--erpal-nav-tint);
}
/* The active tile keeps its own strong treatment (accent border + tint fill +
   weight) AND keeps the section bar, so "where I am" and "what section this
   is" stay two separate readings rather than one overwriting the other. The
   glyph joins the label in the active ink: inside a filled active tile the
   section colour has already been said by the bar. */
.erpal-tidymenu__box.is-active .erpal-tidymenu__icon {
  color: var(--erpal-sidebar-active-ink);
}

/* The section header wears the family on its glyph. Its TEXT is left on
   --erpal-sidebar-ink-dim: it is .68rem uppercase, the smallest type in the
   rail, and small text is the last place to spend contrast budget on colour. */
.erpal-tidymenu__grouphead .erpal-tidymenu__icon {
  color: var(--erpal-nav-tint);
}
/* ...and the group's tiles are bracketed by a hairline in the same family, so
   a section reads as one block even when it runs past the fold. */
.erpal-tidymenu__boxes {
  border-left: 2px solid hsl(var(--erpal-nav-hue) var(--erpal-nav-tint-s) var(--erpal-nav-l) / .30);
  padding-left: 6px;
}