/* Align UI (ALIGN-UI, app-ui.js): a chat app's spec drawn in the card itself, in the page's own tokens. */
.aui { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.aui-stack { display: flex; flex-direction: column; min-width: 0; }
.aui-gap-s { gap: 6px; }
.aui-gap-m { gap: 12px; }
.aui-gap-l { gap: 20px; }
.aui-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.aui-row.aui-wrap { flex-wrap: wrap; }
.aui-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.aui-h { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; text-wrap: balance; }
.aui-p { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.aui-muted { color: var(--muted); }
.aui-good { color: var(--cl-high-tx); }
.aui-bad { color: var(--cl-low-tx); }
.aui-warn { color: var(--warn); }
.aui-label { font-size: 13px; color: var(--muted); font-weight: 550; }
.aui-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.aui-stat-l { color: var(--text-2); font-size: 14px; }
.aui-stat-v { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.aui-badge { align-self: flex-start; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--chip); color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.aui-badge.aui-good { color: var(--cl-high-tx); }
.aui-badge.aui-bad { color: var(--cl-low-tx); }
.aui-divider { border: 0; border-top: 1px solid var(--line); margin: 2px 0; width: 100%; }
.aui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aui-input {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: inherit; font-size: 15px; line-height: 1.45;
}
textarea.aui-input { resize: vertical; }
.aui-input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent); }
.aui-slider { width: 100%; accent-color: var(--msg); min-height: 32px; }
.aui-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.aui-toggle input { width: 20px; height: 20px; accent-color: var(--msg); }
.aui-choice { display: flex; flex-direction: column; gap: 6px; }
.aui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aui-chip {
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2);
  background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 550;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, transform 140ms ease-out;
}
.aui-chip.on { background: var(--msg); border-color: var(--msg); color: var(--on-msg); }
.aui-chip:active { transform: scale(0.97); }
.aui-btn {
  min-height: 44px; padding: 0 16px; border-radius: 12px; border: 0; font: inherit; font-size: 15px; font-weight: 600;
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
.aui-btn.primary { background: var(--msg); color: var(--on-msg); }
.aui-btn.plain { background: var(--raised-2); color: var(--text); }
.aui-btn:active { transform: scale(0.97); }
.aui-btn:disabled { opacity: 0.5; transform: none; cursor: default; }
@media (hover: hover) {
  .aui-btn.primary:not(:disabled):hover { background: color-mix(in srgb, var(--msg) 88%, var(--text)); }
  .aui-btn.plain:not(:disabled):hover, .aui-chip:not(.on):hover { background: var(--hover-2); }
}
.aui-btn:focus-visible, .aui-chip:focus-visible, .aui-opt:focus-visible, .aui-fc-face:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.aui-progress { display: flex; flex-direction: column; gap: 6px; }
.aui-bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.aui-bar i { display: block; height: 100%; background: var(--msg); transform-origin: left; transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1); }
.aui-list { display: flex; flex-direction: column; gap: 8px; }
.aui-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--raised); }
.aui-table-wrap { overflow-x: auto; }
.aui-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.aui-table th { text-align: left; color: var(--muted); font-weight: 550; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.aui-table td { padding: 8px; border-bottom: 1px solid var(--line); }
.aui-fc, .aui-quiz, .aui-timer { display: flex; flex-direction: column; gap: 10px; }
.aui-fc-face {
  min-height: 140px; padding: 18px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--raised);
  color: var(--text); font: inherit; font-size: 17px; line-height: 1.5; text-align: center; display: grid; place-items: center;
  transition: background-color 180ms ease-out, transform 140ms ease-out;
}
.aui-fc-face.back { background: color-mix(in srgb, var(--msg) 12%, var(--raised)); }
.aui-fc-face:active { transform: scale(0.99); }
.aui-q { font-size: 16px; }
.aui-opts { display: flex; flex-direction: column; gap: 8px; }
.aui-opt {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; text-align: left;
  min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised);
  color: var(--text); font: inherit; font-size: 15px; line-height: 1.45; transition: border-color 140ms ease-out, background-color 140ms ease-out;
}
.aui-opt-l { width: 24px; height: 24px; border-radius: 7px; background: var(--chip); display: grid; place-items: center; font-size: 12.5px; font-weight: 650; }
.aui-opt.right { border-color: var(--add); background: color-mix(in srgb, var(--add) 12%, var(--raised)); }
.aui-opt.wrong { border-color: var(--err); background: color-mix(in srgb, var(--err) 10%, var(--raised)); }
.aui-opt:disabled { cursor: default; }
@media (hover: hover) { .aui-opt:not(:disabled):hover { border-color: var(--line-2); background: var(--raised-2); } }
.aui-timer-v { font-size: 34px; font-weight: 650; font-variant-numeric: tabular-nums; }
.aui-skel { height: 12px; border-radius: 6px; background: var(--raised-2); }
.aui-skel.w2 { width: 60%; }
.aui-modal-back {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, 0.5); animation: aui-fade 160ms ease-out;
}
.aui-modal {
  width: min(480px, 100%); max-height: min(80dvh, 720px); overflow: auto; border-radius: 20px;
  background: var(--side); box-shadow: var(--shadow); padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px;
  animation: aui-rise 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.aui-modal-h { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.aui-modal-b { display: flex; flex-direction: column; gap: 12px; }
@keyframes aui-fade { from { opacity: 0; } }
@keyframes aui-rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  .aui-modal-back, .aui-modal { animation: none; }
  .aui-bar i, .aui-btn, .aui-chip, .aui-fc-face { transition-property: opacity, background-color, border-color, color; }
}
.cc-app-ui { padding-top: 2px; }