/* Daily Life Doc, round 38 (zone R): the top of a client's Progress tab (the page "Goals, Progress, Instructions",
   Part 5): the week's line, the topic cards two to a row (one at a phone width) with the label, the goal's words, the
   chart (an inline SVG to scale, or the done days, or the client's words), the targets this week against last, the
   analysis and Next; Keep, Hide, Make it a goal; the hidden topics; "Log" above the entries; "+ Topic" in the bar.
   js/updates/progress-card.js, progress-chart.js, updates-tab.js. */

.xv.upd .xbar { gap: 8px; }
.pr-add { margin-left: auto; }
.pr-in { margin-left: auto; width: 180px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--field); font: inherit; font-size: var(--t-xs); color: var(--ink); }
.pr-sec { display: grid; gap: 12px; padding: 10px 0 4px; }
.pr-week { padding: 12px 14px; border-radius: 14px; background: var(--app2); font-size: var(--t-sm); line-height: 1.5; }
.pr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1100px) { .pr-grid { grid-template-columns: minmax(0, 1fr); } }
.pr-card { display: grid; gap: 9px; align-content: start; min-width: 0; padding: 14px 16px; border-radius: 14px; background: var(--app2); animation: tp-in var(--m-add) var(--ease-out) both; }
.pr-card.busy { opacity: .5; pointer-events: none; }
@keyframes tp-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-head b { font-size: var(--t-m); font-weight: 600; }
.pr-st { padding: 1px 8px; border-radius: 6px; font-size: var(--t-2xs); font-weight: 600; line-height: 20px; white-space: nowrap; }
.pr-st.ok { background: var(--good-bg); color: var(--good-d); }
.pr-st.behind { background: var(--try-bg); color: var(--try-d); }
.pr-st.new { background: var(--note); color: var(--note-d); }
.pr-st.track { background: var(--atlas-bg); color: var(--atlas-d); }
.pr-hide { margin-left: auto; padding: 2px 6px; border-radius: 6px; color: var(--ink3); font-size: var(--t-2xs); }
.pr-hide:hover { background: var(--soft); color: var(--ink); }
.pr-goal { font-size: var(--t-xs); color: var(--ink3); }
.pr-none { font-size: var(--t-xs); color: var(--ink3); }
.pr-sum { font-size: var(--t-sm); line-height: 1.5; color: var(--ink); }
.pr-next { font-size: var(--t-xs); color: var(--ink2); }
.pr-next b { font-weight: 600; color: var(--sage-d); }
.pr-acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* The chart: bars to scale with the values, the goal's dashed line, the days under them. */
.pr-svg { display: block; width: 100%; height: auto; max-height: 150px; overflow: visible; }
.pr-bar { fill: var(--atlas-d); opacity: .8; }
.pr-val { fill: var(--ink2); font-size: 9.5px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.pr-day { fill: var(--ink3); font-size: 9.5px; text-anchor: middle; }
.pr-base { stroke: var(--cardline); stroke-width: 1; }
.pr-line { stroke: var(--ink3); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .7; }
.pr-key { font-size: var(--t-2xs); color: var(--ink3); }
.pr-days { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)) 40px; gap: 5px; align-items: center; font-size: var(--t-2xs); }
.pr-days .pr-dl { color: var(--ink3); text-align: center; }
.pr-days .pr-rn { color: var(--ink2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-days .pr-dc { text-align: right; color: var(--ink3); font-variant-numeric: tabular-nums; }
.pr-dy { height: 20px; border-radius: 6px; background: var(--field); }
.pr-dy.on { background: var(--sage); }
.pr-dy.miss { box-shadow: inset 0 0 0 1.5px var(--try-d); }
.pr-dy.na { background: transparent; box-shadow: inset 0 0 0 1px var(--cardline); }
.pr-qs { display: grid; gap: 5px; }
.pr-q { padding: 6px 10px; border-radius: 10px; background: var(--card); font-size: var(--t-xs); color: var(--ink); overflow-wrap: anywhere; }
.pr-q i { margin-left: 6px; font-style: normal; color: var(--ink3); font-size: var(--t-2xs); }

/* The targets: this week against last week; green when better, amber when worse. */
.pr-tg, .pr-bs { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px 14px; align-items: baseline; font-size: var(--t-xs); }
.pr-tg .pr-th, .pr-bs .pr-th { font-size: var(--t-2xs); font-weight: 600; color: var(--ink3); }
.pr-tg i { font-style: normal; color: var(--ink3); font-size: var(--t-2xs); }
.pr-tg .pr-tn, .pr-bs .pr-tn { text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-tg .pr-tn.up { color: var(--good-d); }
.pr-tg .pr-tn.dn { color: var(--try-d); }
.pr-tg .pr-tl, .pr-bs .pr-tl { text-align: right; color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pr-hid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink3); }
.pr-hid.busy { opacity: .5; pointer-events: none; }
.pr-log { padding: 16px 0 0; font-size: var(--t-xs); font-weight: 600; color: var(--ink2); }
@media (max-width: 520px) {
  .pr-card { padding: 12px; }
  .pr-days { grid-template-columns: 48px repeat(7, minmax(0, 1fr)) 34px; gap: 4px; }
  .pr-in { width: 140px; }
}
/* Round 38 (zone V, Va; decision 60): the result on activity days against other days (the spec's "Leo's Stress card"). */
.pr-bs { margin-top: 2px; }