/* =========================================================
   Zeal Portal — Stat tiles
   The dashboard metric row (e.g. 101 active / 26 opportunities /
   9 stalled / 41 needs attention). A horizontal group of cells
   with hairline separators between them and a rule above and
   below the whole band.

   Each cell is a large --font-ex number over a small uppercase
   --font-cd label. Cells may be static (<div>) or interactive
   filters (<button>).

   States:
     .stat-tile.is-on        selected — ink flood, paper text
                             ("black means selected", as tiles/seg/chips)
     .stat-tile--accent      the number in --accent (the attention cell)

   Markup:
     <div class="stat-tiles">
       <button class="stat-tile is-on">
         <span class="stat-tile__num">101</span>
         <span class="stat-tile__label">active</span>
       </button>
       <button class="stat-tile stat-tile--accent">
         <span class="stat-tile__num">41</span>
         <span class="stat-tile__label">needs attention</span>
       </button>
     </div>
   ========================================================= */

.stat-tiles {
  display: flex;
  border-top: 1px solid var(--rule-structural, var(--rule-3));
  border-bottom: 1px solid var(--rule-structural, var(--rule-3));
}

.stat-tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border: none;
  border-left: 1px solid var(--rule);
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.stat-tile:first-child { border-left: none; }

.stat-tile__num {
  font-family: var(--font-ex);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  line-height: 1;
  letter-spacing: var(--track-sub);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-tile__label {
  font-family: var(--font-cd);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Interactive (filter) tiles --- */
button.stat-tile {
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-std);
}
button.stat-tile:hover { background: var(--warm); }
button.stat-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* --- Accent number: the attention cell --- */
.stat-tile--accent .stat-tile__num { color: var(--accent); }

/* --- Selected: ink flood --- */
.stat-tile.is-on { background: var(--ink); }
.stat-tile.is-on .stat-tile__num,
.stat-tile.is-on .stat-tile__label { color: var(--paper); }