/* Shared app shell — ONE source of truth for the header (brand, notification
 * bell, profile menu) and footer used by BOTH the customer builder (/builder/)
 * and the staff console (/staff/). Extracted from builder.css so the two pages
 * never maintain duplicate chrome. Load order: tokens.css, style.css, shell.css,
 * then the page stylesheet. */

.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
  text-decoration: none;
  color: var(--color-ink);
}

.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-xl);
  min-height: 3.5rem;
  border-bottom: 1px solid var(--color-rule);
}
.home-brand { display: flex; align-items: center; gap: var(--space-xs); }
.home-top-right { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }

/* Notification bell + feed */
.notif { position: relative; }
.notif-bell { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--color-rule-strong); border-radius: 999px; background: var(--color-paper); color: var(--color-ink-2); cursor: pointer; }
.notif-bell svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notif-bell:hover { border-color: var(--color-accent); color: var(--color-accent); }
.notif-bell:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.notif-count { position: absolute; top: -0.25rem; right: -0.25rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; display: grid; place-items: center; }
.notif-menu { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(22rem, calc(100vw - 2rem)); max-height: 26rem; display: flex; flex-direction: column; background: var(--color-paper); border: 1px solid var(--color-rule-2); border-radius: 12px; box-shadow: 0 1.25rem 2.5rem rgb(24 24 30 / 0.18); z-index: 1000; overflow: hidden; }
.notif-menu-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
.notif-menu-head strong { font-size: var(--text-sm); }
.notif-readall { background: none; border: none; color: var(--color-accent); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.notif-list { overflow-y: auto; }
.notif-item { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left; padding: var(--space-sm) var(--space-md); border: none; border-bottom: 1px solid var(--color-rule); background: none; cursor: pointer; }
.notif-item:hover { background: var(--color-paper-2); }
.notif-item.unread { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.notif-item-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.notif-item-body { font-size: var(--text-xs); color: var(--color-neutral); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item-time { font-family: var(--font-mono); font-size: 0.66rem; color: var(--color-muted); }
.notif-empty { padding: var(--space-md); text-align: center; color: var(--color-muted); font-size: var(--text-sm); }

.home-user { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.greet { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.greet strong { color: var(--color-ink); font-weight: 500; }
.profile-control { position: relative; }
.profile-avatar {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--color-rule-strong);
  border-radius: 50%;
  background: var(--color-tdi-red-soft);
  color: var(--color-tdi-red-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.profile-avatar:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .profile-avatar:hover { border-color: var(--color-accent); background: var(--color-paper); } }
.profile-avatar--large { width: 3rem; height: 3rem; cursor: default; }
.profile-menu {
  position: absolute;
  z-index: var(--z-modal);
  top: calc(100% + var(--space-xs));
  right: 0;
  width: min(18rem, calc(100vw - 2 * var(--space-md)));
  padding: var(--space-xs);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: 0 1rem 2rem oklch(20% 0.02 258 / 0.12);
}
.profile-menu-identity { display: grid; gap: var(--space-3xs); padding: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.profile-menu-identity strong { color: var(--color-ink); font-size: var(--text-sm); }
.profile-menu-identity span { color: var(--color-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.profile-menu button, .profile-menu a { display: flex; align-items: center; width: 100%; min-height: 2.25rem; margin-top: var(--space-2xs); padding: 0 var(--space-sm); border: 1px solid transparent; border-radius: var(--radius-btn); background: transparent; color: var(--color-ink); font: inherit; font-size: var(--text-sm); font-weight: 500; text-align: start; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.profile-menu button:focus-visible, .profile-menu a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
@media (hover: hover) { .profile-menu button:hover, .profile-menu a:hover { background: var(--color-paper-2); } }

.builder-footer { display: flex; justify-content: center; min-height: 3.75rem; padding: var(--space-md) var(--page-gutter); border-top: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-muted); }
.builder-footer--work { min-height: 3rem; padding-block: var(--space-sm); }
.builder-foot-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2xs) var(--space-sm); font-family: var(--font-mono); font-size: var(--text-sm); }

@media (max-width: 60rem) {
  .home-top { padding-inline: var(--space-lg); }
}
@media (max-width: 36rem) {
  .builder-foot-meta > *:not(:last-child) { display: none; }
}