/* Objectives editor — structure once, palette per skin.
 *
 * This file declares NO colors. .objed-dark aliases the app tokens from
 * styles.css; .objed-light aliases the document tokens from workspace.css
 * (.center). That is what lets one module render on both surfaces without a
 * second copy of the markup.
 *
 * Per DESIGN-STANDARD.md §0: .btn/.card are dark-only in styles.css and cannot
 * render on the light document surface, so this is a canonical, page-agnostic
 * component layer — not a page-prefixed clone.
 */

.objed-dark {
  --objed-card: var(--bg-2);
  --objed-inset: var(--bg-3);
  --objed-line: var(--border-2);
  --objed-line-strong: var(--border-3);
  --objed-ink-0: var(--ink-0);
  --objed-ink-1: var(--ink-1);
  --objed-ink-2: var(--ink-2);
  --objed-ink-3: var(--ink-3);
  --objed-ink-4: var(--ink-4);
  --objed-accent: var(--accent-green);
  --objed-accent-ink: #06281c; /* DESIGN-STANDARD.md:76 — intentional fixed-contrast pairing, not a token */
  --objed-good: var(--accent-green);
  --objed-warn: var(--accent-amber);
  --objed-bad: var(--danger);
  --objed-radius: var(--radius-lg);
  --objed-radius-sm: var(--radius-md);
  --objed-fs: var(--fs-base);
  --objed-fs-sm: var(--fs-sm);
  --objed-font: inherit;
  --objed-head-font: inherit;
}

.objed-light {
  --objed-card: var(--doc-card);
  --objed-inset: var(--doc-wash);
  --objed-line: var(--doc-line);
  --objed-line-strong: var(--doc-line-2);
  --objed-ink-0: var(--doc-ink-0);
  --objed-ink-1: var(--doc-ink-1);
  --objed-ink-2: var(--doc-ink-2);
  --objed-ink-3: var(--doc-ink-3);
  --objed-ink-4: var(--doc-ink-4);
  --objed-accent: var(--doc-accent);
  --objed-accent-ink: var(--doc-card);
  --objed-good: var(--doc-green);
  --objed-warn: var(--doc-amber);
  --objed-bad: var(--doc-warn);
  --objed-radius: 10px;
  --objed-radius-sm: 8px;
  --objed-fs: 14px;
  --objed-fs-sm: 13px;
  --objed-font: var(--doc-sans);
  --objed-head-font: var(--doc-serif);
}

.objed {
  display: block;
  font-family: var(--objed-font);
  font-size: var(--objed-fs);
  color: var(--objed-ink-1);
}

.objed-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.objed-lbl {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--objed-ink-3); font-weight: 700;
}
.objed-hint { font-size: var(--objed-fs-sm); color: var(--objed-ink-3); }

/* Sample-OKR link. Sits with the card actions but reads as a link, not a
   button — it leaves the page rather than acting on the goal set. Uses the
   --objed-* aliases so it repaints on both surfaces like everything else. */
.objed-sample-link {
  align-self: center; margin-right: auto;
  font-size: var(--objed-fs-sm); color: var(--objed-accent);
  text-decoration: underline;
}
.objed-sample-link:hover { color: var(--objed-ink-0); }

.objed-hero {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between;
  background: var(--objed-card); border: 1px solid var(--objed-line);
  border-radius: var(--objed-radius); padding: 18px; margin-bottom: 14px;
}
.objed-hero-main { flex: 1 1 260px; }
.objed-hero-side {
  flex: 0 1 300px; border: 1px solid var(--objed-line);
  border-radius: var(--objed-radius-sm); padding: 14px;
}
.objed-hero-actions { margin-top: 8px; }
.objed-posture-val {
  font-family: var(--objed-head-font); font-size: 24px; font-weight: 600;
  color: var(--objed-ink-0); margin-top: 4px;
}
.objed-posture-hint { margin: 6px 0 0; font-size: var(--objed-fs-sm); color: var(--objed-ink-3); }

.objed-card {
  background: var(--objed-card); border: 1px solid var(--objed-line);
  border-radius: var(--objed-radius); padding: 18px;
}
.objed-card-head {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.objed-subhead {
  margin: 0; font-family: var(--objed-head-font); font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--objed-ink-0);
}
.objed-card-desc { margin: 4px 0 0; font-size: var(--objed-fs-sm); color: var(--objed-ink-3); }

.objed-in {
  background: var(--objed-inset); border: 1px solid var(--objed-line-strong);
  border-radius: var(--objed-radius-sm); padding: 8px 10px;
  color: var(--objed-ink-1); font-family: inherit; font-size: var(--objed-fs-sm);
}
.objed-in::placeholder { color: var(--objed-ink-4); }
.objed-in:focus { outline: none; border-color: var(--objed-accent); }
.objed-in-block { display: block; width: 100%; margin-top: 6px; box-sizing: border-box; }
.objed-level, .objed-kind { flex: 0 1 150px; }
.objed-owner { flex: 1 1 140px; }
.objed-timeframe { flex: 0 1 130px; }
.objed-parent, .objed-function { flex: 1 1 160px; }
textarea.objed-in { resize: vertical; line-height: 1.5; }

.objed-btn {
  background: var(--objed-inset); border: 1px solid var(--objed-line-strong);
  border-radius: var(--objed-radius-sm); padding: 6px 12px;
  color: var(--objed-ink-2); font-family: inherit; font-size: var(--objed-fs-sm);
  font-weight: 600; cursor: pointer;
}
.objed-btn:hover { border-color: var(--objed-accent); color: var(--objed-accent); }
.objed-btn-accent {
  background: var(--objed-accent); border-color: var(--objed-accent); color: var(--objed-accent-ink);
}
.objed-btn-accent:hover { opacity: .9; color: var(--objed-accent-ink); }

.objed-form { margin-top: 12px; }
.objed-form .objed-row + .objed-row { margin-top: 6px; }
.objed-status { margin-top: 8px; min-height: 1em; }
.objed-list { margin-top: 12px; display: grid; gap: 10px; }
.objed-empty {
  margin-top: 12px; padding: 16px; border: 1px dashed var(--objed-line-strong);
  border-radius: var(--objed-radius-sm); color: var(--objed-ink-3); font-size: var(--objed-fs-sm);
}

.objed-goal {
  border: 1px solid var(--objed-line); border-radius: var(--objed-radius-sm);
  padding: 14px; background: var(--objed-card);
}
.objed-goal-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.objed-goal-level, .objed-goal-kind {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--objed-ink-3); border: 1px solid var(--objed-line-strong);
  border-radius: 999px; padding: 2px 8px; flex: none;
}
.objed-goal-title {
  font-family: var(--objed-head-font); font-size: 17px; font-weight: 600;
  color: var(--objed-ink-0); margin-top: 8px;
}
.objed-goal-meta { font-size: var(--objed-fs-sm); color: var(--objed-ink-3); margin-top: 4px; }
.objed-goal-desc { font-size: var(--objed-fs-sm); color: var(--objed-ink-2); margin-top: 6px; }
.objed-goal-krs { font-size: var(--objed-fs-sm); color: var(--objed-ink-2); margin-top: 6px; }
.objed-findings { margin: 6px 0 0; padding-left: 18px; font-size: var(--objed-fs-sm); color: var(--objed-ink-2); }
.objed-blindspots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.objed-blindspot {
  font-size: 11px; border: 1px solid var(--objed-line-strong); border-radius: 999px;
  padding: 2px 8px; color: var(--objed-ink-3); cursor: help;
}
.objed-blindspot.unmet { color: var(--objed-bad); border-color: var(--objed-bad); }
.objed-goal-actions { display: flex; gap: 6px; margin-top: 10px; }

.objed-eval {
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px;
  border: 1px solid var(--objed-line-strong); color: var(--objed-ink-3);
}
.objed-eval.good { color: var(--objed-good); border-color: var(--objed-good); }
.objed-eval.mid { color: var(--objed-warn); border-color: var(--objed-warn); }
.objed-eval.bad { color: var(--objed-bad); border-color: var(--objed-bad); }
.objed-flag {
  font-size: 11px; color: var(--objed-warn); border: 1px solid var(--objed-warn);
  border-radius: 999px; padding: 2px 8px;
}