/* DESIGN.md: shared tokens, mobile layout is scoped to <=600px. */
:root { --card-title-size:1rem; --card-meta-size:.875rem; --card-gap:16px; --card-mobile-gap:12px; --coin-diameter:46px; }
.task-card .task-main h3 { font-size:var(--card-title-size);line-height:1.4; }
.task-info,.task-info p,.task-description,.achievement-description { color:var(--text-soft);font-size:var(--card-meta-size);line-height:1.5; }
.task-info p { margin:0; }
.child-name { align-items:center; }
.catalog-filters > .button { justify-self:end; }
.section-actions { display:flex;justify-content:flex-end;margin-top:16px; }
.button.button-cancel,.task-card .task-actions form .button.button-cancel { width:46px;min-width:46px;height:46px;padding:0;font-size:1.6rem;font-weight:400; }
.point-card [data-reveal-form] { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.point-card [data-reveal-form] input { width:180px;min-width:0;font-size:.84rem; }
[data-reveal-field][hidden] { display:none !important; }
.point-card:has(.return-form) > .task-actions { flex-wrap:wrap !important; }
.task-actions form:has([data-reveal-field]:not([hidden])) { flex-wrap:wrap;max-width:100%; }
.reward-catalog .achievement-card:has(.reward-exchange):not(:has(.reward-exchange.revealed)) { grid-template-columns:46px minmax(0,1fr) 112px; }
.reward-catalog .task-actions .reward-exchange input { width:164px; }
.daily-bonus-row { outline:1px solid var(--gold);outline-offset:-1px;border-radius:var(--radius-md); }
.family-earnings { display:flex;flex-wrap:wrap;gap:16px 24px;margin:24px 0;align-items:center; }
.family-earnings span { display:inline-flex;align-items:center;gap:10px; }
.family-kid-card .kid-card-top { grid-template-columns:46px minmax(0,1fr) 76px; }
.family-kid-card .kid-card-top .avatar { width:76px;height:76px; }
.family-kid-card h2 { font-size:1.3rem; }
.family-rings,.family-points { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border-top:1px solid var(--line);padding-top:20px;margin-top:20px; }
.family-metric { display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:0; }
.family-metric > span { font-size:.75rem;line-height:1.4;color:var(--text-soft); }
.family-ring { width:76px;height:76px;position:relative;display:grid;place-items:center;color:var(--metric-color); }
.family-ring svg { position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg); }
.family-ring circle { fill:none;stroke-width:7; }
.family-ring .metric-value { stroke:var(--metric-color);stroke-linecap:butt; }
.family-ring strong { font-size:.85rem; }
.metric-marked { --metric-color:var(--blue); }
.metric-confirmed { --metric-color:var(--gold); }
.metric-pending { --metric-color:var(--child-color); }
.metric-unmarked { --metric-color:#7d8189; }
[data-theme="dark"] .metric-unmarked { --metric-color:#a4a7ae; }
.family-points .inactive { opacity:.5; }
.inactive-coin { display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--surface-soft);color:var(--text-soft); }
@media(max-width:600px) {
 .task-card.point-card,.task-card.point-card.achievement-card,.reward-catalog .achievement-card:has(.reward-exchange),.reward-catalog .achievement-card:has(.reward-exchange):not(:has(.reward-exchange.revealed)) { grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto minmax(46px,auto) auto auto;column-gap:var(--card-mobile-gap);row-gap:6px;padding:16px; }
 .point-card > .task-main { display:contents; }
 .point-card > .task-main > :not(h3):not(h2):not(.task-info):not(.achievement-description) { grid-column:2;grid-row:1;margin:0;min-height:0; }
 .point-card > .task-main > h3,.point-card > .task-main > h2 { grid-column:2;grid-row:2;align-self:center;margin:0;font-size:var(--card-title-size); }
 .point-card > .task-point { grid-column:1;grid-row:2;align-self:center; }
 .point-card > .task-main > .task-info,.point-card > .task-main > .achievement-description { grid-column:2;grid-row:3;margin:0; }
 .point-card > .task-actions,.point-card > form,.point-card > .button,.point-card > .waiting-pill,.point-card:has(.return-form) > .task-actions,.reward-catalog .achievement-card:has(.reward-exchange) > .task-actions { grid-column:2;grid-row:4;justify-self:start;margin-top:8px;min-width:0;max-width:100%; }
 .point-card .task-actions:empty { display:none; }
 .point-card .task-actions { justify-content:flex-start; }
 .point-card .task-actions form { max-width:100%; }
 .point-card [data-reveal-form] input { width:100%;flex-basis:100%; }
 .reward-catalog .task-actions .reward-exchange { flex-wrap:wrap; }
 .reward-catalog .task-actions .reward-exchange input { width:100%; }
 .achievement-catalog { grid-auto-rows:1fr; }
 .reward-catalog { grid-auto-rows:auto; }
 .family-rings,.family-points { gap:8px; }
 .family-ring { width:62px;height:62px; }
 .family-kid-card { padding:16px; }
 .family-kid-card .kid-card-top { gap:10px; }
}

.task-card .task-actions .return-form:not(.revealed) { width:auto;flex:0 0 auto; }
@media(max-width:600px) {
 .point-card > form[data-reveal-form] { flex-wrap:wrap; }
 .point-card > form[data-reveal-form] input { width:100%;flex-basis:100%; }
}