:root {
  --ink: #193d33;
  --muted: #6a7972;
  --line: #dfe5dc;
  --paper: #f5f6f0;
  --green: #23563f;
  --lime: #d9ed8c;
  --orange: #edb18b;
  --white: #fff;
  --red: #a64435;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
a {
  color: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
.button {
  border: 0;
  border-radius: 9px;
  padding: 11px 16px;
  background: var(--green);
  color: white;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
}
button:hover,
.button:hover {
  filter: brightness(1.08);
}
button:disabled {
  opacity: 0.45;
  cursor: wait;
}
.secondary {
  background: #edf0e8;
  color: var(--ink);
  border: 1px solid var(--line);
}
.danger {
  background: #f8e7df;
  color: var(--red);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #b39353;
  outline-offset: 3px;
}
.shell {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}
aside {
  padding: 30px 22px;
  border-right: 1px solid var(--line);
  background: #eef1e8;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.wordmark {
  font-weight: 800;
  font-size: 29px;
  text-decoration: none;
  letter-spacing: -1.5px;
}
.wordmark span {
  font-size: 17px;
  color: #a9bb66;
  margin-left: 3px;
}
.pilot-label {
  font-size: 10px;
  letter-spacing: 2px;
  margin: 9px 0 38px;
  color: var(--muted);
}
select,
input,
textarea {
  background: #fff;
  border: 1px solid #cbd7ca;
  border-radius: 8px;
  padding: 11px;
  width: 100%;
  color: var(--ink);
}
.small {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.fine {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.side-foot {
  margin-top: auto;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #55945f;
  border-radius: 50%;
  margin-right: 6px;
}
nav {
  display: grid;
  gap: 5px;
  margin: 20px 0;
}
nav button {
  text-align: left;
  background: none;
  color: var(--muted);
  font-weight: 500;
}
nav button.active {
  background: var(--ink);
  color: white;
}
main {
  padding: 35px 40px;
  min-width: 0;
  max-width: 1600px;
  width: 100%;
  margin: auto;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 29px;
  gap: 15px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--muted);
  margin: 0 0 9px;
}
h1 {
  font-size: 32px;
  letter-spacing: -1.2px;
  margin: 0;
}
h2 {
  font-size: 20px;
  letter-spacing: -0.5px;
  margin: 0 0 12px;
}
h3 {
  font-size: 16px;
  margin: 0 0 8px;
}
p {
  line-height: 1.6;
}
.header-actions,
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pill {
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
  padding: 5px 9px;
  border-radius: 30px;
  background: #e9eee5;
  color: #53645a;
  white-space: nowrap;
}
.pill.active,
.pill.passed,
.pill.qualified {
  background: #dceccb;
  color: #2c633b;
}
.pill.needs_review,
.pill.excluded,
.pill.failed {
  background: #f7e2d7;
  color: #963e2b;
}
.pill.review,
.pill.generating,
.pill.queued {
  background: #f2ebce;
  color: #826b24;
}
.intro {
  background: var(--ink);
  color: white;
  padding: 28px 30px;
  border-radius: 15px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
}
.intro h2 {
  font-size: 26px;
}
.intro p {
  color: #cbd9cd;
  max-width: 650px;
  font-size: 14px;
  margin-bottom: 0;
}
.intro .button {
  background: var(--lime);
  color: var(--ink);
  white-space: nowrap;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 20px 0 26px;
}
.stat {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}
.stat span {
  font-size: 12px;
  color: var(--muted);
}
.stat strong {
  display: block;
  font-size: 30px;
  margin: 10px 0 5px;
  letter-spacing: -1px;
}
.stat small {
  font-size: 11px;
  color: var(--muted);
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 22px;
  margin-bottom: 18px;
  min-width: 0;
}
.grid .card {
  margin: 0;
}
.card p {
  font-size: 13px;
  color: var(--muted);
}
.row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.row-head h2 {
  margin: 0;
}
.asset-preview {
  background: #eff2e9;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin: 12px 0 17px;
  padding: 18px;
}
.asset-preview img {
  max-width: 100%;
  max-height: 320px;
  box-shadow: 0 8px 22px #193d3319;
}
.swatches {
  display: flex;
  gap: 7px;
  margin: 16px 0;
}
.swatch {
  height: 32px;
  flex: 1;
  border: 1px solid #193d3322;
  border-radius: 5px;
}
.checklist {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  display: grid;
  gap: 9px;
}
.checklist li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  border-bottom: 1px solid #eef0e9;
  padding-bottom: 8px;
}
.checklist .pass {
  color: #3e7d40;
}
.checklist .fail {
  color: var(--red);
}
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}
th {
  font-weight: 600;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
th,
td {
  padding: 13px 9px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td:first-child {
  white-space: normal;
  min-width: 130px;
}
td small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}
.empty {
  padding: 30px;
  border: 1px dashed #ccd6c5;
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}
.step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 19px 0;
}
.step b {
  background: var(--lime);
  border-radius: 50%;
  padding: 6px 11px;
  font-size: 13px;
}
.step p {
  margin: 3px 0;
  font-size: 12px;
}
.step strong {
  font-size: 13px;
}
footer {
  margin-top: 35px;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.6;
}
.notice {
  padding: 14px 18px;
  background: #f0ecd8;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.error {
  color: var(--red);
  font-size: 13px;
}
dialog {
  border: 0;
  border-radius: 16px;
  width: min(620px, 95vw);
  padding: 26px;
  max-height: 90vh;
  box-shadow: 0 20px 100px #0a2b3350;
}
dialog::backdrop {
  background: #152b2766;
  backdrop-filter: blur(3px);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
#fields {
  display: grid;
  gap: 15px;
}
#fields label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
#fields small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 5px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 15px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 25px #0002;
  z-index: 100;
  font-size: 13px;
  max-width: 400px;
}
.brand-logo {
  height: 58px;
  max-width: 220px;
  object-fit: contain;
  object-position: left;
}
.mono {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.approval {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.approval span {
  font-size: 11px;
  padding: 6px 9px;
  background: #f1f3eb;
  border-radius: 6px;
}
.approval .yes {
  background: #e1efcf;
}
.progress {
  height: 7px;
  background: #edf1e5;
  border-radius: 4px;
  margin: 12px 0;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  background: #a9c264;
}
.caption {
  font-size: 11px;
  color: var(--muted);
}
details {
  font-size: 12px;
  margin-top: 12px;
}
details summary {
  cursor: pointer;
  color: var(--green);
}
pre {
  background: #edf1e8;
  border-radius: 8px;
  padding: 16px;
  overflow: auto;
  max-height: 260px;
  font-size: 11px;
  line-height: 1.6;
}
.inline-label {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 12px;
  margin: 10px 0;
}
.inline-label input {
  width: auto;
}
.good {
  color: #3c713d;
}
.muted {
  color: var(--muted);
}
@media (max-width: 1000px) {
  main {
    padding: 25px;
  }
  .shell {
    grid-template-columns: 210px 1fr;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .shell {
    display: block;
  }
  aside {
    position: relative;
    height: auto;
    padding: 20px;
    display: block;
    border-bottom: 1px solid var(--line);
  }
  .pilot-label,
  .fine,
  .side-foot {
    display: none;
  }
  .wordmark {
    display: block;
    margin-bottom: 15px;
  }
  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 0;
  }
  nav button {
    white-space: nowrap;
    font-size: 12px;
    padding: 9px;
  }
  aside .small {
    display: none;
  }
  aside select {
    max-width: 300px;
  }
  main {
    padding: 22px 16px;
  }
  h1 {
    font-size: 28px;
  }
  .grid,
  .grid.three {
    grid-template-columns: 1fr;
  }
  .intro {
    display: block;
    padding: 23px;
  }
  .intro .button {
    margin-top: 20px;
  }
  .stat {
    padding: 16px;
  }
  .stat strong {
    font-size: 25px;
  }
  .header-actions .pill {
    display: none;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  header {
    align-items: flex-start;
  }
  .row-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

[hidden] {
  display: none !important;
}

.field-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
#fields .field-label-row label {
  margin: 0;
}
.field-help-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 4px;
  background: #edf1e8;
  color: #193d33;
  border: 1px solid #ccd6c5;
  border-radius: 50%;
  cursor: pointer;
}
.field-help-toggle:hover {
  background: #daed8b;
}
.field-help-toggle:focus-visible {
  outline: 3px solid #193d33;
  outline-offset: 3px;
}
#fields .field-help {
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;
  color: #193d33;
  background: #f0f4e9;
  padding: 10px 12px;
  border-radius: 7px;
  margin: 0 0 9px;
}
.field-label-row .inline-label {
  margin: 0 !important;
}

.field-help-toggle {
  width: 24px;
  height: 24px;
  padding: 3px;
}
.field-help-toggle svg {
  width: 14px;
  height: 14px;
}

.kit-drop {
  border: 2px dashed #a9bdac;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  background: #f4f7f0;
}
.kit-drop.dragging {
  background: #e2edc4;
  border-color: #193d33;
}
.kit-drop p {
  font-size: 12px;
  color: #657269;
}
.kit-drop .actions {
  justify-content: center;
}
.kit-file-list {
  padding: 0;
  list-style: none;
  max-height: 190px;
  overflow: auto;
}
.kit-file-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  overflow-wrap: anywhere;
  font-size: 12px;
  padding: 8px;
  border-bottom: 1px solid #e4e8de;
}
.kit-file-list li span {
  margin-left: auto;
  white-space: nowrap;
}
.kit-file-list button {
  padding: 3px 8px;
}
.logo-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#fields .logo-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #cdd8cb;
  border-radius: 9px;
  overflow-wrap: anywhere;
}
.logo-choice img {
  height: 90px;
  max-width: 100%;
  object-fit: contain;
  background: #f2f3ec;
}
.logo-choice input {
  width: auto;
  align-self: flex-start;
}
.logo-choice:has(input:checked) {
  outline: 2px solid #193d33;
  background: #f0f5e6;
}
.palette-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#fields .palette-choice {
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  cursor: pointer;
}
.palette-choice input {
  width: auto;
}
.palette-choice span {
  height: 42px;
  width: 52px;
  border: 1px solid #b5c2b7;
  border-radius: 6px;
}
.palette-choice:has(input:checked) span {
  outline: 3px solid #193d33;
  outline-offset: 2px;
}
.palette-choice small {
  font-size: 9px !important;
}
.color-review h3 {
  font-size: 14px;
  margin-bottom: 4px;
}
.custom-kit-color {
  max-width: 100px;
}
.color-review details {
  margin-bottom: 10px;
}
/* Shared workspace presentation: quiet surfaces, readable hierarchy and contextual guidance. */
:root {
  --paper: #f6f8fb;
  --ink: #233247;
  --muted: #637187;
  --line: #e0e6ee;
  --green: #285e58;
  font-size: 15px;
}
body {
  line-height: 1.5;
}
aside {
  background: #fff;
  padding: 28px 20px;
}
.wordmark {
  letter-spacing: -1px;
}
.pilot-label {
  margin-bottom: 24px;
}
main {
  padding: 32px 36px;
}
header {
  margin-bottom: 16px;
}
h1 {
  font-size: 30px;
  letter-spacing: -0.8px;
}
.card {
  box-shadow: 0 3px 14px #20304705;
  padding: 24px;
  border-radius: 16px;
  margin-bottom: 18px;
}
.stats {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.stat {
  border-radius: 14px;
  padding: 18px;
}
.stat strong {
  font-size: 28px;
}
.grid {
  gap: 18px;
}
.grid.three {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.actions {
  gap: 8px;
  margin-top: 14px;
}
.actions .secondary {
  font-size: 12px;
  padding: 8px 11px;
}
.intro {
  background: #28504c;
}
.page-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.page-context p {
  color: var(--muted);
  margin: 0;
  max-width: 650px;
}
.context-help {
  background: none;
  color: #43675f;
  padding: 5px;
  font-size: 12px;
  white-space: nowrap;
}
.guide-welcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eef6f3;
  gap: 20px;
}
.guide-welcome p {
  margin: 0;
}
.guide-nav {
  border-top: 1px solid var(--line);
  margin-top: 16px !important;
  border-radius: 0 !important;
  font-size: 12px;
}
.guide-steps {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}
.guide-step {
  display: grid;
  gap: 7px;
  padding: 18px;
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
}
.guide-step:hover {
  border-color: #6b9a89;
  background: #eef6f3;
}
.guide-step span {
  color: var(--muted);
  font-size: 14px;
}
.guide-step small {
  color: #285e58;
}
.field-help-toggle {
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 2px;
  font-size: 11px;
}
.field-help-toggle svg {
  width: 11px;
  height: 11px;
}
.info-inline {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin-left: 5px;
}
.info-inline summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid #aab8c7;
  color: #4d6578;
  font-size: 11px;
  cursor: pointer;
  list-style: none;
}
.info-inline summary::-webkit-details-marker {
  display: none;
}
.info-inline p {
  position: absolute;
  z-index: 5;
  top: 20px;
  left: -100px;
  min-width: 220px;
  max-width: 290px;
  background: #fff;
  padding: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 30px #23324722;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
}
.metric-label {
  font-size: 12px;
  color: var(--muted);
}
.tracking-head {
  margin-bottom: 24px;
}
.tracking-head h1 {
  margin: 12px 0;
}
.tracking-subtitle {
  color: var(--muted);
  max-width: 720px;
}
.tracking-status {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.tracking-status input {
  width: auto;
}
.tracking-table th {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.tracking-table td {
  padding: 14px 12px;
}
.tracking-table small {
  display: block;
  color: var(--muted);
}
.evidence-details {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.evidence-details summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
}
.tracking-page {
  max-width: 1150px;
}
.notice {
  font-size: 13px;
  border-radius: 10px;
}
.caption {
  font-size: 12px;
}
@media (max-width: 900px) {
  main {
    padding: 24px 18px;
  }
  .grid,
  .grid.three {
    grid-template-columns: 1fr;
  }
  .page-context,
  .guide-welcome {
    align-items: flex-start;
    flex-direction: column;
  }
  .shell {
    grid-template-columns: 210px 1fr;
  }
}
@media (max-width: 650px) {
  .shell {
    display: block;
  }
  aside {
    position: static;
    height: auto;
  }
  nav {
    grid-template-columns: 1fr 1fr;
  }
  header {
    align-items: flex-start;
  }
  h1 {
    font-size: 25px;
  }
  .tracking-table {
    min-width: 620px;
  }
}

#summary .stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.info-inline summary {
  text-transform: none;
}
@media (max-width: 800px) {
  #summary .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 450px) {
  #summary .stats {
    grid-template-columns: 1fr;
  }
  .info-inline p {
    left: -70px;
    min-width: 200px;
    max-width: 240px;
  }
}

.game-group {
  grid-column: 1/-1;
  background: #eef2f6;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 16px;
}
.game-group > .row-head h2 {
  font-size: 24px;
}
.game-group > p {
  color: var(--muted);
  font-size: 14px;
}

.metric-info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  margin-left: 6px;
  border: 1px solid #aab8c7;
  border-radius: 50%;
  background: white;
  color: #4d6578;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  vertical-align: middle;
}
.metric-help-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 24px;
  overflow: auto;
  white-space: normal;
}
.metric-help-dialog p {
  font-size: 14px;
  line-height: 1.65;
  white-space: normal;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}
.metric-help-dialog h2 {
  font-size: 20px;
}
.metric-help-dialog::backdrop {
  background: #182b3f55;
}

.placement-health {
  border-left: 4px solid #bb8032;
  background: #fffbf3;
}
.placement-health li {
  font-size: 13px;
  line-height: 1.6;
  margin: 9px 0;
}
.placement-health h2 {
  color: #80551e;
}

.campaign-journey {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.journey-steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}
.journey-steps li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  align-items: start;
}
.journey-steps p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 13px;
}
.journey-state {
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 5px 9px;
  background: #edf0f4;
  text-align: center;
}
.journey-state.complete {
  background: #e2f1e8;
  color: #245c3f;
}
.journey-state.action {
  background: #e5edff;
  color: #254b88;
}
.journey-state.blocked {
  background: #ffe9e5;
  color: #8b352b;
}
.journey-state.waiting {
  background: #fff3d9;
  color: #79601c;
}
.journey-section h3 {
  margin: 0;
}
@media (max-width: 650px) {
  .journey-steps li {
    grid-template-columns: 80px 1fr;
    gap: 10px;
  }
}

.journey-detail summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0;
  color: var(--ink);
}

.placement-preflight {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f6f8fa;
}
.placement-preflight summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.placement-preflight section {
  border-top: 1px solid var(--line);
  padding: 8px 0;
}
.placement-preflight h4 {
  margin: 8px 0;
}
.placement-preflight p {
  font-size: 13px;
  line-height: 1.5;
}

.conflict-review {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid #d9a44c;
  border-radius: 12px;
  background: #fff9ed;
}
.conflict-review section {
  padding: 8px 0;
  border-top: 1px solid #e8d8bc;
}
.conflict-review h4 {
  margin: 10px 0;
}
.conflict-review .inline-label {
  align-items: flex-start;
  line-height: 1.5;
}
.conflict-review input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
}

/* Workspace redesign: quiet navigation, task hierarchy and focused objects. */
.workspace-app {
  --paper: #f6f8fa;
  --line: #e3e9e7;
  --muted: #64746d;
  background: var(--paper);
}
.workspace-app .shell {
  grid-template-columns: 232px minmax(0, 1fr);
}
.workspace-app aside {
  background: #fff;
  padding: 28px 18px;
  overflow-y: auto;
}
.workspace-app .wordmark {
  font-size: 30px;
  letter-spacing: -1.2px;
}
.workspace-app .pilot-label {
  margin-bottom: 28px;
  letter-spacing: 1.4px;
}
.workspace-app #nav-toggle {
  display: none;
}
.workspace-app nav button {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
}
.workspace-app nav button.active {
  background: #eaf2ee;
  color: #193d33;
  font-weight: 700;
  box-shadow: inset 3px 0 #23563f;
}
.workspace-app nav .guide-nav {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding-top: 20px;
}
.workspace-app main {
  padding: 32px 42px;
  max-width: 1500px;
  margin: 0 auto;
}
.workspace-app header {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}
.workspace-app h1 {
  font-size: 28px;
  letter-spacing: -0.8px;
}
.workspace-app .card {
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 4px #193d3303;
}
.workspace-app .page-context {
  margin: 0 0 24px;
  padding: 0;
  background: transparent;
  border: 0;
}
.workspace-app .page-context p {
  margin: 0;
  max-width: 720px;
  font-size: 14px;
}
.workspace-app .page-context .context-help {
  white-space: nowrap;
}
.workspace-welcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 14px 0 8px;
}
.workspace-welcome h2 {
  font-size: 29px;
  line-height: 1.2;
  letter-spacing: -0.9px;
}
.workspace-welcome p:not(.eyebrow) {
  max-width: 620px;
  color: var(--muted);
  font-size: 14px;
}
.workspace-welcome button {
  flex-shrink: 0;
}
.native-stats .stat {
  padding: 20px 22px;
}
.native-stats .stat strong {
  font-size: 30px;
}
.home-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.next-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 0;
  text-decoration: none;
  border-top: 1px solid var(--line);
}
.next-action strong {
  font-size: 14px;
}
.next-action small,
.campaign-row small,
.creative-strip small {
  display: block;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 5px;
  font-size: 12px;
}
.action-marker {
  background: #edf4ef;
  color: var(--green);
  border-radius: 10px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.calm-empty {
  padding: 26px 0;
  color: var(--muted);
}
.calm-empty strong {
  color: var(--ink);
}
.result-summary {
  display: flex;
  gap: 25px;
  margin: 24px 0;
  flex-wrap: wrap;
}
.result-summary strong {
  display: block;
  font-size: 24px;
  letter-spacing: -0.6px;
}
.result-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.campaign-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  text-decoration: none;
  border-top: 1px solid var(--line);
}
.campaign-row:hover .campaign-row-copy strong {
  text-decoration: underline;
}
.campaign-row-copy {
  flex: 1;
  min-width: 0;
}
.campaign-thumb {
  width: 68px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #eaf1ed;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
}
.campaign-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.row-chevron {
  color: var(--muted);
}
.section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #eaf0ed;
  border-radius: 10px;
  flex-wrap: wrap;
}
.filter-tabs button {
  background: transparent;
  color: #52665c;
  font-size: 12px;
  padding: 9px 12px;
}
.filter-tabs button.selected {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 4px #193d3310;
}
.search-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 7px;
}
#campaign-search {
  max-width: 460px;
  margin-bottom: 24px;
}
.back-link {
  display: inline-block;
  font-size: 13px;
  margin: 0 0 20px;
  color: var(--muted);
  text-decoration: none;
}
.campaign-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.campaign-heading h2 {
  font-size: 26px;
}
.campaign-heading p {
  margin-bottom: 0;
}
.compact-journey {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0;
  margin: 26px 0;
  gap: 12px;
}
.compact-journey li {
  border-top: 2px solid #d9e2dc;
  padding-top: 12px;
}
.compact-journey li.complete {
  border-color: #55946c;
}
.compact-journey li.action {
  border-color: #bb8c45;
}
.compact-journey li > span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e7eee9;
  font-size: 11px;
  margin-bottom: 8px;
}
.compact-journey li.complete > span {
  background: #dbeede;
  color: #245334;
}
.compact-journey strong,
.compact-journey small {
  display: block;
  font-size: 12px;
}
.compact-journey small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
}
.campaign-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
  gap: 22px;
  align-items: start;
}
.creative-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f6f8f6;
  padding: 15px;
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.creative-strip img {
  max-width: 130px;
  max-height: 80px;
}
.quiet-details {
  margin: 20px 0;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  color: var(--muted);
  font-size: 13px;
}
.quiet-details summary {
  cursor: pointer;
  font-weight: 600;
}
.quiet-details .card {
  margin-top: 20px;
}
.definition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 24px 0;
}
.definition-grid h3 {
  font-size: 14px;
}
.placement-disclosure {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 12px;
}
.placement-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: space-between;
  padding: 19px;
  cursor: pointer;
}
.placement-disclosure > summary:before {
  content: "＋";
  font-size: 16px;
  color: var(--muted);
}
.placement-disclosure[open] > summary:before {
  content: "−";
}
.placement-disclosure > summary > div {
  flex: 1;
}
.placement-disclosure summary small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}
.placement-disclosure > .card {
  border: 0;
  box-shadow: none;
  margin-bottom: 0;
}
.placement-stack {
  display: block;
}
.workspace-app .game-group {
  grid-column: 1/-1;
  background: transparent;
  border: 0;
  padding: 12px 0;
}
.workspace-app .game-group > .row-head h2 {
  font-size: 23px;
}
.workspace-app .scene-composition {
  margin: 0;
}
.workspace-app .scene-composition summary {
  font-size: 13px;
  margin-bottom: 15px;
}
.workspace-app small {
  line-height: 1.5;
}
.workspace-app footer {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 32px;
}
@media (max-width: 1100px) {
  .workspace-app main {
    padding: 26px;
  }
  .campaign-columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 800px) {
  .workspace-app .shell {
    grid-template-columns: 1fr;
  }
  .workspace-app aside {
    position: relative;
    height: auto;
    padding: 18px;
  }
  .workspace-app nav {
    display: flex;
    flex-wrap: wrap;
    margin: 12px 0;
  }
  .workspace-app nav .guide-nav {
    margin: 0;
    padding-top: 12px;
    border: 0;
  }
  .workspace-app aside .side-foot,
  .workspace-app aside .fine,
  .workspace-app .pilot-label {
    display: none;
  }
  .workspace-app aside select {
    max-width: 400px;
  }
  .workspace-app .home-columns {
    grid-template-columns: 1fr;
  }
  .workspace-app .native-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .compact-journey {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .workspace-welcome {
    align-items: start;
    flex-direction: column;
  }
  .definition-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .campaign-row {
    gap: 10px;
  }
  .campaign-thumb {
    width: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

.brand-intro {
  display: flex;
  align-items: center;
  gap: 28px;
  justify-content: space-between;
  margin: 24px 0;
}
.brand-intro h2 {
  font-size: 28px;
  max-width: 640px;
}
.brand-intro p {
  max-width: 650px;
}
.brand-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 28px 0;
}
.brand-steps li {
  border-top: 3px solid #d8e5db;
  padding: 14px 0;
}
.brand-steps span {
  display: block;
  color: #617065;
  margin-top: 6px;
}
.brand-mark-stage {
  height: 140px;
  display: grid;
  place-items: center;
  background: #f4f6f2;
  border-radius: 12px;
  margin-bottom: 20px;
}
.brand-mark-stage img {
  max-height: 100px;
  max-width: 85%;
  object-fit: contain;
}
.brand-palette {
  display: flex;
  gap: 12px;
  margin: 20px 0;
}
.brand-palette > div {
  flex: 1;
  min-width: 0;
}
.brand-palette i {
  display: block;
  height: 35px;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.brand-palette small,
.brand-palette code {
  display: block;
  font-size: 11px;
  margin-top: 6px;
}
.brand-library-card > button {
  width: 100%;
  margin-bottom: 14px;
}
.setup-flow-header {
  border-bottom: 1px solid #dfe6df;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.setup-flow-header h3 {
  font-size: 24px;
  margin: 8px 0;
}
.setup-flow-header p {
  color: #617065;
}
.setup-flow-controls {
  margin: 22px 0;
}
.setup-flow-header ~ section[hidden] {
  display: none !important;
}
@media (max-width: 700px) {
  .brand-intro {
    display: block;
  }
  .brand-steps {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
/* Journey accessibility and recovery */
.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: #193d33;
  color: white;
  padding: 12px 18px;
}
.skip-link:focus {
  top: 12px;
}
.workspace-app :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #246b50;
  outline-offset: 3px;
}
.workspace-app button:not(.field-help-toggle) {
  min-height: 44px;
}
.workspace-app summary {
  min-height: 44px;
  align-content: center;
}
.workspace-app input,
.workspace-app select {
  min-height: 44px;
  font-size: 16px;
}
.setup-step-trail {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  gap: 8px;
  font-size: 12px;
}
.setup-step-trail li {
  padding: 6px 10px;
  border-radius: 6px;
  background: #eef2ed;
  color: #405449;
}
.setup-step-trail [aria-current] {
  background: #193d33;
  color: #fff;
  font-weight: 700;
}
.field-error {
  color: #942820;
  font-size: 13px;
  margin: 6px 0;
}
.workspace-app [aria-invalid="true"] {
  border: 2px solid #942820;
}
.error-link {
  background: transparent;
  color: #942820;
  text-align: left;
  padding: 0;
  text-decoration: underline;
  border: 0;
}
.workspace-app #form-error:not(:empty) {
  padding: 16px;
  border: 1px solid #942820;
  border-radius: 8px;
  background: #fff4f2;
}
.workspace-app #form-error ul {
  padding-left: 20px;
}
.workspace-app #fields > section {
  display: grid;
  gap: 16px;
}
.workspace-app #fields > section[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .workspace-app * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

.opportunity-preview {
  padding: 16px;
  background: #f3f6f1;
  border-radius: 10px;
}
.opportunity-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}
.brand-intro ~ .card .row-head small {
  display: block;
  margin-top: 6px;
}

.placement-steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
.placement-steps li {
  padding: 16px;
  border: 1px solid #dde5dd;
  border-radius: 10px;
}
.placement-steps p {
  font-size: 13px;
}
@media (max-width: 800px) {
  .placement-steps {
    grid-template-columns: 1fr;
  }
}

/* Keep phone navigation compact and native recordings readable without sideways scrolling. */
@media (max-width: 800px) {
  .workspace-app aside {
    padding: 12px 16px;
  }
  .workspace-app .wordmark {
    font-size: 23px;
  }
  .workspace-app aside label.small {
    display: inline;
    margin-left: 12px;
  }
  .workspace-app aside select {
    margin: 8px 0;
    padding: 8px;
  }
  .workspace-app nav {
    display: none;
    width: 100%;
    margin: 8px 0 0;
    gap: 4px;
    overflow: visible;
  }
  .workspace-app nav.is-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace-app #nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    margin: 8px 0 0;
    text-align: left;
    white-space: normal;
  }
  .workspace-app .nav-chevron {
    flex: none;
    font-size: 20px;
    line-height: 1;
  }
  .workspace-app #nav-toggle[aria-expanded="true"] .nav-chevron {
    transform: rotate(180deg);
  }
  .workspace-app nav button {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .workspace-app nav .guide-nav {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .workspace-app main {
    padding: 18px 16px;
    width: 100%;
    min-width: 0;
  }
  .workspace-app header {
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
  .workspace-app h1 {
    font-size: 24px;
  }
  .workspace-app .page-context {
    margin-bottom: 16px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .workspace-app .card {
    padding: 16px;
  }
  .recording-results table,
  .recording-results tbody {
    display: block;
    width: 100%;
  }
  .recording-results thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .recording-results tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 16px 0;
    border-top: 1px solid var(--line);
    gap: 12px;
  }
  .recording-results td {
    display: block;
    border: 0;
    padding: 0;
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .recording-results td:first-child,
  .recording-results td:nth-child(2),
  .recording-results td:last-child {
    grid-column: 1 / -1;
  }
  .recording-results td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 4px;
  }
  .recording-results td:nth-child(2) {
    font-size: 12px;
    color: var(--muted);
  }
  .recording-results td:nth-child(2) small {
    display: inline;
    margin-left: 8px;
  }
  .recording-results td:first-child small:last-child {
    font-size: 10px;
  }
}

.workspace-management {
  margin: 10px 0;
  font-size: 12px;
  color: var(--muted);
}
.workspace-management summary {
  cursor: pointer;
}
.workspace-management button {
  margin: 10px 0;
}
@media (max-width: 800px) {
  .workspace-app aside label.small {
    display: none;
  }
  .workspace-app aside select {
    margin: 6px 0;
  }
  .workspace-app .page-context {
    display: flex;
    align-items: center;
  }
  .workspace-app .page-context p {
    flex: 1;
    font-size: 12px;
  }
  .workspace-app .page-context .context-help {
    font-size: 11px;
    padding: 6px;
  }
  .recording-results + * {
    margin-top: 12px;
  }
}

/* Native report controls remain separate in narrow app panels. */
.native-report-page .report-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.native-report-page #confirmation-form { margin-top:24px; }
.native-report-page #recovery-status { margin:16px 0; overflow-wrap:anywhere; }
@media (max-width:600px) { .native-report-page .report-actions { flex-direction:column; align-items:stretch; } .native-report-page .report-actions button { width:100%; } }

.recording-results .report-evidence-status {
  white-space: normal;
  max-width: 34ch;
  margin-top: 6px;
}

/* Guided account setup shares the workspace's forms and saved records. */
.workspace-app .setup-banner { display:flex; gap:24px; align-items:center; justify-content:space-between; margin-bottom:24px; }
.workspace-app .setup-banner h2 { margin:6px 0; }
.workspace-app .setup-banner p { max-width:70ch; }
.workspace-app .setup-banner button { flex-shrink:0; }
.setup-heading { margin:8px 0 28px; }
.setup-heading h2 { font-size:30px; margin:8px 0; }
.setup-progress { display:flex; align-items:center; gap:16px; margin-top:20px; font-size:13px; }
.setup-progress progress { width:220px; height:8px; accent-color:#315d46; }
.account-setup { display:grid; grid-template-columns:minmax(220px,280px) minmax(0,1fr); gap:28px; align-items:start; }
.account-setup nav ol { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.workspace-app .setup-step { display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; color:#30463b; background:transparent; border:1px solid transparent; padding:12px; white-space:normal; }
.workspace-app .setup-step.active { background:#edf3e7; border-color:#adc398; }
.setup-step > span:first-child { flex-shrink:0; width:24px; }
.setup-step small { display:block; font-weight:400; margin-top:5px; }
.setup-step:disabled { opacity:.5; cursor:default; }
.workspace-app .setup-task { padding:28px; min-width:0; }
.setup-task h3 { font-size:24px; margin:8px 0 16px; }
.setup-task p,.setup-instructions { line-height:1.65; }
.setup-instructions { padding-left:24px; }
.setup-instructions li { margin:16px 0; }
.setup-instructions a { display:inline-block; margin-top:10px; }
.setup-task .actions { margin-top:24px; flex-wrap:wrap; }
.setup-task .caption { margin-top:24px; }
.setup-capture { margin:20px 0; }
.setup-capture img { width:100%; max-height:320px; object-fit:contain; border-radius:12px; background:#eef1eb; }
.setup-capture figcaption { font-size:13px; margin-top:8px; }
@media(max-width:800px) {
 .account-setup { grid-template-columns:1fr; gap:16px; }
 .account-setup nav ol { display:flex; overflow-x:auto; padding-bottom:10px; }
 .account-setup nav li { flex:0 0 185px; }
 .workspace-app .setup-banner { align-items:flex-start; flex-direction:column; gap:12px; }
 .workspace-app .setup-task { padding:20px; }
 .setup-progress { flex-wrap:wrap; }
}
@media(max-width:800px) {
 .workspace-app .account-setup nav { display:block; position:static; width:100%; padding:0; background:transparent; }
}
.account-setup > nav { min-width:0; }
@media(max-width:800px) {
 .account-setup nav ol { max-width:100%; }
}