/* ==========================================================================
   Option A (design-a.md; the advisers' vote, Peter 6 Oct 2026): the advice process page and the client record —
   colour cards, 15 px text (17 px until 12 Oct 2026), the stage timeline across the top, a household header. Only the look: the panels,
   folds (feos:panel-folds), buttons and access are EspoCRM's and FEOS's as before.
   ========================================================================== */

:root {
    --feos-a-ink: #0f1b26;
    --feos-a-muted: #3d4a57;
    --feos-a-line: #e1e7ee;
    --feos-a-blue: #0a72ba; --feos-a-blue-dark: #075a93; --feos-a-blue-soft: #e8f3fb; --feos-a-blue-ring: #cfe3f3;
    --feos-a-green: #1f7a4d; --feos-a-green-soft: #e6f4ec;
    --feos-a-orange: #a14a08; --feos-a-orange-soft: #fdf0e4; --feos-a-orange-line: #e7b88f;
    --feos-a-teal: #0e7c86; --feos-a-teal-soft: #e3f4f5;
    --feos-a-purple: #6a3fb5; --feos-a-purple-soft: #f1ebfa;
    --feos-a-grey: #3d4a57; --feos-a-grey-soft: #eef1f4;
    --feos-a-amber: #7a5a00; --feos-a-amber-soft: #fff4d6;
    --feos-a-red: #a3271b; --feos-a-red-soft: #fde6e4;
}

/* ---- Chips (the requirements, the statuses in the cards) ------------------------------------------------------- */
.feos-a-chip { display: inline-block; font-size: 14px; font-weight: 700; padding: 3px 12px; border-radius: 999px;
    white-space: nowrap; background: var(--feos-a-grey-soft); color: var(--feos-a-grey); line-height: 1.5; }
.feos-a-chip-done { background: var(--feos-a-green-soft); color: var(--feos-a-green); }
.feos-a-chip-waiting { background: var(--feos-a-amber-soft); color: var(--feos-a-amber); }
.feos-a-chip-missing { background: var(--feos-a-red-soft); color: var(--feos-a-red); }
.feos-a-chip-info { background: var(--feos-a-blue-soft); color: var(--feos-a-blue-dark); }

:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel .label {
    font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
    background: var(--feos-a-grey-soft); color: var(--feos-a-grey); }
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel .label-success { background: var(--feos-a-green-soft); color: var(--feos-a-green); }
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel .label-warning { background: var(--feos-a-amber-soft); color: var(--feos-a-amber); }
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel .label-danger { background: var(--feos-a-red-soft); color: var(--feos-a-red); }
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel :is(.label-info, .label-primary) { background: var(--feos-a-blue-soft); color: var(--feos-a-blue-dark); }

/* ---- Both pages: readable cards ------------------------------------------------------------------------------- */
/* the corners rounded without clipping the card: a row's menu (the down arrow) opens over the card's edge
   (Peter, 14 Oct 2026: on the second row it hid under the box) */
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel { border-radius: 16px !important; overflow: visible; }
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel > .panel-heading { border-top-left-radius: 16px; border-top-right-radius: 16px; }
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel > :last-child { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
@media (min-width: 768px) {   /* on a phone the lists keep scrolling sideways */
    :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel .list-container,
    :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel .list { overflow: visible; }
}
/* Marketing preferences: the ticks two to a row (Peter, 14 Oct 2026: "it does not need to be this long") */
.detail[data-scope="Contact"] .panel[data-name="marketing"] :is(div):has(> .cell[data-name="marketingEmail"]) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.detail[data-scope="Contact"] .panel[data-name="marketing"] .cell.form-group { margin-bottom: 8px; min-width: 0; }
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel > .panel-heading {
    padding-top: 13px; padding-bottom: 13px; border-bottom-color: transparent; }
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel > .panel-heading .panel-title {
    font-size: 17px; font-weight: 700; color: inherit; }
/* Peter, 12 Oct 2026: "the text is bigger than the menu's and everything is squeezed" — 17 px → 15 px, the lists 14 px */
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel > .panel-body,
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel > .panel-body .field {
    font-size: 14.5px; }
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel > .panel-body td {
    font-size: 13.5px; }
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel > .panel-body .control-label,
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel > .panel-body th,
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel > .panel-body small {
    font-size: 12px; }
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .panel.feos-empty-rel .panel-title[data-feos-empty]:after {
    font-size: 15px; color: var(--feos-a-muted); opacity: .8; }
:is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"], .detail[data-scope="FeosPolicy"], .detail[data-scope="FeosMortgage"]) .feos-foldable > .panel-heading:hover .panel-title { color: inherit; text-decoration: underline; }

/* the colour of each card's title (as in the mock-up) */
.detail[data-scope="FeosAdviceProcess"] .panel[data-name="policies"],
.detail[data-scope="Contact"] .panel:is([data-name="feosPolicies"], [data-name="feosMortgages"]) { --feos-a-bg: var(--feos-a-orange-soft); --feos-a-fg: var(--feos-a-orange); }
.detail[data-scope="FeosAdviceProcess"] .panel:is([data-name="mortgages"], [data-name="existingCover"]),
.detail[data-scope="Contact"] .panel[data-name="feosAdviceProcesses"] { --feos-a-bg: var(--feos-a-teal-soft); --feos-a-fg: var(--feos-a-teal); }
.detail[data-scope="FeosAdviceProcess"] .panel:has(.cell[data-name="stageLine"]),
.detail[data-scope="Contact"] .panel[data-name="feosPortal"] { --feos-a-bg: var(--feos-a-green-soft); --feos-a-fg: var(--feos-a-green); }
.detail[data-scope="FeosAdviceProcess"] .panel:is([data-name="feosClients"], :has(.cell[data-name="factFindAction"])),
.detail[data-scope="Contact"] .record-grid .middle > .panel:first-child { --feos-a-bg: var(--feos-a-blue-soft); --feos-a-fg: var(--feos-a-blue-dark); }
.detail[data-scope="FeosAdviceProcess"] .panel:is([data-name="files"], [data-name="feosHealth"]),
.detail[data-scope="Contact"] .panel[data-name="feosUploads"] { --feos-a-bg: var(--feos-a-purple-soft); --feos-a-fg: var(--feos-a-purple); }
.detail[data-scope="Contact"] .panel[data-name="feosVulnerabilities"] { --feos-a-bg: var(--feos-a-grey-soft); --feos-a-fg: var(--feos-a-grey); }
.detail[data-scope="FeosAdviceProcess"] .panel:is([data-name="policies"], [data-name="mortgages"], [data-name="existingCover"], [data-name="feosClients"], [data-name="files"], [data-name="feosHealth"], :has(.cell[data-name="stageLine"]), :has(.cell[data-name="factFindAction"])) > .panel-heading,
.detail[data-scope="Contact"] .panel:is([data-name="feosPolicies"], [data-name="feosMortgages"], [data-name="feosAdviceProcesses"], [data-name="feosPortal"], [data-name="feosUploads"], [data-name="feosVulnerabilities"]) > .panel-heading,
.detail[data-scope="Contact"] .record-grid .middle > .panel:first-child > .panel-heading {
    background: var(--feos-a-bg); color: var(--feos-a-fg); }
.detail[data-scope] .panel > .panel-heading .panel-actions-container .btn {
    background: #fff; border: 1.5px solid var(--feos-a-line); border-radius: 10px; font-size: 15px; color: var(--feos-a-ink); }
.detail[data-scope="FeosAdviceProcess"] .panel[data-name="policies"] > .panel-heading .panel-actions-container .btn { border-color: var(--feos-a-orange-line); }

/* ---- Policy (Peter, 7 Oct 2026: "style A for the policy view"): the colour of each card ------------------------ */
.detail[data-scope="FeosPolicy"] .record-grid .middle > .panel:has(.cell[data-name="documentsStrip"]) { --feos-a-bg: var(--feos-a-blue-soft); --feos-a-fg: var(--feos-a-blue-dark); }
.detail[data-scope="FeosPolicy"] .record-grid .middle > .panel:has(.cell[data-name="whyAmount"]) { --feos-a-bg: var(--feos-a-green-soft); --feos-a-fg: var(--feos-a-green); }
.detail[data-scope="FeosPolicy"] .record-grid .middle > .panel:has(.cell[data-name="applicationDate"]) { --feos-a-bg: var(--feos-a-orange-soft); --feos-a-fg: var(--feos-a-orange); }
.detail[data-scope="FeosPolicy"] .panel[data-name="files"] { --feos-a-bg: var(--feos-a-purple-soft); --feos-a-fg: var(--feos-a-purple); }
.detail[data-scope="FeosPolicy"] .panel[data-name="feosNotes"] { --feos-a-bg: var(--feos-a-grey-soft); --feos-a-fg: var(--feos-a-grey); }
.detail[data-scope="FeosPolicy"] .panel[data-name="tasks"] { --feos-a-bg: var(--feos-a-teal-soft); --feos-a-fg: var(--feos-a-teal); }
.detail[data-scope="FeosPolicy"] .panel[data-name="feosCommission"] { --feos-a-bg: var(--feos-a-amber-soft); --feos-a-fg: var(--feos-a-amber); }
.detail[data-scope="FeosPolicy"] .record-grid .middle > .panel:is(:has(.cell[data-name="documentsStrip"]), :has(.cell[data-name="whyAmount"]), :has(.cell[data-name="applicationDate"])) > .panel-heading,
.detail[data-scope="FeosPolicy"] .panel:is([data-name="files"], [data-name="feosNotes"], [data-name="tasks"], [data-name="feosCommission"]) > .panel-heading {
    background: var(--feos-a-bg); color: var(--feos-a-fg); }
.detail[data-scope="FeosPolicy"] .panel[data-name="feosNotes"] .cell[data-name="notes"] > .control-label { display: none; }
.feos-a-chip-plain { background: var(--feos-a-grey-soft); color: var(--feos-a-grey); }

/* ---- Mortgage (Peter, 12 Oct 2026: "the mortgage looks old, no colours — like the advice process"): each card's colour */
.detail[data-scope="FeosMortgage"] .record-grid .middle > .panel:has(.cell[data-name="documentsStrip"]) { --feos-a-bg: var(--feos-a-blue-soft); --feos-a-fg: var(--feos-a-blue-dark); }
.detail[data-scope="FeosMortgage"] .record-grid .middle > .panel:has(.cell[data-name="productName"]) { --feos-a-bg: var(--feos-a-teal-soft); --feos-a-fg: var(--feos-a-teal); }
.detail[data-scope="FeosMortgage"] .record-grid .middle > .panel:has(.cell[data-name="loanAmount"]) { --feos-a-bg: var(--feos-a-green-soft); --feos-a-fg: var(--feos-a-green); }
.detail[data-scope="FeosMortgage"] .record-grid .middle > .panel:has(.cell[data-name="rate"]) { --feos-a-bg: var(--feos-a-orange-soft); --feos-a-fg: var(--feos-a-orange); }
.detail[data-scope="FeosMortgage"] .record-grid .middle > .panel:has(.cell[data-name="ercPercent"]) { --feos-a-bg: var(--feos-a-amber-soft); --feos-a-fg: var(--feos-a-amber); }
.detail[data-scope="FeosMortgage"] .record-grid .middle > .panel:has(.cell[data-name="whyAmount"]) { --feos-a-bg: var(--feos-a-purple-soft); --feos-a-fg: var(--feos-a-purple); }
.detail[data-scope="FeosMortgage"] .panel[data-name="files"] { --feos-a-bg: var(--feos-a-purple-soft); --feos-a-fg: var(--feos-a-purple); }
.detail[data-scope="FeosMortgage"] .panel[data-name="feosDates"] { --feos-a-bg: var(--feos-a-amber-soft); --feos-a-fg: var(--feos-a-amber); }
.detail[data-scope="FeosMortgage"] .panel[data-name="feosNotes"] { --feos-a-bg: var(--feos-a-grey-soft); --feos-a-fg: var(--feos-a-grey); }
.detail[data-scope="FeosMortgage"] .panel[data-name="tasks"] { --feos-a-bg: var(--feos-a-teal-soft); --feos-a-fg: var(--feos-a-teal); }
.detail[data-scope="FeosMortgage"] .record-grid .middle > .panel:is(:has(.cell[data-name="documentsStrip"]), :has(.cell[data-name="productName"]), :has(.cell[data-name="loanAmount"]), :has(.cell[data-name="rate"]), :has(.cell[data-name="ercPercent"]), :has(.cell[data-name="whyAmount"])) > .panel-heading,
.detail[data-scope="FeosMortgage"] .panel:is([data-name="files"], [data-name="feosDates"], [data-name="feosNotes"], [data-name="tasks"]) > .panel-heading {
    background: var(--feos-a-bg); color: var(--feos-a-fg); }
.detail[data-scope="FeosMortgage"] .panel[data-name="feosNotes"] .cell[data-name="notes"] > .control-label { display: none; }

/* one look for every section title (Peter, 12 Oct 2026: "some have a little square, some not — make it uniform"):
   no entity-colour square before a title */
.panel > .panel-heading .panel-title .color-icon { display: none; }

/* ---- Advice process: the header ------------------------------------------------------------------------------ */
#main .header-title:has(.feos-a-head) { margin: 0; font-size: inherit; }
.feos-a-eyebrow { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--feos-a-muted); }
.feos-a-eyebrow a { color: inherit; text-decoration: none; }
.feos-a-eyebrow a:hover { color: var(--feos-a-blue); }
.feos-a-title { margin: 4px 0 0; font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--feos-a-ink); cursor: pointer;
    white-space: normal; }
.feos-a-goal { color: var(--feos-a-muted); font-weight: 700; }
.feos-a-title .feos-a-chip { margin-left: 10px; vertical-align: 6px; font-size: 13px; }
#main .page-header:has(.feos-a-head) .page-header-column-2 .btn {
    height: 48px; padding: 0 20px; border-radius: 12px; font-size: 16px; font-weight: 600; }
#main .page-header:has(.feos-a-head) .page-header-column-2 .btn-default { border: 1.5px solid #c9d3de; background: #fff; }
#main .page-header:has(.feos-a-head) .page-header-column-2 .btn-primary { font-weight: 700; }

/* ---- Advice process: the stage timeline across the top ------------------------------------------------------- */
.feos-a-flow { background: var(--panel-bg, #fff); border: 1px solid var(--feos-a-line); border-radius: 16px; padding: 20px 24px;
    margin: 0 0 16px; display: flex; flex-direction: column; gap: 16px; max-width: var(--record-grid-max-width); }
.feos-a-flow:empty { display: none; }
.feos-a-track-name { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--feos-a-muted);
    margin-bottom: 8px; }
.feos-a-steps { display: grid; grid-template-columns: repeat(var(--feos-a-n, 6), minmax(0, 1fr)); gap: 10px; }
.feos-a-step { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feos-a-bar { height: 10px; border-radius: 5px; background: var(--feos-a-line); }
.feos-a-step strong { font-size: 17px; color: #5b6875; line-height: 1.25; }
.feos-a-step span { font-size: 14px; color: var(--feos-a-muted); }
.feos-a-step-done .feos-a-bar { background: var(--feos-a-green); }
.feos-a-step-done strong { color: var(--feos-a-ink); }
.feos-a-step-now .feos-a-bar { background: var(--feos-a-blue); box-shadow: 0 0 0 3px var(--feos-a-blue-ring); }
.feos-a-step-now strong, .feos-a-step-now span { color: var(--feos-a-blue); }
.feos-a-step-now span { font-weight: 600; }
.feos-a-step-missed .feos-a-bar { background: #e8a33d; }
.feos-a-step-missed strong, .feos-a-step-missed span { color: var(--feos-a-amber); }
.feos-a-step-na { opacity: .5; }
.feos-a-step-na strong { text-decoration: line-through; }
.feos-a-flow-closed { font-size: 15px; font-weight: 700; color: var(--feos-a-muted); }

/* ---- Advice process: the order of the cards (left column) — policies first, what is needed, the fact find ---- */
.detail[data-scope="FeosAdviceProcess"] > .record-grid > .left { display: flex; flex-direction: column; }
.detail[data-scope="FeosAdviceProcess"] > .record-grid > .left > :is(.middle, .bottom) { display: contents; }
.detail[data-scope="FeosAdviceProcess"] > .record-grid > .left > :is(.middle, .bottom) > * { order: 10; }
.detail[data-scope="FeosAdviceProcess"] > .record-grid > .left .panel[data-name="policies"] { order: 1; }
.detail[data-scope="FeosAdviceProcess"] > .record-grid > .left .panel[data-name="mortgages"] { order: 2; }
.detail[data-scope="FeosAdviceProcess"] > .record-grid > .left > .middle > .panel:has(.cell[data-name="stageLine"]) { order: 3; }
.detail[data-scope="FeosAdviceProcess"] > .record-grid > .left > .middle > .panel:has(.cell[data-name="factFindAction"]) { order: 4; }
.detail[data-scope="FeosAdviceProcess"] > .record-grid > .left .panel[data-name="feosHealth"] { order: 5; }
.detail[data-scope="FeosAdviceProcess"] > .record-grid > .left .panel[data-name="existingCover"] { order: 6; }
.detail[data-scope="FeosAdviceProcess"] > .record-grid > .left .panel[data-name="stream"] { order: 20; }
.detail[data-scope="FeosAdviceProcess"] > .record-grid > .left > .extra { order: 19; }

/* ---- Advice process: What is needed ---------------------------------------------------------------------------- */
.detail[data-scope="FeosAdviceProcess"] .cell[data-name="stageLine"] > .control-label { display: none; }
.feos-a-title-count { margin-left: auto; float: right; font-size: 15px; font-weight: 600; margin-right: 8px; }
.feos-a-reqs-count { display: none; }
.feos-a-reqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -15px -10px; }
.feos-a-req { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-top: 1px solid var(--feos-a-line);
    font-size: 17px; min-width: 0; }
.feos-a-req-name { flex: 1 1 auto; min-width: 0; }
.feos-a-req-name small { display: block; }
.feos-a-req-more { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; font-size: 14px; }
.feos-a-closed { margin-bottom: 8px; }
.detail[data-scope="FeosAdviceProcess"] .feos-ap-next { font-size: 17px; border-radius: 10px; margin: 0 0 12px; }

/* ---- Advice process: Clients ---------------------------------------------------------------------------------- */
.feos-a-people { margin: -10px -15px; }
.feos-a-person { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--feos-a-line); }
.feos-a-person > div { display: flex; flex-direction: column; min-width: 0; }
.feos-a-person strong { font-size: 15px; }
.feos-a-person small { font-size: 13px; color: var(--feos-a-muted); }
.feos-a-initials { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--feos-a-blue); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.feos-a-initials-2 { background: var(--feos-a-blue-dark); }
.feos-a-kv { display: flex; align-items: baseline; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--feos-a-line); font-size: 15px; }
.feos-a-kv:last-child { border-bottom: 0; }
.feos-a-kv > span { font-size: 13px; color: var(--feos-a-muted); }
.feos-a-kv > strong { margin-left: auto; text-align: right; }
.feos-a-portal { margin: -10px -15px; }

/* ---- Client record: the household band ------------------------------------------------------------------------- */
#main .header-title:has(.feos-a-band) { margin: 0; font-size: inherit; width: 100%; }
#main .page-header:has(.feos-a-band) .page-header-column-1 { width: 100%; flex: 1 1 100%; max-width: 100%; }
.feos-a-band { background: var(--feos-a-blue); color: #fff; border-radius: 16px; padding: 22px 26px; display: flex; align-items: center;
    gap: 22px; flex-wrap: wrap; white-space: normal; }
.feos-a-band-initials { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; background: #fff; color: var(--feos-a-blue);
    display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; }
.feos-a-band-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feos-a-band .feos-a-eyebrow, .feos-a-band .feos-a-eyebrow a { color: #dbeaf6; }
.feos-a-band h1 { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.15; cursor: pointer; color: #fff; }
.feos-a-band-line { font-size: 17px; opacity: .95; }
.feos-a-band-line a { color: #fff; font-weight: 700; text-decoration: underline; }
.feos-a-band-acts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.feos-a-band-acts .btn { height: 50px; padding: 0 22px; border-radius: 12px; font-size: 17px; display: inline-flex; align-items: center; gap: 8px; }
.feos-a-band-main, .feos-a-band-main:hover, .feos-a-band-main:focus { background: #fff; color: var(--feos-a-blue-dark); border: 0; font-weight: 800; }
.feos-a-band-ghost, .feos-a-band-ghost:hover, .feos-a-band-ghost:focus { background: transparent; color: #fff; border: 2px solid #fff; }
.feos-a-band-ghost:hover { background: rgba(255, 255, 255, .12); }

/* ---- Phones and narrow laptops --------------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .feos-a-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
    .feos-a-reqs { grid-template-columns: 100%; }
}
@media (max-width: 600px) {
    .feos-a-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feos-a-title { font-size: 24px; }
    .feos-a-band { padding: 18px; }
    .feos-a-band h1 { font-size: 26px; }
    .feos-a-band-acts { margin-left: 0; width: 100%; }
}

/* ---- Clients have no photo (design-a.md C3): not in the portal's own menu either ------------------------------- */
body.feos-portal-user #navbar :is(.avatar, .avatar-link) { display: none !important; }
.detail[data-scope] .panel > .panel-heading .panel-title :is(a, span) { text-decoration: none; }
.detail[data-scope] .side .panel.feos-empty-rel .panel-title[data-feos-empty]:after { display: block; content: attr(data-feos-empty); font-size: 14px; margin-top: 2px; }

/* ---- An empty section (Peter, 7 Oct 2026: "'Nothing recorded yet' looks weak — grey it so it is plain it is empty"):
   no words, the title in light grey on white; its + and … buttons stay. ------------------------------------------- */
.panel.feos-empty-rel .panel-title[data-feos-empty]:after,
.detail[data-scope] .side .panel.feos-empty-rel .panel-title[data-feos-empty]:after { content: none !important; display: none !important; }
.detail[data-scope] .panel.feos-empty-rel > .panel-heading { background: var(--panel-bg, #fff) !important; }
.detail[data-scope] .panel.feos-empty-rel > .panel-heading .panel-title,
.detail[data-scope] .panel.feos-empty-rel > .panel-heading .panel-title :is(a, span) { color: #a9b3be !important; font-weight: 600; }
.detail[data-scope] .panel.feos-empty-rel > .panel-heading .panel-title .fas,
.detail[data-scope] .panel.feos-empty-rel > .panel-heading .panel-title .far { opacity: .45; }

/* "What is needed" as a flow from the top down (Peter, 14 Oct 2026): stages, numbered steps, a button at each step */
.feos-flow { margin: 4px -15px -10px; }
.feos-flow-gate { border-top: 1px solid var(--feos-a-line); padding: 10px 15px 4px; }
.feos-flow-gate-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--feos-a-muted);
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.feos-flow-gate-title .feos-a-chip { font-size: 12px; padding: 1px 9px; letter-spacing: 0; text-transform: none; }
.feos-flow-gate.now { background: #fbfdff; }
.feos-flow-step { display: flex; gap: 12px; padding: 8px 0; position: relative; }
.feos-flow-step + .feos-flow-step { border-top: 1px dashed var(--feos-a-line); }
.feos-flow-num { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--feos-a-blue); color: #fff; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px; margin-top: 1px; }
.feos-flow-step.done .feos-flow-num { background: var(--feos-a-green); }
.feos-flow-step.done .feos-flow-title { color: var(--feos-a-muted); }
.feos-flow-body { flex: 1 1 auto; min-width: 0; }
.feos-flow-title { font-weight: 800; font-size: 16px; color: var(--feos-a-ink); margin: 3px 0 4px; }
.feos-flow-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; flex-wrap: wrap; }
.feos-flow-row .feos-a-chip { font-size: 13px; padding: 2px 10px; flex: 0 0 auto; min-width: 64px; text-align: center; }
.feos-flow-target { flex: 1 1 220px; min-width: 0; color: var(--feos-a-ink); }
.feos-flow-target small { display: block; }
.feos-flow-acts { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.feos-flow-acts .btn-link { padding-left: 4px; padding-right: 4px; }