/* ============================
   KETMarket — Saved Search UI
   ============================ */
:root {
  --ketm-bg: #ffffff;
  --ketm-text: #1c1f23;
  --ketm-muted: #5f6b76;
  --ketm-border: #e6edf3;
  --ketm-accent: #005E86;   /* primary blue */
  --ketm-accent-2: #0073aa; /* secondary blue */
  --ketm-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  --ketm-radius: 14px;
  --ketm-gap: 14px;
  --ketm-label-w: 240px;    /* desktop label width */
  --ketm-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Wrapper */
.ketm-saved-search {
  font-family: var(--ketm-font);
  color: var(--ketm-text);
  background: var(--ketm-bg);
  border: 1px solid var(--ketm-border);
  border-radius: var(--ketm-radius);
  box-shadow: var(--ketm-shadow);
  padding: 20px;
  margin: 24px 0;
}

/* Title */
.ketm-saved-search__title {
  margin: 0 0 14px 0;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ketm-accent);
}

/* Meta area (ID + saved at) */
.ketm-saved-search__meta {
  display: grid;
  grid-template-columns: var(--ketm-label-w) 1fr;
  gap: 8px var(--ketm-gap);
  padding: 12px 0 16px 0;
  border-bottom: 1px solid var(--ketm-border);
  margin-bottom: 12px;
}

/* Data rows */
.ketm-saved-search__data {
  display: grid;
  grid-template-columns: var(--ketm-label-w) 1fr;
  gap: 10px var(--ketm-gap);
}

/* Each row */
.ketm-saved-search__row {
  display: contents; /* labels/values align into the grid columns */
}

/* Labels */
.ketm-saved-search__label {
  align-self: start;
  color: var(--ketm-muted);
  font-size: .92rem;
  line-height: 1.4;
  letter-spacing: .2px;
}

/* Values */
.ketm-saved-search__value {
  align-self: start;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--ketm-text);
  background: #fafcfe;
  border: 1px solid var(--ketm-border);
  border-radius: 10px;
  padding: 10px 12px;
}

/* Links (email/website) */
.ketm-saved-search__value a {
  color: var(--ketm-accent-2);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.ketm-saved-search__value a:hover {
  text-decoration: none;
  border-bottom-style: solid;
}

/* JSON view */
.ketm-saved-search--json {
  background: #0d1b24;
  color: #f0f6fa;
  border: 1px solid #0b2a3a;
  border-radius: var(--ketm-radius);
  padding: 16px;
  overflow: auto;
  box-shadow: var(--ketm-shadow);
}
.ketm-saved-search--json code,
.ketm-saved-search--json pre {
  color: inherit;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .9rem;
  margin: 0;
}

/* Empty / not logged states */
.ketm-saved-search--empty,
.ketm-saved-search--not-logged {
  background: #fffaf0;
  border: 1px solid #ffe4a3;
  color: #6d5b2e;
  border-radius: var(--ketm-radius);
  padding: 14px 16px;
}

/* Subtle row hover (desktop) */
@media (hover: hover) {
  .ketm-saved-search__value:hover {
    background: #f3f9ff;
    border-color: #d7e7f3;
  }
}

/* Responsive: stack labels/values */
@media (max-width: 880px) {
  :root { --ketm-label-w: 180px; }
}
@media (max-width: 640px) {
  .ketm-saved-search__meta,
  .ketm-saved-search__data {
    grid-template-columns: 1fr;
  }
  .ketm-saved-search__label {
    margin-top: 6px;
    font-size: .88rem;
  }
  .ketm-saved-search__value {
    margin-top: 2px;
  }
}

/* Print: remove shadows/colors, keep structure */
@media print {
  .ketm-saved-search,
  .ketm-saved-search--json {
    box-shadow: none;
    border-color: #bbb;
    background: #fff;
    color: #000;
  }
  .ketm-saved-search__value {
    background: #fff;
  }
}