/* Group goals this month (docs/GROUP-MONTHLY.md): plan cards with a kind chip, goals with a bar (cobalt on the sunk
   well, green once reached; never gold, no ladders), the yes card with tick boxes, the add form, the wrap-up and the
   editor. The bar fills once on draw, and not under reduced motion. One column under 720px, 16px gutters. Locky
   Design System tokens only. */
:root { --gm-fill: var(--cobalt); --gm-well: var(--sunk); --gm-reached: var(--face-green); --gm-edge: var(--line); }
:root[data-theme="dark"] { --gm-fill: var(--cobalt); --gm-well: var(--sunk); --gm-reached: var(--face-green); --gm-edge: var(--line); }

.gm-list, .gm-goals, .gm-today-body, .gm-panel-body { display: grid; gap: 12px; padding: 0 12px 12px; min-width: 0; }
.gm-card { display: grid; gap: 8px; padding: 12px; border: 2px solid var(--gm-edge); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.gm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gm-card-title { font-weight: 700; overflow-wrap: anywhere; }
.gm-card p, .gm-goal p, .gm-ask p { margin: 0; }
.gm-card .gm-goals { padding: 0; }
.gm-card-foot { margin: 0; }
.gm-done { font-weight: 700; }

.gm-goal { display: grid; gap: 4px; min-width: 0; }
.gm-goal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gm-goal-head .locky { width: 28px; height: 28px; }
.gm-goal-title { overflow-wrap: anywhere; }
.gm-goal-detail { white-space: pre-line; overflow-wrap: anywhere; }
.gm-goal-line { font-size: 14px; }
.gm-you { color: var(--ink); font-weight: 600; }

.gm-bar { position: relative; height: 10px; border-radius: 999px; background: var(--gm-well); overflow: hidden; }
.gm-fill { display: block; height: 100%; border-radius: 999px; background: var(--gm-fill); transform-origin: left center; animation: gm-grow 0.6s ease-out 1; }
.gm-bar-reached .gm-fill { background: var(--gm-reached); }
@keyframes gm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .gm-fill { animation: none; } }

.gm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gm-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gm-add .gm-add-n { width: 6em; flex: none; }
.gm-add .gm-add-note { flex: 1 1 12em; width: auto; min-width: 0; }

.gm-ask { display: grid; gap: 8px; padding: 12px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.gm-ask-head { font-weight: 700; overflow-wrap: anywhere; }
.gm-ask-goals { display: grid; gap: 6px; }
.gm-ask-goals .gm-ask-goal { display: flex; align-items: flex-start; gap: 8px; }
.gm-ask-goals .gm-ask-goal input { margin-top: 3px; flex: none; }
.gm-ask-how { overflow-wrap: anywhere; }

.gm-lines { padding: 0 12px 12px; }
.plain-list .gm-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.plain-list .gm-line:last-child { border-bottom: 0; }
.gm-earlier { padding: 0; }
.gm-status { margin: 0 0 10px; font-weight: 600; }
.gm-sub { font-size: 15px; margin: 12px 12px 6px; }
.gm-more { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; }
.gm-who p, .gm-part > p, .gm-part ul, .gm-wrap p, .gm-wrap ul { margin: 0; padding: 0 12px 10px; }
.gm-part .gm-ask { margin: 0 12px 12px; }
.gm-thanks { white-space: pre-line; overflow-wrap: anywhere; font-style: italic; }
.gm-wrap-head { font-weight: 700; }

.gm-plan-form, .gm-goal-form { display: grid; gap: 10px; padding: 0 12px 12px; min-width: 0; }
.gm-form-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: start; }
.gm-form-stack { display: grid; gap: 10px; }
.gm-form-row[hidden], .gm-form-stack[hidden] { display: none; }
.gm-kinds { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.gm-kinds label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.gm-edit-goals { padding: 0 12px; }
.gm-edit-goal { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.gm-edit-goal p { margin: 0; }

@media (max-width: 720px) {
  .gm-list, .gm-goals, .gm-today-body, .gm-panel-body, .gm-plan-form, .gm-goal-form { padding-left: 0; padding-right: 0; }
  .gm-form-row { grid-template-columns: minmax(0, 1fr); }
}