/* ═══════════════════════════════════════════════════════════════════════════
   MIDDLE SEAT DESIGN KIT — v2
   ms-kit.css · the component library

   Requires ms-tokens.css. Everything here reads semantic tokens, so a
   component works in either mode with no markup change — set data-ms-mode
   on an ancestor and the subtree follows.

   Phase one authored every control as inline styles, so a button existed in
   40 places and agreed with itself in none of them. These are the classes
   those inline styles wanted to be.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page scaffolding ────────────────────────────────────────────────────── */

.ms-page{
  background:var(--ms-canvas);
  color:var(--ms-body-color);
  font-family:var(--ms-font-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.ms-wrap{max-width:var(--ms-wrap);margin:0 auto;padding:0 var(--ms-gutter);}
.ms-wrap--wide{padding:0 var(--ms-gutter-wide);}
.ms-section{border-top:1px solid var(--ms-rule);}
.ms-section__inner{max-width:var(--ms-wrap);margin:0 auto;padding:var(--ms-s11) var(--ms-gutter-wide) var(--ms-s11);}
.ms-section__inner--tight{padding:var(--ms-s8) var(--ms-gutter) var(--ms-s9);}

/* The peach dash under a section heading. 44×3, always. */
.ms-dash{width:44px;height:3px;background:var(--ms-accent);border:0;margin:0;}

.ms-rule-line{height:1px;background:var(--ms-rule);border:0;margin:0;}

/* ── Type ────────────────────────────────────────────────────────────────── */

.ms-eyebrow{
  font-family:var(--ms-font-mono);
  font-size:var(--ms-eyebrow);
  letter-spacing:var(--ms-eyebrow-ls);
  text-transform:uppercase;
  color:var(--ms-accent);
  font-weight:500;
}
.ms-eyebrow--muted{color:var(--ms-muted);}

.ms-display-xl,.ms-display,.ms-h1,.ms-h2,.ms-h3{
  font-family:var(--ms-font-display);
  font-weight:400;
  color:var(--ms-heading);
  margin:0;
}
.ms-display-xl{font-size:var(--ms-display-xl);line-height:var(--ms-display-xl-lh);letter-spacing:var(--ms-display-xl-ls);}
.ms-display{font-size:var(--ms-display);line-height:var(--ms-display-lh);letter-spacing:var(--ms-display-ls);}
.ms-h1{font-size:var(--ms-h1);line-height:var(--ms-h1-lh);}
.ms-h2{font-size:var(--ms-h2);line-height:var(--ms-h2-lh);}
.ms-h3{font-size:var(--ms-h3);line-height:var(--ms-h3-lh);}

/* The lede belongs to true editorial moments — a page hero, a report
   opening — at most once per surface. A lede under every heading is a tell. */
.ms-lede{
  font-family:var(--ms-font-display);
  font-style:italic;
  font-size:var(--ms-lede);
  line-height:var(--ms-lede-lh);
  color:var(--ms-body-color);
  margin:0;
}

.ms-title{font-size:var(--ms-title-s);line-height:var(--ms-title-s-lh);font-weight:600;color:var(--ms-heading);}
.ms-title--lg{font-size:17px;font-weight:700;}
.ms-text{font-size:var(--ms-body);line-height:var(--ms-body-lh);margin:0;}
.ms-text-s{font-size:var(--ms-body-s);line-height:var(--ms-body-s-lh);margin:0;}
.ms-muted{color:var(--ms-muted);}

/* Mono runs uppercase and tracked, always. Never paragraphs. */
.ms-mono{font-family:var(--ms-font-mono);text-transform:uppercase;font-weight:500;}
.ms-label-mono{font-family:var(--ms-font-mono);font-size:var(--ms-label);letter-spacing:var(--ms-label-ls);text-transform:uppercase;font-weight:500;}
.ms-data-label{font-family:var(--ms-font-mono);font-size:var(--ms-data);letter-spacing:var(--ms-data-ls);text-transform:uppercase;color:var(--ms-muted);font-weight:500;}
.ms-micro{font-family:var(--ms-font-mono);font-size:var(--ms-micro);letter-spacing:var(--ms-micro-ls);text-transform:uppercase;color:var(--ms-faint);font-weight:500;}

/* Numbers are always figures, always tabular in tables and tickers. */
.ms-num{font-variant-numeric:tabular-nums;}
.ms-stat{font-family:var(--ms-font-display);color:var(--ms-heading);font-variant-numeric:tabular-nums;line-height:1;}
.ms-stat--xl{font-size:44px;}
.ms-stat--lg{font-size:28px;}
.ms-delta{font-family:var(--ms-font-body);font-weight:600;font-variant-numeric:tabular-nums;font-size:12.5px;}
.ms-delta--up{color:var(--ms-positive);}
.ms-delta--down{color:var(--ms-blackberry);}  /* data down is Blackberry —
                                                 Cherry is UI error, not data */

.ms-a{color:var(--ms-link);text-decoration:underline;}
.ms-a:hover{color:var(--ms-heading);}

/* ── Surfaces ────────────────────────────────────────────────────────────── */

.ms-card{
  background:var(--ms-surface);
  border:1px solid var(--ms-border);
  border-radius:var(--ms-r-xl);
  padding:26px 30px;
}
.ms-card--sm{padding:20px 22px;border-radius:var(--ms-r-lg);}
.ms-card--flush{padding:0;overflow:hidden;}
.ms-card--quiet{background:transparent;}
.ms-card--hover{transition:transform var(--ms-dur-feedback) var(--ms-ease),box-shadow var(--ms-dur-feedback) var(--ms-ease);}
.ms-card--hover:hover{transform:translateY(-2px);box-shadow:var(--ms-shadow-pop);}
.ms-card__head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:var(--ms-s5);}
.ms-card__foot{border-top:1px solid var(--ms-rule);padding:16px 28px;font-size:12.5px;color:var(--ms-faint);}

.ms-well{background:var(--ms-surface-alt);border-radius:var(--ms-r-lg);padding:var(--ms-s5);}

/* Caption under a demo — the one place persistent small text is allowed,
   because a spec sheet IS documentation (see the text budget, §Writing). */
.ms-caption{font-size:12.5px;line-height:1.6;color:var(--ms-faint);margin:12px 0 0;}

/* ── Layout helpers ──────────────────────────────────────────────────────── */

.ms-row{display:flex;align-items:center;gap:var(--ms-s3);}
.ms-row--wrap{flex-wrap:wrap;}
.ms-row--top{align-items:flex-start;}
.ms-row--base{align-items:baseline;}
.ms-between{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.ms-stack{display:grid;gap:var(--ms-s4);}
.ms-stack--sm{gap:var(--ms-s2);}
.ms-grid{display:grid;gap:var(--ms-s4);}
.ms-grid--2{grid-template-columns:repeat(2,1fr);}
.ms-grid--3{grid-template-columns:repeat(3,1fr);}
.ms-grid--4{grid-template-columns:repeat(4,1fr);}
.ms-grid--sidebar{grid-template-columns:5fr 4fr;gap:var(--ms-s9);}
.ms-spacer{flex:1;}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.ms-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ms-font-mono);
  font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;
  padding:10px 18px;
  border-radius:var(--ms-r-sm);
  border:1px solid transparent;
  background:var(--ms-action);
  color:var(--ms-on-action);
  cursor:pointer;user-select:none;
  text-decoration:none;
  box-sizing:border-box;
  transition:background var(--ms-dur-feedback) var(--ms-ease),
             border-color var(--ms-dur-feedback) var(--ms-ease),
             transform var(--ms-dur-feedback) var(--ms-ease);
}
.ms-btn:hover{background:var(--ms-action-hover);}
.ms-btn:active{transform:translateY(1px);}     /* press shifts 1px, no scale */

.ms-btn--secondary{background:transparent;border-color:var(--ms-border-strong);color:var(--ms-body-color);}
.ms-btn--secondary:hover{background:var(--ms-selected);border-color:var(--ms-muted);}

.ms-btn--tertiary{background:transparent;border-color:transparent;color:var(--ms-body-color);padding-left:10px;padding-right:10px;}
.ms-btn--tertiary:hover{background:var(--ms-surface-alt);}

.ms-btn--ghost{background:transparent;border-color:transparent;color:var(--ms-link);text-decoration:underline;padding-left:0;padding-right:0;}
.ms-btn--ghost:hover{background:transparent;color:var(--ms-heading);}

/* Destructive confirms always keep words. Never a naked trash glyph. */
.ms-btn--destructive{background:var(--ms-negative);color:var(--ms-lavender-1);}
.ms-btn--destructive:hover{background:var(--ms-negative);filter:brightness(0.9);}

.ms-btn--sm{padding:7px 14px;font-size:9.5px;letter-spacing:0.14em;}
.ms-btn--lg{padding:13px 24px;font-size:11.5px;}
.ms-btn--block{width:100%;}
.ms-btn[disabled],.ms-btn--disabled{
  background:var(--ms-surface-alt);color:var(--ms-lavender-5);
  border-color:transparent;cursor:not-allowed;pointer-events:none;
}

/* Marketing surfaces run pills; product UI runs radius 6. */
.ms-btn--pill{border-radius:var(--ms-r-pill);background:var(--ms-accent);color:var(--ms-on-accent);padding:12px 24px;}
.ms-btn--pill:hover{background:var(--ms-accent-hover);}
.ms-btn--outline-pill{border-radius:var(--ms-r-pill);background:transparent;border-color:var(--ms-border-strong);color:var(--ms-heading);padding:12px 24px;}

/* The arrow CTA — peach circle + tracked label. The 2026 sites' signature. */
.ms-cta{display:inline-flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer;}
.ms-cta__dot{
  width:30px;height:30px;border-radius:var(--ms-r-pill);
  background:var(--ms-accent);color:var(--ms-on-accent);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  transition:background var(--ms-dur-feedback) var(--ms-ease);
}
.ms-cta:hover .ms-cta__dot{background:var(--ms-accent-hover);}
.ms-cta__label{font-family:var(--ms-font-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ms-heading);font-weight:500;}

.ms-btn-icon{
  width:34px;height:34px;padding:0;border-radius:var(--ms-r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;color:var(--ms-body-color);
}
.ms-btn-icon:hover{background:var(--ms-surface-alt);}

.ms-stepper{display:inline-flex;align-items:center;border:1px solid var(--ms-border);border-radius:var(--ms-r-sm);overflow:hidden;background:var(--ms-surface-input);}
.ms-stepper__btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;color:var(--ms-body-color);background:transparent;border:0;font-size:15px;}
.ms-stepper__btn:hover{background:var(--ms-surface-alt);}
.ms-stepper__val{min-width:44px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--ms-heading);}

/* ── Badges, tags, status ────────────────────────────────────────────────── */

/* Color lives in the dot only; the text stays neutral. No ✓✗ glyphs. */
.ms-status{display:inline-flex;align-items:center;gap:7px;}
.ms-dot{width:7px;height:7px;border-radius:var(--ms-r-pill);flex:none;background:var(--ms-muted);}
.ms-dot--live{background:var(--ms-positive);}
.ms-dot--pending{background:var(--ms-cantaloupe);}
.ms-dot--failed{background:var(--ms-negative);}
.ms-dot--paused{background:var(--ms-lavender-5);}
.ms-status__label{font-family:var(--ms-font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ms-heading);font-weight:500;}

.ms-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ms-surface-alt);color:var(--ms-body-color);
  border-radius:var(--ms-r-sm);padding:5px 10px;
  font-size:12px;font-weight:600;
}
.ms-tag--accent{background:rgba(116,166,134,0.14);color:var(--ms-heading);}
.ms-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:var(--ms-r-pill);
  background:var(--ms-action);color:var(--ms-on-action);
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
}
.ms-badge{
  display:inline-flex;align-items:center;
  border:1px solid var(--ms-border-strong);border-radius:var(--ms-r-pill);
  padding:7px 14px;
  font-family:var(--ms-font-mono);font-size:10.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ms-muted);font-weight:500;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */

.ms-field{display:grid;gap:7px;}
.ms-field__label{font-size:13px;font-weight:600;color:var(--ms-heading);}
.ms-input{
  width:100%;box-sizing:border-box;
  background:var(--ms-surface-input);
  border:1px solid var(--ms-border);
  border-radius:var(--ms-r-sm);
  padding:11px 13px;
  font-family:var(--ms-font-body);font-size:13.5px;
  color:var(--ms-heading);
  transition:border-color var(--ms-dur-feedback) var(--ms-ease),
             box-shadow var(--ms-dur-feedback) var(--ms-ease);
}
.ms-input::placeholder{color:var(--ms-lavender-5);}
.ms-input:focus{outline:none;border-color:var(--ms-action);box-shadow:0 0 0 3px var(--ms-focus);}
.ms-input--error{border-color:var(--ms-negative);}
.ms-input[disabled]{background:var(--ms-surface-alt);color:var(--ms-lavender-5);cursor:not-allowed;}
.ms-input--area{min-height:88px;resize:vertical;line-height:1.55;}

/* Format lives in the control — affixes replace format captions (rule T3). */
.ms-affix{display:flex;align-items:stretch;border:1px solid var(--ms-border);border-radius:var(--ms-r-sm);overflow:hidden;background:var(--ms-surface-input);}
.ms-affix__unit{
  display:inline-flex;align-items:center;padding:0 11px;
  background:var(--ms-surface-alt);color:var(--ms-muted);
  font-size:12.5px;flex:none;
}
.ms-affix .ms-input{border:0;border-radius:0;box-shadow:none;}
.ms-affix:focus-within{border-color:var(--ms-action);box-shadow:0 0 0 3px var(--ms-focus);}
.ms-input--number{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;}

.ms-error{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;color:var(--ms-negative);}

.ms-check{
  width:17px;height:17px;border-radius:4px;flex:none;
  border:1.5px solid var(--ms-lavender-4);background:var(--ms-surface-input);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.ms-check--on{background:var(--ms-action);border-color:var(--ms-action);color:var(--ms-on-action);}
.ms-radio{width:17px;height:17px;border-radius:var(--ms-r-pill);flex:none;border:1.5px solid var(--ms-lavender-4);background:var(--ms-surface-input);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.ms-radio--on{border-color:var(--ms-action);border-width:5px;}

.ms-toggle{
  width:38px;height:22px;border-radius:var(--ms-r-pill);flex:none;
  background:var(--ms-lavender-4);cursor:pointer;padding:2px;box-sizing:border-box;
  display:inline-flex;align-items:center;
  transition:background var(--ms-dur-feedback) var(--ms-ease);
}
.ms-toggle--on{background:var(--ms-action);}
.ms-toggle__knob{width:18px;height:18px;border-radius:var(--ms-r-pill);background:#FFFFFF;box-shadow:var(--ms-shadow-pop);transition:transform var(--ms-dur-feedback) var(--ms-ease);}
.ms-toggle--on .ms-toggle__knob{transform:translateX(16px);}

/* ── Tabs, segmented, pills ──────────────────────────────────────────────── */

.ms-tabs{display:flex;gap:26px;border-bottom:1px solid var(--ms-border);}
.ms-tab{
  font-family:var(--ms-font-mono);font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;font-weight:500;
  color:var(--ms-muted);padding:0 0 11px;cursor:pointer;
  border-bottom:2.5px solid transparent;margin-bottom:-1px;
  background:none;border-left:0;border-right:0;border-top:0;
  transition:color var(--ms-dur-feedback) var(--ms-ease);
}
.ms-tab--on{color:var(--ms-heading);border-bottom-color:var(--ms-mark);}

.ms-seg{display:inline-flex;background:var(--ms-surface-alt);border-radius:var(--ms-r-md);padding:3px;}
.ms-seg__item{
  border-radius:var(--ms-r-sm);padding:7px 14px;
  font-family:var(--ms-font-mono);font-size:9.5px;letter-spacing:0.14em;
  text-transform:uppercase;font-weight:500;
  color:var(--ms-muted);cursor:pointer;user-select:none;
  background:transparent;border:0;
  transition:color var(--ms-dur-feedback) var(--ms-ease);
}
.ms-seg__item--on{background:var(--ms-surface);color:var(--ms-heading);box-shadow:var(--ms-shadow-pop);}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.ms-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.ms-table th{
  text-align:left;
  font-family:var(--ms-font-mono);font-size:9.5px;letter-spacing:0.14em;
  text-transform:uppercase;font-weight:500;color:var(--ms-muted);
  padding:0 14px 9px;border-bottom:2px solid var(--ms-border-strong);
}
.ms-table td{padding:13px 14px;border-bottom:1px solid var(--ms-border);color:var(--ms-body-color);vertical-align:middle;}
.ms-table tr:last-child td{border-bottom:0;}
.ms-table .ms-td-num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ms-heading);}
.ms-table tr.ms-tr--on td{background:var(--ms-selected);}
.ms-table--compact td{padding:6px 14px;font-size:12.5px;}

.ms-bar-cell{height:7px;border-radius:2px;background:var(--ms-surface-alt);overflow:hidden;}
.ms-bar-cell__fill{height:100%;background:var(--ms-mark);border-radius:2px;}

/* ── Progress ────────────────────────────────────────────────────────────── */

.ms-progress{height:12px;border-radius:3px;background:var(--ms-surface-alt);overflow:hidden;}
/* scaleX, never width — GPU only. */
.ms-progress__fill{height:100%;border-radius:3px;background:var(--ms-positive);transform-origin:left;transform:scaleX(0);will-change:transform;}
.ms-progress--thin{height:7px;}

/* ── Feedback ────────────────────────────────────────────────────────────── */

.ms-alert{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--ms-border);border-left:3px solid var(--ms-muted);
  border-radius:var(--ms-r-sm);
  background:var(--ms-surface);padding:14px 16px;font-size:13.5px;
}
.ms-alert--info{border-left-color:var(--ms-lavender-4);}
.ms-alert--success{border-left-color:var(--ms-positive);}
.ms-alert--warning{border-left-color:var(--ms-warning);}
.ms-alert--error{border-left-color:var(--ms-negative);}
.ms-alert__title{font-weight:700;color:var(--ms-heading);}

/* Toasts are dark in BOTH modes — Slate 3, bottom-left, one action max. */
.ms-toast{
  display:inline-flex;align-items:center;gap:16px;
  background:var(--ms-slate-3);color:var(--ms-lavender-1);
  border-radius:var(--ms-r-lg);padding:13px 18px;
  box-shadow:var(--ms-shadow-float);font-size:13.5px;
}
.ms-toast__action{font-family:var(--ms-font-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ms-peach);cursor:pointer;font-weight:500;}

.ms-tooltip{
  background:var(--ms-slate-3);color:var(--ms-lavender-1);
  border-radius:var(--ms-r-md);padding:8px 12px;font-size:12px;
  box-shadow:var(--ms-shadow-float);white-space:nowrap;
}

.ms-empty{text-align:center;padding:44px 24px;}

/* ── Overlays ────────────────────────────────────────────────────────────── */

.ms-modal{
  background:var(--ms-surface);
  border:1px solid var(--ms-border);
  border-radius:var(--ms-r-2xl);
  box-shadow:var(--ms-shadow-modal);
  overflow:hidden;box-sizing:border-box;
}
.ms-modal__body{padding:24px 28px;}
.ms-scrim{position:absolute;inset:0;background:rgba(32,29,38,0.5);}

.ms-sheet{background:var(--ms-surface);border-radius:16px 16px 0 0;padding:10px 0 0;}
.ms-sheet__grab{width:36px;height:4px;border-radius:var(--ms-r-pill);background:var(--ms-lavender-4);margin:0 auto 14px;}

.ms-kbd{
  font-family:var(--ms-font-mono);font-size:9.5px;letter-spacing:0.1em;
  border:1px solid var(--ms-border);border-radius:4px;padding:2px 6px;
  color:var(--ms-muted);background:var(--ms-surface-alt);
}

/* ── Avatars ─────────────────────────────────────────────────────────────── */

.ms-avatar{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:32px;height:32px;border-radius:var(--ms-r-pill);
  background:var(--ms-strawberry);color:var(--ms-slate-5);
  font-size:11px;font-weight:700;letter-spacing:0.02em;
}
.ms-avatar--24{width:24px;height:24px;font-size:9px;}
.ms-avatar--40{width:40px;height:40px;font-size:13px;}
.ms-avatar--56{width:56px;height:56px;font-size:17px;}
.ms-avatar--peach{background:var(--ms-peach);}
.ms-avatar--lime{background:var(--ms-lime);}
.ms-avatar--blueberry{background:var(--ms-blueberry);}
.ms-avatar-stack{display:inline-flex;}
.ms-avatar-stack .ms-avatar{margin-left:-8px;box-shadow:0 0 0 2px var(--ms-surface);}
.ms-avatar-stack .ms-avatar:first-child{margin-left:0;}

/* ── Focus — one ring, every control, both modes ─────────────────────────── */

.ms-page :focus-visible{
  outline:3px solid var(--ms-focus);
  outline-offset:2px;
  border-radius:var(--ms-r-sm);
}

/* ── Skeletons — the only looping animation in the system ────────────────── */

.ms-skeleton{
  background:linear-gradient(90deg,var(--ms-surface-alt) 25%,var(--ms-border) 37%,var(--ms-surface-alt) 63%);
  background-size:400% 100%;
  animation:ms-shimmer var(--ms-dur-shimmer) linear infinite;
  border-radius:4px;
}
@keyframes ms-shimmer{0%{background-position:100% 50%}100%{background-position:0% 50%}}

.ms-spinner{
  width:13px;height:13px;border-radius:var(--ms-r-pill);
  border:2px solid currentColor;border-top-color:transparent;
  animation:ms-spin 0.7s linear infinite;flex:none;
}
@keyframes ms-spin{to{transform:rotate(360deg)}}

.ms-blink{animation:ms-blink 1.2s var(--ms-ease) infinite;}
@keyframes ms-blink{0%,100%{opacity:1}50%{opacity:0.25}}

@media (prefers-reduced-motion: reduce){
  .ms-skeleton,.ms-spinner,.ms-blink{animation:none;}
}

/* ── Editorial devices ───────────────────────────────────────────────────── */

/* The Grapefruit baseline band. Extraordinary circumstances only: one phrase,
   on one Display/H1 (44px+), per surface. Dark surfaces only — the halo must
   match the background EXACTLY, so --ms-halo has to be set to a literal. */
.ms-underline{
  background:var(--ms-grapefruit-x);
  background-size:auto 0.055em;
  background-position:0 0.945em;
  background-repeat:repeat-x;
  text-shadow:
    0.5px 0.5px var(--ms-halo), 0.5px -0.5px var(--ms-halo),
    -0.5px 0.5px var(--ms-halo), -0.5px -0.5px var(--ms-halo),
    1px 1px var(--ms-halo), 1px -1px var(--ms-halo),
    -1px 1px var(--ms-halo), -1px -1px var(--ms-halo),
    1.5px 1.5px var(--ms-halo), 1.5px -1.5px var(--ms-halo),
    -1.5px 1.5px var(--ms-halo), -1.5px -1.5px var(--ms-halo),
    2px 2px var(--ms-halo), 2px -2px var(--ms-halo),
    -2px 2px var(--ms-halo), -2px -2px var(--ms-halo);
}
/* Light-surface equivalent — the Strawberry highlight bar. */
.ms-highlight{background:linear-gradient(0deg,var(--ms-strawberry) 0,var(--ms-strawberry) 0.38em,transparent 0.38em);}

.ms-motif{position:absolute;pointer-events:none;opacity:var(--ms-motif-opacity);}

/* ── Swatches (documentation surfaces) ───────────────────────────────────── */

.ms-swatch{border-radius:var(--ms-r-lg);overflow:hidden;border:1px solid var(--ms-border);}
.ms-swatch__chip{height:78px;}
.ms-swatch__meta{padding:10px 12px 12px;background:var(--ms-surface);}
.ms-swatch__name{font-size:12.5px;font-weight:600;color:var(--ms-heading);}
.ms-swatch__hex{font-family:var(--ms-font-mono);font-size:10px;letter-spacing:0.1em;color:var(--ms-muted);}
.ms-swatch__role{font-size:11.5px;color:var(--ms-faint);margin-top:3px;line-height:1.45;}

.ms-spec{display:grid;grid-template-columns:132px 1fr;gap:0;}
.ms-spec__row{display:contents;}
.ms-spec dt{font-family:var(--ms-font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ms-accent);padding:11px 0;border-top:1px solid var(--ms-rule);}
.ms-spec dd{margin:0;padding:11px 0;font-size:13.5px;color:var(--ms-body-color);border-top:1px solid var(--ms-rule);}

/* Do / don't rails */
.ms-do{border:1px solid rgba(116,166,134,0.45);border-radius:var(--ms-r-lg);padding:20px 22px;}
.ms-dont{border:1px solid rgba(255,173,173,0.45);border-radius:var(--ms-r-lg);padding:20px 22px;}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width:900px){
  .ms-grid--2,.ms-grid--3,.ms-grid--4,.ms-grid--sidebar{grid-template-columns:1fr;}
  .ms-section__inner,.ms-section__inner--tight{padding-left:24px;padding-right:24px;}
  .ms-wrap,.ms-wrap--wide{padding:0 24px;}
  .ms-display-xl{font-size:44px;}
  .ms-display{font-size:36px;}
  .ms-h1{font-size:32px;}
  .ms-h2{font-size:25px;}
}