/* Extra interactives for the five case studies added 2026-10-14 (Nine Star, Faria Accountancy, Pastelaria, Soul Beauty,
   Auburn Sewing). The films, the before-and-after slider, the timeline, the taps and the dials are case-study.css's own
   (shared with Petiscos and South County); this file only adds the signature demos, every class prefixed mx- so nothing
   here touches the shared components. Corners keep Rav's rule: 8 px panels and buttons, 6 px on pictures. */

.mx-ix{margin-top:30px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:22px; color:var(--ink);}
.mx-ix h3{font-size:clamp(19px,2.2vw,23px); margin:0 0 6px;}
.mx-ix .mx-lede{color:#4b525d; margin:0 0 16px; max-width:64ch; font-size:15.5px;}
.mx-ix .mx-note{margin-top:14px; font-size:13.5px; color:var(--dim); max-width:66ch;}
.mx-row{display:flex; flex-wrap:wrap; gap:8px;}
.mx-btn{min-height:44px; padding:0 15px; border-radius:8px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink);
  font:600 15px/1 'Space Grotesk','Segoe UI',system-ui,sans-serif; cursor:pointer; transition:border-color .15s, background .15s;}
.mx-btn:hover{border-color:var(--terra);}
.mx-btn[aria-pressed="true"], .mx-btn[aria-selected="true"]{background:var(--pine-d); border-color:var(--pine-d); color:#fff;}
.mx-btn:focus-visible{outline:3px solid var(--terra); outline-offset:2px;}
.mx-out{margin-top:16px; padding:16px 18px; border-radius:8px; background:var(--cream); border:1px solid var(--line); min-height:64px; max-width:72ch;}
.mx-out b{font-family:'Space Grotesk',sans-serif;}
.mx-out .mx-yes{color:var(--pine);} .mx-out .mx-no{color:var(--terra-d);}

/* the old address, described where no copy of it exists */
.mx-nosite{max-width:320px; aspect-ratio:780/1688; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:26px 20px; margin:0 auto;
  border:8px solid #1e222a; border-radius:18px; color:#4b525d; background:repeating-linear-gradient(135deg,#f4f2ec 0 12px,#efece4 12px 24px);}
.mx-nosite b{font:700 20px/1.2 'Space Grotesk',sans-serif; color:var(--ink);}
.mx-nosite span{font-size:14.5px; line-height:1.5;}
.mx-pairs{display:grid; grid-template-columns:repeat(2,minmax(0,320px)); gap:26px; align-items:start;}
.mx-pairs > div{min-width:0;}
.mx-pairs .mx-tag{display:inline-block; font:700 10.5px/1 'IBM Plex Mono',monospace; letter-spacing:1.8px; text-transform:uppercase; padding:6px 8px; border-radius:6px; margin-bottom:10px;}
.mx-pairs .mx-tag.was{background:#ece7dc; color:#5d6470;}
.mx-pairs .mx-tag.now{background:#e3ece6; color:var(--pine);}
@media(max-width:700px){ .mx-pairs{grid-template-columns:1fr 1fr; gap:12px;} .mx-nosite{padding:16px 12px; border-width:6px; border-radius:14px;} .mx-nosite b{font-size:16px;} .mx-nosite span{font-size:13px;} }

/* five checks, then and now */
.mx-ck{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;}
.mx-ck > div{border:1px solid var(--line); border-radius:8px; padding:16px; background:var(--paper); min-width:0;}
.mx-ck .was{background:#f6f2ea;}
.mx-ck h4{font:700 11px/1.3 'IBM Plex Mono',monospace; letter-spacing:1.6px; text-transform:uppercase; color:var(--dim); margin-bottom:8px;}
.mx-ck p{font-size:15px; margin:0; color:#3d434d;}
.mx-score{display:flex; align-items:center; gap:10px; margin-bottom:10px; font:700 15px 'Space Grotesk',sans-serif;}
.mx-sbar{flex:1; height:8px; border-radius:4px; background:#e6e1d6; overflow:hidden;}
.mx-sbar i{display:block; height:100%; background:var(--terra);}
@media(max-width:700px){ .mx-ck{grid-template-columns:1fr;} }

/* a searchable list (the pastry case, the treatment finder) */
.mx-fs-top{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.mx-fs-top input{flex:1 1 240px; min-height:46px; padding:0 14px; border:1.5px solid var(--line); border-radius:8px; font:16px 'IBM Plex Sans',sans-serif; background:#fff; color:var(--ink);}
.mx-fs-top input:focus-visible{outline:3px solid var(--terra); outline-offset:1px;}
.mx-count{font:600 13px 'IBM Plex Mono',monospace; color:var(--dim); margin:12px 0 8px;}
.mx-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px;}
.mx-list li{border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--paper);}
.mx-list li b{display:block; font:700 15px/1.3 'Space Grotesk',sans-serif;}
.mx-list li span{display:block; font-size:13px; color:var(--dim); margin-top:2px;}
.mx-list li[hidden]{display:none;}
@media(max-width:560px){ .mx-list{grid-template-columns:1fr 1fr; gap:6px;} .mx-list li{padding:8px 10px;} .mx-list li b{font-size:14px;} .mx-list li span{font-size:12px;} }

/* the texture picker */
.mx-tx{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start;}
.mx-tx img{border-radius:6px; border:1px solid var(--line); width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;}
@media(max-width:700px){ .mx-tx{grid-template-columns:1fr;} }

/* sew a line */
.mx-stitch{position:relative; height:220px; border-radius:8px; border:1px solid var(--line); overflow:hidden; touch-action:none;
  background:radial-gradient(circle at 20% 30%, #e9dccb 0 2px, transparent 3px) 0 0/26px 26px, linear-gradient(135deg,#efe6d8,#e6eef0);}
.mx-stitch canvas{position:absolute; inset:0; width:100%; height:100%; cursor:crosshair;}
.mx-stitch .mx-hint{position:absolute; left:14px; bottom:12px; font:600 12px 'IBM Plex Mono',monospace; color:#4b525d; pointer-events:none;}

/* what a screen reader hears */
.mx-sr{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px;}
.mx-sr li{display:flex; gap:10px; align-items:baseline; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); font-size:15px;}
.mx-sr li::before{content:"\25B8"; color:var(--terra-d);}
.mx-sr .mx-said{font-family:'IBM Plex Mono',monospace; font-size:14px;}

/* 2026-10-14 evening: the Now side carries its own score out of 10, beside the Then score, in the site's green */
.mx-ck .now-side .mx-sbar i{background:var(--pine);}
.mx-ck .now-side .mx-score{color:var(--pine);}
.mx-ck .now-side{background:#f3f8f4; border-color:#c9dccf;}