/* the playable Plan: drawn in the app's own type scale so it reads as the product */
.plan { padding: 0; font-size: var(--sem-text-body); line-height: var(--sem-lh-body); }
.plan-head { display: flex; align-items: center; gap: var(--sem-space-3); padding: 0 var(--sem-space-3); height: var(--sem-bar-h); border-bottom: var(--sem-hairline) solid var(--sem-rule); }
.plan-head b { color: var(--sem-fg-strong); font-size: var(--sem-text-title); }
.plan-head .m { color: var(--sem-muted); font-size: var(--sem-text-meta); }
.plan-head .legend { margin-left: auto; display: flex; gap: var(--sem-space-3); }
.plan-body { padding: var(--sem-space-2) var(--sem-space-3) var(--sem-space-3); min-height: 0; transition: height 150ms ease-out; }
.plan-group { font-size: var(--sem-text-label); line-height: var(--sem-lh-label); color: var(--sem-muted); padding: var(--sem-space-2) 0 var(--sem-space-1); }
.pr { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: var(--sem-space-3); align-items: baseline; padding: var(--sem-space-2); border-radius: var(--sem-radius-inner); border: var(--sem-hairline) solid transparent; }
.pr + .pr { margin-top: var(--sem-space-1); }
.pr .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; align-self: center; transition: color .3s; }
.pr .t { color: var(--sem-fg-strong); }
.pr .tg { display: block; font-family: var(--sem-font-num); font-size: var(--sem-text-meta); line-height: var(--sem-lh-meta); color: var(--sem-muted); overflow-wrap: anywhere; }
.pr .st { font-size: var(--sem-text-meta); white-space: nowrap; }
.pr.is-new { animation: rowin .45s ease-out both; }
.pr.is-focus { background: var(--sem-surface-2); border-color: var(--sem-edge); }
.pr.is-undone .t { text-decoration: line-through; color: var(--sem-muted); }
@keyframes rowin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.diff { margin: var(--sem-space-1) 0 0 calc(8px + var(--sem-space-3)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sem-space-1) var(--sem-space-3); font-size: var(--sem-text-meta); line-height: var(--sem-lh-meta); align-items: baseline; padding: var(--sem-space-2); background: var(--sem-surface-2); border-radius: var(--sem-radius-inner); animation: rowin .45s ease-out both; }
.diff .obj { font-family: var(--sem-font-num); color: var(--sem-fg); overflow-wrap: anywhere; }
.diff .b { color: var(--sem-muted); text-decoration: line-through; }
.diff .a { color: var(--sem-fg-strong); }
.diff .k { color: var(--sem-accent); font-family: var(--sem-font-num); }
.diff .x { color: var(--sem-muted); font-family: var(--sem-font-num); }
.plan-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sem-space-3); padding: var(--sem-space-3); border-top: var(--sem-hairline) solid var(--sem-rule); }
.plan-foot .cap { flex: 1 1 260px; min-height: calc(2 * var(--sem-lh-body)); }
.plan-foot .cap b { color: var(--sem-fg-strong); }
.steps { display: flex; gap: var(--sem-space-1); list-style: none; margin: 0; padding: 0; }
.steps button { font: inherit; font-size: var(--sem-text-label); width: 28px; height: var(--sem-control-h-sm); border-radius: var(--sem-radius-control); border: var(--sem-hairline) solid var(--sem-border); background: transparent; color: var(--sem-fg); cursor: pointer; }
.steps button[aria-current="step"] { background: var(--sem-surface-2); color: var(--sem-fg-strong); border-bottom: 2px solid var(--sem-accent); }
.play { height: var(--sem-control-h); padding: 0 var(--sem-space-3); font: inherit; font-size: var(--sem-text-meta); border-radius: var(--sem-radius-control); border: var(--sem-hairline) solid var(--sem-border); background: transparent; color: var(--sem-fg-strong); cursor: pointer; }
.play:hover, .steps button:hover { background: var(--sem-hover); border-color: var(--sem-edge); }
.hist { margin: var(--sem-space-2) 0 0; font-size: var(--sem-text-meta); line-height: var(--sem-lh-meta); padding: var(--sem-space-2); border: var(--sem-hairline) solid var(--sem-rule); border-radius: var(--sem-radius-inner); animation: rowin .45s ease-out both; }
.hist ol { margin: var(--sem-space-1) 0 0; padding: 0; list-style: none; }
.hist li { display: flex; gap: var(--sem-space-2); align-items: baseline; }
.hist .u { margin-left: auto; color: var(--sem-fg-strong); }
@media (max-width: 720px) { .plan-head .legend { display: none; } .plan-body { min-height: 0; } .legend-sm { display: flex !important; } }
.legend-sm { display: none; gap: var(--sem-space-3); flex-wrap: wrap; padding: var(--sem-space-2) var(--sem-space-3) 0; }

.scrub { padding: 0; }
.scrub-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.scrub .hist { padding: var(--sem-space-2) var(--sem-space-4) var(--sem-space-4); font-size: var(--sem-text-body); line-height: var(--sem-lh-body); }
.scrub .hist-head, .state-head { display: flex; align-items: center; height: var(--sem-bar-h); gap: var(--sem-space-3); font-size: var(--sem-text-meta); color: var(--sem-muted); }
.scrub .hist-head b, .state-head b { color: var(--sem-fg-strong); font-size: var(--sem-text-title); }
.scrub .hist ol { list-style: none; margin: 0; padding: 0; position: relative; }
.scrub .hist li { display: grid; grid-template-columns: 28px 110px minmax(0, 1fr); gap: var(--sem-space-3); align-items: baseline; padding: var(--sem-space-2) var(--sem-space-2); border-radius: var(--sem-radius-inner); border: var(--sem-hairline) solid transparent; transition: opacity .25s, background .25s; cursor: pointer; }
.scrub .hist li .n { font-family: var(--sem-font-num); font-size: var(--sem-text-meta); color: var(--sem-muted); }
.scrub .hist li .w { font-size: var(--sem-text-meta); }
.scrub .hist li .x { color: var(--sem-fg-strong); }
.scrub .hist li .v { display: block; font-family: var(--sem-font-num); font-size: var(--sem-text-meta); line-height: var(--sem-lh-meta); color: var(--sem-muted); overflow-wrap: anywhere; }
.scrub .hist li.here { background: var(--sem-surface-2); border-color: var(--sem-edge); }
.scrub .hist li.after { opacity: .45; }
.scrub .hist li.after .x { text-decoration: line-through; }
.scrub .hist li:hover:not(.here) { background: var(--sem-hover); }
.range { display: flex; align-items: center; gap: var(--sem-space-3); margin-top: var(--sem-space-3); font-size: var(--sem-text-meta); color: var(--sem-muted); }
.range input { flex: 1; accent-color: var(--sem-fg-strong); }
.modelstate { border-left: var(--sem-hairline) solid var(--sem-rule); padding: var(--sem-space-2) var(--sem-space-4) var(--sem-space-4); background: var(--sem-surface-2); font-size: var(--sem-text-body); line-height: var(--sem-lh-body); }
.modelstate dl { margin: 0; }
.modelstate div { display: flex; justify-content: space-between; gap: var(--sem-space-3); padding: var(--sem-space-2) 0; border-top: var(--sem-hairline) solid var(--sem-rule); }
.modelstate dt { color: var(--sem-fg); font-family: var(--sem-font-ui); font-size: var(--sem-web-meta); overflow-wrap: anywhere; }
.modelstate dd { margin: 0; color: var(--sem-fg-strong); font-family: var(--sem-font-num); font-size: var(--sem-text-meta); text-align: right; transition: color .25s; }
.modelstate dd.changed { color: var(--sem-warn); }
.modelstate dd.gone { color: var(--sem-faint); }
.modelstate .msg { margin-top: var(--sem-space-3); font-size: var(--sem-text-meta); line-height: var(--sem-lh-meta); color: var(--sem-muted); min-height: calc(3 * var(--sem-lh-meta)); }
.modelstate .msg b { color: var(--sem-fg-strong); }
.scrub-cta { display: flex; gap: var(--sem-space-2); margin-top: var(--sem-space-3); }
.scrub-cta button { height: var(--sem-control-h); padding: 0 var(--sem-space-3); font: inherit; font-size: var(--sem-text-meta); border-radius: var(--sem-radius-control); border: var(--sem-hairline) solid var(--sem-border); background: transparent; color: var(--sem-fg-strong); cursor: pointer; }
.scrub-cta button:hover { background: var(--sem-hover); border-color: var(--sem-edge); }
@media (max-width: 860px) { .scrub-grid { grid-template-columns: minmax(0, 1fr); } .modelstate { border-left: 0; border-top: var(--sem-hairline) solid var(--sem-rule); } }
@media (max-width: 520px) { .scrub .hist li { grid-template-columns: 20px minmax(0, 1fr); gap: 0 var(--sem-space-2); } .scrub .hist li > span:nth-child(n+2) { grid-column: 2; } .scrub .hist { padding-inline: var(--sem-space-3); } }



.steps button { width: var(--sem-button-h); height: var(--sem-button-h); }
.play,.scrub-cta button { min-height: var(--sem-button-h); }
.scrub .hist { margin: 0; border: 0; animation: none; }
.scrub .hist li { min-height: var(--sem-button-h); }
.scrub .hist li.after { opacity: 1; color: var(--sem-muted); }
.modelstate dd.gone { color: var(--sem-muted); }
.plan-hero .hero .sem-grid { align-items: start; }
.plan-hero h1 { max-width: none; }
.plan-hero .c-5 { padding-top: var(--sem-space-4); }
@media(max-width:720px) { .plan-hero .c-7 { margin-top: var(--sem-space-6); } .diff {grid-template-columns: minmax(0,1fr) auto;} .diff .obj {grid-column:1/-1;} .plan .hist li {flex-wrap:wrap;} }

.plan-foot .cap { min-height: calc(2 * var(--sem-lh-body)); }


.modelstate > .state-head { border-top: 0; }
.modelstate dd { font-family: var(--sem-font-ui); }
.modelstate .sem-num { font-family: var(--sem-font-num); }
.scrub .hist li.here { border-left: 2px solid var(--sem-accent); }