/* Kesef core (v3) UI: verdict card, "your numbers" banner and editor, plan pieces. Pairs with js/v2/ks-core.js.
   Uses only kesef.css tokens. One accent (logo yellow) as a small dot; everything else is ink on paper. */

/* Plain text button */
.kc-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 14px/1 var(--font-sans); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.kc-link:hover { text-decoration-thickness: 2px; }
.kc-link[hidden] { display: none; }

/* ---------- Verdict: the decision under every result ---------- */
.kc-verdict { margin-top: 24px; padding: 22px 22px 18px; border-radius: var(--r-panel); background: var(--paper); border: 1px solid var(--hair); position: relative; }
.kc-verdict::before { content: ""; position: absolute; left: 22px; top: 0; width: 36px; height: 2px; background: var(--ink); }
.kc-verdict[data-tone="good"]::before { background: var(--up); }
.kc-verdict[data-tone="warn"]::before { background: var(--down); }
.kc-verdict .kc-verdict__head { margin: 0; font: 400 clamp(21px, 1.9vw, 25px)/1.25 var(--font-display); letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.kc-verdict .kc-verdict__body { margin: 10px 0 0; font: 400 15px/1.6 var(--font-sans); color: var(--ink-2); text-wrap: pretty; }
.kc-verdict__next { display: grid; margin-top: 14px; border-top: 1px solid var(--hair); }
.kc-verdict__next[hidden], .kc-verdict__body[hidden] { display: none; }
.kc-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--hair);
  font: 500 15px/1.3 var(--font-sans); color: var(--ink); text-decoration: none; }
.kc-next svg { width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease-out); }
.kc-next:hover svg, .kc-next:focus-visible svg { transform: translateX(3px); }
.kc-next--first { font-weight: 600; }
.kc-verdict__save { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 14px; }
.kc-verdict__save:empty { display: none; }
.kc-save[aria-pressed="true"] { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
/* On dark stages */
.ks-stage .kc-verdict, .tf-summary .kc-verdict { background: rgba(236, 230, 216, .05); border-color: var(--hair-stage); }
.ks-stage .kc-verdict::before, .tf-summary .kc-verdict::before { background: var(--parchment); }
.ks-stage .kc-verdict__head, .tf-summary .kc-verdict__head, .ks-stage .kc-next, .tf-summary .kc-next, .ks-stage .kc-link, .tf-summary .kc-link { color: var(--parchment); }
.ks-stage .kc-verdict__body, .tf-summary .kc-verdict__body { color: var(--parchment-2); }
.ks-stage .kc-verdict__next, .ks-stage .kc-next, .tf-summary .kc-verdict__next, .tf-summary .kc-next { border-color: var(--hair-stage); }

/* ---------- "Filled in from your numbers" banner ---------- */
.kc-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; padding: 4px 16px; margin: 0 0 20px; border-radius: var(--r-chip);
  background: var(--paper-3); font: 400 14px/1.4 var(--font-sans); color: var(--ink); }
.kc-banner[hidden] { display: none; }
.kc-banner__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kesef); box-shadow: 0 0 0 1px rgba(18, 17, 14, .25); }
.kc-banner strong { font-weight: 600; }
.ks-stage .kc-banner { background: rgba(236, 230, 216, .08); color: var(--parchment); }
.ks-stage .kc-banner .kc-link { color: var(--parchment); }

/* ---------- "Your numbers" editor ---------- */
.kc-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--r-panel);
  background: var(--paper-2); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); overflow: auto; }
.kc-dialog::backdrop { background: rgba(13, 12, 10, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.kc-form { padding: clamp(22px, 4vw, 36px); }
.kc-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.kc-dialog__title { margin: 0; font: 400 clamp(30px, 4vw, 38px)/1.05 var(--font-display); letter-spacing: -0.02em; }
.kc-x { width: 44px; height: 44px; margin: -8px -10px 0 0; border: 0; background: none; font: 300 30px/1 var(--font-sans); color: var(--ink); cursor: pointer; border-radius: var(--r-pill); }
.kc-x:hover { background: var(--paper-3); }
.kc-dialog__lead { margin: 10px 0 26px; font: 400 15px/1.55 var(--font-sans); color: var(--ink-2); max-width: 34em; }
.kc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.kc-field { display: grid; gap: 8px; align-content: start; }
.kc-field:first-child { grid-column: 1 / -1; }
.kc-field label { font: 500 13px/1.3 var(--font-sans); color: var(--ink-2); }
.kc-field small { font: 400 12.5px/1.4 var(--font-sans); color: var(--ink-3); }
.kc-field select, .kc-field > input { min-height: 48px; padding: 0 14px; border: 1px solid var(--hair-strong); border-radius: var(--r-chip); background: var(--paper-2);
  font: 400 16px/1 var(--font-sans); color: var(--ink); width: 100%; }
.kc-affix input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px 0 6px; font: 400 18px/1 var(--font-sans); color: var(--ink); min-height: 46px; outline: none; }
.kc-field select:focus-visible, .kc-field > input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--kesef-soft); }
.kc-status { min-height: 22px; margin: 18px 0 0; font: 500 14px/1.5 var(--font-sans); color: var(--up); }
.kc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; }
@media (max-width: 560px) { .kc-grid { grid-template-columns: 1fr; } }

/* ---------- Fine-tune disclosure (three inputs first, the rest behind this) ---------- */
.kc-more { margin-top: 24px; border-top: 1px solid var(--hair); }
.kc-more > summary { list-style: none; display: flex; flex-wrap: wrap; row-gap: 2px; align-items: center; justify-content: space-between; min-height: 56px; padding: 6px 0; cursor: pointer;
  font: 500 15px/1.3 var(--font-sans); color: var(--ink); }
.kc-more > summary::-webkit-details-marker { display: none; }
.kc-more > summary::after { content: ""; width: 12px; height: 12px; flex: none; opacity: .7; transition: transform .35s var(--ease-out);
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat; }
.kc-more[open] > summary::after { transform: rotate(45deg); }
.kc-more > summary small { font-weight: 400; color: var(--ink-3); margin-left: 8px; margin-right: auto; }
.kc-more__body { padding-bottom: 8px; }