/* Page chrome and shared layout. Tokens live in tokens.css. */
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, sans-serif; color: var(--body); background: var(--paper); padding-bottom: 26px; }
.stage { max-width: 1440px; margin: 0 auto; padding: 28px 32px 60px; }
.pagehead { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 20px; }
.pagehead .num { font-family:"JetBrains Mono", monospace; color: var(--red); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }
.pagehead h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.pagehead .sub { color: var(--dim); font-size: 13px; margin-left: 4px; }
.pagehead .right { margin-left: auto; display: flex; gap: 14px; align-items: baseline; font-family:"JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--dim); }
.pagehead .right .v { color: var(--ink); }
.tabs { display:flex; align-items:stretch; padding:0 24px; background:var(--surface); border-bottom:1px solid var(--line-strong); }
.tabs .group { display:flex; }
.tabs .spacer { flex:1; }
.tab { display:flex; align-items:center; gap:7px; padding:12px 16px 10px; font-family:Inter, system-ui, -apple-system, sans-serif; font-size:12.5px; font-weight:500; color:var(--dim); border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; }
.tab:hover { color:var(--body); text-decoration:none; }
.tab[aria-selected="true"] { color:var(--ink); font-weight:600; border-bottom-color:var(--red); }
/* Separator between the two pipeline tabs. Decorative and aria-hidden: it
   says Import and Convert are a sequence, which the tab order alone does not. */
.tab-arrow { display:flex; align-items:center; padding:12px 0 10px; color:var(--line-strong); font-size:12px; }
.section { margin-bottom: 28px; }
body.portal-view-conversion .history-section, body.portal-view-conversion .worker-section { display:none; }
body.portal-view-workflow .history-section, body.portal-view-workflow .worker-section { display:none; }
body.portal-view-history .workflow-section, body.portal-view-history .worker-section { display:none; }
body.portal-view-worker .workflow-section, body.portal-view-worker .history-section { display:none; }
.section-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 18px; }
.section-head .num { font-family:"JetBrains Mono", monospace; color: var(--red); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }
.section-head h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.section-head .sub { color: var(--dim); font-size: 12px; margin-left: 4px; }
.section-head .section-head-right { margin-left: auto; display: flex; align-items: baseline; gap: 10px; }
/* Compact one-row Source Cloud card (R.00 / I.00). The section head above
   it is unchanged; this replaces the tall 4-row source-card grid. */
.source-card.compact { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--line); padding:10px 14px; }
.source-card.compact .source-card-spacer { margin-left:auto; }
.source-dot { width:9px; height:9px; border-radius:999px; flex:0 0 auto; background:var(--dim); }
.source-dot.on { background:var(--dot-green); }
.source-dot.warn { background:var(--dot-amber); }
.source-facts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; font-family:"JetBrains Mono", monospace; font-size:11.5px; color:var(--ink); }
.source-facts .sep { color:var(--line-strong); }
.source-facts .muted { color:var(--dim); }
.source-facts .name { font-weight:600; }
.source-facts.empty > * { display:none; }
.source-facts.empty::before { content:"Not connected"; color:var(--dim); }
.grid { display:grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.table-wrap, .card-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
button { appearance:none; cursor:pointer; border:1px solid var(--line-strong); background:var(--surface); color:var(--body); padding:7px 14px; font-family:Inter, system-ui, -apple-system, sans-serif; font-size:12.5px; font-weight:500; border-radius:var(--radius-sm); transition:background 100ms ease; }
button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(207, 21, 66, 0.35); }
button:hover { background:var(--surface-2); }
button.primary { background:var(--red); border-color:var(--red); color:#fff; }
button.primary:hover { background:var(--red-dark); }
button.danger { background:var(--surface); border-color:#E5B2C0; color:var(--red-dark); }
button.danger:hover { background:var(--red-soft); }
button:disabled { cursor:not-allowed; opacity:.52; }
input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="number"], select, textarea { border-radius:var(--radius-sm); }
input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, select:focus, textarea:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 2px rgba(207, 21, 66, 0.12); }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-family: Inter, system-ui, -apple-system, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); background: var(--surface-2); }
tbody tr:hover { background: var(--surface-2); }
tbody tr.selected-row:hover { background: #FDF3F0; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.browser-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; }
.browser-panel, .browser-table-wrap, .browser-detail, .browser-workerpanel { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); }
.browser-secondary { display:grid; grid-template-columns:300px minmax(0,1fr); gap:18px; align-items:start; }
.browser-workerpanel { padding:18px; background:var(--surface); }
.browser-sidehead { font-family:"JetBrains Mono", monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); font-weight:600; }
.browser-workersummary { margin-top:14px; padding:12px; border:1px solid var(--line); background:var(--surface-2); }
.browser-workersummary-title { font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.browser-workersummary-grid { display:grid; gap:8px; }
.browser-workersummary-row { display:flex; justify-content:space-between; gap:10px; font-family:"JetBrains Mono", monospace; font-size:10.5px; }
.browser-workersummary-row span:first-child { color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.browser-workersummary-row span:last-child { color:var(--ink); text-align:right; }
.browser-workergrid { display:grid; gap:12px; margin-top:14px; }
.browser-workerrow { display:flex; justify-content:space-between; gap:10px; font-family:"JetBrains Mono", monospace; font-size:10.5px; padding:8px 0; border-bottom:1px solid var(--line); }
.browser-workerrow:last-child { border-bottom:0; }
.browser-workerrow span:first-child { color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.browser-workerrow span:last-child { color:var(--ink); text-align:right; }
.browser-workeractions { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.browser-workeractions button { width:100%; text-align:left; }
.browser-panel { padding:16px; }
.browser-toolbar { display:grid; grid-template-columns:minmax(220px,1.1fr) 170px 170px auto; gap:12px; align-items:end; margin-bottom:14px; }
.browser-toolbar label { display:flex; flex-direction:column; gap:6px; min-width:180px; font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); }
.browser-toolbar input, .browser-toolbar select { padding:8px 10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:12px; }
.browser-toolbar-actions { display:flex; justify-content:flex-end; gap:10px; align-items:flex-end; }
.browser-loading { display:flex; align-items:center; gap:10px; margin:0; color:var(--dim); font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.browser-loading.hidden { display:none; }
.browser-spinner { width:14px; height:14px; border:2px solid #D8D2C9; border-top-color:var(--red); border-radius:50%; animation:browser-spin .8s linear infinite; flex:0 0 auto; }
@keyframes browser-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.browser-table-wrap { overflow:hidden; }
.browser-state { display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border:0; border-radius:999px; background:var(--gray-soft); color:var(--dim); font-family:Inter, system-ui, -apple-system, sans-serif; font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; }
.browser-state.available { background:var(--green-soft); color:var(--green); }
.browser-state.used, .browser-state.partial { background:var(--amber-soft); color:var(--amber); }
.browser-state.queued { background:var(--amber-soft); color:#85611C; }
.browser-state.saving { background:var(--amber-soft); color:#9A6B1C; }
.browser-state.running { background:var(--red-soft); color:var(--red-dark); }
.browser-state.convert { background:var(--gray-soft); color:#6B6660; }
.browser-row-dim { opacity:.56; }
.selected-row { background:#FDF3F0; box-shadow:inset 3px 0 0 var(--red); }
.browser-row-title { font-weight:600; color:var(--ink); margin-bottom:2px; }
.browser-row-meta { color:var(--dim); font-size:12px; }
.browser-row-actions { margin-top:0; flex-wrap:nowrap; gap:8px; }
.browser-row-actions button { padding:6px 9px; font-size:10px; letter-spacing:.06em; }
.browser-pager { display:flex; justify-content:space-between; align-items:center; padding:14px 16px 0; color:var(--dim); font-family:"JetBrains Mono", monospace; font-size:11px; }
.browser-detail { padding:18px; background:var(--surface-2); }
.browser-detail h3 { margin:0 0 10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.browser-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; margin-bottom:14px; }
.browser-detail-grid .k { font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.browser-detail-grid .v { font-family:"JetBrains Mono", monospace; font-size:12px; color:var(--ink); }
.worker-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
.worker-card, .worker-logcard { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); }
.worker-card { padding:18px; }
.worker-controls-card { justify-self:start; width:max-content; }
.worker-page-actions { flex-direction:column; align-items:stretch; width:max-content; margin-top:10px; }
.worker-page-actions button { min-width:170px; text-align:left; }
.worker-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 18px; }
.worker-row { display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid var(--line); }
.worker-row:last-child { border-bottom:0; }
.worker-row .k { color:var(--dim); font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.worker-row .v { color:var(--ink); font-family:"JetBrains Mono", monospace; font-size:11.5px; text-align:right; overflow-wrap:anywhere; }
.worker-statebar { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.worker-pill { display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border:0; border-radius:999px; background:var(--gray-soft); color:var(--dim); font-family:Inter, system-ui, -apple-system, sans-serif; font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; }
.worker-pill .dot { width:7px; height:7px; border-radius:999px; background:var(--dim); }
.worker-pill.good { background:var(--green-soft); color:var(--green); }
.worker-pill.good .dot { background:var(--dot-green); }
.worker-pill.warn { background:var(--amber-soft); color:var(--amber); }
.worker-pill.warn .dot { background:var(--dot-amber); }
.worker-pill.info { background:var(--blue-soft); color:var(--blue); }
.worker-pill.info .dot { background:var(--blue); }
.worker-controls { display:flex; flex-direction:column; gap:10px; }
.worker-controls button { width:100%; text-align:left; }
.worker-logcard { margin-top:18px; padding:18px; background:#121014; color:#E9E3DA; }
.worker-logcard .section-head { border-bottom-color:#2B2528; }
.worker-logcard .section-head h2, .worker-logcard .section-head .sub, .worker-logcard .section-head .num { color:#E9E3DA; }
.worker-logconsole { min-height:280px; max-height:56vh; overflow:auto; white-space:pre-wrap; word-break:break-word; font-family:"JetBrains Mono", monospace; font-size:11px; line-height:1.6; }
.browser-disk { padding:10px 0; border-top:1px solid var(--line); }
.browser-disk:first-child { border-top:0; padding-top:0; }
.browser-disk-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.browser-disk .title { font-family:"JetBrains Mono", monospace; font-size:12px; font-weight:600; color:var(--ink); }
.browser-disk .meta { color:var(--dim); font-family:"JetBrains Mono", monospace; font-size:11px; margin-top:4px; }
.browser-related-head { margin:14px 0 10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.browser-note { margin-top:10px; padding:8px 10px; border-left:2px solid var(--amber); background:#FFF8DC; color:#5C4A15; font-size:11px; }
.browser-note.match { border-left-color:var(--green); background:#EEF7EF; color:#214D29; }
.browser-note.pending { border-left-color:var(--line-strong); background:var(--surface-2); color:var(--dim); }
.browser-note.required { border-left-color:var(--red); background:#FFF5F7; color:#7A2438; }
.group-list { display: grid; gap: 16px; }
.image-item { padding: 9px 0; border-top: 1px solid var(--line); }
.image-item:first-child { border-top: 0; }
.image-item .title { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink); font-weight: 600; }
.image-item .detail { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--dim); margin-top: 4px; line-height: 1.45; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.wizard-overlay { position:fixed; inset:0; background:rgba(14, 11, 12, 0.38); display:none; align-items:flex-start; justify-content:center; overflow:auto; padding:24px; z-index:40; }
.wizard-overlay.open { display:flex; }
/* The frame is height-capped and lays out as a column so W.01 can pin its
   head and footer and scroll only the disk list. */
.wizard-frame { width:min(730px, 100%); max-height:calc(100vh - 48px); margin:0 auto; display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 40px rgba(14, 11, 12, 0.25); overflow:hidden; }
.wizard-headbar { flex:0 0 auto; height:42px; background:var(--ink); color:#EFEAE3; display:flex; align-items:center; padding:0 18px; position:relative; font-size:12px; letter-spacing:.04em; }
.wizard-headbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--red); }
.wizard-headbar .right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.wizard-headbar button { background:transparent; border:1px solid #4A4548; border-radius:var(--radius-sm); color:#c9c2bd; font-family:Inter, system-ui, -apple-system, sans-serif; padding:5px 12px; font-size:12px; }
.wizard-headbar button:hover { color:#fff; border-color:#9b938e; }
.picker-overlay { position:fixed; inset:0; background:rgba(14, 11, 12, 0.38); display:none; align-items:flex-start; justify-content:center; overflow:auto; padding:40px 24px; z-index:50; }
.picker-overlay.open { display:flex; }
.picker-frame { width:min(1100px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 40px rgba(14, 11, 12, 0.25); overflow:hidden; }
.picker-head { display:flex; align-items:baseline; gap:14px; padding:18px 18px 14px; border-bottom:1px solid var(--line); }
.picker-head h3 { margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.picker-head .sub { font-size:12px; color:var(--dim); margin-left:0; }
.picker-body { padding:16px 18px 18px; }
.picker-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:12px; align-items:end; margin-bottom:14px; }
.picker-toolbar label { display:flex; flex-direction:column; gap:6px; font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.picker-toolbar input { padding:8px 10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:12px; }
.log-overlay { position:fixed; inset:0; background:rgba(14, 11, 12, 0.38); display:none; align-items:flex-start; justify-content:center; overflow:auto; padding:40px 24px; z-index:55; }
.log-overlay.open { display:flex; }
.log-frame { width:min(1100px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 40px rgba(14, 11, 12, 0.25); overflow:hidden; }
.log-head { display:flex; align-items:baseline; gap:14px; padding:18px 18px 14px; border-bottom:1px solid var(--line); }
.log-head h3 { margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.log-head .sub { font-size:12px; color:var(--dim); }
.log-head .right { display:flex; align-items:center; gap:10px; }
.log-toggle { display:flex; align-items:center; gap:6px; font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.log-toggle input { margin:0; }
.log-body { padding:16px 18px 18px; }
.log-console { min-height:320px; max-height:68vh; overflow:auto; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#121014; color:#E9E3DA; font-family:"JetBrains Mono", monospace; font-size:11px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.log-empty { color:#A79D90; }
.wizard-shell { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:18px 24px 22px; }
.wizard-pagehead { flex:0 0 auto; display:flex; gap:12px; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:16px; }
.wizard-pagehead h1 { margin:0; font-size:18px; line-height:1.15; letter-spacing:-.01em; color:var(--ink); }
.wizard-pagehead .sub { color:var(--dim); font-size:14px; margin-left:4px; }
.wizard-pagehead .ctx { margin-left:auto; display:flex; gap:18px; font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--dim); }
.wizard-pagehead .ctx b { color:var(--ink); font-weight:600; }
.wizard-flow { margin-left:auto; display:flex; align-items:center; gap:8px; font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--line-strong); }
.wizard-flow .flow-step + .flow-step::before { content:"\2192"; margin-right:8px; color:var(--line-strong); }
.wizard-flow .flow-step.done { color:var(--dim); }
.wizard-flow .flow-step.active { color:var(--red); font-weight:600; }
.wizard-layout { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.wizard-ctxrow .k { font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.wizard-ctxrow .v { font-family:"JetBrains Mono", monospace; font-size:11.5px; color:var(--ink); text-align:right; }
.planner-grid { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:24px; }
.planner-fields { min-height:0; display:flex; flex-direction:column; overflow-y:auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 18px 20px; }
/* W.01 owns its own scroll region (the disk list), so the card itself must
   not scroll or the pinned footer would slide away with it. */
.planner-fields:has(.wizard-step-panel[data-wizard-step="1"].active) { overflow:hidden; }
.planner-fields label { display:block; margin: 12px 0 6px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.planner-fields input, .planner-fields select { width:100%; padding:8px 0; border:0; border-bottom:1px solid var(--line-strong); background:transparent; color:var(--ink); font:inherit; font-size:14px; }
.planner-fields input:focus, .planner-fields select:focus { outline:none; border-bottom:2px solid var(--red); padding-bottom:7px; box-shadow:none; }
.wizard-step { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.wizard-step:first-of-type { margin-top:0; padding-top:0; border-top:0; }
.wizard-step h4 { margin:0 0 6px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); }
.wizard-step .sub { margin:0 0 10px; color:var(--dim); font-size:12px; line-height:1.5; }
.wizard-step-panel { display:none; }
.wizard-step-panel.active { display:block; }
.wizard-step-panel[data-wizard-step="1"].active { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.wizard-step-actions { flex:0 0 auto; display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.wizard-step-actions .sub { margin:0; color:var(--dim); font-size:12px; line-height:1.5; }
.wizard-step-actions .actions { margin-top:0; }
/* Smaller footer buttons across W.01/W.02/W.03, matching the compact
   button size used in the topbar/headbar/browser-row areas. */
.wizard-step-actions button { padding:5px 12px; }
.wizard-status-area { flex:0 0 auto; margin-top:18px; }
/* W.03 live build-status panel */
.wizard-build-status { margin-top:14px; border:1px solid var(--line); background:var(--surface-2); padding:12px 14px; }
.wizard-build-status[hidden] { display:none; }
.wizard-build-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.wizard-build-phase { font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.wizard-build-pct { font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--dim); }
.wizard-build-bar { margin-top:8px; height:8px; border:1px solid var(--line); background:var(--surface); overflow:hidden; }
.wizard-build-bar-fill { position:relative; height:100%; width:0; background:var(--red); overflow:hidden; transition:width .3s ease; }
.wizard-build-bar-fill.done { background:var(--green); }
/* live build: candy-stripe barber pole, matching the rescue/migration progress bars */
.wizard-build-bar-fill.live::after { content:""; position:absolute; inset:0; background-image:linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent); background-size:14px 14px; animation: wizardBuildBarberPole 1.1s linear infinite; }
@keyframes wizardBuildBarberPole { 0% { background-position:0 0; } 100% { background-position:28px 0; } }
.wizard-build-msg { margin-top:8px; font-size:12px; color:var(--dim); line-height:1.5; }
.wizard-build-details { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:grid; gap:6px; }
.wizard-build-detail-row { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.wizard-build-details .k { font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); flex:0 0 auto; }
.wizard-build-details .v { font-family:"JetBrains Mono", monospace; font-size:11.5px; color:var(--ink); text-align:right; word-break:break-all; }
/* W.02 fields and menus mirror the Dirty Harry boxed field styling. */
.wizard-step-panel[data-wizard-step="2"] input,
.wizard-step-panel[data-wizard-step="2"] select { padding:9px 10px; border:1px solid var(--line); background:var(--surface); font-size:12px; }
.wizard-step-panel[data-wizard-step="2"] input:focus,
.wizard-step-panel[data-wizard-step="2"] select:focus { outline:none; border:1px solid var(--red); padding-bottom:9px; }
.wizard-step-panel[data-wizard-step="2"] input[readonly] { background:#fcfbf8; }
/* W.01 selected group: the origin name leads, the source instance UUID is
   the secondary line. The internal group_key is deliberately not shown --
   it only repeats the same UUID behind an implementation-detail prefix. */
.planner-group { flex:0 0 auto; display:flex; align-items:center; gap:12px; margin-bottom:12px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); }
.planner-group .body { min-width:0; }
.planner-group .k { font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--dim); }
.planner-group .name { margin-top:2px; font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.planner-group .uuid { margin-top:2px; font-family:"JetBrains Mono", monospace; font-size:10.5px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.planner-group .copy { margin-left:auto; flex:0 0 auto; }
.planner-group .copy button { padding:4px 10px; font-size:10px; }
.disk-list-head { flex:0 0 auto; display:flex; align-items:baseline; gap:8px; margin-bottom:7px; }
.disk-list-head h4 { margin:0; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); }
.disk-list-head .sub { color:var(--dim); font-size:11.5px; line-height:1.4; }
.planner-disk-summary { margin:0 0 14px; padding:10px 12px; border:1px solid var(--line); background:var(--surface-2); }
.planner-disk-summary .row { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.planner-disk-summary .row + .row { margin-top:6px; }
.planner-disk-summary .k { font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); flex:0 0 auto; }
.planner-disk-summary .v { color:var(--ink); font-size:12px; line-height:1.45; text-align:right; word-break:break-word; }
/* The one scroll region in W.01. */
.disk-list { flex:1 1 auto; min-height:120px; overflow-y:auto; display:grid; gap:8px; align-content:start; padding-right:6px; }
/* W.01 disk rows: identity + metadata get the full top width; the controls
   sit on a hairline-separated rail below so they never crowd the text. */
.disk-item { border:1px solid var(--line); background:var(--surface-2); border-radius:var(--radius); padding:11px 13px; }
.disk-item.active-root { border-color:var(--red); box-shadow:inset 2px 0 0 var(--red); }
.disk-id { display:flex; align-items:center; gap:10px; }
.disk-order { font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); flex:0 0 auto; }
.disk-title { font-family:"JetBrains Mono", monospace; font-size:12.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.disk-item .role-pill { flex:0 0 auto; font-family:"JetBrains Mono", monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; padding:2px 7px; border-radius:999px; }
.disk-item .role-pill.root { background:var(--red-soft); color:var(--red-dark); }
.disk-item .role-pill.data { background:var(--gray-soft); color:var(--dim); }
.disk-item .role-pill.proposed { background:var(--amber-soft); color:var(--amber); }
.disk-item .meta { margin-top:5px; font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--dim); }
.disk-item .meta .v { color:var(--body); }
.disk-item .meta .sep { padding:0 7px; color:var(--line-strong); }
.disk-item .reuse-line { margin-top:7px; font-family:"JetBrains Mono", monospace; font-size:10.5px; color:var(--dim); display:flex; align-items:center; gap:8px; }
.disk-item .reuse-line .reuse-tag { font-size:8.5px; letter-spacing:0.08em; text-transform:uppercase; padding:1px 6px; border-radius:3px; background:var(--green-soft); color:var(--green); }
/* Control rail: every control is 28px tall and centered so the native
   checkbox/radio, the segmented toggle, and the nudge buttons align.
   Selected state is CSS-only via :has(input:checked); the reuse/recreate
   inputs stay hidden, but Use/Root show the real (visible) native control.
   Rules are scoped under .disk-rail so they out-specify .planner-fields
   label (JetBrains Mono / uppercase / display:block). */
.disk-rail { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:11px; padding-top:10px; border-top:1px solid var(--line); }
.disk-rail .push { margin-left:auto; }
.disk-rail .ctl-chip, .disk-rail .ctl-chip span, .disk-rail .seg-opt, .disk-rail .nudge button {
  font-family:Inter, system-ui, -apple-system, sans-serif; font-size:12px; font-weight:400; font-style:normal; letter-spacing:normal; text-transform:none; }
.disk-rail .ctl-chip { display:inline-flex; align-items:center; gap:7px; height:28px; margin:0; padding:0; color:var(--dim); line-height:1; cursor:pointer; user-select:none; }
.disk-rail .ctl-chip span { color:inherit; }
.disk-rail .ctl-chip input { accent-color:var(--red); width:15px; height:15px; margin:0; cursor:pointer; }
.disk-rail .ctl-chip:has(input:checked) { color:var(--ink); }
.disk-rail .seg { display:inline-flex; height:20px; margin-left:4px; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; background:var(--surface); }
/* margin:0 is load-bearing -- .planner-fields label sets margin:12px 0 6px,
   which otherwise pushes the label out of the overflow:hidden pill. */
.disk-rail .seg-opt { position:relative; display:inline-flex; align-items:center; justify-content:center; height:100%; margin:0; padding:0 9px; font-size:9px; letter-spacing:0.06em; color:var(--dim); cursor:pointer; user-select:none; }
.disk-rail .seg-opt input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.disk-rail .seg-opt + .seg-opt { border-left:1px solid var(--line-strong); }
.disk-rail .seg-opt.reuse:has(input:checked) { background:var(--green); color:#F4FBF5; }
.disk-rail .seg-opt.recreate:has(input:checked) { background:var(--red); color:#FFF7F8; }
.disk-rail .nudge { display:inline-flex; height:28px; }
.disk-rail .nudge button { height:28px; min-width:auto; padding:0 11px; border:1px solid var(--line-strong); background:var(--surface); color:var(--dim); }
.disk-rail .nudge button:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.disk-rail .nudge button:last-child { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.disk-rail .nudge button + button { margin-left:-1px; }
details.optional-step { margin-top:18px; border-top:1px solid var(--line); padding-top:18px; }
details.optional-step > summary { cursor:pointer; list-style:none; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); }
details.optional-step > summary::-webkit-details-marker { display:none; }
.optional-copy { margin:10px 0 0; color:var(--dim); font-size:12px; line-height:1.5; }
.sg-item { display:flex; align-items:flex-start; gap:12px; font-size:12px; }
.sg-item input { width:auto; margin:0; }
.sg-item .label { display:grid; gap:2px; line-height:1.45; }
.sg-item .name { color:var(--ink); }
.sg-item .meta { color:var(--dim); font-family:"JetBrains Mono", monospace; font-size:11px; }
/* W.02 target-config field grid */
.w02-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.w02-grid > div { min-width:0; }
/* W.02 chips + search-add security group picker */
.sg2-picker { border:1px solid var(--line); background:var(--surface); padding:10px; }
.sg2-chips { display:flex; flex-wrap:wrap; gap:6px; }
.sg2-chips:empty { display:none; }
.sg2-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 4px 4px 10px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink); font-family:"JetBrains Mono", monospace; font-size:11px; }
.sg2-chip-x { appearance:none; border:0; background:transparent; cursor:pointer; color:var(--dim); font-size:14px; line-height:1; padding:0 4px; }
.sg2-chip-x:hover { color:var(--red); }
.sg2-search-wrap { position:relative; margin-top:8px; }
.sg2-search { width:100%; padding:9px 10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:12px; }
.sg2-dropdown { margin-top:6px; border:1px solid var(--line-strong); background:var(--surface); max-height:212px; overflow:auto; }
.sg2-option { display:flex; align-items:flex-start; gap:10px; padding:9px 11px; border-bottom:1px solid var(--line); cursor:pointer; }
.sg2-option:last-child { border-bottom:0; }
.sg2-option:hover { background:var(--surface-2); }
.sg2-check { width:15px; height:15px; flex:0 0 auto; margin-top:1px; border:1px solid var(--line-strong); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#fff; }
.sg2-option.selected .sg2-check { background:var(--red); border-color:var(--red); }
.sg2-option-text { min-width:0; }
.sg2-option-name { font-size:12.5px; font-weight:600; color:var(--ink); }
.sg2-option-meta { margin-top:2px; font-size:11px; color:var(--dim); }
.sg2-empty { padding:10px 11px; font-size:12px; color:var(--dim); }
.sg2-summary { margin-top:8px; font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.planner-review-shell { display:grid; gap:18px; }
.planner-review-card { background: var(--surface-2); border: 1px solid var(--line); padding: 18px; }
.planner-review-card h3 { margin:0 0 10px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); }
.planner-review-card .row { display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid var(--line); font-size:12px; }
.planner-review-card .row:last-child { border-bottom:0; }
.planner-review-card .k { color:var(--dim); font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; }
.planner-review-card .v { color:var(--ink); font-family:"JetBrains Mono", monospace; font-size:12px; text-align:right; }
.planner-note, .planner-warning { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--amber); background: #fff8dc; color:#5c4a15; font-size:12px; line-height:1.5; }
.planner-note { border-left-color: var(--line-strong); background: var(--surface-2); color:var(--dim); }
.planner-result { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--green); background: #eef7ef; color:#214d29; font-size:12px; line-height:1.5; }
.hint-box { margin-top:10px; padding:10px 12px; border:1px solid var(--line); background:var(--surface); font-family:"JetBrains Mono", monospace; font-size:11px; line-height:1.5; color:var(--ink); }
.hint-box .line + .line { margin-top:6px; }
.creator-run-grid { display:grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 420px); gap:24px; }
.detail-card { background: var(--surface-2); border: 1px solid var(--line); padding: 18px; }
.detail-card h3 { margin:0 0 10px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); }
.detail-actions { display:flex; gap:10px; margin-bottom:10px; }
.detail-card .row { display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid var(--line); font-size:12px; }
.detail-card .row:last-child { border-bottom:0; }
.detail-card .k { color:var(--dim); font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; }
.detail-card .v { color:var(--ink); font-family:"JetBrains Mono", monospace; font-size:12px; text-align:right; }
.detail-card .subhead { margin-top:12px; margin-bottom:6px; font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); }
.detail-list { margin-top:10px; padding:10px 12px; border:1px solid var(--line); background:var(--surface); font-family:"JetBrains Mono", monospace; font-size:11px; line-height:1.5; color:var(--ink); }
.detail-list div + div { margin-top:6px; }
.asset-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
.asset-card { border:1px solid var(--line); background:var(--surface-2); padding:14px 16px; }
.asset-card h3 { margin:0 0 6px; font-size:13px; color:var(--ink); }
.asset-meta { font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--dim); line-height:1.5; }
.asset-lines { margin-top:10px; font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--ink); line-height:1.5; }
.asset-lines div + div { margin-top:4px; }
.board-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
button.convert-action { background: var(--green); border-color: var(--green); color: #F4FBF5; }
button.convert-action:hover { background: #275931; }
.statusbar { position: fixed; bottom: 0; left: 0; right: 0; height: 26px; background: var(--ink); color: #8C857B; font-family: "JetBrains Mono", monospace; font-size: 11px; display: flex; align-items: center; padding: 0 22px; gap: 18px; letter-spacing: 0.05em; }
.statusbar .ok { color: #6FB07F; }
.statusbar .sep { color: #2F2A2C; }
.statusbar .right { margin-left: auto; }
@media (max-width:1160px) {
  .browser-layout, .browser-secondary, .wizard-layout, .planner-grid, .creator-run-grid, .worker-layout, .worker-grid, .w02-grid { grid-template-columns:1fr; }
  .worker-controls-card, .worker-page-actions { width:100%; }
}
/* Phone-width layout (iPhone-class viewports). Desktop is untouched. Wide
   tables scroll inside their card instead of widening the whole page, flex
   headers and tab strips wrap, tile grids drop to two columns, and form
   controls get 16px type because iOS Safari zooms the page when a smaller
   input is focused. */
@media (max-width:600px) {
  .stage { padding:18px 14px 48px; }
  .tabs { padding:0 10px; }
  .tab { padding:12px 10px 10px; }
  /* Single-column grids: an implicit auto column grows to the widest child,
     so a wide table widened its card and the page. minmax(0,1fr) pins the
     column to the viewport and lets the card's overflow-x take over. */
  .import-stack, .migration-board-shell { grid-template-columns:minmax(0,1fr); }
  .pagehead, .card-head, .card-foot, .import-subtabs, .migration-board-pagination { flex-wrap:wrap; }
  .card-body.flush, .table-wrap, .card-wrap, .board-wrap { overflow-x:auto; }
  .tiles, .tiles.five { grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* !important because page sheets size inputs with more specific selectors
     (.toolstrip input[type="search"] and friends); the iOS zoom threshold
     has to win over all of them. */
  input:not([type]), input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="number"], select, textarea { font-size:16px !important; }
}