/*
 * Everything you press or type into, one vocabulary across the four tools.
 *
 * Heights are fixed (42 default, 34 small) and a focus ring is drawn outside
 * the box, so a control never changes size under the pointer or the caret and
 * nothing beside it moves.
 *
 * Drawn as the app draws them: buttons and chips are pills, fields are filled
 * wells, and nothing is outlined. A control is told apart by its fill.
 */

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.v-btn,
.d-act,
.ap-btn {
  --bh: var(--ctl-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--bh);
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  background: var(--raise-2);
  color: var(--ink);
  font-size: var(--t-14);
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s var(--e-out), box-shadow 0.15s var(--e-out), color 0.15s var(--e-out), transform 0.12s var(--e-out);
}
.v-btn .ic,
.d-act .ic { width: 16px; height: 16px; }
.v-btn:hover,
.d-act:hover,
.ap-btn:hover { background: color-mix(in srgb, var(--raise-2) 82%, var(--ink)); text-decoration: none; }
.v-btn:active,
.d-act:active,
.ap-btn:active { transform: scale(0.97); }
.v-btn:disabled,
.v-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* The one thing to do on a screen. */
.v-btn-go,
.d-act-go,
.ap-btn-go {
  background: var(--accent);
  color: var(--accent-ink);
}
.v-btn-go:hover,
.d-act-go:hover,
.ap-btn-go:hover { background: var(--accent-hover); }

.v-btn-line { background: var(--raise-2); }
.v-btn-quiet { background: transparent; box-shadow: none; color: var(--ink-2); }
.v-btn-quiet:hover { background: var(--raise-2); color: var(--ink); }
.v-btn-danger { background: var(--danger-soft); color: var(--danger); }
.v-btn-danger:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); }
.v-btn-sm { --bh: var(--ctl-h-sm); padding: 0 var(--s-4); font-size: var(--t-13); }

.v-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  transition: background 0.15s var(--e-out), color 0.15s var(--e-out);
}
.v-icon-btn .ic { width: 18px; height: 18px; }
.v-icon-btn:hover { background: var(--raise-2); color: var(--ink); text-decoration: none; }
.v-icon-btn:active { transform: scale(0.94); }
.v-icon-btn.has-dot::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg);
}
.v-icon-btn.is-spinning .ic { animation: dk-spin 0.6s var(--e-out); }
@keyframes dk-spin { to { transform: rotate(360deg); } }

/* A link that is a button: a way to somewhere, quieter than an action. */
.d-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ink-3);
  font-size: var(--t-13);
  font-weight: 500;
  white-space: nowrap;
}
.d-link-btn .ic { width: 15px; height: 15px; transition: transform 0.15s var(--e-out); }
.d-link-btn:hover { color: var(--ink); }
.d-link-btn:hover .ic { transform: translateX(2px); }

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--raise-2);
  color: var(--ink-3);
  font-family: var(--f-ui);
  font-size: var(--t-11);
  font-weight: 600;
}

/* ── Chips and segments ─────────────────────────────────────────────────── */

.v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  background: var(--raise-2);
  color: var(--ink-2);
  font-size: var(--t-13);
  font-weight: 600;
  transition: background 0.15s var(--e-out), color 0.15s var(--e-out), box-shadow 0.15s var(--e-out);
}
.v-chip-btn:hover { color: var(--ink); }
.v-chip-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

/* A segmented control: one pill track, the chosen segment a pill inside it,
   as the app's own segments are. */
.v-seg,
.d-seg,
.v-for,
.dk-seg {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--raise-2);
}
.v-for::before { display: none; }
.v-seg > button,
.d-seg-btn,
.v-hr,
.dk-seg > button {
  height: 32px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: var(--t-13);
  font-weight: 650;
  white-space: nowrap;
  transition: background 0.15s var(--e-out), color 0.15s var(--e-out), box-shadow 0.15s var(--e-out);
}
.v-seg > button:hover,
.d-seg-btn:hover,
.v-hr:hover,
.dk-seg > button:hover { color: var(--ink); }
.v-seg > button[aria-pressed="true"],
.v-seg > button[aria-selected="true"],
.d-seg-btn[aria-pressed="true"],
.d-seg-btn[aria-selected="true"],
.v-hr[aria-pressed="true"],
.dk-seg > button[aria-pressed="true"] {
  background: var(--raise);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  color: var(--ink);
}

/* ── Fields ──────────────────────────────────────────────────────────────── */

.v-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v-field > span:first-child,
.v-field-k {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  color: var(--ink-2);
  font-size: var(--t-13);
  font-weight: 650;
}
.v-field > span:first-child .v-num,
.v-optional,
.v-claim-optional { color: var(--ink-4); font-style: normal; font-weight: 450; }

.v-input,
.v-note,
.d-reply-input {
  width: 100%;
  min-width: 0;
  height: var(--ctl-h);
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--raise-2);
  color: var(--ink);
  /* 16px, never less: iOS Safari zooms the page into any field set smaller. */
  font-size: var(--t-16);
  outline: 0;
  transition: border-color 0.15s var(--e-out), box-shadow 0.15s var(--e-out);
}
/* A text box keeps the size it was laid out at: no drag handle in the
   corner. Where the browser can, it grows with what is typed instead, up to
   a cap, and scrolls past that. */
textarea.v-input,
textarea.v-note,
textarea.d-reply-input {
  height: auto;
  min-height: 88px;
  max-height: 240px;
  padding: 12px var(--s-4);
  line-height: 1.5;
  resize: none;
  field-sizing: content;
}
select.v-input {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23868992' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.v-input::placeholder,
.v-note::placeholder,
.d-reply-input::placeholder { color: var(--ink-4); }
.v-input:hover,
.v-note:hover,
.d-reply-input:hover { border-color: var(--line-2); }
.v-input:focus,
.v-note:focus,
.d-reply-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}
.v-input[aria-invalid="true"] { border-color: var(--danger); }
input[type="search"].v-input::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.5; }

/* A form's buttons, after its fields, on their own line. */
.v-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }

/* A checkbox that agrees to something. */
.v-consent { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.v-consent input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); }

/* A file drop. */
.v-file,
.v-photo-file { font-size: var(--t-13); color: var(--ink-2); }