/* Hallmark · genre: modern-minimal · macrostructure: Workbench · design-system: design.md · designed-as-app
 * theme: custom · vibe: "quiet, polished, precise, trustworthy" · nav: N10 frosted app bar · footer: Ft2
 * pre-emit critique: P5 H5 E4 S5 R4 V4 · nav: N10 · footer: Ft2 · slop: pass (42–49) · mobile: pass (34, 49–57)
 */
@import url("../shared/base.b717ec45a9e8.css");

.portal-nav-sentinel { display: block; height: 1px; margin-block-end: -1px; }
.portal-header {
  position: sticky;
  z-index: var(--z-sticky);
  inset-block-start: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-frosted-header);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}
.portal-header__inner { display: grid; min-height: 4.25rem; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-sm); }
.portal-brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); font-family: var(--font-wordmark); font-weight: 750; letter-spacing: -0.025em; text-decoration: none; white-space: nowrap; }
.portal-brand__mark { width: 0.7rem; height: 0.7rem; border-radius: var(--radius-pill); background: var(--color-accent); }
.portal-nav {
  position: fixed;
  z-index: var(--z-dropdown);
  inset: 4.25rem var(--space-sm) auto;
  display: grid;
  max-height: calc(100dvh - 5.25rem);
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
  opacity: 0;
  overflow-y: auto;
  pointer-events: none;
  transform: translateY(-0.5rem);
  background: var(--color-paper-raised);
  box-shadow: var(--shadow-float);
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
body.nav-open .portal-nav { opacity: 1; pointer-events: auto; transform: translateY(0); }
.portal-nav a { display: inline-flex; min-height: 2.75rem; align-items: center; padding-inline: var(--space-md); border-radius: var(--radius-pill); color: var(--color-neutral); font-size: var(--text-sm); font-weight: 550; line-height: 1; text-decoration: none; white-space: nowrap; }
.portal-nav a[aria-current="page"] { background: var(--color-paper-2); color: var(--color-ink); font-weight: 650; }
.portal-nav a:active { background: var(--color-paper-3); }
.portal-account { display: flex; align-items: center; justify-self: end; gap: var(--space-xs); }
.portal-account__copy { display: none; max-width: 13rem; text-align: end; }
.portal-account__copy strong, .portal-account__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.button.mobile-nav-button { padding-inline: var(--space-md); }

.product-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.product-row { display: grid; min-width: 0; gap: var(--space-lg); padding: var(--space-lg); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-raised); box-shadow: var(--shadow-card); }
.product-row__title { display: grid; gap: var(--space-xs); }
.product-row__title h2 { font-size: var(--text-xl); }
.product-row__title p { max-width: 52ch; color: var(--color-neutral); }
.product-row > div:not(.product-row__title) { display: grid; align-content: start; gap: var(--space-xs); }
.product-row__price { font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.035em; }
.product-row .button { justify-self: start; }

.balance-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.balance-band > div { min-width: 0; padding: var(--space-lg); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-raised); box-shadow: var(--shadow-card); }
.balance-band > div:first-child { grid-column: 1 / -1; background: var(--color-ink); color: var(--color-paper-raised); }
.balance-band > div:first-child span, .balance-band > div:first-child small { color: var(--color-paper-3); }
.balance-band span { display: block; color: var(--color-neutral); font-size: var(--text-sm); }
.balance-band strong { display: block; margin-block-start: var(--space-sm); font-size: clamp(1.5rem, 3vw, 2.25rem); font-variant-numeric: tabular-nums; letter-spacing: -0.035em; line-height: 1; }
.balance-band small { display: block; margin-block-start: var(--space-xs); }
.portal-footer { padding-block: var(--space-xl); color: var(--color-muted); font-size: var(--text-xs); }
.portal-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.portal-footer__inner strong { color: var(--color-ink-2); font-family: var(--font-wordmark); }

@media (hover: hover) and (pointer: fine) {
  .portal-nav a:hover { background: var(--color-paper-2); color: var(--color-ink); }
  .product-row { transition: transform var(--dur-short) var(--ease-out); }
  .product-row:hover { transform: translateY(-1px); }
}

@media (min-width: 40rem) {
  .portal-header__inner { gap: var(--space-md); }
  .portal-account__copy { display: block; }
  .product-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-row { grid-template-columns: minmax(0, 1fr) auto; }
  .product-row__title { grid-column: 1 / -1; }
  .product-row > :nth-child(2) { grid-column: 1; }
  .product-row > :nth-child(3) { grid-column: 1; }
  .product-row .button { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
}

@media (min-width: 72rem) {
  .portal-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-lg); }
  .button.mobile-nav-button { display: none; }
  .portal-nav { position: static; display: flex; max-height: none; justify-content: center; gap: var(--space-3xs); padding: var(--space-2xs); border: 0; border-radius: var(--radius-pill); opacity: 1; overflow: visible; pointer-events: auto; transform: none; background: var(--color-paper-2); box-shadow: none; }
  .portal-nav a { min-height: 2.35rem; padding-inline: var(--space-sm); }
  .portal-nav a[aria-current="page"] { background: var(--color-paper-raised); box-shadow: 0 1px 2px var(--color-shadow); }
  .portal-header.is-condensed { border-color: transparent; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .portal-header.is-condensed .portal-header__inner { width: min(100% - 3rem, 72rem); margin-block-start: var(--space-xs); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-frosted-raised); box-shadow: var(--shadow-float); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }
  .balance-band { grid-template-columns: 1.25fr repeat(3, minmax(0, 0.75fr)); }
  .balance-band > div:first-child { grid-column: auto; }
}