/*
PROJECT ENGINEERING CONTRACT
Portfolio, guidance and questionnaire components are mobile-first. Keep each
component cohesive and avoid duplicate selectors that conceal ownership.
*/

/*
 * Property Check stylesheet segment: 03-portfolio-and-questionnaire.css
 * Property overview, navigation, set-card questionnaire, profile card, and later product refinements.
 *
 * Cascade contract: files are loaded in numeric order. Modify the owning file
 * instead of appending unrelated overrides to the final stylesheet.
 */

/* ============================================================
   PROPERTY PORTFOLIO HOME
   Added as a separate shell layer so the optimized case workflow,
   especially Legal Ownership Verification, remains untouched.
   ============================================================ */

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

.rail-primary-nav {
  margin-bottom: 10px;
}

.rail-home-link {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.rail-home-link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rail-home-link:hover,
.rail-home-link.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.rail-section-label {
  margin: 3px 3px 7px;
  color: #aebdb3;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.purchase-item .p-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.purchase-item .p-type-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: #d8e1d9;
}

.purchase-item .p-type-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.purchase-item .p-name {
  flex: 1 1 auto;
}

.p-meta .p-type-label {
  flex: 0 0 auto;
  color: #b9c6bc;
  font-size: 10px;
}

.home-main {
  padding-top: 0;
}

.home-view {
  width: 100%;
  padding-top: 24px;
}

.home-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 22px;
}

.home-eyebrow,
.dialog-kicker {
  margin: 0 0 6px;
  color: var(--copper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.home-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 10vw, 58px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.025em;
}

/* Preserve the calm eyebrow-sized breathing room without repeating the brand. */
.home-eyebrow-space {
  display: block;
  height: 13px;
  margin-bottom: 6px;
}

.home-hero p:not(.home-eyebrow) {
  max-width: 620px;
  margin: 12px 0 0;
  color: var(--pine-light);
  font-size: 15px;
  line-height: 1.55;
}

.home-add-property {
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 17px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper-raised);
  font-weight: 700;
  cursor: pointer;
}

.home-add-property:hover {
  background: var(--pine);
}

.home-add-property > span {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

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

.portfolio-stat {
  min-height: 105px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  border: 1px solid var(--stone-line);
  border-radius: 14px;
  background: var(--paper-raised);
}

.portfolio-stat-primary {
  border-color: #b9c9be;
  background: #e5ebe5;
}

.portfolio-stat span {
  color: var(--stone);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.portfolio-stat strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 600;
  line-height: 1;
}

.property-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 16px;
}

.property-search {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--stone-line);
  border-radius: 10px;
  background: var(--paper-raised);
}

.property-search:focus-within {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(193, 121, 63, .12);
}

.property-search svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--stone);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.property-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
}

.property-search input::placeholder {
  color: var(--stone);
}

.property-filter-wrap {
  display: block;
}

.property-filter {
  width: 100%;
  min-height: 48px;
  padding: 0 38px 0 13px;
  border: 1px solid var(--stone-line);
  border-radius: 10px;
  background: var(--paper-raised);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}

.property-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 19px;
}

.property-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--stone-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(103, 114, 106, .12), transparent 34%),
    var(--paper-raised);
  box-shadow: 0 7px 18px rgba(22, 33, 28, .10);
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.property-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 190px;
  height: 190px;
  top: -102px;
  right: -76px;
  border: 1px solid rgba(103, 114, 106, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(103, 114, 106, .06), 0 0 0 60px rgba(103, 114, 106, .035);
  pointer-events: none;
}

.property-card > * {
  position: relative;
  z-index: 1;
}

.property-card:hover {
  transform: translateY(-2px);
  border-color: #aebbb2;
  box-shadow: 0 14px 34px rgba(22, 33, 28, .08);
}

.property-card-open {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 17px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.property-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.property-visual {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--pine);
  background: #e6ece6;
}

.property-visual-house {
  color: #79502f;
  background: #f1e7dc;
}

.property-visual-land {
  color: #526a42;
  background: #e7eddf;
}

.property-visual-developer {
  color: #4c5968;
  background: #e4e8eb;
}

.property-visual svg {
  width: 45px;
  height: 45px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.property-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--stone-line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--stone);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}

.property-status.is-active {
  border-color: #e2b781;
  background: #fbf1e3;
  color: #8b572b;
}

.property-status.is-complete {
  border-color: #adc4b2;
  background: #e7f0e8;
  color: var(--pine);
}

.property-card-copy {
  margin: 18px 0 20px;
}

.property-type-name {
  color: var(--copper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.property-card h2 {
  margin: 6px 0 7px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.property-created {
  color: var(--stone);
  font-size: 12px;
}

.property-card-progress {
  margin-top: auto;
}

.property-progress-line {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #d8ded8;
  box-sizing: border-box;
}

.property-progress-line span {
  display: block;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--pine);
}

.property-progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.property-progress-meta strong {
  font-family: var(--font-mono);
  font-size: 14px;
}

.property-progress-meta span {
  color: var(--stone);
  font-size: 11px;
}

.property-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid var(--stone-line);
  color: var(--stone);
  font-size: 11px;
}

.property-card-footer strong {
  color: var(--pine);
  font-size: 12px;
  white-space: nowrap;
}

.property-no-results {
  margin: 30px 0;
  padding: 28px;
  border: 1px dashed var(--stone-line);
  border-radius: 14px;
  color: var(--stone);
  text-align: center;
}

.home-empty {
  display: grid;
  justify-items: center;
  max-width: 600px;
  margin: 50px auto 0;
  padding: 34px 20px;
  border: 1px dashed var(--stone-line);
  border-radius: 20px;
  text-align: center;
}

.home-empty-visual {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #e6ece6;
  color: var(--pine);
}

.home-empty-visual svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-empty h2 {
  margin: 20px 0 8px;
  font-family: var(--font-display);
  font-size: 28px;
}

.home-empty p {
  max-width: 430px;
  margin: 0 0 20px;
  color: var(--stone);
  line-height: 1.55;
}

/* New property dialog */
.property-dialog {
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100svh - 24px);
  padding: 0;
  border: 1px solid var(--stone-line);
  border-radius: 20px;
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(22, 33, 28, .28);
  overflow: auto;
}

.property-dialog::backdrop {
  background: rgba(16, 27, 22, .62);
  backdrop-filter: blur(3px);
}

.property-form {
  padding: 20px;
}

.property-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.property-dialog-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
}

.dialog-close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--stone-line);
  border-radius: 50%;
  background: transparent;
  color: var(--stone);
  cursor: pointer;
}

.dialog-close:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.property-type-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.property-type-picker legend,
.property-name-field > span {
  grid-column: 1 / -1;
  display: block;
  margin-bottom: 8px;
  color: var(--stone);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.property-type-option {
  position: relative;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--stone-line);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
}

.property-type-option:hover {
  border-color: var(--copper);
}

.property-type-option:has(input:checked) {
  border-color: var(--pine);
  background: #e7ede7;
  box-shadow: inset 0 0 0 1px var(--pine);
}

.property-type-option input {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  accent-color: var(--pine);
}

.property-type-icon {
  color: var(--pine);
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
}

.property-type-option strong {
  padding-right: 18px;
  font-size: 13px;
}

.property-name-field {
  display: block;
}

.property-name-field input {
  width: 100%;
  min-height: 52px;
  padding: 11px 13px;
  border: 1px solid var(--stone-line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 16px;
}

.property-name-field input:focus {
  border-color: var(--copper);
}

.property-form-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 22px;
}

.property-form-actions button {
  min-height: 50px;
}

.btn-dialog-secondary {
  border: 1px solid var(--stone-line);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--pine);
  font-weight: 600;
  cursor: pointer;
}

/* Case navigation added around, not inside, the existing workflow. */
.case-purchase-header {
  align-items: flex-start;
}

.back-home-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  background: var(--paper-raised);
  color: var(--pine);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.back-home-btn:hover {
  border-color: var(--pine);
}

.case-property-type {
  display: block;
  margin: 0;
  color: var(--copper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.case-heading-top {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px 4px 12px;
}

.case-header-access-slot {
  min-width: 0;
  margin-left: auto;
}

@media (min-width: 560px) {
  .home-hero {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .home-add-property {
    width: auto;
    flex: 0 0 auto;
  }

  .property-tools {
    grid-template-columns: minmax(220px, 1fr) 210px;
  }

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

  .property-form-actions {
    grid-template-columns: auto 1fr;
    justify-content: end;
  }

  .property-form-actions .btn-primary {
    justify-self: end;
    min-width: 190px;
  }

  .btn-dialog-secondary {
    min-width: 110px;
  }
}

@media (min-width: 761px) {
  .home-view {
    padding-top: 12px;
  }

  .portfolio-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .property-form {
    padding: 28px;
  }

  .case-purchase-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  .back-home-btn {
    margin: 12px 0 0;
  }
}

@media (min-width: 1120px) {
  .main.home-main {
    max-width: 1480px;
  }

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

@media (max-width: 420px) {
  .portfolio-stat {
    min-height: 96px;
    padding: 13px;
  }

  .portfolio-stat strong {
    font-size: 28px;
  }

  .property-type-picker {
    grid-template-columns: 1fr;
  }

  .property-type-option {
    min-height: 76px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .property-type-icon {
    width: 38px;
  }
}

/* ============================================================
   PROPERTY OVERVIEW NAVIGATION + SAFE OVERVIEW DELETION
   ============================================================ */

.rail-brand-link {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.rail-brand-link:hover,
.rail-brand-link:focus-visible {
  background: rgba(255, 255, 255, .07);
}

.rail-brand-link .rail-head-text {
  display: grid;
  align-content: center;
  gap: 4px;
}

.rail-brand-link .rail-mark {
  width: 46px;
  height: 46px;
}

.rail-brand-name {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .2px;
}

.rail-brand-link .tagline {
  display: block;
  line-height: 1.35;
}

.rail-home-link {
  justify-content: center;
  gap: 0;
  text-align: center;
}

.property-card {
  display: flex;
  flex-direction: column;
}

.property-card-open {
  height: auto;
  flex: 1 1 auto;
}

.property-card-delete {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--stone-line);
  background: rgba(168, 69, 47, .035);
  color: var(--rust);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.property-card-delete:hover {
  background: var(--rust-tint);
}

.property-card-delete svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delete-property-dialog {
  width: min(540px, calc(100vw - 24px));
}

.delete-property-form {
  padding: 20px;
}

.delete-dialog-kicker {
  color: var(--rust);
}

.delete-property-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid #e8b2a6;
  border-radius: 12px;
  background: var(--rust-tint);
}

.delete-property-warning svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--rust);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delete-property-warning p {
  margin: 0;
  color: #653025;
  font-size: 13.5px;
  line-height: 1.55;
}

.delete-property-target {
  margin: 16px 0 0;
  color: var(--stone);
  font-size: 13px;
  line-height: 1.5;
}

.delete-property-target strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.btn-delete-confirm {
  min-height: 50px;
  border: 1px solid var(--rust);
  border-radius: var(--radius-s);
  background: var(--rust);
  color: var(--paper-raised);
  font-weight: 700;
  cursor: pointer;
}

.btn-delete-confirm:hover {
  background: #8f3625;
}

.btn-delete-confirm:disabled {
  cursor: wait;
  opacity: .65;
}

.case-purchase-header {
  display: flex;
}

/* The rail collapses below 961px, so its compact brand treatment must use
   that same breakpoint rather than the narrower phone-content breakpoint. */
@media (max-width: 960px) {
  .rail-brand-link {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  .rail-brand-link .rail-mark {
    width: 61px;
    height: 61px;
  }

  .rail-brand-name {
    font-size: 23px;
  }

  .rail-brand-link .tagline {
    display: block;
    color: #c7d3c9;
    font-size: 12px;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .delete-property-form {
    padding: 18px;
  }

  .delete-property-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .delete-property-actions .btn-delete-confirm,
  .delete-property-actions .btn-dialog-secondary {
    width: 100%;
  }
}

@media (min-width: 761px) {
  .case-purchase-header {
    display: flex;
  }

  .delete-property-form {
    padding: 28px;
  }

  .delete-property-actions {
    grid-template-columns: auto minmax(190px, 1fr);
  }
}


/* ============================================================
SET CARD WORKFLOW + ALL-SECTIONS CASE VIEW
Final overrides intentionally live at the end of the stylesheet.
============================================================ */

/* A quiet border makes the overview label read as an actual button. */
.rail-home-link {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .025);
}

.rail-home-link:hover,
.rail-home-link.active {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .09);
}

.case-progress-overview {
  grid-template-columns: auto minmax(120px, 1fr) auto auto;
  grid-template-areas: "label bar small setcard";
  gap: 12px;
  padding: 12px 16px;
}

.case-progress-overview > span { grid-area: label; }
.case-progress-overview > div { grid-area: bar; }
.case-progress-overview > small { grid-area: small; }

.btn-set-card {
  grid-area: setcard;
  position: relative;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid #a8602e;
  border-radius: 999px;
  background: var(--copper);
  color: #25150a;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(193, 121, 63, .42);
  animation: setCardPulse 2.2s ease-out infinite;
}

.btn-set-card:hover {
  background: var(--copper-light);
  transform: translateY(-1px);
}

.btn-set-card small {
  min-width: 34px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.3);
  color: inherit;
  font-family: var(--font-mono);
  font-size: 10px;
}

.set-card-button-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f4a3c;
  box-shadow: 0 0 0 4px rgba(47,74,60,.13);
}

@keyframes setCardPulse {
  0%, 55% { box-shadow: 0 0 0 0 rgba(193, 121, 63, .42); }
  100% { box-shadow: 0 0 0 13px rgba(193, 121, 63, 0); }
}

#checklistWorkspace > .core-legal-hero {
  margin-top: 24px;
  margin-bottom: 42px;
}

.core-legal-hero {
  position: relative;
  display: block;
}

.core-legal-hero .stage-hero-main {
  margin: 0 0 14px;
}

.core-legal-hero .copy-legal-request {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #f2f5f2;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.core-legal-hero .copy-legal-request:hover {
  background: rgba(255,255,255,.15);
}

.all-sections-view {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.all-sections-view .section-card {
  margin: 0;
  overflow: visible;
}

.all-sections-view .legal-main-section {
  border: 2px solid rgba(47, 74, 60, .42);
  box-shadow: 0 18px 44px rgba(28, 48, 39, .09);
}

.all-sections-view .legal-main-section .section-header {
  background: #e7ede7;
}

.company-foundation-section {
  border-color: rgba(193, 121, 63, .55) !important;
  background: #fbf2e8 !important;
}

.company-foundation-section .section-header {
  background: #f5dfc8 !important;
}

.company-foundation-section .section-bar > span {
  background: var(--copper);
}

/* Set card modal */
body.set-card-open {
  overflow: hidden;
}

.set-card-overlay {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: rgba(12, 22, 17, .7);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .18s ease;
}

.set-card-overlay.open { opacity: 1; }

.set-card-panel {
  position: relative;
  width: 100%;
  max-width: 1080px;
  min-height: 100dvh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(24px);
  transition: transform .2s ease;
  outline: none;
}

.set-card-overlay.open .set-card-panel { transform: translateY(0); }

.set-card-shell {
  min-height: 100%;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(48px + env(safe-area-inset-bottom));
}

.set-card-topbar {
  display: grid;
  grid-template-columns: 44px 1fr 48px;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.set-card-close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--stone-line);
  border-radius: 50%;
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
}

.set-card-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--copper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.set-card-topbar h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 7vw, 38px);
  line-height: 1.05;
}

.set-card-property-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--pine);
  color: var(--paper);
}

.set-card-property-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  .set-card-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 12px 10px;
    align-items: center;
  }

  .set-card-close {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .set-card-topbar > div {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .set-card-property-icon {
    grid-column: 2;
    grid-row: 1;
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .set-card-property-icon svg {
    width: 21px;
    height: 21px;
  }

  .set-card-topbar h2 {
    max-width: 100%;
    font-size: clamp(28px, 9vw, 38px);
  }
}

.set-card-summary {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid #254234;
  border-radius: 20px;
  background: var(--pine);
  color: var(--paper);
  box-shadow: 0 16px 38px rgba(23, 42, 33, .18);
}

.set-card-score {
  width: 78px;
  height: 78px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.07);
}

.set-card-score strong {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1;
}

.set-card-score span {
  margin-top: 4px;
  color: #bdcec3;
  font-size: 9px;
  text-transform: uppercase;
}

.set-card-summary-copy > span {
  color: var(--copper-light);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.set-card-summary-copy p {
  margin: 5px 0 0;
  color: #d9e1da;
  font-size: 13px;
  line-height: 1.5;
}

.set-card-start {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 13px;
  align-items: center;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid #a8602e;
  border-radius: 18px;
  background: var(--copper);
  color: #27160b;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(193, 121, 63, .2);
}

.set-card-start:hover { background: var(--copper-light); }
.set-card-start-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.34);
}
.set-card-start strong { display: block; font-size: 16px; }
.set-card-start small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; opacity: .78; }

.set-card-company-alert {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid #d49759;
  border-radius: 14px;
  background: #fff4e8;
}
.set-card-company-alert > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--copper);
  font-weight: 800;
}
.set-card-company-alert strong { display: block; font-size: 13px; }
.set-card-company-alert p { margin: 3px 0 0; color: #70543c; font-size: 12px; line-height: 1.45; }

.set-card-groups {
  display: grid;
  gap: 16px;
}

.set-card-group {
  overflow: hidden;
  border: 1px solid var(--stone-line);
  border-radius: 18px;
  background: var(--paper-raised);
}

.set-card-group > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--stone-line);
  background: #e7eae4;
}

.set-card-group > header span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--pine);
  color: var(--paper);
  font-weight: 700;
}

.set-card-group h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
}

.set-card-fields {
  display: grid;
}

.set-card-field {
  position: relative;
  width: 100%;
  min-height: 68px;
  display: grid;
  gap: 4px;
  padding: 13px 46px 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--stone-line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.set-card-field:last-child { border-bottom: 0; }
.set-card-field:hover { background: rgba(193, 121, 63, .07); }
.set-card-field-label { color: var(--stone); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.set-card-field strong { overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.set-card-field.is-empty strong { color: #95a099; font-weight: 500; }
.set-card-field.is-na strong { color: var(--stone); font-style: italic; font-weight: 500; }
.set-card-edit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--copper); font-size: 18px; }

/* Duolingo-style one-question flow */
.set-card-game {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 100% 0%, rgba(193,121,63,.13), transparent 36%),
    var(--paper);
}

.set-card-game-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.set-card-game-stop {
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--pine);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.set-card-game-progress {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #d5dbd4;
}
.set-card-game-progress i { display: block; height: 100%; border-radius: inherit; background: var(--copper); transition: width .25s ease; }
.set-card-game-head > span { font-family: var(--font-mono); color: var(--stone); font-size: 11px; }

.set-card-question-card {
  width: min(720px, 100%);
  align-self: center;
  justify-self: center;
  padding: 28px 0;
}

.set-card-question-group {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e4e9e3;
  color: var(--pine);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.set-card-question-card h2 {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(31px, 9vw, 52px);
  line-height: 1.04;
}

.set-card-question-help {
  max-width: 560px;
  margin: 0 0 24px;
  color: var(--stone);
  font-size: 13px;
  line-height: 1.5;
}

.set-card-options {
  display: grid;
  gap: 10px;
}

.set-card-option {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 2px solid var(--stone-line);
  border-radius: 14px;
  background: var(--paper-raised);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 #c3cbc3;
}
.set-card-option:hover { border-color: var(--copper-light); }
.set-card-option.is-selected { border-color: var(--copper); background: #fff1df; box-shadow: 0 3px 0 #a8602e; }
.set-card-option-dot { width: 20px; height: 20px; flex: 0 0 auto; border: 2px solid var(--stone); border-radius: 50%; background: transparent; }
.set-card-option.is-selected .set-card-option-dot { border: 6px solid var(--copper); background: #fff; }

.set-card-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 0 16px;
  border: 2px solid var(--stone-line);
  border-radius: 14px;
  background: var(--paper-raised);
  box-shadow: 0 3px 0 #c3cbc3;
}
.set-card-input-wrap:focus-within { border-color: var(--copper); box-shadow: 0 3px 0 #a8602e; }
.set-card-input-wrap > span { color: var(--pine); font-weight: 700; }
.set-card-answer-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 17px;
}
textarea.set-card-answer-input {
  min-height: 150px;
  padding: 16px;
  border: 2px solid var(--stone-line);
  border-radius: 14px;
  background: var(--paper-raised);
  resize: vertical;
  box-shadow: 0 3px 0 #c3cbc3;
}
textarea.set-card-answer-input:focus { border-color: var(--copper); box-shadow: 0 3px 0 #a8602e; }

.set-card-game-actions {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--stone-line);
}

.set-card-secondary-action,
.set-card-continue,
.set-card-finish-button,
.set-card-resume-skipped {
  min-height: 48px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}
.set-card-secondary-action { padding: 10px 13px; border: 1px solid var(--stone-line); background: var(--paper-raised); color: var(--pine); }
.set-card-continue { justify-self: stretch; border: 1px solid #a8602e; background: var(--copper); color: #25150a; box-shadow: 0 3px 0 #8e4e25; }
.set-card-continue:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }

.set-card-finish {
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 32px 20px;
}
.set-card-finish .set-card-game-stop { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 10px; }
.set-card-finish-burst {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--copper);
  color: #2a180c;
  font-size: 54px;
  box-shadow: 0 0 0 14px rgba(193,121,63,.14), 0 0 0 28px rgba(193,121,63,.06);
}
.set-card-finish h2 { max-width: 620px; margin: 8px 0 10px; font-family: var(--font-display); font-size: clamp(34px, 9vw, 58px); line-height: 1; }
.set-card-finish p { max-width: 560px; margin: 0 0 22px; color: var(--stone); line-height: 1.55; }
.set-card-finish-button { min-width: 210px; padding: 10px 18px; border: 1px solid #a8602e; background: var(--copper); color: #25150a; }
.set-card-resume-skipped { margin-top: 8px; padding: 10px 18px; border: 1px solid var(--pine); background: transparent; color: var(--pine); }

.set-card-confetti {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 10;
  pointer-events: none;
}
.set-card-confetti i {
  position: absolute;
  width: 9px;
  height: 15px;
  border-radius: 2px;
  background: var(--copper);
  animation: setCardConfetti .8s cubic-bezier(.16,.7,.3,1) var(--d) forwards;
}
.set-card-confetti i:nth-child(3n) { background: var(--pine); }
.set-card-confetti i:nth-child(3n+1) { background: var(--copper-light); }
@keyframes setCardConfetti {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); }
}

@media (min-width: 760px) {
  .set-card-overlay { align-items: center; padding: 28px; }
  .set-card-panel { max-height: calc(100dvh - 56px); min-height: 0; border-radius: 26px; box-shadow: 0 34px 90px rgba(0,0,0,.34); }
  .set-card-shell { padding: 28px 30px 50px; }
  .set-card-fields { grid-template-columns: 1fr 1fr; }
  .set-card-field { border-right: 1px solid var(--stone-line); }
  .set-card-field:nth-child(2n) { border-right: 0; }
  .set-card-game { min-height: min(760px, calc(100dvh - 56px)); padding: 22px 28px; }
}

@media (max-width: 760px) {
  .case-progress-overview {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label setcard"
      "bar bar"
      "small small";
    gap: 9px 10px;
  }
  .btn-set-card { min-height: 40px; padding: 8px 12px; }
  .btn-set-card small { display: none; }
  #checklistWorkspace > .core-legal-hero { margin-top: 20px; margin-bottom: 32px; }
  .all-sections-view { gap: 22px; }
  .set-card-game-actions { grid-template-columns: 1fr 1fr; }
  .set-card-continue { grid-column: 1 / -1; grid-row: 1; }
  .set-card-secondary-action { grid-row: 2; }
}

@media (max-width: 420px) {
  .set-card-summary { grid-template-columns: 68px 1fr; padding: 14px; }
  .set-card-score { width: 62px; height: 62px; }
  .set-card-score strong { font-size: 22px; }
  .set-card-topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 8px; }
  .set-card-property-icon { width: 36px; height: 36px; }
  .set-card-start { grid-template-columns: 36px 1fr auto; padding: 12px; }
  .set-card-question-card { padding: 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-set-card { animation: none; }
  .set-card-confetti { display: none; }
}


/* ============================================================
   FLAT CHECKLIST SECTIONS
   Keep the original item-card design while showing every section in one view.
   Section headings are labels, never dropdown controls.
   ============================================================ */

.all-sections-view.single-stage {
  gap: clamp(36px, 5vw, 56px);
}

.all-sections-view.single-stage .section-card,
.all-sections-view.single-stage .legal-main-section,
.all-sections-view.single-stage .company-foundation-section {
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.all-sections-view.single-stage .section-header,
.all-sections-view.single-stage .legal-main-section .section-header,
.all-sections-view.single-stage .company-foundation-section .section-header {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 0 2px 16px;
  cursor: default;
  user-select: text;
  border: 0;
  background: transparent !important;
}

.all-sections-view.single-stage .section-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.all-sections-view.single-stage .section-title-row {
  align-items: center;
}

.all-sections-view.single-stage .section-title-row h2 {
  font-size: clamp(23px, 3vw, 29px);
  line-height: 1.12;
}

.all-sections-view.single-stage .section-intro {
  max-width: 760px;
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.55;
}

.all-sections-view.single-stage .section-progress-wrap {
  flex: 0 0 min(230px, 28vw);
  width: min(230px, 28vw);
  margin: 0 0 2px;
}

.all-sections-view.single-stage .section-body {
  display: grid !important;
  gap: 14px;
  padding: 0;
}

/* Urgency is explained inside the information panel. It does not change the
   collapsed card's border, surface or hierarchy. */
.all-sections-view.single-stage .event-card.high-stakes.status-not_started,
.all-sections-view.single-stage .event-card.guided-workflow.high-stakes.status-not_started {
  border-left-color: var(--stone-line) !important;
  background: #fbfcf9 !important;
}

.all-sections-view.single-stage .event-card.guided-workflow.status-done {
  border-left-width: 6px;
  border-left-color: var(--pine);
  background: #e7f2e9;
}

.all-sections-view.single-stage .event-detail > .event-why,
.all-sections-view.single-stage .event-detail > .event-why.muted {
  border-color: var(--stone-line);
  background: #f7f8f4;
  color: var(--pine-light);
}

.all-sections-view.single-stage .risk-alert {
  display: none;
}

@media (max-width: 760px) {
  .all-sections-view.single-stage {
    gap: 36px;
  }

  .all-sections-view.single-stage .section-header,
  .all-sections-view.single-stage .legal-main-section .section-header,
  .all-sections-view.single-stage .company-foundation-section .section-header {
    display: block;
    padding: 0 0 14px;
  }

  .all-sections-view.single-stage .section-title-row {
    align-items: flex-start;
  }

  .all-sections-view.single-stage .section-title-row h2 {
    font-size: 24px;
  }

  .all-sections-view.single-stage .section-intro {
    margin-top: 7px;
    font-size: 14px;
  }

  .all-sections-view.single-stage .section-progress-wrap {
    width: 100%;
    margin-top: 12px;
  }
}

@media (max-width: 420px) {
  .all-sections-view.single-stage {
    gap: 32px;
  }

  .all-sections-view.single-stage .section-title-row {
    gap: 9px;
  }

  .all-sections-view.single-stage .section-title-row h2 {
    font-size: 22px;
  }
}

/* ============================================================
   UX REFINEMENT: CONSISTENT NAV, CONNECTED PROGRESS, LOCAL GUIDE
   These final rules intentionally replace the earlier copper CTAs.
   ============================================================ */

:root {
  --violet: #625fd6;
  --violet-deep: #4d49bd;
  --violet-soft: #eeedff;
  --aqua: #8ee3cf;
}

/* Sidebar actions now share one quiet interaction pattern. */
.rail-home-link,
.btn-new {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  background: transparent;
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.rail-home-link:hover,
.rail-home-link.active,
.btn-new:hover {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .09);
  color: var(--white);
  transform: translateY(-1px);
}

.btn-new:active,
.rail-home-link:active {
  transform: translateY(0);
}

.btn-new {
  margin-bottom: 20px;
}

/* Symmetric side columns keep every label centered independently of its icon. */
.rail-action-button {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) 19px;
  column-gap: 10px;
}

.rail-action-button > span {
  grid-column: 2;
  justify-self: center;
}

.rail-action-button .rail-action-icon {
  grid-column: 1;
  justify-self: center;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The overall bar now runs directly into the Set Card dropdown control. */
.case-progress-overview.compact-progress {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.case-progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  height: auto !important;
  overflow: visible !important;
  padding: 0 4px;
  border-radius: 0 !important;
  background: transparent !important;
}

.case-progress-meta > span {
  font-size: 12px;
  font-weight: 700;
}

.case-progress-meta > small {
  color: var(--stone);
  font: 500 10px var(--font-mono);
}

.progress-set-card-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto;
  align-items: center;
  height: auto !important;
  overflow: visible !important;
  min-height: 46px;
  border-radius: 0 !important;
  background: transparent !important;
}

.case-progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px 0 0 999px;
  background: #d4dad5;
}

.case-progress-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pine-light);
  transition: width .25s ease;
}

.btn-set-card {
  position: relative;
  min-height: 46px;
  margin-left: -1px;
  padding: 9px 13px;
  border: 1px solid var(--pine-light);
  border-radius: 12px;
  background: var(--paper-raised);
  color: var(--pine);
  box-shadow: 0 5px 14px rgba(28, 48, 39, .08);
  animation: none;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.btn-set-card:hover {
  background: #e7eee9;
  color: var(--pine);
  box-shadow: 0 7px 18px rgba(28, 48, 39, .13);
}

.btn-set-card small {
  background: #dfe8e1;
  color: var(--pine);
}

.set-card-button-dot {
  background: var(--violet);
  box-shadow: 0 0 0 4px rgba(98, 95, 214, .13);
}

.set-card-chevron {
  margin-left: 1px;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-2px);
}

/* One engaging set-card banner replaces the old green summary + copper CTA. */
.set-card-summary {
  display: none;
}

.set-card-start.set-card-profile-cta {
  grid-template-columns: 54px minmax(0, 1fr) minmax(92px, 150px) auto;
  gap: 16px;
  min-height: 106px;
  margin-bottom: 22px;
  padding: 17px 18px;
  border: 1px solid var(--violet-deep);
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.17), transparent 25%),
    linear-gradient(135deg, var(--violet), #706ce2);
  color: var(--white);
  box-shadow: 0 14px 30px rgba(77, 73, 189, .22);
}

.set-card-start.set-card-profile-cta:hover {
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.19), transparent 25%),
    linear-gradient(135deg, #6b67df, #7773e8);
  transform: translateY(-1px);
}

.set-card-robot {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(255,255,255,.16);
  color: var(--white);
}

.set-card-robot svg,
.guidance-orb svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.set-card-cta-copy {
  min-width: 0;
}

.set-card-cta-kicker {
  display: block;
  margin-bottom: 4px;
  color: #dcdafe;
  font: 700 9px var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.set-card-start .set-card-cta-copy strong {
  font-size: 17px;
}

.set-card-start .set-card-cta-copy small {
  margin-top: 5px;
  color: #eeedff;
  opacity: .9;
}

.set-card-cta-progress {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  text-align: right;
}

.set-card-cta-progress > strong {
  font: 700 22px/1 var(--font-display);
}

.set-card-cta-progress > i {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}

.set-card-cta-progress > i > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--aqua);
}

.set-card-cta-progress > small {
  margin: 0;
  color: #dcdbff;
  font: 600 8px var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.set-card-cta-arrow {
  font-size: 20px;
}

/* Case Updates: authored, event-driven guidance with manual browsing controls. */
#checklistWorkspace > .guidance-hero {
  margin: 24px 0 42px;
}

.guidance-hero {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 34px clamp(32px, 5vw, 76px) 32px clamp(119px, 8.1vw, 139px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(142,227,207,.14), transparent 30%),
    linear-gradient(145deg, #294a3a, #233f32);
  color: var(--white);
  box-shadow: 0 18px 48px rgba(22, 43, 33, .17);
}

.guidance-hero::after {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  right: -120px;
  top: -130px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255,255,255,.025), 0 0 0 76px rgba(255,255,255,.018);
}

.guidance-orb {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: calc((clamp(119px, 8.1vw, 139px) - 101px) / 2);
  width: 101px;
  height: 101px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(142,227,207,.13);
  color: var(--aqua);
  box-shadow: inset 0 0 0 1px rgba(142,227,207,.22);
}

.guidance-copy {
  position: relative;
  z-index: 1;
  max-width: 1120px;
}

.guidance-eyebrow {
  display: block;
  margin: 2px 0 15px;
  color: #ffd18a;
  font: 600 10px var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.guidance-copy h2 {
  max-width: 1040px;
  margin: 0;
  color: #f1f4ed;
  font: 500 clamp(22px, 2.1vw, 28px)/1.18 var(--font-display);
}

.guidance-message {
  max-width: 1040px;
  max-height: min(38vh, 360px);
  min-height: 3.3em;
  margin: 10px 0 0;
  padding-right: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(142,227,207,.58) rgba(255,255,255,.08);
  scrollbar-width: thin;
  color: #d7e5db;
  font-size: 17px;
  line-height: 1.62;
  white-space: pre-line;
}

.guidance-message::-webkit-scrollbar {
  width: 8px;
}

.guidance-message::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.guidance-message::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(142,227,207,.58);
}

.guidance-controls {
  max-width: 1040px;
  margin-top: 18px;
}

.guidance-action {
  border: 1px solid transparent;
  color: #17372b;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.guidance-action {
  min-height: 42px;
  padding: 9px 16px;
  border-color: transparent;
  border-radius: 12px;
  background: var(--aqua);
  font: 700 12px/1.2 var(--font-sans);
}

.guidance-action:hover {
  background: #a4ead9;
}

.guidance-action:active {
  transform: translateY(1px);
}

.guidance-action:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}


@media (max-width: 760px) {
  .case-progress-meta {
    align-items: flex-start;
  }

  .case-progress-meta > small {
    max-width: 48%;
    text-align: right;
  }

  .btn-set-card {
    min-height: 44px;
    padding: 8px 11px;
  }

  .btn-set-card small {
    display: inline-block;
  }

  .set-card-start.set-card-profile-cta {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 15px;
  }

  .set-card-robot {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .set-card-robot svg {
    width: 32px;
    height: 32px;
  }

  .set-card-cta-progress {
    grid-column: 2 / -1;
    grid-row: 2;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    text-align: left;
  }

  .set-card-cta-progress > strong {
    font-size: 17px;
  }

  .set-card-cta-arrow {
    grid-column: 3;
    grid-row: 1;
  }

  #checklistWorkspace > .guidance-hero {
    margin: 20px 0 32px;
  }

  .guidance-hero {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px 14px;
    padding: 18px 16px;
    border-radius: 19px;
  }

  .guidance-orb {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 68px;
    height: 68px;
    border-radius: 16px;
  }

  .guidance-orb svg {
    width: 31px;
    height: 31px;
  }

  .guidance-copy {
    display: contents;
  }

  .guidance-eyebrow {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }

  .guidance-copy h2 {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 4px;
    font-size: 22px;
  }

  .guidance-message {
    grid-column: 1 / -1;
    grid-row: 3;
    max-height: min(42vh, 320px);
    padding-right: 9px;
    font-size: 16px;
    line-height: 1.6;
  }

  .guidance-controls {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    margin-top: 15px;
  }

  .guidance-action {
    width: 100%;
  }

}

@media (max-width: 420px) {
  .case-progress-meta > small {
    display: none;
  }

  .btn-set-card {
    gap: 6px;
  }

  .btn-set-card .set-card-button-dot {
    display: none;
  }

  .set-card-start.set-card-profile-cta {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .set-card-robot {
    width: 42px;
    height: 42px;
  }

  .guidance-hero {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 16px 14px;
  }

  .guidance-orb {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }

  .guidance-copy h2 {
    font-size: 21px;
  }
}

/* ============================================================
   FINAL MOBILE-FIRST POLISH: PROGRESS CAPSULE + ROBOT ART POOL
   ============================================================ */

.case-progress-overview.compact-progress {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto auto;
  grid-template-areas: "label track status setcard";
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  padding: 10px 12px 10px 18px;
  border: 1px solid var(--stone-line);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 24px rgba(28,48,39,.06);
}

.case-progress-label {
  grid-area: label;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.case-progress-overview > .case-progress-track {
  grid-area: track;
  width: 100%;
  height: 8px !important;
  min-height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #d7ded9;
}

.case-progress-overview > .case-progress-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pine-light);
}

.case-progress-status {
  grid-area: status;
  white-space: nowrap;
  color: var(--stone);
  font: 500 10px var(--font-mono);
}

.case-progress-overview .btn-set-card {
  grid-area: setcard;
  min-height: 44px;
  margin: 0;
  padding: 8px 13px;
  border: 1px solid var(--pine-light);
  border-radius: 999px;
  background: var(--paper-raised);
  color: var(--pine);
  box-shadow: none;
  white-space: nowrap;
}

.case-progress-overview .btn-set-card:hover {
  background: #e7eee9;
  box-shadow: 0 5px 14px rgba(28,48,39,.1);
}

.case-progress-overview .set-card-button-dot {
  background: var(--pine-light);
  box-shadow: 0 0 0 4px rgba(76,112,93,.13);
}

/* Use the established Property Check green for the set-card invitation. */
.set-card-start.set-card-profile-cta,
.set-card-start.set-card-profile-cta:hover {
  grid-template-columns: 72px minmax(0, 1fr) minmax(92px, 150px) auto;
  border-color: #254234;
  background:
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(145deg, #315744, var(--pine));
  color: var(--white);
  box-shadow: 0 14px 30px rgba(29,55,42,.18);
}

.set-card-start.set-card-profile-cta:hover {
  background:
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.1), transparent 30%),
    linear-gradient(145deg, #39624e, #345141);
}

.set-card-robot {
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(9,22,16,.18);
}

.set-card-robot-image,
.guidance-robot-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.set-card-cta-kicker,
.set-card-start .set-card-cta-copy small,
.set-card-cta-progress > small {
  color: #d8e6dc;
}

.set-card-cta-progress > i {
  background: rgba(255,255,255,.18);
}

.set-card-cta-progress > i > b {
  background: var(--copper-light);
}

.guidance-hero {
  display: block;
}

.guidance-orb {
  width: 101px;
  height: 101px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(8,22,15,.2);
}

@media (max-width: 900px) {
  .case-progress-overview.compact-progress {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label setcard"
      "track track"
      "status status";
    gap: 9px 12px;
    padding: 12px 13px 11px;
    border-radius: 18px;
  }

  .case-progress-status {
    padding-left: 1px;
  }
}

@media (max-width: 760px) {
  .case-progress-overview.compact-progress {
    margin-bottom: 22px;
  }

  .case-progress-overview .btn-set-card {
    min-height: 42px;
    padding: 7px 11px;
  }

  .set-card-start.set-card-profile-cta {
    grid-template-columns: 62px minmax(0, 1fr) auto;
  }

  .set-card-robot {
    width: 62px;
    height: 62px;
    border-radius: 16px;
  }

  .guidance-hero {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px 14px;
    padding: 18px 16px;
  }

  .guidance-orb {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 68px;
    height: 68px;
    border-radius: 16px;
  }
}

@media (max-width: 420px) {
  .case-progress-overview.compact-progress {
    padding: 10px;
    gap: 8px 10px;
  }

  .case-progress-label {
    font-size: 11px;
  }

  .case-progress-status {
    display: block;
    font-size: 9px;
  }

  .case-progress-overview .btn-set-card {
    gap: 6px;
  }

  .case-progress-overview .btn-set-card small {
    display: inline-block;
  }

  .set-card-start.set-card-profile-cta {
    grid-template-columns: 54px minmax(0, 1fr) auto;
  }

  .set-card-robot {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .guidance-hero {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 16px 14px;
  }

  .guidance-orb {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }
}

/* The progress capsule is the page separator; no second rule underneath the title. */
.case-purchase-header {
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 0;
}

#checklistWorkspace > .profile-card-launch {
  margin-bottom: clamp(40px, 4vw, 56px);
}

/* Override the older compact-progress grid areas so every desktop item stays
   on the same deliberate row. */
.case-progress-overview > .case-progress-label {
  grid-area: label;
}

.case-progress-overview > .case-progress-status {
  grid-area: status;
}

.case-progress-overview > .btn-set-card {
  grid-area: setcard;
}

/* Transparent robot art should sit in the composition, not inside another UI tile. */
.guidance-orb,
.guidance-tone-urgent .guidance-orb,
.guidance-tone-verify .guidance-orb,
.set-card-robot {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.guidance-robot-image,
.set-card-robot-image {
  object-fit: contain;
  transform: scale(.9);
  filter: drop-shadow(0 9px 12px rgba(7,20,14,.24));
}

@media (max-width: 900px) {
  .case-progress-overview.compact-progress {
    grid-template-areas:
      "label setcard"
      "track track";
    padding: 11px 12px 12px;
  }

  .case-progress-overview > .case-progress-status {
    display: none;
  }
}

@media (max-width: 760px) {
  .case-purchase-header {
    margin-bottom: 8px;
    padding-bottom: 2px;
  }

  .case-heading-top {
    min-height: 32px;
    gap: 8px;
    padding: 0 2px 4px 4px;
  }

  #checklistWorkspace > .profile-card-launch {
    margin-bottom: 34px;
  }

  .guidance-hero {
    padding-top: 18px;
  }
}

/* ============================================================
   STREAMLINED PROPERTY OVERVIEW
   The dashboard starts with the actual property files. No vanity
   statistics and no search form before the user's main task.
============================================================ */
.home-view {
  padding-top: 16px;
}

.home-hero-streamlined {
  margin-bottom: 16px;
}

.home-hero-streamlined h1 {
  font-size: clamp(34px, 9vw, 56px);
}

.home-hero-streamlined p:not(.home-eyebrow) {
  margin-top: 8px;
  max-width: 520px;
}

.property-type-chips {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.property-type-chips::-webkit-scrollbar {
  display: none;
}

.property-type-chip {
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 0;
  border-radius: 999px;
  background: #e9ece8;
  color: #56615a;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.property-type-chip:hover {
  background: #e0e5e0;
}

.property-type-chip.is-active {
  background: #dce3dc;
  color: #39453e;
}

.property-type-chip-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.property-type-chip-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 559px) {
  .home-main {
    padding-top: 0;
  }

  .home-view {
    padding-top: 10px;
  }

  .home-hero-streamlined {
    gap: 14px;
    margin-bottom: 14px;
  }

  .home-hero-streamlined .home-eyebrow {
    margin-bottom: 4px;
  }

  .home-hero-streamlined h1 {
    font-size: clamp(34px, 10.5vw, 44px);
  }

  .home-hero-streamlined p:not(.home-eyebrow) {
    font-size: 14px;
    line-height: 1.45;
  }

  .home-add-property {
    min-height: 48px;
  }

  .property-type-chips {
    margin-right: -16px;
    padding-right: 16px;
    margin-bottom: 14px;
  }

  .property-type-chip {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 11.5px;
  }

  .property-card-open {
    padding: 15px;
  }

  .property-visual {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }

  .property-visual svg {
    width: 38px;
    height: 38px;
  }

  .property-card-copy {
    margin: 14px 0 16px;
  }

  .property-card h2 {
    font-size: 21px;
  }
}

@media (min-width: 760px) {
  .home-view {
    padding-top: 8px;
  }

  .home-hero-streamlined {
    align-items: center;
    margin-bottom: 22px;
  }

  .property-type-chips {
    margin-bottom: 22px;
  }
}

/* ============================================================
   PROPERTY OVERVIEW — FINAL CTA + CONTEXTUAL EMPTY STATE
   Uses the same quiet outlined action language as the sidebar.
   ============================================================ */
.home-hero.home-hero-streamlined {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  margin-bottom: 22px;
}

.home-hero-streamlined > div {
  width: 100%;
}

.home-add-property {
  width: min(100%, 360px);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 11px 16px;
  border: 1px solid var(--pine);
  border-radius: 10px;
  background: transparent;
  color: var(--pine);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.home-add-property:hover {
  border-color: var(--pine);
  background: rgba(47, 74, 60, .08);
  color: var(--ink);
  transform: translateY(-1px);
}

.home-add-property:active {
  transform: translateY(0);
}

.home-add-property > span {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.property-type-chips {
  margin-top: 0;
  margin-bottom: 23px;
}

.property-no-results {
  display: grid;
  justify-items: start;
  max-width: 620px;
  margin: 8px 0 0;
  padding: 28px;
  border: 1px dashed var(--stone-line);
  border-radius: 18px;
  background: rgba(247, 248, 244, .66);
  color: var(--ink);
  text-align: left;
}

.property-no-results-visual {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 14px;
  background: #e6ece6;
  color: var(--pine);
}

.property-no-results-visual svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.property-no-results-eyebrow {
  margin: 0 0 6px;
  color: var(--copper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.property-no-results h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 31px);
  font-weight: 600;
  line-height: 1.15;
}

.property-no-results > p:not(.property-no-results-eyebrow) {
  max-width: 430px;
  margin: 9px 0 20px;
  color: var(--stone);
  line-height: 1.5;
}

.property-no-results-action,
.home-empty-add {
  width: min(100%, 280px);
}

@media (max-width: 559px) {
  .home-hero.home-hero-streamlined {
    gap: 16px;
    margin-bottom: 18px;
  }

  .home-add-property {
    width: 100%;
  }

  .property-type-chips {
    margin-top: 0;
    margin-bottom: 23px;
  }

  .property-no-results {
    width: 100%;
    padding: 22px 18px;
  }

  .property-no-results-action,
  .home-empty-add {
    width: 100%;
  }
}

/* ============================================================
   PROPERTY OVERVIEW — COMPACT MOBILE-FIRST ACTIONS
   ============================================================ */

/* Add Property now lives with the filters instead of competing with the page title. */
.property-add-chip {
  border-radius: 7px;
  border-color: var(--pine);
  background: transparent;
  color: var(--pine);
  font-weight: 700;
}

.property-add-chip:hover {
  border-color: var(--pine);
  background: rgba(47, 74, 60, .08);
}

.property-add-chip-plus {
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

/* A single compact action row shortens every card and gives both actions clear positions. */
.property-card-actions {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--stone-line);
  background: rgba(238, 240, 233, .55);
}

.property-card-delete,
.property-card-open-action {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.property-card-delete {
  width: auto;
  justify-content: flex-start;
  color: rgba(168, 69, 47, .62);
}

.property-card-delete:hover {
  background: rgba(168, 69, 47, .07);
  color: var(--rust);
}

.property-card-open-action {
  margin-left: auto;
  justify-content: flex-end;
  color: var(--pine);
}

.property-card-open-action:hover {
  background: rgba(47, 74, 60, .07);
}

.property-card-open-action span:last-child {
  font-size: 16px;
  line-height: 1;
}

/* The old remaining-steps footer is intentionally removed. */
.property-card-footer {
  display: none;
}

@media (max-width: 559px) {
  .property-type-chips {
    gap: 2px;
  }

  .property-type-chip {
    padding-inline: 8px;
  }

  .property-card {
    margin-inline: 8px;
  }

  .property-add-chip {
    position: static;
    box-shadow: none;
  }

  .property-card-actions {
    min-height: 46px;
    padding: 6px 9px;
  }

  .property-card-delete,
  .property-card-open-action {
    min-height: 38px;
    padding: 8px;
  }
}


/* ============================================================
   PROPERTY OVERVIEW — PORTFOLIO-AWARE DESKTOP LAYOUT
   One property should feel intentional, two should share the row,
   and larger portfolios keep the compact repeatable card grid.
   ============================================================ */

/* Softer than a primary action: no dark outline, only a quiet green tint. */
.property-add-chip {
  border-color: transparent;
  background: rgba(76, 112, 93, .10);
}

.property-add-chip:hover {
  border-color: transparent;
  background: rgba(76, 112, 93, .16);
}

/* Desktop-only portfolio scaling. Mobile remains one full-width card. */
@media (min-width: 861px) {
  .property-grid-single {
    grid-template-columns: minmax(0, 1fr);
  }

  .property-grid-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A single property uses the width rather than looking like a mobile tile. */
  .property-grid-single .property-card-open {
    display: grid;
    grid-template-columns: auto minmax(230px, 1fr) minmax(260px, .72fr);
    align-items: center;
    gap: 26px;
    min-height: 230px;
    padding: 28px 30px;
  }

  .property-grid-single .property-card-top {
    min-width: 122px;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
  }

  .property-grid-single .property-visual {
    width: 92px;
    height: 92px;
    border-radius: 20px;
  }

  .property-grid-single .property-visual svg {
    width: 56px;
    height: 56px;
  }

  .property-grid-single .property-card-copy {
    margin: 0;
  }

  .property-grid-single .property-card h2 {
    font-size: clamp(27px, 2.7vw, 38px);
  }

  .property-grid-single .property-card-progress {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-top: 2px;
  }

  .property-grid-single .property-card-actions {
    padding-inline: 22px;
  }
}

@media (min-width: 1120px) {
  .property-grid-many {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 861px) and (max-width: 1040px) {
  .property-grid-single .property-card-open {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .property-grid-single .property-card-progress {
    grid-column: 1 / -1;
  }
}

/* ============================================================
SET CARD QUESTIONNAIRE — viewport-aware spacing
Keeps the calm desktop composition while preventing the mobile
keyboard from pushing the active question too far down the screen.
============================================================ */

/* Start the question in a predictable, comfortable position instead
   of vertically centering it inside whatever viewport remains. */
.set-card-question-card {
  align-self: start;
  padding-top: clamp(34px, 9dvh, 82px);
  padding-bottom: 14px;
}

/* Desktop: keep the controls with the question instead of pinning them
   to the bottom edge of the modal. The unused space now sits below the
   interaction area, where it feels deliberate rather than disconnected. */
@media (min-width: 760px) {
  .set-card-game {
    grid-template-rows: auto auto 1fr;
    align-content: start;
  }

  .set-card-question-card,
  .set-card-game-actions {
    width: min(720px, 100%);
    justify-self: center;
  }

  .set-card-game-actions {
    align-self: start;
    padding-top: 14px;
    border-top: 0;
  }
}

/* Mobile: use considerably less top air. Dynamic viewport units react
   to the on-screen keyboard, and the focused state tightens the layout
   once more so the prompt and field remain visible while typing. */
@media (max-width: 759px) {
  .set-card-game {
    grid-template-rows: auto 1fr auto;
  }

  .set-card-question-card {
    align-self: start;
    padding-top: clamp(24px, 6dvh, 46px);
    padding-bottom: 14px;
  }

  .set-card-game:has([data-set-card-input]:focus) .set-card-question-card {
    padding-top: 14px;
  }

  .set-card-game:has([data-set-card-input]:focus) .set-card-question-card h2 {
    margin-top: 12px;
  }

  .set-card-game:has([data-set-card-input]:focus) .set-card-question-help {
    margin-bottom: 14px;
  }
}

/* ============================================================
SET CARD QUESTIONNAIRE — Property Check green colour system
The guided questionnaire now follows the same reassuring green
language as the rest of the product instead of using copper/orange.
============================================================ */
.set-card-game {
  background:
    radial-gradient(circle at 100% 0%, rgba(76, 112, 93, .14), transparent 36%),
    var(--paper);
}

.set-card-game-progress i {
  background: var(--pine-light);
}

.set-card-option:hover {
  border-color: var(--pine-light);
}

.set-card-option.is-selected {
  border-color: var(--pine-light);
  background: #e8f0ea;
  box-shadow: 0 3px 0 #315443;
}

.set-card-option.is-selected .set-card-option-dot {
  border-color: var(--pine-light);
}

.set-card-input-wrap,
textarea.set-card-answer-input {
  border-color: #9caf9f;
  box-shadow: 0 3px 0 #78917f;
}

.set-card-input-wrap:focus-within,
textarea.set-card-answer-input:focus {
  border-color: var(--pine-light);
  box-shadow: 0 3px 0 #315443;
}

.set-card-continue,
.set-card-finish-button {
  border-color: #29483a;
  background: var(--pine-light);
  color: #f5f7f3;
  box-shadow: 0 3px 0 #29483a;
}

.set-card-continue:hover:not(:disabled),
.set-card-finish-button:hover {
  background: var(--pine);
}

.set-card-continue:disabled {
  border-color: #b5c1b8;
  background: #dce3dc;
  color: #87948a;
}

.set-card-finish-burst {
  background: var(--pine-light);
  color: var(--paper-raised);
  box-shadow: 0 0 0 14px rgba(76,112,93,.14), 0 0 0 28px rgba(76,112,93,.06);
}

/* ============================================================
   JULY 19 UI POLISH
   Cleaner property cards and questionnaire actions that stay close
   to the active field on both desktop and mobile.
   ============================================================ */

/* The percentage is the useful signal. Removing the resolved-count
   gives the card footer more breathing room and reduces visual noise. */
.property-progress-meta {
  justify-content: flex-start;
}

.property-progress-meta > strong {
  font-size: 14px;
}

/* Keep the action group directly attached to the question instead of
   allowing it to fall to the bottom of the available viewport. */
.set-card-game-actions {
  width: min(720px, 100%);
  justify-self: center;
  align-self: start;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  padding-top: 12px;
  border-top: 0;
}

/* Primary action comes first visually, even though the DOM keeps the
   secondary choices first for backwards-compatible event handling. */
.set-card-continue {
  order: -1;
  min-height: 52px;
  padding: 11px 20px;
  font-size: 15px;
}

/* Skipping is available, but no longer presented as an equally strong
   choice. These read like quiet escape routes rather than invitations. */
.set-card-secondary-action {
  min-height: 38px;
  padding: 7px 8px;
  border-color: transparent;
  background: transparent;
  color: #718078;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}

.set-card-secondary-action:hover {
  border-color: var(--stone-line);
  background: rgba(76, 112, 93, .06);
  color: var(--pine);
}

/* A disabled Continue button should still look like the next positive
   step, not like a dead or discouraging control. */
.set-card-continue:disabled {
  opacity: 1;
  border-color: #aab9ad;
  background: #d8e4da;
  color: #5f7365;
  box-shadow: 0 3px 0 #b7c5ba;
}

@media (max-width: 759px) {
  .set-card-game {
    grid-template-rows: auto auto 1fr;
    align-content: start;
  }

  .set-card-question-card {
    grid-row: 2;
  }

  .set-card-game-actions {
    grid-row: 3;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .set-card-continue {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }

  .set-card-secondary-action {
    grid-row: 2;
    min-height: 36px;
    padding: 6px 4px;
  }

  /* When the keyboard is open, preserve the compact relationship
     between input and actions instead of reserving empty viewport space. */
  .set-card-game:has([data-set-card-input]:focus) {
    grid-template-rows: auto auto auto;
  }
}


/* The questionnaire already provides enough context through the question itself.
   Keep the space above the title calm and remove the redundant category-chip gap. */
.set-card-question-card h2 {
  margin-top: 0;
}

/* Keep a little calm breathing room above the first question on mobile,
   even after removing the redundant category chip. */
@media (max-width: 759px) {
  .set-card-question-card {
    padding-top: 34px;
  }

  .set-card-game:has([data-set-card-input]:focus) .set-card-question-card {
    padding-top: 20px;
  }
}

/* ============================================================
   PROFILE CARD + DUE DILIGENCE HIERARCHY
   Mobile-first: the profile launch uses the same substantial card rhythm as
   checklist items, then guidance, then section progress.
============================================================ */
.profile-card-launch {
  width: 100%;
  min-height: 104px;
  margin: 0 0 18px;
  padding: 14px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--stone-line);
  border-left: 6px solid var(--pine-light);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 4px 16px rgba(22,33,28,.04);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.profile-card-launch:hover {
  transform: translateY(-2px);
  background: var(--white);
  border-color: var(--pine-light);
  box-shadow: 0 10px 26px rgba(22,33,28,.09);
}

.profile-card-launch:active { transform: translateY(1px); }

.profile-card-launch-visual {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--paper-raised);
  color: var(--pine);
}

.profile-card-launch-visual svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-card-launch-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.profile-card-launch-label {
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}

.profile-card-launch-description {
  color: var(--stone);
  font-size: 12px;
  line-height: 1.45;
}

.profile-card-launch-meta {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: var(--stone);
  font: 500 10.5px var(--font-mono);
  white-space: nowrap;
}

.profile-card-launch-meta strong { color: var(--pine); font-size: 14px; }
.profile-card-launch-meta small { font: inherit; }

.profile-card-launch-chevron {
  font-size: 28px;
  line-height: 1;
  color: var(--pine-light);
}

/* The section title owns the due-diligence progress. */
.all-sections-view .section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.all-sections-view .section-progress-wrap {
  width: 100%;
  gap: 10px;
}

.all-sections-view .section-bar { height: 7px; }
.all-sections-view .section-count { min-width: 38px; text-align: right; }

.in-progress-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #d7b85d;
  border-radius: 999px;
  background: #fff4c9;
  color: #765b0b;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .profile-card-launch {
    min-height: 92px;
    margin-bottom: 16px;
    padding: 13px;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 11px;
    border-radius: 14px;
  }

  .profile-card-launch-visual { width: 54px; height: 54px; border-radius: 12px; }
  .profile-card-launch-visual svg { width: 32px; height: 32px; }
  .profile-card-launch-label { font-size: 16px; }
  .profile-card-launch-description { font-size: 11.5px; }
  .profile-card-launch-meta { display: none; }
  .profile-card-launch-disclosure { grid-column: 3; }

  .all-sections-view .section-header {
    padding: 15px 16px 13px;
    gap: 10px;
  }

  .all-sections-view .section-title-row { gap: 9px; }
  .all-sections-view .section-header h2 { font-size: 22px; }
  .all-sections-view .section-intro { display: none; }

  .item-title-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .in-progress-chip {
    order: 2;
    min-height: 22px;
    padding: 2px 7px;
  }

  .info-toggle { order: 3; }
}

@media (min-width: 761px) {
  .profile-card-launch {
    min-height: 96px;
    padding: 15px 17px;
  }

  /* Supporting section copy is unnecessary on desktop. */
  .all-sections-view .section-intro { display: none; }
}


/* ============================================================
   ITEM SUMMARY INTERACTION REFINEMENT
   Headline and illustration open the item; status sits below the title.
============================================================ */

/* More breathing room between the green guidance panel and this section. */
#stageWorkspace > .stage-hero {
  margin-bottom: clamp(56px, 5vw, 74px);
}

.single-stage .event-card.guided-workflow .item-title-row,
.item-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-content: start;
  row-gap: 12px;
}

.item-expand-trigger {
  cursor: pointer;
}

.item-title.item-expand-trigger {
  width: fit-content;
  max-width: 100%;
  border-radius: 5px;
}

.item-title.item-expand-trigger:hover {
  color: var(--pine-light);
}

.item-expand-trigger:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
}

.single-stage .event-card.guided-workflow .item-visual.item-expand-trigger {
  border-radius: 14px;
  transition: background .15s ease, transform .15s ease;
}

.single-stage .event-card.guided-workflow .item-visual.item-expand-trigger:hover {
  background: #edf1ec;
}

.single-stage .event-card.guided-workflow .item-visual.item-expand-trigger:active,
.item-title.item-expand-trigger:active {
  transform: translateY(1px);
}

.in-progress-chip {
  min-height: 30px;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1;
}

/* The separate information icon is intentionally gone. */
.info-toggle {
  display: none !important;
}

@media (max-width: 760px) {
  #stageWorkspace > .stage-hero {
    margin-bottom: 46px;
  }

  .single-stage .event-card.guided-workflow .item-title-row,
  .item-title-row {
    row-gap: 10px;
  }

  .in-progress-chip {
    order: initial;
    min-height: 28px;
    padding: 5px 11px;
    font-size: 11.5px;
  }
}

/* ============================================================
   MOBILE-FIRST STATUS + PROFILE CARD AFFORDANCE REFINEMENT
============================================================ */

.profile-card-launch-disclosure {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--pine);
  font-size: 24px;
  line-height: 1;
  transform: translateY(-1px);
}

/* Keep the status visually separate from Property Overview cards:
   compact, left-aligned, and on its own line below the item title. */
.single-stage .event-card.guided-workflow .item-title-row {
  align-items: flex-start;
}

.single-stage .event-card.guided-workflow .in-progress-chip {
  flex: 0 0 auto;
  width: max-content;
  min-height: 24px;
  margin-top: 7px;
  padding: 3px 8px;
  font-size: 10.5px;
  line-height: 1;
}

.single-stage .event-card.guided-workflow .item-title {
  flex-basis: 100%;
}

@media (max-width: 760px) {
  .profile-card-launch-disclosure {
    width: 20px;
    height: 20px;
    font-size: 22px;
  }

  .single-stage .event-card.guided-workflow .in-progress-chip {
    min-height: 24px;
    margin-top: 6px;
    padding: 3px 8px;
    font-size: 10.5px;
  }
}