/* ============================================================================
 * PAGE — Public profile
 * ----------------------------------------------------------------------------
 * Reuses the entry list and chip styles from the profile editor rather than
 * restating them, so the two views of the same data cannot drift apart. Only
 * what is unique to the public page lives here.
 * ========================================================================== */

/*
 * 1180px, not the 980 this page was built at.
 *
 * 980 was right for one column of content beside one sidebar. With a rail
 * on the leading side as well, the same cap left the middle column — the
 * one carrying the biography, the qualifications and the work history —
 * narrower than either of the two columns of labels flanking it, which is
 * the opposite of what the page is for.
 */
.pub { max-inline-size: 1180px; margin-inline: auto; }

/* --------------------------------------------------------------------------
 * Preview bar — the owner looking at their own page
 * --------------------------------------------------------------------------
 * Quiet on purpose. This is a caption about the page, not a message about
 * something that happened, and it is on screen every single time the owner
 * visits. Given the loudness of an alert it would be the first thing the eye
 * lands on, forever, on a page whose whole job is to show the profile.
 *
 * Same width as the card below it, so the two edges line up.
 * ----------------------------------------------------------------------- */

.preview-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  max-inline-size: 1180px;
  margin-inline: auto;
  margin-block-end: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-sunken);
  /* A leading rule instead of a full border: it reads as an annotation on the
     content rather than as a box competing with it. */
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--r-md);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.preview-bar .icon { color: var(--brand); }

.preview-bar__text { flex: 1 1 260px; min-inline-size: 0; }

.preview-bar__text strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
  /* The two sentences run together on one line and only wrap when they must,
     which is what keeps this at one line's height on a desktop. */
  margin-inline-end: var(--sp-2);
}

.preview-bar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-start: auto;
  color: var(--brand-ink);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Header — the identity card
 * --------------------------------------------------------------------------
 * Two halves on one card: WHO this is on the leading side, and the handful of
 * facts somebody decides on down the trailing side, with a rule between them.
 *
 * The facts used to sit under the name as a run-on line of grey text, where
 * they read as a caption and were skipped. A visitor deciding whether to
 * contact an Imam is asking four questions — where, how old, available for
 * what, since when — and this is the shape that answers four questions at a
 * glance instead of asking them to be read as prose.
 * ----------------------------------------------------------------------- */

.pub__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding: var(--sp-6);
  margin-block-end: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.pub__identity { flex: 1 1 240px; min-inline-size: 0; }

.pub__name {
  /* Holds text a USER typed, which may be Urdu or Arabic on a page laid out
     left-to-right. Isolating it keeps the layout from flipping while letting
     the script itself read correctly — see .ugc in base.css. */
  unicode-bidi: isolate;

  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

.pub__headline {
  unicode-bidi: isolate;

  margin-block-start: var(--sp-2);
  font-size: var(--fs-lg);
  color: var(--brand-ink);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.pub__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-start: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* The public identifier: Latin, monospaced-ish, and isolated so it does not
   get reordered inside Urdu text. */
.pub__uid {
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.pub__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-block-start: var(--sp-4);
}

/* -- the facts panel -------------------------------------------------------
 * A label/value list, not a table: a table needs a header row to explain
 * itself and these six words explain themselves.                            */

.pub__facts {
  flex: 0 1 20rem;
  min-inline-size: 0;
  display: grid;
  gap: var(--sp-3);
  padding-inline-start: var(--sp-6);
  /* The rule is on the panel rather than a divider element, so it disappears
     by itself when the panel wraps under the name on a narrow screen. */
  border-inline-start: 1px solid var(--border);
}

.pub__fact {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-sm);
}

.pub__fact dt {
  color: var(--ink-muted);
}

.pub__fact dd {
  color: var(--ink);
  font-weight: var(--fw-medium);
  unicode-bidi: isolate;
}

@media (max-width: 60rem) {
  .pub__facts {
    flex-basis: 100%;
    padding-inline-start: 0;
    padding-block-start: var(--sp-5);
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
}

/* -- the card is the platform's green -------------------------------------
 * ONE PANEL, DARK IN BOTH THEMES, exactly like the home page's hero — see the
 * --panel group in tokens.css and the long note above it. It is not a surface
 * that follows the theme; it is a deliberate block of Silah's own colour with
 * the person's name on it, and it is that in dark mode too.
 *
 * Which is why every mark inside it is re-pointed below. The card used to be
 * --surface, so its contents were all coloured for a light background: left
 * alone on the green they range from low-contrast to invisible. --ink-inverse
 * would be the obvious fix and is the wrong one — it means "ink for a fill
 * that inverts the page", so it turns near-black in dark mode and the name
 * disappears. The panel ink never inverts, because the panel never does.
 * ----------------------------------------------------------------------- */

.pub__head {
  background: linear-gradient(160deg, var(--panel), var(--panel-deep));
  border-color: transparent;
  color: var(--panel-ink);
}

.pub__head .pub__name { color: var(--panel-ink); }

/* The headline is the one line of colour on the card, as it was on white —
   only now it is the bright end of the ramp instead of the dark one. */
.pub__head .pub__headline { color: var(--panel-accent); }

.pub__head .pub__meta { color: var(--panel-ink-soft); }
.pub__head .pub__meta .icon { color: var(--panel-ink-faint); }

.pub__head .pub__uid {
  background: var(--panel-line-hover);
  color: var(--panel-ink-soft);
}

.pub__facts { border-inline-start-color: var(--panel-line); }

.pub__fact dt { color: var(--panel-ink-faint); }
.pub__fact dd { color: var(--panel-ink); }

@media (max-width: 60rem) {
  .pub__facts { border-block-start-color: var(--panel-line); }
}

/* The photograph gets a rim so it sits ON the panel rather than in a hole cut
   out of it, and the verification tick's ring — which is drawn in --surface to
   separate it from a white card — is redrawn in the panel's own colour. */
.pub__head .avatar {
  border: 3px solid var(--panel-line);
}

.pub__head .avatar__check {
  background: var(--panel-accent);
  color: var(--panel);
  border-color: var(--panel);
}

/* An institution has an icon tile where a person has a photograph. */
.pub__head .icon-tile {
  background: var(--panel-accent);
  color: var(--panel);
}

/* The owner's Edit button: --btn-subtle is white-on-white here, which on this
   card is a white block. Outlined instead, the way the hero's second action
   is on the home page. */
.pub__head .btn--subtle {
  background: transparent;
  border-color: var(--panel-line);
  color: var(--panel-ink);
}

.pub__head .btn--subtle:hover {
  background: var(--panel-line-hover);
  border-color: var(--panel-line);
  color: var(--panel-ink);
}

/* The verified badge beside an institution's name — a light chip on a light
   surface, and the card is no longer one. */
.pub__head .badge {
  background: var(--panel-line-hover);
  border-color: var(--panel-line);
  color: var(--panel-ink);
}

/* --------------------------------------------------------------------------
 * Body — three columns
 * --------------------------------------------------------------------------
 * Rail, main, side. The rail carries the things that are ABOUT reaching this
 * person (their links, their contact details) and the side carries the things
 * that help somebody judge or move on (skills, languages, similar people) —
 * which is why contact left the side when the rail arrived: a column that
 * mixes "how to reach them" with "who else is like them" is a column with no
 * idea what it is for.
 * ----------------------------------------------------------------------- */

.pub__body {
  display: grid;
  gap: var(--sp-4);
  margin-block-start: var(--sp-4);
}

/* One column, then two, then three — and each step only once the narrowest
   column left is still worth having. Below that a sidebar is just a squeezed
   second column. */
@media (min-width: 60rem) {
  .pub__body {
    grid-template-columns: minmax(0, 1fr) 19rem;
    align-items: start;
  }

  /* Until there is room for a third column the rail sits above the main
     content rather than beside it, where it would halve the reading width. */
  .pub__rail { grid-column: 1 / -1; }
}

/*
 * THE THIRD COLUMN EXISTS ONLY WHEN THE RAIL DOES — hence the modifier,
 * which the page sets when it has actually rendered one.
 *
 * Declaring three tracks unconditionally looked fine and was not: on a
 * profile whose contact details are all private there is no rail element,
 * so the main column fell into the FIRST track — 15rem wide — and the
 * biography was rendered in a gutter while a third of the page sat empty.
 * A grid with more tracks than children does not notice; the reader does.
 */
@media (min-width: 82rem) {
  .pub__body--rail {
    grid-template-columns: 15rem minmax(0, 1fr) 19rem;
  }

  .pub__body--rail .pub__rail { grid-column: auto; }
}

.pub__rail,
.pub__main,
.pub__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-inline-size: 0;
}

.pub__bio {
  unicode-bidi: isolate;

  color: var(--ink-soft);
  line-height: var(--lh-normal);
  white-space: pre-line;
}

/* -- a list of links in the rail ------------------------------------------ */

.link-list { list-style: none; }

.link-list li + li { margin-block-start: var(--sp-1); }

.link-list a,
.link-list span {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.link-list a:hover {
  background: var(--surface-sunken);
  color: var(--brand-ink);
}

.link-list .icon { flex: none; color: var(--ink-muted); }

/* -- similar profiles ------------------------------------------------------
 * A face, a name, a line. Deliberately the same shape as the directory card's
 * identity block, because it is the same thing at a smaller size — and a
 * visitor who recognises it there recognises it here.                       */

.mini-list { list-style: none; }

.mini {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
}

.mini:hover { background: var(--surface-sunken); }

.mini__body { min-inline-size: 0; }

.mini__name {
  unicode-bidi: isolate;

  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini__meta {
  unicode-bidi: isolate;

  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
 * Languages
 * ----------------------------------------------------------------------- */

.lang-list { list-style: none; }

.lang-list li {
  display: grid;
  gap: 2px;
  padding-block: var(--sp-3);
}

.lang-list li + li { border-block-start: 1px solid var(--border); }

.lang-list__name {
  font-weight: var(--fw-medium);
  color: var(--ink);
}

.lang-list__level {
  font-size: var(--fs-sm);
  color: var(--brand-ink);
}

.lang-list__can {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
 * Contact
 * ----------------------------------------------------------------------- */

.contact-list { list-style: none; }

.contact-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  font-size: var(--fs-base);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.contact-list .icon { color: var(--ink-muted); }