/* Public workspaces use the homepage canvas, surfaces and gutters. */
.public-site :is(.navigation-page, .mail-workspace, .account-workspace, .account-shell--auth) {
  --workspace-gap: var(--space-3);
  --workspace-padding: 20px;
  --workspace-rule: 1px solid var(--public-rule);
}

.public-site .navigation-page,
.public-site .navigation-page.navigation-directory-page,
.public-site main.navigation-detail-page,
.public-site .temp-mail-page.mail-workspace,
.public-site .account-shell.account-workspace,
.public-site .account-shell.account-shell--auth {
  padding-block: 20px 48px;
  background: var(--public-canvas);
}

.public-site .navigation-page .navigation-shell,
.public-site .navigation-page .directory-shell,
.public-site .mail-workspace .mail-shell,
.public-site .account-workspace .account-dashboard-layout {
  width: min(var(--public-max), calc(100% - var(--public-gutter) * 2));
  max-width: var(--public-max);
  margin-inline: auto;
  padding-inline: 0;
}

.public-site .navigation-page :is(.directory-header, .directory-sidebar, .directory-mobile-menu, .directory-section, .directory-results, .navigation-detail-header, .navigation-snapshot, .navigation-site-overview, .navigation-indexing, .navigation-similar, .navigation-form-header, .navigation-submit-form, .navigation-cost-panel),
.public-site .mail-workspace :is(.mail-workspace-header, .mail-toolbar, .mail-list-pane, .mail-reader, .mail-guest),
.public-site .mail-workspace .mail-panel:not(.mail-panel--inbox),
.public-site .account-shell--auth :is(.account-access__heading, .account-access__body),
.public-site .account-workspace :is(.account-profile-rail, .account-dashboard-head, .account-overview-tabs, .account-payment-panel),
.public-site .account-workspace .account-dashboard-main > .account-dashboard-section {
  min-width: 0;
  border: var(--workspace-rule);
  border-radius: 0;
  background: var(--public-surface);
  box-shadow: none;
}

/* Directory overview, category results and site details. */
.public-site .navigation-directory-page { --directory-gap: var(--workspace-gap); }
.public-site .navigation-page .directory-header {
  margin-bottom: var(--workspace-gap);
  padding: var(--workspace-padding);
}
.public-site .navigation-page .directory-layout { gap: var(--workspace-gap); }
.public-site .navigation-page .directory-sidebar { padding: 16px 10px; top: 20px; }
.public-site .navigation-page .directory-section,
.public-site .navigation-page .directory-results { padding: var(--workspace-padding); }
.public-site .navigation-page .directory-section + .directory-section { margin-top: var(--workspace-gap); }
.public-site .navigation-page .directory-section-heading,
.public-site .navigation-page .directory-results-heading {
  padding-bottom: 12px;
  border-bottom: var(--workspace-rule);
}
.public-site .navigation-page .directory-content > .directory-empty {
  padding: 32px var(--workspace-padding);
  border: var(--workspace-rule);
  background: var(--public-surface);
}
.public-site .navigation-page .directory-mobile-menu { padding: 12px var(--workspace-padding); }
.public-site .navigation-page .directory-mobile-menu summary { padding-bottom: 0; }
.public-site .navigation-page .directory-mobile-menu[open] .directory-category-links { padding-block: 12px 0; }
.public-site .navigation-page :is(.directory-breadcrumb, .navigation-breadcrumb) { margin-bottom: var(--workspace-gap); }
.public-site .navigation-page :is(.navigation-detail-header, .navigation-form-header) {
  padding: var(--workspace-padding);
  margin-bottom: var(--workspace-gap);
}
.public-site .navigation-page :is(.navigation-detail-split, .navigation-submit-layout) { gap: var(--workspace-gap); }
.public-site .navigation-page :is(.navigation-site-overview, .navigation-submit-form, .navigation-cost-panel) { padding: var(--workspace-padding); }
.public-site .navigation-page :is(.navigation-indexing, .navigation-similar) {
  margin-top: var(--workspace-gap);
  padding: var(--workspace-padding);
}

/* Inbox panes share a canvas, with no extra frame around the entire inbox. */
.public-site .mail-workspace .mail-shell { display: grid; gap: var(--workspace-gap); }
.public-site .mail-workspace .mail-workspace-header { padding: var(--workspace-padding) var(--workspace-padding) 0; }
.public-site .mail-workspace .mail-heading { margin-bottom: 12px; }
.public-site .mail-workspace .temp-mail-tabs { border-bottom: 0; }
.public-site .mail-workspace .mail-notice { margin: 0 !important; }
.public-site .mail-workspace .mail-toolbar { padding: 12px var(--workspace-padding); }
.public-site .mail-workspace .mail-inbox { gap: var(--workspace-gap); }
.public-site .mail-workspace .mail-list-heading { padding-inline: 16px 12px; }
.public-site .mail-workspace .mail-list-limit { padding-left: 16px; }
.public-site .mail-workspace .mail-reader { padding: var(--workspace-padding); }
.public-site .mail-workspace .mail-panel:not(.mail-panel--inbox) { padding: var(--workspace-padding); }
.public-site .mail-workspace :is(.mail-create-layout, .mail-compose-layout) { padding: 0; gap: 32px; }
.public-site .mail-workspace .mail-sent-heading { padding-top: 0; }
.public-site .mail-workspace .mail-guest { max-width: none; margin: 0; padding: 56px var(--workspace-padding); }
.public-site .mail-workspace .mail-guest-facts { max-width: 560px; margin-inline: auto; }

/* Account navigation, page heading and content are separate white surfaces. */
.public-site .account-workspace .account-dashboard-layout { gap: var(--workspace-gap); }
.public-site .account-workspace .account-profile-rail { padding: var(--workspace-padding); }
.public-site .account-workspace .account-dashboard-main {
  display: flex;
  flex-direction: column;
  gap: var(--workspace-gap);
  min-width: 0;
  border: 0;
  background: transparent;
}
.public-site .account-workspace .account-dashboard-head { padding: var(--workspace-padding); }
.public-site .account-workspace .account-dashboard-alert { padding: 0; }
.public-site .account-workspace .account-dashboard-main > .account-dashboard-section { padding: 24px var(--workspace-padding); }
.public-site .account-workspace .account-overview-tabs {
  padding-inline: var(--workspace-padding);
  margin-bottom: calc(-1 * var(--workspace-gap));
  overflow-x: auto;
}
.public-site .account-workspace .account-dashboard-main > .account-overview-panel { border-top: 0; }
.public-site .account-workspace .account-settings-form { max-width: none; }
.public-site .account-shell--payment.account-workspace {
  width: min(640px, calc(100% - var(--public-gutter) * 2));
  padding-inline: 0;
}
.public-site .account-workspace .account-payment-panel { padding: 24px var(--workspace-padding); }

/* Login, registration and recovery share the same section treatment. */
.public-site .public-main:has(.account-shell--auth) { background: var(--public-canvas); }
.public-site .account-shell.account-shell--auth { width: 100%; }
.public-site .account-shell--auth .account-access {
  display: grid;
  gap: var(--workspace-gap);
  width: min(480px, calc(100% - var(--public-gutter) * 2));
  margin-inline: auto;
}
.public-site .account-shell--auth .account-access__heading {
  margin: 0;
  padding: var(--workspace-padding);
}
.public-site .account-shell--auth .account-access__body { padding: 24px var(--workspace-padding); }

@media (max-width: 959.98px) {
  .public-site .account-workspace .account-profile-rail { gap: 16px; }
}

@media (max-width: 639.98px) {
  .public-site :is(.navigation-page, .mail-workspace, .account-workspace, .account-shell--auth) { --workspace-padding: 16px; }
  .public-site .navigation-page .directory-header { grid-template-columns: minmax(0, 1fr) auto; }
  .public-site .navigation-page .directory-search-field { gap: 8px; padding-left: 10px; }
  .public-site .navigation-page .directory-search button { min-width: 60px; padding-inline: 12px; }
  .public-site .navigation-page .directory-section-heading { flex-wrap: wrap; gap: 4px 12px; }
  .public-site .navigation-page .directory-shortcuts { gap: 12px; }
  .public-site .mail-workspace .mail-list-heading { padding-inline: 12px; }
  .public-site .mail-workspace :is(.mail-create-layout, .mail-compose-layout) { gap: 24px; }
  .public-site .mail-workspace .mail-guest { padding-block: 40px; }
  .public-site .account-workspace .account-profile-rail { gap: 12px; }
  .public-site .account-workspace .account-dashboard-head { gap: 12px; }
  .public-site .account-workspace .account-dashboard-main > .account-dashboard-section { padding: 20px var(--workspace-padding); }
  .public-site .account-shell--auth .account-access__body { padding: 20px var(--workspace-padding); }
}