/* =====================================================================
   Nrisco Home Care - Premium layer
   ---------------------------------------------------------------------
   Loaded AFTER style.css, and deliberately additive: it introduces new
   component classes (.pauth-*, .socials-*, .social-admin-*) and does not
   restyle the existing .card / .btn / .table primitives, so every screen
   that does not opt in looks exactly as it did before.

   PALETTE - the existing Nrisco brand, nothing invented
   The site's brand is navy #002d62 and orange #f97316, and this layer
   uses those and only those as its hues. The "premium" quality comes
   from how they are deployed rather than from new colours: deeper navy
   shades for the dark panel, the orange reserved as a single accent
   rather than sprayed across buttons, generous whitespace, a display
   serif for headings and softer shadows.

   The --lux-* names are kept so the whole layer can be retinted from
   this one block, but every value below is the brand navy or the brand
   orange. --lux-ink* are darker steps of #002d62 (same hue, lower
   lightness) so the dark panel still reads as Nrisco navy, not black.
   ===================================================================== */

:root{
  /* Navy - #002d62 and darker steps of the same hue for the dark panel */
  --lux-ink:#001631;        /* deepest navy  */
  --lux-ink-2:#002047;      /* mid navy      */
  --lux-ink-3:#002d62;      /* brand navy    */
  --lux-ink-4:#0a3e7d;      /* lifted navy, for gradients */

  /* Brand orange - the single accent. Named --lux-gold* only because
     every rule downstream already refers to these tokens; the values
     are #f97316 and shades of it. */
  --lux-gold:#f97316;
  --lux-gold-lt:#fb9a4b;
  --lux-gold-dk:#c2560a;
  --lux-gold-glow:rgba(249,115,22,.20);

  /* Supporting - taken from the existing status palette in style.css */
  --lux-teal:#10b981;
  --lux-rose:#ef4444;

  /* Light-side surfaces for the form half - the existing neutrals */
  --lux-paper:#fafbfc;
  --lux-paper-2:#f8fafc;
  --lux-line:#eef2f6;
  --lux-text:#0f172a;
  --lux-text-2:#475569;
  --lux-text-3:#94a3b8;

  --lux-radius:18px;
  --lux-radius-sm:12px;
  --lux-shadow:0 1px 2px rgba(0,22,49,.04), 0 8px 24px rgba(0,22,49,.06);
  --lux-shadow-lg:0 24px 64px rgba(0,22,49,.16), 0 2px 8px rgba(0,22,49,.08);

  /* Serif display face for headings - the single biggest lift from
     "admin panel" to "considered product". */
  --lux-serif:'Fraunces','Playfair Display',Georgia,'Times New Roman',serif;
}

/* =====================================================================
   SPLIT-SCREEN AUTH
   Left: dark brand panel. Right: the form on paper.
   Collapses to a single column under 900px, brand panel first but
   shortened to a banner so the form is never pushed below the fold.
   ===================================================================== */

.pauth{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--lux-paper);
}

/* ---------- left: brand panel ---------- */
.pauth-brand{
  position:relative;
  overflow:hidden;
  padding:56px 56px 44px;
  display:flex;
  flex-direction:column;
  color:#fff;
  background:
    radial-gradient(1200px 620px at 108% -12%, rgba(249,115,22,.20), transparent 62%),
    radial-gradient(760px 520px at -12% 106%, rgba(249,115,22,.10), transparent 60%),
    linear-gradient(158deg, var(--lux-ink) 0%, var(--lux-ink-2) 48%, var(--lux-ink-4) 100%);
}

/* A fine orange hairline down the seam - reads as a deliberate edge
   rather than two panels that happen to meet. */
.pauth-brand::after{
  content:'';
  position:absolute; top:0; right:0; bottom:0; width:1px;
  background: linear-gradient(to bottom, transparent, var(--lux-gold-glow) 18%, var(--lux-gold-glow) 82%, transparent);
}

/* Very low-contrast concentric rings, masked to the lower corner.
   Gives the flat gradient somewhere to catch the eye without becoming
   a pattern the copy has to compete with. */
.pauth-brand::before{
  content:'';
  position:absolute; right:-160px; bottom:-200px;
  width:620px; height:620px; border-radius:50%;
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.028) 0 1px, transparent 1px 42px);
  pointer-events:none;
}

.pauth-brand > *{ position:relative; z-index:1; }

/* No margin-bottom:auto here.
   The logo, the body and the foot were each claiming the leftover vertical
   space (auto margins on the logo AND the foot), which pushed the copy into
   the bottom third and left a large empty band under the logo - very visible
   on a tall page like register.php, where the panel stretches to match the
   form. The body is the flex child that grows now, and it centres its own
   content, so the copy sits optically centred whatever the panel's height. */
.pauth-logo{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.pauth-logo .lg-icon{ height:42px; width:auto; }
.pauth-logo .lg-word{
  height:40px; width:auto;
  /* The wordmark art is dark navy; on this field it needs inverting. */
  filter: brightness(0) invert(1);
  opacity:.94;
}

/* Grows to fill whatever is left between the logo and the foot, and centres
   its own children vertically. min-height:0 is what lets it shrink below its
   content on a short viewport instead of overflowing the panel. */
/* Desktop: the panel is one screen tall and stays put while the form scrolls.
   It used to stretch to the form's height with its text centred in that, so
   anything that made the form taller - the professional fields on
   register.php appearing - pushed the text down the page. */
@media (min-width: 981px){
  .pauth-brand{
    position:sticky; top:0;
    align-self:start;
    height:100vh;
  }
}

.pauth-brand-body{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 0;
  max-width:440px;
}

.pauth-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color: var(--lux-gold-lt);
  margin-bottom:22px;
}
.pauth-eyebrow::before{
  content:''; width:26px; height:1px; background: var(--lux-gold);
}

.pauth-brand h1{
  font-family: var(--lux-serif);
  font-size:42px; line-height:1.14; font-weight:500;
  letter-spacing:-.02em;
  margin:0 0 18px;
  color:#fff;
}
.pauth-brand h1 em{
  font-style:italic;
  color: var(--lux-gold-lt);
}
.pauth-brand .pauth-lede{
  font-size:15px; line-height:1.72;
  color: rgba(255,255,255,.66);
  margin:0 0 34px;
}

/* ---------- trust list ---------- */
.pauth-points{ list-style:none; margin:0 0 34px; padding:0; display:grid; gap:15px; }
.pauth-points li{
  display:flex; align-items:flex-start; gap:13px;
  font-size:14px; color: rgba(255,255,255,.86);
  line-height:1.5;
}
.pauth-points i{
  flex:0 0 auto;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px;
  color: var(--lux-gold-lt);
  background: rgba(249,115,22,.12);
  border:1px solid rgba(249,115,22,.30);
  margin-top:1px;
}
.pauth-points b{ color:#fff; font-weight:600; }

/* ---------- stat strip ---------- */
.pauth-stats{
  display:flex; gap:32px; flex-wrap:wrap;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.09);
}
.pauth-stats div{ min-width:78px; }
.pauth-stats .n{
  font-family: var(--lux-serif);
  font-size:25px; font-weight:600; color: var(--lux-gold-lt);
  letter-spacing:-.01em; line-height:1.1;
}
.pauth-stats .l{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color: rgba(255,255,255,.44); margin-top:5px;
}

/* ---------- footer of the brand panel ---------- */
/* No margin-top:auto - .pauth-brand-body already absorbs the free space, and
   a second auto margin here would split it between the two and re-open the
   gap this layout is meant to close. */
.pauth-brand-foot{
  flex:0 0 auto;
  padding-top:32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
.pauth-brand-foot .c{
  font-size:11.5px; color: rgba(255,255,255,.34);
}

/* =====================================================================
   RIGHT: the form
   ===================================================================== */
.pauth-form-wrap{
  display:flex; align-items:center; justify-content:center;
  padding:48px 40px;
  background: var(--lux-paper);
}
.pauth-form{ width:100%; max-width:410px; }
.pauth-form.is-wide{ max-width:600px; }

/* Mobile-only logo: the brand panel is hidden below 900px, so the form
   would otherwise be unbranded. */
.pauth-mobile-logo{ display:none; align-items:center; gap:10px; margin-bottom:28px; }
.pauth-mobile-logo .lg-icon{ height:34px; }
.pauth-mobile-logo .lg-word{ height:32px; }

.pauth-form h2{
  font-family: var(--lux-serif);
  font-size:30px; font-weight:500; letter-spacing:-.02em;
  color: var(--lux-text);
  margin:0 0 9px;
}
.pauth-form .pauth-sub{
  font-size:14px; color: var(--lux-text-2); line-height:1.6;
  margin:0 0 30px;
}

/* ---------- segmented tabs ---------- */
.pauth-tabs{
  display:flex; gap:4px; padding:4px; margin-bottom:28px;
  background: var(--lux-paper-2);
  border:1px solid var(--lux-line);
  border-radius:12px;
}
.pauth-tabs a{
  flex:1; text-align:center; padding:10px 0;
  font-size:13px; font-weight:600;
  color: var(--lux-text-2);
  border-radius:9px;
  transition: background .18s, color .18s, box-shadow .18s;
}
.pauth-tabs a:hover{ color: var(--lux-text); }
.pauth-tabs a.active{
  background:#fff;
  color: var(--lux-ink);
  box-shadow:0 1px 2px rgba(0,22,49,.05), 0 2px 8px rgba(0,22,49,.06);
}

/* ---------- account type picker (register.php) ---------- */
.acct-type{
  border:0; padding:0; margin:0 0 24px; min-width:0;
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.acct-type legend{
  font-size:12.5px; font-weight:600; color: var(--lux-text);
  margin-bottom:8px; padding:0;
}
.acct-opt{ position:relative; display:block; cursor:pointer; }
.acct-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.acct-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  height:100%;
  padding:14px 16px;
  background:#fff;
  border:1.5px solid #e2e8f0;
  border-radius:12px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.acct-card i{
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background: var(--lux-paper-2); color: var(--lux-text-2);
  font-size:15px; margin-bottom:6px;
  transition: background .18s, color .18s;
}
.acct-card strong{ font-size:13.5px; color: var(--lux-ink); font-weight:600; }
.acct-card small{ font-size:11.5px; color: var(--lux-text-3); }
.acct-opt:hover .acct-card{ border-color:#cbd5e1; }
.acct-opt input:checked + .acct-card{
  border-color: var(--lux-gold);
  background: #fff7ed;
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
.acct-opt input:checked + .acct-card i{ background: var(--lux-gold); color:#fff; }
.acct-opt input:focus-visible + .acct-card{ outline:2px solid var(--lux-gold); outline-offset:2px; }
.acct-worker{ border:0; padding:0; margin:0; min-width:0; }
.acct-worker[hidden], [data-for-type][hidden]{ display:none !important; }
@media (max-width:420px){ .acct-type{ grid-template-columns:1fr; } }

/* ---------- fields ---------- */
.pauth-field{ margin-bottom:19px; }
.pauth-field > label{
  display:block;
  font-size:12.5px; font-weight:600; color: var(--lux-text);
  margin-bottom:8px;
  letter-spacing:-.005em;
}
.pauth-field .req{ color: var(--lux-rose); }

.pauth-input{ position:relative; display:flex; align-items:center; }
/* Leading glyph. Sits inside the field, muted, and takes the gold on
   focus so the active field is unmistakable at a glance. */
.pauth-input > i.lead{
  position:absolute; left:15px;
  font-size:13px; color: var(--lux-text-3);
  pointer-events:none;
  transition: color .18s;
}
.pauth-input input,
.pauth-input select,
.pauth-input textarea{
  width:100%;
  padding:13px 15px 13px 42px;
  font-family:inherit; font-size:14px; color: var(--lux-text);
  background:#fff;
  border:1px solid var(--lux-line);
  border-radius:12px;
  transition: border-color .18s, box-shadow .18s, background .18s;
  -webkit-appearance:none; appearance:none;
}
/* No leading icon on this field - reclaim the padding. */
.pauth-input.no-icon input,
.pauth-input.no-icon select,
.pauth-input.no-icon textarea{ padding-left:15px; }
.pauth-input textarea{ min-height:80px; resize:vertical; padding-top:12px; }

.pauth-input input::placeholder,
.pauth-input textarea::placeholder{ color: var(--lux-text-3); }

.pauth-input input:hover,
.pauth-input select:hover,
.pauth-input textarea:hover{ border-color:#cfd4e2; }

.pauth-input input:focus,
.pauth-input select:focus,
.pauth-input textarea:focus{
  outline:0;
  border-color: var(--lux-gold);
  box-shadow: 0 0 0 4px var(--lux-gold-glow);
}
.pauth-input input:focus ~ i.lead,
.pauth-input:focus-within > i.lead{ color: var(--lux-gold-dk); }

/* Select needs its own chevron once appearance is stripped. */
.pauth-input.is-select::after{
  content:'\f078'; /* fa-chevron-down */
  font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; right:16px;
  font-size:10px; color: var(--lux-text-3);
  pointer-events:none;
}
.pauth-input.is-select select{ padding-right:38px; }

/* Password reveal */
.pauth-eye{
  position:absolute; right:6px;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
  color: var(--lux-text-3); font-size:13px;
  border-radius:9px;
  transition: color .15s, background .15s;
}
.pauth-eye:hover{ color: var(--lux-text); background: var(--lux-paper-2); }
.pauth-input:has(.pauth-eye) input{ padding-right:44px; }

.pauth-help{
  font-size:11.5px; color: var(--lux-text-3);
  margin-top:7px; line-height:1.55;
}

/* One-time-code field: wide tracking, centred, monospaced digits. */
.pauth-otp input{
  text-align:center;
  font-size:22px; font-weight:600;
  letter-spacing:.34em;
  padding-left:15px;
  font-variant-numeric: tabular-nums;
}

/* Two fields side by side, stacking on narrow screens. */
.pauth-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ---------- inline row: remember / forgot ---------- */
.pauth-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:-3px 0 24px;
}
.pauth-check{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; color: var(--lux-text-2); cursor:pointer;
  user-select:none;
}
.pauth-check input{
  width:16px; height:16px; margin:0;
  accent-color: var(--lux-gold-dk);
  cursor:pointer;
}
.pauth-link{
  font-size:12.5px; font-weight:600; color: var(--lux-gold-dk);
}
.pauth-link:hover{ color: var(--lux-ink); }

/* ---------- primary button ---------- */
.pauth-btn{
  width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 22px;
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.01em;
  color:#fff;
  background: linear-gradient(135deg, var(--lux-ink-3) 0%, var(--lux-ink) 100%);
  border:1px solid var(--lux-ink);
  border-radius:12px;
  cursor:pointer;
  position:relative; overflow:hidden;
  box-shadow: 0 1px 2px rgba(0,22,49,.16), 0 8px 20px rgba(0,22,49,.14);
  transition: transform .16s, box-shadow .2s, filter .2s;
}
/* An orange sheen that sweeps across on hover. Purely decorative, and it
   costs one pseudo-element and a transform - no repaint of the label. */
.pauth-btn::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 32%, rgba(249,115,22,.30) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.pauth-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,22,49,.18), 0 14px 32px rgba(0,22,49,.20);
}
.pauth-btn:hover::before{ transform: translateX(120%); }
.pauth-btn:active{ transform: translateY(0); }
.pauth-btn i{ position:relative; }
.pauth-btn span{ position:relative; }

/* Orange variant - the brand accent, used for the primary action. */
.pauth-btn.is-gold{
  background: linear-gradient(135deg, var(--lux-gold-lt) 0%, var(--lux-gold) 62%, var(--lux-gold-dk) 100%);
  border-color: var(--lux-gold-dk);
  color: var(--lux-ink);
  box-shadow: 0 1px 2px rgba(194,86,10,.24), 0 8px 22px rgba(249,115,22,.28);
}
.pauth-btn.is-gold::before{
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.44) 50%, transparent 68%);
}
.pauth-btn.is-gold:hover{
  box-shadow: 0 2px 6px rgba(194,86,10,.28), 0 16px 36px rgba(249,115,22,.34);
}

/* ---------- secondary / ghost actions ---------- */
.pauth-ghost{
  width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px;
  font-size:13.5px; font-weight:600;
  color: var(--lux-text);
  background:#fff;
  border:1px solid var(--lux-line);
  border-radius:12px;
  transition: border-color .16s, background .16s, transform .16s;
}
.pauth-ghost:hover{
  border-color:#cfd4e2; background: var(--lux-paper-2);
  color: var(--lux-text); transform: translateY(-1px);
}

/* ---------- divider ---------- */
.pauth-or{
  display:flex; align-items:center; gap:14px;
  margin:24px 0;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color: var(--lux-text-3);
}
.pauth-or::before, .pauth-or::after{
  content:''; flex:1; height:1px; background: var(--lux-line);
}

/* ---------- alerts ---------- */
.pauth-alert{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 15px; margin-bottom:22px;
  font-size:13px; line-height:1.55;
  border-radius:12px;
  border:1px solid;
}
.pauth-alert i{ margin-top:2px; flex:0 0 auto; font-size:13px; }
.pauth-alert.is-error{ background:#fff1f2; border-color:#fecdd3; color:#9f1239; }
.pauth-alert.is-warn { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.pauth-alert.is-ok   { background:#f0fdfa; border-color:#99f6e4; color:#115e59; }
.pauth-alert.is-info { background:#f5f6fa; border-color:var(--lux-line); color:var(--lux-text-2); }

/* ---------- foot links ---------- */
.pauth-foot{
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--lux-line);
  font-size:13px; color: var(--lux-text-2);
  text-align:center; line-height:1.9;
}
.pauth-foot a{ font-weight:600; color: var(--lux-gold-dk); }
.pauth-foot a:hover{ color: var(--lux-ink); }
.pauth-back{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:16px;
  font-size:12px; color: var(--lux-text-3);
}
.pauth-back:hover{ color: var(--lux-text-2); }

/* =====================================================================
   STAFF VARIANT
   Same structure, inverted: the whole page is dark and the form sits on
   a raised panel. A staff login that looks nothing like the customer
   one is also a small anti-phishing measure - a fake of one does not
   pass for the other.
   ===================================================================== */
.pauth.is-staff{ background: var(--lux-ink); }
.pauth.is-staff .pauth-form-wrap{
  background:
    radial-gradient(760px 520px at 50% -20%, rgba(249,115,22,.10), transparent 62%),
    var(--lux-ink);
}
.pauth.is-staff .pauth-form{
  background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  padding:38px 34px;
  box-shadow: var(--lux-shadow-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pauth.is-staff .pauth-form h2{ color:#fff; }
.pauth.is-staff .pauth-form .pauth-sub{ color: rgba(255,255,255,.56); }
.pauth.is-staff .pauth-field > label{ color: rgba(255,255,255,.82); }
.pauth.is-staff .pauth-input input,
.pauth.is-staff .pauth-input select{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color:#fff;
}
.pauth.is-staff .pauth-input input::placeholder{ color: rgba(255,255,255,.3); }
.pauth.is-staff .pauth-input input:hover,
.pauth.is-staff .pauth-input select:hover{ border-color: rgba(255,255,255,.2); }
.pauth.is-staff .pauth-input input:focus,
.pauth.is-staff .pauth-input select:focus{
  background: rgba(255,255,255,.07);
  border-color: var(--lux-gold);
  box-shadow:0 0 0 4px rgba(249,115,22,.16);
}
.pauth.is-staff .pauth-input > i.lead{ color: rgba(255,255,255,.34); }
.pauth.is-staff .pauth-input:focus-within > i.lead{ color: var(--lux-gold-lt); }
.pauth.is-staff .pauth-eye{ color: rgba(255,255,255,.4); }
.pauth.is-staff .pauth-eye:hover{ color:#fff; background: rgba(255,255,255,.07); }
.pauth.is-staff .pauth-help{ color: rgba(255,255,255,.4); }
.pauth.is-staff .pauth-check{ color: rgba(255,255,255,.6); }
.pauth.is-staff .pauth-foot{
  border-top-color: rgba(255,255,255,.09);
  color: rgba(255,255,255,.5);
}
.pauth.is-staff .pauth-foot a,
.pauth.is-staff .pauth-link{ color: var(--lux-gold-lt); }
.pauth.is-staff .pauth-back{ color: rgba(255,255,255,.34); }
.pauth.is-staff .pauth-back:hover{ color: rgba(255,255,255,.6); }
.pauth.is-staff .pauth-or{ color: rgba(255,255,255,.3); }
.pauth.is-staff .pauth-or::before,
.pauth.is-staff .pauth-or::after{ background: rgba(255,255,255,.1); }
.pauth.is-staff .pauth-mobile-logo .lg-word{ filter: brightness(0) invert(1); }

/* A restrained "restricted area" notice. */
.pauth-restricted{
  display:flex; align-items:flex-start; gap:11px;
  margin-top:24px; padding:13px 15px;
  font-size:11.5px; line-height:1.6;
  color: rgba(255,255,255,.48);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.pauth-restricted i{ color: var(--lux-gold); margin-top:1px; }

/* =====================================================================
   SOCIAL ICONS (public)
   Two styles. 'ghost' is the footer default - a neutral tile that takes
   the platform's own colour on hover. 'solid' fills with the brand
   colour immediately. Both read the colour from --s-brand, set inline
   per link by socialRenderHtml(), so a new platform needs no CSS.
   ===================================================================== */
.socials{ display:flex; gap:9px; flex-wrap:wrap; }

.socials a{
  position:relative;
  width:38px; height:38px;
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  padding:0;
  text-decoration:none;
  transition: transform .2s cubic-bezier(.34,1.3,.64,1), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.socials a:hover{ transform: translateY(-3px); }
.socials a:active{ transform: translateY(-1px); }
.socials a:focus-visible{
  outline:2px solid var(--lux-gold);
  outline-offset:2px;
}

/* ---- ghost ---- */
/* The glyph carries the platform colour at rest, so each icon is recognisable
   and visible without hovering; hover then fills the tile with that colour. */
.socials-ghost a{
  background:#fff;
  border:1px solid #e2e8f0;
  color: var(--s-brand, var(--lux-text-2));
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.socials-ghost a:hover{
  background: var(--s-brand, var(--lux-ink));
  border-color: var(--s-brand, var(--lux-ink));
  color:#fff;
  box-shadow: 0 8px 20px -6px var(--s-brand, rgba(0,22,49,.5));
}

/* On a dark field the neutral tile has to be light-on-dark instead.
   Opt in with the socials-on-dark class only. The public footer is WHITE
   (.footer{background:#fff}), and it used to be listed here as well, which
   rendered its icons white-on-white: invisible until hovered. */
.socials-on-dark a{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.11);
  color: rgba(255,255,255,.72);
}
.socials-on-dark a:hover{
  background: var(--s-brand, #fff);
  border-color: var(--s-brand, #fff);
  color:#fff;
}
/* Snapchat's yellow is unreadable as a glyph on white, and needs dark glyphs
   on its own yellow fill. */
.socials-ghost a.s-snapchat{ color: var(--lux-ink); }
.socials a.s-snapchat:hover{ color: var(--lux-ink); }

/* ---- solid ---- */
.socials-solid a{
  background: var(--s-brand, var(--lux-ink));
  border:1px solid transparent;
  color:#fff;
  box-shadow: 0 2px 8px -2px var(--s-brand, rgba(0,22,49,.4));
}
.socials-solid a:hover{
  box-shadow: 0 10px 24px -6px var(--s-brand, rgba(0,22,49,.5));
  filter: saturate(1.15) brightness(1.06);
}
.socials-solid a.s-snapchat{ color: var(--lux-ink); }

/* ---- header variant: smaller, borderless ---- */
.socials-in-nav{ gap:4px; }
.socials-in-nav a{
  width:32px; height:32px; font-size:13px;
  border-radius:9px;
  background:transparent; border-color:transparent; box-shadow:none;
  color: var(--s-brand, var(--lux-text-2));
}
.socials-in-nav a:hover{
  background: var(--s-brand, var(--lux-ink));
  border-color: transparent;
  color:#fff;
}

/* ---- on the auth brand panel ---- */
.pauth-brand .socials a{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.74);
}
.pauth-brand .socials a:hover{
  background: var(--s-brand, #fff);
  border-color: var(--s-brand, #fff);
  color:#fff;
}
.pauth-brand .socials a.s-snapchat:hover{ color: var(--lux-ink); }

/* =====================================================================
   ADMIN: Social Media screen
   ===================================================================== */
.social-admin-grid{
  display:grid;
  grid-template-columns: 370px minmax(0, 1fr);
  gap:18px;
  align-items:start;
}

/* Placement checkboxes, as rows rather than a bare checkbox list. */
.social-check{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; margin-bottom:7px;
  font-size:13px; font-weight:500;
  background: var(--lux-paper-2);
  border:1px solid var(--lux-line);
  border-radius:11px;
  cursor:pointer;
  transition: border-color .16s, background .16s;
}
.social-check:hover{ border-color:#cfd4e2; }
.social-check input{
  width:17px; height:17px; margin:0;
  accent-color: var(--lux-gold-dk);
  cursor:pointer;
  flex:0 0 auto;
}
.social-check span{ display:flex; flex-direction:column; gap:1px; }
.social-check small{ font-size:11px; color: var(--lux-text-3); font-weight:400; }
/* A ticked row is visibly chosen, not just a filled box. */
.social-check:has(input:checked){
  background: #fffdf4;
  border-color: var(--lux-gold-lt);
}

/* Platform chip in the list */
.social-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-bottom:6px;
  border-radius:9px;
  font-size:13px;
  color:#fff;
  background: var(--s-brand, var(--lux-ink));
  box-shadow: 0 2px 6px -2px var(--s-brand, rgba(0,22,49,.4));
}

/* Reorder arrows */
.social-move{ display:flex; flex-direction:column; gap:3px; }
.social-move form{ margin:0; display:block; }
.social-move button{
  width:24px; height:19px;
  display:flex; align-items:center; justify-content:center;
  font-size:9px;
  color: var(--lux-text-3);
  background: var(--lux-paper-2);
  border:1px solid var(--lux-line);
  border-radius:6px;
  cursor:pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.social-move button:hover{
  background: var(--lux-ink); border-color: var(--lux-ink); color:#fff;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px){
  .social-admin-grid{ grid-template-columns:1fr; }
}

@media (max-width: 980px){
  .pauth{ grid-template-columns:1fr; }

  /* The brand panel becomes a banner: keep the logo, headline and lede,
     drop the list and stats so the form stays reachable without a long
     scroll on a phone. */
  .pauth-brand{ padding:30px 28px 34px; }
  /* Banner mode: no free space to centre within, so the body goes back to
     flowing from the top under the logo. */
  .pauth-brand-body{
    flex:0 0 auto;
    justify-content:flex-start;
    padding:26px 0 0;
    max-width:none;
  }
  .pauth-brand h1{ font-size:27px; }
  .pauth-brand .pauth-lede{ font-size:14px; margin-bottom:0; }
  .pauth-points,
  .pauth-stats,
  .pauth-brand-foot{ display:none; }
  .pauth-brand::before{ display:none; }
  .pauth-brand::after{
    top:auto; bottom:0; left:0; right:0; width:auto; height:1px;
    background: linear-gradient(to right, transparent, var(--lux-gold-glow), transparent);
  }
  .pauth-form-wrap{ padding:34px 24px 48px; }
}

@media (max-width: 560px){
  .pauth-brand{ padding:24px 20px 28px; }
  .pauth-brand h1{ font-size:23px; }
  .pauth-logo .lg-icon{ height:34px; }
  .pauth-logo .lg-word{ height:32px; }
  .pauth-form-wrap{ padding:28px 18px 40px; }
  .pauth-form h2{ font-size:25px; }
  .pauth-row{ grid-template-columns:1fr; gap:0; }
  .pauth.is-staff .pauth-form{ padding:26px 20px; }
  .pauth-meta{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Reduced motion: keep the states, drop the movement. */
@media (prefers-reduced-motion: reduce){
  .socials a,
  .pauth-btn,
  .pauth-ghost{ transition: background .01s, color .01s, border-color .01s; }
  .socials a:hover,
  .pauth-btn:hover,
  .pauth-ghost:hover{ transform:none; }
  .pauth-btn::before{ display:none; }
}