/* Cornerr client dashboard.
   Palette and type sampled from the product design document. */

:root {
  --ink-900: #04241c;      /* sidebar ground */
  --ink-800: #0a3527;
  --green-700: #0b3b2c;    /* primary button, headings */
  --green-600: #12503c;
  --green-active: #2f6353; /* active nav pill */
  --mint: #86efc0;
  --mint-100: #d7f7e6;
  --mint-050: #ecfaf2;

  --page: #f4f3ef;
  --card: #ffffff;
  --sunk: #f5f5f3;
  --line: #e8e7e2;
  --line-firm: #d9d8d2;

  --text: #17191c;
  --muted: #6b7280;
  --faint: #9aa0a6;

  --amber: #e08b1e;
  --amber-bg: #fdf3e2;
  --red: #d92d20;
  --red-bg: #fdecec;
  --blue: #2f6be6;
  --blue-bg: #e8effc;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", Georgia, serif;

  --rail: 326px;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
a.btn-dark, a.btn-line, a.go, .rail a { text-decoration: none; }

.hidden { display: none !important; }

/* ------------------------------------------------------------------ login */

.login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: #faf9f7;
}
@media (max-width: 900px) { .login { grid-template-columns: 1fr; } }

.login-left { position: relative; padding: 44px 56px; display: flex; flex-direction: column; }
.login-mark { font-family: var(--sans); font-weight: 500; font-size: 27px; letter-spacing: -0.04em; color: var(--green-700); }
.login-centre { margin: auto; width: min(520px, 100%); }
.login h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 68px;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #0f3a2c;
  margin: 0 0 18px;
}
.login .sub { color: #3f4a46; font-size: 17px; margin: 0 0 40px; }
.login-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.field {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line-firm);
  border-radius: 10px;
  background: #fbfbfa;
  margin-bottom: 12px;
  outline: none;
}
.field:focus { border-color: var(--green-600); background: #fff; }
.btn-primary {
  width: 100%; padding: 13px 16px; border-radius: 10px;
  background: var(--green-700); color: #fff; font-weight: 500;
}
.btn-primary:hover { background: var(--green-600); }
.btn-ghost {
  width: 100%; padding: 13px 16px; border-radius: 10px;
  background: #f6f6f4; border: 1px solid var(--line); margin-top: 10px;
}
.login-legal { text-align: center; color: var(--faint); font-size: 12.5px; margin-top: 16px; }
.login-link {
  display: block; margin: -4px 0 14px auto; padding: 0; background: none;
  color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer;
}
.login-link:hover { color: var(--green-700); }
.login-legal a { color: var(--muted); }
.login-foot {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 14px;
}
.login-foot .right { display: flex; gap: 22px; }
.login-right { background: #b4642a center/cover no-repeat; }
.login-art { width: 100%; height: 100%; display: block; object-fit: cover; }
.err { color: var(--red); font-size: 13px; margin: 0 0 10px; min-height: 18px; }

/* ------------------------------------------------------------------ shell */

.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }

.rail {
  background: var(--ink-900);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 30px 0 0;
  position: sticky; top: 0; height: 100vh;
}
.rail-mark {
  font-size: 27px; font-weight: 500; letter-spacing: -0.04em;
  padding: 0 34px 34px;
}
.rail nav { display: flex; flex-direction: column; gap: 2px; padding: 0 18px; }
.rail-group {
  color: #7f9c92; font-size: 12.5px; letter-spacing: 0.01em;
  padding: 22px 16px 8px;
}
.rail a.item {
  display: flex; align-items: center; gap: 13px;
  padding: 9px 16px; border-radius: 9px;
  color: #eaf3ef; text-decoration: none; font-size: 15.5px;
}
.rail a.item:hover { background: rgba(255,255,255,.06); }
.rail a.item.active { background: var(--green-active); }
.rail .spacer { flex: 1; }
.rail .bottom { padding: 0 18px 14px; display: flex; flex-direction: column; gap: 2px; }

.rail-user {
  display: flex; align-items: center; gap: 13px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 18px 26px; margin-top: 8px;
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--mint);
  display: grid; place-items: center; color: #04241c; font-weight: 600; font-size: 15px;
}
.rail-user .who { flex: 1; line-height: 1.25; }
.rail-user .who b { font-weight: 600; font-size: 15px; }
.rail-user .who span { display: block; color: #93aca3; font-size: 13px; }
/* The client switcher, shown only to somebody who works on more than one. Styled to
   read as the org line it replaces rather than as a form control, because it is a
   statement of where you are with a way to change it, not a field to fill in. */
.rail-user .who-tenant {
  display: block; color: #93aca3; font-size: 13px; background: transparent;
  border: 0; padding: 0; margin-top: 1px; cursor: pointer; font-family: inherit;
  max-width: 150px;
}
.rail-user .who-tenant:focus-visible { outline: 2px solid #93aca3; outline-offset: 2px; }
.tenant-pick { margin-bottom: 10px; text-align: left; }
.cog {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.08); display: grid; place-items: center;
}

/* ------------------------------------------------------------------ main */

main { padding: 34px 44px 80px; min-width: 0; }
.page-title {
  font-family: var(--serif); font-weight: 400; font-size: 38px;
  letter-spacing: -0.01em; color: #0f3a2c; margin: 0 0 30px;
}
.wrap { max-width: 1500px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pad { padding: 22px 24px; }

/* pills / chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--sunk); color: var(--muted);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.green { background: var(--mint-050); color: #1a7f52; }
.chip.amber { background: var(--amber-bg); color: var(--amber); }
.chip.grey  { background: #f1f1ef; color: var(--muted); }
.chip.blue  { background: var(--blue-bg); color: var(--blue); }
.chip.red   { background: var(--red-bg); color: var(--red); }

.seg {
  display: inline-flex; background: #ececea; border-radius: 999px; padding: 4px;
}
.seg button {
  padding: 8px 26px; border-radius: 999px; font-size: 15px; color: var(--muted);
}
.seg button.on { background: var(--green-700); color: #fff; }

.btn-dark {
  background: var(--green-700); color: #fff; padding: 10px 22px;
  border-radius: 9px; font-size: 14.5px;
}
.btn-dark:hover { background: var(--green-600); }
.btn-line {
  background: #fff; border: 1px solid var(--line-firm); padding: 10px 22px;
  border-radius: 9px; font-size: 14.5px;
}
.btn-line:hover { background: var(--sunk); }

/* ------------------------------------------------------------------ home */

.home-hero {
  font-family: var(--serif); font-weight: 400; font-size: 62px; line-height: 1.05;
  color: #0f3a2c; letter-spacing: -0.015em; margin: 60px 0 34px; text-align: center;
}
.home-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 26px; align-items: start; }
@media (max-width: 1200px) { .home-grid { grid-template-columns: 1fr; } }

.banner {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 22px;
}
.banner .badge {
  width: 42px; height: 42px; border-radius: 11px; background: var(--ink-900);
  display: grid; place-items: center; color: var(--mint); flex: none;
}
.banner p { margin: 0; flex: 1; font-size: 15.5px; }

.composer {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 18px 14px; min-height: 150px;
  display: flex; flex-direction: column;
}
.composer textarea {
  border: none; outline: none; resize: none; width: 100%; flex: 1;
  font-size: 16px; color: var(--text); background: transparent; min-height: 64px;
}
.composer textarea::placeholder { color: #9ba1a6; }
.composer .row { display: flex; align-items: center; justify-content: space-between; }
.round {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-firm);
  display: grid; place-items: center; background: #fff; color: var(--muted);
}
.send {
  width: 40px; height: 40px; border-radius: 11px; background: var(--green-700);
  color: #fff; display: grid; place-items: center;
}

.menu-card {
  margin-top: 18px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 8px; max-width: 430px;
}
.menu-card .mi {
  display: flex; align-items: center; gap: 11px; padding: 7px 14px; border-radius: 8px;
  font-size: 14.5px;
}
.menu-card .mi:hover { background: var(--sunk); }
.menu-card .mi .hint { color: var(--faint); }
.menu-card .sec { color: var(--faint); font-size: 13px; padding: 12px 14px 4px; }

.side-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.side-card h3 {
  font-family: var(--serif); font-weight: 400; font-size: 25px; margin: 0 0 16px; color: #12352c;
}
.task { margin-bottom: 15px; }
.task .top { display: flex; align-items: baseline; gap: 8px; }
.task .top b { font-size: 13.5px; font-weight: 600; flex: 1; }
.task .top .badge { font-size: 11.5px; color: var(--faint); font-weight: 500; }
.task .top .badge.bad { color: var(--red); }
.task .sub { color: var(--muted); font-size: 12.5px; margin: 2px 0 6px; }
.task .bar { height: 4px; border-radius: 3px; background: #ececeb; overflow: hidden; }
.task .bar i { display: block; height: 100%; background: var(--green-700); }
.task .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-600); display: inline-block; }

.apr {
  border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; margin-bottom: 12px;
}
.apr .kind { font-size: 11px; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.apr .when { font-size: 11.5px; color: var(--faint); float: right; font-weight: 400; letter-spacing: 0; }
.apr b { display: block; font-size: 14px; margin: 4px 0 11px; }
.apr .acts { display: flex; gap: 8px; }
.apr .acts button { flex: 1; padding: 8px; border-radius: 8px; font-size: 13.5px; }
.apr .acts .ok { background: var(--green-700); color: #fff; }
.apr .acts .edit { background: #fff; border: 1px solid var(--line-firm); }
.apr.red-top { border-color: #f3c9c6; }
.apr.red-top .kind { color: var(--red); }

/* chat */
.chat-wrap { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 0; min-height: 70vh; }
.chat-col { display: flex; flex-direction: column; min-height: 70vh; }
.chat-log { flex: 1; padding: 10px 40px 20px; }
.bubble-user {
  background: var(--mint-100); border-radius: 12px; padding: 13px 17px;
  max-width: 430px; margin: 0 0 26px auto; font-size: 15.5px;
}
.bubble-agent { max-width: 640px; font-size: 15.5px; white-space: pre-wrap; margin-bottom: 12px; }
.msg-tools { display: flex; justify-content: space-between; color: var(--faint); max-width: 640px; margin-bottom: 30px; }
.msg-tools .g { display: flex; gap: 16px; }
.scripted-note { font-size: 12px; color: var(--faint); margin-top: 6px; }
.chat-input {
  margin: 0 40px 8px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 12px 12px 16px; display: flex; align-items: center; gap: 12px;
}
.chat-input input { flex: 1; border: none; outline: none; font-size: 16px; background: transparent; }
.chat-input input::placeholder { color: #9ba1a6; }
.chat-aside { border-left: 1px solid var(--line); padding: 0 0 0 26px; }
.chat-aside .row {
  display: flex; align-items: center; gap: 10px; padding: 15px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-bottom: 10px;
  font-size: 14.5px; color: var(--muted);
}
.chat-aside .row .n { margin-left: auto; color: var(--faint); }

/* ------------------------------------------------------------- approvals */

.q-card { padding: 20px 22px; margin-bottom: 16px; display: flex; gap: 22px; align-items: flex-start; }
.q-card .body { flex: 1; min-width: 0; }
.q-card h4 { margin: 0 0 14px; font-size: 15.5px; }
.q-fields { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.q-fields .lbl { font-size: 10.5px; letter-spacing: .07em; color: var(--faint); font-weight: 600; margin-bottom: 3px; }
.q-fields .val { font-size: 14px; }
.q-acts { display: flex; flex-direction: column; gap: 9px; width: 148px; flex: none; }
.q-acts button { padding: 10px; border-radius: 9px; font-size: 14.5px; }
.q-acts .ok { background: var(--green-700); color: #fff; }
.q-acts .no { background: #fff; border: 1px solid var(--line-firm); }

.hist-row {
  display: flex; align-items: center; gap: 16px; padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.hist-row:last-child { border-bottom: none; }
.hist-row .t { flex: 1; }
.hist-row .t b { font-size: 15.5px; }
.hist-row .t span { display: block; color: var(--faint); font-size: 13.5px; margin-top: 3px; }
.tag-ok { border: 1px solid #b6e5cd; color: #1a7f52; background: var(--mint-050); padding: 4px 14px; border-radius: 999px; font-size: 13px; }
.tag-no { border: 1px solid #f3c9c6; color: var(--red); background: #fff; padding: 4px 14px; border-radius: 999px; font-size: 13px; }

/* ------------------------------------------------------------- campaigns */

.cmp-row {
  display: grid;
  grid-template-columns: 2fr 1.4fr 130px 70px 80px 70px 60px 130px 54px;
  align-items: center; gap: 12px;
  padding: 17px 22px; border-bottom: 1px solid var(--line);
}
.cmp-row:last-child { border-bottom: none; }
.cmp-row b { font-size: 15px; }
.cmp-row .client { color: var(--muted); font-size: 14.5px; }
.cmp-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-row .num.dim { color: var(--muted); }
.cmp-row .go {
  width: 40px; height: 40px; border-radius: 9px; background: var(--green-700);
  color: #fff; display: grid; place-items: center; margin-left: auto;
}

.kpis { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.kpi .lbl { font-size: 10.5px; letter-spacing: .07em; color: var(--faint); font-weight: 600; }
.kpi .v { font-family: var(--serif); font-size: 34px; line-height: 1.1; margin: 6px 0 4px; letter-spacing: .01em; }
.kpi .v small { font-family: var(--sans); font-size: 12px; background: var(--mint-050); color: #1a7f52; padding: 2px 7px; border-radius: 6px; vertical-align: middle; margin-left: 6px; font-weight: 500; }
.kpi .note { color: var(--faint); font-size: 12.5px; }

.detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1200px) { .detail-grid { grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(2,1fr); } }

.seq-head { display: flex; align-items: baseline; margin-bottom: 18px; }
.seq-head h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0; flex: 1; }
.seq-head span { color: var(--faint); font-size: 12.5px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.step .rail-dot { display: flex; flex-direction: column; align-items: center; }
.step .n {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-firm);
  display: grid; place-items: center; font-size: 13px; color: var(--muted); background: #fff;
}
.step .line { flex: 1; width: 1px; background: var(--line); margin: 4px 0; }
.step .content { padding-bottom: 20px; }
.step .title { display: flex; align-items: center; margin-bottom: 9px; }
.step .title b { font-size: 14.5px; flex: 1; }
.step .title .day { font-size: 10.5px; letter-spacing: .06em; color: var(--muted); background: var(--sunk); padding: 4px 10px; border-radius: 6px; font-weight: 600; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric { background: var(--sunk); border-radius: 9px; padding: 11px 14px; }
.metric .l { font-size: 10.5px; letter-spacing: .07em; color: var(--faint); font-weight: 600; }
.metric .v { font-size: 15px; font-weight: 600; margin-top: 3px; }

.act { display: flex; gap: 11px; margin-bottom: 15px; }
.act .bullet { width: 6px; height: 6px; border-radius: 50%; background: var(--green-700); margin-top: 7px; flex: none; }
.act .time { color: var(--faint); font-size: 12.5px; }
.act .txt { font-size: 13.5px; }

.lead-table { width: 100%; border-collapse: collapse; }
.lead-table th {
  text-align: left; font-size: 10.5px; letter-spacing: .07em; color: var(--faint);
  font-weight: 600; padding: 0 0 12px; border-bottom: 1px solid var(--line);
}
.lead-table td { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lead-table tr:last-child td { border-bottom: none; }
.lead-table .who b { display: block; font-size: 14.5px; }
.lead-table .who span { color: var(--muted); font-size: 13px; }
.lead-table .r { text-align: right; }

/* ------------------------------------------------------------------ inbox */

.inbox { display: grid; grid-template-columns: 330px minmax(0,1fr); background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; min-height: 74vh; }
.inbox-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.inbox-head { display: flex; align-items: center; gap: 10px; padding: 20px 20px 16px; }
.inbox-head h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0; flex: 1; }
.inbox-head h3 span { color: var(--muted); }
.icon-btn { width: 34px; height: 34px; border-radius: 9px; background: var(--sunk); display: grid; place-items: center; color: var(--muted); }
.thread {
  display: flex; gap: 12px; padding: 16px 18px; border-top: 1px solid var(--line); cursor: pointer;
}
.thread:hover { background: #fbfbfa; }
.thread.on { background: #f4f7f5; }
.logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; flex: none; }
.thread .tt { min-width: 0; flex: 1; }
.thread .tt b { font-size: 15px; }
.thread .tt .role { color: var(--muted); font-size: 13.5px; }
.thread .tt .prev { color: var(--text); font-size: 14px; margin: 7px 0 9px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thread .foot { display: flex; align-items: center; gap: 8px; }
.thread .foot .age { margin-left: auto; color: var(--faint); font-size: 12.5px; }

.conv { display: flex; flex-direction: column; min-width: 0; }
.conv-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.conv-head b { font-size: 17px; }
.conv-head span { display: block; color: var(--muted); font-size: 13.5px; }
.conv-log { flex: 1; padding: 22px 24px; overflow: auto; }
.ev-activity { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.ev-activity .ic { width: 26px; height: 26px; border-radius: 7px; background: var(--sunk); display: grid; place-items: center; color: var(--muted); flex: none; }
.ev-activity b { color: var(--text); font-weight: 500; }
.ev-activity .age { margin-left: auto; color: var(--faint); font-size: 13px; }
.ev-out { margin: 0 0 12px auto; max-width: 520px; background: #fff; border: 1px solid var(--line-firm); border-radius: 12px; padding: 12px 16px; font-size: 15px; }
.ev-in { max-width: 420px; background: var(--sunk); border-radius: 12px; padding: 12px 16px; font-size: 15px; margin-bottom: 6px; }
.ev-meta { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 12.5px; margin-bottom: 22px; }
.ev-meta.right { justify-content: flex-end; }
.ev-divider { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; margin: 8px 0 22px; }
.ev-divider::before, .ev-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.reply-box { border-top: 1px solid var(--line); padding: 14px 24px 18px; }
.reply-as { color: var(--muted); font-size: 13.5px; margin-bottom: 10px; }
.reply-as b { color: var(--text); font-weight: 500; }
.reply-draft {
  border: 1px solid var(--line-firm); border-radius: 11px; padding: 14px 16px;
  font-size: 15px; min-height: 76px; outline: none; width: 100%; resize: vertical;
  font-family: var(--sans); line-height: 1.5;
}
.reply-tools { display: flex; align-items: center; gap: 14px; margin-top: 12px; color: var(--muted); }
.gen { display: inline-flex; align-items: center; gap: 7px; color: #d0397a; font-weight: 500; font-size: 14px; }

/* ------------------------------------------------------------------ lists */

.list-shell { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.list-bar { display: flex; align-items: center; gap: 12px; padding: 18px 22px; position: relative; }
.list-pick { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; }
.list-pick .sq { width: 30px; height: 30px; border-radius: 8px; background: #2f6be6; display: grid; place-items: center; color: #fff; }
.list-menu {
  position: absolute; top: 58px; left: 22px; z-index: 40; width: 320px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(16,24,40,.12); padding: 8px;
}
.list-menu button { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 9px; font-size: 15px; }
.list-menu button:hover { background: var(--sunk); }
.list-menu .new { color: #1a7f52; border-top: 1px solid var(--line); border-radius: 0; }
.list-tools { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.pill-select { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-firm); border-radius: 9px; padding: 9px 14px; font-size: 14px; background: #fff; }
.btn-enrich { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-firm); border-radius: 9px; padding: 9px 16px; font-size: 14px; background: #fff; }

.grid-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid-table th {
  text-align: left; font-weight: 500; color: var(--muted); font-size: 13px;
  padding: 11px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: #fcfcfb; white-space: nowrap;
}
.grid-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid-table .avatar-sm { width: 26px; height: 26px; border-radius: 50%; background: #ddd; display: inline-grid; place-items: center; font-size: 11px; color: #555; margin-right: 9px; vertical-align: middle; }
.score { display: inline-flex; align-items: center; gap: 7px; }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.bars i { width: 3px; background: #cfd3d1; border-radius: 1px; }
.bars i:nth-child(1) { height: 5px; } .bars i:nth-child(2) { height: 9px; } .bars i:nth-child(3) { height: 13px; }
.score.high .bars i { background: #1a9d5f; }
.score.medium .bars i:nth-child(1), .score.medium .bars i:nth-child(2) { background: #1a9d5f; }
.score.low .bars i:nth-child(1) { background: #e08b1e; }
.tag { background: #f2f3f7; color: #5a6270; border-radius: 6px; padding: 3px 8px; font-size: 12px; margin-right: 5px; }
.tag.p { background: #f3ecfd; color: #7c4ddb; }
.tag.b { background: #e8effc; color: #2f6be6; }
.verified { color: #2f6be6; }
.unknown { color: var(--faint); }
.list-foot { display: flex; align-items: center; padding: 14px 20px; color: var(--muted); font-size: 13.5px; }
.pager { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.pager button { width: 30px; height: 30px; border-radius: 7px; font-size: 13.5px; color: var(--muted); }
.pager button.on { background: var(--sunk); color: var(--text); font-weight: 600; }

.dock {
  margin: 26px auto 0; max-width: 930px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 16px;
  box-shadow: 0 8px 24px rgba(16,24,40,.06);
}
.dock input { flex: 1; border: none; outline: none; font-size: 15.5px; background: transparent; }

/* --------------------------------------------------------- infrastructure */

.infra-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.infra-summary .kpi .v { font-family: var(--serif); font-size: 32px; letter-spacing: .02em; }
.dom { margin-bottom: 18px; }
.dom-head { display: flex; align-items: center; gap: 13px; padding: 18px 20px; }
.dom-head .sq { width: 34px; height: 34px; border-radius: 9px; background: var(--ink-900); color: var(--mint); display: grid; place-items: center; }
.dom-head b { font-size: 15.5px; }
.dom-head span { display: block; color: var(--muted); font-size: 13px; }
.mbx-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; padding: 0 20px 20px; }
@media (max-width: 1200px) { .mbx-grid { grid-template-columns: 1fr 1fr; } .infra-summary { grid-template-columns: 1fr 1fr; } }
.mbx { border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; }
.mbx .top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mbx .top b { font-size: 14px; flex: 1; }
.mbx .prov { color: var(--muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.mbx .top .chip .dot { background: #14a05e; }
.mbx.warn .top .chip .dot { background: var(--amber); }
.mbx .wu { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.mbx .bar { height: 5px; border-radius: 3px; background: #ececeb; overflow: hidden; margin-bottom: 14px; }
.mbx .bar i { display: block; height: 100%; background: #14a05e; }
.mbx.warn .bar i { background: var(--amber); }
.mbx .three { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.mbx .three .l { font-size: 10.5px; letter-spacing: .07em; color: var(--faint); font-weight: 600; }
.mbx .three .v { font-size: 14px; font-weight: 600; margin-top: 2px; }

/* -------------------------------------------------------------- workflows */

.wf-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.wf-name { border: 1px solid var(--line-firm); border-radius: 9px; padding: 9px 14px; width: 240px; outline: none; }
.wf-top .right { margin-left: auto; display: flex; gap: 9px; align-items: center; }
.wf-body { display: grid; grid-template-columns: 265px minmax(0,1fr) 265px; min-height: 68vh; }
.wf-steps { border-right: 1px solid var(--line); padding: 16px; }
.wf-steps .h { display: flex; align-items: center; margin-bottom: 14px; font-weight: 500; }
.wf-step { display: flex; align-items: center; border: 1px solid var(--line-firm); border-radius: 9px; padding: 10px 13px; margin-bottom: 9px; font-size: 14.5px; }
.wf-step .dots { margin-left: auto; color: var(--faint); }
.wf-add { width: 100%; background: var(--green-700); color: #fff; padding: 11px; border-radius: 9px; margin-top: 4px; }
.canvas {
  background: #fbfbfa;
  background-image: radial-gradient(#dfe0dc 1px, transparent 1px);
  background-size: 18px 18px;
  padding: 20px; position: relative; overflow: auto;
}
.canvas-toggle { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; margin-bottom: 20px; }
.switch { width: 34px; height: 19px; border-radius: 999px; background: #17a45f; position: relative; }
.switch i { position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; }
.flow { display: flex; flex-direction: column; align-items: center; }
.node {
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 300px;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.node .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.node b { font-size: 14.5px; }
.node span { display: block; color: var(--muted); font-size: 12.5px; }
.node .tools { margin-left: auto; display: flex; gap: 8px; color: var(--faint); }
.conn { width: 1px; height: 26px; background: var(--line-firm); position: relative; }
.conn .plus { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid var(--line-firm); display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.split-ic { width: 30px; height: 30px; border-radius: 8px; background: #e5484d; color: #fff; display: grid; place-items: center; }
.paths { display: flex; gap: 60px; margin-top: 26px; }
.path-tag { background: var(--ink-800); color: #fff; border-radius: 999px; padding: 4px 13px; font-size: 12.5px; display: inline-flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.endcap { width: 20px; height: 20px; border-radius: 50%; background: #f2790a; margin: 22px auto 0; }
.wf-lib { border-left: 1px solid var(--line); padding: 16px; overflow: auto; }
.wf-lib .h { display: flex; align-items: center; font-weight: 500; margin-bottom: 14px; }
.lib-group { display: flex; align-items: center; border: 1px solid var(--line-firm); border-radius: 9px; padding: 10px 13px; margin-bottom: 9px; font-size: 14.5px; background: #fafafa; }
.lib-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-firm); border-radius: 9px; padding: 9px 13px; margin-bottom: 8px; font-size: 14px; background: #fff; }
.lib-item .sw { width: 30px; height: 17px; border-radius: 999px; background: #17a45f; position: relative; }
.lib-item .sw i { position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }

/* -------------------------------------------------------------- analytics */

.an-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; position: relative; }
.an-select { width: 230px; border: 1px solid var(--line-firm); background: #fff; border-radius: 9px; padding: 11px 14px; display: flex; align-items: center; font-size: 14.5px; }
.an-menu { position: absolute; top: 52px; left: 0; width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 12px 30px rgba(16,24,40,.12); z-index: 30; padding: 6px; }
.an-menu button { display: block; width: 100%; text-align: left; padding: 13px 14px; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.an-menu button:last-child { border-bottom: none; }
.an-menu button:hover { background: var(--sunk); }
.an-kpis { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; flex: 1; }
@media (max-width: 1350px) { .an-kpis { grid-template-columns: repeat(3,1fr); } }
.an-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 20px; align-items: start; }
@media (max-width: 1200px) { .an-grid { grid-template-columns: 1fr; } }
.ladder-head { display: flex; align-items: center; margin-bottom: 18px; }
.ladder-head h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0; flex: 1; }
.ladder-head .warn { color: var(--red); font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; }
.rung { display: grid; grid-template-columns: 34px 122px minmax(0,1fr) 44px minmax(0,1.1fr); align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 13px 16px; margin-bottom: 10px; }
.rung.bad { border-color: #f3c9c6; background: #fffafa; }
.rung .code { color: var(--faint); font-size: 12.5px; font-weight: 600; }
.rung .nm { font-size: 14.5px; font-weight: 600; }
.rung .track { height: 8px; border-radius: 5px; background: #edeeed; overflow: hidden; }
.rung .track i { display: block; height: 100%; border-radius: 5px; }
.rung .sc { font-weight: 600; text-align: right; }
.rung .nt { color: var(--muted); font-size: 13px; }
.rung.bad .sc { color: var(--red); }
.snap-head { display: flex; align-items: center; margin-bottom: 6px; }
.snap-head h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0; flex: 1; }
.snap-row { display: flex; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.snap-row:last-child { border-bottom: none; }
.snap-row .l { color: var(--faint); letter-spacing: .05em; font-size: 11.5px; font-weight: 600; flex: 1; }
.snap-row .v { font-weight: 600; font-size: 15px; }
.empty-note { background: #fff; border: 1px dashed var(--line-firm); border-radius: 12px; padding: 26px; color: var(--muted); }
.empty-note b { color: var(--text); display: block; margin-bottom: 6px; }
.muted-line { color: var(--muted); margin: 0; }

/* ------------------------------------------------------------ connections */

.cx-group { margin-bottom: 34px; }
.cx-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 15px; }
.cx-head .arrows { margin-left: auto; display: flex; gap: 8px; align-items: center; color: var(--faint); }
.cx-head .arrows a { color: var(--muted); font-size: 14px; text-decoration: none; }
.cx-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1200px) { .cx-grid { grid-template-columns: 1fr 1fr; } }
.cx { display: flex; gap: 13px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px; }
.cx .ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex: none; }
.cx .tx { flex: 1; min-width: 0; }
.cx .tx b { font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
.cx .tx p { margin: 4px 0 0; color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx .add { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); flex: none; }
.cx .add:hover { background: var(--sunk); }
.cx .add.on { color: var(--blue); }
.badge-pop { color: var(--blue); font-size: 12px; font-weight: 500; }
.badge-var { background: var(--sunk); color: var(--muted); font-size: 11.5px; padding: 2px 7px; border-radius: 5px; }

/* ---------------------------------------------------------------- support */

.search-big { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px; margin-bottom: 18px; }
.search-big input { flex: 1; border: none; outline: none; font-size: 15.5px; background: transparent; }
.topics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
@media (max-width: 1100px) { .topics { grid-template-columns: 1fr; } }
.topic { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.topic .t { flex: 1; }
.topic b { font-size: 14.5px; }
.topic span { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.faq-head { display: flex; align-items: center; padding: 20px 22px 6px; }
.faq-head h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0; flex: 1; }
.faq { border-top: 1px solid var(--line); }
.faq:first-of-type { border-top: 1px solid var(--line); }
.faq button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 19px 22px; text-align: left; font-size: 15px; font-weight: 600; }
.faq button .ch { margin-left: auto; color: var(--muted); transition: transform .15s ease; }
.faq.open button .ch { transform: rotate(180deg); }
.faq .a { padding: 0 22px 20px; color: var(--muted); font-size: 14.5px; max-width: 78ch; }
.help { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.help .t { flex: 1; }
.help b { font-size: 15px; }
.help span { display: block; color: var(--muted); font-size: 14px; margin-top: 3px; }

/* ---------------------------------------------------------------- booking */

.book { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.book-inner { display: grid; grid-template-columns: 300px minmax(0,1fr) 300px; }
@media (max-width: 1100px) { .book-inner { grid-template-columns: 1fr; } }
.book-info { padding: 22px 26px; border-right: 1px solid var(--line); }
.book-info .host { color: var(--muted); font-size: 14.5px; margin: 14px 0 8px; }
.book-info h2 { font-size: 26px; margin: 0 0 14px; line-height: 1.2; }
.book-info p { color: var(--muted); font-size: 14.5px; }
.book-info .meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14.5px; }
.cal { padding: 22px 26px; }
.cal-head { display: flex; align-items: center; margin-bottom: 18px; }
.cal-head b { font-size: 17px; }
.cal-head b span { color: var(--muted); font-weight: 400; }
.cal-head .nav { margin-left: auto; display: flex; gap: 6px; }
.cal-head .nav button { width: 30px; height: 30px; border-radius: 8px; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-grid .dow { text-align: center; color: var(--muted); font-size: 12.5px; letter-spacing: .04em; padding-bottom: 8px; }
.cal-day { height: 52px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; color: var(--faint); position: relative; }
.cal-day.avail { background: #eceded; color: var(--text); cursor: pointer; }
.cal-day.avail:hover { background: #e0e2e2; }
.cal-day.on { background: #1c1c1c; color: #fff; }
.cal-day .dot { position: absolute; bottom: 9px; width: 4px; height: 4px; border-radius: 50%; background: #1c1c1c; }
.slots { padding: 22px 26px; border-left: 1px solid var(--line); }
.slots-head { display: flex; align-items: center; margin-bottom: 16px; }
.slots-head b { font-size: 17px; flex: 1; }
.slots-head b span { color: var(--muted); font-weight: 400; }
.unit { display: inline-flex; background: #f1f1ef; border-radius: 8px; padding: 3px; }
.unit button { padding: 5px 12px; border-radius: 6px; font-size: 13.5px; color: var(--muted); }
.unit button.on { background: #fff; color: var(--text); }
.slot { width: 100%; border: 1px solid var(--line-firm); border-radius: 10px; padding: 13px; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 15px; margin-bottom: 10px; background: #fff; }
.slot:hover { border-color: var(--green-600); }
.slot .dot { width: 7px; height: 7px; border-radius: 50%; background: #14a05e; }
.book-foot { text-align: center; color: var(--muted); padding: 20px 0 6px; font-weight: 500; }

.toast {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  background: var(--ink-900); color: #fff; padding: 13px 18px; border-radius: 11px;
  font-size: 14.5px; box-shadow: 0 10px 28px rgba(0,0,0,.2); max-width: 420px;
}
.toast.err { background: #7f1d1d; }

.fixture-note {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--amber-bg); color: #8a5a12; border: 1px solid #f0dcbb;
  padding: 7px 13px; border-radius: 8px; font-size: 12.5px; margin-bottom: 18px;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ==========================================================================
   FITTING THE DOCUMENT'S PROPORTIONS TO REAL WINDOWS

   Every fixed size above is measured off the design document, whose frames are
   2000px wide. Those numbers are right at that width and wrong below it: at
   1350px the 326px rail is a quarter of the window instead of a sixth, campaign
   rows that sit on one line in the document wrap to three, and the workflow
   canvas is narrower than the graph drawn on it.

   So the SCALE steps down and the LAYOUT does not reflow. The document's
   proportions survive; only the absolute sizes move. Reflowing instead — stacking
   the KPI row, collapsing the rail to icons — would be the usual answer and it
   would stop looking like the document, which is the one thing asked for.
   ========================================================================== */

/* Rows that are one line in the document stay one line here, and scroll rather
   than wrap when the window genuinely cannot hold them. Wrapping a table row is
   the failure that reads as broken; a scrollbar reads as a small window. */
.cmp-scroll { overflow-x: auto; }
.cmp-row { min-width: 880px; }
.cmp-row b, .cmp-row .client, .cmp-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-row .chip { overflow: visible; }
.kpi .lbl, .kpi .note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-step, .lib-item, .lib-group { white-space: nowrap; overflow: hidden; }

/* The canvas: `safe center` is the whole fix. Plain `center` on content wider than
   its container clips BOTH edges and cannot be scrolled back to — which is why the
   left-hand path node lost its label. `safe` falls back to start when it overflows,
   so the canvas scrolls instead of eating the graph. */
.flow { align-items: safe center; }
.canvas { overflow: auto; }

@media (max-width: 1560px) {
  :root { --rail: 272px; }
  body { font-size: 14px; }

  main { padding: 28px 34px 70px; }
  .page-title { font-size: 33px; margin-bottom: 24px; }
  .home-hero { font-size: 52px; margin: 44px 0 28px; }

  .rail-mark { font-size: 24px; padding: 0 26px 28px; }
  .rail nav, .rail .bottom { padding-left: 14px; padding-right: 14px; }
  .rail a.item { font-size: 14.5px; padding: 8px 14px; gap: 11px; }
  .rail-group { padding: 18px 14px 6px; font-size: 12px; }
  .rail-user { padding: 15px 20px; }
  .avatar { width: 36px; height: 36px; font-size: 14px; }
  .cog { width: 34px; height: 34px; }

  .kpi { padding: 13px 15px; }
  .kpi .v { font-size: 29px; }
  .kpi .lbl { font-size: 10px; letter-spacing: .06em; }
  .side-card h3, .seq-head h3, .ladder-head h3, .snap-head h3, .faq-head h3 { font-size: 20px; }
  .inbox-head h3 { font-size: 22px; }
  .home-grid { grid-template-columns: minmax(0,1fr) 300px; gap: 20px; }
  .detail-grid, .an-grid { grid-template-columns: minmax(0,1fr) 300px; gap: 16px; }
  .kpis, .infra-summary { gap: 12px; }

  /* The campaign picker sits beside the KPI row in the document. At this width that
     leaves each of six tiles too narrow for its own label, so the picker goes above
     them and the six tiles keep the full width — the document's row, intact. */
  .an-top { flex-direction: column; gap: 14px; }
  .an-kpis { width: 100%; gap: 12px; }
  .rung { grid-template-columns: 28px 104px minmax(80px,.9fr) 38px minmax(0,1.7fr); gap: 10px; padding: 11px 14px; }

  .wf-body { grid-template-columns: minmax(190px,244px) minmax(0,1fr) minmax(190px,244px); }
  .node { min-width: 262px; }
  .paths { gap: 38px; }
  .paths .node { min-width: 228px; }
  .canvas { padding: 16px; }

  .inbox { grid-template-columns: 296px minmax(0,1fr); }
  .q-fields { gap: 14px; }
  .cx-grid, .topics { gap: 12px; }
}

@media (max-width: 1280px) {
  :root { --rail: 240px; }
  body { font-size: 13.5px; }
  main { padding: 24px 26px 64px; }
  .page-title { font-size: 30px; }
  .home-hero { font-size: 46px; }
  .wf-body { grid-template-columns: minmax(170px,214px) minmax(0,1fr) minmax(170px,214px); }
  .inbox { grid-template-columns: 268px minmax(0,1fr); }
}

/* The path columns are centred as a group; their CARDS are not. Without this the
   inherited text-align breaks "Step Submitted" across two lines and centres the
   sub-line, which is not what the document shows. */
.paths > div { text-align: center; }
.paths .node { text-align: left; }
.paths .node b { white-space: nowrap; }
.paths .node > div { min-width: 0; }

/* Campaign names are the row's subject and must not be the thing that truncates.
   The numeric and date columns were sized for a 2000px frame; at anything narrower
   they were eating the space the name needed and ellipsising "Data infrastructure
   sweep" while leaving whitespace to the right of the date. */
@media (max-width: 1560px) {
  .cmp-row {
    grid-template-columns: minmax(0,2.2fr) minmax(0,1.15fr) 118px 58px 62px 54px 46px 104px 44px;
    gap: 10px; padding: 15px 18px; min-width: 820px;
  }
  .cmp-row .go { width: 36px; height: 36px; }
}
@media (max-width: 1280px) {
  .cmp-row { min-width: 780px; padding: 14px 16px; }
}

/* The list toolbar is a row of controls, and a control whose label wraps to two
   lines stops reading as a control. Everything here holds one line and the list
   name — the only part with variable length — is what truncates. */
.list-bar { flex-wrap: nowrap; }
.list-pick, .pill-select, .btn-enrich, .list-bar .btn-dark { white-space: nowrap; }
.list-pick { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.list-pick span:not(.sq) { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1560px) {
  .list-bar { padding: 14px 16px; gap: 9px; }
  .list-pick { font-size: 15px; max-width: 40%; }
  .list-tools { gap: 8px; }
  .pill-select, .btn-enrich { padding: 8px 11px; font-size: 13px; }
  .list-bar .btn-dark { padding: 8px 14px; font-size: 13.5px; }
  .grid-table th, .grid-table td { padding: 9px 11px; }
}
@media (max-width: 1280px) {
  .pill-select, .btn-enrich { padding: 7px 9px; font-size: 12.5px; }
  .list-pick { max-width: 34%; font-size: 14px; }
}

/* The reply box is the point of the screen and must not fall below the fold on a
   normal laptop. Pin the panel to the viewport and let the conversation scroll
   inside it, which is what the document shows and what an inbox does. */
.inbox { height: calc(100vh - 148px); min-height: 520px; }
.inbox-list > div:last-child { overflow: auto; }
.conv-log { min-height: 0; }
@media (max-width: 1560px) { .inbox { height: calc(100vh - 132px); } }

/* A flex child will not shrink below its content unless told to. Without these the
   conversation pushes the reply box past the bottom of the panel it is supposed to
   sit inside. */
.conv, .inbox-list { min-height: 0; overflow: hidden; }

/* Both branch cards sit fully inside the canvas at a laptop width rather than the
   right-hand one running under the Control Library. The canvas still scrolls if the
   window goes narrower than this; it just does not need to at the common sizes. */
@media (max-width: 1560px) {
  .paths { gap: 30px; }
  .paths .node { min-width: 214px; padding: 11px 12px; }
  .paths .node .ic { width: 30px; height: 30px; }
}

/* ------------------------------------------------------------------ the agent
 *
 * Everything below styles output that came from the kernel rather than from the
 * design document, and it is deliberately a different register: monospace, tighter,
 * plainer. A reader should be able to tell at a glance which parts of this product
 * are a picture of a product and which parts are a system reporting on itself.
 */

.kout {
  border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7;
  overflow: hidden; margin: 6px 0 14px;
}
.kout.scripted { background: #fff; }
.kout-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--line); background: #f6f5f1;
}
.kchip {
  font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px;
}
.kchip.real { background: var(--mint); color: var(--green-700); }
.kchip.fake { background: #eceae4; color: var(--muted); }
.kkind { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.kout pre, .kout-plain {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  font: 12.5px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink-900); white-space: pre; tab-size: 2;
}
.kout-plain {
  border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7;
}

.cmd-chips {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 2px 0;
  font-size: 12.5px; color: var(--muted);
}
.cmd-chips button {
  font: 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--green-700); cursor: pointer;
}
.cmd-chips button:hover { background: var(--mint); border-color: var(--mint); }

.agent-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.agent-acts button:disabled { opacity: .55; cursor: default; }

/* Capabilities, skills, rulings */
.cap-table code { font: 12.5px/1 ui-monospace, Menlo, monospace; }
.cap-table td { padding: 9px 12px; }
.sk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sk { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.sk-top { display: flex; align-items: baseline; gap: 10px; }
.sk-top b { font-size: 15px; }
.sk .ver { font: 11.5px/1 ui-monospace, Menlo, monospace; color: var(--faint); }
.sk p { margin: 8px 0 10px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.sk-foot { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--faint); }
.sk-foot .blocked { color: #b4471f; font-weight: 600; }

.ruling { border-top: 1px solid var(--line); padding: 14px 0; }
.ruling:last-child { padding-bottom: 0; }
.rq { display: flex; align-items: baseline; gap: 10px; }
.rq b { font: 13px/1 ui-monospace, Menlo, monospace; }
.rq span { font-size: 12px; color: var(--faint); }
.ruling p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; max-width: 80ch; }
.ruling .prop { color: var(--muted); }
.ruling .blocks { margin-top: 7px; font-size: 12px; color: #b4471f; }

/* Knowledge retrieval */
.kq { display: flex; gap: 10px; }
.kq input {
  flex: 1; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--sans); font-size: 14px; background: #fff;
}
.kx { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.kx-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: #f6f5f1; border-bottom: 1px solid var(--line);
}
.kx-head code { font: 12px/1 ui-monospace, Menlo, monospace; flex: 1; }
.kx-head .sc { font: 12px/1 ui-monospace, Menlo, monospace; color: var(--faint); }
.kx pre {
  margin: 0; padding: 12px 14px; white-space: pre-wrap; overflow-x: auto;
  font: 12.5px/1.6 ui-monospace, Menlo, monospace; color: var(--ink-900);
}

/* A refusal is styled to be read, not dismissed. It is the answer. */
.refusal {
  border-left: 3px solid #e08b1e; background: #fdf7ec; border-radius: 0 10px 10px 0;
  padding: 13px 16px; margin-bottom: 14px;
}
.refusal b { font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #8a5a11; }
.refusal p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; max-width: 82ch; }

.unret, .unrat {
  border: 1px dashed var(--line); border-radius: 10px; padding: 12px 15px; margin-top: 12px;
  font-size: 13px;
}
.unret b, .unrat b { color: var(--ink-900); }
.unret p, .unrat p { margin: 7px 0 0; color: var(--muted); line-height: 1.55; max-width: 80ch; }
.unrat { border-color: #e0c48b; background: #fdfaf2; }
.unrat button { margin-top: 10px; }

.pbform { border: 1px dashed var(--line); border-radius: 10px; padding: 14px 16px; }
.pbform > p { margin: 7px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 82ch; }
.pbrow { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pbrow label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.pbrow input, .pbrow select {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px;
  font-family: var(--sans); font-size: 13.5px; background: #fff; text-transform: none;
  letter-spacing: 0; color: var(--ink-900);
}
.pbrow input[type="number"] { width: 118px; }
.pbrow label.chk { flex-direction: row; align-items: center; gap: 7px; padding-bottom: 10px; }
.pbrow label.chk input { width: auto; }

@media (max-width: 1280px) {
  .sk-grid { grid-template-columns: minmax(0, 1fr); }
}

/* A kernel reply can be a hundred lines -- the gate report is. Give it its own scroll
   so the conversation stays a conversation and the composer stays on screen; the
   design's chat column is not a log viewer and should not become one. */
.kout pre { max-height: 460px; overflow: auto; }
.kout-plain { max-height: 620px; overflow: auto; }

/* The conversation scrolls inside the column rather than moving the page, so the
   reply box does not walk off the bottom after a long answer. */
.chat-wrap { height: calc(100vh - 148px); min-height: 560px; }
.chat-col { min-height: 0; }
.chat-log { min-height: 0; overflow-y: auto; }
.chat-aside { overflow-y: auto; min-height: 0; }
@media (max-width: 1560px) { .chat-wrap { height: calc(100vh - 132px); } }

/* One evaluated rule. Its own row rather than a reused ladder rung: the ladder has a
   score bar and a finding has an observed value against a threshold, and forcing one
   into the other's grid is what put the rule text in a 40px column. */
.finding {
  display: grid; grid-template-columns: 74px 200px 92px 1fr; gap: 14px;
  align-items: center; padding: 12px 15px; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 8px;
}
.finding.bad { border-color: #f0c2c2; background: #fdf5f5; }
.finding .verdict {
  font: 600 11px/1 var(--sans); letter-spacing: .07em; color: var(--green-700);
}
.finding.bad .verdict { color: #c0392b; }
.finding .metric { font: 13px/1 ui-monospace, Menlo, monospace; }
.finding .obs { font: 600 15px/1 var(--sans); text-align: right; }
.finding .rule, .finding .note { font-size: 13px; color: var(--muted); }
@media (max-width: 1280px) {
  .finding { grid-template-columns: 64px 1fr 84px; }
  .finding .rule { grid-column: 1 / -1; }
}

/* ----------------------------------------------------- workspace administration */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.admin-intro {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  margin: -8px 0 24px;
}
.admin-eyebrow {
  display: block; color: var(--faint); font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px;
}
.admin-intro h2 {
  margin: 0; color: var(--green-700); font-family: var(--serif); font-size: 30px;
  font-weight: 400;
}
.admin-intro p { color: var(--muted); margin: 5px 0 0; }
.admin-intro > .chip { margin-top: 8px; flex: none; }

.admin-summary {
  display: grid; grid-template-columns: repeat(3, minmax(130px, .65fr)) minmax(260px, 1.6fr);
  gap: 14px; margin-bottom: 18px;
}
.admin-stat { min-width: 0; padding: 18px 20px; }
.admin-stat span {
  display: block; color: var(--muted); font-size: 12px; letter-spacing: .04em;
}
.admin-stat b {
  display: block; color: var(--green-700); font-family: var(--serif);
  font-size: 32px; font-weight: 400; margin-top: 3px;
}
.admin-stat code {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--green-700); font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  margin-top: 10px;
}

.admin-section { overflow: hidden; margin-bottom: 18px; }
.admin-section-head { padding: 20px 22px 16px; }
.admin-section-head h3 {
  color: #12352c; font-family: var(--serif); font-size: 23px; font-weight: 400;
  margin: 0;
}
.admin-section-head p { color: var(--muted); font-size: 13.5px; margin: 3px 0 0; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; min-width: 690px; border-collapse: collapse; font-size: 14px; }
.admin-table th {
  background: #fcfcfb; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px;
  font-weight: 500; padding: 10px 22px; text-align: left; white-space: nowrap;
}
.admin-table td { border-bottom: 1px solid var(--line); padding: 13px 22px; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table td:first-child { min-width: 260px; }
.admin-avatar {
  align-items: center; background: var(--mint-100); border-radius: 50%; color: var(--green-700);
  display: inline-flex; font-size: 12px; font-weight: 600; height: 32px;
  justify-content: center; margin-right: 10px; vertical-align: middle; width: 32px;
}
.admin-person { display: inline-block; line-height: 1.3; vertical-align: middle; }
.admin-person b { display: block; font-weight: 600; }
.admin-person span { color: var(--muted); display: block; font-size: 12.5px; }
.admin-role {
  background: #fff; border: 1px solid var(--line-firm); border-radius: 8px;
  min-width: 110px; padding: 7px 29px 7px 10px;
}
.admin-role:disabled, .admin-invite button:disabled,
.admin-remove:disabled, .admin-revoke:disabled { cursor: wait; opacity: .55; }
.admin-actions { text-align: right; }
.admin-remove, .admin-revoke {
  border-radius: 8px; color: var(--red); font-size: 13px; padding: 7px 10px;
}
.admin-remove:hover, .admin-revoke:hover { background: var(--red-bg); }
.admin-empty { color: var(--muted); padding: 25px 22px !important; text-align: center; }

.admin-invite {
  align-items: end; background: var(--sunk); border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line); display: grid;
  grid-template-columns: minmax(240px, 1fr) 180px auto; gap: 12px; padding: 16px 22px;
}
.admin-invite label, .admin-dialog label {
  color: var(--muted); display: flex; flex-direction: column; font-size: 11.5px;
  font-weight: 600; gap: 5px; letter-spacing: .04em; text-transform: uppercase;
}
.admin-invite input, .admin-invite select, .admin-dialog textarea {
  background: #fff; border: 1px solid var(--line-firm); border-radius: 9px;
  color: var(--text); font-size: 14px; font-weight: 400; letter-spacing: 0;
  outline: none; padding: 9px 11px; text-transform: none;
}
.admin-invite input:focus, .admin-invite select:focus, .admin-dialog textarea:focus {
  border-color: var(--green-600);
}
.admin-invite .btn-dark { height: 41px; white-space: nowrap; }

.admin-history { border-top: 1px solid var(--line); }
.admin-history > .empty-note { border: 0; border-radius: 0; }
.admin-history-row {
  align-items: flex-start; display: grid; gap: 12px; grid-template-columns: 34px minmax(0, 1fr) auto;
  margin-left: 38px; padding: 15px 22px 15px 0; position: relative;
}
.admin-history-row:not(:last-child) { border-bottom: 1px solid var(--line); }
.admin-history-row::before {
  background: var(--line); bottom: -1px; content: ""; left: -22px; position: absolute;
  top: 0; width: 1px;
}
.admin-history-row:first-child::before { top: 16px; }
.admin-history-row:last-child::before { bottom: calc(100% - 33px); }
.admin-history-mark {
  align-items: center; background: var(--mint-050); border-radius: 50%; color: #1a7f52;
  display: flex; height: 30px; justify-content: center; margin-left: -37px;
  position: relative; width: 30px; z-index: 1;
}
.admin-history-mark.red { background: var(--red-bg); color: var(--red); }
.admin-history-row b { display: block; font-size: 14px; font-weight: 600; }
.admin-history-row span { color: var(--muted); display: block; font-size: 12.5px; }
.admin-history-row p { color: var(--muted); font-size: 13px; margin: 5px 0 0; }
.admin-history-row time { color: var(--faint); font-size: 12px; white-space: nowrap; }

.admin-modal {
  align-items: center; background: rgba(4, 36, 28, .52); display: flex; inset: 0;
  justify-content: center; padding: 20px; position: fixed; z-index: 120;
}
.admin-dialog {
  background: #fff; border-radius: 14px; box-shadow: 0 22px 60px rgba(0,0,0,.22);
  max-width: 480px; padding: 24px; width: 100%;
}
.admin-dialog h2 {
  color: var(--green-700); font-family: var(--serif); font-size: 26px;
  font-weight: 400; margin: 0;
}
.admin-dialog > p { color: var(--muted); margin: 8px 0 18px; }
.admin-dialog textarea { min-height: 92px; resize: vertical; width: 100%; }
.admin-dialog .admin-dialog-error { color: var(--red); font-size: 12.5px; margin: 6px 0 0; min-height: 18px; }
.admin-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.admin-danger {
  background: var(--red); border-radius: 9px; color: #fff; font-size: 14.5px;
  padding: 10px 22px;
}
.admin-danger:hover { background: #b42318; }

@media (max-width: 1180px) {
  .admin-summary { grid-template-columns: repeat(3, 1fr); }
  .admin-stat.wide { grid-column: 1 / -1; }
  .admin-invite { grid-template-columns: minmax(220px, 1fr) 150px; }
  .admin-invite .btn-dark { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 760px) {
  .admin-intro { flex-direction: column; }
  .admin-summary { grid-template-columns: 1fr; }
  .admin-stat.wide { grid-column: auto; }
  .admin-invite { grid-template-columns: 1fr; }
  .admin-invite .btn-dark { grid-column: auto; width: 100%; }
  .admin-history-row { grid-template-columns: 34px minmax(0, 1fr); }
  .admin-history-row time { grid-column: 2; }
}

/* ------------------------------------------------------------------ utilities

   What used to be inline style attributes in app.js. The page runs under a strict
   Content-Security-Policy (style-src 'self'), which refuses every style="..." attribute,
   so each declaration is a class here, one declaration per class, named after it.
   !important keeps the specificity an inline style had over the component rules.
   Values known only at render time (a bar's width, a brand colour) ride data-w and
   data-bg instead, and app.js sets them through the CSSOM, which the policy allows. */
.u-align-items-flex-start { align-items:flex-start !important; }
.u-background-111 { background:#111 !important; }
.u-background-14a05e { background:#14a05e !important; }
.u-background-none { background:none !important; }
.u-border-bottom-none { border-bottom:none !important; }
.u-border-radius-50 { border-radius:50% !important; }
.u-border-radius-5px { border-radius:5px !important; }
.u-border-radius-9px { border-radius:9px !important; }
.u-color-0f3a2c { color:#0f3a2c !important; }
.u-color-var-faint { color:var(--faint) !important; }
.u-color-var-muted { color:var(--muted) !important; }
.u-display-block { display:block !important; }
.u-display-flex { display:flex !important; }
.u-display-inline-block { display:inline-block !important; }
.u-display-inline-grid { display:inline-grid !important; }
.u-flex-1 { flex:1 !important; }
.u-font-family-var-serif { font-family:var(--serif) !important; }
.u-font-size-11px { font-size:11px !important; }
.u-font-size-14px { font-size:14px !important; }
.u-font-size-20px { font-size:20px !important; }
.u-font-size-32px { font-size:32px !important; }
.u-font-weight-400 { font-weight:400 !important; }
.u-height-18px { height:18px !important; }
.u-height-20px { height:20px !important; }
.u-height-32px { height:32px !important; }
.u-height-6px { height:6px !important; }
.u-margin-0 { margin:0 !important; }
.u-margin-0-0-14px { margin:0 0 14px !important; }
.u-margin-0-0-16px { margin:0 0 16px !important; }
.u-margin-0-0-4px { margin:0 0 4px !important; }
.u-margin-14px-0-0 { margin:14px 0 0 !important; }
.u-margin-2px-0 { margin:2px 0 !important; }
.u-margin-8px-0-0 { margin:8px 0 0 !important; }
.u-margin-bottom-10px { margin-bottom:10px !important; }
.u-margin-bottom-14px { margin-bottom:14px !important; }
.u-margin-bottom-18px { margin-bottom:18px !important; }
.u-margin-bottom-22px { margin-bottom:22px !important; }
.u-margin-bottom-24px { margin-bottom:24px !important; }
.u-margin-left-auto { margin-left:auto !important; }
.u-margin-right-10px { margin-right:10px !important; }
.u-margin-right-14px { margin-right:14px !important; }
.u-margin-right-8px { margin-right:8px !important; }
.u-margin-top-12px { margin-top:12px !important; }
.u-margin-top-18px { margin-top:18px !important; }
.u-margin-top-20px { margin-top:20px !important; }
.u-margin-top-4px { margin-top:4px !important; }
.u-max-width-70ch { max-width:70ch !important; }
.u-max-width-78ch { max-width:78ch !important; }
.u-min-width-250px { min-width:250px !important; }
.u-opacity-7 { opacity:.7 !important; }
.u-overflow-auto { overflow:auto !important; }
.u-overflow-hidden { overflow:hidden !important; }
.u-overflow-x-auto { overflow-x:auto !important; }
.u-padding-0 { padding:0 !important; }
.u-padding-left-18px { padding-left:18px !important; }
.u-padding-top-0 { padding-top:0 !important; }
.u-position-relative { position:relative !important; }
.u-text-align-center { text-align:center !important; }
.u-vertical-align-middle { vertical-align:middle !important; }
.u-width-100 { width:100% !important; }
.u-width-18px { width:18px !important; }
.u-width-20px { width:20px !important; }
.u-width-32px { width:32px !important; }
.u-width-34px { width:34px !important; }
.u-width-6px { width:6px !important; }