/*
 * lobby.css
 * PeerView Live Lobby v2 — shared stylesheet (no Webflow)
 *
 * Self-contained: tokens, reset, layout, nav, hero, event cards (grid +
 * carousel), faculty marquee, location, statement, footer, share modal,
 * page loader. Card, carousel, pill and faculty styles are ported from the
 * PACE site (PeerView/PACE/css/base.css + pace.css) so both look the same.
 *
 * Icon paths are relative to this file (../images/...), so host the whole
 * `general/` folder together.
 *
 * Version : 2.0
 * Updated : 2026-11-02
 */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --color-brand:           #0077BE;
  --color-link:            #009FE3;
  --color-link-hover:      #064B69;
  --color-navy:            #161A2E;
  --color-light-blue:      #E5F1F8;
  --color-mid-blue:        #BFDDEF;
  --color-surface-primary: #FAFAFA;
  --color-surface-secondary:#FFFFFF;
  --color-text-primary:    #000000;
  --color-text-secondary:  #6E6E6E;
  --color-border-midgray:  #CECECE;
  --color-negative:        #B6415A;
  --color-negative-surface:#F0D9DE;

  --typography-family: "sofia-pro", "Poppins", sans-serif;
  --typography-scale-xs: 12px;
  --typography-scale-sm: 14px;
  --typography-scale-base: 16px;
  --typography-scale-md: 18px;
  --typography-scale-lg: 20px;
  --typography-scale-xl: 30px;
  --typography-weight-regular: 400;
  --typography-weight-semibold: 600;
  --typography-weight-bold: 700;

  --size-space-2xs: 8px;
  --size-space-xs: 12px;
  --size-space-sm: 16px;
  --size-space-md: 24px;
  --size-space-lg: 40px;
  --size-space-2xl: 80px;
  --size-radius-minimal: 4px;
  --size-radius-rounded: 16px;
  --size-radius-full: 40px;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-carousel: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --carousel-gap: 16px;
  --grid-gap: 24px;
  --nav-height: 78px; /* PACE top bar height */
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--typography-family);
  font-size: var(--typography-scale-base);
  font-weight: var(--typography-weight-regular);
  line-height: 1.4;
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; font-family: var(--typography-family); }
sup, sub { font-size: 0.7em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { top: 0.3em; }
[hidden] { display: none !important; }

/* The shared tracking bootstrap (init-tracking.js) appends hidden form fields and a
   label to <body>; the inline ones form an empty line under the footer. Take them out
   of the flow (they stay in the DOM, so the script still reads them). */
body > input, body > label, body > textarea { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
.lb-on-dark a:focus-visible, .lb-on-dark button:focus-visible { outline-color: #FFFFFF; }
.lb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   TEXT UTILITIES
   ============================================================ */
.TitleXLarge { font-size: var(--typography-scale-xl); font-weight: var(--typography-weight-semibold); line-height: 1.2; }
.TitleLarge  { font-size: var(--typography-scale-lg); font-weight: var(--typography-weight-semibold); line-height: 1.2; }
.TitleMedium { font-size: var(--typography-scale-md); font-weight: var(--typography-weight-semibold); line-height: 1.2; }
.TitleBase   { font-size: var(--typography-scale-base); font-weight: var(--typography-weight-semibold); line-height: 1.4; }
.BodyBase    { font-size: var(--typography-scale-base); line-height: 1.4; }
.BodySmall   { font-size: var(--typography-scale-sm); line-height: 1.4; }

/* Wrapping (global preference): balance headings, keep paragraphs tidy */
h1, h2, h3, .TitleXLarge, .TitleLarge, .TitleMedium { text-wrap: balance; }
p, .BodyBase, .BodySmall { text-wrap: pretty; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { max-width: 1440px; margin-inline: auto; padding-inline: var(--size-space-2xl); }
@media (max-width: 1279px) { .container { padding-inline: var(--size-space-lg); } }
@media (max-width: 767px)  { .container { padding-inline: var(--size-space-md); } }
@media (max-width: 479px)  { .container { padding-inline: var(--size-space-sm); } }

.lb-section { padding: var(--size-space-2xl) 0; background: var(--color-surface-secondary); scroll-margin-top: var(--nav-height); }
.lb-section--tinted { background: var(--color-surface-primary); }
.lb-section-heading { margin-bottom: var(--size-space-lg); }
@media (max-width: 767px) { .lb-section { padding: 56px 0; } }

/* ============================================================
   ENTRY ANIMATIONS
   ============================================================ */
.animate-on-enter { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-enter.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .animate-on-enter { transition: none; opacity: 1; transform: none; }
}

/* ============================================================
   PAGE LOADER
   ============================================================ */
.page-loader {
  position: fixed; inset: 0; z-index: 9999; background: var(--color-navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-space-sm);
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}
.page-loader__logo { width: 160px; }
.page-loader__spinner { width: 32px; height: 32px; border: 3px solid var(--color-mid-blue); border-top-color: var(--color-link); border-radius: 50%; animation: lb-spin 800ms linear infinite; }
.page-loader__message { color: #FFFFFF; text-align: center; max-width: 320px; padding-inline: var(--size-space-md); }
.page-loader__message button { margin-top: var(--size-space-sm); padding: 10px 24px; border: 0; border-radius: var(--size-radius-full); background: var(--color-link); color: #FFFFFF; font-weight: var(--typography-weight-semibold); }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.page-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .page-loader__spinner { animation-duration: 1600ms; } }

/* ============================================================
   ICONS (mask-based so colour follows currentColor / background)
   ============================================================ */
.lb-icon { display: inline-block; background-color: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; flex: none; }
.lb-icon-credit  { width: 20px; height: 15px; -webkit-mask-image: url('../images/icons/credits.svg'); mask-image: url('../images/icons/credits.svg'); }
.lb-icon-type    { width: 20px; height: 15px; -webkit-mask-image: url('../images/type.svg'); mask-image: url('../images/type.svg'); }
.lb-icon-virtual { width: 20px; height: 15px; -webkit-mask-image: url('../images/typevirtual.svg'); mask-image: url('../images/typevirtual.svg'); }
.lb-icon-x        { -webkit-mask-image: url('../images/icons/x.svg'); mask-image: url('../images/icons/x.svg'); }
.lb-icon-facebook { -webkit-mask-image: url('../images/icons/facebook.svg'); mask-image: url('../images/icons/facebook.svg'); }
.lb-icon-linkedin { -webkit-mask-image: url('../images/icons/linkedin.svg'); mask-image: url('../images/icons/linkedin.svg'); }
.lb-icon-youtube  { -webkit-mask-image: url('../images/icons/youtube.svg'); mask-image: url('../images/icons/youtube.svg'); }
.lb-icon-slideshare { -webkit-mask-image: url('../images/icons/slideshare.svg'); mask-image: url('../images/icons/slideshare.svg'); }
.lb-icon-close    { -webkit-mask-image: url('../images/icons/close.svg'); mask-image: url('../images/icons/close.svg'); }

/* ============================================================
   TOP BAR
   ============================================================ */
.lb-topbar { position: fixed; inset: 0 0 auto 0; z-index: 1000; background: #FFFFFF; border-bottom: 1px solid var(--color-border-midgray); height: var(--nav-height); }
.lb-topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--size-space-md); }
.lb-topbar__logo { display: flex; align-items: center; gap: var(--size-space-xs); }
.lb-topbar__logo img { height: 40px; width: auto; }
.lb-topbar__links { display: flex; align-items: center; gap: var(--size-space-xs); }
.lb-topbar__link { display: inline-flex; align-items: center; gap: var(--size-space-2xs); padding: 8px 16px; border: 0; background: none; color: var(--color-link); font-size: var(--typography-scale-base); line-height: 1.4; transition: color var(--transition-base); }
.lb-topbar__hamburger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: var(--color-link); }
.lb-topbar__drawer { display: none; }
@media (hover: hover) { .lb-topbar__link:hover { color: var(--color-link-hover); } }
@media (min-width: 1280px) { .lb-topbar__link { font-size: var(--typography-scale-md); } }

@media (max-width: 991px) {
  .lb-topbar__links { display: none; }
  .lb-topbar__hamburger { display: inline-flex; }
  .lb-topbar__drawer { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-navy); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height var(--transition-base), visibility var(--transition-base); }
  .lb-topbar.is-open .lb-topbar__drawer { max-height: 70vh; visibility: visible; }
  .lb-topbar__drawer .lb-topbar__link { display: flex; width: 100%; padding: 16px var(--size-space-md); color: #FFFFFF; border-top: 1px solid rgba(255,255,255,.12); }
}
@media (hover: hover) and (max-width: 991px) { .lb-topbar__drawer .lb-topbar__link:hover { background: var(--color-link-hover); color: #FFFFFF; } }

/* ============================================================
   HERO
   ============================================================ */
.lb-hero { position: relative; overflow: hidden; margin-top: var(--nav-height); color: #FFFFFF; background: var(--color-navy); isolation: isolate; }
.lb-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.lb-hero__overlay { position: absolute; inset: 0; z-index: -1; background: rgba(22, 26, 46, .7); -webkit-backdrop-filter: saturate(200%); backdrop-filter: saturate(200%); }
.lb-hero__inner { padding-top: 80px; padding-bottom: 0; }
.lb-hero__headline { max-width: 1100px; font-size: 40px; font-weight: var(--typography-weight-bold); line-height: 1.2; margin-bottom: 12px; }
.lb-hero__subhead { font-size: var(--typography-scale-lg); line-height: 1.2; }
/* The blue panel bleeds to the left edge of the viewport; the text stays on the content grid. */
.lb-hero__description { position: relative; isolation: isolate; margin-top: 48px; padding: var(--size-space-lg) var(--size-space-lg) var(--size-space-lg) 0; max-width: 1100px; margin-bottom: 80px; }
.lb-hero__description::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: -100vw; background: rgba(0, 119, 190, .8); }
.lb-hero__description p + p { margin-top: var(--size-space-sm); }
.lb-hero__description a { text-decoration: underline; }
@media (max-width: 767px) {
  .lb-hero__inner { padding-top: 48px; }
  .lb-hero__headline { font-size: 28px; }
  .lb-hero__description { margin-top: 32px; margin-bottom: 48px; padding: var(--size-space-md) var(--size-space-md) var(--size-space-md) 0; }
}

/* ============================================================
   EVENT GROUPS
   ============================================================ */
.lb-group + .lb-group { margin-top: var(--size-space-lg); }
.lb-group__heading { margin-bottom: var(--size-space-md); }
.lb-group--ungrouped + .lb-group { margin-top: var(--size-space-lg); }

/* ---- grid layout ---- */
.lb-grid { display: grid; grid-template-columns: repeat(var(--lb-cols, 3), minmax(0, 1fr)); gap: var(--size-space-lg) var(--grid-gap); }
@media (max-width: 1023px) { .lb-grid { grid-template-columns: repeat(min(var(--lb-cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 767px)  { .lb-grid { grid-template-columns: 1fr; } }

/* ---- carousel layout (ported from PACE) ---- */
.lb-carousel { overflow: hidden; overflow: clip; }
.lb-carousel__track { display: flex; gap: var(--carousel-gap); transition: transform var(--transition-carousel); }
.lb-carousel__controls { display: flex; align-items: center; justify-content: space-between; margin-top: var(--size-space-md); }
.lb-carousel__controls[hidden] { display: none; }
.lb-carousel__dots { display: flex; align-items: center; gap: var(--size-space-2xs); }
.lb-carousel__dot { width: 8px; height: 8px; border-radius: var(--size-radius-full); border: 1.5px solid var(--color-link); padding: 0; background: transparent; cursor: pointer; transition: all var(--transition-base); }
.lb-carousel__dot.is-active { width: 20px; background: var(--color-navy); border-color: var(--color-navy); }
.lb-carousel__arrows { display: flex; gap: var(--size-space-2xs); margin-left: auto; }
.lb-carousel__arrow { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--color-link); position: relative; transition: background var(--transition-base), opacity var(--transition-base); }
@media (hover: hover) { .lb-carousel__arrow:hover:not(:disabled) { background: var(--color-link-hover); } }
.lb-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.lb-carousel__arrow::before { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: #FFFFFF; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
.lb-carousel__arrow--prev::before { -webkit-mask-image: url('../images/icons/arrow-left.svg'); mask-image: url('../images/icons/arrow-left.svg'); }
.lb-carousel__arrow--next::before { -webkit-mask-image: url('../images/icons/arrow-right.svg'); mask-image: url('../images/icons/arrow-right.svg'); }

/* ---- event card (ported from PACE .pace-card--activity) ---- */
.lb-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; min-width: 0; }
.lb-card__thumb { position: relative; overflow: hidden; aspect-ratio: 16/9; background: var(--color-surface-primary); }
/* Corner ribbon (ported from PACE .pace-ribbon): small clipping square + an oversized band rotated -45deg, red. */
.lb-ribbon-wrap { position: absolute; top: 0; left: 0; width: 160px; height: 160px; overflow: hidden; z-index: 1; pointer-events: none; }
.lb-ribbon { position: absolute; top: 29px; left: -96px; width: 300px; text-align: center; transform: rotate(-45deg); background: var(--color-negative); color: #FFFFFF; font-size: var(--typography-scale-base); font-weight: var(--typography-weight-semibold); padding: 10px 0; line-height: 20px; }
.lb-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
@media (hover: hover) { .lb-card:hover .lb-card__thumb img { transform: scale(1.04); } }
.lb-card__meta { padding: var(--size-space-md) 0 var(--size-space-xs) 0; }
.lb-card__date { color: var(--color-text-secondary); margin: 0 0 var(--size-space-2xs) 0; }
.lb-card__title { color: var(--color-link); margin: 0 0 var(--size-space-2xs) 0; transition: color var(--transition-base); }
@media (hover: hover) { .lb-card:hover .lb-card__title { color: var(--color-link-hover); } }
.lb-card__faculty { color: var(--color-text-primary); margin: 0 0 var(--size-space-2xs) 0; }
.lb-card__type, .lb-card__credit { color: var(--color-text-secondary); margin: 0; display: flex; align-items: center; gap: var(--size-space-2xs); }
.lb-card__type { margin-bottom: 4px; }
.lb-card--coming-soon { cursor: default; }
.lb-card--coming-soon .lb-card__title { color: var(--color-text-primary); }
@media (hover: hover) {
  .lb-card--coming-soon:hover .lb-card__thumb img { transform: none; }
  .lb-card--coming-soon:hover .lb-card__title { color: var(--color-text-primary); }
}

/* tag pills */
.lb-tag-row { display: flex; flex-wrap: wrap; gap: var(--size-space-2xs); margin-bottom: var(--size-space-sm); } /* as PACE: 8px between pills, 16px to the date */
.lb-tag-row .lb-tag-pill { margin-bottom: 0; }
.lb-tag-pill { display: inline-block; font-size: var(--typography-scale-xs); font-weight: var(--typography-weight-regular); color: var(--color-text-secondary); background: var(--color-light-blue); border: 1px solid var(--color-mid-blue); border-radius: var(--size-radius-minimal); padding: 2px var(--size-space-2xs); margin-bottom: var(--size-space-2xs); }
.lb-tag-pill--alt { background: var(--color-negative-surface); border-color: var(--color-negative); }
.lb-tag-pill em { font-style: italic; }

/* ============================================================
   FACULTY (marquee, ported from PACE)
   ============================================================ */
.lb-faculty { position: relative; overflow: hidden; padding: var(--size-space-2xl) 0; background: linear-gradient(180deg, var(--color-brand) 0%, var(--color-navy) 100%); scroll-margin-top: var(--nav-height); }
.lb-faculty__heading { text-align: center; color: #FFFFFF; margin: 0 0 var(--size-space-lg) 0; }
.lb-faculty-carousel { overflow: hidden; }
.lb-faculty-carousel__track { display: flex; gap: 32px; width: max-content; animation: lb-faculty-scroll var(--faculty-duration, 90s) linear infinite; }
@keyframes lb-faculty-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (hover: hover) { .lb-faculty-carousel:hover .lb-faculty-carousel__track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .lb-faculty-carousel__track { animation: none; overflow-x: auto; } }
.lb-faculty-card { flex: 0 0 350px; border-radius: var(--size-radius-rounded); overflow: hidden; background: #FFFFFF; text-align: center; }
.lb-faculty-card__band { position: relative; height: 60px; background: var(--color-mid-blue); }
.lb-faculty-card__band img { position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 4px solid #FFFFFF; background: #FFFFFF; }
.lb-faculty-card__name { margin: 60px var(--size-space-sm) 0 var(--size-space-sm); }
.lb-faculty-card__credentials { margin: 0 var(--size-space-sm) var(--size-space-md) var(--size-space-sm); }
@media (max-width: 1023px) { .lb-faculty-card { flex-basis: 280px; } }
@media (max-width: 767px)  { .lb-faculty-card { flex-basis: 260px; } }

/* ============================================================
   LOCATIONS
   ============================================================ */
.lb-locations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-space-lg) 30px; }
.lb-locations > :only-child { grid-column: 1 / -1; }
.lb-location__map { margin-bottom: var(--size-space-xs); }
.lb-location__map iframe { display: block; width: 100%; height: 300px; border: 0; }
.lb-location__text a { color: var(--color-link); transition: color var(--transition-base); }
@media (hover: hover) { .lb-location__text a:hover { color: var(--color-link-hover); } }
@media (max-width: 767px) { .lb-locations { grid-template-columns: 1fr; } }

/* ============================================================
   STATEMENT
   ============================================================ */
.lb-statement { padding: 60px 0; background: #FFFFFF; }
.lb-statement p + p { margin-top: var(--size-space-sm); }

/* ============================================================
   FOOTER (matches PACE)
   ============================================================ */
.lb-footer { color: #FFFFFF; background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-navy) 100%); padding: var(--size-space-2xl) 0; }
.lb-footer__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--size-space-lg); flex-wrap: wrap; }
.lb-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--size-space-sm); }
.lb-footer__logo { height: 30px; width: auto; }
.lb-footer__social { display: flex; gap: var(--size-space-2xs); }
.lb-footer__social-icon { width: 42px; height: 42px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; transition: transform var(--transition-fast); }
.lb-footer__social-icon .lb-icon { width: 20px; height: 20px; color: var(--color-link); }
@media (hover: hover) { .lb-footer__social-icon:hover { transform: scale(1.08); } }
.lb-footer__copyright { color: rgba(255, 255, 255, 0.85); }
.lb-footer__links { display: flex; align-items: center; gap: var(--size-space-2xs); flex-wrap: wrap; margin-top: var(--size-space-md); }
.lb-footer__links a { color: #FFFFFF; text-decoration: underline; font-size: var(--typography-scale-base); }
.lb-footer__sep { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 1023px) {
  .lb-footer__links { flex-direction: column; align-items: flex-start; }
  .lb-footer__sep { display: none; }
}
@media (max-width: 767px) { .lb-footer__inner { flex-direction: column; } }

/* ============================================================
   SHARE MODAL (ported from PACE)
   ============================================================ */
body.lb-scroll-lock { overflow: hidden; }
.lb-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: var(--size-space-md); background: rgba(22, 26, 46, 0.6); }
.lb-modal.is-open { display: flex; }
.lb-modal__panel { position: relative; background: #FFFFFF; border-radius: var(--size-radius-rounded); max-width: 720px; width: 100%; max-height: 88vh; overflow-y: auto; padding: var(--size-space-lg); }
.lb-modal__close { position: absolute; top: var(--size-space-xs); right: var(--size-space-xs); width: 24px; height: 24px; border-radius: var(--size-radius-minimal); border: none; background: none; padding: 0; display: flex; align-items: center; justify-content: center; transition: opacity var(--transition-fast); z-index: 1; }
@media (hover: hover) { .lb-modal__close:hover { opacity: 0.7; } }
.lb-modal__close .lb-icon { width: 16px; height: 16px; color: var(--color-link); }

.lb-share__heading { margin: 0 0 var(--size-space-md) 0; color: var(--color-navy); }
.lb-share__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-space-xs); margin-bottom: var(--size-space-sm); }
.lb-share__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-space-2xs); padding: var(--size-space-md) var(--size-space-sm); background: var(--color-link); border: none; border-radius: var(--size-radius-minimal); color: #FFFFFF; font-family: inherit; width: 100%; transition: background var(--transition-base), transform var(--transition-base); }
@media (hover: hover) { .lb-share__btn:hover { background: var(--color-link-hover); transform: scale(1.03); } }
.lb-share__icon { width: 28px; height: 28px; flex-shrink: 0; }
.lb-share__label { font-size: var(--typography-scale-xs); font-weight: var(--typography-weight-semibold); letter-spacing: 0.03em; }
.lb-share__copy-row { display: flex; border: 1.5px solid var(--color-link); border-radius: var(--size-radius-minimal); overflow: hidden; }
.lb-share__input { flex: 1; padding: var(--size-space-xs) var(--size-space-sm); border: none; outline: none; font-family: var(--typography-family); font-size: var(--typography-scale-sm); color: var(--color-text-secondary); background: #FFFFFF; min-width: 0; }
.lb-share__copy-btn { padding: var(--size-space-xs) var(--size-space-md); background: var(--color-link); color: #FFFFFF; font-size: var(--typography-scale-sm); font-weight: var(--typography-weight-semibold); border: none; transition: background var(--transition-base); flex-shrink: 0; }
@media (hover: hover) { .lb-share__copy-btn:hover { background: var(--color-link-hover); } }
@media (max-width: 479px) { .lb-modal__panel { padding: var(--size-space-md); } }