/* The Jobs home (dash.js), after YourCA's Dash: the greeting on the head's
   line (YourCA spike.css .yp-greeting), the chart cards (YourCA dash.css
   .ydash-*) and their dotted ground that fades at its edges. Tokens only.
   YourFire's own file, not shared with YourHyd. */

/* The greeting: a 40px face (account.css) and the line at the greeting size. */
.dash-head { align-items: center; }
.dash-hello { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.dash-hello-line { margin: 0; font-size: var(--t-2xl); font-weight: var(--w-medium); letter-spacing: var(--track-tight); line-height: var(--lh-tight); }

/* Three cards in a row, at desk and tablet. */
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.dash-card { display: flex; flex-direction: column; min-width: 0; padding: var(--space-4h) var(--space-5) var(--space-5); }
.dash-fig { margin-top: var(--space-2); font-size: var(--t-xl); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; }
.dash-line { margin: var(--space-0) 0 0; font-size: var(--t-xs); line-height: var(--lh-body); color: var(--ink-3); }

/* The drawing sits at the card's foot over the dotted ground. */
.dash-plot { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; margin-top: var(--space-4); min-height: 112px; }
.dash-plot:empty { min-height: 0; margin-top: 0; }
.dash-plot:not(:empty)::before {
  content: ""; position: absolute; inset: calc(-1 * var(--space-2)) 0 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1.2px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 50%, var(--ink) 0%, transparent 72%);
          mask-image: radial-gradient(ellipse at 60% 50%, var(--ink) 0%, transparent 72%);
}
.dash-plot > * { position: relative; }

/* Rows: name, bar, figure. A row that opens a job lights on hover. */
.dash-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-0); }
.dash-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) var(--space-6); align-items: center; gap: var(--space-2h);
  min-height: 18px; padding: 0 var(--space-1); margin: 0 calc(-1 * var(--space-1));
  border-radius: var(--r-xs); color: var(--ink-2); font-size: var(--t-xs); font-weight: var(--w-regular);
}
a.dash-row:hover { background: var(--row-veil); text-decoration: none; color: var(--ink); }
.dash-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row-track { height: var(--space-2); border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.dash-row-bar { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.dash-row-bar.none { background: none; }
.dash-row-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--w-medium); color: var(--ink); }

.dash-more { margin: var(--space-1) 0 0; font-size: var(--t-xs); color: var(--ink-3); }

/* Month bars: the count over the bar, the month under it, this month in ink. */
.dash-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); height: 112px; align-items: end; }
.dash-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-1); height: 100%; min-width: 0; }
.dash-col-bar { width: min(28px, 70%); border-radius: var(--r-xs) var(--r-xs) 0 0; background: var(--accent); }
.dash-col-bar.none { height: var(--space-0); background: var(--line-2); }
.dash-col-n { font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--ink-2); font-variant-numeric: tabular-nums; min-height: 18px; }
.dash-col-label { font-size: var(--t-xs); color: var(--ink-3); }
.dash-col.now .dash-col-label { color: var(--ink); font-weight: var(--w-bold); }

/* The section heading over the list sits above its card, at the section size. */
.dash-sec { display: flex; align-items: center; gap: var(--space-1); font-size: var(--t-lg); font-weight: var(--w-medium); letter-spacing: var(--track-tight); margin: 0 0 var(--space-3); }
.dash-empty p { max-width: 460px; margin: var(--space-1) auto 0; }