/* Page-specific styles for pro-rata-salary-calculator-app.html.
   Shared layout, colours and components live in brand-shared.css (the
   whole site) and calculator-shared.css (every calculator) — this file
   only holds what's unique to this calculator. The page uses the shared
   single-column layout (.layout-single). */

  /* ---------- pro-rata-salary-calculator (scoped) ---------- */

    /* First and last day side by side, each able to shrink below the date
     box's natural width; one under the other on a phone. */
  .calc-shell .field-row.date-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 560px) {
    .calc-shell .field-row.date-row { grid-template-columns: 1fr; }
    .calc-shell .date-row .field:first-child { margin-bottom: var(--field-gap); }
  }

  /* Six (or three) tiles: three to a row, so they never leave one alone. */
  .calc-shell .stat-grid.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 600px) {
    .calc-shell .stat-grid.tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Full time against you. Before the script sizes them, the bars show the
     default 100% and 60%. */
  .calc-shell #cmpBars { margin-top: 14px; }
  .calc-shell #cmpBars .hbar:first-child .hbar-fill { width: 100%; background: var(--base); }
  .calc-shell #cmpBars .hbar:nth-child(2) .hbar-fill { width: 60%; background: var(--accent); }


  /* The holiday table: the step names can be long, so the figures keep to
     a narrow column of their own. */
  .calc-shell .hol-table td { width: 5.5em; white-space: nowrap; }


  /* Your hours as a share of full time, as plain text beside the box: level
     with the box's middle, in the page's note style. On a phone it sits
     under the box. */
  .calc-shell .fte-line { margin: 0; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; column-gap: .3em; font-size: var(--text-read); }
  .calc-shell .fte-line strong { color: var(--ink); font-weight: 600; }
  @media (max-width: 560px) {
    .calc-shell .fte-readout .lbl { display: none; }
    .calc-shell .fte-line { min-height: 0; }
    .calc-shell .fte-row > .field:not([hidden]) { margin-bottom: 8px; }
    .calc-shell .hol-row > .field:first-child { margin-bottom: var(--field-gap); }
  }