/* ============================================================
   Act 3 — The Recovery  ·  act3-recovery.css  (light mode)

   NOTE: The .act3-closing panel deliberately uses a dark
   background (#030703) as an intentional closing movement —
   the page bookends: dark forest → bridge → light acts →
   dark closing reflection.
   ============================================================ */

/* ── Act 3 root layout ──────────────────────────────────────────── */
#act3 {
  background: var(--act-bg);
}

/* ── Timeline ───────────────────────────────────────────────────── */
.act3-timeline-wrap {
  width:        100%;
  overflow:     hidden;
  position:     relative;
}

.act3-timeline-svg {
  display:      block;
  width:        100%;
  height:       auto;
  overflow:     visible;
}

/* Tooltip — light mode card */
.act3-timeline-tooltip {
  position:     absolute;
  background:   rgba(244, 239, 230, 0.97);
  border:       1px solid rgba(26, 40, 16, 0.14);
  border-radius: 6px;
  padding:      0.6rem 0.9rem;
  font-family:  var(--font-family);
  font-size:    0.75rem;
  color:        var(--act-text-body);
  line-height:  1.5;
  pointer-events: none;
  opacity:      0;
  transition:   opacity 180ms ease;
  max-width:    220px;
  z-index:      10;
  box-shadow:   0 2px 12px rgba(26,40,16,0.10);
}

.act3-timeline-tooltip.is-visible {
  opacity:      1;
}

.act3-timeline-tooltip b {
  display:      block;
  font-size:    0.8rem;
  margin-bottom: 0.25rem;
  color:        var(--act-text-primary);
}

/* "You are here" label */
.act3-you-are-here {
  font-family:  var(--act-font-mono);
  font-size:    0.65rem;
  letter-spacing: 0.08em;
  fill:         rgba(26, 40, 16, 0.55);
  text-anchor:  middle;
}

/* ── NDVI vs Diversity dual-line chart ──────────────────────────── */
.act3-dual-wrap {
  width:        100%;
  overflow:     hidden;
}

.act3-dual-svg {
  display:      block;
  width:        100%;
  height:       auto;
  overflow:     visible;
}

/* Line colours — high-contrast on parchment */
.act3-line-ndvi {
  fill:         none;
  stroke:       #8A5500;  /* dark amber — 8:1 contrast on parchment */
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap:  round;
}

.act3-line-diversity {
  fill:         none;
  stroke:       #1A7A68;  /* dark teal — 6:1 contrast on parchment */
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap:  round;
}

.act3-legend-row {
  display:      flex;
  gap:          1.4rem;
  flex-wrap:    wrap;
  margin-top:   0.5rem;
  margin-bottom: 0.2rem;
}

.act3-legend-item {
  display:      flex;
  align-items:  center;
  gap:          0.4rem;
  font-family:  var(--act-font-mono);
  font-size:    0.7rem;
  color:        var(--act-text-body);
  letter-spacing: 0.04em;
}

.act3-legend-swatch {
  display:      inline-block;
  width:        24px;
  height:       2px;
  flex-shrink:  0;
}

.act3-legend-swatch.ndvi      { background: #8A5500; }
.act3-legend-swatch.diversity { background: #1A7A68; }

/* ── Species abundance distribution panels ──────────────────────── */
.act3-abundance-section {
  width:        100%;
  padding:      3rem var(--act-pad-x, 2rem);
  box-sizing:   border-box;
  background:   var(--act-bg);
}

.act3-abundance-section h3 {
  font-family:  var(--font-family);
  font-size:    clamp(1rem, 2vw, 1.2rem);
  font-weight:  normal;
  font-style:   italic;
  color:        var(--act-text-primary);
  margin:       0 0 0.4rem;
}

.act3-abundance-section .act3-section-sub {
  font-size:    0.82rem;
  color:        var(--act-text-body);
  margin:       0 0 2rem;
  max-width:    72ch;
}

.act3-panels-grid {
  display:      grid;
  grid-template-columns: repeat(3, 1fr);
  gap:          1.5rem;
}

.act3-panel {
  display:      flex;
  flex-direction: column;
  gap:          0.5rem;
}

.act3-panel-label {
  font-family:  var(--act-font-mono);
  font-size:    0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:        var(--act-text-muted);
}

.act3-panel-year {
  font-family:  var(--font-family);
  font-size:    1.4rem;
  font-weight:  bold;
  color:        var(--act-text-primary);
  line-height:  1;
}

.act3-panel-desc {
  font-size:    0.75rem;
  color:        var(--act-text-body);
  line-height:  1.5;
  margin-top:   0.1rem;
}

.act3-abundance-svg {
  display:      block;
  width:        100%;
  height:       auto;
}

/* ── Override Act 3 body: single-column, prose spans full width ─── */
#act3 .act-body {
  display:      block;
}

/* Prose container: flow-root contains the float, full-width */
#act3 .act-prose {
  display:      flow-root;
  max-width:    none;
}

/* ── Photo: float left, prose wraps right ───────────────────────── */
/* Width sized so the 2/3 portrait height ≈ first three paragraphs */
.act3-photo-block {
  float:        left;
  width:        min(420px, 44%);
  margin:       0 2.6rem 1.6rem 0;
}

.act3-photo-card-inner {
  position:     relative;
  border-radius: 4px;
  overflow:     hidden;
  box-shadow:   0 3px 18px rgba(26,40,16,0.16);
}

.act3-photo-img {
  display:      block;
  width:        100%;
  height:       auto;
  object-fit:   cover;
  aspect-ratio: 2 / 3;
}

.act3-photo-expand {
  -webkit-appearance: none;
  appearance:   none;
  position:     absolute;
  bottom:       0.5rem;
  right:        0.5rem;
  width:        26px;
  height:       26px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  background-color: rgba(26,40,16,0.62);
  background-image: none;
  box-shadow:   none;
  border:       1px solid rgba(255,255,255,0.22);
  border-radius: 3px;
  color:        rgba(255,255,255,0.88);
  cursor:       pointer;
  transition:   background-color 180ms ease;
}

.act3-photo-expand:hover,
.act3-photo-expand:focus-visible {
  background-color: rgba(26,40,16,0.88);
  outline:          none;
}

.act3-photo-credit {
  margin:       0.3rem 0 0;
  font-family:  var(--act-font-mono);
  font-size:    0.58rem;
  line-height:  1.4;
  letter-spacing: 0.06em;
  color:        rgba(26,40,16,0.50);
}

/* ── Recovery aerial photo — floats left, under the prose, beside the
   panel stack's carbon chart ─────────────────────────────────────── */
.act3-recovery-photo {
  float:  left;
  width:  min(520px, 40%);
  margin: 0 1.4rem 1.6rem 0;
}

.act3-recovery-photo-img {
  display:      block;
  width:        100%;
  height:       auto;
  object-fit:   cover;
  aspect-ratio: 1600 / 669;
}

/* ── Section divide: clears photo float, creates a visual break
   between the photo-aligned paragraphs and the panel region.
   Inserted in DOM between P3 and the panel stack. ─────────────── */
.act3-section-divide {
  clear:        left;
  margin:       0;
}

/* ── Panel stack: floats right below the section divide ─────────── */
.act3-panel-stack {
  float:          right;
  width:          52%;
  margin-left:    3%;
  margin-bottom:  1.6rem;
  display:        flex;
  flex-direction: column;
  gap:            2rem;
}

/* Panels inside the stack take the full stack width */
.act3-inline-panel {
  width:        100%;
}

/* ── Diagram captions: massively reduced in Act 3 ───────────────── */
#act3 .act1-graph-note {
  font-size:    0.46rem;
  color:        rgba(26, 40, 16, 0.38);
  margin-top:   0.4rem;
}

/* ── Source citation tooltips ───────────────────────────────────── */
.act3-src-wrap {
  position:     relative;
  display:      inline-block;
  cursor:       help;
  outline:      none;
}

.act3-src-term {
  border-bottom: 1px dotted rgba(26, 40, 16, 0.40);
  padding-bottom: 1px;
  transition:   border-color 180ms ease, color 180ms ease;
}

.act3-src-wrap:hover .act3-src-term,
.act3-src-wrap:focus-visible .act3-src-term {
  border-bottom-color: rgba(26, 40, 16, 0.72);
}


.act3-src-tooltip {
  position:     absolute;
  bottom:       calc(100% + 12px);
  left:         50%;
  transform:    translateX(-50%) translateY(8px);
  width:        260px;
  max-width:    calc(100vw - 32px);
  padding:      0.8rem 1rem 0.9rem;
  background:   rgba(10, 18, 7, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:       1px solid rgba(45, 106, 27, 0.30);
  border-radius: 10px;
  box-shadow:   0 16px 48px rgba(0, 0, 0, 0.40),
                0 4px  12px rgba(0, 0, 0, 0.28);
  font-family:  var(--act-font-mono);
  font-size:    0.60rem;
  color:        rgba(235, 248, 228, 0.80);
  line-height:  1.60;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity:      0;
  transition:   opacity 200ms ease,
                transform 240ms cubic-bezier(0.34, 1.38, 0.64, 1);
  z-index:      300;
  white-space:  normal;
  text-align:   left;
}

/* Arrow border */
.act3-src-tooltip::before {
  content:      '';
  position:     absolute;
  top:          100%;
  left:         50%;
  transform:    translateX(-50%);
  border:       7px solid transparent;
  border-top-color: rgba(45, 106, 27, 0.30);
  border-bottom-width: 0;
  pointer-events: none;
}

/* Arrow fill */
.act3-src-tooltip::after {
  content:      '';
  position:     absolute;
  top:          calc(100% - 1px);
  left:         50%;
  transform:    translateX(-50%);
  border:       6px solid transparent;
  border-top-color: rgba(10, 18, 7, 0.97);
  border-bottom-width: 0;
  pointer-events: none;
}

/* Show (base) */
.act3-src-wrap:hover .act3-src-tooltip,
.act3-src-wrap:focus-within .act3-src-tooltip,
.act3-src-wrap.is-active .act3-src-tooltip {
  opacity:        1;
  transform:      translateX(-50%) translateY(0);
  pointer-events: auto;
}

.act3-src-label {
  display:        block;
  font-weight:    600;
  color:          rgba(235, 248, 228, 0.55);
  margin-bottom:  0.3rem;
  font-size:      0.56rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.act3-src-link {
  display:        block;
  margin-top:     0.45rem;
  color:          rgba(150, 210, 90, 0.85);
  text-decoration: none;
  font-size:      0.60rem;
  letter-spacing: 0.03em;
  transition:     color 140ms ease;
}

.act3-src-link:hover {
  color:           rgba(180, 235, 120, 0.95);
  text-decoration: underline;
}

/* Left-anchored variant: tooltip left-aligns to its anchor (for panel titles) */
.act3-src-wrap--left .act3-src-tooltip {
  left:      0;
  transform: translateY(8px);
}

.act3-src-wrap--left .act3-src-tooltip::before {
  left:      20px;
  transform: none;
}

.act3-src-wrap--left .act3-src-tooltip::after {
  left:      21px;
  transform: none;
}

.act3-src-wrap--left:hover .act3-src-tooltip,
.act3-src-wrap--left:focus-within .act3-src-tooltip,
.act3-src-wrap--left.is-active .act3-src-tooltip {
  opacity:   1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Photo lightbox ─────────────────────────────────────────────── */
/* Never use display:none / [hidden] — they prevent CSS transitions
   in Safari.  Use opacity + visibility instead (same pattern as
   Act 1 ξ tooltip and Act 2 popups).                              */
.act3-lightbox {
  position:     fixed;
  inset:        0;
  z-index:      900;
  background:   rgba(4, 8, 3, 0.0);
  display:      flex;
  flex-direction: column;
  align-items:  center;
  justify-content: center;
  padding:      2rem 1.5rem;
  box-sizing:   border-box;
  opacity:      0;
  visibility:   hidden;
  pointer-events: none;
  transition:   background 300ms ease, opacity 300ms ease,
                visibility 0ms linear 310ms;
}

.act3-lightbox.is-open {
  background:   rgba(4, 8, 3, 0.92);
  opacity:      1;
  visibility:   visible;
  pointer-events: auto;
  transition:   background 300ms ease, opacity 300ms ease;
}

.act3-lightbox-close {
  position:     absolute;
  top:          1.2rem;
  right:        1.4rem;
  width:        36px;
  height:       36px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  background:   transparent;
  border:       1px solid rgba(255,255,255,0.22);
  border-radius: 3px;
  color:        rgba(255,255,255,0.72);
  cursor:       pointer;
  transition:   color 180ms ease, border-color 180ms ease;
}

.act3-lightbox-close:hover,
.act3-lightbox-close:focus-visible {
  color:        #fff;
  border-color: rgba(255,255,255,0.55);
  outline:      none;
}

.act3-lightbox-img {
  display:      block;
  max-width:    min(600px, 90vw);
  max-height:   65vh;
  object-fit:   contain;
  border-radius: 3px;
  box-shadow:   0 4px 32px rgba(0,0,0,0.5);
  opacity:      0;
  transform:    translateY(12px);
  transition:   opacity 300ms ease 80ms, transform 320ms ease 80ms;
}

.act3-lightbox.is-open .act3-lightbox-img {
  opacity:      1;
  transform:    translateY(0);
}

/* Recovery aerial is a wide landscape — blow it up larger than the
   default portrait-oriented lightbox cap. */
#act3Lightbox2 .act3-lightbox-img {
  max-width:  min(1200px, 94vw);
  max-height: 78vh;
}

#act3Lightbox2 .act3-lightbox-caption {
  max-width:  min(1200px, 94vw);
}

.act3-lightbox-caption {
  margin-top:   1.2rem;
  max-width:    min(600px, 90vw);
  text-align:   left;
  opacity:      0;
  transition:   opacity 300ms ease 180ms;
}

.act3-lightbox.is-open .act3-lightbox-caption {
  opacity:      1;
}

.act3-lightbox-desc {
  font-family:  var(--font-family);
  font-size:    0.82rem;
  font-style:   italic;
  color:        rgba(244,239,230,0.78);
  line-height:  1.6;
  margin:       0 0 0.7rem;
}

.act3-lightbox-meta {
  display:      flex;
  flex-wrap:    wrap;
  gap:          0.5rem 1.2rem;
  font-family:  var(--act-font-mono);
  font-size:    0.66rem;
  letter-spacing: 0.06em;
  color:        rgba(244,239,230,0.36);
}

/* ── Carbon emissions chart ─────────────────────────────────────── */
.act3-carbon-wrap {
  width:        100%;
  overflow:     visible;
  position:     relative;
}

.act3-carbon-tip {
  position:       absolute;
  background:     rgba(26, 40, 16, 0.92);
  border:         1px solid rgba(26, 40, 16, 0.18);
  border-radius:  3px;
  padding:        0.4rem 0.65rem;
  display:        flex;
  flex-direction: column;
  gap:            0.15rem;
  pointer-events: none;
  transition:     opacity 150ms ease;
  white-space:    nowrap;
  z-index:        10;
}

.act3-carbon-tip-year {
  font-family:    var(--act-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.10em;
  color:          rgba(244, 239, 230, 0.55);
  text-transform: uppercase;
}

.act3-carbon-tip-val {
  font-family:    var(--act-font-mono);
  font-size:      0.75rem;
  color:          rgba(244, 239, 230, 0.92);
  font-weight:    600;
}

.act3-carbon-tip-note {
  font-family:    var(--act-font-mono);
  font-size:      0.55rem;
  color:          #C06030;
  letter-spacing: 0.06em;
}

.act3-carbon-svg {
  display:      block;
  width:        100%;
  height:       auto;
  overflow:     visible;
}

.act3-carbon-line {
  fill:         none;
  stroke:       #5A7A20;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap:  round;
}

/* ── Parchment → dark transition bridge ─────────────────────────── */
/*
   Sits between the abundance section (parchment) and the closing
   panel (dark). Prevents the hard colour-cut that would otherwise
   occur. Height 120 px keeps it short enough to feel like a scene
   cut rather than a dead scroll zone.
*/
.act3-light-to-dark {
  display:    block;
  height:     120px;
  background: linear-gradient(to bottom, var(--act-bg), #030703);
  flex-shrink: 0;   /* safety if parent is flex */
}

/* ── Donation panel ──────────────────────────────────────────────── */
.act3-donate {
  width:      100%;
  min-height: 100vh;
  position:   relative;
  display:    flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding:    5rem var(--act-pad-x, 2rem);
  background-image:    url('../photos/donation_flower.JPG');
  background-size:     160%;
  background-position: center center;
  background-repeat:   no-repeat;
}

.act3-donate::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(4, 10, 4, 0.50);
  pointer-events: none;
}

.act3-donate__content {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  max-width:       480px;
  width:           100%;
  gap:             0;
}

.act3-donate__label {
  font-family:    var(--act-font-mono);
  font-size:      0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(244, 239, 230, 0.45);
  margin:         0 0 0.6rem;
}

.act3-donate__heading {
  font-family:  Georgia, serif;
  font-size:    clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight:  400;
  font-style:   italic;
  color:        rgba(244, 239, 230, 0.92);
  margin:       0 0 2.8rem;
  letter-spacing: -0.01em;
}

/* Info button */
.act3-donate__info-btn {
  position:   absolute;
  top:        1.2rem;
  right:      1.2rem;
  width:      28px;
  height:     28px;
  background: transparent;
  border:     none;
  padding:    0;
  cursor:     pointer;
  color:      rgba(244, 239, 230, 0.45);
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: color 180ms ease;
  z-index:    10;
}

.act3-donate__info-btn:hover {
  color: rgba(244, 239, 230, 0.90);
}

.act3-donate__info-tooltip {
  position:      absolute;
  top:           calc(100% + 0.5rem);
  right:         0;
  min-width:     220px;
  background:    rgba(4, 10, 4, 0.92);
  border:        1px solid rgba(244, 239, 230, 0.12);
  border-radius: 3px;
  padding:       0.85rem 1rem;
  display:       flex;
  flex-direction: column;
  gap:           0.3rem;
  text-align:    left;
  pointer-events: none;
  opacity:       0;
  transform:     translateY(-4px);
  transition:    opacity 180ms ease, transform 180ms ease;
  white-space:   nowrap;
}

.act3-donate__info-btn:hover .act3-donate__info-tooltip,
.act3-donate__info-btn:focus-visible .act3-donate__info-tooltip {
  opacity:   1;
  transform: translateY(0);
}

.act3-donate__info-tooltip span {
  font-family:    var(--act-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.06em;
  color:          rgba(244, 239, 230, 0.55);
  line-height:    1.5;
}

.act3-donate__info-credit {
  color:          rgba(244, 239, 230, 0.85) !important;
  margin-bottom:  0.25rem;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid rgba(244, 239, 230, 0.10);
}

/* SEPA QR block */
.act3-donate__qr-wrap {
  width:          100%;
  margin-bottom:  2rem;
}

.act3-donate__sublabel {
  font-family:    var(--act-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(244, 239, 230, 0.38);
  margin:         0 0 1rem;
}

.act3-donate__amounts {
  display:        flex;
  gap:            0.65rem;
  justify-content: center;
  margin-bottom:  1.1rem;
}

.act3-donate__amount-btn {
  font-family:    var(--act-font-mono);
  font-size:      0.85rem;
  letter-spacing: 0.06em;
  padding:        0.55rem 1.4rem;
  background:     transparent;
  color:          rgba(244, 239, 230, 0.65);
  border:         1px solid rgba(244, 239, 230, 0.22);
  border-radius:  2px;
  cursor:         pointer;
  transition:     background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.act3-donate__amount-btn:hover {
  background:   rgba(244, 239, 230, 0.08);
  color:        rgba(244, 239, 230, 0.90);
  border-color: rgba(244, 239, 230, 0.45);
}

.act3-donate__amount-btn.is-selected {
  background:   rgba(122, 191, 74, 0.18);
  color:        #9ADF5A;
  border-color: #5A9E3A;
}

.act3-donate__qr-canvas-wrap {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.7rem;
}

.act3-donate__qr-canvas {
  display:       block;
  border-radius: 4px;
  opacity:       0;
  transition:    opacity 300ms ease;
}

.act3-donate__qr-canvas.is-ready {
  opacity: 1;
}

.act3-donate__qr-hint {
  font-family:    var(--act-font-mono);
  font-size:      0.55rem;
  letter-spacing: 0.06em;
  color:          rgba(244, 239, 230, 0.30);
  margin:         0;
  transition:     opacity 200ms ease;
}

/* QR country-support note */
.act3-donate__qr-countries {
  max-width:      34ch;
  margin:         1rem auto 0;
  font-family:    var(--act-font-mono);
  font-size:      0.54rem;
  line-height:    1.6;
  letter-spacing: 0.04em;
  color:          rgba(244, 239, 230, 0.42);
  text-align:     center;
}

/* Divider */
.act3-donate__divider {
  width:          100%;
  display:        flex;
  align-items:    center;
  gap:            0.75rem;
  margin:         0 0 2rem;
  color:          rgba(244, 239, 230, 0.22);
  font-family:    var(--act-font-mono);
  font-size:      0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.act3-donate__divider::before,
.act3-donate__divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: rgba(244, 239, 230, 0.12);
}

/* Bank details */
.act3-donate__bank {
  width:      100%;
  margin:     0;
  padding:    1.4rem 1.6rem;
  background: rgba(244, 239, 230, 0.05);
  border:     1px solid rgba(244, 239, 230, 0.10);
  border-radius: 3px;
  box-sizing: border-box;
}

.act3-donate__bank-row {
  display:    flex;
  justify-content: space-between;
  align-items: baseline;
  gap:         1rem;
  padding:     0.45rem 0;
  border-bottom: 1px solid rgba(244, 239, 230, 0.07);
}

.act3-donate__bank-row:last-child {
  border-bottom: none;
}

.act3-donate__bank dt {
  font-family:    var(--act-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(244, 239, 230, 0.36);
  flex-shrink:    0;
}

.act3-donate__bank dd {
  font-family:    var(--act-font-mono);
  font-size:      0.65rem;
  color:          rgba(244, 239, 230, 0.72);
  margin:         0;
  text-align:     right;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .act3-photo-block {
    width:        min(300px, 40%);
    margin-right: 1.8rem;
  }

  .act3-panel-stack {
    width:        50%;
  }
}

@media (max-width: 640px) {
  .act3-photo-block {
    float:        none;
    width:        100%;
    max-width:    360px;
    margin-right: 0;
    margin-bottom: 1.4rem;
  }

  .act3-section-divide {
    clear:        none;
    display:      none;
  }

  .act3-panel-stack {
    float:        none;
    width:        100%;
    margin-left:  0;
  }

  .act3-donate {
    padding: 4rem 1.2rem;
  }

  .act3-donate__bank-row {
    flex-direction: column;
    gap: 0.1rem;
    text-align: left;
  }

  .act3-donate__bank dd {
    text-align: left;
  }
}