/* ============================================================
   AllocLab 2.0 Utilities
   ------------------------------------------------------------
   原子 class：tap target / 色彩 helper / layout 小工具。
   ============================================================ */

/* ── Touch target 44px 基線 ─────────────────────────── */
.al-tap {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* ── 價格方向色（紅漲綠跌，台股慣例） ──────────────── */
.c-up { color: var(--al-up); }
.c-dn { color: var(--al-dn); }
.c-up-bg { background: var(--al-up-bg); }
.c-dn-bg { background: var(--al-dn-bg); }
.c-ink      { color: var(--al-ink); }
.c-ink-deep { color: var(--al-ink-deep); }
.c-ink-2    { color: var(--al-ink-2); }
.c-ink-mute { color: var(--al-ink-muted); }
.c-accent   { color: var(--al-accent); }

/* ── Hairline 分隔線（editorial） ─────────────────── */
.al-hairline {
  border: 0;
  border-top: 1px solid var(--al-hairline);
  margin: var(--sp-4) 0;
}

/* ── Screen reader only ─────────────────────────────── */
.al-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── Container ──────────────────────────────────────── */
.al-container {
  width: 100%;
  max-width: var(--al-container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
.al-container-lg {
  width: 100%;
  max-width: var(--al-container-lg);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 640px) {
  .al-container,
  .al-container-lg { padding-inline: var(--sp-5); }
}

/* ── Spacing helpers（低頻使用，優先 component 內建） ── */
.al-stack-1 > * + * { margin-top: var(--sp-1); }
.al-stack-2 > * + * { margin-top: var(--sp-2); }
.al-stack-3 > * + * { margin-top: var(--sp-3); }
.al-stack-4 > * + * { margin-top: var(--sp-4); }
.al-stack-5 > * + * { margin-top: var(--sp-5); }
.al-stack-6 > * + * { margin-top: var(--sp-6); }

/* ── Flex / Grid 基礎 ───────────────────────────────── */
.al-flex      { display: flex; }
.al-flex-col  { display: flex; flex-direction: column; }
.al-flex-wrap { flex-wrap: wrap; }
.al-items-c   { align-items: center; }
.al-items-b   { align-items: baseline; }
.al-justify-b { justify-content: space-between; }
.al-gap-1 { gap: var(--sp-1); }
.al-gap-2 { gap: var(--sp-2); }
.al-gap-3 { gap: var(--sp-3); }
.al-gap-4 { gap: var(--sp-4); }
.al-gap-5 { gap: var(--sp-5); }

/* ── Truncate ──────────────────────────────────────── */
.al-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Visibility toggle（mobile / desktop） ───────────
   al-only-mobile：僅 <640px 顯示
   al-only-desktop：僅 ≥640px 顯示 */
.al-only-desktop { display: none; }
@media (min-width: 640px) {
  .al-only-desktop { display: initial; }
  .al-only-mobile  { display: none !important; }
}

/* ── Card surface 基礎（component 用 .al-surface） ──── */
.al-surface {
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
}
.al-surface-elevated {
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.al-surface-paper {
  background: var(--al-paper);
  border: 1px solid var(--al-hairline);
  border-radius: var(--r-md);
}

/* ── A-3 Thumbs feedback （Phase A-3）────────────────── */
.al-thumb-wrap {
  margin-top: var(--sp-3);
}
.al-thumb-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.al-thumb-label {
  color: var(--al-ink-muted);
  flex-shrink: 0;
}
.al-thumb-btn {
  min-width: 44px;
  min-height: 44px;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
  background: var(--al-surface);
  color: var(--al-ink-2);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.al-thumb-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.al-thumb-btn--active {
  background: var(--al-accent-subtle, rgba(110, 143, 179, 0.12));
  border-color: var(--al-accent);
  color: var(--al-accent);
}
.al-thumb-err {
  display: block;
  margin-top: var(--sp-1);
  /* severity 非方向性 — hardcoded #b83232 per CLAUDE.md §6 */
  color: #b83232;
  font-size: 0.7rem;
}

/* ── A-4 A11 Note button / panel（Phase A-4）──────────────── */
.al-note-wrap {
  margin-top: var(--sp-3);
}
.al-note-trigger {
  min-width: 44px;
  min-height: 44px;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
  background: var(--al-surface);
  color: var(--al-ink-2);
  font-size: 0.72rem;
  cursor: pointer;
  gap: var(--sp-1);
  transition: background 0.15s, border-color 0.15s;
}
.al-note-trigger:hover {
  background: var(--al-accent-subtle, rgba(110, 143, 179, 0.08));
  border-color: var(--al-accent);
}
.al-note-trigger--active {
  background: var(--al-accent-subtle, rgba(110, 143, 179, 0.12));
  border-color: var(--al-accent);
  color: var(--al-accent);
}
.al-note-trigger__count {
  font-size: 0.65rem;
  color: var(--al-ink-muted);
  margin-left: var(--sp-1);
}
.al-note-panel {
  margin-top: var(--sp-2);
  border: 1px solid var(--al-border);
  border-radius: var(--r-md);
  background: var(--al-paper, var(--al-surface));
  padding: var(--sp-3) var(--sp-4);
}
.al-note-compose {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.al-note-compose__label {
  color: var(--al-ink-muted);
  font-size: 0.68rem;
}
.al-note-textarea {
  width: 100%;
  min-height: 72px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
  background: var(--al-surface);
  color: var(--al-ink);
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}
.al-note-textarea:focus {
  outline: none;
  border-color: var(--al-accent);
}
.al-note-tags-input {
  width: 100%;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
  background: var(--al-surface);
  color: var(--al-ink);
  font-family: inherit;
  font-size: 0.78rem;
  box-sizing: border-box;
}
.al-note-tags-input:focus {
  outline: none;
  border-color: var(--al-accent);
}
.al-note-compose__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.al-note-save-btn {
  min-width: 44px;
  min-height: 44px;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--al-accent);
  border-radius: var(--r-sm);
  background: var(--al-accent);
  color: #fff;
  font-size: 0.72rem;
  cursor: pointer;
  transition: opacity 0.15s;
}
.al-note-save-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.al-note-saved-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
  /* yellow-ish sticky note — non-directional, not price token */
  background: #fef3c0;
  border: 1px solid #d4a017;
  color: #7a5c00;
  font-size: 0.68rem;
}
.al-note-err {
  display: block;
  /* severity 非方向性 — hardcoded #b83232 per CLAUDE.md §6 */
  color: #b83232;
  font-size: 0.7rem;
}
.al-note-list {
  margin-top: var(--sp-3);
  border-top: 1px solid var(--al-hairline);
  padding-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.al-note-loading {
  color: var(--al-ink-muted);
}
.al-note-card {
  padding: var(--sp-3);
  border: 1px solid var(--al-hairline);
  border-radius: var(--r-sm);
  background: var(--al-surface);
}
.al-note-card__text {
  margin: 0 0 var(--sp-1);
  font-size: 0.82rem;
  color: var(--al-ink);
  line-height: 1.5;
}
.al-note-card__meta {
  font-size: 0.65rem;
  margin-bottom: var(--sp-2);
}
.al-note-card__actions {
  display: flex;
  gap: var(--sp-2);
}
.al-note-action-btn {
  min-width: 44px;
  min-height: 44px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--al-ink-2);
  font-size: 0.68rem;
  cursor: pointer;
}
.al-note-action-btn--del {
  /* severity 非方向性 — hardcoded #b83232 per CLAUDE.md §6 */
  color: #b83232;
  border-color: #b83232;
}
.al-note-edit {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ── A8.1 accuracy badge（分類命中率 inline，ai_card 底部）──────────── */
.al-accuracy-badge {
  margin-top: var(--sp-3);
  font-size: var(--fs-meta, 0.68rem);
  color: var(--al-ink-muted);
  line-height: 1.5;
}
.al-accuracy-pending {
  opacity: 0.6;
}

/* ── B10 evidence_chain accordion（quick card 依據展開）──────────────────── */
.al-evidence-section {
  margin-top: var(--sp-3);
}
.al-evidence-toggle {
  /* 非方向性 UI 元素，不走 price token */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 44px;
  min-height: 44px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px dashed var(--al-border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--al-ink-muted);
  font-size: var(--fs-meta, 0.68rem);
  cursor: pointer;
  line-height: 1.4;
}
.al-evidence-toggle:hover {
  border-color: var(--al-accent);
  color: var(--al-accent);
}
.al-evidence-list {
  margin-top: var(--sp-2);
  padding: var(--sp-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.al-evidence-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--al-ink);
  font-size: var(--fs-meta, 0.68rem);
  line-height: 1.5;
  transition: background 0.12s;
}
a.al-evidence-row:hover {
  background: var(--al-surface-2, rgba(0,0,0,0.04));
}
.al-evidence-row--pending {
  cursor: default;
  opacity: 0.6;
}
.al-evidence-label {
  color: var(--al-ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.al-evidence-claim {
  color: var(--al-ink);
}
.al-evidence-pending-note {
  color: var(--al-ink-muted);
  font-style: italic;
  margin-left: var(--sp-1);
}