/* =========================================================
   GLOBAL RESET
   ---------------------------------------------------------
   Browsers all ship with default margins, paddings,
   font sizes, etc. These defaults make layout unpredictable.

   This reset:
   - removes surprise spacing
   - makes box sizing intuitive
   - gives us a clean mental model
   ========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 
   box-sizing: border-box means:
   width = content + padding + border

   Without this, padding adds to width and breaks alignment.
*/


/* =========================================================
   ROOT / BODY
   ---------------------------------------------------------
   Body is the canvas. Keep it boring and stable.
   No clever tricks here.
   ========================================================= */

body {
  /* Use system fonts for speed and neutrality */
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Background color for the entire page */
  background-color: #2196f3;   /* flat blue, easy to change later */

  /* Default text color */
  color: #ffffff;

  /* Prevent horizontal scroll accidents */
  overflow-x: hidden;
}


/* =========================================================
   PAGE CONTAINER
   ---------------------------------------------------------
   This is your "instrument frame".
   Everything lives inside this.
   ========================================================= */

.page {
  /* Limit how wide content can grow on large screens */
  max-width: 1200px;

  /* Center the page horizontally */
  margin-left: auto;
  margin-right: auto;

  /* Breathing room from screen edges */
  padding: 32px;
}

/*
   Mental model:
   - body = infinite background
   - .page = the readable instrument surface
*/


/* =========================================================
   TITLE / HEADER AREA
   ---------------------------------------------------------
   Simple, centered, non-dominating.
   Should explain the page in one glance.
   ========================================================= */

.title {
  text-align: center;

  font-size: 32px;
  font-weight: 600;

  /* Slight transparency keeps it calm */
  opacity: 0.9;

  /* Space below title before main content */
  margin-bottom: 24px;
}


/* =========================================================
   MAIN CONTENT FRAME
   ---------------------------------------------------------
   This holds the two figures (female / male).
   Grid is used here for clarity and future flexibility.
   ========================================================= */

.main {
  display: grid;

  /* One column for now (we'll expand later if needed) */
  grid-template-columns: 1fr;

  /* Center everything horizontally */
  justify-items: center;
}
/* =========================================================
   CENTER CONTENT INSIDE CIRCLE
   ========================================================= */

.circle {
  width: 140px;
  height: 140px;
  background-color: #ffffff;
  border-radius: 50%;

  /* This centers anything inside the circle */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =========================================================
   EXPECTANCY FIGURE GROUP
   ---------------------------------------------------------
   Flexbox is ideal when:
   - you have items in a row
   - spacing between them matters
   ========================================================= */

.expectancy {
  display: flex;

  /* Center as a group */
  justify-content: center;
  align-items: center;

  /* Space between female and male figures */
  gap: 28px;

  /* Space before the source line */
  margin-bottom: 20px;
}


/* =========================================================
   INDIVIDUAL PERSON BLOCK
   ---------------------------------------------------------
   Each figure is self-contained:
   icon
   label
   value
   ========================================================= */

.person {
  display: flex;
  flex-direction: column;

  /* Center icon, label, number */
  align-items: center;
  text-align: center;

  gap: 6px;
}

/* =========================================================
   LABEL (Female / Male)
   ---------------------------------------------------------
   Secondary information — keep it quiet.
   ========================================================= */

.person .label {
  font-size: 16px;
  opacity: 0.85;
}


/* =========================================================
   VALUE (Life Expectancy Number)
   ---------------------------------------------------------
   This is the primary signal.
   Size and weight communicate importance.
   ========================================================= */

.person .value {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  margin-top: 4px;
}


/* =========================================================
   BELOW-THE-FOLD SECTION (OPTIONAL LENSES)
   ---------------------------------------------------------
   This is NOT continuation.
   This is a new way of seeing the same data.
   ========================================================= */

.secondary {
  margin-top: 64px;
  padding-top: 22px;

  /* Visual separation without heavy lines */
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.secondary h2 {
  font-size: 20px;
  font-weight: 600;

  margin-bottom: 16px;
}


/* =========================================================
   SIMPLE BAR (FOR COMPARISONS)
   ---------------------------------------------------------
   Minimal, non-animated, non-dramatic.
   ========================================================= */

.bar-row {
  display: flex;
  align-items: center;

  gap: 12px;
  margin-bottom: 10px;
}

.bar-label {
  width: 140px;
  font-size: 14px;
  opacity: 0.9;
}

.bar {
  height: 18px;
  border-radius: 4px;

  background: rgba(255, 255, 255, 0.4);
}

.bar.highlight {
  background: #ffffff;
}

/* =========================================================
   MOBILE LAYOUT
   ---------------------------------------------------------
   On narrow screens, stack instead of shrinking.
   ========================================================= */

@media (max-width: 600px) {

  .expectancy {
    /* Stack vertically */
    flex-direction: column;

    /* Reduce vertical spacing */
    gap: 40px;
  }

}

.person img {
  width: 120px;
  height: 120px;
  display: block;
}

.source {
  text-align: center;
  font-size: 14px;
  opacity: 0.75;
  margin-top: 12px;
  margin-bottom: 3px;
}
.controls {
  margin-top: 16px;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  gap: 40px;
}

.control {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 6px;
}

.control label {
  font-size: 13px;
  opacity: 0.7;
}

.control select {
  min-width: 180px;
  padding: 10px 12px;

  font-size: 14px;

  border-radius: 6px;
  border: 1px solid #ccc;

  background-color: #ffffff;
  color: #000000;

  appearance: auto;
}

/* =========================================================
   SUPPORT / MONETIZATION ACTIONS
   ---------------------------------------------------------
   Optional, calm, non-intrusive support actions
   ========================================================= */

.support {
  margin-top: 0px; /* tighter spacing from selects */

  display: flex;
  justify-content: center;
  align-items: center; /* keeps buttons perfectly aligned */

  gap: 10px; /* about half the previous spacing */
}

.support-btn {
  padding: 12px 22px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 500;

  text-decoration: none;
  white-space: nowrap;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition: background-color 0.15s ease,
              transform 0.05s ease;
}

.support-btn.primary {
  background-color: rgba(255, 255, 255, 0.9);
  color: #1f4fa3;
}

.support-btn.primary:hover {
  background-color: #ffffff;
}

.support-btn.secondary {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.support-btn.secondary:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.support-or {
  font-size: 11px;
  opacity: 0.55;
  line-height: 1;
}
.divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);

  margin-top: 8px;   /* tighten above */
  margin-bottom: 8px; /* tighten below */
}

/* =========================================================
   SUPPORT BLOCK (STRUCTURALLY OWNED)
   ========================================================= */

.support-block {
  margin-top: 12px;
}

.support-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.support-content {
  padding-top: 8px;   /* THIS controls space under line */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.support-note {
  font-size: 14px;
  opacity: 0.8;
  text-align: center;
}

.support-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}