/**
 * @file side-menu.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The side menu of Settings & Controls: a table of contents rather than a menu. The
 *   way back to the home in mono coral, groups under a coral capital word on an ink rule (a group
 *   folds), every item a hairline row, the open one on the sun, a coral count when something waits,
 *   a pin on hover, and the one "show all tools" toggle as an underlined mono action. The component
 *   is SideMenu (/components/SideMenu.js); the catalogue entry is `side-menu`.
 *   Rules moved unchanged from views/profile.css and views/profile-poster.css, in the order they were
 *   read, under the component's names (UI consolidation phase 5, a move).
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.4.1 — 2026-09-27 — The index strip's line under a word reads var(--shape-frame) instead of a
 *     literal 2px (the AIMEAT value, so AIMEAT is unchanged; a theme reaches it). check:shape-tokens.
 *   v1.4.0 — 2026-09-27 — The index (appcat parity): the way home and the tags toggle in mono coral
 *     (the bold rows' face no longer reaches them, on a phone too), the title's mark on the card
 *     ground. Additive to .side-menu--index.
 *   v1.3.0 — 2026-09-27 — .side-menu--index (SideMenu index, appcat): a page's own index with the old
 *     app catalogue's rail values (.cat-rail-*): the way home under a heavy rule, the title with its
 *     framed mark, bold rows, the tally count (.side-menu-tally) grey and on a coral chip when open,
 *     the small rows of a long list, and the sideways strips under 900px. Additive: nothing outside
 *     .side-menu--index, .side-menu-title, .side-menu-tally and .side-menu-item--small changes.
 *   v1.2.0 — 2026-09-26 — The group title's spacing reads the label spacing (calc(var(--shape-tracking-label) * 1.2), .12em); the corner sits on the open item only, the one with a ground, and its rule reads --shape-rule-colour (a move: the AIMEAT values equal the old ones).
 *   v1.1.0 — 2026-09-25 — Every small number is the Count (.poster-count waiting or tally), a unification: Jouni's decision Count.
 *   v1.0.0 — 2026-09-25 — Moved from the profile sheets (.pf-side-*), a move.
 */

/* A group folds under its title; the pin shows on hover and stays when on. */
.pf .side-menu-group-toggle { display: flex; align-items: center; gap: .35rem; width: 100%; background: none; border: none; cursor: pointer; font: inherit; text-align: left; padding: 0; }
.pf .side-menu-group-toggle .side-menu-chevron { font-size: .55rem; color: var(--muted); }
.pf .side-menu-pin { display: none; margin-left: auto; font-size: .72rem; opacity: .55; cursor: pointer; filter: grayscale(1); }
.pf .side-menu-item:hover .side-menu-pin { display: inline; }
.pf .side-menu-pin:hover { opacity: 1; }
.pf .side-menu-pin--on { display: inline; opacity: .9; filter: none; }

.pf .side-menu-chevron { transition: transform .2s; display: inline-block; }
.pf .side-menu-chevron--open { transform: rotate(180deg); }

/* The index: one rule on top, group words in coral, every item a hairline row, the open one on the sun. */
.side-menu-home { padding-top: 0.9rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); }

.side-menu-group { margin-top: 1.1rem; }
.side-menu-group-title { font-size: 0.66rem; font-weight: var(--font-poster-strong-weight); letter-spacing: calc(var(--shape-tracking-label) * 1.2); text-transform: var(--shape-case-label); color: var(--accent); padding: 0 0 0.35rem; border-bottom: var(--shape-frame) solid var(--shape-rule-colour); }
.side-menu-item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.45rem 0; border: none; border-bottom: 1px solid var(--border); background: none; color: var(--text);
  cursor: pointer; font: inherit; font-size: 0.98rem; font-weight: var(--font-poster-text-weight); text-align: left;
}
.side-menu-item:hover { color: var(--accent); }
.side-menu-item--active { background: var(--sun); color: var(--on-sun); font-weight: var(--font-poster-strong-weight); padding-left: 0.5rem; border-bottom-color: var(--shape-rule-colour); border-radius: var(--shape-corner); }
/* The one toggle between the basic menu and every tool. Reads as an action, not a tab. */
.side-menu-more { margin-top: 0.9rem; border-bottom: 0; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 400; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.side-menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The count is the waiting Count (poster.css); its place in the row only. */
.side-menu-item .poster-count { margin-left: auto; }

.pf .side-menu-item--active { color: var(--on-sun); }
.pf .side-menu-home { text-decoration: none; margin-bottom: 0.35rem; }

/* ── A page's own index (SideMenu index; the old app catalogue's rail, .cat-rail-*) ─────────── */
.side-menu-title { display: flex; align-items: center; gap: 10px; padding: 6px 0 16px; }
.side-menu-title-mark {
  width: 38px; height: 38px; flex: 0 0 auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border: var(--shape-frame-heavy) solid var(--shape-frame-colour); background: var(--card-bg); font-size: 1.1rem;
}
.side-menu-title-words {
  font-family: var(--font-headline); font-weight: var(--font-poster-weight); font-size: 1rem; line-height: var(--font-poster-leading);
  letter-spacing: var(--font-poster-tracking); text-transform: var(--shape-case-heading); color: var(--text);
}
.side-menu-tally { margin-left: auto; flex: 0 0 auto; font-family: var(--font-mono); font-size: .7rem; font-weight: 400; color: var(--text-dim); }
.side-menu-item--active .side-menu-tally { background: var(--accent); color: var(--bg); padding: 1px 7px; }
.side-menu-item--small { font-size: .9rem; color: var(--text-dim); }
.side-menu--index { display: flex; flex-direction: column; }
.side-menu--index > .side-menu-home { border-top: var(--shape-frame-heavy) solid var(--shape-rule-colour); border-bottom: 0; padding: 14px 0 0; text-decoration: none; }
.side-menu--index > .side-menu-home:hover { color: var(--accent); text-decoration: underline; }
.side-menu--index .side-menu-group { display: flex; flex-direction: column; margin-top: 18px; }
.side-menu--index > .side-menu-title + .side-menu-group { margin-top: 0; }
.side-menu--index .side-menu-group-title { font-weight: 800; padding-bottom: 6px; }
.side-menu--index .side-menu-item { justify-content: space-between; gap: 8px; padding: 7px 0; font-family: var(--font-body); font-weight: 700; }
.side-menu--index .side-menu-item--small { padding: 6px 0; font-size: .9rem; color: var(--text-dim); }
.side-menu--index .side-menu-item--active { color: var(--on-sun); font-weight: 800; padding: 7px 8px; }
.side-menu--index .side-menu-item--small.side-menu-item--active { padding: 6px 8px; }
.side-menu--index .side-menu-label { overflow: visible; white-space: normal; }
.side-menu--index .side-menu-more { justify-content: flex-start; margin-top: 14px; padding: 0; }
/* The way home and the "all tags" toggle keep their mono coral words over the bold rows' face. */
.side-menu--index > .side-menu-item.side-menu-home { display: block; padding: 14px 0 0; font-family: var(--font-mono); font-size: .8rem; font-weight: 400; color: var(--accent); }
.side-menu--index > .side-menu-item.side-menu-home:hover { color: var(--accent); }
.side-menu--index .side-menu-item.side-menu-more { display: block; font-family: var(--font-mono); font-size: .8rem; font-weight: 400; color: var(--accent); }
.side-menu--index .side-menu-item.side-menu-more:hover { color: var(--text); }
@media (max-width: 900px) {
  .side-menu--index { gap: 12px; }
  .side-menu--index .side-menu-title { display: none; }
  .side-menu--index .side-menu-group { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 14px; margin-top: 10px; padding-bottom: 6px; scrollbar-width: none; }
  .side-menu--index > .side-menu-title + .side-menu-group { margin-top: 0; }
  .side-menu--index .side-menu-group::-webkit-scrollbar { display: none; }
  .side-menu--index .side-menu-group-title { display: none; }
  .side-menu--index .side-menu-item, .side-menu--index .side-menu-item--small {
    width: auto; flex: 0 0 auto; gap: 6px; padding: 4px 0; border: 0; border-bottom: var(--shape-frame) solid var(--shape-rule-colour);
    font-size: .78rem; font-weight: 800; text-transform: var(--shape-case-action); letter-spacing: .04em; color: var(--text);
  }
  .side-menu--index .side-menu-item--active, .side-menu--index .side-menu-item--small.side-menu-item--active { padding: 4px 8px; border-bottom: 0; }
  .side-menu--index .side-menu-label { white-space: nowrap; }
  .side-menu--index .side-menu-more { flex: 0 0 auto; margin-top: 0; border-bottom: 0; text-transform: none; }
  /* The way home and the tags toggle are not strip words: mono coral as on a desktop. */
  .side-menu--index > .side-menu-item.side-menu-home { width: auto; padding: 14px 0 0; border: 0; border-top: var(--shape-frame-heavy) solid var(--shape-rule-colour); text-transform: none; letter-spacing: normal; }
  .side-menu--index .side-menu-item.side-menu-more { padding: 0; letter-spacing: normal; }
}