/* R-168: the workbench pair, /case-studies/rules-engine/ and /case-studies/workbench-transfer/.
   Every figure here is a recreation built in HTML: invented rules, invented carriers ("Carrier A"),
   no real field names. Each carries the .wb-mark watermark. */

.wb-mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }

/* The watermark every recreation carries. */
.wb-rec { position: relative; padding: 28px; }
.wb-mark { position: absolute; top: 12px; right: 14px; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--e-soft); background: var(--e-ground); padding: 3px 8px; border-radius: 2px; }

/* Slot 01: the shadow system, a rules spreadsheet with no dates column. */
.wb-sheet { overflow-x: auto; margin-top: 18px; }
.wb-sheet table { border-collapse: collapse; width: 100%; min-width: 620px; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.4; }
.wb-sheet th, .wb-sheet td { border: 1px solid #D5D3CC; padding: 7px 10px; text-align: left; vertical-align: top; }
.wb-sheet thead th { background: #ECEBE6; font-weight: 600; }
.wb-sheet th.wb-col { background: #ECEBE6; color: var(--e-soft); font-weight: 400; text-align: center; width: 28px; }
.wb-sheet td.wb-note { color: var(--e-soft); font-style: italic; }
.wb-sheet tr.wb-dupe td { background: #FBF6E4; }
.wb-sheet-missing { margin-top: 14px !important; display: flex; flex-wrap: wrap; gap: 8px; }
.wb-sheet-missing span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12px; color: var(--e-soft); border: 1px dashed var(--e-underline); padding: 3px 8px; border-radius: 2px; }

/* Slot 02: the IA map, with the cuts struck through. */
.wb-ia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 22px; align-items: stretch; }
.wb-ia-step { position: relative; padding: 0 18px; }
.wb-ia-step + .wb-ia-step { border-left: 1px solid var(--e-rule); }
.wb-ia-step + .wb-ia-step::before { content: "\2192"; position: absolute; left: -9px; top: 2px; width: 18px; text-align: center; background: var(--e-surface); color: var(--e-soft); font-size: 15px; line-height: 1; }
.wb-ia-step:first-child { padding-left: 0; }
.wb-ia-step:last-child { padding-right: 0; }
.wb-ia-label { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--e-soft); }
.wb-ia-title { font-size: 21px; line-height: 1.2; margin-top: 6px; }
.wb-ia-items { margin-top: 14px; }
.wb-ia-items li { font-size: 15px; line-height: 1.35; padding: 8px 10px; margin-top: 6px; border-radius: 3px; background: var(--e-ground); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.wb-ia-items li b { font-weight: 400; }
.wb-ia-items li i { font-style: normal; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--e-soft); white-space: nowrap; }
.wb-ia-items li.is-cut { background: transparent; box-shadow: inset 0 0 0 1px var(--e-rule); color: var(--e-soft); }
.wb-ia-items li.is-cut b { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #B4442E; }
.wb-ia-items li.is-cut i { color: #B4442E; }
.wb-ia-items li.is-new { background: var(--e-ink); color: var(--e-ground); }
.wb-ia-items li.is-new i { color: #C9C6BD; }
.wb-ia-flow { margin-top: 26px !important; padding-top: 16px; border-top: 1px solid var(--e-rule); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; }
.wb-ia-flow .wb-ia-label { margin-right: 6px; }
.wb-pill { display: inline-block; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .5px; padding: 3px 10px; border-radius: 999px; background: var(--e-ground); box-shadow: inset 0 0 0 1px #CFCCC4; }
.wb-pill.is-cut { color: var(--e-soft); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #B4442E; background: transparent; }
.wb-arrow { color: var(--e-soft); }
.wb-key { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--e-soft); }
.wb-key span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
.wb-key .k-kept::before { background: var(--e-ground); box-shadow: inset 0 0 0 1px #CFCCC4; }
.wb-key .k-cut::before { box-shadow: inset 0 0 0 1px var(--e-rule); background: linear-gradient(to bottom, transparent 5px, #B4442E 5px, #B4442E 7px, transparent 7px); }
.wb-key .k-new::before { background: var(--e-ink); }

/* Part Three slot 02: the extraction manifest. */
.wb-manifest { margin-top: 18px; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.6; background: #F7F6F2; border-radius: 3px; padding: 18px 20px; overflow-x: auto; white-space: pre; color: var(--e-ink); }
.wb-manifest .c { color: var(--e-soft); }
.wb-manifest .k { font-weight: 600; }

/* A slot waiting on a capture. The gate refuses any page that still has one. */
.wb-pending { padding: 48px 28px; text-align: center; border: 1px dashed var(--e-underline); border-radius: 3px; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 13px; color: var(--e-soft); background: transparent; box-shadow: none; }

/* A quote from the implementation engineer, by role. */
.wb-quote { margin-top: 48px; }

@media (max-width: 720px) {
    .wb-rec { padding: 22px 16px; }
    .wb-ia { grid-template-columns: 1fr; }
    .wb-ia-step { padding: 0; }
    .wb-ia-step + .wb-ia-step { border-left: 0; border-top: 1px solid var(--e-rule); margin-top: 22px; padding-top: 24px; }
    .wb-ia-step + .wb-ia-step::before { content: "\2193"; left: 50%; top: -9px; margin-left: -9px; }
    .wb-manifest { font-size: 12px; }
}

/* R-169: product recreations, from the reference captures with the manifest's replacement list
   applied. Fictional carriers (Carrier A/B/C), roles instead of people, generic rule fields. */
.wb-app { --a-ink: #1C2321; --a-soft: #6A716E; --a-line: #E4E6E3; --a-bg: #FFFFFF; --a-tint: #F6F7F5; --a-brand: #1F4A44; --a-brand-ink: #FFFFFF;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--a-ink); font-size: 13px; line-height: 1.4; background: var(--a-bg); }
.wb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wb-scroll > .wb-app { min-width: 860px; }
.wb-app p, .wb-app li, .wb-app td, .wb-app th, .wb-app span, .wb-app b { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; margin: 0 !important; }
.wb-app b { font-weight: 600; }
.wb-app .s { color: var(--a-soft); }
/* top bar and stepper */
.wb-bar { display: flex; align-items: stretch; background: var(--a-brand); color: var(--a-brand-ink); }
.wb-bar > div { padding: 12px 18px; border-right: 1px solid rgba(255,255,255,.12); }
.wb-bar .s { color: rgba(255,255,255,.7); font-size: 11px; }
.wb-step { display: flex; gap: 10px; align-items: center; }
.wb-step i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.16); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.wb-step.is-on { box-shadow: inset 0 -2px 0 #7FD1B9; }
.wb-step.is-on i { background: #3E9C82; }
.wb-ctx { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 14px 18px; border-bottom: 1px solid var(--a-line); }
.wb-ctx b { font-size: 14px; }
/* the engine's table, and the wrapper around it */
.wb-tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--a-line); background: var(--a-tint); }
.wb-tabs span { padding: 10px 12px; color: var(--a-soft); }
.wb-tabs span.is-on { color: var(--a-ink); background: var(--a-bg); box-shadow: inset 0 -2px 0 var(--a-brand); }
.wb-engine { position: relative; margin: 16px 18px; border: 2px dashed #B4442E; border-radius: 4px; }
.wb-engine-tag, .wb-wrap-tag { position: absolute; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 10.5px !important; letter-spacing: 1.2px; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; }
.wb-engine-tag { top: -11px; left: 12px; background: #B4442E; color: #fff !important; }
.wb-wrap-tag { background: var(--e-ink); color: var(--e-ground) !important; }
.wb-tools { display: flex; gap: 16px; padding: 9px 12px; border-bottom: 1px solid var(--a-line); background: var(--a-tint); color: var(--a-soft); }
.wb-grid { width: 100%; border-collapse: collapse; }
.wb-grid th, .wb-grid td { border-bottom: 1px solid var(--a-line); padding: 9px 10px; text-align: left; font-weight: 400; vertical-align: middle; }
.wb-grid thead th { font-weight: 600; }
.wb-grid .n { width: 26px; color: var(--a-soft); text-align: center; border-right: 1px solid var(--a-line); }
.wb-grid .split { border-left: 1px solid var(--a-line); }
.wb-field { display: inline-block; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; padding: 1px 7px; border-radius: 3px; background: #EEF5F2; color: #1F5B4E; box-shadow: inset 0 0 0 1px #BFD9CF; }
.wb-expr { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12px; color: #1F5B4E; }
.wb-out { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; padding: 1px 7px; border-radius: 3px; box-shadow: inset 0 0 0 1px #D6D8D4; }
.wb-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid var(--a-line); }
.wb-btn { display: inline-block; padding: 8px 14px; border-radius: 6px; background: var(--a-brand); color: #fff !important; font-weight: 600; }
.wb-btn.is-ghost { background: var(--a-bg); color: var(--a-ink) !important; box-shadow: inset 0 0 0 1px #CFD3CF; font-weight: 500; }
.wb-btn.is-off { background: #E9EBE8; color: #A3A9A5 !important; }
/* status pills: the closed vocabulary (illustrative tokens) */
.wb-st { display: inline-block; font-size: 11px !important; font-weight: 600; letter-spacing: .3px; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.wb-st.draft { background: #FFF4E5; color: #A35A00 !important; box-shadow: inset 0 0 0 1px #F2C98A; }
.wb-st.qa { background: #EAF2FD; color: #1F5FB8 !important; box-shadow: inset 0 0 0 1px #B6CFF2; }
.wb-st.ready { background: #F3EEFC; color: #6236B8 !important; box-shadow: inset 0 0 0 1px #D2C2F2; }
.wb-st.active { background: #EAF6F0; color: #1E7A55 !important; box-shadow: inset 0 0 0 1px #B7DEC9; }
.wb-st.inactive { background: #F1F2F0; color: #6A716E !important; box-shadow: inset 0 0 0 1px #D6D8D4; }
.wb-chip { display: inline-block; font-size: 11px !important; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px #9CC7BC; color: #1F5B4E !important; margin-right: 4px !important; }
.wb-chip.b { box-shadow: inset 0 0 0 1px #C2B3EC; color: #5B3CA8 !important; }
.wb-chip.c { box-shadow: inset 0 0 0 1px #E8C08E; color: #9A5A12 !important; }
/* the edit flow (review & submit) */
.wb-form { display: grid; grid-template-columns: 1fr 240px; background: var(--a-tint); }
.wb-form-main { padding: 22px 28px 24px; max-width: 560px; }
.wb-form-side { background: var(--a-bg); border-left: 1px solid var(--a-line); padding: 22px 18px; }
.wb-form h4 { font-size: 17px; font-weight: 600; margin: 4px 0 2px; }
.wb-ver { display: flex; align-items: center; gap: 18px; background: var(--a-bg); border: 1px solid var(--a-line); border-radius: 8px; padding: 14px 18px; margin-top: 16px !important; }
.wb-ver div { text-align: center; }
.wb-ver b { display: block; font-size: 20px; font-weight: 500; }
.wb-lab { display: block; font-weight: 600; margin-top: 16px !important; margin-bottom: 6px !important; }
.wb-in { background: var(--a-bg); border: 1px solid #D6D9D5; border-radius: 6px; padding: 9px 11px; color: var(--a-soft) !important; }
.wb-in.tall { height: 52px; }
.wb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wb-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--a-line); }
.wb-check i { flex: none; width: 16px; height: 16px; border-radius: 3px; background: var(--a-brand); margin-top: 1px; }
.wb-req { color: #B4442E; }
.wb-mark-field { box-shadow: 0 0 0 3px rgba(180, 68, 46, .18); border-color: #B4442E; }
/* the test panel */
.wb-tests { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.wb-panel { border: 1px solid var(--a-line); border-radius: 8px; overflow: hidden; }
.wb-ph { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--a-line); }
.wb-ph b { font-size: 15px; }
.wb-pb { padding: 12px 14px; }
.wb-tc { border: 1px solid var(--a-line); border-radius: 6px; padding: 10px 12px; margin-top: 10px !important; }
.wb-tc.is-fail { border-color: #E3B4AA; background: #FDF7F5; }
.wb-kv { display: inline-block; background: var(--a-tint); border-radius: 4px; padding: 2px 7px; margin: 6px 4px 0 0 !important; font-size: 12px !important; }
.wb-code { display: inline-block; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px !important; background: var(--a-tint); padding: 2px 6px; border-radius: 3px; margin: 4px 4px 0 0 !important; }
.wb-code.miss { text-decoration: line-through; color: #B4442E !important; background: #FBEAE6; }
.wb-code.on { background: #E3F2EC; color: #1F5B4E !important; }
.wb-cov { display: flex; justify-content: space-between; padding: 8px 10px; background: #FFF9EC; border: 1px solid #F0DDB0; border-radius: 6px; margin-top: 10px !important; }
.wb-seg { display: inline-flex; border: 1px solid #D6D9D5; border-radius: 6px; overflow: hidden; margin-top: 6px !important; }
.wb-seg span { padding: 5px 10px; border-right: 1px solid #D6D9D5; }
.wb-seg span:last-child { border-right: 0; }
.wb-seg span.is-on { background: var(--a-brand); color: #fff !important; }
.wb-hl { box-shadow: 0 0 0 3px rgba(180, 68, 46, .2); border-radius: 6px; }
/* the dashboard */
.wb-dash { display: grid; grid-template-columns: 170px 1fr; }
.wb-nav { border-right: 1px solid var(--a-line); padding: 14px 10px; }
.wb-nav p { padding: 7px 10px; border-radius: 6px; color: var(--a-soft) !important; }
.wb-nav p.is-on { background: var(--a-tint); color: var(--a-ink) !important; }
.wb-nav .wb-word { color: var(--a-ink) !important; font-weight: 700; padding: 2px 10px 14px; letter-spacing: -.2px; }
.wb-dash-main { min-width: 0; }
.wb-dash-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
.wb-sel { display: inline-block; border: 1px solid #D6D9D5; border-radius: 6px; padding: 6px 28px 6px 10px; color: var(--a-soft) !important; margin-left: 8px !important; }
.wb-dtabs { display: flex; gap: 22px; padding: 0 18px; border-bottom: 1px solid var(--a-line); }
.wb-dtabs span { padding: 8px 0; color: var(--a-soft); }
.wb-dtabs span.is-on { color: var(--a-ink); box-shadow: inset 0 -2px 0 var(--a-ink); }
.wb-dtabs em { font-style: normal; background: var(--a-tint); border-radius: 4px; padding: 0 6px; margin-left: 6px; font-size: 11px; }
.wb-rows th { font-size: 10.5px !important; letter-spacing: .5px; text-transform: uppercase; color: var(--a-soft) !important; }
.wb-rows tr.sub td { background: var(--a-tint); color: var(--a-soft); }
/* the component page */
.wb-comp { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.wb-comp > div { padding: 18px 20px; }
.wb-comp > div + div { border-left: 1px solid var(--a-line); }
.wb-comp h5 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--a-soft); font-weight: 600; margin: 0 0 10px; }
.wb-comp h5 + * { margin-top: 0 !important; }
.wb-comp .wb-variants { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-snippet { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12px; background: #1C2321; color: #E6EAE7; border-radius: 6px; padding: 12px 14px; white-space: pre; overflow-x: auto; margin-top: 16px !important; }
.wb-tok { width: 100%; border-collapse: collapse; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; }
.wb-tok td { padding: 6px 0; border-bottom: 1px solid var(--a-line); }
.wb-tok i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: -1px; margin-right: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.wb-pillset { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 6px 0; }
.wb-pillset .wb-st { font-size: 13px !important; padding: 4px 10px; }
.wb-pillset .wb-arrow { font-size: 15px; }
.wb-pill-note { margin-top: 14px !important; font-size: 13px; color: var(--e-soft); }
@media (max-width: 720px) {
    .wb-tests { grid-template-columns: 1fr; }
    .wb-comp { grid-template-columns: 1fr; }
    .wb-comp > div + div { border-left: 0; border-top: 1px solid var(--a-line); }
}
/* Specificity: the .wb-app reset above zeroes margins on spans and paragraphs; these win back. */
.wb-app .wb-lab { margin: 16px 0 6px !important; }
.wb-app .wb-kv { margin: 6px 4px 0 0 !important; }
.wb-app .wb-code { margin: 4px 4px 0 0 !important; }
.wb-app .wb-chip { margin: 0 4px 2px 0 !important; }
.wb-app .wb-sel { margin-left: 8px !important; }
.wb-ver p b { display: inline; font-size: inherit; font-weight: 600; }
.wb-rows td:nth-child(6) { white-space: nowrap; }
.wb-app .wb-req { color: #B4442E !important; }