/* hoiyte components — CSS only. Type sizes come from the type-style classes in tokens.css
   (.display .title .heading .body .body-sm .label .caption); colours, space and radii from tokens. */

.hy-root { font-family: var(--font-sans); color: var(--ink); background: var(--surface); }
.hy-root :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--surface); }
.hy-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hy-icon.sm { width: 16px; height: 16px; }

/* Button */
.hy-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--space-12); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  border: 1.5px solid transparent; font-family: var(--font-sans); cursor: pointer; text-decoration: none; }
.hy-btn.primary { background: var(--la-chuoi); color: var(--on-fill); }
.hy-btn.primary:hover { background: color-mix(in srgb, var(--la-chuoi) 85%, var(--ink)); }
.hy-btn.secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.hy-btn.secondary:hover { background: var(--surface-sunken); }
.hy-btn.quiet { background: transparent; color: var(--la-chuoi); padding-inline: var(--space-3); text-decoration: underline; text-underline-offset: 3px; }
.hy-btn.danger { background: var(--son); color: var(--on-fill); }
.hy-btn:active { box-shadow: inset 0 0 0 1px var(--ink); }
.hy-btn[disabled] { opacity: .5; cursor: not-allowed; }
.hy-btn.block { display: flex; width: 100%; }

/* Badge / chip */
.hy-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); color: var(--ink); background: var(--surface-sunken); }
.hy-badge.verified { background: var(--la-chuoi-soft); color: var(--la-chuoi); }
.hy-badge.watch { background: var(--vang-voi); color: var(--ink); }
.hy-badge.danger { background: var(--son-soft); color: var(--son); }

/* Card shell */
.hy-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-6); }

/* TrustCard */
.hy-trust { display: grid; gap: var(--space-4); max-width: 400px; }
.hy-trust .who { display: flex; gap: var(--space-4); align-items: center; }
.hy-trust .initials { width: 56px; height: 56px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--gach-tau-soft); color: var(--ink); font-family: var(--font-serif); font-size: 22px; font-weight: 600; flex: none; }
.hy-trust .who p { margin: 0; }
.hy-trust .role { color: var(--ink-muted); }
.hy-trust dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0;
  padding-top: var(--space-4); border-top: 1px solid var(--line); }
.hy-trust dt { color: var(--ink-muted); }
.hy-trust dd { margin: 0; }
.hy-trust .skills { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* VisitSummary */
.hy-summary { display: grid; gap: var(--space-6); max-width: 560px; }
.hy-summary header p { margin: 0; }
.hy-summary header .meta { color: var(--ink-muted); margin-top: var(--space-1); }
.hy-summary section { display: grid; gap: var(--space-2); }
.hy-summary h3 { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.hy-summary ul { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-1); }
.hy-summary .vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-2); }
.hy-summary .vital { background: var(--surface-sunken); border-radius: var(--radius-sm); padding: var(--space-3); }
.hy-summary .vital p { margin: 0; }
.hy-summary .vital .k { color: var(--ink-muted); }
.hy-summary .go { background: var(--son-soft); border-radius: var(--radius-md); padding: var(--space-4); }
.hy-summary .go h3 { color: var(--son); }
.hy-summary .step-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--gach-tau); color: var(--on-fill); flex: none; }

/* SafetyNotice */
.hy-notice { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md); background: var(--son-soft); color: var(--ink); max-width: 560px; }
.hy-notice .mark { color: var(--son); padding-top: 3px; }
.hy-notice p { margin: 0; }
.hy-notice .lead { color: var(--son); }
.hy-notice .call { display: inline-flex; margin-top: var(--space-3); }
.hy-notice.info { background: var(--la-chuoi-soft); }
.hy-notice.info .mark, .hy-notice.info .lead { color: var(--la-chuoi); }