/* Breadcrumbs page (ticket 613), route #/breadcrumbs: the scripts table and the registered machines
   table. Both reuse table.data, .section, .table-scroll and .btn--small from console.css; only the
   rules below are new. A row opens nothing, so the pointer cursor table.data gives a row is undone.
   The script wizard (ticket 614, route #/breadcrumbs/new) has its own rules after them, and the
   finish screen it ends on (ticket 615) the last ones. */

table.breadcrumbs-table tbody tr {
  cursor: default;
}

.breadcrumbs-file {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  /* A long file name breaks where it must instead of widening its column (ticket 659). */
  overflow-wrap: anywhere;
}

/* The scripts table fits its container (ticket 659). console.css gives every `table.data td`
   `white-space: nowrap`, so each cell's narrowest width was its whole text and a fleet row made the
   table 1705 px wide in a 1230 px container, with Download, the token state and Remove script
   off-screen at 1440 px. The cells wrap here instead; the Created stamp stays on one line so a date
   never splits. The selector carries the `data` class on purpose: `table.data td` is (0,1,2) and a
   bare `.breadcrumbs-scripts td` (0,1,1) would lose to it. Under about 720 px the table keeps
   its min-width and scrolls sideways inside .table-scroll, as every table.data does. */
table.data.breadcrumbs-scripts td {
  white-space: normal;
}

table.data.breadcrumbs-scripts td:first-child {
  white-space: nowrap;
}

.breadcrumbs-missing {
  color: var(--ink-dim);
  font-style: italic;
}

/* A fleet script's fetch token (ticket 622): its state beside the Download button, in words as well as
   colour, and the line under the fleet row's Remove script button. */
.breadcrumbs-token {
  display: block;
  margin: 0.25rem 0 0;
  font-size: var(--fs-2xs);
  color: var(--ink-dim);
}

.breadcrumbs-token--active {
  color: var(--health-ok);
}

.breadcrumbs-token--expired {
  color: var(--st-4xx);
}

.breadcrumbs-token--revoked {
  color: var(--health-down);
}

.breadcrumbs-hint {
  display: block;
  margin-top: 0.25rem;
  max-width: 16rem;
  /* The td above it is nowrap in console.css, which kept this line on one row (ticket 659). */
  white-space: normal;
  color: var(--ink-dim);
  font-size: var(--fs-2xs);
  line-height: 1.4;
}

/* The revoke offer in a fleet row's Delete ask (ticket 652): the box and its words on their own line,
   above the help line that says what ticking it does. */
.breadcrumbs-revoke {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-body);
  font-size: var(--fs-xs);
  white-space: normal;
}

.breadcrumbs-revoke input {
  margin-right: 0.35rem;
}

/* A row of a batch (ticket 623) also has a "Download list (zip)" button, under the row's own Download. */
.breadcrumbs-batch {
  display: block;
  margin-top: 0.25rem;
}

/* ---- Script wizard (ticket 614): one question per screen, then the review ---------------------- */

.wizard {
  max-width: 40rem;
  margin: 1.5rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wizard__progress {
  margin: 0;
  color: var(--ink-muted);
  font: var(--type-footnote);
}

.wizard__title {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--ink);
}

.wizard__help {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.wizard__fields {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.wizard-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

/* The box of several lines (ticket 616, the .env folders): one folder per line, so it reads as code. */
.wizard-textarea {
  min-height: 6rem;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: var(--font-mono);
}

/* Choice cards are radio buttons: the input is visually hidden and the card shows its state. */
.wizard-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.wizard-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.6rem;
  background: var(--glass);
  cursor: pointer;
}

.wizard-card.is-selected {
  border-color: var(--border-gold);
  background: var(--gold-soft);
}

.wizard-card:focus-within {
  border-color: var(--border-gold);
  box-shadow: 0 0 0 2px var(--gold-soft);
}

.wizard-card__label {
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 600;
}

.wizard-card__hint {
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

.wizard__note {
  margin: 0;
  min-height: 1.2em;
  color: var(--gold);
  font-size: var(--fs-xs);
}

/* The review's note when a fleet script replaces the saved addresses (ticket 622). */
.wizard__warning {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  background: var(--gold-soft);
  color: var(--ink-body);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.wizard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.wizard__cancel {
  margin-left: auto;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.wizard-review {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.wizard-review__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.wizard-review__row dt {
  flex: 0 0 11rem;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

.wizard-review__row dd {
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.wizard-review__value {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

/* A plain text control that reads as a link, like the Skip link on the first-login wizard. The
   finish screen's "Back to Synthetic Templates" link and "Make another" button share it. */
.wizard__change,
.wizard__link {
  flex: 0 0 auto;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--gold);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---- Finish screen (ticket 615): the file, then the commands to run it, each one copyable ------- */

.wizard-finish__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.wizard-finish__heading {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink);
}

.wizard-code {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.wizard-code__label {
  margin: 0;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

.wizard-code__row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.wizard-code__pre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: var(--panel-deep);
  border: 1px solid var(--border-strong);
  border-radius: 0.45rem;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}

.wizard-code__row .btn {
  flex: 0 0 auto;
}

/* ---- Synthetic Files tab (ticket 001021): the tab bar, the create form, the result and the list ---- */

.markers-tabs {
  margin: 0 0 1rem;
}

.synthetic-files-make,
.synthetic-files-result,
.synthetic-files-list {
  margin-bottom: 1.5rem;
}

.synthetic-files-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.synthetic-files-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

.synthetic-files-field legend {
  padding: 0;
  margin-bottom: 0.35rem;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

.synthetic-files-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem;
}

/* One kind or one Connector: a bordered card with the radio, its name and its line of help. */
.synthetic-files-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.6rem;
  background: var(--glass);
  cursor: pointer;
}

.synthetic-files-choice:focus-within {
  border-color: var(--border-gold);
  box-shadow: 0 0 0 2px var(--gold-soft);
}

.synthetic-files-choice.is-disabled {
  cursor: default;
  opacity: 0.8;
}

.synthetic-files-choice__label {
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 600;
}

.synthetic-files-choice .breadcrumbs-hint {
  flex: 1 1 100%;
  max-width: none;
}

.synthetic-files-field .breadcrumbs-hint {
  max-width: 40rem;
}

/* The placement warning above Create, and the one in the result: said in a gold note box. */
.synthetic-files-warning {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  background: var(--gold-soft);
  color: var(--ink-body);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.synthetic-files-warning:empty {
  display: none;
}

.synthetic-files-error {
  max-width: none;
  min-height: 1.2em;
  color: var(--health-down);
}

.synthetic-files-form__actions,
.synthetic-files-result__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.synthetic-files-file {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.75rem 0;
}

.synthetic-files-file__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.synthetic-files-file__name {
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

.synthetic-files-file__body {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: var(--panel-deep);
  border: 1px solid var(--border-strong);
  border-radius: 0.45rem;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The list: the memo wraps where it must, the Revoke ask sits in its cell, and a revoked row is dimmed. */
table.data.synthetic-files-table td {
  white-space: normal;
}

table.data.synthetic-files-table td:nth-child(4),
table.data.synthetic-files-table td:nth-child(5) {
  white-space: nowrap;
}

.synthetic-files-memo {
  overflow-wrap: anywhere;
}

.synthetic-files-row--revoked td {
  color: var(--ink-dim);
}

.synthetic-files-actions .btn + .btn {
  margin-left: 0.35rem;
}

/* An alert a Synthetic File raised names the file under its summary on the Fleet page (ticket 001021). */
.fleet-alerts__file {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-dim);
  font-size: var(--fs-2xs);
  white-space: normal;
}