/* Saved Properties — claude/prompt-yyhoop-dc-saved-properties-page.md.
   Values read from claude/ref-yyhoop-dc-prototype.html's own screen 1 (screenFind()) and its
   CSS (lines 42-94), not reinterpreted. --ink/--muted/--field/--line come from design-system.css's
   own :root (loaded on this page), which already carries the correct Decision Center values —
   confirmed by reading it, not assumed: the SITE-WIDE :root in /css/styles.css defines the same
   variable names with different (Communities/copper) values, and design-system.css, loading
   second, wins the cascade for a page that loads both, same as every other Decision Center page.
   --font-display/--font-body are site-wide (styles.css) and already resolve to Playfair
   Display/DM Sans — used directly rather than re-declared. */

body.dc-saved-properties-page {
  background: var(--light, #f6f4ee);
  font-family: var(--font-body);
  color: var(--ink);
}

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

/* ---------------- hero ---------------- */
.dsp-hero {
  padding: 44px 0 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 249, 0.95);
}

.dsp-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 28px;
}

.dsp-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--field);
  margin: 0 0 10px;
}

.dsp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px;
  max-width: 18ch;
  color: var(--ink);
}

.dsp-lede {
  font-size: 16.5px;
  color: #41504a;
  max-width: 62ch;
  margin: 0;
}

/* ---------------- body / two-column layout ---------------- */
.dsp-body {
  padding: 32px 0 80px;
}

/* claude/prompt-yyhoop-dc-front-door-manage.md §1 — proven live, not re-diagnosed: a `1fr` grid
   track's automatic minimum is its content's min-content size, not 0 — the left column was
   resolving to 893px instead of the 748px that actually fits (1180 − 48 padding − 336 − 48 gap),
   overflowing .dsp-two's own right edge by 121px and carrying a horizontal scrollbar on the whole
   page. `minmax(0, 1fr)` is the fix measured against, tested directly (748px, 0 overflow) before
   shipping — the same hazard the prototype's own card guards against on its inner column
   (ref-yyhoop-dc-prototype.html: `.rc > div{flex:1 1 auto;min-width:0}`). */
.dsp-two {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 48px;
  align-items: start;
}

@media (max-width: 980px) {
  .dsp-two {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.dsp-searchbox {
  background: rgba(255, 253, 249, 0.95);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 8px 8px 8px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 40px rgba(23, 32, 26, 0.06);
  flex-wrap: wrap;
}

.dsp-search-ico {
  color: var(--muted);
  font-size: 17px;
}

.dsp-searchbox input {
  flex: 1;
  min-width: 180px;
  border: none;
  background: transparent;
  font: 16.5px var(--font-body);
  color: var(--ink);
  height: 52px;
  outline: none;
}

.dsp-searchbox input::placeholder {
  color: #a4ada7;
}

.dsp-helper {
  font-size: 13px;
  color: var(--muted);
  margin: 12px 2px 0;
}

.dsp-reshead {
  margin: 26px 0 14px;
}

.dsp-reshead-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

/* ---------------- cards ---------------- */
.dsp-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
}

.dsp-rc {
  background: rgba(255, 253, 249, 0.95);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  text-decoration: none;
}

.dsp-rc:hover {
  border-color: rgba(46, 92, 74, 0.45);
  box-shadow: 0 10px 30px rgba(23, 32, 26, 0.07);
}

@media (max-width: 560px) {
  .dsp-rc {
    flex-wrap: wrap;
  }

  .dsp-price {
    margin-left: 0 !important;
  }
}

.dsp-ph {
  width: 104px;
  height: 76px;
  border-radius: 12px;
  flex: none;
  background: linear-gradient(140deg, #cfe0d8, #9dbcae);
}

.dsp-rc-body {
  flex: 1 1 auto;
  min-width: 0;
}

.dsp-rc-body h3 {
  font-size: 16.5px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsp-rc-meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.dsp-rc-type {
  font-weight: 600;
  color: var(--field-dark, var(--field));
  flex: none;
}

.dsp-rc-status {
  color: var(--muted);
}

.dsp-price {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin-left: auto;
  padding-right: 6px;
  flex: none;
  color: var(--ink);
}

.dsp-pick {
  /* claude/prompt-yyhoop-dc-front-door-remove-fix.md §5.8 — measured at 136x38 on the deploy,
     under the 44px touch-target minimum; one-line fix while already in this file. */
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.25px solid var(--line);
  background: transparent;
  font: 600 13.5px/1 var(--font-body);
  color: var(--field-dark, var(--field));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.dsp-rc:hover .dsp-pick {
  background: var(--gulf, var(--field));
  border-color: var(--gulf, var(--field));
  color: #fff;
}

/* ---------------- side column ---------------- */
.dsp-card {
  background: rgba(255, 253, 249, 0.95);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 16px;
}

.dsp-card h4 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.dsp-card p {
  font-size: 13.5px;
  color: #41504a;
  margin: 0;
}

.dsp-card ol {
  list-style: none;
  counter-reset: dsp-step;
  margin: 0;
  padding: 0;
}

.dsp-card ol li {
  counter-increment: dsp-step;
  font-size: 13.5px;
  color: #41504a;
  padding: 9px 0 9px 30px;
  position: relative;
  border-bottom: 1px solid var(--line);
}

.dsp-card ol li:last-child {
  border-bottom: none;
}

.dsp-card ol li::before {
  content: counter(dsp-step);
  position: absolute;
  left: 0;
  top: 9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(46, 92, 74, 0.1);
  color: var(--gulf, var(--field));
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.dsp-resume {
  background: var(--midnight) !important;
  border-color: var(--midnight) !important;
  color: #eef2ef;
}

.dsp-resume h4 {
  color: rgba(238, 242, 239, 0.6) !important;
}

.dsp-resume p {
  color: rgba(238, 242, 239, 0.8) !important;
}

.dsp-resume a {
  margin-top: 14px;
  height: 42px;
  width: 100%;
  border-radius: 999px;
  border: 1.25px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  font: 600 14px/1 var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.dsp-resume a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------------- controls row: select-all, batch remove, sort ----------------
   claude/prompt-yyhoop-dc-front-door-manage.md §2/§4. */
.dsp-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0 0;
}

.dsp-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  /* the label's own padding, not the 13px checkbox, is what clears the 44x44 touch-target
     minimum — the prompt's own callout ("the Menu icon was found at 38x38... do not
     reintroduce the same finding") applies to every new control on this page, this one
     included, even though it renders small. */
  padding: 11px 4px;
  margin: -11px -4px;
}

.dsp-select-all input {
  width: 16px;
  height: 16px;
  accent-color: var(--gulf, var(--field));
  flex: none;
}

.dsp-batch-bar {
  display: flex;
  align-items: center;
}

/* claude/prompt-yyhoop-dc-front-door-remove-fix.md — found live while testing this pass: an
   author rule and the UA's own `[hidden] { display: none }` tie in specificity, and the author
   rule wins regardless of source order, so `display: flex` above was showing "Remove selected
   (0)" any time nothing was selected. Same family of bug as this prompt's own subject — a
   control rendering as active when it isn't. */
.dsp-batch-bar[hidden] {
  display: none;
}

.dsp-batch-remove {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.25px solid #b5493f;
  background: transparent;
  color: #b5493f;
  font: 600 13.5px/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}

.dsp-batch-remove:hover {
  background: #b5493f;
  color: #fff;
}

.dsp-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.dsp-sort select {
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.25px solid var(--line);
  background: rgba(255, 253, 249, 0.95);
  color: var(--ink);
  font: 600 13.5px/1 var(--font-body);
  cursor: pointer;
}

.dsp-price-toggle {
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.25px solid var(--line);
  background: transparent;
  color: var(--field-dark, var(--field));
  font: 600 13.5px/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}

.dsp-price-toggle:hover {
  background: var(--gulf, var(--field));
  border-color: var(--gulf, var(--field));
  color: #fff;
}

@media (max-width: 560px) {
  .dsp-sort {
    margin-left: 0;
    width: 100%;
  }

  .dsp-sort select {
    flex: 1;
  }
}

/* ---------------- category headings (sort mode: category) ---------------- */
.dsp-category-heading {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin: 26px 0 10px;
}

.dsp-category-heading:first-child {
  margin-top: 0;
}

/* ---------------- per-card select + remove ----------------
   Sit inside the existing .dsp-rc flex row (checkbox first, remove button last); .dsp-price's
   own margin-left:auto already pushes price + action + remove together to the right, so the
   remove button lands at the row's trailing edge with no extra positioning needed here. */
.dsp-rc-select {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -8px 0;
  cursor: pointer;
}

.dsp-rc-select input {
  width: 18px;
  height: 18px;
  accent-color: var(--gulf, var(--field));
}

.dsp-rc-remove {
  flex: none;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.25px solid var(--line);
  background: transparent;
  color: #8a6a63;
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}

.dsp-rc-remove:hover {
  background: #b5493f;
  border-color: #b5493f;
  color: #fff;
}

@media (max-width: 560px) {
  .dsp-rc-remove {
    margin-left: 60px; /* clears the thumb/checkbox column when the row wraps */
  }
}

/* ---------------- remove confirmation dialog ---------------- */
body.dsp-confirm-open {
  overflow: hidden;
}

.dsp-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 32, 26, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 400;
}

.dsp-confirm-dialog {
  background: #fffdf9;
  border-radius: 20px;
  padding: 28px;
  max-width: 440px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(23, 32, 26, 0.25);
}

.dsp-confirm-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
}

.dsp-confirm-body {
  font-size: 14.5px;
  color: #41504a;
  margin: 0 0 20px;
}

.dsp-confirm-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border-top: 1px solid var(--line);
}

.dsp-confirm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.dsp-confirm-row span:first-child {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsp-confirm-row-outcome {
  color: var(--muted);
  flex: none;
  text-align: right;
}

.dsp-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dsp-confirm-cancel {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.25px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 600 13.5px/1 var(--font-body);
  cursor: pointer;
}

.dsp-confirm-cancel:hover {
  border-color: rgba(46, 92, 74, 0.45);
}

.dsp-confirm-remove {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.25px solid #b5493f;
  background: #b5493f;
  color: #fff;
  font: 600 13.5px/1 var(--font-body);
  cursor: pointer;
}

.dsp-confirm-remove:hover {
  background: #9c3e35;
  border-color: #9c3e35;
}

/* ---------------- undo banner ---------------- */
.dsp-undo {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--midnight, #1c2b22);
  color: #eef2ef;
  border-radius: 999px;
  padding: 12px 12px 12px 22px;
  box-shadow: 0 20px 50px rgba(23, 32, 26, 0.3);
  z-index: 500;
  max-width: calc(100vw - 48px);
}

.dsp-undo span {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsp-undo button {
  flex: none;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}

.dsp-undo button:hover {
  background: rgba(255, 255, 255, 0.28);
}