/* journal-entry.css — one journal entry (js/views/journal/entry.js; boards
 * JournalEntry / JournalEntryLight).
 *
 * The 2.0 rules (pinned by functions/test/journal-entry.mjs, mirroring
 * shell.mjs): 2.0 token names only, no raw hex, no prefers-color-scheme,
 * relative widths, every class v2- prefixed. The screen root also carries
 * .v2-detail so detail.css's bridge dresses the shared legacy widgets (tag
 * picker, ⋯ menu, notice) and its header / meta / viewer classes are reused.
 * The accent is the Journal iris via body[data-skill="journal"].
 */

/* ---------- Older · 7 of 9 · Newer ---------- */
.v2-je-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 var(--pad-x) 14px;
}
.v2-je-nav__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--t-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.v2-je-nav__btn svg {
  color: var(--accent-ink);
  flex: none;
}
.v2-je-nav__btn--newer {
  justify-content: flex-end;
}
.v2-je-nav__btn.is-off {
  visibility: hidden;
}
.v2-je-nav__pos {
  flex: none;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t-placeholder);
  font-variant-numeric: tabular-nums;
}

/* ---------- panel ---------- */
.v2-je-panel {
  gap: 15px;
  padding-top: 18px;
}
.v2-je-tags {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
/* The list scrolls (app.css .tagpicker__list, 240px); the popover itself
 * doesn't clip, so its V pointer shows (item 3, 2026-10-07). */
.v2-je-picker {
  top: calc(100% + 12px); /* the bubble's gap: room for the pointer */
  max-height: 60vh;
}
.v2-je-tagopt {
  min-height: var(--hit-min);
}
.v2-je-view {
  flex: none;
  margin-left: auto;
}
.v2-je-viewmenu {
  min-width: 11rem;
}
.v2-je-viewmenu__check {
  margin-left: auto;
  display: inline-flex;
  color: var(--accent-ink);
}
.v2-je-titleinput {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--accent-tint-line);
  border-radius: var(--r2-well);
  background: var(--s-well);
  box-shadow: var(--sh-well);
  color: var(--t-primary);
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  outline: none;
}

/* ---------- mood / place chips (2026-10-08 batch, items 3-4) ----------
 * Under the meta line. Set: a pill in a light tint of the Journal accent with
 * accent text, a 17 px icon. Empty: the tag "+"'s dash. One fixed height for
 * both states (and for a missing chip row's neighbours), so nothing moves
 * when a mood or place is set. A long place name ellipsizes; the row wraps
 * on a 320 px screen rather than overflowing. */
.v2-je-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
}
.v2-je-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: var(--r2-round);
  background: var(--accent-tint);
  border: 1px solid transparent;
  color: var(--accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.v2-je-chip svg {
  flex: none;
}
.v2-je-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The place chip (item 8b): "Sarasota, FL · 75°F Rain". The name gives
 * way (ellipsis) before the temperature + condition, which never shrink;
 * the row wraps the chip to its own line before anything overflows. */
.v2-je-chip--place {
  gap: 4px;
}
.v2-je-chip--place svg {
  margin-right: 2px;
}
.v2-je-chip .v2-je-chip__name {
  flex: 0 1 auto;
}
.v2-je-chip .v2-je-chip__wx {
  flex: none;
  overflow: visible;
}
.v2-je-chip.is-empty {
  background: transparent;
  border: 1px dashed var(--dash-line);
  color: var(--t-nav-off);
}
.v2-je-chip.is-busy {
  cursor: default;
  opacity: 0.7;
}
/* 32 px visual, 44 px hit */
.v2-je-chip::after {
  content: "";
  position: absolute;
  inset: -6px -2px;
}

/* the mood sheet: five 44 px faces in a row */
.v2-je-moods {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 18px auto 0;
  max-width: 20rem;
}
.v2-je-mood {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--r2-round);
  background: var(--s-chip);
  color: var(--t-nav);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.v2-je-mood.is-sel {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.v2-je-moodlabel {
  min-height: 1.4em;
  margin: 12px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-ink);
}
.v2-je-moodhint {
  min-height: 1.4em;
  margin: 2px 0 6px;
  text-align: center;
  font-size: 12.5px;
  color: var(--t-muted);
}

/* the place sheet: the current place (+ its weather and Remove), the
 * current-location row (iOS app only), the typed row */
.v2-je-placecur {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--r2-card);
  background: var(--accent-tint);
  min-width: 0;
}
.v2-je-placecur__icon {
  flex: none;
  display: flex;
  color: var(--accent-ink);
}
.v2-je-placecur__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v2-je-placecur__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--t-primary);
  overflow-wrap: anywhere;
}
.v2-je-placecur__wx {
  font-size: 13px;
  color: var(--t-muted);
}
.v2-je-placecur__remove {
  flex: none;
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--danger);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.v2-je-placecur__remove::after {
  content: "";
  position: absolute;
  inset: -12px -8px;
}
.v2-je-placecredit {
  margin: 6px 2px 0;
  font-size: 11.5px;
  color: var(--t-muted);
}
.v2-je-placerow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--r2-card);
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
  color: var(--t-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.v2-je-placerow:disabled {
  cursor: default;
}
.v2-je-placerow__tile {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.v2-je-placerow__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v2-je-placerow__title {
  font-size: 15px;
  font-weight: 600;
}
.v2-je-placerow__sub {
  font-size: 12.5px;
  color: var(--t-muted);
}
.v2-je-placerow__end {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--t-chevron);
}
.v2-je-placetyped {
  display: block;
  margin-top: 16px;
}
.v2-je-placetyped__label {
  display: block;
  margin: 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--t-nav);
}
.v2-je-placetyped .v2-je-placetyped__row {
  margin-top: 8px;
}

/* ---------- AI tag suggestions ---------- */
.v2-je-suggs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-je-sugg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--r2-card);
  background: var(--accent-glass-tint);
  border: 1px solid var(--accent-glass-line);
  min-width: 0;
}
.v2-je-sugg__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t-muted);
}
.v2-je-sugg__label svg {
  width: 13px;
  height: 13px;
  color: var(--accent-ink);
}
.v2-je-sugg__chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px dashed var(--accent-tint-line);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 620;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.v2-je-sugg__acts {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex: none;
}
.v2-je-sugg__btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--r2-round);
  background: none;
  color: var(--t-nav-off);
  cursor: pointer;
}
.v2-je-sugg__btn svg {
  width: 16px;
  height: 16px;
}
.v2-je-sugg__btn.is-yes {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---------- body ---------- */
.v2-je-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.v2-je-text {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.v2-je-para {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--t-body);
  text-wrap: pretty;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.v2-je-para.is-empty {
  color: var(--t-muted);
}
.v2-je-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v2-je-points__item {
  position: relative;
  padding-left: 18px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--t-body);
  overflow-wrap: anywhere;
}
/* "Short title — gist" (Randy 2026-10-03): the title bold on its own line,
 * the gist under it; the bullet sits on the title line. */
.v2-je-points__item.has-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v2-je-points__title {
  font-weight: 650;
  color: var(--t-primary);
}
.v2-je-points__gist {
  font-size: 15px;
  color: var(--t-body);
}
.v2-je-points__item::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
}
.v2-je-tidynote {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r2-well);
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  font-size: 13px;
  line-height: 1.4;
  color: var(--t-muted);
}
.v2-je-tidynote__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

/* processing · held · failed */
.v2-je-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 14px 16px;
  border-radius: var(--r2-card);
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
}
.v2-je-state__dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--accent);
  flex: none;
  animation: v2-je-pulse 1.4s ease-in-out infinite;
}
.v2-je-state__text {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--t-body);
}
.v2-je-state.is-failed {
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.v2-je-state__link {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--accent-ink);
  text-decoration: none;
}
.v2-je-state__btn {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r2-round);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
}
.v2-je-state__btn:disabled {
  opacity: 0.6;
}
@keyframes v2-je-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* ---------- ask for a photo ---------- */
.v2-je-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r2-card);
  background: var(--accent-glass-tint);
  border: 1px solid var(--accent-glass-line);
}
.v2-je-ask__text {
  margin: 0;
  flex: 1 1 10rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--t-primary);
}
.v2-je-ask__acts {
  display: flex;
  gap: 6px;
}
.v2-je-ask__btn {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r2-round);
  background: var(--s-chip);
  color: var(--t-nav);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.v2-je-ask__btn.is-primary {
  background: var(--accent);
  color: var(--on-accent);
}

/* The blocks re-rendered in place (photos, links, mood + place chips, the
 * confirms, the viewer — entry.js renderParts): layout-neutral wrappers, so
 * the panel's 15px gap and every child rule are unchanged. */
.v2-je-part {
  display: contents;
}

/* ---------- photos ---------- */
.v2-je-photos {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.v2-je-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.v2-je-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  font: inherit;
  cursor: pointer;
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
}
.v2-je-thumb__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-chevron);
}
.v2-je-thumb__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 160ms ease;
}
.v2-je-thumb.has-img .v2-je-thumb__img {
  opacity: 1;
}
.v2-je-thumb.has-img .v2-je-thumb__ph {
  visibility: hidden;
}
/* ---------- links (2026-10-08 batch, item 2) ----------
 * The recipe's source card (cookbook-recipe.css .v2-rc__srccard) in the
 * Journal accent: a raised card — 48 px thumb (radius 10), the title, the
 * domain + path muted, a chevron. Fixed height whether or not the preview
 * has arrived, so nothing moves when it fills in. Press and hold = remove,
 * so no iOS link menu and no text selection on the card. */
.v2-je-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.v2-je-linklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-je-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 12px 8px 8px;
  border-radius: var(--r2-card);
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
  color: var(--t-primary);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.v2-je-link:active {
  transform: translateY(1px);
}
.v2-je-link__thumb {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--accent-tint);
}
.v2-je-link__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-ink);
}
.v2-je-link__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 160ms ease;
  -webkit-touch-callout: none;
  pointer-events: none;
}
.v2-je-link__thumb.has-img .v2-je-link__img {
  opacity: 1;
}
.v2-je-link__thumb.has-img .v2-je-link__ph {
  visibility: hidden;
}
.v2-je-link__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v2-je-link__title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--t-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-je-link__url {
  font-size: 12px;
  line-height: 1.3;
  color: var(--t-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-je-link__go {
  flex: none;
  display: flex;
  color: var(--t-chevron);
}
/* The "Add link" row wears the Add a photo control (detail.css .v2-dph-add,
 * batch 3 item 2c) — nothing of its own here. */

/* ---------- the entry's sheets (Add link; Mood and Place below) ---------- */
.v2-je-lsrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.v2-je-lsrow__input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--hit-min);
  box-sizing: border-box;
  padding: 0 12px;
  outline: none;
}
.v2-je-lsrow__input:focus {
  border-color: var(--accent-tint-line);
}
.v2-je-lsrow__paste {
  flex: none;
  margin-left: 0;
}
.v2-je-sheet__err {
  min-height: 1.4em;
  margin: 8px 2px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--danger);
}
.v2-je-sheet__err:empty {
  visibility: hidden;
}
.v2-je-sheet__primary {
  width: 100%;
  height: var(--hit-min);
  margin-top: 6px;
  border: 0;
  border-radius: var(--r2-round);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}
.v2-je-sheet__primary:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------- player / missing ---------- */
.v2-je-player {
  min-width: 0;
}

/* ---------- deleted / load error ---------- */
.v2-je-gone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}
.v2-je-gone__text {
  margin: 0;
  font-size: 15px;
  color: var(--t-body);
}
.v2-je-gone__link {
  font-size: 14px;
  font-weight: 650;
  color: var(--accent-ink);
  text-decoration: none;
}

/* ---------- confirms (the red delete, the neutral redo) ---------- */
.v2-je-cbox {
  background: var(--s-panel);
  border: 1px solid var(--raised-line);
  border-radius: var(--r2-card);
  color: var(--t-primary);
}
.v2-je-cbody {
  color: var(--t-muted);
}
.v2-je-cbtn--cancel {
  background: var(--s-chip);
  color: var(--t-nav);
}
.v2-je-cbtn--danger {
  background: var(--danger);
  color: var(--on-accent);
}
.v2-je-cbtn--ok {
  background: var(--accent);
  color: var(--on-accent);
}

/* The viewer's Delete reads red here (the meetings viewer's accent IS red-pink). */
.v2-je-viewdel {
  color: var(--danger);
}

/* ---------- Edit entry (2026-10-08 batch 2, item 8a) ----------
 * The panel keeps its layout: the title and body become wells in place
 * (the rename field's look), photo tiles and link cards keep their size and
 * gain a ×. The header keeps its box: Cancel where Back sits, Save (the
 * Journal accent) where Share | ⋯ sit, at the action pill's height. */
.v2-je-editsave {
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
}
.v2-je-editcancel:disabled {
  opacity: 0.6;
}
.v2-je-bodyinput {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 7.5em;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--accent-tint-line);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--t-primary);
  resize: none;
  overflow: hidden;
  outline: none;
  overflow-wrap: anywhere;
}
/* The title wraps like the heading it replaces (a one-line input cut a
 * long title off). */
.v2-je-titlearea {
  display: block;
  resize: none;
  overflow: hidden;
  line-height: inherit;
}
.v2-je-edithint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--t-muted);
}
.v2-je-thumb.is-editing {
  display: block;
  cursor: default;
}
.v2-je-link.is-editing {
  cursor: default;
}
.v2-je-link__rm {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r2-round);
  background: var(--s-well);
  color: var(--t-muted);
  cursor: pointer;
}
/* 28 px visual, 44 px hit */
.v2-je-link__rm::after {
  content: "";
  position: absolute;
  inset: -8px;
}
.v2-je-view > :disabled {
  cursor: default;
  opacity: 0.6;
}

/* ---- Tap-to-edit (batch 8 §8b, Randy 2026-10-12) ----
 * The shared in-place editor (js/inline-edit.js; the box itself is app.css
 * .iedit, as Meetings uses it) on a paragraph or a key point of the version
 * on screen, in the Journal's own accent. Geometry is the shared box's —
 * the text sits where the resting text sat; only the colours are the
 * Journal's. */
.v2-je .v2-je-para.editable,
.v2-je .v2-je-points__item.editable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.v2-je .v2-je-para.is-editing {
  white-space: normal;
}
.v2-je .v2-je-points__item.is-editing {
  display: block;
}
.v2-je .iedit {
  border-color: var(--accent);
  border-radius: var(--r2-well);
}
.v2-je .iedit__field {
  caret-color: var(--accent);
  white-space: pre-wrap;
}
.v2-je .iedit__btn--save {
  background: var(--accent);
  color: var(--on-accent);
}
.v2-je .iedit__btn--cancel {
  border-color: var(--raised-line);
  color: var(--t-muted);
}
.v2-je .iedit--pulse {
  animation-name: jeEditPulse;
}
@keyframes jeEditPulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 4px var(--accent-tint-line); }
}