/* ===========================================================================
 * public_menu.css — SELF-CONTAINED stylesheet for the shared public_menu module.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * The public_menu module (modules/public_menu/public_menu.php) emits only the
 * flat nine-product switcher MARKUP + behaviour JS; its PRESENTATION normally
 * comes from the estate's one shared stylesheet (assets/keystone.css
 * `.appswitch*` / `.sys-brand*` / `.logo-mark*`). Keystone pages already load
 * keystone.css, so in-portal consumers need nothing else.
 *
 * A DEPLOYED PUBLIC CONTAINER is self-contained and loads NO keystone.css. This
 * file is the container-safe MATERIALISATION of exactly those appswitch rules
 * (concrete hex substituted for the keystone.css `--brand-*` / `--c-*` tokens)
 * so a bare container can style the public_menu markup with no control-plane
 * dependency. It is baked into the public-landing pack at deploy time beside
 * public_menu.php (single-sourced: this is the ONE companion stylesheet, not a
 * per-container copy authored by hand). Keep it in step with the keystone.css
 * appswitch rules; colours still originate from the settings tokens.
 * =========================================================================== */

/* ===== Estate app-switcher (self-contained mirror of keystone.css .appswitch*) ===== */
.appswitch { position: relative; display: inline-flex; align-items: center; }
.appswitch__panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  width: 340px; max-width: min(92vw, 360px); padding: 14px;
  background: #fff; border: 1px solid #e5e2ee; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(20,16,40,.22), 0 2px 8px rgba(20,16,40,.10);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease; text-align: left;
}
.appswitch__panel[hidden] { display: none; }
.appswitch.is-open .appswitch__panel { opacity: 1; transform: translateY(0); }
.appswitch__panel::before {
  content: ""; position: absolute; top: -6px; left: 24px; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid #e5e2ee; border-top: 1px solid #e5e2ee;
  transform: rotate(45deg);
}
.appswitch__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.appswitch__grid--core { grid-template-columns: repeat(3, 1fr); }
/* FLAT public variant — the nine BARE products as a plain 3×3 icon grid. */
.appswitch__grid--products { grid-template-columns: repeat(3, 1fr); }
.appswitch__card {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 12px 6px 10px; border-radius: 12px; text-decoration: none;
  color: #17141f; border: 1px solid transparent;
  transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
}
.appswitch__card:hover { background: #f4f0fe; }
.appswitch__card:focus-visible {
  outline: none; border-color: var(--sys-accent, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124,58,237,.30);
}
.appswitch__ico.logo-mark {
  width: 26px; height: 26px; margin: 8px 0; transform: scale(1.85); transform-origin: center;
}
.appswitch__name {
  font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center;
  white-space: nowrap; color: #17141f;
}
.appswitch__card.sys-brand--baresolar  .appswitch__name,
.appswitch__card.sys-brand--barelink   .appswitch__name,
.appswitch__card.sys-brand--barecode   .appswitch__name,
.appswitch__card.sys-brand--bareai     .appswitch__name,
.appswitch__card.sys-brand--baredesign .appswitch__name,
.appswitch__card.sys-brand--barecad    .appswitch__name,
.appswitch__card.sys-brand--barepdf    .appswitch__name,
.appswitch__card.sys-brand--bare3d     .appswitch__name,
.appswitch__card.sys-brand--bareweb    .appswitch__name {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
}
.sys-brand__pre { color: #17141f; }
.sys-brand__ac  { color: var(--sys-accent, #475569); }

/* Per-brand accent tokens (baked from keystone.css --brand-*). */
.sys-brand--baresolar  { --sys-accent: #be123c; }
.sys-brand--barelink   { --sys-accent: #0b7b74; }
.sys-brand--barecode   { --sys-accent: #b45309; }
.sys-brand--bareai     { --sys-accent: #5b21b6; }
.sys-brand--baredesign { --sys-accent: #a21caf; }
.sys-brand--barecad    { --sys-accent: #1d4ed8; }
.sys-brand--barepdf    { --sys-accent: #15803d; }
.sys-brand--bare3d     { --sys-accent: #4338ca; }
.sys-brand--bareweb    { --sys-accent: #0891b2; }
.sys-brand--quantum    { --sys-accent: #475569; }
.sys-brand--keystone   { --sys-accent: #475569; }
.sys-brand--test       { --sys-accent: #475569; }

/* Logo-mark glyphs (baked copy of keystone.css .logo-mark--*). */
.appswitch .logo-mark {
  flex: none; width: 26px; height: 26px; border-radius: 8px; position: relative;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4), 0 1px 3px rgba(23,20,31,.22);
}
.logo-mark--keystone { background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.logo-mark--keystone::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 50% 50%, #fff 0 1.6px, transparent 2.2px),
    linear-gradient(to right, transparent 46%, rgba(255,255,255,.85) 46% 54%, transparent 54%),
    linear-gradient(to bottom, transparent 46%, rgba(255,255,255,.85) 46% 54%, transparent 54%);
}
.logo-mark--bareai { background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.logo-mark--bareai::after {
  content: ""; position: absolute; inset: 6px; border-radius: 3px;
  background:
    radial-gradient(circle at 25% 30%, #fff 0 2px, transparent 2.5px),
    radial-gradient(circle at 78% 26%, #fff 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 78%, #fff 0 2px, transparent 2.5px),
    linear-gradient(35deg, transparent 45%, rgba(255,255,255,.7) 46% 49%, transparent 50%),
    linear-gradient(-35deg, transparent 45%, rgba(255,255,255,.7) 46% 49%, transparent 50%);
}
.logo-mark--baresolar { background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.logo-mark--baresolar::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 4px, transparent 4.5px),
    repeating-conic-gradient(from 6deg at 50% 50%, rgba(255,255,255,.85) 0deg 10deg, transparent 10deg 45deg);
}
.logo-mark--barelink {
  background: linear-gradient(135deg, #0f9d94, #085d58);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), 0 1px 3px rgba(23,20,31,.22);
}
.logo-mark--barecode { background: linear-gradient(135deg, #f59e0b, #92400e); }
.logo-mark--barecode::after {
  content: ""; position: absolute; inset: 7px; border-radius: 3px;
  background: rgba(255,255,255,.85);
  clip-path: polygon(0 50%, 40% 50%, 40% 0, 60% 0, 60% 50%, 100% 50%, 100% 70%, 0 70%);
}
.logo-mark--baredesign { background: linear-gradient(135deg, #a21caf, #86198f); }
.logo-mark--baredesign::after {
  content: ""; position: absolute; inset: 6px; border-radius: 3px;
  background:
    radial-gradient(circle at 74% 26%, #fff 0 2px, transparent 2.6px),
    linear-gradient(135deg, transparent 44%, rgba(255,255,255,.85) 45% 55%, transparent 56%);
}
.logo-mark--barecad { background: linear-gradient(135deg, #1d4ed8, #1e3a8a); }
.logo-mark--barecad::after {
  content: ""; position: absolute; inset: 6px; border-radius: 2px;
  background:
    linear-gradient(to right, transparent 46%, rgba(255,255,255,.85) 47% 53%, transparent 54%),
    linear-gradient(to bottom, transparent 46%, rgba(255,255,255,.85) 47% 53%, transparent 54%);
}
.logo-mark--barepdf { background: linear-gradient(135deg, #15803d, #14532d); }
.logo-mark--barepdf::after {
  content: ""; position: absolute; inset: 7px 8px; border-radius: 1px;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.9) 0 2px, transparent 2px 5px,
      rgba(255,255,255,.9) 5px 7px, transparent 7px 10px,
      rgba(255,255,255,.9) 10px 12px, transparent 12px);
}
.logo-mark--bare3d { background: linear-gradient(135deg, #4338ca, #3730a3); }
.logo-mark--bare3d::after {
  content: ""; position: absolute; inset: 6px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:
    linear-gradient(90deg, transparent 49.4%, rgba(255,255,255,.95) 49.4% 50.6%, transparent 50.6%),
    linear-gradient(30deg, transparent 49.4%, rgba(255,255,255,.95) 49.4% 50.6%, transparent 50.6%),
    linear-gradient(150deg, transparent 49.4%, rgba(255,255,255,.95) 49.4% 50.6%, transparent 50.6%),
    conic-gradient(from -60deg at 50% 50%, #e0e7ff 0 120deg, #a5b4fc 120deg 240deg, #c7d2fe 240deg 360deg);
}
.logo-mark--bareweb { background: linear-gradient(135deg, #0891b2, #0e7490); }
.logo-mark--bareweb::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.9);
  background:
    linear-gradient(to right, transparent 46%, rgba(255,255,255,.85) 47% 53%, transparent 54%),
    linear-gradient(to bottom, transparent 46%, rgba(255,255,255,.85) 47% 53%, transparent 54%);
}
.logo-mark--quantum {
  background: #0A0E27;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), 0 1px 3px rgba(10,14,39,.4);
}
.logo-mark--quantum::after {
  content: ""; position: absolute; inset: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #22D3EE, #EC4899, #8B5CF6);
}
.logo-mark--test { background: linear-gradient(135deg, #64748b, #334155); }
.logo-mark--test::after {
  content: ""; position: absolute; inset: 7px;
  background: rgba(255,255,255,.92);
  clip-path: polygon(41% 66%, 78% 22%, 88% 33%, 43% 86%, 12% 55%, 22% 44%);
}