/* fund.html, "Vitin svarar": the page is a chat with Vitin. It is built on sub.css (plates, header, buttons, the hero with its lighthouse) and adds
   only what the chat needs: the panel on the night plate (next to the lighthouse on a wide screen, under it on an upright one), the beam that
   sweeps while Vitin thinks, and the plain request form that opens only when the chat cannot answer. Calm and typographic: no avatars, no times. */

.fund [hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.fund .hero-in { gap: clamp(12px, 2vh, 20px); justify-items: stretch; min-width: 0; }
.fund .hero-in > * { width: 100%; max-width: 680px; min-width: 0; }
.fund .hero h1 { font-size: clamp(1.75rem, min(3vw, 5.5vh), 2.75rem); }
/* the fallback card rises in at once when it opens, not after the opening's delay */
.fund .hero-in > .book { animation-delay: 0s; }

/* ---------- the panel ---------- */
.chat { display: flex; flex-direction: column; min-width: 0; border-radius: 26px; background: rgb(6 26 62 / 0.62); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 24px 60px rgb(2 10 30 / 0.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; }

/* the message list: its own scroll area. On a wide screen it has a steady height, so the page does not move as the talk grows. */
.log { position: relative; display: flex; flex-direction: column; gap: 14px; height: clamp(240px, calc(100dvh - 360px), 540px); overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 22px 18px; scroll-padding: 18px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.3) transparent; }
.log:focus { outline: none; }
.log:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; border-radius: 26px 26px 0 0; }

.msg { max-width: 88%; min-width: 0; }
.msg .t { font-size: 16.5px; line-height: 1.5; letter-spacing: -0.012em; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }
/* Vitin: on the left, lighter, with the small lamp beside it */
.msg.is-vitin { position: relative; align-self: flex-start; padding-left: 22px; }
.msg.is-vitin::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: #ffd29a;
  box-shadow: 0 0 0 4px rgb(255 170 100 / 0.2), 0 0 14px 2px rgb(255 190 120 / 0.55); }
.msg.is-vitin .t { padding: 10px 16px 11px; border-radius: 6px 20px 20px 20px; background: rgb(255 255 255 / 0.1); color: #ffffff; }
/* the visitor: on the right, in a warm bubble */
.msg.is-me { align-self: flex-end; }
.msg.is-me .t { padding: 10px 16px 11px; border-radius: 20px 6px 20px 20px; background: rgb(255 112 52 / 0.3); box-shadow: inset 0 0 0 1px rgb(255 140 96 / 0.62); color: #ffffff; }
.msg.is-me.is-failed .t { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); background: rgb(255 107 44 / 0.12); }
/* a notice on Vitin's side: when the chat cannot answer, is busy, or has grown too long */
.msg.is-note { align-self: flex-start; padding: 2px 0 2px 16px; border-left: 3px solid var(--peach); }
.msg.is-note .t { font-weight: 500; color: #ffffff; }
.msg.is-thinking .t { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }

/* the turning lamp in the thinking bubble */
.lamp { display: block; flex: none; width: 26px; height: 26px; margin: -3px 0 -3px -4px; }
.lamp svg { display: block; overflow: visible; }
.lamp .rays { transform-origin: 20px 20px; animation: turn 2.6s linear infinite; }
.lamp .glow { fill: rgb(255 170 100 / 0.35); transform-origin: 20px 20px; animation: breathe 1.3s ease-in-out infinite; }
.lamp .core { fill: #ffd29a; }
@keyframes turn { to { rotate: 360deg; } }
@keyframes breathe { 0%, 100% { scale: 0.7; opacity: 0.5; } 50% { scale: 1.15; opacity: 1; } }

/* a new message arrives softly */
.msg.is-new, .chips.is-new, .sent-card.is-new { animation: msg-in 0.5s var(--out) both; }
.chips.is-new { animation-delay: 0.15s; }
@keyframes msg-in { from { opacity: 0; translate: 0 10px; } }

/* suggestions under Vitin's latest message */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 22px; margin-top: -4px; }
.chip { position: relative; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 9999px; background: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5);
  color: #ffffff; font: inherit; font-weight: 500; font-size: 15px; line-height: 1.3; letter-spacing: -0.012em; text-align: left; cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.2s var(--out); }
.chip::after { content: ""; position: absolute; inset: -2px -2px; min-height: 44px; }
.chip:hover { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.8); }
.chip:active { transform: scale(0.96); }
.chip:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; border-radius: 9999px; }
.chat.is-busy .chip { opacity: 0.5; cursor: progress; }

/* the confirmation, a small card in the chat */
.sent-card { align-self: stretch; display: grid; gap: 14px; justify-items: start; margin: 4px 0 0 22px; padding: 16px 18px; border-radius: 18px; background: rgb(255 107 44 / 0.16); box-shadow: inset 0 0 0 1.5px rgb(255 138 84 / 0.7); color: #ffffff; } /* the confirmation: the lamp's own orange, as a glow on the night panel (a white card was too hard a light here) */
.sent-card p { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 16.5px; line-height: 1.4; letter-spacing: -0.016em; }
.sent-card svg { flex: none; margin-top: 2px; }
.sent-card .btn, .sent-card .btn.navy { font-size: 15px; padding: 10px 18px; background: var(--gain); color: var(--navy); }
.sent-card .btn:hover, .sent-card .btn.navy:hover { background: var(--gain-hi); }
.sent-card .btn:focus-visible { outline-color: #ffffff; }

/* ---------- the composer: one line that grows to four ---------- */
.composer { display: flex; align-items: flex-end; gap: 10px; padding: 12px 12px 12px 14px; border-top: 1px solid rgb(255 255 255 / 0.14); background: rgb(6 26 62 / 0.4); }
.composer textarea { flex: 1; min-width: 0; display: block; margin: 0; padding: 11px 16px; height: 46px; max-height: calc(4 * 1.4em + 22px); resize: none; overflow-y: hidden;
  border: 1.5px solid rgb(255 255 255 / 0.36); border-radius: 23px; background: rgb(255 255 255 / 0.07); color: #ffffff;
  font: inherit; font-size: 17px; line-height: 1.4; letter-spacing: -0.012em; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.composer textarea::placeholder { color: rgb(255 255 255 / 0.66); opacity: 1; }
.composer textarea:hover { border-color: rgb(255 255 255 / 0.6); }
.composer textarea:focus { outline: none; border-color: #ffffff; background: rgb(255 255 255 / 0.1); box-shadow: 0 0 0 3px rgb(255 107 44 / 0.55); }
.composer textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.send { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--gain); color: var(--navy); cursor: pointer;
  transition: background 0.2s, transform 0.2s var(--out), opacity 0.2s; }
.send:hover { background: var(--gain-hi); }
.send:active { transform: scale(0.92); }
.send:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; border-radius: 50%; }
.send[aria-disabled="true"], .send:disabled { opacity: 0.5; cursor: progress; }
.send:disabled { cursor: not-allowed; }
.send[aria-disabled="true"]:active, .send:disabled:active { transform: none; }

.chat-under { display: grid; gap: 6px; justify-items: start; }
.print { font-size: 14px; line-height: 1.45; max-width: 40em; opacity: 0.8; text-wrap: pretty; }
.under.restart { border: 0; background-color: transparent; font: inherit; font-weight: 600; font-size: 15px; color: inherit; cursor: pointer; }
.hero .under.restart:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* ---------- the big lamp: while Vitin thinks a beam sweeps from the lantern, behind the tower, and the lantern breathes faster ---------- */
.sweep { position: absolute; left: 0; bottom: 0; height: min(100%, 60vw); aspect-ratio: 16 / 9; pointer-events: none; }
.sweep::before { content: ""; position: absolute; left: 25.9%; top: 30.7%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, rgb(255 220 160 / 0) 0deg, rgb(255 220 160 / 0.34) 7deg, rgb(255 220 160 / 0) 15deg, rgb(255 220 160 / 0) 180deg,
    rgb(255 220 160 / 0.34) 187deg, rgb(255 220 160 / 0) 195deg, rgb(255 220 160 / 0) 360deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 4%, rgb(0 0 0 / 0.55) 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 4%, rgb(0 0 0 / 0.55) 40%, transparent 100%);
  transition: opacity 0.8s ease; }
.hero.is-thinking .sweep::before { opacity: 1; animation: turn 5.5s linear infinite; }
.hero.is-thinking .art::after { animation-duration: 1.5s; }

/* ---------- the fallback: the plain request form, on a card under the chat ---------- */
.btn { border: 0; font-family: inherit; cursor: pointer; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: progress; }
.btn[aria-disabled="true"]:active { transform: none; }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.book { display: grid; gap: clamp(16px, 2.6vh, 24px); padding: clamp(20px, 2.6vw, 34px); border-radius: 26px; background: var(--paper); color: var(--navy); box-shadow: 0 18px 50px rgb(2 10 30 / 0.3); }
.book h2 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.12; }
.book-form { display: grid; gap: 18px; }
/* meeting or call: two radio buttons as one segmented control */
.seg { display: inline-flex; justify-self: start; margin: 0; padding: 4px; border: 0; border-radius: 9999px; background: rgb(11 42 92 / 0.08); min-width: 0; }
.seg label { position: relative; display: block; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 10px 20px; border-radius: 9999px; font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: -0.014em; color: var(--navy); transition: background 0.2s, color 0.2s; }
.seg label:hover span { background: rgb(11 42 92 / 0.08); }
.seg input:checked + span { background: var(--navy); color: #ffffff; }
.seg input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 4px rgb(255 107 44 / 0.5); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field label { font-weight: 600; font-size: 15px; letter-spacing: -0.012em; }
.field input { display: block; width: 100%; min-width: 0; margin: 0; padding: 12px 15px; border: 1.5px solid rgb(11 42 92 / 0.32); border-radius: 14px; background: #ffffff; color: var(--navy);
  font: inherit; font-size: 17px; line-height: 1.3; letter-spacing: -0.012em; transition: border-color 0.2s, box-shadow 0.2s; }
.field input:hover { border-color: rgb(11 42 92 / 0.55); }
.field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgb(255 107 44 / 0.5); }
.field input[aria-invalid="true"] { border-color: #b23c08; }
.book-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.fallback { font-weight: 500; font-size: 1.0625rem; line-height: 1.45; max-width: 34em; text-wrap: pretty; }
.fallback a { font-weight: 600; text-underline-offset: 3px; }
.thanks { font-weight: 500; font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.4; letter-spacing: -0.02em; max-width: 30em; }
.thanks:focus, .fallback:focus, .book h2:focus { outline: none; }
.thanks:focus-visible, .fallback:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.pot input { font-size: 16px; }
.pot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* the closing plate: only the person and the ways to reach him */
.fund .contact .wrap { grid-template-columns: minmax(0, 1fr); padding-top: clamp(44px, 7vh, 72px); gap: clamp(20px, 3vh, 32px); }
.fund .contact .card { justify-self: start; grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1000px) and (min-aspect-ratio: 4/5) {
  .fund .hero-in { margin-left: 38%; padding-right: var(--gr); }
}
/* once the form is open, the list gives up some height so the notice above the composer and the form fit on one screen together */
@media (min-aspect-ratio: 4/5) { .hero.has-form .log { height: clamp(180px, calc(100dvh - 640px), 320px); } }
/* a narrow screen that is wider than it is tall: a phone whose browser shrinks the page while the keyboard is open, or a small phone on its side.
   The chat takes the whole width over the picture, and the list leaves room for the composer. */
@media (max-width: 640px) and (min-aspect-ratio: 4/5) {
  .fund .hero-in { margin-left: 0; padding: calc(var(--top-h) + 4px) var(--gr) 24px var(--gl); }
  .fund .hero-in > .chat { width: auto; margin-inline: calc(var(--pad) * -0.45); }
  .fund .hero.has-form .log, .log { height: auto; min-height: 120px; max-height: max(120px, calc(var(--vvh, 100dvh) - 150px)); }
}
@media (max-width: 700px) {
  .fields { grid-template-columns: minmax(0, 1fr); }
}
/* an upright screen: the lighthouse above, the chat under it. The list grows with the talk to a height that leaves room for the composer,
   also when the keyboard is open (--vvh is the visible height, set by fund.js from visualViewport). */
@media (max-aspect-ratio: 4/5) {
  .fund .hero-in { padding-top: min(64vw, 38svh); padding-right: var(--gr); gap: 12px; }
  .fund .hero h1 { font-size: clamp(1.625rem, 8vw, 2.5rem); }
  .fund .hero-in > .chat, .fund .hero-in > .book { width: auto; }
  .chat { margin-inline: calc(var(--pad) * -0.45); border-radius: 22px; }
  .log { height: auto; min-height: 150px; max-height: clamp(150px, calc(var(--vvh, 100dvh) - 150px), 62dvh); padding: 18px 14px 14px; gap: 12px; }
  .msg { max-width: 92%; }
  .msg .t { font-size: 16px; }
  .msg.is-vitin { padding-left: 18px; }
  .msg.is-vitin::before { left: 1px; }
  .chips, .sent-card { padding-left: 18px; }
  .sent-card { margin-left: 18px; padding-left: 16px; }
  .composer { padding: 10px; gap: 8px; }
  .book { margin-inline: calc(var(--pad) * -0.45); }
  .sweep { right: 0; top: 0; bottom: auto; width: 100%; height: auto; aspect-ratio: 900 / 1253; }
  .sweep::before { left: 67.9%; top: 24.4%; width: 190%; }
}
@media (max-width: 360px) {
  .seg span { padding: 10px 14px; }
  .chip { font-size: 14.5px; padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .lamp .rays, .lamp .glow { animation: none; }
  .hero.is-thinking .sweep::before { animation: none; opacity: 0; }
  .hero.is-thinking .art::after { animation: none; opacity: 1; }
  .msg.is-new, .chips.is-new, .sent-card.is-new, .fund .hero-in > .book { animation: none; }
}

/* ---------- arriving out of the beam (html.from-beam, set in the head when the front page's "Spyr Vitan" light carried the visitor here) ----------
   The page opens on the same warm white the front page ended on. The glare withdraws as eyes adjust: the even wash thins first, and a glow
   centred on the lantern shrinks back into the lamp, so the last light on screen is the lamp itself. Then the greeting, then the chips.
   fund.js takes the class off and removes both layers once it is over (about 1.8 s), and at once on a page restored from the back/forward cache. */
.glare, .glare-lamp { display: none; pointer-events: none; }
.from-beam .glare { display: block; position: fixed; inset: -2px; z-index: 50; background: #fff6e6;
  animation: glare-out 0.9s cubic-bezier(0.33, 0, 0.2, 1) 0.06s both; }
@keyframes glare-out { to { opacity: 0; } }
/* the lamp's own glow, on the picture's box (as .flash), so it is centred on the lantern at every size */
.from-beam .glare-lamp { display: block; position: absolute; z-index: 2; left: 0; bottom: 0; height: min(100%, 60vw); aspect-ratio: 16 / 9; }
.glare-lamp::after { content: ""; position: absolute; left: 25.9%; top: 30.7%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff6e6 0%, rgb(255 236 200 / 0.85) 22%, rgb(255 206 150 / 0.45) 50%, rgb(255 170 100 / 0) 100%);
  animation: glare-lamp 1.3s cubic-bezier(0.3, 0, 0.15, 1) both; }
@keyframes glare-lamp { 0% { scale: 11; opacity: 1; } 55% { opacity: 0.9; } 100% { scale: 0.85; opacity: 0; } }
/* the page's own lantern burst would be a second flash; the glare is the arrival */
.from-beam .flash { display: none; }
/* the panel is there early, so the composer can be used as soon as it shows; inside it the greeting, then the chips */
.from-beam .hero-in > .chat { animation-duration: 0.7s; animation-delay: 0.15s; }
.from-beam .hero-in > .chat-under { animation-duration: 0.7s; animation-delay: 0.4s; }
.from-beam #log > .msg:first-child { animation: msg-in 0.55s var(--out) 0.35s both; }
.from-beam #log > .chips:nth-child(2) { animation: msg-in 0.55s var(--out) 0.5s both; }
@media (max-aspect-ratio: 4/5) {
  .from-beam .glare-lamp { right: 0; top: 0; bottom: auto; width: 100%; height: auto; aspect-ratio: 900 / 1253; }
  .glare-lamp::after { left: 67.9%; top: 24.4%; width: 44%; }
}
@media (prefers-reduced-motion: reduce) {
  .from-beam .glare, .from-beam .glare-lamp { display: none; }
}

/* A page with fields is not stacked: its plates follow each other as an ordinary page does. Held plates would let the next
   plate slide over the button or the form when a phone's keyboard opens or a field is scrolled into view. */
.fund .pl { position: relative; top: auto; }

/* ---------- Vitin switched off (<html data-vitin="off">, see the comment at the top of fund.html) ----------
   The page is a plain request form on the night plate: the chat, its small print, the beam and the arrival out of the light are not drawn,
   and the form card stands where the chat sat, from the first paint (the card's hidden attribute is outranked here; fund.js also clears it).
   Remove the attribute and the page is the chat again, exactly as before: everything below applies only under the flag. */
.off-only { display: none !important; }
html[data-vitin="off"] .fund .off-only { display: revert !important; }
html[data-vitin="off"] .fund .field.off-only { display: grid !important; }
html[data-vitin="off"] .fund .chat, html[data-vitin="off"] .fund .chat-under, html[data-vitin="off"] .fund .sweep,
html[data-vitin="off"] .glare, html[data-vitin="off"] .glare-lamp { display: none !important; }
html[data-vitin="off"] .fund #book-card[hidden] { display: grid !important; }
/* the h1 already says it: the card's own heading stays for screen readers only */
html[data-vitin="off"] .fund .book h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the order of arrival: the title, the line under it, then the card */
html[data-vitin="off"] .fund .hero-in > .book { animation-delay: 0.6s; }
html[data-vitin="off"] .fund .hero-in > .lead { max-width: 34em; }
/* the one longer field takes the card's whole width */
.field.wide { grid-column: 1 / -1; }
.field textarea { display: block; width: 100%; min-width: 0; margin: 0; padding: 12px 15px; min-height: 104px; resize: vertical; border: 1.5px solid rgb(11 42 92 / 0.32); border-radius: 14px;
  background: #ffffff; color: var(--navy); font: inherit; font-size: 17px; line-height: 1.4; letter-spacing: -0.012em; transition: border-color 0.2s, box-shadow 0.2s; }
.field textarea:hover { border-color: rgb(11 42 92 / 0.55); }
.field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgb(255 107 44 / 0.5); }
@media (max-aspect-ratio: 4/5) {
  html[data-vitin="off"] .fund .hero-in { gap: 14px; }
  html[data-vitin="off"] .fund .hero .lead { font-size: 16px; }
}
/* a low wide screen (a laptop, 1280x720): the title, the line and the whole card on the first screen */
@media (min-aspect-ratio: 4/5) and (max-height: 820px) and (min-width: 641px) {
  html[data-vitin="off"] .fund .hero-in { padding-top: calc(var(--top-h) + 4px); padding-bottom: 28px; gap: 12px; }
  html[data-vitin="off"] .fund .book { padding: 22px 28px 24px; gap: 14px; }
  html[data-vitin="off"] .fund .book-form { gap: 14px; }
  html[data-vitin="off"] .fund .fields { gap: 10px 18px; }
  html[data-vitin="off"] .fund .field textarea { min-height: 76px; }
}