/* Hedef gelişimi ve besin takviyesi sunumu: panel ve public profil için tek stil kaynağı. */
.goal-journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; min-width: 0; }
.goal-journey-metric { min-width: 0; padding: 16px; background: var(--panel, var(--card)); border: 1px solid var(--border); border-radius: var(--radius, var(--r-lg)); }
.goal-journey-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; }
.goal-journey-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 9px; align-items: center; }
.goal-journey-stage { display: grid; gap: 4px; min-width: 0; }
.goal-journey-stage:last-child { text-align: right; }
.goal-journey-label, .goal-journey-date { color: var(--muted); font-size: .78rem; }
.goal-journey-value { color: var(--text); font-size: clamp(1.25rem, 3vw, 1.8rem); line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.goal-journey-stage:last-child .goal-journey-value, .goal-journey-arrow { color: var(--accent); }
.goal-journey-arrow { font-size: 1.5rem; }
.goal-journey-change, .goal-journey-target { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: .84rem; }
.goal-journey-change { margin-top: 16px; padding: 9px 10px; border-radius: var(--r, 12px); background: var(--panel-2, var(--bg-soft)); }
.goal-journey-target { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); }
.goal-journey-target strong { color: var(--text); }
.goal-journey-missing { color: var(--muted); font-size: .8rem; margin: 12px 0 0; }
.goal-supplements { min-width: 0; margin-top: 16px; padding: 0; }
.goal-supplements-heading { display: flex; gap: 7px; align-items: center; font-size: .95rem; margin: 0 0 10px; }
.goal-supplements-plans { display: grid; gap: 10px; }
.goal-supplements-plan { padding: 12px; border: 1px solid var(--border); border-radius: var(--r, 12px); background: var(--panel, var(--card)); min-width: 0; }
.goal-supplements-plan-head { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; }
.goal-supplements-date { font-size: .78rem; color: var(--muted); }
.supplement-plan-current-list { gap: 12px; }
.supplement-plan-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.supplement-plan-heading { display: grid; gap: 4px; min-width: 0; }
.supplement-plan-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.supplement-plan-title > strong { overflow-wrap: anywhere; }
.supplement-plan-history-body { gap: 12px; }
.goal-supplements-items { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
.goal-supplements-items li { display: flex; flex-wrap: wrap; gap: 3px 14px; justify-content: space-between; padding-top: 7px; border-top: 1px solid var(--border); }
.goal-supplements-items li strong { flex: 1 1 12rem; overflow-wrap: anywhere; font-size: .86rem; }
.goal-supplements-items li span:not(.status) { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.goal-supplements-empty { margin: 0; color: var(--muted); font-size: .82rem; }
.goal-plan-link { padding: 12px; border: 1px solid var(--border); border-radius: var(--r, 12px); background: var(--panel-2, var(--bg-soft)); min-width: 0; }
.goal-plan-link p { margin: 4px 0 0; font-size: .82rem; color: var(--muted); }
.goal-plan-link strong { overflow-wrap: anywhere; }
.pf-goal-history-item .goal-journey { margin-top: 16px; }

/* Takviye kullanım kartları: panel, hedef geçmişi ve public profil ortak sunumu. */
.goal-supplements-items .supplement-usage-item {
    display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px;
    padding: 12px; min-width: 0; justify-content: initial;
    border: 1px solid var(--border); border-radius: var(--r, 12px); background: var(--panel-2, var(--bg-soft));
}
.supplement-usage-content { display: grid; gap: 6px; min-width: 0; width: 100%; }
.supplement-usage-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.goal-supplements-items .supplement-usage-head strong { flex: 1 1 10rem; }
.goal-supplements-items .supplement-usage-head .status { flex: 0 1 auto; }
.supplement-usage-dose, .supplement-usage-detail, .supplement-usage-summary { margin: 0; font-size: .82rem; overflow-wrap: anywhere; }
.supplement-usage-detail, .supplement-usage-summary { color: var(--muted); line-height: 1.6; }
.supplement-usage-summary { margin-top: 10px; }
.supplement-usage-item > .btn { justify-self: start; min-height: 44px; }
.supplement-editor-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.supplement-editor-row > .field { flex: 1 1 10rem; min-width: 0; }
.supplement-editor-row input[type="number"], .supplement-finish-form input[type="number"] { width: 12ch; max-width: 100%; }
.supplement-finish-form { display: grid; gap: 12px; min-width: 0; }

.supplement-usage-actions { display: flex; flex-wrap: wrap; justify-self: start; width: fit-content; max-width: 100%; gap: 8px; }
.supplement-usage-actions.is-single-action { width: 100%; }
.supplement-usage-actions.is-single-action .btn { width: 100%; }
.supplement-usage-actions .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .315rem .675rem; font-size: .765rem;
    min-height: 39.6px; min-width: 79.2px; max-width: 100%; margin-right: 0;
}
.supplement-usage-actions .btn.ghost {
    background: var(--action-secondary-bg);
    border-color: color-mix(in srgb, var(--action-secondary-text) 40%, var(--action-secondary-border));
    transition: background .15s var(--ease-out), border-color .15s var(--ease-out), transform .14s var(--ease-out), box-shadow .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .supplement-usage-actions .btn.ghost:hover:not(:disabled) {
        background: color-mix(in srgb, var(--accent) 8%, var(--action-secondary-bg));
        border-color: var(--accent);
    }
}
.supplement-usage-actions .btn.ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 640px) {
    .goal-supplements-items { grid-template-columns: minmax(0, 1fr); }
}