/* Goals and scorecards (owner writes, approver reads). Builds on sales.css (sp-*) and the attribution ledger palette. */
.gl-page { --gl-brass: #b8901f; --gl-teal: #3f8597; --gl-rust: #c4553a; --gl-sage: #4f9a69; --gl-line: rgba(184,144,31,.28);
  display: grid; gap: 14px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.gl-page * { box-sizing: border-box; }
.gl-head { display: grid; gap: 2px; border-bottom: 3px double var(--gl-line); padding-bottom: 10px; }
.gl-head p { margin: 0; }
.gl-kicker { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gl-brass); font-weight: 700; }
.gl-title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.01em; }
.gl-title:focus { outline: none; }
.gl-msg { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--gl-line); border-left: 4px solid var(--gl-teal); }
.gl-msg-success { border-left-color: var(--gl-sage); } .gl-msg-warning { border-left-color: var(--gl-brass); } .gl-msg-danger { border-left-color: var(--gl-rust); }
.gl-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 12px 14px; border: 1px solid var(--gl-line); border-radius: 12px; background: var(--panel, transparent); }
.gl-field { display: grid; gap: 4px; min-width: 0; flex: 1 1 180px; }
.gl-field label { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.gl-field select, .gl-field input { min-height: 40px; width: 100%; font: inherit; }
.gl-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gl-card { min-width: 0; }
.gl-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.gl-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.gl-table th, .gl-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--gl-line); vertical-align: top; }
.gl-table thead th { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gl-brass); }
.gl-table td .subtle, .gl-table th .subtle { display: block; }
/* Override the generic last-row td reset equally for headers and data cells. */
.gl-goals > tbody > tr.gl-row > :is(th, td) { border-bottom: 1px solid var(--gl-line); }
/* The shared shell assigns different border colors to th and td. Apply the
   same painted rule to ALL desktop body/history cells, including last rows. */
@media (min-width: 721px) {
  [data-gl-theme] .gl-page .gl-table > tbody > tr > :is(th, td) {
    border-bottom: 1px solid var(--gl-border);
  }
}
.gl-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.gl-metric { font-weight: 700; display: block; }
.gl-dir { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.gl-open > * { background: rgba(184,144,31,.08); }
.gl-hrow > td { padding: 12px; background: rgba(184,144,31,.05); }
.gl-status, .gl-grade { display: inline-block; font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--gl-line); white-space: nowrap; }
.gl-st-active { color: var(--gl-sage); border-color: currentColor; } .gl-st-paused { color: var(--gl-brass); border-style: dashed; } .gl-st-ended { opacity: .65; }
.gl-grade { font-size: .82rem; text-align: center; }
.gl-g-on_track { color: var(--gl-sage); border-color: currentColor; } .gl-g-at_risk { color: var(--gl-brass); border-color: currentColor; }
.gl-g-missed { color: var(--gl-rust); border-color: currentColor; } .gl-g-no_data { opacity: .7; border-style: dashed; }
.gl-g-none { opacity: .7; font-weight: 500; }
.gl-spark-wrap { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 10px; }
.gl-spark { width: 100%; height: auto; display: block; }
.gl-line { fill: none; stroke: var(--gl-brass); stroke-width: 2; stroke-linejoin: round; }
.gl-target { stroke: var(--gl-sage); stroke-dasharray: 4 3; stroke-width: 1; opacity: .8; }
.gl-dot { fill: var(--gl-rust); } .gl-dot-met { fill: var(--gl-sage); }
.gl-trend { margin: 0; font-size: .85rem; }
.gl-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(8,8,10,.62); }
.gl-dialog { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 14px; border: 1px solid var(--gl-line); background: var(--panel-2, var(--panel, #1a1814)); padding: 16px; display: grid; gap: 12px; }
.gl-dlg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; border-bottom: 1px solid var(--gl-line); padding-bottom: 8px; }
.gl-dlg-head h2 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.gl-form { display: grid; gap: 10px; }
.gl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.gl-dlg-foot { justify-content: flex-end; border-top: 1px solid var(--gl-line); padding-top: 10px; }
.gl-empty { display: grid; gap: 4px; justify-items: start; padding: 14px 4px; }
.gl-neutral h1 { font-size: 1.3rem; }
@media (max-width: 720px) {
  .gl-table-wrap { overflow-x: visible; }
  .gl-goals thead, .gl-hist thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gl-goals, .gl-goals tbody, .gl-goals tr, .gl-goals th, .gl-goals td, .gl-hist, .gl-hist tbody, .gl-hist tr, .gl-hist th, .gl-hist td { display: block; width: 100%; }
  .gl-goals tr.gl-row, .gl-hist tr { border: 1px solid var(--gl-line); border-radius: 10px; margin-bottom: 8px; padding: 4px 0; }
  .gl-goals td, .gl-hist td { border: 0; display: flex; justify-content: space-between; gap: 10px; text-align: right !important; padding: 4px 10px; }
  .gl-goals > tbody > tr.gl-row > td { border-bottom: 0; }
  .gl-goals td::before, .gl-hist td::before { content: attr(data-label); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gl-brass); text-align: left; }
  .gl-goals td .subtle { display: inline; margin-left: 4px; }
  .gl-goals > tbody > tr.gl-row > td { align-items: flex-start; }
  .gl-goals .gl-value { margin-inline-start: auto; min-width: 0; text-align: right; }
  .gl-goals .gl-value > .subtle { display: block; margin-left: 0; }
  .gl-goals .gl-status { align-self: flex-start; flex: 0 0 auto; }
  .gl-goals tr.gl-hrow > td { display: block; text-align: left !important; }
  .gl-goals tr.gl-hrow > td::before { content: none; }
  .gl-spark-wrap { grid-template-columns: minmax(0, 1fr); }
  .gl-actions .btn { min-height: 40px; }
  .gl-scrim { padding: 0; align-items: end; }
  .gl-dialog { width: 100%; max-height: 92dvh; border-radius: 14px 14px 0 0; }
}
@media (prefers-reduced-motion: no-preference) { .gl-dialog { animation: gl-rise .18s ease-out; } @keyframes gl-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } }
