/* Runs page: the head (title, its action, the line of figures and the reckoning), the toolbar, the runs table with
   each run's path (a list on a phone, each run's path across the screen) and what a controller without runs shows.
   Every rule is under the page, so nothing here reaches another page or a dialog. Tokens from styles.css only. */

.page[data-page="runs"] { gap: 22px; }

/* the head: the title with the page's action after it, and under them the line of figures (what runs now); at the
   right, level with the title, the reckoning of every run, small, a statement rather than a tile */
.page[data-page="runs"] .runs-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title reckon" "ledger reckon";
  grid-template-rows: auto 1fr; align-items: start; gap: 8px 48px;
}
.page[data-page="runs"] .runs-title-row { grid-area: title; display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; min-width: 0; }
.page[data-page="runs"] .runs-ledger { grid-area: ledger; }
.page[data-page="runs"] .runs-reckon { grid-area: reckon; justify-self: end; padding-top: 3px; }

/* toolbar: the search (a line to write on) and the project together at the start, then the state choices (words,
   the chosen one underlined), which become a select where they do not fit on that line (runs.js fitStates measures
   them); a select here is its words and a stroked chevron (styles.css .pick). List or By project is not a filter:
   it sits at the end of the line over the table, two quiet words. */
.page[data-page="runs"] .runs-toolbar { position: relative; }
.page[data-page="runs"] .runs-toolbar .search-box { flex: 0 1 240px; min-width: 160px; }
.page[data-page="runs"] .runs-toolbar .runs-states { flex: 0 1 auto; min-width: 0; }
/* out of sight while the select stands in for them, still laid out at the width they need */
.page[data-page="runs"] .runs-toolbar[data-states="pick"] .runs-states {
  position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none;
}
.page[data-page="runs"] .runs-status:empty { display: none; }
/* over the table: how many runs it shows and Clear while a filter is on; at its end, the key to the paths, then List
   or By project, two words apart on a hairline, the one shown in ink */
.page[data-page="runs"] .runs-line {
  display: flex; align-items: center; justify-content: space-between; gap: 4px 24px; flex-wrap: wrap; min-height: 26px;
  font-size: 12.5px; color: var(--ink-3);
}
.page[data-page="runs"] .runs-line-end { display: flex; align-items: center; gap: 4px 22px; flex-wrap: wrap; margin-left: auto; }
.page[data-page="runs"] .runs-view { height: auto; gap: 0; }
.page[data-page="runs"] .runs-view button { height: 24px; padding: 0 9px; font-size: 12.5px; border-radius: 0; }
.page[data-page="runs"] .runs-view button + button { border-left: 1px solid var(--rule-2); }
.page[data-page="runs"] .runs-view button:last-child { padding-right: 0; }
.page[data-page="runs"] .runs-view button::after { display: none; }
.page[data-page="runs"] .runs-line-count { display: flex; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }
.page[data-page="runs"] .runs-clear { font-size: 12.5px; color: var(--ink-2); }

/* the table: one line a run, the live run's a little taller for the machine named under its path */
.page[data-page="runs"] .runs-table { outline-offset: -2px; }
.page[data-page="runs"] .runs-table td.col-actions { width: 36px; padding: 0 0 0 4px; text-align: right; }
.page[data-page="runs"] .runs-table .row-link { display: block; color: inherit; text-decoration: none; min-width: 0; }
@media (hover: hover) { .page[data-page="runs"] .runs-table .row-link:hover { color: inherit; text-decoration: none; } }
@media (hover: hover) { .page[data-page="runs"] .runs-table .row-link:hover .runs-name { text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 3px; } }
.page[data-page="runs"] .runs-table .row-link:focus-visible { outline-offset: 0; }
/* A long name or project is cut short (its title has it whole) rather than widening the table: neither asks the
   table for more than its least width. */
.page[data-page="runs"] .runs-name { display: block; contain: inline-size; min-width: 132px; max-width: 240px; font-weight: 600; color: var(--ink); }
/* a project asks for its name's width up to 170px (a longer one is cut short, its title has it whole); a window too
   narrow for every column folds it under the run's name instead */
.page[data-page="runs"] .runs-project { display: block; min-width: 88px; max-width: 170px; color: var(--ink-2); }
.page[data-page="runs"] .runs-state { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.page[data-page="runs"] .runs-prog { color: var(--ink-3); font-size: 13px; line-height: 1.2; }
.page[data-page="runs"] .runs-table td.col-path { width: 1%; }
.page[data-page="runs"] .runs-path { display: inline-grid; justify-items: start; gap: 2px; min-width: 0; max-width: 100%; vertical-align: middle; }
/* the machine under a live run's path: never wider than the path it names. Its price goes first where both do not
   fit (it wraps to a line that is not shown); the name is cut short only where it does not fit alone. */
.page[data-page="runs"] .runs-machine {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; height: 16px; overflow: hidden;
  justify-self: stretch; contain: inline-size; min-width: 0;
  color: var(--ink-2); font-size: 12px; line-height: 16px; font-stretch: var(--label-stretch); font-weight: 550;
}
.page[data-page="runs"] .runs-machine-name { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.page[data-page="runs"] .runs-machine-rate { flex: none; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.page[data-page="runs"] .runs-table td.col-path:has(.runs-machine) { padding-top: 7px; padding-bottom: 6px; }
/* cost and saved: the figure under its heading's edge; the budget ("/ $5.00") and the share ("62.1%") in narrow
   columns of their own without headings, hung just after them */
.page[data-page="runs"] .runs-cost, .page[data-page="runs"] .runs-saved { display: inline-flex; align-items: baseline; justify-content: flex-end; }
.page[data-page="runs"] .runs-table td.col-cost, .page[data-page="runs"] .runs-table th.col-cost,
.page[data-page="runs"] .runs-table td.col-saved, .page[data-page="runs"] .runs-table th.col-saved { padding-right: 0; }
.page[data-page="runs"] .runs-table td.col-budget, .page[data-page="runs"] .runs-table th.col-budget,
.page[data-page="runs"] .runs-table td.col-share, .page[data-page="runs"] .runs-table th.col-share { padding-left: 6px; }
.page[data-page="runs"] .runs-budget, .page[data-page="runs"] .runs-share { color: var(--ink-3); white-space: nowrap; }
.page[data-page="runs"] .runs-phone-word, .page[data-page="runs"] .runs-phone-only { display: none; }
.page[data-page="runs"] .runs-group-name { display: inline-block; max-width: 280px; vertical-align: bottom; }
.page[data-page="runs"] .runs-table .menu-list { position: fixed; text-align: left; }  /* not the cell's right alignment */
/* j and k bring a row into view clear of the top bar and the table's head held under it */
.page[data-page="runs"] .runs-table tr { scroll-margin-top: calc(var(--topbar-h) + 44px); scroll-margin-bottom: 24px; }
.page[data-page="runs"] .runs-table th.col-path { cursor: help; }
.page[data-page="runs"] .runs-key:empty { display: none; }

/* A table that fits lets the page scroll, its head held under the top bar. */
.page[data-page="runs"] .runs-table[data-fit="fit"] { overflow: visible; }
.page[data-page="runs"] .runs-table[data-fit="fit"] .table thead th { top: var(--topbar-h); z-index: 2; }

/* One that does not scrolls in its own region, at most a screen tall, its head and the name column held. */
.page[data-page="runs"] .runs-table[data-fit="scroll"] { max-height: calc(100vh - var(--topbar-h) - 32px); max-height: calc(100dvh - var(--topbar-h) - 32px); }
.page[data-page="runs"] .runs-table[data-fit="scroll"] .table thead th { z-index: 2; }
.page[data-page="runs"] .runs-table[data-fit="scroll"] .table thead th:first-child { left: 0; z-index: 3; }
.page[data-page="runs"] .runs-table[data-fit="scroll"] .table td.col-name { position: sticky; left: 0; z-index: 1; }
:where(.page[data-page="runs"] .runs-table[data-fit="scroll"]) td.col-name { background: var(--paper); }  /* below the hover and focus fills */
.page[data-page="runs"] .runs-table[data-fit="scroll"] .table tr.group-row > th:first-child { position: sticky; left: 0; top: auto; z-index: 1; }
/* and the row menus at its right edge, so what can be done to a run is never scrolled away */
.page[data-page="runs"] .runs-table[data-fit="scroll"] .table td.col-actions,
.page[data-page="runs"] .runs-table[data-fit="scroll"] .table th.col-actions { position: sticky; right: 0; z-index: 1; padding-left: 6px; }
:where(.page[data-page="runs"] .runs-table[data-fit="scroll"]) td.col-actions { background: var(--paper); }
.page[data-page="runs"] .runs-table[data-fit="scroll"] .table th.col-actions { z-index: 3; }
.page[data-page="runs"] .runs-table[data-fit="scroll"][data-more] .table td.col-actions,
.page[data-page="runs"] .runs-table[data-fit="scroll"][data-more] .table th.col-actions { box-shadow: inset 1px 0 0 var(--rule); }
.page[data-page="runs"] .runs-table[data-fit="scroll"][data-scrolled] td.col-name,
.page[data-page="runs"] .runs-table[data-fit="scroll"][data-scrolled] thead th:first-child,
.page[data-page="runs"] .runs-table[data-fit="scroll"][data-scrolled] tr.group-row > th:first-child { box-shadow: inset -1px 0 0 var(--rule); }

/* a controller without runs: what it takes to start one, as the console's steps (styles.css .steps) */
.page[data-page="runs"] .runs-start { display: grid; gap: 14px; max-width: 720px; }
.page[data-page="runs"] .runs-start-note { color: var(--ink-2); padding-top: 12px; border-top: 1px solid var(--ink); }

/* A table that would not fit keeps its money and its dates: the project and the runtime fold under the run's name
   (runs.js sets data-fold only then, and lifts it once the window has the room again). */
.page[data-page="runs"] .runs-table[data-fold] th.col-project, .page[data-page="runs"] .runs-table[data-fold] td.col-project,
.page[data-page="runs"] .runs-table[data-fold] th.col-runtime, .page[data-page="runs"] .runs-table[data-fold] td.col-runtime { display: none; }
.page[data-page="runs"] .runs-created { display: inline-grid; justify-items: end; line-height: 1.35; }
.page[data-page="runs"] .runs-created-ran { display: none; font-size: 12px; color: var(--ink-3); }
.page[data-page="runs"] .runs-table[data-fold] .runs-created-ran { display: block; }
.page[data-page="runs"] .runs-table[data-fold] td.col-created { padding-top: 6px; padding-bottom: 6px; }
.page[data-page="runs"] .runs-table[data-fold] .cell-fold { display: flex; flex-wrap: wrap; column-gap: 12px; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.page[data-page="runs"] .runs-table[data-fold] td.col-name:has(.cell-fold) { padding-top: 6px; padding-bottom: 6px; }
/* a laptop's window: the columns closer, the paths and long names shorter, so the table stays whole for longer */
@media (min-width: 600px) and (max-width: 1359px) {
  .page[data-page="runs"] .runs-table .table :is(th, td):not(:first-child):not(.col-budget, .col-share) { padding-left: 9px; }
  .page[data-page="runs"] .runs-table .table :is(th, td):not(:last-child):not(.col-cost, .col-saved) { padding-right: 9px; }
  .page[data-page="runs"] .runs-name { min-width: 100px; max-width: 200px; }
  /* folded, closer still: the money and the dates keep their room */
  .page[data-page="runs"] .runs-table[data-fold] .table :is(th, td):not(:first-child):not(.col-budget, .col-share) { padding-left: 7px; }
  .page[data-page="runs"] .runs-table[data-fold] .table :is(th, td):not(:last-child):not(.col-cost, .col-saved) { padding-right: 7px; }
}
@media (max-width: 599px) {
  .page[data-page="runs"] .runs-toolbar .search-box { flex-basis: 100%; max-width: none; }
}

/* A phone reads the runs as a list: the name (its project under it), its state and its menu; the run's path across
   the screen with the machine it is on under it; then what it cost and what it saved, in words. */
@media (max-width: 599px) {
  .page[data-page="runs"] .runs-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "ledger" "reckon"; grid-template-rows: auto; row-gap: 10px; }
  .page[data-page="runs"] .runs-title-row { justify-content: space-between; flex-wrap: nowrap; }
  /* the head is one line: what runs, at what rate, and what Portal saved; the reckoning is that last figure */
  .page[data-page="runs"] .runs-reckon { display: none; }
  /* the line over the list: the key's words and List or By project share it, the view at the end of its last line */
  .page[data-page="runs"] .runs-line-end { margin-left: 0; width: 100%; }
  .page[data-page="runs"] .runs-key, .page[data-page="runs"] .runs-key > .path-key { display: contents; }
  .page[data-page="runs"] .runs-view { margin-left: auto; }
  .page[data-page="runs"] .runs-table { overflow: visible; max-height: none; border-top: 1px solid var(--ink); }
  .page[data-page="runs"] .runs-table table, .page[data-page="runs"] .runs-table tbody { display: block; }
  .page[data-page="runs"] .runs-table thead { display: none; }
  /* a run: its name and state, its path (two thirds of the width, so it never passes for the rule between runs),
     its cost and saving; more room under it than inside it, and a rule that is the strongest line of the list */
  .page[data-page="runs"] .runs-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "name state act" "path path path" "cost saved saved";
    align-items: center; gap: 7px 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--rule-2);
  }
  .page[data-page="runs"] .runs-table td.col-budget, .page[data-page="runs"] .runs-table td.col-share { display: none; }
  .page[data-page="runs"] .runs-phone-only { display: inline; padding-left: .35em; }
  /* a run that ended has no menu: its state takes the menu's place at the edge (a project's header row has its own) */
  .page[data-page="runs"] .runs-table tr:not(.group-row):has(> td.col-actions:empty) { grid-template-areas: "name state state" "path path path" "cost saved saved"; }
  .page[data-page="runs"] .runs-table tbody tr:last-child { border-bottom: 0; }
  .page[data-page="runs"] .runs-table tr.row-go:focus-within { background: var(--paper-2); }
  @media (hover: hover) { .page[data-page="runs"] .runs-table tr:hover { background: var(--paper-2); } }
  .page[data-page="runs"] .runs-table td, .page[data-page="runs"] .runs-table th {
    display: block; height: auto; padding: 0; border: 0; background: none; text-align: left; min-width: 0;
  }
  .page[data-page="runs"] .runs-table tr.row-go:focus-within td { background: none; }
  @media (hover: hover) { .page[data-page="runs"] .runs-table tr:hover td { background: none; } }
  .page[data-page="runs"] .runs-table td.col-name { grid-area: name; position: static; align-self: start; }
  .page[data-page="runs"] .runs-table td.col-state { grid-area: state; justify-self: end; align-self: start; padding-top: 1px; }
  .page[data-page="runs"] .runs-table td.col-actions { grid-area: act; width: auto; margin: -10px -6px -10px 0; align-self: start; }
  .page[data-page="runs"] .runs-table td.col-path { grid-area: path; width: auto; padding: 0; }
  .page[data-page="runs"] .runs-table td.col-path:has(.runs-machine) { padding: 0; }
  .page[data-page="runs"] .runs-path { display: grid; gap: 4px; width: 100%; }
  .page[data-page="runs"] .runs-table td.col-cost { grid-area: cost; }
  .page[data-page="runs"] .runs-table td.col-saved { grid-area: saved; justify-self: end; }
  /* the columns' heads are gone: each figure says what it is */
  .page[data-page="runs"] .runs-phone-word {
    display: inline; margin-right: 6px; color: var(--ink-3); font-size: 12.5px; font-stretch: var(--label-stretch); font-weight: 500;
  }
  .page[data-page="runs"] .runs-table td.col-project, .page[data-page="runs"] .runs-table td.col-runtime,
  .page[data-page="runs"] .runs-table td.col-created { display: none; }
  .page[data-page="runs"] .runs-table td.col-actions:empty { display: none; }
  .page[data-page="runs"] .runs-name { max-width: none; min-width: 0; font-size: 14.5px; }
  .page[data-page="runs"] .runs-table .cell-fold { margin-top: 1px; }
  .page[data-page="runs"] .runs-table td:has(.cell-fold) { padding-top: 0; padding-bottom: 0; }
  .page[data-page="runs"] .runs-table tr.group-row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "cost saved";
    background: var(--paper); padding-top: 20px; border-bottom: 1px solid var(--edge);
  }
  @media (hover: hover) { .page[data-page="runs"] .runs-table tr.group-row:hover { background: var(--paper); } }
  .page[data-page="runs"] .runs-table tr.group-row > th:first-child { grid-area: name; }
  /* the project's name keeps its words before its count does: the count wraps under it when both do not fit */
  .page[data-page="runs"] .runs-table tr.group-row .group-toggle { flex-wrap: wrap; height: auto; min-height: 26px; row-gap: 0; }
  .page[data-page="runs"] .runs-group-name { max-width: 100%; }
  .page[data-page="runs"] .runs-table tr.group-row td.col-runtime, .page[data-page="runs"] .runs-table tr.group-row td.col-created,
  .page[data-page="runs"] .runs-table tr.group-row td.col-actions, .page[data-page="runs"] .runs-table tr.group-row td.col-path,
  .page[data-page="runs"] .runs-table tr.group-row td.col-state { display: none; }
  .page[data-page="runs"] .runs-table tr.in-group > td:first-child { padding-left: 0; }
}