/* Ask for a change (James, 11 Nov 2026, of attio.com: "this is the level of depth our site needs to have"). The builder's ask box, working
   on the page: a box to type in, examples to press, and the trade's CRM as the glass slab taking each change, with what changed said
   beside it. The box is a pill of glass in a steel rim; an example is a chip that lights lime under the pointer; the part of the CRM
   that changed lands and glows. Loaded after tour.css, on the landing page and on the how page. */
.h-ask{padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,72px);background:linear-gradient(180deg,#eef0f4 0,#fff 32%);overflow:hidden;overflow:clip;scroll-margin-top:20px}
.h-ask .dim{color:var(--faint)}
.a-top,.a-deck{width:min(100% - 64px,1400px);margin-inline:auto}
/* the words at one side and, level with them, the box and its examples */
.a-top{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);align-items:end;gap:clamp(20px,3.4vw,60px)}
.a-head h2{margin-top:12px;font-size:clamp(2.3rem,3.9vw,3.9rem);font-weight:600;line-height:.98;letter-spacing:-.042em}
.a-head h2 .dim{display:block}
.a-head > p:last-child{max-width:44ch;margin-top:14px;color:var(--soft);font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.36;text-wrap:pretty}

/* the box: say it, then the dark button sends it */
.a-ask{min-width:0}
.a-form{display:flex;align-items:center;gap:8px;height:66px;padding:0 6px 0 24px;border-radius:99px;border:5px solid transparent;
  background:linear-gradient(180deg,#fff,#fbfbfc) padding-box,var(--steel) border-box;box-shadow:0 0 0 1px rgba(14,18,28,.1),0 30px 50px -34px rgba(22,30,48,.55);transition:box-shadow .3s}
.a-form:focus-within{box-shadow:0 0 0 1px rgba(63,107,0,.42),0 0 0 6px color-mix(in srgb,var(--accent) 42%,transparent),0 30px 50px -34px rgba(22,30,48,.55)}
.a-form input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;outline:0;font:400 19px/1.2 var(--text);letter-spacing:-.02em;text-overflow:ellipsis}
.a-form input::placeholder{color:var(--faint);opacity:1}
.a-form .btn{flex:none;height:44px;background:var(--ink);color:#fff;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 18px -10px rgba(11,12,14,.7)}
@media (hover:hover){.a-form .btn:hover{background:#2a2d33}}

/* the examples: each is a sentence the rules read for this trade, as it now stands */
.a-chips{display:flex;flex-wrap:wrap;gap:8px;min-height:88px;margin-top:14px}
.a-chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border-radius:99px;background:#fff;box-shadow:var(--edge),0 12px 20px -16px rgba(22,30,48,.5);font-size:15px;line-height:1.25;letter-spacing:-.014em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:a-in .5s var(--ease) both;transition:translate .3s var(--ease),box-shadow .3s}
@media (hover:hover){.a-chip:hover{translate:0 -2px;box-shadow:0 0 0 2.5px var(--accent),0 0 0 3.5px rgba(63,107,0,.34),0 0 26px -6px color-mix(in srgb,var(--accent) 80%,transparent)}}
.a-chip:active{scale:.97}
.a-chip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (pointer:coarse){.a-chip{min-height:44px}}
@keyframes a-in{from{opacity:0;translate:0 8px}}

/* the CRM at one side, and at the other what the rules said and what has been changed */
.a-deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);align-items:start;gap:clamp(20px,3vw,52px);margin-top:clamp(14px,2vw,26px)}
.a-world{margin-left:clamp(-90px,-4vw,0px)}
.a-side{display:grid;gap:16px;min-width:0;padding-top:clamp(16px,3.4vw,56px)}
.a-side [hidden]{display:none}
.a-reply{min-height:112px;padding:18px 20px 18px 24px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.5)),rgba(14,18,28,.05);
  box-shadow:inset 0 0 0 1px rgba(14,18,28,.08),inset 4px 0 0 var(--accent),0 16px 24px -20px rgba(22,30,48,.5);transition:box-shadow .4s}
.a-reply:is([data-kind="ask"],[data-kind="unknown"],[data-kind="not_yet"],[data-kind="same"]){box-shadow:inset 0 0 0 1px rgba(14,18,28,.08),inset 4px 0 0 var(--silver),0 16px 24px -20px rgba(22,30,48,.5)}
.a-reply p{color:var(--ink-2);font-size:16px;line-height:1.38;letter-spacing:-.012em;animation:a-in .5s var(--ease) both}
.a-reply p + p{margin-top:6px}
.a-reply .a-main{color:var(--ink);font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:600;line-height:1.24;letter-spacing:-.022em;text-wrap:balance}
/* an answer that changed nothing is said more quietly than a change */
.a-reply:is([data-kind="ask"],[data-kind="unknown"],[data-kind="not_yet"],[data-kind="same"]) .a-main{font-size:17px;font-weight:500;line-height:1.34;letter-spacing:-.016em}
.a-reply .a-fine,.a-fine{color:var(--soft);font-size:14px}
.a-tries{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.a-tries .a-chip{min-height:36px;padding:5px 14px;font-size:14px;box-shadow:var(--edge)}
.a-made header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.a-made .st-h{margin:0}
.a-made ol{display:grid;gap:5px;margin-top:6px}
.a-made li{display:flex;align-items:baseline;gap:10px;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.8);box-shadow:var(--edge);color:var(--ink-2);font-size:14px;line-height:1.3;animation:a-in .5s var(--ease) both}
.a-made li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,transparent 46%),var(--accent);box-shadow:0 0 0 1px rgba(63,107,0,.45),0 0 8px var(--accent)}
.a-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:4px}

/* ---- on the glass. This CRM keeps its own colour and its own light or dark, whatever the studio above was set to. */
.a-world[data-crm-mode="light"] .surface{--data-page:#f5f5f7;--data-card:#fff;--data-ink:#1d1d1f;--data-ink-2:#6e6e73;--data-line:rgba(0,0,0,.08);--data-line-2:rgba(0,0,0,.16);--data-dark:#1d1d1f;--data-dark-2:#2c2c2e;--data-warn-ink:oklch(44% .115 50);--data-warn-soft:oklch(95.5% .044 66)}
/* after the first deal only the part that changed moves */
.a-world[data-still] :is(.lane,.card):not([data-lit]){animation:none}
.a-world .lanes{scrollbar-width:none;padding-right:130px}   /* room for the last stage to come clear of the faded edge */
/* moved along to show a stage further on: the stages it leaves behind fade at the near edge too */
.a-world .lanes[data-along]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 90%,transparent)}
.a-world [data-lit]{animation:a-land .7s var(--ease) both,a-lit 2.6s var(--ease) both}
@keyframes a-land{from{transform:translateY(20px) scale(.95);opacity:.2}}
@keyframes a-lit{0%,60%{box-shadow:inset 0 0 0 3px #b8f02a,inset 0 0 0 4.5px rgba(63,107,0,.5),inset 0 0 34px #b8f02a}}
/* what the main list holds, along the foot: a field that is added shows here */
.g-slab .surface:has(.a-fields) .lanes{height:268px}
.g-slab .a-fields{display:flex;align-items:center;gap:14px;margin:12px 14px 0;padding:9px 14px;border-radius:var(--corner,16px);white-space:nowrap;overflow:hidden;
  background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / calc(var(--gloss) * .7)) 44%,transparent 58%),linear-gradient(180deg,color-mix(in srgb,#fff calc(var(--gloss) * 100%),var(--data-card)),var(--data-card) 46%,color-mix(in srgb,#000 9%,var(--data-card)) 56%,color-mix(in srgb,#fff calc(var(--gloss) * 55%),var(--data-card)));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / calc(var(--gloss) + .2)),inset 0 -1px 0 rgba(0,0,0,.14),0 0 0 1px color-mix(in srgb,var(--data-ink) 12%,transparent)}
.g-slab .a-fields small{flex:none;color:var(--data-ink);font-size:13px;font-weight:600}
.g-slab .af-row{display:flex;align-items:center;gap:8px;min-width:0;flex:1;overflow:hidden;padding-right:110px;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.g-slab .af{flex:none;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:99px;background:color-mix(in srgb,var(--data-card) 70%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--data-ink) 10%,transparent);font-size:12.5px;font-weight:500}

@media (max-width:899px){
  .a-top,.a-deck{width:calc(100% - 32px)}
  .a-top{grid-template-columns:minmax(0,1fr);gap:18px}
  .a-form{height:58px;padding-left:18px}
  .a-form input{font-size:16px}
  .a-form .btn{height:40px;padding:0 16px;font-size:15px}
  .a-chips{flex-wrap:nowrap;min-height:52px;margin-inline:-16px;padding:4px 16px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .a-chips::-webkit-scrollbar{display:none}
  .a-chips .a-chip{flex:none;white-space:nowrap}
  .a-deck{grid-template-columns:minmax(0,1fr);gap:10px}
  .a-world{margin:0 -10px}
  .a-side{padding-top:0}
  .a-reply{min-height:0}
  .g-slab .surface:has(.a-fields) .lanes{height:190px}
}
/* with motion off nothing lands or fades: the part that changed keeps a still lime rim until the next change */
@media (prefers-reduced-motion:reduce){.a-world [data-lit]{box-shadow:inset 0 0 0 3px #b8f02a,inset 0 0 0 4.5px rgba(63,107,0,.5)}}