/* Understand flow — shared by /understand and /app phase-understand */
.u-wrap { max-width: 880px; margin: 0 auto; padding: 0 0 2rem; }
.u-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.25rem; }
.u-subtitle { color: var(--text-muted); margin: 0 0 2rem; font-size: 0.95rem; }

.u-drop {
  border: 1.5px dashed var(--border); border-radius: 10px;
  padding: 2rem 1.5rem; text-align: center; cursor: pointer; background: var(--surface);
  transition: border-color 0.15s, background 0.15s; margin-bottom: 1rem;
}
.u-drop:hover, .u-drop.drag-over { border-color: var(--accent); background: rgba(88,166,255,0.04); }
.u-drop-icon { font-size: 2rem; display: block; margin-bottom: 0.5rem; color: var(--text-muted); }
.u-link-row { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.u-link-input { flex: 1; padding: 0.55rem 0.85rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 0.9rem; font-family: inherit; }
.u-link-input:focus { outline: none; border-color: var(--accent); }

.u-status { font-size: 0.9rem; color: var(--text-muted); padding: 0.75rem 1rem;
  background: var(--surface-elevated); border-radius: 8px; margin-bottom: 1.5rem; }
.u-status.err { color: var(--error, #f85149); }
.u-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%; animation: u-spin 0.7s linear infinite; vertical-align: middle; margin-right: 0.5rem; }
@keyframes u-spin { to { transform: rotate(360deg); } }

.u-section { margin-bottom: 2rem; }
.u-section-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin: 0 0 0.85rem; }

.u-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; }

.u-detected-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.u-detected-domain { font-size: 1.1rem; font-weight: 700; }
.u-chip { font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 100px;
  background: var(--surface-elevated); border: 1px solid var(--border); color: var(--text-muted); }
.u-summary { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; margin: 0.5rem 0 0; }
.u-mastery { margin: 0.85rem 0 0; padding: 0.65rem 0.85rem; background: var(--surface-elevated);
  border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; font-size: 0.88rem; }
.u-mastery b { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.2rem; }

.u-struct { border: 1px solid var(--border); border-radius: 8px; padding: 0.85rem 1rem; margin-top: 0.6rem; }
.u-struct-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.u-struct-type { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.u-struct-label { font-weight: 600; font-size: 0.9rem; }
.u-struct-count { font-size: 0.78rem; color: var(--text-muted); margin-left: auto; }
.u-attrs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.u-attr { font-size: 0.76rem; font-family: var(--font-mono, ui-monospace, monospace);
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 0.12rem 0.45rem; }
.u-examples { margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted); overflow-x: auto; }
.u-examples table { border-collapse: collapse; width: 100%; }
.u-examples th, .u-examples td { text-align: left; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.u-examples th { font-weight: 600; color: var(--text); }

.u-exp { display: flex; align-items: flex-start; gap: 0.85rem; border: 1.5px solid var(--border);
  border-radius: 10px; padding: 1rem 1.1rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.u-exp:hover { border-color: var(--accent); background: rgba(88,166,255,0.03); }
.u-exp.selected { border-color: var(--accent); background: rgba(88,166,255,0.06); }
.u-exp + .u-exp { margin-top: 0.6rem; }
.u-exp-body { flex: 1; min-width: 0; }
.u-exp-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.2rem; }
.u-exp-name { font-weight: 700; font-size: 0.98rem; }
.u-fit { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 100px; }
.u-fit.strong { background: rgba(63,185,80,0.18); color: #3fb950; }
.u-fit.good { background: rgba(88,166,255,0.18); color: #58a6ff; }
.u-fit.possible { background: rgba(210,153,34,0.18); color: #d29922; }
.u-exp-desc { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
.u-exp-rationale { font-size: 0.82rem; color: var(--text); margin: 0.35rem 0 0; font-style: italic; opacity: 0.85; }
.u-exp-drills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.u-exp-drill { font-size: 0.72rem; background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.1rem 0.4rem; color: var(--text-muted); }
.u-exp-radio { width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 50%; flex-shrink: 0; margin-top: 0.15rem; position: relative; }
.u-exp.selected .u-exp-radio { border-color: var(--accent); }
.u-exp.selected .u-exp-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }

.u-nudge { border-radius: 10px; padding: 1rem 1.1rem; margin-top: 1rem; font-size: 0.9rem; }
.u-nudge.soft { background: rgba(210,153,34,0.1); border: 1px solid rgba(210,153,34,0.4); }
.u-nudge.hard { background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.45); }
.u-nudge-msg { margin: 0 0 0.75rem; line-height: 1.5; }
.u-nudge-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.u-q { margin-bottom: 1.1rem; }
.u-q-label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.u-q-help { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.5rem; }
.u-q-textarea, .u-q-select {
  width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 0.9rem; font-family: inherit;
}
.u-q-textarea:focus, .u-q-select:focus { outline: none; border-color: var(--accent); }
.u-q-textarea { resize: vertical; min-height: 60px; }
.u-q-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; }
.u-q-options { display: flex; flex-direction: column; gap: 0.4rem; }
.u-q-opt { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.88rem;
  padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; }
.u-q-opt:hover { border-color: var(--accent); }
.u-q-opt input { accent-color: var(--accent); }

.u-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.55rem 1.1rem; border-radius: 6px; font-size: 0.9rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.u-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.u-btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.u-btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.u-btn-ghost:hover { background: var(--surface-elevated); }

.u-runid { margin-top: 0.85rem; font-size: 0.74rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.u-runid code { font-family: var(--font-mono, ui-monospace, monospace);
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.1rem 0.4rem; user-select: all; }
.u-runid a { color: var(--accent); text-decoration: none; }
.u-runid a:hover { text-decoration: underline; }
.u-runid button { background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 0.74rem; padding: 0; font-family: inherit; }