/*
 * MM3D Slicer — L3 signed-in chrome extras
 * Visual size/brand come from L2 site-topbar.css.
 * Member topbar: three zones (brand | center nav | home/logout).
 * Member page heading + shell: source = 我的 Slicer; also used by
 * 帳戶與安全設定 and checkout chrome (cards stay L4).
 * Do not load on public marketing pages or cover.
 */

/* L3 content shell: 86% / max 1450, same as 我的 Slicer. */
.member-page-shell,
.workspace-overview-shell.member-page-shell,
.account-settings-main.member-page-shell,
.checkout-shell.member-page-shell {
  box-sizing: border-box;
  width: 86%;
  max-width: 1450px;
  margin-inline: auto;
}

/* L3 page heading: 我的 Slicer is the visual source. */
.member-page-heading {
  padding: 4px 0 28px;
}

.member-page-heading h1,
body.workspace-dashboard-page .member-page-heading h1,
body.account-settings-page .member-page-heading h1,
body.checkout-page .member-page-heading h1 {
  margin: 0 0 10px;
  color: #101820;
  font-family: var(--mm3d-body-sans);
  font-size: clamp(32px, 3.32vw, 56px);
  font-weight: 800;
  font-variation-settings: normal;
  font-synthesis: none;
  line-height: 1.12;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

.member-page-heading p,
body.workspace-dashboard-page .member-page-heading p,
body.account-settings-page .member-page-heading p,
body.checkout-page .member-page-heading p {
  margin: 0;
  max-width: none;
  color: #6b7a88;
  font-family: var(--mm3d-body-sans);
  font-size: clamp(16px, 1.3vw, 22px);
  font-weight: 600;
  line-height: 1.45;
}

.site-topbar--user {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  padding-inline: max(24px, calc((100vw - min(86vw, 1450px)) / 2));
}

.site-topbar--user .site-topbar-user-start {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
  min-width: 0;
}

.site-topbar--user .site-brand {
  justify-self: start;
}

.site-topbar--user .site-member-hub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.site-topbar--user .site-topbar-nav {
  justify-self: center;
  margin-left: 0;
  justify-content: center;
}

.site-topbar--user .site-topbar-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-topbar--user .site-topbar-nav button,
.site-topbar--user .site-topbar-actions button {
  min-height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.site-topbar--user .site-topbar-nav button:hover,
.site-topbar--user .site-topbar-actions button:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.site-topbar--user .site-topbar-nav a.active,
.site-topbar--user .site-topbar-nav a[aria-current="page"],
.site-topbar--user .site-topbar-nav button.active {
  color: #3ea8ff;
  background: transparent;
  border-radius: 0;
  box-shadow: inset 0 -2px 0 #3ea8ff;
}

body.billing-modal-open .site-topbar--user .site-topbar-nav a.active,
body.billing-modal-open .site-topbar--user .site-topbar-nav a[aria-current="page"] {
  color: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

body.checkout-page .site-topbar .checkout-security {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 18px;
  font-weight: 800;
}

body.checkout-page .site-topbar .checkout-security span:first-child {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #f0c35c;
}

body.checkout-page .site-topbar .checkout-security span:last-child {
  display: inline;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.84);
}

@media (max-width: 980px) {
  .site-topbar--user {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .site-topbar--user .site-topbar-user-start {
    grid-area: brand;
    min-width: 0;
  }

  .site-topbar--user .site-brand {
    min-width: 0;
  }

  .site-topbar--user .site-topbar-nav {
    grid-area: nav;
    justify-self: start;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 0;
    width: auto;
  }

  .site-topbar--user .site-topbar-actions {
    grid-area: actions;
  }
}

@media (max-width: 720px) {
  .site-topbar--user {
    padding-inline: 12px;
    gap: 8px;
  }

  .site-topbar-home,
  .site-topbar--user .site-topbar-actions button {
    min-height: 36px;
    padding: 0 8px;
  }
}

@media (max-width: 520px) {
  .site-topbar--user {
    grid-template-areas:
      "brand brand"
      "nav actions";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-topbar--user .site-topbar-nav a,
  .site-topbar--user .site-topbar-nav button {
    min-height: 36px;
    padding: 0 8px;
    font-size: 18px;
  }
}