/* =================================================================
   ATOM × Material 3 — Components
   M3 component anatomy (state layers, tonal surfaces) in ATOM skin.
   ================================================================= */

/* ---------- State-layer primitive ----------
   Every interactive M3 element gets a ::before overlay tinted by a
   --state color, raised on hover/focus/press. */
.md-state{position:relative;isolation:isolate;overflow:hidden}
.md-state::before{
  content:"";position:absolute;inset:0;background:var(--state,currentColor);
  opacity:0;transition:opacity var(--md-dur-short) var(--md-ease-standard);
  pointer-events:none;z-index:0;
}
.md-state:hover::before{opacity:var(--md-state-hover)}
.md-state:focus-visible::before{opacity:var(--md-state-focus)}
.md-state>*{position:relative;z-index:1}

/* Ripple */
.md-ripple{position:absolute;border-radius:50%;background:var(--state,currentColor);
  opacity:.22;transform:scale(0);pointer-events:none;z-index:0;
  animation:md-ripple-anim .62s var(--md-ease-standard) forwards}
@keyframes md-ripple-anim{to{transform:scale(2.2);opacity:0}}
@media(prefers-reduced-motion:reduce){.md-ripple{display:none}}

:focus-visible{outline:none}

/* =================================================================
   BUTTONS
   ================================================================= */
.md-btn{
  --state:var(--md-on-surface);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 24px;border:none;border-radius:var(--md-shape-full);
  font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-label-large);
  letter-spacing:0.01em;cursor:pointer;white-space:nowrap;user-select:none;
  transition:box-shadow var(--md-dur-medium) var(--md-ease-standard),
             background var(--md-dur-medium) var(--md-ease-standard);
}
.md-btn .md-i{width:18px;height:18px;margin-left:-4px}
.md-btn:disabled{cursor:not-allowed;pointer-events:none;
  background:color-mix(in srgb,var(--md-on-surface) 12%,transparent);
  color:color-mix(in srgb,var(--md-on-surface) 38%,transparent);box-shadow:none}

.md-btn--filled{background:var(--md-primary);color:var(--md-on-primary);--state:var(--md-on-primary)}
.md-btn--filled:hover{box-shadow:var(--md-elev-1)}
.md-btn--tonal{background:var(--md-secondary-container);color:var(--md-on-secondary-container);--state:var(--md-on-secondary-container)}
.md-btn--tonal:hover{box-shadow:var(--md-elev-1)}
.md-btn--elevated{background:var(--md-surface-container-low);color:var(--md-primary);box-shadow:var(--md-elev-1);--state:var(--md-primary)}
.md-btn--elevated:hover{box-shadow:var(--md-elev-2)}
.md-btn--outlined{background:transparent;color:var(--md-primary);border:1px solid var(--md-outline-variant);--state:var(--md-primary)}
.md-btn--outlined:hover{border-color:var(--md-primary)}
.md-btn--text{background:transparent;color:var(--md-primary);padding:0 12px;--state:var(--md-primary)}

/* Icon button */
.md-icon-btn{
  --state:var(--md-on-surface-variant);
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:var(--md-shape-full);background:transparent;
  color:var(--md-on-surface-variant);cursor:pointer;flex:0 0 auto;
}
.md-icon-btn.is-on{color:var(--md-primary);--state:var(--md-primary)}
.md-icon-btn--filled{background:var(--md-primary);color:var(--md-on-primary);--state:var(--md-on-primary)}
.md-icon-btn .md-i{width:22px;height:22px}

/* Segmented buttons */
.md-segmented{display:inline-flex;border:1px solid var(--md-outline);border-radius:var(--md-shape-full);overflow:hidden}
.md-seg{
  --state:var(--md-on-surface);
  height:40px;padding:0 16px;display:inline-flex;align-items:center;gap:6px;
  border:none;background:transparent;color:var(--md-on-surface);
  font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-label-large);cursor:pointer;
  border-right:1px solid var(--md-outline);
}
.md-seg:last-child{border-right:none}
.md-seg[aria-pressed="true"]{background:var(--md-secondary-container);color:var(--md-on-secondary-container);--state:var(--md-on-secondary-container)}
.md-seg .md-i{width:18px;height:18px}

/* FAB */
.md-fab{
  --state:var(--md-on-primary-container);
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:56px;min-width:56px;padding:0;border:none;border-radius:var(--md-shape-lg);
  background:var(--md-primary-container);color:var(--md-on-primary-container);
  box-shadow:var(--md-elev-3);cursor:pointer;
  font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-label-large);
  transition:box-shadow var(--md-dur-medium) var(--md-ease-standard);
}
.md-fab:hover{box-shadow:var(--md-elev-4)}
.md-fab .md-i{width:24px;height:24px}
.md-fab--extended{padding:0 20px}
.md-fab--small{height:40px;min-width:40px;border-radius:var(--md-shape-md)}
.md-fab--large{height:96px;min-width:96px;border-radius:var(--md-shape-xl)}
.md-fab--large .md-i{width:36px;height:36px}
.md-fab--primary{background:var(--md-primary);color:var(--md-on-primary);--state:var(--md-on-primary)}
.md-fab--tertiary{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);--state:var(--md-on-tertiary-container)}

/* =================================================================
   CARDS
   ================================================================= */
.md-card{border-radius:var(--md-shape-md);padding:16px;transition:box-shadow var(--md-dur-medium) var(--md-ease-standard)}
.md-card--elevated{background:var(--md-surface-container-low);box-shadow:var(--md-elev-1)}
.md-card--elevated.md-state:hover{box-shadow:var(--md-elev-2)}
.md-card--filled{background:var(--md-surface-container-highest)}
.md-card--outlined{background:var(--md-surface);border:1px solid var(--md-outline-variant)}

/* =================================================================
   CHIPS
   ================================================================= */
.md-chip{
  --state:var(--md-on-surface-variant);
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 16px;
  border-radius:var(--md-shape-sm);border:1px solid var(--md-outline-variant);
  background:transparent;color:var(--md-on-surface-variant);
  font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-label-large);cursor:pointer;
}
.md-chip .md-i{width:18px;height:18px}
.md-chip--elevated{border-color:transparent;background:var(--md-surface-container-low);box-shadow:var(--md-elev-1)}
.md-chip[aria-pressed="true"]{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-color:transparent;--state:var(--md-on-secondary-container)}
.md-chip[aria-pressed="true"] .md-chip-check{width:18px;height:18px;margin-left:-4px}

/* =================================================================
   TEXT FIELDS
   ================================================================= */
.md-field{position:relative;display:inline-flex;flex-direction:column;min-width:240px}
.md-field input{
  height:56px;width:100%;padding:24px 16px 8px;border:none;outline:none;
  font-family:var(--md-font-plain);font-size:var(--md-body-large);color:var(--md-on-surface);
  background:transparent;
}
.md-field label{
  position:absolute;left:16px;top:18px;color:var(--md-on-surface-variant);
  font-size:var(--md-body-large);pointer-events:none;
  transition:all var(--md-dur-short) var(--md-ease-standard);
}
.md-field input:focus+label,
.md-field input:not(:placeholder-shown)+label{top:8px;font-size:var(--md-body-small);color:var(--md-primary)}
.md-field .md-supporting{font-size:var(--md-body-small);color:var(--md-on-surface-variant);padding:4px 16px 0}

/* Filled variant */
.md-field--filled input{background:var(--md-surface-container-highest);border-radius:var(--md-shape-xs) var(--md-shape-xs) 0 0;
  border-bottom:1px solid var(--md-on-surface-variant)}
.md-field--filled input:focus{border-bottom:2px solid var(--md-primary)}

/* Outlined variant */
.md-field--outlined input{border:1px solid var(--md-outline);border-radius:var(--md-shape-xs)}
.md-field--outlined input:focus{border:2px solid var(--md-primary);padding:23px 15px 7px}
.md-field--outlined label{background:var(--md-surface);padding:0 4px;left:12px}
.md-field--outlined input:focus+label,
.md-field--outlined input:not(:placeholder-shown)+label{top:-9px;left:12px}

/* =================================================================
   SWITCH / CHECKBOX / RADIO / SLIDER
   ================================================================= */
.md-switch{appearance:none;-webkit-appearance:none;position:relative;width:52px;height:32px;border-radius:var(--md-shape-full);
  background:var(--md-surface-container-highest);border:2px solid var(--md-outline);cursor:pointer;flex:0 0 auto;margin:0;
  transition:background var(--md-dur-medium) var(--md-ease-emphasized),border-color var(--md-dur-medium) var(--md-ease-emphasized)}
.md-switch::after{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;background:var(--md-outline);
  transition:all var(--md-dur-medium) var(--md-ease-emphasized)}
.md-switch:hover::after{background:var(--md-on-surface-variant)}
.md-switch:checked{background:var(--md-primary);border-color:var(--md-primary)}
.md-switch:checked::after{left:22px;width:24px;height:24px;background:var(--md-on-primary)}
.md-switch:disabled{opacity:.38;cursor:not-allowed}

.md-checkbox{appearance:none;width:18px;height:18px;border:2px solid var(--md-on-surface-variant);
  border-radius:2px;cursor:pointer;position:relative;flex:0 0 auto;transition:all var(--md-dur-short)}
.md-checkbox:checked{background:var(--md-primary);border-color:var(--md-primary)}
.md-checkbox:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--md-on-primary);border-width:0 2px 2px 0;transform:rotate(45deg)}

.md-radio{appearance:none;width:20px;height:20px;border:2px solid var(--md-on-surface-variant);
  border-radius:50%;cursor:pointer;position:relative;flex:0 0 auto}
.md-radio:checked{border-color:var(--md-primary)}
.md-radio:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--md-primary)}

.md-slider{appearance:none;width:100%;height:16px;background:transparent;cursor:pointer}
.md-slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--md-primary-container)}
.md-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--md-primary);margin-top:-7px;box-shadow:0 0 0 0 rgba(36,73,251,.15);transition:box-shadow var(--md-dur-short)}
.md-slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 8px color-mix(in srgb,var(--md-primary) 12%,transparent)}

/* =================================================================
   LISTS
   ================================================================= */
.md-list{display:flex;flex-direction:column;background:var(--md-surface);border-radius:var(--md-shape-md);overflow:hidden}
.md-list-item{--state:var(--md-on-surface);display:flex;align-items:center;gap:16px;padding:12px 16px;min-height:56px;color:var(--md-on-surface);cursor:pointer}
.md-list-item .md-i{width:24px;height:24px;color:var(--md-on-surface-variant);flex:0 0 auto}
.md-list-item .li-text{flex:1;min-width:0}
.md-list-item .li-overline{font-size:var(--md-body-small);color:var(--md-on-surface-variant)}
.md-list-item .li-headline{font-size:var(--md-body-large)}
.md-list-item .li-support{font-size:var(--md-body-medium);color:var(--md-on-surface-variant)}

/* =================================================================
   DIALOG
   ================================================================= */
.md-scrim{position:fixed;inset:0;background:var(--md-scrim);opacity:0;visibility:hidden;
  transition:opacity var(--md-dur-medium) var(--md-ease-standard);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px}
.md-scrim.is-open{opacity:1;visibility:visible}
.md-dialog{background:var(--md-surface-container-high);border-radius:var(--md-shape-xl);
  padding:24px;max-width:420px;width:100%;box-shadow:var(--md-elev-3);
  transform:scale(0.9);opacity:0;transition:all var(--md-dur-medium) var(--md-ease-emphasized)}
.md-scrim.is-open .md-dialog{transform:scale(1);opacity:1}
.md-dialog .md-dialog-icon{width:24px;height:24px;color:var(--md-secondary);margin:0 auto 16px;display:block}
.md-dialog h3{margin:0 0 16px;text-align:center;color:var(--md-on-surface)}
.md-dialog p{margin:0 0 24px;color:var(--md-on-surface-variant);text-align:center}
.md-dialog .md-dialog-actions{display:flex;justify-content:flex-end;gap:8px}

/* =================================================================
   BADGE / TOOLTIP / DIVIDER
   ================================================================= */
.md-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;
  padding:0 4px;border-radius:var(--md-shape-full);background:var(--md-error);color:var(--md-on-error);
  font-size:11px;font-weight:700;font-family:var(--md-font-brand)}
.md-divider{height:1px;background:var(--md-outline-variant);border:none;margin:0}

/* =================================================================
   NAV BAR (bottom) — for the live demo
   ================================================================= */
.md-navbar{display:inline-flex;background:var(--md-surface-container);border-radius:var(--md-shape-lg);padding:12px 8px;gap:4px}
.md-navbar-item{--state:var(--md-on-surface);display:flex;flex-direction:column;align-items:center;gap:6px;
  border:none;background:transparent;cursor:pointer;padding:0 4px 2px;width:76px;color:var(--md-on-surface-variant);
  font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-label-medium)}
.md-navbar-item .ind{display:flex;align-items:center;justify-content:center;width:56px;height:32px;border-radius:var(--md-shape-full);
  position:relative;overflow:hidden;transition:background var(--md-dur-medium) var(--md-ease-emphasized)}
.md-navbar-item .md-i{width:24px;height:24px;position:relative;z-index:1;transition:transform var(--md-dur-medium) var(--md-ease-emphasized)}
.md-navbar-item.is-active{color:var(--md-on-surface)}
.md-navbar-item.is-active .ind{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.md-navbar-item.is-active .md-i{transform:scale(1.04)}