/* Typography: the prototype is set in Inter with Inter Tight headings, which is
   why its tables read smaller than ours even at the same nominal size. Both
   faces are vendored (latin subset; Inter ships as a variable font) so the base
   template keeps loading nothing from a CDN. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/vendor/fonts/inter-latin-wght.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/static/vendor/fonts/inter-tight-latin.woff2') format('woff2');
}

/* Design tokens. The six scheme colours come from
   references/color-scheme.md of the new-design prototype; the rest are the
   prototype's own derived tokens from app.css, kept as the literal hex values
   it declares them with. */
:root {
  --susteq-font: 'Inter', system-ui, -apple-system, sans-serif;
  --susteq-font-head: 'Inter Tight', 'Inter', sans-serif;
  --susteq-navy: #063556;
  --susteq-amber: #f19a00;
  --susteq-cloud: #f4f7fa;
  --susteq-surface: #fafcff;
  --susteq-ink: #0e171e;
  --susteq-frost: #eaf0f6;
  /* the edge of a form field, e0458f1: at hairline strength an input on the
     surface reads as text on the page, so the field keeps the ink. It is its own
     token because --bs-border-color cannot be both this and the table hairline:
     Bootstrap takes every border it is not told about from that one variable,
     and the table parts inherit it. */
  --susteq-field-line: var(--susteq-navy);

  /* map the tokens onto the Bootstrap theme so bg-primary, text-bg-primary,
     links and body colours all resolve to the scheme */
  --bs-primary: var(--susteq-navy) !important;
  --bs-primary-rgb: 6, 53, 86;
  --bs-secondary: var(--susteq-amber);
  --bs-secondary-rgb: 241, 154, 0;
  --bs-body-bg: var(--susteq-cloud);
  --bs-body-color: var(--susteq-ink);
  --bs-link-color: var(--susteq-navy);
  --bs-link-hover-color: var(--susteq-amber);
  /* the prototype's own value, and it has to stay a hairline: Bootstrap paints
     with this every border it is not told about otherwise, and the reboot hands
     it to the table parts by inheritance (tbody,td,tfoot,th,thead,tr is
     border-color: inherit under .table), so navy here draws a dark rule under
     every th that is not a header cell --- the label column of a details table.
     The pager takes its borders from here too, and its disabled step from the
     secondary colours. Fields are not in this: they take --susteq-field-line. */
  --bs-border-color: var(--susteq-line);
  --bs-emphasis-color: var(--susteq-navy);
}

body {
  background-color: var(--susteq-cloud);
  color: var(--susteq-ink);
  font-family: var(--susteq-font);
  /* the prototype's body size; Bootstrap's 1rem is what made our type larger */
  font-size: 0.9rem;
}

h1, h2, h3, h4, h5 {
  font-family: var(--susteq-font-head);
  color: var(--susteq-navy);
  letter-spacing: -0.01em;
}

/* Small grey note: under a page title or beneath a form field to state a
   limit or what the field accepts (new-design .hint). */
.hint {
  font-size: 0.74rem;
  color: var(--susteq-muted);
}

/* The card of the prototype (new-design .card, .card-h, .card-b): a surface
   panel with a ruled header band carrying an icon, a title (.t) and an
   optional muted subtitle (.sub), over a padded body. .sp pushes whatever
   follows it to the far end of the header or the body. The 14px corner is the
   prototype's own, wider than the Bootstrap .card default; framed lists keep
   .table-card and its own radius. */
.card,
.modal-content {
  background-color: var(--susteq-surface);
}

.card {
  border: 1px solid var(--susteq-line);
  border-radius: 14px;
}

.card-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--susteq-line);
}

.card-h .t {
  font-weight: 700;
  color: var(--susteq-navy);
  font-size: 1rem;
}

.card-h .sub {
  color: var(--susteq-muted);
  font-size: 0.76rem;
}

.card-h .sp,
.card-b .sp {
  margin-left: auto;
}

.card-b {
  padding: 16px;
}

.text-frost {
  color: var(--susteq-frost) !important;
}

/* Shell: top bar, sidebar, main. These are the prototype's derived tokens
   (app.css :root) under our --susteq- prefix, at the values it uses. Mixing
   navy with frost by hand does not reproduce them: navy-050 is #e8eef4, while
   navy at 10% of frost gives #d3dde6, and that is what made the header band of
   a list read as a visibly darker blue than the design. */
:root {
  --susteq-topbar-h: 68px;
  --susteq-navy-700: #05283f;
  --susteq-navy-600: #0a4a6e;
  --susteq-navy-300: #6f90a6;
  --susteq-navy-100: #cfdbe6;
  /* header band of a list */
  --susteq-navy-050: #e8eef4;
  --susteq-amber-600: #d98c00;
  --susteq-amber-700: #c07b00;
  --susteq-amber-050: #fef7e8;
  --susteq-line: #e2e9f0;
  --susteq-line-2: #d3dde7;
  --susteq-muted: #5b6b78;
  /* state pill pairs (new-design .pill) */
  --susteq-ok: #1f7a4d;
  --susteq-ok-bg: #e2f2ea;
  --susteq-warn: #b8860b;
  --susteq-warn-bg: #fbf0d6;
  --susteq-danger: #b23b3b;
  --susteq-danger-bg: #f7e6e6;
  --susteq-info: #2f6f96;
  --susteq-info-bg: #e6f0f6;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  min-height: var(--susteq-topbar-h);
  background-color: var(--susteq-navy);
  color: var(--susteq-frost);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 14px;
  gap: 14px;
}

.topbar .btn {
  background: none;
  color: var(--susteq-frost);
  font-size: 1.2rem;
  border: none;
}

.topbar .btn:hover {
  color: var(--susteq-amber);
}

/* Lane chip in the top bar: frost-bordered pill on the navy bar.
   .topbar .lane-chip to win over .topbar .btn (border: none). */
.topbar .lane-chip {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1;
  padding: 7px 14px;
  display: inline-flex;
  /* baseline keeps the muted role/kind label on the same baseline as the
     Lane name; the icon is centred per item below */
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.topbar .lane-chip > .bi {
  align-self: center;
}

.lane-chip .lane-role,
.lane-chip .chip-kind {
  color: var(--susteq-navy-100);
  font-size: 0.75rem;
}

/* Chip dropdowns hang inside the top bar: reset .topbar .btn back to a
   normal control size and the frost colour back to the light menu's own,
   otherwise Clear scope renders oversized and near-invisible. */
.topbar .dropdown-menu .btn {
  font-size: 0.875rem;
  color: var(--bs-dropdown-link-color);
}

.topbar .dropdown-menu .btn:hover {
  color: var(--bs-dropdown-link-hover-color);
}

/* Selected dropdown item follows the sidebar active convention (navy
   pill with frost text and a leading amber bar) instead of Bootstrap's
   stock blue. */
.dropdown-item.active {
  background-color: var(--susteq-navy);
  color: var(--susteq-frost);
  position: relative;
  border-radius: 8px;
}

/* inset the pill from the dropdown edges to make room for the amber bar;
   the reduced horizontal padding keeps the item text aligned with the
   non-active rows (Bootstrap's dropdown-item padding-inline is 1rem) */
.dropdown-item.active {
  margin-inline: 9px;
  padding-inline: calc(1rem - 9px);
  /* .dropdown-item is width:100%, so shrink it or the margins overflow */
  width: calc(100% - 18px);
}

/* amber bar outside the pill, like the sidebar's active item */
.dropdown-item.active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 3px;
  background: var(--susteq-amber);
}

.dropdown-item.active .bi {
  color: var(--susteq-amber);
}

/* Lane switcher items: icon spaced from the text, sized like the chip.
   Baseline alignment keeps the muted role label on the same baseline as
   the (larger) Lane name instead of vertically centred. */
.lane-menu-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.85rem;
}

.lane-menu-item > .bi {
  /* keep the icon optically centred with the text */
  align-self: center;
}

.lane-menu-item small {
  font-size: 0.75rem;
  line-height: 1;
}

/* Remove cross on a selected Filter pill: white on the navy pill */
.filter-remove {
  color: #fff;
  display: inline-flex;
}

.filter-remove:hover {
  color: var(--susteq-amber);
}

/* Scope breadcrumb in the dropdown: small, wrapping, muted type labels */
.topbar .scoping-breadcrumb {
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
  row-gap: 0.25rem;
}

.topbar .scoping-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  padding: 0 0.35rem;
}

.topbar .scoping-breadcrumb a {
  text-decoration: none;
}

.topbar .scoping-breadcrumb a:hover {
  text-decoration: underline;
}

.nav-toggler {
  background: none;
  border: none;
  color: var(--susteq-frost);
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 8px;
}

.nav-toggler:hover {
  background: rgba(255, 255, 255, 0.08);
}

.app {
  display: flex;
  align-items: flex-start;
}

.sidebar {
  width: 262px;
  flex: 0 0 262px;
  position: sticky;
  top: var(--susteq-topbar-h);
  height: calc(100vh - var(--susteq-topbar-h));
  overflow-y: auto;
  background: var(--susteq-surface);
  border-right: 1px solid var(--susteq-line);
  padding: 14px 12px 40px;
}

.main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 22px 26px 60px;
}

@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    top: var(--susteq-topbar-h);
    left: 0;
    z-index: 1035;
    transform: translateX(-100%);
    transition: transform .2s;
    box-shadow: 0 10px 40px rgba(6, 53, 86, .2);
  }

  body.nav-open .sidebar {
    transform: none;
  }

  .main {
    padding: 16px 14px 50px;
  }
}

@media (min-width: 992px) {
  body.sidebar-hidden .sidebar {
    display: none;
  }
}

.nav-sec {
  margin: 16px 4px 6px;
}

.nav-sec:first-child {
  margin-top: 2px;
}

.nav-sec .k {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--susteq-navy-300);
}

.nav-a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--susteq-ink);
  font-weight: 500;
  font-size: .9rem;
  position: relative;
  text-decoration: none;
}

.nav-a .bi {
  color: var(--susteq-navy-300);
  font-size: 1.02rem;
}

.nav-a:hover {
  background: var(--susteq-cloud);
  color: var(--susteq-navy);
}

.nav-a.active {
  background: var(--susteq-navy);
  color: var(--susteq-frost);
  font-weight: 600;
}

.nav-a.active .bi {
  color: var(--susteq-amber);
}

.nav-a.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--susteq-amber);
}

.btn {
  font-weight: 600;
}

.btn.active {
  background-color: var(--bs-btn-bg) !important;
  color: var(--susteq-amber) !important;
}

.btn-sm {
  text-transform: none;
}

.btn-link {
  text-decoration: none;
}

/* Verbatim from the prototype: a primary button stays navy and deepens through
   navy-600 on hover and navy-700 on press. Amber is the accent, so the accent
   button of the prototype is .btn-accent, not a hover state of this one. */
.btn-primary {
  --bs-btn-bg: var(--susteq-navy);
  --bs-btn-border-color: var(--susteq-navy);
  --bs-btn-hover-bg: var(--susteq-navy-600);
  --bs-btn-hover-border-color: var(--susteq-navy-600);
  --bs-btn-active-bg: var(--susteq-navy-700);
  --bs-btn-disabled-bg: var(--susteq-navy-300);
  --bs-btn-disabled-border-color: var(--susteq-navy-300);
}

.btn-secondary {
  background-color: var(--susteq-amber);
  color: var(--susteq-navy) !important;
}

.btn-secondary.active {
  background-color: var(--susteq-navy) !important;
  color: var(--susteq-frost) !important;
}

.btn-secondary:hover {
  background-color: var(--susteq-navy);
  color: var(--susteq-frost) !important;
}

/* The edge of every field, the ink rather than the hairline (e0458f1). Named on
   the controls themselves, because leaving it to --bs-border-color is what made
   the label column of a details table come with it. The checkbox takes it too,
   or a tick would sit in a fainter box than the text field above it. */
.form-control,
.form-select,
.input-group-text,
.form-check-input {
  border-color: var(--susteq-field-line);
}

/* A ticked box in the ink, not in Bootstrap blue: .form-check-input:checked
   states #0d6efd outright, so --bs-primary never reaches it and the box inherits
   that blue wherever it is ticked --- the permission grid of a Role, the
   unregistered filter of Find a Token, the checkbox macro. Named before the
   focus rule so a box that is ticked and focused still edges to amber. */
.form-check-input:checked {
  background-color: var(--susteq-navy);
  border-color: var(--susteq-navy);
}

/* Focus belongs to the accent, not to Bootstrap's blue: new-design gives every
   field the amber border and ring, not only the ones inside a list search. The
   checkbox has to be named for itself: Bootstrap states #86b7fe and the blue
   ring for it outright, so --bs-primary never reached it. Same specificity as
   the vendored rule, later file, so this one answers. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--susteq-amber);
  box-shadow: 0 0 0 0.2rem rgba(241, 154, 0, 0.2);
}

/* Help box beside a form field. The table header uses the bare "?" (.th-help)
   instead, so this stays for forms only. */
.tooltip-icon {
  border: solid 1px var(--susteq-ink);
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
  background: var(--susteq-amber);
}

/* Lists: navy-050 header with navy text, hairline row separators, amber-050
   row hover and soft state pills, all at the prototype's own values. */
.table {
  --bs-table-bg: transparent;
  /* the prototype's .table size, in rem so it scales with the body font */
  font-size: 0.86rem;
  /* the prototype clears this margin too: Bootstrap's 1rem lands inside
     .table-card, so the last row floats above the edge of the card it is
     framed on. The card and its .table-foot do the spacing instead. A page
     that wants space under a table says so with a utility, as the portal's
     success table does with my-3. */
  margin-bottom: 0;
}

.table > thead th {
  background: var(--susteq-navy-050);
  color: var(--susteq-navy);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--susteq-line-2);
  white-space: nowrap;
  vertical-align: middle;
  padding: 9px 12px;
}

/* Both cells of a row, not the td alone: the label column of a details table
   is built out of th by table_header(), and the Total row of a ledger is a th
   beside the amounts, so the rule that centres a row has to name both. Same
   padding for the same reason, or the label sits in a narrower box than the
   value next to it. */
.table > tbody td,
.table > tbody th,
.table > tfoot td,
.table > tfoot th {
  vertical-align: middle;
  padding: 11px 12px;
  border-bottom: 1px solid var(--susteq-line);
}

/* the last row carries no rule of its own, whichever cell closes it */
.table > tbody tr:last-child td,
.table > tbody tr:last-child th,
.table > tfoot tr:last-child td,
.table > tfoot tr:last-child th {
  border-bottom: none;
}

.table > tbody td a {
  text-decoration: none;
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--susteq-amber-050);
}

/* every list and detail table is framed on a card surface (new-design
   .card); the table itself only carries Bootstrap's base .table plus
   .table-hover on lists. No overflow: an Actions menu has to escape the card. */
.table-card {
  background: var(--susteq-surface);
  border: 1px solid var(--susteq-line);
  border-radius: 12px;
  margin-bottom: 1em;
}

/* Pagination sits in the card footer, right aligned (new-design .card-b),
   not below the table. That footer is padding and nothing else: no fill and no
   border of its own, so the last row of the table, which carries no bottom
   border either, runs straight into it. The header band is the only tinted and
   ruled part of a table. */
.table-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

/* The pager is Bootstrap's own segmented control: the prototype styles it with
   this one rule and never touches .page-link, so the steps stay joined with a
   shared border and only the outer ends of the first and last are rounded. A
   .page-link radius or margin here turns it into a row of separate pills. */
.pagination {
  --bs-pagination-color: var(--susteq-navy-600);
  --bs-pagination-hover-color: var(--susteq-navy);
  --bs-pagination-active-bg: var(--susteq-navy);
  --bs-pagination-active-border-color: var(--susteq-navy);
}

/* Column help is a bare "?" that opens a tooltip: the header row stays one
   line tall instead of carrying the help box it used to. */
.th-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-inline-start: 5px;
  border-radius: 50%;
  border: 1px solid var(--susteq-navy-100);
  color: var(--susteq-navy);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.th-help:hover {
  border-color: var(--susteq-amber);
  color: var(--susteq-amber);
}

/* The accent button of the prototype, verbatim from app.css: amber at rest,
   deepening to amber-600 on hover and amber-700 on press, with the navy label
   the amber field needs. This is the button of a page action such as Add. */
.btn-accent {
  --bs-btn-bg: var(--susteq-amber);
  --bs-btn-border-color: var(--susteq-amber);
  --bs-btn-color: var(--susteq-navy);
  --bs-btn-hover-bg: var(--susteq-amber-600);
  --bs-btn-hover-border-color: var(--susteq-amber-600);
  --bs-btn-hover-color: var(--susteq-navy);
  --bs-btn-active-bg: var(--susteq-amber-700);
  --bs-btn-active-color: var(--susteq-navy);
}

/* Outline button of the prototype; Bootstrap has no .btn-ghost. */
.btn-ghost {
  --bs-btn-color: var(--susteq-navy);
  /* the edge of the field it stands beside. This button lives in the list search
     bar, and the prototype's line-2 there read as a second, weaker control
     joined to a navy-edged input. The navy-050 fill is the hover, so the edge
     has nothing left to do. */
  --bs-btn-border-color: var(--susteq-field-line);
  --bs-btn-hover-bg: var(--susteq-navy-050);
  --bs-btn-hover-color: var(--susteq-navy);
  --bs-btn-hover-border-color: var(--susteq-field-line);
  --bs-btn-active-bg: var(--susteq-navy-050);
  --bs-btn-active-color: var(--susteq-navy);
}

.list-search .input-group-text {
  background: var(--susteq-surface);
  /* the edge of the field it is joined to, not the card's hairline */
  border-color: var(--susteq-field-line);
  color: var(--susteq-navy);
}

.list-search .form-control:focus,
.list-search .input-group-text:focus-within {
  border-color: var(--susteq-amber);
  box-shadow: 0 0 0 0.2rem rgba(241, 154, 0, 0.2);
}

.table .btn-sm {
  margin: 0;
  padding: 1px 4px;
}

.table .btn-link {
  text-wrap: nowrap;
}

/* State badges read as pills: soft background, coloured text (new-design
   .pill), restyled on the Bootstrap colour classes the templates use. */
.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* The four state pairs and the muted pill are the prototype's .pill values. */
.badge.bg-success {
  background-color: var(--susteq-ok-bg) !important;
  color: var(--susteq-ok) !important;
}

.badge.bg-warning {
  background-color: var(--susteq-warn-bg) !important;
  color: var(--susteq-warn) !important;
}

.badge.bg-danger {
  background-color: var(--susteq-danger-bg) !important;
  color: var(--susteq-danger) !important;
}

.badge.bg-info {
  background-color: var(--susteq-info-bg) !important;
  color: var(--susteq-info) !important;
}

/* .pill.muted/.disabled/.blank: #eef2f6 is a literal in the prototype too. */
.badge.bg-secondary {
  background-color: #eef2f6 !important;
  color: var(--susteq-muted) !important;
}

.provider-name {
  color: var(--susteq-amber);
}

.secure-hash-mask {
  filter: blur(4px);
  transition: filter 0.2s ease-in-out;
  cursor: pointer;
  user-select: all;
}

.secure-hash-mask:hover {
  filter: blur(0);
}

.table-condensed { font-size: 0.9em !important; }
.table-condensed td, .table-condensed th { padding: 2px 3px; }
.table-condensed thead th { height: inherit; }

[data-bs-toggle="collapse"] .chevron-icon {
  transition: transform 0.2s ease-in-out;
  display: inline-block;
}

[data-bs-toggle="collapse"].collapsed .chevron-icon {
  transform: rotate(-90deg);
}

/* Error page (error.html.jinja2): a single centered column on the cloud
   background — medallion, status code, title, lead, actions — no card, the
   panel is the whole page. The medallion is a soft disc in the state pair
   the pills already use: warn for a denied page, danger for a bug. */
.error-page {
  max-width: 560px;
  margin: 56px auto;
  padding: 0 16px;
  text-align: center;
}

.error-medallion {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: var(--susteq-danger-bg);
  color: var(--susteq-danger);
}

.error-medallion.warn {
  background: var(--susteq-warn-bg);
  color: var(--susteq-warn);
}

.error-code {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--susteq-muted);
}

.error-title {
  margin: 2px 0 10px;
}

.error-lead {
  color: var(--susteq-muted);
}

.error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}

/* the debug traceback, folded away under the message and set in navy like
   the top bar, so it stays readable without stealing the page */
.error-tech {
  margin-top: 30px;
  text-align: left;
}

.error-tech summary {
  cursor: pointer;
  color: var(--susteq-muted);
  font-size: 0.8rem;
}

.error-tech summary .bi {
  transition: transform 0.15s ease-in-out;
}

.error-tech[open] summary .bi {
  transform: rotate(90deg);
}

.error-tech pre {
  background: var(--susteq-navy);
  color: var(--susteq-frost);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 0.72rem;
  overflow: auto;
}