/* ══════════════════════════════════════════════════════════════════════
   ITALY LIONS — MEMBER PROFILE 2026   (il-profile.css)

   Loaded after styles.css and il-design.css. Every selector is prefixed
   .ilp / .ilj / .ilcard, so nothing here can reach an existing hook —
   the feed, the bottom navigation, the drawer and every other page are
   untouched.

   THE DESIGN, AND WHY IT IS NOT THE OTHER THREE
   ─────────────────────────────────────────────
   Facebook and LinkedIn put the avatar at the LEFT edge, overlapping a
   tall cover, with a row of wide filled buttons under it. Instagram puts
   it left of a stat row. This is a CENTRED MONUMENT: a short cinematic
   band, the photo standing on the centre line and breaking the band's
   lower edge, then the identity stacked beneath it in one narrowing
   column — name, handle, the Italy Lions seal with the permanent
   number, place, year. Three numbers on hairlines, no boxes. Four words
   for navigation, no chrome.

   Almost nothing is a button. The actions that were four big pills live
   in the ••• menu, which is the one control on the cover.

   MOTION: only transform and opacity, never width/height/top/left, and
   the whole file goes still under prefers-reduced-motion.

   THE !important RESETS ARE NOT DECORATION. styles.css declares
   `a, button, input, select, textarea { transition: all .25s !important }`
   site-wide. Inside a card that means padding, width and border-radius
   animate on first paint — rows visibly inflate into place. The reset
   below turns that off inside .ilp and re-declares only what should
   actually move.
   ══════════════════════════════════════════════════════════════════════ */

.ilp,
.ilp *,
.ilp-sheet,
.ilp-sheet * { box-sizing: border-box; }

.ilp a, .ilp button, .ilp input, .ilp select, .ilp textarea,
.ilp-sheet a, .ilp-sheet button, .ilp-sheet input,
.ilp-sheet select, .ilp-sheet textarea {
  transition: none !important;
}

/* ── FIRST-PAINT LOADING STATE ────────────────────────────────────
   Auth + Firestore resolve after the HTML is already visible. The first
   paint must therefore look intentional: shimmer blocks communicate that
   the profile is loading instead of showing fake identity data. */
.ilp-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, rgba(255,255,255,.07) 20%, rgba(217,185,72,.22) 38%, rgba(255,255,255,.07) 56%);
  background-size: 220% 100%;
  animation: ilpSkeleton 1.35s ease-in-out infinite;
}
@keyframes ilpSkeleton { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.ilp-skeleton-avatar { width: 42px; height: 42px; border-radius: 50%; }
.ilp-skeleton-name { width: min(210px, 58vw); height: 24px; border-radius: 7px; margin: 0 auto; }
.ilp-skeleton-id { width: 82px; height: 13px; border-radius: 5px; }
.ilp-skeleton-stat { width: 34px; height: 18px; border-radius: 5px; margin: 0 auto 5px; }
.ilp-loading .ilp-avatar-inner { display: grid; place-items: center; }
.ilp-loading .ilp-cover::before { animation-duration: 8s; opacity: .9; }
.ilp-loading .ilp-id::after { content: 'Preparing your profile'; display: block; margin: 18px auto 0; color: var(--ilp-low); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
/* A shimmer that outlives the loading state is not a placeholder, it is a
   page that never finished. Once .ilp-loading is gone the blocks go with
   it — for a signed-in member they have already been painted over. */
.ilp:not(.ilp-loading) .ilp-skeleton { display: none; }
@media (prefers-reduced-motion: reduce) { .ilp-skeleton { animation: none; } }

/* [hidden] MUST WIN. The browser's own `[hidden] { display: none }` is a
   plain attribute selector, so any class rule here that sets `display`
   silently beats it — .ilp-ghost is display:inline-flex, which left every
   button this file hides with `el.hidden = true` fully visible and
   clickable. "Show more" sat under a refused follower list saying there
   was more to see.

   Cheaper to state once than to remember at every call site. */
.ilp [hidden],
.ilp-sheet [hidden] { display: none !important; }

/* ── SHELL ─────────────────────────────────────────────────────── */
.ilp {
  --ilp-gold:  var(--g-300, #D9B948);
  --ilp-gold-2: var(--g-400, #C9A227);
  --ilp-ink:   var(--ink, rgba(255,255,255,.88));
  --ilp-dim:   var(--ink-mid, rgba(255,255,255,.62));
  --ilp-low:   var(--ink-low, rgba(255,255,255,.42));
  --ilp-line:  rgba(201,162,39,.18);
  --ilp-hair:  rgba(255,255,255,.08);
  --ilp-surf:  #12100B;
  --ilp-surf-2:#191509;

  position: relative;
  color: var(--ilp-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ══ 1. COVER ══════════════════════════════════════════════════════
   Compact and cinematic. 168px on a phone is the target: tall enough to
   be an image, short enough that the identity is above the fold on a
   375 x 667 screen without scrolling.

   There is NO edit button and NO camera icon on it. Changing the cover
   is one row in the ••• menu. */
.ilp-cover {
  position: relative;
  height: 168px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 78% -20%, #2A2005 0%, #14100B 48%, #080806 100%),
    linear-gradient(180deg, #16130C, #0A0906);
  background-color: #0A0906;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.ilp-cover::before {
  content: '';
  position: absolute; inset: -35%;
  background: conic-gradient(from 210deg at 32% 62%,
    transparent 0deg, rgba(201,162,39,.18) 62deg, transparent 132deg,
    rgba(255,215,0,.08) 224deg, transparent 302deg);
  filter: blur(46px);
  animation: ilpAurora 16s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes ilpAurora {
  from { transform: rotate(0deg)  scale(1);    }
  to   { transform: rotate(16deg) scale(1.14); }
}
/* Fine grid + a floor gradient so the avatar always has contrast under
   it, whatever photo the member uploads. */
.ilp-cover::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(201,162,39,.03) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg,  rgba(201,162,39,.03) 0 1px, transparent 1px 68px),
    linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(8,8,6,.92) 100%);
}
.ilp-cover.has-photo::before { display: none; }
.ilp-cover.has-photo::after {
  background: linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(8,8,6,.90) 100%);
}

/* The ONE control on the cover. */
.ilp-more {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid rgba(201,162,39,.28);
  border-radius: 999px;
  background: rgba(10,9,6,.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ilp-gold);
  cursor: pointer;
  transition: transform .16s var(--ease, cubic-bezier(.22,.61,.36,1)),
              background-color .18s, border-color .18s !important;
}
.ilp-more:hover  { background: rgba(201,162,39,.16); border-color: rgba(201,162,39,.55); }
.ilp-more:active { transform: scale(.93); }
.ilp-more i {
  width: 3.5px; height: 3.5px; border-radius: 50%;
  background: currentColor; display: block;
}

/* ══ 2. IDENTITY ══════════════════════════════════════════════════ */
.ilp-id {
  position: relative; z-index: 5;
  max-width: 720px; margin: 0 auto;
  padding: 0 18px 4px;
  text-align: center;
  margin-top: -58px;             /* the photo breaks the cover's edge */
}

/* ── Photo. Larger than any of the three it is not copying: 116px on a
   phone against Instagram's 86 and Facebook's 84. It is the loudest
   thing on the screen, on purpose. ── */
.ilp-avatar {
  position: relative;
  width: 116px; height: 116px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.ilp-avatar::before {                     /* the gold ring */
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 140deg,
    var(--g-200, #E6CE74), var(--g-600, #8B6914), var(--g-300, #D9B948),
    var(--g-700, #634C0F), var(--g-200, #E6CE74));
  opacity: .85;
}
.ilp-avatar-inner {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(150deg, #1E1A10, #0C0B07);
  border: 3px solid #0A0906;
  display: grid; place-items: center;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.4rem; font-weight: 700;
  color: var(--ilp-gold);
  box-shadow: 0 14px 34px rgba(0,0,0,.62);
}
.ilp-avatar-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Owner: a small seam-mounted camera, not a floating pill over the face. */
.ilp-avatar-edit {
  position: absolute; z-index: 3; right: 2px; bottom: 2px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ilp-gold-2); color: #100D06;
  border: 3px solid #0A0906; cursor: pointer;
  transition: transform .15s var(--ease-spring, cubic-bezier(.34,1.36,.64,1)) !important;
}
.ilp-avatar-edit:active { transform: scale(.9); }
/* The camera pill is DECORATION now. The whole avatar is the control —
   see wirePhotos() in il-profile.js — so this must not be a second tap
   target that swallows the gesture and opens something else. */
.ilp-avatar-edit { pointer-events: none; }

/* ── TAPPING A PICTURE ──────────────────────────────────────────────
   A visitor gets the full-size viewer; the owner gets an action sheet.
   Either way the avatar is a button, and it has to look like one. */
.ilp-avatar.is-tappable { cursor: pointer; }
.ilp-avatar.is-tappable:focus-visible {
  outline: 3px solid var(--ilp-gold, #C9A227);
  outline-offset: 5px;
  border-radius: 50%;
}
.ilp-avatar.is-tappable:hover .ilp-avatar-inner {
  box-shadow: 0 14px 34px rgba(0,0,0,.62), 0 0 0 3px rgba(201,162,39,.35);
}
.ilp-avatar-inner { transition: box-shadow .18s; }
.ilp-cover[data-ilph-view] { cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) { .ilp-avatar-inner { transition: none; } }


.ilp-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(1.42rem, 6vw, 1.85rem);
  font-weight: 700; line-height: 1.15;
  letter-spacing: .01em;
  color: #F7F3E8;
  margin: 0;
  overflow-wrap: anywhere;
}
.ilp-handle {
  margin-top: 3px;
  font-size: .93rem; font-weight: 500;
  letter-spacing: .02em;
  color: var(--ilp-gold);
  overflow-wrap: anywhere;
}

/* ── The permanent number. The seal is the REAL Italy Lions logo — never
   an emoji, and never a substitute mark. ── */
.ilp-ilbadge {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 14px;
  padding: 6px 15px 6px 7px;
  border-radius: 999px;
  border: 1px solid rgba(201,162,39,.34);
  background: linear-gradient(180deg, rgba(201,162,39,.13), rgba(201,162,39,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.4);
}
.ilp-ilbadge img { width: 26px; height: 26px; object-fit: contain; display: block; }
.ilp-ilbadge b {
  font-family: 'Inter', ui-monospace, 'Segoe UI', sans-serif;
  font-size: .92rem; font-weight: 800;
  letter-spacing: .16em;
  color: var(--g-200, #E6CE74);
}
.ilp-ilbadge.is-pending b { color: var(--ilp-low); letter-spacing: .06em; font-weight: 600; }

/* PROFESSIONAL BUSINESS. The badge itself is styled by .il-pro-badge in
   styles.css — this only gives it a line of its own under the IL number,
   and collapses entirely when the member runs no business. */
.ilp-pro { margin-top: 10px; }
.ilp-pro:empty, .ilp-pro[hidden] { display: none; }
.ilp-pro .il-pro-badge { vertical-align: middle; }

.ilp-loc {
  margin-top: 12px;
  font-size: .95rem; font-weight: 500;
  color: var(--ilp-ink);
}
.ilp-loc small { display: block; font-size: .82rem; color: var(--ilp-dim); font-weight: 400; margin-top: 1px; }
.ilp-since {
  margin-top: 9px;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ilp-low);
}
.ilp-bio {
  margin: 14px auto 0; max-width: 520px;
  font-size: .93rem; line-height: 1.62; color: var(--ilp-dim);
  overflow-wrap: anywhere;
}

/* Visitor actions. Two quiet controls, not a button bar. */
.ilp-acts {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px;
}
.ilp-act {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 20px;
  border-radius: 999px; cursor: pointer;
  font-size: .87rem; font-weight: 700; font-family: inherit;
  border: 1px solid rgba(201,162,39,.34);
  background: transparent; color: var(--g-200, #E6CE74);
  transition: background-color .18s, border-color .18s, color .18s, transform .14s !important;
}
.ilp-act:hover  { background: rgba(201,162,39,.12); border-color: rgba(201,162,39,.6); }
.ilp-act:active { transform: scale(.97); }
.ilp-act.is-primary {
  background: linear-gradient(180deg, var(--g-200, #E6CE74), var(--g-400, #C9A227));
  color: #14110A; border-color: transparent;
}
.ilp-act.is-on { background: rgba(201,162,39,.16); color: var(--g-100, #F2E3A8); }

/* ══ THE ACTION AREA IS A COLUMN ═══════════════════════════════════
   Four pills wrapping onto two ragged lines reads as decoration. A
   stack of full-width targets reads as a list of things you can do,
   which is what it is. */
/* margin-inline:auto — WITHOUT IT THE COLUMN SITS 340px LEFT OF THE NAME.
   The old row was centred by justify-content:center; turning it into a
   column made that axis the VERTICAL one, so the horizontal centring
   silently disappeared and max-width pinned the block to the left edge.
   Measured on the live site before this was written. */
.ilp-acts {
  flex-direction: column; align-items: stretch; gap: 8px;
  max-width: 420px; margin-inline: auto;
}

.ilp-act-wide {
  width: 100%; justify-content: center;
  min-height: 44px; font-size: .9rem;
  border-radius: 12px;
}

/* Message and Block share the last line — one is routine, the other
   should be available without being suggested. */
.ilp-act-pair { display: flex; gap: 8px; }
.ilp-act-pair .ilp-act { flex: 1 1 auto; justify-content: center; min-height: 42px; }
.ilp-act-pair .ilp-act-icon { flex: 0 0 46px; width: 46px; }

/* ── THE OWNER'S ROWS ──────────────────────────────────────────────
   Friend Requests and Tags to Review, on the profile itself rather than
   buried in the ••• menu. Shown whether or not anything is waiting: a
   row that appears only when it has content is a row nobody learns
   exists. The number appears only when there IS one. */
.ilp-act-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 48px; padding: 0 14px;
  border-radius: 12px; text-align: left;
  border: 1px solid rgba(201,162,39,.26);
  background: rgba(201,162,39,.045);
}
.ilp-act-row {
  transition: background-color .2s, border-color .2s, transform .2s cubic-bezier(.22,1,.36,1) !important;
}
.ilp-act-row:hover {
  background: rgba(201,162,39,.11); border-color: rgba(201,162,39,.5);
  transform: translateY(-1px);
}
.ilp-act-row:active { transform: translateY(0) scale(.995); transition-duration: .09s !important; }
.ilp-act-row .ic {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; font-size: .9rem;
  background: rgba(201,162,39,.16); color: var(--ilp-gold, #C9A227);
}
.ilp-act-row .tx { flex: 1 1 auto; font-weight: 700; font-size: .88rem; color: #F7F3E8; }
.ilp-act-row .ct {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: #e5342e; color: #fff; font-size: .74rem; font-weight: 900; line-height: 1;
}
.ilp-act-row .ct[hidden] { display: none; }
.ilp-act-row .ch { flex: 0 0 auto; color: var(--ilp-dim, #9a9a9a); font-size: 1.1rem; }

/* The follow pill is the platform's shared button; inside this column it
   has to fill the row like everything else. il-follow-ui.js injects its
   stylesheet after this one, so these need the extra specificity to win. */
.ilp-acts .il-fbtn.ilp-act-wide { width: 100%; flex: 0 0 auto; max-width: none; }

@media (max-width: 420px) {
  .ilp-acts { max-width: none; }
}

/* The square Block control. Deliberately quiet — available without being
   suggested, and only turning red once the pointer is on it, so nobody
   taps it by accident reaching for Message. */
.ilp-act-icon {
  padding: 0; width: 40px; flex: 0 0 auto;
  justify-content: center; gap: 0;
  color: var(--ilp-dim, #9a9a9a);
  border-color: rgba(255,255,255,.16);
}
.ilp-act-icon:hover, .ilp-act-icon:focus-visible {
  color: #ff6b6b; border-color: rgba(255,85,85,.55); background: rgba(255,85,85,.10);
}

/* The Follow button carries BOTH .ilp-act and .il-fbtn. il-follow-ui.js
   injects its <style> into the head at module time, which is after this
   sheet's <link>, so on equal specificity its rules win — which is what
   is wanted: one follow button that looks the same everywhere. These two
   only restore what the header needs and the generic pill cannot know. */
/* Superseded by .ilp-act-wide — the action area is a column now. Kept
   as a no-op guard for any older markup still carrying .is-wide. */
.ilp-acts .il-fbtn.is-wide { flex: 0 0 auto; width: 100%; max-width: none; }

/* ── FRIEND BUTTON ─────────────────────────────────────────────────
   Four states, four looks, and none of them is a disabled button —
   every state has something useful behind it. */
.ilp-friend { flex: 0 0 auto; }
.ilp-friend.is-on {
  background: rgba(201,162,39,.16); color: var(--g-100, #F2E3A8);
  border-color: rgba(201,162,39,.5);
}
.ilp-friend.is-pending {
  color: var(--ilp-dim, #9a9a9a); border-color: rgba(255,255,255,.18);
}
.ilp-friend.is-incoming {
  background: rgba(96,165,250,.14); color: #7fb2ff; border-color: rgba(96,165,250,.45);
}

/* Compact row buttons inside the request and tag queues. */
.ilp-mini { min-height: 32px; padding: 0 13px; font-size: .78rem; flex: 0 0 auto; }
/* The pending-request count on the ••• menu row, so the number is visible
   without opening anything. Red because it is the same fact as the dot on
   the Friends stat, and two colours for one fact reads as two facts. */
.ilp-menu-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px;
  background: #e5342e; color: #fff;
  font-size: .72rem; font-weight: 900; line-height: 1;
}

/* The section headings inside the Friends sheet. */
.ilp-reqhead {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ilp-dim, #9a9a9a); margin: 14px 0 4px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.ilp-reqhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ══ TAGGED IN ═════════════════════════════════════════════════════
   Posts somebody ELSE wrote that this member appears in. Deliberately
   NOT styled as one of their own post cards: a lighter, inset block
   with the author's name on top, so a visitor can never mistake it for
   something this member said. That distinction is the whole reason the
   section is separate rather than mixed into the wall. */
.ilp-tagged-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 30px 0 12px; padding-top: 20px;
  border-top: 1px solid var(--ilp-line);
}
.ilp-tagged-head h3 {
  margin: 0; font-family: 'Cinzel', Georgia, serif;
  font-size: 1.02rem; font-weight: 700; color: var(--ilp-gold, #C9A227);
}
.ilp-tagged-head small { font-size: .77rem; color: var(--ilp-dim, #9a9a9a); }

.ilp-tagged-card {
  border: 1px solid var(--ilp-hair, rgba(255,255,255,.10));
  border-radius: 14px; overflow: hidden; margin-bottom: 10px;
  background: rgba(255,255,255,.022);
}
.ilp-tagged-card header {
  display: flex; align-items: baseline; gap: 8px;
  padding: 11px 14px 8px; font-size: .84rem;
}
.ilp-tagged-card header a {
  font-weight: 800; color: #F7F3E8; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ilp-tagged-card header a:hover { color: var(--ilp-gold, #C9A227); }
.ilp-tagged-card header span {
  margin-left: auto; flex-shrink: 0;
  font-size: .74rem; color: var(--ilp-dim, #9a9a9a);
}
.ilp-tagged-card p {
  margin: 0; padding: 0 14px 11px;
  font-size: .88rem; line-height: 1.6; color: #E8E3D6; overflow-wrap: anywhere;
}
.ilp-tagged-card img {
  display: block; width: 100%; max-height: 340px; object-fit: cover;
  cursor: zoom-in;
}
.ilp-tagged-card footer {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-top: 1px solid rgba(255,255,255,.05);
}
.ilp-tagged-open {
  font-size: .78rem; font-weight: 700; text-decoration: none;
  color: var(--ilp-gold, #C9A227);
}
/* Quiet until it is wanted. Removing your name is a real action and it
   should be available on the post itself, but it is not a suggestion. */
.ilp-tagged-remove {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .76rem; color: var(--ilp-dim, #9a9a9a);
  padding: 4px 2px;
}
.ilp-tagged-remove:hover { color: #ff6b6b; }
.ilp-tagged-remove:disabled { opacity: .5; cursor: default; }

@media (max-width: 420px) {
  .ilp-tagged-card img { max-height: 260px; }
  .ilp-tagged-head { margin-top: 24px; }
}

/* ── TAG REVIEW QUEUE ──────────────────────────────────────────────
   Drawn entirely from the tag document — author name, excerpt and
   thumbnail are copied onto it when the tag is made, so this list costs
   ZERO extra reads however long it is. */
.ilp-tagrow {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 4px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.ilp-tagthumb {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 9px;
  object-fit: cover; border: 1px solid var(--ilp-hair, rgba(255,255,255,.12));
}
.ilp-tagmeta { flex: 1 1 auto; min-width: 0; }
.ilp-tagmeta b { display: block; font-size: .88rem; color: #F7F3E8; }
.ilp-tagmeta small {
  display: block; font-size: .76rem; color: var(--ilp-dim, #9a9a9a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ilp-tagacts { display: flex; gap: 6px; flex: 0 0 auto; }

/* 375px: the action row is four controls wide and must wrap rather than
   scroll sideways. Follow keeps the full first line; the rest share the
   second. */
@media (max-width: 420px) {
  .ilp-tagrow { flex-wrap: wrap; }
  .ilp-tagacts { flex: 1 1 100%; justify-content: flex-end; }
}

.ilp-blocked-note {
  flex: 1 1 100%; text-align: center;
  font-size: .82rem; line-height: 1.55; color: var(--ilp-dim, #9a9a9a);
  margin-bottom: 4px;
}


/* ══ 3. STATS — three numbers on hairlines, no cards ══════════════ */
.ilp-stats {
  /* FOUR NOW — Posts, Followers, Following, Friends. Four fits a 375px
     screen at 93px each, which is wider than the 88px the numbers need. */
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 460px; margin: 24px auto 0;
  border-top: 1px solid var(--ilp-line);
  border-bottom: 1px solid var(--ilp-line);
}
.ilp-stat {
  appearance: none; background: none; border: 0;
  font-family: inherit; color: inherit; cursor: pointer;
  padding: 15px 6px 14px;
  text-align: center;
  position: relative;
  transition: background-color .18s !important;
}
.ilp-stat + .ilp-stat::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: var(--ilp-hair);
}
.ilp-stat:hover:not(:disabled) { background: rgba(201,162,39,.05); }
.ilp-stat:disabled { cursor: default; }

/* A pending friend request, shown ON the Friends number rather than only
   in a menu — the whole reason a member opens it. */
.ilp-stat-dot {
  position: absolute; top: 11px; right: 50%; margin-right: -26px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #e5342e; border: 2px solid var(--ilp-bg, #0A0906);
}
@media (max-width: 380px) {
  .ilp-stat { padding: 13px 2px 12px; }
  .ilp-stat span { font-size: .66rem; }
}
.ilp-stat b {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.35rem; font-weight: 700; line-height: 1;
  color: #F7F3E8;
  font-variant-numeric: tabular-nums;
}
.ilp-stat span {
  display: block; margin-top: 6px;
  font-size: .64rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ilp-low);
}
.ilp-stat[data-loading] b { color: var(--ilp-low); }

/* ══ 4. NAVIGATION — NOW · STORY · WORK · JOURNEY ═════════════════
   Four words. No icons, no pills, no boxes: a moving gold underline is
   the only chrome, and it is a transform so it costs nothing. */
.ilp-tabs {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 560px; margin: 4px auto 0;
  padding: 0 6px;
}
/* LION WALL is two words in a quarter of a 375px screen. The tracking
   drops and the label is allowed to wrap onto a second line rather than
   overflow its column or push the row into a scrollbar — every tab keeps
   the same box, so a wrapped label does not shift its neighbours. */
.ilp-tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: 'Cinzel', Georgia, serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.25;
  color: var(--ilp-low);
  padding: 15px 2px 13px;
  min-height: 58px;
  hyphens: none; overflow-wrap: break-word;
  transition: color .2s !important;
}
@media (min-width: 400px) { .ilp-tab { font-size: .72rem; letter-spacing: .12em; } }
.ilp-tab[aria-selected="true"] { color: var(--g-200, #E6CE74); }
.ilp-tab:hover { color: var(--ilp-ink); }
.ilp-ink {
  position: absolute; left: 0; bottom: 0; height: 2px;
  width: 25%;
  background: linear-gradient(90deg, transparent, var(--ilp-gold) 22%, var(--ilp-gold) 78%, transparent);
  transform: translateX(0);
  transition: transform .32s var(--ease, cubic-bezier(.22,.61,.36,1));
  pointer-events: none;
}
.ilp-tabs-rule { height: 1px; background: var(--ilp-hair); max-width: 560px; margin: 0 auto; }

/* ══ 5. PANELS ════════════════════════════════════════════════════ */
.ilp-body { max-width: 720px; margin: 0 auto; padding: 22px 16px 40px; }
.ilp-panel[hidden] { display: none; }
.ilp-panel { animation: ilpFade .28s var(--ease, cubic-bezier(.22,.61,.36,1)); }
@keyframes ilpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ilp-card {
  background: linear-gradient(180deg, var(--ilp-surf), #0D0B07);
  border: 1px solid var(--ilp-hair);
  border-radius: var(--r-lg, 20px);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 26px rgba(0,0,0,.34);
}
.ilp-card > h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ilp-gold);
  margin: 0 0 12px;
}
.ilp-kv { display: grid; gap: 12px; }
.ilp-kv > div { display: flex; gap: 12px; align-items: flex-start; }
.ilp-kv dt, .ilp-k {
  flex: 0 0 96px;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ilp-low);
  padding-top: 2px;
}
.ilp-v { flex: 1 1 auto; min-width: 0; font-size: .93rem; color: var(--ilp-ink); overflow-wrap: anywhere; }
.ilp-v.is-empty { color: var(--ilp-low); font-style: italic; }

.ilp-note { font-size: .78rem; line-height: 1.6; color: var(--ilp-low); margin: 8px 0 0; }
.ilp-empty { text-align: center; padding: 34px 18px; color: var(--ilp-dim); font-size: .9rem; }
.ilp-empty p { margin: 0 0 12px; }

.ilp-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 18px;
  border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: .84rem; font-weight: 700;
  border: 1px solid rgba(201,162,39,.3);
  background: transparent; color: var(--g-200, #E6CE74);
  transition: background-color .18s, border-color .18s, transform .14s !important;
}
.ilp-ghost:hover  { background: rgba(201,162,39,.12); border-color: rgba(201,162,39,.55); }
.ilp-ghost:active { transform: scale(.97); }
.ilp-ghost.is-danger { color: #FF6B6B; border-color: rgba(255,107,107,.34); }
.ilp-ghost.is-danger:hover { background: rgba(255,107,107,.12); }

/* Read More on My Lion Story — collapsed to a compact preview. */
.ilp-story { position: relative; }
.ilp-story-text {
  font-size: .95rem; line-height: 1.72; color: var(--ilp-ink);
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.ilp-story.is-clipped .ilp-story-text {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ilp-story-more {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 700;
  color: var(--ilp-gold); padding: 8px 0 0;
}

/* Language / interest chips */
.ilp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ilp-chip {
  font-size: .78rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--ilp-hair);
  background: rgba(255,255,255,.03);
  color: var(--ilp-ink);
}

/* ══ 6. LIVING JOURNEY TIMELINE ═══════════════════════════════════ */
.ilj { list-style: none; margin: 4px 0 0; padding: 0 0 0 6px; position: relative; }
.ilj-node {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 0 0 26px 22px;
  animation: iljIn .42s var(--ease, cubic-bezier(.22,.61,.36,1)) both;
  animation-delay: calc(var(--ilj-i, 0) * 70ms);
}
@keyframes iljIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* The connecting line — one border, drawn by the node, stopped on the last. */
.ilj-node::before {
  content: ''; position: absolute; left: 5px; top: 14px; bottom: -4px;
  width: 1px;
  background: linear-gradient(180deg, rgba(201,162,39,.42), rgba(201,162,39,.12));
}
.ilj-node:last-child::before { display: none; }
.ilj-dot {
  position: absolute; left: 0; top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #0A0906;
  border: 2px solid rgba(201,162,39,.55);
}
.ilj-node.is-now .ilj-dot {
  background: var(--ilp-gold); border-color: var(--ilp-gold);
  box-shadow: 0 0 0 4px rgba(201,162,39,.16);
}
.ilj-body { flex: 1 1 auto; min-width: 0; }
.ilj-place {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.02rem; font-weight: 700; color: #F7F3E8;
  overflow-wrap: anywhere;
}
.ilj-country { font-size: .78rem; color: var(--ilp-dim); margin-top: 1px; }
.ilj-years {
  margin-top: 5px;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  color: var(--ilp-low); font-variant-numeric: tabular-nums;
}
.ilj-tag {
  flex: 0 0 auto; align-self: center;
  font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  color: #14110A; background: linear-gradient(180deg, var(--g-200, #E6CE74), var(--g-400, #C9A227));
}
.ilj-actions { margin-top: 6px; }

/* ══ 7. BUSINESS PORTFOLIO (WORK) ═════════════════════════════════ */
.ilp-biz {
  display: flex; gap: 13px; align-items: center;
  padding: 14px; margin-bottom: 10px;
  border: 1px solid var(--ilp-hair); border-radius: var(--r-md, 14px);
  background: linear-gradient(180deg, var(--ilp-surf), #0D0B07);
  text-decoration: none; color: inherit;
  transition: border-color .18s, transform .16s !important;
}
.ilp-biz:hover { border-color: rgba(201,162,39,.34); transform: translateY(-1px); }
.ilp-biz-logo {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 13px;
  overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(150deg, #221C10, #0D0B07);
  border: 1px solid var(--ilp-hair);
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; color: var(--ilp-gold);
}
.ilp-biz-logo img { width: 100%; height: 100%; object-fit: cover; }
.ilp-biz-meta { flex: 1 1 auto; min-width: 0; }
.ilp-biz-name { font-weight: 700; font-size: .98rem; color: #F7F3E8; overflow-wrap: anywhere; }
.ilp-biz-sub  { font-size: .78rem; color: var(--ilp-dim); margin-top: 2px; }
/* The markup inside comes from business-core.js ratingLine(), which
   carries its own colours so the business page, the Control Centre and
   this card cannot drift apart. Only the box is styled here. */
.ilp-rate {
  display: block; margin-top: 6px;
  font-size: .8rem; line-height: 1.5;
  color: var(--ilp-dim);
  font-variant-numeric: tabular-nums;
}
.ilp-rate b { color: var(--g-200, #E6CE74); }

/* ══ 8. SHEET — followers, QR, Lion Card, settings ════════════════
   ONE overlay component for every secondary surface on this page. It
   slides on transform and fades on opacity only, and il-guard.js can
   close it like any other blocking overlay because the scrim is a real
   element with a real backdrop handler. */
.ilp-sheet {
  position: fixed; inset: 0; z-index: 9600;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.ilp-sheet.open { pointer-events: auto; }
.ilp-sheet-scrim {
  position: absolute; inset: 0;
  background: rgba(4,4,3,.72);
  opacity: 0;
  transition: opacity .26s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.ilp-sheet.open .ilp-sheet-scrim {
  opacity: 1;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ilp-sheet-panel {
  position: relative; z-index: 2;
  width: min(560px, 100%);
  max-height: 88dvh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #14110B, #0A0906);
  border: 1px solid rgba(201,162,39,.2);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -18px 60px rgba(0,0,0,.7);
  transform: translateY(100%);
  transition: transform .32s var(--ease, cubic-bezier(.22,.61,.36,1));
  overscroll-behavior: contain;
}
.ilp-sheet.open .ilp-sheet-panel { transform: translateY(0); }
.ilp-sheet-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--ilp-hair);
}
.ilp-sheet-head h3 {
  flex: 1 1 auto; margin: 0;
  font-family: 'Cinzel', Georgia, serif;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--g-200, #E6CE74);
}
.ilp-x {
  flex: 0 0 auto; width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--ilp-hair);
  background: transparent; color: var(--ilp-dim);
  font-size: 1.1rem; line-height: 1;
  transition: background-color .18s, color .18s !important;
}
.ilp-x:hover { background: rgba(255,255,255,.06); color: var(--ilp-ink); }
.ilp-sheet-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
}
.ilp-sheet :focus-visible,
.ilp :focus-visible { outline: 2px solid var(--g-200, #E6CE74); outline-offset: 2px; }

/* Follower / following rows */
.ilp-search {
  width: 100%; min-height: 44px;
  padding: 0 14px; margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid var(--ilp-hair);
  background: rgba(255,255,255,.04);
  color: var(--ilp-ink); font-family: inherit; font-size: .92rem;
  outline: none;
}
.ilp-search:focus { border-color: rgba(201,162,39,.5); }
.ilp-person {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-decoration: none; color: inherit;
}
.ilp-person-av {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(150deg, #221C10, #0D0B07);
  border: 1px solid var(--ilp-hair);
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; color: var(--ilp-gold);
}
.ilp-person-av img { width: 100%; height: 100%; object-fit: cover; }
.ilp-person-meta { flex: 1 1 auto; min-width: 0; }
.ilp-person-meta b { display: block; font-size: .92rem; color: #F7F3E8; overflow-wrap: anywhere; }
.ilp-person-meta small { display: block; font-size: .76rem; color: var(--ilp-dim); overflow-wrap: anywhere; }

/* A follow button beside every name. The row owns the separator now —
   the link used to draw it and would otherwise underline only the
   left-hand two thirds of the row. */
.ilp-person-row { border-bottom: 1px solid rgba(255,255,255,.05); }
.ilp-person-row .ilp-person { border-bottom: none; }
.ilp-person-row .il-fbtn { flex: 0 0 auto; }

.ilp-more-btn { display: block; width: 100%; margin-top: 14px; }

/* Settings rows inside the sheet */
.ilp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ilp-row-meta { flex: 1 1 auto; min-width: 0; }
.ilp-row-meta b { display: block; font-size: .92rem; color: #F7F3E8; }
.ilp-row-meta small { display: block; font-size: .76rem; color: var(--ilp-dim); margin-top: 2px; }
.ilp-seg {
  flex: 0 0 auto; display: inline-flex;
  border: 1px solid var(--ilp-hair); border-radius: 999px; overflow: hidden;
}
.ilp-seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: .74rem; font-weight: 700;
  color: var(--ilp-dim); padding: 8px 13px; min-height: 36px;
  transition: background-color .18s, color .18s !important;
}
.ilp-seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--g-200, #E6CE74), var(--g-400, #C9A227));
  color: #14110A;
}
.ilp-field { margin-bottom: 14px; }
.ilp-field label {
  display: block; margin-bottom: 6px;
  font-size: .68rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ilp-low);
}
.ilp-field input, .ilp-field select, .ilp-field textarea {
  width: 100%; min-height: 44px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--ilp-hair);
  background: rgba(255,255,255,.04);
  color: var(--ilp-ink); font-family: inherit; font-size: .93rem;
  outline: none; resize: vertical;
}
.ilp-field input:focus, .ilp-field select:focus, .ilp-field textarea:focus {
  border-color: rgba(201,162,39,.5);
}
.ilp-field select option { background: #14110B; color: #F7F3E8; }
.ilp-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ilp-ok  { color: #3DDC84; font-size: .78rem; }
.ilp-bad { color: #FF6B6B; font-size: .78rem; }

/* ══ 9. LION CARD ═════════════════════════════════════════════════ */
.ilcard {
  position: relative; overflow: hidden;
  max-width: 340px; margin: 0 auto;
  padding: 26px 22px 20px;
  text-align: center;
  border-radius: 22px;
  border: 1px solid rgba(201,162,39,.4);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,162,39,.16), transparent 62%),
    linear-gradient(165deg, #17130B 0%, #0A0906 52%, #16120A 100%);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
.ilcard-sheen {
  position: absolute; inset: -40% -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.07) 50%, transparent 58%);
  transform: translateX(-30%);
  animation: ilcardSheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ilcardSheen {
  0%, 62% { transform: translateX(-38%); }
  100%    { transform: translateX(38%); }
}
.ilcard-top { display: flex; align-items: center; justify-content: center; gap: 9px; }
.ilcard-logo { width: 40px; height: 40px; object-fit: contain; }
.ilcard-brand {
  font-family: 'Cinzel', Georgia, serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .3em;
  color: var(--g-300, #D9B948);
}
.ilcard-name {
  margin-top: 16px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.36rem; font-weight: 700; color: #F7F3E8;
  overflow-wrap: anywhere;
}
.ilcard-id {
  margin-top: 6px;
  font-size: 1.02rem; font-weight: 800; letter-spacing: .24em;
  color: var(--g-200, #E6CE74);
}
.ilcard-id-pending { font-size: .8rem; letter-spacing: .06em; color: rgba(255,255,255,.42); font-weight: 600; }
.ilcard-where { margin-top: 8px; font-size: .88rem; color: rgba(255,255,255,.72); }
.ilcard-since {
  margin-top: 4px; font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(217,185,72,.8);
}
/* THE WHITE PLATE HUGS THE CODE — IT DOES NOT SQUEEZE IT.

   This used to be a fixed 176x176 border-box with 8px padding, so the
   content area was 160px and a 200px QR was stretched into it. A
   non-integer downscale blurs every module edge and the code stops
   scanning while still looking fine to a human. il-card.js now renders
   at device resolution and pins the element size itself; nothing here
   may override that.

   THE PADDING IS THE QUIET ZONE. A QR needs four clear modules on every
   side or strict readers refuse it. 8px around a 160px code was about
   1.6 modules. 18px is comfortably over four at every size used here. */
.ilcard-qr {
  margin: 18px auto 0;
  width: max-content; height: max-content;
  display: grid; place-items: center;
  background: #fff; border-radius: 14px; padding: 18px;
  max-width: 100%;
}
/* THE DISPLAYED SIZE LIVES HERE, NOT IN JAVASCRIPT.

   il-card.js sets --ilqr on the container and these rules do the sizing
   with !important. It has to be this way round: qrcodejs finishes
   asynchronously and rewrites the style attribute of both elements when
   it does, which threw away any width JavaScript had put there and left
   the code displayed at its full device-resolution bitmap size.

   The display property is deliberately NOT forced — qrcodejs owns it,
   and which of the canvas and the image it chooses to show differs by
   browser. */
.ilcard-qr img, .ilcard-qr canvas {
  display: block;
  width:  var(--ilqr, 190px) !important;
  height: var(--ilqr, 190px) !important;
  max-width: 100%;
}
.ilcard-foot {
  margin-top: 16px; font-size: .64rem; line-height: 1.5;
  color: rgba(255,255,255,.38);
}
.ilcard-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* ══ 10. BOTTOM-NAV ALERTS — the Italy Lions treatment ════════════
   Not a red dot. A gold ring that breathes while something is waiting,
   and a gold count. Colour is never the only signal: the icon also
   carries the number, and the button's aria-label says how many. */
.bnav-item.il-bnav-bell .bnav-icon { position: relative; }
.bnav-item.il-bnav-bell.has-unread .bnav-icon::after {
  content: '';
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,162,39,.5);
  animation: ilBellPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes ilBellPulse {
  0%   { transform: scale(.72); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: scale(1.25); opacity: 0; }
}
.bnav-item.il-bnav-bell.has-unread { color: var(--g-200, #E6CE74); }
.il-bnav-badge {
  position: absolute; top: -6px; right: -10px;
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 900; line-height: 1;
  color: #14110A;
  background: linear-gradient(180deg, var(--g-100, #F2E3A8), var(--g-400, #C9A227));
  box-shadow: 0 0 0 2px #0A0906, 0 2px 8px rgba(201,162,39,.5);
}

/* ══ 11. RESPONSIVE ═══════════════════════════════════════════════ */
@media (min-width: 480px) {
  .ilp-cover  { height: 200px; }
  .ilp-id     { margin-top: -64px; }
  .ilp-avatar { width: 128px; height: 128px; }
}
@media (min-width: 768px) {
  .ilp-cover  { height: 260px; }
  .ilp-id     { margin-top: -78px; padding-bottom: 8px; }
  .ilp-avatar { width: 152px; height: 152px; }
  .ilp-avatar-inner { font-size: 3rem; }
  .ilp-more   { top: 16px; right: 20px; width: 44px; height: 44px; }
  .ilp-body   { padding: 26px 20px 56px; }
  .ilp-tab    { font-size: .78rem; }
  .ilp-sheet  { align-items: center; }
  .ilp-sheet-panel {
    border-radius: 22px; border-bottom: 1px solid rgba(201,162,39,.2);
    max-height: 82dvh;
    transform: translateY(18px) scale(.98);
    opacity: 0;
    transition: transform .3s var(--ease, cubic-bezier(.22,.61,.36,1)), opacity .22s;
  }
  .ilp-sheet.open .ilp-sheet-panel { transform: none; opacity: 1; }
}
@media (min-width: 1100px) {
  .ilp-cover { height: 300px; }
  .ilp-body  { max-width: 820px; }
  .ilp-id    { max-width: 820px; }
}

/* ══ 12. REDUCED MOTION ═══════════════════════════════════════════
   Everything still WORKS — the sheet opens, the tab changes, the
   timeline renders. Nothing travels. */
@media (prefers-reduced-motion: reduce) {
  .ilp *, .ilp-sheet *, .ilcard * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ilp-cover::before, .ilcard-sheen { animation: none !important; }
  .bnav-item.il-bnav-bell.has-unread .bnav-icon::after {
    animation: none !important; opacity: .85; transform: none;
  }
}

/* ══ 13. NEUTRALISING THE OLD PROFILE CHROME ══════════════════════
   profile.html still carries the shell the previous design used, and
   the blocks inside it are moved into the new panels at boot rather
   than rebuilt (see adoptLegacyBlocks() in il-profile.js). What is
   switched off here is only the LAYOUT those blocks used to sit in:

     .profile-shell   was a two-column grid for a desktop rail that
                      the ••• menu and the bottom navigation replace
     .profile-body    carried a -84px pull that used to slide the old
                      header up over the old cover
     .profile-cover   the old cover element; the new one is .ilp-cover

   The elements are left in the document because other files still
   write to them. Their old geometry is not. */
.profile-shell { display: block !important; }
.profile-rail  { display: none !important; }
.profile-body {
  margin-top: 0 !important;
  max-width: none !important;
  padding: 0 !important;
}
.profile-cover, .profile-quick-strip, .profile-tabs, .profile-stats-row { display: none !important; }
#ilpLegacy { display: none !important; }

/* The blocks that moved keep their own internal styling; they just sit
   in a panel now instead of a page column. */
.ilp-panel > #profilePostBox { margin-bottom: 18px; }
.ilp-panel > #tab-posts,
.ilp-panel > #tab-photos,
.ilp-panel > #tab-reviews,
.ilp-panel > #tab-ideas,
.ilp-panel > #tab-jobs,
.ilp-panel > #tab-cities { margin-bottom: 18px; }
.ilp-panel > #profileBizSection:empty { display: none; }

/* ══ 14. CONNECTED MODULES — THE SECOND TAB ROW ═══════════════════
   Row 1 is identity: who this member is on Italy Lions. Row 2 is
   activity in the modules that own their own records — Jobs, Market,
   Education, Community.

   It reads as secondary on purpose: no serif, smaller, dimmer, and a
   thinner underline. Two rows of equal-weight tabs would be eight
   competing choices; this is four, then four more that are clearly a
   different kind of thing. */
.ilp-tabs-2 {
  margin-top: 0;
  padding-top: 2px;
  border-top: 1px solid var(--ilp-hair);
}
.ilp-tabs-2 .ilp-tab {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: .66rem; font-weight: 800;
  letter-spacing: .1em;
  padding: 12px 2px 11px;
  min-height: 42px;
  color: var(--ilp-low);
}
.ilp-tabs-2 .ilp-tab[aria-selected="true"] { color: var(--g-200, #E6CE74); }
.ilp-tabs-2 .ilp-ink {
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--ilp-gold-2) 26%,
              var(--ilp-gold-2) 74%, transparent);
  opacity: .85;
}
@media (min-width: 480px) {
  .ilp-tabs-2 .ilp-tab { font-size: .7rem; letter-spacing: .13em; }
}

/* The header at the top of a connected-module panel: what this tab is,
   and the way into the module that actually owns the records. */
.ilp-modhead { padding-bottom: 14px; }
.ilp-modhead .ilp-note { margin-bottom: 12px; }
.ilp-modhead .ilp-ghost { margin-top: 2px; }

/* ══ 15. RESPONSIVE SCALE — THE PROFILE GROWS WITH THE SCREEN ═════
   The blocks above were written mobile-first with fixed step values at
   480 / 768 / 1100. That was correct for phones and left a 1920px
   monitor showing a 152px avatar in an 820px column.

   These override the steps with fluid ranges. Everything below is
   width and spacing only — no colour, no structure, no behaviour.

   WHY clamp() AND NOT MORE BREAKPOINTS: the sizes should move WITH the
   viewport, not jump at four arbitrary widths. clamp(min, preferred,
   max) is a floor, a slope and a ceiling in one declaration, and it is
   what stops a 2560px monitor from looking identical to a 1440px one.

   THE HEADER IS WIDER THAN THE WALL, deliberately. Identity is a
   banner and reads well across 1100px; posts are prose and do not —
   a paragraph 1100px wide is measurably harder to read, so the wall
   stays at a reading width whatever the monitor does. */

/* Cover: a real image on every device, never a thin strip and never a
   billboard. 180px on a phone, 380px on a large desktop. */
.ilp-cover { height: clamp(180px, 34vw, 380px); }

/* Photo: 132 on a phone, ~154 on a tablet, 180 on a desktop — the
   ranges asked for, expressed once instead of as four steps. */
.ilp-avatar {
  width:  clamp(132px, 20vw, 180px);
  height: clamp(132px, 20vw, 180px);
  aspect-ratio: 1;
}
.ilp-avatar-inner { font-size: clamp(2.4rem, 6vw, 3.4rem); }
.ilp-avatar-edit  { width: clamp(32px, 3.4vw, 40px); height: clamp(32px, 3.4vw, 40px); }

/* The identity block sits under the cover and must pull up by roughly
   half the photo, whatever size the photo currently is. */
.ilp-id {
  width: min(100% - 32px, 1100px);
  max-width: none;
  padding-inline: 0;
  margin-top: calc(clamp(132px, 20vw, 180px) / -2);
}

.ilp-name   { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
.ilp-handle { font-size: clamp(.95rem, .9rem + .2vw, 1.08rem); }
.ilp-bio    { font-size: clamp(.95rem, .92rem + .2vw, 1.05rem); max-width: 640px; }
.ilp-stats  { max-width: min(100%, 560px); }
.ilp-stat b { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); }

/* The reading column. Wider than it was, and capped where prose stops
   being comfortable. */
.ilp-body  { width: min(100% - 24px, 780px); max-width: none; padding-inline: 0; }
.ilp-tabs,
.ilp-tabs-rule { max-width: min(100% - 24px, 620px); }

@media (max-width: 599px) {
  /* Phones: the same near-edge-to-edge gutter the feed now uses, so a
     member moving between the two never sees the page width change. */
  .ilp-id   { width: calc(100% - 20px); }
  .ilp-body { width: calc(100% - 20px); }
  .ilp-tabs, .ilp-tabs-rule { max-width: calc(100% - 12px); }
}