/* NameCard panel design standard v1.
   Visual layers only. Never style Firebase status, forms' data, or SVG card content.
   All 3 screens import THIS file last. Future panel styling belongs here. */
:root {
  --nc-panel-border: #d5dee8;
  --nc-panel-divider: #e2e8f0;
  --nc-panel-radius: 12px;
  --nc-panel-padding: 24px;
  --nc-panel-background: #ffffff;
}

/* A screen consists of independent primary panels, each with one outline. */
body.nc-home :is(.nc-home-info, .nc-home-entry),
body.nc-public :is(.nc-public-main, .nc-public-aside),
body.nc-admin :is(#adminFormPanel, #adminPreviewPanel) {
  box-sizing: border-box;
  min-width: 0;
  background: var(--nc-panel-background);
  border: 1px solid var(--nc-panel-border);
  border-radius: var(--nc-panel-radius);
  box-shadow: none;
  padding: var(--nc-panel-padding);
}

/* Public sidebar: the aside provides the ONLY enclosing box. */
body.nc-public .nc-public-aside #ncPublicFollowingList > .nc-follow-section,
body.nc-public .nc-public-aside #ncPublicPromotion > .nc-create-own {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* The parent aside already contains its visible, localized heading.
   Never display a second title created by the following-list module. */
body.nc-public .nc-public-aside #ncPublicFollowingList .nc-follow-title {
  display: none !important;
}
body.nc-public .nc-public-aside > .nc-public-aside-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}

/* List rows have separators, not boxes inside boxes. */
body.nc-public .nc-public-aside .nc-follow-list {
  display: grid;
  gap: 0;
}
body.nc-public .nc-public-aside .nc-follow-list > .nc-follow-target {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  text-decoration: none;
  overflow-wrap: anywhere;
}
body.nc-public .nc-public-aside .nc-follow-list > .nc-follow-target + .nc-follow-target {
  border-top: 1px solid var(--nc-panel-divider);
}
body.nc-public .nc-public-aside a.nc-follow-target:hover {
  background: #f6f9fc;
}
body.nc-public .nc-public-aside .nc-follow-target--unavailable:hover {
  background: transparent;
}

/* Promotion is a footer within the same sidebar, not another card. */
body.nc-public .nc-public-aside #ncPublicPromotion:not(:empty) {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--nc-panel-divider);
  text-align: center;
}
body.nc-public .nc-public-aside #ncPublicPromotion > .nc-create-own {
  text-align: center;
}
body.nc-public .nc-public-aside #ncPublicPromotion .nc-create-own p {
  margin: 0 0 12px;
}

/* Admin: its preview panel is the outline; following is a subsection. */
body.nc-admin #adminPreviewPanel > .nc-follow-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 24px 0 0;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--nc-panel-divider);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* A real SVG name card remains visually separate from the editing panel. */
@media (max-width: 599px) {
  :root { --nc-panel-padding: 16px; }
}
