/* ============================================================
   APPLIED INTELLIGENCE LABS — ATOMS  v1.1
   Base elements and the smallest components. Consumes ail-tokens.css.
   Every class works on paper and on glass: material comes from
   data-theme="glass" on an ancestor, never from the component.
   ============================================================ */

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: var(--numeric-data);
}
[data-theme="glass"] body, body[data-theme="glass"] { background: var(--glass-backdrop); background-attachment: fixed; }

/* Headings follow the website: section titles 64, feature titles 36,
   card titles 30 on desktop, each tracking in as it grows. */
h1, h2, h3, h4 { margin: 0; color: var(--text-primary); font-weight: var(--font-weight-bold); }
h1 { font-size: var(--text-h1); line-height: var(--line-height-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-h2); line-height: var(--line-height-title); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--text-h3); line-height: var(--line-height-tight); letter-spacing: var(--tracking-h3); }
h4 { font-size: var(--text-h4); line-height: var(--line-height-title); letter-spacing: var(--tracking-h4); }
p { margin: 0 0 var(--sp-4); }
small { font-size: var(--text-sm); color: var(--text-muted); }
code, kbd { font-family: var(--font-code); font-size: .9em; background: var(--surface-sunk); padding: .1em .4em; border-radius: var(--radius-sm); }
::selection { background: rgba(127,188,210,.45); color: var(--text-primary); }
a, .ail-link { color: var(--text-link); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:hover, .ail-link:hover { text-decoration-thickness: 2px; }
:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring);
}
img, svg { max-width: 100%; }

.ail-display { font-size: var(--text-display); line-height: var(--line-height-display); letter-spacing: var(--tracking-display); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.ail-statement-title { font-size: var(--text-statement); line-height: var(--line-height-display); letter-spacing: var(--tracking-statement); font-weight: var(--font-weight-bold); color: var(--text-primary); margin: 0; }
.ail-lead { font-size: var(--text-lead); line-height: var(--line-height-relaxed); font-weight: var(--font-weight-light); color: var(--text-secondary); max-width: 38em; }
.ail-lead--hero { font-size: var(--text-lead-hero); }
.ail-body-lg { font-size: var(--text-body-lg); line-height: var(--line-height-loose); color: var(--text-body); }
.ail-body-web { font-size: var(--text-body-web); line-height: var(--line-height-relaxed); color: var(--text-body); }
.ail-kicker { font-size: var(--text-kicker); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin: 0; }
[data-theme="glass"] .ail-kicker { font-size: .875rem; color: var(--color-signal); }
.ail-muted { color: var(--text-muted); }
.ail-num { font-variant-numeric: tabular-nums; }
.ail-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- glass surface helper: raised glass with the lit rim ---------- */
.ail-glass {
  position: relative;
  background: var(--glass-regular-bg);
  -webkit-backdrop-filter: var(--glass-regular-filter);
  backdrop-filter: var(--glass-regular-filter);
  box-shadow: var(--glass-raised);
  border-radius: var(--radius-card);
}
.ail-glass::before, [data-theme="glass"] .ail-rim::before {
  content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.ail-glass--clear  { background: var(--glass-clear-bg);  -webkit-backdrop-filter: var(--glass-clear-filter);  backdrop-filter: var(--glass-clear-filter); }
.ail-glass--tinted { background: var(--glass-tinted-bg); -webkit-backdrop-filter: var(--glass-tinted-filter); backdrop-filter: var(--glass-tinted-filter); }
.ail-glass--bright { background: var(--glass-bright-bg); box-shadow: var(--glass-bright-shadow); color: var(--glass-bright-ink); }
.ail-glass--bright::before { display: none; }
.ail-recessed { background: var(--glass-recessed-bg); box-shadow: var(--glass-recessed); border-radius: var(--radius-input); }

/* ---------- buttons ---------- */
.ail-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--button-height-md); padding: 0 24px;
  border-radius: var(--radius-button); border: 1.5px solid transparent;
  font: var(--font-weight-semibold) .9375rem/1 var(--font-primary); letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ail-btn:active { transform: scale(var(--press-scale)); }
.ail-btn:disabled, .ail-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.ail-btn svg { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
/* md 46px / 15px is the website's header button; lg 56px / 17px its hero button */
.ail-btn-sm { min-height: var(--button-height-sm); padding: 0 18px; font-size: .875rem; }
.ail-btn-lg { min-height: var(--button-height-lg); padding: 0 30px; font-size: 1.0625rem; }

.ail-btn-primary { background: var(--color-primary); color: var(--color-primary-ink); }
.ail-btn-primary:hover { background: var(--color-primary-hover); }
.ail-btn-secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.ail-btn-secondary:hover { background: var(--primary-wash); }
.ail-btn-ghost { background: transparent; color: var(--color-primary); padding: 0 10px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ail-btn-icon { width: var(--button-height-md); padding: 0; border-color: var(--border-default); color: var(--text-primary); background: var(--bg-surface); }
.ail-btn-icon:hover { background: var(--bg-surface-hover); }

/* glass: primary is the Bright material; secondary and icon are clear glass with a rim */
[data-theme="glass"] .ail-btn-primary { background: var(--glass-bright-bg); color: var(--glass-bright-ink); box-shadow: var(--glass-bright-shadow); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-theme="glass"] .ail-btn-secondary,
[data-theme="glass"] .ail-btn-icon {
  background: var(--glass-control-bg); color: var(--text-primary); border-color: transparent;
  -webkit-backdrop-filter: var(--glass-control-filter); backdrop-filter: var(--glass-control-filter);
  box-shadow: var(--glass-raised-sm);
}
[data-theme="glass"] .ail-btn-secondary::before,
[data-theme="glass"] .ail-btn-icon::before {
  content: ""; position: absolute; inset: 0; padding: 1.2px; border-radius: inherit; background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
[data-theme="glass"] .ail-btn-ghost { color: var(--text-link); }
[data-theme="glass"] .ail-btn-icon { border-radius: 50%; }

/* ---------- pills, badges, chips ---------- */
/* A label that needs to stand out sits in a pill, in sentence case. */
.ail-pill {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--bg-page); color: var(--text-secondary);
  font-size: var(--text-sm); font-weight: var(--font-weight-semibold); line-height: 1.2;
}
.ail-pill--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); }
.ail-pill--deep { background: var(--color-primary); color: var(--color-primary-ink); }
.ail-pill--tinted { background: var(--primary-subtle); color: var(--color-primary); }
[data-theme="glass"] .ail-pill { background: var(--glass-pill-bg); color: var(--text-primary); box-shadow: inset 1px 1px 1px -.5px rgba(255,255,255,.3), inset -1px -1px 1px -.5px rgba(255,255,255,.1); }
[data-theme="glass"] .ail-pill--tinted { background: rgba(127,211,234,.18); color: var(--text-primary); box-shadow: inset 0 0 0 1px rgba(127,211,234,.6); }
[data-theme="glass"] .ail-pill--deep { background: var(--glass-bright-bg); color: var(--glass-bright-ink); }

.ail-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; }
.ail-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ail-badge--success { background: var(--color-success-light); color: var(--color-success); }
.ail-badge--warning { background: var(--color-warning-light); color: var(--color-warning); }
.ail-badge--error   { background: var(--color-error-light);   color: var(--color-error); }
.ail-badge--info    { background: var(--color-info-light);    color: var(--color-info); }
.ail-badge--neutral { background: var(--surface-sunk); color: var(--text-secondary); }
[data-theme="glass"] .ail-badge { color: var(--text-primary); }

.ail-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); font: var(--font-weight-semibold) var(--text-sm)/1 var(--font-primary); cursor: pointer; }
.ail-chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-ink); }
[data-theme="glass"] .ail-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
[data-theme="glass"] .ail-chip[aria-pressed="true"] { background: var(--glass-tinted-bg); border-color: rgba(127,211,234,.6); color: var(--text-primary); }

.ail-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-primary-ink); font-size: var(--text-xs); font-weight: var(--font-weight-bold); }

/* ---------- inputs: paper rectangles at 10px, glass recessed wells ---------- */
.ail-input, .ail-select, .ail-textarea {
  width: 100%; min-height: var(--input-height); padding: 0 14px;
  border: 1px solid var(--border-default); border-radius: var(--radius-input);
  background: var(--bg-layer-4); color: var(--text-primary);
  font: var(--font-weight-normal) 1rem/1.4 var(--font-primary);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ail-textarea { padding: 12px 14px; min-height: 112px; resize: vertical; }
.ail-input::placeholder, .ail-textarea::placeholder { color: var(--text-disabled); }
.ail-input:hover, .ail-select:hover, .ail-textarea:hover { border-color: var(--border-strong); }
.ail-select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.ail-input[aria-invalid="true"] { border-color: var(--color-error); }
[data-theme="glass"] .ail-input, [data-theme="glass"] .ail-select, [data-theme="glass"] .ail-textarea {
  border: 0; background-color: var(--glass-recessed-bg); box-shadow: var(--glass-recessed); color: var(--text-primary); padding-left: 22px;
}
[data-theme="glass"] .ail-input::placeholder { color: rgba(255,255,255,.45); }

/* ---------- switch, check, radio ---------- */
.ail-switch { position: relative; display: inline-flex; align-items: center; width: 52px; height: 30px; padding: 3px; border: 0; border-radius: var(--radius-pill); background: var(--border-strong); cursor: pointer; transition: background-color var(--dur-base) var(--ease); }
.ail-switch::after { content: ""; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(6,26,45,.25); transition: transform var(--dur-base) var(--ease-spring); }
.ail-switch[aria-checked="true"] { background: var(--color-primary); }
.ail-switch[aria-checked="true"]::after { transform: translateX(22px); }
[data-theme="glass"] .ail-switch { background: rgba(3,14,26,.5); box-shadow: inset 2px 2px 5px rgba(0,0,0,.35), inset -1px -1px 0 rgba(255,255,255,.18); }
[data-theme="glass"] .ail-switch[aria-checked="true"] { background: rgba(127,211,234,.35); }
[data-theme="glass"] .ail-switch::after { background: linear-gradient(to bottom right, #fff, #E4F1F6); }

.ail-check, .ail-radio { appearance: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--border-strong); background: var(--bg-layer-4); display: inline-grid; place-content: center; cursor: pointer; flex-shrink: 0; }
.ail-check { border-radius: 6px; }
.ail-radio { border-radius: 50%; }
.ail-check:checked, .ail-radio:checked { border-color: var(--color-primary); background: var(--color-primary); }
.ail-check:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--color-primary-ink); border-bottom: 2px solid var(--color-primary-ink); transform: rotate(-45deg) translate(1px,-1px); }
/* a checked radio is a solid node, never a dot inside a ring: the brand has no concentric circles */
[data-theme="glass"] .ail-check, [data-theme="glass"] .ail-radio { background: var(--glass-recessed-bg); border-color: rgba(255,255,255,.3); }
[data-theme="glass"] .ail-check:checked, [data-theme="glass"] .ail-radio:checked { background: var(--color-signal); border-color: var(--color-signal); }
@media (forced-colors: active) { .ail-check:checked, .ail-radio:checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; } }

/* ---------- avatar, rule ---------- */
.ail-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--depth-1); color: var(--depth-4); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); overflow: hidden; }
.ail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ail-rule { height: 1px; border: 0; background: var(--border-default); margin: var(--sp-6) 0; }
.ail-rule--deep { width: 88px; height: 2px; background: var(--color-primary); }

/* ---------- the loader: the mark's network at rest, its route lighting to the target ---------- */
.ail-loader { width: 40px; height: 40px; display: inline-block; overflow: visible; }
.ail-loader__net { fill: none; stroke: var(--color-primary); stroke-width: .95; stroke-linecap: round; stroke-linejoin: round; opacity: .28; }
.ail-loader__dots { fill: var(--color-primary); opacity: .28; }
.ail-loader__route { fill: none; stroke: var(--depth-3); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: ail-route 1.8s var(--ease) infinite; }
.ail-loader__target { fill: var(--depth-3); transform-box: fill-box; transform-origin: center; animation: ail-target 1.8s var(--ease) infinite; }
[data-theme="glass"] .ail-loader__net { stroke: #fff; opacity: .35; }
[data-theme="glass"] .ail-loader__dots { fill: #fff; opacity: .35; }
[data-theme="glass"] .ail-loader__route { stroke: var(--color-signal); }
[data-theme="glass"] .ail-loader__target { fill: var(--color-signal); }
@keyframes ail-route { 0% { stroke-dashoffset: 1; opacity: 1; } 55%, 82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ail-target { 0%, 50% { opacity: .3; transform: scale(.7); } 62% { opacity: 1; transform: scale(1.3); } 72%, 86% { opacity: 1; transform: scale(1); } 100% { opacity: .3; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .ail-loader__route { animation: none; stroke-dashoffset: 0; } .ail-loader__target { animation: none; opacity: 1; transform: none; } }