/* Flow "A Site parked, closed as Dead, and reopened" (tools/genFlowParkDead.mjs). Tokens only. Prefix .fpd- */

/* ── Hero ── */
.fpd-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.fpd-hero__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.fpd-hero__item p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
@media (max-width: 960px) { .fpd-hero { grid-template-columns: minmax(0, 1fr); } }

/* ── Several screens in one step, one under the other ── */
.fpd-stack { display: flex; flex-direction: column; gap: var(--space-5); align-items: center; }
.fpd-fig { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fpd-fig__cap { color: var(--color-muted); }

/* ── Layers over the shell ── */
.fpd-rel { position: relative; }
.fpd-rel .table-wrap { overflow: visible; }
.fpd-scrim { position: absolute; inset: 0; z-index: 3; display: flex; background: var(--color-overlay); }
.fpd-scrim--side { justify-content: flex-end; }
.fpd-scrim--center { align-items: center; justify-content: center; }
.fpd-above { position: relative; z-index: 4; }
.fpd-drawer { width: 420px; height: 100%; max-height: none; border-radius: 0; display: flex; flex-direction: column; }
.fpd-drawer--wide { width: 500px; }
.fpd-drawer__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden; }
.fpd-drawer .c-drawer__foot { justify-content: flex-end; }
.fpd-modal { width: 560px; }

/* ── Form parts ── */
.fpd-form { display: flex; flex-direction: column; gap: var(--space-3); }
.fpd-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fpd-field .c-field__label { font-size: var(--text-xs); }
.fpd-field--wide { grid-column: 1 / -1; }
.fpd-input { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-control-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.fpd-input .icon { flex: none; width: 14px; height: 14px; color: var(--color-subtle); }
.fpd-input--area { min-height: 56px; align-items: flex-start; padding-block: var(--space-2); line-height: var(--leading-sm); }
.fpd-input.is-error { border-color: var(--color-danger); }
.fpd-ph { color: var(--color-subtle); }
.fpd-select .c-select__trigger { width: 100%; }
.fpd-select .c-select__value { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.fpd-hint, .fpd-err { display: flex; align-items: center; gap: var(--space-1); margin: 0; font-size: var(--text-xs); }
.fpd-hint { color: var(--color-muted); }
.fpd-hint .icon, .fpd-err .icon { flex: none; width: 12px; height: 12px; }
.fpd-err { color: var(--color-danger-text); }
.fpd-cap { display: flex; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-primary-soft); color: var(--color-foreground); font-size: var(--text-xs); line-height: var(--leading-sm); }
.fpd-cap .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--color-primary-strong); }
.fpd-cap--warn { background: var(--color-warning-soft); }
.fpd-cap--warn .icon { color: var(--color-warning-text); }

/* The pre-instruction statuses as a choice list */
.fpd-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.fpd-opt { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-control); font-size: var(--text-sm); }
.fpd-opt.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); font-weight: var(--weight-medium); }
.fpd-radio { flex: none; width: 14px; height: 14px; border: 1px solid var(--color-emphasis); border-radius: var(--radius-full); background: var(--color-surface); }
.fpd-opt.is-on .fpd-radio { border: 4px solid var(--color-primary); }

/* An open list under a select (Reason Dead) */
.fpd-list { display: flex; flex-direction: column; margin-top: var(--space-1); padding: var(--space-1); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.fpd-list__opt { display: flex; align-items: center; justify-content: space-between; padding: 4px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); }
.fpd-list__opt.is-on { background: var(--color-primary-soft); color: var(--color-primary-strong); font-weight: var(--weight-medium); }
.fpd-list__opt .icon { width: 12px; height: 12px; }

/* The close panel's warnings */
.fpd-warnbox { padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-warning-soft); font-size: var(--text-xs); }
.fpd-warnbox p { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); color: var(--color-warning-text); font-weight: var(--weight-medium); }
.fpd-warnbox ul { list-style: none; margin: 0; padding: 0; }
.fpd-warnbox li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-foreground); }
.fpd-warnbox .icon { width: 14px; height: 14px; }
.fpd-pos { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-muted); font-size: var(--text-xs); }
.fpd-pos .icon { flex: none; width: 14px; height: 14px; }

/* ── The weekly review of 2 Nov ── */
.fpd-wtable tbody td { vertical-align: top; }
.fpd-grp th { padding-block: var(--space-1); background: var(--color-surface-muted); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-align: left; text-transform: none; }
.fpd-chipbtn { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--space-2); border: 1px solid var(--color-emphasis); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-foreground); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; }
.fpd-chipbtn .icon { width: 12px; height: 12px; color: var(--color-subtle); }
.fpd-age { display: block; margin-top: var(--space-1); }
.fpd-auto { display: flex; align-items: center; gap: var(--space-1); }
.fpd-auto .icon { width: 12px; height: 12px; }
.fpd-foot { margin: var(--space-2) 0 0; color: var(--color-subtle); }
.fpd-av { width: 22px; height: 22px; font-size: 10px; }
.fpd-person { display: inline-flex; align-items: center; gap: var(--space-2); }

/* The Site status menu (alt 2) */
.fpd-menuwrap { position: relative; display: inline-flex; }
.fpd-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; display: flex; flex-direction: column; width: 300px; padding: var(--space-1); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.fpd-menu__h { padding: var(--space-1) var(--space-2); color: var(--color-subtle); }
.fpd-menu__i { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 6px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.fpd-menu__i .icon { width: 14px; height: 14px; }
.fpd-menu__i.is-on { background: var(--color-primary-soft); color: var(--color-primary-strong); justify-content: space-between; }
.fpd-menu__i.is-off { color: var(--color-subtle); }
.fpd-menu__why { flex-basis: 100%; color: var(--color-muted); }

/* ── The Lead page ── */
.fpd-statuschip { cursor: pointer; }
.fpd-statuschip--hold { background: var(--color-warning-soft); color: var(--color-warning-text); }
.fpd-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-warning); }
.fpd-dot--run { background: var(--color-success); }
.fpd-ro { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-muted); }
.fpd-ro .icon { width: 12px; height: 12px; }
.fpd-rotag { display: inline-flex; align-items: center; gap: var(--space-1); }
.fpd-frozen { opacity: 0.6; }
.fpd-was { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.fpd-was s { color: var(--color-subtle); }
.fpd-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fpd-hist li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--space-2); font-size: var(--text-label); }
.fpd-acts { margin: 0; }
.fpd-act { display: flex; align-items: flex-start; gap: var(--space-2); }
.fpd-act .ap-list__text > span:first-child, .fpd-act s { white-space: normal; }
.fpd-act.is-cancelled { color: var(--color-subtle); }
.fpd-act.is-cancelled > .icon { flex: none; margin-top: 2px; color: var(--color-danger-text); }
.fpd-act.is-cancelled s { color: var(--color-muted); }
.fpd-act .t-caption { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.fpd-act--new { background: var(--color-success-soft); }
.fpd-none { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-2) 0 0; }
.fpd-none .icon { width: 12px; height: 12px; }
.fpd-banner { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-muted); border: 1px solid var(--color-default); color: var(--color-muted); font-size: var(--text-sm); }
.fpd-banner .icon { flex: none; width: 14px; height: 14px; }
.ap-page > .fpd-banner { margin-block: var(--space-3); }

/* ── Insights › Reasons behind the numbers ── */
.fpd-filter { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--size-control-sm); padding: 0 var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); font-size: var(--text-sm); }
.fpd-filter .icon { width: 12px; height: 12px; color: var(--color-subtle); }
.fpd-rs { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; margin-top: var(--space-4); }
.fpd-rs__card > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); }
.fpd-rs__card .table { width: 100%; }
.fpd-rs__on td { background: var(--color-primary-soft); }
.fpd-drill li { display: flex; align-items: center; gap: var(--space-3); }
.fpd-drill__site { padding-left: var(--space-6); }
.fpd-q { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--space-1); color: var(--color-warning-text); font-size: var(--text-xs); }
.fpd-q .icon { width: 12px; height: 12px; }

/* ── Search ── */
.fpd-search { border-color: var(--color-primary); }
.fpd-search__q { color: var(--color-foreground); }
.fpd-results { position: absolute; top: 96px; left: 16px; z-index: 5; width: 520px; padding: var(--space-2); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.fpd-results__h { margin: 0; padding: var(--space-1) var(--space-2); color: var(--color-subtle); }
.fpd-result { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-control); background: var(--color-primary-soft); }
.fpd-result .ap-list__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fpd-results__f { margin: var(--space-2) var(--space-2) 0; }

/* ── The Site page (Closed and reopened) ── */
.fpd-root { gap: var(--space-3); }
.fpd-head__right { margin-left: auto; display: inline-flex; align-items: center; }
.fpd-mdonly { display: inline-flex; align-items: center; gap: var(--space-1); }
.fpd-mdonly .icon { width: 12px; height: 12px; }
.fpd-facts { grid-template-columns: repeat(6, minmax(0, auto)); }
.fpd-tab--ro { color: var(--color-subtle); }
.fpd-tab--ro .icon { width: 12px; height: 12px; margin-left: 4px; }
.fpd-recalc { display: inline-flex; align-items: center; gap: 4px; color: var(--color-muted); }
.fpd-recalc .icon { width: 12px; height: 12px; }
.fpd-stall .icon { width: 12px; height: 12px; }
.fpd-card { padding: 0 0 var(--space-3); }
.fpd-card > .sp-kv, .fpd-card > .fpd-tl, .fpd-card > .fpd-add, .fpd-card > .fpd-empty { margin-inline: var(--space-4); }
.fpd-card .sp-kv { font-size: var(--text-label); }
.fpd-closed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3); align-items: start; }
.fpd-ov { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.fpd-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.fpd-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fpd-tl li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: var(--space-2); }
.fpd-tl p { margin: 2px 0 0; font-size: var(--text-label); line-height: var(--leading-sm); }
.fpd-tl__dot { width: 10px; height: 10px; margin-top: 4px; border-radius: var(--radius-full); background: var(--color-primary); }
.fpd-tl__dot--dead { background: var(--color-danger); }
.fpd-cx { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fpd-cx li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); }
.fpd-rofield { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: 1px dashed var(--color-default); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.fpd-rofield .icon { flex: none; width: 12px; height: 12px; margin-top: 3px; color: var(--color-subtle); }
.fpd-rofield.is-tip { border-color: var(--color-emphasis); }
.fpd-tip { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-2); width: max-content; max-width: 340px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-foreground); color: var(--color-page); font-size: var(--text-xs); box-shadow: var(--shadow-overlay); }
.fpd-tip .icon { color: var(--color-page); }
.fpd-empty { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-default); border-radius: var(--radius-control); color: var(--color-muted); font-size: var(--text-xs); }
.fpd-empty .icon { flex: none; width: 14px; height: 14px; }
.fpd-card > header .btn { flex: none; }
.fpd-add { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-control); }
.fpd-add__row { display: grid; grid-template-columns: 1.3fr 1.1fr 0.9fr; gap: var(--space-2); }
.fpd-add .fpd-input, .fpd-add .c-select__trigger { font-size: var(--text-xs); padding-inline: var(--space-2); }
.fpd-add__foot { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.fpd-add__foot .btn { margin-left: auto; }
.fpd-newrow { background: var(--color-danger-soft); }

/* ── Notification centre ── */
.fpd-notif { position: absolute; top: 52px; right: 120px; z-index: 5; width: 440px; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.fpd-notif > header { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-3) var(--space-4) var(--space-2); }
.fpd-notif .ap-list { margin: 0; }
.fpd-notif__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-4); }
.fpd-notif__item > .icon { flex: none; margin-top: 2px; color: var(--color-primary-strong); }
.fpd-notif__item .ap-list__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fpd-notif__item.is-new { background: var(--color-primary-soft); }
.fpd-notif > footer { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-3); border-top: 1px solid var(--color-default); }
.fpd-notif > footer .icon { width: 12px; height: 12px; }

/* ── Fixes after the screenshot check ── */
.fpd-field[data-flow-target] { padding: 6px 6px 6px 10px; }
.fpd-q { white-space: nowrap; }
.fpd-closed { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.3fr); }
.fpd-card .sp-kv { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.fpd-card .sp-kv dt { white-space: normal; }
.fpd-ov { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr) minmax(0, 0.95fr); }
.fpd-add__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fpd-add__row > .fpd-field:first-child { grid-column: 1 / -1; }
.fpd-rel .sm-card, .fpd-rel .card { overflow: visible; }