/* /features/did-my-change-work/ only: the hinged mirror chart, the manila tag, the swing band,
   the pill organiser, the six-figure table and the lastmod prompt. Prefix dmc-. */

.dmc-v{display:inline-block;padding:.15rem .5rem;border-radius:4px;background:#1d2a36;color:var(--sk-text-2);font:700 .74rem var(--sk-mono)}
.dmc-v.v-better{background:#123327;color:#6fe0ad}
.dmc-v.v-worse{background:#3a2219;color:#ffb08f}

/* hero: the hinged mirror */
.dmc-mr{border:1px solid var(--sk-line-2);border-radius:10px;background:var(--sk-deep);overflow:hidden}
.dmc-mr-bar{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.6rem .85rem;border-bottom:1px solid var(--sk-line);font:500 .66rem var(--sk-mono);color:var(--sk-text-3)}
.dmc-pill{padding:.15rem .5rem;border-radius:999px;border:1px solid #3d5266;color:var(--sk-text);font-weight:600}
.dmc-mr-h{margin:.8rem .9rem 0;font:700 1.05rem var(--sk-disp);color:var(--sk-text)}
.dmc-mr-chart{display:none}
.js .dmc-mr-chart{display:grid;grid-template-columns:minmax(0,1fr) 3.4rem minmax(0,1fr);align-items:end;gap:.35rem;height:9rem;margin:.9rem .9rem .3rem}
.dmc-side{position:relative;display:flex;align-items:flex-end;gap:2px;height:100%;border-bottom:1px solid #3d5266}
.dmc-b{justify-content:flex-end}
.dmc-side i{flex:0 1 .7rem;min-width:2px;height:var(--h);border-radius:2px 2px 0 0;transition:height .3s}
.dmc-b i{background:var(--sk-people)}
.dmc-a i{background:var(--sk-ai)}
.dmc-side::after{content:"";position:absolute;left:0;right:0;height:0;border-top:2px dashed #f2c55c;transition:bottom .4s}
.dmc-b::after{bottom:var(--mb,0)}
.dmc-a::after{bottom:var(--ma,0)}
.dmc-mr.empty .dmc-side::after{display:none}
.dmc-hinge{display:grid;align-content:end;justify-items:center;height:100%;padding-bottom:.2rem;border-bottom:1px solid #3d5266;background:repeating-linear-gradient(135deg,transparent 0 4px,#1d2a36 4px 8px);border-radius:3px 3px 0 0}
.dmc-hinge span{font:700 .62rem var(--sk-mono);color:var(--sk-text)}
.dmc-hinge small{font:500 .54rem var(--sk-mono);color:var(--sk-text-3)}
.dmc-mr-legend{display:none}
.js .dmc-mr-legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:0 .9rem .6rem;font:500 .6rem var(--sk-mono);color:var(--sk-text-3)}
.dmc-mr-legend i{display:inline-block;width:.7rem;height:.5rem;margin-right:.3rem;border-radius:2px;vertical-align:middle}
.lg-b{background:var(--sk-people)}.lg-a{background:var(--sk-ai)}.lg-m{height:0!important;border-top:2px dashed #f2c55c;border-radius:0!important}
.dmc-mr-l{display:block;margin:0 .9rem;font-size:.85rem;color:var(--sk-text-2)}
.dmc-range{display:block;width:calc(100% - 1.8rem);margin:.4rem .9rem .5rem;accent-color:var(--sk-ai)}
.dmc-mr-st{margin:0 .9rem;font-size:.84rem;line-height:1.5;color:var(--sk-text-2);min-height:2.6em}
.dmc-mr-v{margin:.45rem .9rem 0;font:500 .78rem/1.5 var(--sk-mono);color:var(--sk-text)}
.dmc-mr-v b{color:#6fe0ad}

/* 01: the manila tag */
.dmc-pts{margin:1.2rem 0 0;padding-left:1.1rem;color:var(--sk-text-2);line-height:1.6}
.dmc-pts li+li{margin-top:.5rem}
.dmc-kinds .seg{padding:.5rem .75rem;font-size:.84rem}
.dmc-tag{padding:1.1rem;border:1px solid var(--sk-line-2);border-radius:10px;background:var(--sk-ink)}
.dmc-tag-page{display:grid;gap:.15rem;padding:.75rem .9rem;border:1px solid var(--sk-line);border-radius:6px;background:#121b24}
.dmc-tag-page .mono{font-size:1rem;color:var(--sk-text)}
.dmc-tag-page small{font:500 .64rem var(--sk-mono);color:var(--sk-text-3)}
.dmc-tag-card{position:relative;margin:1rem 0 0 2.2rem;padding:.9rem 1rem .9rem 2.2rem;background:#e7cf9a;color:#2b2112;clip-path:polygon(1.4rem 0,100% 0,100% 100%,1.4rem 100%,0 50%);transform:rotate(-1.5deg);transform-origin:left center;transition:transform .4s}
.dmc-tag-card::before{content:"";position:absolute;left:-2.4rem;top:-1rem;width:3rem;height:2px;background:#b79a62;transform:rotate(25deg);transform-origin:right}
.dmc-tag-hole{position:absolute;left:1.2rem;top:50%;width:.6rem;height:.6rem;margin-top:-.3rem;border-radius:50%;background:var(--sk-ink);box-shadow:0 0 0 2px #c9ad73}
.dmc-tag-h{margin:0;font:700 1rem var(--sk-disp)}
.dmc-tag-n{margin:.35rem 0 0;font:italic 400 1.05rem var(--sk-serif)}
.dmc-tag-s{margin:.45rem 0 0;font:600 .62rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:#6b5428}
.dmc-tag.flash .dmc-tag-card{animation:dmcSwing .6s ease}
@keyframes dmcSwing{0%{transform:rotate(-6deg)}60%{transform:rotate(1deg)}100%{transform:rotate(-1.5deg)}}
.dmc-tag-url{margin:.8rem 0 0;font-size:.8rem;color:var(--sk-text-2);line-height:1.6}
.dmc-tag-url code{margin-right:.25rem;padding:.1rem .35rem;border-radius:3px;background:#1d2a36;color:var(--sk-text)}
.dmc-k{display:inline-block;min-width:7rem;font:600 .6rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sk-text-3)}

/* 02: the swing band */
.dmc-sw{max-width:52rem;padding:1.2rem 1.3rem;border:1px solid var(--sk-line-2);border-radius:10px;background:var(--sk-ink-2)}
.dmc-sw-m{margin:0;font:600 .66rem var(--sk-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sk-text-3)}
.dmc-sw-days{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;height:5rem;margin:.8rem 0 1.4rem}
.dmc-sw-b,.dmc-sw-a{display:flex;align-items:flex-end;gap:2px;border-bottom:1px solid #3d5266}
.dmc-sw-b i,.dmc-sw-a i{flex:1;height:var(--h);min-height:1px;border-radius:2px 2px 0 0;transition:height .35s}
.dmc-sw-b i{background:var(--sk-people)}.dmc-sw-a i{background:var(--sk-ai)}
.dmc-sw-line{position:relative;height:2.6rem;margin:0 0 .6rem;border-bottom:2px solid #3d5266}
.dmc-sw-band{position:absolute;bottom:-2px;top:.6rem;left:var(--bl,40%);right:calc(100% - var(--br,60%));background:rgba(242,197,92,.18);border:1px dashed #f2c55c;border-bottom:0;transition:left .45s,right .45s}
.dmc-sw-zero{position:absolute;left:50%;top:.3rem;bottom:-6px;width:2px;background:#7d8d9c}
.dmc-sw-d{position:absolute;left:var(--dx,50%);bottom:-.55rem;width:1.1rem;height:1.1rem;margin-left:-.55rem;border-radius:50%;background:var(--sk-text);box-shadow:0 0 0 3px var(--sk-ink-2);transition:left .5s cubic-bezier(.3,1.3,.5,1)}
.dmc-sw[data-v="up"] .dmc-sw-d,.dmc-sw[data-state="left"][data-v="down"] .dmc-sw-d{background:#5fd39e}
.dmc-sw[data-v="too_few"] .dmc-sw-d{background:#7d8d9c}
.dmc-sw-lab{position:absolute;top:0;font:500 .58rem var(--sk-mono);color:var(--sk-text-4)}
.dmc-sw-l{left:0}.dmc-sw-r{right:0}
.dmc-sw-n{margin:1rem 0 0;font:500 .74rem/1.5 var(--sk-mono);color:var(--sk-text-3)}
.dmc-sw-say{margin:.6rem 0 0;line-height:1.6;color:var(--sk-text-2)}
.dmc-sw.flash .dmc-sw-say{animation:dmcIn .45s ease}
@keyframes dmcIn{from{opacity:.25;transform:translateY(3px)}to{opacity:1;transform:none}}

/* 03: the pill organiser */
.dmc-po{padding:1.1rem;border:1px solid var(--sk-line-2);border-radius:10px;background:var(--sk-ink)}
.dmc-po-k{margin:0 0 .4rem;font:600 .62rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sk-text-3)}
.dmc-po-box{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.dmc-po-box li{position:relative;display:grid;place-items:center;height:2.3rem;border:1px solid #3d5266;border-radius:7px;background:#17232e;font:700 .82rem var(--sk-mono);color:var(--sk-text);transition:background .35s,border-color .35s}
.dmc-po-row:first-child .dmc-po-box li{box-shadow:inset 0 -3px 0 var(--sk-people)}
.dmc-po-row:last-of-type .dmc-po-box li{box-shadow:inset 0 -3px 0 var(--sk-ai)}
.dmc-po-x em{display:none;font:600 .5rem var(--sk-mono);font-style:normal;color:#ff9a72}
.dmc-po[data-state="held"] .dmc-po-x{background:transparent;border-style:dashed;border-color:#ff9a72;box-shadow:none!important}
.dmc-po[data-state="held"] .dmc-po-x span{display:none}
.dmc-po[data-state="held"] .dmc-po-x em{display:block}
.dmc-po-hinge{margin:.7rem 0;padding:.35rem;border-radius:5px;background:repeating-linear-gradient(135deg,transparent 0 4px,#1d2a36 4px 8px);text-align:center;font:600 .64rem var(--sk-mono);color:var(--sk-text-2)}
.dmc-po-note{margin:.9rem 0 0;padding:.55rem .7rem;border-left:3px solid #f2c55c;font-size:.86rem;line-height:1.55;color:var(--sk-text-2)}

/* 04: the six figures */
.dmc-tb{max-width:64rem;border:1px solid var(--sk-line);border-radius:8px;overflow:hidden}
.dmc-tr{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);gap:.6rem;align-items:center;padding:.7rem .9rem;border-top:1px solid var(--sk-line);font-size:.9rem;color:var(--sk-text-2)}
.dmc-tr:first-child{border-top:0}
.dmc-th{background:var(--sk-ink-2);font:600 .6rem var(--sk-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sk-text-3)}
.dmc-tr b{font:600 .88rem var(--sk-mono);color:var(--sk-text)}
.dmc-tr b.t{display:none;font-weight:500;font-size:.78rem}
.dmc-tb[data-state="total"] b.d{display:none}
.dmc-tb[data-state="total"] b.t{display:inline}

/* 05 (paper): the lastmod prompt and Insights' list */
.dmc-xml{display:grid;margin:1.2rem 0 0;padding:.8rem 1rem;border:1px solid #b9ae99;border-radius:6px;background:#f8f5ee;overflow-x:auto}
.dmc-xml code{white-space:pre;font-size:.78rem;color:#33414e}
.dmc-xml .dmc-lit{color:#8a3511;background:#f3e3d8;font-weight:700}
.dmc-hint{margin:1rem 0 .5rem;line-height:1.6;color:var(--sk-paper-ink)}
.dmc-track{margin-left:.2rem;padding:.35rem .7rem;border:1.5px solid #b4471b;border-radius:6px;background:#fff;color:#8a3511;font:700 .85rem var(--sk-sans);cursor:pointer}
.dmc-track[aria-pressed="true"]{background:#b4471b;color:#fff}
.dmc-ins{padding:1rem;border:1px solid #b9ae99;border-radius:8px;background:#f8f5ee}
.dmc-ins-h{margin:0 0 .6rem;font:700 1rem var(--sk-disp);color:var(--sk-paper-ink)}
.dmc-ins-wrap{overflow-x:auto}
.dmc-ins-t{width:100%;min-width:32rem;border-collapse:collapse;font-size:.8rem;color:var(--sk-paper-ink)}
.dmc-ins-t th,.dmc-ins-t td{padding:.45rem .5rem;border-bottom:1px solid var(--sk-paper-line);text-align:left;vertical-align:top}
.dmc-ins-t th{font:600 .58rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:#4a5866}
.dmc-ins-t small{display:block;font-size:.7rem;color:#4a5866}
.dmc-ins-t td.mono{font-size:.76rem}
.js .dmc-ins[data-state="off"] .dmc-new{display:none}
.dmc-ins[data-state="on"] .dmc-new td{animation:dmcRow .6s ease;background:#f3e3d8}
@keyframes dmcRow{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (max-width:700px){
  .dmc-tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);row-gap:.35rem}
  .dmc-tr>span:first-child{grid-column:1 / -1;color:var(--sk-text)}
  .dmc-th>span:first-child{display:none}
  .dmc-tag-card{margin-left:1.4rem}
}
@media (prefers-reduced-motion:reduce){.dmc-side i,.dmc-sw-band,.dmc-sw-d,.dmc-tag-card{transition:none}}
[aria-labelledby="h-gaps"] .lede+.ctl-row{margin-top:1.4rem}