/*
 * ATS Bridge — Prismatic Workspace
 * --------------------------------
 * Final presentation owner for sidepanel.html. Legacy styles stay loaded because
 * they contain safety notices and one-off workflow controls. Extend this owner,
 * not a second global theme. Companion settings alone have a scoped stylesheet.
 * Layout never invents business state: extraction, candidate lock, review, fill,
 * hidden/disabled attributes and persisted theme remain owned by existing code.
 */
:root {
  color-scheme: light;
  --panel-unit: 1px;
  --ws-canvas: #eef1f7;
  --ws-surface: #ffffff;
  --ws-soft: #f3f5fa;
  --ws-warm: #e9edf7;
  --ws-ink: #15213a;
  --ws-secondary: #43516a;
  --ws-muted: #5e6b82;
  --ws-line: #d9e0ed;
  --ws-accent: #3454d8;
  --ws-accent-soft: #edf0ff;
  --ws-button: #3152d6;
  --ws-button-end: #5548c8;
  --ws-green: #216a53;
  --ws-green-soft: #e8f5ef;
  --ws-warning: #815309;
  --ws-warning-soft: #fff2d6;
  --ws-error: #ad3049;
  --ws-error-soft: #ffedf1;
  --ws-shadow: 0 3px 12px #18295705, 0 1px 2px #18295706;
  --ws-spectral: linear-gradient(100deg, #6b73ff 0%, #4bc5da 28%, #8ccfb0 48%, #e9bb84 69%, #b28fea 100%);
  --ws-hero: radial-gradient(ellipse at 78% 10%, #cbdcff77, transparent 60%), linear-gradient(125deg, #f8faff 20%, #ecedfa 100%);
  --card-bg: var(--ws-surface); --input-bg: var(--ws-surface); --accent-soft: var(--ws-accent-soft);
  --success-text: var(--ws-green); --warning-text: var(--ws-warning);
  --g-ink: var(--ws-ink); --g-ink-2: var(--ws-secondary);
  --g-muted: var(--ws-muted); --g-faint: var(--ws-muted);
  --g-line: var(--ws-line); --g-canvas: var(--ws-canvas); --g-surface: var(--ws-surface);
  --g-blue: var(--ws-accent); --g-blue-btn: var(--ws-button); --g-blue-tint: var(--ws-accent-soft);
  --g-pink: var(--ws-accent); --g-pink-tint: var(--ws-soft);
  --g-purple: var(--ws-accent); --g-purple-btn: var(--ws-button-end); --g-purple-tint: var(--ws-accent-soft);
  --g-green: var(--ws-green); --g-green-btn: #216a53; --g-green-tint: var(--ws-green-soft);
  --text-primary: var(--ws-ink); --text-secondary: var(--ws-secondary); --text-muted: var(--ws-muted);
  --bg-solid: var(--ws-canvas); --bg-card: var(--ws-surface); --bg-card-hover: var(--ws-soft); --bg-card-active: var(--ws-soft);
  --border-color: var(--ws-line); --accent: var(--ws-accent); --accent-light: var(--ws-accent-soft);
  --success: var(--ws-green); --success-light: var(--ws-green-soft);
  --error-text: var(--ws-error); --error-bg: var(--ws-error-soft);
  --special-text: var(--ws-warning); --special-bg: var(--ws-warning-soft);
  --clay-bg: var(--ws-warm); --clay-card: var(--ws-surface); --clay-ink: var(--ws-ink);
  --clay-sub: var(--ws-muted); --clay-ring: var(--ws-accent); --clay-ring-tint: var(--ws-accent-soft);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --ws-canvas: #0d1220; --ws-surface: #171f30; --ws-soft: #1e293e; --ws-warm: #1d2840;
  --ws-ink: #f0f3fc; --ws-secondary: #c7d1e6; --ws-muted: #a8b7d1; --ws-line: #34415c;
  --ws-accent: #b2c1ff; --ws-accent-soft: #253456;
  --ws-button: #3658db; --ws-button-end: #6152d7;
  --ws-green: #a3e5c8; --ws-green-soft: #1c3b35;
  --ws-warning: #ffd58b; --ws-warning-soft: #42351e;
  --ws-error: #ffb4c4; --ws-error-soft: #442739;
  --ws-shadow: 0 4px 14px #00000014, inset 0 1px 0 #ffffff03;
  --ws-hero: radial-gradient(ellipse at 80% 0%, #37558a55, transparent 65%), linear-gradient(125deg, #171e33, #20243e);
}
html { background: var(--ws-canvas); scroll-behavior: smooth; }
body.workspace-shell {
  margin: 0; padding: 0 0 24px; border: 0; border-radius: 0; min-width: 0;
  min-height: 100vh; background: var(--ws-canvas); color: var(--ws-ink); box-shadow: none;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  font-size: 13px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
body.workspace-shell::before, body.workspace-shell::after { display: none; }
body.workspace-shell * { box-sizing: border-box; }
body.workspace-shell :is(button, input, select, textarea) { font-family: inherit; }
body.workspace-shell button { cursor: pointer; }
body.workspace-shell button:disabled { cursor: not-allowed; }
body.workspace-shell :is(button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ws-accent) !important; outline-offset: 3px; box-shadow: none;
}
body.workspace-shell :is(input, select, textarea) { min-width: 0; max-width: 100%; accent-color: var(--ws-accent); }
body.workspace-shell :is(button, summary) { overflow-wrap: anywhere; }
body.workspace-shell [hidden] { display: none !important; }

/* Product chrome: an instrument-like header, not a second dashboard. */
body.workspace-shell .header { padding: 16px 16px 13px; margin: 0; gap: 8px; border: 0; background: none; }
body.workspace-shell .header-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.workspace-shell .header-brand::before, body.workspace-shell .header-brand::after { display: none; }
body.workspace-shell .header-brand h3 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.04em; font-weight: 760; color: var(--ws-ink); background: none; -webkit-text-fill-color: currentColor; }
.workspace-brand-caption { display: block; margin-top: 3px; font-size: 10px; letter-spacing: .045em; color: var(--ws-muted); }
.workspace-brand-mark { position: relative; width: 36px; height: 38px; flex: 0 0 36px; display: grid; place-items: center; border: 1px solid #283659; border-radius: 11px; background: #18233e; color: #fff; box-shadow: inset 0 1px 0 #ffffff20; overflow: hidden; }
.workspace-brand-mark::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--ws-spectral); }
.workspace-brand-mark svg { width: 24px; height: 24px; }
body.workspace-shell .header-actions { display: flex; gap: 4px; align-items: center; }
body.workspace-shell .header-actions :is(#manageRulesBtn, #themeToggle) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px !important; min-width: 44px; height: 44px !important; min-height: 44px !important;
  margin: 0; padding: 0 !important; border: 1px solid var(--ws-line) !important; border-radius: 12px !important;
  color: var(--ws-secondary) !important; background: var(--ws-surface) !important; box-shadow: var(--ws-shadow) !important;
}
body.workspace-shell .header-actions :is(#manageRulesBtn, #themeToggle):hover { background: var(--ws-accent-soft) !important; border-color: var(--ws-accent) !important; transform: none; }
body.workspace-shell #manageRulesBtn svg { width: 19px; height: 19px; transform: none; stroke-width: 1.7; }
body.workspace-shell #themeToggle::before { background-color: currentColor !important; }

/* A small 3D stage sits beside the task, never in front of it. The fallback is
   hidden ONLY after the controller confirms a successfully drawn scene. */
.workspace-welcome {
  position: relative; isolation: isolate; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr) 130px; align-items: center; gap: 0 6px;
  margin: 0 14px 12px; padding: 15px 15px 0; border: 1px solid var(--ws-line);
  border-radius: 20px; background: var(--ws-hero); box-shadow: var(--ws-shadow);
}
.workspace-welcome::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 2px; background: var(--ws-spectral); opacity: .85; }
.workspace-welcome-copy { position: relative; z-index: 1; min-width: 0; padding: 4px 0 12px; }
.workspace-eyebrow { display: block; color: var(--ws-secondary); font-weight: 700; font-size: 9px; line-height: 1.5; letter-spacing: .18em; }
.workspace-welcome h1 { margin: 8px 0 0; font-size: clamp(22px, 6.1vw, 28px); letter-spacing: -.055em; line-height: 1.5; font-weight: 740; color: var(--ws-ink); }
.workspace-welcome > p { grid-column: 1 / -1; position: relative; margin: 0; padding: 11px 0 12px 17px; border-top: 1px solid var(--ws-line); color: var(--ws-secondary); font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.workspace-welcome > p::before { content: "↳"; position: absolute; left: 1px; color: var(--ws-accent); }
body.workspace-shell .workspace-companion {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  align-self: stretch; width: 130px; min-height: 141px; margin: -7px 0 0; padding: 7px 0 0;
  border: 0; border-radius: 14px; background: none; box-shadow: none; color: var(--ws-secondary); isolation: isolate;
  overflow: hidden;
}
.workspace-companion-halo { position: absolute; width: 108px; height: 35px; border: 1px solid var(--ws-line); border-radius: 50%; top: 91px; background: var(--ws-surface); opacity: .5; z-index: -1; transform: rotate(-8deg); }
.workspace-companion-stage { position: absolute; display: block; top: -5px; left: 50%; width: 160px; height: 150px; transform: translateX(-50%); pointer-events: none; }
.workspace-companion-stage canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
body.workspace-shell .workspace-companion-character { position: relative; width: 118px; height: 112px; font-size: 109px; pointer-events: none; }
body.workspace-shell .workspace-companion[data-companion-ready="true"] .workspace-companion-character { visibility: hidden; }
.workspace-companion-caption { position: absolute; z-index: 2; bottom: 5px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 7px; padding: 4px 6px; font-size: 10px; font-weight: 600; line-height: 1.5; }
.workspace-companion-caption span { color: var(--ws-accent); }
body.workspace-shell .workspace-companion:hover { background: #728ed00a; }
body.workspace-shell .workspace-companion:hover .workspace-companion-caption { color: var(--ws-accent); }
body.workspace-shell #sourceSetupBanner { margin: 0 14px 12px !important; border: 1px solid var(--ws-warning); border-left-width: 3px; padding: 12px !important; border-radius: 12px !important; box-shadow: none; background: var(--ws-warning-soft) !important; color: var(--ws-warning) !important; font-size: 11px !important; }
body.workspace-shell #sourceSetupBanner.source-setup-cta { padding-left: 12px !important; }
body.workspace-shell #sourceSetupBanner.source-setup-cta::before { display: none; }
body.workspace-shell #sourceSetupBanner.source-setup-cta::after { font-size: 11px; margin-top: 5px; color: var(--ws-warning); }

/* Navigation indicates the real current step, not completion or a fake metric. */
body.workspace-shell .workspace-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0 14px 14px; padding: 4px; border: 1px solid var(--ws-line); border-radius: 13px; background: var(--ws-surface); }
body.workspace-shell .workspace-steps li { display: block; min-width: 0; }
body.workspace-shell .workspace-steps li::before, body.workspace-shell .workspace-steps li::after { display: none; }
body.workspace-shell .workspace-step { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 44px; margin: 0; padding: 7px 3px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--ws-muted); box-shadow: none; font-size: 11px; font-weight: 650; line-height: 1.5; }
.workspace-step-number { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid var(--ws-line); border-radius: 6px; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; background: var(--ws-soft); }
body.workspace-shell .workspace-step[aria-current="step"] { color: var(--ws-accent); background: var(--ws-accent-soft); }
.workspace-step[aria-current="step"] .workspace-step-number { border-color: var(--ws-accent); color: var(--ws-accent); background: var(--ws-surface); }
body.workspace-shell .workspace-step:hover { background: var(--ws-soft); color: var(--ws-accent); }

/* Workflow modules: purpose, explanation, action. No business hooks are moved. */
body.workspace-shell .flow-stack { display: block; margin: 0; padding: 0; }
body.workspace-shell .flow-card { position: relative; display: block; margin: 0 14px 12px; padding: 16px; border: 1px solid var(--ws-line); border-radius: 16px; background: var(--ws-surface); box-shadow: var(--ws-shadow); scroll-margin-top: 14px; }
body.workspace-shell .flow-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; font-size: 15px; line-height: 1.55; font-weight: 730; letter-spacing: -.025em; color: var(--ws-ink); }
.workspace-card-number { display: grid; place-items: center; flex: 0 0 34px; height: 37px; border: 1px solid var(--ws-line); border-radius: 10px; font-size: 13px; font-weight: 650; line-height: 1; color: var(--ws-secondary); background: var(--ws-soft); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.workspace-card-copy { display: block; min-width: 0; }
.workspace-card-copy small { display: block; margin-bottom: 1px; color: var(--ws-muted); font-size: 8px; font-weight: 700; letter-spacing: .16em; line-height: 1.5; }
body.workspace-shell .flow-card > p { margin: 0 0 13px; color: var(--ws-secondary); font-size: 11px; font-weight: 400; line-height: 1.8; }
body.workspace-shell .flow-card-capture { border-color: #aebce9; }
body.workspace-shell .flow-card-capture .workspace-card-number { color: var(--ws-accent); border-color: var(--ws-accent); background: var(--ws-accent-soft); }
body.workspace-shell :is(#extractFromPageBtn, #bulkFillBtn, #startLearningBtn) {
  width: 100%; height: auto !important; min-height: 48px !important; line-height: 1.6 !important;
  margin: 0; padding: 12px !important; border: 1px solid #ffffff10 !important; border-radius: 11px !important;
  background: linear-gradient(110deg, var(--ws-button), var(--ws-button-end)) !important; color: #fff !important;
  font-size: 13px !important; font-weight: 680 !important; box-shadow: inset 0 1px 0 #ffffff20, 0 3px 8px #334ecc1a !important;
  letter-spacing: .03em; text-wrap: balance; transition: filter .18s, transform .18s !important;
}
body.workspace-shell #bulkFillBtn { background: #216a53 !important; box-shadow: inset 0 1px 0 #ffffff20 !important; }
body.workspace-shell :is(#extractFromPageBtn, #bulkFillBtn, #startLearningBtn):hover:not(:disabled) { filter: brightness(1.1); }
body.workspace-shell :is(#extractFromPageBtn, #bulkFillBtn, #startLearningBtn):active:not(:disabled) { transform: translateY(1px); }
body.workspace-shell :is(#extractFromPageBtn, #bulkFillBtn, #startLearningBtn):disabled:not([data-g-state="busy"]):not([data-g-state="done"]) { background: var(--ws-soft) !important; border-color: var(--ws-line) !important; color: var(--ws-muted) !important; box-shadow: none !important; opacity: 1 !important; }
body.workspace-shell :is(#extractFromPageBtn, #bulkFillBtn, #startLearningBtn)[data-g-state="done"] { background: #216a53 !important; }
body.workspace-shell :is(#extractFromPageBtn, #bulkFillBtn, #startLearningBtn)[data-g-state="warn"] { background: var(--ws-warning-soft) !important; color: var(--ws-warning) !important; border-color: var(--ws-warning) !important; }
body.workspace-shell :is(#extractFromPageBtn, #bulkFillBtn, #startLearningBtn)[data-g-state="error"] { background: var(--ws-error-soft) !important; color: var(--ws-error) !important; border-color: var(--ws-error) !important; }
body.workspace-shell .g-ripple { display: none; }
body.workspace-shell .review-field-list { margin: 0 0 14px; padding: 10px; border: 1px solid var(--ws-line); border-radius: 11px; background: var(--ws-soft); box-shadow: none; }
body.workspace-shell .review-field-list[data-state="empty"] { padding: 22px 10px; background: var(--ws-soft); border: 1px dashed var(--ws-line); }
body.workspace-shell .review-field-empty { color: var(--ws-muted); font-size: 11px; text-align: center; font-weight: 400; }
body.workspace-shell .review-field-main { grid-template-columns: 6.2em minmax(0, 1fr) auto; min-height: 48px; padding: 10px 3px; }
body.workspace-shell .review-field-main:hover { background: var(--ws-surface); }
body.workspace-shell .review-field-main .review-field-value { white-space: normal; overflow-wrap: anywhere; word-break: normal; line-height: 1.6; }
body.workspace-shell .review-field-act { padding: 5px 7px; border: 1px solid var(--ws-line); border-radius: 6px; background: var(--ws-surface); }
body.workspace-shell .review-field-input { background: var(--ws-surface); }
body.workspace-shell .review-field-edit-actions { flex-wrap: wrap; }
body.workspace-shell .review-field-missing summary, body.workspace-shell .review-field-head.has-missing span { color: var(--ws-warning); }
body.workspace-shell .candidate-lock-panel { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 3px 8px; padding: 12px 0 0; border: 0 !important; border-top: 1px solid var(--ws-line) !important; border-radius: 0; background: transparent; color: var(--ws-ink); box-shadow: none; }
body.workspace-shell .candidate-lock-dot { width: 32px; height: 36px; border-radius: 9px; background: var(--ws-soft); color: var(--ws-muted); }
body.workspace-shell .candidate-lock-main { min-width: 0; color: var(--ws-ink); font-size: 12px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
body.workspace-shell :is(.candidate-lock-meta, .candidate-lock-message) { overflow-wrap: anywhere; }
body.workspace-shell .candidate-lock-title > span:not(.candidate-lock-dot) { color: var(--ws-muted); font-size: 10px; }
body.workspace-shell .candidate-lock-toggle { min-height: 44px; height: auto; line-height: 1.4; padding: 7px 9px; border: 1px solid var(--ws-line); border-radius: 9px; background: var(--ws-soft); color: var(--ws-secondary); font-size: 11px; }
body.workspace-shell .candidate-lock-panel[data-state="locked"] .candidate-lock-toggle { color: var(--ws-green); background: var(--ws-green-soft); border-color: var(--ws-green); }
body.workspace-shell .candidate-lock-panel[data-state="locked"] .candidate-lock-dot { color: var(--ws-green); background: var(--ws-green-soft); }
body.workspace-shell .candidate-lock-panel[data-state="empty"] .candidate-lock-actions { display: none; }
body.workspace-shell .candidate-lock-panel[data-state="off"] .candidate-lock-toggle { color: var(--ws-secondary); }
body.workspace-shell .candidate-lock-panel[data-state="warning"], body.workspace-shell .candidate-lock-panel[data-state="blocked"] { padding: 12px; border: 1px solid var(--ws-error) !important; border-radius: 11px; background: var(--ws-error-soft); }
body.workspace-shell .candidate-lock-actions { margin-top: 8px; }
body.workspace-shell #candidateLockUnlockBtn { grid-template-columns: minmax(0, 1fr) 24px; gap: 2px 8px; padding: 9px 11px; color: var(--ws-secondary); background: var(--ws-soft) !important; border: 1px solid var(--ws-line) !important; border-radius: 9px; min-height: 48px; font-size: 12px; }
body.workspace-shell #candidateLockUnlockBtn::before { display: none; }
body.workspace-shell #candidateLockUnlockBtn::after { grid-column: 2; width: 22px; height: 22px; background-color: transparent; }
body.workspace-shell #candidateLockUnlockBtn > :is(span, small) { grid-column: 1; }
body.workspace-shell #candidateLockUnlockBtn > small { color: var(--ws-muted); font-size: 10px; }
body.workspace-shell .flow-card-fill .site-select-wrapper { position: static !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 0 !important; margin: 0 0 12px !important; width: 100% !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
body.workspace-shell .site-select-label { margin: 0 !important; font-size: 11px !important; color: var(--ws-secondary); }
body.workspace-shell #activeSiteSelect { width: 100% !important; max-width: 100%; height: auto; min-width: 0; min-height: 44px; padding: 9px 28px 9px 10px; border: 1px solid var(--ws-line); border-radius: 9px; background-color: var(--ws-soft); color: var(--ws-ink); box-shadow: none; font-size: 12px; }
body.workspace-shell #activeSiteAutoStatus { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; overflow-wrap: anywhere; grid-column: 1 / -1; margin: 0 !important; font-size: 10px !important; color: var(--ws-muted) !important; }
body.workspace-shell .flow-card > .workspace-safety-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--ws-line); font-size: 10px; line-height: 1.75; color: var(--ws-secondary); }
.workspace-safety-note svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }
body.workspace-shell .ats-learn-hint { grid-template-columns: minmax(0, 1fr) 44px; padding: 11px; gap: 8px; border: 1px solid var(--ws-line); border-radius: 11px; background: var(--ws-accent-soft); box-shadow: none; }
body.workspace-shell .ats-learn-hint > .g-ch { display: none; }
body.workspace-shell .ats-learn-hint-copy { min-width: 0; overflow-wrap: anywhere; }
body.workspace-shell #atsLearnHintBtn { grid-row: 2; grid-column: 1; justify-self: start; margin: 0; border: 1px solid var(--ws-line) !important; background: var(--ws-surface) !important; }
body.workspace-shell #atsLearnHintDismissBtn { grid-column: 2; grid-row: 1 / 3; min-width: 44px; }
body.workspace-shell .flow-tools { margin: 4px 14px 0; border: 1px solid var(--ws-line); border-radius: 14px; background: var(--ws-surface); box-shadow: none; }
body.workspace-shell .flow-tools > summary { padding: 13px 14px; gap: 10px; border-radius: 14px; }
body.workspace-shell .flow-tools > summary:hover { background: var(--ws-soft); }
body.workspace-shell .flow-tools-icon { width: 34px; height: 34px; border: 1px solid var(--ws-line); border-radius: 9px; background: var(--ws-soft); color: var(--ws-secondary); }
body.workspace-shell .flow-tools-icon svg { width: 15px; height: 15px; }
body.workspace-shell .flow-tools-copy strong { font-size: 12px; color: var(--ws-secondary); }
body.workspace-shell .flow-tools-copy small { font-size: 10px; color: var(--ws-muted); }
body.workspace-shell .g-quiet-btn { background: var(--ws-surface) !important; border-color: var(--ws-line) !important; color: var(--ws-secondary) !important; min-height: 44px !important; font-size: 11px !important; }

/* Full-height settings sheet: clear header, compact category grid, scrollable body.
   settings-shell.js remains the only owner of moving existing settings into groups. */
body.workspace-shell #ruleModalOverlay { align-items: stretch !important; justify-content: center !important; padding: 0; background: #080e24aa !important; backdrop-filter: blur(4px); }
body.workspace-shell #ruleModalOverlay .settings-sheet { position: relative; width: 100% !important; max-width: 600px !important; max-height: 100dvh !important; height: 100%; margin: 0; padding: 22px 18px 18px !important; border: 0 !important; border-radius: 0 !important; background: var(--ws-canvas) !important; box-shadow: 0 0 36px #17223826; overscroll-behavior: contain; scrollbar-gutter: stable; }
body.workspace-shell #ruleModalOverlay .settings-sheet > h4 { margin: 0 0 6px !important; color: var(--ws-ink); font-size: 25px !important; letter-spacing: -.03em; }
body.workspace-shell #ruleModalOverlay .settings-sheet > p { color: var(--ws-muted) !important; font-size: 11px !important; margin: 0 0 16px !important; }
body.workspace-shell .header-version { font-size: 9px; color: var(--ws-muted); background: var(--ws-soft); padding: 3px 6px; }
body.workspace-shell .settings-nav { position: relative; top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid var(--ws-line); background: var(--ws-canvas); }
body.workspace-shell .settings-tab { min-width: 0; min-height: 44px !important; padding: 7px 4px !important; border: 1px solid transparent !important; border-radius: 8px !important; background: var(--ws-soft) !important; color: var(--ws-secondary) !important; font-size: 11px !important; font-weight: 550 !important; white-space: normal; }
body.workspace-shell .settings-tab[aria-selected="true"] { color: var(--ws-accent) !important; background: var(--ws-accent-soft) !important; border-color: var(--ws-accent) !important; font-weight: 700 !important; }
body.workspace-shell .settings-tab:last-child { grid-column: auto; }
body.workspace-shell .settings-group { gap: 12px; padding-bottom: 20px; }
body.workspace-shell .settings-group-title { margin: 0; font-size: 17px; font-weight: 700; }
body.workspace-shell .settings-group-lead { color: var(--ws-muted); font-size: 11px; line-height: 1.85; }
body.workspace-shell .settings-sub-lead { color: var(--ws-muted); font-size: 11px; line-height: 1.75; }
body.workspace-shell .settings-group :is(input:not([type="checkbox"]):not([type="color"]), textarea, select) { min-height: 44px; border-color: var(--ws-line); background: var(--ws-surface); color: var(--ws-ink); font-size: 12px; }
body.workspace-shell :is(.source-teach-box, .ats-site-add, .company-feature, .share-card, .field-order-item) { background: var(--ws-surface); border: 1px solid var(--ws-line); box-shadow: none; border-radius: 12px; }
body.workspace-shell .field-order-buttons button { min-width: 44px; min-height: 44px; background: var(--ws-soft); color: var(--ws-secondary); }
body.workspace-shell .field-order-buttons button:disabled { opacity: .5; }
body.workspace-shell .fm-where, body.workspace-shell .fm-fill-text { color: var(--ws-secondary); }
body.workspace-shell #closeRuleModalBtn { position: sticky; bottom: -2px; z-index: 5; display: block; width: 100%; min-height: 48px; margin: 8px 0 0 !important; padding: 10px !important; border: 1px solid var(--ws-line) !important; border-radius: 10px !important; background: var(--ws-surface) !important; color: var(--ws-ink) !important; font-size: 12px !important; font-weight: 650; box-shadow: 0 -8px 16px var(--ws-canvas) !important; }

/* Companion studio: generous preview, visible names and compact options. */
body.workspace-shell #settingsGroupCharacter.clay-group { padding: 0 0 20px; margin: 0; border-radius: 0; background: none; }
body.workspace-shell #settingsGroupCharacter .clay-picker { gap: 15px; }
body.workspace-shell #settingsGroupCharacter .character-stage.clay-hero { position: relative; top: auto; height: 195px; border: 1px solid var(--ws-line); border-radius: 18px; background: var(--ws-hero); }
body.workspace-shell .clay-hero-canvas { left: 50%; top: 45%; width: 190px; height: 165px; margin: -82px 0 0 -95px; }
body.workspace-shell .clay-deco { display: none; }
body.workspace-shell .clay-hero-side { right: 12px; bottom: 12px; width: 39px; height: 39px; border: 1px solid var(--ws-line); border-radius: 10px; background: var(--ws-surface); box-shadow: none; }
body.workspace-shell #settingsGroupCharacter .clay-hero-side .g-ch-stage { font-size: 29px; }
body.workspace-shell #settingsGroupCharacter .clay-hero .character-stage-note { color: var(--ws-secondary); font-size: 10px; left: 14px; bottom: 13px; right: 62px; }
body.workspace-shell #settingsGroupCharacter .character-tabs.clay-tabs { grid-template-columns: 1.3fr .65fr .65fr 1.3fr; gap: 3px; border-radius: 10px; padding: 4px; background: var(--ws-soft); box-shadow: none; }
body.workspace-shell #settingsGroupCharacter .clay-tabs button { min-height: 44px; padding: 8px 0; border-radius: 7px; font-size: 11px; color: var(--ws-muted); }
body.workspace-shell #settingsGroupCharacter .clay-tabs button::before { display: none; }
body.workspace-shell #settingsGroupCharacter .clay-tabs button[aria-selected="true"] { background: var(--ws-surface); color: var(--ws-ink); box-shadow: 0 1px 3px #202c4210; }
body.workspace-shell #settingsGroupCharacter .clay-grid { gap: 8px; }
body.workspace-shell #settingsGroupCharacter .character-tile { border: 1px solid var(--ws-line); border-radius: 12px; background: var(--ws-surface); color: var(--ws-secondary); box-shadow: none; font-size: 10px; font-weight: 550; padding: 8px 5px; gap: 4px; aspect-ratio: 1 / 1.05; }
body.workspace-shell #settingsGroupCharacter .character-tile:hover { border-color: var(--ws-accent); box-shadow: none; transform: translateY(-2px); }
body.workspace-shell #settingsGroupCharacter .character-tile[aria-checked="true"] { border-color: var(--ws-accent); background: var(--ws-accent-soft); box-shadow: inset 0 0 0 1px var(--ws-accent); color: var(--ws-accent); }
body.workspace-shell #settingsGroupCharacter .character-tile .g-ch-tile { font-size: 57px; }
body.workspace-shell #settingsGroupCharacter .character-tile-label { display: block; min-height: 14px; text-align: center; }
body.workspace-shell #settingsGroupCharacter .clay-shapes { flex-wrap: wrap; gap: 5px; margin-top: 10px; }
body.workspace-shell #settingsGroupCharacter .clay-shape { min-height: 44px; padding: 7px 11px; border: 1px solid var(--ws-line); border-radius: 8px; background: var(--ws-surface); color: var(--ws-secondary); font-size: 10px; }
body.workspace-shell #settingsGroupCharacter .clay-shape[aria-checked="true"] { color: var(--ws-accent); border-color: var(--ws-accent); background: var(--ws-accent-soft); box-shadow: none; }
body.workspace-shell #settingsGroupCharacter .character-color-panel { border-top: 1px solid var(--ws-line); padding-top: 5px; }
body.workspace-shell #settingsGroupCharacter .clay-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 8px; }
body.workspace-shell #settingsGroupCharacter .character-swatch.clay-chip { width: 44px; height: 44px; box-shadow: none; border: 1px solid #202c4212; }
body.workspace-shell #settingsGroupCharacter .clay-chip[aria-checked="true"] { box-shadow: 0 0 0 3px var(--ws-canvas), 0 0 0 5px var(--ws-accent); }
body.workspace-shell #settingsGroupCharacter .clay-more { border: 1px solid var(--ws-line); border-radius: 12px; background: var(--ws-surface); box-shadow: none; }
body.workspace-shell #settingsGroupCharacter .clay-more > summary { padding: 14px 0; color: var(--ws-secondary); font-size: 11px; }
body.workspace-shell .character-stage-states button, body.workspace-shell .character-face-scenes button { padding: 8px 3px; min-height: 44px; background: var(--ws-soft); border-color: var(--ws-line); color: var(--ws-secondary); font-size: 10px; }
body.workspace-shell .character-stage-states button[aria-checked="true"], body.workspace-shell .character-face-scenes button[aria-checked="true"] { background: var(--ws-accent-soft); color: var(--ws-accent); border-color: var(--ws-accent); }
body.workspace-shell .character-face-mode button { padding: 10px; background: var(--ws-soft); }
body.workspace-shell .character-face-mode button[aria-checked="true"] { background: var(--ws-accent-soft); box-shadow: inset 0 0 0 1px var(--ws-accent); }
body.workspace-shell .character-face-mode button[aria-checked="true"] :is(b, span) { color: var(--ws-accent); }
body.workspace-shell .character-face-mode span { color: var(--ws-muted); }
body.workspace-shell .character-face-mode b { color: var(--ws-ink); font-size: 11px; }
body.workspace-shell #settingsGroupCharacter .clay-more .character-face-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.workspace-shell #settingsGroupCharacter .clay-more .character-face-grid .g-ch-tile { font-size: 36px; }
body.workspace-shell #settingsGroupCharacter .clay-chips-small { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.workspace-shell #settingsGroupCharacter .clay-chips-small .character-swatch { width: 44px; height: 44px; }

/* Secondary sheets inherit the same reading surfaces, never suppress warnings. */
body.workspace-shell #missingFieldRequestPopup { background: var(--ws-surface) !important; color: var(--ws-ink) !important; border: 1px solid var(--ws-line) !important; border-radius: 16px !important; }
body.workspace-shell #missingFieldRequestPopup textarea { background: var(--ws-soft) !important; color: var(--ws-ink) !important; }
body.workspace-shell #missingFieldRequestPopup button:last-of-type { background: var(--ws-soft) !important; color: var(--ws-secondary) !important; }
body.workspace-shell .panel-toast { background: var(--ws-surface); color: var(--ws-ink); border: 1px solid var(--ws-line); }
body.workspace-shell #learningModeOverlay .learning-mode-dialog { background: var(--ws-surface) !important; color: var(--ws-ink) !important; border: 1px solid var(--ws-line) !important; max-width: calc(100% - 24px) !important; }
body.workspace-shell #learningModeOverlay :is(input, select) { background: var(--ws-soft) !important; color: var(--ws-ink) !important; }
html[data-theme="dark"] .workspace-welcome { border-color: var(--ws-line); }
html[data-theme="dark"] .workspace-companion-halo { background: #ffffff09; }

html[data-theme="dark"] body.workspace-shell .flow-card-capture { border-color: var(--ws-line); }
html[data-theme="dark"] body.workspace-shell #settingsGroupCharacter .character-stage.clay-hero { background: var(--ws-hero); }

/* Settings retain custom 2D choices, all field controls, and safety notices. */
body.workspace-shell .settings-group :is(label, strong, small, p, li) { overflow-wrap: anywhere; }
body.workspace-shell .settings-group :is(.fm-row-top, .field-order-item, .field-order-name) { min-width: 0; }
body.workspace-shell .settings-group .fm-row-top { flex-wrap: wrap; }
body.workspace-shell .settings-group .fm-row-top .field-order-buttons { margin-left: auto; }
body.workspace-shell .settings-group :is(.fill-field-row, .ats-site-item, .source-teach-steps, .template-preview) { background: var(--ws-surface); color: var(--ws-ink); }
body.workspace-shell .settings-group :is(.source-teach-box, .ats-site-add, .company-feature, .share-card) { padding: 14px; }
body.workspace-shell .settings-group .login-manager summary { color: var(--ws-ink); }
body.workspace-shell .login-manager { background: var(--ws-surface); border-color: var(--ws-line); box-shadow: none; }
body.workspace-shell .login-manager button { background: var(--ws-soft); border-color: var(--ws-line); color: var(--ws-accent); box-shadow: none; }
body.workspace-shell .character-material-note { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--ws-line); border-radius: 12px; color: var(--ws-secondary); background: var(--ws-soft); font-size: 12px; line-height: 1.8; }
body.workspace-shell .required-gender-prompt { background: var(--ws-warning-soft) !important; color: var(--ws-warning) !important; border: 1px solid var(--ws-warning); box-shadow: none !important; }
body.workspace-shell :is(#requiredGenderMaleBtn, #requiredGenderFemaleBtn) { background: var(--ws-surface) !important; color: var(--ws-ink) !important; border: 1px solid var(--ws-line); }
body.workspace-shell .candidate-attention-prompt { background: var(--ws-error-soft) !important; color: var(--ws-error) !important; border-color: var(--ws-error); }
body.workspace-shell :is(.remarks-alert-dock, .attention-text-section) { overflow-wrap: anywhere; }
body.workspace-shell #settingsGroupCharacter .clay-hero-side { width: 44px; height: 44px; }
body.workspace-shell .bulk-fill-progress { color: var(--ws-secondary); border-color: var(--ws-line); background: var(--ws-soft); }
body.workspace-shell .bulk-fill-progress-track { background: var(--ws-line); }
body.workspace-shell #bulkFillProgressBar { background: var(--ws-green); }
body.workspace-shell .bulk-fill-progress[data-state="error"] { color: var(--ws-error); background: var(--ws-error-soft); }

/* A 44px hit area remains a 44px hit area, including compact legacy controls. */
body.workspace-shell :is(button, select, summary) { min-height: 44px !important; }
body.workspace-shell :is(input:not([type="checkbox"]):not([type="radio"]), textarea) { min-height: 44px; }
body.workspace-shell :is(.field-order-buttons button, #positionFindClearBtn, #characterAccentInput) { min-width: 44px; }
body.workspace-shell #positionFindPanel { min-height: 48px; }
body.workspace-shell #copyCurrentDateTimeBtn { height: auto !important; padding: 10px !important; }
body.workspace-shell .flow-tool-actions { flex-wrap: wrap; }
body.workspace-shell .share-code-input-row { min-width: 0; }
body.workspace-shell .share-code-input-row input { flex: 1; min-width: 0; }

@media (max-width: 350px) {
  body.workspace-shell .header { padding: 13px 12px 11px; gap: 6px; }
  body.workspace-shell .header-brand { gap: 7px; }
  body.workspace-shell .header-brand h3 { font-size: 16px; }
  .workspace-brand-mark { width: 32px; height: 35px; flex-basis: 32px; }
  .workspace-brand-caption { font-size: 9px; }
  body.workspace-shell .header-actions { gap: 3px; }
  .workspace-welcome { grid-template-columns: minmax(0, 1fr) 118px; gap: 0 2px; margin-left: 10px; margin-right: 10px; padding: 12px 12px 0; border-radius: 17px; }
  .workspace-eyebrow { font-size: 8px; letter-spacing: .12em; }
  .workspace-welcome h1 { font-size: 22px; }
  body.workspace-shell .workspace-companion { width: 118px; }
  .workspace-companion-caption { font-size: 9px; }
  body.workspace-shell .workspace-steps, body.workspace-shell .flow-card, body.workspace-shell .flow-tools { margin-left: 10px; margin-right: 10px; }
  body.workspace-shell #sourceSetupBanner { margin-left: 10px !important; margin-right: 10px !important; }
  body.workspace-shell .workspace-step { font-size: 10px; gap: 4px; }
  body.workspace-shell .flow-card { padding: 14px 13px; }
  body.workspace-shell .flow-card h2 { font-size: 13px; gap: 8px; }
  .workspace-card-number { flex-basis: 31px; height: 35px; }
  body.workspace-shell #ruleModalOverlay .settings-sheet { padding: 19px 12px 16px !important; }
  body.workspace-shell .settings-tab { font-size: 10px !important; }
  body.workspace-shell #settingsGroupCharacter .character-tile .g-ch-tile { font-size: 48px; }
  body.workspace-shell #settingsGroupCharacter .clay-chips { gap: 10px 5px; }
  body.workspace-shell .review-field-main { grid-template-columns: 5.4em minmax(0, 1fr) auto; gap: 5px; }
  body.workspace-shell .review-field-main .review-field-key { font-size: 10px; }
  body.workspace-shell .review-field-main .review-field-value { font-size: 12px; }
  body.workspace-shell .review-field-act { font-size: 10px; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.workspace-shell *, body.workspace-shell *::before, body.workspace-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .workspace-welcome::before, .workspace-brand-mark::after, .workspace-companion-halo { display: none; }
  body.workspace-shell :is(.flow-card, .workspace-welcome, .workspace-step, .workspace-card-number, .settings-tab) { border-color: CanvasText !important; }
  body.workspace-shell .workspace-step[aria-current="step"] { outline: 2px solid Highlight; outline-offset: -3px; }
}