/**
 * THE HUB SHELL, ON A GENERIC PAGE.
 *
 * WHAT THIS FIXES (2026-08-06)
 * ----------------------------
 * erpal_crm_ui_theme_suggestions_page_alter() forces page--hub.html.twig for
 * every NON-STAFF user on EVERY route — deliberately, so a client can never see
 * the CRM cockpit chrome. But the stylesheet that turns that markup into a
 * chrome (.ld-hub-page / .ld-hub-topbar) lives in erpal_hub, which attaches it
 * from its own controllers only. So any page a client reached outside
 * erpal_hub — /brands was the first one that existed — rendered the shell's
 * markup with no shell stylesheet at all: an unsized 400px logo, bare blue
 * underlined links, and a full-bleed body. The template was in one extension
 * and the CSS in another, and nothing made them travel together.
 *
 * erpal_hub's own dashboard supplies its content container itself (.ld-hub in
 * erpal_hub.css). A generic page has no such wrapper, so this file provides the
 * missing half: the content container, page-title and link treatment the shell
 * assumes and never shipped.
 *
 * SCOPED TO .ld-hub-page--generic ON PURPOSE. The modifier class is set only
 * when the shell is rendering a NON-erpal_hub route, so /hub itself — which is
 * correct today and has a client looking at it — cannot be restyled by this
 * file. Widening the scope to .ld-hub-page would put every rule below on the
 * dashboard as well; do not.
 *
 * TOKEN-FIRST WITH LITERAL FALLBACKS (TIDY_STANDARD_v1 §2.3). The literals are
 * erpal_hub.css's own palette, so an unskinned box matches the dashboard the
 * client just came from, while a tenant skin re-points the tokens.
 */

.ld-hub-page--generic {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--erpal-ink, #0e1b2e);
}

/* The content container erpal_hub's dashboard template provides for itself. */
.ld-hub-page--generic > main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* Page title: matched to .ld-hub-head h1 so a client crossing from the hub
   dashboard to a feature page does not see the heading change size. */
.ld-hub-page--generic h1 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 var(--tidy-gap-lg, .8rem);
  color: var(--erpal-ink, #0e1b2e);
}

.ld-hub-page--generic h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: var(--tidy-lh, 1.35);
  margin: 0 0 var(--tidy-gap-md, .55rem);
  color: var(--erpal-ink, #0e1b2e);
}

/* Links inherit the hub's accent rather than the browser default blue.
   Underlined, per TIDY_STANDARD_v1 §3.2 / ruling d-2026-08-04-024 — colour
   alone is not an affordance and fails WCAG 1.4.1. */
.ld-hub-page--generic main a {
  color: var(--erpal-accent-dark, #c47d12);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ld-hub-page--generic main a:hover {
  text-decoration: none;
}

/* Cards carry their own affordance through the card itself; a blanket underline
   on a whole-card anchor draws a line across the entire tile. Same carve-out
   erpal_brand/css/brand.css already makes for .brand-card__link, restated here
   because this stylesheet is the one introducing the blanket rule. */
.ld-hub-page--generic main a.brand-card__link,
.ld-hub-page--generic main a.ld-tile,
.ld-hub-page--generic main a.rec-card {
  text-decoration: none;
  color: inherit;
}

.ld-hub-messages {
  margin-bottom: var(--tidy-gap-lg, .8rem);
}

/* Empty states are stated, not blank (TIDY_STANDARD_v1 §3.7). */
.ld-hub-page--generic .rec-empty {
  font-style: italic;
  color: var(--erpal-muted, #64748b);
  font-size: var(--tidy-fs-row, .84rem);
}

/* Mobile: the shell is the surface clients actually use on a phone, so the
   container loses its side padding budget before the content does. */
@media (max-width: 640px) {
  .ld-hub-page--generic > main {
    padding: 18px 14px 40px;
  }

  .ld-hub-page--generic h1 {
    font-size: 1.6rem;
  }
}

/* Masquerade block: collapsed one-liner (2026-08-17). */
.masquerade-collapse { margin: 0 0 .5rem; border: 1px solid var(--erpal-border, #e5e7eb); border-radius: 8px; background: var(--erpal-surface, #fff); }
.masquerade-collapse__summary { cursor: pointer; padding: .45rem .8rem; font-size: .82rem; color: var(--erpal-muted, #6b7280); user-select: none; list-style: none; }
.masquerade-collapse__summary::-webkit-details-marker { display: none; }
.masquerade-collapse__summary::before { content: "▸ "; }
.masquerade-collapse[open] .masquerade-collapse__summary::before { content: "▾ "; }
.masquerade-collapse__body { padding: .4rem .8rem .8rem; }