/**
 * GENERATED by tools/build-custom-layout.mjs — do not edit by hand.
 * Source: content/custom-layout.mjs
 *
 * Loaded after template-compose.css so a custom row wins against the
 * silhouette's own skeleton, and before catalog-nameplate.css.
 *
 * Three properties hold the whole contract:
 *
 *   · Every rule is keyed on `tpl-custom`, so a profile that never turned the
 *     switch on keeps today's stylesheet byte for byte.
 *   · Every declaration falls back to the compose contract's own variable
 *     (`--tc-*`), so an axis the member left alone behaves exactly as the
 *     silhouette intends. That is the zero-means-auto rule in CSS form.
 *   · Nothing writes a grid property that the 470px fold also writes, except
 *     the fold block at the bottom of this file, which repeats it on purpose.
 *     The compose fold is *earlier* in the cascade than these rules, so without
 *     the repeat a custom skeleton would survive on a phone.
 */

/* The three side skeletons. One class each, so the renderer only has to set the
   side it read and never has to know what a valid area string looks like.
   `keep` has no rule: the silhouette's own --tc-cols / --tc-areas answer. */
.profile-card.tpl-custom.cf-side-top .profile-card__layout {
  --cf-cols: minmax(0, 1fr);
  --cf-areas: "portrait" "body" "links";
}

.profile-card.tpl-custom.cf-side-left .profile-card__layout {
  --cf-cols: clamp(96px, calc(var(--cf-pw, 196) * 1px), 320px) minmax(0, 1fr);
  --cf-areas: "portrait body" "links links";
  --cf-cdisplay: grid;
  --cf-pjust: stretch;
}

.profile-card.tpl-custom.cf-side-right .profile-card__layout {
  --cf-cols: minmax(0, 1fr) clamp(96px, calc(var(--cf-pw, 196) * 1px), 320px);
  --cf-areas: "body portrait" "links links";
  --cf-cdisplay: grid;
  --cf-pjust: stretch;
}

/* --- the spend -------------------------------------------------------- */

.profile-card.tpl-custom .profile-card__layout {
  grid-template-columns: var(--cf-cols, var(--tc-cols, minmax(0, 1fr)));
  grid-template-areas: var(--cf-areas, var(--tc-areas, "portrait" "body" "links"));
  display: var(--cf-cdisplay, var(--tc-cdisplay, grid));
  column-gap: var(--cf-gap, var(--tc-colgap, 0));
  row-gap: var(--cf-gap, var(--tc-rowgap, 0));
}

/* A pane stretch-fits its column; a stack keeps the silhouette's decision,
   which is what lets glass centre the disc with its own auto margins. */
.profile-card.tpl-custom .profile-card__portrait {
  justify-self: var(--cf-pjust, var(--tc-portrait-justify, stretch));
}

/* Copy alignment is a member decision only when they made one. `auto` emits no
   class, so the silhouette's text-align survives — including the editorial
   skin's justify-items, which is a grid decision this file never touches. */
.profile-card.tpl-custom.cf-text-center .profile-card__body,
.profile-card.tpl-custom.cf-text-center .profile-card__links { text-align: center; }
.profile-card.tpl-custom.cf-text-left .profile-card__body,
.profile-card.tpl-custom.cf-text-left .profile-card__links { text-align: left; }
.profile-card.tpl-custom.cf-text-left .profile-card__id,
.profile-card.tpl-custom.cf-text-left .profile-meta { align-items: flex-start; justify-content: flex-start; }
.profile-card.tpl-custom.cf-text-left .profile-socials { justify-content: flex-start; }

/* The identity's order. Only spent inside `cf-reorder`, because `order` does
   nothing in the block layout the shipped seven use — and turning the body into
   a grid is exactly the change that would rewrite their margin rhythm, so it
   must not happen for a member who only moved their portrait. */
.profile-card.tpl-custom.cf-reorder .profile-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--cf-bodygap, var(--tc-browgap, 8px));
}
.profile-card.tpl-custom.cf-reorder .profile-card__id { order: var(--cf-ord-id, var(--tc-b-id, 1)); }
.profile-card.tpl-custom.cf-reorder .profile-title { order: var(--cf-ord-title, var(--tc-b-title, 2)); }
.profile-card.tpl-custom.cf-reorder .profile-bio { order: var(--cf-ord-bio, var(--tc-b-bio, 3)); }
.profile-card.tpl-custom.cf-reorder .profile-meta { order: var(--cf-ord-meta, var(--tc-b-meta, 4)); }
/* The four parts kept their own top margins because a block collapses them
   through the column. A grid does not collapse, so the margins have to go or
   every gap in the identity doubles. The bio's measure also has to go: it was
   `42ch` because the column had room, and a reordered plate may not. */
.profile-card.tpl-custom.cf-reorder .profile-card__body > .profile-title,
.profile-card.tpl-custom.cf-reorder .profile-card__body > .profile-bio,
.profile-card.tpl-custom.cf-reorder .profile-card__body > .profile-meta {
  margin-top: 0;
}
.profile-card.tpl-custom.cf-reorder .profile-card__body > .profile-bio { max-width: none; }

/* The link stack. The untouched fallback is the silhouette's own track list,
   which is why the renderer hands over a finished `repeat()` rather than a
   count: nested `repeat()` cannot express "two columns because split says so". */
.profile-card.tpl-custom .profile-card__links > .profile-links {
  grid-template-columns: var(--cf-lcols, var(--tc-lcols, minmax(0, 1fr)));
  gap: var(--cf-linkgap, var(--tc-lgap, 9px));
}

/* --- the handles ------------------------------------------------------
   Direct manipulation, studio only. `cf-handles` is set by profile.js when the
   card is in a preview frame and the member actually has a pane to drag — so a
   visitor's page has neither the class nor the layer, and a card with custom
   off never grows a grab mark it cannot honour.

   The mark is a thin rule on the pane's inner edge with three dots, which is
   the smallest thing that reads as "drag me" without covering the portrait's
   own frame. The hit area is the edge itself (set in profile.js), so the mark
   stays visually quiet at any pane width. */
.cf-handle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  pointer-events: none;
}

.cf-handle--divider {
  width: 2px;
  height: var(--hh, 100%);
  transform: translateX(calc(var(--hx, 0px) - 1px));
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--t, 0.16s);
}

/* The layer only shows itself when the pointer is in the card, or during a
   drag. A permanent rule down the card would look like a defect in the design
   rather than an affordance. */
.profile-card.cf-handles:hover .cf-handle--divider,
.profile-card.cf-handles.is-handling .cf-handle--divider,
html.is-handling .cf-handle--divider { opacity: 1; }

.cf-handle__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 2px;
  place-items: center;
  width: 14px;
  height: 30px;
  padding: 4px 0;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--bg-0) 88%, transparent);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.55);
}

.cf-handle__grip i {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 78%, var(--text-0));
}

/* The snap guide. A drag that stops moving without saying why reads as a broken
   handle, so the line it caught on is drawn dashed and named. `--hx`/`--hh` are
   the same pair the divider uses, so the two agree by construction. */
.cf-handle--guide {
  width: 0;
  height: var(--hh, 100%);
  transform: translateX(var(--hx, 0px));
  border-left: 1px dashed color-mix(in srgb, var(--accent) 72%, transparent);
  opacity: 1;
}

.cf-handle--guide[data-guide="designed"] {
  border-left-style: solid;
  border-left-color: color-mix(in srgb, var(--text-2) 70%, transparent);
}

.cf-handle__label {
  position: absolute;
  top: 8px;
  left: 6px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 5px;
  background: color-mix(in srgb, var(--bg-0) 90%, transparent);
  color: color-mix(in srgb, var(--accent) 82%, var(--text-0));
  font-family: var(--font-mono, monospace);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cf-handle--guide[data-guide="designed"] .cf-handle__label {
  color: var(--text-1);
  border-color: var(--border);
}

/* While dragging, the iframe must not turn the gesture into a text selection or
   a card tilt, and the card's own pointer effects must hold still or the pane
   chases the pointer. */
html.is-handling,
html.is-handling * {
  cursor: col-resize !important;
  user-select: none !important;
}
html.is-handling .profile-card { transition: none !important; }

/* --- the fold ---------------------------------------------------------
   Below 470px the card is one column whatever the member asked for. This block
   repeats the compose fold on purpose: these rules are later in the cascade, so
   the earlier fold cannot stop them. Identical values, later position. A pane
   also gives its portrait back to the stretched column. */
@container card (max-inline-size: 470px) {
  .profile-card.tpl-custom .profile-card__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "portrait" "body" "links";
    display: grid;
    column-gap: 0;
  }
  .profile-card.tpl-custom .profile-card__portrait { justify-self: stretch; }
  .profile-card.tpl-custom .profile-card__links > .profile-links {
    grid-template-columns: minmax(0, 1fr);
  }
  /* A reordered identity on a phone keeps the member's order — that is the one
     decision that still makes sense in one column — but drops the custom gap,
     because the folded card's rhythm is its own. */
  .profile-card.tpl-custom.cf-reorder .profile-card__body {
    row-gap: var(--cf-bodygap, var(--tc-browgap, 8px));
  }
  /* No pane survives the fold, so no handle may either: a divider floating
     over a stacked card would point at a boundary that no longer exists. */
  .profile-card.cf-handles .cf-handle { display: none; }
}