/* sentinel.css — spend sentinel strip + calibrated runway band.
   Neutral surfaces, ONE accent (--accent), tabular numerals, no gradients, no glows,
   no coloured edges. Status colour is used only for the trend warning. */

.sentinel-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin: 0 0 16px;
  min-width: 0;
}
.sentinel-card .acct-section-head { margin-top: 0; }
.sentinel-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.sentinel-hint { font-size: 12px; color: var(--text-muted); }

/* one language at a time (same mechanism as the ledger pairs) */
.sentinel-card [lang="zh"], .sentinel-exec [lang="zh"] { display: none; }
html[data-lang="zh"] .sentinel-card [lang="en"], html[data-lang="zh"] .sentinel-exec [lang="en"] { display: none; }
html[data-lang="zh"] .sentinel-card [lang="zh"], html[data-lang="zh"] .sentinel-exec [lang="zh"] { display: inline; }
html[data-lang="zh"] .sentinel-card tspan[lang="zh"], html[data-lang="zh"] .sentinel-exec tspan[lang="zh"] { display: inline; }
html:not([data-lang]) .sentinel-card [lang="zh"], html:not([data-lang]) .sentinel-exec [lang="zh"] { display: none; }

.sentinel-card, .sentinel-exec { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* flagged items */
.sentinel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sentinel-item {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px;
  background: var(--bg-secondary); display: grid; gap: 8px;
}
.sentinel-item.is-done { opacity: .85; background: transparent; }
.sentinel-tag {
  justify-self: start; font-size: 12px; font-weight: 500; color: var(--text-secondary);
  border: 1px solid var(--border-light, var(--border)); border-radius: 6px; padding: 2px 8px;
}
.sentinel-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.sentinel-sub { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.sentinel-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.sentinel-warn {
  margin: 8px 0 0; padding: 8px 12px; font-size: 13px; line-height: 1.5;
  color: var(--text-primary); border: 1px solid var(--orange); border-radius: 8px;
}
.sentinel-err { margin: 0; font-size: 12px; color: var(--red); }

.sentinel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sentinel-card .sentinel-btn, .sentinel-btn { min-height: 32px; transition: background-color 160ms cubic-bezier(.2, .8, .2, 1), border-color 160ms cubic-bezier(.2, .8, .2, 1); }
.sentinel-btn:disabled { opacity: .5; cursor: not-allowed; }
.sentinel-btn:focus-visible, .sentinel-input:focus-visible, .sentinel-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sentinel-form { display: grid; gap: 8px; }
.sentinel-label { font-size: 12px; color: var(--text-secondary); }
.sentinel-input {
  min-height: 32px; padding: 4px 12px; font: inherit; font-size: 14px;
  color: var(--text-primary); background: var(--bg-input, var(--bg-primary));
  border: 1px solid var(--border-light, var(--border)); border-radius: 8px; width: 100%; box-sizing: border-box;
}
.sentinel-done { margin-top: 12px; display: grid; gap: 8px; }
.sentinel-toggle { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--text-secondary); cursor: pointer; justify-self: start; text-decoration: underline; text-underline-offset: 3px; }

.sentinel-empty { padding: 16px 0; font-size: 14px; color: var(--text-secondary); }
.sentinel-empty strong { display: block; font-weight: 600; color: var(--text-primary); }
.sentinel-empty p { margin: 4px 0 8px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.sentinel-skel { height: 96px; border-radius: 10px; background: var(--bg-secondary); animation: sentinel-pulse 1.2s ease-in-out infinite; }
@keyframes sentinel-pulse { 50% { opacity: .55; } }

/* runway band */
.sentinel-band-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.sentinel-big { font-size: 24px; font-weight: 600; color: var(--text-primary); }
.sentinel-pill {
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  border: 1px solid var(--border-light, var(--border)); border-radius: 999px; padding: 2px 10px;
}
.sentinel-runway { margin: 8px 0 0; font-size: 14px; color: var(--text-primary); }
.sentinel-svg { display: block; width: 100%; height: auto; max-height: 200px; margin-top: 12px; }
.sentinel-line { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sentinel-join { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.sentinel-dot { fill: var(--card-bg); stroke: var(--text-muted); stroke-width: 2; }
.sentinel-band { fill: var(--accent); fill-opacity: .22; stroke: var(--accent); stroke-width: 2; }
.sentinel-center { stroke: var(--accent); stroke-width: 2; }
.sentinel-axis { font-size: 11px; fill: var(--text-muted); }
.sentinel-val { font-size: 11px; font-weight: 500; fill: var(--text-primary); }

/* executive placement */
.sentinel-exec { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.sentinel-exec .sentinel-big { font-size: 20px; }

@media (max-width: 768px) {
  .sentinel-card { padding: 12px; }
  .sentinel-card .sentinel-btn, .sentinel-exec .sentinel-btn { min-height: 44px; min-width: 44px; padding: 0 16px; }
  .sentinel-card .sentinel-input { min-height: 44px; }
  .sentinel-card .sentinel-toggle { min-height: 44px; display: inline-flex; align-items: center; }
  .sentinel-big { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sentinel-btn, .sentinel-skel { transition: none; animation: none; }
}