:root {
  --status-success: rgba(16, 185, 129, 1);
  --status-warning: rgba(245, 158, 11, 1);
  --status-error: rgba(239, 68, 68, 1);
  --status-neutral: rgba(148, 163, 184, 1);
  --status-information: rgba(59, 130, 246, 1);

  --presence-active: rgba(212, 245, 222, 1);
  --presence-idle: rgba(255, 244, 221, 1);
  --presence-away: rgba(255, 231, 231, 1);
  --presence-vacation: rgba(225, 236, 255, 1);
  --presence-in-meeting: rgba(236, 229, 255, 1);
  --presence-dnd: rgba(255, 216, 216, 1);

  --notification-success-background-color: rgba(81, 238, 157, 1);
  --notification-warning-background-color: rgba(255, 221, 86, 1);
  --notification-error-background-color: rgba(255, 105, 105, 1);

  --notification-success-text-color: rgba(0, 27, 20, 1);
  --notification-warning-text-color: rgba(120, 53, 15, 1);
  --notification-error-text-color: rgba(255, 255, 255, 1);

  --notification-success-border-color: rgba(52, 211, 153, 1);
  --notification-warning-border-color: rgba(251, 191, 36, 1);
  --notification-error-border-color: rgba(248, 113, 113, 1);
}
.theme-light {
    --theme-id: "light";
    --theme-name: "Light";
    --area-header-background-color: rgba(241, 245, 249, 1);
    --area-sidebar-background-color: rgba(236, 242, 247, 1);
    --area-content-background-color: rgba(248, 250, 252, 1);
    --area-footer-background-color: rgba(241, 245, 249, 1);
    --area-header-text-color: rgba(15, 23, 42, 1);
    --area-sidebar-text-color: rgba(51, 65, 85, 1);
    --area-content-text-color: rgba(51, 65, 85, 1);
    --area-footer-text-color: rgba(71, 85, 105, 1);
    --sidebar-icon-background-color: rgba(204, 251, 241, 1);
    --sidebar-level1-background-color: rgba(236, 242, 247, 1);
    --sidebar-level2-background-color: rgba(248, 250, 252, 1);
    --sidebar-section-icon-fill-color: rgba(15, 118, 140, 1);
    --sidebar-section-indicator-fill-color: rgba(45, 185, 201, 1);
    --sidebar-page-indicator-fill-color: rgba(13, 148, 166, 1);
    --accent-color-intense: rgba(13, 148, 166, 1);
    --accent-color-subtle: rgba(45, 185, 201, 1);
    --sidebar-level1-text-color: rgba(15, 23, 42, 1);
    --sidebar-level2-text-color: rgba(71, 85, 105, 1);
    --surface-level1-background-color: rgba(255, 255, 255, 1);
    --surface-level2-background-color: rgba(248, 250, 252, 1);
    --surface-level3-background-color: rgba(241, 245, 249, 1);
    --surface-level4-background-color: rgba(255, 255, 255, 0.92);
    --surface-context-menu-background-color: rgba(255, 255, 255, 0.98);
    --surface-left-background-color: rgba(15, 118, 140, 1);
    --surface-right-background-color: rgba(248, 250, 252, 1);
    --surface-level1-text-color: rgba(71, 85, 105, 1);
    --surface-level2-text-color: rgba(71, 85, 105, 1);
    --surface-level3-text-color: rgba(51, 65, 85, 1);
    --surface-level4-text-color: rgba(30, 41, 59, 1);
    --surface-context-menu-text-color: rgba(51, 65, 85, 1);
    --surface-level1-header-color: rgba(15, 23, 42, 1);
    --surface-level2-header-color: rgba(15, 23, 42, 1);
    --surface-level3-header-color: rgba(15, 118, 140, 1);
    --surface-level4-header-color: rgba(13, 148, 166, 1);
    --surface-context-menu-header-color: rgba(15, 23, 42, 1);
    --surface-left-text-color: rgba(240, 253, 250, 1);
    --surface-right-text-color: rgba(51, 65, 85, 1);
    --surface-level3-shadow-color: rgba(15, 23, 42, 0.08);
    --surface-level4-shadow-color: rgba(13, 148, 166, 0.14);
    --surface-context-menu-shadow-color: rgba(15, 23, 42, 0.16);
    --surface-level1-border-color: rgba(203, 213, 225, 1);
    --surface-level2-border-color: rgba(226, 232, 240, 1);
    --surface-level3-border-color: rgba(165, 216, 224, 1);
    --surface-level4-border-color: rgba(13, 148, 166, 0.35);
    --surface-context-menu-border-color: rgba(203, 213, 225, 1);
    --buttons-primary-default-background-color: rgba(13, 148, 166, 1);
    --buttons-primary-disabled-background-color: rgba(148, 163, 184, 1);
    --buttons-secondary-default-background-color: rgba(226, 232, 240, 1);
    --buttons-secondary-disabled-background-color: rgba(241, 245, 249, 1);
    --buttons-tertiary-default-background-color: rgba(0, 0, 0, 0);
    --buttons-tertiary-disabled-background-color: rgba(0, 0, 0, 0);
    --buttons-primary-default-text-color: rgba(255, 255, 255, 1);
    --buttons-primary-disabled-text-color: rgba(241, 245, 249, 1);
    --buttons-secondary-default-text-color: rgba(15, 23, 42, 1);
    --buttons-secondary-disabled-text-color: rgba(148, 163, 184, 1);
    --buttons-tertiary-default-text-color: rgba(13, 148, 166, 1);
    --buttons-tertiary-disabled-text-color: rgba(148, 163, 184, 1);
    --buttons-primary-default-border-color: rgba(15, 118, 140, 1);
    --buttons-primary-hover-border-color: rgba(8, 145, 178, 1);
    --buttons-primary-focus-border-color: rgba(6, 182, 212, 1);
    --buttons-secondary-default-border-color: rgba(203, 213, 225, 1);
    --buttons-secondary-hover-border-color: rgba(13, 148, 166, 1);
    --buttons-tertiary-default-border-color: rgba(13, 148, 166, 0.55);
    --buttons-tertiary-hover-border-color: rgba(13, 148, 166, 1);
    --buttons-shadow-color: rgba(13, 148, 166, 0.22);
    --inputs-default-background-color: rgba(255, 255, 255, 1);
    --inputs-invalid-background-color: rgba(254, 242, 242, 1);
    --inputs-disabled-background-color: rgba(241, 245, 249, 1);
    --inputs-default-text-color: rgba(15, 23, 42, 1);
    --inputs-invalid-text-color: rgba(127, 29, 29, 1);
    --inputs-disabled-text-color: rgba(148, 163, 184, 1);
    --inputs-default-native-color-scheme: light;
    --inputs-invalid-native-color-scheme: light;
    --inputs-disabled-native-color-scheme: light;
    --inputs-default-border-color: rgba(203, 213, 225, 1);
    --inputs-hover-border-color: rgba(148, 163, 184, 1);
    --inputs-focus-border-color: rgba(13, 148, 166, 1);
    --inputs-invalid-border-color: rgba(239, 68, 68, 1);
    --inputs-disabled-border-color: rgba(226, 232, 240, 1);
    --inputs-shadow-color: rgba(13, 148, 166, 0.18);
    --controls-default-background-color: rgba(255, 255, 255, 1);
    --controls-invalid-background-color: rgba(70, 24, 30, 1);
    --controls-disabled-background-color: rgba(19, 24, 33, 1);
    --controls-default-text-color: rgba(15, 23, 42, 1);
    --controls-invalid-text-color: rgba(230, 236, 245, 1);
    --controls-disabled-text-color: rgba(151, 163, 179, 1);
    --controls-label-text-color: rgba(71, 85, 105, 1);
    --controls-default-border-color: rgba(15, 23, 42, 1);
    --controls-hover-border-color: rgba(51, 65, 85, 1);
    --controls-focus-border-color: rgba(13, 148, 166, 1);
    --controls-invalid-border-color: rgba(193, 38, 38, 1);
    --controls-disabled-border-color: rgba(70, 80, 97, 1);
    --controls-shadow-color: rgba(15, 23, 42, 0.12);
}

.theme-dark {
    --theme-id: "dark";
    --theme-name: "Dark";
    --area-header-background-color: rgba(11, 18, 32, 1);
    --area-sidebar-background-color: rgba(15, 23, 42, 1);
    --area-content-background-color: rgba(17, 24, 39, 1);
    --area-footer-background-color: rgba(11, 18, 32, 1);
    --area-header-text-color: rgba(226, 232, 240, 1);
    --area-sidebar-text-color: rgba(203, 213, 225, 1);
    --area-content-text-color: rgba(226, 232, 240, 1);
    --area-footer-text-color: rgba(148, 163, 184, 1);
    --sidebar-icon-background-color: rgba(19, 78, 92, 1);
    --sidebar-level1-background-color: rgba(15, 23, 42, 1);
    --sidebar-level2-background-color: rgba(21, 31, 50, 1);
    --sidebar-section-icon-fill-color: rgba(94, 234, 212, 1);
    --sidebar-section-indicator-fill-color: rgba(45, 212, 191, 1);
    --sidebar-page-indicator-fill-color: rgba(34, 211, 238, 1);
    --accent-color-intense: rgba(45, 212, 191, 1);
    --accent-color-subtle: rgba(34, 178, 196, 1);
    --sidebar-level1-text-color: rgba(241, 245, 249, 1);
    --sidebar-level2-text-color: rgba(148, 163, 184, 1);
    --surface-level1-background-color: rgba(30, 41, 59, 1);
    --surface-level2-background-color: rgba(36, 48, 68, 1);
    --surface-level3-background-color: rgba(45, 58, 82, 1);
    --surface-level4-background-color: rgba(51, 65, 85, 0.92);
    --surface-context-menu-background-color: rgba(15, 23, 42, 0.96);
    --surface-left-background-color: rgba(8, 51, 68, 1);
    --surface-right-background-color: rgba(21, 31, 50, 1);
    --surface-level1-text-color: rgba(203, 213, 225, 1);
    --surface-level2-text-color: rgba(203, 213, 225, 1);
    --surface-level3-text-color: rgba(226, 232, 240, 1);
    --surface-level4-text-color: rgba(241, 245, 249, 1);
    --surface-context-menu-text-color: rgba(203, 213, 225, 1);
    --surface-level1-header-color: rgba(248, 250, 252, 1);
    --surface-level2-header-color: rgba(248, 250, 252, 1);
    --surface-level3-header-color: rgba(94, 234, 212, 1);
    --surface-level4-header-color: rgba(45, 212, 191, 1);
    --surface-context-menu-header-color: rgba(248, 250, 252, 1);
    --surface-left-text-color: rgba(204, 251, 241, 1);
    --surface-right-text-color: rgba(203, 213, 225, 1);
    --surface-level3-shadow-color: rgba(2, 6, 23, 0.45);
    --surface-level4-shadow-color: rgba(45, 212, 191, 0.18);
    --surface-context-menu-shadow-color: rgba(2, 6, 23, 0.55);
    --surface-level1-border-color: rgba(71, 85, 105, 1);
    --surface-level2-border-color: rgba(51, 65, 85, 1);
    --surface-level3-border-color: rgba(45, 185, 201, 0.45);
    --surface-level4-border-color: rgba(45, 212, 191, 0.4);
    --surface-context-menu-border-color: rgba(71, 85, 105, 1);
    --buttons-primary-default-background-color: rgba(13, 148, 166, 1);
    --buttons-primary-disabled-background-color: rgba(51, 65, 85, 1);
    --buttons-secondary-default-background-color: rgba(30, 41, 59, 1);
    --buttons-secondary-disabled-background-color: rgba(15, 23, 42, 1);
    --buttons-tertiary-default-background-color: rgba(0, 0, 0, 0);
    --buttons-tertiary-disabled-background-color: rgba(0, 0, 0, 0);
    --buttons-primary-default-text-color: rgba(255, 255, 255, 1);
    --buttons-primary-disabled-text-color: rgba(148, 163, 184, 1);
    --buttons-secondary-default-text-color: rgba(94, 234, 212, 1);
    --buttons-secondary-disabled-text-color: rgba(100, 116, 139, 1);
    --buttons-tertiary-default-text-color: rgba(45, 212, 191, 1);
    --buttons-tertiary-disabled-text-color: rgba(100, 116, 139, 1);
    --buttons-primary-default-border-color: rgba(34, 211, 238, 1);
    --buttons-primary-hover-border-color: rgba(103, 232, 249, 1);
    --buttons-primary-focus-border-color: rgba(165, 243, 252, 1);
    --buttons-secondary-default-border-color: rgba(45, 185, 201, 0.55);
    --buttons-secondary-hover-border-color: rgba(45, 212, 191, 1);
    --buttons-tertiary-default-border-color: rgba(45, 212, 191, 0.45);
    --buttons-tertiary-hover-border-color: rgba(94, 234, 212, 1);
    --buttons-shadow-color: rgba(45, 212, 191, 0.2);
    --inputs-default-background-color: rgba(15, 23, 42, 1);
    --inputs-invalid-background-color: rgba(69, 26, 26, 1);
    --inputs-disabled-background-color: rgba(30, 41, 59, 1);
    --inputs-default-text-color: rgba(226, 232, 240, 1);
    --inputs-invalid-text-color: rgba(254, 226, 226, 1);
    --inputs-disabled-text-color: rgba(100, 116, 139, 1);
    --inputs-default-native-color-scheme: dark;
    --inputs-invalid-native-color-scheme: dark;
    --inputs-disabled-native-color-scheme: dark;
    --inputs-default-border-color: rgba(71, 85, 105, 1);
    --inputs-hover-border-color: rgba(100, 116, 139, 1);
    --inputs-focus-border-color: rgba(45, 212, 191, 1);
    --inputs-invalid-border-color: rgba(248, 113, 113, 1);
    --inputs-disabled-border-color: rgba(51, 65, 85, 1);
    --inputs-shadow-color: rgba(45, 212, 191, 0.16);
    --controls-default-background-color: rgba(45, 58, 82, 1);
    --controls-invalid-background-color: rgba(70, 24, 30, 1);
    --controls-disabled-background-color: rgba(19, 24, 33, 1);
    --controls-default-text-color: rgba(238, 238, 238, 1);
    --controls-invalid-text-color: rgba(230, 236, 245, 1);
    --controls-disabled-text-color: rgba(151, 163, 179, 1);
    --controls-label-text-color: rgba(117, 123, 131, 1);
    --controls-default-border-color: rgba(147, 157, 180, 1);
    --controls-hover-border-color: rgba(34, 178, 196, 1);
    --controls-focus-border-color: rgba(45, 212, 191, 1);
    --controls-invalid-border-color: rgba(193, 38, 38, 1);
    --controls-disabled-border-color: rgba(70, 80, 97, 1);
    --controls-shadow-color: rgba(15, 23, 42, 0.12);
}
:root {
  --areas-and-surfaces-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, Arial, sans-serif;
  --buttons-font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --inputs-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, Arial, sans-serif;
  --controls-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, Arial, sans-serif;

  --area-header-font-size: 1rem;
  --area-sidebar-font-size: 0.75rem;
  --area-content-font-size: 1rem;
  --area-footer-font-size: 1rem;
  --surface-level1-font-size: 0.875rem;
  --surface-level2-font-size: 0.875rem;
  --surface-level3-font-size: 0.875rem;
  --surface-level4-font-size: 0.875rem;
  --surface-context-menu-font-size: 0.75rem;
  --notification-font-size: 0.6875rem;
  --buttons-font-size: 0.75rem;
  --inputs-font-size: 0.75rem;
  --controls-font-size: 0.875rem;
  --controls-label-font-size: 0.7rem;
  --controls-label-float-font-size: 1rem;

  --area-header-font-weight: 600;
  --area-footer-font-weight: 500;
  --area-sidebar-font-weight: 500;
  --area-content-font-weight: 400;
  --surface-level1-font-weight: 400;
  --surface-level2-font-weight: 400;
  --surface-level3-font-weight: 400;
  --surface-level4-font-weight: 400;
  --surface-context-menu-font-weight: 700;
  --notification-font-weight: 400;
  --buttons-font-weight: 600;
  --inputs-font-weight: 100;
  --controls-font-weight: 500;
  --controls-label-font-weight: 600;
}
:root {
  --buttons-padding-top: 0.25rem;
  --buttons-padding-right: 0.25rem;
  --buttons-padding-bottom: 0.25rem;
  --buttons-padding-left: 0.25rem;
  --buttons-min-width: 10rem;
  --buttons-min-height: 0rem;
  --buttons-line-height: 1.2;
  --buttons-content-justify: center;
  --buttons-text-align: center;

  --inputs-padding-top: 6px;
  --inputs-padding-right: 6px;
  --inputs-padding-bottom: 6px;
  --inputs-padding-left: 7px;
  --inputs-min-width: 14rem;
  --inputs-min-height: 0rem;
  --inputs-line-height: 1.2;
  --inputs-text-align: left;

  --surface-level1-padding-top: 15px;
  --surface-level1-padding-right: 15px;
  --surface-level1-padding-bottom: 15px;
  --surface-level1-padding-left: 15px;
  --surface-level1-min-width: 0px;
  --surface-level1-min-height: 0px;
  --surface-level2-padding-top: 0.65rem;
  --surface-level2-padding-right: 0.9rem;
  --surface-level2-padding-bottom: 0.65rem;
  --surface-level2-padding-left: 0.9rem;
  --surface-level2-min-width: 0rem;
  --surface-level2-min-height: 0rem;
  --surface-level3-padding-top: 25px;
  --surface-level3-padding-right: 41px;
  --surface-level3-padding-bottom: 24px;
  --surface-level3-padding-left: 31px;
  --surface-level3-min-width: 0rem;
  --surface-level3-min-height: 0rem;
  --surface-level4-padding-top: 0.5rem;
  --surface-context-menu-padding-top: 0.35rem;
  --surface-level4-padding-right: 0.7rem;
  --surface-context-menu-padding-right: 0.35rem;
  --surface-level4-padding-bottom: 0.5rem;
  --surface-context-menu-padding-bottom: 0.35rem;
  --surface-level4-padding-left: 0.7rem;
  --surface-context-menu-padding-left: 0.35rem;
  --surface-level4-min-width: 0rem;
  --surface-context-menu-min-width: 0rem;
  --surface-level4-min-height: 0rem;
  --surface-context-menu-min-height: 0rem;

  --notification-padding-top: 0.75rem;
  --notification-padding-right: 1rem;
  --notification-padding-bottom: 0.75rem;
  --notification-padding-left: 1rem;
  --notification-min-width: 0rem;
  --notification-min-height: 0rem;

  --controls-padding-top: 0.1875rem;
  --controls-padding-right: 0.1875rem;
  --controls-padding-bottom: 0.1875rem;
  --controls-padding-left: 1.375rem;
  --controls-min-width: 0;
  --controls-min-height: 3.25rem;
  --controls-gap: 0.35rem;
  --controls-line-height: 1.25;
  --controls-text-align: left;
}
:root {
  --buttons-border-width: 1px;
  --buttons-border-style: solid;
  --buttons-border-radius-tl: 0.8089rem;
  --buttons-border-radius-tr: 0.8089rem;
  --buttons-border-radius-br: 0.8089rem;
  --buttons-border-radius-bl: 0.8089rem;

  --inputs-border-width: 1px;
  --inputs-border-style: solid;
  --inputs-border-radius-tl: 7px;
  --inputs-border-radius-tr: 7px;
  --inputs-border-radius-br: 7px;
  --inputs-border-radius-bl: 7px;

  --surface-level1-border-width: 1px;
  --surface-level1-border-style: solid;
  --surface-level1-border-radius-tl: 8px;
  --surface-level1-border-radius-tr: 8px;
  --surface-level1-border-radius-br: 8px;
  --surface-level1-border-radius-bl: 8px;
  --surface-level2-border-width: 1px;
  --surface-level2-border-style: solid;
  --surface-level2-border-radius-tl: 6px;
  --surface-level2-border-radius-tr: 6px;
  --surface-level2-border-radius-br: 6px;
  --surface-level2-border-radius-bl: 6px;
  --surface-level3-border-width: 2px;
  --surface-level3-border-style: solid;
  --surface-level3-border-radius-tl: 8px;
  --surface-level3-border-radius-tr: 8px;
  --surface-level3-border-radius-br: 8px;
  --surface-level3-border-radius-bl: 8px;
  --surface-level4-border-width: 1px;
  --surface-context-menu-border-width: 2px;
  --surface-level4-border-style: solid;
  --surface-context-menu-border-style: solid;
  --surface-level4-border-radius-tl: 15px;
  --surface-context-menu-border-radius-tl: 8px;
  --surface-level4-border-radius-tr: 15px;
  --surface-context-menu-border-radius-tr: 8px;
  --surface-level4-border-radius-br: 15px;
  --surface-context-menu-border-radius-br: 8px;
  --surface-level4-border-radius-bl: 15px;
  --surface-context-menu-border-radius-bl: 8px;

  --notification-border-width: 1px;
  --notification-border-style: solid;
  --notification-border-radius-tl: 0.5rem;
  --notification-border-radius-tr: 0.5rem;
  --notification-border-radius-br: 0.5rem;
  --notification-border-radius-bl: 0.5rem;

  --controls-border-width: 2px;
  --controls-border-style: solid;
  --controls-border-radius-tl: 2.5rem;
  --controls-border-radius-tr: 2.5rem;
  --controls-border-radius-br: 2.5rem;
  --controls-border-radius-bl: 2.5rem;
}
:root {
  --buttons-shadow-offset-x: 0px;
  --buttons-shadow-offset-y: 0px;
  --buttons-shadow-blur: 0px;
  --buttons-shadow-spread: 0px;
  --buttons-shadow-opacity: 0;

  --inputs-shadow-offset-x: 0px;
  --inputs-shadow-offset-y: 0px;
  --inputs-shadow-blur: 0px;
  --inputs-shadow-spread: 0px;
  --inputs-shadow-opacity: 0;

  --surface-level3-shadow-offset-x: 10px;
  --surface-level3-shadow-offset-y: 10px;
  --surface-level3-shadow-blur: 25px;
  --surface-level3-shadow-spread: -14px;
  --surface-level3-shadow-opacity: 77;
  --surface-level4-shadow-offset-x: 18px;
  --surface-context-menu-shadow-offset-x: 0px;
  --surface-level4-shadow-offset-y: 21px;
  --surface-context-menu-shadow-offset-y: 10px;
  --surface-level4-shadow-blur: 32px;
  --surface-context-menu-shadow-blur: 28px;
  --surface-level4-shadow-spread: 0px;
  --surface-context-menu-shadow-spread: 0px;
  --surface-level4-shadow-opacity: 42;
  --surface-context-menu-shadow-opacity: 48;

  --controls-shadow-offset-x: 0px;
  --controls-shadow-offset-y: 0px;
  --controls-shadow-blur: 0px;
  --controls-shadow-spread: 0px;
  --controls-shadow-opacity: 0;
}

/* Fixed platform root; rem tokens resolve against browser default (~16px).
   Not Theme Editor–adjustable. */
html {
    font-size: 100%;
    --heliont-content-area-padding: 1.5rem;
}

/* Compact: scale rem-based type to ~14px.
   Fixed chrome (header 50px) stays unchanged. */
@media (max-width: 768px) {
    html {
        font-size: 87.5%;
        --heliont-content-area-padding: 0.75rem;
    }
}

/* ==================================================================== */
/* AREAS */
/* ==================================================================== */
.heliont-area-header {
    background: var(--area-header-background-color);
    color: var(--area-header-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-header-font-size);
    font-weight: var(--area-header-font-weight);
}

.heliont-area-sidebar {
    background: var(--area-sidebar-background-color);
    color: var(--area-sidebar-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-sidebar-font-size);
    font-weight: var(--area-sidebar-font-weight);
}

.heliont-area-content {
    background: var(--area-content-background-color);
    color: var(--area-content-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-content-font-size);
    font-weight: var(--area-content-font-weight);
    /* border-box keeps the gutter inside full-height application roots. */
    box-sizing: border-box;
    padding: var(--heliont-content-area-padding);
}

/* Application template content column (mainCenter + optional breadcrumb/actionbar
   slots) uses content-area tokens so theme backgrounds fill the viewport. */
#section-breadcrumb,
#section-actionbar,
#section-mainCenter {
    background: var(--area-content-background-color);
    color: var(--area-content-text-color);
    box-sizing: border-box;
}

/* When the breadcrumb band is present, top padding moves to that row so
   content is not double-guttered below the actionbar. */
#section-breadcrumb:not(:empty) + #section-actionbar + #section-mainCenter > .heliont-area-content {
    padding-top: 0;
}

.heliont-area-footer {
    background: var(--area-footer-background-color);
    color: var(--area-footer-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-footer-font-size);
    font-weight: var(--area-footer-font-weight);
}

/* ==================================================================== */
/* SURFACES */
/* ==================================================================== */
.heliont-surface-level1 {
    background: var(--surface-level1-background-color);
    color: var(--surface-level1-text-color);
    border-color: var(--surface-level1-border-color);
    border-width: var(--surface-level1-border-width);
    border-style: var(--surface-level1-border-style);
    border-radius: var(--surface-level1-border-radius-tl) var(--surface-level1-border-radius-tr) var(--surface-level1-border-radius-br) var(--surface-level1-border-radius-bl);
    padding: var(--surface-level1-padding-top) var(--surface-level1-padding-right) var(--surface-level1-padding-bottom) var(--surface-level1-padding-left);
    min-width: var(--surface-level1-min-width);
    min-height: var(--surface-level1-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--surface-level1-font-size);
    font-weight: var(--surface-level1-font-weight);
    box-shadow: none;
}

.heliont-surface-level1 h1,
.heliont-surface-level1 h2,
.heliont-surface-level1 h3,
.heliont-surface-level1 h4,
.heliont-surface-level1 h5,
.heliont-surface-level1 h6 {
    color: var(--surface-level1-header-color);
}

.heliont-surface-level2 {
    background: var(--surface-level2-background-color);
    color: var(--surface-level2-text-color);
    border-color: var(--surface-level2-border-color);
    border-width: var(--surface-level2-border-width);
    border-style: var(--surface-level2-border-style);
    border-radius: var(--surface-level2-border-radius-tl) var(--surface-level2-border-radius-tr) var(--surface-level2-border-radius-br) var(--surface-level2-border-radius-bl);
    padding: var(--surface-level2-padding-top) var(--surface-level2-padding-right) var(--surface-level2-padding-bottom) var(--surface-level2-padding-left);
    min-width: var(--surface-level2-min-width);
    min-height: var(--surface-level2-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--surface-level2-font-size);
    font-weight: var(--surface-level2-font-weight);
    box-shadow: none;
}

.heliont-surface-level2 h1,
.heliont-surface-level2 h2,
.heliont-surface-level2 h3,
.heliont-surface-level2 h4,
.heliont-surface-level2 h5,
.heliont-surface-level2 h6 {
    color: var(--surface-level2-header-color);
}

.heliont-surface-level3 {
    background: var(--surface-level3-background-color);
    color: var(--surface-level3-text-color);
    border-color: var(--surface-level3-border-color);
    border-width: var(--surface-level3-border-width);
    border-style: var(--surface-level3-border-style);
    border-radius: var(--surface-level3-border-radius-tl) var(--surface-level3-border-radius-tr) var(--surface-level3-border-radius-br) var(--surface-level3-border-radius-bl);
    padding: var(--surface-level3-padding-top) var(--surface-level3-padding-right) var(--surface-level3-padding-bottom) var(--surface-level3-padding-left);
    min-width: var(--surface-level3-min-width);
    min-height: var(--surface-level3-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--surface-level3-font-size);
    font-weight: var(--surface-level3-font-weight);
    box-shadow: var(--surface-level3-shadow-offset-x) var(--surface-level3-shadow-offset-y) var(--surface-level3-shadow-blur) var(--surface-level3-shadow-spread) color-mix(in srgb, var(--surface-level3-shadow-color) calc(var(--surface-level3-shadow-opacity) * 1%), transparent);
}

.heliont-surface-level3 h1,
.heliont-surface-level3 h2,
.heliont-surface-level3 h3,
.heliont-surface-level3 h4,
.heliont-surface-level3 h5,
.heliont-surface-level3 h6 {
    color: var(--surface-level3-header-color);
}

.heliont-surface-level4 {
    background: var(--surface-level4-background-color);
    color: var(--surface-level4-text-color);
    border-color: var(--surface-level4-border-color);
    border-width: var(--surface-level4-border-width);
    border-style: var(--surface-level4-border-style);
    border-radius: var(--surface-level4-border-radius-tl) var(--surface-level4-border-radius-tr) var(--surface-level4-border-radius-br) var(--surface-level4-border-radius-bl);
    padding: var(--surface-level4-padding-top) var(--surface-level4-padding-right) var(--surface-level4-padding-bottom) var(--surface-level4-padding-left);
    min-width: var(--surface-level4-min-width);
    min-height: var(--surface-level4-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--surface-level4-font-size);
    font-weight: var(--surface-level4-font-weight);
    box-shadow: var(--surface-level4-shadow-offset-x) var(--surface-level4-shadow-offset-y) var(--surface-level4-shadow-blur) var(--surface-level4-shadow-spread) color-mix(in srgb, var(--surface-level4-shadow-color) calc(var(--surface-level4-shadow-opacity) * 1%), transparent);
}

.heliont-surface-level4 h1,
.heliont-surface-level4 h2,
.heliont-surface-level4 h3,
.heliont-surface-level4 h4,
.heliont-surface-level4 h5,
.heliont-surface-level4 h6 {
    color: var(--surface-level4-header-color);
}

.heliont-surface-context-menu {
    background: var(--surface-context-menu-background-color);
    color: var(--surface-context-menu-text-color);
    border-color: var(--surface-context-menu-border-color);
    border-width: var(--surface-context-menu-border-width);
    border-style: var(--surface-context-menu-border-style);
    border-radius: var(--surface-context-menu-border-radius-tl) var(--surface-context-menu-border-radius-tr) var(--surface-context-menu-border-radius-br) var(--surface-context-menu-border-radius-bl);
    padding: var(--surface-context-menu-padding-top) var(--surface-context-menu-padding-right) var(--surface-context-menu-padding-bottom) var(--surface-context-menu-padding-left);
    min-width: var(--surface-context-menu-min-width);
    min-height: var(--surface-context-menu-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--surface-context-menu-font-size);
    font-weight: var(--surface-context-menu-font-weight);
    box-shadow: var(--surface-context-menu-shadow-offset-x) var(--surface-context-menu-shadow-offset-y) var(--surface-context-menu-shadow-blur) var(--surface-context-menu-shadow-spread) color-mix(in srgb, var(--surface-context-menu-shadow-color) calc(var(--surface-context-menu-shadow-opacity) * 1%), transparent);
}

.heliont-surface-context-menu h1,
.heliont-surface-context-menu h2,
.heliont-surface-context-menu h3,
.heliont-surface-context-menu h4,
.heliont-surface-context-menu h5,
.heliont-surface-context-menu h6 {
    color: var(--surface-context-menu-header-color);
}

.heliont-surface-left {
    background: var(--surface-left-background-color);
    color: var(--surface-left-text-color);
    font-family: var(--areas-and-surfaces-font-family);
}

.heliont-surface-right {
    background: var(--surface-right-background-color);
    color: var(--surface-right-text-color);
    font-family: var(--areas-and-surfaces-font-family);
}

.heliont-notification-success {
    background: var(--notification-success-background-color);
    color: var(--notification-success-text-color);
    border-color: var(--notification-success-border-color);
    border-width: var(--notification-border-width);
    border-style: var(--notification-border-style);
    border-radius: var(--notification-border-radius-tl) var(--notification-border-radius-tr) var(--notification-border-radius-br) var(--notification-border-radius-bl);
    padding: var(--notification-padding-top) var(--notification-padding-right) var(--notification-padding-bottom) var(--notification-padding-left);
    min-width: var(--notification-min-width);
    min-height: var(--notification-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--notification-font-size);
    font-weight: var(--notification-font-weight);
    box-shadow: none;
}

.heliont-notification-warning {
    background: var(--notification-warning-background-color);
    color: var(--notification-warning-text-color);
    border-color: var(--notification-warning-border-color);
    border-width: var(--notification-border-width);
    border-style: var(--notification-border-style);
    border-radius: var(--notification-border-radius-tl) var(--notification-border-radius-tr) var(--notification-border-radius-br) var(--notification-border-radius-bl);
    padding: var(--notification-padding-top) var(--notification-padding-right) var(--notification-padding-bottom) var(--notification-padding-left);
    min-width: var(--notification-min-width);
    min-height: var(--notification-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--notification-font-size);
    font-weight: var(--notification-font-weight);
    box-shadow: none;
}

.heliont-notification-error {
    background: var(--notification-error-background-color);
    color: var(--notification-error-text-color);
    border-color: var(--notification-error-border-color);
    border-width: var(--notification-border-width);
    border-style: var(--notification-border-style);
    border-radius: var(--notification-border-radius-tl) var(--notification-border-radius-tr) var(--notification-border-radius-br) var(--notification-border-radius-bl);
    padding: var(--notification-padding-top) var(--notification-padding-right) var(--notification-padding-bottom) var(--notification-padding-left);
    min-width: var(--notification-min-width);
    min-height: var(--notification-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--notification-font-size);
    font-weight: var(--notification-font-weight);
    box-shadow: none;
}

/* ==================================================================== */
/* TYPE SCALE (em → inherits container rem base)
   Surfaces / areas / notifications set font-size in rem; headings and
   paragraphs scale from that local base via em. */
/* ==================================================================== */
.heliont-area-header h1,
.heliont-area-sidebar h1,
.heliont-area-content h1,
.heliont-area-footer h1,
.heliont-surface-level1 h1,
.heliont-surface-level2 h1,
.heliont-surface-level3 h1,
.heliont-surface-level4 h1,
.heliont-surface-context-menu h1,
.heliont-notification-success h1,
.heliont-notification-warning h1,
.heliont-notification-error h1 {
    font-size: 1.75em;
}

.heliont-area-header h2,
.heliont-area-sidebar h2,
.heliont-area-content h2,
.heliont-area-footer h2,
.heliont-surface-level1 h2,
.heliont-surface-level2 h2,
.heliont-surface-level3 h2,
.heliont-surface-level4 h2,
.heliont-surface-context-menu h2,
.heliont-notification-success h2,
.heliont-notification-warning h2,
.heliont-notification-error h2 {
    font-size: 1.5em;
}

.heliont-area-header h3,
.heliont-area-sidebar h3,
.heliont-area-content h3,
.heliont-area-footer h3,
.heliont-surface-level1 h3,
.heliont-surface-level2 h3,
.heliont-surface-level3 h3,
.heliont-surface-level4 h3,
.heliont-surface-context-menu h3,
.heliont-notification-success h3,
.heliont-notification-warning h3,
.heliont-notification-error h3 {
    font-size: 1.25em;
}

.heliont-area-header h4,
.heliont-area-sidebar h4,
.heliont-area-content h4,
.heliont-area-footer h4,
.heliont-surface-level1 h4,
.heliont-surface-level2 h4,
.heliont-surface-level3 h4,
.heliont-surface-level4 h4,
.heliont-surface-context-menu h4,
.heliont-notification-success h4,
.heliont-notification-warning h4,
.heliont-notification-error h4 {
    font-size: 1.125em;
}

.heliont-area-header h5,
.heliont-area-sidebar h5,
.heliont-area-content h5,
.heliont-area-footer h5,
.heliont-surface-level1 h5,
.heliont-surface-level2 h5,
.heliont-surface-level3 h5,
.heliont-surface-level4 h5,
.heliont-surface-context-menu h5,
.heliont-notification-success h5,
.heliont-notification-warning h5,
.heliont-notification-error h5 {
    font-size: 1em;
}

.heliont-area-header h6,
.heliont-area-sidebar h6,
.heliont-area-content h6,
.heliont-area-footer h6,
.heliont-surface-level1 h6,
.heliont-surface-level2 h6,
.heliont-surface-level3 h6,
.heliont-surface-level4 h6,
.heliont-surface-context-menu h6,
.heliont-notification-success h6,
.heliont-notification-warning h6,
.heliont-notification-error h6 {
    font-size: 0.875em;
}

.heliont-area-header p,
.heliont-area-sidebar p,
.heliont-area-content p,
.heliont-area-footer p,
.heliont-surface-level1 p,
.heliont-surface-level2 p,
.heliont-surface-level3 p,
.heliont-surface-level4 p,
.heliont-surface-context-menu p,
.heliont-notification-success p,
.heliont-notification-warning p,
.heliont-notification-error p {
    font-size: 1em;
}

/* ==================================================================== */
/* STATUS INDICATORS & PILLS */
/* ==================================================================== */
.heliont-status-indicator {
    display: inline-block;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--status-neutral);
    vertical-align: middle;
}

.heliont-status-indicator--success {
    background: var(--status-success);
}

.heliont-status-indicator--warning {
    background: var(--status-warning);
}

.heliont-status-indicator--error {
    background: var(--status-error);
}

.heliont-status-indicator--information {
    background: var(--status-information);
}

.heliont-status-pill--information {
    background: var(--status-information);
}

.heliont-status-indicator--neutral {
    background: var(--status-neutral);
}

.heliont-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-family: var(--areas-and-surfaces-font-family);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1.3;
    color: var(--surface-level1-text-color);
    background: var(--status-neutral);
}

.heliont-status-pill--success {
    background: var(--status-success);
}

.heliont-status-pill--warning {
    background: var(--status-warning);
}

.heliont-status-pill--error {
    background: var(--status-error);
}

.heliont-status-pill--neutral {
    background: var(--status-neutral);
}

.heliont-separator {
    width: 100%;
    height: 0;
    border: 0;
    border-top: 1px solid var(--accent-color-subtle);
    margin: 6px 0;
    display: block;
    opacity: 1;
}

.heliont-surface-level1 .heliont-separator {
    border-top-color: var(--accent-color-intense);
}

.heliont-surface-level2 .heliont-separator,
.heliont-surface-level3 .heliont-separator,
.heliont-surface-level4 .heliont-separator,
.heliont-surface-context-menu .heliont-separator,
.heliont-surface-left .heliont-separator,
.heliont-surface-right .heliont-separator {
    border-top-color: var(--accent-color-subtle);
}

/* ==================================================================== */
/* BUTTONS */
/* ==================================================================== */
.heliont-button {
    background: var(--buttons-primary-default-background-color);
    color: var(--buttons-primary-default-text-color);
    border-color: var(--buttons-primary-default-border-color);
    border-width: var(--buttons-border-width);
    border-style: var(--buttons-border-style);
    border-radius: var(--buttons-border-radius-tl) var(--buttons-border-radius-tr) var(--buttons-border-radius-br) var(--buttons-border-radius-bl);
    padding: var(--buttons-padding-top) var(--buttons-padding-right) var(--buttons-padding-bottom) var(--buttons-padding-left);
    min-width: var(--buttons-min-width);
    min-height: var(--buttons-min-height);
    box-sizing: border-box;
    display: inline-flex;
    justify-content: var(--buttons-content-justify);
    align-items: center;
    text-align: var(--buttons-text-align);
    line-height: var(--buttons-line-height);
    font-family: var(--buttons-font-family);
    font-size: var(--buttons-font-size);
    font-weight: var(--buttons-font-weight);
    box-shadow: var(--buttons-shadow-offset-x) var(--buttons-shadow-offset-y) var(--buttons-shadow-blur) var(--buttons-shadow-spread) color-mix(in srgb, var(--buttons-shadow-color) calc(var(--buttons-shadow-opacity) * 1%), transparent);
}

.heliont-button--primary,
.heliont-button--primary:hover,
.heliont-button--primary:focus,
.heliont-button--primary:focus-visible,
.heliont-button--primary:active {
    background: var(--buttons-primary-default-background-color);
    color: var(--buttons-primary-default-text-color);
}

.heliont-button--primary,
.heliont-button--primary:active {
    border-color: var(--buttons-primary-default-border-color);
}

.heliont-button--primary:hover {
    border-color: var(--buttons-primary-hover-border-color);
}

.heliont-button--primary:focus,
.heliont-button--primary:focus-visible {
    border-color: var(--buttons-primary-focus-border-color);
}

.heliont-button--primary:disabled {
    background: var(--buttons-primary-disabled-background-color);
    color: var(--buttons-primary-disabled-text-color);
    border-color: var(--buttons-primary-default-border-color);
}

.heliont-button--secondary,
.heliont-button--secondary:hover,
.heliont-button--secondary:focus,
.heliont-button--secondary:focus-visible,
.heliont-button--secondary:active {
    background: var(--buttons-secondary-default-background-color);
    color: var(--buttons-secondary-default-text-color);
}

.heliont-button--secondary,
.heliont-button--secondary:focus,
.heliont-button--secondary:focus-visible,
.heliont-button--secondary:active {
    border-color: var(--buttons-secondary-default-border-color);
}

.heliont-button--secondary:hover {
    border-color: var(--buttons-secondary-hover-border-color);
}

.heliont-button--secondary:disabled {
    background: var(--buttons-secondary-disabled-background-color);
    color: var(--buttons-secondary-disabled-text-color);
    border-color: var(--buttons-secondary-default-border-color);
}

.heliont-button--tertiary,
.heliont-button--tertiary:hover,
.heliont-button--tertiary:focus,
.heliont-button--tertiary:focus-visible,
.heliont-button--tertiary:active {
    background: var(--buttons-tertiary-default-background-color);
    color: var(--buttons-tertiary-default-text-color);
}

.heliont-button--tertiary,
.heliont-button--tertiary:focus,
.heliont-button--tertiary:focus-visible,
.heliont-button--tertiary:active {
    border-color: var(--buttons-tertiary-default-border-color);
}

.heliont-button--tertiary:hover {
    border-color: var(--buttons-tertiary-hover-border-color);
}

.heliont-button--tertiary:disabled {
    background: var(--buttons-tertiary-disabled-background-color);
    color: var(--buttons-tertiary-disabled-text-color);
    border-color: var(--buttons-tertiary-default-border-color);
}

/* ==================================================================== */
/* BUTTON ACTIONS */
/* ==================================================================== */
.heliont-button--action {
    --heliont-action-button-size: calc((var(--buttons-line-height) * var(--buttons-font-size)) + var(--buttons-padding-top) + var(--buttons-padding-bottom) + (var(--buttons-border-width) * 2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--heliont-action-button-size);
    min-width: var(--heliont-action-button-size);
    height: var(--heliont-action-button-size);
    min-height: var(--heliont-action-button-size);
    padding: 0;
    border-width: var(--buttons-border-width);
    border-style: var(--buttons-border-style);
    border-color: var(--surface-level3-border-color);
    border-radius: 999px;
    background: var(--surface-level2-background-color);
    color: inherit;
    line-height: 1;
    box-sizing: border-box;
    cursor: pointer;
}

.heliont-button--action:hover {
    border-color: var(--surface-level4-border-color);
}

.heliont-button--action:focus,
.heliont-button--action:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-color-intense) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--accent-color-intense);
}

.heliont-button--action-close {
    background: transparent;
    border-color: transparent;
}

.heliont-button--action-close:hover,
.heliont-button--action-close:focus,
.heliont-button--action-close:focus-visible,
.heliont-button--action-close:active {
    background: transparent;
    border-color: transparent;
    outline: none;
}

.heliont-button--action-add {
    border-color: color-mix(in srgb, var(--accent-color-intense) 45%, var(--surface-level3-border-color));
    color: var(--accent-color-intense);
}

.heliont-button--action-remove {
    border-color: var(--inputs-invalid-border-color);
    color: var(--inputs-invalid-border-color);
}

/* ==================================================================== */
/* INPUTS */
/* ==================================================================== */
.heliont-inputs,
.heliont-input,
.heliont-textbox,
.heliont-select,
.heliont-textarea,
.heliont-fileinput,
.heliont-numberbox {
    background: var(--inputs-default-background-color);
    color: var(--inputs-default-text-color);
    border-color: var(--inputs-default-border-color);
    border-width: var(--inputs-border-width);
    border-style: var(--inputs-border-style);
    border-radius: var(--inputs-border-radius-tl) var(--inputs-border-radius-tr) var(--inputs-border-radius-br) var(--inputs-border-radius-bl);
    padding: var(--inputs-padding-top) var(--inputs-padding-right) var(--inputs-padding-bottom) var(--inputs-padding-left);
    min-width: var(--inputs-min-width);
    min-height: var(--inputs-min-height);
    box-sizing: border-box;
    text-align: var(--inputs-text-align);
    line-height: var(--inputs-line-height);
    font-family: var(--inputs-font-family);
    font-size: var(--inputs-font-size);
    font-weight: var(--inputs-font-weight);
    box-shadow: var(--inputs-shadow-offset-x) var(--inputs-shadow-offset-y) var(--inputs-shadow-blur) var(--inputs-shadow-spread) color-mix(in srgb, var(--inputs-shadow-color) calc(var(--inputs-shadow-opacity) * 1%), transparent);
    color-scheme: var(--inputs-default-native-color-scheme);
}

.heliont-numberbox::-webkit-inner-spin-button,
.heliont-numberbox::-webkit-outer-spin-button {
    opacity: 1;
    height: calc(var(--inputs-min-height, 2.25rem) - var(--inputs-padding-top, 0.375rem) - var(--inputs-padding-bottom, 0.375rem));
    margin: 0;
    cursor: pointer;
}

.heliont-inputs-default,
.heliont-inputs-hover,
.heliont-inputs-focus {
    background: var(--inputs-default-background-color);
    color: var(--inputs-default-text-color);
}

.heliont-inputs-default {
    border-color: var(--inputs-default-border-color);
}

.heliont-inputs-hover {
    border-color: var(--inputs-hover-border-color);
}

.heliont-inputs-focus {
    border-color: var(--inputs-focus-border-color);
}

.heliont-inputs-invalid {
    background: var(--inputs-invalid-background-color);
    color: var(--inputs-invalid-text-color);
    border-color: var(--inputs-invalid-border-color);
    color-scheme: var(--inputs-invalid-native-color-scheme);
}

.heliont-inputs-disabled {
    background: var(--inputs-disabled-background-color);
    color: var(--inputs-disabled-text-color);
    border-color: var(--inputs-disabled-border-color);
    color-scheme: var(--inputs-disabled-native-color-scheme);
}

.heliont-input:hover,
.heliont-textbox:hover,
.heliont-select:hover,
.heliont-textarea:hover,
.heliont-fileinput:hover,
.heliont-numberbox:hover,
.heliont-inputs-default:hover,
.heliont-inputs-hover {
    background: var(--inputs-default-background-color);
    color: var(--inputs-default-text-color);
    border-color: var(--inputs-hover-border-color);
}

.heliont-input:focus,
.heliont-textbox:focus,
.heliont-select:focus,
.heliont-textarea:focus,
.heliont-fileinput:focus,
.heliont-numberbox:focus,
.heliont-input:focus-visible,
.heliont-textbox:focus-visible,
.heliont-select:focus-visible,
.heliont-textarea:focus-visible,
.heliont-fileinput:focus-visible,
.heliont-numberbox:focus-visible,
.heliont-inputs-default:focus,
.heliont-inputs-default:focus-visible,
.heliont-inputs-focus {
    background: var(--inputs-default-background-color);
    color: var(--inputs-default-text-color);
    border-color: var(--inputs-focus-border-color);
}

.heliont-input:invalid,
.heliont-textbox:invalid,
.heliont-select:invalid,
.heliont-textarea:invalid,
.heliont-fileinput:invalid,
.heliont-numberbox:invalid,
.heliont-input[aria-invalid="true"],
.heliont-textbox[aria-invalid="true"],
.heliont-select[aria-invalid="true"],
.heliont-textarea[aria-invalid="true"],
.heliont-fileinput[aria-invalid="true"],
.heliont-numberbox[aria-invalid="true"],
.heliont-input.is-invalid,
.heliont-textbox.is-invalid,
.heliont-select.is-invalid,
.heliont-textarea.is-invalid,
.heliont-fileinput.is-invalid,
.heliont-numberbox.is-invalid,
.heliont-inputs-invalid {
    background: var(--inputs-invalid-background-color);
    color: var(--inputs-invalid-text-color);
    border-color: var(--inputs-invalid-border-color);
    color-scheme: var(--inputs-invalid-native-color-scheme);
}

.heliont-input:disabled,
.heliont-textbox:disabled,
.heliont-select:disabled,
.heliont-textarea:disabled,
.heliont-fileinput:disabled,
.heliont-numberbox:disabled,
.heliont-inputs-default:disabled,
.heliont-inputs-disabled {
    background: var(--inputs-disabled-background-color);
    color: var(--inputs-disabled-text-color);
    border-color: var(--inputs-disabled-border-color);
    color-scheme: var(--inputs-disabled-native-color-scheme);
}

.heliont-select {
    appearance: none;
    -webkit-appearance: none;
}

/* ==================================================================== */
/* CONTROLS (self-contained field chrome; parallel to inputs) */
/* Shell height = content + padding (+ border); min-height is a floor.  */
/* ==================================================================== */
.heliont-control {
    display: block;
    width: 100%;
    min-width: var(--controls-min-width, 0);
    box-sizing: border-box;
    --heliont-control-placeholder-animation-ms: 180ms;
    /* Label A = upper left (0). Label B / value X = +15px from A. */
    --heliont-control-text-indent: 15px;
    --heliont-control-motion: cubic-bezier(0.22, 1, 0.36, 1);
}

.heliont-control__frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: stretch;
    width: 100%;
    height: auto;
    min-height: var(--controls-min-height, 3.75rem);
    max-height: none;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    background-color: var(--controls-default-background-color, var(--inputs-default-background-color));
    background: var(--controls-default-background-color, var(--inputs-default-background-color));
    color: var(--controls-default-text-color, var(--inputs-default-text-color));
    border-color: var(--controls-default-border-color, var(--inputs-default-border-color));
    border-width: var(--controls-border-width, 2px);
    border-style: var(--controls-border-style, solid);
    border-radius: var(--controls-border-radius-tl, 1.25rem) var(--controls-border-radius-tr, 1.25rem) var(--controls-border-radius-br, 1.25rem) var(--controls-border-radius-bl, 1.25rem);
    box-shadow: var(--controls-shadow-offset-x, 0) var(--controls-shadow-offset-y, 0) var(--controls-shadow-blur, 0) var(--controls-shadow-spread, 0) color-mix(in srgb, var(--controls-shadow-color, transparent) calc(var(--controls-shadow-opacity, 0) * 1%), transparent);
    font-family: var(--controls-font-family, var(--inputs-font-family));
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.heliont-control:hover .heliont-control__frame {
    border-color: var(--controls-hover-border-color, var(--inputs-hover-border-color));
}

.heliont-control.heliont-control--focused .heliont-control__frame,
.heliont-control:focus-within .heliont-control__frame {
    border-color: var(--controls-focus-border-color, var(--inputs-focus-border-color));
}

.heliont-control.heliont-control--invalid .heliont-control__frame {
    background: var(--controls-invalid-background-color, var(--inputs-invalid-background-color));
    color: var(--controls-invalid-text-color, var(--inputs-invalid-text-color));
    border-color: var(--controls-invalid-border-color, var(--inputs-invalid-border-color));
}

.heliont-control.heliont-control--disabled .heliont-control__frame,
.heliont-control[aria-disabled="true"] .heliont-control__frame {
    background: var(--controls-disabled-background-color, var(--inputs-disabled-background-color));
    color: var(--controls-disabled-text-color, var(--inputs-disabled-text-color));
    border-color: var(--controls-disabled-border-color, var(--inputs-disabled-border-color));
    pointer-events: none;
}

/* ---- Left data: sole left hit target; children are display-only until focused input ---- */
.heliont-control__data {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
    gap: 0.12rem;
    margin: 0;
    box-sizing: border-box;
    padding-top: var(--controls-padding-top, 0.4rem);
    padding-right: var(--controls-padding-right, 0.5rem);
    padding-bottom: var(--controls-padding-bottom, 0.4rem);
    padding-left: var(--controls-padding-left, 0.85rem);
    cursor: text;
}

/* Empty resting: vertically center Label B inside the padded data area */
.heliont-control.heliont-control--empty:not(.heliont-control--focused) .heliont-control__data {
    justify-content: center;
}

.heliont-control--catalog .heliont-control__data,
.heliont-control--flag .heliont-control__data,
.heliont-control--toggle .heliont-control__data {
    cursor: pointer;
}

.heliont-control__label {
    display: block;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    margin: 0;
    /* Label A — upper left */
    padding: 0;
    text-align: left;
    color: var(--controls-label-text-color, var(--controls-default-text-color, inherit));
    font-family: inherit;
    font-size: calc(var(--controls-font-size, 1rem) * 0.7);
    font-weight: var(--controls-font-weight, 600);
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: none;
    will-change: padding-left, font-size;
    transition:
        padding-left var(--heliont-control-placeholder-animation-ms, 180ms) var(--heliont-control-motion),
        font-size var(--heliont-control-placeholder-animation-ms, 180ms) var(--heliont-control-motion),
        font-weight var(--heliont-control-placeholder-animation-ms, 180ms) var(--heliont-control-motion);
}

/* Label B — empty resting: +15px right of A, vertically centered via data flex */
.heliont-control.heliont-control--empty:not(.heliont-control--focused) .heliont-control__label {
    padding-left: var(--heliont-control-text-indent);
    transform: none;
}

.heliont-control.heliont-control--float-label.heliont-control--empty:not(.heliont-control--focused) .heliont-control__label {
    font-size: var(--controls-font-size, 1rem);
    font-weight: var(--controls-font-weight, 600);
}

/* Label A — filled / focused */
.heliont-control.heliont-control--filled .heliont-control__label,
.heliont-control.heliont-control--focused .heliont-control__label {
    padding-left: 0;
    transform: none;
}

.heliont-control__value {
    display: flex;
    flex: 0 0 auto;
    align-self: stretch;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: 1.35rem;
    margin: 0;
    /* Value — ONE position: 15px right of label A */
    padding: 0 0 0 var(--heliont-control-text-indent);
    box-sizing: border-box;
    text-align: left;
    pointer-events: none;
    opacity: 1;
    max-height: 2.5rem;
    overflow: hidden;
    transition:
        opacity var(--heliont-control-placeholder-animation-ms, 180ms) var(--heliont-control-motion),
        max-height var(--heliont-control-placeholder-animation-ms, 180ms) var(--heliont-control-motion),
        min-height var(--heliont-control-placeholder-animation-ms, 180ms) var(--heliont-control-motion);
}

.heliont-control__value *,
.heliont-control__label * {
    pointer-events: none;
}

.heliont-control.heliont-control--focused .heliont-control__value input.heliont-control__input:not([type="hidden"]):not([type="checkbox"]),
.heliont-control.heliont-control--focused .heliont-control__value textarea.heliont-control__input {
    pointer-events: auto;
}

.heliont-control.heliont-control--empty:not(.heliont-control--focused) .heliont-control__value {
    min-height: 0;
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--heliont-control-text-indent);
    padding-right: 0;
}

@media (prefers-reduced-motion: reduce) {
    .heliont-control__label,
    .heliont-control__value {
        transition: none;
    }
}

.heliont-control__input,
.heliont-control__value .heliont-control__input,
.heliont-control__value input.heliont-control__input,
.heliont-control__value button.heliont-control__input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-size: var(--controls-font-size, 1rem);
    font-weight: var(--controls-font-weight, 600);
    line-height: var(--controls-line-height, 1.25);
    text-align: left;
    outline: none;
}

.heliont-control__value button.heliont-control__input {
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 1.35rem;
}

/* ---- Right actions (each column stretches with the shell) ---- */
.heliont-control__actions {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

.heliont-control__actions > * {
    align-self: stretch;
    height: auto;
    min-height: 100%;
    box-sizing: border-box;
}

.heliont-control__action svg,
.heliont-control__chevron svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.heliont-control__chevron svg {
    width: 1.125rem;
    height: 1.125rem;
}

.heliont-control__stepper button svg {
    width: 0.9375rem;
    height: 0.9375rem;
}

.heliont-control__action,
.heliont-control__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--accent-color-intense);
    cursor: pointer;
    opacity: 0.85;
}

.heliont-control__chevron {
    opacity: 0.72;
}

.heliont-control__action:hover,
.heliont-control__chevron:hover {
    background: transparent;
    opacity: 1;
}

.heliont-control__action:focus-visible,
.heliont-control__chevron:focus-visible {
    background: transparent;
    outline: 2px solid color-mix(in srgb, currentColor 45%, transparent);
    outline-offset: -2px;
}

.heliont-control__stepper {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.25rem;
    margin: 0;
    padding: 0;
    gap: 0.1rem;
}

.heliont-control__stepper button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 0.85rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--accent-color-intense);
    cursor: pointer;
}

.heliont-control__stepper button:hover,
.heliont-control__stepper button:focus-visible {
    background: transparent;
}

.heliont-control__required {
    margin-left: 0.15rem;
    opacity: 0.75;
}


.heliont-textarea {
    resize: vertical;
}

.heliont-range {
    accent-color: var(--buttons-primary-default-background-color);
}

.heliont-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.heliont-radio__input {
    margin: 0;
    accent-color: var(--buttons-primary-default-background-color);
}

.heliont-radio__label {
    color: var(--inputs-default-text-color);
    font-family: var(--inputs-font-family);
    font-size: var(--inputs-font-size);
    font-weight: var(--inputs-font-weight);
    line-height: var(--inputs-line-height);
}

.heliont-toggle {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.4rem;
}

.heliont-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.heliont-toggle__slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    border-width: var(--inputs-border-width);
    border-style: var(--inputs-border-style);
    border-color: var(--inputs-default-border-color);
    border-radius: 999px;
    background: var(--inputs-default-background-color);
    transition: background-color 0.2s, border-color 0.2s;
}

.heliont-toggle__slider::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    left: 0.15rem;
    top: 50%;
    border-radius: 50%;
    background: var(--inputs-default-text-color);
    transform: translateY(-50%);
    transition: transform 0.2s, background-color 0.2s;
}

.heliont-toggle__input:checked+.heliont-toggle__slider {
    background: var(--accent-color-intense);
    border-color: var(--accent-color-intense);
}

.heliont-toggle__input:checked+.heliont-toggle__slider::before {
    transform: translateY(-50%) translateX(1.05rem);
    background: var(--buttons-primary-default-text-color);
}

.heliont-toggle__input:focus+.heliont-toggle__slider,
.heliont-toggle__input:focus-visible+.heliont-toggle__slider {
    border-color: var(--inputs-focus-border-color);
}

.heliont-toggle__input:disabled+.heliont-toggle__slider {
    background: var(--inputs-disabled-background-color);
    border-color: var(--inputs-disabled-border-color);
}

.heliont-toggle__input:disabled+.heliont-toggle__slider::before {
    background: var(--inputs-disabled-text-color);
}

/* Range slider — same token family as .heliont-toggle (inputs + accent). */
.heliont-slider {
    --heliont-slider-track-thickness: 0.35rem;
    --heliont-slider-thumb-size: 1rem;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    color: var(--accent-color-intense);
}

.heliont-slider:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.heliont-slider--horizontal {
    width: 100%;
    height: var(--heliont-slider-thumb-size);
}

/*
 * Vertical: keep appearance:none (custom thumb/track) and rotate a horizontal
 * control. --heliont-slider-length is the visual track length (axis after rotate).
 * Min sits at the top after rotate(90deg).
 */
.heliont-slider--vertical {
    -webkit-appearance: none;
    appearance: none;
    writing-mode: horizontal-tb;
    direction: ltr;
    width: var(--heliont-slider-length, 8rem);
    height: var(--heliont-slider-thumb-size);
    transform: rotate(90deg);
    transform-origin: center center;
}

.heliont-slider::-webkit-slider-runnable-track {
    box-sizing: border-box;
    width: 100%;
    height: var(--heliont-slider-track-thickness);
    border-width: var(--inputs-border-width);
    border-style: var(--inputs-border-style);
    border-color: var(--inputs-default-border-color);
    border-radius: 999px;
    background: var(--inputs-default-background-color);
}

.heliont-slider--horizontal::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--heliont-slider-track-thickness);
}

.heliont-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: var(--heliont-slider-thumb-size);
    height: var(--heliont-slider-thumb-size);
    margin-top: calc((var(--heliont-slider-track-thickness) - var(--heliont-slider-thumb-size)) / 2);
    border-radius: 50%;
    border-width: var(--inputs-border-width);
    border-style: var(--inputs-border-style);
    border-color: var(--accent-color-intense);
    background: var(--buttons-primary-default-text-color, #fff);
    box-shadow: 0 1px 3px color-mix(in srgb, #000 22%, transparent);
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.heliont-slider:focus::-webkit-slider-thumb,
.heliont-slider:focus-visible::-webkit-slider-thumb {
    border-color: var(--inputs-focus-border-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color-intense) 28%, transparent);
}

.heliont-slider:disabled::-webkit-slider-thumb {
    border-color: var(--inputs-disabled-border-color);
    background: var(--inputs-disabled-background-color);
    box-shadow: none;
}

.heliont-slider::-moz-range-track {
    box-sizing: border-box;
    width: 100%;
    height: var(--heliont-slider-track-thickness);
    border-width: var(--inputs-border-width);
    border-style: var(--inputs-border-style);
    border-color: var(--inputs-default-border-color);
    border-radius: 999px;
    background: var(--inputs-default-background-color);
}

.heliont-slider--horizontal::-moz-range-track {
    height: var(--heliont-slider-track-thickness);
}

.heliont-slider::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--heliont-slider-thumb-size);
    height: var(--heliont-slider-thumb-size);
    border-radius: 50%;
    border-width: var(--inputs-border-width);
    border-style: var(--inputs-border-style);
    border-color: var(--accent-color-intense);
    background: var(--buttons-primary-default-text-color, #fff);
    box-shadow: 0 1px 3px color-mix(in srgb, #000 22%, transparent);
}

.heliont-slider:focus::-moz-range-thumb,
.heliont-slider:focus-visible::-moz-range-thumb {
    border-color: var(--inputs-focus-border-color);
}

.heliont-slider:disabled::-moz-range-thumb {
    border-color: var(--inputs-disabled-border-color);
    background: var(--inputs-disabled-background-color);
    box-shadow: none;
}

.heliont-color-swatch {
    appearance: none;
    -webkit-appearance: none;
    --heliont-swatch-input-height: calc((var(--inputs-line-height) * var(--inputs-font-size)) + var(--inputs-padding-top) + var(--inputs-padding-bottom) + (var(--inputs-border-width) * 2));
    width: calc(var(--heliont-swatch-input-height) * 1.5);
    min-width: calc(var(--heliont-swatch-input-height) * 1.5);
    max-width: calc(var(--heliont-swatch-input-height) * 1.5);
    height: var(--heliont-swatch-input-height);
    min-height: var(--heliont-swatch-input-height);
    max-height: var(--heliont-swatch-input-height);
    padding: 0;
    display: inline-flex;
    align-items: stretch;
    justify-content: stretch;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
}

.heliont-color-swatch__preview {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border-top-left-radius: max(0px, calc(var(--inputs-border-radius-tl) - var(--inputs-border-width)));
    border-top-right-radius: max(0px, calc(var(--inputs-border-radius-tr) - var(--inputs-border-width)));
    border-bottom-right-radius: max(0px, calc(var(--inputs-border-radius-br) - var(--inputs-border-width)));
    border-bottom-left-radius: max(0px, calc(var(--inputs-border-radius-bl) - var(--inputs-border-width)));
    padding: 0;
}

.heliont-gradient-preview,
.heliont-background-preview {
    padding: 0;
    min-width: 0;
    min-height: 0;
}

.heliont-gradient-preview {
    border-color: var(--surface-level2-border-color);
}

.heliont-background-preview {
    border-color: var(--surface-level2-border-color);
}

.heliont-background-anchor-grid,
.heliont-background-quality {
    color: var(--area-content-text-color);
    border-color: var(--surface-level2-border-color);
}




/* ==================================================================== */
/* SEARCH */
/* ==================================================================== */
.heliont-search {
    position: relative;
    width: 100%;
}

.heliont-search__field {
    position: relative;
    width: 100%;
}

.heliont-search__input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 2.1rem;
    /* Host owns width; don't inherit the generic inputs min-width floor. */
    min-width: 0;
}

.heliont-search__input:focus,
.heliont-search__input:focus-visible {
    outline: none;
}

.heliont-search__input::-webkit-search-cancel-button,
.heliont-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.heliont-search__clear {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--status-error, #ef4444);
    cursor: pointer;
}

.heliont-search__clear:hover {
    background: color-mix(in srgb, var(--status-error, #ef4444) 12%, transparent);
}

.heliont-search__clear:focus,
.heliont-search__clear:focus-visible {
    outline: none;
}

.heliont-search__clear[hidden] {
    display: none;
}

.heliont-search__clear-icon {
    display: block;
}


/* ==================================================================== */
/* SIDEBAR */
/* ==================================================================== */
.heliont-sidebar-section {
    background: var(--sidebar-level1-background-color);
    color: var(--sidebar-level1-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-sidebar-font-size);
    font-weight: var(--area-sidebar-font-weight);
}

.heliont-sidebar-page {
    background: var(--sidebar-level2-background-color);
    color: var(--sidebar-level2-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-sidebar-font-size);
    font-weight: var(--area-sidebar-font-weight);
}

.heliont-sidebar-page[aria-current="true"],
.heliont-sidebar-page[aria-current="page"],
.heliont-sidebar-page--active {
    background: var(--sidebar-level2-background-color);
    color: var(--sidebar-level2-text-color);
}

.heliont-sidebar-indicator {
    background: var(--sidebar-page-indicator-fill-color);
}

.heliont-area-sidebar .page>.heliont-sidebar-indicator {
    background: var(--sidebar-page-indicator-fill-color);
}

.heliont-sidebar-section-icon {
    color: var(--sidebar-section-icon-fill-color);
}

.heliont-sidebar-section-chevron {
    color: var(--accent-color-intense);
}

/* ==================================================================== */
/* Signal Sidebar (Signal-specific variants) */
/* ==================================================================== */
.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-group {
    background: var(--sidebar-level1-background-color);
    color: var(--sidebar-level1-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-sidebar-font-size);
    font-weight: var(--area-sidebar-font-weight);
}

.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-chat,
.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-channel {
    background: var(--sidebar-level2-background-color);
    color: var(--sidebar-level2-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-sidebar-font-size);
    font-weight: var(--area-sidebar-font-weight);
}

.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-chat[aria-current="true"],
.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-channel[aria-current="true"],
.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-chat--active,
.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-channel--active {
    background: var(--sidebar-level2-background-color);
    color: var(--sidebar-level2-text-color);
}

.heliont-area-sidebar.heliont-sidebar-signal .heliont-signal-sidebar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--sidebar-level2-text-color);
    cursor: pointer;
    border-radius: 6px;
}

.heliont-area-sidebar.heliont-sidebar-signal .heliont-signal-sidebar-action:hover {
    background: rgba(0, 0, 0, 0.06);
}

.heliont-area-sidebar.heliont-sidebar-signal.is-collapsed .heliont-signal-sidebar-action {
    display: none;
}

/* ==================================================================== */
/* Signal Context Menu (theme-driven) */
/* ==================================================================== */
#heliont-signal-contextmenu_root {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    background: transparent;
    pointer-events: none; /* allow outside clicks */
}

#heliont-signal-contextmenu_root ul.heliont-contextmenu {
    position: absolute;
    min-width: 180px;
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: var(--heliont-overlay-shadow);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    font-size: var(--heliont-font-size-sm);
    backdrop-filter: blur(4px);
    animation: heliontFadeInMenu 80ms ease-out;
    pointer-events: auto;
    opacity: 0;
}

#heliont-signal-contextmenu_root ul.heliont-contextmenu li {
    padding: 6px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}

#heliont-signal-contextmenu_root ul.heliont-contextmenu li:hover {
    background: transparent;
}

#heliont-signal-contextmenu_root ul.heliont-contextmenu li:active {
    background: transparent;
}

#heliont-signal-contextmenu_root ul.heliont-contextmenu hr {
    margin: 4px 0;
    border: none;
    border-top: 1px solid currentColor;
}

@keyframes heliontFadeInMenu {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================================================================== */
/* RESPONSIVE / COMPACT (<=768px)                                       */
/* On narrow viewports the branded minimum widths for buttons and       */
/* inputs are the main cause of horizontal overflow: a single control   */
/* wider than the viewport forces the whole layout wider. Release the   */
/* floor so controls shrink to their container; apps opt into           */
/* full-width controls where appropriate.                               */
/* ==================================================================== */
@media (max-width: 768px) {
    .heliont-button {
        min-width: 0;
    }

    .heliont-inputs,
    .heliont-input,
    .heliont-textbox,
    .heliont-select,
    .heliont-textarea,
    .heliont-fileinput,
    .heliont-numberbox {
        min-width: 0;
        max-width: 100%;
        /* Absolute 16px floor — independent of Theme Editor --inputs-font-size
           and of compact html rem scaling — so mobile browsers do not auto-zoom. */
        font-size: max(16px, var(--inputs-font-size, 1rem));
    }

    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="color"]),
    textarea,
    select {
        font-size: max(16px, var(--inputs-font-size, 1em));
    }

    /* Halve content-area and surface paddings on compact viewports. */
    .heliont-area-content {
        padding: var(--heliont-content-area-padding);
    }

    .heliont-surface-level1 {
        padding:
            calc(var(--surface-level1-padding-top) * 0.5)
            calc(var(--surface-level1-padding-right) * 0.5)
            calc(var(--surface-level1-padding-bottom) * 0.5)
            calc(var(--surface-level1-padding-left) * 0.5);
    }

    .heliont-surface-level2 {
        padding:
            calc(var(--surface-level2-padding-top) * 0.5)
            calc(var(--surface-level2-padding-right) * 0.5)
            calc(var(--surface-level2-padding-bottom) * 0.5)
            calc(var(--surface-level2-padding-left) * 0.5);
    }

    .heliont-surface-level3 {
        padding:
            calc(var(--surface-level3-padding-top) * 0.5)
            calc(var(--surface-level3-padding-right) * 0.5)
            calc(var(--surface-level3-padding-bottom) * 0.5)
            calc(var(--surface-level3-padding-left) * 0.5);
    }

    .heliont-surface-level4 {
        padding:
            calc(var(--surface-level4-padding-top) * 0.5)
            calc(var(--surface-level4-padding-right) * 0.5)
            calc(var(--surface-level4-padding-bottom) * 0.5)
            calc(var(--surface-level4-padding-left) * 0.5);
    }

    .heliont-surface-context-menu {
        padding:
            calc(var(--surface-context-menu-padding-top) * 0.5)
            calc(var(--surface-context-menu-padding-right) * 0.5)
            calc(var(--surface-context-menu-padding-bottom) * 0.5)
            calc(var(--surface-context-menu-padding-left) * 0.5);
    }
}