/* Goal Planner modal (gp-*). Reuses .crm-scrim/.crm-modal; adds a two-column
   form/preview layout, plan tiles + daily targets. EAP brand tokens. */
.gp-modal { max-width: 720px; width: 100%; }
.gp-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .gp-body { grid-template-columns: 1fr; } }
.gp-form { display: flex; flex-direction: column; gap: 12px; }

.gp-form input[type="range"] { width: 100%; accent-color: var(--brand); }
.gp-form .crm-field > span b { color: var(--brand-dark); }
.gp-adv-toggle { align-self: flex-start; background: transparent; border: none; color: var(--brand-dark); font-family: var(--font-sub); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 2px 0; }
.gp-adv { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.gp-adv-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gp-rates { display: grid; grid-template-columns: 1fr; gap: 6px; max-height: 180px; overflow-y: auto; padding-right: 4px; }
.gp-rate { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-soft); }
.gp-rate-in { display: inline-flex; align-items: center; gap: 3px; }
.gp-rate-in input { width: 58px; background: var(--field-bg); border: 1.5px solid var(--field-border); border-radius: 7px; padding: 5px 7px; font-size: 12.5px; color: var(--ink); font-family: var(--font-body); }
.gp-rate-in input:focus { outline: none; border-color: var(--brand); }
.gp-rate-in em { color: var(--muted); font-style: normal; font-size: 12px; }

.gp-preview { background: var(--row-bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.gp-head { font-family: var(--font-sub); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.gp-head-note { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.gp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gp-tile { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; }
.gp-n { font-family: var(--font-sub); font-size: 22px; font-weight: 800; color: var(--brand-dark); line-height: 1; }
.gp-l { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 700; margin-top: 5px; }
.gp-sub { font-size: 10.5px; color: var(--ink-soft); margin-top: 3px; }
.gp-daily { display: flex; flex-direction: column; gap: 5px; }
.gp-drow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; }
.gp-dl { font-size: 13px; color: var(--ink); font-weight: 600; }
.gp-dd { font-size: 13px; color: var(--ink-soft); }
.gp-dd b { color: var(--brand-dark); font-size: 15px; }
.gp-dw { font-size: 11.5px; color: var(--muted); }
.gp-empty { color: var(--muted); font-size: 13px; }