/* Try Marlo, the sandbox on /desk (markup src/marlo-try.js, behaviour public/assets/marlo-try.js),
   on the site's tokens (styles.css :root). Mobile first: one column in the order of the markup
   (the heading, the box, then what the sample holds), and nothing wider than the screen, down to
   360px. From 960px the heading and the sample share the left column and the box takes the right.

   The calls inside it are the site's own garments (desk-call to choose a size, lean-call for a
   person, stamp-call for the form's submit), only set a size smaller to fit the box. */

.mt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
@media (min-width:960px){
  .mt-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;column-gap:clamp(36px,4.4vw,64px);row-gap:0}
  .mt-head{grid-column:1;grid-row:1}
  .mt-about{grid-column:1;grid-row:2}
  .mt-box{grid-column:2;grid-row:1 / span 2}
}

.mt-head h2{margin-bottom:.35em}
.mt-head .lede{margin:14px 0 0;font-size:clamp(17px,1.5vw,19px)}
@media (min-width:960px){.mt-head .lede{margin-bottom:28px}}
.mt-about .cue{margin-bottom:12px}
.mt-sample{margin-bottom:22px}
.mt-rule{margin:0;padding:14px 16px;border-left:3px solid var(--emerald);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--white);color:var(--slate);font-size:15.5px;line-height:1.55}
.mt-rule b{color:var(--navy)}

/* ---------- the box ---------- */

.mt-box{min-width:0;display:flex;flex-direction:column;gap:14px;padding:18px 16px 16px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow)}
@media (min-width:520px){.mt-box{padding:22px 22px 18px}}

.mt-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding-bottom:12px;border-bottom:1px solid var(--rule-soft)}
.mt-who{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0;line-height:1.3}
.mt-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--emerald)}
.mt-name{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--navy)}
.mt-for{font-size:14px;color:var(--slate)}
.mt-count{margin:0;padding:4px 11px;border-radius:999px;background:var(--emerald-wash);color:var(--emerald-deep);font-size:13.5px;font-weight:700;line-height:1.4;white-space:nowrap}
.mt-count.is-out{background:var(--draft-wash);color:var(--slate)}

/* ---------- the conversation ---------- */

.mt-log{display:flex;flex-direction:column;gap:12px;min-width:0}
.mt-empty{margin:0;padding:12px 14px;border:1px dashed var(--rule);border-radius:12px;color:var(--slate);font-size:14.5px;line-height:1.5}
.mt-empty[hidden]{display:none}

.mt-q{align-self:flex-end;max-width:88%;padding:10px 14px;border-radius:14px;border-bottom-right-radius:6px;background:var(--emerald-ink);color:#fff;font-size:15.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}

.mt-a{align-self:stretch;min-width:0;padding:14px 16px;border:1px solid var(--rule-soft);border-radius:14px;border-bottom-left-radius:6px;background:var(--paper);color:var(--navy);font-size:15.5px;line-height:1.6;overflow-wrap:anywhere}
.mt-a p{margin:0 0 .6em}
.mt-a ul{margin:.2em 0 .6em;padding-left:1.2em}
.mt-a li{margin:.2em 0}
.mt-a-text>:last-child{margin-bottom:0}
.mt-a strong{font-weight:700}
.mt-a sup{font-size:.72em;line-height:0}
.mt-ref{color:var(--emerald-ink);font-weight:700;font-size:.86em;white-space:nowrap}

.mt-src{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}
.mt-src-h{margin:0 0 4px;font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald-ink)}
.mt-src ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mt-src li{font-size:14px;line-height:1.45;color:var(--navy)}
.mt-n{font-family:var(--font-mono);font-size:12.5px;color:var(--emerald-ink)}
.mt-hd{color:var(--slate)}
.mt-person{margin:10px 0 0;padding:8px 11px;border-radius:10px;background:var(--emerald-wash);color:var(--emerald-deep);font-size:13.5px;line-height:1.45}

.mt-err{align-self:stretch;padding:12px 14px;border-radius:12px;background:var(--flag-wash);color:var(--navy);font-size:15px;line-height:1.5}
.mt-err p{margin:0 0 10px}

.mt-typing{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:14px 15px;border:1px solid var(--rule-soft);border-radius:14px;border-bottom-left-radius:6px;background:var(--paper)}
.mt-typing i{width:7px;height:7px;border-radius:50%;background:var(--slate);opacity:.45;animation:mt-dot 1.1s ease-in-out infinite}
.mt-typing i:nth-child(2){animation-delay:.15s}
.mt-typing i:nth-child(3){animation-delay:.3s}
@keyframes mt-dot{0%,80%,100%{transform:none;opacity:.45}40%{transform:translateY(-4px);opacity:1}}

/* ---------- asking ---------- */

.mt-suggest{display:grid;gap:8px}
.mt-suggest[hidden]{display:none}
.mt-label{margin:0;font-size:13px;font-weight:700;color:var(--slate)}
.mt-chip{display:block;width:100%;padding:10px 13px;border:1px solid var(--rule);border-radius:12px;background:var(--white);color:var(--navy);font:600 15px/1.35 var(--font-text);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.mt-chip:hover{border-color:var(--emerald);background:var(--emerald-wash)}
.mt-chip:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}
.mt-chip:disabled{cursor:default;color:var(--faint);background:var(--paper)}
.mt-chip[aria-disabled='true']{cursor:progress;opacity:.6}

.mt-form{display:flex;align-items:flex-end;gap:8px;margin:0}
.mt-form[hidden]{display:none}
.mt-input{flex:1 1 auto;min-width:0;min-height:48px;max-height:160px;margin:0;padding:11px 13px;resize:none;border:1px solid var(--rule);border-radius:12px;background:var(--white);color:var(--navy);font:400 16px/1.45 var(--font-text)}
.mt-input::placeholder{color:var(--faint);opacity:1}
.mt-input:focus{outline:none;border-color:var(--emerald-ink);box-shadow:0 0 0 3px rgba(23,185,120,.25)}
.mt-input:disabled{background:var(--paper)}
.stamp-call.mt-ask{flex:0 0 auto;width:auto;min-height:48px;padding:0 20px}
.stamp-call.mt-ask:disabled{border-color:var(--mist);background:var(--white);color:var(--faint);cursor:default}
.stamp-call.mt-ask[aria-disabled='true']{cursor:progress;opacity:.6}

.mt-hint{margin:-6px 0 0;color:var(--flag);font-size:13.5px;font-weight:700;line-height:1.4}
.mt-hint:empty{display:none}
.mt-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--slate)}

/* ---------- the way forward ---------- */

.mt-next{padding:16px;border-radius:14px;background:var(--emerald-wash)}
.mt-next[hidden]{display:none}
.mt-next-h{margin:0 0 6px;font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.3;color:var(--navy)}
.mt-next-h:focus{outline:none}
.mt-next p{margin:0 0 12px;color:#0C3B28;font-size:15px;line-height:1.55}
.mt-next .mt-next-h{color:var(--navy)}
.mt-off{margin:0 0 10px;color:var(--slate);font-size:14.5px}

.mt-err .calls,.mt-next .calls,.mt-box noscript .calls{gap:8px}
.mt-box .desk-call{padding:11px 18px;font-size:15px}
.mt-box .lean-call{padding:10px 18px;font-size:15px}
.mt-box .lean-call:hover,.mt-box .lean-call:focus-visible{padding-left:22px;padding-right:14px}

@media (prefers-reduced-motion:reduce){.mt-typing i{animation:none;opacity:.8}.mt-chip{transition:none}}