/* Consultation dialog (consult.js). Loaded after ui.css; uses its tokens. */
.consult{
  --c-ease:cubic-bezier(.23,1,.32,1);
  --c-field:var(--paper-2);
  --c-danger:#b42335;
  width:min(640px,calc(100% - 24px));max-width:none;max-height:min(780px,calc(100dvh - 24px));
  margin:auto;padding:0;border:0;border-radius:var(--radius-tile);overflow:hidden;
  background:var(--paper);color:var(--ink);
  box-shadow:0 24px 80px -12px rgba(10,30,46,.45),0 4px 16px rgba(10,30,46,.12);
  opacity:1;transform:none;
  transition:opacity .26s var(--c-ease),transform .26s var(--c-ease),overlay .26s allow-discrete,display .26s allow-discrete;
}
.consult[open]{display:flex;flex-direction:column}
.consult:not([open]){opacity:0;transform:translateY(6px) scale(.98);transition-duration:.16s}
@starting-style{.consult[open]{opacity:0;transform:translateY(14px) scale(.96)}}
.consult::backdrop{
  background:rgba(10,30,46,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  transition:background-color .26s var(--c-ease),backdrop-filter .26s var(--c-ease),overlay .26s allow-discrete,display .26s allow-discrete;
}
.consult[open]::backdrop{background:rgba(10,30,46,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@starting-style{.consult[open]::backdrop{background:rgba(10,30,46,0);backdrop-filter:blur(0)}}

.consult__form{display:flex;flex-direction:column;min-height:0;flex:1}
.consult svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Head: progress + close */
.consult__head{display:flex;align-items:center;gap:16px;padding:18px 18px 0 32px}
.consult__progress{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:1;margin:0;padding:0;list-style:none}
.consult__progress li{display:grid;gap:8px;font-size:12px;letter-spacing:-.005em;color:var(--ink-2);transition:color .2s ease}
.consult__progress li::before{content:"";height:4px;border-radius:4px;background:var(--paper-2);
  background-image:linear-gradient(var(--blue),var(--blue));background-repeat:no-repeat;background-size:0% 100%;
  transition:background-size .45s var(--c-ease)}
.consult__progress li.is-done::before,.consult__progress li.is-current::before{background-size:100% 100%}
.consult__progress li.is-current{color:var(--ink);font-weight:600}
.consult.is-done .consult__progress li{color:var(--ink-2);font-weight:400}
.consult__close{display:grid;place-items:center;flex:none;width:36px;height:36px;margin-top:-4px;padding:0;border:0;border-radius:50%;
  background:var(--paper-2);color:var(--ink);cursor:pointer;transition:background-color .2s ease,transform .15s var(--c-ease)}
.consult__close:hover{background:#e8e8ed}
.consult__close:active{transform:scale(.92)}
.consult__close svg{width:16px;height:16px;stroke-width:2}

/* Body */
.consult__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 32px 8px}
.consult__panel h2{margin:0;font-size:clamp(28px,4.4vw,36px);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.consult__panel h2:focus{outline:0}
.consult [data-first-name]{color:inherit}
.consult__lede{max-width:46ch;margin:10px 0 24px;font-size:17px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}

/* Step 1: building choice */
.consult__choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;border:0;min-width:0}
.choice{position:relative;display:flex;flex-direction:column;border-radius:20px;background:var(--paper-2);cursor:pointer;
  isolation:isolate;overflow:hidden;transition:transform .16s var(--c-ease),box-shadow .2s ease}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice__media{display:block;aspect-ratio:4/3;overflow:hidden;background:#dfe5ea}
.choice__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--c-ease)}
.choice__text{display:grid;gap:2px;padding:14px 16px 16px}
.choice__text strong{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.choice__text span{font-size:14px;line-height:1.35;color:var(--ink-2)}
.choice__tick{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--blue);color:#fff;opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .3s var(--c-ease)}
.choice__tick svg{width:18px;height:18px;stroke-width:2.4}
.choice:active{transform:scale(.98)}
.choice:has(input:checked){box-shadow:0 0 0 2.5px var(--blue)}
.choice:has(input:checked) .choice__tick{opacity:1;transform:none}
.choice:has(input:focus-visible){box-shadow:0 0 0 2.5px var(--blue),0 0 0 6px rgba(8,125,181,.22)}
.consult__choices.is-invalid .choice{box-shadow:0 0 0 1.5px var(--c-danger)}
@media (hover:hover) and (pointer:fine){
  .choice:hover .choice__media img{transform:scale(1.04)}
}

/* Fields */
.field{display:grid;gap:8px;margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.consult .field input,.consult .field select,.consult .field textarea{
  width:100%;min-height:52px;margin:0;padding:14px 16px;border:0;border-radius:14px;background:var(--c-field);
  font:inherit;font-size:17px;font-weight:400;line-height:1.35;color:var(--ink);
  box-shadow:inset 0 0 0 1px transparent;transition:background-color .18s ease,box-shadow .18s ease}
.consult .field textarea{min-height:150px;resize:vertical}
.consult .field select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
.consult .field select:invalid,.consult .field select:has(option[value=""]:checked){color:var(--ink-2)}
.consult .field ::placeholder{color:#8a8a8f}
.consult .field :is(input,select,textarea):hover{background-color:#ececf0}
.consult .field :is(input,select,textarea):focus{outline:0;background-color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 4px rgba(8,125,181,.18)}
.consult .field [aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--c-danger)}
.consult .field [aria-invalid=true]:focus{box-shadow:inset 0 0 0 1.5px var(--c-danger),0 0 0 4px rgba(180,35,53,.14)}
.consult__error{margin:6px 2px 14px;min-height:0;font-size:13px;line-height:1.35;color:var(--c-danger)}
.consult__error:empty{margin-bottom:18px}
.field__meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.field__meta [data-count]{flex:none;margin-top:6px;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.consult__row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}

/* Done */
.consult__done{padding-top:8px}
.consult__seal{display:grid;place-items:center;width:56px;height:56px;margin-bottom:20px;border-radius:50%;background:var(--blue);color:#fff}
.consult__seal svg{width:28px;height:28px;stroke-width:2.4;stroke-dasharray:24;stroke-dashoffset:24}
.consult.is-done .consult__seal{animation:consult-pop .5s var(--c-ease) both}
.consult.is-done .consult__seal svg{animation:consult-draw .45s .18s var(--c-ease) forwards}
@keyframes consult-pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
@keyframes consult-draw{to{stroke-dashoffset:0}}
.consult__summary{display:grid;grid-template-columns:max-content 1fr;gap:10px 20px;margin:0 0 28px;padding:18px 20px;border-radius:16px;background:var(--paper-2);font-size:15px}
.consult__summary dt{color:var(--ink-2)}
.consult__summary dd{margin:0;overflow-wrap:anywhere}
.consult__done-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-bottom:24px}
.consult__done-actions .button svg{width:18px;height:18px;stroke-width:2}
.consult__dismiss::after{content:none}

/* Foot */
.consult__foot{display:flex;align-items:center;gap:16px;padding:16px 32px 24px;background:var(--paper)}
.consult.is-done .consult__foot{display:none}
.consult__back{min-height:44px;padding:0 4px;border:0;background:none;color:var(--link);font-size:17px;cursor:pointer;transition:opacity .15s ease}
.consult__back:hover{text-decoration:underline;text-underline-offset:3px}
.consult__back[hidden]{display:block;visibility:hidden}
.consult__status{flex:1;margin:0;font-size:13px;line-height:1.4;color:var(--c-danger);text-align:right}
.consult__status a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.consult__next{flex:none;min-width:150px}
.consult__next:disabled{opacity:.6;cursor:progress}

@media (max-width:600px){
  .consult{border-radius:22px}
  .consult__head{padding:16px 14px 0 20px}
  .consult__body{padding:22px 20px 4px}
  .consult__lede{font-size:16px;margin-bottom:20px}
  .consult__choices{gap:10px}
  .choice{border-radius:16px}
  .choice__media{aspect-ratio:1/1}
  .choice__text{padding:12px 12px 14px}
  .choice__text strong{font-size:18px}
  .choice__text span{font-size:13px}
  .consult__row{grid-template-columns:1fr}
  .consult .field textarea{min-height:130px}
  .consult__foot{padding:12px 20px 18px}
  .consult__next{min-width:0;flex:1}
  .consult__foot{flex-wrap:wrap;row-gap:8px}
  .consult__status:not(:empty){order:-1;flex-basis:100%;text-align:left}
  .consult__summary{grid-template-columns:1fr;gap:2px}
  .consult__summary dd{margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){
  .consult,.consult:not([open]){transform:none}
  @starting-style{.consult[open]{transform:none}}
  .choice,.choice__media img,.choice__tick{transition:none;transform:none}
  .consult.is-done .consult__seal{animation:none}
  .consult.is-done .consult__seal svg{animation:none;stroke-dashoffset:0}
}