rustango 0.60.0

<style nonce="{{ csp_nonce }}">
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-fg);
  background: var(--color-bg);
}
.shell { display: flex; min-height: 100vh; }
aside.sidebar {
  width: 220px;
  background: var(--color-bg-sidebar);
  border-right: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;

  /* Stay in view while the content scrolls. `align-self` is the part
     that matters: a flex item stretches to the container's full height
     by default, and an item already as tall as its container has no
     room to stick, so the nav scrolled away with the page. Pinning it
     to the top and giving it the viewport's height restores that room.
     `overflow-y` covers a viewport too short for the nav itself. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
aside .brand {
  font-weight: var(--font-weight-bold);
  padding: 0 var(--space-4) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
  color: var(--color-accent);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
aside .brand img.brand-logo {
  /* Explicit `height` (not `max-height`) because the parent
     `.brand` is a flex column whose default `min-height: auto`
     resolves to the image's intrinsic 1024px and overrides
     `max-height: 48px`. `align-self: flex-start` stops the
     stretch-to-cross-axis behavior. (#73) */
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  object-fit: contain;
}
aside .brand .brand-tagline {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
}
aside nav { flex: 1; }
aside nav a {
  display: block;
  padding: 0.55rem var(--space-4);
  color: var(--color-fg);
  text-decoration: none;
  border-left: 3px solid transparent;
}
aside nav a:hover { background: var(--color-bg-hover); }
aside nav a.active {
  background: var(--color-accent-bg-soft);
  border-left-color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}
aside .who {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  border-top: 1px solid var(--color-border);
}
aside form.logout button {
  width: calc(100% - 2rem);
  margin: var(--space-2) var(--space-4);
  padding: 0.4rem 0.6rem;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  cursor: pointer;
  color: var(--color-fg);
}
aside form.logout button:hover { background: var(--color-accent-bg-soft); border-color: var(--color-accent); }
main {
  flex: 1;
  padding: var(--space-5) var(--space-6);
  /* Also neutralizes the flex `min-width: auto` that would otherwise
     let a wide table widen the whole shell: the automatic minimum size
     applies only while overflow is `visible`. */
  overflow-x: auto;
}
h1 { margin-top: 0; color: var(--color-accent); }
table { border-collapse: collapse; width: 100%; margin-top: var(--space-4); }
th, td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
th {
  background: var(--color-bg-sidebar);
  font-weight: var(--font-weight-bold);
  color: var(--color-fg-muted);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
tr:hover td { background: var(--color-bg-hover); }
.empty {
  color: var(--color-fg-muted);
  font-style: italic;
  padding: var(--space-4) 0;
}
code {
  background: var(--color-bg-code);
  color: var(--color-fg);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: 0.9em;
}
.breadcrumb {
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-2);
}
.breadcrumb a { color: var(--color-fg-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); text-decoration: underline; }
.breadcrumb .sep { padding: 0 0.35rem; color: var(--color-border-strong); }
.lead {
  color: var(--color-fg-muted);
  max-width: 60ch;
  font-size: 13px;
  margin: var(--space-1) 0 var(--space-5) 0;
}
.alert {
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  margin: var(--space-3) 0 var(--space-4) 0;
  font-size: 13px;
  border: 1px solid;
}
.alert-error  {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-fg);
}
.alert-notice {
  background: var(--color-success-bg);
  border-color: var(--color-success-fg);
  color: var(--color-success-fg);
}
/* `margin-bottom` keeps the branding sub-form clear of the
   primary edit form's Save row when both render on the same
   page (#70). */
form.edit-form { max-width: 720px; margin-bottom: var(--space-6); }
form.edit-form + form.edit-form { margin-top: var(--space-6); }
/* A form directly under a listing. `table` carries a top margin only,
   and `.edit-form` a bottom one, so the fieldset's border landed flush
   against the last row and read as another row of it. */
table + form.edit-form { margin-top: var(--space-6); }
fieldset.section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4) var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4) 0;
  background: var(--color-bg-surface);
}
fieldset.section > legend {
  padding: 0 var(--space-2);
  color: var(--color-fg-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: var(--font-weight-bold);
}
fieldset.section table { margin-top: 0; }
fieldset.section th, fieldset.section td {
  border-bottom: 0;
  padding: 0.4rem 0.6rem 0.4rem 0;
  vertical-align: top;
}
fieldset.section tr:hover td { background: transparent; }
fieldset.section th {
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--color-fg);
  width: 12rem;
  font-family: var(--font-family-mono);
}
.field-helper {
  color: var(--color-fg-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}
.form-actions {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.btn {
  font: inherit;
  padding: 0.45rem var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-fg-on-accent);
  border-color: var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
/* #253 follow-up — secondary + danger variants synced from the
   admin's `.btn` family so the same class names render identically
   on both consoles. */
.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-secondary:hover {
  background: var(--color-accent-bg-soft);
  color: var(--color-accent);
}
.btn-danger {
  background: transparent;
  color: var(--color-error-fg, #b04141);
  border-color: var(--color-error-fg, #b04141);
}
.btn-danger:hover {
  background: var(--color-error-fg, #b04141);
  color: #fff;
}
/* #253 follow-up — synced with admin's `.btn-link` so the same
   element renders identically on both consoles. Previously this
   used `--color-fg-muted` (too low-contrast on the warm beige
   sidebar surface — operators complained the link was nearly
   invisible). Accent gives high contrast in both themes and
   matches the rest of the chrome's link style. */
.btn-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 13px;
  background: transparent;
  border: 0;
  font-weight: var(--font-weight-medium, 500);
}
.btn-link:hover { color: var(--color-accent-hover); text-decoration: underline; }
/* Inline action button in tables (#75). Pill-shaped, accent-tinted,
   doesn't compete visually with the row data. */
.btn-row-action {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent-bg-soft);
  color: var(--color-accent);
  /* #253 follow-up — relative size (matches admin's `.btn-row-action`)
     so both consoles inherit from their context uniformly. */
  font-size: 0.85em;
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.4;
}
.btn-row-action:hover {
  background: var(--color-accent);
  color: var(--color-fg-on-accent);
  text-decoration: none;
}
th.actions-col, td.actions-col { text-align: right; white-space: nowrap; }
fieldset.section input[type="text"],
fieldset.section input[type="password"],
fieldset.section input[type="number"],
fieldset.section input[type="date"],
fieldset.section input[type="datetime-local"],
fieldset.section input[type="file"],
fieldset.section textarea,
fieldset.section select {
  width: 100%;
  max-width: 28rem;
  padding: 0.4rem var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-bg-input);
  color: var(--color-fg);
}
fieldset.section input[type="text"]:focus,
fieldset.section input[type="password"]:focus,
fieldset.section input[type="number"]:focus,
fieldset.section textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-bg-soft);
}
fieldset.section input[type="checkbox"] { margin-right: 0.4rem; }
fieldset.section input[readonly] {
  background: var(--color-bg-sidebar);
  color: var(--color-fg-muted);
  cursor: not-allowed;
}
fieldset.section.locked code {
  font-size: 13px;
  background: transparent;
  padding: 0;
}
fieldset.section.locked th { color: var(--color-fg-muted); }
fieldset.section .brand-asset-preview {
  display: block;
  max-height: 48px;
  max-width: 100%;
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  background: var(--color-bg-surface);
}
.theme-toggle {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-surface);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 100;
}
.theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- Tenant provisioning (#1322) ---- */

/* The page-level call to action above the tenant list. */
.page-actions { margin: 0 0 var(--space-4) 0; }

/* Result of the connection probe, dropped in beside the button. */
.probe {
  display: inline-block;
  margin: var(--space-2) 0 0 0;
  padding: 0.35rem var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.probe code { font-size: inherit; }
.probe-ok {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.probe-bad {
  /* The console has no danger token, so borrow the alert's. */
  border-color: currentColor;
  color: #b3261e;
}

/* Per-step status in a provisioning run. `started` stays default —
   it is the neutral "in flight" state and colouring it would compete
   with the outcome rows that actually need attention. */
.status-ok      { color: var(--color-accent); }
.status-skipped { color: var(--color-fg-muted); }
.status-failed  { color: #b3261e; font-weight: var(--font-weight-bold); }

/* Hostname rows: several small forms sit in one actions cell, so they
   have to sit on a line rather than stack as blocks. */
.inline-form { display: inline; }
.inline-form + .inline-form { margin-left: var(--space-2); }
.badge {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-size: 11px;
  color: var(--color-fg-muted);
}
.badge-base { border-color: var(--color-accent); color: var(--color-accent); }

/* A one-time secret. Loud on purpose: it is shown once and the reader
   has to notice before navigating away. */
.alert-secret {
  border: 1px solid var(--color-accent);
  background: var(--color-accent-bg-soft);
}
.secret-value {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 8px;
  font-size: 15px;
  user-select: all; /* one click selects the whole password */
}
/* The per-operator reset form is revealed by its `:target`, so the
   table is not three rows deep per operator until one is wanted. */
tr.reset-row { display: none; }
tr.reset-row:target { display: table-row; }
.inline-reset { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
/* The row sits outside `fieldset.section`, so it misses the shared
   input styling and its fields rendered as raw browser defaults next
   to everything else. */
.inline-reset input[type="password"] {
  padding: 0.4rem var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-bg-input);
  color: var(--color-fg);
}
.inline-reset input[type="password"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-bg-soft);
}

/* Audit log + run history */
td.nowrap, th.nowrap { white-space: nowrap; }
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-4);
}
.filter-bar label { color: var(--color-fg-muted); font-size: 13px; }
.filter-bar input[type="text"] {
  padding: 0.3rem var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-bg-input);
  color: var(--color-fg);
}
.filter-bar input[type="text"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-bg-soft);
}
/* The JSON is the useful column and the tallest, so it opens on
   demand rather than making every row several lines high. */
.audit-changes {
  margin: var(--space-2) 0 0 0;
  padding: var(--space-2);
  background: var(--color-bg-sidebar);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  max-width: 40rem;
  overflow-x: auto;
}
tr.run-error td { border-top: 0; padding-top: 0; font-size: 13px; }
/* A slug can be 63 characters. Without this it sets the column width
   for every other row and pushes the table past the viewport. */
td.wrap-anywhere { overflow-wrap: anywhere; }

/* The destructive section. Tinted rather than shouty: it sits at the
   bottom of a page an operator uses for ordinary edits. */
fieldset.section.danger { border-color: #b3261e; }
fieldset.section.danger > legend { color: #b3261e; }
.danger-rule { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }
.danger-lead { font-size: 13px; color: var(--color-fg-muted); margin: 0 0 var(--space-3) 0; }
fieldset.section.danger form.edit-form { margin-bottom: 0; }

/* Shared pager (`_op_pager.html`). */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  align-items: center;
  margin-top: var(--space-4);
  font-size: 13px;
}
.pager-page, .pager-step {
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  text-decoration: none;
}
.pager-page:hover, .pager-step:hover { border-color: var(--color-accent); }
.pager-current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: var(--font-weight-bold);
}
.pager-disabled { color: var(--color-fg-muted); border-color: transparent; }
.pager-gap { padding: 3px 2px; color: var(--color-fg-muted); }
/* Beside the links, not pushed right: the floating theme toggle sits
   in that corner and covered it. */
.pager-total { margin-left: var(--space-3); color: var(--color-fg-muted); }

/* Narrow screens. 720px to match the admin's breakpoint — the two
   consoles should not disagree about when a sidebar stops being one.
   The sticky full-height sidebar is undone here: pinned at 100vh it
   would fill a phone screen before the content started. */
@media (max-width: 720px) {
  .shell { flex-direction: column; }
  aside.sidebar {
    width: auto;
    position: static;
    height: auto;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
  }
  aside .brand { border-bottom: 0; margin-bottom: 0; padding-bottom: var(--space-2); }
  /* A row of links rather than a column: vertical nav plus brand plus
     sign-out is most of a phone screen before any content. */
  aside nav { flex: none; display: flex; flex-wrap: wrap; gap: var(--space-1, 4px); }
  aside nav a {
    padding: 0.35rem var(--space-3);
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm);
  }
  aside nav a.active { border-left-color: transparent; border-bottom-color: var(--color-accent); }
  /* `.who` and the logout form are flex items of the column above, so
     they stack whatever their `display` says; only the chrome needs
     adjusting. */
  aside .who { border-top: 0; padding-bottom: 0; }
  aside form.logout button { width: auto; margin: var(--space-2) var(--space-4); }
  main { padding: var(--space-4); }
  /* Label-above-field: a two-column form table leaves neither column
     usable at this width. */
  fieldset.section th, fieldset.section td { display: block; width: auto; }
  fieldset.section th { padding-bottom: 0; }
  .filter-bar, .inline-reset { flex-direction: column; align-items: stretch; }
}
/* Classes, not inline style attributes: a strict CSP blocks those (#1703). */
.section-note { margin: 0 0 var(--space-3) 0; color: var(--color-fg-muted); font-size: 13px; }
.faint { color: #aaa; }
.issuer-url { color: #888; font-size: .85em; }
</style>