/*
 * Diary — day switcher, entry rows (type-led), and the meal entry surface.
 * See docs/views.md.
 */

.day-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

.day-switcher__nav {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-control);
  color: var(--color-muted);
  text-decoration: none;
}

.day-switcher__nav:hover {
  background: var(--color-bg);
  color: var(--color-ink);
  text-decoration: none;
}

.day-switcher__nav svg {
  width: 20px;
  height: 20px;
}

.day-switcher__nav--off {
  opacity: .35;
}

.day-switcher__label {
  flex: 1;
  text-align: center;
}

.day-switcher__label b {
  display: block;
  font-size: var(--text-body);
  font-weight: var(--weight-label-strong);
  text-transform: capitalize;
}

.day-switcher__label span {
  display: block;
  font-size: var(--text-small);
  color: var(--color-muted);
  text-transform: capitalize;
}

/* Quick-add — type a meal (with inline catalog linking) + optional type, created
   from the day view. Reuses the .canvas reference editor. */
.quick-add {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

/* On the white quick-add card, tint the editor box so it reads as an input. */
.quick-add .canvas__box {
  background: var(--color-bg);
}

.quick-add__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.quick-add__types {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.quick-add__types .seg__pill {
  padding: 6px 11px;
  font-size: var(--text-small);
}

.quick-add__send {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: none;
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
}

.quick-add__send:hover {
  background: var(--color-accent-strong);
}

.quick-add__send svg {
  width: 22px;
  height: 22px;
}

.day-empty {
  padding: var(--space-6) 0;
  color: var(--color-muted);
  text-align: center;
}

/* Entry rows — led by the meal-type tag, no clock. */
.entry {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  color: inherit;
  text-decoration: none;
}

.entry:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}

.entry .tag--meal {
  flex: none;
}

.entry__body {
  flex: 1;
  min-width: 0;
}

.entry__body h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Calendar (month view — visualisation + jump-to-day) ---------- */
.cal-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.cal-nav__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-control);
  color: var(--color-muted);
  text-decoration: none;
}

.cal-nav__btn:hover {
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.cal-nav__btn svg {
  width: 20px;
  height: 20px;
}

.cal-nav__label {
  flex: 1;
  text-align: center;
  font-size: var(--text-title);
  font-weight: var(--weight-heading);
}

.cal__weekdays,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

.cal__weekday {
  padding-bottom: var(--space-2);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-eyebrow);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-muted);
}

.cal__day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-body);
  text-decoration: none;
}

a.cal__day:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}

/* Padding cells (days from the neighbouring months) — inert, faded. */
.cal__day--pad {
  border-color: transparent;
  background: none;
  color: var(--color-muted);
  opacity: .4;
}

/* Days with meals logged — tinted so they read at a glance. */
.cal__day--logged {
  border-color: transparent;
  background: var(--color-accent-tint);
  color: var(--color-accent-strong);
  font-weight: var(--weight-label-strong);
}

/* Today — accent ring; declared last so it wins the border when also logged. */
.cal__day--today {
  border-color: var(--color-accent);
  font-weight: var(--weight-label-strong);
}

/* ---------- Meal entry surface: inline reference editor ----------
   A native <textarea> over a highlight backdrop. Both layers share identical
   text metrics, so the blue marks paint exactly behind the linked words while
   the textarea carries the real (mobile-native) input. See docs/views.md. */
.canvas {
  margin-bottom: var(--space-1);
}

.canvas__box {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.canvas__box:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.canvas__backdrop,
.canvas__input {
  margin: 0;
  padding: var(--space-3);
  font-family: inherit;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: inherit;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  box-sizing: border-box;
  width: 100%;
}

.canvas__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  color: transparent;
  pointer-events: none;
  overflow: hidden;
}

.canvas__input {
  position: relative;
  display: block;
  min-height: calc(var(--control-input-h) * 1.4);
  border: 0;
  background: transparent;
  color: var(--color-ink);
  resize: none;
  overflow-y: auto;
}

.canvas__input:focus {
  outline: none;
}

/* The blue highlight painted behind a linked word (backdrop layer). */
.canvas__mark {
  border-radius: 5px;
  background: var(--color-reference-tint);
  color: transparent;
}

/* Read view: linked words in a saved title (diary list) — real coloured text. */
.ref {
  border-radius: 5px;
  padding: 0 2px;
  background: var(--color-reference-tint);
  color: var(--color-reference);
  font-weight: var(--weight-label);
}

/* Linked-foods summary under the editor: one unlink pill per reference. */
.ref-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ref-list:empty {
  display: none;
}

.ref-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 5px 5px 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--color-reference-tint);
  color: var(--color-reference);
  font-size: var(--text-small);
  font-weight: var(--weight-label);
}

/* Destroyed (unlinked) tags stay in the DOM to submit _destroy, but hidden —
   the class's own display would otherwise override the [hidden] attribute. */
.ref-tag[hidden] {
  display: none;
}

.ref-tag__x {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: var(--radius-pill);
  background: none;
  color: inherit;
  opacity: .7;
  cursor: pointer;
}

.ref-tag__x:hover {
  opacity: 1;
}

.ref-tag__x svg {
  width: 13px;
  height: 13px;
}

/* Suggestions — a floating autocomplete anchored under the editor box. */
.sugg {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: var(--space-1) 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-floating);
}

.sugg:empty {
  display: none;
}

.sugg__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.sugg__row--active,
.sugg__row:hover {
  background: var(--color-bg);
}

.sugg__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-body);
  color: var(--color-ink);
}

.sugg__hint {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  color: var(--color-muted);
}