:root { --brand-display: ui-sans-serif,system-ui,sans-serif; --brand-accent: #c34b2c; --brand-accent-ink: #fff; --rm-paper: #f8f7f3; --rm-paper-2: #eeede7; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--rm-ink); background: var(--rm-paper); font: 14px/1.55 var(--brand-text); }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 3px; }
button,input,select,textarea { font: inherit; }
button { cursor: pointer; border: 1px solid var(--rm-line-strong); border-radius: 5px; padding: 8px 13px; background: #fff; color: var(--rm-ink); }
button:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
button:disabled { opacity: .5; cursor: wait; }
button.primary { background: var(--brand-accent); color: white; border-color: var(--brand-accent); }
button.danger { color: var(--rm-refused); }
button.quiet { background: transparent; border-color: transparent; }
:focus-visible { outline: 3px solid #276fbf; outline-offset: 3px; }
.skip { position: absolute; left: 10px; top: -60px; padding: 10px; background: white; z-index: 20; }
.skip:focus { top: 10px; }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: clamp(28px,3vw,42px); line-height: 1.15; font-weight: 550; letter-spacing: -1.4px; margin-bottom: 12px; }
h2 { font-size: 19px; font-weight: 550; letter-spacing: -.4px; }
h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.wordmark { font-size: 33px; font-weight: 800; letter-spacing: -2px; text-decoration: none; }
.accent { color: var(--brand-accent); }
.eyebrow { font: 10px var(--brand-mono); letter-spacing: 1.8px; color: var(--rm-ink-3); margin: 10px 0 25px; }
.hint,.muted,small { color: var(--rm-ink-3); font-size: 12px; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-card { width: min(480px,100%); margin: auto; padding: 40px; }
.login-card h1 { margin-top: 40px; }
.login-card>p { max-width: 350px; }
.login-card .primary { width: 100%; display: flex; justify-content: space-between; }
.login-aside { background: var(--rm-paper-2); border-left: 1px solid var(--rm-line); padding: 15vh 10%; display: flex; flex-direction: column; justify-content: center; }
.login-aside ol { list-style: decimal-leading-zero; padding-left: 35px; font-size: clamp(20px,2vw,32px); letter-spacing: -.8px; }
.login-aside li { padding: 15px; border-bottom: 1px solid var(--rm-line); }
.login-aside li::marker { color: var(--brand-accent); font: 12px var(--brand-mono); }
.workspace { display: grid; grid-template-columns: 210px minmax(0,1fr); min-height: 100vh; }
.sidebar { border-right: 1px solid var(--rm-line); padding: 30px 20px; display: flex; flex-direction: column; position: sticky; height: 100vh; top: 0; }
.sidebar .wordmark { padding-left: 12px; }
.sidebar .eyebrow { padding-left: 12px; font-size: 9px; }
nav a { display: block; text-decoration: none; padding: 10px 12px; margin-bottom: 4px; border-radius: 5px; color: var(--rm-ink-2); }
nav a[aria-current=page] { color: var(--brand-accent); background: #c34b2c0d; font-weight: 600; }
.nav-number { font: 10px var(--brand-mono); margin-right: 12px; opacity: .6; }
.sidebar-foot { margin-top: auto; padding: 25px 12px 0; font-size: 12px; }
.sidebar-foot #identity { display: block; font-weight: 600; }
.sidebar-foot button { padding-left: 0; }
.sidebar-foot p { margin: 20px 0 0; font-size: 10px; }
.topbar { border-bottom: 1px solid var(--rm-line); height: 65px; display: flex; align-items: center; justify-content: space-between; padding: 0 35px; gap: 15px; font-size: 12px; }
.topbar>div { display: flex; align-items: center; gap: 10px; }
#connection { color: var(--rm-ink-3); font-size: 11px; }
main { padding: 35px; max-width: 1500px; margin: auto; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.page-head p { color: var(--rm-ink-3); margin-bottom: 0; }
.page-head h1 { font-size: 32px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.actions button { font-size: 12px; padding: 6px 10px; }
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 24px 0 30px; }
.metric,.card { background: #fff; border: 1px solid var(--rm-line); border-radius: 7px; padding: 22px; }
.metric .value { display: block; font-size: 36px; line-height: 1.2; font-weight: 500; letter-spacing: -1.5px; margin: 12px 0; }
.metric .label { color: var(--rm-ink-3); font: 10px var(--brand-mono); text-transform: uppercase; letter-spacing: .5px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,310px),1fr)); gap: 18px; }
.card p { white-space: pre-wrap; overflow-wrap: anywhere; }
.card .actions { margin-top: 20px; }
.card-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.card-head h2 { margin-bottom: 6px; }
.badge { display: inline-block; padding: 3px 7px; border-radius: 4px; font: 10px var(--brand-mono); background: var(--rm-paper-2); color: var(--rm-ink-2); white-space: nowrap; }
.badge[data-state=awaiting_human],.badge[data-state=needs_review],.badge[data-state=paused] { color: #805000; background: #fcf1d8; }
.badge[data-state=completed],.badge[data-state=published],.badge[data-state=approved] { color: #17643b; background: #e7f5eb; }
.badge[data-state=failed],.badge[data-state=rejected],.badge[data-state=offline] { color: #a32922; background: #fbeae6; }
.section { margin-top: 30px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-head h2 { margin: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--rm-line); border-radius: 7px; background: #fff; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
th { color: var(--rm-ink-3); font: 10px var(--brand-mono); letter-spacing: .5px; text-transform: uppercase; padding: 13px 16px; background: #fdfdfb; }
td { padding: 15px 16px; border-top: 1px solid var(--rm-line); vertical-align: top; max-width: 350px; overflow-wrap: anywhere; }
td strong { font-weight: 550; }
.empty { padding: 40px 25px; text-align: center; color: var(--rm-ink-3); background: #fff8; border: 1px dashed var(--rm-line-strong); border-radius: 7px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; align-items: end; }
.toolbar label { margin: 0; min-width: 150px; }
label { display: block; font-size: 12px; font-weight: 550; margin: 0 0 15px; }
input,select,textarea { width: 100%; display: block; margin-top: 6px; padding: 10px 11px; border: 1px solid var(--rm-line-strong); border-radius: 5px; background: #fff; color: var(--rm-ink); min-height: 40px; }
textarea { min-height: 95px; resize: vertical; }
select[multiple] { min-height: 100px; }
fieldset { border: 1px solid var(--rm-line); border-radius: 5px; margin: 0 0 15px; padding: 12px; }
fieldset label { display: inline-flex; align-items: center; margin: 5px 15px 5px 0; gap: 7px; }
fieldset input { width: auto; min-height: 0; margin: 0; }
.notice { padding: 12px 35px; background: #e7f5eb; color: #17643b; border-bottom: 1px solid var(--rm-line); white-space: pre-wrap; }
.notice.error { background: #fbeae6; color: #a32922; }
dialog { width: min(680px,calc(100vw - 30px)); max-height: 90vh; padding: 28px; border: 1px solid var(--rm-line-strong); border-radius: 8px; background: var(--rm-paper); color: var(--rm-ink); }
dialog::backdrop { background: #14130f66; backdrop-filter: blur(3px); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.dialog-head h2 { margin: 0; font-size: 24px; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding-top: 15px; }
.form-error { color: #a32922; white-space: pre-wrap; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #eeede7; padding: 15px; border-radius: 5px; font: 12px/1.6 var(--brand-mono); }
.split-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.details { white-space: pre-wrap; overflow-wrap: anywhere; }
.schedule-day { border-left: 2px solid var(--brand-accent); padding-left: 18px; margin-bottom: 25px; }
.schedule-day h2 { font: 12px var(--brand-mono); color: var(--rm-ink-3); }
.schedule-day article { margin-bottom: 12px; }
.load-more { margin: 20px auto; display: block; }
@media(max-width:950px) { .workspace { grid-template-columns: 165px minmax(0,1fr); } .sidebar { padding: 22px 10px; } main { padding: 25px; } .metrics { grid-template-columns: repeat(2,1fr); } .topbar { padding: 0 25px; } }
@media(max-width:650px) { .login-shell { display: block; } .login-aside { display: none; } .login-card { padding: 30px; } .workspace { display: block; } .sidebar { height: auto; position: static; padding: 15px; border-bottom: 1px solid var(--rm-line); } .sidebar>.eyebrow { display: none; } nav { display: flex; overflow-x: auto; margin-top: 10px; } nav a { white-space: nowrap; padding: 7px 10px; margin: 0; } .nav-number { display: none; } .sidebar-foot { position: absolute; right: 15px; top: 15px; padding: 0; } .sidebar-foot p { display: none; } .sidebar-foot #identity { display: inline; } main { padding: 22px 16px; } .topbar { padding: 0 16px; height: 50px; } .page-head { align-items: start; } .page-head h1 { font-size: 28px; } .page-head>.actions { justify-content: end; } .metric { padding: 16px; } .metrics { gap: 10px; } .split-fields { display: block; } #connection { max-width: 170px; text-align: right; } }
/* Product workspace: people and content first, infrastructure under Settings. */
main { max-width: 1560px; }
.page-head h1 { font-weight: 600; letter-spacing: -1px; }
.workspace-stats,.inbox-summary { display: flex; flex-wrap: wrap; gap: 24px; padding: 18px 0 28px; color: var(--rm-ink-3); font-size: 12px; }
.workspace-stats strong { color: var(--rm-ink); font-size: 20px; font-weight: 550; margin-right: 6px; }
.sim-grid,.campaign-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,330px),1fr)); gap: 20px; }
.sim-card { display: flex; flex-direction: column; min-height: 270px; }
.sim-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sim-identity h2 { margin: 0; }
.sim-identity small { display: block; }
.sim-identity>.badge { margin-left: auto; }
.avatar { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; font: 500 15px var(--brand-mono); }
.color-0 { background: #f4e4d8; color: #834525; }.color-1 { background: #e2eade; color: #355d3d; }.color-2 { background: #dfe8f0; color: #355573; }.color-3 { background: #ece2ef; color: #6b4876; }.color-4 { background: #f4edcf; color: #796128; }
.sim-voice { color: var(--rm-ink-2); margin: 22px 0; flex: 1; }
.sim-counters { display: flex; gap: 18px; padding: 15px 0; border-block: 1px solid var(--rm-line); font-size: 11px; color: var(--rm-ink-3); }
.sim-counters strong { color: var(--rm-ink); display: block; font-size: 18px; font-weight: 500; }
.onboarding { background: #fff; border: 1px solid var(--rm-line); border-radius: 12px; text-align: center; padding: 60px 30px; margin: 15px 0; }
.onboarding h2 { font-size: 27px; letter-spacing: -.7px; }.onboarding>p { max-width: 510px; margin: 0 auto 25px; color: var(--rm-ink-2); }
.onboarding ol { display: flex; justify-content: center; flex-wrap: wrap; gap: 35px; padding: 0; margin: 40px 0 0; list-style-position: inside; font: 12px var(--brand-mono); color: var(--rm-ink-3); }
.onboarding-symbol { margin: 0 auto 30px; padding: 18px; border: 1px solid var(--rm-line); border-radius: 20px; width: 85px; font-size: 34px; font-weight: 700; background: var(--rm-paper); }.onboarding-symbol span { color: var(--brand-accent); }
.back-link { padding-left: 0; margin-bottom: 15px; color: var(--rm-ink-3); }
.sim-banner { display: flex; gap: 18px; align-items: center; padding: 20px; background: #fff; border: 1px solid var(--rm-line); border-radius: 8px; }.sim-banner p { margin: 5px 0 0; }.sim-banner .avatar { width: 54px; height: 54px; font-size: 19px; }
.tabs { display: flex; gap: 15px; margin: 25px 0; border-bottom: 1px solid var(--rm-line); }.tab { border: 0; border-radius: 0; padding: 12px 3px; background: transparent; color: var(--rm-ink-3); }.tab.active { color: var(--brand-accent); box-shadow: inset 0 -2px var(--brand-accent); }
.personality-layout,.campaign-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
blockquote { padding: 12px 18px; margin: 14px 0; border-left: 2px solid var(--brand-accent); background: var(--rm-paper); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--rm-ink-2); }
.inline-alert { padding: 14px; border-radius: 6px; background: #fff4dd; margin-top: 15px; font-size: 12px; }.inline-alert p { margin: 6px 0 10px; }.inline-alert button { font-size: 11px; }
.generation-note { font-size: 12px; color: var(--rm-held); margin: 15px 0 0; }.status-dot { display: inline-block; width: 6px; height: 6px; background: currentColor; border-radius: 50%; margin-right: 7px; }
.progress-label { display: block; font-weight: 400; color: var(--rm-ink-3); margin-top: 25px; }
progress { width: 100%; height: 6px; display: block; appearance: none; border: none; margin-top: 8px; border-radius: 5px; background: var(--rm-paper-2); }progress::-webkit-progress-bar { background: var(--rm-paper-2); border-radius: 5px; }progress::-webkit-progress-value { background: #47815c; border-radius: 5px; }progress::-moz-progress-bar { background: #47815c; border-radius: 5px; }
.participants { list-style: none; padding: 0; margin: 0; }.participants li { padding: 12px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--rm-line); }.participants small { width: 100%; color: var(--rm-refused); }
.content-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,350px),1fr)); gap: 20px; align-items: start; }
.content-card { border: 1px solid var(--rm-line); border-radius: 10px; background: #fff; overflow: hidden; }
.content-card-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 0; gap: 12px; }.content-card .avatar { width: 36px; height: 36px; border-radius: 11px; font-size: 12px; }
.select-item { margin: 0; display: flex; padding: 6px; cursor: pointer; }.select-item input { width: 18px; min-height: 18px; height: 18px; margin: 0; accent-color: var(--brand-accent); }
.content-preview { padding: 20px; min-height: 130px; }.content-preview p { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 0; }.content-preview p+p { margin-top: 12px; }
.content-meta { padding: 12px 20px; background: #fafaf7; border-block: 1px solid var(--rm-line); color: var(--rm-ink-3); font-size: 11px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.content-meta>span { color: var(--brand-accent); }.content-rationale { font-size: 12px; color: var(--rm-ink-3); padding: 15px 20px 0; margin-bottom: 12px; overflow-wrap: anywhere; }
.content-status { padding: 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }.content-status small { font-size: 10px; }
.content-actions { padding: 18px 20px 20px; }.content-actions button { min-height: 34px; }
.inbox-summary { padding-top: 0; }.inbox-filters { padding: 18px; background: var(--rm-paper-2); border-radius: 8px; margin-bottom: 25px; }.inbox-filters label { flex: 1; }
.selection-bar { position: sticky; bottom: 15px; background: #24241f; color: #fff; padding: 16px 20px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 15px; box-shadow: 0 8px 30px #0002; margin-top: 20px; }.selection-bar .quiet { color: white; }
.calendar-day { padding-left: 20px; border-left: 2px solid var(--brand-accent); margin: 30px 0; }.calendar-day>h2 { font-size: 15px; }
.settings-link { text-decoration: none; transition: border-color .15s; }.settings-link:hover { border-color: var(--brand-accent); }.settings-link p { color: var(--rm-ink-3); margin-bottom: 0; }
.form-intro { color: var(--rm-ink-3); margin: -5px 0 22px; }.check-label { display: flex; align-items: center; gap: 9px; }.check-label input { width: 17px; height: 17px; min-height: 0; margin: 0; accent-color: var(--brand-accent); }
.voice-samples { margin: 20px 0; }.voice-samples:empty { margin: 0; }summary { cursor: pointer; padding: 8px 0; font-weight: 500; }
.sidebar-foot #identity { margin-right: 8px; }
@media(max-width:1000px) { .personality-layout,.campaign-overview { grid-template-columns: 1fr; } }
@media(max-width:650px) { .content-grid,.sim-grid,.campaign-grid { grid-template-columns: 1fr; }.workspace-stats { gap: 14px; }.workspace-stats span { font-size: 11px; }.workspace-stats strong { font-size: 17px; }.selection-bar { flex-direction: column; align-items: start; }.onboarding { padding: 35px 20px; }.onboarding ol { gap: 14px; font-size: 10px; }.sim-banner { align-items: start; }.page-head>.actions { max-width: 150px; }.inbox-filters label { min-width: 100%; }.content-card-header,.content-preview { padding-inline: 16px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.content-actions button { min-height: 40px; }
@media(max-width:650px) { button { min-height: 44px; } }