/* T-005 goals: strip in the Today hero, editor and goal detail in the drawer (bottom sheet on phone), digest block.
   Colours come from the theme tokens only, so light and dark both work. Status is never colour alone:
   the dot shape changes too and the words are in the summary, the label and the detail. */

/* ───────── Status dot ───────── */
.goal-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.goal-dot.goal-ok { background: var(--pos); }
.goal-dot.goal-risk { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.goal-dot.goal-miss { background: var(--neg); box-shadow: 0 0 0 3px var(--neg-soft); border-radius: 2px; transform: rotate(45deg) scale(0.9); }
.goal-dot.goal-few { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* ───────── Today hero strip ───────── */
.goal-strip { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.goal-strip-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.goal-sum { flex: 1 1 auto; min-width: 0; font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-strip .goal-edit-link { flex: none; font-size: var(--t-xs); gap: 4px; }
.goal-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 6px; }
.goal-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--line);
  text-align: left; min-width: 0;
  transition: border-color var(--t-fast) var(--ease-std), box-shadow var(--t-med) var(--ease-std), transform var(--t-med) var(--ease-out);
}
@media (hover: hover) { .goal-item:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); } .goal-item:active { transform: scale(0.985); } }
.goal-item.pressing { transform: scale(0.985); }
/* Touch screens: scrolling glass is a denser fill, not a backdrop blur (see .layer-tile in styles.css) */
@media (pointer: coarse) { .goal-item { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-strong); } }
.goal-txt { flex: 1 1 auto; min-width: 0; font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-txt small { font-size: var(--t-xs); color: var(--ink-3); }
.goal-val { flex: none; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.goal-mini { display: none; }
.goal-mini-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.goal-mini b { font-weight: 600; color: var(--ink); flex: none; }
.goal-mini small { flex: none; margin-left: auto; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
@container (max-width: 150px) { .goal-mini small { display: none; } }

/* Desktop fit mode: the hero shares the column with the mood chart. When goals are on, the layer
   tiles drop their note line so the chart keeps its room (without goals Today is unchanged). */
@media (min-width: 1180px) and (min-height: 700px) {
  .goal-strip { margin-top: 14px; gap: 6px; }
  .goal-item { min-height: 34px; padding: 4px 11px; }
  .hero:has(.goal-strip) .lt-note { display: none; }
  .hero:has(.goal-strip) .layer-strip { margin-top: 14px; }
  .hero:has(.goal-strip) .hero-metrics { margin-top: 14px; }
}
/* Short desktop windows: one compact row (name, value, goal); the full sentence is in the tooltip and the detail */
@media (min-width: 1180px) and (min-height: 700px) and (max-height: 1000px) {
  .goal-items { display: flex; gap: 6px; }
  .goal-item { flex: 1 1 0; gap: 8px; padding: 4px 10px; container-type: inline-size; }
  .goal-item .goal-txt, .goal-item .goal-val { display: none; }
  .goal-item .goal-mini { display: flex; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0; font-size: var(--t-sm); }
  .hero:has(.goal-strip) .hero-metrics { margin-top: 10px; }
  .hero:has(.goal-strip) .layer-strip { margin-top: 12px; }
}
@media (max-width: 767px) {
  .goal-strip { margin-top: 16px; }
  .goal-items { grid-template-columns: minmax(0, 1fr); }
  .goal-item { min-height: 44px; }
  .goal-strip .goal-edit-link { min-height: 44px; margin-top: -10px; margin-bottom: -10px; }
}

/* ───────── Editor (drawer) ───────── */
.goal-editor, .goal-detail { display: flex; flex-direction: column; gap: 16px; }
.goal-intro { margin: 0; font-size: var(--t-sm); color: var(--ink-2); text-wrap: pretty; }
.goal-list { display: flex; flex-direction: column; gap: 10px; }
.goal-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.goal-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.goal-card-top .goal-chip { margin-left: auto; }
.goal-sentence { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-md); line-height: 1.35; color: var(--ink); }
.goal-sentence.ro { display: block; font-weight: 500; text-wrap: pretty; }
.goal-pill {
  display: inline-flex; align-items: center; height: 36px; padding: 0 13px;
  border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-2);
  font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease-std), background-color var(--t-fast) var(--ease-std);
}
.goal-pill.quiet { font-weight: 500; color: var(--ink-2); border-style: dashed; }
.goal-pill[aria-expanded="true"] { border-style: solid; border-color: var(--focus); }
@media (hover: hover) { .goal-pill:hover, .goal-num:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); } }
.goal-num {
  display: inline-flex; align-items: center; gap: 0; height: 36px; padding: 0 2px;
  border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-2);
}
.goal-num b { min-width: 3.4ch; padding: 0 2px; text-align: center; font-weight: 600; }
.goal-step {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 18px; line-height: 1; color: var(--ink-2);
  transition: background-color var(--t-fast) var(--ease-std), color var(--t-fast) var(--ease-std);
}
.goal-step:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
@media (hover: hover) { .goal-step:active { transform: scale(0.92); } }
.goal-step.pressing { transform: scale(0.92); }
.goal-periods { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--t-sm); animation: paneIn var(--t-enter) var(--ease-out) both; }
.goal-preview { margin: 0; font-size: var(--t-sm); color: var(--ink-2); text-wrap: pretty; }
.goal-preview b { color: var(--ink); font-weight: 600; }
.goal-why { margin: 0; font-size: var(--t-sm); color: var(--ink-3); text-wrap: pretty; }
.goal-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 2px; }
.goal-card-foot .goal-link { font-size: var(--t-xs); margin: -6px -8px; }

.goal-empty .empty { padding: 18px 8px 8px; }
.goal-starter-note { margin: -6px 0 0; text-align: center; font-size: var(--t-xs); color: var(--ink-3); text-wrap: balance; }
.goal-add { display: flex; flex-direction: column; gap: 8px; }
.goal-add .section-label { margin: 4px 0 0; }
.goal-full { margin: 0; font-size: var(--t-xs); color: var(--ink-3); }
.goal-add-list { display: flex; flex-direction: column; gap: 8px; }
.goal-add-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 12px 12px 14px; text-align: left;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-2);
  transition: border-color var(--t-fast) var(--ease-std), background-color var(--t-fast) var(--ease-std);
}
@media (hover: hover) { .goal-add-row:hover { border-style: solid; background: var(--surface-2); } }
.goal-add-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.goal-add-txt b { font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-wrap: pretty; }
.goal-add-txt small { font-size: var(--t-xs); color: var(--ink-3); text-wrap: pretty; }
.goal-add-btn {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 12px 0 9px;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--t-xs); font-weight: 600;
}
.goal-more { align-self: flex-start; }
.goal-archived { display: flex; flex-direction: column; gap: 6px; }
.goal-arch-row { align-items: center; }
.goal-arch-row > span:first-child { text-wrap: pretty; }

/* ───────── Goal detail (drawer) ───────── */
.goal-detail-sentence {
  margin: 0;
  font-family: var(--f-display); font-variation-settings: "SOFT" 100, "opsz" 96; font-weight: 400;
  font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance;
}
.goal-detail-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.goal-detail-now { font-size: var(--t-sm); color: var(--ink-3); }
.goal-detail-now b { font-size: var(--t-lg); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; margin-right: 2px; }
.goal-hist { display: flex; flex-direction: column; gap: 6px; }
.goal-bars { position: relative; height: 104px; display: flex; align-items: flex-end; gap: 5px; padding-top: 18px; border-bottom: 1px solid var(--line-2); }
.goal-bar { flex: 1 1 0; max-width: 40px; min-height: 3px; border-radius: 5px 5px 1px 1px; }
.goal-bar.met { background: var(--pos); }
.goal-bar.unmet { background: var(--neg); opacity: 0.8; }
.goal-bar.few { background: var(--neu); }
.goal-target { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--ink-2); pointer-events: none; }
.goal-target span { position: absolute; right: 0; bottom: 3px; padding: 0 5px; border-radius: 5px; font-size: 10.5px; line-height: 1.5; color: var(--ink-2); background: var(--surface); white-space: nowrap; }
.goal-hist-x { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-xs); color: var(--ink-3); }
.goal-quote { text-align: left; width: 100%; }
.goal-quote-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; font-size: var(--t-xs); }
.goal-prov { width: 100%; text-align: left; align-items: center; min-height: 44px; }
.goal-prov:hover > span:first-child { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.goal-ev-btn { align-self: flex-start; margin-top: 2px; }
.goal-none, .goal-def { margin: 0; font-size: var(--t-xs); }

/* Phone: one thumb, 44 px targets */
@media (max-width: 767px), (pointer: coarse) {
  .goal-pill, .goal-num { height: 44px; }
  .goal-step { width: 40px; height: 40px; }
  .goal-periods .seg button { height: 40px; }
  .goal-card-foot .goal-link, .goal-detail .btn.sm, .goal-editor .btn.sm { min-height: 44px; }
  .goal-card-foot .goal-link { margin: -4px -8px; }
  .goal-add-row { min-height: 60px; }
  .goal-add-btn { height: 36px; }
}

/* ───────── Weekly digest ───────── */
.goal-digest { margin: 14px 0 4px; padding: 14px 16px; max-width: 64ch; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.digest-paper .goal-digest-head { margin: 0 0 8px; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.goal-digest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.digest-paper .goal-digest-list li { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.goal-digest-list li::marker { content: none; }
.goal-digest-list .goal-txt { white-space: normal; overflow: visible; }
.goal-digest-st { flex: none; margin-left: auto; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
@media (max-width: 767px) {
  .digest-paper .goal-digest-list li { flex-wrap: wrap; row-gap: 0; }
  .goal-digest-list .goal-txt { flex-basis: calc(100% - 20px); }
  .goal-digest-st { margin-left: 19px; }
}