:root {
  --pink: #f7c1d9;
  --charcoal: #24272a;
  --comp-pink: #e89cbe;
  --light-pink: #feeaf3;
  --white: #ffffff;
  --warm-grey: #d6d0ca;
  --mint: #a5d2ba;
  --yellow: #e8e39a;
  --burgundy: #8a3c66;
  --ink-soft: #5d6164;
  --line: #e8e2df;
  --shadow: 0 18px 45px rgba(36, 39, 42, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--charcoal);
  background: linear-gradient(90deg, #f8f7f6 0%, #f8f7f6 45%, var(--light-pink) 45%, var(--light-pink) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
  max-width: 100%;
  min-width: 0;
}

button,
.import-button {
  border: 0;
  border-radius: 6px;
  background: var(--charcoal);
  color: var(--white);
  cursor: pointer;
  font-weight: 750;
  min-height: 42px;
  overflow-wrap: anywhere;
  padding: 0 16px;
  white-space: normal;
}

button:hover,
.import-button:hover {
  filter: brightness(1.08);
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--charcoal);
  padding: 9px 10px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 760;
}

form > *,
.panel-header > *,
.topbar > *,
.ppr-workspace > * {
  min-width: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 11px 10px;
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--ink-soft);
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

td input,
td select,
td textarea {
  min-width: 82px;
}

textarea {
  resize: vertical;
}

.hidden {
  display: none !important;
}

.eyebrow {
  color: var(--burgundy);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 42px;
}

.login-panel {
  max-width: 620px;
}

.login-panel h1 {
  font-size: clamp(3.2rem, 7vw, 7.4rem);
  line-height: 0.86;
  margin: 0 0 42px;
  max-width: 8ch;
}

.login-form {
  max-width: 520px;
}

.login-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.market-choice-shell {
  background: #f2f2f2;
  min-height: 100vh;
}

.market-choice-header {
  align-items: center;
  background: var(--charcoal);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px 28px;
}

.market-choice-header > div {
  align-items: center;
  display: flex;
  gap: 12px;
}

.market-choice-header > div > div {
  display: grid;
  gap: 1px;
}

.market-choice-header strong {
  font-size: 0.84rem;
  text-transform: uppercase;
}

.market-choice-header span:not(.market-choice-mark) {
  color: #d8d8d8;
  font-size: 0.76rem;
}

.market-choice-header .ghost-button {
  border-color: #686b6e;
  color: var(--white);
}

.market-choice-mark,
.market-choice-card-mark {
  align-items: center;
  background: var(--comp-pink);
  color: var(--charcoal);
  display: flex;
  font-weight: 900;
  justify-content: center;
}

.market-choice-mark {
  height: 38px;
  width: 38px;
}

.market-choice-content {
  margin: 0 auto;
  max-width: 1120px;
  padding: 64px 28px;
  width: 100%;
}

.market-choice-content h1 {
  font-size: 2.7rem;
  margin: 0;
}

.market-choice-intro {
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 10px 0 34px;
}

.market-choice-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.market-choice-card {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 6px solid var(--comp-pink);
  color: var(--charcoal);
  display: grid;
  gap: 16px;
  grid-template-columns: 52px minmax(0, 1fr) 34px;
  min-height: 154px;
  padding: 22px;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.market-choice-card:hover,
.market-choice-card:focus-visible {
  border-color: var(--comp-pink);
  box-shadow: 0 12px 28px rgba(36, 39, 42, 0.12);
  transform: translateY(-2px);
}

.market-choice-card:disabled {
  cursor: wait;
  opacity: 0.55;
}

.market-choice-card.is-opening {
  border-color: var(--burgundy);
  opacity: 1;
}

.market-choice-card-mark {
  font-size: 1.15rem;
  height: 52px;
  width: 52px;
}

.market-choice-card-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.market-choice-card-copy > strong {
  font-size: 1.45rem;
  overflow-wrap: anywhere;
}

.market-choice-card-copy > small {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 650;
}

.market-choice-card-meta {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.market-choice-card-meta > span {
  color: var(--burgundy);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.market-choice-card-meta em {
  background: var(--light-pink);
  color: var(--burgundy);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
  padding: 4px 7px;
  text-transform: uppercase;
}

.market-choice-arrow {
  color: var(--burgundy);
  font-size: 1.5rem;
  font-weight: 800;
  justify-self: end;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
}

.sidebar {
  background: var(--warm-grey);
  color: var(--charcoal);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 44px;
  min-height: 100vh;
  padding: 34px 28px 26px;
  position: sticky;
  top: 0;
}

.sidebar h1 {
  font-size: 2rem;
  line-height: 0.98;
  margin: 0;
}

.sidebar .eyebrow {
  color: var(--burgundy);
  margin-bottom: 2px;
}

.brand-block {
  display: grid;
  gap: 16px;
}

.market-switcher {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.market-switcher span {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.market-switcher select {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(36, 39, 42, 0.16);
  color: var(--charcoal);
  font-weight: 750;
  width: 100%;
}

.assigned-market {
  border-top: 1px solid rgba(36, 39, 42, 0.16);
  color: var(--burgundy);
  font-size: 0.88rem;
  font-weight: 800;
  padding-top: 14px;
}

nav {
  display: grid;
  align-content: start;
  gap: 10px;
}

.nav-button,
.ghost-button {
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
}

.nav-button {
  border-left: 4px solid transparent;
  border-radius: 0;
  min-height: 50px;
  padding: 12px 14px;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.34);
  filter: none;
}

.nav-button.active {
  background: rgba(247, 193, 217, 0.82);
  border-left-color: var(--burgundy);
  color: var(--charcoal);
}

.primary-nav {
  font-size: 0.88rem;
  font-weight: 850;
  text-transform: uppercase;
}

.subnav {
  border-left: 1px solid rgba(36, 39, 42, 0.2);
  display: none;
  gap: 2px;
  margin: -2px 0 8px 18px;
  padding: 6px 0 6px 12px;
}

.subnav.open {
  display: grid;
}

.subnav button {
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 800;
  min-height: 34px;
  padding: 6px 10px;
  text-align: left;
  text-transform: uppercase;
}

.subnav button.active {
  background: transparent;
  color: var(--burgundy);
}

.sidebar-footer {
  border-top: 1px solid rgba(36, 39, 42, 0.16);
  display: grid;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  padding-top: 18px;
}

#signedInRole {
  color: var(--burgundy);
  font-weight: 800;
}

.sidebar .ghost-button {
  color: var(--charcoal);
  font-size: 0.76rem;
  min-height: 34px;
  padding: 0;
  text-transform: uppercase;
}

.sidebar .ghost-button:hover {
  color: var(--burgundy);
  filter: none;
}

.login-error {
  color: var(--burgundy);
  font-size: 0.86rem;
  font-weight: 760;
  min-height: 20px;
}

.cloud-mode {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 760;
  margin: 10px 0 0;
}

.workspace {
  min-width: 0;
  padding: 22px;
}

.topbar {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 18px;
  position: sticky;
  top: 12px;
  z-index: 3;
  backdrop-filter: blur(12px);
}

.topbar h2 {
  margin: 0;
  font-size: 1.5rem;
}

.project-heading {
  min-width: 0;
}

.project-heading .eyebrow {
  margin-bottom: 4px;
}

.project-details {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 650;
  margin: 6px 0 0;
}

.topbar-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.topbar-actions select {
  min-width: 220px;
}

#importFile {
  display: none;
}

.import-button,
.workspace .ghost-button {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--charcoal);
  display: inline-flex;
  min-height: 42px;
}

.view {
  display: none;
}

.active-view {
  display: grid;
  gap: 18px;
}

.notes-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 12px;
}

.note-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 14px;
}

.note-form .full-field {
  grid-column: 1 / -1;
}

.note-form button {
  justify-self: start;
}

.notes-list-header {
  gap: 14px;
}

.notes-list-header select {
  max-width: 220px;
}

.session-notes-list {
  display: grid;
  gap: 12px;
}

.session-note {
  background: #faf8f7;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.session-note-meta,
.session-note footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.session-note-meta span,
.role-badge {
  background: var(--light-pink);
  border-radius: 999px;
  color: var(--burgundy);
  font-size: 0.76rem;
  font-weight: 850;
  padding: 5px 9px;
}

.session-note h3 {
  font-size: 1.05rem;
  margin: 14px 0 8px;
}

.session-note p {
  line-height: 1.55;
  margin: 0;
}

.note-playbook-link {
  align-items: center;
  background: var(--light-pink);
  border-left: 4px solid var(--pink);
  display: flex;
  font-size: 0.74rem;
  gap: 8px;
  margin: 8px 0;
  padding: 7px 9px;
}

.note-playbook-link strong {
  color: var(--burgundy);
  text-transform: uppercase;
}

.note-actions {
  background: var(--white);
  border-left: 4px solid var(--yellow);
  margin-top: 14px;
  padding: 10px 12px;
}

.session-note footer {
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.8rem;
  margin-top: 14px;
  padding-top: 12px;
}

.session-note footer .danger-button {
  min-height: 34px;
}

.access-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(135px, 1fr)) minmax(150px, auto);
  gap: 14px;
}

.market-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(180px, auto);
  gap: 14px;
  align-items: end;
}

.owner-lead-toggle {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
}

.owner-lead-toggle input {
  height: 18px;
  margin: 0;
  width: 18px;
}

.owner-lead-toggle span {
  font-size: 0.84rem;
  font-weight: 750;
}

.access-form button {
  align-self: end;
}

.access-list {
  display: grid;
  gap: 8px;
}

.access-status {
  min-height: 22px;
  margin: 12px 0 0;
  color: #246b50;
  font-weight: 700;
}

.access-status.error {
  color: #a02c2c;
}

.access-item {
  align-items: center;
  background: #faf8f7;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 12px;
}

.access-item strong,
.access-item span {
  display: block;
}

.access-item > div span,
.current-user {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.access-item > div .account-login-status {
  font-size: 0.72rem;
  font-weight: 800;
  margin-top: 4px;
}

.access-item > div .account-login-status.is-ready {
  color: #267257;
}

.access-item > div .account-login-status.needs-repair {
  color: #a12d2d;
}

.access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.access-directory-item {
  grid-template-columns: minmax(210px, 1.35fr) minmax(180px, 0.8fr) minmax(180px, 0.8fr) auto;
}

.access-directory-item label {
  min-width: 0;
}

.access-item-warning {
  border-left: 5px solid #d9a928;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 12px;
}

.metric {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.metric span {
  color: var(--ink-soft);
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.metric strong {
  font-size: 2rem;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.75fr);
  gap: 18px;
}

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 0;
  padding: 18px;
}

.panel-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel h3 {
  margin: 0;
  font-size: 1rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 14px;
}

.form-grid.compact {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.form-grid button,
.session-form button {
  align-self: end;
}

.form-actions {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.project-list {
  display: grid;
  gap: 10px;
}

.project-item {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
}

.project-item strong {
  display: block;
}

.project-item span {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.session-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto auto auto;
  gap: 14px;
}

.session-form button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.score-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
}

.score-list {
  display: grid;
  gap: 8px;
}

.score-list-item {
  align-items: center;
  background: #faf8f7;
  border: 1px solid var(--line);
  color: var(--charcoal);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 62px;
  padding: 10px;
  text-align: left;
}

.score-list-item.active {
  background: var(--light-pink);
  border-color: var(--comp-pink);
}

.score-list-item span {
  font-weight: 820;
}

.score-list-item strong {
  font-size: 1.08rem;
}

.score-list-item em {
  font-style: normal;
  grid-column: 1 / -1;
  width: fit-content;
}

.score-detail {
  background: #faf8f7;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  padding: 18px;
}

.score-detail-header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.score-detail-header h3 {
  font-size: 1.5rem;
  margin: 0;
}

.score-result {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.score-result strong {
  font-size: 2.2rem;
  line-height: 1;
}

.score-group {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.score-group h4 {
  margin: 0;
}

.score-control {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(260px, 1fr);
  gap: 14px;
}

.score-control strong,
.score-control span {
  display: block;
}

.score-control span {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 760;
  margin-top: 2px;
}

.score-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(42px, 1fr));
  gap: 6px;
}

.score-buttons button {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--charcoal);
  min-height: 42px;
  padding: 0;
  text-align: center;
}

.score-buttons button.selected {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}

.theory-control {
  max-width: 260px;
}

.score-group textarea {
  min-height: 96px;
}

.score-nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.session-progress {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

.ppr-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(125px, 1fr));
  gap: 12px;
}

.ppr-session-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 0.8fr) minmax(180px, 1fr) minmax(130px, 0.65fr) repeat(4, auto);
  gap: 12px;
}

.ppr-timer-panel {
  align-items: center;
  background: var(--charcoal);
  border: 1px solid var(--charcoal);
  border-radius: 8px;
  color: var(--white);
  display: flex;
  gap: 22px;
  justify-content: space-between;
  min-width: 0;
  padding: 18px 22px;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.ppr-timer-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.ppr-timer-panel span,
.ppr-timer-panel small {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 750;
}

.ppr-timer-panel strong {
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ppr-timer-actions {
  align-items: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.ppr-go-button {
  background: var(--pink);
  color: var(--charcoal);
  font-size: 1.35rem;
  min-height: 74px;
  min-width: 150px;
}

.ppr-go-button.running {
  background: var(--yellow);
}

.ppr-timer-panel .ghost-button {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--white);
}

.ppr-timer-panel.product-recorded {
  animation: ppr-recorded-flash 650ms ease;
}

@keyframes ppr-recorded-flash {
  0%,
  100% {
    background: var(--charcoal);
  }
  28% {
    background: #24734f;
    border-color: var(--mint);
  }
}

.ppr-session-form button {
  align-self: end;
  white-space: nowrap;
}

.ppr-session-form button:disabled,
#newPprAssessmentButton:disabled,
#exportPprButton:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.ppr-workspace {
  display: grid;
  grid-template-areas: "editor history";
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 18px;
}

.ppr-history {
  grid-area: history;
  min-width: 0;
}

.ppr-history-heading {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ppr-history-heading span {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.ppr-assessment-list {
  align-content: start;
  display: grid;
  gap: 8px;
  max-height: 760px;
  overflow: auto;
}

.ppr-assessment-item {
  align-items: center;
  background: #faf8f7;
  border: 1px solid var(--line);
  color: var(--charcoal);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  min-height: 70px;
  padding: 11px;
  text-align: left;
}

.ppr-assessment-item.active {
  background: var(--light-pink);
  border-color: var(--comp-pink);
}

.ppr-assessment-item span:first-child {
  min-width: 0;
}

.ppr-assessment-item strong,
.ppr-assessment-item small {
  display: block;
}

.ppr-assessment-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppr-assessment-item small {
  color: var(--ink-soft);
  font-size: 0.76rem;
  margin-top: 3px;
}

.ppr-assessment-item em {
  font-size: 1rem;
  font-style: normal;
  font-weight: 850;
}

.ppr-assessment-item .status-pill {
  grid-column: 1 / -1;
  justify-self: start;
}

.ppr-editor {
  background: #faf8f7;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-area: editor;
  gap: 16px;
  min-width: 0;
  padding: 18px;
}

.ppr-session-lock {
  align-items: center;
  background: var(--light-pink);
  border: 1px solid var(--comp-pink);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}

.ppr-session-lock strong,
.ppr-session-lock span {
  display: block;
}

.ppr-session-lock span {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.ppr-editor-header,
.ppr-section-heading,
.ppr-editor-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.ppr-editor-header h3,
.ppr-section-heading h4 {
  margin: 0;
}

.ppr-result {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.ppr-result strong {
  font-size: 2rem;
  line-height: 1;
}

.ppr-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 12px;
}

.ppr-type-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 8px;
}

.ppr-entry-step {
  display: grid;
  gap: 12px;
}

.ppr-step-heading {
  align-items: center;
  display: flex;
  gap: 10px;
}

.ppr-step-heading > span {
  align-items: center;
  background: var(--charcoal);
  border-radius: 50%;
  color: var(--white);
  display: inline-flex;
  flex: 0 0 28px;
  font-size: 0.78rem;
  font-weight: 850;
  height: 28px;
  justify-content: center;
}

.ppr-step-heading strong,
.ppr-step-heading small {
  display: block;
}

.ppr-step-heading small {
  color: var(--ink-soft);
  font-size: 0.76rem;
  margin-top: 2px;
}

.ppr-step-heading h4 {
  font-size: 1rem;
}

.ppr-product-field input,
.ppr-cwt-inputs input {
  font-size: 1.08rem;
  font-weight: 760;
  min-height: 54px;
}

.ppr-order-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--comp-pink);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.ppr-order-panel.completed {
  border-left-color: var(--mint);
}

.ppr-order-heading,
.ppr-order-result {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.ppr-order-heading .eyebrow {
  margin-bottom: 3px;
}

.ppr-order-result {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ppr-order-result > strong {
  font-size: 0.88rem;
}

.ppr-cwt-controls {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 0.4fr) auto;
}

.ppr-cwt-direction {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ppr-cwt-direction button {
  background: #faf8f7;
  border-color: var(--line);
  color: var(--charcoal);
  min-height: 48px;
}

.ppr-cwt-direction button.active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}

.ppr-cwt-inputs {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ppr-cwt-variance {
  display: grid;
  gap: 7px;
}

.ppr-cwt-variance > span {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ppr-cwt-inputs.disabled {
  opacity: 0.45;
}

.ppr-cwt-inputs label {
  font-size: 0.72rem;
}

.ppr-complete-order {
  min-height: 54px;
  white-space: nowrap;
}

.ppr-order-help {
  color: var(--ink-soft);
  font-size: 0.76rem;
  line-height: 1.4;
}

.ppr-recent-products {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ppr-recent-products > span {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ppr-recent-products button {
  background: var(--light-pink);
  border: 1px solid var(--comp-pink);
  color: var(--charcoal);
  min-height: 34px;
  padding: 0 11px;
}

.ppr-type-picker button {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--charcoal);
  min-height: 50px;
}

.ppr-type-picker button.active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}

.ppr-perfect-button {
  align-items: center;
  background: var(--mint);
  border: 1px solid #7eb69a;
  color: var(--charcoal);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
  min-height: 64px;
  padding: 12px 16px;
  text-align: left;
}

.ppr-perfect-button strong,
.ppr-perfect-button span {
  display: block;
}

.ppr-perfect-button span {
  font-size: 0.78rem;
  font-weight: 700;
}

.ppr-perfect-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.ppr-entry-message {
  background: var(--light-pink);
  border-left: 4px solid var(--burgundy);
  color: var(--burgundy);
  font-weight: 750;
  margin: 0;
  padding: 10px 12px;
}

.ppr-station-prompt {
  background: var(--white);
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  font-weight: 750;
  margin: 0;
  padding: 18px;
  text-align: center;
}

.ppr-criteria {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.ppr-section-heading {
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
  padding-bottom: 12px;
}

.ppr-section-heading span {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.ppr-score-control {
  background: var(--light-pink);
  border: 1px solid var(--comp-pink);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  padding: 18px;
}

.ppr-criterion-title {
  display: grid;
  gap: 4px;
}

.ppr-criterion-title span,
.ppr-criterion-title small {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 750;
}

.ppr-criterion-title strong {
  font-size: 1.35rem;
}

.ppr-score-control .score-buttons button {
  font-size: 1.15rem;
  min-height: 58px;
}

.ppr-grade-review {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ppr-grade-review button {
  align-items: center;
  background: #faf8f7;
  border: 1px solid var(--line);
  color: var(--charcoal);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  text-align: left;
}

.ppr-grade-review span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ppr-editor-actions {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.ppr-extra-details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.ppr-extra-details summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
}

.ppr-extra-details[open] summary {
  margin-bottom: 12px;
}

.ppr-summary-list {
  display: grid;
  gap: 10px;
}

.ppr-summary-item {
  background: #faf8f7;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 12px;
}

.ppr-summary-item strong,
.ppr-summary-item span {
  display: block;
}

.ppr-summary-item span {
  color: var(--ink-soft);
  font-size: 0.8rem;
  margin-top: 2px;
}

.ppr-summary-item em {
  font-style: normal;
  font-weight: 850;
  max-width: 230px;
  overflow-wrap: anywhere;
  text-align: right;
}

.ppr-summary-item .validation-mini-track {
  grid-column: 1 / -1;
}

.ppr-summary-item.lowest {
  background: var(--light-pink);
  border-color: var(--comp-pink);
}

.ppr-summary-item .trend-up {
  color: #2d7453;
}

.ppr-summary-item .trend-down {
  color: var(--burgundy);
}

.trend-up {
  color: #2d7453;
}

.trend-down {
  color: var(--burgundy);
}

.progress-list {
  display: grid;
  gap: 8px;
}

.progress-item {
  align-items: center;
  background: #faf8f7;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto auto auto;
  gap: 10px;
  padding: 10px;
}

.progress-item span {
  font-weight: 820;
}

.progress-item em {
  border-radius: 999px;
  font-style: normal;
  font-weight: 850;
  padding: 4px 8px;
}

.progress-item em.positive {
  background: var(--mint);
}

.progress-item em.negative {
  background: var(--pink);
}

.table-wrap {
  overflow: auto;
}

.table-wrap.wide table {
  min-width: 1180px;
}

.positioning-panel {
  display: grid;
  gap: 4px;
}

.positioning-progress {
  color: var(--burgundy);
  font-size: 0.86rem;
}

.positioning-workspace {
  display: grid;
  grid-template-columns: minmax(210px, 0.62fr) minmax(0, 2fr);
  gap: 14px;
}

.juicer-bank,
.positioning-station {
  border: 1px solid rgba(36, 39, 42, 0.16);
  border-radius: 6px;
  min-width: 0;
  padding: 14px;
}

.juicer-bank {
  align-content: start;
  background: #f3f1ef;
  display: grid;
  gap: 12px;
}

.positioning-heading {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.positioning-heading strong {
  font-size: 0.82rem;
  text-transform: uppercase;
}

.positioning-heading span {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 800;
}

.juicer-bank-list,
.positioning-station-list {
  align-content: start;
  display: grid;
  gap: 8px;
  min-height: 72px;
}

.station-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 10px;
}

.positioning-station {
  align-content: start;
  display: grid;
  gap: 12px;
  min-height: 154px;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.positioning-station.empty {
  background: #ffd3d8;
}

.positioning-station.partial {
  background: var(--yellow);
}

.positioning-station.filled {
  background: var(--mint);
}

.station-drop-zone.drag-over {
  border-color: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(36, 39, 42, 0.14);
  transform: translateY(-2px);
}

.juicer-position-chip {
  align-items: center;
  background: var(--white);
  border: 1px solid rgba(36, 39, 42, 0.16);
  color: var(--charcoal);
  cursor: grab;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 46px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.juicer-position-chip:active {
  cursor: grabbing;
}

.juicer-position-chip.selected {
  border-color: var(--burgundy);
  box-shadow: 0 0 0 2px rgba(138, 60, 102, 0.18);
}

.juicer-position-chip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.juicer-position-chip small {
  color: var(--ink-soft);
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 800;
}

.juicer-position-chip small.ready {
  color: #276044;
}

.juicer-position-chip small.critical {
  color: var(--burgundy);
}

.positioning-empty {
  color: rgba(36, 39, 42, 0.58);
  font-size: 0.78rem;
  font-weight: 700;
  margin: 6px 0;
}

.positioning-editor {
  margin-top: 16px;
}

.positioning-details {
  align-items: end;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
}

.positioning-suggestion {
  align-content: center;
  display: grid;
  gap: 5px;
  min-height: 42px;
}

.positioning-suggestion span {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.positioning-suggestion strong {
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.bars {
  display: grid;
  gap: 12px;
}

.bar-row {
  display: grid;
  gap: 6px;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 750;
}

.bar-track {
  background: #f3efed;
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
}

.bar-layout {
  background: #faf8f7;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  overflow-x: auto;
  padding: 18px;
}

.bar-row-layout {
  display: flex;
  gap: 8px;
  min-width: 720px;
}

.bar-row-layout.top-row {
  padding-left: 54px;
}

.bar-row-layout.bottom-row {
  padding-right: 54px;
}

.bar-gap {
  border-left: 10px solid var(--comp-pink);
  height: 54px;
  margin-left: 18px;
}

.bar-station {
  align-content: start;
  border: 2px solid rgba(36, 39, 42, 0.18);
  border-radius: 6px;
  display: grid;
  flex: var(--station-size) 0 72px;
  gap: 10px;
  min-height: 150px;
  min-width: 108px;
  padding: 16px;
}

.station-heading {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.bar-station strong {
  font-size: 0.92rem;
  text-transform: uppercase;
}

.bar-station span {
  font-weight: 850;
}

.bar-station.empty {
  background: #ffd3d8;
}

.bar-station.partial {
  background: var(--yellow);
}

.bar-station.filled {
  background: var(--mint);
}

.station-progress {
  background: rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.station-progress span {
  background: rgba(36, 39, 42, 0.56);
  display: block;
  height: 100%;
}

.station-names {
  align-content: start;
  display: grid;
  gap: 4px;
}

.station-names span {
  border-bottom: 1px solid rgba(36, 39, 42, 0.15);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  padding-bottom: 4px;
}

.station-names span:last-child {
  border-bottom: 0;
}

.station-names .station-unassigned {
  color: rgba(36, 39, 42, 0.58);
  font-weight: 600;
}

.status-pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 850;
  padding: 5px 9px;
  white-space: nowrap;
}

.ready {
  background: var(--mint);
  color: #173329;
}

.almost {
  background: var(--yellow);
  color: #3b3511;
}

.not-ready {
  background: var(--pink);
  color: #4e1732;
}

.critical {
  background: var(--burgundy);
  color: var(--white);
}

.validation-summary {
  display: grid;
  gap: 8px;
}

.validation-summary-item {
  align-items: center;
  background: #faf8f7;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  padding: 10px;
}

.validation-summary-item > span {
  font-weight: 780;
}

.validation-mini-track {
  background: #eee9e6;
  border-radius: 999px;
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
}

.validation-mini-track span {
  background: var(--mint);
  display: block;
  height: 100%;
}

.summary-name {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.validation-tick {
  align-items: center;
  background: var(--mint);
  border-radius: 999px;
  color: #173329;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 900;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.validation-project-progress {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 800;
}

.validation-tracker {
  display: grid;
  gap: 10px;
}

.validation-juicer {
  background: #faf8f7;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.validation-juicer summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 820;
  justify-content: space-between;
  min-height: 58px;
  padding: 12px 14px;
}

.validation-juicer summary > span {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.validation-checklist {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
}

.validation-module {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.validation-module.module-passed {
  background: #e8f4ed;
  border-color: var(--mint);
}

.validation-module-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.attempt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
}

.validation-module textarea {
  min-height: 68px;
}

.danger-button {
  background: var(--burgundy);
}

.danger-outline {
  background: transparent;
  border-color: var(--burgundy);
  color: var(--burgundy);
}

.empty {
  color: var(--ink-soft);
  padding: 22px 10px;
}

@media (max-width: 1050px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    gap: 22px;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) auto;
    grid-template-rows: auto;
    min-height: auto;
    padding: 22px 24px;
    position: static;
  }

  nav {
    align-self: center;
    grid-template-columns: repeat(5, minmax(105px, 1fr));
  }

  .subnav {
    grid-column: 1 / -1;
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    margin-left: 0;
    overflow: auto;
  }

  .sidebar-footer {
    align-content: center;
    border-left: 1px solid rgba(36, 39, 42, 0.16);
    border-top: 0;
    min-width: 130px;
    padding: 0 0 0 18px;
  }

  .split-grid,
  .metric-grid,
  .form-grid,
  .form-grid.compact,
  .session-form,
  .score-workspace,
  .ppr-session-form {
    grid-template-columns: 1fr 1fr;
  }

  .ppr-workspace {
    grid-template-areas:
      "editor"
      "history";
    grid-template-columns: 1fr;
  }

  .ppr-type-picker {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }

  .positioning-workspace {
    grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1.45fr);
  }

  .station-board {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .positioning-details {
    grid-template-columns: 1fr 1fr;
  }

  .note-form,
  .access-form,
  .market-form {
    grid-template-columns: 1fr 1fr;
  }

  .access-directory-item {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 0.7fr);
  }

  .access-directory-item .access-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  body {
    background: #f8f7f6;
  }

  .login-shell,
  .workspace,
  .sidebar {
    padding: 18px;
  }

  .sidebar {
    gap: 18px;
    grid-template-columns: 1fr;
  }

  .sidebar h1 {
    font-size: 1.8rem;
  }

  nav {
    grid-template-columns: 1fr 1fr;
  }

  .nav-button {
    min-height: 44px;
  }

  .subnav {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }

  .sidebar-footer {
    border-left: 0;
    border-top: 1px solid rgba(36, 39, 42, 0.16);
    grid-template-columns: 1fr 1fr auto;
    padding: 14px 0 0;
  }

  .login-row,
  .topbar,
  .split-grid,
  .metric-grid,
  .form-grid,
  .form-grid.compact,
  .session-form,
  .score-workspace,
  .ppr-metrics,
  .ppr-session-form,
  .ppr-workspace,
  .ppr-fields,
  .score-control,
  .notes-metrics,
  .note-form,
  .access-form,
  .market-form {
    grid-template-columns: 1fr;
  }

  .ppr-timer-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .ppr-timer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ppr-go-button {
    min-width: 0;
  }

  .ppr-editor-header,
  .ppr-section-heading {
    align-items: flex-start;
  }

  .ppr-type-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ppr-order-heading,
  .ppr-order-result {
    align-items: flex-start;
    flex-direction: column;
  }

  .ppr-order-result {
    justify-content: flex-start;
  }

  .ppr-cwt-controls {
    grid-template-columns: 1fr;
  }

  .ppr-complete-order {
    white-space: normal;
  }

  .ppr-grade-review {
    grid-template-columns: 1fr;
  }

  .ppr-perfect-button,
  .ppr-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ppr-section-heading {
    flex-direction: column;
  }

  .ppr-assessment-list {
    max-height: 280px;
  }

  .positioning-workspace,
  .positioning-details {
    grid-template-columns: 1fr;
  }

  .station-board {
    grid-template-columns: 1fr;
  }

  .access-item {
    grid-template-columns: 1fr;
  }

  .access-directory-item .access-actions {
    grid-column: auto;
    justify-content: stretch;
  }

  .access-directory-item .access-actions button {
    flex: 1 1 140px;
  }

  .topbar {
    align-items: stretch;
    position: static;
  }

  .topbar-actions {
    justify-content: stretch;
  }

  .topbar-actions > * {
    width: 100%;
  }

  .validation-checklist {
    grid-template-columns: 1fr;
  }

  .attempt-grid {
    grid-template-columns: 1fr;
  }
}

/* Campus Playbook */
.playbook-heading,
.playbook-toolbar,
.playbook-section-title,
.playbook-day-heading,
.playbook-plan-overview > header,
.playbook-day-summary header,
.playbook-block > header,
.playbook-simulation-launch,
.playbook-dialog-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.playbook-heading {
  background: #e7e7e7;
  border-bottom: 1px solid #d1d1d1;
  min-height: 112px;
  padding: 24px 28px;
}

.playbook-heading h2,
.playbook-day-heading h3,
.playbook-plan-overview h3 {
  margin: 2px 0 0;
}

.playbook-heading-actions,
.playbook-toolbar-actions,
.playbook-day-heading > div:last-child,
.playbook-add-activity {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.playbook-save-status {
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 700;
  min-width: 96px;
  text-align: right;
}

.playbook-save-status[data-tone="saved"] {
  color: #39724a;
}

.playbook-save-status[data-tone="warning"] {
  color: #8b6514;
}

.playbook-save-status[data-tone="error"] {
  color: #a22b2b;
}

#publishPlaybookButton.attention {
  background: var(--burgundy);
  box-shadow: 0 0 0 3px rgb(138 60 102 / 16%);
}

.playbook-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-height: 440px;
  text-align: center;
}

.playbook-empty p {
  color: var(--ink-soft);
  max-width: 560px;
}

.playbook-empty-mark {
  align-items: center;
  background: var(--pink);
  border-radius: 50%;
  color: var(--charcoal);
  display: flex;
  font-size: 2rem;
  font-weight: 700;
  height: 76px;
  justify-content: center;
  width: 76px;
}

.playbook-shell {
  display: grid;
  gap: 12px;
}

.playbook-toolbar {
  background: #ffffff;
  border: 1px solid #dadada;
  padding: 10px 14px;
}

.playbook-mode-switch {
  background: #ececec;
  display: flex;
  padding: 3px;
}

.playbook-mode-switch button {
  background: transparent;
  color: var(--charcoal);
  min-width: 82px;
}

.playbook-mode-switch button.active {
  background: var(--charcoal);
  color: #ffffff;
}

.playbook-toolbar select,
.playbook-toolbar button,
.playbook-mode-switch button {
  min-height: 36px;
}

.playbook-conflicts {
  background: #fff1c9;
  border-left: 5px solid #d99f28;
  color: #5a4516;
  padding: 12px 16px;
}

.playbook-conflicts ul {
  margin: 6px 0 0 18px;
}

.playbook-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: 255px minmax(0, 1fr);
}

.playbook-bank,
.playbook-content {
  background: #ffffff;
  border: 1px solid #dadada;
  min-width: 0;
}

.playbook-bank {
  align-self: start;
  position: sticky;
  top: 54px;
}

.playbook-bank-header {
  align-items: center;
  background: #e7e7e7;
  display: flex;
  justify-content: space-between;
  padding: 11px 13px;
}

.playbook-bank-header span,
.playbook-bank-header strong {
  display: block;
}

.playbook-bank-header span {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.playbook-add-day {
  border-bottom: 1px solid #dddddd;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.playbook-add-day label,
.playbook-day-meta label,
.playbook-block-editor label,
.playbook-period-fields label,
.playbook-splits label {
  color: var(--ink-soft);
  display: grid;
  font-size: 0.7rem;
  font-weight: 700;
  gap: 4px;
  text-transform: uppercase;
}

.playbook-day-list {
  display: grid;
  gap: 1px;
}

.playbook-day-button {
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid #e2e2e2;
  color: var(--charcoal);
  display: grid;
  gap: 2px;
  min-height: 70px;
  padding: 11px 13px;
  text-align: left;
}

.playbook-day-button:hover,
.playbook-day-button.active {
  background: var(--light-pink);
}

.playbook-day-button.active {
  border-left: 5px solid var(--burgundy);
}

.playbook-day-button.archived {
  opacity: 0.55;
}

.playbook-day-button span,
.playbook-day-button small {
  color: var(--ink-soft);
  font-size: 0.68rem;
}

.playbook-groups {
  border-top: 8px solid #eeeeee;
}

.playbook-group {
  border-bottom: 1px solid #dddddd;
  border-left: 5px solid var(--group-color);
  padding: 10px;
}

.playbook-group header {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 30px;
}

.playbook-group header button,
.playbook-assignment button {
  background: transparent;
  color: var(--burgundy);
  padding: 2px;
}

.playbook-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0;
}

.playbook-group > div span {
  background: #eeeeee;
  display: inline-flex;
  font-size: 0.68rem;
  gap: 4px;
  padding: 4px 6px;
}

.playbook-content {
  padding: 20px;
}

.playbook-day-editor,
.playbook-plan-overview {
  margin: 0 auto;
  max-width: 1120px;
}

.playbook-day-brief {
  margin: 0 auto;
  max-width: 1120px;
}

.playbook-day-heading {
  border-bottom: 1px solid #dddddd;
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.playbook-day-heading span,
.playbook-plan-overview header span,
.playbook-section-title span,
.playbook-plan-overview > header span {
  color: var(--burgundy);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.playbook-day-meta,
.playbook-block-editor,
.playbook-period-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.playbook-day-overview {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.playbook-day-overview-card {
  background: #f4f4f4;
  border: 1px solid #dddddd;
  padding: 14px;
}

.playbook-day-overview-card span {
  color: var(--burgundy);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.playbook-day-overview-card p {
  color: var(--charcoal);
  margin: 0;
  white-space: pre-wrap;
}

.playbook-day-meta {
  background: #f4f4f4;
  margin-bottom: 18px;
  padding: 14px;
}

.playbook-day-meta label:nth-child(2) {
  grid-column: span 3;
}

.playbook-day-meta .span-all,
.playbook-block-editor .span-all {
  grid-column: 1 / -1;
}

.playbook-block-editor .span-2 {
  grid-column: span 2;
}

.playbook-day-meta textarea,
.playbook-block-editor textarea {
  min-height: 70px;
}

.playbook-timeline {
  display: grid;
  gap: 12px;
}

.playbook-block {
  border: 1px solid #d7d7d7;
  border-left: 7px solid #bdbdbd;
  padding: 0 14px 14px;
}

.playbook-block.simulation-block {
  border-left-color: var(--pink);
}

.playbook-block-readonly {
  padding-bottom: 14px;
}

.playbook-block > header {
  background: #f1f1f1;
  margin: 0 -14px 14px;
  min-height: 66px;
  padding: 10px 14px;
}

.playbook-block > header h4 {
  font-size: 1rem;
  margin: 2px 0 0;
}

.playbook-block > header span {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.playbook-block-time {
  align-items: center;
  display: flex;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 6px;
  min-width: 120px;
}

.playbook-block-time span {
  font-weight: 400;
  text-transform: none;
}

.playbook-reorder {
  display: flex;
  gap: 4px;
}

.playbook-reorder button {
  background: #ffffff;
  color: var(--charcoal);
  min-height: 30px;
  min-width: 30px;
  padding: 4px 8px;
}

.playbook-reorder button.danger,
.text-button.danger {
  color: #a22b2b;
}

.playbook-block-breakdown {
  display: grid;
  gap: 10px;
}

.playbook-meta-pills,
.playbook-sequence-pills,
.playbook-split-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.playbook-meta-pills span,
.playbook-sequence-pills span,
.playbook-split-pills span {
  background: #f4f4f4;
  border: 1px solid #dddddd;
  color: var(--charcoal);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 7px 10px;
}

.playbook-sequence-pills span {
  background: var(--light-pink);
  border-color: #e4c4d1;
}

.playbook-block-detail {
  color: var(--charcoal);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}

.playbook-assignment-section {
  border-top: 1px solid #dddddd;
  margin-top: 14px;
  padding-top: 12px;
}

.playbook-assignment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.playbook-assignment {
  align-items: center;
  background: var(--light-pink);
  display: inline-flex;
  font-size: 0.72rem;
  gap: 5px;
  padding: 5px 7px;
}

.playbook-assignment b {
  color: var(--burgundy);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.playbook-assignment small {
  color: var(--ink-soft);
}

.playbook-unassigned {
  color: #a22b2b;
  font-size: 0.72rem;
}

.playbook-assignment-add {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.playbook-simulation {
  background: var(--light-pink);
  border-top: 1px solid #e5c9d6;
  margin: 16px -14px -14px;
  padding: 14px;
}

.playbook-period-list {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.playbook-period {
  background: #ffffff;
  border: 1px solid #dfd5da;
  padding: 10px;
}

.playbook-period-readonly {
  display: grid;
  gap: 10px;
}

.playbook-period-readonly-header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.playbook-period-readonly-header strong {
  font-size: 0.95rem;
}

.playbook-period-readonly-header span {
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 700;
}

.playbook-period-fields {
  grid-template-columns: minmax(160px, 2fr) repeat(3, minmax(90px, 1fr));
}

.playbook-splits {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  margin: 10px 0 5px;
}

.playbook-splits label {
  background: #f0f0f0;
  padding: 7px;
}

.playbook-splits span {
  color: var(--charcoal);
}

.playbook-simulation-launch {
  border-top: 1px solid #dfc5d1;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
}

.playbook-simulation-launch p {
  color: var(--ink-soft);
  font-size: 0.74rem;
  margin: 0;
}

.playbook-inline-empty {
  color: var(--ink-soft);
  font-size: 0.74rem;
  margin: 0;
}

.playbook-linked-button {
  margin-top: 12px;
}

.playbook-add-activity {
  background: #eeeeee;
  margin-top: 12px;
  padding: 12px;
}

.playbook-add-activity select {
  min-width: 220px;
}

.playbook-archive-row {
  margin-top: 18px;
  text-align: right;
}

.playbook-plan-overview > header {
  border-bottom: 1px solid #dddddd;
  margin-bottom: 18px;
  padding-bottom: 14px;
}

.playbook-week-band {
  margin-bottom: 24px;
}

.playbook-week-band > h4 {
  background: var(--charcoal);
  color: #ffffff;
  margin: 0;
  padding: 10px 12px;
}

.playbook-summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.playbook-day-summary {
  background: #f4f4f4;
  border-left: 5px solid var(--pink);
  cursor: pointer;
  padding: 12px;
}

.playbook-day-summary:hover {
  background: var(--light-pink);
}

.playbook-day-summary h4 {
  margin: 2px 0 0;
}

.playbook-day-summary p {
  color: var(--ink-soft);
  font-size: 0.74rem;
}

.playbook-day-summary > div {
  display: grid;
  gap: 3px;
}

.playbook-day-summary > div span {
  font-size: 0.7rem;
}

.playbook-dialog {
  border: 0;
  max-height: 80vh;
  padding: 0;
  width: min(650px, calc(100vw - 32px));
}

.playbook-dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}

.playbook-dialog-header {
  background: var(--charcoal);
  color: #ffffff;
  padding: 16px;
}

.playbook-dialog-header h3 {
  margin: 3px 0 0;
}

.playbook-history-list {
  max-height: 58vh;
  overflow: auto;
  padding: 12px;
}

.playbook-history-list article {
  align-items: center;
  border-bottom: 1px solid #dddddd;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.playbook-history-list article span {
  color: var(--ink-soft);
  display: block;
  font-size: 0.72rem;
}

/* Focused Playbook builder */
.playbook-add-day-panel,
.playbook-groups,
.playbook-station-presets {
  border-bottom: 1px solid #dddddd;
}

.playbook-add-day-panel > summary,
.playbook-groups > summary,
.playbook-station-presets > summary,
.playbook-day-settings > summary {
  cursor: pointer;
  list-style: none;
}

.playbook-add-day-panel > summary::-webkit-details-marker,
.playbook-groups > summary::-webkit-details-marker,
.playbook-station-presets > summary::-webkit-details-marker,
.playbook-day-settings > summary::-webkit-details-marker {
  display: none;
}

.playbook-add-day-panel > summary {
  align-items: center;
  color: var(--burgundy);
  display: flex;
  font-size: 0.76rem;
  font-weight: 700;
  justify-content: space-between;
  padding: 12px 13px;
  text-transform: uppercase;
}

.playbook-add-day-panel > summary::before {
  content: "+";
  font-size: 1.1rem;
  margin-right: 8px;
}

.playbook-add-day-panel[open] > summary::before {
  content: "−";
}

.playbook-add-day-panel > summary::after,
.playbook-groups > summary::after,
.playbook-station-presets > summary::after,
.playbook-day-settings > summary::after {
  content: "›";
  margin-left: auto;
  transform: rotate(90deg);
  transition: transform 160ms ease;
}

.playbook-add-day-panel[open] > summary::after,
.playbook-groups[open] > summary::after,
.playbook-station-presets[open] > summary::after,
.playbook-day-settings[open] > summary::after {
  transform: rotate(-90deg);
}

.playbook-add-day-panel .playbook-add-day {
  border-bottom: 0;
  border-top: 1px solid #eeeeee;
}

.playbook-groups,
.playbook-station-presets {
  border-top: 8px solid #eeeeee;
}

.playbook-groups > summary,
.playbook-station-presets > summary {
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr auto;
  padding: 12px 13px;
}

.playbook-groups > summary span,
.playbook-station-presets > summary span {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.playbook-groups > summary small,
.playbook-station-presets > summary small {
  color: var(--ink-soft);
  font-size: 0.68rem;
  grid-column: 1;
}

.playbook-groups > summary::after,
.playbook-station-presets > summary::after {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.playbook-group-tools {
  border-top: 1px solid #dddddd;
  padding: 8px 10px;
  text-align: right;
}

.playbook-station-preset {
  border-bottom: 1px solid #dddddd;
  display: grid;
  gap: 8px;
  padding: 11px;
}

.playbook-station-preset header {
  display: flex;
  justify-content: space-between;
}

.playbook-station-preset header small,
.playbook-station-preset label span {
  color: var(--ink-soft);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.playbook-station-preset label {
  display: grid;
  gap: 4px;
}

.playbook-preset-trainers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.playbook-preset-trainers > span {
  align-items: center;
  background: var(--light-pink);
  display: inline-flex;
  font-size: 0.68rem;
  gap: 4px;
  padding: 4px 6px;
}

.playbook-preset-trainers button {
  background: transparent;
  color: var(--burgundy);
  min-height: 20px;
  min-width: 20px;
  padding: 0;
}

.playbook-day-settings {
  background: #f4f4f4;
  border: 1px solid #dddddd;
  margin-bottom: 14px;
}

.playbook-day-settings > summary {
  align-items: center;
  display: grid;
  gap: 3px;
  grid-template-columns: 1fr auto;
  padding: 11px 13px;
}

.playbook-day-settings > summary span {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.playbook-day-settings > summary small {
  color: var(--ink-soft);
  font-size: 0.72rem;
  grid-column: 1;
  max-width: 660px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playbook-day-settings > summary::after {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.playbook-day-settings .playbook-day-meta {
  border-top: 1px solid #dddddd;
  margin: 0;
}

.playbook-planner-grid {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(330px, 0.85fr) minmax(430px, 1.15fr);
}

.playbook-agenda-panel,
.playbook-activity-inspector {
  min-width: 0;
}

.playbook-agenda-panel {
  border: 1px solid #d7d7d7;
}

.playbook-agenda-panel > header {
  align-items: center;
  background: var(--charcoal);
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  min-height: 54px;
  padding: 10px 12px;
}

.playbook-agenda-panel > header span,
.playbook-agenda-panel > header strong {
  display: block;
}

.playbook-build-controls {
  background: #f4f4f4;
  border-bottom: 1px solid #dddddd;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px;
}

.playbook-build-controls label {
  color: var(--ink-soft);
  display: grid;
  font-size: 0.64rem;
  font-weight: 700;
  gap: 3px;
  text-transform: uppercase;
}

.playbook-agenda-panel > header span {
  color: var(--pink);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.playbook-agenda-panel > header strong {
  margin-top: 2px;
}

.playbook-quick-add {
  border-bottom: 1px solid #dddddd;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.playbook-quick-add button {
  background: #eeeeee;
  border: 0;
  border-radius: 0;
  color: var(--charcoal);
  font-size: 0.68rem;
  min-height: 42px;
  padding: 6px 4px;
}

.playbook-quick-add button:hover {
  background: var(--light-pink);
  color: var(--burgundy);
}

.playbook-agenda-list {
  display: grid;
}

.playbook-shift-section > header {
  align-items: center;
  background: #e7e7e7;
  color: var(--charcoal);
  display: flex;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 10px;
}

.playbook-shift-section > header strong {
  font-size: 0.72rem;
  text-transform: uppercase;
}

.playbook-shift-section > header span {
  color: var(--ink-soft);
  font-size: 0.66rem;
}

.playbook-agenda-row {
  align-items: center;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid #e1e1e1;
  border-left: 5px solid transparent;
  border-radius: 0;
  color: var(--charcoal);
  display: grid;
  gap: 9px;
  grid-template-columns: 24px 54px minmax(0, 1fr) 22px;
  min-height: 76px;
  padding: 9px 10px 9px 7px;
  text-align: left;
  width: 100%;
}

.playbook-agenda-row:hover {
  background: #f7f7f7;
}

.playbook-agenda-row.active {
  background: var(--light-pink);
  border-left-color: var(--burgundy);
}

.playbook-agenda-order {
  align-items: center;
  background: #eeeeee;
  border-radius: 50%;
  display: flex;
  font-size: 0.68rem;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.playbook-agenda-time {
  font-size: 0.76rem;
  font-weight: 700;
}

.playbook-agenda-time small,
.playbook-agenda-copy small,
.playbook-agenda-copy strong {
  display: block;
}

.playbook-agenda-time small,
.playbook-agenda-copy small {
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 400;
  margin-top: 2px;
}

.playbook-agenda-copy {
  min-width: 0;
}

.playbook-agenda-copy strong,
.playbook-agenda-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playbook-agenda-copy strong {
  font-size: 0.8rem;
}

.playbook-agenda-state {
  align-items: center;
  border-radius: 50%;
  display: flex;
  font-size: 0.66rem;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.playbook-agenda-state.ready {
  background: #cce8d3;
  color: #27653a;
}

.playbook-agenda-state.warning {
  background: #ffe4ad;
  color: #7a5410;
}

.playbook-agenda-empty,
.playbook-inspector-empty {
  color: var(--ink-soft);
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 34px 18px;
  text-align: center;
}

.playbook-agenda-empty strong,
.playbook-inspector-empty strong {
  color: var(--charcoal);
}

.playbook-agenda-empty p,
.playbook-inspector-empty p {
  font-size: 0.74rem;
  margin: 0;
  max-width: 310px;
}

.playbook-agenda-panel .playbook-add-activity {
  border-top: 1px solid #dddddd;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  padding: 9px;
}

.playbook-agenda-panel .playbook-add-activity select {
  min-width: 0;
}

.playbook-activity-inspector {
  position: sticky;
  top: 56px;
}

.playbook-inspector-card {
  border: 1px solid #d7d7d7;
  padding: 0 14px 14px;
}

.playbook-inspector-card.simulation-block {
  border-left: 6px solid var(--pink);
}

.playbook-inspector-header {
  align-items: center;
  background: #f1f1f1;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0 -14px 14px;
  min-height: 62px;
  padding: 10px 14px;
}

.playbook-inspector-header span {
  color: var(--burgundy);
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.playbook-inspector-header h4 {
  font-size: 1rem;
  margin: 2px 0 0;
}

.playbook-inspector-card .playbook-block-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.playbook-duration-presets {
  align-items: center;
  background: var(--light-pink);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 8px 10px;
}

.playbook-duration-presets > span {
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
}

.playbook-duration-presets > div {
  display: flex;
  gap: 5px;
}

.playbook-duration-presets button {
  min-height: 30px;
  padding: 4px 8px;
}

.playbook-apply-preset {
  margin-top: 10px;
}

.playbook-inspector-card .playbook-simulation {
  margin-bottom: -14px;
}

.playbook-inspector-empty {
  border: 1px dashed #cccccc;
  min-height: 250px;
}

.playbook-inspector-empty > span {
  color: var(--burgundy);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ppr-playbook-plan {
  border-left: 6px solid var(--pink);
}

.protected-data {
  background: #eeeeee;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 7px;
  text-transform: uppercase;
}

.ppr-playbook-periods {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.ppr-playbook-periods article {
  background: #f3f3f3;
  border-left: 4px solid var(--pink);
  padding: 10px;
}

.ppr-playbook-periods article > div {
  display: flex;
  justify-content: space-between;
}

.ppr-playbook-periods span,
.ppr-playbook-periods p {
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.ppr-playbook-periods p {
  margin: 6px 0 0;
  text-transform: capitalize;
}

@media (max-width: 1050px) {
  .playbook-layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .playbook-day-meta,
  .playbook-block-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .playbook-day-overview {
    grid-template-columns: 1fr;
  }

  .playbook-day-meta label:nth-child(2) {
    grid-column: auto;
  }

  .playbook-planner-grid {
    grid-template-columns: 1fr;
  }

  .playbook-activity-inspector {
    position: static;
  }
}

@media (max-width: 760px) {
  .playbook-heading,
  .playbook-toolbar,
  .playbook-day-heading,
  .playbook-simulation-launch {
    align-items: stretch;
    flex-direction: column;
  }

  .playbook-heading-actions,
  .playbook-toolbar-actions {
    justify-content: flex-start;
  }

  .playbook-save-status {
    text-align: left;
  }

  .playbook-layout {
    grid-template-columns: 1fr;
  }

  .playbook-bank {
    position: static;
  }

  .playbook-day-list {
    display: flex;
    overflow-x: auto;
  }

  .playbook-day-button {
    border-bottom: 0;
    border-right: 1px solid #dddddd;
    min-width: 165px;
  }

  .playbook-content {
    padding: 12px;
  }

  .playbook-day-meta,
  .playbook-block-editor,
  .playbook-period-fields,
  .playbook-splits,
  .playbook-summary-grid,
  .playbook-assignment-add,
  .playbook-day-overview {
    grid-template-columns: 1fr;
  }

  .playbook-day-meta .span-all,
  .playbook-block-editor .span-all,
  .playbook-block-editor .span-2 {
    grid-column: auto;
  }

  .playbook-block > header {
    align-items: flex-start;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto;
  }

  .playbook-block-time {
    grid-column: 1 / -1;
  }

  .playbook-period-readonly-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .playbook-quick-add {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .playbook-build-controls {
    grid-template-columns: 1fr;
  }

  .playbook-agenda-panel .playbook-add-activity {
    grid-template-columns: 1fr;
  }

  .playbook-agenda-row {
    grid-template-columns: 22px 48px minmax(0, 1fr) 20px;
  }

  .playbook-inspector-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .playbook-duration-presets {
    align-items: stretch;
    flex-direction: column;
  }

  .playbook-duration-presets > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .playbook-inspector-card .playbook-block-editor {
    grid-template-columns: 1fr;
  }

  .playbook-reorder {
    flex-wrap: wrap;
  }
}

/* WP2 visual system */
@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/fonts/RobotoCondensed-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/fonts/RobotoCondensed-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/fonts/RobotoCondensed-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --pink: #efb6d0;
  --charcoal: #282a2d;
  --comp-pink: #d98fb1;
  --light-pink: #fbf0f5;
  --white: #ffffff;
  --warm-grey: #e6e6e6;
  --mint: #9bd1a7;
  --yellow: #f6dda0;
  --burgundy: #8a3c66;
  --ink-soft: #66686a;
  --line: #d9d9d9;
  --shadow: none;
}

html {
  background: #f2f2f2;
}

body,
button,
input,
select,
textarea {
  font-family: "Roboto Condensed", "Arial Narrow", "Aptos Narrow", Arial, sans-serif;
  letter-spacing: 0;
}

body {
  background: #f2f2f2;
  font-size: 14px;
}

button,
.import-button {
  border-radius: 2px;
  font-weight: 700;
  min-height: 34px;
  padding: 0 12px;
}

input,
select,
textarea {
  border-color: #d2d2d2;
  border-radius: 2px;
  min-height: 34px;
  padding: 7px 9px;
}

label {
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.login-shell {
  align-items: stretch;
  background: #f2f2f2;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  padding: 0;
}

.login-panel {
  align-content: center;
  background: var(--white);
  border-right: 1px solid var(--line);
  display: grid;
  max-width: none;
  padding: 52px;
}

.login-panel h1 {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  line-height: 0.84;
  margin: 0 0 42px;
}

.login-row {
  grid-template-columns: 1fr 0.8fr;
}

.login-row button {
  grid-column: 1 / -1;
}

.app-shell {
  grid-template-columns: 218px minmax(0, 1fr);
}

.sidebar {
  background: var(--charcoal);
  color: #f8f8f8;
  gap: 18px;
  padding: 18px 0 14px;
}

.brand-block {
  gap: 10px;
  padding: 0 16px;
}

.sidebar h1 {
  color: #ffffff;
  font-size: 1.7rem;
  line-height: 1;
}

.sidebar .eyebrow {
  color: var(--pink);
}

.market-switcher {
  margin-top: 4px;
}

.market-switcher span {
  color: #bfc1c3;
}

.market-switcher select {
  background: #393b3f;
  border-color: #505257;
  color: #ffffff;
}

.assigned-market {
  border-color: #47494d;
  color: var(--pink);
  padding-top: 10px;
}

.sidebar nav {
  gap: 0;
}

.nav-button {
  align-items: center;
  border-left: 3px solid transparent;
  color: #f4f4f4;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  min-height: 38px;
  padding: 7px 14px;
}

.nav-button:hover {
  background: #35373b;
}

.nav-button.active {
  background: #46484d;
  border-left-color: var(--pink);
  color: #ffffff;
}

.primary-nav {
  font-size: 0.78rem;
  font-weight: 700;
}

.nav-icon {
  align-items: center;
  border: 1px solid #777a7f;
  color: #d9dade;
  display: inline-flex;
  font-size: 0.64rem;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.nav-button.active .nav-icon {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--charcoal);
}

.nav-divider {
  border-top: 1px solid #44464a;
  margin: 8px 14px;
}

.subnav {
  border-color: #55575b;
  margin: 1px 0 4px 27px;
  padding: 2px 0 2px 10px;
}

.subnav button {
  color: #c1c2c4;
  font-size: 0.69rem;
  min-height: 28px;
  padding: 4px 8px;
}

.subnav button.active {
  color: var(--pink);
}

.sidebar-footer {
  border-color: #494b4f;
  color: #b9bbbd;
  font-size: 0.74rem;
  margin: 0 14px;
  padding-top: 12px;
}

#signedInRole,
.sidebar .ghost-button {
  color: var(--pink);
}

.workspace {
  background: #f2f2f2;
  padding: 0 14px 18px;
}

.utility-bar {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin: 0 -14px 10px;
  min-height: 38px;
  padding: 0 14px;
}

.utility-breadcrumb,
.utility-status {
  align-items: center;
  color: #77797b;
  display: flex;
  font-size: 0.72rem;
  gap: 7px;
}

.utility-breadcrumb strong {
  color: var(--charcoal);
  font-weight: 700;
}

.live-indicator {
  background: #79bd8a;
  border-radius: 50%;
  display: inline-block;
  height: 7px;
  width: 7px;
}

.topbar {
  align-items: center;
  backdrop-filter: none;
  background: #e5e5e5;
  border: 0;
  border-radius: 0;
  margin-bottom: 10px;
  padding: 9px 12px;
  position: static;
}

.topbar h2 {
  font-size: 1.12rem;
}

.project-heading {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 8px;
}

.project-heading .eyebrow {
  align-self: center;
  grid-row: 1 / 3;
  margin: 0;
  writing-mode: vertical-rl;
}

.project-details {
  font-size: 0.72rem;
  margin-top: 2px;
}

.topbar-actions select {
  background: #ffffff;
  min-width: 240px;
}

.active-view {
  gap: 10px;
}

.metric-grid,
.ppr-metrics,
.notes-metrics {
  gap: 5px;
}

.metric {
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  box-shadow: none;
  padding: 10px 12px;
}

.metric span {
  font-size: 0.68rem;
  margin-bottom: 4px;
}

.metric strong {
  font-size: 1.55rem;
}

.panel {
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  box-shadow: none;
  padding: 12px;
}

.panel-header {
  margin-bottom: 9px;
}

.panel h3 {
  font-size: 0.9rem;
}

.form-grid,
.form-grid.compact,
.session-form,
.note-form,
.access-form,
.market-form,
.ppr-session-form {
  gap: 8px;
}

table {
  font-size: 0.78rem;
}

th,
td {
  padding: 7px 8px;
}

tbody tr:nth-child(even) {
  background: #fbf1f6;
}

.session-note,
.access-item,
.project-item,
.score-detail,
.score-group {
  border-radius: 2px;
}

.role-badge,
.session-note-meta span {
  border-radius: 2px;
  padding: 4px 7px;
}

.support-heading {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d7d7d7;
  display: flex;
  justify-content: space-between;
  padding: 12px;
}

.support-heading h2 {
  font-size: 1.2rem;
  margin: 0;
}

.support-layout {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) 220px;
}

.support-summary {
  display: grid;
  gap: 5px;
  grid-template-columns: 1fr 1fr;
}

.support-form {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.support-full-field,
.support-form-footer {
  grid-column: 1 / -1;
}

.support-form-footer {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.support-form-footer .access-status {
  margin: 0;
}

.support-ticket-list {
  display: grid;
  gap: 7px;
}

.support-ticket {
  background: #ffffff;
  border: 1px solid #d7d7d7;
  border-left: 4px solid #9b9da0;
  padding: 11px 12px;
}

.support-ticket.priority-urgent {
  border-left-color: #cf4f4f;
}

.support-ticket.priority-important {
  border-left-color: #d49b34;
}

.support-ticket.status-completed {
  border-left-color: #65a978;
}

.support-ticket header,
.support-ticket footer,
.support-ticket-tags {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.support-ticket header {
  justify-content: space-between;
}

.support-ticket-tags span {
  background: #eeeeee;
  color: #55575a;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 6px;
}

.support-ticket-tags .support-status {
  background: var(--light-pink);
  color: var(--burgundy);
}

.support-ticket h3 {
  font-size: 1rem;
  margin: 10px 0 5px;
}

.support-ticket > p,
.support-ticket-detail p,
.support-owner-response p {
  line-height: 1.45;
  margin: 0;
}

.support-ticket footer {
  border-top: 1px solid #e1e1e1;
  color: var(--ink-soft);
  font-size: 0.72rem;
  margin-top: 10px;
  padding-top: 8px;
}

.support-ticket-detail,
.support-owner-response {
  background: #f6f6f6;
  border-left: 3px solid var(--pink);
  margin-top: 9px;
  padding: 8px 10px;
}

.support-ticket-detail strong,
.support-owner-response strong {
  display: block;
  font-size: 0.72rem;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.support-owner-controls {
  align-items: end;
  background: #f2f2f2;
  display: grid;
  gap: 8px;
  grid-template-columns: 150px minmax(220px, 1fr) auto;
  margin-top: 10px;
  padding: 9px;
}

.support-owner-controls textarea {
  min-height: 60px;
}

.planning-heading,
.planning-heading-actions,
.planning-tabs,
.planning-task-row,
.planning-card-meta,
.planning-header-pills,
.planning-project-cards,
.planning-progress-block,
.planning-inline-card header {
  align-items: center;
  display: flex;
  gap: 12px;
}

.planning-heading,
.planning-task-row,
.planning-inline-card header {
  justify-content: space-between;
}

.planning-heading {
  margin-bottom: 18px;
}

.planning-heading h2,
.planning-empty-state h3,
.planning-empty-inline h3 {
  margin: 0;
}

.planning-heading p:last-child,
.planning-empty-state p,
.planning-empty-inline p,
.planning-alert p,
.planning-inline-card p {
  color: var(--ink-soft);
  margin: 6px 0 0;
}

.planning-heading-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.planning-save-status {
  background: #f3efec;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 750;
  padding: 8px 12px;
}

.planning-save-status[data-tone="saved"] {
  background: #edf7f1;
  color: #246449;
}

.planning-save-status[data-tone="warning"] {
  background: #fff6df;
  color: #8a5f10;
}

.planning-save-status[data-tone="error"] {
  background: #fff0f1;
  color: #a43740;
}

.planning-tabs {
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.planning-tabs button {
  background: #f3efec;
  border: 1px solid var(--line);
  color: var(--charcoal);
  min-height: 40px;
}

.planning-tabs button.active {
  background: var(--charcoal);
  color: var(--white);
}

.planning-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 18px;
}

.planning-summary-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
  padding: 16px;
}

.planning-summary-card span {
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 760;
  text-transform: uppercase;
}

.planning-summary-card strong {
  font-size: 1.55rem;
  line-height: 1;
}

.planning-overview-layout,
.planning-hiring-layout,
.planning-mobilisation-layout {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}

.planning-overview-layout,
.planning-mobilisation-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-project-cards,
.planning-document-summary,
.planning-candidate-pipeline,
.planning-next-task-list,
.planning-timeline-list {
  display: grid;
  gap: 12px;
}

.planning-project-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}

.planning-project-cards article {
  background: #faf7f5;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 14px;
}

.planning-project-cards span {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 760;
  text-transform: uppercase;
}

.planning-progress-block {
  background: #faf7f5;
  border: 1px solid var(--line);
  border-radius: 8px;
  justify-content: space-between;
  margin-top: 14px;
  padding: 14px;
}

.planning-progress-block > div:first-child {
  display: grid;
  gap: 5px;
}

.planning-progress-block span {
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 760;
  text-transform: uppercase;
}

.planning-progress-bar {
  background: #efe7e3;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  width: min(280px, 42%);
}

.planning-progress-bar span {
  background: var(--comp-pink);
  display: block;
  height: 100%;
}

.planning-progress-bar.compact {
  height: 8px;
  width: 100%;
}

.planning-alert-list,
.planning-history-list,
.planning-candidate-list,
.planning-task-list {
  display: grid;
  gap: 10px;
}

.planning-alert,
.planning-inline-card,
.planning-task,
.planning-candidate-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid transparent;
  border-radius: 8px;
  padding: 14px;
}

.planning-alert.tone-urgent,
.planning-task.tone-red,
.planning-candidate-card.tone-red {
  background: #fff3f4;
  border-left-color: #be546b;
}

.planning-alert.tone-warning,
.planning-task.tone-amber,
.planning-candidate-card.tone-amber {
  background: #fff8e7;
  border-left-color: #d1a54f;
}

.planning-task.tone-green,
.planning-candidate-card.tone-green {
  background: #edf7f1;
  border-left-color: #5fa780;
}

.planning-candidate-card {
  cursor: pointer;
  display: grid;
  gap: 8px;
  text-align: left;
  width: 100%;
}

.planning-candidate-card.active {
  box-shadow: 0 0 0 2px rgba(138, 60, 102, 0.16);
}

.planning-candidate-card header,
.planning-inline-card header {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.planning-candidate-card p {
  color: var(--ink-soft);
  margin: 0;
}

.planning-card-meta {
  color: var(--ink-soft);
  font-size: 0.76rem;
  justify-content: space-between;
}

.planning-hiring-layout {
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
}

.planning-hiring-side,
.planning-hiring-detail {
  display: grid;
  gap: 16px;
}

.planning-form-grid,
.planning-filter-grid,
.planning-task-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-task-grid.four-column {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.planning-form-grid .span-all,
.planning-task-grid .span-2 {
  grid-column: 1 / -1;
}

.planning-task-row {
  gap: 10px;
}

.planning-task-toggle {
  align-items: center;
  color: var(--charcoal);
  display: flex;
  font-size: 0.92rem;
  gap: 10px;
}

.planning-task-toggle input {
  min-height: auto;
  width: auto;
}

.planning-task-order {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 760;
}

.planning-document-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

.planning-profile-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.planning-history-list article {
  background: #faf7f5;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
}

.planning-history-entry {
  align-items: center;
  gap: 12px !important;
  grid-template-columns: minmax(0, 1fr) auto;
}

.planning-history-list span {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.planning-chip {
  background: #f3efec;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--charcoal);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 760;
  padding: 7px 11px;
}

.planning-chip.tone-green {
  background: #edf7f1;
  color: #246449;
}

.planning-chip.tone-amber {
  background: #fff6df;
  color: #8a5f10;
}

.planning-chip.tone-red {
  background: #fff0f1;
  color: #a43740;
}

.planning-chip.tone-neutral {
  background: #f3efec;
  color: var(--ink-soft);
}

.planning-empty-state,
.planning-empty-inline {
  align-items: center;
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: 28px;
}

.planning-empty-mark {
  align-items: center;
  background: var(--light-pink);
  border-radius: 999px;
  display: grid;
  font-size: 1.1rem;
  font-weight: 850;
  height: 54px;
  place-items: center;
  width: 54px;
}

.planning-timeline-track {
  background: #fbf9f8;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 18px;
  min-height: 112px;
  overflow-x: auto;
  padding: 24px 28px 18px;
}

.planning-timeline-stops {
  display: grid;
  position: relative;
}

.planning-timeline-stops::before {
  background: var(--warm-grey);
  content: "";
  height: 3px;
  left: 60px;
  position: absolute;
  right: 60px;
  top: 17px;
}

.planning-timeline-stop {
  align-items: center;
  color: var(--charcoal);
  display: grid;
  gap: 10px;
  justify-items: center;
  min-width: 120px;
  position: relative;
  z-index: 1;
}

.planning-team-date-list {
  display: grid;
  gap: 8px;
}

.planning-team-date-row {
  align-items: end;
  background: #fbf9f8;
  border: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) minmax(150px, 220px);
  padding: 12px;
}

.planning-team-date-row > div {
  display: grid;
  gap: 2px;
}

.planning-team-date-row span {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.planning-timeline-dot {
  align-items: center;
  background: var(--burgundy);
  border: 4px solid var(--white);
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--warm-grey);
  display: flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.planning-timeline-dot b {
  color: var(--white);
  font-size: 0.72rem;
  line-height: 1;
}

.planning-timeline-stop time {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.planning-timeline-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planning-event-list {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 18px;
}

.planning-event-list article {
  align-items: center;
  background: #fbf9f8;
  border-left: 4px solid var(--comp-pink);
  display: grid;
  gap: 10px;
  grid-template-columns: 64px 1fr;
  padding: 10px 12px;
}

.planning-event-list time {
  color: var(--burgundy);
  font-weight: 800;
}

.planning-event-list article div {
  display: grid;
  gap: 2px;
}

.planning-event-list article span {
  color: var(--ink-soft);
  font-size: 0.74rem;
}

.ppr-timer-panel {
  border-radius: 2px;
}

@media (max-width: 1000px) {
  .app-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .planning-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .planning-overview-layout,
  .planning-mobilisation-layout,
  .planning-hiring-layout {
    grid-template-columns: 1fr;
  }

  .planning-team-date-row {
    grid-template-columns: 1fr 1fr;
  }

  .planning-team-date-row > div {
    grid-column: 1 / -1;
  }

  .planning-project-cards,
  .planning-document-summary,
  .planning-timeline-list,
  .planning-task-grid.four-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-progress-block {
    align-items: stretch;
    display: grid;
    gap: 10px;
  }

  .planning-progress-bar {
    width: 100%;
  }

  .support-layout {
    grid-template-columns: 1fr;
  }

  .support-summary {
    grid-template-columns: repeat(4, minmax(90px, 1fr));
  }

  .support-owner-controls {
    grid-template-columns: 1fr 1fr;
  }

  .support-owner-controls button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .market-choice-header {
    padding: 12px 16px;
  }

  .market-choice-header .ghost-button {
    min-height: 36px;
    padding: 8px 10px;
  }

  .market-choice-content {
    padding: 38px 16px;
  }

  .market-choice-content h1 {
    font-size: 2.1rem;
  }

  .market-choice-grid {
    grid-template-columns: 1fr;
  }

  .market-choice-card {
    min-height: 132px;
    padding: 18px;
  }

  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-panel {
    border-right: 0;
    padding: 28px 20px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
    padding: 14px 0;
    position: static;
  }

  .sidebar nav {
    grid-template-columns: 1fr 1fr;
  }

  .nav-divider {
    display: none;
  }

  .workspace {
    padding: 0 8px 12px;
  }

  .utility-bar {
    margin: 0 -8px 8px;
  }

  .support-heading,
  .support-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .support-form,
  .support-owner-controls {
    grid-template-columns: 1fr;
  }

  .planning-heading,
  .planning-heading-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .planning-summary-grid,
  .planning-project-cards,
  .planning-document-summary,
  .planning-timeline-list,
  .planning-form-grid,
  .planning-filter-grid,
  .planning-task-grid,
  .planning-task-grid.four-column {
    grid-template-columns: 1fr;
  }

  .planning-timeline-track {
    min-height: 108px;
    padding: 22px 16px 16px;
  }

  .planning-team-date-row {
    grid-template-columns: 1fr;
  }

  .planning-team-date-row > div {
    grid-column: auto;
  }

  .support-summary {
    grid-template-columns: 1fr 1fr;
  }

  .support-owner-controls button {
    grid-column: auto;
  }
}