/* Core color palette. Keep only values with current consumers. */

:root {
  /* Red — hue 0 */
  --red-base: 15, 75%;

  --red-30: hsl(var(--red-base), 30%);
  --red-40: hsl(var(--red-base), 40%);
  --red-50: hsl(var(--red-base), 50%);
  --red-55: hsl(var(--red-base), 55%);
  --red-60: hsl(var(--red-base), 60%);

  --red-transp-10: hsl(var(--red-base), 50%, 0.1);
  --red-transp-15: hsl(var(--red-base), 50%, 0.15);
  --red-transp-20: hsl(var(--red-base), 50%, 0.2);

  /* Orange — hue 40 */
  --orange-base: 40, 100%;

  --orange-30: hsl(var(--orange-base), 30%);
  --orange-35: hsl(var(--orange-base), 35%);
  --orange-45: hsl(var(--orange-base), 45%);
  --orange-55: hsl(var(--orange-base), 55%);
  --orange-60: hsl(var(--orange-base), 60%);

  --orange-transp-15: hsl(var(--orange-base), 50%, 0.15);
  --orange-transp-20: hsl(var(--orange-base), 50%, 0.2);
  --orange-transp-25: hsl(var(--orange-base), 50%, 0.25);

  /* Yellow — hue 50 */
  --yellow-base: 45, 100%;

  --yellow-50: hsl(var(--yellow-base), 50%);
  --yellow-55: hsl(var(--yellow-base), 55%);
  --yellow-60: hsl(var(--yellow-base), 60%);
  --yellow-70: hsl(var(--yellow-base), 70%);

  --yellow-transp-10: hsl(var(--yellow-base), 50%, 0.1);
  --yellow-transp-15: hsl(var(--yellow-base), 50%, 0.15);
  --yellow-transp-20: hsl(var(--yellow-base), 50%, 0.2);

  /* Green — hue 140 */
  --green-base: 140, 70%;
  --green-base-pale: 140, 50%;
  --green-25: hsl(var(--green-base), 25%);
  --green-30: hsl(var(--green-base), 30%);
  --green-35: hsl(var(--green-base), 35%);
  --green-40: hsl(var(--green-base), 40%);
  --green-45: hsl(var(--green-base), 45%);
  --green-50: hsl(var(--green-base-pale), 50%);
  --green-55: hsl(var(--green-base-pale), 55%);
  --green-60: hsl(var(--green-base-pale), 60%);

  --green-transp-10: hsl(var(--green-base), 50%, 0.1);
  --green-transp-15: hsl(var(--green-base), 50%, 0.15);
  --green-transp-20: hsl(var(--green-base), 50%, 0.2);
  --green-transp-25: hsl(var(--green-base), 50%, 0.25);

  /* Blue — hue 215 */
  --blue-base: 215, 100%;

  --blue-50: hsl(var(--blue-base), 50%);
  --blue-55: hsl(var(--blue-base), 55%);
  --blue-60: hsl(var(--blue-base), 60%);
  --blue-70: hsl(var(--blue-base), 70%);
  --blue-80: hsl(var(--blue-base), 80%);

  --blue-transp-10: hsl(var(--blue-base), 50%, 0.1);
  --blue-transp-15: hsl(var(--blue-base), 50%, 0.15);
  --blue-transp-20: hsl(var(--blue-base), 50%, 0.2);
  --blue-transp-25: hsl(var(--blue-base), 50%, 0.25);
  --blue-transp-30: hsl(var(--blue-base), 50%, 0.3);
  --blue-transp-35: hsl(var(--blue-base), 50%, 0.35);
  --blue-transp-40: hsl(var(--blue-base), 50%, 0.4);

}
/* Core neutral palette. Keep only values with current consumers. */

:root {
  /* Black */
  --black: hsl(0, 0%, 0%);
  --black-transp-05: hsl(0, 0%, 0%, 0.05);
  --black-transp-10: hsl(0, 0%, 0%, 0.1);
  --black-transp-15: hsl(0, 0%, 0%, 0.15);
  --black-transp-20: hsl(0, 0%, 0%, 0.2);
  --black-transp-30: hsl(0, 0%, 0%, 0.3);
  --black-transp-50: hsl(0, 0%, 0%, 0.5);
  --black-transp-85: hsl(0, 0%, 0%, 0.85);

  /* White */
  --white: hsl(0, 0%, 100%);
  --white-transp-05: hsl(0, 0%, 100%, 0.05);
  --white-transp-10: hsl(0, 0%, 100%, 0.1);
  --white-transp-15: hsl(0, 0%, 100%, 0.15);
  --white-transp-20: hsl(0, 0%, 100%, 0.2);
  --white-transp-30: hsl(0, 0%, 100%, 0.3);
  --white-transp-50: hsl(0, 0%, 100%, 0.5);
  --white-transp-60: hsl(0, 0%, 100%, 0.6);
  --white-transp-70: hsl(0, 0%, 100%, 0.7);
  --white-transp-80: hsl(0, 0%, 100%, 0.8);
  --white-transp-85: hsl(0, 0%, 100%, 0.85);
  --white-transp-90: hsl(0, 0%, 100%, 0.9);

  --gray-base: 0, 0%;

  /* Gray solid */
  --gray-03: hsl(var(--gray-base), 3%);
  --gray-04: hsl(var(--gray-base), 4%);
  --gray-06: hsl(var(--gray-base), 6%);
  --gray-09: hsl(var(--gray-base), 9%);
  --gray-12: hsl(var(--gray-base), 12%);
  --gray-18: hsl(var(--gray-base), 18%);
  --gray-45: hsl(var(--gray-base), 45%);
  --gray-60: hsl(var(--gray-base), 60%);
  --gray-75: hsl(var(--gray-base), 75%);
  --gray-86: hsl(var(--gray-base), 86%);
  --gray-92: hsl(var(--gray-base), 92%);
  --gray-96: hsl(var(--gray-base), 96%);
  --gray-98: hsl(var(--gray-base), 98%);

}
:root {
  --px-1:  0.0625rem;
  --px-2:  0.125rem;
  --px-3:  0.1875rem;
  --px-4:  0.25rem;
  --px-5:  0.3125rem;
  --px-6:  0.375rem;
  --px-7:  0.4375rem;
  --px-8:  0.5rem;
  --px-9:  0.5625rem;
  --px-10: 0.625rem;
  --px-12: 0.75rem;
  --px-13: 0.8125rem;
  --px-14: 0.875rem;
  --px-16: 1rem;
  --px-18: 1.125rem;
  --px-20: 1.25rem;

  --px-22:  1.375rem;
  --px-24:  1.5rem;
  --px-26:  1.625rem;
  --px-28:  1.75rem;
  --px-32:  2rem;
  --px-36:  2.25rem;
  --px-40:  2.5rem;
  --px-44:  2.75rem;
  --px-48:  3rem;
  --px-52:  3.25rem;
  --px-56:  3.5rem;
  --px-60:  3.75rem;
  --px-64:  4rem;
  --px-96:  6rem;
  --px-100: 6.25rem;

  --px-130: 8.125rem;
  --px-140: 8.75rem;
  --px-160: 10rem;
  --px-180: 11.25rem;
  --px-200: 12.5rem;
  --px-220: 13.75rem;
  --px-240: 15rem;
  --px-260: 16.25rem;
  --px-300: 18.75rem;
  --px-320: 20rem;

  --px-400: 25rem;
  --px-500: 31.25rem;
  --px-550: 34.375rem;
  --px-600: 37.5rem;
  --px-640: 40rem;
  --px-650: 40.625rem;
  --px-700: 43.75rem;
  --px-750: 46.875rem;
  --px-800: 50rem;
  --px-900: 56.25rem;

  --px-n1:  -0.0625rem;
  --px-n2:  -0.125rem;
  --px-n4:  -0.25rem;
  --px-n6:  -0.375rem;
  --px-n8:  -0.5rem;
  --px-n12: -0.75rem;
}
:root {

  /* COLOR INTENTS */

  /* PAGE */
  --page-bg--color: var(--bg-surface-base);
  --bg-frost--color: color-mix(in srgb, var(--bg-surface-base) 70%, transparent);

  /* PRIMARY */
  --bg-primary--color: var(--blue-50);
  --bg-primary--color-hover: var(--blue-55);
  --bg-primary--color-active: var(--blue-60);
  --font-primary--color: var(--blue-50);
  --font-primary--color-hover: var(--blue-55);
  --font-primary--on: var(--white);
  --bg-primary-soft--color: var(--blue-transp-10);
  --bg-primary-soft--color-hover: var(--blue-transp-15);
  --bg-primary-soft--color-active: var(--blue-transp-20);

  /* SUCCESS */
  --bg-success--color: var(--green-40);
  --bg-success--color-hover: var(--green-45);
  --bg-success--color-active: var(--green-55);
  --bg-success-soft--color: var(--green-transp-15);
  --bg-success-soft--color-hover: var(--green-transp-20);
  --bg-success-soft--color-active: var(--green-transp-25);
  --font-success--color: var(--green-35);
  --font-success-soft--color-hover: var(--green-30);
  --font-success-soft--color-active: var(--green-25);
  --font-success--on: var(--white);


  /* DANGER */
  --bg-danger--color: var(--red-50);
  --bg-danger--color-hover: var(--red-55);
  --bg-danger--color-active: var(--red-60);
  --font-danger--color: var(--red-50);
  --font-danger--on: var(--white);
  --font-on-danger--color: var(--white);
  --font-on-danger-muted--color: var(--white-transp-80);
  --font-on-danger-subtle--color: var(--white-transp-60);
  --border-on-danger--color: var(--white-transp-50);
  --border-on-danger--color-hover: var(--white-transp-70);
  --border-on-danger--color-active: var(--white-transp-90);
  --bg-danger-soft--color: var(--red-transp-10);
  --bg-danger-soft--color-hover: var(--red-transp-15);
  --bg-danger-soft--color-active: var(--red-transp-20);

  /* WARNING */
  --bg-warning--color: var(--orange-45);
  --bg-warning--color-hover: var(--orange-55);
  --bg-warning--color-active: var(--orange-60);
  --font-warning--color: var(--orange-45);
  --font-warning-soft--color-hover: var(--orange-35);
  --font-warning-soft--color-active: var(--orange-30);
  --font-warning--on: var(--white);
  --bg-warning-soft--color: var(--orange-transp-15);
  --bg-warning-soft--color-hover: var(--orange-transp-20);
  --bg-warning-soft--color-active: var(--orange-transp-25);

  /* ARCHIVE */
  --archive-surface-bg-color: oklch(92.0291% 0.012 325.674);
  --archive-element-bg-color: oklch(87.3554% 0.00808 337.451);
  --archive-text-color: oklch(43.2017% 0.01382 337.897);

  /* INVERT */
  --bg-invert--color: var(--gray-04);
  --bg-invert--color-hover: var(--gray-12);
  --bg-invert--color-active: var(--gray-18);
  --font-invert--color: var(--white);

  /* FIXED DARK */
  --font-fixed-dark--color: var(--white);

  /* FIXED LIGHT */
  --bg-fixed-light--color: var(--white);
  --font-fixed-light--color: var(--black);

  /* TRANSPARENT */
  --bg-transp--color: transparent;
  --bg-transp--color-hover: var(--black-transp-15);
  --bg-transp--color-active: var(--black-transp-20);
  --bg-item-hover--color: var(--bg-transp--color-hover);

  /* NEUTRAL INTERACTIVE */
  --bg-control-neutral--color: var(--black-transp-10);
  --bg-control-neutral--color-hover: var(--black-transp-15);
  --bg-control-neutral--color-active: var(--black-transp-20);
  --font-control-neutral--color: var(--black-transp-85);
  --font-control-neutral--color-hover: var(--black);
  --font-control-neutral--color-active: var(--black);

  /* FEEDBACK */
  --drop-feedback-bg-color: oklch(82% 0.11 190 / 40%);

  /* IDENTITY */
  --identity-title--color: var(--font-ichi--color);
  --identity-subtitle--color: var(--font-nana--color);

  /* ENTITY PALETTE */
  --entity-palette-0--bg-color: hsl(15 100% 55%);
  --entity-palette-0--text-color: var(--black);
  --entity-palette-1--bg-color: hsl(30 100% 55%);
  --entity-palette-1--text-color: var(--black);
  --entity-palette-2--bg-color: hsl(50 98% 50%);
  --entity-palette-2--text-color: hsl(20 50% 35%);
  --entity-palette-3--bg-color: hsl(70 90% 50%);
  --entity-palette-3--text-color: hsl(100 90% 20%);
  --entity-palette-4--bg-color: hsl(110 90% 63%);
  --entity-palette-4--text-color: hsl(120 100% 18%);
  --entity-palette-5--bg-color: hsl(160 90% 63%);
  --entity-palette-5--text-color: hsl(180 100% 18%);
  --entity-palette-6--bg-color: hsl(190 90% 63%);
  --entity-palette-6--text-color: hsl(200 100% 25%);
  --entity-palette-7--bg-color: hsl(215 95% 50%);
  --entity-palette-7--text-color: hsl(0 0% 100%);
  --entity-palette-8--bg-color: hsl(240 95% 60%);
  --entity-palette-8--text-color: hsl(0 0% 100%);
  --entity-palette-9--bg-color: hsl(260 95% 60%);
  --entity-palette-9--text-color: hsl(0 0% 100%);
  --entity-palette-10--bg-color: hsl(285 95% 60%);
  --entity-palette-10--text-color: var(--black);
  --entity-palette-11--bg-color: hsl(320 95% 60%);
  --entity-palette-11--text-color: var(--black);
  --entity-palette-12--bg-color: hsl(340 100% 60%);
  --entity-palette-12--text-color: var(--black);
  --entity-palette-13--bg-color: hsl(60 5% 5%);
  --entity-palette-13--text-color: hsl(0 0% 100%);
  --entity-palette-14--bg-color: hsl(30 3% 25%);
  --entity-palette-14--text-color: hsl(0 0% 100%);
  --entity-palette-15--bg-color: hsl(35 3% 45%);
  --entity-palette-15--text-color: hsl(0 0% 100%);
  --entity-palette-16--bg-color: hsl(30 5% 80%);
  --entity-palette-16--text-color: hsl(35 5% 25%);
  --entity-palette-17--bg-color: hsl(0 0% 100%);
  --entity-palette-17--text-color: hsl(35 5% 25%);

  /* ENTITY COLOR */
  --entity-color-white--edge-color: var(--black-transp-05);
  --entity-color-avatar-on-surface--edge-color: rgb(255 255 255 / 0.45);
  --entity-color-swatch-indicator--bg-color: var(--white-transp-60);
  --entity-color-swatch-indicator--ring-color: var(--black-transp-20);
  --entity-color-swatch-indicator-selected--bg-color: var(--white);

  /* TASK STATUS */
  --task-status-backlog--color: var(--gray-75);
  --task-status-neutral--color: var(--gray-60);
  --task-status-in-progress--color: hsl(44.25 96% 50.9804%);
  --task-status-in-review--color: hsl(199.8621 94.7712% 70%);
  --task-status-done--color: hsl(120 90.1961% 40%);
  --task-status-done--mark-color: var(--white);

  /* ICHI */
  --bg-ichi--color: var(--bg-surface-1-elevated);

  --border-ichi--color: var(--black-transp-10);
  --border-field--color: var(--black-transp-10);
  --border-field--color-hover: var(--black-transp-15);

  /* WINDOW */
  --border-window--color: var(--black-transp-10);

  --font-ichi--color: var(--black-transp-85);
  --font-ichi--color-hover: var(--black);

  /* NI */
  --bg-ni--color: var(--black-transp-05);
  --bg-ni--color-hover: var(--black-transp-10);
  --bg-ni--color-active: var(--black-transp-15);

  --bg-ni-soft--color: var(--black-transp-05);

  --border-ni--color: var(--black-transp-10);
  --border-ni--color-hover: var(--black-transp-15);
  --border-ni--color-active: var(--black-transp-20);

  --font-ni--color: var(--black-transp-85);

  /* SAN */
  --bg-san--color: var(--black-transp-10);
  --bg-san--color-hover: var(--black-transp-15);
  --bg-san--color-active: var(--black-transp-20);

  --font-san--color: var(--black-transp-85);

  /* YON */
  --font-yon--color: var(--black-transp-50);

  /* GO */
  --font-go--color: var(--black-transp-50);

  /* NANA */
  --font-nana--color: var(--black-transp-50);

  /* OUTLINE */
  --focus-ring--color: var(--blue-50);

  /* LINK */
  --link-primary--color: var(--blue-50);
  --link-primary--color-hover: var(--blue-50);
  --link-primary--underline-color: var(--blue-transp-40);

  --link-neutral--underline-color-hover: var(--black-transp-30);

  /* MUTED CONTENT */
  --font-muted--color: var(--font-nana--color);

  /* MARK — search-hit highlight, applied to bare <mark> */
  --bg-mark--color: hsla(50, 100%, 50%, 0.5);
  --debug-outline--color: var(--red-transp-15);

}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* COLOR INTENTS */

  /* PAGE */
  --page-bg--color: var(--bg-surface-base);
  --bg-frost--color: color-mix(in srgb, var(--bg-surface-base) 70%, transparent);

  /* PRIMARY */
  --bg-primary--color: var(--blue-50);
  --bg-primary--color-hover: var(--blue-55);
  --bg-primary--color-active: var(--blue-60);
  --font-primary--color: var(--blue-70);
  --font-primary--color-hover: var(--blue-80);
  --font-primary--on: var(--white);
  --bg-primary-soft--color: var(--blue-transp-20);
  --bg-primary-soft--color-hover: var(--blue-transp-25);
  --bg-primary-soft--color-active: var(--blue-transp-30);

  /* SUCCESS */
  --bg-success--color: var(--green-30);
  --bg-success--color-hover: var(--green-35);
  --bg-success--color-active: var(--green-40);
  --font-success--color: var(--green-60);
  --font-success-soft--color-hover: var(--green-55);
  --font-success-soft--color-active: var(--green-50);
  --font-success--on: var(--white);
  --bg-success-soft--color: var(--green-transp-10);
  --bg-success-soft--color-hover: var(--green-transp-15);
  --bg-success-soft--color-active: var(--green-transp-20);

  /* DANGER */
  --bg-danger--color: var(--red-40);
  --bg-danger--color-hover: var(--red-50);
  --bg-danger--color-active: var(--red-30);
  --font-danger--color: var(--red-60);
  --font-danger--on: var(--white);
  --bg-danger-soft--color: var(--red-transp-10);
  --bg-danger-soft--color-hover: var(--red-transp-15);
  --bg-danger-soft--color-active: var(--red-transp-20);

  /* WARNING */
  --bg-warning--color: var(--yellow-60);
  --bg-warning--color-hover: var(--yellow-70);
  --bg-warning--color-active: var(--yellow-50);
  --font-warning--color: var(--yellow-60);
  --font-warning-soft--color-hover: var(--yellow-55);
  --font-warning-soft--color-active: var(--yellow-50);
  --font-warning--on: var(--black);
  --bg-warning-soft--color: var(--yellow-transp-10);
  --bg-warning-soft--color-hover: var(--yellow-transp-15);
  --bg-warning-soft--color-active: var(--yellow-transp-20);

  /* ARCHIVE */
  --archive-surface-bg-color: oklch(26.6913% 0.0073 337.808);
  --archive-element-bg-color: oklch(37.4338% 0.01631 338.12);
  --archive-text-color: oklch(82.6227% 0.00805 337.461);

  /* INVERT */
  --bg-invert--color: var(--gray-98);
  --bg-invert--color-hover: var(--gray-92);
  --bg-invert--color-active: var(--gray-86);
  --font-invert--color: var(--black);

  /* FIXED DARK */
  --font-fixed-dark--color: var(--white);

  /* TRANSPARENT */
  --bg-transp--color: transparent;
  --bg-transp--color-hover: var(--white-transp-15);
  --bg-transp--color-active: var(--white-transp-20);
  --bg-item-hover--color: var(--bg-san--color-hover);

  /* NEUTRAL INTERACTIVE */
  --bg-control-neutral--color: var(--white-transp-10);
  --bg-control-neutral--color-hover: var(--white-transp-15);
  --bg-control-neutral--color-active: var(--white-transp-20);
  --font-control-neutral--color: var(--white-transp-85);
  --font-control-neutral--color-hover: var(--white);
  --font-control-neutral--color-active: var(--white);

  /* FEEDBACK */
  --drop-feedback-bg-color: oklch(72% 0.12 190 / 35%);

  /* IDENTITY */
  --identity-title--color: var(--font-ichi--color);
  --identity-subtitle--color: var(--font-yon--color);

  /* ICHI */
  --bg-ichi--color: var(--bg-surface-1-elevated);

  --border-ichi--color: var(--white-transp-10);
  --border-field--color: var(--white-transp-10);
  --border-field--color-hover: var(--white-transp-15);

  /* WINDOW */
  --border-window--color: var(--white-transp-10);

  --font-ichi--color: var(--white-transp-85);
  --font-ichi--color-hover: var(--white);

  /* NI */
  --bg-ni--color: var(--white-transp-05);
  --bg-ni--color-hover: var(--white-transp-10);
  --bg-ni--color-active: var(--white-transp-15);

  --bg-ni-soft--color: var(--white-transp-05);

  --border-ni--color: var(--white-transp-10);
  --border-ni--color-hover: var(--white-transp-15);
  --border-ni--color-active: var(--white-transp-20);

  --font-ni--color: var(--white-transp-85);

  /* SAN */
  --bg-san--color: var(--white-transp-10);
  --bg-san--color-hover: var(--white-transp-15);
  --bg-san--color-active: var(--white-transp-20);

  --font-san--color: var(--white-transp-85);

  /* YON */
  --font-yon--color: var(--white-transp-50);

  /* GO */
  --font-go--color: var(--white-transp-50);

  /* NANA */
  --font-nana--color: var(--white-transp-50);

  /* OUTLINE */
  --focus-ring--color: var(--blue-60);

  /* LINK */
  --link-primary--color: var(--blue-60);
  --link-primary--color-hover: var(--blue-70);
  --link-primary--underline-color: var(--blue-transp-35);
  --link-neutral--underline-color-hover: var(--white-transp-30);

  /* MUTED CONTENT */
  --font-muted--color: var(--font-nana--color);

  /* TASK STATUS */
  --task-status-backlog--color: var(--gray-45);

  /* MARK — search-hit highlight, applied to bare <mark> */
  --bg-mark--color: hsla(50, 100%, 50%, 0.8);
  --debug-outline--color: var(--red-transp-15);

}
:root {
  --bg-disabled--color: var(--black-transp-05);
  --font-disabled--color: var(--black-transp-20);
}

:root[data-theme="dark"] {
  --bg-disabled--color: var(--white-transp-05);
  --font-disabled--color: var(--white-transp-20);
}
:root {
  --font-size-xs:   var(--px-12);
  --font-size-s:    var(--px-14);
  --font-size-m:    var(--px-16);
  --font-size-l:   var(--px-18);
  --font-size-xl:  var(--px-24);
  --font-size-xxl: var(--px-32);

  /* Line heights */
  --line-height-xs:   var(--px-12);
  --line-height-s:    var(--px-16);
  --line-height-m:    var(--px-24);
  --line-height-l:    var(--px-32);
  --line-height-xl:   var(--px-40);

  /* Text sizes */
  --text-s--font-size: var(--font-size-s);
  --text-s--line-height: var(--line-height-s);
  --text-m--font-size: var(--font-size-m);
  --text-m--line-height: var(--line-height-m);
  --text-l--font-size: var(--font-size-l);
  --text-l--line-height: var(--line-height-l);

  /* Font families */
  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-display: var(--font-family-sans);
  --font-family-title: 'Geologica', var(--font-family-sans);
  --font-family-mono: 'JetBrains Mono', 'SF Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
:root {
  --z-sticky: 100;
  --z-drag-selection: 900;
  --z-drag-indicator: 910;
  --z-overlay: 1100;
  --z-popover: 1300;
  --z-toast: 1400;
  --z-tooltip: 1500;
}
:root {
  /* Container */
  --container-gutter-s: var(--px-16);

  /* Page max-width */
  --page-max-m: 45rem;
  --page-max-wide: 87.5rem;

  /* Page */
  --page-gap-m: var(--px-48);
  --page-gap-l: var(--px-56);

  /* Section */
  --section-gap-s: var(--px-24);
  --section-gap-m: var(--px-32);
  --section-gap-xl: var(--px-56);

  /* Block/group spacing */
  --block-gap-xs: var(--px-4);
  --block-gap-s: var(--px-8);
  --block-gap-m: var(--px-20);
  --block-gap-l: var(--px-26);
  --block-gap-xl: var(--px-32);

  --block-padding-s: var(--px-8);
  --block-padding-m: var(--px-20);
  --block-padding-l: var(--px-32);

  /* Group */
  --group-gap-xs: var(--px-2);
  --group-gap-s: var(--px-4);
  --group-gap-m: var(--px-8);
  --group-gap-l: var(--px-20);

  --group-padding-s: var(--px-4);
  --group-padding-m: var(--px-12);
  --group-padding-l: var(--px-16);

  /* App header */
  --app-header-height: var(--px-56);

  /* Shadows */
  --shadow-xl:
    0 40px 120px 0px var(--black-transp-10),
    0 20px 80px 0px var(--black-transp-05);

  --shadow-l:
    0 0px 80px 0px var(--black-transp-05),
    0 0 40px 0px var(--black-transp-05);

  --shadow-m:
    0 8px 24px 0px var(--black-transp-10),
    0 0 10px 0px var(--black-transp-10);

  --shadow-s:
    0 4px 12px 0px var(--black-transp-10),
    0 0 5px 0px var(--black-transp-10);
}

:root[data-theme="dark"] {
  --shadow-l:
    0 16px 80px 0px var(--black-transp-10),
    0 8px 40px 0px var(--black-transp-05);

  --shadow-m:
    0 8px 24px 0px var(--black-transp-10),
    0 0 10px 0px var(--black-transp-10);

  --shadow-s:
    0 4px 12px 0px var(--black-transp-10),
    0 0 5px 0px var(--black-transp-10);
}
:root {
  --duration-fast: 75ms;
  --duration-normal: 150ms;
  --duration-slow: 300ms;

  --motion-transition-outline-fast:
    outline-color var(--duration-fast) linear;

  --motion-transition-switch:
    var(--duration-normal) ease-out;
}
:root {
  --outline-width: var(--px-2);
  --outline-style: solid;
  --outline-color: var(--focus-ring--color);
  --outline-offset: var(--px-2);
}
:root {
  --radius-xs: var(--px-3);
  --radius-s: var(--px-5);
  --radius-m: var(--px-7);
  --radius-l: var(--px-12);
  --radius-xl: var(--px-16);
  --radius-full: 9999px;
}
:root {
  /* Light: gray base → warm content → white window */
  --bg-surface-base: var(--gray-96);
  --bg-surface-1: hsl(30 5% 97%);
  --bg-surface-1-elevated: var(--white);
  --bg-surface-2: var(--gray-92);
}

:root[data-theme="dark"] {
  /* Dark: darkest base → lighter content → lighter window */
  --bg-surface-base: var(--gray-03);
  --bg-surface-1: var(--gray-06);
  --bg-surface-1-elevated: var(--gray-09);
  --bg-surface-2: var(--gray-12);
}
:root {
  --control--border-color: var(--border-ni--color);
  --control--border-color-hover: var(--border-ni--color-hover);
  --control--border-color-active: var(--border-ni--color-active);
  --control--focus-outline-color: var(--focus-ring--color);
  --control--checked-bg: var(--bg-primary--color);
  --control--checked-bg-hover: var(--bg-primary--color-hover);
  --control--checked-bg-active: var(--bg-primary--color-active);
  --control--checked-mark-color: var(--font-primary--on);
  --control--disabled-bg: var(--bg-disabled--color);
  --control--disabled-mark-color: var(--font-disabled--color);
  --control--error-color: var(--font-danger--color);
  --control--error-bg: var(--bg-danger--color);
  --control--error-bg-hover: var(--bg-danger--color-hover);
  --control--error-bg-active: var(--bg-danger--color-active);
  --control--track-bg: var(--bg-san--color);
  --control--track-bg-hover: var(--bg-san--color-hover);
  --control--track-bg-active: var(--bg-san--color-active);
  --control--hit-padding: var(--px-4);
  --control--hit-area-min: var(--px-24);
}
:root {
  --element-bg-color: var(--bg-control-neutral--color);
  --element-bg-color-hover: var(--bg-control-neutral--color-hover);
  --element-bg-color-active: var(--bg-control-neutral--color-active);

  --element-transp-bg-color: var(--bg-transp--color);
  --element-transp-bg-color-hover: var(--bg-transp--color-hover);
  --element-transp-bg-color-active: var(--bg-transp--color-active);

  --element-neutral-color: var(--font-control-neutral--color);
  --element-neutral-color-hover: var(--font-control-neutral--color-hover);
  --element-neutral-color-active: var(--font-control-neutral--color-active);
  --element-neutral-soft-bg-color: var(--bg-control-neutral--color);
  --element-neutral-soft-bg-color-hover: var(--bg-control-neutral--color-hover);
  --element-neutral-soft-bg-color-active: var(--bg-control-neutral--color-active);
  --element-neutral-soft-color: var(--font-control-neutral--color);
  --element-neutral-soft-color-hover: var(--font-control-neutral--color-hover);
  --element-neutral-soft-color-active: var(--font-control-neutral--color-active);

  --element-border-color: var(--border-ni--color);
  --element-border-color-hover: var(--border-ni--color-hover);
  --element-border-color-active: var(--border-ni--color-active);
  --element-border-width: var(--px-1);
  --element-border-radius: var(--radius-xs);
  --element-gap: .25em;

  --element-field-border-color: var(--border-field--color);
  --element-field-border-color-hover: var(--border-field--color-hover);
  --element-field-focus-outline-color: var(--element-focus-outline-color);
  --element-field-outline-offset: calc(var(--element-border-width) * -1);

  --element-focus-outline-width: var(--outline-width);
  --element-focus-outline-offset: var(--outline-offset);
  --element-focus-outline-style: var(--outline-style);
  --element-focus-outline-color: var(--element-border-color-hover);

  --element-placeholder-color: var(--font-nana--color);
  --element-multiline-size-factor: 3;
  --element-icon-stroke-width: var(--px-2);

  --element-s-height: var(--px-24);
  --element-s-font-size: var(--font-size-s);
  --element-s-line-height: var(--line-height-s);
  --element-s-icon-size: var(--px-16);
  --element-s-padding-inline: var(--px-8);

  --element-m-height: var(--px-32);
  --element-m-font-size: var(--font-size-m);
  --element-m-line-height: var(--line-height-m);
  --element-m-icon-size: var(--px-20);
  --element-m-padding-inline: var(--px-10);

  --element-l-height: var(--px-40);
  --element-l-font-size: var(--font-size-m);
  --element-l-line-height: var(--line-height-m);
  --element-l-icon-size: var(--px-24);
  --element-l-padding-inline: var(--px-14);
}
:root[data-ui] {
  color-scheme: light;
}

:root[data-ui][data-theme="dark"] {
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-width: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -moz-tab-size: 4;
  tab-size: 4;
  scrollbar-gutter: stable;
}

h4,
h5,
h6 {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  border: none;
  color: inherit;
  background: transparent;
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

fieldset {
  border: none;
}

legend {
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
body {
  color: var(--font-ichi--color);
  background: var(--bg-surface-base);
  font-family: var(--font-family-sans);
  font-size: var(--px-18);
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "calt" 1;
}

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--px-48);
  line-height: var(--px-56);
}

h2 {
  font-size: var(--px-32);
  line-height: var(--px-40);
}

h3 {
  font-size: var(--px-24);
  line-height: var(--px-32);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}
/* Page */

.ui-page {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-xl);
  max-width: var(--page-max-m);
  margin-inline: auto;
  padding: var(--block-padding-l) var(--block-padding-m);
}

.ui-page-wide { max-width: var(--page-max-wide); }


/* Section */

.ui-section {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-m);
}

/* Block */

.ui-block {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-m);
}

.ui-block-s { gap: var(--block-gap-s); }
.ui-block-l { gap: var(--block-gap-l); }

.ui-block-start { align-items: flex-start; }


/* Group — tight related cluster */

.ui-group {
  display: flex;
  align-items: center;
  gap: var(--group-gap-m);
}

.ui-group-s { gap: var(--group-gap-s); }


/* Row — horizontal stripe with distribution logic */

.ui-row {
  display: flex;
  align-items: center;
  gap: var(--group-gap-m);
}

.ui-row-split { justify-content: space-between; }
.ui-row-end { justify-content: flex-end; }
.ui-row-start { align-items: flex-start; }
.ui-row-baseline,
.ui-group-baseline { align-items: baseline; }


/* List */

.ui-list-m,
.ui-list-s,
.ui-list-xs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ui-list-m { gap: var(--block-gap-m); }
.ui-list-s { gap: var(--block-gap-s); }
.ui-list-xs { gap: var(--block-gap-xs); }


/* Wrap utility — applies to group/row */

.ui-wrap,
.ui-group-wrap { flex-wrap: wrap; }


/* Surface — card treatment applied to exactly one level per the counting rule. */

.ui-surface {
  background-color: var(--bg-surface-1);
  padding: var(--block-padding-m);
  border-radius: var(--radius-s);
}


/* Structural headings — section headers one step larger than block headers. */

.ui-section > header > :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-l);
  font-weight: 600;
}

.ui-block > header > :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--font-size-l);
  line-height: var(--line-height-m);
  font-weight: 600;
}
.link {
  color: var(--font-primary--color);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
  transition:
    color var(--duration-fast) linear,
    text-decoration-color var(--duration-fast) linear;

  &:hover {
    text-decoration-color: currentcolor;
  }

  &:focus-visible,
  :root[data-input-modality="keyboard"] &:focus {
    outline: var(--element-focus-outline-width) var(--element-focus-outline-style) var(--font-primary--color);
    outline-offset: var(--element-focus-outline-offset);
  }
}

.link-muted {
  color: var(--font-muted--color);

  &:hover,
  &:active {
    color: var(--font-ichi--color);
  }

  &:focus-visible,
  :root[data-input-modality="keyboard"] &:focus {
    outline-color: var(--element-focus-outline-color);
  }
}
.btn {
  --btn--height: var(--element-m-height);
  --btn--icon-size: var(--element-m-icon-size);
  --btn--padding-inline: var(--element-m-padding-inline);
  --btn--font-size: var(--element-m-font-size);
  --btn--line-height: var(--element-m-line-height);
  --btn--border-radius: var(--radius-s);
  --btn--optical-compensation: 0.125em;
  --btn--icon-color: currentColor;
  --btn--color: inherit;
  --btn--focus-outline-color: var(--element-focus-outline-color);
  --btn--outline-color: var(--element-border-color);
  --btn--outline-color-hover: var(--element-border-color-hover);
  --btn--outline-color-active: var(--element-border-color-active);
  --btn--transp-bg-color-hover: var(--element-transp-bg-color-hover);
  --btn--transp-bg-color-active: var(--element-transp-bg-color-active);
  --btn--pressed-bg-color: var(--bg-primary-soft--color);
  --btn--pressed-bg-color-hover: var(--bg-primary-soft--color-hover);
  --btn--pressed-bg-color-active: var(--bg-primary-soft--color-active);
  --btn--pressed-color: var(--font-primary--color);
  --btn--pressed-color-hover: var(--font-primary--color-hover);
  --btn--pressed-color-active: var(--font-primary--color-hover);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--element-gap);
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;

  padding-inline: var(--btn--padding-inline);
  height: var(--btn--height);
  font-size: var(--btn--font-size);
  line-height: var(--btn--line-height);
  font-weight: 400;
  color: var(--btn--color);
  text-decoration: none;

  background-color: var(--element-bg-color);
  border-radius: var(--btn--border-radius);

  transition: background-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--element-bg-color-hover);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--element-bg-color-active);
  }

  &:focus-visible,
  :root[data-input-modality="keyboard"] &:focus {
    outline-width: var(--element-focus-outline-width);
    outline-style: var(--element-focus-outline-style);
    outline-offset: var(--element-focus-outline-offset);
    outline-color: var(--btn--focus-outline-color);
  }

  &:disabled,
  &.is-disabled {
    background-color: var(--bg-disabled--color);
    --btn--icon-color: var(--font-disabled--color);
    color: var(--font-disabled--color);
    cursor: not-allowed;
  }
}


.btn.is-loading {
  pointer-events: none;
}

.btn svg {
  width: 100%;
  height: 100%;
  display: block;
}

.btn .icon--stroke {
  fill: none;
  stroke: currentColor;
}

.btn .icon--fill,
.btn .icon--filled {
  fill: currentColor;
  stroke: none;
}

.btn .icon--mixed {
  fill: currentColor;
  stroke: currentColor;
}

.btn-icon-left > svg,
.btn-icon-right > svg {
  color: var(--btn--icon-color);
}

.btn-icon-left,
.btn-icon-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn--icon-size);
  height: var(--btn--icon-size);
  flex-shrink: 0;
}

.btn-icon-left {
  position: relative;
  order: -1;
}

.btn-leading-avatar {
  display: inline-flex;
  align-items: center;
  order: -2;
}

.btn-loading-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--element-gap);
}

.btn-spinner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}

.btn-spinner svg {
  width: var(--btn--icon-size);
  height: var(--btn--icon-size);
  animation: btn-spin 1s linear infinite;
}

.btn.is-loading > .btn-loading-source {
  visibility: hidden;
}

.btn.is-loading > .btn-spinner {
  opacity: 1;
  transform: scale(1);
}

@keyframes btn-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.btn-icon-only {
  width: var(--btn--height);
  min-width: var(--btn--height);
  padding: 0;
  justify-content: center;
  gap: 0;
}

.btn-has-left-icon:not(.btn-icon-only) {
  padding-inline-end: calc(var(--btn--padding-inline) + var(--btn--optical-compensation));
}

.btn-has-right-icon:not(.btn-icon-only) {
  padding-inline-start: calc(var(--btn--padding-inline) + var(--btn--optical-compensation));
}

.btn-s {
  --btn--height: var(--element-s-height);
  --btn--icon-size: var(--element-s-icon-size);
  --btn--font-size: var(--element-s-font-size);
  --btn--line-height: var(--element-s-line-height);
  --btn--border-radius: var(--radius-xs);
}

.btn-s.btn-icon-only {
  width: var(--element-s-height);
  min-width: var(--element-s-height);
}

.btn-l {
  --btn--height: var(--element-l-height);
  --btn--padding-inline: var(--element-l-padding-inline);
  --btn--icon-size: var(--element-l-icon-size);
  --btn--font-size: var(--element-l-font-size);
  --btn--line-height: var(--element-l-line-height);
  --btn--border-radius: var(--radius-m);
}

.btn-l.btn-icon-only {
  width: var(--element-l-height);
  min-width: var(--element-l-height);
}

.btn-icon-s {
  --btn--icon-size: var(--element-s-icon-size);
}

.btn-icon-l {
  --btn--icon-size: var(--element-l-icon-size);
}

.btn-tap-s,
.btn-tap-m,
.btn-tap-l {
  position: relative;
}

.btn-tap-s::after,
.btn-tap-m::after,
.btn-tap-l::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: inherit;
}

.btn-tap-s::after {
  width: var(--element-s-height);
  height: var(--element-s-height);
}

.btn-tap-m::after {
  width: var(--element-m-height);
  height: var(--element-m-height);
}

.btn-tap-l::after {
  width: var(--element-l-height);
  height: var(--element-l-height);
}

.btn-primary {
  --btn--color: var(--font-primary--on);
  --btn--focus-outline-color: var(--bg-primary--color);
  --btn--pressed-bg-color: var(--bg-primary--color-active);
  --btn--pressed-bg-color-hover: var(--bg-primary--color-active);
  --btn--pressed-bg-color-active: var(--bg-primary--color-active);
  --btn--pressed-color: var(--font-primary--on);
  --btn--pressed-color-hover: var(--font-primary--on);
  --btn--pressed-color-active: var(--font-primary--on);
  background-color: var(--bg-primary--color);
  color: var(--btn--color);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-primary--color-hover);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-primary--color-active);
  }

}

.btn-primary-soft {
  --btn--color: var(--font-primary--color);
  --btn--focus-outline-color: var(--font-primary--color);
  background-color: var(--bg-primary-soft--color);
  color: var(--btn--color);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-primary-soft--color-hover);
    color: var(--font-primary--color-hover);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-primary-soft--color-active);
    color: var(--font-primary--color-hover);
  }

}

.btn-contrast {
  --btn--color: var(--font-invert--color);
  --btn--focus-outline-color: var(--bg-invert--color);
  --btn--pressed-bg-color: var(--bg-invert--color-active);
  --btn--pressed-bg-color-hover: var(--bg-invert--color-active);
  --btn--pressed-bg-color-active: var(--bg-invert--color-active);
  --btn--pressed-color: var(--font-invert--color);
  --btn--pressed-color-hover: var(--font-invert--color);
  --btn--pressed-color-active: var(--font-invert--color);
  background-color: var(--bg-invert--color);
  color: var(--btn--color);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-invert--color-hover);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-invert--color-active);
  }

}

.btn-outline {
  --btn--color: var(--font-ichi--color);
  --btn--icon-color: var(--btn--color);
  background-color: transparent;
  box-shadow: inset 0 0 0 var(--px-1) var(--btn--outline-color);
  color: var(--btn--color);
  transition: background-color var(--duration-fast), box-shadow var(--duration-fast), color var(--duration-fast);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--btn--transp-bg-color-hover);
    box-shadow: inset 0 0 0 var(--px-1) var(--btn--outline-color-hover);
    color: var(--btn--color);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--btn--transp-bg-color-active);
    box-shadow: inset 0 0 0 var(--px-1) var(--btn--outline-color-active);
    color: var(--btn--color);
  }

  &:disabled,
  &.is-disabled {
    background-color: transparent;
    box-shadow: inset 0 0 0 var(--px-1) var(--element-border-color);
    color: var(--font-disabled--color);
  }

}

.btn-success {
  --btn--color: var(--font-success--on);
  --btn--focus-outline-color: var(--bg-success--color);
  background-color: var(--bg-success--color);
  color: var(--btn--color);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-success--color-hover);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-success--color-active);
  }

}

.btn-warning {
  --btn--color: var(--font-warning--on);
  --btn--focus-outline-color: var(--bg-warning--color);
  background-color: var(--bg-warning--color);
  color: var(--btn--color);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-warning--color-hover);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-warning--color-active);
  }
}

.btn-success-soft {
  --btn--color: var(--font-success--color);
  --btn--focus-outline-color: var(--font-success--color);
  --btn--pressed-bg-color: var(--bg-success-soft--color);
  --btn--pressed-bg-color-hover: var(--bg-success-soft--color-hover);
  --btn--pressed-bg-color-active: var(--bg-success-soft--color-active);
  --btn--pressed-color: var(--font-success--color);
  --btn--pressed-color-hover: var(--font-success-soft--color-hover);
  --btn--pressed-color-active: var(--font-success-soft--color-active);
  background-color: var(--bg-success-soft--color);
  color: var(--btn--color);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-success-soft--color-hover);
    color: var(--font-success-soft--color-hover);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-success-soft--color-active);
    color: var(--font-success-soft--color-active);
  }

}

.btn-warning-soft {
  --btn--color: var(--font-warning--color);
  --btn--focus-outline-color: var(--font-warning--color);
  --btn--pressed-bg-color: var(--bg-warning-soft--color);
  --btn--pressed-bg-color-hover: var(--bg-warning-soft--color-hover);
  --btn--pressed-bg-color-active: var(--bg-warning-soft--color-active);
  --btn--pressed-color: var(--font-warning--color);
  --btn--pressed-color-hover: var(--font-warning-soft--color-hover);
  --btn--pressed-color-active: var(--font-warning-soft--color-active);
  background-color: var(--bg-warning-soft--color);
  color: var(--btn--color);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-warning-soft--color-hover);
    color: var(--font-warning-soft--color-hover);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-warning-soft--color-active);
    color: var(--font-warning-soft--color-active);
  }

}

.btn-neutral-soft {
  --btn--color: var(--element-neutral-soft-color);
  --btn--pressed-bg-color: var(--element-neutral-soft-bg-color);
  --btn--pressed-bg-color-hover: var(--element-neutral-soft-bg-color-hover);
  --btn--pressed-bg-color-active: var(--element-neutral-soft-bg-color-active);
  --btn--pressed-color: var(--element-neutral-soft-color);
  --btn--pressed-color-hover: var(--element-neutral-soft-color-hover);
  --btn--pressed-color-active: var(--element-neutral-soft-color-active);
  background-color: var(--element-neutral-soft-bg-color);
  color: var(--btn--color);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--element-neutral-soft-bg-color-hover);
    color: var(--element-neutral-soft-color-hover);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--element-neutral-soft-bg-color-active);
    color: var(--element-neutral-soft-color-active);
  }

}

.btn-ghost {
  --btn--color: var(--font-ichi--color);
  background-color: transparent;
  color: var(--btn--color);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--btn--transp-bg-color-hover);
    color: var(--btn--color);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--btn--transp-bg-color-active);
    color: var(--btn--color);
  }

}

.btn-neutral {
  --btn--color: var(--element-neutral-color);
  color: var(--btn--color);

  &:hover:not(:disabled):not(.is-disabled) {
    --btn--color: var(--element-neutral-color-hover);
    color: var(--btn--color);
  }

  &:active:not(:disabled):not(.is-disabled) {
    --btn--color: var(--element-neutral-color-active);
    color: var(--btn--color);
  }

  &.btn-icon-tone-muted:hover:not(:disabled):not(.is-disabled) {
    --btn--icon-color: var(--element-neutral-color-hover);
  }

  &.btn-icon-tone-muted:active:not(:disabled):not(.is-disabled) {
    --btn--icon-color: var(--element-neutral-color-active);
  }
}

.btn-outline.btn-neutral {
  --btn--transp-bg-color-hover: var(--bg-ni--color);
  --btn--transp-bg-color-active: var(--bg-ni--color-hover);
}

.btn-ghost.btn-neutral {
  --btn--transp-bg-color-hover: var(--element-bg-color);
  --btn--transp-bg-color-active: var(--element-bg-color-hover);
}

.btn:is(.btn-ghost, .btn-outline):is(
  .btn-intent-accent,
  .btn-intent-success,
  .btn-intent-warning,
  .btn-intent-danger,
  .btn-intent-contrast
) {
  --btn--focus-outline-color: var(--btn--color);
  --btn--outline-color: color-mix(in srgb, var(--btn--color) 70%, transparent);
  --btn--outline-color-hover: var(--btn--color);
  --btn--outline-color-active: var(--btn--color);
}

.btn:is(.btn-ghost, .btn-outline).btn-intent-accent {
  --btn--color: var(--font-primary--color);
  --btn--icon-color: var(--btn--color);
  --btn--transp-bg-color-hover: var(--bg-primary-soft--color-hover);
  --btn--transp-bg-color-active: var(--bg-primary-soft--color-active);
  color: var(--btn--color);
}

.btn:is(.btn-ghost, .btn-outline).btn-intent-warning {
  --btn--color: var(--font-warning--color);
  --btn--icon-color: var(--btn--color);
  --btn--transp-bg-color-hover: var(--bg-warning-soft--color-hover);
  --btn--transp-bg-color-active: var(--bg-warning-soft--color-active);
  color: var(--btn--color);
}

.btn:is(.btn-ghost, .btn-outline).btn-intent-contrast {
  --btn--color: var(--bg-invert--color);
  --btn--icon-color: var(--btn--color);
  color: var(--btn--color);
}

.btn:is(.btn-ghost, .btn-outline).btn-intent-danger {
  --btn--color: var(--font-danger--color);
  --btn--transp-bg-color-hover: var(--bg-danger-soft--color-hover);
  --btn--transp-bg-color-active: var(--bg-danger-soft--color-active);
  color: var(--btn--color);
}

.btn:is(.btn-ghost, .btn-outline).btn-intent-success {
  --btn--color: var(--font-success--color);
  --btn--transp-bg-color-hover: var(--bg-success-soft--color-hover);
  --btn--transp-bg-color-active: var(--bg-success-soft--color-active);
  color: var(--btn--color);
}

.btn-danger {
  --btn--color: var(--font-danger--on);
  --btn--focus-outline-color: var(--bg-danger--color);
  --btn--pressed-bg-color: var(--bg-danger--color-active);
  --btn--pressed-bg-color-hover: var(--bg-danger--color-active);
  --btn--pressed-bg-color-active: var(--bg-danger--color-active);
  --btn--pressed-color: var(--font-danger--on);
  --btn--pressed-color-hover: var(--font-danger--on);
  --btn--pressed-color-active: var(--font-danger--on);
  background-color: var(--bg-danger--color);
  color: var(--btn--color);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-danger--color-hover);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-danger--color-active);
  }

}

.btn-danger-soft {
  --btn--color: var(--font-danger--color);
  --btn--focus-outline-color: var(--font-danger--color);
  --btn--pressed-bg-color: var(--bg-danger-soft--color);
  --btn--pressed-bg-color-hover: var(--bg-danger-soft--color-hover);
  --btn--pressed-bg-color-active: var(--bg-danger-soft--color-active);
  --btn--pressed-color: var(--font-danger--color);
  --btn--pressed-color-hover: var(--font-danger--color);
  --btn--pressed-color-active: var(--font-danger--color);
  background-color: var(--bg-danger-soft--color);
  color: var(--btn--color);

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-danger-soft--color-hover);
    color: var(--font-danger--color);
  }

  &:active:not(:disabled):not(.is-disabled) {
    background-color: var(--bg-danger-soft--color-active);
    color: var(--font-danger--color);
  }

}

/* Neutralise global link color overrides for link-mode buttons.
   Custom properties are not restricted by :visited privacy rules,
   so var(--btn--color) resolves to the variant's intended value. */
a.btn:visited,
a.btn:hover {
  color: var(--btn--color);
}

.btn-rounded {
  border-radius: var(--radius-full);
}

.btn-full-width {
  width: 100%;
}

.btn-mono {
  font-family: var(--font-family-mono);
}

.btn-icon-tone-muted {
  --btn--icon-color: var(--font-go--color);
}

.btn-state-alt {
  display: none;
}

.btn:is(.is-pressed, .is-loading) {
  & .btn-state-source {
    display: none;
  }

  & .btn-state-alt {
    display: inline-flex;
  }
}

.btn-icon-only {
  & .btn-state-source,
  & .btn-state-alt {
    grid-area: 1 / 1;
  }
}

.btn.is-loading:disabled {
  cursor: wait;
}

@supports not selector(:focus-visible) {
  .btn:focus:not(:disabled):not(.is-disabled) {
    outline-width: var(--element-focus-outline-width);
    outline-style: var(--element-focus-outline-style);
    outline-offset: var(--element-focus-outline-offset);
    outline-color: var(--btn--focus-outline-color);
  }

}

.btn[aria-pressed="true"]:not(:disabled):not(.is-disabled) {
  background-color: var(--btn--pressed-bg-color);
  color: var(--btn--pressed-color);
}

.btn[aria-pressed="true"]:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--btn--pressed-bg-color-hover);
  color: var(--btn--pressed-color-hover);
}

.btn[aria-pressed="true"]:active:not(:disabled):not(.is-disabled) {
  background-color: var(--btn--pressed-bg-color-active);
  color: var(--btn--pressed-color-active);
}
.field {
  --field-height: var(--element-m-height);
  --field-font-size: var(--element-m-font-size);
  --field-line-height: var(--element-m-line-height);
  --field-icon-size: var(--element-m-icon-size);
  --field-padding-inline: var(--element-m-padding-inline);
  --field-radius: var(--radius-s);

  display: flex;
  flex-direction: column;
  gap: var(--px-6);
  width: 100%;
}

.field-s {
  --field-height: var(--element-s-height);
  --field-font-size: var(--element-s-font-size);
  --field-line-height: var(--element-s-line-height);
  --field-icon-size: var(--element-s-icon-size);
  --field-padding-inline: var(--element-s-padding-inline);
  --field-radius: var(--radius-xs);
}

.field-l {
  --field-height: var(--element-l-height);
  --field-font-size: var(--element-l-font-size);
  --field-line-height: var(--element-l-line-height);
  --field-icon-size: var(--element-l-icon-size);
  --field-padding-inline: var(--element-l-padding-inline);
  --field-radius: var(--radius-m);
}

.field-label,
.input-label,
.choice-legend {
  display: flex;
  align-items: center;
  gap: var(--element-gap);
}

:is(.field-label, .input-label, .choice-legend, .field-error, .field-hint) {
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

:is(.field-label, .input-label, .choice-legend, .field-icon, .field-hint) {
  color: var(--font-muted--color);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field-icon {
  position: absolute;
  width: var(--field-icon-size);
  height: var(--field-icon-size);
  pointer-events: none;

  & svg {
    width: 100%;
    height: 100%;
  }
}

.field-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.field-required,
.field-error {
  color: var(--font-danger--color);
}

.field.is-disabled {
  & .field-label,
  & .field-hint,
  & .field-icon,
  & .choice-legend {
    color: var(--font-disabled--color);
  }
}

:is(.input, .textarea, .select) {
  width: 100%;
  border-radius: var(--field-radius);
  color: var(--font-ichi--color);
  background-color: transparent;
  outline: var(--element-border-width) solid var(--element-field-border-color);
  outline-offset: var(--element-field-outline-offset);
  font-size: var(--field-font-size);
  line-height: var(--field-line-height);
  transition: outline-color var(--duration-fast);

  &::placeholder {
    color: var(--font-muted--color);
  }

  &:hover:not(:disabled) {
    outline-color: var(--element-field-border-color-hover);
  }

  &:focus-visible:not(:disabled),
  :root[data-input-modality="keyboard"] &:focus:not(:disabled) {
    outline-width: var(--element-focus-outline-width);
    outline-style: var(--element-focus-outline-style);
    outline-color: var(--element-field-focus-outline-color);
  }

  &:disabled {
    outline-color: var(--bg-disabled--color);
    color: var(--font-disabled--color);
    background: var(--bg-disabled--color);
    cursor: not-allowed;

    &::placeholder {
      color: var(--font-disabled--color);
    }
  }
}

:is(.input, .select) {
  height: var(--field-height);
  padding-inline: var(--field-padding-inline);
}

.field.is-invalid {
  & .field-label,
  & .field-icon,
  & .choice-label,
  & .choice-legend {
    color: var(--font-danger--color);
  }

  & :is(.input, .textarea, .select) {
    outline-color: var(--font-danger--color);

    &:focus-visible,
    :root[data-input-modality="keyboard"] &:focus {
      outline-color: var(--font-danger--color);
    }
  }
}
.input-wrapper {
  width: 100%;
}

.input-wrapper-measure-s {
  max-width: var(--px-180);
}

.input-wrapper-measure-m {
  max-width: var(--px-400);
}

.input-wrapper-measure-l {
  max-width: var(--px-640);
}

.input-wrapper-measure-fill {
  max-width: none;
}

.input {
  display: block;
  font-weight: 400;
}

.input-container {
  position: relative;
}

.input-icon {
  inset-inline-start: var(--field-padding-inline);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--font-san--color);

  & svg,
  & .input-icon-svg {
    display: block;
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: var(--element-icon-stroke-width);
  }
}

.input-with-icon {
  padding-inline-start: calc(var(--field-padding-inline) + var(--field-icon-size) + var(--element-gap));
}

.input-rounded {
  border-radius: var(--radius-full);
}

.input-wrapper-on-danger {
  & .field-label,
  & .field-hint {
    color: var(--font-on-danger-muted--color);
  }

  & .field-required {
    color: var(--font-on-danger--color);
  }

  & .input {
    color: var(--font-on-danger--color);
    caret-color: var(--font-on-danger--color);
    outline-color: var(--border-on-danger--color);

    &:hover:not(:disabled) {
      outline-color: var(--border-on-danger--color-hover);
    }

    &:focus-visible:not(:disabled),
    :root[data-input-modality="keyboard"] &:focus:not(:disabled) {
      outline-color: var(--border-on-danger--color-active);
    }

    &::placeholder {
      color: var(--font-on-danger-subtle--color);
    }
  }
}

.input-six-digit-code {
  --field-height: calc(var(--element-l-height) * 3);
  --field-font-size: var(--px-64);
  --field-line-height: var(--px-64);

  & .input {
    padding-inline: calc(var(--element-s-padding-inline) / 2);
    text-align: left;
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--element-s-padding-inline);
    /* lint-allow: field-chrome-none — six code cells own the tokenized underline and focus treatment */
    outline: none;
    border-radius: 0;
    background-image: repeating-linear-gradient(
      to right,
      var(--element-border-color) 0 1ch,
      transparent 1ch calc(1ch + var(--element-s-padding-inline))
    );
    background-repeat: no-repeat;
    background-size:
      calc((1ch + var(--element-s-padding-inline)) * 5 + 1ch)
      var(--element-focus-outline-width);
    background-position:
      calc(var(--element-s-padding-inline) / 2)
      calc(100% - var(--element-m-icon-size));

    &:hover:not(:disabled) {
      background-image: repeating-linear-gradient(
        to right,
        var(--element-border-color-hover) 0 1ch,
        transparent 1ch calc(1ch + var(--element-s-padding-inline))
      );
    }

    &:focus-visible,
    :root[data-input-modality="keyboard"] &:focus {
      outline: var(--element-focus-outline-width) var(--element-focus-outline-style) var(--element-focus-outline-color);
      outline-offset: var(--element-focus-outline-offset);
      background-image: repeating-linear-gradient(
        to right,
        var(--element-focus-outline-color) 0 1ch,
        transparent 1ch calc(1ch + var(--element-s-padding-inline))
      );
    }
  }
}

.field.is-invalid .input-six-digit-code .input,
.is-rejected .input-six-digit-code .input {
  color: var(--font-danger--color);
  background-image: repeating-linear-gradient(
    to right,
    var(--font-danger--color) 0 1ch,
    transparent 1ch calc(1ch + var(--element-s-padding-inline))
  );
}

.is-confirmed .input-six-digit-code .input {
  color: var(--font-success--color);
}
.modal {
  --modal-motion-scale-start: 0.95;
  --modal-max-width: 28rem;
  --modal-max-height: min(80svh, 36rem);
  --modal-viewport-gutter: var(--container-gutter-s);
  --modal-body-focus-gutter: calc(var(--element-focus-outline-width) + var(--element-focus-outline-offset));
  --modal-content-gap: var(--block-gap-m);

  width: min(calc(100dvw - (var(--modal-viewport-gutter) * 2)), var(--modal-max-width));
  max-width: calc(100dvw - (var(--modal-viewport-gutter) * 2));
  max-height: min(var(--modal-max-height), calc(100dvh - (var(--modal-viewport-gutter) * 2)));
  padding: 0;
  margin: auto;
  border: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  color: inherit;
  white-space: normal;
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}

.modal[open] {
  opacity: 1;
}

.modal[open].is-closing {
  opacity: 0;
}

@starting-style {
  .modal[open] {
    opacity: 0;
  }
}

.modal:focus,
.modal:focus-visible {
  outline: none;
}

.modal-pointer-focus-restore:focus-visible {
  outline: none;
}

.modal::backdrop {
  background-color: transparent;
  transition: background-color var(--duration-normal) ease;
}

.modal[open]::backdrop {
  background-color: var(--bg-frost--color);
}

.modal[open].is-closing::backdrop {
  background-color: transparent;
}

.modal-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--modal-content-gap);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: var(--block-padding-l);
  background-color: var(--bg-surface-1-elevated);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  overflow: hidden;
  transform: scale(var(--modal-motion-scale-start));
  transform-origin: center;
  transition: transform var(--duration-normal) ease;
  min-width: 0;
  max-height: inherit;
  min-height: 0;
}

.modal[open] .modal-surface {
  transform: scale(1);
}

.modal[open].is-closing .modal-surface {
  transform: scale(var(--modal-motion-scale-start));
  pointer-events: none;
}

@starting-style {
  .modal[open] .modal-surface {
    transform: scale(var(--modal-motion-scale-start));
  }
}

@supports not selector(:focus-visible) {
  .modal-pointer-focus-restore:focus {
    outline: none;
  }
}

.modal-header,
.modal-footer {
  flex: 0 0 auto;
  min-width: 0;
}

.modal-header {
  padding-inline-end: var(--px-48);
}

.modal-header,
.modal-header-copy,
.modal-body {
  display: flex;
  flex-direction: column;
}

.modal-header-copy,
.modal-body,
.modal-body > * {
  min-width: 0;
  max-width: 100%;
}

.modal-body :where(*) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.modal-header-copy,
.modal-body {
  gap: var(--modal-content-gap);
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--modal-body-focus-gutter);
  margin: calc(var(--modal-body-focus-gutter) * -1);
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.modal-body-scroll {
  overflow-y: auto;
}

.modal-action-form {
  display: contents;
}

.modal-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--block-gap-m) var(--group-gap-m);
  align-items: start;
}

.modal-form-grid > * {
  min-width: 0;
}

.modal-form-grid > :is(.input-wrapper, .select-wrapper) {
  max-width: none;
}

.modal-form-grid-full {
  grid-column: 1 / -1;
}

.modal-close {
  position: absolute;
  top: var(--block-padding-s);
  right: var(--block-padding-s);
  z-index: 1;
}

.modal-media {
  margin:
    calc(var(--block-padding-l) * -1)
    calc(var(--block-padding-l) * -1)
    0;
  overflow: hidden;
  border-radius:
    var(--radius-m)
    var(--radius-m)
    0
    0;
}

.modal-media-image {
  display: block;
  width: 100%;
  height: 14rem;
  object-fit: cover;
}

.modal-title,
.modal-description,
.modal-body > p {
  margin: 0;
  overflow-wrap: anywhere;
}

.modal-title {
  font-size: var(--font-size-l);
  line-height: var(--px-28);
  letter-spacing: -.01em;

}

.modal-description {
  color: var(--font-muted--color);
}

.modal-header-scale-large {
  .modal-header-copy {
    gap: 0;
  }

  .modal-title,
  .modal-description {
    font-size: var(--px-20);
    line-height: var(--line-height-l);
  }

  .modal-title {
    font-weight: 600;
  }

  .modal-description {
    font-weight: 400;
  }
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--group-gap-m);
}

.modal-footer-center {
  justify-content: center;
}

.modal-action-start {
   order: -1;
  margin-inline-end: auto;
}

.modal-layout-centered-alert {
  .modal-surface {
    min-height: 15rem;
  }

  .modal-header {
    display: flex;
    align-items: center;
    margin-inline: calc(var(--block-padding-l) * -1);
    padding-inline-end: 0;
    flex: 1 1 auto;
  }

  .modal-header-copy {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    width: 100%;
    align-items: center;
    text-align: center;
    padding-inline: calc(var(--block-padding-l) * 2);
    padding-top: var(--block-padding-m);
  }

  .modal-title {
    max-width: none;
  }

  .modal-body:empty {
    display: none;
  }

  .modal-footer {
    margin-top: auto;
  }
}

.modal-layout-wide {
  --modal-max-width: 42rem;
}

.modal-layout-wizard {
  --modal-max-width: var(--px-800);
  --modal-body-focus-gutter: 0;

  .modal-surface {
    padding: var(--px-40);
  }
}

.modal-layout-tall {
  --modal-max-height: min(90svh, 48rem);
}

@media (max-width: 40rem) {
  .modal-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-form-grid-full {
    grid-column: auto;
  }
}

.destructive-delete-modal {
  .modal-surface {
    background-color: var(--bg-danger--color);
    color: var(--font-on-danger--color);
  }

  .modal-title,
  .modal-body {
    color: var(--font-on-danger--color);
  }

  .modal-title {
    padding-inline-end: var(--px-48);
    overflow-wrap: anywhere;
  }
}

.destructive-delete-confirmation-form {
  margin-top: var(--block-gap-m);
}

.destructive-delete-confirmation-input .input-label {
  align-items: flex-start;
  max-width: 100%;
  white-space: normal;
}

.destructive-delete-confirmation-input .input-label > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Core */

.popover-shell {
  position: relative;
  display: inline-flex;
}

.popover-surface {
  --popover-surface-min-width: 14rem;
  --popover-surface-max-width: 20rem;
  --popover-surface-padding: var(--block-gap-s);

  position: absolute;
  top: calc(100% + var(--px-6));
  left: 0;
  z-index: var(--z-popover);
  min-width: var(--popover-surface-min-width);
  max-width: min(var(--popover-surface-max-width), calc(100vw - (var(--container-gutter-s) * 2)));
  padding: var(--popover-surface-padding);
  border-radius: var(--radius-l);
  background-color: var(--bg-surface-1-elevated);
  outline: 1px solid var(--border-window--color);
  outline-offset: -1px;
  box-shadow: var(--shadow-l);
}

.popover-surface--animated {
  opacity: 0;
  transform: scale(0.95);
  transform-origin: top left;
  transition:
    opacity var(--duration-normal) ease,
    transform var(--duration-normal) ease;

  &.is-open {
    opacity: 1;
    transform: scale(1);
  }

  &.is-closing {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
  }
}

.popover-surface--animated[data-popover-placement="up"] {
  transform-origin: bottom left;
}

.popover-surface--animated[data-popover-placement="up-end"] {
  transform-origin: bottom right;
}

.popover-surface--animated[data-popover-placement="down-end"] {
  transform-origin: top right;
}

.popover-surface--animated[data-popover-placement="right"] {
  transform-origin: top left;
}

.popover-surface--animated[data-popover-placement="left"] {
  transform-origin: top right;
}

@starting-style {
  .popover-surface--animated.is-open {
    opacity: 0;
    transform: scale(0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .popover-surface--animated {
    transition-duration: 1ms;
  }
}

.popover-surface.is-portal {
  position: fixed;
  top: 0;
  left: 0;
}

.popover-surface--rich {
  --popover-surface-min-width: 20rem;
  --popover-surface-max-width: 30rem;
}

.popover-surface--spacious {
  --popover-surface-padding: var(--group-padding-l);
}

.popover-shell--up .popover-surface {
  top: auto;
  right: auto;
  bottom: calc(100% + var(--px-6));
  left: 0;
}

.popover-shell--down-end .popover-surface {
  right: 0;
  left: auto;
}


/* Slots */

.popover-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--block-gap-s);
  width: 100%;
  min-width: 0;
}

.popover-content > .btn,
.popover-content > form > .btn {
  display: flex;
  width: 100%;
}

.popover-header {
  display: flex;
  flex-direction: column;
  gap: var(--group-gap-m);
  min-width: 0;
}

.popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--group-gap-m);
  min-width: 0;
  margin-top: var(--block-gap-s);
}


/* List + items */

.popover-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--group-gap-xs);
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.popover-list--scroll {
  --popover-list-scroll-max-height: 12rem;

  max-height: var(--popover-list-scroll-max-height);
  overflow-y: auto;

  &:focus-visible,
  :root[data-input-modality="keyboard"] &:focus {
    outline-width: var(--outline-width);
    outline-style: var(--outline-style);
    outline-offset: var(--outline-offset);
    outline-color: var(--outline-color);
    border-radius: var(--radius-s);
  }
}

.popover-list--s .popover-item {
  min-height: var(--element-s-height);
  padding-inline: var(--element-s-padding-inline);
  font-size: var(--element-s-font-size);
  line-height: var(--element-s-line-height);
}

.popover-item {
  display: flex;
  align-items: center;
  gap: var(--element-gap);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: var(--element-m-height);
  padding-inline: var(--px-10);
  border: none;
  border-radius: var(--radius-s);
  background-color: transparent;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  margin: 0;
  font-size: var(--font-size-m);
  line-height: var(--element-m-line-height);
  color: var(--font-ichi--color);

  &:not(:disabled):hover {
    background-color: var(--bg-ni--color-hover);
    color: var(--font-ichi--color);
  }

  &:disabled,
  &[aria-disabled="true"] {
    color: var(--font-disabled--color);
    cursor: default;
    background-color: transparent;
  }

  &.is-selected {
    font-weight: 500;
    background-color: var(--bg-transp--color);
  }

  &:not(:disabled):focus-visible,
  :root[data-input-modality="keyboard"] &:not(:disabled):focus {
    background-color: var(--bg-ni--color-hover);
    color: var(--font-ichi--color);
    outline-width: var(--outline-width);
    outline-style: var(--outline-style);
    outline-color: var(--outline-color);
    outline-offset: calc(var(--outline-width) * -1);
  }
}

.popover-item--danger {
  color: var(--font-danger--color);

  &:not(:disabled):hover,
  &:not(:disabled):focus-visible,
  :root[data-input-modality="keyboard"] &:not(:disabled):focus {
    background-color: var(--bg-danger-soft--color-hover);
    color: var(--font-danger--color);
  }

  &:not(:disabled):active {
    background-color: var(--bg-danger-soft--color-active);
    color: var(--font-danger--color);
  }
}

.popover-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--element-m-icon-size);
  width: var(--element-m-icon-size);
  height: var(--element-m-icon-size);
}

.popover-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Table editor consumer */

.table-editor-popup {
  --popover-surface-min-width: 14rem;
  --popover-surface-max-width: 18rem;
  overflow-y: auto;
}

.table-editor-popup[data-editor-type="assignees"] {
  --popover-surface-min-width: 18rem;
  --popover-surface-max-width: 20rem;
}

.table-editor-popup[data-cell-type="multi"] .popover-list--scroll {
  --popover-list-scroll-max-height: 16rem;
}
.list-picker-empty {
  font-size: var(--font-size-s);
  color: var(--font-muted--color);
}

.list-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--group-gap-s);
  min-width: 0;
  min-height: var(--element-m-height);
  padding-inline: var(--px-4);
  border-radius: var(--radius-xs);
  transition: background-color var(--duration-fast) linear;

  &:hover,
  &:focus-within {
    background-color: var(--element-transp-bg-color-hover);
  }
}

.list-picker-item[hidden] {
  display: none;
}

.list-picker-item > .choice-field {
  flex: 1 1 auto;
  min-width: 0;
}

.list-picker-item > .choice-field .checkbox {
  width: 100%;
  min-width: 0;
}

.list-picker-item > .choice-field .choice-label,
.list-picker-item > .choice-field .choice-label > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-picker-item-meta {
  flex-shrink: 0;
  font-size: var(--font-size-s);
  color: var(--font-muted--color);
}
.segmented-control {
  display: inline-flex;
  align-items: center;
  gap: var(--element-gap);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.segmented-control::-webkit-scrollbar {
  display: none;
}

.segmented-control-item[aria-pressed="true"]:not(:disabled):not(.is-disabled),
.segmented-control-item[aria-current="page"] {
  background-color: var(--bg-invert--color);
  color: var(--font-invert--color);
}

.segmented-control-item[aria-pressed="true"]:hover:not(:disabled):not(.is-disabled),
.segmented-control-item[aria-current="page"]:hover {
  background-color: var(--bg-invert--color-hover);
  color: var(--font-invert--color);
}

.segmented-control-item[aria-pressed="true"]:active:not(:disabled):not(.is-disabled),
.segmented-control-item[aria-current="page"]:active {
  background-color: var(--bg-invert--color-active);
  color: var(--font-invert--color);
}

.segmented-control-equal {
  inline-size: 100%;
  overflow: hidden;
}

.segmented-control-equal .segmented-control-item {
  flex: 1 1 0;
  min-inline-size: 0;
}
.tabs-wrapper {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.tabs {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background-color: transparent;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.tabs-item {
  display: contents;
}

.tabs-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-inline-size: fit-content;
  background-color: transparent;
  color: var(--font-muted--color);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: color var(--duration-fast);

  &:hover:not(:disabled):not(.is-disabled),
  &:active:not(:disabled):not(.is-disabled),
  &.is-active {
    color: var(--font-ichi--color);
  }

  &:focus-visible {
    outline-width: var(--element-focus-outline-width);
    outline-style: var(--element-focus-outline-style);
    outline-offset: var(--element-focus-outline-offset);
    outline-color: var(--element-focus-outline-color);
    z-index: 2;
  }

  &:disabled,
  &.is-disabled,
  &[aria-disabled="true"] {
    color: var(--font-disabled--color);
    cursor: not-allowed;
  }
}

.tabs-plain {
  gap: 0;

  .tabs-tab {
    block-size: var(--element-m-height);
    padding-inline: var(--element-m-padding-inline);
    border-radius: 0;
    font-size: var(--element-m-font-size);
    line-height: var(--element-m-line-height);
    font-weight: 500;
  }

  .tabs-item:first-child .tabs-tab {
    padding-inline-start: 0;
  }
}

.tabs-plain.tabs-s {
  .tabs-tab {
    block-size: var(--element-s-height);
    padding-inline: var(--element-s-padding-inline);
    font-size: var(--element-s-font-size);
    line-height: var(--element-s-line-height);
  }

  .tabs-item:first-child .tabs-tab {
    padding-inline-start: 0;
  }
}

.tabs-plain.tabs-l {
  .tabs-tab {
    block-size: var(--element-l-height);
    padding-inline: var(--element-l-padding-inline);
    font-size: var(--element-l-font-size);
    line-height: var(--element-l-line-height);
  }

  .tabs-item:first-child .tabs-tab {
    padding-inline-start: 0;
  }
}

.tabs-underline {
  position: relative;
  gap: var(--group-gap-l);

  .tabs-tab {
    block-size: var(--element-m-height);
    padding-inline: 0;
    border-radius: 0;
    font-size: var(--element-m-font-size);
    line-height: var(--element-m-line-height);
    font-weight: 500;
  }
}

.tabs-underline.tabs-s {
  gap: var(--group-gap-l);

  .tabs-tab {
    block-size: var(--element-s-height);
    font-size: var(--element-s-font-size);
    line-height: var(--element-s-line-height);
  }
}

.tabs-underline.tabs-l {
  gap: var(--group-gap-l);

  .tabs-tab {
    block-size: var(--element-l-height);
    font-size: var(--element-l-font-size);
    line-height: var(--element-l-line-height);
  }
}

.tabs-indicator-item {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* exception: DP/no-visible-lines — underline is the requested active navigation indicator. */
.tabs-wrapper:not(.is-ready) .tabs-underline .tabs-tab.is-active::after,
.tabs-underline-indicator {
  position: absolute;
  inset-block-end: 0;
  block-size: var(--px-1);
  background-color: var(--font-ichi--color);
  pointer-events: none;
}

.tabs-wrapper:not(.is-ready) .tabs-underline .tabs-tab.is-active::after {
  content: "";
  inset-inline: 0;
}

.tabs-underline-indicator {
  inset-inline-start: 0;
  inline-size: var(--tabs-indicator-inline-size, 0);
  opacity: 0;
  transform: translateX(var(--tabs-indicator-inline-start, 0));
}

.tabs-wrapper.is-ready .tabs-underline-indicator {
  opacity: 1;
  transition:
    inline-size var(--motion-transition-switch),
    transform var(--motion-transition-switch);
}

@supports not selector(:focus-visible) {
  .tabs-tab:focus {
    outline-width: var(--element-focus-outline-width);
    outline-style: var(--element-focus-outline-style);
    outline-offset: var(--element-focus-outline-offset);
    outline-color: var(--element-focus-outline-color);
    z-index: 2;
  }
}
/* Data table - no borders per DESIGN_PRINCIPLES §4 */

.data-table-wrap {
  --data-table-row-bg-hover: var(--bg-item-hover--color);
  --data-table-row-bg-active: var(--bg-primary-soft--color);
  --data-table-cell-bg-hover: var(--bg-ni--color-hover);

  position: relative;
  overflow: auto;
  background-color: var(--bg-surface-1);
  border-radius: var(--radius-l);
}

.data-table-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;

  .data-table-wrap {
    flex: 1;
    min-height: 0;
  }

  .data-table--empty {
    height: 100%;
  }
}

.data-table-resource-title-heading {
  min-width: var(--px-320);
}

.data-table col[data-table-column-key="title"]:not([data-column-resize-manual="true"]):not([data-column-resize-preserved="true"]),
.data-table col[data-table-column-key="name"]:not([data-column-resize-manual="true"]):not([data-column-resize-preserved="true"]) {
  width: var(--px-320);
}

.data-table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
  text-align: left;
  font-size: var(--element-m-font-size);
  line-height: var(--element-m-line-height);

  th, td {
    padding: var(--px-8) var(--px-9);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-surface-1);
    font-weight: 500;
    color: var(--font-yon--color);
    font-size: var(--element-s-font-size);
    line-height: var(--element-s-line-height);
  }

  tbody td {
    background-color: var(--data-table-row-bg-current, transparent);
    color: var(--font-ichi--color);
    line-height: var(--px-20);
  }

  tbody tr {
    --data-table-row-bg-current: transparent;
  }

  tbody tr:hover {
    --data-table-row-bg-current: var(--data-table-row-bg-hover);
  }

  tbody tr:has(.data-table-empty):hover {
    --data-table-row-bg-current: transparent;
  }

  &.is-column-resizing tbody tr:hover {
    --data-table-row-bg-current: transparent;
  }

  tbody tr.is-drop-target {
    --data-table-row-bg-current: var(--data-table-row-bg-active);
  }

  tbody tr.is-drop-confirmed td {
    animation: data-table-drop-confirmed-bg 650ms ease-out;
  }

  tbody tr.is-drop-confirmed .data-table-title-cell {
    animation: data-table-drop-confirmed-title 650ms ease-out;
  }

  tbody tr.is-pin-animating > td {
    overflow: hidden;
  }

  tbody tr.is-pinned:not(:has(+ tr.is-pinned)) > td {
    /* exception: DP/no-visible-lines — user requested one red separator under the pinned group. */
    box-shadow: inset 0 var(--px-n1) 0 color-mix(in srgb, var(--font-danger--color) 30%, transparent);
  }
}

.data-table-wrap.data-table-wrap--compact {
  inline-size: 100%;
  overflow: auto;
  background-color: var(--bg-ni--color);
}

.data-table.data-table--compact {
  inline-size: 100%;
  min-inline-size: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-xs);
  line-height: var(--px-20);
}

.data-table.data-table--compact > colgroup > col:nth-child(2) {
  inline-size: calc(var(--px-130) + var(--px-4));
}

.data-table.data-table--compact > colgroup > col:nth-child(3) {
  inline-size: calc(var(--px-130) + var(--px-12));
}

.data-table.data-table--compact {
  thead th {
    padding-block: var(--px-4);
    background-color: var(--bg-ni--color-hover);
    font-weight: 400;
    font-size: var(--font-size-xs);
    line-height: var(--px-20);
    text-align: left;
  }

  thead th:first-child {
    padding-inline: var(--px-10) 0;
  }

  thead th:nth-child(2) {
    padding-inline: var(--px-8) var(--px-4);
  }

  thead th:nth-child(3) {
    padding-inline: 0 var(--px-12);
  }

  tbody td {
    padding-block: var(--px-2);
    background-clip: padding-box;
    line-height: var(--px-20);
  }

  tbody tr:first-child td {
    border-block-start: var(--px-12) solid transparent;
  }

  tbody tr:last-child td {
    border-block-end: var(--px-12) solid transparent;
  }

  tbody td:first-child {
    padding-inline: var(--px-12) var(--px-8);
  }

  tbody td:nth-child(2) {
    padding-inline: var(--px-8) var(--px-4);
  }

  tbody td:nth-child(3) {
    padding-inline: 0 var(--px-12);
  }
}

.data-table col[hidden] {
  display: none;
}

/* Column resize */

.data-table-column-resize {
  position: fixed;
  block-size: var(--element-m-height);
  inline-size: 0;
  cursor: col-resize;
  touch-action: none;
  z-index: 4;

  &::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--px-6) * -1);
    inline-size: var(--px-10);
  }

  &::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--px-2);
    border-radius: var(--px-2);
    background-color: transparent;
  }

  &:hover::after,
  &:active::after {
    background-color: var(--font-primary--color);
  }
}

.data-table.is-column-resizing {
  user-select: none;

  .data-table-column-resize::after {
    background-color: var(--font-primary--color);
  }

  .data-table-sort-link:hover,
  .data-table-sort-link--active:hover {
    background-color: transparent;
  }
}

.data-table.is-column-resizing tbody tr:hover td,
.data-table.is-column-resizing tbody td[data-cell]:hover,
.data-table.is-column-resizing tbody td[data-table-cell-action]:hover,
.data-table.is-column-resizing tbody td[data-table-cell-action="open"]:hover {
  background-color: var(--data-table-row-bg-current, transparent);
}

.data-table.is-column-reordering {
  user-select: none;
}

html.is-data-table-dragging,
html.is-data-table-dragging *,
body.is-data-table-dragging,
body.is-data-table-dragging * {
  cursor: grabbing !important;
}

.data-table-column-drop-target {
  position: fixed;
  inset-block: 0;
  inline-size: var(--px-2);
  border-radius: var(--px-2);
  background-color: var(--font-primary--color);
  pointer-events: none;
  z-index: 4;
}

.data-table-column-ghost {
  position: fixed;
  z-index: var(--z-popover);
  display: flex;
  align-items: center;
  min-block-size: var(--element-m-height);
  padding: var(--px-6) var(--element-m-padding-inline);
  border-radius: var(--radius-xs);
  background-color: var(--bg-surface-1);
  color: var(--font-ichi--color);
  box-shadow: var(--shadow-m);
  font-size: var(--element-s-font-size);
  line-height: var(--element-s-line-height);
  pointer-events: none;
  opacity: 0.92;
}

.data-table th.is-column-reorder-source {
  opacity: 0.45;
}

/* Column alignment */

.data-table-col--right {
  text-align: right;
}

/* Action columns */

.data-table {
  --data-table-pin-move-duration: 300ms;
  --data-table-pin-opacity-duration: 50ms;
  --data-table-pin-easing-enter: ease-out;
  --data-table-pin-easing-leave: ease-in;

  --data-table-drag-col-width: 0;
  --data-table-sort-active-bg: color-mix(in srgb, var(--bg-warning--color) 20%, var(--bg-surface-1));
  --data-table-sort-active-bg-hover: color-mix(in srgb, var(--bg-warning--color) 30%, var(--bg-surface-1));
}

.data-table .data-table-drag-heading,
.data-table .data-table-drag-cell {
  width: var(--data-table-drag-col-width);
  inline-size: var(--data-table-drag-col-width);
  min-inline-size: var(--data-table-drag-col-width);
  max-inline-size: var(--data-table-drag-col-width);
  text-align: center;
}

.data-table .data-table-action-heading,
.data-table .data-table-action-cell {
  width: var(--px-44);
  inline-size: var(--px-44);
  min-inline-size: var(--px-44);
  max-inline-size: var(--px-44);
  text-align: center;
}

.data-table col.data-table-col--drag {
  width: var(--data-table-drag-col-width);
}

.data-table col.data-table-col--action {
  width: var(--px-44);
}

.data-table thead th:has(.data-table-sort-link) {
  padding: 0;
}

.data-table-sort-link {
  display: flex;
  align-items: center;
  gap: var(--px-4);
  inline-size: 100%;
  block-size: 100%;
  padding: var(--px-8) var(--px-9);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.data-table-sort-link:hover {
  background-color: var(--data-table-cell-bg-hover);
  color: var(--font-ichi--color);
}

.data-table-sort-link--active {
  color: var(--font-ichi--color);
}

.data-table-sort-link--active {
  background-color: var(--data-table-sort-active-bg);
}

.data-table-sort-link--active:hover {
  background-color: var(--data-table-sort-active-bg-hover);
}

.data-table thead th:has(.data-table-sort-link--active) {
  background-color: var(--data-table-sort-active-bg);
  color: var(--font-ichi--color);
}

.data-table thead th:has(.data-table-sort-link--active) .data-table-sort-link {
  color: var(--font-ichi--color);
}

.data-table-sort-indicator {
  min-inline-size: var(--px-10);
  font-size: var(--font-size-xs);
  text-align: center;
}

.data-table-sort-indicator--hidden {
  visibility: hidden;
}

.data-table .data-table-drag-cell,
.data-table .data-table-action-cell {
  position: relative;
  padding: 0;
  overflow: visible;
}

.data-table-drag-cell[data-disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.data-table-action-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--font-yon--color);
  text-decoration: none;
  transition: color var(--duration-fast);
}

button.data-table-action-link {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.data-table-action-link .icon {
  inline-size: var(--px-32);
  block-size: var(--px-32);
  flex: 0 0 var(--px-32);
}

.data-table-pin-button svg {
  inline-size: var(--px-24);
  block-size: var(--px-24);
  flex: 0 0 var(--px-24);
}

.data-table-action-link:hover,
.data-table-action-link:active,
.data-table-action-link:focus-visible {
  color: var(--font-primary--color-hover);
}

.data-table-action-link:focus-visible {
  outline-width: var(--element-focus-outline-width);
  outline-style: var(--element-focus-outline-style);
  outline-color: var(--element-focus-outline-color);
  outline-offset: calc(-1 * var(--element-focus-outline-width));
}

@supports not selector(:focus-visible) {
  .data-table-action-link:focus {
    color: var(--font-primary--color-hover);
    outline-width: var(--element-focus-outline-width);
    outline-style: var(--element-focus-outline-style);
    outline-color: var(--element-focus-outline-color);
    outline-offset: calc(-1 * var(--element-focus-outline-width));
  }
}

/* Sticky first column */

.data-table-wrap--sticky-col {

  .data-table th:first-child,
  .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .data-table th:first-child {
    background-color: var(--bg-surface-1);
  }

  .data-table td:first-child {
    background-color: var(--data-table-row-bg-current, var(--bg-surface-1));
  }

  .data-table thead th:first-child {
    z-index: 3;
  }
}

.data-table-wrap--sticky-col .data-table--with-drag-col {

  th:nth-child(2),
  td:nth-child(2) {
    position: sticky;
    left: var(--data-table-drag-col-width);
    z-index: 1;
  }

  th:nth-child(2) {
    background-color: var(--bg-surface-1);
  }

  td:nth-child(2) {
    background-color: var(--data-table-row-bg-current, var(--bg-surface-1));
  }

  thead th:nth-child(2) {
    z-index: 3;
  }
}

.data-table-wrap--sticky-col .data-table--with-drag-col thead th:nth-child(2):has(.data-table-sort-link--active) {
  background-color: var(--data-table-sort-active-bg);
}

/* Interactive cells */

.data-table tbody td[data-cell].is-active-cell,
.data-table tbody tr:hover td[data-cell].is-active-cell {
  background-color: var(--data-table-cell-bg-hover);
}

.data-table tbody td[data-table-cell-action],
.data-table tbody td[data-cell] {
  cursor: pointer;
}

.data-table tbody td[data-table-cell-action="open"] {
  position: relative;
}

.data-table tbody td[data-table-cell-action="open"] .data-table-title-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.data-table tbody td[data-table-cell-action="open"] [data-table-cell-action-exempt] {
  position: relative;
  z-index: 2;
}

/* Empty state */

.data-table-empty {
  text-align: center;
  color: var(--font-go--color);
  padding-block: var(--px-40);
  background-color: var(--bg-surface-1);
}

.data-table-empty--viewport-centered {
  text-align: start;
}

.data-table-empty--viewport-centered .data-table-empty-state {
  position: sticky;
  inset-inline-start: 50%;
  inline-size: max-content;
  max-inline-size: calc(100vw - (var(--container-gutter-s) * 2));
  transform: translateX(-50%);
  white-space: normal;
}

.data-table-empty-state {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--group-gap-m);
}

/* Table settings */

.table-settings-popover {
  --popover-surface-min-width: 17rem;
  --popover-surface-max-width: 18rem;
}

.table-settings-content {
  gap: var(--block-gap-m);
}

.table-settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--group-gap-s);
  min-width: 0;

  h3 {
    margin: 0;
    color: var(--font-yon--color);
    font-size: var(--element-s-font-size);
    line-height: var(--element-s-line-height);
    font-weight: 500;
  }
}

.table-settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--group-gap-m);
  min-width: 0;
}

.table-settings-column-list {
  display: flex;
  flex-direction: column;
  gap: var(--group-gap-xs);
  min-width: 0;
}

/* Primary row link */

.data-table-title-cell {
  display: flex;
  align-items: center;
  gap: var(--px-6);
  min-width: 0;

  .icon {
    width: var(--px-18);
    height: var(--px-18);
    flex-shrink: 0;
  }
}

.data-table-title-link {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--font-ichi--color);
  text-decoration: none;
  padding-block: var(--px-6);
  margin-block: var(--px-n6);
  font-size: 18px;
  font-weight: 500;

  &:visited,
  &:hover,
  &:active {
    color: var(--font-ichi--color);
    text-decoration: none;
  }
}

.data-table-title-link.resource-identity--row {
  display: flex;
}

.data-table-title-link.resource-identity-main {
  display: inline-flex;
}

.data-table-resource-identity {
  flex: 1;
  min-width: 0;
}

.data-table-folder-icon {
  color: var(--font-primary--color);
}

.data-table-resource-identity.resource-identity--split {
  padding-block: var(--px-6);
  margin-block: var(--px-n6);
}

.data-table-resource-identity-link.resource-identity--row {
  display: flex;
}

.data-table tbody tr.is-opened-in-aside td[data-table-cell-action="open"] .data-table-title-link {
  font-weight: 600;
}

@keyframes data-table-drop-confirmed-bg {
  0% {
    background-color: var(--data-table-row-bg-active);
  }

  100% {
    background-color: var(--bg-surface-1);
  }
}

@keyframes data-table-drop-confirmed-title {
  0% {
    transform: scale(0.985);
  }

  100% {
    transform: scale(1);
  }
}

/* Visually hidden */

.data-table-sr-only {
  /* Visually-hidden utility, WebAIM clip recipe. */
  position: absolute;
  width: var(--px-1);
  height: var(--px-1);
  padding: 0;
  margin: var(--px-n1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.switch-field {
  width: fit-content;
  max-width: 100%;
}

.switch {
  --switch-track-width: var(--element-l-height);
  --switch-track-height: var(--element-s-height);
  --switch-thumb-size: calc(var(--switch-track-height) - var(--element-border-width) * 4);
  --switch-thumb-offset: calc(var(--element-border-width) * 2);
  --switch-thumb-travel: calc(var(--switch-track-width) - var(--switch-track-height));

  display: inline-flex;
  align-items: flex-start;
  gap: var(--element-m-padding-inline);
  max-width: 100%;
  color: var(--font-ichi--color);
  text-align: start;
  cursor: pointer;

  &:has(.switch-input:focus-visible),
  :root[data-input-modality="keyboard"] &:has(.switch-input:focus) {
    outline: var(--element-focus-outline-width) var(--element-focus-outline-style) var(--control--focus-outline-color);
    outline-offset: var(--element-focus-outline-offset);
  }
}

.field-s .switch {
  --switch-track-width: var(--element-m-height);
  --switch-track-height: var(--element-m-icon-size);
}

.field-l .switch {
  --switch-track-width: var(--px-48);
  --switch-track-height: var(--px-28);
}

.switch-track {
  position: relative;
  flex: 0 0 var(--switch-track-width);
  width: var(--switch-track-width);
  height: var(--switch-track-height);
  border-radius: var(--radius-full);
  background: var(--control--track-bg);
  transition: background-color var(--duration-fast);
}

.switch-thumb {
  position: absolute;
  top: var(--switch-thumb-offset);
  left: var(--switch-thumb-offset);
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  border-radius: var(--radius-full);
  background: var(--bg-surface-1);
  transition: transform var(--duration-normal);
}

.switch-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: var(--switch-track-height);
}

.switch-label {
  color: inherit;
  font-size: var(--field-font-size);
  line-height: var(--field-line-height);
}

.switch-hint {
  font-size: var(--element-s-font-size);
  line-height: var(--element-s-line-height);
}

.switch:hover:has(.switch-input:not(:disabled)) .switch-track {
  background: var(--control--track-bg-hover);
}

.switch:active:has(.switch-input:not(:disabled)) .switch-track {
  background: var(--control--track-bg-active);
}

.switch-input:checked + .switch-track {
  background: var(--control--checked-bg);
}

.switch:hover .switch-input:checked:not(:disabled) + .switch-track {
  background: var(--control--checked-bg-hover);
}

.switch:active .switch-input:checked:not(:disabled) + .switch-track {
  background: var(--control--checked-bg-active);
}

.switch-input:checked + .switch-track .switch-thumb {
  transform: translateX(var(--switch-thumb-travel));
}

.switch:has(.switch-input:disabled) {
  color: var(--font-disabled--color);
  cursor: not-allowed;
}

.switch-input:disabled + .switch-track {
  background: var(--control--disabled-bg);
}

.switch-input:disabled + .switch-track .switch-thumb {
  background: var(--control--disabled-mark-color);
}

.switch-field.is-busy .switch {
  cursor: wait;
}

.switch-field.is-invalid {
  & .switch-label {
    color: var(--control--error-color);
  }

  & .switch-track {
    outline: var(--element-border-width) solid var(--control--error-color);
    outline-offset: calc(var(--element-border-width) * -1);
  }

  & .switch-input:checked + .switch-track {
    background: var(--control--error-bg);
  }

  & .switch:hover .switch-input:checked:not(:disabled) + .switch-track {
    background: var(--control--error-bg-hover);
  }

  & .switch:active .switch-input:checked:not(:disabled) + .switch-track {
    background: var(--control--error-bg-active);
  }
}
.badge {
  --badge-color: var(--font-ichi--color);

  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: var(--element-s-height);
  padding-inline: var(--element-s-padding-inline);
  border-radius: var(--radius-full);
  color: var(--badge-color);
  background: color-mix(in srgb, var(--badge-color) 10%, transparent);
  font-size: var(--element-s-font-size);
  font-weight: 500;
  line-height: var(--element-s-line-height);
  vertical-align: middle;
  white-space: nowrap;

  &:is(.badge-accent, .badge-success, .badge-warning, .badge-danger) {
    background: color-mix(in srgb, var(--badge-color) 15%, transparent);
  }
}

.badge-accent {
  --badge-color: var(--font-primary--color);
}

.badge-success {
  --badge-color: var(--font-success--color);
}

.badge-warning {
  --badge-color: var(--font-warning--color);
}

.badge-danger {
  --badge-color: var(--font-danger--color);
}

.badge-archive {
  --badge-color: var(--archive-text-color);

  background: var(--archive-element-bg-color);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--element-gap);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: var(--element-s-height);
  padding-inline: var(--element-s-padding-inline);
  border-radius: var(--radius-full);
  color: var(--element-neutral-soft-color);
  background: var(--element-bg-color);
  font-size: var(--element-s-font-size);
  line-height: var(--element-s-line-height);
  vertical-align: middle;
  white-space: nowrap;

  &:has(.chip-label-action:hover, .chip-remove:hover) {
    color: var(--element-neutral-color-hover);
    background: var(--element-bg-color-hover);
  }

  &:has(.chip-label-action:active, .chip-remove:active) {
    color: var(--element-neutral-color-active);
    background: var(--element-bg-color-active);
  }
}

.chip-removable {
  padding-inline-end: var(--element-gap);
}

.chip-label {
  min-width: 0;
  max-inline-size: var(--px-240);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-label-action {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

.chip-remove {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--element-s-height);
  height: var(--element-s-height);
  border-radius: var(--radius-full);
  color: inherit;
  background: var(--element-transp-bg-color);
  line-height: var(--element-s-line-height);
}

.chip-label-action:focus-visible,
.chip-remove:focus-visible,
:root[data-input-modality="keyboard"] .chip-label-action:focus,
:root[data-input-modality="keyboard"] .chip-remove:focus {
  outline: var(--element-focus-outline-width) var(--element-focus-outline-style) var(--element-focus-outline-color);
  outline-offset: var(--element-focus-outline-offset);
}

.chip-remove-icon {
  width: var(--element-s-icon-size);
  height: var(--element-s-icon-size);

  & svg {
    width: 100%;
    height: 100%;
  }
}
/* Entity color */

:root {
  --entity-white-inset-shadow: inset 0 0 0 var(--px-1) var(--entity-color-white--edge-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color] {
  --entity-color--bg-color: var(--entity-palette-0--bg-color);
  --entity-color--text-color: var(--entity-palette-0--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="0"] {
  --entity-color--bg-color: var(--entity-palette-0--bg-color);
  --entity-color--text-color: var(--entity-palette-0--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="1"] {
  --entity-color--bg-color: var(--entity-palette-1--bg-color);
  --entity-color--text-color: var(--entity-palette-1--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="2"] {
  --entity-color--bg-color: var(--entity-palette-2--bg-color);
  --entity-color--text-color: var(--entity-palette-2--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="3"] {
  --entity-color--bg-color: var(--entity-palette-3--bg-color);
  --entity-color--text-color: var(--entity-palette-3--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="4"] {
  --entity-color--bg-color: var(--entity-palette-4--bg-color);
  --entity-color--text-color: var(--entity-palette-4--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="5"] {
  --entity-color--bg-color: var(--entity-palette-5--bg-color);
  --entity-color--text-color: var(--entity-palette-5--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="6"] {
  --entity-color--bg-color: var(--entity-palette-6--bg-color);
  --entity-color--text-color: var(--entity-palette-6--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="7"] {
  --entity-color--bg-color: var(--entity-palette-7--bg-color);
  --entity-color--text-color: var(--entity-palette-7--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="8"] {
  --entity-color--bg-color: var(--entity-palette-8--bg-color);
  --entity-color--text-color: var(--entity-palette-8--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="9"] {
  --entity-color--bg-color: var(--entity-palette-9--bg-color);
  --entity-color--text-color: var(--entity-palette-9--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="10"] {
  --entity-color--bg-color: var(--entity-palette-10--bg-color);
  --entity-color--text-color: var(--entity-palette-10--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="11"] {
  --entity-color--bg-color: var(--entity-palette-11--bg-color);
  --entity-color--text-color: var(--entity-palette-11--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="12"] {
  --entity-color--bg-color: var(--entity-palette-12--bg-color);
  --entity-color--text-color: var(--entity-palette-12--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="13"] {
  --entity-color--bg-color: var(--entity-palette-13--bg-color);
  --entity-color--text-color: var(--entity-palette-13--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="14"] {
  --entity-color--bg-color: var(--entity-palette-14--bg-color);
  --entity-color--text-color: var(--entity-palette-14--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="15"] {
  --entity-color--bg-color: var(--entity-palette-15--bg-color);
  --entity-color--text-color: var(--entity-palette-15--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="16"] {
  --entity-color--bg-color: var(--entity-palette-16--bg-color);
  --entity-color--text-color: var(--entity-palette-16--text-color);
}

:where(.avatar, .entity-color-surface, .entity-content-nav, .entity-avatar-field-tone-swatch)[data-color="17"] {
  --entity-color--bg-color: var(--entity-palette-17--bg-color);
  --entity-color--text-color: var(--entity-palette-17--text-color);
}

.entity-color-surface[data-color] {
  background-color: var(--entity-color--bg-color);
  color: var(--entity-color--text-color);
}

/* exception: DP/no-visible-lines, DP/no-shadows — white entity surfaces need an inset edge by request. */
.entity-color-surface[data-color="17"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--entity-white-inset-shadow);
  pointer-events: none;
  z-index: 2;
}
.avatar {
  --avatar-size: var(--px-20);
  --avatar-bg-color: color-mix(in srgb, var(--font-ichi--color) 10%, transparent);
  --avatar-text-color: var(--font-ichi--color);

  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  overflow: hidden;
  container-type: size;
  color: var(--avatar-text-color);
  background: var(--avatar-bg-color);
  border-radius: var(--radius-full);
  vertical-align: middle;

  &.avatar-s {
    --avatar-size: var(--px-18);
  }

  &.avatar-l {
    --avatar-size: var(--element-m-height);
  }

  &.avatar-xl {
    --avatar-size: var(--element-l-height);
  }
}

.avatar[data-color] {
  --avatar-bg-color: var(--entity-color--bg-color);
  --avatar-text-color: var(--entity-color--text-color);
}

.avatar-image,
.avatar-initials {
  inline-size: 100%;
  block-size: 100%;
}

.avatar-image {
  display: block;
}

.avatar-fit-cover .avatar-image {
  object-fit: cover;
}

.avatar-fit-contain .avatar-image {
  object-fit: contain;
}

.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 46cqb;
  font-weight: 500;
  line-height: 0.75;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  white-space: nowrap;
  transform: translateY(-0.04em);
  user-select: none;
}

.avatar-image[hidden],
.avatar-initials[hidden] {
  display: none;
}
/* Tooltip */

.tooltip-trigger {
  position: relative;
}

.tooltip {
  position: absolute;
  z-index: var(--z-tooltip);
  color: var(--font-go--color);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity var(--duration-normal) ease-out,
    transform var(--duration-normal) ease-out;
}

.tooltip--top {
  inset-block-end: 100%;
  inset-inline-start: 50%;
  margin-block-end: var(--px-4);
  transform: translateX(-50%) translateY(var(--px-4));
}

.tooltip--bottom {
  inset-block-start: 100%;
  inset-inline-start: 50%;
  margin-block-start: var(--px-4);
  transform: translateX(-50%) translateY(calc(-1 * var(--px-4)));
}

.tooltip-trigger:hover > .tooltip,
.tooltip-trigger:focus-within > .tooltip {
  opacity: 1;
}

.tooltip-trigger:hover > .tooltip--top,
.tooltip-trigger:focus-within > .tooltip--top {
  transform: translateX(-50%) translateY(0);
}

.tooltip-trigger:hover > .tooltip--bottom,
.tooltip-trigger:focus-within > .tooltip--bottom {
  transform: translateX(-50%) translateY(0);
}
.textarea {
  min-height: var(--field-height);
  padding: calc((var(--field-height) - var(--field-line-height)) / 2) var(--field-padding-inline);
  resize: vertical;

  &:disabled {
    resize: none;
  }
}

.textarea-filled {
  border: none;
  background-color: var(--bg-ni--color);
  outline: none;
  box-shadow: none;

  &:hover:not(:disabled) {
    background-color: var(--bg-ni--color-hover);
    outline: none;
    box-shadow: none;
  }

  &:active:not(:disabled) {
    background-color: var(--bg-ni--color-active);
    outline: none;
    box-shadow: none;
  }

  &:focus:not(:disabled) {
    outline: none;
    box-shadow: none;
  }

  &:focus-visible:not(:disabled):not(:read-only) {
    outline-width: var(--element-focus-outline-width);
    outline-style: var(--element-focus-outline-style);
    outline-color: var(--element-field-focus-outline-color);
    outline-offset: var(--element-field-outline-offset);
    box-shadow: none;
  }

  &:read-only {
    outline: none;
    box-shadow: none;
  }

  &:read-only:focus-visible {
    outline: none;
  }

  :root[data-input-modality="keyboard"] &:read-only:focus {
    outline-width: var(--element-focus-outline-width);
    outline-style: var(--element-focus-outline-style);
    outline-color: var(--element-field-focus-outline-color);
    outline-offset: var(--element-field-outline-offset);
  }

  &:disabled {
    background-color: var(--bg-disabled--color);
  }
}

@supports not selector(:focus-visible) {
  .textarea-filled:focus:not(:disabled):not(:read-only) {
    outline-width: var(--element-focus-outline-width);
    outline-style: var(--element-focus-outline-style);
    outline-color: var(--element-field-focus-outline-color);
    outline-offset: var(--element-field-outline-offset);
    box-shadow: none;
  }

  :root[data-input-modality="keyboard"] .textarea-filled:focus:read-only {
    outline-width: var(--element-focus-outline-width);
    outline-style: var(--element-focus-outline-style);
    outline-color: var(--element-field-focus-outline-color);
    outline-offset: var(--element-field-outline-offset);
  }
}
.select {
  padding-inline-end: calc(var(--field-padding-inline) + var(--field-icon-size) + var(--element-gap));
  appearance: none;
  cursor: pointer;

  &:not(:disabled):has(option[data-select-prompt]:checked) {
    color: var(--font-muted--color);
  }

  & option {
    color: var(--font-ichi--color);
  }
}

.select-icon {
  inset-inline-end: var(--field-padding-inline);
}
.choice-field,
.choice-group,
.choice-list {
  align-items: flex-start;
}

.choice-list {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.choice-field {
  width: fit-content;
  max-width: 100%;
}

.choice {
  --choice-size: 1em;

  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .4em;
  max-width: 100%;
  min-height: var(--field-height);
  padding-block: calc((var(--field-height) - var(--field-line-height)) / 2);
  font-size: var(--field-font-size);
  line-height: var(--field-line-height);
  cursor: pointer;
  user-select: text;
}

.field-l .choice {
  --choice-size: 1.25em;
}

.choice-compact {
  justify-content: center;
  width: var(--field-height);
}

.choice-control {
  display: flex;
  flex: 0 0 var(--choice-size);
  align-items: center;
  justify-content: center;
  width: var(--choice-size);
  height: var(--choice-size);
  margin-block-start: calc((var(--field-line-height) - var(--choice-size)) / 2);
  outline: var(--element-border-width) solid var(--control--border-color);
  outline-offset: calc(var(--element-border-width) * -1);
  color: var(--control--checked-mark-color);
  transition:
    background-color var(--duration-fast),
    outline-color var(--duration-fast);
}

.checkbox-control {
  border-radius: calc(var(--choice-size) / 5);

  & svg {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--duration-fast);
  }
}

.radio-control,
.radio-dot {
  border-radius: var(--radius-full);
}

.radio-dot {
  width: calc(var(--choice-size) * .4);
  height: calc(var(--choice-size) * .4);
  background: currentColor;
  opacity: 0;
  transform: scale(.5);
  transition:
    opacity var(--duration-fast),
    transform var(--duration-fast);
}

.choice-label {
  display: inline-flex;
  gap: var(--element-gap);
  flex-wrap: wrap;
}

:where(.choice:hover .choice-input:not(:disabled):not(:checked)) + .choice-control {
  outline-color: var(--control--border-color-hover);
}

:where(.choice:active .choice-input:not(:disabled):not(:checked)) + .choice-control {
  outline-color: var(--control--border-color-active);
}

.choice-input:checked + .choice-control {
  outline-color: transparent;
  background: var(--control--checked-bg);
}

:where(.choice:hover .choice-input:not(:disabled):checked) + .choice-control {
  background: var(--control--checked-bg-hover);
}

:where(.choice:active .choice-input:not(:disabled):checked) + .choice-control {
  background: var(--control--checked-bg-active);
}

.checkbox-input:checked + .checkbox-control svg,
.radio-input:checked + .radio-control .radio-dot {
  opacity: 1;
}

.radio-input:checked + .radio-control .radio-dot {
  transform: scale(1);
}

.choice-input:focus-visible + .choice-control,
:root[data-input-modality="keyboard"] .choice-input:focus + .choice-control {
  outline-width: var(--element-focus-outline-width);
  outline-style: var(--element-focus-outline-style);
  outline-color: var(--control--focus-outline-color);
}

.choice-input:checked:focus-visible + .choice-control,
:root[data-input-modality="keyboard"] .choice-input:checked:focus + .choice-control {
  outline-offset: calc(var(--element-focus-outline-offset) - var(--element-border-width));
}

.choice:has(.choice-input:disabled) {
  color: var(--font-disabled--color);
  cursor: not-allowed;
}

.choice-input:disabled + .choice-control {
  outline-color: var(--control--disabled-bg);
}

.choice-input:disabled:checked + .choice-control {
  outline-color: transparent;
  background: var(--control--disabled-bg);
  color: var(--control--disabled-mark-color);
}

.choice-field.is-locked {
  & .choice {
    color: inherit;
    cursor: default;
  }

  & .choice-input:checked + .choice-control {
    outline-color: transparent;
    background: var(--control--checked-bg);
    color: var(--control--checked-mark-color);
  }
}

.field.is-invalid {
  & .choice-control {
    outline-color: var(--control--error-color);
  }

  & .choice-input:checked + .choice-control {
    outline-color: transparent;
    background: var(--control--error-bg);
    color: var(--font-danger--on);
  }

  & .choice:hover .choice-input:not(:disabled):checked + .choice-control {
    background: var(--control--error-bg-hover);
  }

  & .choice:active .choice-input:not(:disabled):checked + .choice-control {
    background: var(--control--error-bg-active);
  }

  & .choice-input:focus-visible + .choice-control,
  :root[data-input-modality="keyboard"] & .choice-input:focus + .choice-control {
    outline-color: var(--control--error-color);
  }

  & .choice-input:disabled:checked + .choice-control {
    outline-color: var(--control--error-color);
    background: var(--control--disabled-bg);
    color: var(--control--disabled-mark-color);
  }
}

.auth-page {
  position: relative;
  min-height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--block-gap-m);
  padding:
    clamp(var(--px-16), 4vw, var(--px-40))
    clamp(var(--px-16), 4vw, var(--px-40))
    calc(var(--page-gap-m) + var(--section-gap-m));
}

.auth-page-wide {
  justify-content: flex-start;
  padding-block: clamp(var(--px-16), 4vw, var(--px-40));
}

.auth-page-brandless {
  padding-block: clamp(var(--px-16), 4vw, var(--px-40));
}

.auth-logo {
  width: min(100%, 800px);
  height: auto;
}

.auth-footer {
  position: absolute;
  right: clamp(var(--px-16), 4vw, var(--px-40));
  bottom: var(--px-24);
  left: clamp(var(--px-16), 4vw, var(--px-40));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--px-8);
}

.auth-micrographics {
  color: hsl(15, 86%, 50%);
  width: min(100%, 379px);
  max-width: 50%;
}

.auth-micrographics svg {
  display: block;
  width: 100%;
  height: auto;
}

.auth-tagline {
  font-size: var(--px-18);
  line-height: var(--px-24);
}

.auth-card {
  width: min(100%, 32rem);
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-m);
  padding: var(--section-gap-m);
  border-radius: var(--radius-m);
  background-color: var(--bg-surface-1);
}

.auth-card-wide {
  width: min(100%, 800px);
}

.auth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--block-gap-m);
}

.auth-title {
  font-size: var(--px-20);
  line-height: var(--px-24);
}

.auth-title-primary,
.auth-title-email {
  display: block;
  line-height: var(--px-28);
}

.auth-title-email {
  font-weight: 400;
  color: var(--font-success--color);
}

.auth-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--element-gap);
}

.auth-subtitle {
  margin: 0;
  color: var(--font-muted--color);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.auth-header-meta,
.auth-meta {
  color: var(--font-muted--color);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.auth-header-meta {
  white-space: nowrap;
}

.auth-notice {
  font-size: var(--font-size-s);
  line-height: var(--line-height-m);
}

.auth-notice-danger {
  color: var(--font-danger--color);
}

.auth-turnstile {
  display: flex;
  justify-content: center;
}

.auth-copy {
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
}

.auth-secondary-copy {
  color: var(--font-muted--color);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.auth-inline-actions {
  display: flex;
  align-items: baseline;
  gap: var(--element-gap);
  flex-wrap: wrap;
}

.auth-inline-form {
  display: inline;
}

.auth-reset-form {
  width: 100%;
}

.auth-reset-actions {
  margin-top: var(--element-s-padding-inline);
}

.auth-links p {
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.auth-qr-code {
  width: fit-content;
  max-width: 100%;
  padding: var(--px-16);
  border-radius: var(--radius-m);
  color: var(--font-fixed-light--color);
  background: var(--bg-fixed-light--color);

  & svg {
    width: 100%;
    height: auto;
  }
}

.auth-secret {
  overflow-wrap: anywhere;
}

.auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--block-gap-m);
  flex-wrap: wrap;
}

.auth-recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--element-s-padding-inline);

  & li {
    padding: var(--element-m-padding-inline);
    border-radius: var(--radius-m);
    background: var(--element-bg-color);
  }

  & code {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-m);
    line-height: var(--line-height-m);
    overflow-wrap: anywhere;
  }
}

.auth-request-search {
  display: flex;
  align-items: flex-end;
  gap: var(--element-m-padding-inline);
  flex-wrap: wrap;
}

.auth-request-search-field {
  flex: 1 1 280px;
}

.auth-request-list {
  display: flex;
  flex-direction: column;
  gap: var(--element-s-padding-inline);
}

.auth-request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--block-gap-m);
}

.auth-request-copy {
  display: flex;
  flex-direction: column;
  gap: var(--element-gap);
  min-width: 0;
}

.auth-request-main {
  display: flex;
  align-items: baseline;
  gap: var(--element-s-padding-inline);
  min-width: 0;
}

.auth-request-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.auth-request-detail,
.auth-request-pagination-meta {
  color: var(--font-muted--color);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.auth-request-detail {
  min-width: 0;
}

.auth-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--element-s-padding-inline);
  flex-wrap: wrap;
}

.auth-request-action-form {
  margin: 0;
}

.auth-request-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--block-gap-m);

  & > :last-child {
    justify-self: end;
  }
}

.autofill-username {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  inset-inline-start: -10000px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .auth-recovery-codes,
  .auth-request-row {
    grid-template-columns: 1fr;
  }

  .auth-request-actions {
    justify-content: flex-start;
  }

  .auth-request-pagination {
    grid-template-columns: 1fr 1fr;

    & > :first-child {
      grid-column: 1;
      grid-row: 2;
    }

    & > :last-child {
      grid-column: 2;
      grid-row: 2;
    }
  }

  .auth-request-pagination-meta {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }
}