.plain-link{display:inline-block;margin:18px 0 0;color:#bb6248;font-size:14px}.delivery-note{max-width:1200px;margin:24px auto 50px;padding:0 26px;font-size:13px;color:#817681;line-height:1.8}.control-panel select{display:block;width:100%;min-height:44px;border:1px solid #e8dfe5;border-radius:12px;margin-top:7px;padding:8px 10px;color:#514854;background:white;font:inherit;font-size:12px}.control-panel label{font-size:12px;color:#7c6b77;font-weight:700;display:block}.control-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.scenario-details{margin-top:18px}.scenario-details summary,.controls-disclosure>summary{font-size:14px;font-weight:800;cursor:pointer;min-height:44px;padding:12px 0}.scenario-details label{margin:10px 0}.scenario-details button{font:inherit;border:1px solid #ebdfe5;background:#fff9f5;border-radius:10px;padding:10px 6px;font-size:11px;min-height:44px;color:#715a65;cursor:pointer}.scenario-details button:hover{background:#ffebe0}.demo-note{font-size:11px;line-height:1.7;color:#8e7d89;margin-top:16px}.phone-stage{position:sticky;top:95px;min-height:780px}.phone-device::before{display:none}.phone-device{--phone-scale:.88;border-radius:34px;overflow:hidden}.prototype-viewport{border-radius:34px}.control-panel{max-height:calc(100vh - 110px);overflow:auto}.flow-canvas{width:2620px;height:2510px}.flow-edges{width:2620px;height:2510px}.flow-toolbar select{min-height:40px;border-radius:10px;background:#353035;color:#fff;border:0;padding:6px;font:inherit;font-size:12px}.flow-toolbar label{font-size:12px;color:#bdb0b9}.flow-lane-title{font-size:15px;color:#ffc6b1;letter-spacing:0}.flow-node{width:350px;height:430px;overflow:hidden}.node-copy h2{font-size:19px;line-height:1.2}.flow-detail a.card-cta{display:inline-flex;margin-top:20px}.prd-document{max-width:1000px;margin:32px auto 70px;padding:35px 40px;background:#fffdfb;border:1px solid #e9e0dc;border-radius:24px;line-height:1.9;font-size:14px;color:#514952}.prd-document h1{font-family:inherit;font-size:29px;letter-spacing:-.02em;line-height:1.45}.prd-document h2{font-size:22px;margin:38px 0 16px;color:#2f2932}.prd-document h3{font-size:17px;margin:24px 0 12px;color:#784f42}.prd-document table{border-collapse:collapse;font-size:12px;width:100%;margin:18px 0;display:block;overflow:auto}.prd-document th,.prd-document td{padding:10px 12px;border:1px solid #eadfd8;min-width:95px;vertical-align:top}.prd-document th{background:#fff0e7}.prd-document blockquote{border-left:3px solid #ff9267;padding-left:16px;color:#8c746b;margin-left:0}.prd-document a{color:#bb6547}.prd-document li{margin:8px 0}.prd-document code{background:#f9f1eb;padding:2px 5px;border-radius:5px}.prd-toolbar{display:flex;gap:10px;max-width:1000px;margin:25px auto 0;flex-wrap:wrap}.prd-toolbar a{padding:10px 16px;border-radius:12px;background:#ffede1;color:#a9593c;font-size:13px}.scheme-tag{font-size:12px;color:#cfbaa8}.button-grid .control-button{min-height:44px}
@media(max-width:1160px){.phone-stage{position:static}}@media(max-width:840px){.control-panel{max-height:none}.phone-stage{min-height:820px}.phone-device{--phone-scale:.90}.controls-disclosure>summary{font-size:16px}.prd-document{margin:15px;padding:20px 16px;font-size:13px}.prd-document h1{font-size:23px}.prd-toolbar{margin:15px}.flow-toolbar{flex-direction:column;align-items:flex-start}.flow-tools{flex-wrap:wrap}.app-header .brand-copy span{font-size:10px}}
@media(max-width:430px){.phone-stage{padding:10px 0;min-height:810px;border-radius:20px}.phone-device{--phone-scale:.88}.phone-caption{font-size:10px}.lab-shell{padding:12px}.lab-grid{gap:12px}.flow-detail{top:150px}}
@media print{.app-header,.prd-toolbar{display:none}.prd-document{margin:0;padding:0;border:0;font-size:10pt}.prd-document h2{break-after:avoid}table{break-inside:auto}tr{break-inside:avoid}body{background:#fff}}
.flow-toolbar-copy strong{color:#fff}.flow-viewport{height:calc(100vh - 145px);min-height:0}.flow-shell{overflow:hidden}.flow-tools label{color:#ddd}.flow-toolbar .flow-toolbar-copy span{color:#d0c5cf}
@media(max-width:840px){.flow-viewport{height:calc(100dvh - 225px)}}
#flowSize{position:relative}.flow-canvas{left:0;top:0}

/* Keep the review workspace in console / prototype / rules order on desktop. */
@media (min-width: 600px) {
  .interactive-workbench .lab-shell { width: min(1460px, calc(100% - 28px)); min-width: 1000px; padding: 22px 0 40px; }
  .interactive-workbench .lab-intro { align-items: center; }
  .interactive-workbench .lab-intro h1 { font-family: inherit; font-size: 30px; line-height: 1.25; letter-spacing: -.02em; }
  .interactive-workbench .lab-intro p { max-width: 480px; font-size: 13px; }
  .interactive-workbench .lab-grid { grid-template-columns: minmax(240px, 300px) minmax(380px, 1fr) minmax(320px, 400px); gap: 16px; }
  .interactive-workbench .control-panel, .interactive-workbench .logic-panel { grid-column: auto; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 18px; }
  .interactive-workbench .phone-stage { position: sticky; top: 16px; min-height: 810px; padding: 18px; }
  .interactive-workbench .phone-device { --phone-scale: .88; }
  .interactive-workbench .button-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 1027px) {
  .interactive-workbench .lab-shell { margin-left: 14px; margin-right: 14px; }
}

/* Flow canvas: separate actual screens from business rules and stage connections. */
.flow-section-nav{display:flex;gap:8px;padding:10px 24px;overflow-x:auto;background:#1d1e21;border-bottom:1px solid #343035}
.flow-section-nav button{flex-shrink:0;background:#302d31;color:#f4e6df;padding:9px 14px;border-radius:10px;font:inherit;font-size:12px;cursor:pointer;min-height:38px}
.flow-section-nav button:hover{background:#5d3d33}
.flow-viewport{height:calc(100dvh - 206px)}
.flow-lane-title{max-width:3250px;border-radius:16px;padding:10px 16px;line-height:1.5}
.flow-lane-title span{display:block;font-size:12px;color:#d2c8c5;font-weight:500;margin-top:3px;letter-spacing:0}
.flow-node{height:430px;padding:16px;display:flex;flex-direction:column}
.flow-node .node-body{flex:1;min-height:0}
.flow-node .node-copy{min-width:0}
.flow-node .node-copy h2{font-family:inherit;font-size:17px;line-height:1.45}
.flow-node .node-copy p{line-height:1.6}
.flow-node.rule-node{background:#f3f6f5;border-color:#d3e6e1}
.rule-node .node-body{display:block}
.rule-node .node-copy h2{font-size:23px;margin-bottom:12px}
.rule-node .node-copy p{font-size:13px;line-height:1.7}
.rule-node .node-mini span{font-size:12px;line-height:1.65}
.node-jumps{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.flow-jump{display:block;border:1px solid #bfdad3;border-radius:9px;background:#e9f4f0;color:#285d50;font:inherit;font-weight:700;font-size:11px;line-height:1.5;padding:7px 9px;text-align:left;cursor:pointer}
.flow-jump:hover{background:#d2ece2}
.flow-detail .flow-jump{margin:10px 0;font-size:13px;min-height:40px}
.flow-rule-note{color:#817681;font-size:12px;margin-top:20px}
.flow-edges{width:3400px;height:2760px}
@media(max-width:840px){.flow-viewport{height:calc(100dvh - 287px)}.flow-section-nav{padding:8px 12px}.flow-lane-title span{font-size:12px}}