/* Secondary pages use the homepage's typography, grain and frosted surfaces.
   Layout is scoped away from the shared navigation and the editing canvas. */
body.wm-secondary {
  --wm-page-unit: clamp(1px, .0520833333vw, 2px);
  --wm-page-body: calc(12 * var(--wm-page-unit));
  --wm-page-small: calc(10 * var(--wm-page-unit));
  --wm-page-title: calc(34 * var(--wm-page-unit));
  --wm-page-gap: calc(24 * var(--wm-page-unit));
  --wm-page-radius: clamp(18px, 1vw, 36px);
  --wm-page-grain: url('/workflow-assets/canvas-grain.svg');
  --wm-page-frost: linear-gradient(132deg, rgb(66 66 66 / 57%), rgb(38 38 38 / 65%) 38%, rgb(23 23 23 / 70%) 74%, rgb(42 42 42 / 53%));
  color: #efefef;
  background-color: #090909;
  background-image: var(--wm-page-grain), radial-gradient(circle, rgb(255 255 255 / 5%) .7px, transparent .9px);
  background-size: 160px 160px, 32px 32px;
  background-position: 0 0, 16px 16px;
  font-family: Urbanist, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: var(--wm-page-body);
  line-height: 1.65;
}

body.wm-secondary :is(.hub-main, .billing-main, .account-main, #gallery-main, .publish-main) {
  padding-top: calc(54 * var(--wm-page-unit));
}
body.wm-secondary :is(.hub-intro, .page-heading, .g-intro, .publish-intro) {
  margin-bottom: calc(38 * var(--wm-page-unit));
}
body.wm-secondary :is(.hub-intro h1, .page-heading h1, .g-intro h1, .publish-intro h1, .g-work-heading h1) {
  font-size: var(--wm-page-title);
  font-weight: 450;
  line-height: 1.35;
  letter-spacing: -.025em;
  color: #efefef;
  margin: 0;
}
body.wm-secondary :is(.hub-eyebrow, .eyebrow, .section-index, .g-eyebrow, .publish-eyebrow) {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--wm-page-unit));
  margin: 0 0 calc(13 * var(--wm-page-unit));
  font-size: var(--wm-page-small);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .05em;
  color: #999;
}
body.wm-secondary :is(.heading-description, .hub-intro p, .g-intro-copy>p:last-child, .publish-intro>p:last-child) {
  margin: calc(12 * var(--wm-page-unit)) 0 0;
  max-width: 54em;
  color: #999;
  font-size: var(--wm-page-body);
  line-height: 1.8;
}
body.wm-secondary :is(.section-heading h2, .g-empty h2, .publish-panel-heading h2) {
  font-size: calc(22 * var(--wm-page-unit));
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: #e7e7e7;
}
body.wm-secondary :is(.hub-intro, .page-heading, .g-intro) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wm-page-gap);
}
body.wm-secondary .g-intro { padding: 0; }
body.wm-secondary .g-intro-copy { min-width: 0; }
body.wm-secondary .g-intro>.g-publish-link { flex-shrink: 0; }

/* Same neutral controls on all routes; the main action uses a firmer outline. */
body.wm-secondary :is(.primary-button, .secondary-button, .g-button, .publish-primary, .publish-secondary) {
  min-height: calc(40 * var(--wm-page-unit));
  padding: calc(9 * var(--wm-page-unit)) calc(18 * var(--wm-page-unit));
  border: 1px solid #ffffff26;
  border-radius: calc(9 * var(--wm-page-unit));
  background: #ffffff04;
  color: #d9d9d9;
  box-shadow: inset 0 1px #ffffff05;
  font-size: var(--wm-page-body);
  font-weight: 450;
  line-height: 1.4;
  transition: color .18s, background .18s, border-color .18s;
}
body.wm-secondary :is(.primary-button, .g-primary, .publish-primary) {
  background: #151515;
  color: #efefef;
  border-color: #ffffff3a;
}
body.wm-secondary :is(.primary-button, .secondary-button, .g-button, .publish-primary, .publish-secondary):hover:not(:disabled) {
  color: #fff;
  background: #ffffff0c;
  border-color: #ffffff60;
}
body.wm-secondary :is(.hub-search, .g-search, .cycle-control, .g-tabs, .hub-view-switch) {
  background: #ffffff04;
  border-color: #ffffff22;
  box-shadow: inset 0 1px #ffffff04;
  border-radius: calc(9 * var(--wm-page-unit));
}
body.wm-secondary :is(.publish-panel, .g-filter-label) :is(input:not([type=checkbox]), select, textarea) {
  color: #ddd;
  background: #101010;
  border-color: #ffffff23;
  border-radius: calc(8 * var(--wm-page-unit));
}

/* Layered grain sits in the card background, never over photos or drawings. */
body.wm-secondary :is(.project-card, .profile-card, .recent-project, .credits-card, .wallet-panel, .plan-card, .pack-card, .g-card, .publish-panel, .publish-preview-panel) {
  background-image: var(--wm-page-grain), var(--wm-page-frost);
  background-size: 128px 128px, auto;
  background-color: transparent;
  border-color: rgb(255 255 255 / 16%);
  border-radius: var(--wm-page-radius);
  box-shadow: inset 0 1px rgb(255 255 255 / 11%), inset 0 -1px rgb(255 255 255 / 3%), 0 12px 28px rgb(0 0 0 / 24%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.wm-secondary .project-card-copy,
body.wm-secondary .g-card-body { background: transparent; }
body.wm-secondary :is(.project-card, .recent-project, .g-card):hover {
  border-color: rgb(255 255 255 / 35%);
  transform: none;
}
body.wm-secondary .plan-card.featured { border-color: #ffffff50; }
body.wm-secondary :is(.wallet-balance, .profile-bottom) { background: #ffffff02; }
body.wm-secondary :is(.hub-toast, .account-toast, .billing-toast, .g-toast, #publish-toast) {
  background: #202020f5;
  color: #eee;
  border: 1px solid #ffffff30;
  border-radius: 10px;
  box-shadow: 0 12px 35px #0007;
}
body.wm-secondary :is(.hub-footer, .account-footer, .billing-footer, .g-footer) {
  font-size: var(--wm-page-small);
  color: #777;
  border-color: #ffffff16;
}

/* Keep the previously approved project/billing widths. Other page bodies use
   the same focused column as projects, not a wider full-screen dashboard. */
body.wm-secondary.gallery-page #gallery-main,
body.wm-secondary.publish-page .publish-main {
  width: min(calc(100% - 64px), 1320px);
  margin: 0 auto;
  padding-bottom: calc(40 * var(--wm-page-unit));
}
body.wm-secondary .publish-layout { gap: var(--wm-page-gap); }
body.wm-secondary .publish-preview-panel { top: calc(var(--wm-header-height, 84px) + var(--wm-page-gap)); }
body.wm-secondary .g-grid { gap: var(--wm-page-gap); }
body.wm-secondary .g-card :is(h2, h3) { font-size: calc(18 * var(--wm-page-unit)); }
body.wm-secondary :is(.g-card-kicker, .g-card-footer, .g-result-line, .g-filter-label) { font-size: var(--wm-page-small); }
body.wm-secondary .g-search { max-width: calc(420 * var(--wm-page-unit)); min-height: calc(42 * var(--wm-page-unit)); padding: calc(8 * var(--wm-page-unit)) calc(14 * var(--wm-page-unit)); }
body.wm-secondary .g-toolbar { gap: calc(16 * var(--wm-page-unit)); padding-bottom: var(--wm-page-gap); }
body.wm-secondary .g-work-heading { padding-bottom: var(--wm-page-gap); }
body.wm-secondary .g-work-description { margin-top: calc(14 * var(--wm-page-unit)); }
body.wm-secondary .g-detail-heading { padding: 0 0 var(--wm-page-gap); }
body.wm-secondary .g-publication-note { font-size: var(--wm-page-small); }

@media (min-width: 1600px) {
  body.wm-secondary.wemeld-account .account-shell,
  body.wm-secondary.gallery-page #gallery-main,
  body.wm-secondary.publish-page .publish-main {
    width: min(calc(100% - 64px), clamp(1320px, 56.25vw, 2160px));
    max-width: none;
    padding-inline: 0;
  }
  body.wm-secondary.wemeld-account .account-shell {
    grid-template-columns: calc(180 * var(--wm-page-unit)) minmax(0, 1fr);
    gap: calc(28 * var(--wm-page-unit));
  }
  body.wm-secondary .account-sidebar { padding-top: calc(54 * var(--wm-page-unit)); }
  body.wm-secondary .account-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wm-page-gap); }
  body.wm-secondary .profile-copy p { max-width: 32em; }
  body.wm-secondary .publish-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  body.wm-secondary :is(.publish-panel, .publish-preview-panel) { padding: calc(24 * var(--wm-page-unit)); }
  body.wm-secondary .publish-panel-heading { gap: calc(12 * var(--wm-page-unit)); flex-wrap: wrap; }
  body.wm-secondary .publish-panel-heading .publish-help { margin-left: 0; }
}
@media (max-width: 1000px) {
  body.wm-secondary .publish-layout { grid-template-columns: minmax(0, 1fr); }
  body.wm-secondary .publish-preview-panel { position: static; }
}
@media (max-width: 760px) {
  body.wm-secondary { --wm-page-body: 13px; --wm-page-small: 11px; --wm-page-title: 28px; --wm-page-gap: 18px; --wm-page-radius: 18px; }
  body.wm-secondary :is(.hub-main, .billing-main, .account-main, #gallery-main, .publish-main) { padding-top: 32px; }
  body.wm-secondary :is(.hub-intro, .page-heading, .g-intro, .publish-intro) { margin-bottom: 28px; }
  body.wm-secondary .g-intro { align-items: flex-start; flex-wrap: wrap; }
  body.wm-secondary .g-intro-copy { flex: 1 1 100%; }
  body.wm-secondary.gallery-page #gallery-main,
  body.wm-secondary.publish-page .publish-main { width: calc(100% - 40px); }
  body.wm-secondary .g-toolbar { flex-wrap: wrap; }
  body.wm-secondary .g-search { width: 100%; max-width: none; }
  body.wm-secondary .g-filter-label { margin-left: 0; }
  body.wm-secondary .g-refresh { margin-left: auto; }
  body.wm-secondary :is(.primary-button, .secondary-button, .g-button, .publish-primary, .publish-secondary) { min-height: 38px; padding: 9px 13px; font-size: 12px; }
  body.wm-secondary .g-detail-actions { flex-wrap: wrap; justify-content: flex-end; }
}
@media (prefers-reduced-transparency: reduce) {
  body.wm-secondary :is(.project-card, .profile-card, .recent-project, .credits-card, .wallet-panel, .plan-card, .pack-card, .g-card, .publish-panel, .publish-preview-panel) {
    background: linear-gradient(132deg, #292929, #1b1b1b 74%, #242424);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}