/* memory-sim widget layout. Nothing here is smaller than 13px (.8125rem). */
.ms .w-sub, .ms .w-counter, .ms .w-pill, .ms .badge, .ms .w-status { font-size: .8125rem; }
.ms .w-status { text-transform: none; letter-spacing: 0; font-weight: 650; padding: .05rem .45rem; white-space: nowrap; }
.ms .badge { text-transform: none; letter-spacing: 0; }
.ms-intro { margin: 0 0 .8rem; font-size: 1rem; }
.ms-strip { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .3rem; align-items: center; }
.ms-strip li { margin: 0; display: flex; align-items: center; gap: .3rem; }
.ms-strip[hidden] { display: none; }
/* Steps not reached yet are neutral, not faded: text stays fully opaque for contrast. */
.ms-stage { padding: .25rem .6rem; border-radius: 999px; border: 1.5px dashed var(--border-strong); background: transparent; color: var(--text-2); font-size: .8125rem; font-weight: 650; line-height: 1.3; transition: box-shadow .2s; }
.ms-stage.is-done { border-style: solid; border-color: var(--c-bd); color: var(--c); }
.ms-stage.is-active { border-style: solid; border-color: var(--c-bd); background: var(--c-bg); color: var(--c); box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--c); }
.ms-arrow { color: var(--text-3); font-size: .85rem; }
.ms-say { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.ms-grid { align-items: start; margin-top: .9rem; }
.ms-title { margin: 0 0 .5rem; font-size: .95rem; font-weight: 700; color: var(--text); }
.ms-group { margin: .8rem 0 .35rem; font-size: .8125rem; font-weight: 650; color: var(--text-2); }
.ms-panel > .ms-title + .ms-group { margin-top: .2rem; }
.ms-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.ms-entry { min-width: 0; margin: 0; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); }
.ms-entry.is-hl { border-color: var(--state); box-shadow: 0 0 0 1px var(--state); }
/* Entries not involved in this step: quieter border and background, text kept opaque. */
.ms-entry.is-dim { background: transparent; border-style: dashed; color: var(--text-2); }
.ms-entry.is-old .ms-entry-text, .ms-entry.is-old .ms-entry-line { text-decoration: line-through; color: var(--text-3); }
.ms-entry.is-compact { display: flex; gap: .4rem; align-items: baseline; padding: .25rem .55rem; }
.ms-entry-line { flex: 1; min-width: 0; font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; }
.ms-entry-top { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ms-entry-text { margin: .25rem 0 0; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.ms-entry-meta { margin: .15rem 0 0; font-size: .8125rem; line-height: 1.4; color: var(--text-3); overflow-wrap: anywhere; }
.ms-ctx { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .9rem; }
.ms-ctx > li { margin: 0; }
.ms-ctx-block { padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); }
.ms-ctx-block.is-new { border-color: var(--state); box-shadow: 0 0 0 1px var(--state); }
.ms-ctx-head { display: flex; gap: .45rem; align-items: baseline; }
.ms-ctx-label { flex: 1; min-width: 0; color: var(--text-2); overflow-wrap: anywhere; }
.ms-ctx-items { margin: .3rem 0 0; padding-left: 1.15rem; font-size: .875rem; line-height: 1.45; color: var(--text-2); }
.ms-ctx-items li { margin: .15rem 0; overflow-wrap: anywhere; }
.ms-ctx-text { margin: .25rem 0 0; font-size: .875rem; color: var(--text-2); }
.ms-tag { font-size: .8125rem; color: var(--text-3); }
.ms-ctx-pending { padding: .4rem .6rem; border: 1px dashed var(--border-strong); border-radius: 8px; color: var(--text-3); font-size: .875rem; }
.ms-ctx-total { margin: .6rem 0 0; font-size: .875rem; color: var(--text-2); }
.ms-note { margin: .4rem 0 0; font-size: .875rem; color: var(--text-3); }
/* Details: secondary, so quieter than the two main panels. */
.ms-notice { margin: 0 0 .55rem; font-size: .9rem; line-height: 1.45; color: var(--text); }
.ms-details { margin-top: .9rem; padding: .7rem .85rem; border-radius: 10px; background: var(--bg-sunk); }
.ms-details .ms-title { font-size: .875rem; color: var(--text-2); }
.ms-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .9rem; margin: 0; font-size: .875rem; }
.ms-rows dt { color: var(--text-3); }
.ms-rows dd { margin: 0; overflow-wrap: anywhere; }
.ms-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.ms-chips code { font-size: .8125rem; }
.ms-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.ms-sub { margin: 0 0 .25rem; font-size: .8125rem; font-weight: 650; color: var(--text-2); }
.ms-table-wrap { overflow-x: auto; }
.ms-table { width: 100%; border-collapse: collapse; font-size: .8125rem; line-height: 1.4; }
.ms-table th, .ms-table td { text-align: left; vertical-align: top; padding: .25rem .45rem; border-bottom: 1px solid var(--border); }
.ms-table th { font-weight: 650; color: var(--text-3); }
.ms-table .w-status { white-space: normal; display: inline-block; }
.ms-budget { display: grid; gap: .3rem; margin-top: .6rem; font-size: .8125rem; color: var(--text-2); }
.ms-budget .w-bar { height: .7rem; }
.ms-budget .w-seg { background: color-mix(in srgb, var(--state) 45%, transparent); border-right: 2px solid var(--state); }
.ms-rules { margin: 0; padding-left: 1.2rem; font-size: .875rem; }
@media (max-width: 640px) {
  .ms-two { grid-template-columns: 1fr; }
  .ms-wide-only { display: none; }
  .ms-table th, .ms-table td { padding: .25rem .3rem; }
}