/* Health: the jobs in their Todo card, the off-state lines, a row's
   badges and actions, why a run ended, a job's state before its name in
   the side panel, and the Usage table under the jobs. */
@layer views {
  /* Health's column keeps to the left. */
  #view-health > .view-head {
    --head-left: var(--page-x);
    --head-right: calc(var(--page-x) + max(0px, 100% - var(--column)));
  }
  /* Health's row holds only the title, shorter at rest than the others'
     button row, so it grows by a different amount when it compacts. */
  #view-health > .view-head.is-compact {
    margin-bottom: calc(49.6px - var(--controls-h));
  }

  /* Health: the jobs in their Todo card.
     Its column is Goals's, in panel.css; the header and card rules are
     shared with Goals and the Feed. */

  .routines-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 16px;
  }

  .jobs-updated {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
  }
  .jobs-updated:empty { display: none; }

  .routine-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
  }

  .routine-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name badge"
      "when when";
    align-items: center;
    gap: 2px 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
  }

  .job-row {
    margin: 0 -10px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 7px;
    cursor: pointer;
  }
  .job-row:hover { background: var(--hover-tint); }
  .job-row[aria-current="true"] {
    background: var(--green-bg);
    box-shadow: inset 3px 0 0 var(--green);
  }

  .routine-name {
    grid-area: name;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .routine-when {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    grid-area: when;
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
  }

  .routine-schedule,
  .routine-run {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .routine-run {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    color: var(--ink);
  }

  .routine-failures { color: var(--muted); }

  /* A row's badges: the outcome, after Paused on a paused job. */
  .routine-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    grid-area: badge;
    justify-self: end;
    min-width: 0;
  }

  /* A job row's actions sit beside its run line, after the badges on a desk. */
  .job-row {
    grid-template-areas:
      "name badge"
      "when actions";
  }
  .job-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    grid-area: actions;
    justify-self: end;
  }

  /* Why a failed or rejected run ended, or the check-in's last result, under its row. */
  .routine-detail {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  /* A job's state before its name in Health's panel, colored like its badge. */
  .panel-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .panel-dot-good { background: var(--green); }
  .panel-dot-wait { background: var(--amber); }
  .panel-dot-bad { background: var(--red); }

  .health-heading {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
  }

  #view-health > * {
    width: 100%;
    max-width: var(--column);
  }

  #view-health .health-heading { margin: 0; }

  /* Usage, under the jobs: one row per agent per day. On a phone the day
     is a line above its rows, the Day column is hidden, and token counts
     are compact, so the table fits the width; on a desk the day is the
     first column and the counts are whole. */
  .health-usage { margin-top: 28px; }
  .health-usage .health-heading { margin: 0 0 12px; }
  .usage-empty {
    margin: 0;
    color: var(--muted);
  }
  .usage-card { padding: 6px 10px 10px; }
  .usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }
  .usage-table th,
  .usage-table td {
    padding: 7px 4px;
    text-align: left;
    vertical-align: top;
    font-weight: 400;
  }
  /* The first column shown and the last sit on the card's padding. */
  .usage-table .usage-agent,
  .usage-day-line th { padding-left: 0; }
  .usage-table tr > :last-child { padding-right: 0; }
  .usage-table thead th {
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
  }
  .usage-table .usage-number {
    text-align: right;
    white-space: nowrap;
  }
  .usage-table .usage-agent { overflow-wrap: normal; }
  /* Token counts: compact on a phone, whole on a desk. */
  .usage-full { display: none; }
  .usage-table .usage-day { display: none; }
  .usage-day-line th {
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-weight: 600;
  }
  .usage-total th,
  .usage-total td {
    border-top: 1px solid var(--line);
    font-weight: 600;
  }

  @media (min-width: 720px) {
    .usage-card { padding: 6px 20px 10px; }
    .usage-table { font-size: 14px; }
    .usage-table th,
    .usage-table td { padding: 8px 10px; }
    .usage-table .usage-agent { padding-left: 10px; }
    .usage-table .usage-day { padding-left: 0; }
    .usage-table tr > :last-child { padding-right: 0; }
    .usage-table .usage-day {
      display: table-cell;
      white-space: nowrap;
    }
    .usage-day-line { display: none; }
    .usage-full { display: inline; }
    .usage-compact { display: none; }
    .usage-group th.usage-day { font-weight: 600; }
    .usage-group tr:first-of-type + tr th,
    .usage-group tr:first-of-type + tr td { border-top: 1px solid var(--line); }
  }

  @media (min-width: 720px) {
    .routine-row {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr) 9.5em;
      grid-template-areas: "name schedule run badge";
    }

    /* The actions column fits three 36px buttons, so every row's columns
       line up whatever actions it has. */
    .job-row {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr) 9.5em 112px;
      grid-template-areas: "name schedule run badge actions";
    }

    .routine-when { display: contents; }
    .routine-schedule { grid-area: schedule; }
    .routine-run {
      flex-direction: column;
      grid-area: run;
    }
  }
}