/*
 * ICPC Operations Console - styles of the shell's brand and of the modules added with it
 * (results, certificates, dashboards). app.css holds the Cloudscape component layer and
 * the original pages; this file only adds what those components do not cover. Light mode,
 * Cloudscape design tokens only (tokens.css): no new colours or sizes.
 *
 * Each module keeps its rules in its own section below.
 */

/* ---- Brand: the ICPC Bolivia mark and the application name ---- */
.cs-topnav__logo--image {
  width: auto;
  height: 24px;
  border: 0;
  border-radius: 0;
}

.cs-topnav__title-short {
  display: none;
}

@media (max-width: 688px) {
  .cs-topnav__title-full {
    display: none;
  }

  .cs-topnav__title-short {
    display: inline;
  }
}

.login__logo-image {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}

/* ---- Dashboard and overviews ---- */

/* Dashboard (dashboard.html): the Invitations / Certificates / Results panels are three
   columns on wide screens; each keeps two counters per row. */
.console-dashboard .dashboard-panels > * {
  min-width: 0;
}

/* Recent activity: what was done ends in an ellipsis (full text in the cell's title); the
   outcome ("9 rows: 8 added, 1 updated, ...") wraps instead, nothing of it is lost. */
.recent-activity .recent-activity__what {
  --cs-cell-max-width: var(--dashboard-team-max-width);
}

/* Invitations list (console/invitation_list.html): name and institution like the teams table;
   the email status column keeps its flags under the status, as there. */
.invitation-table .invitation-table__name {
  --cs-cell-max-width: var(--team-table-name-width);
}

.invitation-table .invitation-table__institution {
  --cs-cell-max-width: var(--team-table-institution-width);
}

.invitation-table .invitation-table__email .status-flags {
  max-width: var(--cs-table-wrap-min-width);
}

.invitation-table .invitation-table__email > .cs-table__cell {
  white-space: normal;
  min-width: var(--team-table-email-min-width);
}

.invitation-table .invitation-table__email .cs-status {
  white-space: nowrap;
}

/* Column fit: every column needs about 1240px of content width. Below that Size, then
   Version, are left out (both stay on the team page, shown in the split panel). Content
   width = viewport - 48px gutters (- 281px with the navigation open). */
@media (max-width: 1620px) {
  html:not(.cs-nav-closed) .invitation-table .invitation-table__size { display: none; }
}

@media (max-width: 1520px) {
  html:not(.cs-nav-closed) .invitation-table .invitation-table__version { display: none; }
}

@media (max-width: 1340px) {
  .invitation-table .invitation-table__size { display: none; }
}

@media (max-width: 1240px) {
  .invitation-table .invitation-table__version { display: none; }
}

/* Invitation templates (console/invitation_template.html): the how-to list. */
.invitation-template__steps {
  margin: 0;
  padding-inline-start: var(--space-l);
}

.invitation-template__steps > li + li {
  margin-top: var(--space-xs);
}

/* Import History (console/imports.html): file names end in an ellipsis. */
.import-history .import-history__file {
  --cs-cell-max-width: var(--team-table-institution-width);
}

/* ---- Competitions and participants ---- */

/* Competitions table (years.html): long names and places end in an ellipsis. */
.years-table .years-table__name,
.years-table .years-table__location {
  --cs-cell-max-width: var(--team-table-name-width);
}

/* Participants (console/participants.html): long texts end in an ellipsis (full text in the
   cell's title); the institution filter is wider than the other selects (long names). */
.participant-table .participant-table__name,
.participant-table .participant-table__team {
  --cs-cell-max-width: var(--team-table-name-width);
}

.participant-table .participant-table__institution,
.participant-table .participant-table__email {
  --cs-cell-max-width: var(--team-table-institution-width);
}

.cs-table__filter .participants__institution-filter {
  flex: 0 1 calc(1.5 * var(--cs-select-filter-width));
  min-width: 0;
}

.participants__institution-filter .cs-select {
  min-width: 0;
}

/* ---- Results & Rankings ---- */

/* Awards table: the row's action links stay on one line, as in the competitions table. */
.awards-table__actions .cs-space-between {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* The awards a team receives: badges that wrap, xxs apart. */
.results-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
}

/* Preview: the problems of a row that will not be imported, one per line. */
.results-preview__problems,
.results-without__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Import form: the example file keeps its line breaks and scrolls sideways on phones. */
.results-format__example {
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-body-s);
  white-space: pre;
}

/* ---- Certificate templates ---- */

/* The variables table of a template's page: names never break; long sample values (the
   contestants list) wrap anywhere instead of widening the container. */
.certificate-template__variables > tbody > tr > td:first-child {
  white-space: nowrap;
}

.certificate-template__variables > tbody > tr > td:last-child {
  overflow-wrap: anywhere;
}

/* ---- Certificates: generation, list, export ---- */

/* Overview: next steps (the status text and its buttons on one row, stacked on a phone). */
.cert-steps__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
}

.cert-steps.cs-columns--borders-horizontal {
  row-gap: var(--space-scaled-xs);
}

.cert-steps.cs-columns--borders-horizontal > * + * {
  padding-top: var(--space-scaled-xs);
}

@media (max-width: 688px) {
  .cert-steps__item {
    flex-direction: column;
    align-items: flex-start;
  }
}

.cert-empty,
.cert-note {
  margin: 0;
}

.cert-note {
  margin-top: var(--space-s);
  color: var(--color-text-body-secondary);
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
}

.cert-kinds__what,
.cert-kinds__templates {
  --cs-cell-max-width: 16rem;
}

/* Generation run: the progress meter, and the step form's fallback button. With JavaScript
   the step posts itself (htmx); "Continue" shows only when a request failed. */
.cert-progress__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
}

.cert-progress__meter {
  inline-size: min(100%, 24rem);
  block-size: var(--space-s);
  accent-color: var(--color-background-progress-bar-value-default);
}

.cert-step__continue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
}

.cert-step__stalled-text {
  margin: 0;
}

html.js .cert-step:not(.cert-step--stalled) .cert-step__continue,
html:not(.js) .cert-step__running,
html:not(.js) .cert-step__stalled-text,
.cert-step--stalled .cert-step__running,
.cert-step:not(.cert-step--stalled) .cert-step__stalled-text {
  display: none;
}

.cert-failure {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.cert-failure .log-excerpt {
  max-height: calc(var(--line-height-body-s) * 15);
}

/* List: the selection form wraps the table (its header holds the GET filter form), and its
   bar carries the selection's download buttons. */
.cert-list__selection {
  display: contents;
}

.cert-list__bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-l);
}

.cert-table__recipient {
  --cs-cell-max-width: 18rem;
}

.cert-table__team,
.cert-table__institution,
.cert-table__template {
  --cs-cell-max-width: 14rem;
}

.cert-table__open {
  margin-inline-start: var(--space-xxs);
  font-size: var(--font-size-body-s);
}

@media (max-width: 1440px) {
  html:not(.cs-nav-closed) .cert-table__institution,
  html:not(.cs-nav-closed) .cert-table__template {
    display: none;
  }
}

@media (max-width: 1160px) {
  .cert-table__institution,
  .cert-table__template,
  .cert-table__generated {
    display: none;
  }
}

/* ---- Certificate emails ---- */

/* Long certificate labels ("Ana Quispe (Contestant), Team name - Gold medal") end in an
   ellipsis like the history table's Team column; the full text is in the cell's title. */
.certificate-history-table .certificate-history__certificate,
.certificate-send .certificate-send__label {
  --cs-cell-max-width: var(--history-table-team-width);
}

/* The kind / award choice of the send page: selects and Apply on one wrapping row. */
.certificate-send__filters {
  flex-wrap: wrap;
  align-items: center;
}

.certificate-send__selected {
  margin: 0;
}

/* ---- Login, two-step verification and account pages (templates/_public.html) ---- */
.login--wide {
  max-width: 560px;
}

.login__help,
.login__below {
  margin-top: var(--space-m);
  text-align: center;
}

.cs-link-button {
  border: 0;
  padding: 0;
  background: none;
  color: var(--color-text-link-default);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.mfa-qr svg {
  display: block;
  margin: 0 auto;
}

.mfa-key {
  word-break: break-all;
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs) var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-family-monospace);
}

/* ---- Profile: My profile, two-step verification set-up, recovery codes (templates/profile/) ---- */

/* The step-up forms of the Security tab sit in a space_between: it already spaces the
   error alert and the footer. */
.profile-mfa__form .cs-form__error,
.profile-mfa__form .cs-form__footer {
  margin-top: 0;
}

/* The QR code starts at the form's edge (centred only on the narrow public pages). */
.profile-mfa-setup .mfa-qr svg {
  margin: 0;
}

/* ---- Admin roles: groups, roles, permission matrix, access policies, audit logs
        (templates/admin/groups, roles, permissions, policies, audit) ---- */

/* Long names, descriptions and labels end in an ellipsis (the full text is the cell's title). */
.iam-groups__name,
.iam-roles__name {
  --cs-cell-max-width: 20rem;
}

.iam-groups__description,
.iam-roles__description,
.iam-roles__groups,
.iam-audit__actor,
.iam-audit__target,
.iam-audit__summary {
  --cs-cell-max-width: 24rem;
}

.iam-groups__roles {
  min-width: 14rem;
}

/* The permission matrix: one table per resource group; cells wrap their descriptions. */
.iam-matrix__table .iam-matrix__resource {
  min-width: 9rem;
}

.iam-matrix__table .iam-matrix__td {
  min-width: 10rem;
  vertical-align: top;
}

.iam-matrix__cell + .iam-matrix__cell {
  margin-top: var(--space-xs);
}

.iam-matrix__cell .cs-badge {
  margin-top: var(--space-xxs);
}

/* The matrix's role / group / search bar, and the audit log's filters. */
.iam-matrix-filter,
.iam-audit__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xs) var(--space-m);
}

.iam-matrix-filter .cs-text-filter {
  flex: 1 1 var(--cs-select-filter-width);
}

.iam-audit__date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.iam-audit__date .cs-input {
  width: auto;
}

.iam-audit__clear {
  align-self: center;
}

/* Audit Logs pagination (Cloudscape Pagination: page numbers between angle buttons). */
.iam-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  padding: var(--space-s) var(--space-l);
}

.iam-pagination__summary {
  color: var(--color-text-body-secondary);
  font-size: var(--font-size-body-s);
}

.iam-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.iam-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-xl);
  padding: var(--space-xxxs) var(--space-xxs);
  border-radius: var(--border-radius-button);
  color: var(--color-text-interactive-default);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.iam-pagination__link:hover {
  color: var(--color-text-interactive-hover);
}

.iam-pagination__link.is-current {
  color: var(--color-text-interactive-active);
  box-shadow: inset 0 -2px 0 var(--color-border-item-selected);
}

.iam-pagination__link.is-disabled {
  color: var(--color-text-interactive-disabled);
}

.iam-pagination__gap {
  color: var(--color-text-body-secondary);
}

/* Lists of permissions and users on review pages. */
.iam-permission-list,
.iam-user-list,
.iam-mfa-roles,
.iam-rules {
  margin: 0;
  padding-left: var(--space-l);
}

.iam-permission-list li + li,
.iam-rules li + li {
  margin-top: var(--space-xxs);
}

/* The permission tester's verdict. */
.iam-decision__verdict {
  margin: 0;
  font-size: var(--font-size-heading-s);
}

.iam-decision__reason {
  margin: 0;
}

.iam-audit-event__value {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ---- Admin users: the Users list, a user's page, bulk actions, the bulk import and the
   Sessions list (templates/admin/users/, templates/admin/sessions/). Pagination uses the
   shared .iam-pagination block above. ---- */

/* Five filters and the sort on one wrapping row: each select takes its own width. */
.admin-users__filters .cs-select-inline {
  flex: 0 0 auto;
}

/* The bulk-action bar above the table: the action select and its Review button. */
.admin-users__bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
  padding: 0 var(--space-l) var(--space-s);
}

.admin-users__bulk .cs-select-inline {
  flex: 0 0 auto;
}

/* The email cell is the visible label of the row's checkbox. */
.admin-users__table .admin-users__email label {
  cursor: pointer;
}

/* Checkbox lists of the Create user form (groups, roles). */
.admin-users__choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cs-select-filter-width), 1fr));
  gap: var(--space-s) var(--space-l);
}

.admin-users__problems,
.admin-users-import__notes {
  margin: 0;
  padding-left: var(--space-l);
}

.admin-users-import__notes:empty {
  display: none;
}

.admin-users-import__problem {
  color: var(--color-text-status-error);
}

.admin-user__description,
.admin-users__refusal {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-users-import__example {
  white-space: pre;
  overflow-x: auto;
}

.admin-users-import__columns {
  margin: var(--space-s) 0 0;
}

/* ---- Top bar: the service icons and the live-mode badge (base.html) ---- */

/* The strip sits right after the identity, as the AWS console's services; the utilities
   stay at the right edge. */
.cs-topnav__services {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: auto;
  padding-left: var(--space-s);
  border-left: var(--border-divider-section-width) solid var(--color-border-divider-default);
}

.cs-topnav__services-list {
  display: flex;
  align-items: center;
  gap: var(--space-xxxs, 2px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-topnav__service {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--border-radius-button);
  color: var(--color-text-interactive-default);
}

.cs-topnav__service:hover .cs-service-tile {
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* The service tiles: a coloured rounded square with a white glyph, like the AWS service
   icons (the AWS Architecture Icons' category gradients, dark at the bottom). */
.cs-service-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  color: #ffffff;
  background: linear-gradient(0deg, var(--tile-dark), var(--tile-light));
  transition: filter 0.1s, box-shadow 0.1s;
}

.cs-service-tile .cs-icon {
  color: #ffffff;
}

.cs-service-tile--pink {
  --tile-dark: #b0084d;
  --tile-light: #ff4f8b;
}

.cs-service-tile--purple {
  --tile-dark: #4d27a8;
  --tile-light: #a166ff;
}

.cs-service-tile--blue {
  --tile-dark: #2e27ad;
  --tile-light: #527fff;
}

.cs-service-tile--green {
  --tile-dark: #3f8624;
  --tile-light: #7aa116;
}

.cs-service-tile--orange {
  --tile-dark: #c8511b;
  --tile-light: #ff9900;
}

.cs-service-tile--teal {
  --tile-dark: #055f4e;
  --tile-light: #56c0a7;
}

.cs-service-tile--magenta {
  --tile-dark: #8c1ba3;
  --tile-light: #d45bea;
}

.cs-service-tile--red {
  --tile-dark: #bd0816;
  --tile-light: #ff5252;
}

.cs-service-tile--indigo {
  --tile-dark: #232f3e;
  --tile-light: #5a6b86;
}

.cs-service-tile--gold {
  --tile-dark: #8d6605;
  --tile-light: #f5b301;
}

.cs-service-tile--navy {
  --tile-dark: #0f1b2d;
  --tile-light: #2a5a9e;
}

.cs-service-tile--slate {
  --tile-dark: #1d4b2a;
  --tile-light: #2ea597;
}

@media (forced-colors: active) {
  .cs-service-tile {
    background: none;
    color: LinkText;
  }
}

.cs-topnav__service:focus-visible {
  outline: 2px solid var(--color-border-item-focused);
  outline-offset: 1px;
}


.cs-topnav__service.is-active::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -6px;
  border-bottom: 2px solid var(--color-text-accent);
  border-radius: 1px;
}

/* The label, as a small Cloudscape-like tooltip under the icon (hover or keyboard focus);
   the link's aria-label carries it for screen readers. */
.cs-topnav__service::after {
  content: attr(data-label);
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-xxs) var(--space-xs);
  border: var(--border-divider-section-width) solid var(--color-border-popover);
  border-radius: var(--border-radius-popover);
  background: var(--color-background-popover);
  box-shadow: var(--shadow-popover);
  color: var(--color-text-body-default);
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
  font-weight: var(--font-weight-normal, 400);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 10;
}

.cs-topnav__service:hover::after,
.cs-topnav__service:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Medium widths: the short name leaves room for the icons; narrow screens: no strip (the
   side navigation has every section). */
@media (max-width: 1279px) {
  .cs-topnav__title-full {
    display: none;
  }

  .cs-topnav__title-short {
    display: inline;
  }
}

@media (max-width: 1023px) {
  .cs-topnav__services {
    display: none;
  }
}

/* Live mode: a calm badge - normal text and a red dot - instead of a red block. */
.cs-topnav__env--live {
  align-items: center;
  gap: var(--space-xs);
  padding: 0;
  background: none;
  color: var(--color-text-body-secondary);
  font-weight: var(--font-weight-normal, 400);
}

.cs-topnav__live-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-status-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-status-error) 20%, transparent);
}

/* Medium widths: Settings, the user and Log out show only their icons (their names stay in
   the tooltip and the aria-label), so the name and the service icons keep their room. */
@media (max-width: 1279px) {
  .cs-topnav__utility:not(.cs-topnav__utility--env) .cs-topnav__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .cs-topnav__identity {
    flex-shrink: 0;
  }
}

/* ---- Payments (app/templates/payments/): balances, charges, payments received, forms ---- */

/* An amount never breaks between its digits and its currency. */
.payments-amount {
  white-space: nowrap;
}

/* A payment's notes keep their line breaks. */
.payments-notes {
  white-space: pre-wrap;
}

/* Checkbox lists of the Create charges form (sites, teams). */
.payments-choices {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* The date range of the payments received filter: the inputs take their own width. */
.payments-history__filter .cs-input[type="date"] {
  width: auto;
}

/* ---- Finance overview, reports and settings (app/templates/finance/overview/) ---- */

/* The chart series colours: Cloudscape's chart palette (categorical 1 and 2), which has no
   design token; validated for colour-vision deficiency (identity is never colour alone:
   every chart has a legend and a data table). */
:root {
  --fin-chart-series-1: #688ae8;
  --fin-chart-series-2: #c33d69;
}

/* Amounts line up on the right and never break between digits and currency. */
.fin-num {
  text-align: end;
  white-space: nowrap;
}

/* The "As of" date of the overview. */
.fin-asof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.fin-asof .cs-input[type="date"],
.fin-picker .cs-input[type="date"] {
  width: auto;
}

/* The KPI tiles: one block per currency. */
.fin-kpis__currency {
  margin: var(--space-s) 0 var(--space-xs);
  font-size: var(--font-size-heading-s);
  font-weight: var(--font-weight-heading-s);
}

.fin-kpis__currency:first-child {
  margin-top: 0;
}

.fin-estimate {
  vertical-align: middle;
}

.fin-alerts__list,
.fin-checks {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Summary tables (result, cash flow, report lines): plain line labels, results bold, memo
   lines grey. */
.fin-summary tbody th {
  font-weight: var(--font-weight-display-xl);
}

.fin-summary .fin-line--strong th,
.fin-summary .fin-line--strong td {
  font-weight: var(--font-weight-bold);
}

.fin-line--memo th,
.fin-line--memo td {
  color: var(--color-text-body-secondary);
}

/* Report tables: listed but not counted (a reversed payment), and the totals rows. */
.fin-row--not-counted .cs-table__cell {
  color: var(--color-text-body-secondary);
  text-decoration: line-through;
}

.fin-row--converted .cs-table__cell {
  color: var(--color-text-body-secondary);
}

/* Charts: inline SVG (no script), one per currency. */
.fin-chart {
  margin: 0 0 var(--space-l);
}

.fin-chart__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-xs);
}

.fin-chart__currency {
  font-weight: var(--font-weight-heading-s);
}

.fin-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-body-s);
}

.fin-chart__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
}

.fin-chart__swatch {
  width: 12px;
  height: 12px;
}

.fin-chart__svg {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  font-family: var(--font-family-base);
}

.fin-chart__bar--s1 {
  fill: var(--fin-chart-series-1);
}

.fin-chart__bar--s2 {
  fill: var(--fin-chart-series-2);
}

.fin-chart__bar:hover {
  opacity: 0.8;
}

.fin-chart__grid {
  stroke: var(--color-border-divider-default);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.fin-chart__axis {
  stroke: var(--color-text-body-secondary);
  stroke-width: 1;
}

.fin-chart__tick,
.fin-chart__label {
  fill: var(--color-text-body-secondary);
  font-size: 12px;
}

.fin-chart__label {
  fill: var(--color-text-body-default);
}

/* The wizard's category checkboxes, in columns. */
.fin-setup__categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-xs);
}

.fin-field-error {
  color: var(--color-text-status-error);
}

/* ---- Finance budget (app/templates/finance/budget/): Budget, Revisions, Approvals ---- */

/* An amount never breaks between its digits and its currency; a negative one (a variance
   over budget, a cut in a revision) reads as an error. */
.fin-budget-amount {
  white-space: nowrap;
}

.fin-budget-amount--negative {
  color: var(--color-text-status-error);
}

/* Reasons, notes and justifications keep their line breaks. */
.fin-budget-text {
  white-space: pre-wrap;
}

/* The utilisation bar (inline SVG): the track, the committed share coloured by its level,
   and a tick where the projected final cost lands. */
.fin-budget-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
  vertical-align: middle;
}

.fin-budget-bar__svg {
  width: 72px;
  height: 8px;
  flex-shrink: 0;
}

.fin-budget-bar__track {
  fill: var(--color-background-progress-bar-default);
}

.fin-budget-bar__fill {
  fill: var(--color-text-status-success);
}

.fin-budget-bar--warning .fin-budget-bar__fill {
  fill: var(--color-text-status-warning);
}

.fin-budget-bar--reached .fin-budget-bar__fill {
  fill: var(--color-text-status-info);
}

.fin-budget-bar--over .fin-budget-bar__fill {
  fill: var(--color-text-status-error);
}

.fin-budget-bar__projected {
  fill: var(--color-text-body-default);
}

.fin-budget-bar__value {
  font-variant-numeric: tabular-nums;
}

/* The per-currency total rows under the budget table. */
.fin-budget-total {
  font-weight: var(--font-weight-heading-s);
}

/* The as-of date of the budget filter takes its own width. */
.fin-budget-filter .cs-input[type="date"] {
  width: auto;
}

/* ---- Finance: expenses (app/templates/finance/expenses/): expenses, suppliers, batch panel ---- */

/* An amount never breaks between its digits and its currency. */
.fin-exp__amount {
  white-space: nowrap;
}

/* The Estimate badge sits after a figure, on its line. */
.fin-exp__estimate {
  vertical-align: middle;
}

/* The withdraw form of a file: the reason input takes the room left by the button. */
.fin-exp__withdraw {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.fin-exp__withdraw .cs-input {
  min-width: 8rem;
}

/* Budget impact: committed (and projected) against the budget, an inline SVG bar. */
.fin-exp__meter {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: var(--space-s);
  border-radius: var(--border-radius-badge);
  overflow: hidden;
}

.fin-exp__meter-track {
  fill: var(--color-background-progress-bar-default);
}

.fin-exp__meter-projected {
  fill: var(--color-border-status-info);
  opacity: 0.35;
}

.fin-exp__meter-used {
  fill: var(--color-background-progress-bar-value-default);
}

.fin-exp__meter--warning .fin-exp__meter-used {
  fill: var(--color-text-status-warning);
}

.fin-exp__meter--over .fin-exp__meter-used {
  fill: var(--color-text-status-error);
}

/* ---- Finance income (app/templates/finance/income/): Income, income detail, Sponsors &
   Contributions ---- */

/* An amount never breaks between its digits and its currency. */
.fin-income-amount {
  white-space: nowrap;
}

/* An income's notes keep their line breaks. */
.fin-income-notes {
  white-space: pre-wrap;
}

/* "Estimate" and "Not cash" badges sit beside an amount, never under it alone. */
.fin-income-badge {
  margin-inline-start: var(--space-xxs);
  vertical-align: middle;
}

/* Received of committed, per currency (inline SVG, Sponsors & Contributions). */
.fin-income-bar {
  display: block;
  width: 100%;
  max-width: 480px;
  height: 8px;
  margin-block-start: var(--space-s);
  border-radius: var(--border-radius-badge);
}

.fin-income-bar__track {
  fill: var(--color-background-progress-bar-default);
}

.fin-income-bar__value {
  fill: var(--color-background-progress-bar-value-default);
}

.fin-income-bar__legend {
  margin-block: var(--space-xxs) 0;
}

/* The in-kind memo under the contributors table. */
.fin-income-in-kind-memo {
  text-align: start;
}

/* ---------------------------------------------------------------------------------------
   Finance: Accounts (accounts, ledger, team payments to place, transfers, reconcile;
   app/templates/finance/accounts/). A reversed movement and its reversal leg are a struck
   pair; the bulk placement's account select sits under its table.
   --------------------------------------------------------------------------------------- */
.finance-ledger__row--reversed .finance-ledger__amount,
.finance-transfer--reversed .cs-table__cell {
  text-decoration: line-through;
  color: var(--color-text-status-inactive);
}
.finance-ledger__row--reversal .finance-ledger__amount {
  color: var(--color-text-status-inactive);
}
.finance-transfer--highlighted {
  background: var(--color-background-item-selected);
}
.finance-unplaced__place {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-scaled-s);
  padding: var(--space-scaled-m) var(--space-container-horizontal);
  border-top: var(--border-divider-section-width) solid var(--color-border-divider-default);
}
.finance-unplaced__place .cs-form-field {
  flex: 1 1 20rem;
}
.finance-accounts__unplaced,
.finance-accounts__cash {
  font-variant-numeric: tabular-nums;
}

/* ---- Finance: closing (app/templates/finance/closing/): checklist, closings, report ---- */

/* An amount never breaks between its digits and its currency; numbers line up. */
.finance-closing__amount {
  white-space: nowrap;
}

.finance-closing__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.finance-closing__alarm {
  color: var(--color-text-status-error);
  font-weight: var(--font-weight-bold);
}

/* The closing date picker: the date input keeps its own width, the button beside it. */
.finance-closing__date {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-static-s);
  align-items: flex-end;
}

.finance-closing__date .cs-input[type="date"] {
  width: auto;
}

/* The checklist: one block per item (kind, title, count, its rows, its note). */
.finance-closing__checklist {
  display: grid;
  gap: var(--space-static-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.finance-closing__item {
  display: grid;
  gap: var(--space-static-xs);
  padding-bottom: var(--space-static-m);
  border-bottom: var(--border-divider-section-width) solid var(--color-border-divider-default);
}

.finance-closing__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.finance-closing__details {
  margin: 0;
  padding-left: var(--space-static-l);
}

.finance-closing__note {
  margin: 0;
  white-space: pre-wrap;
}

.finance-closing__subhead {
  margin: var(--space-static-m) 0 var(--space-static-xs);
  font-size: var(--font-size-heading-s);
}

/* A SHA-256 is 64 characters: it may wrap on a phone. */
.finance-closing__hash,
.finance-print__hash {
  overflow-wrap: anywhere;
}

/* The printable final report (finance/closing/print.html): no application shell. */
.finance-print {
  margin: 0;
  padding: var(--space-static-l);
  background: var(--color-background-container-content);
  color: var(--color-text-body-default);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-m);
}

.finance-print h1 {
  margin: 0 0 var(--space-static-xs);
  font-size: var(--font-size-heading-l);
}

.finance-print h2 {
  margin: var(--space-static-l) 0 var(--space-static-xs);
  font-size: var(--font-size-heading-m);
}

.finance-print__meta {
  margin: 0 0 var(--space-static-s);
  color: var(--color-text-body-secondary);
  font-size: var(--font-size-body-s);
}

.finance-print__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-static-xxs) var(--space-static-l);
  margin: var(--space-static-m) 0;
}

.finance-print__facts dt {
  color: var(--color-text-body-secondary);
}

.finance-print__facts dd {
  margin: 0;
}

@media print {
  .finance-print {
    padding: 0;
  }

  .finance-print__actions {
    display: none;
  }

  .finance-print__section {
    break-inside: avoid-page;
  }
}

/* ---- Finance: closing, bulk fixes and Verify's late records ---- */

.finance-closing__choices {
  list-style: none;
  padding-left: 0;
}

.finance-closing__choices li + li {
  margin-top: var(--space-static-xxs);
}

.finance-closing__item-link,
.finance-closing__late {
  margin: var(--space-static-xs) 0 0;
}

/* ---- Finance: closing, the printed report fits the page ----
   On screen a wide report table scrolls inside .cs-table__scroll; on paper the browser
   would print only the visible part and drop the right-hand columns (Variance, Payable,
   Unauthorised ...). In print the wrapper does not clip, the report prints landscape
   (a named page: other pages keep the browser's default), and the tables shrink to the
   page width: smaller type, tighter cells, headers and amounts that may wrap (an amount
   breaks only between its number and its currency code). */
@page finance-report {
  size: A4 landscape;
  margin: 10mm;
}

@media print {
  .finance-print {
    page: finance-report;
    font-size: var(--font-size-body-s);
  }

  .finance-print .cs-table__scroll {
    overflow: visible;
  }

  .finance-print .finance-closing__table {
    width: 100%;
    table-layout: auto;
    font-size: 10px;
    line-height: 1.3;
  }

  .finance-print .finance-closing__table > thead > tr > th,
  .finance-print .finance-closing__table > tbody > tr > th,
  .finance-print .finance-closing__table > tbody > tr > td {
    padding: 2px 4px;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .finance-print .finance-closing__table > * > tr > :first-child {
    padding-left: 0;
  }

  .finance-print .finance-closing__table .finance-closing__amount {
    white-space: normal;
    overflow-wrap: normal;
  }

  .finance-print .finance-closing__table thead {
    display: table-header-group;
  }

  .finance-print .finance-closing__table tr {
    break-inside: avoid;
  }
}

/* Notifications (Stage C, docs/notifications.md): the service tile of the top bar. */
.cs-service-tile--coral {
  --tile-dark: #a8243d;
  --tile-light: #ff7a59;
}