/* =======================================================================
   Ride Ranker — page-specific styles ONLY
   (no html/body/header/footer/background rules here)
   ======================================================================= */

/* Layout within the global shell */
.main-content { 
  flex: 1; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  padding: .5rem 1.5rem 2.25rem; 
}
main { width: 100%; max-width: 980px; }

/* Optional: a slightly larger subtitle just for the Ranker page */
.site-header .subtitle { font-size: 1.75rem; }
@media (max-width: 480px) { .site-header .subtitle { font-size: 1.4rem; } }

/* -----------------------------------------------------------------------
   Card grid
   ----------------------------------------------------------------------- */
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .grid { grid-template-columns: 1fr 1fr; } }

/* Cards used in the matchup area */
.card {
  background: rgba(0,0,0,0.65);
  border: 2px solid #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45),
              inset 0 0 0 1px rgba(255,255,255,0.08);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 360px;
  transition: box-shadow .25s ease, filter .25s ease, transform .12s ease;
}

/* Keep cards feeling alive on hover */
.card:hover {
  box-shadow:
    0 0 8px rgba(255,255,255,.50),
    0 10px 30px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  cursor: pointer;
  border-radius: 14px 14px 0 0;
  opacity: 0;
  transition: opacity .18s ease;
}
.card img[src] { opacity: 1; }         /* fade in when src set */
.card .name { display: none; }

/* Ride-choice buttons are integrated with card */
.card { min-height: auto; }
.card > button { width: 100%; margin: 0; border-radius: 0 0 14px 14px; }

/* Column wrapper so remove buttons sit outside the card */
.card-col { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
@media (max-width: 860px) { .card-col { gap: .5rem; } }

/* -----------------------------------------------------------------------
   Buttons & controls (Ranker owns plain <button> styles)
   ----------------------------------------------------------------------- */
button {
  font-family: inherit; font-weight: 800; letter-spacing: .3px;
  border: none; border-radius: 10px; padding: .9rem 1rem; cursor: pointer;
  background: #ffcc00; color: #000; box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: box-shadow .25s ease, filter .25s ease, transform .12s ease;
}
button.secondary { background: #333; color: #fff; border: 1px solid #666; }
button.ghost { background: transparent; color: #fff; border: 1px dashed #888; }
button:hover { filter: brightness(1.03); }
button:active { transform: translateY(.5px); }

@media (hover: hover) and (pointer: fine){
  button:not(.secondary):not(.ghost):not(.pill):hover{
    filter: brightness(1.12) !important;
    box-shadow: var(--glow-yellow) !important;
  }

  .inline-pills button:hover,
  button.secondary:hover,
  button.ghost:hover {
    filter: brightness(1.05);
    box-shadow: 0 0 12px rgba(255,255,255,.65), 0 2px 1px rgba(0,0,0,.35);
  }
}

/* Controls layout */
.controls { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: 1rem; }
@media (min-width: 860px) { .controls { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.controls-center-2 { display: grid; grid-template-columns: auto auto; justify-content: center; gap: .75rem; }
.controls-center-2 button { min-width: 160px; }

/* Big ride-choice buttons */
#btnLeft, #btnRight {
  font-size: 1.35rem; line-height: 1.2; padding: 1.1rem 1rem;
  white-space: normal; text-align: center;
}
#btnNeither, #btnUndo { font-size: 1.15rem; }
#btnStart { font-size: 1.2rem; padding: 0.9rem 1.1rem; }

@media (max-width: 480px) {
  #btnLeft, #btnRight { font-size: 1.15rem; }
  #btnNeither, #btnUndo { font-size: 1.05rem; }
}

/* Smaller image & labels on narrow screens */
@media (max-width: 600px) {
  #btnLeft, #btnRight { font-size: 1.05rem; }
  .card img { height: 200px; }
}

/* Remove buttons */
.secondary.remove { color: #CE271C; border: 1px solid #CE271C; background: #333; }
.card-col > .remove { width: auto; min-width: 120px; margin: 0; border-radius: 999px; padding: .5rem .9rem; font-size: .95rem; }
.remove-row .small { font-size: .9rem; padding: .5rem .9rem; border-radius: 999px; }

/* -----------------------------------------------------------------------
   HUD / progress
   ----------------------------------------------------------------------- */
.hud { display: grid; grid-template-columns: 1fr; align-items: center; gap: 1rem; margin: .35rem 0 .75rem; }
.hud .progress { height: 10px; background: rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; }
.hud .bar { height: 100%; width: 0%; background: #ffcc00; }

/* -----------------------------------------------------------------------
   Pills & options
   ----------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: 999px; font-size: .95rem;
  border: 1px solid #fff; color: #eee; background: rgba(0,0,0,.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset,
              0 0 8px rgba(255,255,255,.28),
              0 2px 1px rgba(0,0,0,.35);
  text-shadow: 0 0 4px rgba(255,255,255,.25);
  transition: box-shadow .25s ease, filter .25s ease, transform .12s ease;
}
.pill.toggle { cursor: pointer; user-select: none; }
.pill.toggle.selected {
  background: #0AE567; color: #000; border-color: #0AE567;
  box-shadow: 0 0 10px rgba(10,229,103,.55), 0 2px 1px rgba(0,0,0,.35);
}
.pill.toggle:hover {
  box-shadow: 0 0 12px rgba(255,255,255,.6),
              0 0 0 1px rgba(255,255,255,.25) inset,
              0 2px 1px rgba(0,0,0,.35);
}
.pill.toggle.selected:hover {
  box-shadow: 0 0 14px rgba(255,255,255,.6),
              0 0 10px rgba(10,229,103,.55),
              0 2px 1px rgba(0,0,0,.35);
}

/* Options layout */
.row-inline { display: flex; justify-content: center; align-items: center; gap: .75rem; flex-wrap: wrap; }
.row-inline .label-inline { font-weight: 800; color: #ddd; }
.row-inline .inline-pills { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.center { text-align: center; }
.spacer { height: 10px; }
#start { padding-top: 1rem; padding-bottom: 2rem; }

/* Stack label above its buttons on small screens */
.row-inline { flex-direction: column; align-items: center; gap: .5rem; }
.row-inline .label-inline { width: 100%; text-align: center; margin: 0; }
.row-inline .inline-pills { justify-content: center; }

/* -----------------------------------------------------------------------
   Panels / rows / text helpers
   ----------------------------------------------------------------------- */
.panel { background: rgba(0,0,0,0.7); border: 2px solid #fff; border-radius: 14px; padding: 1rem; }
.row { display: flex; gap: .5rem; align-items: center; justify-content: space-between; padding: .4rem .6rem; border-bottom: 1px dashed rgba(255,255,255,.18); }
.row:last-child { border-bottom: none; }
.muted { color: #bbb; }
.tiny { font-size: .85rem; color: #ccc; }
.intro { color: #eee; }
.intro + .intro { margin-top: .15rem; }
.intro:last-of-type { margin-bottom: 2rem; }
.options-block { margin-top: 2rem; margin-bottom: 2rem; }

/* -----------------------------------------------------------------------
   Start & Results screens
   ----------------------------------------------------------------------- */
#results .controls button { font-size: 1.25rem; padding: 1.1rem 1.25rem; }

/* Results actions — desktop: 2 columns; mobile: 1 */
#results .actions-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: 1fr 1fr;   /* two columns on desktop/tablet */
  align-items: stretch;
  margin-top: 1rem;
  grid-auto-flow: row;
}

/* Place each button in the grid (no HTML changes needed) */
#btnShareVideo { grid-column: 1; }   /* row 1, col 1 */
#btnSaveImage  { grid-column: 2; }   /* row 1, col 2 */

#btnCopyText   { grid-column: 1; }   /* row 2, col 1 */
#btnCopyLink   { grid-column: 2; }   /* row 2, col 2 */

#btnRestart {
  grid-column: 1 / -1;               /* row 3, full width */
  justify-self: center;
  min-width: 260px;
}

/* Mobile: stack them all in one column */
@media (max-width: 560px) {
  #results .actions-grid { grid-template-columns: 1fr; }
  #btnShareVideo,
  #btnSaveImage,
  #btnCopyText,
  #btnCopyLink,
  #btnRestart { grid-column: 1; }
}


#results .start-row {
  display: flex;
  justify-content: center;
  margin-top: .85rem;
}
#results .start-row .ghost { min-width: 260px; }

@media (max-width: 1024px) { #results .actions-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { #results .actions-grid { grid-template-columns: 1fr; } }

/* Shimmer while preparing video */
#btnShareVideo.is-loading .label {
  position: relative;
  display: inline-block;
}
#btnShareVideo.is-loading .label::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  background-position: -60% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: shimmer 1.2s linear infinite;
  pointer-events: none;
}
@keyframes shimmer { to { background-position: 160% 0; } }

/* -----------------------------------------------------------------------
   Accessibility & tiny tweaks

/* === Context-aware glows ================================================ */
:root{
  --glow-yellow: 0 0 20px rgba(245,219,45,.95),
                 0 0 36px rgba(245,219,45,.65),
                 0 4px 4px rgba(0,0,0,.45);
  --glow-white:  0 0 12px rgba(255,255,255,.65),
                 0 2px 1px rgba(0,0,0,.35);
  --glow-green:  0 0 18px rgba(10,229,103,.70),
                 0 0 32px rgba(10,229,103,.45),
                 0 2px 1px rgba(0,0,0,.35);
  --glow-red:    0 0 18px rgba(206,39,28,.70),
                 0 0 32px rgba(206,39,28,.45),
                 0 2px 1px rgba(0,0,0,.35);
}

/* 1) Primary (yellow) buttons — keep yellow glow (exclude pills) */

/* 2) Park toggles (pills) — green when selected, white when not */
.pill.toggle.selected:hover{
  box-shadow: var(--glow-green) !important;
}
.pill.toggle:not(.selected):hover{
  box-shadow: var(--glow-white) !important;
}

/* 3) “Neither” + “Undo” (secondary) — white glow */
button.secondary:hover{
  box-shadow: var(--glow-white) !important;
}

/* 4) Remove buttons (secondary remove) — red glow */
button.secondary.remove:hover{
  box-shadow: var(--glow-red) !important;
  color:#fff; /* keeps text readable on the glow */
  border-color:#CE271C;
}

/* (Nice-to-have) Match focus ring to the glow color */
button:not(.secondary):not(.ghost):not(.pill):focus-visible{
  outline:2px solid rgba(245,219,45,.9);
  outline-offset:2px;
  box-shadow: var(--glow-yellow) !important;
}
/* Touch devices: disable hover glows so buttons don't flicker */
@media (hover: none) and (pointer: coarse){
  .controls button:hover,
  .inline-pills button:hover,
  .pill.toggle:hover,
  .card:hover {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }
}
/* Desktop only: card gets white glow; the yellow choice button does NOT glow */
@media (hover: hover){
  #arena .card:hover{
    box-shadow:
      0 0 12px rgba(255,255,255,.65),
      0 10px 30px rgba(0,0,0,.55),
      inset 0 0 0 1px rgba(255,255,255,0.08) !important;
    transform: translateY(-1px);
  }
  #arena .card > button:hover{
    box-shadow: none !important;
    filter: none !important;
  }
}
/* Add subtext under the Shareable Image button */
#btnSaveImage::after{
  content: "(Top 10 and Complete List)";
  display: block;
  font-size: .8rem;
  line-height: 1.1;
  font-weight: 700;
  opacity: .92;
  margin-top: .25rem;
}

/* Kill tap highlight + tap/hover effects on touch devices */
html { -webkit-text-size-adjust: 100%; } /* prevent Safari auto-enlarge */
a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* Share buttons: larger label, smaller subtitle */
#resultActions .primary { padding-block: .85rem .9rem; }
#resultActions .primary .label {
  display:block;
  font-weight: 900;
  font-size: 1.08rem;
  line-height: 1.1;
}
#resultActions .primary .subtext {
  display:block;
  margin-top:.15rem;
  font-weight: 600;
  font-size: .82rem;
  opacity: .92;
}

/* --- Ranker cards: use true 16:9 images, not fixed heights --- */
#arena .card { min-height: unset !important; } /* don't force tall cards */

#arena .card img {
  width: 100%;
  height: auto !important;          /* override earlier 260px/200px rules */
  aspect-ratio: 16 / 9;             /* consistent, wider-than-tall shape */
  object-fit: cover;                 /* keeps edge-to-edge fill */
  object-position: center;           /* adjust if you need a bias */
  border-radius: 14px 14px 0 0;
}

/* make sure any earlier mobile overrides can't re-impose fixed heights */
@media (max-width: 600px){
  #arena .card img { height: auto !important; aspect-ratio: 16 / 9; }
}

/* Slightly smaller ride-name buttons so text fits better */
#btnLeft, #btnRight {
  font-size: clamp(1rem, 2.2vw, 1.15rem);  /* was ~1.35rem on desktop */
  line-height: 1.15;
  padding: .85rem .9rem;                   /* a bit tighter */
}

/* Desktop: card glows (white), not the yellow ride-name bar */
@media (hover: hover){
  #arena .card:hover{
    box-shadow:
      0 0 12px rgba(255,255,255,.65),
      0 10px 30px rgba(0,0,0,.55),
      inset 0 0 0 1px rgba(255,255,255,0.08) !important;
    transform: translateY(-1px);
  }
  #arena .card > #btnLeft:hover,
  #arena .card > #btnRight:hover{
    box-shadow: none !important;
    filter: none !important;
  }
}
/* ===========================================================
   Mobile / touch: disable hover & tap glows universally
   (also fade out anything that might sneak in)
   =========================================================== */
@media (hover: none), (pointer: coarse) {
  /* iOS gray tap overlay off */
  html { -webkit-tap-highlight-color: transparent; }

  /* ensure any residual effect fades out instead of sticking */
  a, button, .btn, .pill, .card, .icon,
  .site-footer .links a, .site-header .back-home {
    transition: box-shadow .18s ease-out, filter .18s ease-out !important;
  }

  /* neutralize hover/active/focus shadows/filters */
  a, button, .btn, .pill, .card, .icon,
  .site-footer .links a, .site-header .back-home,
  a:hover, a:active,
  button:hover, button:active,
  .btn:hover, .btn:active,
  .pill:hover, .pill:active,
  .card:hover, .card:active,
  .icon:hover, .icon:active,
  .site-footer .links a:hover, .site-footer .links a:active,
  .site-header .back-home:hover, .site-header .back-home:active,
  a:focus, button:focus, .btn:focus, .pill:focus, .card:focus, .icon:focus,
  a:focus-visible, button:focus-visible, .btn:focus-visible,
  .pill:focus-visible, .card:focus-visible, .icon:focus-visible {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    text-shadow: none !important;
    outline: none !important;
  }
}
/* Fallback for quirky iOS cases where hover MQ lies */
.touch a:hover, .touch a:active,
.touch button:hover, .touch button:active,
.touch .btn:hover, .touch .btn:active,
.touch .pill:hover, .touch .pill:active,
.touch .card:hover, .touch .card:active,
.touch .icon:hover, .touch .icon:active,
.touch .site-footer .links a:hover, .touch .site-footer .links a:active,
.touch .site-header .back-home:hover, .touch .site-header .back-home:active {
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
  outline: none !important;
}

/* ===========================================================
   Mobile background (portrait / small screens)
   - Uses a separate image
   - Disables background-attachment: fixed on iOS (janky)
   =========================================================== */
@media (orientation: portrait) and (max-width: 900px),
       (hover: none) and (pointer: coarse) {

  html, body {
    /* Use your mobile asset(s); image-set serves @2x automatically */
    background-image: image-set(
      url('/images/chalk-bg-mobile.jpg') 1x,
      url('/images/chalk-bg-mobile@2x.jpg') 2x
    );

    /* Keep it smooth on mobile */
    background-attachment: scroll;    /* fixes iOS repaint issues */
    background-size: cover;
    background-position: center top;  /* usually reads better in portrait */
    background-repeat: no-repeat;
  }
}
/* ===========================================================
   1) Desktop-only hover glow (mouse/trackpad)
   =========================================================== */
@media (hover: hover) and (pointer: fine) {
  /* Keep your hover glows here (examples below). Add others as needed. */
  .btn:hover,
  button[type="submit"]:hover {
    filter: brightness(1.12) !important;
    box-shadow:
      0 0 20px rgba(245,219,45,.95),
      0 0 36px rgba(245,219,45,.65),
      0 4px 4px rgba(0,0,0,.45) !important;
  }

  /* If you want a minimal keyboard outline, scope to .using-keyboard */
  .using-keyboard button:focus-visible,
  .using-keyboard a:focus-visible {
    outline: 2px solid rgba(245,219,45,.9);
    outline-offset: 2px;
    box-shadow: none !important;    /* No glow on focus */
    filter: none !important;
  }
}

/* ===========================================================
   2) Kill ALL tap/active/focus glow everywhere (mobile & desktop)
   =========================================================== */

/* Don’t let focus/active/hover create glows outside desktop hover */
a, button, .btn, .pill, .card, .icon {
  transition: box-shadow .18s ease-out, filter .18s ease-out !important;
}

a:hover, a:active, a:focus, a:focus-visible,
button:hover, button:active, button:focus, button:focus-visible,
.btn:hover, .btn:active, .btn:focus, .btn:focus-visible,
.pill:hover, .pill:active, .pill:focus, .pill:focus-visible,
.card:hover, .card:active, .card:focus, .card:focus-visible,
.icon:hover, .icon:active, .icon:focus, .icon:focus-visible {
  /* No glow by default; only desktop-hover (above) can add it */
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  outline: none !important; /* remove if you want default browser outline */
}

/* iOS tap overlay off */
html { -webkit-tap-highlight-color: transparent; }

/* Only show a minimal focus outline for keyboard users on desktop */
@media (hover: hover) and (pointer: fine){
  .using-keyboard button:focus-visible,
  .using-keyboard a:focus-visible {
    outline: 2px solid rgba(245,219,45,.9);
    outline-offset: 2px;
    box-shadow: none !important;
    filter: none !important;
  }
}

/* Absolutely no focus/tap glow otherwise */
html:not(.using-keyboard) button:focus,
html:not(.using-keyboard) button:focus-visible,
html:not(.using-keyboard) a:focus,
html:not(.using-keyboard) a:focus-visible,
html:not(.using-keyboard) .pill:focus,
html:not(.using-keyboard) .pill:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}
@media (hover: none), (pointer: coarse){
  .pill.toggle.selected { box-shadow: none !important; }
}

/* ===========================================================
   Desktop-only hover glows (buttons, Back Home, footer links, socials)
   =========================================================== */
@media (hover: hover) and (pointer: fine) {
  /* Yellow buttons (works inside cards too) */
  .btn:hover,
  button[type="submit"]:hover {
    filter: brightness(1.12) !important;
    box-shadow:
      0 0 20px rgba(245,219,45,.95),
      0 0 36px rgba(245,219,45,.65),
      0 4px 4px rgba(0,0,0,.45) !important;
    text-shadow: none !important; /* keep label crisp */
  }

  /* Universal Back Home button (header) */
  .site-header .back-home:hover {
    text-shadow: 0 0 6px rgba(245,219,45,.9), 0 0 18px rgba(245,219,45,.6) !important;
    filter: brightness(1.05) !important;
  }

  /* Footer links (Contact, Privacy) */
  .site-footer .links a:hover,
  .footer-links a:hover {
    text-shadow: 0 0 6px rgba(255,255,255,.85), 0 0 18px rgba(255,255,255,.55) !important;
    filter: brightness(1.05) !important;
  }

  /* Footer social icons */
  .site-footer .social .icon:hover {
    box-shadow: 0 0 12px rgba(255,255,255,.65), 0 2px 1px rgba(0,0,0,.35) !important;
    filter: brightness(1.05) !important;
  }
}
/* Resume bar */
#resumeBar{
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  margin: .75rem auto 1rem;
  padding: .6rem .9rem;
  max-width: 720px;
  border: 1px dashed rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #eee;
}
#resumeBar[hidden]{ display:none; }
#resumeBar .ghost{ border-color: #888; }

/* Controls: 2 buttons on the first row; Save centered on its own row */
.controls.controls-center-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)); /* Neither | Undo */
  gap: 14px;
  justify-items: center;        /* center items within their grid cell */
  max-width: 720px;
  margin: 10px auto 0;
}

.controls.controls-center-2 > button{
  width: 100%;
  min-width: 180px;
}

/* Make Save span both columns and center it */
#btnSaveProgress{
  grid-column: 1 / -1;          /* span both columns */
  justify-self: center;         /* center within that full-width cell */
  width: clamp(200px, 40%, 320px);
}

/* Phones: stack all three full-width */
@media (max-width: 600px){
  .controls.controls-center-2{ grid-template-columns: 1fr; }
  #btnSaveProgress{ grid-column: auto; width: 100%; }
}
/* Save Progress feedback state */
#btnSaveProgress{
  transition: background-color .22s ease, color .22s ease, transform .12s ease;
}

/* flash to green + crisp black text */
#btnSaveProgress.is-saved{
  background: #0AE567;           /* matches your green glow family */
  color: #111;
  -webkit-text-fill-color: #111;  /* Safari-safe */
  transform: translateY(-1px);
}

/* keep hover glow on desktop ONLY, even in saved state */
@media (hover: hover) and (pointer: fine){
  #btnSaveProgress:hover{
    filter: brightness(1.06) !important;
    box-shadow:
      0 0 12px rgba(255,255,255,.65),
      0 2px 1px rgba(0,0,0,.35) !important;   /* subtle, not the yellow CTA glow */
  }
}

/* Success flash for results actions */
#btnSaveImage,
#btnShareVideo{
  transition: background-color .22s ease, color .22s ease, transform .12s ease;
}

#btnSaveImage.is-success,
#btnShareVideo.is-success{
  background: #0AE567;          /* same green family as your glow */
  color: #111;
  -webkit-text-fill-color: #111; /* Safari-safe */
  transform: translateY(-1px);
}

/* keep desktop hover behavior even in success state */
@media (hover: hover) and (pointer: fine){
  #btnSaveImage:hover,
  #btnShareVideo:hover{
    filter: brightness(1.06) !important;
    box-shadow: 0 0 12px rgba(255,255,255,.65),
                0 2px 1px rgba(0,0,0,.35) !important;
  }
}
@media (max-width: 600px) {
  #btnStart {
    max-width: 260px;   /* tweak this number until it visually matches the DCA pill */
    width: 100%;        /* still expands responsively up to the max */
    margin-left: auto;
    margin-right: auto; /* keep it centered */
    display: block;     /* ensure centering works */
  }
}