/* Freya — компоненти «Вишиванка». Джерело: дизайн-система Freya (скіл freya-design). Підключати після tokens.css. */
@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@400;500;700;800&display=swap");

/* ---------- База ---------- */
html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; }
body { margin: 0; background: var(--bg); color: var(--label); font-size: 15px; line-height: 22px; }
.fr-num { font-variant-numeric: tabular-nums; }
.fr-muted { color: var(--label-secondary); }
.fr-link { color: var(--accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fr-link:hover { text-decoration-thickness: 2px; }
:where(.fr-btn, .fr-input, .fr-seg button, .fr-switch, .fr-side-item, .fr-topnav a, .fr-row--link, .fr-link):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
@media (prefers-reduced-motion: reduce) { .fr-btn, .fr-input, .fr-seg button, .fr-switch, .fr-switch::after, .fr-row--link, .fr-side-item { transition: none !important; } }

/* ---------- Орнаментна смуга ---------- */
.fr-stitch { position: relative; height: 16px; overflow: hidden; }
.fr-stitch::before, .fr-stitch::after { content: ""; position: absolute; inset: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Cpath fill-rule='evenodd' d='M8 1.5 14.5 8 8 14.5 1.5 8Z M6.5 6.5h3v3h-3z'/%3E%3C/svg%3E") 0 0 / 32px 16px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Cpath fill-rule='evenodd' d='M8 1.5 14.5 8 8 14.5 1.5 8Z M6.5 6.5h3v3h-3z'/%3E%3C/svg%3E") 0 0 / 32px 16px repeat-x; }
.fr-stitch::before { background: var(--blue); }
.fr-stitch::after { background: var(--label); -webkit-mask-position: 16px 0; mask-position: 16px 0; }
.fr-stitch--thin { height: 10px; transform-origin: left; }

/* ---------- Позначки етапів ---------- */
.fr-xs { display: inline-block; width: 22px; height: 22px; vertical-align: middle; border-radius: var(--radius-sm); position: relative; }
.fr-xs--done::before { content: ""; position: absolute; inset: 3px; background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.6 3.6L13.5 4.2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.6 3.6L13.5 4.2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.fr-xs--work::before, .fr-xs--todo::before { content: ""; position: absolute; inset: 3px; }
.fr-xs--work::before { background: var(--progress);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 1.8h9M3.5 14.2h9M4.8 1.8v1.4c0 1.9 3.2 3 3.2 4.8s-3.2 2.9-3.2 4.8v1.4M11.2 1.8v1.4c0 1.9-3.2 3-3.2 4.8s3.2 2.9 3.2 4.8v1.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.9 12.9 8 11.1l2.1 1.8z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 1.8h9M3.5 14.2h9M4.8 1.8v1.4c0 1.9 3.2 3 3.2 4.8s-3.2 2.9-3.2 4.8v1.4M11.2 1.8v1.4c0 1.9-3.2 3-3.2 4.8s3.2 2.9 3.2 4.8v1.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.9 12.9 8 11.1l2.1 1.8z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; }
.fr-xs--alert { background: var(--red); }
.fr-xs--alert::after { content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--on-red); font-weight: 800; font-size: 15px; line-height: 1; }
.fr-xs--todo::before { background: var(--label-tertiary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.6 13.4 8 8 13.4 2.6 8Z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.6 13.4 8 8 13.4 2.6 8Z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.fr-xs-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: 13px; line-height: 18px; color: var(--label-secondary); }
.fr-xs-legend button { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: var(--space-2); height: 30px; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.fr-xs-legend button:hover:not(:disabled) { color: var(--label); background: var(--fill); }
.fr-xs-legend button[aria-pressed="true"] { color: var(--label); background: var(--fill-selected); font-weight: 700; box-shadow: inset 0 0 0 1px var(--label); }
.fr-xs-legend button:disabled { cursor: default; opacity: .55; }
.fr-xs-legend button:focus-visible { outline: 2px solid var(--label); outline-offset: 1px; }
.fr-xs-legend__n { font-weight: 700; color: var(--label); font-variant-numeric: tabular-nums; }
.fr-xs-legend .fr-xs { width: 16px; height: 16px; }
.fr-xs-legend .fr-xs::before { inset: 1px; }
.fr-xs-legend .fr-xs--alert::after { font-size: 11px; }
.fr-xs-reset { appearance: none; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }

/* ---------- Кулька Фреї ---------- */
.fr-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: block; object-fit: cover; }
.fr-avatar--sm { width: 32px; height: 32px; }

/* ---------- Знак «Засіяне поле» ---------- */
.fr-mark { width: 28px; height: 28px; flex: none; display: block; }
.fr-mark__b { fill: var(--blue); }
.fr-mark__k { fill: var(--label); }
.fr-avatar--lg { width: 64px; height: 64px; }
.fr-avatar--xl { width: 160px; height: 160px; }

/* ---------- Кнопка ---------- */
.fr-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-md); font: inherit; font-size: 15px; font-weight: 700; line-height: 20px; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color .15s ease; }
.fr-btn[disabled], .fr-btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.fr-btn--primary { background: var(--btn-primary); color: var(--on-btn-primary); }
.fr-btn--primary:hover { background: var(--btn-primary-hover); }
.fr-btn--strong { background: var(--btn-strong); color: var(--on-btn-strong); }
.fr-btn--strong:hover { background: var(--btn-strong-hover); }
.fr-btn--blue { background: var(--blue); color: var(--on-blue); }
.fr-btn--blue:hover { background: var(--blue-hover); }
.fr-btn--red { background: var(--red); color: var(--on-red); }
.fr-btn--red:hover { background: var(--red-hover); }
.fr-btn--secondary { background: var(--fill); color: var(--label); }
.fr-btn--secondary:hover { background: var(--fill-hover); }
.fr-btn--plain { background: transparent; color: var(--accent-text); padding: 0 var(--space-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fr-btn--plain:hover { text-decoration-thickness: 2px; }
.fr-btn--danger { background: var(--danger-tint); color: var(--danger); }
.fr-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.fr-btn--lg { height: 48px; padding: 0 var(--space-6); font-size: 16px; }

/* ---------- Поле вводу ---------- */
.fr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fr-label { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--label); }
.fr-input { appearance: none; box-sizing: border-box; width: 100%; height: 40px; padding: 0 var(--space-3); border: 1px solid var(--separator); border-radius: var(--radius-md); background: var(--surface); color: var(--label); font: inherit; font-size: 15px; line-height: 20px; transition: border-color .15s ease, box-shadow .15s ease; }
.fr-input::placeholder { color: var(--label-tertiary); }
.fr-input:hover { border-color: var(--label-tertiary); }
.fr-input:focus { outline: none; border-color: var(--label); box-shadow: 0 0 0 3px var(--focus); }
.fr-input--num { text-align: right; font-variant-numeric: tabular-nums; }
select.fr-input { padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--label-secondary) 50%), linear-gradient(135deg, var(--label-secondary) 50%, transparent 50%); background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.fr-hint { font-size: 13px; line-height: 18px; color: var(--label-secondary); }
.fr-field--error .fr-input { border-color: var(--danger); }
.fr-field--error .fr-hint { color: var(--danger); }

/* ---------- Сегментований контрол ---------- */
.fr-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-md); background: var(--fill); }
.fr-seg button { appearance: none; border: 0; background: transparent; color: var(--label-secondary); font: inherit; font-size: 13px; font-weight: 700; line-height: 18px; height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-sm); cursor: pointer; }
.fr-seg button:hover { color: var(--label); }
.fr-seg button[aria-pressed="true"] { background: var(--fill-selected); color: var(--label); box-shadow: 0 1px 2px rgba(26,26,26,0.12); }

/* ---------- Перемикач ---------- */
.fr-switch { appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: var(--radius-pill); background: var(--fill-hover); cursor: pointer; transition: background-color .2s ease; }
.fr-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform .2s ease; }
.fr-switch:checked { background: var(--blue); }
.fr-switch:checked::after { transform: translateX(18px); }
.fr-switch:disabled { opacity: .4; cursor: default; }

/* ---------- Статус ---------- */
.fr-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; background: var(--fill); color: var(--label); }
.fr-status--progress { background: var(--warning-tint); color: var(--warning); }
.fr-status--success { background: var(--success-tint); color: var(--success); }
.fr-status--warning { background: var(--warning-tint); color: var(--warning); }
.fr-status--danger { background: var(--danger-tint); color: var(--danger); }
.fr-status--danger::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 1px; background: var(--red); transform: rotate(45deg); }

/* ---------- Картка ---------- */
.fr-card { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-6); }
.fr-card--ui { padding: var(--space-5); }
.fr-card__eyebrow { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--accent-text); margin: 0 0 var(--space-1); }
.fr-card__title { font-size: 19px; line-height: 26px; font-weight: 700; margin: 0; }
.fr-card__text { font-size: 15px; line-height: 22px; color: var(--label-secondary); margin: var(--space-2) 0 0; }
.fr-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ---------- Найближчий строк ---------- */
.fr-deadline { background: var(--deadline); color: var(--on-deadline); border-radius: var(--radius-md); padding: var(--space-6); }
.fr-deadline__label { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; }
.fr-deadline__date { margin: var(--space-1) 0 0; font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; }
.fr-deadline__note { margin: var(--space-1) 0 0; font-size: 15px; line-height: 22px; }

/* ---------- Три справи на сьогодні ---------- */
.fr-today { background: var(--linen); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: start; }
.fr-today__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fr-today__title { margin: 0; font-size: 19px; line-height: 26px; font-weight: 700; }
.fr-today__sub { margin: 0; font-size: 15px; line-height: 22px; color: var(--label-secondary); }
.fr-today__list { grid-column: 2; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.fr-today__item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--separator); }
.fr-today__item .fr-xs { flex: none; }
.fr-today__text { flex: 1; min-width: 0; }
.fr-today__text strong { font-weight: 700; }
.fr-today__note { display: block; font-size: 13px; line-height: 18px; color: var(--label-secondary); }
@media (max-width: 640px) { .fr-today { grid-template-columns: minmax(0, 1fr); } .fr-today__list { grid-column: 1; } .fr-today__item { flex-wrap: wrap; } }

/* ---------- Згрупований список ---------- */
.fr-list { margin: 0; padding: 0; list-style: none; background: var(--surface); border-top: 1px solid var(--separator); }
.fr-list-header { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--label); padding: 0 0 var(--space-2); }
.fr-row { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-3) 0; box-sizing: border-box; color: var(--label); text-decoration: none; border-bottom: 1px solid var(--separator); }
.fr-row--link { cursor: pointer; }
.fr-row--link:hover .fr-row__title { color: var(--accent-text); }
.fr-row--selected { background: var(--accent-tint); padding-left: var(--space-3); padding-right: var(--space-3); }
.fr-row__main { flex: 1; min-width: 0; }
.fr-row__title { font-size: 15px; line-height: 22px; font-weight: 700; }
.fr-row__sub { font-size: 13px; line-height: 18px; color: var(--label-secondary); }
.fr-row__value { font-size: 15px; line-height: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-row--link::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px; border-top: 2px solid var(--label-tertiary); border-right: 2px solid var(--label-tertiary); transform: rotate(45deg); }

/* ---------- Таблиця ---------- */
.fr-table-wrap { overflow-x: auto; }
.fr-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; color: var(--label); }
.fr-table th { text-align: left; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--label-secondary); padding: 0 var(--space-3) var(--space-3) 0; white-space: nowrap; }
.fr-table td { padding: var(--space-4) var(--space-3) var(--space-4) 0; border-top: 1px solid var(--separator); vertical-align: middle; }
.fr-table tbody tr:last-child td { border-bottom: 1px solid var(--separator); }
.fr-table tbody tr:hover td { background: var(--linen); }
.fr-table .fr-num, .fr-table th.fr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
.fr-table td.fr-num { font-weight: 700; }
.fr-table .fr-stage { text-align: center; width: 76px; padding-left: 0; padding-right: 0; }
.fr-table tfoot td { font-weight: 800; border-top: 2px solid var(--label); border-bottom: 0; }
.fr-table__name { font-weight: 700; color: var(--label); text-decoration: none; }
a.fr-table__name:hover { color: var(--accent-text); }
.fr-table__sub { display: block; font-size: 13px; line-height: 18px; color: var(--label-secondary); }
.fr-table__sub--alert { color: var(--danger); }

/* ---------- Верхня панель ---------- */
.fr-topbar { position: sticky; top: 0; z-index: 10; background: var(--material); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--separator); }
.fr-topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-6); padding: var(--space-4) var(--space-16) 0; }
.fr-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--label); text-decoration: none; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; }
.fr-topnav { order: 3; flex: 1 1 100%; display: flex; flex-wrap: nowrap; gap: var(--space-6); justify-content: flex-start; overflow-x: auto; margin-top: var(--space-3); }
.fr-topnav { scrollbar-width: none; }
.fr-topnav::-webkit-scrollbar { display: none; }
.fr-topnav a { padding: 8px 0 10px; color: var(--label-secondary); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; }
.fr-topnav a:hover { color: var(--label); }
.fr-topnav a[aria-current="page"] { color: var(--label); border-bottom-color: var(--blue); }
@media (max-width: 900px) { .fr-topbar__inner { padding: var(--space-3) var(--space-4) 0; } }
/* сумісність зі старою розміткою: .fr-nav > .fr-wordmark + .fr-nav__links + кнопка */
.fr-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-6); background: var(--material); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--separator); }
.fr-nav__links { display: flex; gap: var(--space-6); flex: 1; }
.fr-nav__links a { padding: 6px 0; color: var(--label-secondary); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; }
.fr-nav__links a[aria-current="page"] { color: var(--label); border-bottom-color: var(--blue); }
@media (max-width: 640px) { .fr-nav { padding: var(--space-3) var(--space-4); gap: var(--space-4); } .fr-nav__links { display: none; } }
.fr-wordmark { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--label); text-decoration: none; }

/* ---------- Бічна панель ---------- */
.fr-sidebar { display: flex; flex-direction: column; gap: 2px; width: 232px; padding: var(--space-3); box-sizing: border-box; }
.fr-sidebar__group { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--label-secondary); padding: var(--space-4) var(--space-3) var(--space-1); }
.fr-side-item { display: flex; align-items: center; gap: var(--space-3); height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--label-secondary); text-decoration: none; font-weight: 500; }
.fr-side-item:hover { color: var(--label); background: var(--linen); }
.fr-side-item[aria-current="page"] { color: var(--label); font-weight: 700; background: var(--accent-tint); }
.fr-side-item__count { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent-text); }
.fr-side-item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Повідомлення ---------- */
.fr-notice { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--linen); color: var(--label); font-size: 15px; line-height: 22px; }
.fr-notice__title { font-weight: 700; }
.fr-notice__mark { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 1px; transform: rotate(45deg); background: var(--label); }
.fr-notice--success { background: var(--success-tint); } .fr-notice--success .fr-notice__mark { background: var(--success); }
.fr-notice--warning { background: var(--warning-tint); } .fr-notice--warning .fr-notice__mark { background: var(--warning); }
.fr-notice--danger { background: var(--danger-tint); } .fr-notice--danger .fr-notice__mark { background: var(--danger); }

/* ---------- Показник ---------- */
.fr-stat { display: flex; flex-direction: column; gap: 2px; }
.fr-stat__label { font-size: 13px; line-height: 18px; color: var(--label-secondary); }
.fr-stat__value { font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fr-stat__unit { font-size: 17px; font-weight: 500; color: var(--label-secondary); margin-left: 4px; }
.fr-stat__note { font-size: 13px; line-height: 18px; color: var(--label-secondary); }
.fr-stat__note--success { color: var(--success); }
.fr-stat__note--danger { color: var(--danger); font-weight: 700; }

/* ---------- Сторінка ---------- */
.fr-page { box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding: var(--space-12) var(--space-16) 72px; display: flex; flex-direction: column; gap: 40px; }
.fr-display { margin: 0; font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.03em; }
.fr-title-1 { margin: 0; font-size: 36px; line-height: 42px; font-weight: 800; letter-spacing: -0.02em; }
.fr-lead { margin: var(--space-2) 0 0; font-size: 17px; line-height: 26px; color: var(--label-secondary); max-width: 64ch; }
.fr-table--stitch { min-width: 760px; }
@media (max-width: 640px) {
  .fr-page { padding: var(--space-6) var(--space-4) var(--space-12); gap: var(--space-8); }
  .fr-display { font-size: 36px; line-height: 40px; }
  .fr-title-1 { font-size: 28px; line-height: 34px; }
  .fr-today { padding: var(--space-4); }
  .fr-today__text { flex: 1 1 calc(100% - 22px - var(--space-4)); }
  .fr-today__text + .fr-btn { margin-left: calc(22px + var(--space-4)); }
}

/* ---------- Етапи одного ФОПа ---------- */
.fr-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--label); border-bottom: 1px solid var(--separator); }
.fr-stages__item { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); min-width: 0; }
.fr-stages__item:first-child { padding-left: 0; }
.fr-stages__item--alert { background: var(--danger-tint); padding-left: var(--space-4) !important; }
.fr-stages__item strong { display: block; }
@media (max-width: 640px) { .fr-stages { grid-template-columns: minmax(0, 1fr); } .fr-stages__item { padding: var(--space-3) 0; border-bottom: 1px solid var(--separator); } .fr-stages__item:last-child { border-bottom: 0; } }