/* Flow 8 · The admin changes a rule (tools/genFlowAdminRule.mjs). Tokens only; prefix .far-. */

/* The hero: actors, start, end */
.far-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); }
.far-hero__item { padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.far-hero dt { margin-bottom: var(--space-1); color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.far-hero dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
@media (max-width: 960px) { .far-hero { grid-template-columns: minmax(0, 1fr); } }

/* Frames: several screens in one step stand one under the other */
.far-stack { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); width: 100%; }
.far-letter { display: flex; justify-content: center; width: 100%; }
.far-stage { position: relative; }

/* Texts in the drawn screens */
.far-muted { color: var(--color-muted); }
.far-wrap, .si-card .t-caption.far-wrap { white-space: normal; overflow: visible; }
.far-foot { margin: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-default); white-space: normal; }
.far-q { margin: 0; color: var(--color-info-text); }
.far-inset { width: auto; margin: 0 var(--space-4) var(--space-2); }

/* The edit card */
.far-fields { grid-template-columns: auto auto minmax(0, 0.8fr) minmax(0, 1.2fr); }
.far-field .c-field__error { display: flex; align-items: center; gap: var(--space-1); margin: 2px 0 0; color: var(--color-danger-text); font-size: var(--text-xs); line-height: var(--leading-xs); }
.far-field .t-caption { white-space: normal; }
.far-now { display: inline-flex; align-items: center; height: var(--size-control); gap: var(--space-1); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.si-edit .si-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* The impact preview */
.far-pv { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0; padding: 0; list-style: none; }
.far-pv > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); }
.far-pv__k { min-width: 168px; color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.far-pv > li.is-new > span:last-child { font-weight: var(--weight-semibold); color: var(--color-warning-text); }
.far-pv--list > li { align-items: center; padding: var(--space-1) 0; border-bottom: 1px solid var(--color-default); }
.far-pv--list > li > span:first-child { min-width: 140px; font-weight: var(--weight-medium); }
.far-pv--list .badge { margin-left: auto; }
.far-pv__all { align-self: flex-start; margin-bottom: var(--space-2); }
.c-alert__body:has(.far-pv) { display: flex; flex-direction: column; }

/* The history: the newest entry */
.ap-list > li.far-newrow { background: var(--color-success-soft); }

/* The toast after a save */
.far-toast { position: absolute; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--space-2); padding: 10px 14px; border-radius: var(--radius-control); background: var(--color-surface-inverted); color: var(--color-inverted); box-shadow: var(--shadow-overlay); font-size: var(--text-sm); }
.far-toast .icon { color: var(--color-success); }
.ap-page:has(> .far-toast) { position: relative; padding-bottom: var(--space-12); }

/* The working-day calendar: the closure being added */
.far-add { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 var(--space-4) var(--space-3); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.far-add__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.far-add .c-alert__text { display: block; }

/* Site › Overview of Heron Fields */
.far-popwrap { position: relative; }
.far-popwrap > .badge { cursor: pointer; }
.far-pop { display: flex; flex-direction: column; gap: var(--space-2); width: 340px; top: calc(100% + var(--space-2)); left: auto; right: 0; }
.far-pop p { margin: 0; }
.far-pop .btn { align-self: flex-start; }
.far-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-4); align-items: start; }
.far-dl { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0 var(--space-4) var(--space-4); }
.far-dl > div { display: flex; flex-direction: column; gap: 2px; }
.far-dl dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.far-actcard .far-tl { border: 0; border-radius: 0; box-shadow: none; }
.far-audit { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-1) 0 0; }

/* Rhys's notification centre, open under the bell */
.far-bell { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.far-notif { position: absolute; top: 52px; right: 168px; z-index: var(--z-header); width: 380px; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-overlay); overflow: hidden; }
.far-notif > header { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-default); }
.far-notif__item { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-warning-soft); }
.far-notif__ic { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-warning-text); }
.far-notif__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-sm); }
.far-notif__text .btn { margin-top: var(--space-1); }

/* The frames of this flow: a little larger than the key screens', as tall as their content */
.far-frame.ap-frame .device--desktop { zoom: 0.82; }
.far-frame .ap { height: auto; min-height: 800px; }
.si-card .t-caption.far-q { white-space: normal; overflow: visible; }
.si-card .t-caption.far-foot { white-space: normal; overflow: visible; }

/* A ringed sidebar item: the number sits inside the item, where the sidebar's scroll area does not cut it */
.far-frame .ap-item[data-flow-target] { outline-offset: -2px; }
.far-frame .ap-item[data-flow-target]::after { top: 50%; left: auto; right: var(--space-2); transform: translateY(-50%); }

/* Step 9: the Monday view's note on the threshold change, on its own under the tabs */
.far-note.sm-changed { margin: var(--space-3) 0 0; max-width: none; }