/* Vector handwriting encounter module.  The canvas is deliberately fixed at
 * 1000 × 1414 logical units; CSS only changes its presentation size. */
.cb-handwriting {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--border, #d9dedc);
  border-radius: var(--r-2, 8px);
  background: var(--surface, #fff);
}

.cb-handwriting--unavailable {
  border-style: dashed;
  background: var(--surface);
}

.cb-handwriting__toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.cb-handwriting__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 16px;
}

.cb-handwriting-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border, #d9dedc);
  border-radius: var(--r-2, 8px);
  background: var(--bg, #f8faf9);
}

.cb-handwriting-card__toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.cb-handwriting-card__title {
  min-width: 0;
  margin: 0 auto 0 0;
  overflow-wrap: anywhere;
  font: 600 var(--t-sm, 0.875rem)/1.2 var(--font-sans, system-ui, sans-serif);
  color: var(--text-primary, #252625);
}

.cb-handwriting__title {
  margin: 0 auto 0 0;
  font: 600 var(--t-sm, 0.875rem)/1.2 var(--font-sans, system-ui, sans-serif);
  color: var(--text-primary, #252625);
}

.cb-handwriting__add,
.cb-handwriting__undo,
.cb-handwriting__retry {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong, #b9c3bf);
  border-radius: var(--r-1, 5px);
  background: var(--bg-raised, #f7faf8);
  color: var(--text-primary, #252625);
  font: 500 var(--t-label, 0.75rem)/1 var(--font-sans, system-ui, sans-serif);
  cursor: pointer;
}

.cb-handwriting__add:hover,
.cb-handwriting__undo:hover,
.cb-handwriting__retry:hover { border-color: var(--accent, #9b6344); }
.cb-handwriting__add:disabled,
.cb-handwriting__undo:disabled,
.cb-handwriting__retry:disabled { opacity: .48; cursor: default; }

.cb-handwriting__canvas {
  display: block;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1000 / 1414;
  border: 1px solid var(--border, #d9dedc);
  border-radius: var(--r-1, 5px);
  background: var(--surface);
  touch-action: none;
  cursor: crosshair;
}

.cb-handwriting__canvas[aria-readonly="true"] {
  cursor: default;
  touch-action: pan-y;
}

.cb-handwriting__empty,
.cb-handwriting__status,
.cb-handwriting-card__status {
  min-height: 1.2em;
  margin: 8px 0 0;
  color: var(--text-muted, #69736e);
  font: 400 var(--t-label, .75rem)/1.4 var(--font-sans, system-ui, sans-serif);
}

.cb-handwriting__status--error,
.cb-handwriting-card__status--error { color: var(--error, #a8473f); }

@media (pointer: coarse) {
  .cb-handwriting__canvas { cursor: default; }
}