/* Daily Life Doc, round 13 (zone F2): the Updates tab of a client's page, as the page "Expert Plans" draws it ("From a
   text to Updates"): a card with "Updates", the client's days, and one row per entry (time, kind, values, follow-ups,
   files, "↗ line · Text · Answered", a suggestion with Apply and Skip, the pencil). js/updates/*.js. */

.xv.upd { display: flex; flex-direction: column; min-height: 100%; border-radius: 18px; background: var(--card); text-align: left; }
.xv .xbar { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--cardline); }
.xv .xt { font-size: var(--t-sm); font-weight: 600; }
.xv .xt span { font-weight: 400; color: var(--ink3); font-size: var(--t-xs); }
.xv .xbody { flex: 1; padding: 6px 16px 16px; }
.udh { padding: 14px 0 4px; font-size: var(--t-xs); font-weight: 600; color: var(--ink3); }
.ue { display: grid; grid-template-columns: 104px 62px minmax(0, 1fr) 28px; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--cardline); font-size: var(--t-sm); }
.ue.fl { animation: ue-flash 2.4s ease both; }
@keyframes ue-flash { 0%, 30% { background: var(--pc-bg); } 100% { background: transparent; } }
.ue .tm { display: flex; flex-direction: column; padding-top: 2px; font-size: var(--t-xs); color: var(--ink3); white-space: nowrap; }
.ue .tm small { font-size: var(--t-2xs); opacity: .8; }
@media (max-width: 880px) { .ue .tm small { white-space: normal; } }
.ue .uk { justify-self: start; }
.uk { padding: 1px 8px; border-radius: 6px; background: var(--soft); color: var(--ink2); font-size: var(--t-2xs); font-weight: 600; line-height: 20px; white-space: nowrap; }
.uk.k-log { background: var(--try-bg); color: var(--try-d); }
.uk.k-answer { background: var(--good-bg); color: var(--good-d); }
.uk.k-photo, .uk.k-video, .uk.k-voice { background: var(--note); color: var(--note-d); }
.uk.k-call { background: var(--atlas-bg); color: var(--atlas-d); }
.ue .tx { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.um { font-weight: 500; overflow-wrap: anywhere; }
.uq { color: var(--ink2); overflow-wrap: anywhere; }
.ufu { color: var(--ink2); }
.ufu b { font-weight: 500; color: var(--ink); }
.umeta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--t-xs); color: var(--ink3); }
.umeta > *:not(:last-child)::after { content: '·'; margin-left: 6px; color: var(--ink3); font-weight: 400; }
.ul { color: var(--note-d); font-weight: 600; font-size: var(--t-xs); text-align: left; }
.us.answered { color: var(--good-d); font-weight: 600; }
.us.corrected { color: var(--note-d); font-weight: 600; }
.us.noreply { color: var(--ink3); font-weight: 600; }
.usug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.usug .ust { padding: 3px 11px; border-radius: 999px; background: var(--atlas-bg); color: var(--atlas-d); font-size: var(--t-xs); font-weight: 600; }
.usug.busy { opacity: .5; pointer-events: none; }
.usug.done .ust { background: var(--soft); color: var(--ink3); font-weight: 500; }
.uok { color: var(--good-d); font-size: var(--t-xs); font-weight: 600; }
.ufiles { display: flex; flex-wrap: wrap; gap: 6px; }
.uf img { display: block; width: 120px; height: 90px; object-fit: cover; border-radius: 10px; background: var(--field); }
.uf video { display: block; width: 200px; border-radius: 10px; }
.uf audio { display: block; width: 240px; height: 36px; }
.utr { color: var(--ink2); font-style: italic; overflow-wrap: anywhere; }
.ue .ed { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--ink3); }
.ue .ed svg { width: 14px; height: 14px; }
.ue .ed:hover { background: var(--soft); color: var(--ink); }
.uin { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; font-weight: 500; }
.uin input { width: 90px; padding: 4px 8px; border: 0; border-radius: 8px; background: var(--field); font: inherit; color: var(--ink); }
.uhist:empty { display: none; }
.uhist { width: 100%; }
.uhist .hist { margin: 6px 0 2px; }

/* At phone width the row keeps the computer's order on one line: time, kind, the words, the pencil (DR 18). */
@media (max-width: 880px) {
  .xv .xbody { padding: 4px 12px 12px; }
  .ue { grid-template-columns: 64px 56px minmax(0, 1fr) 24px; gap: 6px; }
  .ue .ed { width: 24px; }
}