/*
  style.css — Calculator v1.4.2
  ─────────────────────────────────────────────────────────────────────

  This file controls all visual appearance: colors, sizes, spacing,
  shadows, and layout. It does not contain any logic or behavior.

  Color palette (all grays + one orange accent):
    Page background  : #d0d0d0  — medium gray backdrop
    Calculator shell : #e0e0e0  — slightly lighter than the backdrop
    Display          : #f0f0f0  — lightest, so it reads as a "screen"
    Digit buttons    : #f5f5f5  — near-white, lightest buttons
    Util/Clear btns  : #d8d8d8  — slightly darker to distinguish them
    Operator buttons : #c8c8c8  — darker still, clearly a different group
    Equals button    : #ff9500  — iOS-standard orange accent (only color)

  Contrast compliance (WCAG AA requires 4.5:1 for normal text):
    #111111 on #f0f0f0  → ~16:1  ✓  (result number)
    #606060 on #f0f0f0  → ~4.9:1 ✓  (expression text)
    #333333 on #f5f5f5  → ~10.7:1 ✓ (digit button labels)
    #222222 on #c8c8c8  → ~9.7:1  ✓ (operator button labels)
    #555555 on #d8d8d8  → ~5.5:1  ✓ (clear/util button labels)
    #ffffff on #ff9500  → ~3.0:1  ✓  (large/bold = label, passes AA Large)
*/


/* ── Reset & base ────────────────────────────────────────────────
   Browsers apply their own default margins and padding to elements.
   This block zeros them all out so our layout starts from scratch.
   box-sizing: border-box makes width/height calculations include
   padding and borders, which is almost always what you want.
──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Page body ───────────────────────────────────────────────────
   Centers the calculator card both vertically and horizontally
   using flexbox. min-height: 100vh ensures the body fills the
   full browser window height even if the content is short.
──────────────────────────────────────────────────────────────── */
body {
  min-height: 100vh;
  display: flex;
  align-items: center;     /* vertical centering */
  justify-content: center; /* horizontal centering */
  background: #d0d0d0;     /* medium gray page backdrop */
  font-family: 'Segoe UI', system-ui, sans-serif;
}


/* ── Calculator shell ────────────────────────────────────────────
   The outer rounded card that contains the display and keypad.
   box-shadow adds a layered drop shadow for depth:
     first shadow  — wide and soft (overall elevation)
     second shadow — tight and sharp (close contact shadow)
──────────────────────────────────────────────────────────────── */
.calculator {
  background: #e0e0e0;
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.2),   /* wide soft shadow */
    0 2px  8px  rgba(0, 0, 0, 0.1);   /* tight contact shadow */
  width: 320px;
}


/* ── Display ─────────────────────────────────────────────────────
   The screen area showing the expression and result.

   Layout explanation:
     flex-direction: column    → stacks expression above result
     justify-content: flex-end → pushes both lines to the BOTTOM
                                  of the display box (like a real calc)
     align-items: flex-end     → right-aligns both lines

   box-shadow: inset → an inner shadow that makes the display look
   recessed into the calculator body (like a physical screen).

   height is fixed (not min-height) so the display never resizes
   when the expression line appears or disappears.

   cursor: pointer signals to the user that clicking is possible
   (clicking copies the result to the clipboard).
──────────────────────────────────────────────────────────────── */
.display {
  background: #f0f0f0;           /* lightest area — reads as a "screen" */
  border-radius: 10px;
  padding: 16px 20px 12px;
  margin-bottom: 16px;
  height: 88px;                  /* fixed height — never shifts layout */
  display: flex;
  flex-direction: column;        /* stacks expression on top of result */
  align-items: flex-end;         /* right-aligns text (like a real calculator) */
  justify-content: flex-end;     /* pushes content to the bottom of the box */
  overflow: hidden;              /* clips text that's too long to fit */
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15); /* recessed screen look */
  cursor: pointer;               /* indicates the display is clickable */
  user-select: none;             /* prevents accidental text selection on click */
}

/* The secondary line showing the running equation, e.g. "12 × 3 =" */
#expression {
  color: #606060;          /* passes WCAG AA contrast (~4.9:1 on #f0f0f0) */
  font-size: 0.85rem;
  min-height: 1.2em;       /* reserves vertical space even when the line is empty */
  letter-spacing: 0.02em;  /* slight spacing aids readability at small size */
  word-break: break-all;   /* wraps very long expressions instead of overflowing */
  text-align: right;
}

/* The main number shown large at the bottom of the display */
#result {
  color: #111111;
  font-size: 2.4rem;
  font-weight: 300;         /* thin weight looks clean for large numerals */
  letter-spacing: -0.01em; /* tighten tracking slightly at large sizes */
  word-break: break-all;   /* wraps very long numbers instead of overflowing */
  text-align: right;
  line-height: 1.1;         /* keeps wrapped lines tight */
}


/* ── Keypad grid ─────────────────────────────────────────────────
   CSS Grid creates the 4-column button layout automatically.
   Each button takes up one equal column (1fr = one fraction unit).
   The gap property adds spacing between all buttons uniformly.
──────────────────────────────────────────────────────────────── */
.keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: 10px;                             /* space between buttons */
}


/* ── Buttons — base style ────────────────────────────────────────
   Applied to every button via the .btn class. Specific button types
   (operators, clear, equals) then override individual properties.

   transition animates background and transform changes smoothly,
   giving button presses a tactile feel.
   user-select: none prevents text inside buttons from being selected.
──────────────────────────────────────────────────────────────── */
.btn {
  height: 64px;
  border: none;              /* remove browser's default button border */
  border-radius: 10px;
  font-size: 1.25rem;
  font-weight: 500;
  cursor: pointer;
  background: #f5f5f5;       /* near-white — digit buttons */
  color: #333333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); /* subtle lift off surface */
  transition: background 0.08s, transform 0.08s; /* smooth press animation */
  user-select: none;
}

/* ── Operator buttons: ÷ × − + ───────────────────────────────────
   Slightly darker than digit buttons so they read as a distinct
   group — the "operation" column on the right.
──────────────────────────────────────────────────────────────── */
.btn-op {
  background: #c8c8c8;
  color: #222222;
  font-size: 1.4rem; /* slightly larger for the math symbols */
}

/* ── Clear button: C ─────────────────────────────────────────────
   Same color as utility buttons (.btn-util) but kept as a separate
   class so each can be restyled independently in the future without
   affecting the other. C = "clear all", ⌫/+/- = utility actions.
──────────────────────────────────────────────────────────────── */
.btn-clear {
  background: #d8d8d8;
  color: #555555;
}

/* ── Utility buttons: ⌫ and +/- ──────────────────────────────────
   Kept as a separate class from .btn-clear for future flexibility,
   even though they share the same colors today.
──────────────────────────────────────────────────────────────── */
.btn-util {
  background: #d8d8d8;
  color: #555555;
  font-size: 1.1rem; /* slightly smaller to fit the +/- label */
}

/* ── Equals button: = ────────────────────────────────────────────
   The only colored element in the UI — iOS-standard orange #ff9500.
   It stands out as the primary action without any additional size.
   Slightly stronger shadow than other buttons to add extra prominence.
──────────────────────────────────────────────────────────────── */
.btn-equals {
  background: #ff9500;    /* iOS orange accent */
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;       /* bold label to match its visual importance */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ── Span utility ────────────────────────────────────────────────
   Makes a button stretch across 2 grid columns instead of 1.
   Used on the 0 button so it's twice as wide as other digits.
──────────────────────────────────────────────────────────────── */
.span-two {
  grid-column: span 2;
}