/* MatchPoint Kids · the simpler Journal and Match (design/ux2.js, ?ux=2). Built on the design tokens in ds.css. */

/* ---------- Match: one way in (Carlos asks), then Before / After ---------- */
.m6 .mt-h{margin-bottom:16px}
.m6-ask{border-radius:var(--ds-r-lg);background:var(--ds-card);overflow:hidden;box-shadow:var(--ds-shadow-lift)}
.m6-top{position:relative;display:flex;align-items:flex-end;justify-content:space-between;min-height:148px;padding:18px 0 0 20px;background:var(--ds-grad-green);color:#fff;overflow:hidden}
.m6-top>div{position:relative;z-index:1;align-self:center;padding-bottom:18px}
.m6-top small{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:99px;background:rgba(0,0,0,.14);font-size:var(--ds-label);font-weight:var(--ds-bold);letter-spacing:var(--ds-label-track);text-transform:uppercase}
.m6-top h3{margin:10px 0 0;max-width:190px;font-size:calc(var(--ds-title) - 2px);font-weight:var(--ds-bold);line-height:1.12;letter-spacing:var(--ds-tight);text-wrap:balance}
.m6-top img{position:relative;z-index:1;width:150px;height:140px;object-fit:contain;object-position:bottom right;margin-right:-6px;flex:none}
.m6-bot{padding:14px 14px 16px}
.m6-in{display:flex;align-items:center;gap:10px;width:100%;height:50px;padding:0 16px;border:0;border-radius:14px;background:#F2F2F7;font:inherit;font-size:var(--ds-body);font-weight:700;color:var(--ds-muted);text-align:left;cursor:text}
.m6-in svg{width:19px;height:19px;flex:none;color:var(--ds-muted)}
.m6-qk{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.m6-qk button{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px;border:0;border-radius:14px;background:var(--ds-card);box-shadow:0 0 0 1.5px rgba(11,16,33,.07) inset;font:inherit;font-size:14px;font-weight:var(--ds-bold);color:var(--ds-ink);text-align:left;line-height:1.15;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.36,.5,1)}
.m6-qk button:active,.m6-in:active{transform:scale(.97)}
.m6-qk span{font-size:19px;flex:none}
.m6 .m4-how{margin-top:var(--ds-gap)}
.m6 .m5-two{margin-top:var(--ds-gap)}
.m5-t.b{background:var(--ds-grad-blue);box-shadow:0 14px 26px -18px rgba(40,80,220,.9),inset 0 0 0 1.5px rgba(255,255,255,.16)}
.m6-pb{display:flex;align-items:center;gap:12px;width:100%;margin-top:var(--ds-gap);padding:12px 14px;border:0;border-radius:var(--ds-r-md);background:var(--ds-card);box-shadow:var(--ds-shadow);font:inherit;text-align:left;cursor:pointer}
.m6-pb img{width:42px;height:42px;object-fit:contain;flex:none}
.m6-pb span{flex:1}.m6-pb b{display:block;font-size:calc(var(--ds-body) + 1px);font-weight:var(--ds-bold);color:var(--ds-ink)}
.m6-pb small{display:block;font-size:var(--ds-small);font-weight:600;color:var(--ds-muted)}
.m6-pb svg{width:18px;height:18px;color:var(--ds-muted)}
.m6-all{display:block;margin:18px auto 0;padding:10px 14px;border:0;background:none;font:inherit;font-size:var(--ds-btn-fs-s);font-weight:var(--ds-bold);color:var(--ds-muted);cursor:pointer}
.m6-pbp{padding:0}

/* ---------- Journal: add buttons, then the timeline by week ---------- */
.jn2 .mt-h{margin-bottom:14px}
.jn2 .jn-quick{margin-top:0}
.jn2 .jn-wk{margin:22px 2px 10px}
.jn2 .jn-wk:first-of-type{margin-top:24px}
.jn2 .jn-row+.jn-row{margin-top:10px}
.jn2 .jn-quick button{position:relative}
.jn2 .jn-quick button::after{content:"+";position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--ds-brand-soft);color:var(--ds-brand);font-size:15px;font-weight:900;line-height:20px;text-align:center}