/* Pclshm family 0.1.0 — generated by pclshm-kit/design-system/build.mjs. */
/* hub-site: the shared header, footer and components; source design-system/shell/shell.css. */
/* Family shell: the header and footer every public pclshm website shares, and the
   few components every site's content uses (button, eyebrow, pill, theme switch).
   Built only on family semantic tokens, so each adapter's palette and body face
   apply unchanged. Geometry follows the component contract in README.md:
   72px header including its 1px rule, rules inside the 1280px frame, one
   gutter, navigation that folds into a menu instead of wrapping. */

.fam-header,
.fam-footer,
.fam-btn,
.fam-eyebrow {
  --fam-accent: var(--focus-color);
  --fam-surface: var(--surface-window);
  --fam-label-size: 11px;
  font-family: var(--font-body);
}

.fam-frame {
  width: var(--layout-frame-width);
  margin-inline: auto;
}

.fam-label,
.fam-nav a,
.fam-up,
.fam-action,
.fam-menu summary,
.fam-menu__panel a,
.fam-menu__panel span,
.fam-family > a,
.fam-family > span {
  font-family: var(--font-mono);
  font-size: var(--fam-label-size);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Header */
.fam-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fam-surface);
}
@supports (backdrop-filter: blur(1px)) and (background: color-mix(in srgb, red 50%, transparent)) {
  .fam-header {
    background: color-mix(in srgb, var(--fam-surface) 90%, transparent);
    backdrop-filter: blur(10px);
  }
}
.fam-header__row {
  box-sizing: border-box;
  height: var(--layout-header-height);
  border-bottom: var(--border-width) solid var(--line-default);
  display: flex;
  align-items: center;
  gap: var(--space-unit-28);
}
.fam-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-unit-8);
  min-height: var(--target-min);
  margin-right: auto;
  color: var(--text-primary);
  font: 500 13px/1 var(--font-mono);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}
/* The mark: brand/marks.mjs. An isometric object in a thin ink line, one face lit in the site
   accent; a face takes the ground it sits on, so nearer faces hide the lines behind them. Kit's
   stack and an image mark keep their 20px. */
.fam-mark {
  width: 20px;
  height: 20px;
  flex: none;
}
.fam-mark--iso {
  width: 26px;
  height: 26px;
}
svg.fam-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
svg.fam-mark--iso path {
  stroke-width: 3.4;
}
svg.fam-mark .fam-mark__face {
  fill: var(--fam-surface, var(--surface-window));
}
/* The lit face is a graphic, not text: it takes the bright fill, and the ink outline keeps it
   legible on either ground. */
svg.fam-mark .fam-mark__lit {
  fill: var(--fam-mark-accent, var(--fam-accent));
  stroke: none;
}
svg.fam-mark .fam-mark__fill {
  fill: var(--fam-accent);
  stroke: var(--fam-accent);
}
.fam-slash {
  color: var(--text-muted);
}
.fam-product {
  color: var(--fam-accent);
}
.fam-tag {
  margin-left: var(--space-unit-4);
  color: var(--text-muted);
  font-size: 11px;
}
.fam-nav {
  display: flex;
  align-items: center;
  gap: var(--space-unit-20);
}
.fam-nav a,
.fam-up {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.fam-up {
  color: var(--text-muted);
}
.fam-nav a:hover,
.fam-up:hover,
.fam-nav a[aria-current] {
  color: var(--text-primary);
}
.fam-nav a[aria-current] {
  box-shadow: inset 0 -1px var(--fam-accent);
}
.fam-end {
  display: flex;
  align-items: center;
  gap: var(--space-unit-16);
}
.fam-action {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-unit-16);
  border: var(--border-width) solid var(--line-control);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.fam-action:hover {
  border-color: var(--fam-accent);
  color: var(--fam-accent);
}
.fam-menu {
  display: none;
  position: relative;
}
.fam-menu summary {
  display: flex;
  align-items: center;
  gap: var(--space-unit-6);
  min-height: var(--target-min);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}
.fam-menu summary::-webkit-details-marker {
  display: none;
}
.fam-menu summary span {
  color: var(--fam-accent);
}
.fam-menu[open] summary span {
  display: inline-block;
  transform: rotate(45deg);
}
.fam-menu__panel {
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  min-width: 240px;
  display: grid;
  padding: var(--space-unit-8) 0;
  background: var(--surface-raised);
  border: var(--border-width) solid var(--line-default);
}
.fam-menu__panel a {
  display: block;
  padding: var(--space-unit-12) var(--space-unit-16);
  color: var(--text-secondary);
  text-decoration: none;
}
.fam-menu__panel a:hover {
  color: var(--text-primary);
}
/* Theme switch: two pressed-state buttons, shown once theme.js has run. */
.fam-theme {
  display: none;
  align-items: stretch;
  height: 36px;
  border: var(--border-width) solid var(--line-control);
  border-radius: var(--radius-control);
}
:root[data-family-theme] .fam-theme {
  display: inline-flex;
}
.fam-theme button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-unit-6);
  height: auto;
  margin: 0;
  padding: 0 var(--space-unit-12);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fam-label-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.fam-theme button + button {
  border-left: var(--border-width) solid var(--line-control);
}
.fam-theme button:hover {
  color: var(--text-primary);
}
.fam-theme button[aria-pressed='true'] {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: inset 0 -2px var(--fam-accent);
}
.fam-theme__icon {
  width: 12px;
  height: 12px;
  flex: none;
}
.fam-theme__icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: miter;
}
[data-theme-choice='dark'] .fam-theme__icon path {
  fill: currentColor;
}
.fam-theme button:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
}

.fam-header a:focus-visible,
.fam-header button:focus-visible,
.fam-header summary:focus-visible,
.fam-footer a:focus-visible,
.fam-footer button:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

@media (max-width: 760px) {
  .fam-nav,
  .fam-up,
  .fam-action {
    display: none;
  }
  .fam-header__row {
    gap: var(--space-unit-16);
  }
  .fam-menu {
    display: block;
  }
  /* The switch keeps both choices but drops to its icons; the words stay for assistive tech. */
  .fam-theme button {
    justify-content: center;
    width: 40px;
    padding: 0;
  }
  .fam-theme button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 400px) {
  .fam-header .fam-tag {
    display: none;
  }
}

/* Footer */
.fam-footer > .fam-frame {
  box-sizing: border-box;
  display: grid;
  gap: var(--space-unit-28);
  padding-block: var(--space-unit-48) var(--space-unit-36);
  border-top: var(--border-width) solid var(--line-default);
}
.fam-footer p {
  margin: 0;
}
.fam-footer .fam-label {
  margin: 0 0 var(--space-unit-12);
  color: var(--text-muted);
}
.fam-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-unit-36);
  align-items: start;
}
.fam-footer__id .fam-lockup {
  min-height: 0;
}
.fam-footer .fam-footer__meta {
  margin-top: var(--space-unit-12);
  color: var(--text-muted);
  font: 12px/1.5 var(--font-mono);
}
.fam-footer ul {
  display: grid;
  gap: var(--space-unit-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fam-footer li {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
}
.fam-footer li a {
  color: var(--text-secondary);
  text-decoration: none;
}
.fam-footer li a:hover,
.fam-family > a:hover {
  color: var(--fam-accent);
}
.fam-footer li small {
  display: block;
  color: var(--text-muted);
  font: 11px/1.5 var(--font-mono);
}
.fam-family {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-unit-12) var(--space-unit-20);
  padding-top: var(--space-unit-20);
  border-top: var(--border-width) solid var(--line-default);
}
.fam-footer .fam-family .fam-label {
  margin: 0;
}
.fam-family > a,
.fam-family > span {
  color: var(--text-secondary);
  text-decoration: none;
}
.fam-family > .fam-family__off {
  color: var(--text-muted);
}
.fam-family > [aria-current] {
  color: var(--fam-accent);
}
.fam-family small {
  margin-left: var(--space-unit-4);
  color: var(--text-muted);
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: none;
}
.fam-sentence {
  max-width: 82ch;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
}
.fam-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-unit-8) var(--space-unit-28);
  color: var(--text-muted);
  font: 11.5px/1.5 var(--font-mono);
}
.fam-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-unit-20);
}
.fam-legal > * {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}
.fam-legal a,
.fam-legal button {
  height: auto;
  margin: 0;
  padding: 0;
  line-height: inherit;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-control);
  text-underline-offset: 3px;
  cursor: pointer;
}
.fam-legal a:hover,
.fam-legal button:hover {
  color: var(--fam-accent);
}

@media (max-width: 760px) {
  .fam-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-unit-28) var(--space-unit-20);
  }
  .fam-footer__id {
    grid-column: 1 / -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fam-menu[open] summary span {
    transform: none;
  }
}

/* Components: the button, the eyebrow and the status pill every site's content uses.
   One shape and one type everywhere; the accent and the control radius are the site's. */
.fam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-unit-8);
  box-sizing: border-box;
  min-height: 48px;
  margin: 0;
  padding: 0 var(--space-unit-20);
  border: var(--border-width) solid var(--line-control);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease);
}
.fam-btn:hover {
  border-color: var(--fam-accent);
  color: var(--fam-accent);
  text-decoration: none;
}
/* The primary action: a fill/ink pair. A site may swap the fill (pclshm.io keeps its lamp gradient). */
.fam-btn--primary {
  border-color: transparent;
  background: var(--fam-btn-fill, var(--action-primary-bg));
  color: var(--action-primary-fg);
}
.fam-btn--primary:hover {
  border-color: transparent;
  background: var(--fam-btn-fill-hover, var(--action-primary-bg-hover));
  color: var(--action-primary-fg);
}
.fam-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.fam-btn:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.fam-eyebrow {
  display: block;
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fam-label-size, 11px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fam-eyebrow b,
.fam-eyebrow strong {
  color: var(--fam-accent);
  font-weight: 500;
}
/* A state in words, with a dot that is only decoration. The dot is a status colour, never the accent. */
.fam-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-unit-8);
  padding: 5px 10px;
  border: var(--border-width) solid var(--line-control);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fam-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--status-process-starting);
}
.fam-pill--live::before {
  background: var(--status-process-running);
}
.fam-pill--plain::before {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .fam-btn {
    transition: none;
  }
}

.fam-header,
.fam-footer,
.fam-btn,
.fam-eyebrow {
  --fam-accent: var(--brand-accent-text);
  --fam-mark-accent: var(--brand-accent);
}