/* ==========================================================================
   DigitalProfile.lk — Standard Profile Template
   The executive CV layout. Shared by all three Standard templates; the
   personas differ only in accent, typography weighting and their data.

   Loaded after tokens.css and base.css, which supply the palette, the
   self-hosted Inter faces, the reset and the .reveal scroll animation.

   The card measures itself with CONTAINER QUERIES rather than media
   queries. That is what makes the owner's viewport switcher honest: when
   the shell is squeezed to 375px the sections re-flow exactly as they
   would on a real phone, because they are responding to the card, not to
   the window.

   CONTENTS
      0  Primitives            icons, buttons, pills, cards, section frame
      1  Owner bar             theme, accent and viewport controls
      2  Shell                 the card, and the three preview widths
      3  Cover and identity    avatar, name, contact bar
      4  Quick stats           bento
      5  About
      6  Languages
      7  Experience            vertical timeline
      8  Credentials
      9  Skills                tag cloud
     10  Projects
     11  Rating
     12  Socials
     13  Sticky action bar
     14  Toast
     15  Persona typography
     16  Motion and focus
   ========================================================================== */


/* ==========================================================================
   0 — PRIMITIVES
   ========================================================================== */
.sprite { display: none; }

.icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}
.icon--sm { width: 0.95rem; height: 0.95rem; }
.icon--lg { width: 1.4rem; height: 1.4rem; }

body.standard {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Two soft washes behind everything, tinted by the live accent. They are
   fixed so the colour stays put while the card scrolls over it. */
body.standard::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42rem 28rem at 10% -6%, var(--accent-wash), transparent 70%),
    radial-gradient(38rem 26rem at 94% 2%, color-mix(in srgb, var(--color-accent-secondary) 16%, transparent), transparent 72%);
}

.stage { padding: var(--space-6) var(--space-4) var(--space-12); }


/* ---- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.btn--grow { flex: 1 1 9rem; }

.btn--primary {
  color: var(--accent-on);
  background: var(--accent-gradient);
  box-shadow: var(--accent-shadow);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--accent-shadow-lg); }

.btn--whatsapp {
  color: var(--white);
  background: linear-gradient(140deg, var(--whatsapp-500), var(--whatsapp-600));
  box-shadow: 0 8px 20px -8px rgb(37 211 102 / 0.55);
}
.btn--whatsapp:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgb(37 211 102 / 0.6); }

.btn--ghost {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-xs);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
}
.btn--ghost .icon { color: var(--color-accent-text); }

/* Square button for the contact bar's secondary channels */
.btn--square { padding: var(--space-3); width: 2.875rem; flex: none; }


/* ---- Pills ----------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.3rem 0.7rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}
.pill .icon { width: 0.85rem; height: 0.85rem; }
.pill--accent {
  color: var(--color-accent-text);
  background: var(--accent-wash);
  border-color: var(--accent-line);
}
.pill--live .icon { animation: pulse-ring 2.4s var(--ease-in-out) infinite; }


/* ---- Section frame --------------------------------------------------------- */
.section {
  padding: var(--space-7) var(--std-gutter);
  border-block-start: 1px solid var(--color-border);
}

.section__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
}
.section__head .icon { color: var(--color-accent-text); }

.section__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}


/* ==========================================================================
   1 — OWNER BAR
   The owner's own controls, not the visitor's. It is deliberately styled
   as chrome — translucent, hairline, compact — so it never competes with
   the card underneath it.
   ========================================================================== */
.ownerbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-translucent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--color-border);
}

.ownerbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--std-width);
  margin-inline: auto;
}

.ownerbar__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-subtle);
}
.ownerbar__tag .icon { color: var(--color-accent-text); }

.ownerbar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}


/* ---- Segmented control (viewport switcher) --------------------------------- */
.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.segmented button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-text-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.segmented button:hover { color: var(--color-text); }
.segmented button[aria-pressed="true"] {
  color: var(--color-accent-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

/* A phone has no second viewport to preview, so the switcher is removed
   rather than shown doing nothing. */
@media (hover: none) and (pointer: coarse) { .viewport-switch { display: none; } }
@media (max-width: 47.9375rem) { .viewport-switch { display: none; } }


/* ---- Icon button ----------------------------------------------------------- */
.iconbtn {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.iconbtn:hover {
  transform: translateY(-2px);
  color: var(--color-accent-text);
  border-color: var(--accent-line);
}

[data-theme="light"] .only-dark { display: none; }
[data-theme="dark"] .only-light { display: none; }


/* ---- Accent popover -------------------------------------------------------- */
.menu { position: relative; }

.popover {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--space-3));
  display: grid;
  gap: var(--space-3);
  width: max-content;
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              visibility var(--duration-fast);
}
.popover.is-open { opacity: 1; visibility: visible; transform: none; }

.popover__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.swatches { display: flex; gap: var(--space-2); }

.swatch {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-slate-900) / 0.14);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-pressed="true"] {
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-white) / 0.5);
}

/* The native colour input covers its own swatch, so the rainbow disc is
   the control rather than sitting next to one. */
.swatch--custom {
  overflow: hidden;
  background: conic-gradient(from 90deg, #ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444);
}
.swatch--custom input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}


/* ==========================================================================
   2 — SHELL
   One card, three preview widths. container-type turns it into the
   measuring stick for every section inside it.
   ========================================================================== */
.shell {
  width: 100%;
  max-width: var(--std-width);
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--std-radius);
  box-shadow: var(--shadow-xl);

  /* clip, not hidden: `hidden` would make this a scroll container and the
     sticky action bar would stop sticking to the window. */
  overflow: clip;

  container-type: inline-size;
  container-name: shell;

  transition: max-width var(--duration-slow) var(--ease-spring);
}

[data-viewport="tablet"] .shell { max-width: var(--std-width-tablet); }
[data-viewport="mobile"] .shell { max-width: var(--std-width-mobile); }


/* ==========================================================================
   3 — COVER AND IDENTITY
   ========================================================================== */
.cover {
  position: relative;
  height: var(--std-cover-h);
  background: var(--color-surface-muted);
}
.cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Keeps light text legible over whatever photograph is uploaded */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgb(var(--rgb-slate-900) / 0.3));
}

.ident {
  position: relative;
  padding: 0 var(--std-gutter) var(--space-6);
}

.avatar {
  position: relative;
  width: var(--std-avatar);
  height: var(--std-avatar);
  margin-block-start: calc(var(--std-avatar) / -2);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: 0 0 0 var(--std-avatar-ring) var(--color-surface), var(--shadow-lg);
}
.avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}
.avatar__ring {
  position: absolute;
  inset: calc(var(--std-avatar-ring) * -1);
  border: 2px solid var(--brand-accent);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 6px var(--accent-wash);
}

.ident__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.ident__name {
  font-size: var(--text-h4);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.ident__role {
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

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

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

@container shell (min-width: 38rem) {
  .ident__name { font-size: var(--text-h3); }
  .ident__role { font-size: var(--text-md); }
}


/* ==========================================================================
   4 — QUICK STATS  (bento)
   The first metric is the headline one, so it stays wider than the other
   two at every width instead of all three being equal boxes.
   ========================================================================== */
.stats {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}
.stats > :first-child { grid-column: span 2; }

.stat {
  display: grid;
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.stat--lead {
  color: var(--accent-on);
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: var(--accent-shadow);
}
.stat--lead .stat__label { color: rgb(var(--rgb-white) / 0.82); }
.stat--lead .icon { color: rgb(var(--rgb-white) / 0.9); }

.stat__num {
  font-size: var(--text-h4);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
}
.stat__label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}
.stat__label .icon { width: 0.9rem; height: 0.9rem; }

@container shell (min-width: 38rem) {
  .stats { grid-template-columns: 1.35fr 1fr 1fr; }
  .stats > :first-child { grid-column: auto; }
  .stat__num { font-size: var(--text-h3); }
}


/* ==========================================================================
   5 — ABOUT
   ========================================================================== */
.about__lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.competencies {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}
.competency {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.competency .icon {
  width: 1.1rem;
  height: 1.1rem;
  padding: 1px;
  color: var(--accent-on);
  background: var(--brand-accent);
  border-radius: var(--radius-full);
  margin-block-start: 1px;
}
.competency strong { color: var(--color-text); font-weight: var(--weight-semibold); }

@container shell (min-width: 38rem) {
  .competencies { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-6); }
}


/* ==========================================================================
   6 — LANGUAGES
   ========================================================================== */
.langs { display: grid; gap: var(--space-3); }

.lang {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.lang__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.lang__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.lang__level { font-size: var(--text-xs); color: var(--color-text-subtle); }

.meter {
  display: flex;
  gap: 4px;
  margin-block-start: var(--space-3);
}
.meter span {
  height: 5px;
  flex: 1;
  background: var(--color-border);
  border-radius: var(--radius-full);
}
.meter span.is-on { background: var(--brand-accent); box-shadow: 0 0 8px -2px var(--accent-glow); }

@container shell (min-width: 38rem) {
  .langs { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   7 — EXPERIENCE  (vertical timeline)
   ========================================================================== */
.timeline { display: grid; gap: var(--space-6); }

.tl {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--space-4);
}

.tl__rail { position: relative; display: flex; justify-content: center; }

.tl__dot {
  width: 0.8rem;
  height: 0.8rem;
  margin-block-start: 0.35rem;
  background: var(--brand-accent);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 4px var(--accent-wash);
  z-index: var(--z-raised);
}

/* The rail is drawn by the item above it and stops at the last one, so the
   line never dangles past the final role. */
.tl__line {
  position: absolute;
  inset-block: 1.6rem calc(var(--space-6) * -1);
  inset-inline-start: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--accent-line), var(--color-border));
}
.tl:last-child .tl__line { display: none; }

.tl__role {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}
.tl__org {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.tl__org .icon { width: 0.9rem; height: 0.9rem; color: var(--color-text-subtle); }
.tl__dates { margin-block-start: var(--space-2); }

.tl__points {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.tl__points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
}
.tl__points li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-block-start: 0.55rem;
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}


/* ==========================================================================
   8 — CREDENTIALS
   ========================================================================== */
.creds { display: grid; gap: var(--space-3); }

.cred {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.cred:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
}

.cred__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-accent-text);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
}

.cred__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.cred__issuer {
  margin-block-start: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}
.cred__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

@container shell (min-width: 38rem) {
  .creds { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   9 — SKILLS  (tag cloud)
   ========================================================================== */
.skillset { display: grid; gap: var(--space-5); }

.skillgroup__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.skillgroup__label .icon { width: 0.95rem; height: 0.95rem; color: var(--color-accent-text); }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.tag {
  padding: 0.375rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
}


/* ==========================================================================
   10 — PROJECTS
   ========================================================================== */
.projects { display: grid; gap: var(--space-4); }

.project {
  display: grid;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: clip;
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.project:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg);
}

.project__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slower) var(--ease-out);
}
.project:hover .project__img { transform: scale(1.04); }

.project__body { padding: var(--space-4); }

.project__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.project__title .icon { color: var(--color-text-subtle); transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.project:hover .project__title .icon { color: var(--color-accent-text); transform: translate(2px, -2px); }

.project__desc {
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.project__tags { margin-block-start: var(--space-3); }

@container shell (min-width: 38rem) {
  .projects { grid-template-columns: repeat(2, 1fr); }
}
/* Only the full-width preview is wide enough for three cards to keep a
   readable description under each one. */
@container shell (min-width: 52rem) {
  .projects { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   11 — RATING
   Numbers and stars only. The partial star is a clipped gold row sitting
   on a grey one, which keeps 4.8 honest instead of rounding it to 5.
   ========================================================================== */
.rating {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.rating__num {
  font-size: var(--text-h2);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-none);
}

.stars { position: relative; display: inline-flex; }
.stars__row { display: flex; gap: 3px; }
/* i-star-solid is a filled symbol in its own right: a line icon carries
   fill="none" on its <symbol>, which no stylesheet out here can override. */
.stars__row .icon { width: 1.2rem; height: 1.2rem; }
.stars__base { color: var(--color-border-strong); }
.stars__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--rating-pct, 100%);
  overflow: hidden;
  color: var(--amber-400);
}

.rating__count { font-size: var(--text-xs); color: var(--color-text-subtle); }


/* ==========================================================================
   12 — SOCIALS
   ========================================================================== */
.socials { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.socials:empty { display: none; }

.social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.social:hover {
  transform: translateY(-2px);
  color: var(--color-accent-text);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
}


/* ==========================================================================
   13 — STICKY ACTION BAR
   ========================================================================== */
.actionbar {
  position: sticky;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--std-gutter);
  background: var(--color-surface-translucent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--color-border);
}
.actionbar .btn { flex: 1 1 10rem; }


/* ==========================================================================
   14 — TOAST
   ========================================================================== */
.toast {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline: 0;
  z-index: var(--z-overlay);
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.toast.is-open { opacity: 1; transform: none; }
.toast span {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-inverse);
  background: var(--color-bg-inverse);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xl);
}


/* ==========================================================================
   15 — PERSONA TYPOGRAPHY
   The three templates share this stylesheet exactly. All that differs is
   the weighting of the name and section labels, so each persona reads in
   its own register without the layout moving.
   ========================================================================== */
[data-persona="photographer"] .ident__name { letter-spacing: var(--tracking-tighter); }
[data-persona="photographer"] .section__title { letter-spacing: var(--tracking-wide); text-transform: none; font-size: var(--text-sm); }

[data-persona="influencer"] .ident__name { font-weight: var(--weight-bold); }
[data-persona="influencer"] .stat__num { letter-spacing: var(--tracking-tighter); }


/* ==========================================================================
   16 — MOTION AND FOCUS
   ========================================================================== */
:where(a, button, input, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .shell { transition: none; }
  .btn:hover,
  .iconbtn:hover,
  .swatch:hover,
  .stat:hover,
  .cred:hover,
  .project:hover,
  .social:hover { transform: none; }
  .project:hover .project__img { transform: none; }
  .project:hover .project__title .icon { transform: none; }
  .pill--live .icon { animation: none; }
}