/* NameCard canonical three-page grid v1.
   One source for page width, scrollbar gutter and column proportions.
   Header row heights: namecard-header.css; panel decoration: namecard-panels.css.
   Do not append page-specific width corrections here. */
:root {
  --nc-page-width: 1200px;
  --nc-page-side-width: 360px;
  --nc-page-column-gap: 24px;
  --nc-page-inset: 32px;
}

/* A short homepage and a long business card must have the same scrollport
   width; otherwise their centered 1200px containers drift by half a scrollbar. */
html { scrollbar-gutter: stable; }

/* Header and three page shells use the exact same centered width formula.
   The header's own height and vertical position remain in namecard-header.css. */
body.nc-home .container,
body.nc-admin .app,
body.nc-public .card.nc-public-shell {
  box-sizing: border-box !important;
  width: min(var(--nc-page-width), calc(100% - var(--nc-page-inset))) !important;
  max-width: var(--nc-page-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* No second wrapper/padding layer may steal width from the grid. */
body.nc-home {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  padding-bottom: 48px !important;
}
body.nc-home .container {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.nc-public {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
body.nc-home .nc-home-layout {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.nc-admin .app {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.nc-public .card.nc-public-shell {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* All three grid layouts have identical widths at desktop sizes.
   1200 - 360 - 24 = 816px for the main column. */
@media (min-width: 901px) {
  body.nc-home .nc-home-layout,
  body.nc-admin .layout,
  body.nc-public #ncPublicColumns.nc-public-two-column {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--nc-page-side-width) !important;
    gap: var(--nc-page-column-gap) !important;
    align-items: start !important;
  }
  /* The HTML order of admin controls is editor then preview.
     Their visual order is preview on the left, editor on the right. */
  body.nc-admin .layout > #adminPreviewPanel {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body.nc-admin .layout > #adminFormPanel {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}

/* A grid child may shrink; never cause a wider-than-page column. */
body.nc-home .nc-home-layout > *,
body.nc-admin .layout > *,
body.nc-public #ncPublicColumns > * {
  min-width: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
}
body.nc-home .nc-home-entry button { width: 100%; }

/* Image-backed/SVG name cards keep their natural aspect ratio. */
body.nc-public .nc-public-main .public-face {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.nc-public .nc-public-main .public-face :is(img, svg) {
  max-width: 100%;
  height: auto;
}
body.nc-public .nc-public-aside :is(a, button, p) {
  overflow-wrap: anywhere;
}

/* Old home-page button rules must not turn logout into a full-width button. */
.nc-breadcrumbs button {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.nc-breadcrumbs button:focus-visible {
  outline: 2px solid #1769aa;
  outline-offset: 2px;
}

/* Tablets: stack main / sidebar. Preserve admin's existing mobile tabs
   (namecard-ui.css) by not forcing a display mode on its narrow layout. */
@media (max-width: 900px) {
  body.nc-home .nc-home-layout,
  body.nc-public #ncPublicColumns.nc-public-two-column {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  body.nc-home .nc-home-entry { grid-row: 1; }
  body.nc-home .nc-home-info { grid-row: 2; }
  body.nc-admin .layout { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Same horizontal insets on all small-screen pages. */
@media (max-width: 599px) {
  :root { --nc-page-inset: 24px; }
}