/* ============================================================
   yourcustomprofile.app — template surfaces
   ============================================================

   This file gives a template its *character*: the paper it is printed on, the
   type it sets, and the ornaments it hangs on that paper.

   Placement is not decided here. Which of the three card regions sits where,
   how wide its column is and how far apart the rows run are decided once, in
   `content/template-compose.mjs`, and spent into `template-compose.css`. That
   is what keeps the studio tile honest: the miniature is drawn from the same
   table the card is laid out from, so the tile and the card cannot disagree
   about the skeleton.

   What this file *may* do is move pixels inside a box the table has already
   placed. A portrait that centres its disc, a disc that is drawn larger than
   the member's pick, a pane that paints a plate inside its own region, a
   family of rules for one region's descendants — none of that is placement,
   and pushing it into the table would mean a "skeleton" that has to know about
   drop shadows.

   The line, stated as a test: a rule here may not name `.profile-card__layout`
   with `display`, `grid-template-*` or `grid-area`, and may not position
   `.profile-card__portrait`, `.profile-card__body` or `.profile-card__links`.
   A rule *inside* one of those three (`.tpl-split .profile-card__portrait`,
   `.tpl-bento .profile-card__body`) is a region styling its own contents and
   is allowed — the region itself is already where the table put it.

   Colour policy: a template may keep the member's palette or add paper of its
   own, but it never resurrects a hue the member switched off. Every value
   below derives from `--text-0/1/2`, `--border`, `--bg-*` or `--accent`, so a
   profile with accents disabled stays silver instead of snapping back to
   indigo.

   Avatar policy: a template may scale the disc, but always off the member's
   `--avatar-size`. A row that writes `calc(116px * 1.35)` throws away a
   member's 142px choice and hands every profile the same disc.
   ============================================================ */

/* ---------------------------------------------------------- shared paper */

/* The identity and the badges follow the card's text axis. `is-left` already
   does this for the id and the meta row; the badge strip kept centring, which
   left one centred ribbon under a left-aligned name. */
.profile-card.is-left .profile-badges { justify-content: flex-start; }

/* A template title is a label, not a second headline. Every row below that
   wants a wider tracking inherits this baseline instead of restating it. */
.profile-card .profile-title { text-wrap: pretty; }

/* ================================================================
   1. glass — the signature card
   ================================================================ */

/* Face, name, links on one centred axis. The disc is centred by its own
   margins rather than by the grid, so the portrait keeps the full column and
   the paper behind it stays one shape. */
.tpl-glass .avatar { margin-left: auto; margin-right: auto; }

/* ================================================================
   2. editorial — a masthead, read down the page
   ================================================================ */

/* No shell: the page supplies the edges, the face is centred over the name and
   the buttons close the sheet as a wide band. An editorial profile that asked
   for left alignment gets it — a centred column under a left masthead reads as
   a mistake, not a choice. */
.profile-card.tpl-editorial {
  max-width: min(var(--card-width, 560px), 100%);
  padding: 0;
}
.tpl-editorial .profile-card__layout { justify-items: center; }
/* The identity fills the measure; only the face shrink-wraps to its disc. A
   centred grid item with no width would collapse the body to max-content, and
   the body is a container, so its max-content is nothing. */
.profile-card.tpl-editorial .profile-card__body { width: 100%; }
.profile-card.tpl-editorial.is-left .profile-card__layout {
  --tc-text: left;
  --tc-portrait-justify: start;
  justify-items: start;
}
.tpl-editorial .avatar {
  width: calc(var(--avatar-size, 116px) * 1.12);
  height: calc(var(--avatar-size, 116px) * 1.12);
}
.tpl-editorial.is-left .avatar { margin-left: 0; }
.tpl-editorial .profile-name { --tc-name-size: clamp(2.4rem, 6.6vw, 4rem); }
.tpl-editorial .profile-bio { max-width: 44ch; }
.tpl-editorial .pg-link {
  min-height: 58px;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.06);
}
.tpl-editorial .pg-link:hover { background: rgb(255 255 255 / 0.085); }
.tpl-editorial .profile-socials { margin-top: 18px; }

/* ================================================================
   3. split — the business card
   ================================================================ */

/* The portrait column is a pane: the face is centred in it, the identity runs
   down the right, and the buttons take the full width underneath both. */
.profile-card.tpl-split { max-width: min(var(--card-width, 880px), 100%); }
.tpl-split .profile-card__portrait { display: grid; place-items: center; }
.tpl-split .avatar {
  width: calc(var(--avatar-size, 116px) * 1.35);
  height: calc(var(--avatar-size, 116px) * 1.35);
  margin-bottom: 0;
}
.tpl-split .profile-card__body { text-align: left; }
.tpl-split .profile-card__id,
.tpl-split .profile-meta { align-items: flex-start; justify-content: flex-start; }
.tpl-split .profile-title,
.tpl-split .profile-bio { text-align: left; margin-left: 0; }
.tpl-split .profile-socials { justify-content: flex-start; margin-top: 18px; }
/* A lone button in a two-column stack spans both, or it reads as a cell that
   lost its partner. */
.tpl-split .profile-links .pg-link:only-child { grid-column: 1 / -1; }

/* ================================================================
   4. poster — full-bleed type, hard shadows
   ================================================================ */

/* A printed sheet: the face signs the top as a colophon, the name is the
   artwork, the cells are cut-outs with a hard offset shadow. Nothing is
   blurred or rounded. */
.profile-card.tpl-poster { max-width: min(var(--card-width, 760px), 100%); }
.profile-card.tpl-poster .profile-card__body { width: 100%; }
.tpl-poster .profile-card__portrait {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.tpl-poster .avatar {
  width: calc(var(--avatar-size, 116px) * 0.9);
  height: calc(var(--avatar-size, 116px) * 0.9);
  margin: 0 0 22px;
}
.tpl-poster .profile-name {
  --tc-name-size: clamp(3rem, 8vw, 5.6rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.06em;
  max-width: 12ch;
}
.tpl-poster .profile-card__body { text-align: left; }
.tpl-poster .profile-card__id,
.tpl-poster .profile-meta { align-items: flex-start; justify-content: flex-start; }
.tpl-poster .profile-bio { max-width: 44ch; margin-left: 0; font-size: 1.03rem; }
.tpl-poster .profile-title { text-align: left; }
.tpl-poster .profile-socials { justify-content: flex-start; margin-top: 18px; }

/* ================================================================
   5. terminal — the session window
   ================================================================ */

/* A CRT: monospace everywhere, square corners, and a header strip ruled off
   from the output below it. The only template that sets its own dark ground,
   because a terminal in the member's pastel palette is not a terminal. */
.profile-card.tpl-terminal {
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--accent-2) 34%, var(--border));
  background:
    linear-gradient(
      180deg,
      rgb(34 211 238 / calc(0.05 * var(--card-opacity, 1))),
      rgb(3 8 14 / calc(0.74 * var(--card-opacity, 1)))
    ),
    rgb(3 8 14 / calc(0.7 * var(--card-opacity, 1)));
  box-shadow: 0 0 0 1px rgb(34 211 238 / 0.08), 0 30px 90px -50px rgb(34 211 238 / 0.45);
}
.tpl-terminal .profile-card__portrait {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgb(34 211 238 / 0.16);
  margin-bottom: 22px;
}
/* A session avatar is a fixed badge in the header, not a portrait: it keeps one
   size whatever the member picked, because the strip is sized around it. */
.tpl-terminal .avatar {
  width: 68px;
  height: 68px;
  margin: 0;
  border-radius: 10px;
}
.tpl-terminal .avatar__disc { border-radius: 8px; }
.tpl-terminal .avatar__ring { border-radius: 12px; }
.tpl-terminal .profile-card__id,
.tpl-terminal .profile-meta { align-items: flex-start; justify-content: flex-start; }
.tpl-terminal .profile-card__body { text-align: left; }
.tpl-terminal .profile-name,
.tpl-terminal .profile-title { font-family: var(--font-mono); }
.tpl-terminal .profile-name { --tc-name-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -0.05em; }
.tpl-terminal .profile-bio {
  margin-left: 0;
  font-family: var(--font-mono);
  font-size: 0.83rem;
}
.tpl-terminal .profile-socials { justify-content: flex-start; margin-top: 18px; }
.tpl-terminal .pg-link {
  border-radius: 7px;
  border-color: rgb(34 211 238 / 0.17);
  background: rgb(34 211 238 / 0.025);
  font-family: var(--font-mono);
}
.tpl-terminal .pg-link:hover { background: rgb(34 211 238 / 0.07); }
.tpl-terminal .pg-link::before {
  content: ">";
  margin-right: -4px;
  color: var(--accent-2);
  font-family: var(--font-mono);
}
.tpl-terminal .pg-link__label { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 400; }
.tpl-terminal .pg-link__icon { border-radius: 4px; }

/* ================================================================
   6. bento — tiles on an open page
   ================================================================ */

/* No outer card: the portrait and the identity are two tiles on a tray. The
   gaps come from the table, so the tray stays even; the plates are painted
   here, inside the regions the table placed. */
.profile-card.tpl-bento { max-width: min(var(--card-width, 860px), 100%); }
.tpl-bento .profile-card__portrait {
  padding: 22px;
  border-radius: 24px;
  background: rgb(255 255 255 / 0.055);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.tpl-bento .avatar {
  width: 100%;
  max-width: 150px;
  height: auto;
  aspect-ratio: 1;
  margin: 0 0 14px;
}
.tpl-bento .profile-card__body {
  padding: 24px;
  border-radius: 24px;
  background: rgb(255 255 255 / 0.035);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.tpl-bento .profile-card__id,
.tpl-bento .profile-meta { align-items: flex-start; justify-content: flex-start; }
.tpl-bento .profile-card__body { text-align: left; }
.tpl-bento .profile-bio { margin-left: 0; }
.tpl-bento .profile-socials { justify-content: flex-start; margin-top: 18px; }
.tpl-bento .profile-links .pg-link { background: rgb(255 255 255 / 0.06); }

/* ================================================================
   7. solid — one flat plane
   ================================================================ */

/* Deliberately the plainest row: no shell, no glass, no glow. The same centred
   axis as glass, and the links as rows in a table of contents. */
.profile-card.tpl-solid { max-width: min(var(--card-width, 520px), 100%); }
.tpl-solid .avatar { margin-left: auto; margin-right: auto; }
.tpl-solid .profile-socials { justify-content: center; }
.tpl-solid .profile-card__id,
.tpl-solid .profile-meta { justify-content: center; }
.tpl-solid .profile-bio { margin-left: auto; margin-right: auto; }
.tpl-solid .profile-card__body { text-align: center; }

/* ================================================================
   the fold — what each skin gives back when the card is one column
   ================================================================ */

/* `template-compose.css` folds every skeleton to portrait · identity · actions
   below 470px of card. Two skins size their disc off the card rather than off
   the member, and at one column that would either shrink it or stretch it, so
   both hand the member's size back here. The split pane also stops being a
   pane: a centred disc over a centred name is what a folded card wants. */
@container card (max-inline-size: 470px) {
  .tpl-split .avatar {
    width: var(--avatar-size, 116px);
    height: var(--avatar-size, 116px);
    margin-bottom: 22px;
  }
  .tpl-split .profile-card__body,
  .tpl-split .profile-title,
  .tpl-split .profile-bio { text-align: center; }
  .tpl-split .profile-card__id,
  .tpl-split .profile-meta,
  .tpl-split .profile-socials { align-items: center; justify-content: center; }
  .tpl-bento .avatar { max-width: var(--avatar-size, 116px); }
  .tpl-bento .profile-card__portrait { padding: 18px; }
  .tpl-bento .profile-card__body { padding: 20px; }
  .tpl-poster .profile-name { --tc-name-size: clamp(2.6rem, 11vw, 4.4rem); }
}

/* Sections 8–16 (banner … meridian) retired with the gated templates —
   the shipped set is the seven skeletons glass…solid. */