/* Official Text Monkey fonts, served locally under the existing self-only CSP. */
@font-face { font-family:"Bagel Fat One"; font-style:normal; font-weight:400; font-display:swap; src:url("/brand/fonts/bagel-fat-one.ttf") format("truetype"); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("/brand/fonts/dm-sans-400.ttf") format("truetype"); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("/brand/fonts/dm-sans-600.ttf") format("truetype"); }
:root {
  --ink: #3B2314;
  --muted: #6B4E3D;
  --paper: #FFF8E6;
  --line: #E4D5BA;
  --blue: #3B2314;
  --sky: #FFF0B4;
  --lilac: #F8E3CF;
  --purple: #6B3E26;
  --green: #356B1E;
  --amber: #76511A;
  --white: #fff;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  outline-offset: 4px;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #6B3E26;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
a {
  color: var(--blue);
}
button {
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  padding: 10px 17px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button:hover {
  background: #FFF0B4;
}
.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}
.primary:hover {
  background: #6B3E26;
}
.quiet {
  background: transparent;
  border-color: transparent;
}
.small {
  padding: 6px 10px;
  font-size: 12px;
}
.danger {
  color: #A0352B;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 34px;
  letter-spacing: -1.3px;
  font-weight: 600;
  line-height: 1.18;
}
h2 {
  font-size: 19px;
  letter-spacing: -0.4px;
  font-weight: 600;
}
h3 {
  font-size: 15px;
}
p {
  line-height: 1.65;
}
svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.muted {
  color: var(--muted);
  font-size: 13px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 27px;
  font-weight: 650;
  letter-spacing: -1px;
}
.brand svg {
  width: 33px;
  height: 33px;
}
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: white;
}
.login-story {
  background: #FFD23F;
  padding: 55px 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 700px;
}
.login-story h1 {
  font-size: 53px;
  max-width: 460px;
  letter-spacing: -2px;
}
.login-story p {
  max-width: 415px;
  margin-top: 20px;
  color: #3B2314;
}
.login-art {
  width: 100%;
  height: 210px;
  margin: 35px 0;
}
.login-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
}
.login-inner {
  max-width: 360px;
  width: 100%;
}
.login-inner h2 {
  font-size: 27px;
  margin-bottom: 10px;
}
.login-inner form {
  margin-top: 30px;
}
.login-inner button {
  width: 100%;
  padding: 13px;
}
.divider {
  margin: 25px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}
.divider:before,
.divider:after {
  content: "";
  height: 1px;
  background: var(--line);
  flex: 1;
}
.login-foot {
  margin-top: 20px;
  font-size: 12px;
  color: var(--muted);
}
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 17px 0 7px;
}
input,
select,
textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #AA9276;
  border-radius: 6px;
  background: white;
  color: var(--ink);
}
input[type="checkbox"] {
  width: 17px;
  height: 17px;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-weight: 400;
  line-height: 1.5;
}
.shell {
  display: grid;
  grid-template-columns: 222px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  background: #3B2314;
  color: #FFF8E6;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar .brand {
  color: white;
  padding: 0 9px;
}
.sidebar .org {
  font-size: 12px;
  margin: 12px 9px 36px;
  color: #F2C49B;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.nav button {
  justify-content: flex-start;
  border: 0;
  color: #FFF8E6;
  background: transparent;
  padding: 12px;
  font-weight: 500;
  gap: 12px;
}
.nav button.active {
  background: #FFD23F;
  color: var(--ink);
}
.nav button:hover {
  background: #6B3E26;
}
.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid #6B3E26;
  padding-top: 20px;
}
.profile {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
}
.avatar {
  background: #F2C49B;
  color: var(--ink);
  width: 37px;
  height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 650;
  flex-shrink: 0;
}
.sidebar small {
  display: block;
  color: #F2C49B;
  font-size: 11px;
  margin-top: 3px;
}
.sidebar-bottom button {
  color: #FFF8E6;
  margin-top: 13px;
}
.workspace {
  min-width: 0;
}
.topbar {
  height: 74px;
  background: white;
  border-bottom: 1px solid var(--line);
  padding: 0 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.topbar-left {
  display: flex;
  gap: 12px;
  align-items: center;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.dot {
  width: 7px;
  height: 7px;
  background: #356B1E;
  border-radius: 50%;
  display: inline-block;
}
.demo-banner {
  background: #FFF0B4;
  color: #6B3E26;
  font-size: 12px;
  padding: 10px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.demo-banner button {
  font-size: 11px;
  padding: 3px 9px;
  background: transparent;
}
.content {
  padding: 34px 38px 50px;
  max-width: 1480px;
  margin: auto;
}
.page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 29px;
}
.page-title p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 14px;
}
.pill {
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 20px;
  font-weight: 550;
  white-space: nowrap;
}
.pill.blue {
  background: #FFF0B4;
  color: #3B2314;
}
.pill.green {
  background: #E7F6DC;
  color: var(--green);
}
.pill.amber {
  background: #FFF0B4;
  color: var(--amber);
}
.pill.purple {
  background: var(--lilac);
  color: var(--purple);
}
.pill.gray {
  background: #F1EBDD;
  color: #6B4E3D;
}
.overview {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  gap: 25px;
}
.welcome {
  background: #FFD23F;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  padding: 28px 30px;
  gap: 25px;
}
.welcome h2 {
  font-size: 26px;
  max-width: 350px;
  line-height: 1.3;
}
.welcome p {
  font-size: 13px;
  color: #3B2314;
  max-width: 360px;
  margin-top: 9px;
}
.welcome button {
  margin-top: 20px;
  background: white;
  border-color: white;
}
.date-card {
  background: #f8fbfd;
  border: 1px solid #fff;
  border-radius: 11px;
  width: 96px;
  padding: 17px;
  text-align: center;
  box-shadow: 7px 7px 0 #c8dbe9;
  flex-shrink: 0;
}
.date-card span {
  display: block;
  font-size: 13px;
  color: #627e91;
}
.date-card strong {
  display: block;
  font-size: 45px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -2px;
}
.health {
  background: white;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 25px;
}
.health h3 {
  margin-bottom: 22px;
}
.health-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 9px 0;
}
.health-line strong {
  font-size: 17px;
  font-weight: 600;
}
.meter {
  height: 6px;
  background: #F8E3CF;
  border-radius: 5px;
  overflow: hidden;
  margin: 14px 0;
}
.meter-fill {
  height: 100%;
  background: #356B1E;
}
.section {
  margin-top: 31px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap: 12px;
}
.section-heading h2 {
  display: flex;
  align-items: center;
  gap: 9px;
}
.section-heading .count {
  font-size: 12px;
  font-weight: 500;
  background: var(--lilac);
  color: var(--purple);
  padding: 3px 8px;
  border-radius: 20px;
}
.columns {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  gap: 25px;
}
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.approval {
  display: flex;
  padding: 22px;
  gap: 13px;
  border-bottom: 1px solid var(--line);
}
.approval:last-child {
  border-bottom: 0;
}
.approval-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--lilac);
  color: var(--purple);
  flex-shrink: 0;
}
.approval.care .approval-icon {
  background: #FFF0B4;
  color: var(--amber);
}
.approval-body {
  min-width: 0;
  flex: 1;
}
.approval-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.approval p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
.approval .quote {
  padding: 9px 12px;
  background: #FFF8E6;
  border-left: 2px solid #AA9276;
  font-size: 12px;
  margin-top: 11px;
  line-height: 1.5;
}
.approval-actions {
  display: flex;
  gap: 7px;
  margin-top: 15px;
  flex-wrap: wrap;
}
.insight {
  padding: 21px 22px;
  border-bottom: 1px solid var(--line);
}
.insight:last-child {
  border: 0;
}
.insight h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}
.insight p {
  margin-top: 9px;
  font-size: 13px;
  color: var(--muted);
}
.insight button {
  margin-top: 10px;
}
.table-wrap {
  position: relative;
  max-width: 100%;
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
th {
  font-weight: 500;
  color: var(--muted);
  background: #FFF8E6;
  font-size: 12px;
  padding: 13px 20px;
  white-space: nowrap;
}
td {
  padding: 17px 20px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
td strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
td small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}
.person {
  display: flex;
  align-items: center;
  gap: 11px;
}
.person .avatar {
  background: #F8E3CF;
}
.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.toolbar input {
  max-width: 330px;
}
.toolbar select {
  max-width: 190px;
}
.empty {
  padding: 35px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.empty p {
  margin-top: 8px;
}
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 27px;
}
.composer {
  padding: 27px;
}
.composer textarea {
  height: 140px;
  resize: vertical;
}
.sample-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}
.sample-buttons button {
  font-weight: 500;
  font-size: 11px;
  padding: 6px 10px;
}
.thread {
  padding: 23px;
  max-height: 600px;
  overflow: auto;
}
.message {
  margin: 0 0 17px;
  max-width: 90%;
  font-size: 13px;
}
.message.outbound {
  margin-left: auto;
}
.bubble {
  padding: 13px 15px;
  background: #FFF0B4;
  border-radius: 12px 12px 12px 2px;
  line-height: 1.6;
}
.outbound .bubble {
  background: var(--lilac);
  border-radius: 12px 12px 2px 12px;
}
.message small {
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-top: 6px;
}
.trace {
  background: #FFF0B4;
  border-radius: 7px;
  padding: 16px;
  font-size: 12px;
  line-height: 1.7;
  margin-top: 20px;
}
.trace strong {
  display: block;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.settings-panel {
  padding: 26px;
}
.settings-panel p {
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 20px;
}
.setting-row {
  border-top: 1px solid var(--line);
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  gap: 12px;
}
.notice {
  background: #FFF0B4;
  padding: 15px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.65;
  color: #6B3E26;
}
.error {
  color: #A0352B;
  font-size: 13px;
  margin: 10px 0;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 29px;
  max-width: 480px;
  width: calc(100% - 32px);
  color: var(--ink);
  box-shadow: 0 20px 70px #3B231433;
}
dialog::backdrop {
  background: #14141466;
}
.modal-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 23px;
}
.footer-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 28px;
}
#toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  background: var(--ink);
  color: white;
  border-radius: 8px;
  padding: 13px 18px;
  font-size: 13px;
  box-shadow: 0 8px 30px #3B231422;
  display: none;
  z-index: 5;
}
#toast.show {
  display: block;
}
.hidden {
  display: none !important;
}
.mobile-brand {
  display: none;
}
@media (min-width: 1450px) {
  .content {
    padding-top: 45px;
  }
  .welcome {
    padding: 34px;
  }
  .welcome h2 {
    font-size: 29px;
  }
}
@media (max-width: 1050px) {
  .shell {
    grid-template-columns: 185px 1fr;
  }
  .sidebar {
    padding: 27px 12px;
  }
  .content {
    padding: 25px;
  }
  .topbar,
  .demo-banner {
    padding-left: 25px;
    padding-right: 25px;
  }
  .overview,
  .columns {
    grid-template-columns: 1fr;
  }

  .columns > .section {
    margin-top: 8px;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .login-story {
    padding: 45px 9%;
  }
  .login-story h1 {
    font-size: 43px;
  }
}
@media (max-width: 700px) {
  .shell {
    display: block;
  }
  .sidebar {
    height: auto;
    position: static;
    padding: 16px;
    display: block;
  }
  .sidebar .brand {
    font-size: 23px;
  }
  .sidebar .org,
  .sidebar-bottom {
    display: none;
  }
  .nav {
    margin-top: 16px;
    flex-direction: row;
    overflow: auto;
    gap: 3px;
  }
  .nav button {
    padding: 9px;
    font-size: 11px;
    gap: 5px;
    white-space: nowrap;
  }
  .nav svg {
    width: 15px;
    height: 15px;
  }
  .topbar {
    height: 57px;
    padding: 0 18px;
  }
  .topbar-right {
    gap: 8px;
  }
  .topbar-right > .muted {
    display: none;
  }
  .content {
    padding: 24px 17px;
  }
  .demo-banner {
    padding: 10px 18px;
    font-size: 11px;
    align-items: flex-start;
  }
  .page-title {
    align-items: flex-start;
    gap: 10px;
  }
  h1 {
    font-size: 28px;
  }
  .page-title > button {
    font-size: 11px;
    padding: 9px;
  }
  .page-title p {
    font-size: 12px;
  }
  .welcome {
    padding: 23px;
    gap: 17px;
  }
  .welcome h2 {
    font-size: 22px;
  }
  .date-card {
    width: 73px;
    padding: 12px;
  }
  .date-card strong {
    font-size: 37px;
  }
  .date-card span {
    font-size: 11px;
  }
  .approval {
    padding: 18px 14px;
  }
  .approval-top {
    display: block;
  }
  .approval-top > .pill {
    margin-top: 8px;
  }
  .toolbar {
    flex-wrap: wrap;
  }
  .toolbar input,
  .toolbar select {
    max-width: none;
  }
  .login {
    display: block;
  }
  .login-story {
    min-height: 0;
    padding: 27px;
  }
  .login-story h1 {
    font-size: 34px;
    margin-top: 35px;
    max-width: 350px;
  }
  .login-story p,
  .login-art,
  .login-story > .muted {
    display: none;
  }
  .login-form {
    padding: 35px 27px;
  }
  .login-inner {
    max-width: 450px;
  }
  .footer-note {
    line-height: 1.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

progress.meter {
  width: 100%;
  border: 0;
  appearance: none;
}
progress::-webkit-progress-bar {
  background: #F8E3CF;
  border-radius: 5px;
}
progress::-webkit-progress-value {
  background: #356B1E;
  border-radius: 5px;
}

@media (max-width: 700px) {
  .nav {
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .page-title > button {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Guided coordinator setup; shared dashboard colors and responsive layout. */
.setup-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:25px; }
.setup-steps { padding:26px; align-self:start; }
.eyebrow { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:12px; }
.setup-steps ol { list-style:none; padding:0; margin:26px 0; }
.setup-steps li { margin:10px 0; }
.setup-steps button { width:100%; justify-content:flex-start; border:0; padding:12px 8px; font-weight:500; }
.setup-steps button[aria-current] { background:var(--sky); color:var(--blue); }
.setup-steps button span,.check-number { display:inline-grid; place-items:center; background:var(--sky); color:var(--blue); border-radius:50%; width:27px; height:27px; flex-shrink:0; font-size:12px; }
.setup-card { padding:30px; }
.setup-card > p,.setup-card form > .muted { margin-top:12px; }
.setup-card h2 { font-size:24px; }
.field-hint { display:block; font-size:12px; line-height:1.6; color:var(--muted); margin-top:7px; }
.required { color:var(--purple); }
.setup-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:26px; }
.setup-scope { margin-top:24px; }
.setup-callout { display:flex; flex-wrap:wrap; align-items:center; gap:15px; padding:22px 25px; margin-bottom:25px; border:1px solid #E4D5BA; border-radius:10px; background:#FFF0B4; }
.setup-callout > div { flex:1; min-width:220px; }
.setup-callout p { font-size:13px; color:var(--muted); margin-top:5px; }
.readiness { margin-top:20px; }
.readiness article { display:flex; gap:16px; padding:22px 0; border-top:1px solid var(--line); }
.readiness p { color:var(--muted); font-size:13px; margin-top:7px; }
.readiness button { margin-top:12px; }
.import-source-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:25px; }
.import-source-grid p { font-size:13px; color:var(--muted); margin-top:9px; }
.import-source-grid button { margin-top:12px; margin-right:5px; }
.file-choice { background:var(--sky); border:1px dashed #AA9276; padding:17px; border-radius:8px; }
.file-choice input { margin-top:9px; padding:7px; background:white; }
.mapping-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px 16px; }
.import-counts { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:18px; }
.import-counts span { padding:16px; background:var(--paper); border-radius:8px; color:var(--muted); font-size:13px; }
.import-counts strong { display:block; font-size:28px; color:var(--ink); margin-bottom:4px; }
.preview-table { max-height:420px; margin-top:20px; border:1px solid var(--line); border-radius:8px; }
.preview-table th { position:sticky; top:0; }
@media(max-width:1050px) { .setup-layout {grid-template-columns:220px minmax(0,1fr);} .mapping-grid {grid-template-columns:1fr 1fr;} }
@media(max-width:700px) { .setup-layout,.import-source-grid {grid-template-columns:1fr;} .setup-steps {padding:20px;} .setup-steps ol {display:flex; flex-wrap:wrap; margin:15px 0;} .setup-steps li {flex:1 1 40%; margin:2px;} .setup-steps button {font-size:11px;} .setup-card {padding:22px 18px;} .setup-card .form-row {grid-template-columns:1fr;gap:0;} .setup-card h2 {font-size:21px;} .mapping-grid {grid-template-columns:1fr 1fr;} .setup-actions button {flex:1;} }

/* Brand display is reserved for page titles; care, tables and controls stay in DM Sans. */
:root { --banana:#FFD23F; --cocoa:#3B2314; --monkey-brown:#6B3E26; --tan:#F2C49B; --lime:#9BE564; --shade:#141414; --cream:#FFF8E6; }
h1,.welcome h2,.login-inner h2 { font-family:"Bagel Fat One",sans-serif; font-weight:400; letter-spacing:.1px; line-height:1.18; }
.page-title h1 { text-transform:uppercase; font-size:34px; max-width:24ch; }
.brand { display:block; line-height:0; }
.brand-logo { width:100%; max-width:260px; height:auto; display:block; }
.sidebar .brand { padding:0; }
.sidebar .brand-logo { width:100%; }
.sidebar .org { margin-top:20px; line-height:1.5; }
.login { background:var(--cream); }
.login-story { position:relative; overflow:hidden; padding:40px 8%; min-height:100vh; }
.login-story h1 { font-size:clamp(36px,3.8vw,56px); letter-spacing:0; max-width:none; margin-top:38px; position:relative; z-index:1; }
.login-story p { color:var(--cocoa); max-width:37ch; margin-top:24px; position:relative; z-index:1; }
.login-art { width:135px; height:auto; display:block; margin:20px 0 10px auto; transform:rotate(-3deg); }
.login-story > .muted { color:var(--cocoa); margin-top:20px; }
.login-inner { max-width:390px; }
.login-inner h2 { font-size:30px; }
.login-form { padding:48px; }
.auth-links { display:flex; flex-wrap:wrap; margin-top:10px; gap:5px; }
.auth-links button { width:auto; }
.welcome { border-radius:18px; border:1px solid var(--cocoa); align-items:center; }
.welcome h2 { font-size:30px; max-width:16ch; }
.welcome p { max-width:48ch; }
.welcome-monkey { width:115px; height:auto; flex-shrink:0; transform:rotate(-3deg); }
.primary { background:var(--cocoa); border-color:var(--cocoa); color:var(--cream); }
.welcome button { background:var(--cocoa); border-color:var(--cocoa); color:var(--cream); }
.welcome button:hover { background:var(--monkey-brown); }
.panel,.health { border-radius:12px; }
.health { border-top:5px solid var(--lime); }
.status { line-height:1.4; }
.topbar { gap:16px; }
.topbar-left,.topbar-right { min-width:0; }
.setting-row > strong { max-width:60%; text-align:right; font-weight:600; }
.notice { color:var(--cocoa); border-left:3px solid var(--monkey-brown); }
pre,.quote { overflow-wrap:anywhere; white-space:pre-wrap; }
input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid var(--monkey-brown); }
.sidebar button:focus-visible { outline-color:var(--banana); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:8px; left:8px; z-index:20; transform:translateY(-150%); padding:12px 20px; background:var(--cocoa); color:var(--cream); border-radius:8px; }
.skip-link:focus { transform:translateY(0); }
.mobile-exit { display:none; }
@media(max-width:1050px) { .welcome h2 {font-size:28px;} .login-story h1 {font-size:45px;} }
@media(max-width:700px) {
  .sidebar .brand-logo {width:210px;}
  .nav button {min-height:44px;font-size:12px;}
  .sidebar-bottom {display:none;}
  .mobile-exit {display:inline-flex; padding:8px; white-space:nowrap; min-height:44px;}
  .topbar {height:auto; min-height:64px; padding:10px 17px; flex-wrap:wrap; gap:7px;}
  .topbar-right {margin-left:auto; gap:12px;}
  .page-title {flex-wrap:wrap;}
  .page-title h1 {font-size:29px;}
  .login-story {padding:25px 27px;min-height:0;}
  .login-story h1 {font-size:36px;max-width:none;margin-top:28px;}
  .login-story h1 br {display:none;}
  .login-story p {display:block;margin-top:16px;font-size:14px;}
  .login-story .brand-logo {max-width:240px;}
  .login-form {padding:32px 27px 45px;}
  .welcome {padding:22px;gap:14px;}
  .welcome h2 {font-size:26px;}
  .welcome-monkey {width:80px;}
  .health {padding:20px;}
  .setting-row {flex-wrap:wrap;}
  .setting-row .pill {white-space:normal;}
  .mapping-grid {grid-template-columns:1fr;}
  .setup-callout > div {min-width:0; flex-basis:100%;}
  .section-heading {flex-wrap:wrap;}
  .toolbar,.form-row {min-width:0;}
  #toast {left:17px;right:17px;bottom:17px;}
}
@media(max-width:380px) { .welcome-monkey {width:56px;} .welcome h2 {font-size:24px;} }

.nav button.active:hover {background:var(--banana);color:var(--cocoa);}

.account-church-fields { border:0; padding:0; margin:24px 0 0; min-width:0; }
.account-church-fields legend { font-size:20px; font-weight:600; margin-bottom:12px; }
.mobile-settings { display:none; }
@media(max-width:700px) {
  .mobile-settings { display:inline-flex; min-height:44px; padding:8px; }
  .account-church-fields .form-row { grid-template-columns:1fr; gap:0; }
  .nav button { flex:1; justify-content:center; }
}