/* mix — "Yours from minute one" (#mix, on /day/), a plum sheet with two objects on it:
   rules: a paper card holding a plum clay phone (a cream screen; you are gold clay, Brain Club is white paper, a saved rule is a plum chip);
   the world: a paper card, a clay globe (globe.js) breaking out of its corner, four paper chips with star ticks.
   Prefix mx-. Every surface is a recipe of kit.css; no new colour. */

.mx-grid{display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);gap:clamp(14px,1.8vw,24px)}

/* ── the paper cards ── */
.mx-card{--ink:#2a0a1c;--ink-2:#5b2a44;--ink-3:#7a4a62;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.7vw,38px);border-radius:var(--r-xl);background:var(--k-paper);box-shadow:var(--k-paper-shadow),0 40px 60px -34px rgba(20,0,10,.65);color:var(--ink)}
.mx-h3{font-size:clamp(1.5rem,2.25vw,2.05rem);font-stretch:94%;letter-spacing:-.03em;line-height:1.04;color:var(--plum-600);max-width:15em}
.mx-p{margin-top:12px;max-width:31em;color:var(--ink-2);font-size:1rem;line-height:1.55}
.mx-card :focus-visible{outline-color:var(--plum-400)}

/* tabs on a light ground (the kit's plum-sheet tabs are for the sheet itself) */
.k-tabs.mx-tabs{margin-top:24px;background:rgba(100,8,46,.08);box-shadow:inset 0 1px 2px rgba(100,8,46,.14)}
.mx-tabs .k-tab{color:var(--ink-2)}
.mx-tabs .k-tab:hover{color:var(--plum-600)}
.mx-tabs .k-tab[aria-pressed="true"]{color:var(--cream-50);background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow)}

/* ── rules: the plum phone ── */
.mx-ph{position:relative;align-self:stretch;flex:1;display:flex;margin-top:22px;padding:10px;border-radius:38px;background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow),inset 0 0 0 3px rgba(255,255,255,.06),0 36px 50px -28px rgba(60,6,30,.7)}
.mx-ph::before{content:"";position:absolute;inset-inline-end:-4px;top:84px;width:5px;height:58px;border-radius:3px;background:linear-gradient(90deg,#a3205f,#7a0f44);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.mx-ph-scr{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;border-radius:29px;overflow:hidden;background:#fff4dc;box-shadow:inset 0 0 0 2px rgba(0,0,0,.16),inset 0 8px 16px rgba(60,6,30,.1)}
.mx-ph-scr::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 30%)}
.mx-ph-bar{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:13px 16px;background:linear-gradient(180deg,#fffaf0,#fff0cf);box-shadow:0 6px 12px -10px rgba(90,40,0,.45)}
.mx-ph-av{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--cream-50);box-shadow:inset 0 0 0 2px rgba(100,8,46,.1),0 6px 10px -6px rgba(90,40,0,.45)}
.mx-ph-av img{width:30px;height:auto}
.mx-ph-who{display:grid;gap:4px;min-width:0}
.mx-ph-who b{font:750 1.02rem/1 var(--display);letter-spacing:-.01em;color:var(--plum-600)}
.mx-ph-who small{font:500 .78rem/1.15 var(--text);color:#2f7a4d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-ph-ex{margin-inline-start:auto}
.mx-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:318px;padding:18px 16px;background-color:#fdf0d2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 22 29.600 26.400 34 28 29.600 29.600 28 34 26.400 29.600 22 28 26.400 26.400Z' fill='%23d9a441' fill-opacity='.22'/%3E%3C/svg%3E")}
.mx-b{max-width:86%;padding:11px 15px;border-radius:20px;font-size:.95rem;line-height:1.42;overflow-wrap:anywhere}
.mx-b--me{align-self:flex-end;border-end-end-radius:6px;background:var(--k-grain),var(--k-gold-clay);box-shadow:var(--k-gold-shadow);color:var(--plum-700);font-weight:550;transform-origin:100% 100%}
.mx-b--as{align-self:flex-start;border-end-start-radius:6px;background:#fff;color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.03),0 14px 20px -14px rgba(110,50,0,.5);transform-origin:0 100%}
.mx-saved{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;max-width:94%;padding-block:8px; padding-inline:8px 16px;border-radius:999px;background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow);color:var(--cream-50);font:650 .86rem/1.25 var(--display);transform-origin:0 50%}
.mx-saved i{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--k-gold-clay);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.mx-saved svg{width:15px;height:15px;fill:none;stroke:var(--plum-700);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mx-when{align-self:center;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 3px 6px -3px rgba(90,40,0,.3);font:650 .75rem/1.1 var(--text);color:var(--ink-3)}
.mx-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.mx-yes,.mx-no{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;font:700 .86rem/1 var(--display)}
.mx-yes{color:var(--cream-50);background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow)}
.mx-no{color:var(--plum-600);box-shadow:inset 0 0 0 2px rgba(100,8,46,.32)}
.mx-in{animation:mx-in .6s var(--spring) both}
@keyframes mx-in{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}

/* ── the world: a clay globe in the corner, paper chips ── */
.mx-globe{position:absolute;z-index:-1;top:-58px;inset-inline-end:-70px;width:min(56%,320px);height:auto;aspect-ratio:1;pointer-events:none}
.mx-world .mx-h3{max-width:8.6em}
.mx-world .mx-p{max-width:14em}
.mx-prop{position:absolute;z-index:1;height:auto;pointer-events:none;transform:rotate(var(--r,0deg));filter:drop-shadow(0 14px 12px rgba(70,8,36,.32));animation:k-float 7s ease-in-out infinite}
.mx-prop--mag{top:150px;inset-inline-end:186px;width:76px;--r:-16deg}
.mx-prop--shield{top:208px;inset-inline-end:24px;width:60px;--r:12deg;animation-duration:8s;animation-delay:-3.5s}
.mx-facts{align-self:stretch;display:grid;gap:10px;margin-top:auto;padding-top:28px}
.mx-facts li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding-block:14px 15px; padding-inline:14px 18px;border-radius:22px;background:linear-gradient(180deg,#fff9ea,#fdeecd);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(160,100,20,.08),0 12px 20px -14px rgba(90,40,0,.5)}
.mx-facts img{width:26px;height:auto;margin-top:1px;filter:drop-shadow(0 4px 4px rgba(130,70,0,.35))}
.mx-facts b{display:block;font:750 1.02rem/1.2 var(--display);letter-spacing:-.01em;color:var(--plum-600)}
.mx-facts span{display:block;margin-top:3px;font-size:.92rem;line-height:1.45;color:var(--ink-2)}

/* ── narrower ── */
@media (max-width:1020px){
  .mx-grid{grid-template-columns:minmax(0,1fr)}
  .mx-globe{top:-46px;inset-inline-end:-50px;width:min(34%,260px)}
  .mx-prop--mag{top:118px;inset-inline-end:150px;width:62px}
  .mx-prop--shield{top:160px;inset-inline-end:14px;width:50px}
  .mx-world .mx-facts{padding-top:54px}
  .mx-world .mx-h3{max-width:10em}
  .mx-world .mx-p{max-width:19em}
  .mx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .mx-card{padding:24px 18px 20px}
  .mx-globe{position:relative;z-index:0;top:auto;inset-inline-end:auto;align-self:center;width:min(100%,300px);margin:-10px auto 4px}
  .mx-prop--mag{top:200px;inset-inline-end:auto;inset-inline-start:12px;width:58px}
  .mx-prop--shield{top:26px;inset-inline-end:14px;width:48px}
  .mx-world .mx-h3,.mx-world .mx-p{max-width:none}
  .mx-facts{grid-template-columns:minmax(0,1fr)}
  .mx-world .mx-facts{padding-top:24px}
  .k-tabs.mx-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-self:stretch;border-radius:26px}
  .mx-tabs .k-tab{justify-content:center;height:auto;min-height:44px;padding:7px 10px;font-size:.875rem;line-height:1.15;text-align:center;white-space:normal}
  .mx-ph-who small{white-space:normal}
  .mx-ph{padding:8px;border-radius:32px}
  .mx-ph-scr{border-radius:25px}
  .mx-chat{min-height:0;padding:14px 12px}
  .mx-b{max-width:92%}
}