/* =====================================================================
   THE HOME PAGE AS A CONVERSATION (PRJ-012 stage 1 part 4, 12 October
   2026). Three layouts were offered; Martin chose B, and A and C were taken
   out on 13 October (WEB-046: "yes remove the home A and C too"). House variables only: no
   hex, no px font sizes, house spacing steps, radii 16 / 12 / 10 / pill.
     .lay-b  just the question: centred, Donnie small above it
   Below each, the plain words (section 16, HP-1 A): the next thing on the
   page, in the page's own content, never the footer.
   ===================================================================== */

/* ---- the conversation, the same in every layout ---- */
.dd-chat{display:flex;flex-direction:column;gap:var(--mcf-s4)}
.dd-log{display:flex;flex-direction:column;gap:var(--mcf-s3);max-height:440px;overflow-y:auto;padding:var(--mcf-s1)}
.dd-log .msg{font-size:var(--mcf-size-body);line-height:1.45}
.dd-chips{display:flex;flex-wrap:wrap;gap:var(--mcf-s2)}
/* what they are buying and its cost sit in Donnie's own bubble, across the chat, one beside the other: the chat's first buttons are a grid of four, so the form takes the whole row (Martin, 4 November 2026: "they dont visually flow on the chat nicely") */
.dd-boxes{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:end;gap:var(--mcf-s3);grid-column:1/-1;flex:1 1 100%;min-width:0;max-width:88%;margin-right:auto;padding:14px;border-radius:var(--mcf-r-inner);background:var(--mcf-page);text-align:left}
.dd-box-acts,.dd-box-warn{grid-column:1/-1}
.dd-pop .dd-boxes{grid-template-columns:minmax(0,1fr);max-width:100%}
@media (max-width:560px){.dd-boxes{grid-template-columns:minmax(0,1fr);max-width:100%}}
.dd-box{display:flex;flex-direction:column;gap:4px}
.dd-box label{font-size:var(--mcf-size-small);color:var(--mcf-grey-strong)}
.dd-box input{width:100%;box-sizing:border-box;min-width:0;min-height:44px;padding:10px 14px;border:1px solid var(--mcf-control);border-radius:var(--mcf-r-control);font:inherit;font-size:var(--mcf-size-body);background:var(--mcf-card);color:var(--mcf-ink)}
.dd-money{display:flex;align-items:center;gap:var(--mcf-s2)}
.dd-money span{font-size:var(--mcf-size-heading);font-weight:600}
.dd-box-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mcf-s2)}
.dd-box-warn{margin:0;color:var(--mcf-bad-text);font-weight:500}
.dd-box-warn:empty{display:none}
.dd-chip{min-height:44px;padding:0 18px;border-radius:var(--mcf-r-pill);border:1px solid var(--mcf-control);background:var(--mcf-card);color:var(--mcf-ink);font:inherit;font-size:var(--mcf-size-body);font-weight:500;cursor:pointer;transition:border-color var(--t-fast) ease,background var(--t-fast) ease}
.dd-chip:hover{border-color:var(--mcf-blue);background:var(--mcf-blue-tint)}
/* THE ANSWER BUTTONS ARE PLAINLY THE ANSWER (WEB-093, Martin, 3 November 2026: "when it needs an answer it needs to
   make it more obvious"): blue, bold, two-pixel edge - the box under them says to pick one. The quiet buttons (Keep
   it, Forget it, Start again...) stay quiet. */
.dd-chip:not(.dd-quiet){border:2px solid var(--mcf-blue);color:var(--mcf-blue);font-weight:600}
/* under the box: Talk to a person, then Change my last answer beside it (WEB-093) */
.dd-undo{margin-left:var(--mcf-s5)}
.dd-ring[hidden]{display:none}
.dd-quiet{border-color:transparent;color:var(--mcf-grey-strong)}
.dd-back{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--mcf-s2);padding:var(--mcf-s1) var(--mcf-s2);border-bottom:1px solid var(--mcf-line);font-size:var(--mcf-size-small);color:var(--mcf-grey-strong)}
/* "Keep this conversation": under the whole chat, small and out of the way (WEB-093, Martin, 3 November 2026: "It
   should really be down below subtly not in the way") */
.dd-keep{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mcf-s1) var(--mcf-s3);padding:0 var(--mcf-s2);font-size:var(--mcf-size-caption);color:var(--mcf-grey)}
.dd-keep-text{flex:1 1 220px}
.dd-keep .dd-chip{min-height:44px;padding:0 10px;font-size:var(--mcf-size-caption);font-weight:500;border-color:transparent;color:var(--mcf-grey-strong)}
.dd-keep-yes{color:var(--mcf-blue)}
.dd-fresh{min-height:44px;color:var(--mcf-blue);font-size:var(--mcf-size-small)}
.dd-input{display:flex;gap:var(--mcf-s2);align-items:center;border:1px solid var(--mcf-control);border-radius:var(--mcf-r-pill);padding:4px 4px 4px 18px;background:var(--mcf-card)}
.dd-input:focus-within{border-color:var(--mcf-blue)}
.dd-input input:disabled,.dd-input button:disabled,.dd-chip:disabled{opacity:.5;cursor:wait}
.dd-input input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:var(--mcf-size-body);color:var(--mcf-ink);min-height:40px}
.dd-input input:focus{outline:none}
.dd-input button{width:40px;height:40px;flex-shrink:0;border-radius:var(--mcf-r-pill);border:0;background:var(--mcf-blue);color:var(--mcf-card);display:grid;place-items:center;cursor:pointer}
.dd-input button .ico{width:18px;height:18px}
.dd-typing{display:flex;gap:var(--mcf-s2);align-items:center;min-height:52px;color:var(--mcf-grey-strong);font-size:var(--mcf-size-body);font-weight:500}
/* the little Donnie: his head and shoulders, cut from the whole drawing */
.dd-think-pic{width:44px;height:44px;flex-shrink:0;border-radius:var(--mcf-r-pill);overflow:hidden;background:var(--mcf-card);animation:dd-think 1.6s ease-in-out infinite}
.dd-think-pic img{display:block;width:96px;max-width:none;height:auto;margin:-10px 0 0 -22px}
@keyframes dd-think{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
.dd-dots{display:flex;gap:4px;align-items:center}
.dd-dots span{width:6px;height:6px;border-radius:var(--mcf-r-pill);background:var(--mcf-blue);animation:dd-dot 1s infinite ease-in-out}
.dd-dots span:nth-child(2){animation-delay:.15s}
.dd-dots span:nth-child(3){animation-delay:.3s}
@keyframes dd-dot{0%,100%{opacity:.3}50%{opacity:1}}
.dd-summary{border:1px solid var(--mcf-line);border-radius:var(--mcf-r-inner);padding:var(--mcf-s5);background:var(--mcf-card);display:flex;flex-direction:column;gap:var(--mcf-s4);align-items:flex-start}
.dd-summary dl{display:grid;grid-template-columns:auto 1fr;gap:var(--mcf-s2) var(--mcf-s5);margin:0;width:100%}
.dd-summary dt{color:var(--mcf-grey);font-size:var(--mcf-size-small)}
.dd-summary dd{margin:0;font-weight:500}
.dd-small{font-size:var(--mcf-size-small);color:var(--mcf-grey)}
.dd-note{font-size:var(--mcf-size-caption);color:var(--mcf-grey)}
.donnie{cursor:pointer}
.donnie svg{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){.dd-dots span,.dd-think-pic{animation:none;opacity:1}}

/* ---- A: side by side ---- */

/* ---- B: just the question ---- */
.lay-b .dd-hero{max-width:760px;margin-inline:auto;padding-block:var(--mcf-s8);display:flex;flex-direction:column;align-items:center;gap:var(--mcf-s5);text-align:center}
.lay-b .donnie{width:min(760px,100%)}
.lay-b .dd-chat{width:100%;text-align:left}
.lay-b .dd-chips{justify-content:center}
.lay-b .dd-log{max-height:360px}
.lay-b .dd-log:not(.dd-started){display:none}
.lay-b .dd-input{padding-block:8px}

/* ---- C: Donnie's corner ---- */

/* ---- Meet Donnie (WEB-049) ---- */
.dd-meet{display:grid;grid-template-columns:5fr 7fr;gap:var(--mcf-s8);align-items:start;padding-block:var(--mcf-s8)}
.dd-meet-head p{font-size:var(--mcf-size-heading);line-height:1.5;color:var(--mcf-ink);max-width:52ch;margin-top:var(--mcf-s4)}
.dd-meet-head .btn{margin-top:var(--mcf-s6)}
.dd-meet-points{list-style:none;margin:0;padding:0;display:grid;gap:var(--mcf-s4)}
.dd-meet-points li{display:flex;gap:var(--mcf-s4);align-items:flex-start;padding:var(--mcf-s5);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-card);background:var(--mcf-card)}
.dd-meet-points .ico{flex:none;width:28px;height:28px;color:var(--mcf-blue)}
.dd-meet-points h3{font-size:var(--mcf-size-heading);margin:0 0 var(--mcf-s1)}
.dd-meet-points p{margin:0;color:var(--mcf-grey-strong);line-height:1.5}
@media (max-width:900px){.dd-meet{grid-template-columns:1fr;gap:var(--mcf-s5)}}

/* ---- the plain words, under every layout ---- */
.dd-plain{display:grid;grid-template-columns:4fr 8fr;gap:var(--mcf-s8);align-items:start}
.dd-plain-text p{font-size:var(--mcf-size-heading);line-height:1.5;color:var(--mcf-ink);max-width:62ch}
.dd-plain-text p+p{margin-top:var(--mcf-s4)}
.dd-doors{display:flex;flex-wrap:wrap;gap:var(--mcf-s2) var(--mcf-s5);margin-top:var(--mcf-s6)}

@media (max-width:900px){
  .dd-plain{grid-template-columns:1fr;gap:var(--mcf-s5)}
}
.dd-float{position:fixed;right:var(--mcf-s5);bottom:var(--mcf-s8);z-index:40;display:flex;align-items:center;gap:var(--mcf-s2);padding:var(--mcf-s2) var(--mcf-s4) var(--mcf-s2) var(--mcf-s2);border-radius:var(--mcf-r-pill);border:1px solid var(--mcf-line);background:var(--mcf-card);color:var(--mcf-ink);font:inherit;font-weight:600;cursor:pointer}
.dd-float[hidden]{display:none}
.dd-float .donnie{display:block;flex-shrink:0;width:44px;height:52px;overflow:hidden}
.dd-float .donnie svg{width:44px;height:auto;margin-top:-2px}

/* ---- the hero's words (Martin, 12 October: "a phrase that screams out ...
   Big an in bold"; "our experienced team"; "in small writing under the
   picture ... Donnie Capybara") ---- */
.dd-who{font-size:var(--mcf-size-small);color:var(--mcf-grey);margin-top:calc(-1 * var(--mcf-s3))}
.dd-ask{font-weight:800;max-width:14ch}
.dd-lead{color:var(--mcf-ink);max-width:36ch}
.lay-b .dd-lead,.lay-b .dd-ask{margin-inline:auto}
/* the next scene comes in gently while Donnie plays through them on his own */
.donnie .dd-scene:not([hidden]){animation:dd-scene-in .6s ease both}
@keyframes dd-scene-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.donnie .dd-scene:not([hidden]){animation:none}}
/* the plain words: the button to Donnie, and the fees' small print (Martin, 12 October: "SMALL PRINT!!") */
.dd-cta{margin-top:var(--mcf-s5)}
.dd-fine{margin-top:var(--mcf-s6);font-size:var(--mcf-size-caption);line-height:1.5;color:var(--mcf-grey);max-width:80ch}
/* eight buttons, four to a line on a wide screen */
.lay-b .dd-chips.dd-first{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.lay-b .dd-chip{padding:0 12px;line-height:1.2}
@media (max-width:760px){.lay-b .dd-chips.dd-first{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The call-back (WEB-016, 12 October): "Prefer a call back?" under the summary, and its short form */
.dd-ring{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--mcf-blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:44px}
.dd-ring:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:2px;border-radius:4px}
.dd-ring-head{margin:0;font-weight:600}
.dd-ring-form{display:flex;flex-direction:column;gap:var(--mcf-s4);width:100%}
.dd-ring-form .field{display:flex;flex-direction:column;gap:6px}
.dd-ring-form textarea{resize:vertical}
.dd-ring-said:empty{display:none}
.dd-ring-said{margin:0;color:var(--mcf-bad-text);font-weight:500}
.dd-ring-done{margin:0;font-weight:600}
.dd-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* A person in the chat (WEB-050): the quiet button under the box, and the team's words in a bubble of their own,
   named - so nobody mistakes a person for Donnie, or Donnie for a person */
.dd-person{align-self:flex-start;font-size:var(--mcf-size-small);min-height:44px}
.dd-person[hidden]{display:none}
.msg-person{align-self:flex-start;background:var(--mcf-card);border:1px solid var(--mcf-blue)}
.dd-person-name{display:block;font-size:var(--mcf-size-small);font-weight:600;color:var(--mcf-blue);margin-bottom:2px}
.msg-person p{margin:0}
.dd-live-note{align-self:center;text-align:center;margin:0;font-size:var(--mcf-size-small);color:var(--mcf-grey-strong);max-width:46ch}
.dd-live-wait{align-self:flex-start}
/* WEB-052: the documents the team asked for - the list, the one button, each file's progress */
.dd-live-docs{align-self:stretch;border:1px solid var(--mcf-blue);border-radius:var(--mcf-r-inner);padding:var(--mcf-s4);background:var(--mcf-card);display:flex;flex-direction:column;gap:var(--mcf-s3);align-items:flex-start}
.dd-live-docs p{margin:0}
.dd-live-apply{display:flex;flex-direction:column;gap:var(--mcf-s3)}
.dd-apply-rows{margin:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:6px var(--mcf-s3);overflow-wrap:anywhere}
.dd-apply-rows dt{color:var(--mcf-grey-strong);font-size:var(--mcf-size-small)}
.dd-apply-rows dd{margin:0}
.dd-apply-tick{display:flex;align-items:flex-start;gap:var(--mcf-s2);min-height:44px;cursor:pointer}
.dd-apply-tick input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--mcf-blue)}
.dd-live-docs ul{margin:0;padding-left:1.2em}
.dd-live-docs .dd-docs-small{font-size:var(--mcf-size-small);color:var(--mcf-grey-strong)}
.dd-docs-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.dd-docs-pick{display:inline-flex;align-items:center}
.dd-docs-file:focus-visible + .dd-docs-pick{outline:2px solid var(--mcf-blue);outline-offset:2px}
.dd-docs-list{display:flex;flex-direction:column;gap:var(--mcf-s1);font-size:var(--mcf-size-small)}
.dd-docs-list:empty{display:none}
.dd-docs-list .is-bad{color:var(--mcf-bad-text)}
.dd-ref{margin:0;display:flex;flex-direction:column;gap:2px}
.dd-ref span{font-size:var(--mcf-size-small);color:var(--mcf-grey)}
.dd-ref strong{font-size:1.5rem;letter-spacing:.06em;font-variant-numeric:tabular-nums}
/* WEB-042: where Donnie sends people (buttons, never typed addresses), and the weather moment */
/* WEB-046: plainly pages to read, not answers - a note, then underlined links, never the answer pills */
.dd-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--mcf-s1) var(--mcf-s4);margin:var(--mcf-s1) 0 0;padding:var(--mcf-s2) var(--mcf-s3);border-left:3px solid var(--mcf-blue-tint);max-width:100%}
.dd-links-note{flex:0 0 100%;margin:0;font-size:var(--mcf-size-small);color:var(--mcf-grey)}
.dd-read{color:var(--mcf-blue);font-size:var(--mcf-size-body);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.dd-read:hover{color:var(--mcf-blue-hover)}
.dd-new{text-decoration:none;display:inline-block}
.dd-weather-show{align-self:flex-start;width:100%;max-width:380px}
.dd-weather-show svg{display:block;width:100%;height:auto}

/* =====================================================================
   DONNIE EVERYWHERE (WEB-047, Martin, 13 October): the corner's panel and
   Apply's full page. The panel is the site's own (site-v2.css .chat-panel);
   Donnie's chat fills it below the head.
   ===================================================================== */
.chat-full{margin-left:auto;font-size:var(--mcf-size-small);color:var(--mcf-blue);white-space:nowrap}
.chat-full:hover{text-decoration:underline}
.dd-pop{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--mcf-s3);padding:var(--mcf-s3)}
.dd-pop .dd-log{flex:1;min-height:0;max-height:none;font-size:var(--mcf-size-table)}
.dd-pop .dd-chips{max-height:40%;overflow-y:auto}
.dd-pop .dd-chip{font-size:var(--mcf-size-table);padding:0 14px}
.dd-pop .dd-back,.dd-pop .dd-keep{padding:var(--mcf-s1) 0}
.lay-b .dd-full{min-height:calc(100vh - var(--head-h));display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:var(--mcf-s5);padding-bottom:var(--mcf-s6)}
.lay-b .dd-full .dd-powered{margin:calc(-1 * var(--mcf-s3)) 0 0;font-size:var(--mcf-size-body);color:var(--mcf-grey-strong)}
.lay-b .dd-full .dd-full-donnie{width:150px;max-width:150px;margin:0 auto var(--mcf-s3)}
.dd-full-donnie svg{display:block;width:100%;height:auto}
.dd-full .dd-chat{width:100%;max-width:760px}
.lay-b .dd-full .dd-log{max-height:52vh}
.dd-full-page .chat{display:none}

/* PHONE THUMBS (Martin, 14 October 2026: "every page we build must also be
   optimised for easy viewing on a phone"). On a phone everything pressed is at
   least 44 pixels each way - Apple's guidelines, the house north star -
   held by tools/check-mockups.mjs at 390 and 375. */
@media (max-width:767px){
  .dd-input input{min-height:44px}
  .dd-input button{width:44px;height:44px}
  /* on a phone the chat is plainly its own box, apart from the page's headings, and its scroll is its own (WEB-093,
     Martin: "header sections dont scroll down well with the chats. The chat boxees need more of a defining outline so
     that it makes it obvious what a chat scroll is and what a header is"). The corner panel (.dd-pop) is a box already. */
  .dd-chat:not(.dd-pop){border:2px solid var(--mcf-control);border-radius:var(--mcf-r-card);padding:var(--mcf-s3);background:var(--mcf-card)}
  .dd-chat:not(.dd-pop) .dd-log{max-height:min(440px,55vh);padding-bottom:var(--mcf-s2);border-bottom:1px solid var(--mcf-line)}
}

/* The free checklist, "10 questions to ask any finance broker" (S280, Martin "2A"): printed on its own, under our details */
.hc-print-head{display:none}
@media print{
  body.site > *:not(main),main > *:not(#checklist),#checklist [data-print],#checklist .prose,.mock{display:none !important}
  #checklist{padding:0}
  .hc-print-head{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--mcf-s5);padding-bottom:var(--mcf-s4);border-bottom:1px solid var(--mcf-line);font-size:var(--mcf-size-small)}
  .hc-print-head b{font-size:var(--mcf-size-section)}
  .hl-dl>div{break-inside:avoid}
}