/* =============================================================================
   Single blog post (single.php). From the mockup Mike approved on 18 Sep 2026:
   Mike Swaleh/Blogs/1. How Much House Can I Afford/MOCKUP - How Much House Can I Afford.html
   ========================================================================== */
.fw-post {
    --fw-ink: #22303f;
    --fw-muted: #5d6b7a;
    --fw-rule: #e3e8ee;
    --fw-wash: #f5f8fa;
    --fw-navy-2: #1d2b3d;
    --fw-green-d: #6aa92f;
    max-width: 1280px;
    margin: 0 auto;
    padding: 26px 24px 90px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 60px;
    align-items: start;
    color: var(--fw-ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
}
.fw-post *, .fw-takeover * { box-sizing: border-box; }

.fw-post__title { font-family: var(--font-body); font-size: 40px; line-height: 1.16; color: var(--color-primary); font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; }
.fw-post__eyebrow { color: var(--color-accent); font-weight: 600; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 10px; }
.fw-post__byline { color: var(--fw-muted); font-size: 14px; margin: 0 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--fw-rule); }

.fw-post__body h2 { font-family: var(--font-body); font-size: 26px; line-height: 1.3; color: var(--color-primary); font-weight: 600; margin: 40px 0 12px; letter-spacing: 0; }
.fw-post__body h3 { font-family: var(--font-body); font-size: 21px; color: var(--color-primary); font-weight: 600; margin: 30px 0 10px; }
.fw-post__body p, .fw-post__body ul, .fw-post__body ol { max-width: 68ch; }
.fw-post__body p { margin: 0 0 18px; }
.fw-post__body li { margin-bottom: 6px; }
.fw-post__body strong { color: var(--color-primary); }
.fw-post__body a { color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.fw-post__body img { border-radius: 10px; height: auto; }
.fw-post__body table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 18px; display: block; overflow-x: auto; }
.fw-post__body th, .fw-post__body td { border: 1px solid var(--fw-rule); padding: 8px 10px; text-align: left; }
.fw-post__body iframe { max-width: 100%; }

/* ---- Hero: video (click to play) or the featured image ---------------- */
.fw-post__hero { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 22px; border-radius: 14px; overflow: hidden; background: #0c1420; box-shadow: 0 18px 44px -18px rgba(41, 58, 81, .55); }
.fw-post__hero img, .fw-post__hero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.fw-post__play { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, .18); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.fw-post__play:hover { background: rgba(0, 0, 0, .05); }
.fw-post__play i { width: 82px; height: 58px; border-radius: 15px; background: rgba(255, 0, 0, .92); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 26px rgba(0, 0, 0, .5); transition: transform .15s; }
.fw-post__play:hover i, .fw-post__play:focus-visible i { transform: scale(1.07); background: #f00; }
.fw-post__play i::after { content: ""; border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 5px; }
.fw-post__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 22px 16px; color: #fff; font-size: 14.5px; font-weight: 500; pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }

/* ---- In-article triggers ------------------------------------------------
   .fw-askq / .fw-askline are drawn by the theme; .asj-ask is the plugin's own
   [askswaleh_ask] button, given the same look. */
.fw-trig__lead { font-size: 13px; color: var(--fw-muted); margin: 26px 0 2px !important; font-weight: 500; }
.fw-askq, .fw-post__body .asj-ask:not(.asj-ask--inline) {
    display: inline-flex; align-items: center; gap: .6rem; margin: .25rem .4rem .25rem 0;
    padding: .6rem 1.1rem .6rem .9rem; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; text-align: left;
    color: #fff; background: var(--color-primary); border: 0; border-radius: 2rem; cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(41, 58, 81, .5); transition: transform .12s, box-shadow .12s, background .12s;
}
.fw-askq:hover, .fw-post__body .asj-ask:not(.asj-ask--inline):hover { background: var(--fw-navy-2); transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(41, 58, 81, .6); }
.fw-askq__m { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; box-shadow: 0 0 0 4px rgba(128, 195, 61, .25); }
.fw-askq__go { color: var(--color-accent); font-weight: 600; margin-left: .15rem; }
.fw-post__body .asj-ask .asj-ask-mark { color: var(--color-accent); display: inline-flex; }

.fw-askline, .fw-post__body .asj-ask--inline {
    display: inline; font: inherit; font-size: 16.5px; line-height: 1.75; color: var(--color-primary); background: none;
    border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%;
}
.fw-askline:hover, .fw-post__body .asj-ask--inline:hover { background-color: #f4faec; }
.fw-askline b, .fw-post__body .asj-ask--inline .asj-ask-go { color: var(--fw-green-d); font-weight: 600; white-space: nowrap; }
.fw-askq:focus-visible, .fw-askline:focus-visible, .fw-post__body .asj-ask:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* ---- The launcher ------------------------------------------------------- */
.fw-launch { position: relative; margin: 34px 0 10px; border-radius: 18px; overflow: hidden; color: #fff;
    background: linear-gradient(145deg, #2f4460 0%, var(--color-primary) 45%, #1a2738 100%); box-shadow: 0 24px 50px -22px rgba(41, 58, 81, .85); }
.fw-launch::before { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(128, 195, 61, .34), transparent 62%); }
.fw-launch__in { position: relative; padding: 30px 32px 28px; }
.fw-launch__live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #bfe58c;
    background: rgba(128, 195, 61, .16); border: 1px solid rgba(128, 195, 61, .4); padding: 5px 12px; border-radius: 30px; margin-bottom: 16px; }
.fw-launch__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); display: block; animation: fw-pulse 2.2s infinite; }
@keyframes fw-pulse { 0% { box-shadow: 0 0 0 0 rgba(128, 195, 61, .65); } 70% { box-shadow: 0 0 0 11px rgba(128, 195, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(128, 195, 61, 0); } }
.fw-launch h2 { font-family: var(--font-body); color: #fff; margin: 0 0 8px; font-size: 29px; line-height: 1.25; }
.fw-launch h2 em { color: var(--color-accent); font-style: italic; }
.fw-launch__sub { color: #cbd8e6; font-size: 15.5px; margin: 0 0 20px; max-width: 56ch; }
.fw-launch__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.fw-launch__chip { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .26); color: #fff; border-radius: 30px; padding: 10px 18px;
    font-family: inherit; font-size: 14px; line-height: 1.4; cursor: pointer; text-align: left; transition: background .12s, border-color .12s, transform .12s; }
.fw-launch__chip:hover { background: rgba(128, 195, 61, .22); border-color: var(--color-accent); transform: translateY(-1px); }
.fw-launch__bar { display: flex; width: 100%; gap: 12px; align-items: center; background: #fff; border: 0; border-radius: 12px; padding: 7px 7px 7px 20px; cursor: text; font-family: inherit;
    box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .6); text-align: left; }
.fw-launch__bar span { flex: 1; color: #8e9bab; font-size: 15.5px; }
.fw-launch__bar b { background: var(--color-accent); color: #16240f; border-radius: 9px; padding: 12px 26px; font-size: 14.5px; font-weight: 600; }
.fw-launch__fine { color: #93a7bd; font-size: 12.5px; margin: 14px 0 0; }

.fw-post__rule { border: 0; border-top: 1px solid var(--fw-rule); margin: 36px 0 18px; }
.fw-post__legal { color: var(--fw-muted); font-size: 12.5px; max-width: 68ch; line-height: 1.6; }

/* ---- Sidebar ------------------------------------------------------------ */
/* Static, not sticky: nothing on this site follows the reader (Derek, 1 Oct 2026).
   The card sits at the top of its column and scrolls away with the article. */
.fw-post__side { display: flex; flex-direction: column; gap: 14px; }
.fw-card { border: 1px solid var(--fw-rule); border-radius: 14px; padding: 17px 18px; background: #fff; box-shadow: 0 2px 10px -6px rgba(41, 58, 81, .3); }
.fw-card h4 { font-family: var(--font-body); margin: 0 0 9px; font-size: 15px; color: var(--color-primary); font-weight: 600; letter-spacing: 0; }
.fw-card p { margin: 0; font-size: 13.5px; color: var(--fw-muted); line-height: 1.6; }
.fw-card--who { display: flex; gap: 13px; align-items: center; }
.fw-card--who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; background: #EEEFF1; }
.fw-card--who b { display: block; color: var(--color-primary); font-size: 14.5px; line-height: 1.4; }
.fw-card--who span { font-size: 12.5px; color: var(--fw-muted); line-height: 1.5; }
.fw-card--ask { background: linear-gradient(160deg, #32496a, var(--color-primary) 60%, #1b2a3c); border: 0; color: #fff; box-shadow: 0 16px 34px -18px rgba(41, 58, 81, .9); }
.fw-card--ask h4 { color: #fff; font-size: 17px; margin-bottom: 5px; }
.fw-card--ask p { color: #c3d0de; margin-bottom: 14px; }
.fw-card__chip { display: block; width: 100%; text-align: left; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .26); color: #fff; border-radius: 10px;
    padding: 10px 13px; font-family: inherit; font-size: 13px; line-height: 1.45; margin-bottom: 8px; cursor: pointer; transition: .12s; }
.fw-card__chip:hover { background: rgba(128, 195, 61, .22); border-color: var(--color-accent); }
.fw-card__askbtn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; background: var(--color-accent); color: #16240f; border: 0; border-radius: 10px;
    padding: 13px; font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(128, 195, 61, .9); }
.fw-card__askbtn:hover { background: #8fd44a; }
.fw-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
.fw-act { display: block; text-align: center; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 600; text-decoration: none; margin-bottom: 8px; line-height: 1.3; }
.fw-act:hover { text-decoration: none; }
.fw-act--primary { background: var(--fw-orange); color: #fff; }
.fw-act--primary:hover { background: var(--fw-orange-dk); color: #fff; }
.fw-act--ghost { border: 1px solid #cfdae6; color: var(--color-primary); }
.fw-act--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.fw-card__call { text-align: center; margin-top: 9px !important; }
.fw-card__call a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.fw-trust { display: flex; flex-wrap: wrap; gap: 7px; }
.fw-trust span { font-size: 11.5px; color: var(--fw-muted); border: 1px solid var(--fw-rule); border-radius: 20px; padding: 5px 10px; background: #fcfdfe; line-height: 1.4; }

/* ---- The takeover ------------------------------------------------------- */
.fw-takeover { position: fixed; inset: 0; z-index: 100000; background: rgba(16, 24, 35, .72); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 28px; animation: fw-fade .18s ease; }
.fw-takeover[hidden] { display: none; }
@keyframes fw-fade { from { opacity: 0; } to { opacity: 1; } }
html.fw-takeover-on, html.fw-takeover-on body { overflow: hidden; }
.fw-takeover__modal { width: min(1040px, 94vw); height: auto; max-height: min(88vh, 900px); background: #fff; border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .65); animation: fw-rise .22s ease; }
@keyframes fw-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.fw-takeover__head { background: var(--color-primary); color: #fff; padding: 16px 20px; flex: none; }
.fw-takeover__head-in { max-width: 820px; margin: 0 auto; display: flex; align-items: center; gap: 13px; }
.fw-takeover__head img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; border: 2px solid rgba(128, 195, 61, .65); background: #EEEFF1; }
.fw-takeover__who b { display: block; font-size: 15.5px; line-height: 1.3; }
.fw-takeover__who span { font-size: 12.5px; color: #a9bcd0; display: flex; align-items: center; gap: 6px; line-height: 1.4; }
.fw-takeover__who span i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); display: block; }
.fw-takeover__x { margin-left: auto; background: rgba(255, 255, 255, .12); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; cursor: pointer; line-height: 1; }
.fw-takeover__x:hover, .fw-takeover__x:focus-visible { background: rgba(255, 255, 255, .25); }
.fw-takeover__note { background: #fff8e1; border-bottom: 1px solid #f2e4b0; color: #6b5a1a; font-size: 12.5px; padding: 9px 20px; flex: none; text-align: center; }
.fw-takeover__body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--fw-wash, #f5f8fa); }

/* The plugin's boxed chat, stretched to fill the takeover. Its own top bar
   repeats the takeover header, so it goes; everything else is the plugin's. */
.fw-takeover .asj-chat { flex: 1; min-height: 0; max-width: none; width: 100%; margin: 0; display: flex; flex-direction: column; }
.fw-takeover .asj-chat .asj-chat-app { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; background: transparent; }
.fw-takeover .asj-chat .asj-chat-top { display: none; }
.fw-takeover .asj-chat .asj-chat-log { flex: 1; min-height: 0; max-height: none; height: auto; overflow-y: auto; padding: 26px max(24px, calc((100% - 820px) / 2)); }
.fw-takeover .asj-chat .asj-chat-dock { flex: none; padding: 13px max(18px, calc((100% - 820px) / 2)) 16px; background: #fff; border-top: 1px solid var(--fw-rule, #e3e8ee); }

@media (min-width: 1500px) and (min-height: 900px) {
    .fw-takeover__modal { width: min(1240px, 90vw); height: min(90vh, 1060px); }
}

/* ---- Phone -------------------------------------------------------------- */
.fw-pill { display: none; }
/* ---- A vertical video, beside the writing ------------------------------
   It is a grid child in its own right. Only when one exists does the article
   span both rows and the sidebar drop to the second — otherwise the sidebar
   would start at row two on every other post and leave a hole above it. */
.fw-post--vvideo .fw-post__vvideo { grid-column: 2; grid-row: 1; }
.fw-post--vvideo .fw-post__article { grid-column: 1; grid-row: 1 / span 2; }
.fw-post--vvideo .fw-post__side { grid-column: 2; grid-row: 2; }
.fw-post__vvideo .fw-vvideo { max-width: none; margin: 0; }

@media (max-width: 900px) {
    .fw-post { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 20px 16px 110px; }
    /* One column, so the explicit placement above has to go or it would hold
       the video in a second column that no longer exists. */
    .fw-post--vvideo .fw-post__vvideo,
    .fw-post--vvideo .fw-post__article,
    .fw-post--vvideo .fw-post__side { grid-column: 1; grid-row: auto; }
    .fw-post__vvideo .fw-vvideo { max-width: 340px; margin: 0 auto; }
    .fw-post__title { font-size: 30px; }
    .fw-launch__in { padding: 24px 20px; }
    .fw-launch h2 { font-size: 24px; }
    .fw-launch__bar b { padding: 12px 16px; }
    .fw-takeover { padding: 0; }
    .fw-takeover__modal { width: 100%; height: 100%; border-radius: 0; }
    /* In the flow, at the foot of the article where the markup puts it —
       not a bar pinned to the bottom of the screen. */
    .fw-pill { display: flex; width: calc(100% - 32px); margin: 8px 16px 32px;
        align-items: center; justify-content: center; gap: 9px; background: var(--color-primary); color: #fff; border: 0;
        border-radius: 40px; padding: 15px; font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer;
        box-shadow: 0 10px 28px rgba(41, 58, 81, .45); }
    .fw-pill .fw-dot { background: var(--color-accent); opacity: 1; width: 9px; height: 9px; }
}

/* Formulas (MathML) and code scroll inside their own box on a narrow screen
   rather than widening the page. */
.fw-post__body pre, .fw-post__body p:has(> math), .fw-post__body div:has(> math) { max-width: 100%; overflow-x: auto; }

/* =============================================================================
   The Regulation Z note on a post that carries figures.

   Mike's words (21 Sep 2026), put on the posts by
   06 Site Rebuild/scripts/reg-z-add-example-notice.php. It sits above the
   article so it is read before the numbers, and it is styled as a disclosure —
   quieter than the body, but not hidden. A disclosure nobody can see is not one.
   ========================================================================== */
.fw-post__body .fw-reg-z-notice {
    margin: 0 0 26px;
    padding: 12px 16px;
    border-left: 3px solid var(--color-accent, #80C33D);
    background: #f5f7f9;
    color: #4a5765;
    font-size: 14.5px;
    line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
    .fw-post__body .fw-reg-z-notice { background: #1b2430; color: #c3ccd6; }
}

/* Follow-up trigger under each answer on the published Q&A pages. */
.fw-qa-ask { margin: -6px 0 26px; font-family: "Roboto", var(--font-body); font-size: 16px; }


/* ---- Series navigation ----------------------------------------------------
   Two cards, previous and next, under an article that belongs to a run meant
   to be read in order. The next card is the emphasised one: forward is the
   direction almost everyone goes. When there is no previous, an empty cell
   holds the grid so "next" stays on the right rather than sliding left. */
.fw-series { margin: 40px 0 0; padding: 20px 0 0; border-top: 1px solid var(--fw-rule); }
.fw-series__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.fw-series__name { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.fw-series__name:hover { color: var(--color-accent); }
.fw-series__count { font-size: 13.5px; color: var(--fw-muted); }
.fw-series__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fw-series__link { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--fw-rule); border-radius: 12px; text-decoration: none; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.fw-series__link:hover { border-color: var(--color-accent); box-shadow: 0 6px 20px rgba(29, 43, 61, .08); transform: translateY(-1px); }
.fw-series__link.is-empty { border: 0; background: none; box-shadow: none; transform: none; }
.fw-series__link.is-next { border-color: #cfe3b4; background: #fbfdf7; }
.fw-series__dir { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fw-muted); }
.fw-series__link.is-next .fw-series__dir { color: var(--fw-green-d); }
.fw-series__link.is-prev { text-align: left; }
.fw-series__link.is-next { text-align: right; }
.fw-series__title { font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--color-primary); }
@media (max-width: 640px) {
  .fw-series__links { grid-template-columns: minmax(0, 1fr); }
  .fw-series__link.is-empty { display: none; }
  .fw-series__link.is-next { text-align: left; }
}

/* The person card is the one centred block in the sidebar: two full-width
   buttons and the phone line already read as a column, and a left-aligned
   heading over them looked like a label rather than the question it is. */
.fw-card--person { text-align: center; }
.fw-card--person h4 { text-align: center; }

/* Mike at the head of the card that offers Mike. */
.fw-person { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--fw-rule); }
.fw-person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.fw-person b { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--color-primary); }
.fw-person span { font-size: 12.5px; line-height: 1.5; color: var(--fw-muted); }

/* ---- Takeover: size to the conversation -----------------------------------
   The modal had a fixed height of 88vh, so three messages left roughly 450px
   of white between the last reply and the composer, and the box looked broken
   rather than empty. It now hugs its content and grows as the conversation
   does, up to the same cap, at which point the log scrolls as before.

   The log keeps a min-height so the first reply is not cramped against the
   composer, and the modal stays bottom-anchored while it grows so the newest
   message and the input never separate. */
.fw-takeover { align-items: center; }
.fw-takeover .asj-chat .asj-chat-log { flex: 1 1 auto; min-height: 190px; }
@media (max-width: 700px) {
    /* On a phone the keyboard already takes half the screen; a content-sized
       sheet beats a full-height one that scrolls behind it. */
    .fw-takeover__modal { max-height: 92vh; }
    .fw-takeover .asj-chat .asj-chat-log { min-height: 150px; }
}

/* ===========================================================================
   The chat: docked by default, expands to a right-hand rail.

   It used to be a full-screen takeover. On these pages the thing behind it is
   a video or the article they are asking about, so covering it was working
   against the question. Docked, they keep reading; expanded, they get room
   without losing the page. Full screen survives only on a phone, where a rail
   is the whole width anyway.

   One element, two states, a class apart. Never two chat instances: that
   would be two transcripts and the conversation would vanish on expand.
   ======================================================================== */

/* ---- shared ---- */
/*
 * :not([hidden]) matters. Without it these rules out-specify
 * `.fw-takeover[hidden] { display: none }` -- same weight, declared later --
 * so close() would set hidden and the panel would stay on screen. That is
 * exactly what happened, and the X looked broken.
 */
.fw-takeover.is-docked:not([hidden]),
.fw-takeover.is-full:not([hidden]) { display: block; background: none; backdrop-filter: none; padding: 0; animation: none; }
.fw-takeover.is-docked .fw-takeover__modal,
.fw-takeover.is-full .fw-takeover__modal {
    position: fixed; margin: 0; animation: fw-dock-rise .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes fw-dock-rise { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/*
 * Docked and tab are part of the page, not a modal. The container is still a
 * transparent, full-viewport `position: fixed; inset: 0`, so without this it
 * sits over the whole article at z-index 100000 and swallows every click --
 * open the chat and every link on the page goes dead. Let clicks pass through
 * the empty container; only the floating panel itself stays interactive.
 * (is-full is left out on purpose: there the container is the backdrop that
 * collapses the rail when you click outside it.)
 */
.fw-takeover.is-tab:not([hidden]),
.fw-takeover.is-docked:not([hidden]) { pointer-events: none; }
.fw-takeover.is-tab .fw-takeover__modal,
.fw-takeover.is-docked .fw-takeover__modal { pointer-events: auto; }

/* ---- docked: Messenger-style, bottom right ---- */
.fw-takeover.is-docked .fw-takeover__modal {
    right: 20px; bottom: 20px; left: auto; top: auto;
    width: min(390px, calc(100vw - 32px));
    height: auto; max-height: min(680px, calc(100vh - 40px));
    border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(16, 24, 35, .55);
}
.fw-takeover.is-docked .fw-takeover__head { padding: 12px 14px; }
.fw-takeover.is-docked .fw-takeover__head img { width: 34px; height: 34px; }
.fw-takeover.is-docked .fw-takeover__who b { font-size: 14px; }
.fw-takeover.is-docked .fw-takeover__who span { font-size: 11.5px; }
.fw-takeover.is-docked .fw-takeover__note { font-size: 11.5px; padding: 7px 14px; text-align: left; }
.fw-takeover.is-docked .asj-chat .asj-chat-log { padding: 16px 14px; min-height: 260px; }
.fw-takeover.is-docked .asj-chat .asj-chat-dock { padding: 10px 14px 12px; }

/* ---- expanded: a rail down the right, article still readable ---- */
.fw-takeover.is-full .fw-takeover__modal {
    right: 0; top: 0; bottom: 0; left: auto;
    width: min(520px, 100vw);
    height: 100vh; max-height: 100vh;
    border-radius: 18px 0 0 18px;
    box-shadow: -24px 0 70px -20px rgba(16, 24, 35, .5);
    animation: fw-rail-in .24s cubic-bezier(.2, .8, .3, 1);
}
@keyframes fw-rail-in { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.fw-takeover.is-full .asj-chat .asj-chat-log { padding: 22px 22px; }
.fw-takeover.is-full .asj-chat .asj-chat-dock { padding: 12px 22px 16px; }

/* ---- the expand control ---- */
.fw-takeover__exp {
    margin-left: auto; background: rgba(255, 255, 255, .12); border: 0; color: #fff;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.fw-takeover__exp:hover, .fw-takeover__exp:focus-visible { background: rgba(255, 255, 255, .25); }
.fw-takeover__exp svg { width: 16px; height: 16px; }
.fw-takeover__x { margin-left: 6px; }
.fw-takeover.is-docked .fw-exp-in,
.fw-takeover.is-full  .fw-exp-out { display: none; }

@media (prefers-reduced-motion: reduce) {
    .fw-takeover.is-docked .fw-takeover__modal,
    .fw-takeover.is-full .fw-takeover__modal { animation: none; }
}

/* ---- phone: docked is a bottom sheet, expanded is the screen ---- */
@media (max-width: 700px) {
    .fw-takeover.is-docked .fw-takeover__modal {
        right: 8px; left: 8px; bottom: 8px; width: auto;
        max-height: min(70vh, calc(100vh - 16px));
    }
    .fw-takeover.is-full .fw-takeover__modal {
        inset: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0;
    }
}

/* ---- Chat: less furniture -------------------------------------------------
   By the time this is open the visitor has already clicked a question. The
   starters, the second disclosure and the long privacy paragraph were all
   written for someone deciding whether to start, and they were still on
   screen for someone who already had. Type comes down a step with them.

   The privacy line stays, shortened by CSS rather than deleted: it is the
   sentence that sits where somebody is about to type their details, and it
   is the plugin's, shared with every site. Quieter, not gone. */

/* The sidebar already offers three questions; repeating them inside the chat
   is the same list twice. */
.fw-takeover .asj-chat .asj-chat-starters,
.fw-takeover .asj-chat .asj-chat-starters-label { display: none; }

/* A step down in type, docked especially, where the panel is 390px wide. */
.fw-takeover .asj-chat .asj-chat-msg p,
.fw-takeover .asj-chat .asj-chat-log { font-size: 14.5px; line-height: 1.55; }
.fw-takeover.is-docked .asj-chat .asj-chat-msg p,
.fw-takeover.is-docked .asj-chat .asj-chat-log { font-size: 13.8px; line-height: 1.5; }
/* The legal line is fine print in the plugin and has to stay fine print here:
   the two rules above are more specific than the plugin's, so without this
   the disclosure comes back out at full message size. */
.fw-takeover .asj-chat .asj-chat-msg.is-fine p,
.fw-takeover.is-docked .asj-chat .asj-chat-msg.is-fine p { font-size: 11.5px; line-height: 1.45; }

.fw-takeover .asj-chat textarea { font-size: 14px; }

/*
 * The privacy line is off in the chat panel (Derek, 9 Oct 2026, asked twice).
 * It said "Please don't share your Social Security number, date of birth or
 * account numbers here", which is a sentence for somebody deciding whether to
 * start, shown to somebody who already had.
 *
 * It is hidden here only, not deleted: the plugin still prints it on /ask/ and
 * in the homepage chat, where the chat is the page rather than a panel over
 * one. The protection it describes is not cosmetic either way -- the plugin
 * strips a number out of the message before it reaches the model, and the
 * prompt forbids asking for one, so the behaviour stands without the label.
 */
.fw-takeover .asj-chat .asj-chat-privacy { display: none; }

/* Header, tightened to match. */
.fw-takeover__who b { font-size: 15px; }
.fw-takeover__who span { font-size: 12px; }

/* The composer is one line. The placeholder was wrapping to two and being
   clipped by the box, which read as a bug rather than a hint. Smaller type
   here, and single-post.js shortens the placeholder itself while docked. */
.fw-takeover.is-docked .asj-chat textarea { font-size: 13px; }
.fw-takeover.is-docked .asj-chat textarea::placeholder { font-size: 13px; }
/* No nowrap here: on a textarea that stops what the visitor TYPES from
   wrapping, which is worse than a long placeholder. The placeholder is
   shortened in JS instead. */

/* ---- The chat, minimised to a tab -----------------------------------------
   The X drops to this rather than closing. Someone who asked a question on
   part 3 still has the answer when they reach part 6, and getting back to it
   is one click. The small x on the tab is the real close. */
.fw-takeover.is-tab:not([hidden]) { display: block; background: none; backdrop-filter: none; padding: 0; animation: none; }
.fw-takeover.is-tab .fw-takeover__modal {
    position: fixed; right: 20px; bottom: 20px; left: auto; top: auto;
    width: auto; height: auto; max-height: none;
    border-radius: 999px; overflow: visible;
    box-shadow: 0 14px 34px -10px rgba(16, 24, 35, .5);
    animation: fw-dock-rise .2s cubic-bezier(.2, .8, .3, 1);
}
.fw-takeover.is-tab .fw-takeover__body { display: none; }
.fw-takeover.is-tab .fw-takeover__exp { display: none; }
.fw-takeover.is-tab .fw-takeover__head {
    border-radius: 999px; padding: 8px 10px 8px 8px; cursor: pointer;
}
.fw-takeover.is-tab .fw-takeover__head:hover { background: var(--fw-navy-2, #1d2b3d); }
.fw-takeover.is-tab .fw-takeover__head-in { gap: 9px; }
.fw-takeover.is-tab .fw-takeover__head img { width: 30px; height: 30px; }
.fw-takeover.is-tab .fw-takeover__who b { font-size: 13.5px; }
.fw-takeover.is-tab .fw-takeover__who span { font-size: 11px; }
.fw-takeover.is-tab .fw-takeover__x { width: 26px; height: 26px; font-size: 16px; margin-left: 4px; }
@media (max-width: 700px) {
    .fw-takeover.is-tab .fw-takeover__modal { right: 10px; bottom: 10px; }
    .fw-takeover.is-tab .fw-takeover__who span { display: none; }
}

/* The sidebar follows the reader. It only fits once the trust card is out of
   it: three cards made the column taller than the viewport, and a sticky
   element taller than the screen never actually sticks. */
.fw-post__side { position: sticky; top: 24px; align-self: start; }
@media (max-width: 1000px) { .fw-post__side { position: static; } }

/* The trust row, now at the foot of the article. */
.fw-trustrow { margin: 36px 0 0; padding: 20px 22px; border: 1px solid var(--fw-rule); border-radius: 14px; background: #fbfcfd; }
.fw-trustrow h4 { margin: 0 0 10px; font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--color-primary); }
.fw-trustrow .fw-trust { display: flex; flex-wrap: wrap; gap: 8px; }

/* Office hours: the live line and the "back at" note. */
.fw-card__live { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fw-green-d); }
.fw-card__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 3px rgba(128, 195, 61, .22); }
.fw-card__back { display: block; margin-top: 4px; font-size: 12px; color: var(--fw-muted); }

/* ---- Follow-up chips, and making the chat feel live -----------------------
   Two things were missing. The suggestions under a reply, which the model now
   writes for the moment rather than picking off a list. And motion: messages
   appeared instantly and fully formed, which reads as a page rendering rather
   than somebody answering. */

.fw-takeover .asj-chat-next { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 2px; }
.fw-takeover .asj-chat-nextchip {
    border: 1px solid #cfe3b4; background: #f7fbf4; color: var(--color-primary);
    font: inherit; font-size: 12.5px; line-height: 1.35; text-align: left;
    padding: 7px 11px; border-radius: 999px; cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
    animation: fw-chip-in .26s cubic-bezier(.2, .8, .3, 1) backwards;
}
.fw-takeover .asj-chat-nextchip:nth-child(2) { animation-delay: .07s; }
.fw-takeover .asj-chat-nextchip:hover,
.fw-takeover .asj-chat-nextchip:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.fw-takeover .asj-chat-nextchip:active { transform: translateY(1px); }
@keyframes fw-chip-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Each message arrives rather than appearing. Theirs from the right, his from
   the left, both short: 180ms reads as responsive, 400ms reads as slow. */
/* --fw-in is set per bubble by chat.js so a two or three part reply arrives
   in sequence rather than all at once. Unset on the visitor's own messages,
   where the fallback of 0s is right. */
.fw-takeover .asj-chat-msg { animation: fw-msg-in .2s cubic-bezier(.2, .8, .3, 1) var(--fw-in, 0s) backwards; }
.fw-takeover .asj-chat-msg.is-me { animation-name: fw-msg-in-me; }
@keyframes fw-msg-in    { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes fw-msg-in-me { from { opacity: 0; transform: translateY(7px) translateX(5px); } to { opacity: 1; transform: none; } }

/* The typing indicator exists already; this just gives it the same entrance
   and a touch more life so the wait reads as someone composing. */
.fw-takeover .asj-chat-typing { animation: fw-msg-in .18s ease backwards; }
.fw-takeover .asj-chat-typing span:not(.asj-chat-label) { animation-duration: .9s; }

@media (prefers-reduced-motion: reduce) {
    .fw-takeover .asj-chat-msg,
    .fw-takeover .asj-chat-typing,
    .fw-takeover .asj-chat-nextchip { animation: none; }
}