/* Shared Stoneware page anatomy, panels, lists and reusable page states. */
.fs-general-report__filters {
  background: var(--fs-color-panel-filter);
}

.fs-page {
  display: grid;
  align-content: start;
  gap: var(--fs-page-gap);
  width: 100%;
  min-width: 0;
}

/* Work-page headings stay quiet: identity already lives in the application shell. */
.fs-page-heading-card {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 10px 16px;
  background-color: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-sm);
}

/* Client-owned feature pages use this lighter header wrapper around the same
   canonical heading fragment. It participates in the same pinned page layer. */
.fs-page-header {
  position: sticky;
  z-index: 20;
  top: 0;
  background: var(--fs-color-content-canvas);
}

/*
 * One family for the whole interface. The serif was tried here and read as a
 * different product bolted on: the title sat in another voice from every number
 * under it. Rank comes from size and tracking instead — 26px against 14px body,
 * tightened, which outranks the section eyebrows without changing typeface.
 */
.fs-page-heading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--fs-color-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/*
 * The feature pictogram is the page's one identifying mark, so it is read at a
 * glance rather than squinted at. It grows only into room the header already
 * has: the title's own line box is 31px on desktop and 28px on mobile, so a
 * 26px glyph never becomes the tallest thing in the row and the header keeps
 * its 54px. Anything above that would start pushing the bar taller.
 */
.fs-page-heading img {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  object-fit: contain;
}

.fs-page-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
}

/*
 * Panel label. Per the brand book: a bordered strip at the top of a card that
 * names the block and optionally carries its metadata on the right. Panels are
 * all one white surface, so this strip — not a fill — is what tells query from
 * summary from search.
 */
.fs-section-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-3);
  min-height: 40px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--fs-color-border-subtle);
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fs-section-label__title {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
}

/* Metadata beside the name is not a heading: it keeps sentence case. */
.fs-section-label__meta {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  color: var(--fs-color-text-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* A card that opens with a label owns no padding; each part sets its own. */
.fs-panel {
  display: block;
  padding: 0;
  overflow: hidden;
}

.fs-panel__body {
  padding: var(--fs-space-4);
}

/*
 * Canonical feature-page blocks. Templates compose these through page-blocks.html;
 * feature CSS may change only the inner layout, never the panel surface or rhythm.
 */
.fs-page-block {
  min-width: 0;
}

.fs-page-block--query,
.fs-page-block--filters,
.fs-page-block--content {
  background: var(--fs-color-surface);
}

/*
 * Query and filters host controls that open over the page — user pickers, selects,
 * date popovers. `.fs-panel` clips to its own box, which cut every one of those off
 * at the bottom edge of the panel, so these two blocks stay unclipped and instead
 * outrank the blocks below them. Query sits above filters because its dropdown
 * opens downward across it; both sit above content, which is not positioned.
 */
.fs-page-block--query,
.fs-page-block--filters {
  position: relative;
  overflow: visible;
}

.fs-page-block--query {
  z-index: 6;
}

.fs-page-block--filters {
  z-index: 5;
}

/*
 * Without the panel clip the label owns the top corners of the card itself,
 * otherwise its hover fill squares them off.
 */
.fs-page-block--query > .fs-page-block__disclosure > .fs-section-label,
.fs-page-block--filters > .fs-page-block__disclosure > .fs-section-label {
  border-radius: var(--fs-radius-lg) var(--fs-radius-lg) 0 0;
}

.fs-page-block--summary {
  display: block;
}

.fs-page-block__disclosure {
  display: block;
}

.fs-page-block__disclosure > .fs-section-label {
  padding-right: 44px;
  cursor: pointer;
  list-style: none;
}

.fs-page-block__disclosure > .fs-section-label::-webkit-details-marker {
  display: none;
}

.fs-page-block__chevron {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--fs-color-text-muted);
  border-bottom: 1.5px solid var(--fs-color-text-muted);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.fs-page-block__disclosure[open] .fs-page-block__chevron {
  margin-top: -2px;
  transform: rotate(225deg);
}

.fs-page-block__disclosure:not([open]) > .fs-section-label {
  border-bottom: 0;
}

@media (hover: hover) {
  .fs-page-block__disclosure > .fs-section-label:hover {
    background: var(--fs-color-surface-hover);
  }
}

/*
 * Any panel can collapse: write it as <details class="fs-panel fs-panel--collapsible">
 * with the label as its <summary>. This is panel behaviour, not one page's feature —
 * query, summary and search all fold the same way, and the chevron is the only
 * affordance added, so a collapsed panel still reads as the same block.
 */
.fs-panel--collapsible > .fs-section-label {
  padding-right: 44px;
  cursor: pointer;
  list-style: none;
}

.fs-panel--collapsible > .fs-section-label::-webkit-details-marker {
  display: none;
}

@media (hover: hover) {
  .fs-panel--collapsible > .fs-section-label:hover {
    background: var(--fs-color-surface-hover);
  }
}

.fs-panel--collapsible > .fs-section-label::after {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--fs-color-text-muted);
  border-bottom: 1.5px solid var(--fs-color-text-muted);
  content: "";
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.fs-panel--collapsible[open] > .fs-section-label::after {
  margin-top: -2px;
  transform: rotate(225deg);
}

/* A closed panel is a single strip: the label keeps no divider under it. */
.fs-panel--collapsible:not([open]) > .fs-section-label {
  border-bottom: 0;
}

/*
 * Record list. One panel, a header row, then rows flush against each other — the
 * shape every "list of things" page needs. Only the column track differs per
 * page, so a feature sets `grid-template-columns` on the head and row and takes
 * everything else from here.
 *
 * Rows do not float apart with gaps and shadows: separated rows read as separate
 * cards and stop the eye from running down a column, which is the one thing a
 * table is for.
 */
.fs-datalist {
  display: block;
  padding: 0;
  overflow: hidden;
}

.fs-datalist__head,
.fs-datalist__row {
  display: grid;
  gap: 0;
  align-items: center;
}

.fs-datalist__head {
  min-height: 34px;
  padding: 8px 16px;
  color: var(--fs-color-text-secondary);
  background: var(--fs-color-table-header);
  border-bottom: 1px solid var(--fs-color-border);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fs-datalist__row {
  min-height: 58px;
  padding: 9px 16px;
  background: var(--fs-color-panel-content);
  border-bottom: 1px solid var(--fs-color-border-subtle);
  transition: background-color 0.14s ease;
}

.fs-datalist__row:last-child {
  border-bottom: 0;
}

@media (hover: hover) {
  .fs-datalist__row:hover {
    background: var(--fs-color-surface-hover);
  }
}

/*
 * A header cell that carries an icon. The glyph is grey and sits before the
 * name, so a wide result can be scanned by column shape instead of by reading
 * six uppercase words. Numeric columns align their whole cell to the right —
 * `text-align` cannot do that once the cell is a flex row.
 */
.fs-datalist__col {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.fs-datalist__col--numeric {
  justify-content: flex-end;
}

.fs-datalist__col-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentcolor;
  mask-image: var(--fs-col-icon, none);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 14px 14px;
  -webkit-mask-image: var(--fs-col-icon, none);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 14px 14px;
}

/*
 * Money in a result row is data, not decoration. It keeps tabular figures so a
 * column of amounts lines up digit under digit, and it takes a semantic tone
 * only where the number states a confirmed business fact: a realised sale is
 * money earned, an overdue debt is money late. A plain count never takes one —
 * colouring every number turns the palette into striping.
 */
.fs-datalist__amount {
  color: var(--fs-amount-tone, var(--fs-color-text));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fs-datalist__amount--success {
  --fs-amount-tone: var(--fs-color-success-text);
}

.fs-datalist__amount--warning {
  --fs-amount-tone: var(--fs-color-warning-text);
}

.fs-datalist__amount--danger {
  --fs-amount-tone: var(--fs-color-danger-text);
}

.fs-datalist__amount--muted {
  --fs-amount-tone: var(--fs-color-text-secondary);
}

/*
 * An expandable record: <details class="fs-datalist__group"> with the row as
 * its <summary> and the detail below it. Every list that opens a row needs the
 * same four things — a pointer, a chevron, an opened tint and a recessed body —
 * and each feature used to redraw all four, which is why one list opened blue
 * and the next one warm grey. Opened is the product's one selection state.
 */
.fs-datalist__group > summary {
  cursor: pointer;
  list-style: none;
}

.fs-datalist__group > summary::-webkit-details-marker {
  display: none;
}

.fs-datalist__group[open] > summary {
  color: var(--fs-color-selected-text);
  background: var(--fs-color-selected);
}

/* Points right when closed and down when open, like every other disclosure. */
.fs-datalist__chevron {
  width: 8px;
  height: 8px;
  justify-self: end;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.fs-datalist__group[open] .fs-datalist__chevron {
  transform: rotate(225deg);
}

/*
 * The opened body. It is recessed, not another card: a child list floating on
 * white reads as a second record rather than as the inside of this one.
 */
.fs-datalist__nested {
  padding: var(--fs-space-3) var(--fs-space-4);
  background: var(--fs-color-selected-subtle);
  border-bottom: 1px solid var(--fs-color-border-subtle);
}

/*
 * Record state as a surface. A list of statuses is read by scanning, and a word
 * in a badge is found only after the eye has already stopped on the row. The
 * tone is therefore said twice on purpose — once in the badge, once as a rail
 * and a wash — but it stays a wash: the tint is mixed far enough into the
 * surface that the figures on top keep their contrast, and the saturated part
 * is three pixels wide at the edge.
 *
 * The rail is an inset shadow, not a border, so a toned row keeps exactly the
 * geometry of an untoned one and columns never shift by three pixels between
 * two records. Opening the record deepens its own tone instead of replacing it
 * with the neutral selection colour: an opened record is still that record.
 */
.fs-datalist__group[data-tone] {
  --fs-row-tone-line: var(--fs-color-border);
  --fs-row-tone-surface: var(--fs-color-surface-subtle);
  --fs-row-tone-open: var(--fs-color-surface-hover);
  --fs-row-tone-nested: var(--fs-color-surface-subtle);
}

.fs-datalist__group[data-tone="primary"] {
  --fs-row-tone-line: var(--fs-color-primary);
  --fs-row-tone-surface: color-mix(in srgb, var(--fs-color-primary-subtle) 55%, var(--fs-color-surface));
  --fs-row-tone-open: color-mix(in srgb, var(--fs-color-primary-subtle) 88%, var(--fs-color-surface));
  --fs-row-tone-nested: color-mix(in srgb, var(--fs-color-primary-subtle) 42%, var(--fs-color-surface));
}

.fs-datalist__group[data-tone="success"] {
  --fs-row-tone-line: var(--fs-color-success);
  --fs-row-tone-surface: color-mix(in srgb, var(--fs-color-success-subtle) 55%, var(--fs-color-surface));
  --fs-row-tone-open: color-mix(in srgb, var(--fs-color-success-subtle) 88%, var(--fs-color-surface));
  --fs-row-tone-nested: color-mix(in srgb, var(--fs-color-success-subtle) 42%, var(--fs-color-surface));
}

.fs-datalist__group[data-tone="warning"] {
  --fs-row-tone-line: var(--fs-color-warning);
  --fs-row-tone-surface: color-mix(in srgb, var(--fs-color-warning-subtle) 55%, var(--fs-color-surface));
  --fs-row-tone-open: color-mix(in srgb, var(--fs-color-warning-subtle) 88%, var(--fs-color-surface));
  --fs-row-tone-nested: color-mix(in srgb, var(--fs-color-warning-subtle) 42%, var(--fs-color-surface));
}

.fs-datalist__group[data-tone="danger"] {
  --fs-row-tone-line: var(--fs-color-danger);
  --fs-row-tone-surface: color-mix(in srgb, var(--fs-color-danger-subtle) 55%, var(--fs-color-surface));
  --fs-row-tone-open: color-mix(in srgb, var(--fs-color-danger-subtle) 88%, var(--fs-color-surface));
  --fs-row-tone-nested: color-mix(in srgb, var(--fs-color-danger-subtle) 42%, var(--fs-color-surface));
}

/* A record that does not expand carries the same tone tokens on the row itself. */
.fs-datalist__row[data-tone] {
  --fs-row-tone-line: var(--fs-color-border);
  --fs-row-tone-surface: var(--fs-color-surface-subtle);
}

.fs-datalist__row[data-tone="primary"] {
  --fs-row-tone-line: var(--fs-color-primary);
  --fs-row-tone-surface: color-mix(in srgb, var(--fs-color-primary-subtle) 55%, var(--fs-color-surface));
}

.fs-datalist__row[data-tone="success"] {
  --fs-row-tone-line: var(--fs-color-success);
  --fs-row-tone-surface: color-mix(in srgb, var(--fs-color-success-subtle) 55%, var(--fs-color-surface));
}

.fs-datalist__row[data-tone="warning"] {
  --fs-row-tone-line: var(--fs-color-warning);
  --fs-row-tone-surface: color-mix(in srgb, var(--fs-color-warning-subtle) 55%, var(--fs-color-surface));
}

.fs-datalist__row[data-tone="danger"] {
  --fs-row-tone-line: var(--fs-color-danger);
  --fs-row-tone-surface: color-mix(in srgb, var(--fs-color-danger-subtle) 55%, var(--fs-color-surface));
}

.fs-datalist__group[data-tone] > summary,
.fs-datalist__row[data-tone] {
  background: var(--fs-row-tone-surface);
  box-shadow: inset 3px 0 0 var(--fs-row-tone-line);
}

@media (hover: hover) {
  .fs-datalist__group[data-tone] > summary:hover {
    background: color-mix(in srgb, var(--fs-row-tone-open) 70%, var(--fs-color-surface-hover));
  }
}

.fs-datalist__group[data-tone][open] > summary {
  color: var(--fs-color-text);
  background: var(--fs-row-tone-open);
}

.fs-datalist__group[data-tone] > .fs-datalist__nested {
  background: var(--fs-row-tone-nested);
  box-shadow: inset 3px 0 0 var(--fs-row-tone-line);
}

/*
 * Row actions. One place decides where a record's actions sit, so the same
 * pencil is in the same corner on every list: last column on desktop, and on a
 * card the bottom-right, where the thumb already is. The column title names it
 * on desktop; inside the card the icon names itself and a repeated "Дії" label
 * above a single button is a word per record that reports nothing.
 */
.fs-datalist__row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--fs-space-2);
  min-width: 0;
}

/*
 * Nested list. Compact by design — it repeats the parent's anatomy one level
 * down and must not compete with it for weight.
 */
.fs-nested-list {
  overflow: hidden;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.fs-nested-list__head,
.fs-nested-list__row {
  display: grid;
  gap: var(--fs-space-3);
  align-items: center;
  padding: var(--fs-space-2) var(--fs-space-3);
}

.fs-nested-list__head {
  color: var(--fs-color-text-secondary);
  background: var(--fs-color-table-header);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fs-nested-list__row + .fs-nested-list__row {
  border-top: 1px solid var(--fs-color-border-subtle);
}

/* Shared status marker. A feature chooses only the semantic tone; Stoneware owns the palette and shape. */
.fs-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 9px;
  color: var(--fs-badge-text, var(--fs-color-text-secondary));
  background: var(--fs-badge-surface, var(--fs-color-surface-subtle));
  border: 1px solid var(--fs-badge-line, var(--fs-color-border-subtle));
  border-radius: 999px;
  font-size: var(--fs-text-xs);
  font-weight: 600;
  line-height: 1.2;
}

.fs-badge--compact {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 10px;
}

.fs-badge[data-tone="primary"] {
  --fs-badge-text: var(--fs-color-primary-text);
  --fs-badge-surface: var(--fs-color-primary-subtle);
  --fs-badge-line: var(--fs-color-primary-line);
}

.fs-badge[data-tone="success"] {
  --fs-badge-text: var(--fs-color-success-text);
  --fs-badge-surface: var(--fs-color-success-subtle);
  --fs-badge-line: var(--fs-color-success-line);
}

.fs-badge[data-tone="warning"] {
  --fs-badge-text: var(--fs-color-warning-text);
  --fs-badge-surface: var(--fs-color-warning-subtle);
  --fs-badge-line: var(--fs-color-warning-line);
}

.fs-badge[data-tone="danger"] {
  --fs-badge-text: var(--fs-color-danger-text);
  --fs-badge-surface: var(--fs-color-danger-subtle);
  --fs-badge-line: var(--fs-color-danger-line);
}

.fs-datalist__empty {
  padding: var(--fs-space-4);
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  text-align: center;
}

/* Search/filter composition shared by every result page. */
.fs-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--fs-space-3);
}

.fs-filters-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--fs-space-2);
  margin-top: var(--fs-space-3);
}

.fs-filters-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
  min-width: 0;
}

.fs-filters-chips[hidden] {
  display: none;
}

.fs-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  color: var(--fs-color-primary-text);
  background: var(--fs-color-primary-subtle);
  border: 1px solid var(--fs-color-primary-line);
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-text-xs);
  font-weight: 600;
}

button.fs-filter-chip {
  cursor: pointer;
}

button.fs-filter-chip::after {
  color: currentcolor;
  content: "×";
  font-size: var(--fs-text-sm);
  line-height: 1;
}

button.fs-filter-chip:focus-visible {
  outline: none;
  box-shadow: var(--fs-focus-ring);
}

.fs-result-pagination {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
}

.fs-result-pagination:empty {
  display: none;
}

/*
 * Summary strip. Every page that reports counts uses this one component: the users
 * page and the tasks page each grew their own before, which is why one had icons
 * and room and the other had neither.
 *
 * A KPI is the first thing read on a page, so it gets height. The number carries
 * the strip; the icon only names the metric, so it is a quiet grey outline, the
 * same weight as the label beside it. Solid coloured tiles put four saturated
 * blocks above the data and made the markers louder than the figures they mark.
 * Where a metric really has a state, it is said in the row below — a badge, a
 * progress track, an amount tone — not in a swatch next to its name.
 */
.fs-summary {
  display: grid;
  padding: 0;
  overflow: hidden;
  background: var(--fs-color-panel-summary);
}

/* Like a section label: the block names itself on the left, its metadata — how
   fresh the figures are — sits on the right instead of trailing the name. */
.fs-summary__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-3);
  min-height: 42px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--fs-color-border-subtle);
}

.fs-summary__head > span {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Metadata is not a heading: it keeps sentence case, exactly as in a panel label. */
.fs-summary__head > .fs-summary__meta {
  color: var(--fs-color-text-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.fs-summary__header-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
  min-width: 0;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  font-weight: 400;
}

.fs-summary__header-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--fs-space-2);
  min-width: 0;
}

.fs-summary__breakdown-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 10px 44px 10px 18px;
  color: var(--fs-color-text-secondary);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fs-color-border-subtle);
  font: inherit;
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.fs-summary__breakdown-toggle .fs-page-block__chevron {
  right: 18px;
}

.fs-summary__breakdown-toggle[aria-expanded="true"] .fs-page-block__chevron {
  margin-top: -2px;
  transform: rotate(225deg);
}

@media (hover: hover) {
  .fs-summary__breakdown-toggle:hover {
    background: var(--fs-color-surface-hover);
  }
}

.fs-summary__breakdown-toggle:focus-visible {
  outline: 0;
  box-shadow: inset var(--fs-focus-ring);
}

/*
 * Metadata is one quiet line of separate facts. The caller usually hands the
 * fragment a single wrapper holding them, so the separator is placed between
 * siblings at either level — otherwise a wrapped group renders as one run-on
 * sentence: "20 запитів показано 4 дані станом на …".
 */
.fs-summary__header-meta > * + *::before,
.fs-summary__header-meta > :only-child > * + *::before {
  margin-right: var(--fs-space-2);
  color: var(--fs-color-border);
  content: "·";
}

.fs-summary__header-meta > :only-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
  min-width: 0;
}

.fs-summary__body {
  display: grid;
}

/*
 * Controls that scope the figures stand above them as a quiet strip, not as a
 * sunken form: a filled box here turned the block for reading into a second
 * panel for typing.
 */
.fs-summary__scope {
  padding: 10px 18px;
  border-bottom: 1px solid var(--fs-color-border-subtle);
}

/*
 * The metrics are one strip on the panel's own surface, divided by hairlines.
 * Boxed tiles made the block read as four cards stacked inside a fifth: the
 * frame around each figure weighed more than the figure, and a summary is
 * there to be read, not to be counted.
 */
.fs-summary__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fs-space-2);
  padding: var(--fs-space-3);
}

.fs-summary__head--with-tools {
  align-items: flex-end;
}

.fs-summary__tools {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--fs-space-2);
  min-width: 0;
}

.fs-summary__item {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 72px;
  padding: 10px 18px;
  background: var(--fs-color-surface-subtle);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.fs-summary__item[data-tone] {
  --fs-summary-tone-line: var(--fs-color-primary-line);
  --fs-summary-tone-surface: var(--fs-color-primary-subtle);
  background: var(--fs-summary-tone-surface);
  border-color: var(--fs-summary-tone-line);
}

.fs-summary__item[data-tone="primary"] {
  --fs-summary-tone: var(--fs-color-primary-text);
  --fs-summary-tone-line: var(--fs-color-primary-line);
  --fs-summary-tone-surface: var(--fs-color-primary-subtle);
}

.fs-summary__item[data-tone="success"] {
  --fs-summary-tone: var(--fs-color-success-text);
  --fs-summary-tone-line: var(--fs-color-success-line);
  --fs-summary-tone-surface: var(--fs-color-success-subtle);
}

.fs-summary__item[data-tone="warning"] {
  --fs-summary-tone: var(--fs-color-warning-text);
  --fs-summary-tone-line: var(--fs-color-warning-line);
  --fs-summary-tone-surface: var(--fs-color-warning-subtle);
}

.fs-summary__item[data-tone="danger"] {
  --fs-summary-tone: var(--fs-color-danger-text);
  --fs-summary-tone-line: var(--fs-color-danger-line);
  --fs-summary-tone-surface: var(--fs-color-danger-subtle);
}

.fs-summary__item[data-tone="sand"] {
  --fs-summary-tone: var(--fs-color-rust);
  --fs-summary-tone-line: var(--fs-palette-23);
  --fs-summary-tone-surface: var(--fs-color-tan);
}

.fs-summary__item[data-tone="sage"] {
  --fs-summary-tone: var(--fs-color-text);
  --fs-summary-tone-line: var(--fs-palette-19);
  --fs-summary-tone-surface: color-mix(in srgb, var(--fs-palette-19) 38%, var(--fs-color-surface));
}

/*
 * The name of a metric has no state, so its glyph stays the grey of the label.
 * The tone belongs to the figure, and only where the figure states a confirmed
 * business fact — money earned, work overdue — exactly as an amount in a result
 * row. Four tinted plates above a table made the markers louder than the data.
 */
.fs-summary__item[data-tone] .fs-summary__icon {
  color: var(--fs-color-text-secondary);
}

.fs-summary__item[data-tone] .fs-summary__value {
  color: var(--fs-summary-tone, var(--fs-color-text));
}

/* One aggregate may lead the strip. It leads by the size of its figure, not by
   a frame around it: a border would bring the plate back for a single metric. */
.fs-summary__item--emphasis .fs-summary__value {
  font-size: 28px;
}

.fs-summary__label {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
 * Masked, not <img>: the icon files carry their own stroke colour, so the same
 * strip would come out part black, part blue, part dark red. The metric's name
 * has one colour, and its glyph takes that colour.
 */
.fs-summary__icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentcolor;
  mask-image: var(--fs-summary-icon, none);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 16px 16px;
  -webkit-mask-image: var(--fs-summary-icon, none);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px 16px;
}

/* A KPI slot can also hold a name, not only a number, so it breaks rather than
   overflows the item beside it. */
.fs-summary__value {
  color: var(--fs-color-text);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

/* The unit is not part of the number: it stays quiet and does not set the size. */
.fs-summary__value small {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  font-weight: 500;
  letter-spacing: 0;
}

/*
 * The breakdown continues the strip one step quieter: same surface, same
 * rhythm, a hairline above it. A bordered box here made a second panel inside
 * the summary, and the caller may wrap its rows in a slot element, so that
 * wrapper dissolves instead of becoming a layout of its own.
 */
.fs-summary__breakdown {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--fs-color-border-subtle);
}

.fs-summary__breakdown > div:not([class]) {
  display: contents;
}

.fs-summary__breakdown[hidden] {
  display: none;
}

.fs-summary__breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fs-space-3);
  min-height: 44px;
  padding: 10px 18px;
  flex: 1 1 210px;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
}

/*
 * Striping said "selected" in a product where a tinted row means exactly that.
 * Rows are told apart by the hairline between them, like every other list.
 */
.fs-summary__breakdown-row + .fs-summary__breakdown-row {
  border-left: 1px solid var(--fs-color-border-subtle);
}

.fs-summary__breakdown-value {
  color: var(--fs-color-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fs-summary__breakdown-row[data-tone="success"] .fs-summary__breakdown-value {
  color: var(--fs-color-success-text);
}

.fs-summary__breakdown-row[data-tone="warning"] .fs-summary__breakdown-value {
  color: var(--fs-color-warning-text);
}

.fs-summary__breakdown-row[data-tone="danger"] .fs-summary__breakdown-value {
  color: var(--fs-color-danger-text);
}

@media (max-width: 760px) {
  .fs-summary__head--with-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .fs-summary__tools {
    display: block;
    width: 100%;
  }

  .fs-summary__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: var(--fs-space-2);
    padding: var(--fs-space-3);
  }

  /* Mobile summaries are compact decision tiles, not a desktop strip stacked vertically. */
  .fs-summary__item {
    align-content: start;
    gap: var(--fs-space-2);
    min-height: 84px;
    padding: 10px 12px;
  }

  .fs-summary__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /*
   * Metadata starts on the title's own line and, when it is longer than the
   * remaining width, keeps running underneath the title instead of moving to a
   * second block below it. Stacked, the header spent two full lines to say
   * "ПІДСУМОК" and one quiet sentence, and the sentence read as a heading of
   * its own. The title is floated for exactly that reason: text flows beside a
   * float on the first line and under it on the next, which is the behaviour
   * asked for and the one no flex or grid arrangement produces.
   */
  .fs-summary__head {
    display: block;
    padding-block: 8px;
  }

  .fs-summary__head::after {
    display: block;
    clear: both;
    content: "";
  }

  .fs-summary__head > span:first-child {
    float: left;
    margin-right: var(--fs-space-2);
    line-height: 18px;
  }

  .fs-summary__header-side,
  .fs-summary__header-meta,
  .fs-summary__header-meta > :only-child {
    display: block;
    width: auto;
    min-width: 0;
    line-height: 18px;
    text-align: left;
  }

  /* Inline flow has no gap, so the separator carries the space on both sides. */
  .fs-summary__header-meta > * + *::before,
  .fs-summary__header-meta > :only-child > * + *::before {
    margin-right: var(--fs-space-2);
    margin-left: var(--fs-space-2);
  }

  .fs-summary__scope {
    padding: 0;
  }

  .fs-summary__breakdown-row {
    flex: 1 1 100%;
  }

  .fs-summary__breakdown-row + .fs-summary__breakdown-row {
    border-top: 1px solid var(--fs-color-border-subtle);
    border-left: 0;
  }

  .fs-summary__value {
    font-size: 22px;
  }
}

.fs-scope-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 4px 10px;
  color: var(--fs-color-primary-hover);
  background: color-mix(in srgb, var(--fs-color-primary) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--fs-color-primary) 25%, var(--fs-color-border));
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}



.fs-section-head h2 {
  color: var(--fs-color-text);
  font-size: var(--fs-text-lg);
  font-weight: 700;
}

.fs-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.fs-section-head__main {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}

.fs-section-head p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  font-weight: 500;
}

.fs-checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--fs-color-text-secondary);
  font-size: 12px;
}

.fs-checkbox-field {
  align-items: center;
  min-height: var(--fs-control-height);
}

.fs-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--fs-space-2);
}

.fs-form-section {
  overflow: hidden;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.fs-form-section__body {
  display: grid;
  gap: var(--fs-space-3);
  padding: var(--fs-space-4);
}

.fs-empty-state {
  text-align: center;
}

.fs-empty-state h2 {
  font-size: 16px;
  font-weight: 700;
}

.fs-empty-state p {
  margin-top: 4px;
  color: var(--fs-color-text-secondary);
  font-size: 12px;
}

.fs-error-state {
  padding-block: 32px;
}

.fs-error-reference {
  overflow-wrap: anywhere;
}

.fs-error-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

@media (max-width: 600px) {
  .fs-page-heading {
    font-size: 23px;
  }

  .fs-page-heading-actions {
    justify-content: flex-end;
    width: auto;
  }

  .fs-page-heading-card {
    flex-wrap: wrap;
  }

  .fs-page-heading-card > .fs-page-heading {
    flex: 1 1 auto;
    min-width: 0;
  }

  .fs-section-head {
    flex-direction: column;
  }

  .fs-scope-badge {
    white-space: normal;
  }
}