/*
 * Member login (login.php). Everything is prefixed lg- so it cannot collide with the shared
 * .auth-page-background / .auth-form-* rules that register.php, forgot_password.php and reset_password.php
 * still use. Light theme only (site-wide). The Google claim page (google_claim.php) reuses this file and
 * appends its own .lg-claim* rules at the end.
 *
 * Direction: literary editorial. A navy "frontispiece" carrying a gold-ruled line from Tagore's Gitanjali,
 * overlapped by a paper-white card. Tokens are the Contact / Home navy + gold.
 *
 * Why the page sets its own link colours: style.css paints every <a> in the pale footer colour, which is
 * unreadable on white. Colours below stay on single classes scoped under .lg-page so they win.
 */

.lg-page {
  --lg-navy: var(--primary-color, #0a2342);
  --lg-navy-deep: #071a33;
  --lg-gold: var(--accent-gold, #c9a46b);
  --lg-gold-ink: #8a6420;          /* gold dark enough for text on white (>= 5:1) */
  --lg-gold-soft: #ecd9b0;         /* gold for text on navy (>= 9:1) */
  --lg-ink: #1f2a40;
  --lg-muted: #4f5b73;             /* >= 6:1 on white */
  --lg-line: rgba(10, 35, 66, 0.14);
  --lg-field-line: #7d889c;        /* >= 3:1 against white, so the field edge is visible */
  --lg-danger: #b3261e;
  --lg-cream: #faf6ec;
  --lg-paper: #fffdf9;
  --lg-radius: 22px;
  --lg-radius-sm: 12px;
  --lg-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --lg-serif: var(--heading-font, 'Playfair Display', Georgia, 'Times New Roman', serif);
  --lg-sans: var(--body-font, 'Lato', system-ui, sans-serif);
  --lg-gap-y: clamp(1.5rem, 1rem + 2.5vw, 3rem);

  position: relative;
  padding: var(--lg-gap-y) clamp(0.85rem, 3vw, 2rem) calc(var(--lg-gap-y) + 0.5rem);
  overflow-x: clip;
  color: var(--lg-ink);
  font-family: var(--lg-sans);
  background:
    radial-gradient(48rem 26rem at 100% 0%, rgba(201, 164, 107, 0.16), transparent 65%),
    radial-gradient(36rem 22rem at 0% 100%, rgba(10, 35, 66, 0.06), transparent 65%),
    var(--lg-cream);
}

/* Honeypot: off-screen for people, still present for bots (moved here from an inline <style>). */
.lg-page .hp-wrap {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---------- Shell: folio + card ---------- */

.lg-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1080px;
  margin: 0 auto;
}

/* ---------- Folio (navy frontispiece; a slim banner on phones) ---------- */

.lg-folio {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  padding: 1.15rem 1.25rem 2.6rem;
  overflow: hidden;
  color: #fff;
  border-radius: var(--lg-radius) var(--lg-radius) 0 0;
  background:
    radial-gradient(30rem 18rem at 110% -10%, rgba(201, 164, 107, 0.28), transparent 60%),
    radial-gradient(22rem 16rem at -15% 115%, rgba(201, 164, 107, 0.12), transparent 60%),
    linear-gradient(160deg, var(--lg-navy) 0%, var(--lg-navy-deep) 100%);
}
/* Faint ruled lines, like a page of a notebook held up to the light. */
.lg-folio::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(236, 217, 176, 0.05) 31px 32px);
}
.lg-folio > * { position: relative; }

.lg-folio__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.7rem;
  margin: 0;
  line-height: 1.2;
}
.lg-folio__name {
  font-family: var(--lg-serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.lg-folio__sub {
  color: var(--lg-gold-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lg-quote {
  margin: 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid rgba(201, 164, 107, 0.55);
}
.lg-page .lg-quote__text {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.45rem;
  border: 0;
  background: none;
  quotes: none;
}
.lg-page .lg-quote__text::before {
  content: '\201C';
  position: absolute;
  top: -0.3rem;
  left: -0.1rem;
  color: var(--lg-gold);
  font-family: var(--lg-serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}
.lg-page .lg-quote__text p {
  margin: 0;
  color: #fff;
  font-family: var(--lg-serif);
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: balance;
}
.lg-quote__by {
  margin: 0.5rem 0 0 1.45rem;
  color: var(--lg-gold-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lg-quote__by cite { font-style: italic; letter-spacing: 0.02em; }

/* Roman folio number (Gitanjali 35), purely decorative. */
.lg-folio__folio { display: none; }

/* ---------- Card ---------- */

.lg-card {
  position: relative;
  z-index: 1;
  margin: -1.5rem 0 0;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem) clamp(1.15rem, 0.6rem + 3vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--lg-paper);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  box-shadow: 0 1px 2px rgba(10, 35, 66, 0.08), 0 30px 60px -32px rgba(10, 35, 66, 0.45);
}
/* A short gold rule at the top edge, like a bookmark ribbon. */
.lg-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: clamp(1.15rem, 0.6rem + 3vw, 3rem);
  width: 3.25rem;
  height: 4px;
  background: var(--lg-gold);
  border-radius: 0 0 3px 3px;
}

.lg-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.55rem;
  color: var(--lg-gold-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lg-eyebrow::after {
  content: '';
  flex: 0 0 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.lg-page .lg-title {
  margin: 0 0 0.45rem;
  color: var(--lg-navy);
  font-family: var(--lg-serif);
  font-size: clamp(2rem, 1.55rem + 1.9vw, 2.75rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.lg-lede {
  max-width: 34rem;
  margin: 0 0 1.4rem;
  color: var(--lg-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ---------- Flash + client-side summary ---------- */

.lg-flash:empty { display: none; }
.lg-flash { margin: 0 0 1.25rem; }

.lg-page .form-message {
  position: relative;
  display: block;
  margin: 0;
  padding: 0.8rem 1rem 0.8rem 2.85rem;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--lg-radius-sm);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
.lg-page .form-message::before {
  position: absolute;
  top: 0.82rem;
  left: 0.85rem;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}
.lg-page .form-message.error {
  color: #7d1a14;
  background: #fdf1f0;
  border-color: rgba(179, 38, 30, 0.25);
  border-left-color: var(--lg-danger);
}
.lg-page .form-message.error::before { content: '!'; background: var(--lg-danger); }
.lg-page .form-message.warning {
  color: #5c3f06;
  background: #fdf6e6;
  border-color: rgba(138, 100, 32, 0.28);
  border-left-color: var(--lg-gold);
}
.lg-page .form-message.warning::before { content: '!'; background: var(--lg-gold-ink); }
.lg-page .form-message.success {
  color: #1d4f2e;
  background: #eef7f0;
  border-color: rgba(46, 125, 79, 0.25);
  border-left-color: #2e7d4f;
}
.lg-page .form-message.success::before { content: '\2713'; background: #2e7d4f; }

.lg-page .lg-summary { margin: 0 0 1.25rem; }
.lg-page .lg-summary[hidden] { display: none; }

/* ---------- Continue with Google ---------- */

.lg-google-wrap { margin: 0 0 1.15rem; }

.lg-page .lg-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 50px;
  padding: 0.6rem 1.25rem;
  color: #1f1f1f;
  background: #fff;
  border: 1px solid #747775;
  border-radius: var(--lg-radius-sm);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(10, 35, 66, 0.04);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--lg-ease);
}
.lg-page a.lg-google:hover {
  color: #1f1f1f;
  background: #f7f8fa;
  border-color: var(--lg-navy);
  box-shadow: 0 10px 22px -14px rgba(10, 35, 66, 0.45);
  transform: translateY(-1px);
}
.lg-page a.lg-google:active { transform: translateY(0); background: #eef1f5; }
.lg-page .lg-google:focus-visible {
  outline: 3px solid var(--lg-navy);
  outline-offset: 3px;
}

/* Spec 11 D7: local preview when Google is not configured. Visibly inert (hatched, dashed, grey G), still a
   focusable button so screen readers hear "dimmed" + the setup hint; it has no href and no handler. */
.lg-page .lg-google--preview {
  color: var(--lg-muted);
  background: repeating-linear-gradient(135deg, #f6f7f9 0 8px, #eef0f3 8px 16px);
  border: 1px dashed var(--lg-field-line);
  box-shadow: none;
  cursor: not-allowed;
}
.lg-google--preview .lg-google__logo { filter: grayscale(1); opacity: 0.6; }
.lg-google-hint {
  margin: 0.55rem 0 0;
  color: var(--lg-muted);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
.lg-google-hint code {
  padding: 0.05em 0.3em;
  color: var(--lg-ink);
  background: rgba(10, 35, 66, 0.06);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  overflow-wrap: anywhere;
}
.lg-google__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
}
.lg-google__logo { display: block; width: 18px; height: 18px; }

.lg-google-note {
  margin: 0.6rem 0 0;
  color: var(--lg-muted);
  font-size: 0.86rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

.lg-divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.15rem;
  color: var(--lg-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lg-divider::before,
.lg-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--lg-line);
}

/* ---------- Fields ---------- */

.lg-form { margin: 0; }

.lg-field { margin: 0 0 1.1rem; }

.lg-label {
  display: block;
  margin: 0 0 0.4rem;
  color: var(--lg-ink);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lg-page .lg-input {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 0.7rem 0.95rem;
  color: var(--lg-ink);
  background-color: #fff;
  border: 1px solid var(--lg-field-line);
  border-radius: var(--lg-radius-sm);
  font: inherit;
  font-size: 1rem;              /* >= 16px: no iOS zoom on focus */
  line-height: 1.4;
  box-shadow: inset 0 1px 2px rgba(10, 35, 66, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lg-page .lg-input:hover { border-color: var(--lg-ink); }
/* Focus: a solid 2px navy edge (border + 1px ring, >= 3:1 on white) inside a soft gold halo. The transparent
   outline costs nothing here but becomes a real, system-coloured outline in forced-colors mode, where
   box-shadow is dropped. */
.lg-page .lg-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--lg-navy);
  box-shadow: 0 0 0 1px var(--lg-navy), 0 0 0 5px rgba(201, 164, 107, 0.45);
}
.lg-page .lg-input[aria-invalid='true'] {
  border-color: var(--lg-danger);
  background-color: #fffafa;
}
.lg-page .lg-input[aria-invalid='true']:focus { box-shadow: 0 0 0 1px var(--lg-danger), 0 0 0 5px rgba(179, 38, 30, 0.2); }

.lg-hint {
  margin: 0.4rem 0 0;
  color: var(--lg-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}
.lg-error {
  display: flex;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
  color: var(--lg-danger);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
}
.lg-error[hidden] { display: none; }
.lg-error::before { content: '!'; flex: 0 0 auto; }

/* Password + show/hide toggle (the toggle stays hidden until js/login-page.js enables it). */
.lg-pass { position: relative; }
.lg-page .lg-input--pass { padding-right: 3.6rem; }

.lg-page .lg-reveal {
  position: absolute;
  top: 50%;
  right: 3px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  color: var(--lg-muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.lg-page .lg-reveal[hidden] { display: none; }
.lg-page .lg-reveal:hover { color: var(--lg-navy); background: rgba(10, 35, 66, 0.06); }
.lg-page .lg-reveal:focus-visible { outline: 3px solid var(--lg-navy); outline-offset: -3px; color: var(--lg-navy); }
.lg-reveal svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-reveal__hide { display: none; }
.lg-reveal[aria-pressed='true'] .lg-reveal__show { display: none; }
.lg-reveal[aria-pressed='true'] .lg-reveal__hide { display: block; }
.lg-reveal[aria-pressed='true'] { color: var(--lg-navy); }

/* The live region itself is always rendered (zero height when empty) so screen readers keep tracking it;
   js/login-page.js puts the visible pill inside it only while Caps Lock is on. */
.lg-caps { margin: 0; }
.lg-caps__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.45rem 0 0;
  padding: 0.2rem 0.6rem;
  color: #5c3f06;
  background: #fdf3dc;
  border: 1px solid rgba(138, 100, 32, 0.3);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}
.lg-caps__pill::before {
  content: '\21EA';             /* caps-lock arrow */
  font-size: 0.95rem;
  line-height: 1;
}

.lg-forgot {
  margin: -0.35rem 0 1.25rem;
  text-align: right;
}

.lg-page a.lg-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lg-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(201, 164, 107, 0.9);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.lg-page a.lg-link:hover { color: var(--lg-gold-ink); text-decoration-color: currentColor; }
.lg-page a.lg-link:focus-visible { outline: 3px solid var(--lg-navy); outline-offset: 2px; border-radius: 3px; }

/* ---------- Submit ---------- */

.lg-page .lg-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0.75rem 1.25rem;
  overflow: hidden;
  color: #fff;
  background: var(--lg-navy);
  border: 0;
  border-radius: var(--lg-radius-sm);
  font-family: var(--lg-sans);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 14px 26px -16px rgba(10, 35, 66, 0.75);
  transition: background-color 0.2s ease, transform 0.2s var(--lg-ease), box-shadow 0.2s ease;
}
/* Gold underline that draws in on hover/focus (transform only). */
.lg-page .lg-submit::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--lg-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--lg-ease);
}
.lg-page .lg-submit:hover { background: #12345f; transform: translateY(-1px); }
.lg-page .lg-submit:hover::after,
.lg-page .lg-submit:focus-visible::after { transform: scaleX(1); }
.lg-page .lg-submit:active { transform: translateY(0); }
.lg-page .lg-submit:focus-visible { outline: 3px solid var(--lg-gold-ink); outline-offset: 3px; }
.lg-page .lg-submit[aria-disabled='true'] { cursor: progress; background: #2a4466; transform: none; }

.lg-submit__spin {
  display: none;
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
}
.lg-submit[aria-disabled='true'] .lg-submit__spin {
  display: block;
  animation: lg-spin 0.8s linear infinite;
}

.lg-register {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.4rem;
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--lg-line);
  color: var(--lg-muted);
  font-size: 0.95rem;
}

/* ---------- Entrance (transform/opacity only; removed for reduced motion) ---------- */

@keyframes lg-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lg-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lg-spin { to { transform: rotate(360deg); } }

.lg-card { animation: lg-rise 0.6s var(--lg-ease) both; }
.lg-quote { animation: lg-fade 0.9s ease 0.15s both; }

/* ---------- Phones: bring the primary action above the fold ---------- */

@media (max-width: 599px) {
  .lg-lede { display: none; }
  .lg-folio { gap: 0.7rem; padding: 0.95rem 1.15rem 2.35rem; }
  .lg-quote { padding-top: 0.6rem; }
  .lg-page .lg-title { margin-bottom: 1rem; }
}

/* ---------- Tablet / desktop ---------- */

@media (min-width: 600px) {
  .lg-shell { max-width: 640px; }
  .lg-folio { padding: 1.5rem 2rem 3rem; border-radius: var(--lg-radius); }
  .lg-page .lg-quote__text p { font-size: 1.15rem; }
  .lg-card { margin: -1.75rem 1.5rem 0; }
}

@media (min-width: 900px) {
  .lg-shell {
    max-width: 1080px;
    grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
    align-items: start;
  }
  /* Sized by its content and tucked 2.25rem below the card top, so it reads as a sheet behind the card
     with no empty bands, whatever the card height (with or without the Google block). */
  .lg-folio {
    gap: 2.25rem;
    margin: 2.25rem -3.5rem 0 0;
    padding: 2.5rem 5.5rem 2.25rem 2.75rem; /* right padding sits under the overlapping card */
    border-radius: var(--lg-radius);
  }
  .lg-folio__name { font-size: 1.5rem; }
  .lg-folio__sub { font-size: 0.74rem; }

  .lg-quote {
    padding: 1.75rem 0 1.6rem;
    border-top: 4px double rgba(201, 164, 107, 0.7);   /* gold-ruled quotation: double rule above, */
    border-bottom: 1px solid rgba(201, 164, 107, 0.55); /* single rule below */
  }
  .lg-page .lg-quote__text { padding-left: 0; }
  .lg-page .lg-quote__text::before {
    position: static;
    display: block;
    height: 2.4rem;              /* the glyph sits high in its em box; keep the box short so the text follows */
    margin: 0 0 0.6rem -0.25rem;
    font-size: 5.5rem;
    line-height: 0.95;
  }
  .lg-page .lg-quote__text p {
    font-size: clamp(1.55rem, 0.6rem + 1.55vw, 2rem);
    line-height: 1.38;
    text-wrap: balance;
  }
  .lg-quote__by { margin: 1.1rem 0 0; font-size: 0.86rem; }

  .lg-folio__folio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    color: var(--lg-gold);
    font-family: var(--lg-serif);
    font-size: 0.95rem;
    letter-spacing: 0.3em;
  }
  .lg-folio__folio::before,
  .lg-folio__folio::after {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
  }

  .lg-page { padding-top: 1.5rem; }
  .lg-card {
    margin: 0;
    padding: 2.25rem 3rem 1.5rem;
  }
  .lg-lede { margin-bottom: 1.15rem; }
  .lg-google-wrap,
  .lg-divider,
  .lg-field { margin-bottom: 1rem; }
  .lg-forgot { margin-bottom: 1rem; }
  .lg-register { margin-top: 0.85rem; padding-top: 0.75rem; }
}

@media (min-width: 1200px) {
  .lg-folio { padding-left: 3.5rem; }
  .lg-card { padding: 2.25rem 3.5rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-card,
  .lg-quote { animation: none; }
  .lg-page a.lg-google,
  .lg-page .lg-submit,
  .lg-page .lg-submit::after,
  .lg-page .lg-input,
  .lg-page .lg-reveal,
  .lg-page a.lg-link { transition: none; }
  .lg-page a.lg-google:hover,
  .lg-page .lg-submit:hover { transform: none; }
  .lg-submit[aria-disabled='true'] .lg-submit__spin { animation: none; border-top-color: rgba(255, 255, 255, 0.35); }
}

@media (forced-colors: active) {
  .lg-page .lg-submit,
  .lg-page .lg-google { border: 1px solid ButtonText; }
  .lg-page .lg-google--preview { border: 1px dashed GrayText; color: GrayText; }
  .lg-page .form-message { border: 1px solid CanvasText; }
  .lg-page .lg-input:focus { outline-color: Highlight; }
}