/* Canarlo-site additions to Mizu (2026-10-25): the website report, the build
 * sketch, the "showing you" note, the sound button and the section
 * spotlight. Kept out of mizu.css, which is extracted from the bundle and
 * overwritten on every Mizu update. Uses the bundle's --mz-* colours. */

.mzx-card { margin-top: 10px; padding: 16px; border: 1px solid var(--mz-line, rgba(135,155,255,.16)); border-radius: 16px; background: rgba(255,255,255,.035); color: var(--mz-ink, #eaedff); display: grid; gap: 10px; }
.mzx-eyebrow { font-family: var(--mz-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--mz-dim, #8f98c6); }
.mzx-small { font-size: 11.5px; line-height: 1.45; color: var(--mz-dim, #8f98c6); }
.mzx-note p { margin: 0; font-size: 14px; }
.mzx-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mzx-primary { background: var(--mz-blue, #3d73f5) !important; border-color: var(--mz-blue, #3d73f5) !important; color: #fff !important; }
.mzx-went { margin-top: 8px; font-size: 12.5px; color: var(--mz-dim, #8f98c6); }
.mzx-went b { color: var(--mz-ink, #eaedff); font-weight: 500; }

/* ---- website report ---- */
.mzx-rhead { display: flex; align-items: center; gap: 14px; }
.mzx-dial { width: 64px; height: 64px; flex: none; transform: rotate(-90deg); }
.mzx-dial circle { fill: none; stroke-width: 6; }
.mzx-dial .mzx-track { stroke: rgba(255,255,255,.08); }
.mzx-dial .mzx-val { stroke-linecap: round; animation: mzx-dial 1.2s cubic-bezier(.2,.7,.2,1) both; }
.mzx-dial.mzx-good .mzx-val { stroke: #5fdca0; }
.mzx-dial.mzx-ok .mzx-val { stroke: #f2b84b; }
.mzx-dial.mzx-bad .mzx-val { stroke: #ff6b6b; }
@keyframes mzx-dial { from { stroke-dasharray: 0 100; } }
.mzx-score { display: block; margin-top: 2px; font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.mzx-score small { font-size: 13px; font-weight: 400; color: var(--mz-dim, #8f98c6); margin-left: 2px; }
.mzx-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--mz-dim, #8f98c6); }
.mzx-sum i, .mzx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 99px; margin-right: 3px; }
i.mzx-fail, .mzx-f.mzx-fail .mzx-dot { background: #ff6b6b; }
i.mzx-warn, .mzx-f.mzx-warn .mzx-dot { background: #f2b84b; }
i.mzx-pass, .mzx-f.mzx-pass .mzx-dot { background: #5fdca0; }
.mzx-measured { display: grid; gap: 6px; }
.mzx-formula { margin-top: -2px; }
.mzx-ns { opacity: .78; }
.mzx-ns .mzx-dot { opacity: .5; }
.mzx-speed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mzx-speed span { padding: 8px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: 10.5px; color: var(--mz-dim, #8f98c6); }
.mzx-speed b { display: block; font-size: 15px; color: var(--mz-ink, #eaedff); font-weight: 600; }
.mzx-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 340px; overflow: auto; }
.mzx-f { display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; padding: 8px 4px; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; animation: mzx-in .4s ease both; }
.mzx-f .mzx-dot { grid-row: span 3; margin-top: 6px; }
.mzx-fl { display: flex; justify-content: space-between; gap: 8px; }
.mzx-fl b { font-weight: 500; }
.mzx-area { font-family: var(--mz-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mz-dim, #8f98c6); }
.mzx-fd { color: rgba(234,237,255,.78); overflow-wrap: anywhere; }
.mzx-fix { color: var(--mz-blue-hi, #6b95ff); font-size: 12.5px; }
.mzx-f:nth-child(2) { animation-delay: .05s; } .mzx-f:nth-child(3) { animation-delay: .1s; } .mzx-f:nth-child(4) { animation-delay: .15s; } .mzx-f:nth-child(5) { animation-delay: .2s; } .mzx-f:nth-child(n+6) { animation-delay: .25s; }
@keyframes mzx-in { from { opacity: 0; transform: translateY(4px); } }

/* ---- build sketch ---- */
.mzx-title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.mzx-sub { margin-top: 2px; font-family: var(--mz-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mz-dim, #8f98c6); }
.mzx-mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.mzx-mods li { padding: 10px; border: 1px solid var(--mz-line, rgba(135,155,255,.16)); border-radius: 12px; display: grid; gap: 3px; font-size: 12.5px; color: rgba(234,237,255,.75); animation: mzx-in .4s ease both; }
.mzx-mods b { color: var(--mz-ink, #eaedff); font-weight: 500; font-size: 13.5px; }
.mzx-bespoke { margin: 0; padding-left: 18px; font-size: 13px; color: rgba(234,237,255,.82); display: grid; gap: 3px; }
.mzx-phases { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.mzx-phases li { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; font-size: 13px; color: rgba(234,237,255,.75); }
.mzx-phases .mzx-n { grid-row: span 2; font-family: var(--mz-mono); font-size: 11px; color: var(--mz-dim, #8f98c6); padding-top: 2px; }
.mzx-phases a { color: var(--mz-ink, #eaedff); text-decoration: none; }
.mzx-phases a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---- the sound button: bottom left, clear of Mizu's canvas ---- */
.mzx-sound {
  position: fixed; left: 18px; bottom: 18px; z-index: 50;
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(17,18,16,.18); background: rgba(247,246,242,.82); color: #111210;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .25s ease, border-color .25s ease;
}
/* in dev, Next's own badge sits in that corner */
body:has(nextjs-portal) .mzx-sound { left: 68px; }
.mzx-sound:hover { border-color: rgba(17,18,16,.4); background: #f7f6f2; }
.mzx-sound:focus-visible { outline: 2px solid #5b8cff; outline-offset: 3px; }
.mzx-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.mzx-bars i { width: 2px; height: 3px; border-radius: 2px; background: currentColor; transition: height .3s ease; }
.mzx-sound[aria-pressed="true"] .mzx-bars i { animation: mzx-eq 1.4s ease-in-out infinite; }
.mzx-sound[aria-pressed="true"] .mzx-bars i:nth-child(2) { animation-delay: -.5s; }
.mzx-sound[aria-pressed="true"] .mzx-bars i:nth-child(3) { animation-delay: -.9s; }
.mzx-sound[aria-pressed="true"] .mzx-bars i:nth-child(4) { animation-delay: -.25s; }
@keyframes mzx-eq { 0%, 100% { height: 3px; } 50% { height: 13px; } }

/* ---- the spotlight Mizu puts on a section she takes you to ---- */
.mzx-spot:not(.mzx-spot-sm) { position: relative; }
.mzx-spot::after {
  content: ""; position: absolute; inset: 10px; z-index: 5; pointer-events: none;
  border-radius: 24px; border: 2px solid rgba(91,140,255,.75);
  box-shadow: 0 0 0 6px rgba(91,140,255,.14), 0 0 60px rgba(91,140,255,.25);
  animation: mzx-spot 3.2s ease both;
}
/* a card, sub-heading or link she points at: a snug ring drawn on the element itself (outline + shadow), so it never changes
   its position and an overflow:hidden card can't clip it */
.mzx-spot.mzx-spot-sm::after { content: none; }
.mzx-spot-sm { outline: 2px solid transparent; outline-offset: 5px; animation: mzx-spot-sm 3.2s ease both; }
@keyframes mzx-spot-sm {
  0% { outline-color: transparent; box-shadow: 0 0 0 0 rgba(91,140,255,0); }
  12%, 75% { outline-color: rgba(91,140,255,.75); box-shadow: 0 0 0 9px rgba(91,140,255,.14), 0 0 50px rgba(91,140,255,.25); }
  100% { outline-color: transparent; box-shadow: 0 0 0 0 rgba(91,140,255,0); }
}
@keyframes mzx-spot { 0% { opacity: 0; transform: scale(1.015); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mzx-dial .mzx-val, .mzx-f, .mzx-mods li, .mzx-spot::after { animation: none; }
  .mzx-spot-sm { animation: none; outline-color: rgba(91,140,255,.75); }
  .mzx-sound[aria-pressed="true"] .mzx-bars i { animation: none; height: 9px; }
}

/* ---- the estimate card ---- */
.mzx-price { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(61,115,245,.12); border: 1px solid rgba(107,149,255,.28); }
.mzx-price b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.mzx-price span { font-size: 12px; color: var(--mz-dim, #8f98c6); }
.mzx-caveat { margin: 0; font-size: 13px; line-height: 1.5; color: #f2c879; }
.mzx-blueprint { margin: 0; font-size: 13px; color: rgba(234,237,255,.82); }
.mzx-blueprint a { color: var(--mz-blue-hi, #6b95ff); }

/* ---- her introduction ---- */
.mzx-can { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mzx-can button {
  width: 100%; display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; text-align: left; cursor: pointer;
  padding: 9px 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit; font: inherit;
  transition: background .2s ease, border-color .2s ease;
}
.mzx-can button:hover, .mzx-can button:focus-visible { background: rgba(255,255,255,.05); border-color: var(--mz-line, rgba(135,155,255,.16)); outline: none; }
.mzx-can .mzx-n { grid-row: span 2; font-family: var(--mz-mono); font-size: 11px; color: var(--mz-blue-hi, #6b95ff); padding-top: 2px; }
.mzx-can b { font-size: 14px; font-weight: 500; }
.mzx-can span:last-child { font-size: 12.5px; color: var(--mz-dim, #8f98c6); }
.mzx-can li { animation: mzx-in .45s ease both; }
.mzx-can li:nth-child(2) { animation-delay: .08s; } .mzx-can li:nth-child(3) { animation-delay: .16s; } .mzx-can li:nth-child(4) { animation-delay: .24s; } .mzx-can li:nth-child(5) { animation-delay: .32s; }

/* suggested replies now sit in the conversation, under her latest answer */
.mz-body .mz-chips { padding: 6px 4px 4px; }
@media (prefers-reduced-motion: reduce) { .mzx-can li { animation: none; } }

/* ---- the call button in Mizu's header ---- */
.mzx-call { width: auto !important; min-width: 32px; gap: 6px; padding: 0 9px !important; display: inline-flex; align-items: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.mzx-call[data-state="live"] { background: rgba(255,107,107,.18) !important; border-color: rgba(255,107,107,.45) !important; color: #ffb3b3 !important; }
.mzx-call[data-state="connecting"] { color: var(--mz-dim, #8f98c6) !important; }
.mzx-call[data-state="live"] svg { animation: mzx-ring 1.6s ease-in-out infinite; }
@keyframes mzx-ring { 0%, 100% { transform: none; } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .mzx-call[data-state="live"] svg { animation: none; } }