/* css/leave.css: the composer, `leave` drawer state (SPEC §9.5, from Leave.dc.html). Owner: COMPOSE.
 *
 * Everything is scoped under .lv (the body) and .lv-foot (the sticky #dfoot content).
 * Tokens come from :root in index.html: --bg --fg --dim --faint --accent --inherit --sans --mono.
 * Person colors appear only through palette.js marks and names (inline --c); never on controls.
 * The accent red is reserved for "one witness left", so the recording dot is --fg, not red.
 */

.lv,
.lv-foot {
  --lv-line: var(--faint, #1F2878);
  --lv-soft: var(--dim, #5D618C);
  --lv-ink: var(--fg, #1F2878);
  --lv-paper: var(--bg, #F1E6D3);
}

.lv [hidden],
.lv-foot [hidden],
.lv[hidden],
.lv-foot[hidden] { display: none !important; }

.lv {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px 0 28px;
  color: var(--lv-ink);
  font-family: var(--sans);
}

/* ---------- type ---------- */

.lv-k {
  font: 300 10px/1.4 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lv-ink);   /* §21.7.4: a form label is never mute */
}
@media (max-width: 699px) { .lv-k { font-size: 12px; } }

.lv-soft {
  font: 300 13px/1.5 var(--sans);
  color: var(--lv-soft);
}

.lv-hint {
  margin: 0;
  font: 300 10px/1.6 var(--mono);
  letter-spacing: .06em;
  color: var(--lv-soft);
}

.lv-msg {
  margin: 0;
  font: 300 13px/1.5 var(--sans);
  color: var(--lv-ink);
  border-left: 1px solid var(--lv-ink);
  padding-left: 10px;
}

.lv-lede {
  margin: 0;
  font: 300 17px/1.5 var(--sans);
}

.lv-carry {
  margin: 0;
  font: 300 13px/1.5 var(--sans);
  color: var(--lv-ink);
  border-left: 1px solid var(--lv-soft);
  padding-left: 10px;
}

.lv-note {
  margin: 0;
  font: 300 10px/1.6 var(--mono);
  letter-spacing: .06em;
  color: var(--lv-soft);
}

.lv-val {
  font: 300 12px/1.5 var(--mono);
  letter-spacing: .06em;
  color: var(--lv-ink);
}

/* ---------- inputs ---------- */

.lv-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lv-in {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lv-line);
  border-radius: 0;
  color: var(--lv-ink);
  caret-color: var(--lv-ink);
  font: 300 14px/1.4 var(--sans);
  padding: 8px 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.lv-in::placeholder { color: var(--lv-soft); opacity: 1; }
.lv-in:focus,
.lv-in:focus-visible { border-bottom-color: var(--lv-ink); }

.lv-title-in {
  font-size: 20px;
  line-height: 1.3;
  padding: 10px 0;
}

.lv-memo {
  min-height: 96px;
  resize: vertical;
  font-size: 17px;
  line-height: 1.6;
  padding: 10px 0;
}

.lv-sel {
  max-width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: var(--lv-ink);
  border: 0;
  border-bottom: 1px solid var(--lv-line);
  border-radius: 0;
  font: 300 12px/1.4 var(--mono);
  letter-spacing: .06em;
  padding: 6px 18px 6px 0;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--lv-soft) 50%), linear-gradient(135deg, var(--lv-soft) 50%, transparent 50%);
  background-position: calc(100% - 7px) 55%, calc(100% - 3px) 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.lv-sel:focus,
.lv-sel:focus-visible { border-bottom-color: var(--lv-ink); }
.lv-sel option { background: var(--lv-paper); color: var(--lv-ink); }

.lv-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  clip: rect(0 0 0 0);
}

/* ---------- buttons ---------- */

.lv-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--lv-soft);
  background: transparent;
  color: var(--lv-ink);
  font: 300 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.lv-btn:hover,
.lv-btn:focus-visible { border-color: var(--lv-ink); outline: none; }
.lv-btn.primary {
  background: var(--lv-ink);
  color: var(--lv-paper);
  border-color: var(--lv-ink);
}
.lv-btn.primary:hover,
.lv-btn.primary:focus-visible { box-shadow: 0 0 0 2px var(--lv-paper), 0 0 0 3px var(--lv-ink); }
.lv-btn:disabled {
  color: var(--lv-soft);
  border-color: var(--lv-soft);
  cursor: default;
  box-shadow: none;
}
.lv-btn.primary:disabled { background: var(--lv-soft); border-color: var(--lv-soft); color: var(--lv-paper); }
.lv-wide { width: 100%; }

.lv-place {
  min-height: 52px;
  font-size: 12px;
  letter-spacing: .18em;
}

.lv-pill {
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--lv-line);
  background: transparent;
  color: var(--lv-ink);   /* PHOTO, VOICE: a control's words are never mute (§21.7.4); disabled stays soft */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 300 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.lv-pill .lv-ic { color: var(--lv-ink); flex: none; }
.lv-pill:hover,
.lv-pill:focus-visible { border-color: var(--lv-ink); color: var(--lv-ink); outline: none; }
.lv-pill[aria-expanded="true"] { border-color: var(--lv-ink); color: var(--lv-ink); }
.lv-pill:disabled { color: var(--lv-soft); border-color: var(--lv-soft); cursor: default; }

.lv-sbtn {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--lv-soft);
  background: transparent;
  color: var(--lv-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 300 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.lv-sbtn:hover,
.lv-sbtn:focus-visible { border-color: var(--lv-ink); outline: none; }
.lv-sbtn:disabled { color: var(--lv-soft); border-color: var(--lv-soft); cursor: default; }

.lv-tbtn {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lv-soft);
  font: 300 10px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--lv-line);
  text-underline-offset: 4px;
  cursor: pointer;
}
.lv-tbtn:hover,
.lv-tbtn:focus-visible { color: var(--lv-ink); text-decoration-color: var(--lv-ink); outline: none; }
.lv-tbtn:disabled { color: var(--lv-soft); border-color: var(--lv-soft); cursor: default; }

.lv-x {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lv-soft);
  font: 300 18px/1 var(--mono);
  cursor: pointer;
  border-radius: 999px;
}
.lv-x:hover,
.lv-x:focus-visible { color: var(--lv-ink); outline: 1px solid var(--lv-line); }
.lv-x:disabled { color: var(--lv-soft); cursor: default; }

.lv-grow { flex: 1 1 auto; min-width: 0; }
.lv-sep { color: var(--lv-soft); font: 300 10px var(--mono); }

/* ---------- attachments ---------- */

.lv-attach {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lv-photos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lv-photos:empty { display: none; }

.lv-ph {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 32px;
  gap: 12px;
  align-items: center;
}
.lv-ph-solo { grid-template-columns: 72px minmax(0, 1fr) 32px; }

.lv-ph-img {
  width: 72px;
  height: 72px;
  background: var(--lv-line);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.lv-ph-img img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
}
.lv-ph-img.is-wait {
  background: transparent;
  border: 1px dashed var(--lv-line);
  box-sizing: border-box;
}
.lv-wait {
  font: 300 12px var(--mono);
  color: var(--lv-soft);
  letter-spacing: .2em;
}

.lv-cap-in { font-size: 13px; }

/* recorder / voice clip */
.lv-rec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lv-recline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  flex-wrap: wrap;
}
.lv-reclabel,
.lv-cliplabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 300 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lv-ink);
}
.lv-cliplabel .lv-ic { color: var(--lv-ink); }
.lv-rectime,
.lv-time {
  font: 300 11px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--lv-ink);
  font-variant-numeric: tabular-nums;
}
.lv-time { color: var(--lv-soft); }

.lv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lv-ink);
  display: inline-block;
  flex: none;
}
.lv-dot.is-live { animation: lv-blink 1.2s steps(2, jump-none) infinite; }
@keyframes lv-blink { 50% { opacity: .25; } }

.lv-mini {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lv-play {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--lv-soft);
  background: transparent;
  color: var(--lv-ink);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.lv-play:hover,
.lv-play:focus-visible { border-color: var(--lv-ink); outline: none; }

/* from your work */
.lv-work {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0 0;
  border-top: 1px solid var(--lv-line);
}
.lv-workhead {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lv-workimg { display: flex; flex-direction: column; align-items: flex-start; }
.lv-workimg .lv-ph { width: 100%; }

/* someone else's words */
.lv-voiceof {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lv-vline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.lv-vnote {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font: 300 13px/1.5 var(--sans);
}

/* ---------- IT WILL LAND ON ---------- */

.lv-land {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--lv-line);
}
.lv-landhead { color: var(--lv-soft); }
.lv-ontitle {
  margin: 0;
  font: 300 17px/1.35 var(--sans);
  color: var(--lv-ink);
}

.lv-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.lv-row > .lv-k { padding-top: 2px; }
.lv-v {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lv-step {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.lv-stepb {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--lv-ink);
  font: 300 18px/1 var(--mono);
  cursor: pointer;
  border-radius: 999px;
}
.lv-stepb:hover,
.lv-stepb:focus-visible { outline: 1px solid var(--lv-line); }
.lv-stepb:disabled { color: var(--lv-line); cursor: default; outline: none; }
.lv-year {
  width: 5ch;
  text-align: center;
  font: 300 15px/1.2 var(--mono);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  padding: 4px 0;
}

.lv-where {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
}
.lv-where .lv-sel { max-width: 60%; }
.lv-newplace { flex: 1 1 140px; width: auto; font: 300 12px/1.4 var(--mono); letter-spacing: .06em; }
.lv-spot { flex: 1 1 120px; width: auto; font: 300 12px/1.4 var(--mono); letter-spacing: .06em; }

.lv-who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.lv-who.is-static {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.lv-tag {
  display: inline-flex;
  align-items: center;
  font: 300 13px/1.4 var(--sans);
}
.lv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.lv-chip {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--lv-line);
  border-radius: 999px;
  background: transparent;
  color: var(--lv-ink);
  display: inline-flex;
  align-items: center;
  font: 300 13px/1 var(--sans);
  cursor: pointer;
  max-width: 100%;
}
.lv-chip:hover,
.lv-chip:focus-visible { border-color: var(--lv-ink); outline: none; }
.lv-chip .ptag { overflow: hidden; text-overflow: ellipsis; }
/* Removed: the name leaves its color for --dim and is struck through (person color is never dimmed). */
.lv-chip.is-off { border-style: dashed; }
.lv-chip.is-off .ptag-name {
  color: var(--lv-soft) !important;
  text-decoration: line-through;
}
.lv-chip.is-off .mk {
  background: transparent !important;
  border-color: var(--lv-soft) !important;
}
.lv-chip.is-off .ptag-years { text-decoration: line-through; }
.lv-none { padding: 6px 0; }
.lv-more { text-decoration: none; color: var(--lv-ink); }
.lv-more[aria-expanded="true"] { text-decoration: underline; }

.lv-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 12px 0 2px;
  border-top: 1px dashed var(--lv-line);
  width: 100%;
}
.lv-picker .lv-hint { flex: 1 1 100%; }

.lv-see {
  font: 300 12px/1.6 var(--mono);
  letter-spacing: .06em;
  color: var(--lv-ink);
  overflow-wrap: anywhere;
}

.lv-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 300 13px/1.4 var(--sans);
  color: var(--lv-soft);
  cursor: pointer;
  min-height: 32px;
}
.lv-check input {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  flex: none;
  border: 1px solid var(--lv-soft);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.lv-check input:checked { background: var(--lv-ink); border-color: var(--lv-ink); }
.lv-check input:checked::after {
  content: '';
  width: 6px;
  height: 3px;
  border-left: 1px solid var(--lv-paper);
  border-bottom: 1px solid var(--lv-paper);
  transform: translateY(-1px) rotate(-45deg);
}
.lv-check input:focus-visible { outline: 1px solid var(--lv-ink); outline-offset: 2px; }
.lv-check:hover { color: var(--lv-ink); }

.lv-later {
  margin: 0;
  font: 300 13px/1.5 var(--sans);
  color: var(--inherit, #5D618C);
}

/* ---------- ALREADY HERE ---------- */

.lv-dup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--lv-line);
}
.lv-duphead { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.lv-duptitle { font: 300 15px/1.4 var(--sans); color: var(--lv-ink); }
.lv-dupline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

/* ---------- foot ---------- */

.lv-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lv-err {
  margin: 0;
  font: 300 13px/1.5 var(--sans);
  color: var(--lv-ink);
  border-left: 1px solid var(--lv-ink);
  padding-left: 10px;
}
.lv-off {
  margin: 0;
  font: 300 10px/1.6 var(--mono);
  letter-spacing: .06em;
  color: var(--lv-soft);
}
.lv-demo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.lv-demo .lv-tbtn { align-self: center; }
.lv-demotext {
  margin: 0;
  font: 300 15px/1.5 var(--sans);
  color: var(--lv-ink);
}

/* drag and drop */
.lv-dropping { outline: 1px dashed var(--lv-soft); outline-offset: -8px; }

/* ---------- phone (< 700 px): 16 px inputs so iOS does not zoom; tighter label column ---------- */

@media (max-width: 699px) {
  .lv { gap: 24px; }
  .lv-in,
  .lv-sel,
  .lv-cap-in,
  .lv-newplace,
  .lv-spot,
  .lv-year { font-size: 16px; }
  .lv-row { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
  .lv-where .lv-sel { max-width: 100%; }
  .lv-chip { min-height: 40px; }
  .lv-stepb,
  .lv-x,
  .lv-play { width: 40px; height: 40px; }
  .lv-pills .lv-pill { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-dot.is-live { animation: none; }
}

/* §21.7 (WCAG 2.4.7): the resting line is already ink, so focus shows as an outline on every field and pill */
.lv-in:focus-visible, .lv-sel:focus-visible, .lv-pill:focus-visible, .lv-chip:focus-visible { outline: 1px solid var(--lv-ink); outline-offset: 2px; }