/* ── KULI Watch ────────────────────────────────────────────────────────
   A quiet premium service working in the background — not a newsletter
   box. So: no shouting colour, no full-bleed banner, no exclamation. A
   single hairline card that sits with the listings rather than on top of
   them, one restrained teal mark for the watching eye, and the same 2px
   corners and Newsreader headings the rest of KULI uses.

   Everything here is token-driven, so it flips with the theme without a
   second set of rules.                                                */

/* ── The prompt (browse: under the filters, above the results) ────── */

.kw-prompt {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 26px) clamp(20px, 3.4vw, 30px);
  margin-bottom: 34px;
}
.kw-prompt-mark {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--teal-border);
  background: var(--teal-bg);
  color: var(--teal-ink);
  border-radius: var(--radius-sm);
}
.kw-prompt-mark svg { width: 20px; height: 20px; }
.kw-prompt-copy { flex: 1 1 auto; min-width: 0; }
.kw-prompt-title {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.kw-prompt-desc {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}
.kw-prompt .btn { flex-shrink: 0; }

@media (max-width: 700px) {
  .kw-prompt { flex-direction: column; align-items: flex-start; gap: 16px; }
  .kw-prompt .btn { width: 100%; justify-content: center; }
}

/* ── The modal ─────────────────────────────────────────────────────── */

.kw-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.kw-overlay.open { display: flex; }

.kw-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.kw-body { padding: clamp(24px, 4vw, 34px); }
.kw-body[hidden] { display: none; }

.kw-x {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--trans-fast), border-color var(--trans-fast);
}
.kw-x:hover { color: var(--ink); border-color: var(--hairline); }
.kw-x svg { width: 16px; height: 16px; }

.kw-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin: 0 0 10px;
}
.kw-title {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: clamp(21px, 3.2vw, 26px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 8px;
  padding-right: 30px;
}
.kw-sub {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 22px;
}
.kw-warn {
  font-size: 13px;
  line-height: 1.6;
  color: var(--amber-ink);
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin: 0 0 20px;
}
.kw-warn[hidden] { display: none; }

.kw-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kw-field-wide { grid-column: 1 / -1; }
.kw-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.kw-field > span em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.75;
}
.kw-field .form-input,
.kw-field .form-select { width: 100%; }
/* The dropdowns are the site's own (main.js swaps each select for a .kd-form
   trigger), so they only need to fill the column the field gives them. */
.kw-field .kd-wrap { width: 100%; }

/* The budget is the site's shared control, so its panel — the currency
   toggle, the slider, the shortcuts — is left exactly as it is everywhere
   else. Only the trigger is restyled, from the filter row's bordered box to
   the underlined field this form is made of, so the row of controls reads as
   one form rather than one filter that wandered in. */
.kw-field .pr-wrap { display: block; width: 100%; }
.kw-field .pr-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: auto;
  padding: 12px 2px;
  border: none;
  border-bottom: 1px solid var(--bronze);
  border-radius: 0;
  font-size: 15px;
  font-weight: 400;
  background-image: none;      /* the chevron is its own element here */
}
.kw-field .pr-btn .pr-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-field .pr-wrap.kd-empty .pr-btn .pr-label { color: var(--muted); opacity: 0.8; }
.kw-field .pr-btn:focus-visible { border-bottom-color: var(--ink); }

/* An empty date has to read as empty. The site greys the mm/dd/yyyy text
   through input[type="date"]:invalid, which only ever matches a *required*
   date — this one is optional, so at full --ink strength it read like an
   answer the renter had already given. The picker indicator itself is left
   to pages.css, which already themes it for the whole site. */
.kw-field input[type="date"][data-empty]::-webkit-datetime-edit { color: var(--muted); }

.kw-freq { margin-top: 24px; }
.kw-freq-lbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}
.kw-freq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kw-freq-opt { cursor: pointer; }
.kw-freq-opt input { position: absolute; opacity: 0; pointer-events: none; }
.kw-freq-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 13px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--trans-fast), background var(--trans-fast);
}
.kw-freq-box strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.kw-freq-box em { font-style: normal; font-size: 12px; line-height: 1.5; color: var(--muted); }
.kw-freq-opt:hover .kw-freq-box { border-color: var(--bronze); }
.kw-freq-opt input:checked + .kw-freq-box {
  border-color: var(--teal-border);
  background: var(--teal-bg);
}
.kw-freq-opt input:focus-visible + .kw-freq-box { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
.kw-freq-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.6; }

.kw-actions {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.kw-actions .btn { flex: 1 1 auto; justify-content: center; text-decoration: none; }

/* The confirmation. One mark, one sentence — it should read as settled,
   not as a celebration. */
.kw-done { text-align: center; }
.kw-done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 16px;
  border: 1px solid var(--teal-border);
  background: var(--teal-bg);
  color: var(--teal-ink);
  border-radius: var(--radius-sm);
}
.kw-done-mark svg { width: 22px; height: 22px; }
.kw-done .kw-title { padding-right: 0; }
.kw-done-summary {
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 20px 0 0;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .kw-fields, .kw-freq-opts { grid-template-columns: 1fr; }
  .kw-field-wide { grid-column: auto; }
  .kw-actions { flex-direction: column; }
}

/* ── Managing them (profile) ───────────────────────────────────────── */

.kw-list { display: grid; gap: 14px; }
.kw-list[hidden] { display: none; }

.kw-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.kw-card-paused { opacity: 0.72; }
.kw-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.kw-card-head h3 {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
  line-height: 1.4;
}
.kw-card-head .badge { flex-shrink: 0; }

.kw-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 18px;
  margin: 0 0 16px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.kw-card-grid dt {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.kw-card-grid dd { font-size: 14px; color: var(--ink); margin: 0; line-height: 1.4; }

.kw-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.kw-card-date { font-size: 12px; color: var(--muted); }
.kw-card-acts { display: flex; gap: 8px; flex-wrap: wrap; }

.kw-empty {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  text-align: center;
}
.kw-empty[hidden] { display: none; }
.kw-empty-title {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 6px;
}
.kw-empty-desc { font-size: 14px; color: var(--muted); margin: 0 0 18px; line-height: 1.7; }