/* Aipim design system · https://github.com/talis-galhardi/aipim · MIT License · Copyright (c) 2026 Talis Galhardi
   Generated by tools/build_web.py from the files in components/web/: do not edit by hand.
   Load tokens/build/css/aipim.css first. */

/* ---- aipim-base.css ---- */
/* Shared helpers for the Aipim components. Load tokens/build/css/aipim.css first. */

.aipim-icon{
  display:inline-block;
  flex:none;
  inline-size:var(--aipim-size-icon-md);
  block-size:var(--aipim-size-icon-md);
}
.aipim-icon--sm{inline-size:var(--aipim-size-icon-sm);block-size:var(--aipim-size-icon-sm)}
.aipim-icon--lg{inline-size:var(--aipim-size-icon-lg);block-size:var(--aipim-size-icon-lg)}

.aipim-visually-hidden{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

@keyframes aipim-spin{to{transform:rotate(360deg)}}

/* Dismiss button of the Alert: a 24px target with a 16px icon, with no hover fill because the alert surface is tinted.
   Needs an aria-label, such as "Dismiss". Elsewhere use .aipim-icon-button--sm. */
.aipim-dismiss{
  box-sizing:border-box;
  display:inline-grid;
  place-items:center;
  flex:none;
  inline-size:var(--aipim-size-touch-min);
  block-size:var(--aipim-size-touch-min);
  margin:0;
  padding:0;
  border:0;
  border-radius:var(--aipim-radius-sm);
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.aipim-dismiss .aipim-icon{
  inline-size:var(--aipim-size-icon-sm);
  block-size:var(--aipim-size-icon-sm);
}
.aipim-dismiss:focus-visible{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}
@media (forced-colors:active){
  .aipim-dismiss:focus-visible{outline-color:Highlight}
}

/* ---- button.css ---- */
/* Button. Variants: primary (default), --secondary, --outline, --ghost. Sizes: --sm, default (md), --lg.
   Loading: set aria-busy="true" and show .aipim-button__spinner. Disabled: the native disabled attribute. */

.aipim-button{
  --aipim-button-height:var(--aipim-size-control-md);
  --aipim-button-inset:var(--aipim-inset-md);
  --aipim-button-icon:var(--aipim-size-icon-md);
  --aipim-button-bg:var(--aipim-action-primary-bg);
  --aipim-button-fg:var(--aipim-action-primary-text);
  --aipim-button-bg-hover:var(--aipim-action-primary-hover);
  --aipim-button-border:transparent;

  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--aipim-space-8);
  block-size:var(--aipim-button-height);
  margin:0;
  /* The border is always 2px, so every variant has the same size and the label never moves. */
  padding-block:0;
  padding-inline:calc(var(--aipim-button-inset) - var(--aipim-border-medium));
  border:var(--aipim-border-medium) solid var(--aipim-button-border);
  border-radius:var(--aipim-radius-md);
  background-color:var(--aipim-button-bg);
  color:var(--aipim-button-fg);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-label-size);
  font-weight:var(--aipim-text-label-weight);
  line-height:var(--aipim-text-label-line);
  letter-spacing:var(--aipim-text-label-tracking);
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--aipim-duration-fast) var(--aipim-ease-standard);
}
.aipim-button .aipim-icon{
  inline-size:var(--aipim-button-icon);
  block-size:var(--aipim-button-icon);
}

/* Pressed looks like hover. */
.aipim-button:hover{background-color:var(--aipim-button-bg-hover)}

.aipim-button:focus-visible{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}

/* Variants */
.aipim-button--secondary{
  --aipim-button-bg:var(--aipim-action-secondary-bg);
  --aipim-button-fg:var(--aipim-action-secondary-text);
  --aipim-button-bg-hover:var(--aipim-action-secondary-hover);
}
.aipim-button--outline{
  --aipim-button-bg:transparent;
  --aipim-button-fg:var(--aipim-action-secondary-bg);
  --aipim-button-bg-hover:var(--aipim-bg-sunken);
  --aipim-button-border:var(--aipim-action-secondary-bg);
}
.aipim-button--ghost{
  --aipim-button-bg:transparent;
  --aipim-button-fg:var(--aipim-action-secondary-bg);
  --aipim-button-bg-hover:var(--aipim-bg-sunken);
}

/* Sizes */
.aipim-button--sm{
  --aipim-button-height:var(--aipim-size-control-sm);
  --aipim-button-inset:var(--aipim-inset-sm);
  --aipim-button-icon:var(--aipim-size-icon-sm);
}
.aipim-button--lg{
  --aipim-button-height:var(--aipim-size-control-lg);
  --aipim-button-inset:var(--aipim-inset-lg);
}

/* Disabled: native disabled, or aria-disabled for a link styled as a button. */
.aipim-button:disabled,
.aipim-button[aria-disabled="true"]{
  opacity:var(--aipim-opacity-disabled);
  cursor:not-allowed;
}
.aipim-button:disabled:hover,
.aipim-button[aria-disabled="true"]:hover{background-color:var(--aipim-button-bg)}

/* Loading: the spinner replaces the leading icon, the label stays. */
.aipim-button__spinner{display:none}
.aipim-button[aria-busy="true"]{cursor:progress;pointer-events:none}
.aipim-button[aria-busy="true"] .aipim-button__spinner{
  display:inline-block;
  animation:aipim-spin 1s linear infinite;
}
.aipim-button[aria-busy="true"] .aipim-button__icon-leading{display:none}
@media (prefers-reduced-motion:reduce){
  .aipim-button[aria-busy="true"] .aipim-button__spinner{animation:none}
}

@media (forced-colors:active){
  .aipim-button{border-color:ButtonText}
  .aipim-button:focus-visible{outline-color:Highlight}
}

/* ---- icon-button.css ---- */
/* Icon button: a button that shows only an icon. Sizes: default (medium, 44px) and --sm (24px).
   Markup: button.aipim-icon-button[aria-label] > svg.aipim-icon[aria-hidden=true]. Use an a element for a link.
   An icon button has no text, so it always needs an aria-label that names the action, such as "Close". */

.aipim-icon-button{
  --aipim-icon-button-size:var(--aipim-size-touch-comfortable);
  --aipim-icon-button-icon:var(--aipim-size-icon-lg);
  --aipim-icon-button-radius:var(--aipim-radius-md);

  box-sizing:border-box;
  display:inline-grid;
  place-items:center;
  flex:none;
  inline-size:var(--aipim-icon-button-size);
  block-size:var(--aipim-icon-button-size);
  margin:0;
  padding:0;
  border:0;
  border-radius:var(--aipim-icon-button-radius);
  background-color:transparent;
  color:var(--aipim-text-primary);
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--aipim-duration-fast) var(--aipim-ease-standard);
}
.aipim-icon-button .aipim-icon{
  inline-size:var(--aipim-icon-button-icon);
  block-size:var(--aipim-icon-button-icon);
}

/* Pressed looks like hover. */
.aipim-icon-button:hover{background-color:var(--aipim-bg-sunken)}

.aipim-icon-button:focus-visible{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}

/* Small: 24px, the minimum target. Use it only where space is tight and the target does not need to be comfortable. */
.aipim-icon-button--sm{
  --aipim-icon-button-size:var(--aipim-size-touch-min);
  --aipim-icon-button-icon:var(--aipim-size-icon-sm);
  --aipim-icon-button-radius:var(--aipim-radius-sm);
}

/* Disabled: native disabled, or aria-disabled for a link. */
.aipim-icon-button:disabled,
.aipim-icon-button[aria-disabled="true"]{
  opacity:var(--aipim-opacity-disabled);
  cursor:not-allowed;
}
.aipim-icon-button:disabled:hover,
.aipim-icon-button[aria-disabled="true"]:hover{background-color:transparent}

@media (forced-colors:active){
  .aipim-icon-button:focus-visible{outline-color:Highlight}
}

/* ---- link.css ---- */
/* Link. Inline by default (inherits the surrounding text). .aipim-link--standalone stands on its own, in the label style,
   with an optional .aipim-icon after the text. The underline is always on. */

.aipim-link{
  color:var(--aipim-link);
  text-decoration:underline;
  border-radius:var(--aipim-radius-sm);
  cursor:pointer;
  transition:color var(--aipim-duration-fast) var(--aipim-ease-standard);
}
.aipim-link:visited{color:var(--aipim-link-visited)}
.aipim-link:hover{color:var(--aipim-link-hover)}
.aipim-link:focus-visible{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}

.aipim-link--standalone{
  display:inline-flex;
  align-items:center;
  gap:var(--aipim-space-4);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-label-size);
  font-weight:var(--aipim-text-label-weight);
  line-height:var(--aipim-text-label-line);
  letter-spacing:var(--aipim-text-label-tracking);
}
.aipim-link .aipim-icon{
  inline-size:var(--aipim-size-icon-sm);
  block-size:var(--aipim-size-icon-sm);
}

/* ---- text-field.css ---- */
/* Text field. The label always sits above the field (no floating label, for accessibility).
   Sizes: default (md, 40px) and --lg (48px). Error: aria-invalid="true" on the input.
   Disabled: the native disabled attribute on the input, plus .aipim-field--disabled on the wrapper for older browsers. */

.aipim-field{
  --aipim-field-height:var(--aipim-size-control-md);
  --aipim-field-inset:var(--aipim-inset-sm);
  --aipim-field-border:var(--aipim-border-strong);

  display:flex;
  flex-direction:column;
  gap:var(--aipim-space-8);
  min-inline-size:0;
}
.aipim-field--lg{
  --aipim-field-height:var(--aipim-size-control-lg);
  --aipim-field-inset:var(--aipim-inset-md);
}

.aipim-field__label{
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-label-size);
  font-weight:var(--aipim-text-label-weight);
  line-height:var(--aipim-text-label-line);
  letter-spacing:var(--aipim-text-label-tracking);
}

.aipim-field__control{
  box-sizing:border-box;
  inline-size:100%;
  block-size:var(--aipim-field-height);
  margin:0;
  padding-block:0;
  padding-inline:var(--aipim-field-inset);
  border:var(--aipim-border-thin) solid var(--aipim-field-border);
  border-radius:var(--aipim-radius-md);
  background-color:var(--aipim-bg-surface);
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-body-size);
  font-weight:var(--aipim-text-body-weight);
  line-height:var(--aipim-text-body-line);
  /* A second pixel inside the border makes hover and error 2px without moving the text. */
  box-shadow:inset 0 0 0 0 var(--aipim-field-border);
  transition:box-shadow var(--aipim-duration-fast) var(--aipim-ease-standard);
}
.aipim-field__control::placeholder{color:var(--aipim-text-muted);opacity:1}
.aipim-field__control:hover{box-shadow:inset 0 0 0 var(--aipim-border-thin) var(--aipim-field-border)}
.aipim-field__control:focus-visible{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}
.aipim-field__control[aria-invalid="true"]{
  --aipim-field-border:var(--aipim-error-icon);
  box-shadow:inset 0 0 0 var(--aipim-border-thin) var(--aipim-field-border);
}

.aipim-field__helper{
  display:flex;
  align-items:flex-start;
  gap:var(--aipim-space-4);
  margin:0;
  color:var(--aipim-text-secondary);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-body-sm-size);
  font-weight:var(--aipim-text-body-sm-weight);
  line-height:var(--aipim-text-body-sm-line);
}
/* The error icon is in the markup and only shows when the input is invalid. */
.aipim-field__icon{
  display:none;
  inline-size:var(--aipim-size-icon-sm);
  block-size:var(--aipim-size-icon-sm);
  /* Centers the 16px icon on the first line of the 21px helper text. */
  margin-block-start:calc((var(--aipim-text-body-sm-size) * var(--aipim-text-body-sm-line) - var(--aipim-size-icon-sm)) / 2);
}
.aipim-field__control[aria-invalid="true"] ~ .aipim-field__helper{color:var(--aipim-error-text)}
.aipim-field__control[aria-invalid="true"] ~ .aipim-field__helper .aipim-field__icon{
  display:inline-block;
  color:var(--aipim-error-icon);
}

.aipim-field__control:disabled{background-color:var(--aipim-bg-sunken);cursor:not-allowed}
.aipim-field__control:disabled:hover{box-shadow:inset 0 0 0 0 var(--aipim-field-border)}
.aipim-field--disabled{opacity:var(--aipim-opacity-disabled)}
.aipim-field:has(:disabled){opacity:var(--aipim-opacity-disabled)}

@media (forced-colors:active){
  .aipim-field__control{border-color:FieldText}
  .aipim-field__control:focus-visible{outline-color:Highlight}
}

/* ---- select.css ---- */
/* Select. A native select with the look of the text field: load text-field.css first.
   Markup: div.aipim-field.aipim-select > label, select.aipim-field__control, svg.aipim-select__chevron, p.aipim-field__helper.
   The field becomes a grid and the chevron sits in the row of the control, so no wrapper goes around the select and the
   error rules of the text field (select[aria-invalid] ~ helper) still apply. The list that opens is the browser's own. */

.aipim-select{
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.aipim-select > *{grid-column:1}
.aipim-select .aipim-field__control{
  grid-row:2;
  appearance:none;
  /* Room for the chevron: the inset, the icon and the inset again. */
  padding-inline-end:calc(var(--aipim-field-inset) * 2 + var(--aipim-size-icon-md));
  text-overflow:ellipsis;
  cursor:pointer;
}
.aipim-select .aipim-field__helper{grid-row:3}
.aipim-select__chevron{
  grid-row:2;
  justify-self:end;
  align-self:center;
  inline-size:var(--aipim-size-icon-md);
  block-size:var(--aipim-size-icon-md);
  margin-inline-end:var(--aipim-field-inset);
  color:var(--aipim-text-secondary);
  pointer-events:none;
}
/* The first option with an empty value is the prompt ("Choose one"): muted, like a placeholder. The list keeps the
   color of the text. */
.aipim-select .aipim-field__control:has(option[value=""]:checked){color:var(--aipim-text-muted)}
.aipim-select option{color:var(--aipim-text-primary)}
.aipim-select .aipim-field__control:disabled{cursor:not-allowed}

@media (forced-colors:active){
  .aipim-select__chevron{color:FieldText}
}

/* ---- combobox.css ---- */
/* Combobox. A text field that filters a list of options while you type (ARIA 1.2 combobox, list autocomplete).
   Load text-field.css first; the behavior is in aipim.js. Markup: div.aipim-field.aipim-combobox > label,
   input.aipim-field__control[role=combobox][aria-controls], svg.aipim-combobox__chevron,
   div.aipim-combobox__popup[hidden] > ul.aipim-combobox__list[role=listbox] > li.aipim-combobox__option[role=option],
   p.aipim-combobox__empty[hidden]; then p.aipim-field__helper. The option under the arrows has aria-selected="true".
   Like the select, the field is a grid: the chevron and the popup sit in the row of the control, so the popup opens
   right under the field, over the helper, without a script measuring anything. */

.aipim-combobox{
  --aipim-combobox-rows:6.5;

  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.aipim-combobox > *{grid-column:1}
.aipim-combobox .aipim-field__control{
  grid-row:2;
  padding-inline-end:calc(var(--aipim-field-inset) * 2 + var(--aipim-size-icon-md));
  text-overflow:ellipsis;
}
.aipim-combobox .aipim-field__helper{grid-row:3}
.aipim-combobox__chevron{
  grid-row:2;
  justify-self:end;
  align-self:center;
  inline-size:var(--aipim-size-icon-md);
  block-size:var(--aipim-size-icon-md);
  margin-inline-end:var(--aipim-field-inset);
  color:var(--aipim-text-secondary);
  pointer-events:none;
  transition:transform var(--aipim-duration-fast) var(--aipim-ease-standard);
}
.aipim-combobox .aipim-field__control[aria-expanded="true"] ~ .aipim-combobox__chevron{transform:rotate(180deg)}

/* An absolute child of a grid takes its grid area as the box it is placed in: here, the row of the control. Both
   lines are named: with only the first, the area of an absolute child runs to the bottom edge of the grid. */
.aipim-combobox__popup{
  grid-row:2 / 3;
  position:absolute;
  inset-inline:0;
  inset-block-start:calc(100% + var(--aipim-space-4));
  z-index:var(--aipim-z-dropdown);
  box-sizing:border-box;
  /* Six and a half rows: the half row shows there is more to scroll. */
  max-block-size:calc(var(--aipim-size-control-md) * var(--aipim-combobox-rows) + var(--aipim-space-8));
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-block:var(--aipim-space-4);
  border:var(--aipim-border-thin) solid var(--aipim-border-subtle);
  border-radius:var(--aipim-radius-md);
  background-color:var(--aipim-bg-surface);
  box-shadow:var(--aipim-shadow-overlay);
}
.aipim-combobox__popup[hidden]{display:none}

.aipim-combobox__list{margin:0;padding:0;list-style:none}
/* The options keep the medium size in a large field: 40px tall, 12px at the sides. */
.aipim-combobox__option{
  position:relative;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  min-block-size:var(--aipim-size-control-md);
  padding-block:var(--aipim-space-8);
  padding-inline:var(--aipim-inset-sm);
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-body-size);
  line-height:var(--aipim-text-body-line);
  cursor:pointer;
}
.aipim-combobox__option[hidden]{display:none}
.aipim-combobox__option:hover{background-color:var(--aipim-bg-sunken)}
/* The option under the arrows: the fill and a bar on its start edge, so it is never shown by color alone. */
.aipim-combobox__option[aria-selected="true"]{background-color:var(--aipim-bg-sunken)}
.aipim-combobox__option[aria-selected="true"]::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  inline-size:var(--aipim-border-thick);
  background-color:var(--aipim-action-primary-bg);
}

.aipim-combobox__empty{
  margin:0;
  padding-block:var(--aipim-space-8);
  padding-inline:var(--aipim-inset-sm);
  color:var(--aipim-text-secondary);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-body-size);
  line-height:var(--aipim-text-body-line);
}
.aipim-combobox__empty[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .aipim-combobox__chevron{transition:none}
}
@media (forced-colors:active){
  .aipim-combobox__chevron{color:FieldText}
  .aipim-combobox__popup{border-color:CanvasText}
  .aipim-combobox__option[aria-selected="true"]{outline:var(--aipim-border-thin) solid Highlight;outline-offset:calc(var(--aipim-border-thin) * -1)}
  .aipim-combobox__option[aria-selected="true"]::before{background-color:Highlight}
}

/* ---- datepicker.css ---- */
/* Date picker. A Brazilian date field (input[data-aipim-format=date]) with a button that opens a calendar (ARIA date
   picker dialog). Load text-field.css first; the behavior and the calendar itself are written by aipim.js.
   Markup: div.aipim-field.aipim-datepicker > label, input.aipim-field__control[data-aipim-format=date],
   button.aipim-icon-button.aipim-datepicker__button[aria-label] > svg calendar, p.aipim-field__helper.
   The script adds div.aipim-datepicker__popup[role=dialog] > div.aipim-datepicker__header (two icon buttons and
   p.aipim-datepicker__month) and table.aipim-datepicker__grid[role=grid] with td.aipim-datepicker__day.
   Without the script the button stays hidden and the field is a plain text field. Like the combobox, the field is a
   grid and the button and the calendar sit in the row of the control. */

.aipim-datepicker{
  --aipim-datepicker-day:var(--aipim-size-control-md);
  /* The button is centered in the height of the field. */
  --aipim-datepicker-gap:calc((var(--aipim-field-height) - var(--aipim-size-control-sm)) / 2);

  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.aipim-datepicker > *{grid-column:1}
.aipim-datepicker .aipim-field__control{grid-row:2}
.aipim-datepicker .aipim-field__helper{grid-row:3}
.aipim-datepicker[data-aipim-ready] .aipim-field__control{
  padding-inline-end:calc(var(--aipim-size-control-sm) + var(--aipim-datepicker-gap) * 2);
}

.aipim-datepicker__button{
  --aipim-icon-button-size:var(--aipim-size-control-sm);
  --aipim-icon-button-icon:var(--aipim-size-icon-md);

  grid-row:2;
  justify-self:end;
  align-self:center;
  margin-inline-end:var(--aipim-datepicker-gap);
  color:var(--aipim-text-secondary);
}
.aipim-datepicker:not([data-aipim-ready]) .aipim-datepicker__button{display:none}

/* The day of the week of a valid date, on its own line under the helper text: "Sexta-feira, 20 de novembro". The
   script adds it; it is part of the description of the field. */
.aipim-datepicker .aipim-field__helper{flex-wrap:wrap;row-gap:0}
.aipim-datepicker__weekday{flex-basis:100%}
.aipim-datepicker__weekday::first-letter{text-transform:uppercase}
.aipim-datepicker__button:disabled{cursor:not-allowed}
.aipim-datepicker__button:disabled:hover{background-color:transparent}

/* The calendar opens under the field, at its start edge. An absolute child of a grid takes its grid area as the box it
   is placed in; both lines are named, or the area would run to the bottom edge of the grid. */
.aipim-datepicker__popup{
  grid-row:2 / 3;
  position:absolute;
  inset-inline-start:0;
  inset-block-start:calc(100% + var(--aipim-space-4));
  z-index:var(--aipim-z-dropdown);
  box-sizing:border-box;
  inline-size:calc(var(--aipim-datepicker-day) * 7 + var(--aipim-space-8) * 2 + var(--aipim-border-thin) * 2);
  max-inline-size:100%;
  padding:var(--aipim-space-8);
  border:var(--aipim-border-thin) solid var(--aipim-border-subtle);
  border-radius:var(--aipim-radius-md);
  background-color:var(--aipim-bg-surface);
  box-shadow:var(--aipim-shadow-overlay);
}
.aipim-datepicker__popup[hidden]{display:none}

.aipim-datepicker__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--aipim-space-4);
  margin-block-end:var(--aipim-space-4);
}
.aipim-datepicker__header .aipim-icon-button{
  --aipim-icon-button-size:var(--aipim-size-control-md);
  --aipim-icon-button-icon:var(--aipim-size-icon-md);
}
.aipim-datepicker__month{
  margin:0;
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-label-size);
  font-weight:var(--aipim-text-label-weight);
  line-height:var(--aipim-text-label-line);
  text-align:center;
}
/* "outubro de 2026": the month starts with a capital at the top of the calendar. */
.aipim-datepicker__month::first-letter{text-transform:uppercase}

/* The cells are separate so each day can be round. */
.aipim-datepicker__grid{
  inline-size:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  font-family:var(--aipim-font-body);
}
.aipim-datepicker__grid th{
  block-size:var(--aipim-size-control-sm);
  padding:0;
  color:var(--aipim-text-secondary);
  font-size:var(--aipim-text-body-sm-size);
  font-weight:var(--aipim-text-label-weight);
  line-height:var(--aipim-text-body-sm-line);
  text-align:center;
}
.aipim-datepicker__grid td{
  padding:0;
  block-size:var(--aipim-datepicker-day);
  text-align:center;
}
/* The day is a button inside the cell (td[role=gridcell]) and takes the focus, so a screen reader says its name each time.
   The rules that only make sense on a button name the element, so a page still holding an older script in its cache
   (where the day was the cell itself) keeps its table instead of stacking every day in one column. */
button.aipim-datepicker__day{
  display:block;
  inline-size:100%;
  block-size:100%;
  margin:0;
  padding:0;
  border:0;
  background-color:transparent;
  font-family:inherit;
}
.aipim-datepicker__day{
  box-sizing:border-box;
  border-radius:var(--aipim-radius-full);
  color:var(--aipim-text-primary);
  font-size:var(--aipim-text-body-size);
  line-height:var(--aipim-text-body-line);
  cursor:pointer;
}
.aipim-datepicker__day[hidden]{display:none}
.aipim-datepicker__day:hover{background-color:var(--aipim-bg-sunken)}
.aipim-datepicker__day:focus-visible{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:calc(var(--aipim-border-thick) * -1);
}
/* Today has a ring; the day chosen is filled. Neither is shown by color alone. */
.aipim-datepicker__day[aria-current="date"]{box-shadow:inset 0 0 0 var(--aipim-border-thin) var(--aipim-border-strong);font-weight:var(--aipim-text-label-weight)}
td[aria-selected="true"] > .aipim-datepicker__day{
  background-color:var(--aipim-action-primary-bg);
  color:var(--aipim-action-primary-text);
  font-weight:var(--aipim-text-label-weight);
}
.aipim-datepicker__day[aria-disabled="true"]{
  color:var(--aipim-text-muted);
  text-decoration:line-through;
  cursor:not-allowed;
}
.aipim-datepicker__day[aria-disabled="true"]:hover{background-color:transparent}

@media (forced-colors:active){
  .aipim-datepicker__popup{border-color:CanvasText}
  /* CanvasText on Canvas, not Highlight: some themes pair Highlight with HighlightText below 4.5:1 (Firefox: white on #3399FF). */
  td[aria-selected="true"] > .aipim-datepicker__day{background-color:CanvasText;color:Canvas;forced-color-adjust:none}
  .aipim-datepicker__day[aria-current="date"]{box-shadow:none;outline:var(--aipim-border-thin) solid CanvasText;outline-offset:calc(var(--aipim-border-thin) * -1)}
  .aipim-datepicker__day:focus-visible{outline-color:Highlight}
}

/* ---- list-item.css ---- */
/* List item. One row of a list: a start (an avatar), a title with a description, and an end (a chevron, a value or a switch).
   Markup: ul.aipim-list > li.aipim-list-item > .aipim-list-item__row > .aipim-list-item__leading, .aipim-list-item__text, .aipim-list-item__trailing.
   The row is a div when it only shows, an a or button when it leads somewhere, and a label when it holds a switch.
   Only the rows that act have hover and focus. The divider is a 1px line drawn over the bottom edge of the li, so it takes no height (a row is 69px, as in Figma), and it
   goes away on the last row. */

.aipim-list{
  margin:0;
  padding:0;
  list-style:none;
}

.aipim-list-item{
  position:relative;
  margin:0;
  padding:0;
}
.aipim-list-item::after{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  block-size:var(--aipim-border-thin);
  background-color:var(--aipim-border-subtle);
  pointer-events:none;
}
.aipim-list > .aipim-list-item:last-child::after,
.aipim-list-item--plain::after{content:none}

.aipim-list-item__row{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:var(--aipim-space-12);
  inline-size:100%;
  min-block-size:var(--aipim-size-touch-comfortable);
  margin:0;
  padding:var(--aipim-space-12) var(--aipim-space-16);
  border:0;
  background-color:transparent;
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-body-size);
  font-weight:var(--aipim-text-body-weight);
  line-height:var(--aipim-text-body-line);
  text-align:start;
  text-decoration:none;
  transition:background-color var(--aipim-duration-fast) var(--aipim-ease-standard);
}

.aipim-list-item__leading{flex:none}

.aipim-list-item__text{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-inline-size:0;
}
.aipim-list-item__title{overflow-wrap:anywhere}
.aipim-list-item__description{
  color:var(--aipim-text-secondary);
  font-size:var(--aipim-text-body-sm-size);
  font-weight:var(--aipim-text-body-sm-weight);
  line-height:var(--aipim-text-body-sm-line);
  letter-spacing:var(--aipim-text-body-sm-tracking);
}

.aipim-list-item__trailing{
  display:inline-flex;
  align-items:center;
  flex:none;
  color:var(--aipim-text-secondary);
}
.aipim-list-item__trailing > .aipim-icon{
  inline-size:var(--aipim-size-icon-md);
  block-size:var(--aipim-size-icon-md);
}

/* A row that acts: a link, a button or the label of a switch. */
a.aipim-list-item__row,
button.aipim-list-item__row,
label.aipim-list-item__row{cursor:pointer}
a.aipim-list-item__row:hover,
button.aipim-list-item__row:hover,
label.aipim-list-item__row:hover{background-color:var(--aipim-bg-sunken)}

/* The ring goes inside the row, because the neighbours and the screen edge would cut one drawn outside.
   The row with a switch has none: the switch draws its own ring on the track. */
a.aipim-list-item__row:focus-visible,
button.aipim-list-item__row:focus-visible{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:calc(var(--aipim-border-thick) * -1);
}

/* Disabled: the text and the end lose their color and the start is dimmed. A button takes disabled, a link takes aria-disabled. */
.aipim-list-item__row[aria-disabled="true"],
button.aipim-list-item__row:disabled{
  background-color:transparent;
  cursor:not-allowed;
}
.aipim-list-item__row[aria-disabled="true"] .aipim-list-item__title,
.aipim-list-item__row[aria-disabled="true"] .aipim-list-item__description,
.aipim-list-item__row[aria-disabled="true"] .aipim-list-item__trailing,
button.aipim-list-item__row:disabled .aipim-list-item__title,
button.aipim-list-item__row:disabled .aipim-list-item__description,
button.aipim-list-item__row:disabled .aipim-list-item__trailing{color:var(--aipim-text-muted)}
.aipim-list-item__row[aria-disabled="true"] .aipim-list-item__leading,
button.aipim-list-item__row:disabled .aipim-list-item__leading{opacity:var(--aipim-opacity-disabled)}
a.aipim-list-item__row[aria-disabled="true"]{pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .aipim-list-item__row{transition:none}
}

@media (forced-colors:active){
  .aipim-list-item::after{background-color:CanvasText}
  .aipim-list-item__trailing{color:CanvasText}
  a.aipim-list-item__row:focus-visible,
  button.aipim-list-item__row:focus-visible{outline-color:Highlight}
  .aipim-list-item__row[aria-disabled="true"] .aipim-list-item__title,
  .aipim-list-item__row[aria-disabled="true"] .aipim-list-item__description,
  .aipim-list-item__row[aria-disabled="true"] .aipim-list-item__trailing,
  button.aipim-list-item__row:disabled .aipim-list-item__title,
  button.aipim-list-item__row:disabled .aipim-list-item__description,
  button.aipim-list-item__row:disabled .aipim-list-item__trailing{color:GrayText}
}

/* ---- accordion.css ---- */
/* Accordion. A title that opens a panel of text. It is the native details element: the browser opens and closes it, with the
   keyboard and the screen reader included, and no script runs. Give the details of a group the same name to open one at a time.
   Markup: details.aipim-accordion > summary.aipim-accordion__header > span.aipim-accordion__title + svg.aipim-accordion__chevron, then div.aipim-accordion__panel.
   Items stacked one after the other form the accordion; each one has a divider under it, a 1px line
   over its bottom edge that takes no height (a closed item is 44px, as in Figma). */

.aipim-accordion{
  position:relative;
  box-sizing:border-box;
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
}

.aipim-accordion::after{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  block-size:var(--aipim-border-thin);
  background-color:var(--aipim-border-subtle);
  pointer-events:none;
}

.aipim-accordion__header{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:var(--aipim-space-12);
  min-block-size:var(--aipim-size-touch-comfortable);
  padding:var(--aipim-space-12) var(--aipim-space-16);
  color:var(--aipim-text-primary);
  font-size:var(--aipim-text-label-size);
  font-weight:var(--aipim-text-label-weight);
  line-height:var(--aipim-text-label-line);
  letter-spacing:var(--aipim-text-label-tracking);
  text-transform:var(--aipim-text-label-transform);
  list-style:none;
  cursor:pointer;
  transition:background-color var(--aipim-duration-fast) var(--aipim-ease-standard);
}
/* Safari draws its own marker. */
.aipim-accordion__header::-webkit-details-marker{display:none}
.aipim-accordion__header:hover{background-color:var(--aipim-bg-sunken)}

.aipim-accordion__title{flex:1 1 auto;min-inline-size:0;overflow-wrap:anywhere}

.aipim-accordion__chevron{
  flex:none;
  inline-size:var(--aipim-size-icon-md);
  block-size:var(--aipim-size-icon-md);
  color:var(--aipim-text-secondary);
  transition:transform var(--aipim-duration-fast) var(--aipim-ease-standard);
}
/* The chevron points at what will happen: down opens, up closes. */
.aipim-accordion[open] > .aipim-accordion__header .aipim-accordion__chevron{transform:rotate(180deg)}

.aipim-accordion__panel{
  padding:0 var(--aipim-space-16) var(--aipim-space-16);
  color:var(--aipim-text-secondary);
  font-size:var(--aipim-text-body-size);
  font-weight:var(--aipim-text-body-weight);
  line-height:var(--aipim-text-body-line);
}
.aipim-accordion__panel > :first-child{margin-block-start:0}
.aipim-accordion__panel > :last-child{margin-block-end:0}

/* The ring goes around the whole item and inside it, so the neighbours do not cut it. */
.aipim-accordion__header:focus-visible{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:calc(var(--aipim-border-thick) * -1);
}
@supports selector(:has(*)){
  .aipim-accordion__header:focus-visible{outline:none}
  .aipim-accordion:has(> .aipim-accordion__header:focus-visible){
    outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
    outline-offset:calc(var(--aipim-border-thick) * -1);
  }
}

@media (prefers-reduced-motion:reduce){
  .aipim-accordion__header,
  .aipim-accordion__chevron{transition:none}
}

@media (forced-colors:active){
  .aipim-accordion::after{background-color:CanvasText}
  .aipim-accordion__chevron{color:CanvasText}
  .aipim-accordion:has(> .aipim-accordion__header:focus-visible){outline-color:Highlight}
}

/* ---- checkbox.css ---- */
/* Checkbox. Markup: label.aipim-checkbox > input.aipim-checkbox__input[type=checkbox] + span.aipim-checkbox__box + span.aipim-checkbox__label.
   The whole row is the click target. Indeterminate is set in code: input.indeterminate = true.
   Groups: fieldset.aipim-choice-group with a legend.aipim-choice-group__legend. */

.aipim-checkbox{
  position:relative;
  display:inline-flex;
  align-items:flex-start;
  gap:var(--aipim-space-12);
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-body-size);
  font-weight:var(--aipim-text-body-weight);
  line-height:var(--aipim-text-body-line);
  cursor:pointer;
}

/* The real input stays in the page for keyboard and screen readers, drawn by the box next to it. */
.aipim-checkbox__input{
  position:absolute;
  inset-block-start:0;
  inset-inline-start:0;
  inline-size:var(--aipim-size-icon-md);
  block-size:var(--aipim-size-icon-md);
  margin:0;
  opacity:0;
  cursor:inherit;
}

.aipim-checkbox__box{
  --aipim-checkbox-border:var(--aipim-border-strong);
  --aipim-checkbox-bg:var(--aipim-bg-surface);
  --aipim-checkbox-mark:none;

  box-sizing:border-box;
  display:inline-block;
  flex:none;
  position:relative;
  inline-size:var(--aipim-size-icon-md);
  block-size:var(--aipim-size-icon-md);
  /* Centers the 20px box on the first 24px line of the label. */
  margin-block-start:calc((var(--aipim-text-body-size) * var(--aipim-text-body-line) - var(--aipim-size-icon-md)) / 2);
  border:var(--aipim-border-medium) solid var(--aipim-checkbox-border);
  border-radius:var(--aipim-radius-sm);
  background-color:var(--aipim-checkbox-bg);
  transition:background-color var(--aipim-duration-fast) var(--aipim-ease-standard),border-color var(--aipim-duration-fast) var(--aipim-ease-standard);
}
/* The mark (check or dash) is a mask painted with the on-primary color. */
.aipim-checkbox__box::after{
  content:"";
  position:absolute;
  inset:calc((var(--aipim-size-icon-md) - var(--aipim-border-medium) * 2 - var(--aipim-size-icon-sm)) / 2);
  background-color:var(--aipim-action-primary-text);
  -webkit-mask:var(--aipim-checkbox-mark) center / contain no-repeat;
  mask:var(--aipim-checkbox-mark) center / contain no-repeat;
  opacity:0;
}

.aipim-checkbox:hover .aipim-checkbox__box{--aipim-checkbox-border:var(--aipim-text-secondary)}

.aipim-checkbox__input:checked + .aipim-checkbox__box,
.aipim-checkbox__input:indeterminate + .aipim-checkbox__box{
  --aipim-checkbox-border:var(--aipim-action-primary-bg);
  --aipim-checkbox-bg:var(--aipim-action-primary-bg);
}
.aipim-checkbox:hover .aipim-checkbox__input:checked + .aipim-checkbox__box,
.aipim-checkbox:hover .aipim-checkbox__input:indeterminate + .aipim-checkbox__box{
  --aipim-checkbox-border:var(--aipim-action-primary-hover);
  --aipim-checkbox-bg:var(--aipim-action-primary-hover);
}
.aipim-checkbox__input:checked + .aipim-checkbox__box::after{
  --aipim-checkbox-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 14L8.5 17.5L19 6.5' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:1;
}
.aipim-checkbox__input:indeterminate + .aipim-checkbox__box::after{
  --aipim-checkbox-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 12L4 12' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:1;
}

.aipim-checkbox__input:focus-visible + .aipim-checkbox__box{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}

.aipim-checkbox__input:disabled + .aipim-checkbox__box,
.aipim-checkbox__input:disabled ~ .aipim-checkbox__label{opacity:var(--aipim-opacity-disabled)}
.aipim-checkbox:has(.aipim-checkbox__input:disabled){cursor:not-allowed}

/* A group of choices (checkboxes or radios) in a fieldset. */
.aipim-choice-group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--aipim-space-8);
  margin:0;
  padding:0;
  border:0;
  min-inline-size:0;
}
.aipim-choice-group--horizontal{flex-direction:row;flex-wrap:wrap;align-content:flex-start;align-items:center;column-gap:var(--aipim-space-24)}
.aipim-choice-group__legend{
  float:left;
  inline-size:100%;
  margin:0 0 var(--aipim-space-8);
  padding:0;
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-label-size);
  font-weight:var(--aipim-text-label-weight);
  line-height:var(--aipim-text-label-line);
  letter-spacing:var(--aipim-text-label-tracking);
}
.aipim-choice-group__legend + *{clear:both}

@media (forced-colors:active){
  .aipim-checkbox__box{border-color:ButtonText}
  .aipim-checkbox__box::after{background-color:HighlightText}
  .aipim-checkbox__input:checked + .aipim-checkbox__box,
  .aipim-checkbox__input:indeterminate + .aipim-checkbox__box{background-color:Highlight;border-color:Highlight}
  .aipim-checkbox__input:focus-visible + .aipim-checkbox__box{outline-color:Highlight}
}

/* ---- radio.css ---- */
/* Radio. Markup: label.aipim-radio > input.aipim-radio__input[type=radio][name] + span.aipim-radio__circle + span.aipim-radio__label.
   Put the options in a fieldset.aipim-choice-group (defined in checkbox.css) with a legend. */

.aipim-radio{
  position:relative;
  display:inline-flex;
  align-items:flex-start;
  gap:var(--aipim-space-12);
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-body-size);
  font-weight:var(--aipim-text-body-weight);
  line-height:var(--aipim-text-body-line);
  cursor:pointer;
}

.aipim-radio__input{
  position:absolute;
  inset-block-start:0;
  inset-inline-start:0;
  inline-size:var(--aipim-size-icon-md);
  block-size:var(--aipim-size-icon-md);
  margin:0;
  opacity:0;
  cursor:inherit;
}

.aipim-radio__circle{
  --aipim-radio-border:var(--aipim-border-strong);
  --aipim-radio-dot:transparent;

  box-sizing:border-box;
  display:inline-block;
  flex:none;
  position:relative;
  inline-size:var(--aipim-size-icon-md);
  block-size:var(--aipim-size-icon-md);
  margin-block-start:calc((var(--aipim-text-body-size) * var(--aipim-text-body-line) - var(--aipim-size-icon-md)) / 2);
  border:var(--aipim-border-medium) solid var(--aipim-radio-border);
  border-radius:var(--aipim-radius-full);
  background-color:var(--aipim-bg-surface);
  transition:border-color var(--aipim-duration-fast) var(--aipim-ease-standard);
}
/* The dot is half the circle: 10px inside the 20px circle. */
.aipim-radio__circle::after{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  inline-size:calc(var(--aipim-size-icon-md) / 2);
  block-size:calc(var(--aipim-size-icon-md) / 2);
  transform:translate(-50%,-50%);
  border-radius:var(--aipim-radius-full);
  background-color:var(--aipim-radio-dot);
}

.aipim-radio:hover .aipim-radio__circle{--aipim-radio-border:var(--aipim-text-secondary)}

.aipim-radio__input:checked + .aipim-radio__circle{
  --aipim-radio-border:var(--aipim-action-primary-bg);
  --aipim-radio-dot:var(--aipim-action-primary-bg);
}
.aipim-radio:hover .aipim-radio__input:checked + .aipim-radio__circle{
  --aipim-radio-border:var(--aipim-action-primary-hover);
  --aipim-radio-dot:var(--aipim-action-primary-hover);
}

.aipim-radio__input:focus-visible + .aipim-radio__circle{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}

.aipim-radio__input:disabled + .aipim-radio__circle,
.aipim-radio__input:disabled ~ .aipim-radio__label{opacity:var(--aipim-opacity-disabled)}
.aipim-radio:has(.aipim-radio__input:disabled){cursor:not-allowed}

@media (forced-colors:active){
  .aipim-radio__circle{border-color:ButtonText}
  .aipim-radio__input:checked + .aipim-radio__circle{border-color:Highlight}
  .aipim-radio__input:checked + .aipim-radio__circle::after{background-color:Highlight}
  .aipim-radio__input:focus-visible + .aipim-radio__circle{outline-color:Highlight}
}

/* ---- switch.css ---- */
/* Switch. Markup: label.aipim-switch > input.aipim-switch__input[type=checkbox][role=switch] + span.aipim-switch__track + span.aipim-switch__label.
   The label names the setting ("Notifications"), never the state. The change applies right away. */

.aipim-switch{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--aipim-space-12);
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-body-size);
  font-weight:var(--aipim-text-body-weight);
  line-height:var(--aipim-text-body-line);
  cursor:pointer;
}

.aipim-switch__input{
  position:absolute;
  inset-block-start:0;
  inset-inline-start:0;
  inline-size:var(--aipim-size-touch-comfortable);
  block-size:var(--aipim-size-touch-min);
  margin:0;
  opacity:0;
  cursor:inherit;
}

.aipim-switch__track{
  --aipim-switch-track:var(--aipim-border-strong);
  --aipim-switch-knob:var(--aipim-bg-surface);
  --aipim-switch-shift:0px;

  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  flex:none;
  inline-size:var(--aipim-size-touch-comfortable);
  block-size:var(--aipim-size-touch-min);
  padding-inline:var(--aipim-space-4);
  border-radius:var(--aipim-radius-full);
  background-color:var(--aipim-switch-track);
  transition:background-color var(--aipim-duration-fast) var(--aipim-ease-standard);
}
.aipim-switch__track::after{
  content:"";
  inline-size:var(--aipim-size-icon-sm);
  block-size:var(--aipim-size-icon-sm);
  border-radius:var(--aipim-radius-full);
  background-color:var(--aipim-switch-knob);
  transform:translateX(var(--aipim-switch-shift));
  transition:transform var(--aipim-duration-fast) var(--aipim-ease-standard),background-color var(--aipim-duration-fast) var(--aipim-ease-standard);
}

.aipim-switch:hover .aipim-switch__track{--aipim-switch-track:var(--aipim-text-muted)}

.aipim-switch__input:checked + .aipim-switch__track{
  --aipim-switch-track:var(--aipim-action-primary-bg);
  --aipim-switch-knob:var(--aipim-action-primary-text);
  /* Track 44 minus 2 x 4 padding minus the 16px knob. */
  --aipim-switch-shift:calc(var(--aipim-size-touch-comfortable) - var(--aipim-space-4) * 2 - var(--aipim-size-icon-sm));
}
.aipim-switch:hover .aipim-switch__input:checked + .aipim-switch__track{--aipim-switch-track:var(--aipim-action-primary-hover)}

.aipim-switch__input:focus-visible + .aipim-switch__track{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}

.aipim-switch__input:disabled + .aipim-switch__track,
.aipim-switch__input:disabled ~ .aipim-switch__label{opacity:var(--aipim-opacity-disabled)}
.aipim-switch:has(.aipim-switch__input:disabled){cursor:not-allowed}

@media (forced-colors:active){
  .aipim-switch__track{border:var(--aipim-border-thin) solid ButtonText}
  .aipim-switch__input:checked + .aipim-switch__track{background-color:Highlight}
  .aipim-switch__track::after{background-color:ButtonText}
  .aipim-switch__input:checked + .aipim-switch__track::after{background-color:HighlightText}
  .aipim-switch__input:focus-visible + .aipim-switch__track{outline-color:Highlight}
}

/* ---- alert.css ---- */
/* Alert. Types: info (default), --success, --warning, --error.
   Markup: div.aipim-alert[role=status|alert] > svg.aipim-icon.aipim-alert__icon + div.aipim-alert__content > (p.aipim-alert__title) + p.aipim-alert__message,
   then an optional button.aipim-dismiss. Use role="alert" for errors and role="status" for the rest. */

.aipim-alert{
  --aipim-alert-bg:var(--aipim-info-bg);
  --aipim-alert-fg:var(--aipim-info-text);
  --aipim-alert-icon:var(--aipim-info-icon);
  /* Height of the first line of text, so the icon and the dismiss button center on it. */
  --aipim-alert-line:calc(var(--aipim-text-body-size) * var(--aipim-text-body-line));

  box-sizing:border-box;
  display:flex;
  align-items:flex-start;
  gap:var(--aipim-space-12);
  /* Sizes are measured from the outer edge, so the border comes out of the padding. */
  padding:calc(var(--aipim-inset-md) - var(--aipim-border-thin));
  border:var(--aipim-border-thin) solid var(--aipim-alert-icon);
  border-radius:var(--aipim-radius-md);
  background-color:var(--aipim-alert-bg);
  color:var(--aipim-alert-fg);
  font-family:var(--aipim-font-body);
}
.aipim-alert:has(.aipim-alert__title){
  --aipim-alert-line:calc(var(--aipim-text-label-size) * var(--aipim-text-label-line));
}

.aipim-alert--success{
  --aipim-alert-bg:var(--aipim-success-bg);
  --aipim-alert-fg:var(--aipim-success-text);
  --aipim-alert-icon:var(--aipim-success-icon);
}
.aipim-alert--warning{
  --aipim-alert-bg:var(--aipim-warning-bg);
  --aipim-alert-fg:var(--aipim-warning-text);
  --aipim-alert-icon:var(--aipim-warning-icon);
}
.aipim-alert--error{
  --aipim-alert-bg:var(--aipim-error-bg);
  --aipim-alert-fg:var(--aipim-error-text);
  --aipim-alert-icon:var(--aipim-error-icon);
}

.aipim-alert__icon{
  color:var(--aipim-alert-icon);
  margin-block-start:calc((var(--aipim-alert-line) - var(--aipim-size-icon-md)) / 2);
}

.aipim-alert__content{
  flex:1 1 auto;
  min-inline-size:0;
  display:flex;
  flex-direction:column;
  gap:var(--aipim-space-4);
}
.aipim-alert__title,
.aipim-alert__message{margin:0}
.aipim-alert__title{
  font-size:var(--aipim-text-label-size);
  font-weight:var(--aipim-text-label-weight);
  line-height:var(--aipim-text-label-line);
  letter-spacing:var(--aipim-text-label-tracking);
}
.aipim-alert__message{
  font-size:var(--aipim-text-body-size);
  font-weight:var(--aipim-text-body-weight);
  line-height:var(--aipim-text-body-line);
}

.aipim-alert > .aipim-dismiss{
  margin-block-start:calc((var(--aipim-alert-line) - var(--aipim-size-touch-min)) / 2);
}

@media (forced-colors:active){
  .aipim-alert{border-color:CanvasText}
}

/* ---- toast.css ---- */
/* Toast. Types: info (default), --success, --warning, --error. Only the icon changes with the type.
   Markup: div.aipim-toast-region[aria-live=polite] holds the toasts. Each toast is
   div.aipim-toast > svg.aipim-icon.aipim-toast__icon + p.aipim-toast__message + (button.aipim-button.aipim-button--ghost.aipim-button--sm) + (button.aipim-icon-button.aipim-icon-button--sm for dismiss).
   Leaving: set data-state="closing" and remove the toast when the animation ends (aipim.js does this for [data-aipim-dismiss]). */

.aipim-toast-region{
  position:fixed;
  inset-block-end:var(--aipim-space-24);
  inset-inline:var(--aipim-space-16);
  z-index:var(--aipim-z-toast);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--aipim-space-8);
  /* The region never blocks the page. Only the toasts take the pointer. */
  pointer-events:none;
}

.aipim-toast{
  --aipim-toast-icon:var(--aipim-info-icon);

  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:var(--aipim-space-12);
  inline-size:360px;
  max-inline-size:100%;
  padding:calc(var(--aipim-inset-md) - var(--aipim-border-thin));
  border:var(--aipim-border-thin) solid var(--aipim-border-subtle);
  border-radius:var(--aipim-radius-lg);
  background-color:var(--aipim-bg-surface);
  box-shadow:var(--aipim-shadow-overlay);
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  pointer-events:auto;
  animation:aipim-toast-in var(--aipim-duration-base) var(--aipim-ease-enter);
}
.aipim-toast--success{--aipim-toast-icon:var(--aipim-success-icon)}
.aipim-toast--warning{--aipim-toast-icon:var(--aipim-warning-icon)}
.aipim-toast--error{--aipim-toast-icon:var(--aipim-error-icon)}

.aipim-toast__icon{color:var(--aipim-toast-icon)}

.aipim-toast__message{
  flex:1 1 auto;
  min-inline-size:0;
  margin:0;
  font-size:var(--aipim-text-body-size);
  font-weight:var(--aipim-text-body-weight);
  line-height:var(--aipim-text-body-line);
}

.aipim-toast[data-state="closing"]{
  animation:aipim-toast-out var(--aipim-duration-fast) var(--aipim-ease-exit) forwards;
}

/* Reduced motion is handled by the tokens: the durations are 0ms. */
@keyframes aipim-toast-in{
  from{opacity:0;transform:translateY(var(--aipim-space-16))}
  to{opacity:1;transform:none}
}
@keyframes aipim-toast-out{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(var(--aipim-space-8))}
}

@media (forced-colors:active){
  .aipim-toast{border-color:CanvasText}
}

/* ---- empty-state.css ---- */
/* Empty state. Markup: div.aipim-empty-state > (div.aipim-empty-state__art with an img or svg, alt="" or aria-hidden)
   + h2.aipim-empty-state__title + p.aipim-empty-state__description + (a or button.aipim-button).
   Use the heading level that fits the page. */

.aipim-empty-state{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--aipim-space-16);
  max-inline-size:400px;
  padding:var(--aipim-space-32);
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  text-align:center;
}

/* The slot has no token: 160 by 120. The artwork scales to fit it. */
.aipim-empty-state__art{
  inline-size:160px;
  block-size:120px;
  border-radius:var(--aipim-radius-lg);
  overflow:hidden;
}
.aipim-empty-state__art > *{
  display:block;
  inline-size:100%;
  block-size:100%;
  object-fit:contain;
}

.aipim-empty-state__title{
  margin:0;
  font-family:var(--aipim-font-heading);
  font-size:var(--aipim-text-h4-size);
  font-weight:var(--aipim-text-h4-weight);
  line-height:var(--aipim-text-h4-line);
  letter-spacing:var(--aipim-text-h4-tracking);
  text-transform:var(--aipim-text-h4-transform);
}
.aipim-empty-state__description{
  margin:0;
  color:var(--aipim-text-secondary);
  font-size:var(--aipim-text-body-size);
  font-weight:var(--aipim-text-body-weight);
  line-height:var(--aipim-text-body-line);
}

/* ---- badge.css ---- */
/* Badge. A small mark with a numeral or an icon, next to text: a step number, an icon chip.
   Styles: outline (default), --filled and --tint. Shapes: round (default) and --square. Sizes: 48 (default) and --sm (32).
   Markup: span.aipim-badge[aria-hidden="true"] > numeral, or svg.aipim-icon.
   It is decorative: the text next to it carries the meaning, so it is hidden from assistive technology. It is not interactive. */

.aipim-badge{
  --aipim-badge-size:var(--aipim-size-control-lg);
  --aipim-badge-icon:var(--aipim-size-icon-lg);
  --aipim-badge-bg:transparent;
  --aipim-badge-fg:var(--aipim-action-primary-bg);
  --aipim-badge-border:var(--aipim-action-primary-bg);

  box-sizing:border-box;
  display:inline-grid;
  place-items:center;
  flex:none;
  inline-size:var(--aipim-badge-size);
  block-size:var(--aipim-badge-size);
  border:var(--aipim-border-medium) solid var(--aipim-badge-border);
  border-radius:var(--aipim-radius-full);
  background-color:var(--aipim-badge-bg);
  color:var(--aipim-badge-fg);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-label-size);
  font-weight:var(--aipim-text-label-weight);
  line-height:var(--aipim-text-label-line);
  letter-spacing:var(--aipim-text-label-tracking);
  user-select:none;
}
.aipim-badge > .aipim-icon{
  inline-size:var(--aipim-badge-icon);
  block-size:var(--aipim-badge-icon);
}

.aipim-badge--sm{
  --aipim-badge-size:var(--aipim-size-control-sm);
  --aipim-badge-icon:var(--aipim-size-icon-sm);
}
.aipim-badge--square{border-radius:var(--aipim-radius-md)}

.aipim-badge--filled{
  --aipim-badge-bg:var(--aipim-action-primary-bg);
  --aipim-badge-fg:var(--aipim-action-primary-text);
  --aipim-badge-border:transparent;
}
.aipim-badge--tint{
  --aipim-badge-bg:var(--aipim-tint-primary);
  --aipim-badge-fg:var(--aipim-tint-text);
  --aipim-badge-border:transparent;
}

@media (forced-colors:active){
  .aipim-badge{border-color:CanvasText;color:CanvasText}
}

/* ---- avatar.css ---- */
/* Avatar. A person or a thing inside a circle: a photo, the initials on a tone, or an icon.
   Sizes: medium 40 (default), --sm (32) and --lg (48). Tones for the initials: --primary, --secondary, --tertiary, --success.
   Without a tone the circle is bg/sunken: use it for the icon, the photo space and the count (+3).
   Markup: span.aipim-avatar > initials, or svg.aipim-icon, or img, or the count.
   Group: div.aipim-avatar-group[role=group][aria-label] > span.aipim-avatar, ending with an avatar that shows the count.
   The circle does not clip: with a large text size the initials grow past it instead of being cut off.
   It only shows: it is not a stop for the keyboard. The name is read from the text next to it, or from alt, or from aria-label. */

.aipim-avatar{
  --aipim-avatar-size:var(--aipim-size-control-md);
  --aipim-avatar-icon:var(--aipim-size-icon-md);
  --aipim-avatar-bg:var(--aipim-bg-sunken);
  --aipim-avatar-fg:var(--aipim-text-primary);
  --aipim-avatar-font-size:var(--aipim-text-label-size);
  --aipim-avatar-font-weight:var(--aipim-text-label-weight);
  --aipim-avatar-font-line:var(--aipim-text-label-line);
  --aipim-avatar-font-tracking:var(--aipim-text-label-tracking);
  --aipim-avatar-font-transform:var(--aipim-text-label-transform);

  box-sizing:border-box;
  display:inline-grid;
  place-items:center;
  flex:none;
  inline-size:var(--aipim-avatar-size);
  block-size:var(--aipim-avatar-size);
  border-radius:var(--aipim-radius-full);
  background-color:var(--aipim-avatar-bg);
  color:var(--aipim-avatar-fg);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-avatar-font-size);
  font-weight:var(--aipim-avatar-font-weight);
  line-height:var(--aipim-avatar-font-line);
  letter-spacing:var(--aipim-avatar-font-tracking);
  text-transform:var(--aipim-avatar-font-transform);
  user-select:none;
}
.aipim-avatar > .aipim-icon{
  inline-size:var(--aipim-avatar-icon);
  block-size:var(--aipim-avatar-icon);
  color:var(--aipim-text-secondary);
}
.aipim-avatar > img{
  inline-size:100%;
  block-size:100%;
  border-radius:inherit;
  object-fit:cover;
}

/* The small avatar writes the initials in the overline style and draws a 16px icon. */
.aipim-avatar--sm,
.aipim-avatar-group--sm > .aipim-avatar{
  --aipim-avatar-size:var(--aipim-size-control-sm);
  --aipim-avatar-icon:var(--aipim-size-icon-sm);
  --aipim-avatar-font-size:var(--aipim-text-overline-size);
  --aipim-avatar-font-weight:var(--aipim-text-overline-weight);
  --aipim-avatar-font-line:var(--aipim-text-overline-line);
  --aipim-avatar-font-tracking:var(--aipim-text-overline-tracking);
  --aipim-avatar-font-transform:var(--aipim-text-overline-transform);
}
.aipim-avatar--lg,
.aipim-avatar-group--lg > .aipim-avatar{--aipim-avatar-size:var(--aipim-size-control-lg)}

.aipim-avatar--primary{--aipim-avatar-bg:var(--aipim-tint-primary);--aipim-avatar-fg:var(--aipim-tint-text)}
.aipim-avatar--secondary{--aipim-avatar-bg:var(--aipim-tint-secondary);--aipim-avatar-fg:var(--aipim-tint-text)}
.aipim-avatar--tertiary{--aipim-avatar-bg:var(--aipim-tint-tertiary);--aipim-avatar-fg:var(--aipim-tint-text)}
.aipim-avatar--success{--aipim-avatar-bg:var(--aipim-tint-success);--aipim-avatar-fg:var(--aipim-tint-text)}

/* Group. The avatars overlap and each one has a 3px ring in the color of the page, so the edge of one stays readable on the next.
   The ring is drawn outside the circle and takes no room: the group is as wide as its avatars minus the overlaps.
   The overlap is a space token (8 and 12px for the medium and large avatar) except the 6px of the small one, which has none.
   The margin is written negative in the rule below because a token cannot be negative. */
.aipim-avatar-group{
  --aipim-avatar-overlap:var(--aipim-space-8);
  display:inline-flex;
  align-items:center;
}
.aipim-avatar-group--sm{--aipim-avatar-overlap:6px}
.aipim-avatar-group--lg{--aipim-avatar-overlap:var(--aipim-space-12)}
.aipim-avatar-group > .aipim-avatar{
  box-shadow:0 0 0 var(--aipim-border-thick) var(--aipim-bg-surface);
}
.aipim-avatar-group > .aipim-avatar + .aipim-avatar{margin-inline-start:calc(var(--aipim-avatar-overlap) * -1)}

@media (forced-colors:active){
  .aipim-avatar{border:var(--aipim-border-thin) solid CanvasText;color:CanvasText}
  .aipim-avatar > .aipim-icon{color:CanvasText}
  .aipim-avatar-group > .aipim-avatar{box-shadow:none;outline:var(--aipim-border-thick) solid Canvas}
}

/* ---- tag.css ---- */
/* Tag. Styles: outline (default), --accent, --inverse and --link.
   Markup: span.aipim-tag > (svg.aipim-icon) + span label + (button.aipim-tag__remove > svg.aipim-icon).
   A --link tag is an a.aipim-tag (label and optional icon, no remove button).
   A group of tags is a list: ul > li > .aipim-tag. A tag that is not removable or a link is not focusable. */

.aipim-tag{
  --aipim-tag-bg:transparent;
  --aipim-tag-fg:var(--aipim-text-primary);
  --aipim-tag-border:var(--aipim-border-strong);
  --aipim-tag-remove-hover:var(--aipim-bg-sunken);

  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  gap:var(--aipim-space-8);
  /* The border is always 1px, so both styles have the same size. It comes out of the padding. */
  padding-block:calc(var(--aipim-space-4) - var(--aipim-border-thin));
  padding-inline:calc(var(--aipim-space-12) - var(--aipim-border-thin));
  border:var(--aipim-border-thin) solid var(--aipim-tag-border);
  border-radius:var(--aipim-radius-full);
  background-color:var(--aipim-tag-bg);
  color:var(--aipim-tag-fg);
  font-family:var(--aipim-font-body);
  font-size:var(--aipim-text-body-sm-size);
  font-weight:var(--aipim-text-body-sm-weight);
  line-height:var(--aipim-text-body-sm-line);
  letter-spacing:var(--aipim-text-body-sm-tracking);
  white-space:nowrap;
}
.aipim-tag > .aipim-icon{
  inline-size:var(--aipim-size-icon-sm);
  block-size:var(--aipim-size-icon-sm);
}

.aipim-tag--accent{
  --aipim-tag-bg:var(--aipim-accent-bg);
  --aipim-tag-fg:var(--aipim-accent-text);
  --aipim-tag-border:transparent;
  --aipim-tag-remove-hover:var(--aipim-bg-surface);
}

/* Inverse: for a dark or colored surface, such as a masthead. It follows the text color of the surface (currentColor),
   so put it where that color already contrasts. No fill, so the surface shows through. */
.aipim-tag--inverse{
  --aipim-tag-fg:currentColor;
  --aipim-tag-border:color-mix(in srgb,currentColor 60%,transparent);
  --aipim-tag-remove-hover:color-mix(in srgb,currentColor 16%,transparent);
}

/* Link: a tag that goes somewhere, so it is an a. The label is underlined in the link color, as the Link component does.
   It is not removable: a button inside a link is not valid. */
.aipim-tag--link{
  --aipim-tag-fg:var(--aipim-link);
  text-decoration:underline;
  text-underline-offset:0.2em;
  cursor:pointer;
  transition:color var(--aipim-duration-fast) var(--aipim-ease-standard);
}
.aipim-tag--link:visited{color:var(--aipim-link-visited)}
.aipim-tag--link:hover{color:var(--aipim-link-hover)}
.aipim-tag--link:focus-visible{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}

.aipim-tag__remove{
  box-sizing:border-box;
  display:inline-grid;
  place-items:center;
  flex:none;
  inline-size:var(--aipim-size-touch-min);
  block-size:var(--aipim-size-touch-min);
  margin:0;
  padding:0;
  border:0;
  border-radius:var(--aipim-radius-full);
  background:transparent;
  color:inherit;
  cursor:pointer;
  transition:background-color var(--aipim-duration-fast) var(--aipim-ease-standard);
}
.aipim-tag__remove .aipim-icon{
  inline-size:var(--aipim-size-icon-sm);
  block-size:var(--aipim-size-icon-sm);
}
.aipim-tag__remove:hover{background-color:var(--aipim-tag-remove-hover)}
.aipim-tag__remove:focus-visible{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}

@media (forced-colors:active){
  .aipim-tag{border-color:ButtonText}
  .aipim-tag__remove:focus-visible{outline-color:Highlight}
}

/* ---- card.css ---- */
/* Card. Static by default, --interactive when the whole card leads to one place.
   Markup: article.aipim-card > (div.aipim-card__media) + div.aipim-card__body > h3.aipim-card__title + p.aipim-card__text + (span.aipim-card__action).
   Interactive: put one a.aipim-card__link inside the title. Its ::after stretches over the card, so the card is a single focus stop.
   Never nest buttons or links inside an interactive card.
   Tone: --primary, --secondary, --tertiary and --success fill the card with a tint. Without one, the card is a surface.
   Header: __header holds an optional Badge and an __eyebrow above the title. On a tone, use --filled for the Badge. */

.aipim-card{
  box-sizing:border-box;
  position:relative;
  display:flex;
  flex-direction:column;
  border:var(--aipim-border-thin) solid var(--aipim-border-subtle);
  border-radius:var(--aipim-radius-xl);
  background-color:var(--aipim-bg-surface);
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  overflow:hidden;
  transition:box-shadow var(--aipim-duration-base) var(--aipim-ease-standard);
}

/* Header (optional): a Badge before the text and an eyebrow above the title, centered on one line.
   The title keeps the free space and wraps, so the badge never gets squeezed.
   Markup: div.aipim-card__header > (span.aipim-badge) + div.aipim-card__heading > (p.aipim-card__eyebrow) + h3.aipim-card__title. */
.aipim-card__header{
  display:flex;
  align-items:center;
  gap:var(--aipim-space-16);
  inline-size:100%;
}
.aipim-card__header > .aipim-badge{flex:none}
.aipim-card__heading{
  display:flex;
  flex-direction:column;
  gap:var(--aipim-space-4);
  flex:1;
  min-inline-size:0;
}
.aipim-card__eyebrow{
  margin:0;
  color:var(--aipim-text-muted);
  font-size:var(--aipim-text-overline-size);
  font-weight:var(--aipim-text-overline-weight);
  line-height:var(--aipim-text-overline-line);
  letter-spacing:var(--aipim-text-overline-tracking);
  text-transform:var(--aipim-text-overline-transform);
}

/* The media area has no token: 160 tall, measured from the outer edge, so the top border comes out of it. */
.aipim-card__media{
  display:grid;
  place-items:center;
  block-size:calc(160px - var(--aipim-border-thin));
  background-color:var(--aipim-bg-sunken);
  color:var(--aipim-text-muted);
  overflow:hidden;
}
.aipim-card__media > img{
  display:block;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
}

.aipim-card__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--aipim-space-12);
  padding:calc(var(--aipim-inset-lg) - var(--aipim-border-thin));
}
.aipim-card__media + .aipim-card__body{padding-block-start:var(--aipim-inset-lg)}

.aipim-card__title{
  margin:0;
  font-family:var(--aipim-font-heading);
  font-size:var(--aipim-text-h4-size);
  font-weight:var(--aipim-text-h4-weight);
  line-height:var(--aipim-text-h4-line);
  letter-spacing:var(--aipim-text-h4-tracking);
  text-transform:var(--aipim-text-h4-transform);
}
.aipim-card__text{
  margin:0;
  color:var(--aipim-text-secondary);
  font-size:var(--aipim-text-body-size);
  font-weight:var(--aipim-text-body-weight);
  line-height:var(--aipim-text-body-line);
}

/* The action looks like a link but is only a label: the card is the link. */
.aipim-card__action{
  display:inline-flex;
  align-items:center;
  gap:var(--aipim-space-4);
  color:var(--aipim-link);
  font-size:var(--aipim-text-label-size);
  font-weight:var(--aipim-text-label-weight);
  line-height:var(--aipim-text-label-line);
  letter-spacing:var(--aipim-text-label-tracking);
  text-decoration:underline;
  text-underline-offset:0.2em;
}

/* Tone: a vivid surface from the tint roles. The border stays 1px (transparent) so every tone is the same size.
   Text on a tint uses tint/text and tint/text/muted, and the action label drops the link color to follow the text. */
.aipim-card--primary{--aipim-card-tint:var(--aipim-tint-primary)}
.aipim-card--secondary{--aipim-card-tint:var(--aipim-tint-secondary)}
.aipim-card--tertiary{--aipim-card-tint:var(--aipim-tint-tertiary)}
.aipim-card--success{--aipim-card-tint:var(--aipim-tint-success)}
:is(.aipim-card--primary,.aipim-card--secondary,.aipim-card--tertiary,.aipim-card--success){
  border-color:transparent;
  background-color:var(--aipim-card-tint);
  color:var(--aipim-tint-text);
}
:is(.aipim-card--primary,.aipim-card--secondary,.aipim-card--tertiary,.aipim-card--success) .aipim-card__media{
  background-color:color-mix(in srgb,var(--aipim-tint-text) 10%,transparent);
  color:var(--aipim-tint-text-muted);
}
:is(.aipim-card--primary,.aipim-card--secondary,.aipim-card--tertiary,.aipim-card--success) :is(.aipim-card__text,.aipim-card__eyebrow){color:var(--aipim-tint-text-muted)}
:is(.aipim-card--primary,.aipim-card--secondary,.aipim-card--tertiary,.aipim-card--success) .aipim-card__action{color:inherit}

/* Interactive */
.aipim-card--interactive{cursor:pointer}
.aipim-card--interactive:hover{box-shadow:var(--aipim-shadow-raised)}
.aipim-card__link{
  color:inherit;
  text-decoration:none;
}
.aipim-card__link::after{
  content:"";
  position:absolute;
  inset:0;
}
/* The ring goes around the card, not around the title. */
.aipim-card__link:focus-visible{outline:none}
.aipim-card--interactive:has(.aipim-card__link:focus-visible){
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}

@media (forced-colors:active){
  .aipim-card{border-color:CanvasText}
  .aipim-card--interactive:has(.aipim-card__link:focus-visible){outline-color:Highlight}
}

/* ---- top-bar.css ---- */
/* Top bar. Markup: header.aipim-top-bar > (a or button.aipim-icon-button for back) + h1.aipim-top-bar__title + up to two a or button.aipim-icon-button.
   Icon-only buttons need an aria-label. Add --scrolled while content scrolls under the bar. */

.aipim-top-bar{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:var(--aipim-space-8);
  padding:var(--aipim-space-8) var(--aipim-space-16);
  background-color:var(--aipim-bg-surface);
  /* The bottom border is an inset shadow, so it does not add to the 60px height. */
  box-shadow:inset 0 calc(-1 * var(--aipim-border-thin)) 0 var(--aipim-border-subtle);
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
}
.aipim-top-bar--scrolled{
  box-shadow:inset 0 calc(-1 * var(--aipim-border-thin)) 0 var(--aipim-border-subtle),var(--aipim-shadow-raised);
}

.aipim-top-bar__title{
  flex:1 1 auto;
  min-inline-size:0;
  margin:0;
  font-family:var(--aipim-font-heading);
  font-size:var(--aipim-text-h4-size);
  font-weight:var(--aipim-text-h4-weight);
  line-height:var(--aipim-text-h4-line);
  letter-spacing:var(--aipim-text-h4-tracking);
  text-transform:var(--aipim-text-h4-transform);
}


@media (forced-colors:active){
  .aipim-top-bar{border-block-end:var(--aipim-border-thin) solid CanvasText}
}

/* ---- tab-bar.css ---- */
/* Tab bar. Three to five destinations. Markup: nav.aipim-tab-bar[aria-label=Main] > a.aipim-tab-bar__item (aria-current="page" on the current one)
   > span.aipim-tab-bar__icon (svg.aipim-icon + optional span.aipim-tab-bar__badge) + span.aipim-tab-bar__label.
   A badge needs text for screen readers: put a span.aipim-visually-hidden inside it, such as "3 unread". */

.aipim-tab-bar{
  box-sizing:border-box;
  display:flex;
  gap:var(--aipim-space-4);
  padding:var(--aipim-space-8);
  background-color:var(--aipim-bg-surface);
  /* The top border is an inset shadow, so it does not add to the 80px height. */
  box-shadow:inset 0 var(--aipim-border-thin) 0 var(--aipim-border-subtle);
  font-family:var(--aipim-font-body);
}

.aipim-tab-bar__item{
  box-sizing:border-box;
  flex:1 1 0;
  min-inline-size:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--aipim-space-4);
  padding:0 var(--aipim-space-12) var(--aipim-space-8);
  border-radius:var(--aipim-radius-md);
  color:var(--aipim-text-secondary);
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--aipim-duration-fast) var(--aipim-ease-standard);
}
/* The current indicator: 24 by 3px, drawn above the icon. It is always there, so the items never shift. */
.aipim-tab-bar__item::before{
  content:"";
  inline-size:var(--aipim-size-icon-lg);
  block-size:var(--aipim-border-thick);
  border-radius:var(--aipim-radius-full);
  background-color:transparent;
}
.aipim-tab-bar__item:hover{background-color:var(--aipim-bg-sunken)}
.aipim-tab-bar__item:focus-visible{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}
.aipim-tab-bar__item[aria-current="page"]{color:var(--aipim-action-primary-bg)}
.aipim-tab-bar__item[aria-current="page"]::before{background-color:var(--aipim-action-primary-bg)}

.aipim-tab-bar__icon{
  position:relative;
  display:grid;
  place-items:center;
  inline-size:var(--aipim-size-icon-lg);
  block-size:var(--aipim-size-icon-lg);
}
.aipim-tab-bar__icon .aipim-icon{
  inline-size:var(--aipim-size-icon-lg);
  block-size:var(--aipim-size-icon-lg);
}

/* The badge dot has no token: 10px, with a ring in the bar color so it stays clear of the icon. */
.aipim-tab-bar__badge{
  position:absolute;
  inset-block-start:-2px;
  inset-inline-end:-1px;
  inline-size:10px;
  block-size:10px;
  border-radius:var(--aipim-radius-full);
  background-color:var(--aipim-error-icon);
  box-shadow:0 0 0 var(--aipim-border-medium) var(--aipim-bg-surface);
}

.aipim-tab-bar__label{
  font-size:var(--aipim-text-body-sm-size);
  font-weight:var(--aipim-text-body-sm-weight);
  line-height:var(--aipim-text-body-sm-line);
  letter-spacing:var(--aipim-text-body-sm-tracking);
  max-inline-size:100%;
  text-align:center;
  /* Long labels and large text wrap instead of being cut, so no text is lost at 200% (WCAG 1.4.4, 1.4.12). */
  overflow-wrap:anywhere;
}

@media (forced-colors:active){
  .aipim-tab-bar{border-block-start:var(--aipim-border-thin) solid CanvasText}
  .aipim-tab-bar__item[aria-current="page"]::before{background-color:Highlight}
  .aipim-tab-bar__item:focus-visible{outline-color:Highlight}
  .aipim-tab-bar__badge{background-color:Highlight}
}

/* ---- tabs.css ---- */
/* Tabs. Markup: div.aipim-tabs[role=tablist] > button.aipim-tab[role=tab][aria-selected][aria-controls][id], then one div[role=tabpanel][aria-labelledby] per tab.
   Arrow keys, Home and End need the small optional aipim.js (or your own code): CSS cannot move focus. */

.aipim-tabs{
  /* The room the focus ring needs on every side (3px ring + 3px away). A scroll box clips anything outside it,
     so the room is padding, and the negative margin gives it back so the list keeps its 44px height and its alignment. */
  --_ring-room:calc(var(--aipim-border-thick) + var(--aipim-focus-offset));
  display:flex;
  gap:var(--aipim-space-8);
  /* When the tabs do not fit (large text, a narrow screen) the list scrolls sideways inside its own box; the page does not. */
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  padding:var(--_ring-room);
  margin:calc(-1 * var(--_ring-room));
  /* The list border: a line along the bottom of the tabs, as wide as the list. */
  background:linear-gradient(var(--aipim-border-subtle),var(--aipim-border-subtle)) 0 100% / 100% var(--aipim-border-thin) no-repeat content-box;
  font-family:var(--aipim-font-body);
  /* When aipim.js brings the list back to the top of the screen after a tab is chosen, it leaves this room above it. */
  scroll-margin-block-start:var(--aipim-space-16);
}

.aipim-tab{
  box-sizing:border-box;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--aipim-space-8);
  flex:none;
  block-size:var(--aipim-size-touch-comfortable);
  padding:0 var(--aipim-space-16);
  border:0;
  /* Only the top corners are round: the hover fill then sits flush on the selected bar and the list border. */
  border-radius:var(--aipim-radius-sm) var(--aipim-radius-sm) 0 0;
  background:transparent;
  color:var(--aipim-text-secondary);
  font-family:inherit;
  font-size:var(--aipim-text-label-size);
  font-weight:var(--aipim-text-label-weight);
  line-height:var(--aipim-text-label-line);
  letter-spacing:var(--aipim-text-label-tracking);
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--aipim-duration-fast) var(--aipim-ease-standard);
}
.aipim-tab .aipim-icon{
  inline-size:var(--aipim-size-icon-md);
  block-size:var(--aipim-size-icon-md);
}
.aipim-tab:hover{
  background-color:var(--aipim-bg-sunken);
  color:var(--aipim-text-primary);
}
.aipim-tab:focus-visible{
  outline:var(--aipim-border-thick) solid var(--aipim-focus-ring);
  outline-offset:var(--aipim-focus-offset);
}

.aipim-tab[aria-selected="true"]{color:var(--aipim-text-primary)}
.aipim-tab[aria-selected="true"]::after{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  block-size:var(--aipim-border-thick);
  background-color:var(--aipim-action-primary-bg);
}

.aipim-tab:disabled{
  opacity:var(--aipim-opacity-disabled);
  cursor:not-allowed;
}
.aipim-tab:disabled:hover{
  background:transparent;
  color:var(--aipim-text-secondary);
}

@media (forced-colors:active){
  .aipim-tabs{background-image:linear-gradient(CanvasText,CanvasText)}
  .aipim-tab[aria-selected="true"]::after{background-color:Highlight}
  .aipim-tab:focus-visible{outline-color:Highlight}
}

/* ---- modal.css ---- */
/* Modal, built on the native dialog element. The browser gives it the focus trap, the Escape key, the inert page behind it
   and the return of focus to the opener. Open it with showModal(), or with no script:
     <button command="show-modal" commandfor="my-modal">Open</button>
     <button command="close" commandfor="my-modal">Close</button>
   Markup: dialog.aipim-modal[aria-labelledby] > div.aipim-modal__header > h2.aipim-modal__title + button.aipim-icon-button
   + p.aipim-modal__body + div.aipim-modal__actions > two buttons (Cancel as outline, the main action as primary). */

.aipim-modal{
  box-sizing:border-box;
  /* The panel width has no token: 480 on desktop. On a phone the panel fills the screen. */
  inline-size:480px;
  max-inline-size:calc(100% - var(--aipim-space-32));
  max-block-size:calc(100% - var(--aipim-space-32));
  margin:auto;
  padding:var(--aipim-inset-xl);
  border:0;
  border-radius:var(--aipim-radius-2xl);
  background-color:var(--aipim-bg-surface);
  box-shadow:var(--aipim-shadow-overlay);
  color:var(--aipim-text-primary);
  font-family:var(--aipim-font-body);
  overflow:auto;
}
.aipim-modal[open]{
  display:flex;
  flex-direction:column;
  gap:var(--aipim-space-16);
}

/* The scrim is bg/scrim at opacity/scrim. */
.aipim-modal::backdrop{
  background-color:color-mix(in srgb,var(--aipim-bg-scrim) calc(var(--aipim-opacity-scrim) * 100%),transparent);
}
body:has(.aipim-modal[open]){overflow:hidden}

.aipim-modal__header{
  display:flex;
  align-items:flex-start;
  gap:var(--aipim-space-8);
}
.aipim-modal__title{
  flex:1 1 auto;
  min-inline-size:0;
  /* Centers a one-line title on the 44px close button. */
  display:flex;
  align-items:center;
  min-block-size:var(--aipim-size-touch-comfortable);
  margin:0;
  font-family:var(--aipim-font-heading);
  font-size:var(--aipim-text-h3-size);
  font-weight:var(--aipim-text-h3-weight);
  line-height:var(--aipim-text-h3-line);
  letter-spacing:var(--aipim-text-h3-tracking);
  text-transform:var(--aipim-text-h3-transform);
}
.aipim-modal__body{
  margin:0;
  color:var(--aipim-text-secondary);
  font-size:var(--aipim-text-body-size);
  font-weight:var(--aipim-text-body-weight);
  line-height:var(--aipim-text-body-line);
}

.aipim-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:var(--aipim-space-12);
}

/* Phone: the panel fills the screen and the actions stack at full width. 600px is breakpoint/tablet:
   custom properties cannot be used in a media query. */
@media (max-width:599.98px){
  .aipim-modal{
    inline-size:100%;
    max-inline-size:none;
    block-size:100%;
    max-block-size:none;
    padding:var(--aipim-inset-lg);
    border-radius:0;
  }
  .aipim-modal__body{flex:1 1 auto}
  .aipim-modal__actions{
    flex-direction:column;
    align-items:stretch;
  }
}

@media (forced-colors:active){
  .aipim-modal{border:var(--aipim-border-thin) solid CanvasText}
}