/* Natalie Gill — component styles. Every color, size and radius comes from tokens.css. */

.ng-field{display:block;position:relative;background:var(--surface);overflow:hidden}
.ng-field canvas{display:block;width:100%;height:100%}
.ng-field__panel{position:absolute;left:var(--space-4);bottom:var(--space-4);background:var(--surface);border:1px solid var(--line);padding:var(--space-3) var(--space-4);max-width:440px}
.ng-field__name{font-family:var(--font-mono);font-size:28px;line-height:32px;font-weight:500;letter-spacing:-0.01em;color:var(--ink);margin:0}
.ng-field__tag{font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-muted);margin-top:var(--space-1)}

.ng-button{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:13px;line-height:20px;font-weight:500;padding:var(--space-2) var(--space-3);border:1px solid var(--primary);background:var(--primary);color:var(--on-primary);border-radius:var(--radius-1);cursor:pointer;text-decoration:none;white-space:nowrap}
.ng-button:hover{background:var(--link);border-color:var(--link)}
.ng-button:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.ng-button--ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.ng-button--ghost:hover{background:var(--surface-hover);border-color:var(--line-strong);color:var(--ink)}
.ng-button--small{font-size:12px;line-height:16px;padding:var(--space-1) var(--space-2)}
.ng-button[disabled],.ng-button[aria-disabled="true"]{background:transparent;border-color:var(--line-strong);color:var(--ink-muted);cursor:default}

.ng-tag{display:inline-block;font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;padding:var(--space-1) var(--space-2);background:var(--surface-selected);color:var(--ink);border-radius:var(--radius-1);white-space:nowrap}
.ng-tag--outline{background:transparent;border:1px solid var(--line-strong);color:var(--ink-muted)}

.ng-stat{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.ng-stat__label{font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-muted)}
.ng-stat__value{font-family:var(--font-mono);font-size:28px;line-height:32px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.ng-stat__caption{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--ink-muted)}
.ng-stat__caption--link{color:var(--link)}

.ng-code{margin:0;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-0);overflow:hidden;color:var(--ink)}
.ng-code__title{font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-muted);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line)}
.ng-code__pre{margin:0;padding:var(--space-3);font-family:var(--font-mono);font-size:13px;line-height:20px;white-space:pre;overflow-x:auto;color:var(--ink)}
.ng-code__pre b{font-weight:700;color:var(--link)}

.ng-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-0);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);color:var(--ink)}
.ng-card__eyebrow{font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-muted)}
.ng-card__title{font-family:var(--font-mono);font-size:22px;line-height:28px;font-weight:500;margin:0;color:var(--ink)}
.ng-card__body{font-family:var(--font-sans);font-size:14px;line-height:22px;margin:0;color:var(--ink)}
.ng-card__footer{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.ng-card a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ng-card a:hover{text-decoration-thickness:2px}