/* Means and Margin Studio — executive operating-notebook identity.
   This layer intentionally leaves application behavior in styles.css/app.js
   and brings every operator and client surface into the public-site system. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/inter-var.woff2?v=1") format("woff2");
}

:root,
body[data-role="client"] {
  color-scheme: light;
  --paper: #f4eddf;
  --paper-top: #f7f1e6;
  --paper-deep: #e9decc;
  --panel: #efe5d5;
  --panel-2: #e8dcc9;
  --white: #fbf7ef;
  --ground: #f4eddf;
  --ground-2: #17130f;
  --card: #efe5d5;
  --card-2: #e8dcc9;
  --card-3: #dfd1bc;
  --ink: #17130f;
  --ink-2: #61594f;
  --dim: #8b8174;
  --line: #cbbda8;
  --line-soft: rgba(23, 19, 15, .12);
  --line-dark: #403a33;
  --accent: #8d693b;
  --accent-2: #6f4f2b;
  --accent-wash: rgba(141, 105, 59, .1);
  --rust: #8d693b;
  --ok: #486a51;
  --bad: #a35549;
  --blue: #637483;
  --shadow: none;
}

* {
  scrollbar-color: #a99b88 #ece2d2;
}

html {
  color-scheme: light;
  background: var(--paper);
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, .52), transparent 24rem),
    radial-gradient(circle at 84% 42%, rgba(178, 148, 103, .08), transparent 34rem),
    linear-gradient(180deg, var(--paper-top) 0, #f2eadc 46rem, var(--paper) 100%);
  font: 15px/1.62 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .19;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"),
    repeating-linear-gradient(91deg, rgba(78, 64, 47, .016) 0, rgba(78, 64, 47, .016) 1px, transparent 1px, transparent 9px);
}

.auth-screen,
.app,
.modal,
.toast {
  position: relative;
  z-index: 2;
}

/* Quiet architectural field shared with the public site. */
.margin-scribe-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  contain: strict;
  color: #685c4b;
  opacity: .12;
  pointer-events: none;
}

.scribe-axis,
.scribe-circle,
.scribe-route {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.scribe-axis::before,
.scribe-axis::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.scribe-axis::before { width: 100%; height: 1px; }
.scribe-axis::after { width: 1px; height: 100%; }
.scribe-axis-one { top: 11%; left: -3%; width: 54%; height: 26%; }
.scribe-axis-two { top: 7%; right: 4%; width: 29%; height: 38%; color: #9b7747; }
.scribe-axis-three { bottom: 8%; left: 5%; width: 46%; height: 24%; }

.scribe-circle {
  border: 1px dashed currentColor;
  border-radius: 50%;
}

.scribe-circle-one { top: 12%; right: 8%; width: 310px; height: 310px; }
.scribe-circle-two { top: 17%; right: 13%; width: 170px; height: 170px; }

.scribe-route {
  right: -3%;
  bottom: 13%;
  width: 48%;
  height: 19%;
  border-top: 1px solid #9b7747;
  border-left: 1px solid #9b7747;
  transform: skewX(-21deg);
}

.scribe-label {
  position: absolute;
  color: currentColor;
  font: 650 9px/1 "Inter", sans-serif;
  letter-spacing: .17em;
}

.scribe-label-one { top: 8.5%; right: 14%; }
.scribe-label-two { bottom: 29%; left: 13%; }
.scribe-label-three { right: 6%; bottom: 10%; color: #8d693b; }

::selection {
  color: var(--paper);
  background: var(--ink);
}

:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 3px;
}

a { text-underline-offset: 4px; }

h1,
h2,
h3,
.auth-story h1,
.auth-card h2,
.topbar h1,
.view-head h2,
.section-title h3,
.card h3,
.card-head h3,
.client-hero h2,
.campaign-launch h2,
.discovery-command h2,
.discovery-start h2,
.agent-hero h2,
.agent-role h3,
.agent-template h3,
.copilot-welcome h3 {
  font-family: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.025em;
}

.micro,
.eyebrow,
.breadcrumb,
.label,
thead th,
.nav-label,
.workspace-pick > span,
.section-kicker,
.artifact-label {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-size: .65rem;
}

.eyebrow::before {
  content: "";
  display: block;
  width: 27px;
  height: 1px;
  flex: 0 0 27px;
  background: currentColor;
}

/* Authentication — public brand outside, private operating room inside. */
.auth-screen {
  grid-template-columns: minmax(0, 1.16fr) minmax(430px, .84fr);
  background: transparent;
}

.auth-story {
  min-height: 100svh;
  padding: 40px clamp(34px, 6vw, 92px) 34px;
  border-right: 1px solid #9f907a;
  color: var(--ink);
  background: rgba(247, 241, 230, .82);
}

.auth-story::before {
  width: min(42vw, 640px);
  height: min(42vw, 640px);
  top: 8%;
  right: -22%;
  border: 1px dashed rgba(111, 98, 82, .28);
  border-radius: 50%;
  transform: none;
}

.auth-story::after {
  width: min(27vw, 410px);
  height: min(27vw, 410px);
  top: 18%;
  right: -11%;
  border: 1px solid rgba(157, 120, 68, .34);
  border-radius: 50%;
  transform: none;
}

.auth-story .brand {
  align-items: center;
  gap: 13px;
  color: var(--ink);
  font-family: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.auth-story .brand-logo { width: 50px; height: 50px; }

.auth-story > div:not(.auth-blueprint) {
  max-width: 930px;
  margin-top: auto;
}

.auth-story .eyebrow {
  color: var(--ink);
  font-size: clamp(.72rem, .72vw, .86rem);
}

.auth-story h1 {
  max-width: 10.5ch;
  margin: 24px 0 27px;
  color: var(--ink);
  font-size: clamp(3.7rem, 6.3vw, 7rem);
  line-height: .91;
  letter-spacing: -.055em;
}

.auth-story h1 em {
  color: var(--ink);
  font-style: italic;
}

.auth-lede {
  max-width: 660px;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.72;
}

.auth-blueprint {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  margin-top: clamp(34px, 5vh, 66px);
  border: 1px solid #9f907a;
  color: #2f2820;
  background: rgba(246, 239, 226, .89);
  box-shadow: 10px 11px 0 rgba(83, 65, 43, .09);
}

.auth-blueprint-head,
.auth-blueprint-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  font: 700 .58rem/1.35 "Inter", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.auth-blueprint-head {
  border-bottom: 1px solid rgba(66, 55, 42, .25);
  color: #62584b;
}

.auth-blueprint-head span:last-child { color: #8b6d42; }

.auth-blueprint-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 28px 18px 25px;
}

.auth-blueprint-route::before {
  content: "";
  position: absolute;
  top: 43px;
  right: 12%;
  left: 12%;
  height: 1px;
  background: #796d5d;
}

.auth-blueprint-route > div {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
}

.auth-blueprint-route i,
.auth-blueprint-route b,
.auth-blueprint-route small { display: block; }

.auth-blueprint-route i {
  width: 31px;
  height: 31px;
  margin: 0 auto 10px;
  border: 1px solid #302920;
  border-radius: 50%;
  color: #8d693b;
  background: #f3eadb;
  font: 750 .58rem/29px "Inter", sans-serif;
  font-style: normal;
}

.auth-blueprint-route b {
  font: 700 .67rem/1.25 "Inter", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.auth-blueprint-route small {
  margin-top: 3px;
  color: #7b6f60;
  font-size: .58rem;
}

.auth-blueprint-foot {
  border-top: 1px solid #9f907a;
  color: #716657;
  background: rgba(206, 189, 162, .2);
}

.auth-blueprint-foot strong { color: #2b241d; }

.auth-story .micro {
  color: #776d60;
  font-size: .56rem;
}

.auth-panel {
  position: relative;
  min-height: 100svh;
  padding: clamp(34px, 5vw, 76px);
  color: #f4eddf;
  background:
    linear-gradient(rgba(244, 237, 223, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 237, 223, .035) 1px, transparent 1px),
    #17130f;
  background-size: 34px 34px, 34px 34px, auto;
}

.auth-panel::before {
  content: "PRIVATE OPERATING WORKSPACE";
  position: absolute;
  top: 23px;
  right: 25px;
  color: #8e8373;
  font: 700 .55rem/1 "Inter", sans-serif;
  letter-spacing: .16em;
}

.auth-card { width: min(420px, 100%); }

.auth-card .eyebrow {
  color: #d8ccba;
  font-size: .62rem;
}

.auth-card h2 {
  margin: 22px 0 8px;
  color: #f7f0e3;
  font-size: clamp(2.6rem, 4.5vw, 4.15rem);
  line-height: .98;
}

.auth-card > .muted {
  color: #b3a795;
  line-height: 1.65;
}

.auth-card label {
  color: #cbc0ae;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.auth-card input {
  border-color: #5c5144;
  color: #17130f;
  background: #f4eddf;
}

.auth-card input::placeholder { color: #918778; }

.auth-card .button.primary {
  border-color: #f4eddf;
  color: #17130f;
  background: #f4eddf;
}

.auth-card .button.primary:hover {
  color: #f4eddf;
  background: transparent;
}

.auth-help {
  border-color: rgba(244, 237, 223, .2);
  color: #968a78;
}

.auth-mobile-brand { display: none; }

/* Application frame. */
.app { min-height: 100vh; }

.app-main,
body[data-role="client"] .app-main {
  min-height: 100vh;
  margin-left: 258px;
  background: rgba(244, 237, 223, .84);
}

.sidebar,
body[data-role="client"] .sidebar {
  --ink: #f7f0e3;
  --ink-2: #cbc0ae;
  --dim: #968a78;
  --line: rgba(244, 237, 223, .2);
  --line-soft: rgba(244, 237, 223, .11);
  --card: #211c17;
  --card-2: #2c251e;
  --card-3: #332b23;
  --accent: #d8b783;
  --accent-wash: rgba(216, 183, 131, .1);
  width: 258px;
  padding: 22px 15px 18px;
  border-right: 1px solid #403a33;
  color: #f7f0e3;
  background: #17130f;
  box-shadow: none;
}

.side-top { padding: 2px 9px 24px; }

.sidebar .brand {
  align-items: center;
  gap: 11px;
  color: #f7f0e3;
  font-family: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.sidebar .brand-logo,
body[data-role="client"] .sidebar .brand-logo {
  width: 42px;
  height: 42px;
}

.brand-copy small,
body[data-role="client"] .sidebar .brand-copy small {
  margin-top: 6px;
  color: #968a78;
  font-family: "Inter", sans-serif;
  font-size: .49rem;
  letter-spacing: .16em;
}

.workspace-pick {
  margin-bottom: 4px;
  padding: 14px 10px 16px;
  border-color: rgba(244, 237, 223, .17);
}

.workspace-pick > span,
.nav-label {
  color: #8e8373;
  font-size: .52rem;
  letter-spacing: .17em;
}

.workspace-pick select {
  color: #f7f0e3;
  font-weight: 650;
}

.workspace-pick select option { color: #17130f; background: #f4eddf; }

.nav-item,
body[data-role="client"] .nav-item {
  margin: 1px 0;
  padding: 10px 10px;
  border: 1px solid transparent;
  border-radius: 0;
  color: #c4b8a6;
  font-size: .76rem;
}

.nav-item:hover,
body[data-role="client"] .nav-item:hover {
  border-color: rgba(244, 237, 223, .16);
  color: #f7f0e3;
  background: #211c17;
}

.nav-item.active,
body[data-role="client"] .nav-item.active {
  border-color: #f4eddf;
  color: #17130f;
  background: #f4eddf;
  font-weight: 750;
}

.nav-item.active svg,
body[data-role="client"] .nav-item.active svg { stroke: #8d693b; }

.nav-item .count {
  border-radius: 0;
  color: inherit;
  background: rgba(244, 237, 223, .1);
}

.nav-item.active .count { background: rgba(23, 19, 15, .09); }

.side-foot,
body[data-role="client"] .side-foot { border-color: rgba(244, 237, 223, .18); }

.user-chip > span,
body[data-role="client"] .user-chip > span {
  border: 1px solid rgba(244, 237, 223, .24);
  border-radius: 0;
  color: #d8b783;
  background: transparent;
}

.user-chip strong,
body[data-role="client"] .user-chip strong { color: #f7f0e3; }
.user-chip small,
body[data-role="client"] .user-chip small { color: #968a78; }
.side-foot .text-button,
body[data-role="client"] .side-foot .text-button { color: #968a78; }
.side-foot .text-button:hover,
body[data-role="client"] .side-foot .text-button:hover { color: #f7f0e3; }

.demo-banner {
  min-height: 32px;
  border-color: #c2a678;
  color: #6b5c48;
  background: #e9ddc8;
}

.demo-banner b { color: #6f4f2b; }

.topbar,
body[data-role="client"] .topbar {
  height: 82px;
  padding: 15px clamp(22px, 3vw, 46px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: rgba(247, 241, 230, .94);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.topbar::after {
  content: "";
  position: absolute;
  right: clamp(22px, 3vw, 46px);
  bottom: -1px;
  width: 92px;
  height: 1px;
  background: #8d693b;
}

.topbar h1,
body[data-role="client"] .topbar h1 {
  margin-top: 1px;
  color: var(--ink);
  font-size: 1.42rem;
  line-height: 1;
}

.breadcrumb,
body[data-role="client"] .breadcrumb {
  color: #7c7163;
  font-size: .54rem;
  letter-spacing: .16em;
}

.view,
body[data-role="client"] .view {
  max-width: 1540px;
  padding: 34px clamp(22px, 3vw, 46px) 88px;
}

.loader { color: var(--dim); }
.loader i { border-color: var(--line); border-top-color: var(--ink); }

/* Shared controls and editorial components. */
input,
select,
textarea,
body[data-role="client"] input,
body[data-role="client"] select,
body[data-role="client"] textarea {
  border-color: #bdae98;
  border-radius: 0;
  color: var(--ink);
  background: rgba(251, 247, 239, .82);
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(23, 19, 15, .08);
}

.button,
body[data-role="client"] .button {
  min-height: 41px;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--paper);
  background: var(--ink);
  box-shadow: none;
  font: 750 .65rem/1 "Inter", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.button:hover,
body[data-role="client"] .button:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  transform: translateY(-1px);
}

.button.primary,
body[data-role="client"] .button.primary {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.button.primary:hover,
body[data-role="client"] .button.primary:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}

.button.ghost,
body[data-role="client"] .button.ghost {
  border-color: #9f907a;
  color: var(--ink);
  background: transparent;
}

.button.ghost:hover,
body[data-role="client"] .button.ghost:hover {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.button.danger { border-color: var(--bad); color: var(--bad); background: transparent; }
.button.danger:hover { color: var(--paper); background: var(--bad); }

.icon-button,
.text-button { color: inherit; }

.view-head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.view-head h2 {
  max-width: 19ch;
  margin: 5px 0;
  color: var(--ink);
  font-size: clamp(2.15rem, 3.5vw, 3.8rem);
  line-height: .98;
}

.view-head p { color: var(--ink-2); line-height: 1.65; }

.section-title {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.section-title h3 {
  color: var(--ink);
  font-size: 1.28rem;
}

.section-title span {
  font-family: "Inter", sans-serif;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.card,
.stat,
.client-card,
.campaign-card,
.asset-card,
.leg-card,
.build-card,
.control-card,
.agent-role,
.agent-template,
.agent-pack-tab,
.client-attention,
.client-shortcut,
.project-row,
.market-category,
.market-source-stats > div,
body[data-role="client"] .card,
body[data-role="client"] .stat,
body[data-role="client"] .campaign-card,
body[data-role="client"] .asset-card,
body[data-role="client"] .client-card,
body[data-role="client"] .build-card {
  min-width: 0;
  max-width: 100%;
  border-color: #c5b69f;
  border-radius: 0;
  color: var(--ink);
  background: rgba(239, 229, 213, .88);
  box-shadow: none;
}

.card.flush { overflow: clip; }

.grid,
.grid > *,
.table-wrap {
  min-width: 0;
  max-width: 100%;
}

.table-wrap { overflow-x: auto; }

.card-head {
  padding-top: 17px;
  border-bottom: 1px solid var(--line-soft);
}

.card-head h3,
.card h3 { color: var(--ink); font-size: 1.08rem; }

.stat,
body[data-role="client"] .stat {
  position: relative;
  min-height: 136px;
  padding: 18px;
  border-top: 2px solid #403a33;
  background: rgba(246, 239, 226, .86);
}

.stat::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 13px;
  width: 18px;
  height: 18px;
  border-right: 1px solid rgba(111, 98, 82, .35);
  border-bottom: 1px solid rgba(111, 98, 82, .35);
}

.stat.accent,
body[data-role="client"] .stat.accent {
  border-color: #8d693b;
  background: #eee2cf;
}

.stat .label { color: #756a5d; }
.stat strong,
.stat.accent strong { color: var(--ink); font-family: "Iowan Old Style", "Baskerville", serif; font-weight: 400; }

.stat-link:hover,
body[data-role="client"] .stat-link:hover {
  border-color: #8d693b;
  color: var(--ink);
  background: #eadcc7;
  box-shadow: none;
}

.client-card:hover,
.campaign-card:hover,
.asset-card:hover,
.project-row-link:hover,
.client-shortcut:hover,
body[data-role="client"] .build-card:hover {
  border-color: #8d693b;
  background: #eadcc7;
  box-shadow: none;
  transform: translateY(-1px);
}

.pill,
.rank-number,
.filter,
.integration-chip {
  border-radius: 0;
}

.pill {
  border-color: #bdae98;
  color: #635a50;
  background: rgba(251, 247, 239, .38);
}

.rank-number {
  color: #6f4f2b;
  background: rgba(141, 105, 59, .1);
}

.filter.active {
  border-color: #8d693b;
  color: #6f4f2b;
  background: rgba(141, 105, 59, .1);
}

.progress,
.progress i,
.campaign-progress,
.campaign-progress i,
.package-stage i,
.package-stage em { border-radius: 0; }

.progress { height: 3px; background: #d7c9b5; }
.progress i { background: #8d693b; }

.project-row { border-color: var(--line); }

.activity-link:hover,
body[data-role="client"] .activity-link:hover { background: rgba(233, 222, 204, .72); }

.activity-list .dot,
.activity-link .dot {
  border: 1px solid #bdae98;
  border-radius: 0;
  color: #6f4f2b;
  background: transparent;
}

.data-table th {
  border-color: #bdae98;
  color: #73695c;
}

.data-table td,
body[data-role="client"] .data-table td {
  border-color: var(--line-soft);
  color: #5f574d;
}

.data-table tr:hover td,
body[data-role="client"] .data-table tr:hover td { background: rgba(233, 222, 204, .62); }

.dropzone,
body[data-role="client"] .dropzone {
  border-color: #ad9b82;
  border-radius: 0;
  color: var(--ink-2);
  background: rgba(251, 247, 239, .45);
}

.asset-preview,
body[data-role="client"] .asset-preview,
.campaign-metrics div,
.billing-numbers > div,
.change-impact,
.package-preset,
.source-line,
.connection-note,
.market-lead,
.market-category-empty {
  border-radius: 0;
  background: rgba(246, 239, 226, .72);
}

.result-panel,
body[data-role="client"] .result-panel {
  border-color: #bdae98;
  border-radius: 0;
  color: var(--ink);
  background: #e7dbc7;
}

.message .bubble,
body[data-role="client"] .message .bubble {
  border-radius: 0 8px 8px 8px;
  background: #e5d8c3;
}

.message.mine .bubble,
body[data-role="client"] .message.mine .bubble {
  border-color: #b99a6e;
  background: #efe2cc;
}

.source-json {
  border-color: #403a33;
  border-radius: 0;
  color: #cbc0ae;
  background: #17130f;
}

/* Client portal uses the same system, with one intentional ink insert. */
body[data-role="client"] { background: transparent; }

body[data-role="client"] #workspace-wrap { display: none !important; }

.client-hero {
  min-height: 250px;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid #17130f;
  border-radius: 0;
  color: #f7f0e3;
  background:
    linear-gradient(rgba(244, 237, 223, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 237, 223, .035) 1px, transparent 1px),
    #17130f;
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 11px 12px 0 rgba(83, 65, 43, .1);
}

.client-hero::after {
  width: 250px;
  height: 250px;
  top: -112px;
  right: -70px;
  border: 1px dashed rgba(244, 237, 223, .22);
  border-radius: 50%;
  transform: none;
}

.client-hero .eyebrow { color: #d8ccba; }
.client-hero h2 { color: #f7f0e3; font-size: clamp(2.7rem, 4.7vw, 4.8rem); font-weight: 400; }
.client-hero p { color: #cbc0ae; line-height: 1.7; }

.client-hero .button,
.client-hero .button.primary {
  border-color: #f4eddf !important;
  color: #17130f !important;
  background: #f4eddf !important;
}

.client-hero .button:hover,
.client-hero .button.primary:hover {
  color: #f4eddf !important;
  background: transparent !important;
}

.client-workspace-mark > i,
.client-attention-icon,
.client-shortcut-icon {
  border-radius: 0;
}

.client-attention,
.client-attention.has-attention {
  border-color: #c5b69f;
  background: rgba(246, 239, 226, .82);
}

.client-attention.has-attention { border-left: 3px solid #8d693b; }

.client-attention-icon,
.client-attention.has-attention .client-attention-icon {
  border: 1px solid #bdae98;
  color: #6f4f2b;
  background: transparent;
}

.client-shortcut { background: rgba(246, 239, 226, .84); }

.client-shortcut-icon {
  border: 1px solid #bdae98;
  color: #6f4f2b;
  background: transparent;
}

/* Product-specific surfaces retain hierarchy without drifting into dashboard chrome. */
.campaign-launch,
.discovery-start,
.control-rule,
.agent-command {
  border: 1px solid #9f907a;
  border-radius: 0;
  color: var(--ink);
  background: rgba(246, 239, 226, .9);
  box-shadow: 9px 10px 0 rgba(83, 65, 43, .08);
}

.campaign-launch h2,
.discovery-start h2,
.agent-command h3 { color: var(--ink); }

.leg-card,
.build-card,
.control-card,
body[data-role="client"] .build-card {
  background: rgba(239, 229, 213, .9);
}

.leg-card::before,
.build-card::before { border-radius: 0; }

.task-check.done { color: #f4eddf; background: #486a51; }

.control-engine > div,
.control-protections > span i,
.discovery-message.user .discovery-avatar,
body[data-role="client"] .build-stage i,
.build-stage i {
  border-radius: 0;
  background: #f4eddf;
}

.discovery-command,
.agent-hero,
body[data-role="client"] .discovery-command,
body[data-role="client"] .agent-hero {
  border: 1px solid #403a33;
  border-radius: 0;
  color: #f7f0e3;
  background:
    linear-gradient(rgba(244, 237, 223, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 237, 223, .035) 1px, transparent 1px),
    #17130f;
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 11px 12px 0 rgba(83, 65, 43, .1);
}

.discovery-command::after,
.agent-hero::before {
  border-color: rgba(244, 237, 223, .18);
  border-radius: 50%;
}

.discovery-command h2,
.agent-hero h2,
body[data-role="client"] .discovery-command h2,
body[data-role="client"] .agent-hero h2 { color: #f7f0e3; }

.discovery-command p,
.agent-hero p,
.agent-outcome b,
body[data-role="client"] .discovery-command p,
body[data-role="client"] .agent-hero p { color: #cbc0ae; }

.discovery-live,
.agent-live,
.agent-outcome span { color: #d8b783; }

.discovery-score > i { background: #2c251e; }
.discovery-score > i::after,
body[data-role="client"] .discovery-score > i::after { background: #17130f; }

.discovery-interview,
.discovery-provider,
.agent-pack-tab,
.agent-pack-add,
.agent-role,
.agent-template,
body[data-role="client"] .agent-pack-tab,
body[data-role="client"] .agent-role,
body[data-role="client"] .agent-template {
  border-radius: 0;
  background: rgba(239, 229, 213, .9);
}

.discovery-transcript { background: rgba(246, 239, 226, .48); }

.discovery-message p,
body[data-role="client"] .discovery-message p {
  border-color: #c5b69f;
  color: var(--ink);
  background: #e8dcc9;
}

.discovery-message.user p,
body[data-role="client"] .discovery-message.user p { background: #f3e9da; }

.discovery-composer,
body[data-role="client"] .discovery-composer {
  border-color: #c5b69f;
  background: #efe5d5;
}

.discovery-provider,
.agent-role { border-top-color: #8d693b; }

.discovery-coverage article.mapped {
  border-top-color: #486a51;
  background: rgba(72, 106, 81, .06);
}

.agent-pack-tab:hover,
.agent-pack-tab.active {
  border-color: #8d693b;
  background: #e9dcc7;
}

.agent-source-mark,
.agent-template > div > span,
.agent-template > div i,
.agent-action-meta > span,
.agent-modal-boundary {
  border-radius: 0;
}

/* Codex workspace is a deliberate black editorial insert, not a separate theme. */
.copilot-shell {
  border-color: #403a33;
  border-radius: 0;
  color: #f7f0e3;
  background: #17130f;
  box-shadow: 11px 12px 0 rgba(83, 65, 43, .1);
}

.copilot-rail { background: #211c17; }
.copilot-main { background: #17130f; }
.copilot-side { background: #211c17; }

.copilot-main-head,
.copilot-rail-head,
.copilot-side { border-color: rgba(244, 237, 223, .16); }

.copilot-boundary,
.copilot-avatar,
.copilot-starters button,
.copilot-composer,
.copilot-auto,
.copilot-approval {
  border-radius: 0;
}

.copilot-boundary { background: #17130f; }
.copilot-message.user .copilot-copy { color: #f7f0e3; background: #2c251e; }
.copilot-event { background: rgba(244, 237, 223, .035); }
.copilot-starters button { color: #cbc0ae; background: #211c17; }
.copilot-starters button:hover { border-color: #d8b783; color: #f7f0e3; }
.copilot-composer { border-color: #5a4d3f; background: #211c17; }
.copilot-composer textarea { color: #f7f0e3; background: transparent; }
.copilot-compose-foot kbd { border-radius: 0; color: #968a78; background: #17130f; }
.copilot-auto { border-color: rgba(216, 183, 131, .3); background: rgba(216, 183, 131, .06); }
.copilot-auto i { border-radius: 0; background: #17130f; }
.copilot-auto i::after { border-radius: 0; }

.copilot-shell .button {
  border-color: #f4eddf;
  color: #17130f;
  background: #f4eddf;
}

.copilot-shell .button:hover {
  color: #f4eddf;
  background: transparent;
}

.copilot-shell .button.ghost {
  border-color: #6b5d4d;
  color: #f4eddf;
  background: transparent;
}

.copilot-shell .button.ghost:hover { border-color: #f4eddf; color: #17130f; background: #f4eddf; }

/* Modal, notifications, and state layers. */
.modal-backdrop {
  background: rgba(23, 19, 15, .74);
  backdrop-filter: blur(6px);
}

.modal-card {
  border: 1px solid #9f907a;
  border-radius: 0;
  color: var(--ink);
  background: #f4eddf;
  box-shadow: 13px 15px 0 rgba(23, 19, 15, .18);
}

.modal-card h2 { color: var(--ink); }

.toast {
  border: 1px solid #f4eddf;
  border-radius: 0;
  color: #f4eddf;
  background: #17130f;
  box-shadow: 8px 9px 0 rgba(83, 65, 43, .12);
}

.toast.bad { border-color: #a35549; color: #fff7ef; background: #a35549; }

@media (max-width: 1180px) {
  .app-main,
  body[data-role="client"] .app-main { margin-left: 246px; }

  .sidebar,
  body[data-role="client"] .sidebar { width: 246px; }
}

@media (max-width: 860px) {
  .margin-scribe-field { opacity: .08; }

  .auth-screen { grid-template-columns: 1fr; }
  .auth-story { display: none; }
  .auth-panel { min-height: 100svh; padding: 82px 26px 38px; }
  .auth-panel::before { top: 25px; right: 20px; }

  .auth-mobile-brand {
    position: absolute;
    top: 21px;
    left: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #f7f0e3;
    font-family: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
    font-size: .78rem;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .auth-mobile-brand img { width: 34px; height: 34px; }

  .app-main,
  body[data-role="client"] .app-main { margin-left: 0; }

  .sidebar,
  body[data-role="client"] .sidebar { width: min(292px, 86vw); }

  .topbar,
  body[data-role="client"] .topbar { height: 76px; padding-inline: 16px; }
  .topbar::after { right: 16px; width: 58px; }
  .view,
  body[data-role="client"] .view { padding: 26px 17px 72px; }
}

@media (max-width: 580px) {
  .scribe-circle-one { right: -90px; width: 230px; height: 230px; }
  .scribe-circle-two { right: -28px; width: 120px; height: 120px; }
  .scribe-label-one,
  .scribe-label-two { display: none; }

  .auth-panel { padding-inline: 20px; }
  .auth-panel::before { display: none; }
  .auth-mobile-brand { left: 19px; }
  .auth-card h2 { font-size: 2.65rem; }

  .topbar h1,
  body[data-role="client"] .topbar h1 { font-size: 1.15rem; }

  .view-head { align-items: flex-start; }
  .view-head h2 { max-width: 13ch; font-size: 2.45rem; }

  .button,
  body[data-role="client"] .button { min-height: 43px; }

  .stat,
  body[data-role="client"] .stat { min-height: 145px; }

  .client-hero {
    min-height: 310px;
    padding: 28px 22px;
    box-shadow: 7px 8px 0 rgba(83, 65, 43, .09);
  }

  .client-hero h2 { font-size: 2.75rem; }

  .campaign-launch,
  .discovery-start,
  .control-rule,
  .agent-command,
  .discovery-command,
  .agent-hero,
  .copilot-shell { box-shadow: 6px 7px 0 rgba(83, 65, 43, .08); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}